:root{ --bg:#0b0f14; --panel:#141a22; --muted:#96a0ad; --fg:#e6edf3; --pri:#3b82f6; --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --br:16px; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,Segoe UI,Roboto,Inter,sans-serif; }
.container{ max-width:960px; margin:24px auto; padding:0 16px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--panel); position:sticky; top:0; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.brand{ font-weight:700; letter-spacing:.2px; }
.card{ background:var(--panel); border-radius:var(--br); padding:20px; margin:16px 0; box-shadow:0 6px 30px rgba(0,0,0,.35); }
.card.center{ text-align:center; }
label{ display:block; margin:8px 0 6px; color:var(--muted); }
input[type=text],input[type=password],input[type=number]{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #263041; background:#0e141b; color:var(--fg); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--pri); color:#fff; border:none; padding:10px 16px; border-radius:12px; cursor:pointer; text-decoration:none; font-weight:600; }
.btn:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; border:1px solid #2a3545; color:var(--fg); }
.alert{ background:#211115; border:1px solid var(--err); color:#ffdfe4; padding:10px 12px; border-radius:12px; margin:12px 0; }
.muted{ color:var(--muted); font-size:.9em; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.grid .full{ grid-column: 1 / -1; }
.segmented{ display:inline-grid; grid-template-columns:repeat(6,auto); gap:0; border:1px solid #2a3545; border-radius:12px; overflow:hidden; }
.segmented input{ display:none; }
.segmented label{ padding:10px 14px; background:#0e141b; border-right:1px solid #2a3545; cursor:pointer; user-select:none; }
.segmented label:last-child{ border-right:none; }
.segmented input:checked + label{ background:var(--pri); color:#fff; }
.output{ min-height:320px; max-height:60vh; overflow:auto; background:#0a0e13; border:1px solid #283244; border-radius:12px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap; }