/* Design tokens (light + dark) and base styles, from the approved prototype. */
:root{
  --ground:#ECEDF3; --surface:#FFFFFF; --surface-2:#F6F6FA; --ink:#17162B; --muted:#62617A; --faint:#9594AC;
  --line:#E0E0EA; --brand:#3B2F8F; --brand-ink:#FFFFFF; --brand-soft:#ECE9FB; --brand-text:#3B2F8F;
  --ok:#1C7A52; --ok-soft:#E3F3EB; --warn:#A8520A; --warn-soft:#FDF0E1; --crit:#B4232B; --crit-soft:#FBE7E8;
  --lcd-bg:#1A1740; --lcd-ink:#F1EFFF; --lcd-dim:#A5A0D6; --lcd-line:#2E2A62; --lcd-warn:#FFB56B;
  --lcd-ok:#86E3B8; --lcd-crit:#FF9096;
  --scrim:rgba(10,8,30,.45);
  --shadow:0 30px 60px -30px rgba(28,22,80,.35),0 12px 24px -16px rgba(28,22,80,.2);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sidebar-w:320px; --right-w:360px; --topbar-h:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C0B17; --surface:#16152A; --surface-2:#1D1C34; --ink:#ECEBF8; --muted:#A09FBA; --faint:#6F6E8C;
    --line:#2A2944; --brand:#9C8FFF; --brand-ink:#15122E; --brand-soft:#252149; --brand-text:#B9B0FF;
    --ok:#5FD3A0; --ok-soft:#15302A; --warn:#F5A55A; --warn-soft:#342413; --crit:#FF7A80; --crit-soft:#3A181D;
    --lcd-bg:#0A091A; --lcd-ink:#F1EFFF; --lcd-dim:#8F8AC4; --lcd-line:#25224D; --lcd-warn:#FFB56B;
    --scrim:rgba(0,0,0,.6); --shadow:0 30px 60px -30px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0C0B17; --surface:#16152A; --surface-2:#1D1C34; --ink:#ECEBF8; --muted:#A09FBA; --faint:#6F6E8C;
  --line:#2A2944; --brand:#9C8FFF; --brand-ink:#15122E; --brand-soft:#252149; --brand-text:#B9B0FF;
  --ok:#5FD3A0; --ok-soft:#15302A; --warn:#F5A55A; --warn-soft:#342413; --crit:#FF7A80; --crit-soft:#3A181D;
  --lcd-bg:#0A091A; --lcd-ink:#F1EFFF; --lcd-dim:#8F8AC4; --lcd-line:#25224D; --lcd-warn:#FFB56B;
  --scrim:rgba(0,0,0,.6); --shadow:0 30px 60px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hint{font-size:12px;color:var(--muted);margin-top:8px}
.hint .num,.hint b{color:var(--ink)}
.hint.flush{margin:0}
.crit-text{color:var(--crit)}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border-radius:5px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}