:root{
  --void:#0B0C0E; --pane:#121417; --rule:#23262B; --amber:#FFA028;
  --profit:#2BD576; --loss:#FF4D4D; --data:#6FD3FF; --dim:#8B919A;
  --flash:#FFE9C4; --text:#D7DBE0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--void); color:var(--text);
  font-family:'IBM Plex Mono','Menlo','Consolas',monospace;
  font-size:12px; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
.cond{font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  text-transform:uppercase; letter-spacing:.06em; font-weight:600}

/* masthead */
header{display:flex; align-items:baseline; gap:16px; padding:10px 14px 8px;
  border-bottom:1px solid var(--rule)}
header .brand{font-size:22px; color:var(--amber)}
header .sub{color:var(--dim); font-size:11px}
header .clock{margin-left:auto; color:var(--data); font-size:11px}

/* status line (replaces the demo banner — honest system state) */
.status{color:var(--dim); font-size:10px; padding:4px 14px;
  border-bottom:1px solid var(--rule); display:flex; gap:18px; flex-wrap:wrap}
.status .ok{color:var(--profit)}
.status .warn{color:var(--amber)}
.status .bad{color:var(--loss)}

/* ticker */
.ticker-wrap{overflow:hidden; border-bottom:1px solid var(--rule);
  background:var(--pane); white-space:nowrap}
.ticker{display:inline-block; padding:5px 0; font-size:11px;
  animation:tick 60s linear infinite; will-change:transform}
.ticker-wrap:hover .ticker{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{margin:0 20px; color:var(--dim); letter-spacing:.02em}
.ticker .hd{color:var(--amber); font-weight:600; letter-spacing:.08em}
.ticker .pick{color:var(--text)}
.ticker b{color:var(--flash); font-weight:500}
.ticker .up{color:var(--profit)} .ticker .dn{color:var(--loss)}
@media (prefers-reduced-motion: reduce){.ticker{animation:none}}

/* pane grid */
.grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:10px; padding:10px; max-width:1240px; margin:0 auto}
.pane{background:var(--pane); border:1px solid var(--rule)}
.pane h2{font-size:12px; color:var(--amber); padding:7px 12px;
  border-bottom:1px solid var(--rule); display:flex; justify-content:space-between}
.pane h2 .idx{color:var(--dim)}
@media(max-width:860px){.grid{grid-template-columns:1fr}}

/* empty states — a confident no-data screen is the sophisticated look */
.empty{padding:26px 16px; text-align:center}
.empty .head{color:var(--amber); font-size:13px; letter-spacing:.04em}
.empty .sub{color:var(--dim); font-size:11px; margin-top:8px; line-height:1.5}

/* pick cards — the hero list (PRD §4.1) */
.picks{display:flex; flex-direction:column}
.pick{padding:10px 12px; border-bottom:1px solid var(--rule)}
.pick-top{display:flex; align-items:baseline; gap:10px; font-size:10px}
.pick-top .stars{color:var(--amber); letter-spacing:.08em; font-size:12px}
.pick-top .lg{color:var(--dim); text-transform:uppercase}
.pick-top .ko{color:var(--data); margin-left:auto}
.pick-fix{color:var(--text); font-size:13px; margin-top:5px}
.pick-bet{color:var(--amber); font-size:13px; margin-top:3px; font-weight:500}
.pick-price{color:var(--profit); font-size:12px; margin-top:3px}
.pick-price b{color:var(--flash)}
.pick-reason{color:var(--dim); font-size:11px; margin-top:5px; line-height:1.5}
.pick-stake{color:var(--data); font-size:11px; margin-top:4px}
.pick-nerd{color:var(--dim); font-size:10px; margin-top:5px; letter-spacing:.02em}
.pick-nerd .xg{color:var(--data)}

/* side panes: model monitor + fixture board */
.kv{display:flex; justify-content:space-between; padding:6px 12px;
  border-bottom:1px solid var(--rule); font-size:11px}
.kv span{color:var(--dim)}
.kv b{color:var(--data); font-weight:500}
.kv .ok{color:var(--profit)}
.kv .warn{color:var(--amber)}
.board{width:100%; border-collapse:collapse}
.board td{padding:5px 8px; font-size:11px; border-bottom:1px solid var(--rule)}
.board .v{color:var(--amber)} .board .nb{color:var(--dim)}
.board .lg{color:var(--dim); font-size:10px}
.board .ko{color:var(--data); font-size:10px}

/* team news guard */
.pick.risk{border-left:2px solid var(--amber)}
.news-risk{color:var(--amber); font-size:10px; letter-spacing:.03em;
  padding:4px 8px; margin-bottom:6px; border:1px solid var(--amber)}
.guard-log{border-top:1px solid var(--rule); margin-top:6px}
.guard-log .gl{padding:5px 12px; font-size:10px; color:var(--dim);
  border-bottom:1px solid var(--rule)}
.guard-log .gl b{color:var(--amber)}

/* admin alerts (UnmatchedTeamError — surfaced, never swallowed) */
.alerts{border-top:1px solid var(--rule)}
.alerts .a{padding:6px 12px; font-size:10px; color:var(--loss);
  border-bottom:1px solid var(--rule)}
.alerts .a b{color:var(--amber)}

/* command bar */
.cmd{position:sticky; bottom:0; display:flex; gap:4px; padding:7px 10px;
  background:var(--pane); border-top:1px solid var(--rule); flex-wrap:wrap;
  align-items:center}
.cmd button{background:none; border:1px solid var(--rule); color:var(--dim);
  font:inherit; font-size:11px; padding:4px 12px; cursor:pointer}
.cmd button.active,.cmd button:hover{border-color:var(--amber); color:var(--amber)}
.cmd button:focus-visible{outline:2px solid var(--amber)}
.cmd .rg{margin-left:auto; color:var(--dim); font-size:10px}
.cmd .rg a{color:var(--data)}