:root {
  --green: #5af78e;
  --green-mid: #3ad06a;
  --green-dim: #2a8f4a;
  --bg: #0c0f0c;
  --panel: #11151180;
  --border: #1c2a1c;
  --border-hi: #2d4a2d;
  --text: #b8c9b8;
  --muted: #5e7a60;
  --amber: #f4bf75;
  --red: #ff5c57;
  --radius: 4px;
}

* {
  box-sizing:border-box;
  margin:   0;
  padding: 0;
}
body {
  font-family:  'JetBrains Mono', 'Courier New', monospace;
  background: #0a0d0a;
  background-image:radial-gradient(circle at 20% 0%, #0f1a0f 0%, #0a0d0a 55%);
  color:  var(--text);
  min-height:100vh;
  padding:36px 20px;
  font-size:14px;
  line-height: 1.55;
}


body::before {
  content: "";
  position:fixed;
  inset: 0;
  background:  repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.15) 1px, transparent 2px, transparent 3px);
  pointer-events:none;
  opacity: 0.35;
  z-index: 999;
}

.container {
  max-width:1060px;
  margin: 0 auto;
}


header {
  margin-bottom:28px;
  padding:   16px 18px;
  border:1px solid var(--border-hi);
  border-radius: var(--radius);
  background: rgba(17,21,17,0.5);
}

header h1 {
  font-size:1.35rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}

header h1::before {
  content: "$ ";
  color: var(--green);
}

header h1 .accent {
  color: var(--green);
}

header p {
  color: var(--muted);
  margin-top: 6px;
font-size: 0.85rem;
}

header p::before {
  content: "# ";
  color: var(--green-dim);
}

.grid {
  display:  grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
    align-items:start;
}

@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr;
  }
  body {
    padding: 24px 14px;
  }
}


.panel {
  background: var(--panel);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  overflow: hidden;
}


.panel::before {
  display:  block;
  font-size:8px;
 letter-spacing:5px;
  color: #3a4a3a;
 padding: 9px 14px;
  background: #0e120e;
    border-bottom: 1px solid var(--border);
}

.panel-inner {
padding: 18px  18px 22px;
}

.panel h2 {
font-size: 0.95rem ;
    font-weight:500;
  margin-bottom: 16px;
  color: var(--green);
  display:  flex;
align-items: center;
  gap: 8px;
}

.panel h2::before {
  content:  "ROOT@KALI";
  color: var(--muted);
  font-weight:400;
font-size:  0.8rem;
}

.badge {
  display:  none;
}


label {
  display:block;
font-size: 0.75rem;
  color:  var(--muted);
margin:15px 0 6px;
  font-weight:   400;
}

label::before {
  content: "> ";
color:  var(--green-dim);
}

label:first-of-type {
margin-top:0;
}


textarea, input[type="text"], input[type="password"] {
  width: 100%;
  background: #070a07;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 11px;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.12s;
  resize: vertical;
}

textarea {
  min-height: 100px;
  line-height: 1.6;
}

textarea::placeholder, input::placeholder {
  color: #38513a;
}

textarea:focus, input:focus {
  outline: none;
  border-color: var(--green-dim);
}


input[readonly], textarea[readonly] {
  color: var(--green);
  background: #050705;
  border-style: dashed;
  border-color: var(--border);
}


.btn {
width:100%;
margin-top: 16px;
  padding: 9px;
   border: 1px solid var(--green-dim);
border-radius: var(--radius);
background: transparent;
  color: var(--green);
font-size: 0.85rem;
font-weight: 500;
font-family: inherit;
  cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.btn::before {
  content: "[ ";
  color: var(--green-dim);
}

.btn::after {
  content: " ]";
  color: var(--green-dim);
}

.btn:hover {
  background: var(--green-dim);
  color: #0a0d0a;
}

.btn:hover::before, .btn:hover::after {
  color: #0a0d0a;
}

.btn:active {
  background: var(--green-mid);
}

.btn.dec-btn {
  border-color: var(--border-hi);
  color: var(--amber);
}

.btn.dec-btn::before, .btn.dec-btn::after {
  color: #6e5a34;
}

.btn.dec-btn:hover {
  background: rgba(244, 191, 117, 0.12);
  color: var(--amber);
}

.btn.dec-btn:hover::before, .btn.dec-btn:hover::after {
  color: var(--amber);
}


.output-block {
  margin-top: 16px;
}

.output-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.copy-btn {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--muted);
  padding: 2px 9px;
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: 6px;
}

.copy-btn:hover {
  color: var(--green);
  border-color: var(--green-dim);
}

.copy-btn.copied {
  color: var(--green);
  border-color: var(--green-dim);
}

.copy-btn.copied::before {
  content: "✓ ";
}


.key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.key-row input {
  flex: 1;
  min-width: 0;
}

.gen-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--green-dim);
  border-radius: var(--radius);
  color: var(--green);
  padding: 9px 13px;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  letter-spacing: 0.01em;
}

.gen-btn::before {
  content: "~$ ";
  color: var(--green-dim);
  font-size: 0.7rem;
  transition: color 0.12s;
}

.gen-btn:hover {
  background: rgba(90, 247, 142, 0.1);
  border-color: var(--green);
  color: var(--green);
}

.gen-btn:hover::before {
  color: var(--green);
}

.gen-btn:active {
  background: var(--green-dim);
  color: #0a0d0a;
}

.gen-btn:active::before {
  color: #0a0d0a;
}


.error-msg {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 12px;
  display: none;
  padding: 8px 11px;
  background: rgba(255, 92, 87, 0.08);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.error-msg::before {
  content: "[error] ";
  opacity: 0.8;
}

.error-msg.show {
  display: block;
}



textarea:focus, input:focus {
  caret-color: var(--green);
}

::selection {
  background: var(--green-dim);
  color: #0a0d0a;
}


::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #0a0d0a;
}

::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-dim);
}


#toastBox {
  position:fixed;
  bottom:24px;
  right:24px;
  display:flex;
  flex-direction:column;
   gap:10px;
  z-index:9999;
}

.toast {
  min-width:260px;
  max-width:340px;
  background: #0e120e;
  border:1px solid var(--border-hi);
  border-left:3px solid var(--green);
  border-radius:var(--radius);
  padding:12px 14px;
  color:var(--text);
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  line-height:1.4;
  box-shadow:0 6px 24px rgba(0, 0, 0, 0.5);
  opacity:0;
  transform:translateX(40px);
  animation:toastIn 0.3s ease forwards;
  position:relative;
  overflow:hidden;
}

.toast.success {
  border-left-color:var(--green);
}

.toast.error {
  border-left-color:var(--red);
}

.toast.info {
  border-left-color:var(--amber);
}

.toast .toast-title {
  font-weight:700;
  margin-bottom:3px;
}

.toast.success .toast-title {
  color:var(--green);
}
 
.toast.error .toast-title {
  color:var(--red);
}

.toast.info .toast-title {
  color:var(--amber);
}

.toast .toast-title::before {
  margin-right:6px;
}

.toast.success .toast-title::before {
  content:"[ SUCCESSFUL ]";
}

.toast.error .toast-title::before {
  content:"[ UNSUCCESSFUL ]";
}

.toast.info .toast-title::before {
  content:"[ i ]";
}

.toast .toast-msg {
  color:var(--muted);
}

.toast .toast-bar {
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:100%;
  background:var(--green-dim);
  animation:toastBar 5s linear forwards;
}

.toast.error .toast-bar {
  background: var(--red);
}

.toast.info .toast-bar {
  background: var(--amber);
}

.toast.hide {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
  to {
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform:  translateX(40px);
  }
}

@keyframes toastBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@media (max-width: 500px) {
  #toastBox {
    left:14px;
    right:14px;
    bottom: 14px;
  }
  .toast {
    max-width:  none;
  }
}