/* ---------- tokens: dark is the default, [data-theme=light] overrides ---------- */
:root{
  --bh:52px;--sw:220px;
  --bg:#0a1530;--bar:#0c1a3b;--card:#0f2044;--card2:#142a55;--field:#0b1a3a;
  --line:#203666;--line2:#325190;--tx:#e8eefc;--mut:#9fb2d6;
  --acc:#38bdf8;--acc-tx:#38bdf8;--on-acc:#04223a;
  --pos:#22c55e;--neg:#f87171;--warn:#fbbf24;--green:#22c55e;--red:#ef4444;
  --pos-bg:rgba(34,197,94,.14);--pos-bd:rgba(34,197,94,.4);
  --neg-bg:rgba(248,113,113,.14);--neg-bd:rgba(248,113,113,.42);
  --warn-bg:rgba(251,191,36,.13);--warn-bd:rgba(251,191,36,.4);
  --info-bg:rgba(56,189,248,.12);--info-bd:rgba(56,189,248,.4);
  --zebra:rgba(255,255,255,.028);--hover:rgba(56,189,248,.1);--shadow:none;--sbar:#2c4a82;
  --s-tx:#e8eefc;--s-mut:#9fb2d6;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#eef2f9;--bar:#fff;--card:#fff;--card2:#f3f6fb;--field:#fff;
  --line:#d8e0ee;--line2:#b4c2da;--tx:#0f1b33;--mut:#4d5f84;
  --acc:#0369a1;--acc-tx:#0369a1;--on-acc:#fff;
  --pos:#137236;--neg:#b91c1c;--warn:#92400e;--green:#16a34a;--red:#dc2626;
  --pos-bg:rgba(22,163,74,.1);--pos-bd:rgba(22,163,74,.4);
  --neg-bg:rgba(220,38,38,.09);--neg-bd:rgba(220,38,38,.4);
  --warn-bg:rgba(217,119,6,.12);--warn-bd:rgba(217,119,6,.45);
  --info-bg:rgba(3,105,161,.09);--info-bd:rgba(3,105,161,.4);
  --zebra:rgba(15,40,90,.03);--hover:rgba(3,105,161,.08);--shadow:0 1px 2px rgba(15,35,80,.07);--sbar:#b4c2da;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.55 "Segoe UI","Nirmala UI",system-ui,sans-serif}
h1,h2,h3,p,dl,dd{margin:0}
ul,ol{margin:0;padding-left:20px}
li+li{margin-top:4px}
a{color:var(--acc-tx)}
a:hover{text-decoration:none}
code{padding:1px 6px;border-radius:4px;border:1px solid var(--line);background:var(--field);font:13px Consolas,monospace;overflow-wrap:anywhere}
small,.small{font-size:12.5px}
.muted{color:var(--mut)}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.sr{position:absolute;left:-9999px}
.blk{display:block}
.mw{max-width:1180px}
.nw{white-space:nowrap}
.grow{flex:1;min-width:200px;width:auto}
.ic{width:18px;height:18px;flex:none;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--sbar);border:3px solid transparent;border-radius:8px;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* status colours: set --c (text) --b (tint) --d (border); pills, banners, chips, flashes and check lists read them */
.ok{--c:var(--pos);--b:var(--pos-bg);--d:var(--pos-bd)}
.info,.callout.note{--c:var(--acc-tx);--b:var(--info-bg);--d:var(--info-bd)}
.warn{--c:var(--warn);--b:var(--warn-bg);--d:var(--warn-bd)}
.bad,.critical{--c:var(--neg);--b:var(--neg-bg);--d:var(--neg-bd)}
.mut{--c:var(--mut);--b:transparent;--d:var(--line2)}

/* ---------- shell: sidebar + top bar ---------- */
.side{position:fixed;inset:0 auto 0 0;z-index:40;width:var(--sw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0a1530,#0e2149);border-right:1px solid #16294f}
.brand{display:flex;align-items:center;gap:12px;padding:16px;color:#fff;text-decoration:none}
.brand img{border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.brand .lbl{display:flex;flex-direction:column;line-height:1.2}
.brand small{font-size:12px;color:var(--s-mut);letter-spacing:.04em}
.brand b{font-size:17px}
.mode{display:flex;align-items:center;gap:8px;margin:0 16px 16px;padding:6px 12px;border-radius:6px;border:1px solid;font-size:12.5px;font-weight:700}
.mode i,.mkt i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.mode.paper{color:#86efac;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4)}
.mode.live{color:#fecaca;background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.6)}
.side nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:0 8px}
.side nav a{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:6px;
  color:var(--s-mut);font-weight:600;text-decoration:none}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a:active{background:rgba(255,255,255,.12)}
.side nav a.on{background:rgba(56,189,248,.16);color:#fff}
.side nav a.on::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--acc)}
.side-foot{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.08)}
.side-foot form{margin:0}
.clock{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.clock b{font-size:18px;color:#fff;font-weight:600}
.clock small{color:var(--s-mut);font-size:12px}
.mkt{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:2px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  color:var(--s-mut);font-size:12.5px;font-weight:600}
.mkt.open{color:#86efac;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
.out{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 12px;border:0;border-radius:6px;background:transparent;
  color:var(--s-mut);font:inherit;font-weight:600;cursor:pointer}
.out:hover{background:rgba(255,255,255,.07);color:#fff}
.main{margin-left:var(--sw);min-width:0;min-height:100vh;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:30;height:var(--bh);display:flex;align-items:center;gap:12px;padding:0 24px;
  background:var(--bar);border-bottom:1px solid var(--line)}
.bar h1{flex:1;min-width:0;font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-live .bar{box-shadow:inset 0 3px 0 var(--red)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--mut);cursor:pointer}
.icon-btn:hover{background:var(--hover);color:var(--tx)}
.icon-btn:active{background:var(--line)}
#theme .ic:last-child,:root[data-theme=light] #theme .ic:first-child{display:none}
:root[data-theme=light] #theme .ic:last-child{display:block}
.page{flex:1;width:100%;max-width:1680px;margin:0 auto;padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px}
.foot{margin-top:auto;padding-top:16px;text-align:center;color:var(--mut);font-size:12.5px}

/* ---------- building blocks ---------- */
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.cols{display:grid;gap:16px;align-items:start}
.card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--card);box-shadow:var(--shadow)}
.card.caution{border-color:var(--warn-bd);background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--card)}
.card.live-card{border-color:var(--neg-bd)}
.card>p,.card>.checks,.card>ul:not([class]){max-width:90ch}
.ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.ch h2 .ic{color:var(--acc-tx)}
.ch .sub{font-size:13px;font-weight:400;color:var(--mut)}
.ch .r{display:flex;align-items:center;gap:8px;margin-left:auto}
.ch form,.act form{margin:0}
.headline{font-size:16px;font-weight:600;line-height:1.5}
.hint{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--mut)}
.hint .ic{width:16px;height:16px;margin-top:3px}
.nil{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;text-align:center;color:var(--mut)}
.nil .ic{width:32px;height:32px;opacity:.7}
.empty{padding:8px 0}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(var(--m,2),minmax(0,1fr));gap:12px}
.tile{min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);box-shadow:var(--shadow)}
.tile[data-s=pos]{box-shadow:inset 3px 0 var(--green)}
.tile[data-s=neg]{box-shadow:inset 3px 0 var(--red)}
.tile .k{display:flex;align-items:center;font-size:12.5px;color:var(--mut)}
.tile .v{font-size:22px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .s{font-size:12px;line-height:1.4;color:var(--mut)}
.card .tile{background:var(--card2);box-shadow:none}
.card .tile[data-s=pos]{box-shadow:inset 3px 0 var(--green)}
.card .tile[data-s=neg]{box-shadow:inset 3px 0 var(--red)}
.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kvi{display:flex;flex-direction:column;min-width:0}
.kvi .k{font-size:12.5px;color:var(--mut)}
.kvi .v{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pill,.chip{--c:var(--mut);--b:transparent;--d:var(--line2)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border:1px solid var(--d);border-radius:999px;background:var(--b);color:var(--c);
  font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap}
.pill .ic{width:13px;height:13px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border:1px solid var(--d);border-radius:999px;background:var(--b);color:var(--c);
  font-size:13px;font-weight:600;text-decoration:none}
.chip .ic{width:16px;height:16px}
.chip:hover{filter:brightness(1.12)}
.banner{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 16px;border:1px solid var(--d);border-radius:8px;background:var(--b)}
.bh{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--c)}
.checks{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.checks li{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;line-height:1.45}
.checks .ic{width:16px;height:16px;margin-top:2px;color:var(--c)}
.banner .btn,.banner form{align-self:flex-start;margin:0}
.flash{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border:1px solid var(--d);border-radius:8px;background:var(--b)}
.flash>.ic{margin-top:1px;color:var(--c)}
.flash span{flex:1}
.flash .x{display:grid;padding:2px;border:0;border-radius:4px;background:none;color:var(--mut);cursor:pointer}
.flash .x:hover{color:var(--tx)}
.flash .x .ic{width:16px;height:16px}

/* ---------- buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:4px 14px;border:1px solid var(--line2);border-radius:6px;
  background:var(--card2);color:var(--tx);font:inherit;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--mut);background:var(--hover)}
.btn:active{background:var(--line)}
.btn.primary{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.danger{border-color:var(--neg-bd);background:var(--neg-bg);color:var(--neg)}
.btn.danger:hover{border-color:var(--red);background:var(--red);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{min-height:30px;padding:2px 10px;font-size:13px}
.btn:disabled,input:disabled{opacity:.5;cursor:not-allowed}
.btn .ic{width:16px;height:16px}
.seg{display:inline-flex;padding:2px;border:1px solid var(--line2);border-radius:8px;background:var(--card)}
.seg a,.seg button{padding:4px 14px;border:0;border-radius:6px;background:none;color:var(--mut);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.seg a:hover,.seg button:hover{color:var(--tx)}
.seg .on{background:var(--acc);color:var(--on-acc)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar .r{margin-left:auto;display:flex;gap:8px}
label{display:block;margin:0 0 4px;font-size:12.5px;color:var(--mut)}
input[type=text],input[type=number],input[type=password],select{width:100%;height:36px;padding:0 10px;border:1px solid var(--line2);border-radius:6px;
  background:var(--field);color:var(--tx);font:inherit}
input::placeholder{color:var(--mut);opacity:.8}
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
.fld{display:flex;flex-direction:column;min-width:0}
.fld small{display:block;margin-top:4px;font-size:12px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.span2{grid-column:1/-1}
.form{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:flex-start;gap:16px;margin:0;padding:12px 0 0;border-top:1px solid var(--line);color:var(--tx);font-size:14px;cursor:pointer}
.opt:first-of-type{padding-top:0;border-top:0}
.opt>span{flex:1;min-width:0}
.opt small{display:block;color:var(--mut)}
.sw{-webkit-appearance:none;appearance:none;position:relative;flex:none;order:2;width:40px;height:22px;margin:2px 0 0;border:1px solid var(--line2);border-radius:11px;
  background:var(--card2);cursor:pointer;transition:background .15s}
.sw::before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--mut);transition:transform .15s,background .15s}
.sw:checked{border-color:var(--acc);background:var(--acc)}
.sw:checked::before{transform:translateX(18px);background:var(--on-acc)}
.pick{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--tx);font-size:14px;cursor:pointer}
.pick:hover{border-color:var(--line2)}
.pick>span{flex:1;min-width:0}
.pick small{display:block;color:var(--mut)}
.pick input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--acc)}
.savebar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--line2);border-radius:8px;
  background:var(--bar);box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.savebar .hint{flex:1;margin:0}
.savebar .on-dirty,.savebar.dirty .on-clean{display:none}
.savebar.dirty .on-dirty{display:flex;color:var(--warn);font-weight:600}
fieldset{min-width:0;margin:0;padding:12px;border:1px solid var(--line);border-radius:8px}
legend{padding:0 8px;font-size:12.5px;color:var(--mut)}
details{border:1px solid var(--line);border-radius:8px;background:var(--card2)}
summary{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--acc-tx);font-weight:600;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"";border:5px solid transparent;border-right-width:0;border-left-color:currentColor;transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
.db{display:flex;flex-direction:column;gap:12px;padding:0 12px 12px}

/* ---------- help "?" popover (CSS only; app.js only nudges it back inside the window) ---------- */
.hp{position:relative;display:inline-flex;margin-left:6px;vertical-align:middle;outline:0}
.hp i{display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--line2);border-radius:50%;color:var(--mut);
  font-family:inherit;font-size:11px;font-style:normal;font-weight:700;line-height:1;cursor:help}
.hp:hover i,.hp:focus i{border-color:var(--acc);color:var(--acc-tx)}
.hp-t{position:absolute;z-index:60;top:calc(100% + 8px);left:50%;width:260px;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;
  background:var(--card2);box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--tx);font-size:13px;font-weight:400;line-height:1.55;text-align:left;
  text-transform:none;white-space:normal;transform:translateX(calc(-50% + var(--dx,0px)));display:none;pointer-events:none}
.hp.up .hp-t{top:auto;bottom:calc(100% + 8px)}
.hp-t b{display:block;margin-bottom:2px;color:var(--acc-tx)}
.hp:hover .hp-t,.hp:focus .hp-t{display:block}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle}
.tbl thead th{position:sticky;top:var(--bh);z-index:2;padding:8px 10px;border-bottom-color:var(--line2);background:var(--card2);color:var(--mut);font-size:12.5px;font-weight:600;line-height:1.35;white-space:normal;vertical-align:bottom}
.tbl .l{text-align:left}
.tbl .wrap{white-space:normal}
.tbl tbody tr:nth-child(even){background:var(--zebra)}
.tbl tbody tr:hover{background:var(--hover)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tfoot td{border-top:1px solid var(--line2);border-bottom:0;font-weight:700}
.tbl .sym{font-weight:700;text-align:left}
.tbl small{font-size:12px;font-weight:400}
.pos-t{font-size:13px}
.pos-t thead th{position:static}
.pos-t th,.pos-t td{padding:5px;line-height:1.35}
.pos-t .xl{display:none}
.pos-t .sym{max-width:128px;overflow:hidden;text-overflow:ellipsis}
.pos-t .pill{font-size:11.5px}
.tbl tr.sell td:first-child{box-shadow:inset 3px 0 var(--warn)}
.tbl .pill{border-radius:10px;white-space:normal;text-align:left}
.sortable thead th:not([data-nosort]){cursor:pointer;user-select:none}
.sortable thead th:not([data-nosort]):hover{color:var(--tx)}
.sortable thead th[aria-sort]{color:var(--tx)}
.sortable thead th[aria-sort]::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;vertical-align:middle}
.sortable thead th[aria-sort=ascending]::after{border-top-width:0;border-bottom-color:currentColor}
.sortable thead th[aria-sort=descending]::after{border-bottom-width:0;border-top-color:currentColor}
.heat td{padding:6px 4px;border-bottom:2px solid var(--card);text-align:center;font-size:12.5px}
.heat tbody tr:nth-child(even),.heat tbody tr:hover{background:none}
.ev{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ev li{display:grid;grid-template-columns:auto 1fr;gap:0 12px;margin:0;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ev li:last-child{border-bottom:0}
.ev time{color:var(--mut);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev .pill{margin-right:6px}
.list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.list li{display:flex;flex-wrap:wrap;gap:0 8px;margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}

/* ---------- charts ---------- */
.cbox{display:flex;flex-direction:column;gap:8px}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--mut)}
.legend li{display:flex;align-items:center;gap:8px;margin:0}
.lg{display:inline-block;width:22px;border-top:3px solid;border-radius:2px;color:var(--acc)}
.lg.s1{border-top-style:dashed;color:var(--mut)}
.lg.base{border-top:2px dotted var(--mut)}
.chart{display:block;width:100%;height:auto;max-height:340px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--mut);stroke-width:1.2;stroke-dasharray:2 4}
.chart .axis{fill:var(--mut)}
.chart .line{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.chart .line.s1{stroke:var(--mut);stroke-width:2;stroke-dasharray:6 4}
.chart .dot{fill:var(--acc);stroke:var(--card);stroke-width:2}
.chart .dot.s1{fill:var(--mut)}
.chart .area{fill:var(--acc);opacity:.1}
.chart .area.up{fill:var(--green);opacity:.18}
.chart .area.dn{fill:var(--red);opacity:.18}
.spark{width:120px;height:34px}
.spark .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .s0{stroke:var(--pos)}.spark .sr{stroke:var(--neg)}
.prog{height:8px;overflow:hidden;border-radius:4px;background:var(--card2)}
.prog i{display:block;width:35%;height:100%;border-radius:4px;background:var(--acc);animation:slide 1.4s ease-in-out infinite}
@keyframes slide{from{margin-left:-35%}to{margin-left:100%}}

/* ---------- home ---------- */
.dash{display:flex;flex-direction:column;gap:16px}
.dash .stack{display:contents}
.dash .tw{overflow-x:auto}
.cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.cand{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card2)}
.cand.backup{border-style:dashed}
.cand header{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.cand .sym{font-size:16px}
.cand .st{margin-left:auto}
.kv3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}
.kv3 dt{font-size:12px;color:var(--mut)}
.kv3 dd{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kv3 dd small{font-weight:400;color:var(--mut)}
.cand .why{font-size:13px;color:var(--mut)}
.cand .note{font-size:13px}
.cand .act{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.ctl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ctl form{margin:0}
.ctl .btn{width:100%;justify-content:flex-start;padding:4px 10px;font-size:13px}

/* ---------- reports / backtest / settings ---------- */
.nav2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nav2 .r{display:flex;gap:8px}
.verdict{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.verdict li{display:flex;gap:8px;margin:0;font-size:13.5px}
.verdict .ic{width:16px;height:16px;margin-top:3px;color:var(--c)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.run{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- guide ---------- */
.guide{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.toc{position:sticky;top:calc(var(--bh) + 24px);display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.toc b{padding:4px 8px 8px;font-size:12.5px;color:var(--mut)}
.toc a{padding:6px 8px;border-left:3px solid transparent;border-radius:0 6px 6px 0;color:var(--mut);font-weight:600;text-decoration:none}
.toc a:hover{background:var(--hover);color:var(--tx)}
.toc a.on{border-left-color:var(--acc);background:var(--info-bg);color:var(--tx)}
.doc{max-width:780px;font-size:16px;line-height:1.85}
.doc>*+*{margin-top:16px}
.doc h2{margin-top:48px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:22px;scroll-margin-top:calc(var(--bh) + 16px)}
.doc h2:first-child{margin-top:0}
.doc h3{margin-top:24px;font-size:17px}
.callout{padding:12px 16px;border-left:4px solid var(--c);border-radius:0 8px 8px 0;background:var(--b)}
.callout>b{display:block;color:var(--c)}
.timeline{margin-bottom:0;padding:0 0 0 12px;list-style:none;border-left:2px solid var(--line2)}
.timeline li{position:relative;margin:0;padding:0 0 24px 24px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-19px;top:9px;width:12px;height:12px;border:2px solid var(--bg);border-radius:50%;background:var(--acc)}
.timeline time{display:block;font-weight:700;font-variant-numeric:tabular-nums;color:var(--acc-tx)}
.timeline b{display:block}
.facts{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;line-height:1.5}
.strat{padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.strat+.strat{margin-top:12px}
.strat h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px}

/* ---------- login / error ---------- */
.login{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(900px 500px at 50% -10%,var(--info-bg),transparent),var(--bg)}
.lcard{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(400px,100%);padding:32px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 12px 40px rgba(0,0,0,.28);text-align:center}
.lcard img{border-radius:24px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.lcard h1{font-size:22px;font-weight:600}
.lcard h1 small{display:block;font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--mut)}
.lcard form{display:flex;flex-direction:column;gap:12px;width:100%}
.lcard .flash{width:100%;text-align:left}
.lcard input{height:42px;font-size:16px;text-align:center}
.lcard .btn{min-height:42px}
.oops{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;text-align:center}
.oops>.ic{width:48px;height:48px;color:var(--mut)}
.oops h2{font-size:20px}

/* ---------- screen sizes ---------- */
@media(min-width:1366px){.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.tiles{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
@media(min-width:1500px){.pos-t .xl{display:block}}
@media(min-width:1280px) and (max-width:1365px){.pos-t .xd{display:none}.pos-t th,.pos-t td{padding-left:4px;padding-right:4px}}
@media(min-width:1280px){
  .dash{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,24vw,420px);align-items:start}
  .dash .stack{display:flex}
  .cols.cw{grid-template-columns:minmax(0,1fr) 360px}
  .cols.cn{grid-template-columns:380px minmax(0,1fr)}
}
@media(max-width:1099px){
  .tw{overflow-x:auto}
  .tbl thead th{position:static}
  .tbl th,.tbl td{padding:6px 8px}
  .guide{grid-template-columns:1fr}
  .toc{position:static}
}
@media(max-width:999px){
  :root{--sw:64px}
  .side .lbl,.clock small,.mode .lbl{display:none}
  .brand{justify-content:center;padding:16px 0}
  .mode{justify-content:center;margin:0 12px 12px;padding:6px}
  .side nav a,.out{justify-content:center;padding:0}
  .side-foot{align-items:center;padding:12px 4px}
  .clock b{font-size:11px}
  .mkt{align-self:center;padding:2px 6px}
  .page{padding:16px}
  .bar{padding:0 16px}
}
@media(max-width:699px){
  :root{--sw:0px}
  .side{position:static;width:auto;flex-direction:row;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid #16294f}
  .side nav{flex-direction:row;overflow:visible}
  .side-foot{flex-direction:row;border-top:0}
  .brand{padding:8px 12px}
  .mode,.clock,.mkt{display:none}
  .bar{position:static}
  .main{margin-left:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- print: used by the report page (white paper, no menus) ---------- */
@media print{
  :root,:root[data-theme]{color-scheme:light;--bg:#fff;--card:#fff;--card2:#f3f4f6;--tx:#000;--mut:#444;--line:#bbb;--line2:#999;--pos:#137236;--neg:#b91c1c;--warn:#92400e;--acc-tx:#0b4a75;--zebra:#f6f7f9;--shadow:none}
  body{font-size:11pt}
  .side,.bar,.flash,.foot,.noprint,.hp{display:none!important}
  .main{margin:0}
  .page{max-width:none;padding:0}
  .card,.tile,.banner{break-inside:avoid;border-color:#bbb}
  .tbl thead th{position:static}
  a{color:inherit;text-decoration:none}
}
