:root {
  --bg: #0b0e13;
  --panel: #151a22;
  --panel-2: #1c232e;
  --line: #29323f;
  --text: #e8edf4;
  --muted: #8b97a7;
  --accent: #37d67a;      /* draftkings-ish green */
  --accent-dim: #1f7a47;
  --win: #37d67a;
  --loss: #ff5c6c;
  --push: #c9a227;
  --live: #ff8a3d;
  --chip: #222c38;
  --chip-on: #0f3b25;
  /* confidence tiers (distinct from win/loss result colors) */
  --conf-red: #e0524a;
  --conf-yellow: #e4b53c;
  --conf-green: #3fb56a;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #121821, #0d1219);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo { width: 30px; height: 30px; flex: none; }
.bl-shield { fill: var(--panel-2); stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.bl-money { fill: var(--accent); font-size: 24px; font-weight: 800;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.brand-name { font-weight: 800; letter-spacing: .5px; font-size: 18px; }
.brand-name span { color: var(--accent); }
.weeknav { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.weeklabel { text-align: center; min-width: 92px; }
.weeklabel span { font-weight: 700; }
.weeklabel small { display: block; color: var(--muted); font-size: 11px; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.status { color: var(--muted); font-size: 12px; min-width: 60px; text-align: right; }

button { font: inherit; cursor: pointer; border-radius: 8px; }
.btn {
  background: var(--accent); color: #07130b; border: none;
  font-weight: 700; padding: 8px 14px;
}
.btn:hover { filter: brightness(1.08); }
.btn.subtle { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--line);
  width: 30px; height: 30px; font-size: 18px; line-height: 1;
}
.ghost:hover { background: var(--panel-2); }

/* ---------- board ---------- */
.board { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-width: 1100px; margin: 0 auto; }
.empty { color: var(--muted); text-align: center; padding: 60px; }

.trends-card {
  background: linear-gradient(180deg, rgba(55,214,122,.06), var(--panel));
  border: 1px solid var(--accent-dim); border-radius: 12px; padding: 14px 18px;
}
.trends-head { display: flex; align-items: center; margin-bottom: 8px; }
.trends-title { font-weight: 700; color: var(--accent); font-size: 13px; letter-spacing: .02em; }
.trends-x { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 14px; }
.trends-x:hover { color: var(--text); }
.trends-list { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 22px; }
.trends-list li { font-size: 13px; color: var(--text); padding-left: 14px; position: relative; }
.trends-list li::before { content: "›"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }

.week-summary {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px;
}
.ws-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.ws-tag.done { background: var(--accent-soft, rgba(55,214,122,.14)); color: var(--accent); }
.ws-tag.live { background: rgba(255,138,61,.16); color: var(--live); }
.ws-recs { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.ws-rec { display: flex; align-items: baseline; gap: 8px; }
.ws-name { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ws-rec.shared { padding-left: 14px; border-left: 2px solid var(--accent-dim); }
.ws-rec.shared .ws-name { color: var(--accent); }
.ws-wlp { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--muted); }
.ws-wlp b { font-weight: 700; }
.ws-wlp .w { color: var(--accent); }
.ws-wlp .l { color: var(--loss); }
.ws-wlp .p { color: var(--push); }

.game {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.game-head {
  display: grid;
  grid-template-columns: 104px auto auto auto 1fr;
  gap: 16px; align-items: center;
  padding: 13px 16px;
}
.wx-cell { display: flex; }
.kick { color: var(--muted); font-size: 12px; }
.kick .slot { display: inline-block; padding: 1px 7px; border-radius: 20px;
  background: var(--chip); color: var(--text); font-size: 11px; }
.kick .live { background: var(--live); color: #1a0e04; font-weight: 700; }
.kick .final { background: #2a3340; }
.venue { margin-top: 6px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.venue .vcity { display: block; }
.neutral-tag { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 4px;
  background: rgba(255,138,61,.16); color: var(--live); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.wx { font-size: 11px; color: var(--text); background: var(--chip);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
  display: inline-flex; flex-direction: column; gap: 1px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.wx-wind { color: var(--muted); }
.wx-indoor { color: var(--muted); }

/* team block: full names, no favorite-green (spread paren carries that info) */
.teams { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.team-row { display: flex; align-items: baseline; gap: 9px; }
.team-name { color: var(--text); font-weight: 700; font-size: 15px; }
.team-spread { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.team-score { margin-left: auto; font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--text); }

/* the O/U total, sitting right beside the matchup */
.match-total { text-align: center; padding: 0 2px; }
.match-total .ml-lbl { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.match-total b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text); }

/* right: opening line + movement delta */
.open-box { text-align: right; font-size: 12px; color: var(--muted); min-width: 148px; }
.ol { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; padding: 2px 0; }
.ol-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.open-box b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.delta { color: var(--live); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* model projection strip */
.model {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; border-top: 1px solid var(--line);
  background: rgba(55,214,122,.05); font-size: 12px; color: var(--muted);
}
.model-lbl { font-weight: 700; color: var(--text); letter-spacing: .02em; }
.model-scores b { font-weight: 700; color: var(--muted); }
.model-scores .ms { color: var(--text); font-variant-numeric: tabular-nums; }
.model-proj { color: var(--text); font-variant-numeric: tabular-nums; }
.model-proj b { font-weight: 700; }
.model-edge { margin-left: 2px; padding: 2px 8px; border-radius: 20px;
  background: var(--chip); color: var(--muted); }
.model-edge b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* picks area */
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel-2); }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 4px; min-width: 0; }
.pcard h4 { margin: 0 0 8px; font-size: 12px; color: var(--text); letter-spacing: .5px; text-transform: uppercase; font-weight: 700; }
/* signed-in player's own column vs. the other player's read-only column */
.pcard.mine { border-color: var(--accent, #37d67a); }
.pcard.readonly { opacity: .78; }
.pcard.readonly .chip { cursor: default; }
.you-tag { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--accent, #37d67a);
  border: 1px solid currentColor; border-radius: 6px; padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
.me { color: var(--muted); font-size: 12px; white-space: nowrap; }
.signout { color: var(--muted); font-size: 11px; text-decoration: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.signout:hover { color: var(--text); border-color: var(--muted); }

/* ---- login gate ---- */
.login { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 36px 32px; width: min(360px, 100%); text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.brand-logo.lg { width: 56px; height: 56px; }
.login-title { margin: 12px 0 4px; font-size: 26px; font-weight: 800; letter-spacing: .3px; }
.login-title span { color: var(--accent); }
.login-sub { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.login-btn { display: block; margin: 10px 0; padding: 12px 14px; border-radius: 10px; font-weight: 700;
  font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--text);
  background: var(--chip); transition: border-color .12s, background .12s; }
.login-btn:hover { border-color: var(--accent); }
.login-btn.entra { border-left: 4px solid #2f6fed; }
.login-err { margin: 16px 0 0; color: var(--loss); font-size: 12px; line-height: 1.4; }
.pick-col { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.pick-cat { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.chip {
  position: relative; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: var(--chip); border: 2px solid transparent; color: var(--text);
  font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 8px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.chip:hover { background: #2a3644; }
.chip .clabel { flex: 0 0 auto; }
.chip small { color: var(--muted); font-weight: 500; font-size: 11px; }

/* selected: the whole chip fills with the confidence color (strong signal) */
.chip.sel { color: #0c130f; font-weight: 700; }
.chip.sel.conf-red    { background: var(--conf-red);    color: #fff; }
.chip.sel.conf-yellow { background: var(--conf-yellow); color: #241a00; }
.chip.sel.conf-green  { background: var(--conf-green);  color: #06140c; }
.chip.sel:hover { filter: brightness(1.06); }
.chip.sel small { color: inherit; opacity: .8; }

/* final: a thick border in the GRADING color wraps the confidence fill */
.chip.sel.graded { border-width: 3px; box-shadow: 0 0 0 1px var(--panel) inset; }
.chip.sel.graded.win  { border-color: var(--win); }
.chip.sel.graded.loss { border-color: var(--loss); }
.chip.sel.graded.push { border-color: var(--push); }
.rbadge {
  margin-left: auto; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px;
  align-self: center; background: rgba(0,0,0,.28);
}
.chip.graded.win  .rbadge { color: #eafff2; }
.chip.graded.loss .rbadge { color: #ffe9ec; }
.chip.graded.push .rbadge { color: #fff6da; }

/* per-game notes + per-team injuries */
.notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.note-field { display: flex; flex-direction: column; gap: 4px; }
.notes-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text); font-weight: 600; }
.note-input {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px;
  line-height: 1.4; resize: none; overflow: hidden; min-height: 34px;
}
.note-input:focus { outline: none; border-color: var(--accent-dim); }
.note-input::placeholder { color: var(--muted); }

/* footer row: stats toggle + manual line */
.game-foot { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--line); }
.linkbtn { background: none; border: none; color: var(--muted); font-size: 12px; padding: 2px; }
.linkbtn:hover { color: var(--text); }
.foot-controls { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ctl { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.ctl input { width: 46px; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 4px 6px; font: inherit; text-align: center; }
.ctl input:focus { outline: none; border-color: var(--accent-dim); }
.manual-score.on { color: var(--accent); }
.manual-score.on input { border-color: var(--accent-dim); }

/* stats panel */
.stats { display: none; padding: 6px 16px 16px; }
.stats.open { display: block; }
.statgrid { display: flex; flex-direction: column; }
.stathead, .statrow {
  display: grid; grid-template-columns: 1fr 2.1fr 1fr; align-items: center; gap: 10px;
}
.stathead { padding: 8px 6px; border-bottom: 2px solid var(--line-strong, #33414f); }
.stateam { font-family: inherit; font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.statrow { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.statrow:last-child { border-bottom: none; }
.statmid { text-align: center; }
.statmid .sname { font-size: 13px; font-weight: 600; }
.statmid .sdesc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.statval { display: flex; align-items: baseline; gap: 7px; }
.statval:last-child { justify-content: flex-end; }
.statval .num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.statval .rk { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.statval.better .num { color: var(--accent); }
.statval.better .rk { color: var(--accent-dim); font-weight: 700; }

/* view nav (Board / Ledger) */
.viewnav { display: flex; gap: 4px; margin-left: 4px; }
.viewbtn { background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: 6px 14px; font-weight: 600; font-size: 13px; }
.viewbtn.active { background: var(--panel-2); color: var(--text); border-color: var(--accent-dim); }
.viewbtn:hover { color: var(--text); }

/* ledger */
.ledger { padding: 18px; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ledger-summary {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px;
}
.lg-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.lg-balance b { font-size: 30px; font-variant-numeric: tabular-nums; }
.lg-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.lg-balance.pos b, .num.pos { color: var(--accent); }
.lg-balance.neg b, .num.neg { color: var(--loss); }
.lg-splitcol { margin-left: 0; }
.splits { display: grid; gap: 8px; }
.splits.g3 { grid-template-columns: repeat(3, minmax(56px, 1fr)); }
.splits.g1 { grid-template-columns: 1fr; }
.splits.g2 { grid-template-columns: repeat(2, minmax(56px, 1fr)); }
.split { display: flex; flex-direction: column; align-items: center; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; min-width: 52px; }
.split-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.split-rec { font-size: 13px; font-variant-numeric: tabular-nums; }
.split-rec b { font-weight: 700; }
.split.prime { border-color: var(--live); background: rgba(255,138,61,.10); }
.split.prime .split-lbl { color: var(--live); }
.split.moneyplay { grid-column: 1 / -1; border-color: var(--accent-dim); background: rgba(55,214,122,.12); }
.split.moneyplay .split-lbl { color: var(--accent); }
/* shared colored W-L-P */
.rec-w { color: var(--accent); } .rec-l { color: var(--loss); } .rec-p { color: var(--push); }
.conf-tag { font-size: 10px; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }

.bet-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.bet-add input, .bet-add select { background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; }
.bet-add .ba-week { width: 60px; } .bet-add .ba-amount { width: 100px; }
.bet-add .ba-matchup, .bet-add .ba-bet { flex: 1; min-width: 130px; }
.bet-add .ba-add { margin-left: auto; }

.bet-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.bet-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.bet-table th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--panel-2); }
.bet-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.bet-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bet-table tr:last-child td { border-bottom: none; }
.bet-table .bet-result { background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 4px 6px; font: inherit; }
.bet-del { color: var(--muted); font-size: 14px; }
.bet-del:hover { color: var(--loss); }
.bet-empty { text-align: center; color: var(--muted); padding: 22px; }
.ledger-title { font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: .3px; }
.bet-table tr.void { opacity: .5; }
.void-tag { font-size: 9px; font-weight: 800; color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; }
.res-W { color: var(--accent); font-weight: 700; } .res-L { color: var(--loss); font-weight: 700; }
.res-P { color: var(--push); font-weight: 700; }

/* historical seasons */
.history-head { font-size: 16px; font-weight: 700; color: var(--text); }
.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.season-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.season-head { display: flex; align-items: baseline; justify-content: space-between; }
.season-name { font-weight: 700; font-size: 17px; }
.season-bal { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.season-risked { color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
.season-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.season-table th { text-align: left; color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.season-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.season-table tr:last-child td { border-bottom: none; }
.season-table td.num { text-align: right; }

/* toast */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none;
  transition: all .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }