:root {
  --bg: #070B14;
  --bg2: #0B1220;
  --card: #0E1626;
  --card2: #0A111E;
  --sel: #16233A;
  --line: #1C2A42;
  --line2: #2A3C5C;
  --track: #1A2740;
  --text: #E8EEF7;
  --muted: #9AA8BD;
  --dim: #7F8DA3;
  --soft: #C9D4E5;
  --accent: #22D3EE;
  --win: #34E39A;
  --win-bg: #0F3A2B;
  --win-text: #7EF0C0;
  --loss: #FF7A8A;
  --loss-bg: #3A1620;
  --loss-text: #FF9AA8;
  --warn: #F2A65A;
  --display: 'Oswald', sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 14px; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.win { color: var(--win); }
.loss { color: var(--loss); }
.warn { color: var(--warn); }

/* buttons */
.btn { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card); color: var(--text); cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: #06202A; border-color: var(--accent); }
.btn-sm { min-height: 36px; padding: 0 10px; font-size: 12px; }
.btn:focus-visible, .chip:focus-visible, .game:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header */
.top { background: var(--bg2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.top-in { max-width: none; margin: 0; padding: 12px 24px; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand b { font-family: var(--display); font-size: 28px; color: var(--accent); }
.brand span { font-family: var(--display); font-weight: 500; font-size: 28px; letter-spacing: 2px; color: var(--text); }
.nav { display: flex; gap: 4px; flex: 1 1 auto; }
.nav a { text-decoration: none; color: var(--muted); padding: 10px 14px; border-radius: 6px; }
.nav a:hover { color: var(--text); background: var(--sel); }
.status { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--win); margin-right: 6px; }
.dot.demo { background: var(--warn); }
.avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--sel); color: var(--accent); font-weight: 600; cursor: pointer; }

/* layout */
main { max-width: none; margin: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.kpi .lbl { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.kpi .val { font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1.1; margin-top: 4px; }
.kpi .sub { color: var(--muted); font-size: 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--card); color: var(--soft); border: 1px solid var(--line2); font-weight: 600; font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); color: #06202A; border-color: var(--accent); }
.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col-games { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; max-height: 900px; overflow-y: auto; }
.col-detail { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
h2.sec { margin: 0; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; }
h3.sec { margin: 0 0 10px; font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.sec-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.game { text-align: left; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.game[aria-current="true"] { background: var(--sel); border-color: var(--accent); }
.game .meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.game .teams { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: .5px; }
.game .lines { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.badge { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--track); color: var(--muted); letter-spacing: .5px; }
.badge.edge, .badge.win { background: var(--win-bg); color: var(--win-text); }
.badge.loss { background: var(--loss-bg); color: var(--loss-text); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.card.hl { border-color: var(--line2); }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.detail-head h2 { margin: 4px 0 0; font-family: var(--display); font-size: 32px; font-weight: 600; }
.edge-banner { background: var(--accent); color: #06202A; font-family: var(--display); font-weight: 700; letter-spacing: 2px; padding: 10px 14px; border-radius: 6px; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.mini > div { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.mini .lbl { font-size: 12px; color: var(--dim); }
.mini .v { font-family: var(--display); font-size: 21px; font-weight: 600; margin-top: 2px; }
.bar { height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; background: var(--accent); }
.bar > div.good { background: var(--win); }

.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 400; color: var(--dim); font-family: var(--mono); font-size: 11px; padding: 8px 6px; white-space: nowrap; }
td { padding: 10px 6px; border-top: 1px solid var(--track); white-space: nowrap; }
td.num, th.num { text-align: right; }
td.best { color: var(--accent); font-weight: 600; }

.vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--track); }
.vrow .lg { font-family: var(--mono); font-size: 11px; color: var(--dim); min-width: 52px; }
.vrow .what { flex: 1 1 220px; }
.vrow .what b { display: block; }
.vrow .what small { color: var(--muted); }

/* chart */
.chart { position: relative; height: 240px; padding-left: 44px; }
.chart svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.tick { position: absolute; left: 44px; right: 0; border-top: 1px dashed var(--track); }
.tick span { position: absolute; left: -44px; top: -8px; width: 38px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.chart-x { display: flex; justify-content: space-between; padding-left: 44px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* forms / dialogs */
dialog { background: var(--card); color: var(--text); border: 1px solid var(--line2); border-radius: 12px; padding: 22px; width: min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(3, 6, 12, .7); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea { min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.err { color: var(--loss-text); min-height: 18px; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--sel); border: 1px solid var(--line2); padding: 10px 16px; border-radius: 8px; z-index: 50; }

footer.disc { border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: min(400px, 100%); background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 28px; }
.login-card .brand { margin-bottom: 18px; }
.qr { display: block; margin: 8px auto 12px; border-radius: 8px; background: #fff; padding: 6px; }
.secret { font-family: var(--mono); font-size: 12px; word-break: break-all; background: var(--card2); padding: 8px; border-radius: 6px; color: var(--soft); }

/* mobile bottom nav */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .nav { display: none; }
  .top-in { padding: 10px 14px; }
  .status .q { display: none; }
  main { padding: 14px 14px 90px; gap: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi .val { font-size: 28px; }
  .col-games { max-height: none; }
  .card { padding: 16px; }
  .detail-head h2 { font-size: 24px; }
  .chart { height: 180px; padding-left: 34px; }
  .tick { left: 34px; } .tick span { left: -34px; width: 30px; }
  .chart-x { padding-left: 34px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg2); border-top: 1px solid var(--line); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); z-index: 20; }
  .bottom-nav a, .bottom-nav button { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 11px; background: none; border: 0; cursor: pointer; }
  .bottom-nav svg { width: 20px; height: 20px; }
}
.card h3.sec { margin-top: 18px; }
dialog.wide { width: min(640px, calc(100vw - 32px)); }
#users-admin { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.acc-actions { flex-wrap: nowrap; margin-top: 16px; }
.acc-actions .btn { flex: 1 1 0; padding: 0 10px; white-space: nowrap; }
@media (max-width: 420px) { .acc-actions { flex-wrap: wrap; } .acc-actions .btn { flex: 1 1 100%; } }
.env-link { display: inline-flex; align-items: center; text-decoration: none; min-height: 40px; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.env-link.on { background: var(--accent); color: #06202A; border-color: var(--accent); }
/* admin */
.admin-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--warn); border: 1px solid var(--warn); padding: 3px 8px; border-radius: 4px; }
.admin-status { margin-left: auto; }
.status .env-link { color: var(--text); }
.toolbar { flex-wrap: wrap; margin-bottom: 12px; }
.toolbar-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); min-width: 220px; }
.users-tbl tr.sel td { background: var(--sel); }
.link { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; cursor: pointer; text-align: left; }
.link:hover { color: var(--accent); }
.small { font-size: 11px; }
td.actions, .detail-head .actions { white-space: nowrap; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
td.actions { display: table-cell; }
td.actions .btn + .btn { margin-left: 6px; }
.btn.danger { border-color: var(--loss-bg); color: var(--loss-text); }
.btn.danger:hover { border-color: var(--loss); }
.badge.warn-b { background: #3A2A12; color: #F5C28A; }
#detail .kpis { margin: 12px 0 16px; }
#detail .chips { margin-bottom: 4px; }
.field.check label { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; }
.field.check input { min-height: auto; width: 18px; height: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) { .admin-tag { display: none; } .search { min-width: 0; flex: 1 1 160px; } }
@media (max-width: 720px) { .top-in { flex-wrap: nowrap; gap: 10px; } .status { gap: 6px; } .status .env-link { padding: 0 8px; letter-spacing: 0; } }
.sports-nav { display: flex; flex-direction: column; gap: 8px; }
.chip-sm { min-height: 38px; padding: 0 14px; font-size: 12px; font-weight: 500; }
.leagues { padding-left: 2px; }
/* left sports panel */
main.with-side { max-width: none; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
main.with-side .content { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.side-toggle { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.sg-head { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--soft); font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; text-align: left; cursor: pointer; white-space: nowrap; }
.sg-head > span:first-child { flex: 1 1 auto; }
.sg-head:hover, .sg:hover > .sg-head { background: var(--sel); color: var(--text); }
.sg.active > .sg-head { color: var(--accent); }
.sg-one { font-family: var(--mono); font-size: 10px; letter-spacing: 0; color: var(--dim); text-transform: none; }
.sg-count { font-family: var(--mono); font-size: 11px; color: var(--dim); background: var(--track); border-radius: 10px; padding: 1px 7px; letter-spacing: 0; }
.sg-chev { color: var(--dim); transition: transform .15s; }
.sg-leagues { display: none; flex-direction: column; padding: 2px 0 6px 12px; margin-left: 12px; border-left: 1px solid var(--line2); }
.sg.multi.open > .sg-leagues { display: flex; }
.sg.multi.open .sg-chev { transform: rotate(90deg); }
.sg-chev { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 18px; }
.sg-head:hover .sg-chev { background: var(--track); color: var(--text); }
.sg-league { min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); text-align: left; font-size: 13px; cursor: pointer; }
.sg-league:hover { background: var(--sel); color: var(--text); }
.sg-league[aria-current="true"] { background: var(--accent); color: #06202A; font-weight: 600; }
.sg-head:focus-visible, .sg-league:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 900px) {
  main.with-side { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .side { position: static; max-height: none; padding: 0; background: none; border: 0; }
  .side-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; }
  .side-nav { display: none; margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
  .side.show .side-nav { display: flex; }
}
/* model performance */
.model-help { margin: 0 0 12px; font-size: 12px; max-width: 760px; }
.model-note { margin: 8px 0 0; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 8px 24px; margin-top: 8px; }
@media (max-width: 720px) { .model-grid { grid-template-columns: minmax(0, 1fr); } }
.badge.sharp { background: #1B2A4A; color: #9CC3FF; }
/* game analysis drawer */
dialog.drawer { margin: 0 0 0 auto; width: min(1180px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; border-left: 1px solid var(--line2); padding: 0; background: var(--bg); display: none; flex-direction: column; }
dialog.drawer[open] { display: flex; }
.an-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--bg2); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.an-top h2 { margin: 2px 0 0; font-size: 18px; }
.an-body { padding: 18px 20px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.an-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.an-team.home { text-align: right; }
.an-team-name { font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.15; }
.an-vs { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.an-probs { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.an-probs > div:not(.an-probs-note) { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; min-width: 130px; }
.an-probs .lbl { font-size: 12px; color: var(--dim); }
.an-probs .v { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--accent); }
.an-probs-note { align-self: center; }
.an-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.an-tab { min-height: 44px; padding: 0 16px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.an-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.an-panel { display: flex; flex-direction: column; gap: 14px; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.play { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.play.best { border-color: var(--win); background: linear-gradient(0deg, var(--card), var(--card)); box-shadow: inset 0 0 0 1px rgba(52, 227, 154, .15); }
.play-top { display: flex; gap: 6px; }
.play-label { font-family: var(--display); font-size: 24px; font-weight: 600; }
.play:not(.best) .play-label { font-size: 18px; }
.play-cond { font-size: 13px; }
.plays { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cond-list { display: flex; flex-direction: column; }
.cond { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--track); font-size: 13px; }
.cond-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.cond.favor .cond-dot { background: var(--win); }
.cond.contra .cond-dot { background: var(--loss); }
.an-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.an-teams.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-teamcol { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.an-team-title { margin: 0 0 4px; font-family: var(--display); font-size: 18px; font-weight: 600; }
.an-sec-title { margin: 14px 0 2px; text-align: center; font-family: var(--display); letter-spacing: 2px; text-transform: uppercase; font-size: 12px; color: var(--accent); }
.an-tbl th, .an-tbl td { padding: 6px 6px; font-size: 12px; }
.an-tbl td:first-child { position: sticky; left: 0; background: var(--card); white-space: normal; min-width: 120px; }
@media (max-width: 1000px) { .an-teams.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .an-body { padding: 14px 12px 40px; }
  .an-team-name { font-size: 20px; }
  .an-head { padding: 14px; }
  .play-label { font-size: 20px; }
}
.an-body > *, .an-panel > * { flex-shrink: 0; }
.an-grid { align-items: start; }
/* ---- Phase A: slate, ticker, official picks, movement, factors ---- */
.slate { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.slate-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.slate-big { display: flex; align-items: flex-end; gap: 12px; }
.slate-big > span:first-child { font-family: var(--display); font-size: 72px; font-weight: 700; line-height: .9; }
.slate-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.slate-alerts { text-align: right; }
.slate-alerts > span { font-family: var(--display); font-size: 30px; font-weight: 600; }
.featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.empty-feat { cursor: default; opacity: .6; justify-content: space-between; min-height: 110px; }
.feat { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.feat:hover { border-color: var(--line2); }
.feat.hot { border-color: var(--accent); }
.feat-top, .feat-bot { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.feat-lg { font-family: var(--display); letter-spacing: 2px; color: var(--accent); font-size: 13px; }
.feat-teams { font-family: var(--display); font-size: 20px; font-weight: 600; }
.slate-list summary { cursor: pointer; font-family: var(--display); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; color: var(--muted); min-height: 36px; display: flex; align-items: center; gap: 6px; }
.slate-list table td { padding: 8px 6px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--sel); }
.badge.steam { background: #3A2A12; color: #F5C28A; }
.badge + .badge { margin-left: 4px; }
.ticker { border-top: 1px solid var(--line); margin: 0 -22px -20px; padding: 10px 0; overflow: hidden; background: var(--bg2); }
.ticker-track { display: inline-flex; gap: 36px; white-space: nowrap; padding-left: 22px; animation: ticker 60s linear infinite; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ticker-track.still { animation: none; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tk.steam { color: #F5C28A; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; flex-wrap: wrap; white-space: normal; } }
.of-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 10px 0 14px; border-bottom: 1px solid var(--track); margin-bottom: 12px; }
.of-stats > div { display: flex; flex-direction: column; gap: 2px; }
.of-stats .lbl { font-size: 11px; color: var(--dim); }
.of-stats b { font-size: 18px; }
.of-stats .verified { margin-left: auto; align-items: flex-end; }
.of-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.of-card { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.of-card.won { border-color: var(--win-bg); }
.of-card.lost { border-color: var(--loss-bg); }
.of-card.locked { border-style: dashed; }
.of-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.of-sel { font-family: var(--display); font-size: 20px; font-weight: 600; }
.of-notes { font-size: 13px; color: var(--soft); border-left: 2px solid var(--line2); padding-left: 8px; white-space: pre-line; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.field textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); resize: vertical; }
.field small { font-size: 11px; }
.moves { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; padding: 10px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.moves .lbl { font-size: 11px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }
.move { color: var(--muted); }
.move.changed b { color: #F5C28A; }
.book-flags { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; }
.book-flags .badge { font-size: 10px; padding: 1px 5px; }
.factors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.factor { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 8px; background: var(--card2); border: 1px solid var(--line); }
.f-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--track); color: var(--dim); }
.factor.favor { border-color: var(--win-bg); } .factor.favor .f-icon { background: var(--win-bg); color: var(--win-text); }
.factor.contra { border-color: var(--loss-bg); } .factor.contra .f-icon { background: var(--loss-bg); color: var(--loss-text); }
.f-name { font-size: 13px; font-weight: 600; }
@media (max-width: 720px) {
  .slate-big > span:first-child { font-size: 54px; }
  .ticker { margin: 0 -16px -16px; }
  .of-stats .verified { margin-left: 0; align-items: flex-start; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .featured { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; } .feat { scroll-snap-align: start; } }
/* month calendar (cards only) */
.cal-h { font-size: 22px; letter-spacing: 1px; }
.cal-day { margin-top: 14px; }
.cal-date { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); padding: 6px 0; border-bottom: 1px solid var(--track); margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cal-card { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); color: var(--text); cursor: pointer; min-height: 44px; }
.cal-card:hover { border-color: var(--accent); }
.cal-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-card.done { opacity: .75; }
.cal-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cal-teams { display: flex; flex-direction: column; gap: 3px; }
.cal-team { display: flex; justify-content: space-between; gap: 8px; font-family: var(--display); font-size: 17px; font-weight: 600; }
@media (max-width: 720px) { .cal-grid { grid-template-columns: minmax(0, 1fr); } }

/* model card */
.model-card .proj { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.model-card .proj > div { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.model-card .proj .lbl { font-size: 12px; color: var(--muted); }
.model-card .proj .v { font-size: 18px; font-weight: 700; }
.adj-list { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.f-badge { margin-left: 6px; font-size: 10px; }

/* sport click scrolls to the calendar; keep it clear of the sticky header */
#calendar, .cal-day { scroll-margin-top: 170px; }

/* logo mark (shield) next to the wordmark */
.brand-mark { width: 40px; height: 46px; margin-right: 6px; }
.brand b, .brand span { line-height: 1; }
.top-in .status { margin-left: auto; }
@media (max-width: 720px) { .brand b, .brand span { font-size: 22px; } .brand-mark { width: 32px; height: 37px; margin-right: 2px; } #api-status, #quota { display: none; } }

/* ---------- sport icon bar (replaces the left sidebar) ---------- */
.main-full .content { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sport-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sport-bar::-webkit-scrollbar { display: none; }
.sport-tab { flex: 0 0 auto; min-width: 84px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--soft); font-family: var(--display); font-size: 13px; letter-spacing: 1px; cursor: pointer; position: relative; }
.sport-tab:hover { border-color: var(--accent); color: var(--text); }
.sport-tab.on { background: var(--accent); border-color: var(--accent); color: #06202A; }
.sport-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sport-tag { position: absolute; top: 4px; right: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0; opacity: .8; }
.cal-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 14px; }
.cal-tools .chips:empty { display: none; }
.date-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.date-nav .btn { min-width: 44px; min-height: 44px; }
.date-nav .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.date-input { min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card); color: var(--text); font-family: var(--mono); color-scheme: dark; }
.cal-team.winner b { color: var(--accent); }
.cal-team.winner span { color: var(--text); }
.model-rec { margin: 0 0 12px; color: var(--muted); }
.an-score { display: flex; flex-direction: column; align-items: center; font-size: 26px; font-weight: 600; color: var(--text); white-space: nowrap; }
.an-score small { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.theme-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--sel); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-btn:hover { border-color: var(--accent); }
@media (max-width: 720px) { .sub-bar { padding: 0 14px 10px; } .sport-tab { min-width: 72px; min-height: 56px; } .date-nav { margin-left: 0; width: 100%; } .date-input { flex: 1; min-width: 0; } .d-label { min-width: 0; flex: 1; } }

/* ---------- light view: light surfaces + the logo's navy for header / strips, cyan accents ---------- */
:root[data-theme="light"] {
  --bg: #EEF2F7; --bg2: #0B1220; --card: #FFFFFF; --card2: #F4F7FB; --sel: #E4EEF8; --line: #D7DFEA; --line2: #C2CEDE; --track: #E3E9F2;
  --text: #0B1220; --muted: #4A5A74; --dim: #5C6C86; --soft: #22314A; --accent: #0E7490;
  --win: #0F8A57; --win-bg: #DCF3E8; --win-text: #0B6B45; --loss: #C8324A; --loss-bg: #FBE3E7; --loss-text: #9E2238; --warn: #A65F0E;
}
/* dark islands inside the light view */
:root[data-theme="light"] .top, :root[data-theme="light"] .ticker, :root[data-theme="light"] .an-top, :root[data-theme="light"] .bottom-nav {
  --text: #E8EEF7; --muted: #9AA8BD; --dim: #7F8DA3; --soft: #C9D4E5; --line: #1C2A42; --line2: #2A3C5C; --card: #0E1626; --sel: #16233A; --accent: #22D3EE;
  color: var(--text);
}
:root[data-theme="light"] .btn-primary, :root[data-theme="light"] .sport-tab.on { background: #22D3EE; border-color: #22D3EE; color: #06202A; }
:root[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 4px 16px rgba(11, 18, 32, .05); }
:root[data-theme="light"] .date-input { color-scheme: light; }

/* admin: historical backfill */
.bf-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 10px 0; }
.bf-sports { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0; }
.bf-sports label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.bf-form > label { display: flex; flex-direction: column; gap: 4px; }
.bf-log { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* views: active nav link; sport icons fade when another view is open */
.nav a[aria-current="page"] { color: var(--text); background: var(--sel); }
.bottom-nav a[aria-current="page"] { color: var(--accent); }
.sport-tab.on.dim-tab { background: transparent; color: var(--accent); }

.badge.model-b { background: var(--accent); color: #06202A; margin-right: 6px; vertical-align: middle; }

/* header: sports + global date */
.sub-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 24px 12px; }
.d-label { min-width: 120px; text-align: center; font-family: var(--display); letter-spacing: 1px; font-size: 15px; color: var(--text); text-transform: capitalize; }
:root[data-theme="light"] .top .date-input { color-scheme: dark; }

/* day view */
.day-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.day-kpis:empty { display: none; }
.dkpi { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.dkpi .lbl { font-size: 12px; color: var(--muted); }
.dkpi b { font-size: 22px; }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gcard { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); color: var(--text); cursor: pointer; font: inherit; }
.gcard:hover { border-color: var(--accent); }
.gcard.hot { border-color: var(--accent); }
.gcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-transform: capitalize; }
.gc-status { font-size: 11px; color: var(--muted); }
.gc-status.live { color: var(--loss); font-weight: 600; }
.gc-status.final { color: var(--soft); font-weight: 600; }
.gc-team { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.gc-logo { width: 24px; height: 24px; object-fit: contain; }
.gc-ini { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sel); color: var(--accent); font-size: 12px; font-weight: 700; }
.gc-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gc-score { font-size: 15px; color: var(--muted); }
.gc-team.winner .gc-score, .gc-team.winner .gc-name { color: var(--text); }
.gc-team.winner .gc-score { color: var(--accent); font-weight: 700; }
.gc-model { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); line-height: 1.35; }
.gc-model b { color: var(--text); }
.gc-bar { display: block; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.gc-fill { display: block; height: 100%; background: var(--win); }
.gc-hit { font-weight: 700; }
/* ---- game detail v2 ---- */
.an-team-row { display: flex; align-items: center; gap: 14px; }
.an-team.home .an-team-row { flex-direction: row-reverse; }
.an-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.an-logo.ph { border-radius: 50%; background: var(--track); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 24px; color: var(--muted); }
.an-vs { flex-direction: column; width: auto; height: auto; min-width: 54px; padding: 10px; border-radius: 12px; gap: 4px; }
.an-probs .v + .mono { margin-top: 2px; }
.an-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.an-main, .an-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.an-side .vrow { padding: 7px 0; justify-content: space-between; }
.an-side .an-sec-title { text-align: left; margin-top: 8px; }
.card.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.donut { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.donut .d-track { stroke: var(--track); }
.donut .d-val { stroke: var(--accent); }
.donut.ring .d-val { stroke: var(--win); }
.donut .d-txt { fill: var(--text); font-family: var(--display); font-size: 22px; font-weight: 600; }
.best-card { border-color: var(--win); }
.best-body { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.best-body > div:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plays-list { display: flex; flex-direction: column; gap: 10px; }
.play-d summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; cursor: pointer; list-style: none; min-height: 44px; }
.play-d summary::-webkit-details-marker { display: none; }
.play-d .play-label { font-size: 18px; }
.cond-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; margin-top: 6px; }
.cond-g .an-sec-title { text-align: left; }
.cond-g.favor .an-sec-title { color: var(--win); }
.cond-g.contra .an-sec-title { color: var(--loss); }
.cond-g.neutral .an-sec-title, .cond-g.small .an-sec-title { color: var(--dim); }
.rank-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.rank-badges .badge { font-size: 12px; padding: 5px 10px; }
.form-dots { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.fd { display: inline-flex; width: 22px; height: 22px; border-radius: 4px; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--track); color: var(--muted); }
.fd.W { background: var(--win); color: #04130c; }
.fd.L { background: var(--loss); color: #fff; }
.vrow.small { padding: 7px 0; justify-content: space-between; }
@media (max-width: 1000px) { .an-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .an-logo { width: 40px; height: 40px; } .an-team-row { gap: 8px; } }
/* header quota (admin) + account links + props */
.quota-chip { font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--accent); white-space: nowrap; }
.quota-chip.low { color: var(--loss); border-color: var(--loss); }
.acc-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.props-tbl td, .props-tbl th { font-size: 13px; }
.props-tbl td .dim.small { font-size: 11px; }
@media (max-width: 720px) { .quota-chip { display: none; } }
/* off-season leagues: still clickable (past results), greyed out */
.sport-tab.off-season:not(.on) { opacity: .45; border-style: dashed; }
.off-tag { font-family: var(--mono); font-size: 8px; letter-spacing: 0; text-transform: uppercase; opacity: .9; }
.chip.off-season:not([aria-pressed="true"]) { opacity: .45; border-style: dashed; }
.lu-alerts p { margin: 2px 0; }
/* MLB starter duel */
.duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duel-side { min-width: 0; }
.duel-name { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 2px 0 8px; }
.duel-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.duel-nums .lbl { font-size: 11px; color: var(--dim); }
.duel-nums b { font-size: 20px; }
@media (max-width: 720px) { .duel { grid-template-columns: minmax(0, 1fr); } }