/* LineForge "Graphite" design system. Loaded AFTER lf.css (legacy layers); this file is the single source of truth for tokens.
   Direction: restrained graphite surfaces, ONE brand accent (gold), green/red only for money, Inter only, flat bordered panels, 8/12px radii. */
:root{
 /* ---- canonical Graphite tokens ---- */
 --g-bg:#07090d;--g-panel:#0c1117;--g-panel-2:#111821;--g-panel-3:#16202b;--g-panel-4:#1b2735;
 --g-line:#1a2430;--g-line-2:#243040;
 --g-t1:#eaf0f7;--g-t2:#a3b2c4;--g-t3:#7b8da3;
 --g-brand:#d8b66a;--g-brand-hi:#e8cf92;--g-brand-lo:#a9894a;--g-brand-ink:#16120a;--g-brand-dim:rgba(216,182,106,.12);--g-brand-line:rgba(216,182,106,.38);
 --g-pos:#2fd27c;--g-pos-dim:rgba(47,210,124,.12);--g-neg:#ff5a67;--g-neg-dim:rgba(255,90,103,.12);--g-warn:#f2b84b;--g-info:#5aa9ff;
 --g-r1:8px;--g-r2:12px;--g-pill:999px;--g-ease:cubic-bezier(.2,.7,.2,1);
 --g-fs-1:.75rem;--g-fs-2:.8125rem;--g-fs-3:.875rem;--g-fs-4:1rem;--g-fs-5:1.25rem;--g-fs-6:1.75rem;
 /* ---- legacy variable names re-pointed to Graphite (so every old rule inherits the new palette) ---- */
 --bg:var(--g-bg);--bg2:#0a0e13;--panel:var(--g-panel);--panel2:var(--g-panel-2);--panel3:var(--g-panel-3);--s4:var(--g-panel-4);
 --line:var(--g-line);--line2:#141d28;--bd-strong:var(--g-line-2);--lg:var(--g-brand-line);
 --ink:var(--g-t1);--mut:var(--g-t2);--dim:var(--g-t3);
 --gold:var(--g-brand);--gold2:var(--g-brand-hi);--gold3:var(--g-brand-lo);--gold-bg:var(--g-brand-dim);--gold-bd:var(--g-brand-line);
 --green:var(--g-pos);--green2:#22b868;--green-bg:var(--g-pos-dim);--red:var(--g-neg);--red-bg:var(--g-neg-dim);--amber:var(--g-warn);--blue:var(--g-info);--violet:#9d8cf0;
 --r:var(--g-r2);--r2:var(--g-r1);--r-sm:6px;--sh:none;--ease:var(--g-ease);--side:232px;
 --focus:0 0 0 2px var(--g-bg),0 0 0 4px var(--g-brand-hi);
}
html{color-scheme:dark}
body{background:var(--g-bg);color:var(--g-t1);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums lining-nums}
::selection{background:rgba(216,182,106,.32)}

/* ===================== 3. Shell: ambient background, rail, top bar ===================== */
/* Ambient background: ONE soft light drifting very slowly + a static fading grid. Transform-only, <=9% opacity, paused when tab hidden (v16.js) and off for reduced-motion. */
body::before{content:"";position:fixed;left:50%;top:-34vh;width:110vw;height:70vh;margin-left:-55vw;border-radius:50%;z-index:0;pointer-events:none;
 background:radial-gradient(closest-side,var(--g-brand-dim),transparent 72%);opacity:.7;will-change:transform;animation:g-sheen 120s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.3;
 background:linear-gradient(var(--g-line) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--g-line) 1px,transparent 1px) 0 0/56px 56px;
 -webkit-mask-image:linear-gradient(#000,transparent 50%);mask-image:linear-gradient(#000,transparent 50%)}
@keyframes g-sheen{from{transform:translate3d(-9vw,0,0)}to{transform:translate3d(9vw,4vh,0)}}
.side,.main,.tabbar{position:relative;z-index:1}.side{position:fixed}.tabbar{position:fixed}
@media(max-width:860px){body::before{animation-duration:170s}body::after{opacity:.2}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
html.paused body::before{animation-play-state:paused}

.side{background:rgba(7,9,13,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--g-line);padding:0 10px 12px}
.brand{height:56px;padding:0 8px;margin:0 -10px 6px;padding-left:18px;gap:10px;border-bottom:1px solid var(--g-line)}
.brand img{width:28px;height:28px;filter:none}
.brand .wm{font:700 1.02rem/1.1 Inter,sans-serif;letter-spacing:-.02em}.brand .wm b{background:none;-webkit-text-fill-color:currentColor;color:var(--g-brand)}
.brand .wm small{display:none}
.nav{margin:0 -4px;padding:8px 4px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav h6{font:600 .72rem Inter,sans-serif;letter-spacing:.02em;text-transform:none;color:var(--g-t3);margin:16px 10px 6px}
.nav a{height:34px;min-height:34px;padding:0 10px;border-radius:var(--g-r1);gap:10px;font-size:.875rem;font-weight:500;color:var(--g-t2)}
.nav a svg.i{width:16px;height:16px;opacity:.85}
.nav a:hover{background:var(--g-panel-2);color:var(--g-t1)}
.nav a.on{background:var(--g-panel-2);color:var(--g-t1)}.nav a.on svg{color:var(--g-brand);opacity:1}
.nav a.on::before{left:-10px;top:8px;bottom:8px;width:2px;background:var(--g-brand);border-radius:2px}
.nav a .cnt{background:none;border:0;padding:0;color:var(--g-t3);font-size:.75rem;font-weight:600}.nav a .cnt.r{background:none;color:var(--g-neg)}
.nav a .new{background:var(--g-brand-dim);border:1px solid var(--g-brand-line);color:var(--g-brand-hi);border-radius:6px}
.credit{border-radius:var(--g-r2);background:var(--g-panel);border:1px solid var(--g-line);padding:11px 12px;font-size:.78rem;color:var(--g-t2)}
.credit b{font-family:Inter,sans-serif;font-weight:600;color:var(--g-t1)}
.bar{height:4px;background:var(--g-line);border-radius:4px}.bar i{background:var(--g-brand);border-radius:4px}
.me{border-top:1px solid var(--g-line);margin-top:8px;padding:10px 6px 0}.me .av{background:var(--g-panel-3);color:var(--g-brand-hi);border:1px solid var(--g-line-2)}

.main{background:none;padding:0 32px 56px}
.top{height:auto;min-height:60px;padding:10px 0;margin:0 -32px;padding-left:32px;padding-right:32px;background:rgba(7,9,13,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--g-line)}
.top .ttl h1{font:700 1.25rem/1.2 Inter,sans-serif;letter-spacing:-.02em}.top .ttl p{color:var(--g-t3);font-size:.8125rem;margin-top:1px}
.qs{height:36px;padding:0 12px;border-radius:var(--g-r1);border:1px solid var(--g-line-2);background:var(--g-panel);min-width:260px}
.qs:hover,.qs:focus-within{border-color:var(--g-brand-line)}
.qs kbd{font:600 .7rem Inter,sans-serif;border:1px solid var(--g-line-2);border-radius:5px;padding:1px 6px;color:var(--g-t3);background:none}
.ib{width:36px;height:36px;border-radius:var(--g-r1);border:1px solid var(--g-line-2);background:var(--g-panel);color:var(--g-t2)}.ib:hover{border-color:var(--g-t3);color:var(--g-t1)}
.pill{border-radius:var(--g-pill);border:1px solid var(--g-line-2);background:var(--g-panel);color:var(--g-t2);font-size:.78rem;padding:6px 12px}.pill.g{color:var(--g-brand-hi);border-color:var(--g-brand-line)}
.foot{border-top:1px solid var(--g-line);color:var(--g-t3);font-size:.75rem}
.tabbar a.on,.tabbar a.on .tb-l{color:var(--g-brand-hi)}
@media(max-width:860px){.main{padding:0 14px calc(104px + env(safe-area-inset-bottom))}.top{margin:0 -14px;padding-left:14px;padding-right:14px}}
.brand .wm{white-space:nowrap;display:block}.brand .wm b{display:inline!important}

/* ===================== 4. Components: surfaces, buttons, chips, inputs, banners ===================== */
:root body .card,:root body .wd,:root body .gcard,:root body .ins,:root body .calc,:root body .v6d,:root body .hcard,:root body .tblwrap{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--g-r2);box-shadow:none}
:root body .card:hover,:root body .wd:hover{border-color:var(--g-line-2)}
:root body .card h3,:root body .wd h3,:root body .card h2{font:600 .9375rem/1.3 Inter,sans-serif;letter-spacing:-.01em;color:var(--g-t1)}
/* buttons: flat, one primary style */
:root body .btn{height:34px;min-height:34px;padding:0 14px;border-radius:var(--g-r1);border:1px solid var(--g-line-2);background:var(--g-panel-2);color:var(--g-t1);font:600 .8125rem Inter,sans-serif;transition:border-color .16s,background .16s,transform .12s}
:root body .btn:hover{border-color:var(--g-t3);background:var(--g-panel-3)}body .btn:active{transform:scale(.98)}
:root body .btn.p{background:var(--g-brand);border-color:var(--g-brand);color:var(--g-brand-ink);box-shadow:none;background-image:none}
:root body .btn.p:hover{background:var(--g-brand-hi);border-color:var(--g-brand-hi);filter:none}
:root body .btn.g{background:transparent;border-color:var(--g-line-2);color:var(--g-t2)}body .btn.g:hover{color:var(--g-t1);background:var(--g-panel-2)}
:root body .btn.s{height:28px;min-height:28px;padding:0 10px;font-size:.75rem}
:root body .lnk{background:none;border:0;padding:0;color:var(--g-brand-hi);font:500 .8125rem Inter,sans-serif;cursor:pointer;text-decoration:none}body .lnk:hover{text-decoration:underline;text-underline-offset:3px}
/* chips / segmented: quiet neutral, brand only for the selected state */
:root body .chip{min-height:32px;padding:0 12px;border-radius:var(--g-pill);border:1px solid var(--g-line-2);background:transparent;color:var(--g-t2);font:500 .8125rem Inter,sans-serif;transition:border-color .16s,background .16s,color .16s}
:root body .chip:hover:not(.on){border-color:var(--g-t3);color:var(--g-t1)}
:root body .chip.on{background:var(--g-brand-dim);border-color:var(--g-brand-line);color:var(--g-brand-hi);box-shadow:none;background-image:none}
:root body .seg{padding:3px;border:1px solid var(--g-line-2);border-radius:var(--g-r1);background:var(--g-panel)}
:root body .seg button{border-radius:6px;color:var(--g-t2);font:600 .8125rem Inter,sans-serif}body .seg button.on{background:var(--g-panel-3);color:var(--g-t1);box-shadow:none}
/* inputs */
:root body input[type=text],:root body input[type=number],:root body input[type=search],:root body input:not([type]),:root body select,:root body textarea{background:var(--g-panel);border:1px solid var(--g-line-2);border-radius:var(--g-r1);color:var(--g-t1);min-height:34px;font:500 .8125rem Inter,sans-serif}
:root body input:focus,:root body select:focus,:root body textarea:focus{border-color:var(--g-brand-line);outline:0;box-shadow:0 0 0 3px var(--g-brand-dim)}
/* filter bar = one flat panel */
:root body .filters{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--g-r2);box-shadow:none}
/* banners / stale / notices */
:root body .warn,:root body .notice,:root body .banner{border-radius:var(--g-r1);border:1px solid rgba(242,184,75,.32);background:rgba(242,184,75,.07);color:var(--g-t1)}
/* tags */
:root body .tag{border-radius:6px;border:1px solid var(--g-line-2);background:var(--g-panel-2);color:var(--g-t2);font:600 .72rem Inter,sans-serif;padding:2px 8px}
/* KPI strips: one bordered panel */
:root body .kpi{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--g-r2);box-shadow:none}

:root body .lf-stale{border-radius:var(--g-r1);border:1px solid rgba(242,184,75,.3);background:rgba(242,184,75,.06);font-size:.8125rem}:root body .lf-stale b{color:var(--g-warn)}
:root body .meta.fresh .tag.am,:root body .tag.am{background:transparent;border-color:var(--g-line-2);color:var(--g-t2)}
:root body .adv>summary{color:var(--g-t1)}:root body .adv>summary svg{color:var(--g-t3)}
:root body .kstrip{background:var(--g-panel);border-color:var(--g-line);border-radius:var(--g-r2)}:root body .kstrip small{color:var(--g-t3);letter-spacing:.04em}

/* ===================== 5. Tables ===================== */
:root body .tbl th,:root body .tbl.dense th,:root body .tbl thead th,:root body .lf-tbl th{font:600 .75rem/1.2 Inter,sans-serif;letter-spacing:.01em;text-transform:none;color:var(--g-t3);background:var(--g-panel);padding:11px 12px;border-bottom:1px solid var(--g-line)}
:root body .tbl.dense th{background:rgba(12,17,23,.97)}
:root body .tbl.dense th[data-k]:hover{color:var(--g-t1)}:root body .tbl.dense th.desc::after,:root body .tbl.dense th.asc::after{color:var(--g-brand)}
:root body .tbl td,:root body .tbl.dense td,:root body .lf-tbl td{border-bottom:1px solid var(--g-line);font-size:.8125rem}
:root body .tbl tbody tr:last-child td{border-bottom:0}
@media(hover:hover){:root body .tbl tbody tr:hover td,:root body .tbl.dense tbody tr:hover td,:root body .lf-tbl tbody tr:hover td{background:var(--g-panel-2)}:root body .tbl.dense tbody tr:hover{background:none}}
:root body .tbl.dense td.best{color:var(--g-brand-hi);background:var(--g-brand-dim)}
:root body .lf-tbl tr.pinned td{background:var(--g-brand-dim)}
:root body .tblwrap,:root body .wrapt,:root body .lf-wrap{border:1px solid var(--g-line);border-radius:var(--g-r2);background:var(--g-panel);overflow:auto}
/* +EV / profit text is the only green; negative the only red */
:root body .pos,:root body .ev.pos,:root body .plus{color:var(--g-pos)}:root body .neg{color:var(--g-neg)}
/* minimum legible size for secondary text */
:root body .sub,:root body .dim,:root body small,:root body .sm{font-size:max(.75rem,1em)}
:root body .kstrip small,:root body .kpi small{font-size:.75rem;text-transform:none;letter-spacing:.01em;color:var(--g-t3)}
:root body .oddst td{padding-top:8px;padding-bottom:8px}
:root body .bestc{border-radius:var(--g-r1);background:var(--g-brand-dim);box-shadow:inset 0 0 0 1px var(--g-brand-line);color:var(--g-brand-hi)}
:root body .hrp{border-radius:6px;font-family:Inter,sans-serif}:root body .hrp.hi{background:var(--g-pos-dim);color:var(--g-pos)}:root body .hrp.md{background:var(--g-brand-dim);color:var(--g-brand-hi)}:root body .hrp.lo{background:var(--g-neg-dim);color:var(--g-neg)}

/* ===================== 6. Trending ===================== */
:root body .tdc{background:var(--g-panel);background-image:none;border:1px solid var(--g-line);border-radius:var(--g-r2);box-shadow:none;transition:border-color .16s,transform .16s var(--g-ease)}
@media(hover:hover){:root body .tdc:hover{border-color:var(--g-brand-line);transform:translateY(-1px)}}
:root body .tdc::before,:root body .tdc::after{opacity:.0}
:root body .tdn{font:700 2.25rem/1.05 Inter,sans-serif;letter-spacing:-.03em}:root body .tdn small{font-size:1rem;font-weight:600}
:root body .tde{color:var(--g-t2);font:600 .75rem Inter,sans-serif;letter-spacing:.02em;text-transform:none}:root body .tde svg{color:var(--g-t3)}
:root body .tdh h3,:root body .sech h3{font:600 1.0625rem Inter,sans-serif;letter-spacing:-.01em}
:root body .kp{background:var(--g-panel);background-image:none;border:1px solid var(--g-line);border-radius:var(--g-r1);box-shadow:none}
:root body .kp b,:root body .kp .num{font:700 1.375rem/1.1 Inter,sans-serif;letter-spacing:-.02em}:root body .kp small,:root body .kp span{font:500 .75rem Inter,sans-serif;text-transform:none;letter-spacing:.01em;color:var(--g-t3)}
:root body .welcome h2,:root body .welcome .hi{font-weight:700;letter-spacing:-.03em}
:root body .wd{border-radius:var(--g-r2)}:root body .wdh{font:600 .9375rem Inter,sans-serif}
:root body .wr{border-radius:var(--g-r1)}:root body .wr:hover{background:var(--g-panel-2)}

/* ===================== 7. Legibility floor: no body-copy text under 12px (badges 11px) ===================== */
:root body .lf-t,:root body .evx,:root body .bn,:root body .nav h6,:root body .move,:root body .sub.fl0,:root body .dim,:root body kbd{font-size:.75rem}
:root body .shp{font-size:.6875rem}:root body .move.up,:root body .move.dn{font-size:.75rem}
:root body .tag,:root body .sub,:root body .sbl,:root body .chip .n{font-size:.75rem}

/* ===================== 8. Odds comparison cells (display only; classes come from the existing computed best/+EV flags) ===================== */
:root body .oddst .odds{background:transparent;box-shadow:none;border-radius:var(--g-r1);color:var(--g-t1);font-weight:600;padding:4px 9px;min-width:58px}
:root body .oddst .odds::after{display:none}
:root body .oddst .odds.plus{background:var(--g-pos-dim);color:var(--g-pos)}
:root body .oddst .odds.best{background:transparent;color:var(--g-brand-hi);box-shadow:inset 0 0 0 1px var(--g-brand-line)}
:root body .oddst .odds.best.plus{background:var(--g-pos-dim);color:var(--g-pos);box-shadow:inset 0 0 0 1px var(--g-brand-line)}
:root body .oddst .evx{color:var(--g-pos);font-size:.75rem;font-weight:600;margin-top:2px;text-align:center}
:root body .oddst td{text-align:center}:root body .oddst td:first-child{text-align:left}
:root body .oddst td.oldp .odds{opacity:.85;text-decoration-color:var(--g-t3)}
:root body .oddst .move{color:var(--g-t3)}:root body .oddst .move.up{color:var(--g-pos)}:root body .oddst .move.dn{color:var(--g-neg)}
:root body .oddst tr.g0 td{border-top:1px solid var(--g-line-2)}
:root body .oddst td.shc{background:rgba(255,255,255,.015)}
/* legend under the table (rendered by JS as .mx? no: static hint is added via ::after on the wrapper) */
:root body .wrapt:has(.oddst)::after{content:"Outlined = best price among books shown · Green = above fair value (+EV) · Dotted = price not updated in 30+ min";display:block;padding:10px 14px;border-top:1px solid var(--g-line);color:var(--g-t3);font-size:.75rem}

/* ===================== 9. Trending: KPI strip + two-column layout (per v2 mockup) ===================== */
:root body #view .welcome{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 18px;margin:6px 0 20px}
:root body #view .welcome .wk{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;width:auto;overflow:hidden;background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--g-r2)}
:root body #view .welcome .wa{grid-column:2;grid-row:1}
:root body #view .welcome .kp{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:76px;padding:14px 18px;border:0;border-right:1px solid var(--g-line);border-radius:0;background:none;text-align:left;transition:background .16s}
:root body #view .welcome .kp:last-child{border-right:0}
:root body #view .welcome .kp:hover{background:var(--g-panel-2)}
:root body #view .welcome .kp span{order:-1;font:500 .8125rem Inter,sans-serif;color:var(--g-t3);letter-spacing:0;text-transform:none}
:root body #view .welcome .kp b{font:700 1.75rem/1.1 Inter,sans-serif;letter-spacing:-.03em;color:var(--g-t1)}
:root body #view .welcome .kp[data-kind=arb] b{color:var(--g-pos)}
@media(max-width:860px){
 :root body #view .welcome .kp{min-height:62px;padding:10px 12px;align-items:center;text-align:center}
 :root body #view .welcome .kp b{font-size:1.25rem}:root body #view .welcome .kp span{font-size:.75rem}
}
/* two columns: +EV and Hot streaks (wide) | Line moves, Arbitrage, Injuries (narrow); model picks + data/automation full width below */
@media(min-width:1181px){
 :root body #view .wgrid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)!important;grid-template-areas:"ev moves" "streaks arbs" "streaks injuries" "models models" "status status";align-items:stretch}
 :root body #view .wgrid>.wd[data-w=ev]{grid-area:ev}:root body #view .wgrid>.wd[data-w=moves]{grid-area:moves}
 :root body #view .wgrid>.wd[data-w=streaks]{grid-area:streaks}:root body #view .wgrid>.wd[data-w=arbs]{grid-area:arbs}
 :root body #view .wgrid>.wd[data-w=injuries]{grid-area:injuries}:root body #view .wgrid>.wd[data-w=models]{grid-area:models}
 :root body #view .wgrid>.wd[data-w=status]{grid-area:status;order:0}
}

/* ===================== 10. Hand-tuned pages: predict, sharp-lag, sources, steam, watchlist ===================== */
/* semantic tags (steam / sharp-lag / predict use these) */
:root body .tag.gr{background:var(--g-pos-dim);border-color:transparent;color:var(--g-pos)}
:root body .tag.r{background:var(--g-neg-dim);border-color:transparent;color:var(--g-neg)}
:root body .tag.g{background:var(--g-brand-dim);border-color:transparent;color:var(--g-brand-hi)}
/* steam: dense rectangular book-move chips instead of heavy pills */
:root body .card.steam .chips{gap:6px;margin:12px 0}
:root body .card.steam .chip{border-radius:var(--g-r1);background:var(--g-panel-2);border-color:var(--g-line);min-height:30px;padding:0 10px;color:var(--g-t1)}
:root body .card.steam .chip:hover{border-color:var(--g-line-2);background:var(--g-panel-3)}
:root body .card.steam .chip small.pos{color:var(--g-pos)}:root body .card.steam .chip small.neg{color:var(--g-neg)}
:root body .card.steam.pin{border-color:var(--g-brand-line)}
:root body .card.steam h3{font-size:1rem}
/* sharp lag + watchlist rows */
:root body .leg{background:var(--g-panel-2);border:1px solid var(--g-line);border-radius:var(--g-r1)}
:root body .leg .sub{color:var(--g-t3)}
:root body .wp:hover,:root body .leg:hover{border-color:var(--g-line-2)}
/* sources: quiet credit chart (latest day in brand), readable plan meters and copy */
:root body .v6bars{height:112px;gap:6px}
:root body .v6b i{background:var(--g-panel-4);opacity:1;border-radius:4px 4px 0 0;transition:background .16s}
:root body .v6b:last-child i,:root body .v6b:hover i{background:var(--g-brand)}
:root body .v6b small{font-size:.75rem;color:var(--g-t3)}
:root body .meterrow{grid-template-columns:150px minmax(0,1fr) 64px;font-size:.8125rem;margin:8px 0;color:var(--g-t2)}
:root body .meterrow b{text-align:right;color:var(--g-t1)}
:root body .v8plan p.sub{line-height:1.6;margin-top:10px;color:var(--g-t3)}
:root body .v6d{background:var(--g-neg)}:root body .v6d.ok{background:var(--g-pos)}:root body .v6d.warn{background:var(--g-warn)}
/* predict: calmer table, edge colours only */
:root body .tbl td.pos,:root body .tbl td .pos{color:var(--g-pos)}:root body .tbl td.neg,:root body .tbl td .neg{color:var(--g-neg)}

/* ===================== 11. Navigation: grouped sections, thin icons, accent pill + bar, pinned settings, mobile slide-out drawer ===================== */
:root{--g-rail:#080b10}
:root body .side{background:var(--g-rail)!important;-webkit-backdrop-filter:none;backdrop-filter:none;border-right:1px solid var(--g-line)!important}
:root body .side .nav{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--g-line-2) transparent;padding:6px 12px 0!important;margin:0!important}
:root body .side .nav>*{flex:none}
:root body .side .nav h6{font:600 .6875rem/1 Inter,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-variant:normal!important;color:var(--g-t3)!important;margin:18px 8px 6px!important}
:root body .side .nav h6:first-child{margin-top:12px!important}:root body .side .nav h6:empty{display:none}
:root body .side .nav a{position:relative;display:flex;align-items:center;gap:12px;height:36px;min-height:36px!important;padding:0 12px!important;margin:0 0 2px;border-radius:12px!important;font:500 .875rem Inter,sans-serif!important;color:var(--g-t2)!important;background:none!important;transition:background .16s,color .16s}
:root body .side .nav a svg{width:18px!important;height:18px!important;stroke-width:1.6;color:var(--g-t3)!important;flex:none}
:root body .side .nav a:hover{background:var(--g-panel-2)!important;color:var(--g-t1)!important}
:root body .side .nav a.on{background:var(--g-brand-dim)!important;color:var(--g-brand-hi)!important}
:root body .side .nav a.on svg{color:var(--g-brand)!important}
:root body .side .nav a::before{display:none!important}
:root body .side .nav a.on::after{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--g-brand)}
:root body .side .nav a:focus-visible{outline:2px solid var(--g-brand-hi);outline-offset:-2px}
/* Settings pinned at the bottom of the nav column */
:root body .side .nav a[data-p=settings]{position:sticky;bottom:0;margin-top:auto;margin-bottom:0;height:auto!important;min-height:58px!important;padding-top:10px!important;padding-bottom:6px!important;border-radius:0!important;border-top:1px solid var(--g-line);background-color:var(--g-rail)!important;box-shadow:0 -16px 14px -6px var(--g-rail)}
:root body .side .nav a[data-p=settings]::after{display:none}
:root body .side .nav a[data-p=settings].on{color:var(--g-brand-hi)!important;box-shadow:0 -16px 14px -6px var(--g-rail),inset 3px 0 0 var(--g-brand)}
:root body .side .nav a[data-p=settings].on{background-image:linear-gradient(var(--g-brand-dim),var(--g-brand-dim))!important;background-color:var(--g-rail)!important}
:root body .side .nav a[data-p=settings]::before{display:none}
.nav-x{display:none}
:root body .side .brand img{width:30px;height:30px;padding:3px;border-radius:9px;background:var(--g-panel-2);border:1px solid var(--g-line-2)}

@media(max-width:860px){
 :root body .side{width:min(84vw,320px)!important;padding:calc(10px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left)!important;transition:transform .28s var(--g-ease)!important;box-shadow:none;z-index:60}
 :root body .side.on{box-shadow:24px 0 60px -12px rgba(0,0,0,.75)}
 :root body .side .brand{height:60px;margin:0 0 4px;padding:0 14px 0 16px!important;gap:12px;border-bottom:1px solid var(--g-line)!important}
 :root body .side .brand img{width:36px;height:36px;padding:4px}
 :root body .side .brand .wm{font:700 1.125rem/1 Inter,sans-serif!important;color:var(--g-t1)}:root body .side .brand .wm b{color:var(--g-brand)}
 :root body .side .brand .wm small{display:none!important}
 .nav-x{display:grid;place-items:center;margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--g-line-2);background:none;color:var(--g-t2);cursor:pointer;transition:background .16s,color .16s,border-color .16s}
 .nav-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
 .nav-x:hover{background:var(--g-panel-2);color:var(--g-t1)}.nav-x:focus-visible{outline:2px solid var(--g-brand-hi);outline-offset:2px}
 :root body .side .nav a{height:46px;min-height:46px!important;font-size:.9375rem!important}
 :root body .side .nav a svg{width:20px!important;height:20px!important}
 :root body .side .credit,:root body .side .me{margin-left:14px!important;margin-right:14px!important}
 :root body .scrim{display:block!important;position:fixed;inset:0;background:rgba(2,4,8,.62);opacity:0;pointer-events:none;transition:opacity .26s;z-index:55}
 :root body .scrim.on{opacity:1;pointer-events:auto}
 body.nav-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){:root body .side,:root body .scrim{transition:none!important}}