:root{
  --bg:#0e1116;--bg2:#141922;--bg3:#1b222d;--line:#273040;--line2:#334055;
  --tx:#dfe6ef;--tx2:#9aa7b8;--tx3:#6d7a8c;
  --up:#3fd0a0;--dn:#f0647a;--warn:#f2b24c;--info:#6cb4ff;--viol:#b49bff;--off:#4a5568;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:13px/1.45 var(--sans)}
a{color:var(--info);text-decoration:none}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)}.dn{color:var(--dn)}.warn{color:var(--warn)}.mut{color:var(--tx2)}.dim{color:var(--tx3)}
h1,h2,h3{margin:0;font-weight:600}
h1{font-size:18px}h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx2)}
h3{font-size:13px}

/* shell */
.app{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
.rail{background:var(--bg2);border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.brand{font-weight:700;letter-spacing:.04em;padding:2px 8px 12px}
.brand small{display:block;font-weight:400;color:var(--tx3);font-size:10.5px;letter-spacing:.06em}
.rail a{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:6px;color:var(--tx2)}
.rail a:hover{background:var(--bg3);color:var(--tx)}
.rail a.on{background:var(--bg3);color:var(--tx);box-shadow:inset 2px 0 0 var(--info)}
.rail a i{font-style:normal;width:16px;text-align:center;font-family:var(--mono);color:var(--tx3)}
.rail .sp{flex:1}
.rail .foot{font-size:10.5px;color:var(--tx3);padding:8px}
.badge{margin-left:auto;font:600 10px var(--mono);padding:1px 6px;border-radius:9px;background:#3a2c14;color:var(--warn)}
main{min-width:0}
.top{position:sticky;top:0;z-index:5;background:rgba(14,17,22,.94);backdrop-filter:blur(4px);border-bottom:1px solid var(--line);padding:8px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sample{font:700 10.5px var(--mono);letter-spacing:.1em;color:#1a1204;background:var(--warn);padding:2px 8px;border-radius:3px}
.ladder{display:flex;gap:0;align-items:center;font:600 10.5px var(--mono);letter-spacing:.06em}
.ladder span{padding:3px 9px;border:1px solid var(--line2);color:var(--tx3)}
.ladder span+span{border-left:0}
.ladder .cur{background:#12324a;color:var(--info);border-color:var(--info)}
.ladder .nxt{color:var(--tx2);border-style:dashed}
.ladder .off{color:var(--off);text-decoration:line-through;background:repeating-linear-gradient(135deg,transparent 0 5px,#161c25 5px 10px)}
.fresh{margin-left:auto;font:11px var(--mono);color:var(--tx2);display:flex;gap:12px;align-items:center}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);margin-right:5px}
.dot.w{background:var(--warn)}.dot.d{background:var(--dn)}.dot.o{background:var(--off)}
.page{padding:18px;max-width:1380px}
.pagehead{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.pagehead p{margin:0;color:var(--tx2);max-width:78ch}

/* blocks */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1.3fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.g21{grid-template-columns:2fr 1fr}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.card>h2{margin-bottom:9px;display:flex;gap:8px;align-items:center}
.card>h2 .r{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--tx3);font-weight:400}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi b{font:600 22px var(--mono)}
.kpi span{color:var(--tx3);font-size:11px}
table{border-collapse:collapse;width:100%}
th{font:600 10.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid #1d2531;vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--bg3)}
.scroll{overflow-x:auto}
.chip{display:inline-block;font:600 10.5px var(--mono);padding:1px 6px;border-radius:3px;border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.chip.up{color:var(--up);border-color:#1f5b49}.chip.dn{color:var(--dn);border-color:#6a2a36}.chip.warn{color:var(--warn);border-color:#6a4f1c}.chip.info{color:var(--info);border-color:#25507a}.chip.viol{color:var(--viol);border-color:#4b3f80}.chip.off{color:var(--off);border-style:dashed}
.note{border-left:3px solid var(--warn);background:#1e1a10;padding:8px 11px;border-radius:0 6px 6px 0;color:#e3cf9e;font-size:12px}
.note.info{border-color:var(--info);background:#10202f;color:#b9d6f2}
.note.dn{border-color:var(--dn);background:#2a1319;color:#f0b9c2}
.bar{height:8px;background:var(--bg3);border-radius:4px;position:relative;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;border-radius:4px}
.meter{display:grid;grid-template-columns:130px 1fr 90px;gap:8px;align-items:center;margin:5px 0;font-size:12px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.seg button{background:none;border:0;color:var(--tx2);padding:4px 10px;font:inherit;cursor:pointer}
.seg button.on{background:var(--bg3);color:var(--tx)}
button.pill{background:var(--bg3);border:1px solid var(--line2);color:var(--tx);border-radius:6px;padding:4px 10px;font:inherit;cursor:pointer}
button[disabled]{opacity:.45;cursor:not-allowed}
select{background:var(--bg3);color:var(--tx);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;font:inherit}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* matrix */
.mx{width:100%;table-layout:fixed}
.mx th{text-align:center}
.mx th:first-child,.mx td:first-child{text-align:left;width:150px}
.mx td{padding:3px}
.cell{display:block;border:1px solid var(--line);border-radius:6px;background:var(--bg3);padding:6px 7px;min-height:58px;color:var(--tx);position:relative}
.cell:hover{border-color:var(--info)}
.cell .p{display:block;white-space:nowrap;font:600 14px var(--mono)}
.cell .s{display:block;white-space:nowrap;font:10.5px var(--mono);color:var(--tx2)}
.mcode{display:none}
.cell.bad{border-color:var(--warn);background:repeating-linear-gradient(135deg,#1f1b10 0 6px,#1a1710 6px 12px)}
.cell .tag{position:absolute;top:4px;right:5px;font:700 9.5px var(--mono);color:var(--warn)}
.cell.pos::before,.cell.neg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:6px 0 0 6px}
.cell.pos::before{background:var(--up)}.cell.neg::before{background:var(--dn)}
.tot td{font-weight:600;border-top:1px solid var(--line2)}

/* timeline */
.tl{display:flex;gap:3px;flex-wrap:wrap}
.tl b{width:18px;height:22px;border-radius:3px;background:var(--bg3);border:1px solid var(--line);display:inline-block;font:600 9px/20px var(--mono);text-align:center;color:var(--tx3)}
.tl b.open{background:#103a2e;border-color:var(--up);color:var(--up)}
.tl b.close{background:#2a1c3f;border-color:var(--viol);color:var(--viol)}
.tl b.hold{background:#11283d;border-color:#2f6aa3;color:var(--info)}
.tl b.invalid{background:#2f1018;border-color:var(--dn);color:var(--dn)}
.tl b.cur{outline:1px solid var(--tx);outline-offset:1px}
.stance{display:flex;gap:4px;flex-wrap:wrap}
.stance b{font:700 10px var(--mono);width:26px;height:20px;line-height:20px;text-align:center;border-radius:3px;background:var(--bg3);color:var(--tx3);border:1px solid var(--line)}
.stance b.L{background:#103a2e;color:var(--up);border-color:#1f5b49}
.stance b.S{background:#3a1520;color:var(--dn);border-color:#6a2a36}
.stance b.X{background:#2f1018;color:var(--dn);border-style:dashed}
.quote{font-size:12.5px;color:var(--tx);border-left:2px solid var(--line2);padding-left:10px;margin:6px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px}
.kv dt{color:var(--tx3)}.kv dd{margin:0;font-family:var(--mono)}
.pre{font:11px/1.45 var(--mono);background:#0a0d12;border:1px solid var(--line);border-radius:6px;padding:9px;white-space:pre-wrap;color:var(--tx2);overflow-x:auto}
.why li{margin:5px 0}
.hide-m{}.show-m{display:none}
.mtabs{display:none}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--bg2);border-top:1px solid var(--line);z-index:9;overflow-x:auto}
  .mtabs a{flex:1 0 auto;min-width:58px;text-align:center;padding:7px 4px 8px;color:var(--tx2);font-size:10.5px}
  .mtabs a i{display:block;font:normal 15px var(--mono);color:var(--tx3)}
  .mtabs a.on{color:var(--tx);box-shadow:inset 0 2px 0 var(--info)}
  .top{padding:7px 10px;gap:8px}
  .ladder span{padding:2px 5px;font-size:9.5px}
  .fresh{margin-left:0;width:100%;font-size:10.5px;gap:8px;flex-wrap:wrap}
  .page{padding:12px 10px 76px}
  .g2,.g3,.g4,.g21{grid-template-columns:1fr}
  .g6{grid-template-columns:1fr 1fr}
  .hide-m{display:none}.show-m{display:block}.mcode{display:inline}
  .mx th:first-child,.mx td:first-child{width:46px}
  .mx td{padding:2px}
  .cell{padding:4px 3px;min-height:50px;text-align:center}
  .cell .p{font-size:11px}.cell .s{font-size:9px}
  .mx td:first-child .num{font-size:9.5px}
  .cell .s{font-size:8px;letter-spacing:-.4px;overflow:hidden}
  .cell .tag{position:static;display:block}
  .meter{grid-template-columns:100px 1fr 70px}
  td{overflow-wrap:anywhere}
  .scroll{overflow-x:visible}
  h1{font-size:16px}
}