/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text-primary);
  display:flex;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:14px;
  line-height:1.5;
}

/* ── Design tokens ───────────────────────────────────────────── */
:root{
  --font-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius-sm:6px;
  --radius-md:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.08);
  --sw:228px;

  /* dark (default) */
  --bg:#0a0a0b;
  --surface:#111113;
  --surface-2:#17181a;
  --border:#232427;
  --border-strong:#33353a;
  --text-primary:#e7e8ea;
  --text-secondary:#8a8f98;
  --text-tertiary:#5c6066;
  --accent:#6e7ff3;
  --accent-hover:#8089f5;
  --accent-contrast:#ffffff;
  --accent-bg:#6e7ff31a;
  --accent-border:#6e7ff340;
  --danger:#e5645c;
  --danger-bg:#e5645c14;
  --danger-border:#e5645c38;
  --success:#4cb782;
  --success-bg:#4cb78214;
  --success-border:#4cb78238;
}

:root[data-theme="light"]{
  --bg:#ffffff;
  --surface:#fafafb;
  --surface-2:#f1f1f3;
  --border:#e6e6e9;
  --border-strong:#d4d4d9;
  --text-primary:#16171a;
  --text-secondary:#6b6f76;
  --text-tertiary:#9a9ea5;
  --accent:#4752c4;
  --accent-hover:#3c46ab;
  --accent-contrast:#ffffff;
  --accent-bg:#4752c40f;
  --accent-border:#4752c430;
  --danger:#c8413a;
  --danger-bg:#c8413a0f;
  --danger-border:#c8413a30;
  --success:#1f8a57;
  --success-bg:#1f8a570f;
  --success-border:#1f8a5730;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#sb{width:var(--sw);min-width:var(--sw);height:100vh;position:sticky;top:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.sb-top{padding:20px 18px;border-bottom:1px solid var(--border)}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-mark{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-mark svg{width:13px;height:13px;fill:var(--accent-contrast)}
.sb-name{font-size:14px;font-weight:600;letter-spacing:-.1px}
.sb-ver{font-size:10px;color:var(--text-tertiary);font-family:var(--font-mono);margin-top:1px}
.sb-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:1px;overflow-y:auto}
.ns{font-size:10px;font-weight:600;color:var(--text-tertiary);letter-spacing:.7px;text-transform:uppercase;font-family:var(--font-mono);padding:14px 10px 6px}
.ni{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:background .1s,color .1s;user-select:none;border:1px solid transparent}
.ni:hover{background:var(--surface-2);color:var(--text-primary)}
.ni.on{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.ni svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sb-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-row{display:flex;align-items:center;gap:7px;min-width:0}
.st-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}
.st-dot.off{background:var(--danger)}
.st-lbl{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-icon-btn{width:26px;height:26px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .1s}
.sb-icon-btn:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--surface-2)}
.sb-icon-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Main / pages ────────────────────────────────────────────── */
#main{flex:1;min-width:0;height:100vh;overflow-y:auto}
.pg{display:none;padding:40px 44px;min-height:100%}
.pg.on{display:block}
.pg-h{margin-bottom:30px}
.pg-t{font-size:21px;font-weight:600;letter-spacing:-.2px;line-height:1.2}
.pg-s{font-size:13px;color:var(--text-secondary);margin-top:5px;line-height:1.55}

/* ── Auth ────────────────────────────────────────────────────── */
#pg-auth{display:flex;align-items:center;justify-content:center;padding:0;min-height:100vh}
.ac{width:100%;max-width:340px;text-align:center;padding:40px 20px}
.a-emb{width:48px;height:48px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.a-emb svg{width:19px;height:19px;stroke:var(--text-secondary);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.a-t{font-size:18px;font-weight:600;margin-bottom:7px;letter-spacing:-.1px}
.a-s{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:22px}
.a-f{display:flex;gap:8px}
.a-err{color:var(--danger);font-size:12px;font-family:var(--font-mono);margin-top:10px;display:none}

@media(max-width:680px){
  body{flex-direction:column}
  #sb{width:100%;min-width:0;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border);padding:14px 14px 0}
  .sb-nav{flex-direction:row;flex-wrap:wrap;gap:4px;padding:10px 0}
  .ns,.sb-foot,.sb-ver{display:none}
  .ni{font-size:12px;padding:6px 9px}
  #main{height:auto}
  .pg{padding:22px 18px}
}