/* tokens.css v2 — System Zero dark soul (mirrors live), three layers, no hex outside :root. */
:root {
  /* primitive */
  --bg0: #000000; --cream: #FFFFE3; --green: #22c55e; --red: #ef4444; --yellow: #d8b65a;
  --row0: #0b0b0a; --rowhead: #14140f; --rowhov: #1f1f1d;
  --mono-f: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans-f: -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  /* semantic */
  --bg: var(--bg0); --surface: rgba(255,255,227,.045); --surface-2: rgba(255,255,227,.08);
  --hair: rgba(255,255,227,.08); --fg: var(--cream); --fg-dim: rgba(255,255,227,.6);
  --fg-faint: rgba(255,255,227,.38);
  --up: var(--green); --down: var(--red); --warn: var(--yellow);
  /* component */
  --radius: 18px; --pill: 980px; --tap: 44px;
  --font-ui: var(--sans-f); --font-mono: var(--mono-f);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --cta: #FFFFE3; --cta-ink: #111;
}
/* White theme — flips every page that uses these tokens. Persisted per device. */
[data-theme="light"] {
  --bg0: #faf7ef; --cream: #231d0c; --green: #1d7a44; --red: #cf3535; --yellow: #9a7a1e;
  --row0: #ffffff; --rowhead: #f3eddd; --rowhov: #efe6cf;
  --bg: var(--bg0); --surface: #ffffff; --surface-2: #f3eddd;
  --hair: #cfbd8d; --fg: var(--cream); --fg-dim: rgba(35,29,12,.66);
  --fg-faint: rgba(35,29,12,.45);
  --shadow: 0 20px 50px rgba(120,95,20,.14);
  --cta: #f7ecc9; --cta-ink: #231d0c;
}
/* Cream wordmark logo was drawn for dark bg — render it dark in light theme.
   (logo_light.png already ships dark ink + gold O, so it needs no filter.) */
[data-theme="light"] img[src*="logo"]:not([src*="logo_light"]) { filter: brightness(.18); }
[data-theme="light"] .rail { --fg: #FFFFE3; --fg-dim: rgba(255,255,227,.62); --fg-faint: rgba(255,255,227,.4); --hair: rgba(255,255,227,.14); background: #0b0b0a; }
[data-theme="light"] .lp-card { box-shadow: 0 2px 14px rgba(120,95,20,.08); }
[data-theme="light"] .b-pri { background: rgba(29,122,68,.16); }
[data-theme="light"] .b-warn { background: rgba(154,122,30,.18); }
[data-theme="light"] .tbl tbody tr.row:nth-child(even) td{background:rgba(120,95,20,.07)}
[data-theme="light"] .banner { background: rgba(245,158,11,.12); }
/* Motion utilities (all pages): reveal-on-scroll, lift, button press. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.25,1); }
.reveal.in { opacity: 1; transform: none; }
.lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--warn); }
.press { transition: transform .18s ease, box-shadow .18s ease; }
.press:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.press:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation-duration: .01ms !important; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--font-ui);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap { max-width: 1400px; margin: 0 auto; padding: 84px 16px 110px; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,227,.06);
  padding: 20px 22px; margin-top: 18px;
}
/* top bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; min-height: 60px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(20px);
}
.bar .logo { font-weight: 700; letter-spacing: -.02em; font-size: 17px; }
.bar .sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
/* tabs */
.tabs { display: flex; gap: 4px; margin-top: 22px; flex-wrap: wrap; }
.tabs button {
  padding: 9px 16px; border-radius: var(--pill); border: 1px solid transparent;
  background: none; color: var(--fg-dim); font-size: 13px; font-weight: 500;
  font-family: var(--font-ui); min-height: var(--tap);
}
.tabs button.on { background: var(--surface-2); color: var(--fg); }
/* regime */
.regime { display: flex; align-items: center; gap: 16px; }
.lamp { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.lamp.g { background: var(--up); } .lamp.y { background: var(--warn); } .lamp.r { background: var(--down); }
.regime .rtxt { font-weight: 600; font-size: 16px; }
.regime .rdesc { color: var(--fg-dim); font-size: 14px; }
/* kpis */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kpi .k { font-size: 13px; color: var(--fg-dim); }
.kpi .v { font-size: 26px; font-weight: 600; font-family: var(--font-mono); font-style: normal; font-synthesis: none; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "zero" 0; margin-top: 8px;
  line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; font-size: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { font-size: 12px; color: var(--fg-faint); margin-top: 6px; }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
/* table */
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; align-items: center; }
.chip {
  border: 1px solid var(--hair); background: var(--surface); color: var(--fg-dim);
  border-radius: var(--pill); padding: 8px 14px; font-size: 13px; min-height: var(--tap);
  font-family: var(--font-ui);
}
.chip.on { color: var(--fg); background: var(--surface-2); }
select.chip, input.search {
  background: var(--surface); color: var(--fg); border: 1px solid var(--hair);
  max-width: 100%;
}
input.search { border-radius: 10px; padding: 0 12px; min-height: var(--tap); font-size: 14px; flex: 1; min-width: 140px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-dim); padding: 10px 8px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.tbl td { padding: 12px 8px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td { background: rgba(255,255,227,.02); }
.tbl .sym { font-weight: 700; }
.badge { display: inline-block; padding: 4px 12px; border-radius: var(--pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-pri { background: rgba(95,191,127,.14); color: var(--up); }
.b-watch { background: rgba(216,182,90,.14); color: var(--warn); }
.b-rej { background: var(--surface-2); color: var(--fg-faint); }
.b-info { background: rgba(255,255,227,.1); color: var(--fg-dim); }
.up { color: var(--up); } .down { color: var(--down); }
.group-head td { padding-top: 20px !important; color: var(--fg-dim); font-size: 13px; font-weight: 600; }
.spark { display: block; }
.detail td { background: rgba(0,0,0,.3); }
.inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px; padding: 8px 0; }
@media (max-width: 700px) { .inner { grid-template-columns: 1fr; } }
.metric .mk { font-size: 12px; color: var(--fg-faint); }
.metric .mv { font-size: 15px; font-weight: 600; }
.metric .mv.zone { font-family: var(--font-mono); }
.note-line { font-size: 13.5px; color: var(--fg-dim); }
.votes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stamp { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.kv span:first-child { color: var(--fg-dim); }
button.primary {
  background: var(--fg); color: var(--bg); border: 0; border-radius: var(--pill);
  min-height: var(--tap); padding: 0 22px; font-weight: 600; font-size: 14px;
}
button.primary:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* live-style shell: sidebar + topbar, sticky table, group heads */
.sb{position:fixed;top:0;left:0;bottom:0;width:208px;z-index:30;display:flex;flex-direction:column;
  background:rgba(10,10,8,.85);backdrop-filter:blur(20px);border-right:1px solid var(--hair);padding:18px 12px}
.sb-brand{font-weight:700;font-size:17px;letter-spacing:-.02em;padding:4px 12px 16px}
.sb-brand small{display:block;font-family:var(--font-mono);font-size:10px;color:var(--fg-faint);font-weight:400}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-nav button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--fg-dim);
  font-family:var(--font-ui);font-size:13.5px;font-weight:500;padding:10px 12px;border-radius:10px;
  cursor:pointer;text-align:left;min-height:var(--tap)}
.sb-nav button.on{background:var(--surface-2);color:var(--fg)}
.sb-nav button:hover{color:var(--fg)}
.sb-foot{margin-top:auto;padding:12px;font-size:11px;color:var(--fg-faint);font-family:var(--font-mono)}
.sb-top{display:none}
.has-sb .wrap{margin-left:208px}
.table-wrap{margin-top:6px;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{font-size:13px;min-width:760px}
.tbl thead th{position:sticky;top:0;z-index:3;background:var(--rowhead);border-top:none;border-bottom:1px solid var(--hair)}
.num{font-style:normal;font-synthesis:none;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"zero" 0}
.tbl td.sym{position:sticky;left:0;background:var(--row0);z-index:2;font-weight:600;cursor:pointer}
.tbl tbody tr.row:hover td.sym{background:var(--rowhov)}
.tbl tbody tr.row:nth-child(even) td{background:rgba(127,127,127,.10)}
.tbl tbody tr.row:nth-child(even) td.sym{background:var(--row0)}
.tbl td.rank{color:var(--fg-dim);font-variant-numeric:tabular-nums}
.copy{background:var(--surface-2);border:1px solid var(--fg-faint);color:var(--fg);border-radius:var(--pill);
  cursor:pointer;font-size:12.5px;font-weight:600;padding:7px 14px}
.copy:hover{border-color:var(--warn)}
.group-head td{background:var(--surface-2);font-weight:600;font-size:13px;color:var(--fg-dim)}
.copy{background:transparent;border:1px solid var(--hair);color:var(--fg-dim);border-radius:var(--pill);
  cursor:pointer;font-size:12px;padding:6px 13px}
.copy:hover{color:var(--fg)}
.vx{padding:16px 18px;border-radius:14px;margin-bottom:12px;background:var(--surface-2);border-left:3px solid var(--fg-faint)}
.vx-title{font-size:14px;font-weight:700;margin-bottom:6px}
.vx-body{font-size:13.5px;color:var(--fg-dim);line-height:1.55}
.vx-pri{border-left-color:var(--up)} .vx-watch{border-left-color:var(--warn)} .vx-rej{border-left-color:var(--down)}
.adv-toggle{display:block;width:100%;text-align:left;background:none;border:1px solid var(--hair);
  color:var(--fg-dim);font:600 12px var(--font-mono);text-transform:uppercase;letter-spacing:.04em;
  padding:9px 14px;border-radius:10px;cursor:pointer;margin-top:12px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--hair);border-radius:var(--pill);padding:3px;gap:2px}
.seg button{background:transparent;border:1px solid transparent;color:var(--fg);font-family:var(--font-ui);
  font-size:13px;font-weight:500;padding:8px 16px;cursor:pointer;border-radius:var(--pill);min-height:36px}
.seg button.on{background:var(--fg);color:var(--bg);font-weight:700}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);z-index:60;
  background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:var(--pill);
  font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:760px){
  .sb{display:none} .has-sb .wrap{margin-left:auto}
  .sb-top{display:flex;align-items:center;gap:12px;position:fixed;top:0;left:0;right:0;z-index:30;
    min-height:56px;padding:0 16px;background:rgba(0,0,0,.6);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair)}
  .sb-top .logo{font-weight:700}
  .sb-top button{background:none;border:0;color:var(--fg);font-size:20px;min-height:var(--tap)}
  .sb.open{display:flex;top:56px}
  .wrap{padding-top:76px}
}

.tlab{font-size:10px;color:var(--fg-faint);font-weight:500}
/* live-language layer */
:root{
  --cta:#f2efea; --live:#22c55e; --amber:#f59e0b; --raildeep:#0a0a0a;
  --serif:Georgia,'Times New Roman',serif;
}
.rail{position:fixed;top:0;left:0;bottom:0;width:64px;z-index:40;display:flex;flex-direction:column;align-items:center;
  background:var(--raildeep);border-right:1px solid var(--hair);padding:14px 0;transition:width .2s}
.rail.open{width:208px;align-items:stretch;padding:14px 12px}
.rail .mark{width:34px;height:34px;border-radius:10px;object-fit:cover;margin-bottom:14px}
.rail.open .mark{margin-left:8px}
.rail button.ri{background:none;border:0;color:var(--fg-dim);width:44px;height:44px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative}
.rail.open button.ri{width:100%;justify-content:flex-start;gap:12px;padding:0 12px;font-family:var(--font-ui);font-size:13.5px}
.rail button.ri svg{width:20px;height:20px;flex:0 0 auto}
.rail button.ri .lbl{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease,max-width .2s ease}
.rail.open button.ri .lbl{max-width:140px;opacity:1;transform:none}
.rail button.ri:hover{color:var(--fg)}
.rail button.ri.on{color:var(--fg);background:var(--surface-2)}
.rail button.ri.on::before{content:'';position:absolute;left:-10px;top:10px;bottom:10px;width:2px;background:var(--live);border-radius:2px}
.rail.open button.ri.on::before{left:-12px}
.rail button.ri.logout{color:var(--down)}
.rail .sp{flex:1}
.rail .dot{width:10px;height:10px;border-radius:50%;background:var(--live);margin-bottom:12px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.rail .chev{background:none;border:0;color:var(--fg-dim);cursor:pointer;font-size:16px;min-height:44px;width:100%;text-align:center}
.has-rail .wrap{margin-left:64px;transition:margin-left .2s ease}
.has-rail .rail.open ~ .wrap{margin-left:208px}
.page-head{margin:6px 0 18px}
.page-head h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.02em;margin:6px 0 8px;font-weight:700}
.page-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--fg-dim)}
.page-head .sub{color:var(--fg-dim);font-size:14px;max-width:640px}
.banner{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--amber);border-radius:14px;
  padding:14px 16px;margin:14px 0;background:rgba(245,158,11,.06);font-size:13.5px;color:var(--fg-dim)}
.banner b{color:var(--fg)}
.btn-cream{background:var(--cta);color:var(--cta-ink);border:0;border-radius:999px;font-family:var(--font-ui);
  font-size:14px;font-weight:600;padding:10px 22px;cursor:pointer;min-height:44px}
.btn-cream:hover{filter:brightness(1.06)}
.btn-cream.is-disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.btn-ghost{background:transparent;border:1px solid var(--hair);color:var(--fg-dim);border-radius:999px;
  font-family:var(--font-ui);font-size:13px;padding:8px 18px;cursor:pointer;min-height:40px}
.btn-ghost:hover{color:var(--fg)}
.conf{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--hair);
  border-radius:14px;padding:16px 20px;margin:14px 0}
.conf .t{font-weight:700} .conf .s{color:var(--fg-dim);font-size:13px}
.conf .right{margin-left:auto;text-align:right}
.conf .big{font-size:30px;font-family:var(--font-mono)}
/* desk: banner + kpis left, run + sector mix right, table full-width below */
.desk-top{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start;margin-bottom:6px}
.desk-main{display:grid;gap:14px;align-content:start;min-width:0}
.desk-main .kpis{grid-template-columns:repeat(3,1fr)}
.desk-main .kpi:last-child{grid-column:span 2}
.desk-side{display:grid;gap:14px;align-content:start;min-width:0}
.secrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px;padding:5px 0;align-items:baseline}
.secrow .bar{position:static;top:auto;left:auto;right:auto;min-height:0;padding:0;display:block;backdrop-filter:none;grid-column:1/-1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.secrow .bar i{display:block;height:100%;background:var(--live);border-radius:99px}
/* best-pick strip: identity left, levels right */
.bestpick{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.bestpick .bp-id{min-width:200px;flex:1}
.bestpick .bp-levels{flex:2;min-width:240px;display:grid;grid-template-columns:repeat(4,1fr);gap:0 20px}
@media(max-width:700px){.bestpick .bp-levels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bestpick{flex-direction:column;align-items:stretch}}
@media(max-width:900px){.desk-top{grid-template-columns:1fr}}
@media(min-width:701px) and (max-width:900px){.desk-main .kpis{grid-template-columns:repeat(5,1fr)}.desk-main .kpi:last-child{grid-column:auto}}
@media(max-width:700px){.desk-main .kpis{grid-template-columns:repeat(2,1fr)}.desk-main .kpi:last-child{grid-column:span 2}.desk-main .kpi{min-width:0}}
.foot{margin:34px 0 20px;text-align:center;color:var(--fg-dim);font-size:12px}
.foot b{color:var(--fg)}
.kpi .v{font-size:34px}
.log{font-family:var(--font-mono);font-size:12.5px;line-height:1.9;color:var(--fg-dim)}
.log .lt{color:var(--fg-faint)} .log .ok{color:var(--live)}
.audit-row{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);
  border-radius:12px;padding:12px 16px;margin-bottom:10px;font-size:13px}
.audit-row .dot{width:8px;height:8px;border-radius:50%;background:var(--live);margin-top:5px;flex:0 0 auto}
.audit-row .who{color:var(--warn)}
@media(max-width:760px){
  .rail{width:56px} .has-rail .wrap{margin-left:56px}
  .rail.open{width:208px;box-shadow:0 0 40px rgba(0,0,0,.7)}
}
.kpi .c{font-size:12px;color:var(--fg-dim);margin-top:6px}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--live);color:#04120a;font-size:30px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}

.btn-ghost.danger{color:var(--down);border-color:rgba(239,68,68,.4)}

/* Around theme toggle (toggles.dev/around) — animated icon only; the text
   label stays in the HTML next to it. Moon = dark, sun = light. */
.theme-btn{display:inline-flex;align-items:center;gap:8px}
.around{width:1.15em;height:1.15em;flex:0 0 auto;overflow:hidden;--around-dur:.5s}
.around-clip{transform-origin:center;transform-box:view-box;transition:transform calc(var(--around-dur,.5s)*.6) ease}
html[data-theme="dark"] .around-clip{transform:rotate(-90deg);transition:transform var(--around-dur,.5s) ease}
.around-clipath{transition:d calc(var(--around-dur,.5s)*.6) ease,translate calc(var(--around-dur,.5s)*.6) ease}
html[data-theme="dark"] .around-clipath{d:path("M-12 -14h42v30a1 1 0 00-16 13H0Z");transition-duration:var(--around-dur,.5s)}
@supports not (d:path("M0 0")){html[data-theme="dark"] .around-clipath{translate:-12px -14px}}
.around-sun{transform-origin:center;transform-box:fill-box;transition:transform calc(var(--around-dur,.5s)*.6) ease}
html[data-theme="dark"] .around-sun{transform:scale(1.4);transition:transform var(--around-dur,.5s) ease}
.around-rays circle{transform-origin:center;transform-box:fill-box;transition:transform calc(var(--around-dur,.5s)*.2) ease}
.around-rays circle:nth-child(1){transition-delay:calc(var(--around-dur,.5s)*.253)}
.around-rays circle:nth-child(2){transition-delay:calc(var(--around-dur,.5s)*.348)}
.around-rays circle:nth-child(3){transition-delay:calc(var(--around-dur,.5s)*.443)}
.around-rays circle:nth-child(4){transition-delay:calc(var(--around-dur,.5s)*.538)}
.around-rays circle:nth-child(5){transition-delay:calc(var(--around-dur,.5s)*.633)}
.around-rays circle:nth-child(6){transition-delay:calc(var(--around-dur,.5s)*.728)}
html[data-theme="dark"] .around-rays circle{transform:scale(0);transition:transform calc(var(--around-dur,.5s)*.4) ease}
@media(prefers-reduced-motion:reduce){.around *{transition:none!important}}