:root {
  --bg:#0b1117; --panel:#111827; --muted:#9CA3AF; --fg:#E5E7EB;
  --accent:#10B981; --accent-2:#34D399; --success:#22C55E; --error:#EF4444;
  --stroke:#1F2937; --terminal:#0d1320; --terminal-stroke:#1b2332;
}
*{box-sizing:border-box}
body {
  margin:0; padding:0;
  background:radial-gradient(1200px 600px at 20% -10%, rgba(16,185,129,.15), transparent 40%), var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center; min-height:100vh;
}

/* === HEADER === */
header.site-header {
  width:100%;
  background:#0e1623;
  border-bottom:1px solid var(--stroke);
  padding:16px 32px;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  position:sticky; top:0; z-index:10;
}
.logo { font-weight:700; font-size:18px; color:var(--fg); letter-spacing:.3px; }
.logo span { color:var(--accent); }
.tagline { font-size:13px; color:var(--muted); }

/* === MAIN CARD === */
.shell {
  width:100%; max-width:980px;
  background:linear-gradient(180deg,var(--panel),#0e1623);
  border:1px solid var(--stroke); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  margin:32px 0;
}
.grid { padding:20px 24px; }
label { color:var(--muted); font-size:13px; margin-bottom:6px; display:block; }

textarea {
  width:100%; min-height:180px;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--stroke);
  background:#0b1220; color:var(--fg);
  font:500 13px/1.5 "JetBrains Mono",monospace;
  resize:vertical; outline:none;
}
textarea:focus { border-color:#263247; box-shadow:0 0 0 4px rgba(37,99,235,.08); }

.actions {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin-top:18px;
}
.btn {
  border:none; cursor:pointer; padding:10px 16px;
  border-radius:10px; font-weight:600;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary {
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#052016;
}
.btn-ghost { background:#0e1623; color:var(--fg); border:1px solid var(--stroke); }
.btn-outline { background:transparent; color:var(--fg); border:1px solid var(--stroke); }

/* === TERMINAL === */
.terminal {
  margin:12px 24px 24px;
  background:var(--terminal);
  border:1px solid var(--terminal-stroke);
  border-radius:12px;
}
.term-head {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--terminal-stroke);
  background:#0b1322; color:#b7c3d7; font:600 12px Inter;
}
.dots { display:flex; gap:6px; margin-right:8px; }
.dot { width:9px; height:9px; border-radius:50%; }
.dot.red{background:#ef4444}
.dot.yellow{background:#f59e0b}
.dot.green{background:#10b981}
.screen {
  padding:14px 16px 18px;
  font:500 13px/1.7 "JetBrains Mono",monospace;
  color:#d6e2f1; white-space:pre-wrap;
  min-height:160px; max-height:420px; overflow:auto;
}
.ok{color:var(--success);}
.err{color:var(--error);}
.dim{color:#8b98ab;}
.muted-footer {
  color:var(--muted);
  padding:0 24px 24px;
  font:500 12px/1.6 Inter;
  text-align:center;
}
.swal-custom {
  width: 100%;
  background: #091524;
  border: 1px solid #1e293b;
  color: #f1f5f9;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}


/* === FOOTER === */
footer.site-footer {
  width:100%; border-top:1px solid var(--stroke);
  background:#0e1623; text-align:center;
  color:#94a3b8;
  padding:14px 24px; font:500 13px/1.6 Inter, sans-serif;
  margin-top:auto;
}
footer.site-footer span { color:var(--accent); }