:root {
  --bg:#0b0e15; --s1:#111620; --s2:#171c2a; --s3:#1d2335;
  --border:#252d40; --border2:#2e384e;
  --accent:#ff4500; --aglow:rgba(255,69,0,.2);
  --amber:#ffab00; --green:#00e5a0; --yellow:#ffe600;
  --orange:#ff7700; --red:#ff2020; --extreme:#cc00ff;
  --text:#e8edf8; --muted:#8c97b5; --muted2:#5a6480;
  --mono:'Share Tech Mono',monospace;
  --cond:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
}

/* ── LIGHT MODE ── */
html.light {
  --bg:#f0f3f8; --s1:#ffffff; --s2:#edf1f8; --s3:#e4e9f4;
  --border:#cdd5e8; --border2:#b8c2d8;
  --text:#1a2035; --muted:#5a6480; --muted2:#8892aa;
  /* accent/danger colors unchanged — they need to read the same in both themes */
}
html.light body { background:var(--bg) }
html.light body::after {
  background-image:linear-gradient(rgba(255,69,0,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,69,0,.04) 1px,transparent 1px);
}
html.light header {
  background:rgba(240,243,248,.96);
}
html.light .briefbtn { background:var(--s2) }
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh}
body::after{content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(255,69,0,.015) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,69,0,.015) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;z-index:0}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.85}50%{opacity:.6}53%{opacity:.85}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes rot{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}