/* ================================================================
   SportsFathom — night-game field theme
   ================================================================ */
:root {
  --bg:        #0a0d12;
  --surface:   #12161f;
  --surface-2: #1a1f2b;
  --surface-3: #232a39;
  --line:      #2b3342;
  --line-soft: #212734;

  --text:   #eef1f7;
  --muted:  #9aa5b6;
  /* Was #667284 — 3.99:1 on --bg, under WCAG AA's 4.5:1 floor for normal text,
     and this is the color used for a lot of small (9-12px) secondary text
     (timestamps, placeholders, metadata) throughout the app and admin panel,
     well under the "large text" size that would only need 3:1. Lightened
     just enough to clear 4.5:1 against every background it actually sits on
     (--bg 5.47:1, --surface 5.08:1, --surface-2 4.63:1) while staying the
     same muted blue-gray. */
  --faint:  #7a899e;

  --grass:        #53d337;   /* DK electric green */
  --grass-bright: #7bec5c;
  --grass-deep:   #1e4d1a;
  --clay:         #ffb43d;   /* gold — odds / markets */
  --leather:      #ffd08a;
  --chalk:        #ffffff;
  --live:         #ff5461;

  --accent-ink: #08160b;
  --grid:  rgba(255,255,255,.02);
  --glow:  rgba(83,211,55,.16);
  --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.5);
  --elev-2: 0 2px 6px rgba(0,0,0,.35), 0 22px 48px -18px rgba(0,0,0,.7);
  --ring:  0 0 0 3px rgba(83,211,55,.22);

  --radius: 12px;
  --wrap: 900px;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Oswald", var(--font-body);
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  display: block;
  background: transparent;
  position: relative;
  z-index: 0;
}

/* ---- app shell: sidebar + main column ---- */
.app { display: flex; width: 100%; height: 100vh; overflow: hidden; }
.main-col {
  flex: 1; min-width: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.sidebar {
  flex: none; width: 264px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: rgba(12,15,22, 0.72);
  backdrop-filter: blur(10px);
  transition: width 0.18s ease, transform 0.2s ease;
}
.app.sb-collapsed .sidebar { width: 0; border-right: 0; }
.sb-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(4,7,12, 0.55); border: 0;
}
.only-narrow { display: none; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
    width: 280px; transform: translateX(-100%);
  }
  .app.sb-open .sidebar { transform: none; }
  .app:not(.sb-open) .sb-scrim { display: none; }
  .only-narrow { display: inline-grid; }
}

.compact { --pad: 0.7; }
:root:not(.compact) { --pad: 1; }

#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 560px at 50% -10%, rgba(83,211,55, 0.16), transparent 60%),
    radial-gradient(1000px 1000px at 115% 120%, rgba(255,180,61, 0.09), transparent 58%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.015) 0 52px, rgba(0, 0, 0, 0) 52px 104px);
}

::selection { background: rgba(123,236,92, 0.28); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}

/* ================================================================ header */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 13px 20px;
  background: linear-gradient(180deg, rgba(30,37,50, 0.55), rgba(16,20,28, 0.35));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand .ball { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); flex: none; }
.brand .word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.02em;
  color: var(--chalk);
  text-transform: uppercase;
}
.brand .word .ai { color: var(--grass-bright); }

.right { display: flex; align-items: center; gap: 12px; }
.health {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}
.health .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grass-bright);
  box-shadow: 0 0 8px var(--grass-bright);
}
#newchat {
  font: 600 12px/1 var(--font-body);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#newchat:hover { color: var(--chalk); border-color: var(--grass); background: rgba(83,211,55, 0.1); }

/* ================================================================ scoreboard */
.scoreboard {
  position: relative;
  background: #0d111a;
  border-bottom: 1px solid var(--line);
}
.scorestrip {
  display: flex; align-items: stretch;
  overflow-x: auto; scroll-behavior: smooth;
  margin: 0 26px;
  scrollbar-width: none;
}
.scorestrip::-webkit-scrollbar { display: none; }

.daytab {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 0 10px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--leather);
  background: rgba(255,180,61, 0.08);
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
}

.gcard {
  flex: none; width: 138px;
  padding: 8px 13px 9px;
  border: 0; border-right: 1px solid var(--line-soft);
  display: block; text-decoration: none; color: var(--text);
  transition: background 0.15s;
  /* these cards are real <button>s (see app.js) so keyboard/screen-reader
     users can reach them — reset the browser's default button chrome the
     same way .hg-card does, since nothing else here already overrides it */
  background: none; text-align: left; font: inherit; cursor: pointer;
}
.gcard:hover { background: rgba(255, 255, 255, 0.035); }
.gcard.is-live { box-shadow: inset 0 2px 0 var(--live); background: rgba(255,84,97, 0.05); }

.gstatus {
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px; white-space: nowrap;
}
.gcard.is-live .gstatus { color: var(--live); }

.gcard .team {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; line-height: 1.85;
}
.gcard .team.dim { color: var(--faint); }
.gcard .logo { width: 18px; height: 18px; flex: none; object-fit: contain; }
.gcard .team .abbr { font-weight: 600; letter-spacing: 0.02em; }
.gcard .team .score {
  margin-left: auto;
  font: 600 13px/1 var(--font-mono);
  color: var(--chalk);
}
.gcard .team.dim .score { color: var(--faint); font-weight: 500; }

.live-extra { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.bases { width: 28px; height: 18px; }
.outs { display: inline-flex; gap: 3px; }
.outs i {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--faint);
}
.outs i.on { background: var(--live); border-color: var(--live); }

.sb-nav {
  position: absolute; top: 0; bottom: 0; width: 26px;
  border: 0; background: #0d111a; color: var(--faint);
  font-size: 17px; cursor: pointer; z-index: 2;
  transition: color 0.15s;
}
.sb-nav:hover { color: var(--chalk); }
.sb-nav.prev { left: 0; box-shadow: 8px 0 10px -6px rgba(0, 0, 0, 0.6); }
.sb-nav.next { right: 0; box-shadow: -8px 0 10px -6px rgba(0, 0, 0, 0.6); }

/* ================================================================ chat log */
.log {
  flex: 1; overflow-y: auto;
  width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 26px 20px 8px;
}

.msg { margin: 0 0 20px; }
.msg .role {
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grass-bright); margin-bottom: 6px;
}
.msg p { margin: 0 0 9px; }
.msg .body > *:first-child { margin-top: 0; }
.msg .body > *:last-child { margin-bottom: 0; }

.msg.user {
  margin-left: auto; max-width: 78%;
  background: linear-gradient(180deg, rgba(30,77,26, 0.9), rgba(21,26,37, 0.75));
  border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 15px;
  color: var(--chalk);
  white-space: pre-wrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.msg.assistant { padding-left: 2px; }

/* markdown */
.msg h2, .msg h3, .msg h4 {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.25;
  margin: 16px 0 7px;
}
.msg h2 { font-size: 19px; color: var(--grass-bright); }
.msg h3 { font-size: 16px; color: var(--chalk); }
.msg h4 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.msg ul { margin: 7px 0; padding-left: 20px; }
.msg li { margin: 2px 0; }
.msg li::marker { color: var(--grass); }
.msg a { color: var(--grass-bright); text-underline-offset: 2px; }
.msg strong { color: var(--chalk); }
.msg code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  padding: 1px 5px; border-radius: 5px;
}
.msg pre {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; overflow-x: auto; font-size: 12.5px;
}
.msg pre code { background: none; border: 0; padding: 0; }

.msg table {
  border-collapse: collapse; margin: 12px 0; font-size: 13px;
  display: block; overflow-x: auto; max-width: 100%;
  border: 1px solid var(--line); border-radius: 10px;
}
.msg th, .msg td {
  padding: 6px 11px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.msg thead th {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 11px;
  color: var(--muted); background: var(--surface-2);
  border-bottom: 2px solid var(--grass-deep);
}
/* A markdown table in a chat answer: the wrapper frames and scrolls, the
   table fills the wrapper (see renderMarkdown). */
.msg .md-table {
  margin: 12px 0; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 10px;
}
.msg .md-table > table {
  display: table; width: 100%; margin: 0;
  border: 0; border-radius: 0; overflow: visible;
}
.msg tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.msg tbody tr:last-child td { border-bottom: 0; }
.msg td { font-variant-numeric: tabular-nums; }

/* tool cards */
.tool {
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-left: 2px solid var(--clay);
  border-radius: 8px;
  margin: 9px 0; font-size: 13px;
  overflow: hidden;
}
.tool > summary {
  cursor: pointer; padding: 8px 11px; color: var(--text);
  list-style: none;
}
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary b {
  font-family: var(--font-mono); font-weight: 600; color: var(--leather);
}
.tool .args { color: var(--faint); font-size: 12px; }
.tool .ok { color: var(--grass-bright); }
.tool table, .tool pre {
  margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
  border-top: 1px solid var(--line-soft); max-width: 100%;
}
.tool pre { background: transparent; }

/* ================================================================ welcome */
.welcome {
  border: 1px solid var(--line);
  border-left: 3px solid var(--grass);
  background: linear-gradient(180deg, rgba(26,31,43, 0.7), rgba(16,20,28, 0.4));
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 620px;
}
.welcome h2 {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--chalk);
}
.welcome p { margin: 0 0 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 13px/1.3 var(--font-body);
  color: var(--text); text-align: left;
  background: rgba(83,211,55, 0.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.chip:hover {
  background: rgba(83,211,55, 0.16);
  border-color: var(--grass);
}
.chip:active { transform: translateY(1px); }

/* ================================================================ composer */
.composer {
  display: flex; gap: 10px; align-items: flex-end;
  width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,20,28, 0.3), rgba(10,13,18, 0.7));
  backdrop-filter: blur(6px);
}
#input {
  flex: 1; resize: none;
  font: 15px/1.5 var(--font-body);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  max-height: 168px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#input::placeholder { color: var(--faint); }
#input:focus {
  outline: none;
  border-color: var(--grass);
  box-shadow: 0 0 0 3px rgba(83,211,55, 0.18);
}
#send {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #08160b;
  background: var(--grass);
  border: 0; border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#send:hover { background: var(--grass-bright); }
#send:active { transform: translateY(1px); }
#send:disabled { opacity: 0.45; cursor: default; }

footer {
  text-align: center; color: var(--faint); font-size: 11px;
  padding: 9px; border-top: 1px dashed rgba(238,241,247, 0.14);
}

.err { color: var(--live); }

/* streaming caret */
.cursor::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; margin-left: 3px;
  border-radius: 50%;
  background: var(--grass-bright);
  vertical-align: baseline;
  box-shadow: 0 0 8px var(--grass-bright);
}
@media (prefers-reduced-motion: no-preference) {
  .cursor::after { animation: pulse 1s ease-in-out infinite; }
  .gcard.is-live .gstatus { animation: livedim 1.6s steps(1) infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes livedim { 50% { opacity: 0.55; } }

/* ================================================================ responsive */
@media (max-width: 620px) {
  .brand .word { font-size: 21px; }
  .health { display: none; }
  .log { padding: 18px 14px 6px; }
  .msg.user { max-width: 88%; }
  .composer { padding: 12px 14px; }
  .gcard { width: 126px; }
  .drawer-card { max-width: 100%; }
  .credits { padding: 6px 10px; }
  #accountBtn, #newchat { padding: 7px 10px; }
}

/* ================================================================ header buttons */
.ghost-btn {
  font: 600 12px/1 var(--font-body);
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ghost-btn:hover { color: var(--chalk); border-color: var(--grass); background: rgba(83,211,55,.1); }
.credits {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1 var(--font-mono); color: var(--chalk);
  background: rgba(83,211,55,.12); border: 1px solid var(--grass-deep);
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.credits .hex { color: var(--grass-bright); font-size: 12px; }
.credits.low { background: rgba(255,84,97,.14); border-color: rgba(255,84,97,.4); }
.spend-flash {
  position: absolute; top: -6px; right: 4px;
  font: 700 11px/1 var(--font-mono); color: var(--live);
  animation: floatup 1.3s ease-out forwards; pointer-events: none;
}
@keyframes floatup { to { transform: translateY(-16px); opacity: 0; } }

/* ================================================================ modal */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,7,12,.66); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal-card {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px; position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.modal-card h3 {
  margin: 0 0 4px; font: 700 20px/1.2 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--chalk);
}
.modal-card h4 {
  margin: 20px 0 8px; font: 600 12px/1 var(--font-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.modal-card .sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.modal-card .x {
  position: absolute; top: 12px; right: 14px;
  background: 0; border: 0; color: var(--faint); font-size: 22px; cursor: pointer;
}
.modal-card .x:hover { color: var(--chalk); }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.auth-form input {
  font: 15px var(--font-body); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 12px;
}
.auth-form input:focus { outline: none; border-color: var(--grass); box-shadow: 0 0 0 3px rgba(83,211,55,.18); }
.primary {
  font: 700 14px/1 var(--font-body); color: #08160b;
  background: var(--grass); border: 0; border-radius: 10px;
  padding: 11px 16px; cursor: pointer;
}
.primary:hover { background: var(--grass-bright); }
.primary:disabled { opacity: .5; cursor: default; }
.swap { margin-top: 14px; font-size: 13px; color: var(--muted); }
.swap button, .link {
  background: 0; border: 0; color: var(--grass-bright); cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 0;
}

/* account / billing */
.bal-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}
.bal-n { font: 700 26px/1 var(--font-mono); color: var(--chalk); }
.bal-l { font-size: 12px; color: var(--muted); margin-top: 3px; }
.plan-badge {
  font: 600 11px/1 var(--font-display); letter-spacing: .08em;
  text-transform: uppercase; color: var(--grass-bright);
  border: 1px solid var(--grass-deep); border-radius: 999px; padding: 6px 11px;
}
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tier {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 4px;
}
.tier.current { border-color: var(--grass); box-shadow: inset 0 0 0 1px var(--grass-deep); }
.tier-name { font: 600 13px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--chalk); }
.tier-name span { color: var(--faint); }
.tier-price { font: 700 20px/1 var(--font-mono); color: var(--chalk); }
.tier-blurb { font-size: 12px; color: var(--muted); flex: 1; }
.tier .buy { margin-top: 8px; padding: 8px 10px; font-size: 13px; }
.ledger { display: grid; gap: 2px; }
.lrow {
  display: flex; justify-content: space-between; font-size: 13px;
  padding: 5px 2px; border-bottom: 1px solid var(--line-soft);
}
.lrow .neg { color: var(--live); font-family: var(--font-mono); }
.lrow .pos { color: var(--grass-bright); font-family: var(--font-mono); }
.acct-pw { display: grid; gap: 10px; margin-top: 16px; }
.acct-pw input {
  font: 15px var(--font-body); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 12px;
}
.acct-pw input:focus { outline: none; border-color: var(--grass); box-shadow: 0 0 0 3px rgba(83,211,55,.18); }
.acct-pw .primary { justify-self: start; }
.acct-foot { display: flex; gap: 16px; margin-top: 16px; }
.small { font-size: 12px; }

/* ================================================================ toasts */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.toast {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--grass); border-radius: 10px;
  padding: 11px 14px; font-size: 13px; color: var(--text);
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s, transform .28s;
}
.toast.in { opacity: 1; transform: none; }
.toast.ok { border-left-color: var(--grass-bright); }
.toast.err { border-left-color: var(--live); }
.toast .t-title { font-weight: 600; color: var(--chalk); }
.toast .t-body { color: var(--muted); margin-top: 2px; }

/* ================================================================ live drawer */
.drawer { position: fixed; inset: 0; z-index: 55; background: rgba(4,7,12,.5); display: flex; justify-content: flex-end; }
.drawer-card {
  width: 100%; max-width: 420px; height: 100%;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 22px; overflow-y: auto; position: relative;
  box-shadow: -30px 0 80px -20px rgba(0,0,0,.7);
}
.drawer-card .x { position: absolute; top: 12px; right: 14px; background: 0; border: 0; color: var(--faint); font-size: 22px; cursor: pointer; }
.d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 6px 0 14px; }
.d-team { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; }
.d-team img { width: 40px; height: 40px; object-fit: contain; }
.d-team span { font: 600 12px var(--font-display); letter-spacing: .04em; color: var(--muted); }
.d-team b { font: 700 26px/1 var(--font-mono); color: var(--chalk); }
.d-mid { flex: 1; text-align: center; }
.d-inn { font: 700 13px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--grass-bright); }
.d-count { font: 600 12px var(--font-mono); color: var(--muted); margin-top: 2px; }
.big-diamond { width: 90px; height: 70px; margin-top: 6px; }
.d-matchup { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.d-matchup b { color: var(--text); }
.d-play {
  font-size: 13px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 11px; margin-bottom: 12px;
}
.linescore { width: 100%; border-collapse: collapse; font: 500 12px var(--font-mono); margin-bottom: 14px; }
.linescore th, .linescore td { border: 1px solid var(--line-soft); padding: 3px 6px; text-align: center; }
.linescore th:first-child, .linescore td:first-child { text-align: left; font-family: var(--font-display); letter-spacing: .03em; }
.linescore td.r { color: var(--chalk); font-weight: 700; }
.d-foot { display: flex; flex-direction: column; gap: 10px; }
.d-foot .primary { width: 100%; }

/* scoreboard: count chip + bell */
.live-extra .count { font: 600 11px/1 var(--font-mono); color: var(--muted); }
.gstatus { display: flex; align-items: center; gap: 6px; }
.bell {
  margin-left: auto; background: 0; border: 0; cursor: pointer; font-size: 12px;
  filter: grayscale(1) opacity(.5); transition: filter .15s, transform .1s;
}
.bell:hover { filter: grayscale(.3) opacity(.9); }
.bell.on { filter: none; }
.bell:active { transform: scale(.9); }


/* ---------------- chat UX (stop / jump / copy / actions) ---------------- */
#stopBtn {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--live);
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer;
}
#stopBtn:hover { border-color: var(--live); background: rgba(255,84,97,.1); }

.jump-latest {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 88px; z-index: 20;
  font: 600 12px var(--font-body); color: var(--chalk);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.jump-latest:hover { border-color: var(--grass); }

.msg-actions { display: flex; gap: 6px; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.msg.assistant:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
.msg-actions .ma {
  font: 500 11px var(--font-body); color: var(--muted);
  background: transparent; border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 3px 9px; cursor: pointer;
}
.msg-actions .ma:hover { color: var(--chalk); border-color: var(--grass); }

.msg pre .copy-code {
  position: absolute; top: 6px; right: 6px;
  font: 500 10px var(--font-body); color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; cursor: pointer; opacity: 0;
  transition: opacity .15s;
}
.msg pre:hover .copy-code { opacity: 1; }
.msg pre .copy-code:hover { color: var(--chalk); }

.stopped { color: var(--faint); font-size: 12px; font-style: italic; }


/* ---------------- account sparkline + renews + jump-to-live ---------------- */
.renews { font-size: 11px; color: var(--faint); margin-top: 5px; }
.spark-wrap {
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 10px 12px; margin: 4px 0 6px; background: var(--surface-2);
}
.spark-label {
  font: 600 10px var(--font-display); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.spark { width: 100%; height: 40px; display: block; }
.spark-total { font-size: 11px; color: var(--faint); margin-top: 5px; font-family: var(--font-mono); }

.jump-live {
  position: absolute; right: 34px; top: 6px; z-index: 3;
  font: 700 10px var(--font-display); letter-spacing: .06em;
  color: var(--live); background: rgba(255,84,97,.12);
  border: 1px solid rgba(255,84,97,.4); border-radius: 999px;
  padding: 4px 10px; cursor: pointer;
}
.jump-live:hover { background: rgba(255,84,97,.22); }


/* ---------------- header nav / player search / standings ---------------- */
.hnav { display: flex; gap: 8px; }
@media (max-width: 780px) { .hnav { order: 3; width: 100%; justify-content: center; } }

.pq-input {
  width: 100%; margin: 4px 0 10px;
  font: 15px var(--font-body); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px;
}
.pq-input:focus { outline: none; border-color: var(--grass); box-shadow: 0 0 0 3px rgba(83,211,55,.18); }
.pq-results { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; }
.pq-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 9px 12px; cursor: pointer;
}
.pq-row:hover { border-color: var(--grass); background: rgba(83,211,55,.08); }
.pq-name { font-weight: 600; color: var(--chalk); }
.pq-meta { font-size: 11px; color: var(--faint); }

.pstat { width: 100%; }
.pstat th { text-transform: lowercase; }
.pstat .career td { border-top: 2px solid var(--grass-deep); color: var(--chalk); font-weight: 700; }

table.std { margin-bottom: 6px; }
table.std .tlogo { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; margin-right: 4px; }


/* ================================================================ v0.4 shell */
.sidebar .sb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 10px 16px;
}
.sidebar .brand { gap: 8px; }
.sidebar .brand .word { font-size: 17px; }
.app.sb-collapsed .sidebar .sb-top,
.app.sb-collapsed .sidebar > * { opacity: 0; pointer-events: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color: var(--chalk); border-color: var(--grass); background: rgba(83,211,55,.1); }

.new-chat {
  margin: 4px 12px 10px; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  font: 600 13px var(--font-body); color: var(--chalk);
  background: rgba(83,211,55,.13); border: 1px solid var(--grass-deep);
  border-radius: 10px; cursor: pointer;
}
.new-chat:hover { background: rgba(83,211,55,.22); border-color: var(--grass); }

.conv-search {
  margin: 0 12px 8px; padding: 8px 11px;
  font: 13px var(--font-body); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
}
.conv-search:focus { outline: none; border-color: var(--grass); }

.conv-list { flex: 1; overflow-y: auto; padding: 2px 8px 10px; }
.conv-group {
  font: 600 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 12px 8px 4px;
}
.conv-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 8px 8px 10px; border-radius: 8px;
  font-size: 13px; color: var(--muted); cursor: pointer; position: relative;
}
.conv-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.conv-item.active { background: rgba(83,211,55,.12); color: var(--chalk); }
.conv-item.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--grass); border-radius: 2px;
}
.conv-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-pin { font-size: 10px; }
.conv-menu-btn {
  opacity: 0; flex: none; width: 22px; height: 22px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 6px; font-size: 15px; line-height: 1;
}
.conv-item:hover .conv-menu-btn { opacity: 1; }
.conv-menu-btn:hover { background: rgba(255,255,255,.08); color: var(--chalk); }
.conv-empty { padding: 16px 10px; font-size: 12px; color: var(--faint); }

.sb-foot {
  border-top: 1px solid var(--line-soft); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.acct-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 1px solid var(--line-soft); border-radius: 9px;
  background: transparent; cursor: pointer; color: var(--muted);
}
.acct-row:hover { background: rgba(255,255,255,.04); color: var(--text); }
.avatar {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font: 700 11px var(--font-mono);
  background: var(--grass); color: #08160b;
}
.acct-email { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.acct-caret { color: var(--faint); }
.sb-foot .credits { align-self: flex-start; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  background: linear-gradient(180deg, rgba(30,37,50,.5), rgba(16,20,28,.28));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.topbar .hnav { display: flex; gap: 8px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.ctx-menu {
  position: fixed; z-index: 80; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px; display: flex; flex-direction: column;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.7);
}
.ctx-menu button {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  color: var(--text); font: 13px var(--font-body); padding: 8px 10px; border-radius: 7px;
  display: flex; flex-direction: column; gap: 2px;
}
.ctx-menu button:hover { background: rgba(255,255,255,.06); }
.ctx-menu button.danger { color: var(--live); }
.ctx-menu .opt-note { font-size: 10px; color: var(--faint); }

.palette {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(4,7,12,.55); backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
}
.palette-card {
  width: 100%; max-width: 560px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.palette-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text);
  font: 16px var(--font-body); padding: 15px 18px;
}
.palette-input:focus { outline: none; border-bottom-color: var(--grass); }
.palette-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-group {
  font: 600 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 8px 10px 3px;
}
.pal-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text); font: 14px var(--font-body); padding: 9px 10px; border-radius: 8px;
}
.pal-row.on { background: rgba(83,211,55,.14); }
.pal-ico { width: 18px; text-align: center; color: var(--muted); }
.pal-sub { margin-left: auto; font-size: 11px; color: var(--faint); }
.pal-empty { padding: 20px; text-align: center; color: var(--faint); font-size: 13px; }

.opts { display: flex; flex-direction: column; gap: 4px; }
.opt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 9px;
  cursor: pointer; font-size: 13px;
}
.opt-row:hover { border-color: var(--line); background: rgba(255,255,255,.02); }
.opt-row span { display: flex; flex-direction: column; }
.opt-note { font-size: 11px; color: var(--faint); }
.kbd-list { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.kbd-list > div { display: flex; align-items: center; gap: 6px; }
kbd {
  font: 600 11px var(--font-mono); color: var(--chalk);
  background: var(--surface-2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
}

.composer-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 12px 8px;
  transition: border-color .15s, box-shadow .15s;
}
.composer-inner:focus-within { border-color: var(--grass); box-shadow: 0 0 0 3px rgba(83,211,55,.15); }
.composer { border-top: 0; background: transparent; backdrop-filter: none; padding: 10px 18px 12px; }
.composer #input { background: transparent; border: 0; padding: 4px 4px 6px; }
.composer #input:focus { outline: none; box-shadow: none; }
.composer-tools { display: flex; align-items: center; gap: 8px; }
.composer-tools .grow { flex: 1; }
.model-pill {
  font: 600 11px var(--font-body); color: var(--muted);
  background: transparent; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.model-pill:hover { color: var(--chalk); border-color: var(--grass); }
.composer #send, .composer #stopBtn { width: 38px; height: 38px; border-radius: 10px; }

.mu-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.mu-pick label { font: 600 11px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mu-pick .pq-input { margin: 4px 0 4px; }
.mu-pick .pq-results { max-height: 180px; }
.mu-head { font: 700 16px var(--font-display); color: var(--chalk); margin: 14px 0 4px; }
.mu-head .vs { color: var(--live); margin: 0 4px; }
.mu-compound { display: flex; gap: 12px; }
.mu-compound > div {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 3px;
}
.mu-big { font: 700 22px var(--font-mono); color: var(--grass-bright); }
.mu-compound span:last-child { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .mu-pickers { grid-template-columns: 1fr; } }

.compact .msg { margin-bottom: 12px; }
.compact .log { padding-top: 16px; }
.no-bg-anim #bg { display: none; }

.gprob {
  margin-top: 5px; padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  font: 500 10px var(--font-mono); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ================================================================ props / gamecard / accuracy */
.props-toggle { display: flex; gap: 6px; margin: 4px 0 10px; }
.props-toggle button {
  font: 600 12px var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.props-toggle button.on { color: #08160b; background: var(--grass); border-color: var(--grass); }

.props-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.props-t th {
  position: sticky; top: 0; background: var(--surface-2);
  font: 600 10px var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; text-align: right; cursor: pointer; white-space: nowrap;
}
.props-t th:first-child, .props-t th:nth-child(2), .props-t th:nth-child(3) { text-align: left; }
.props-t th.sorted { color: var(--grass-bright); }
.props-t td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.props-t td:first-child { text-align: left; color: var(--chalk); }
.props-t td:nth-child(2), .props-t td:nth-child(3) { text-align: left; color: var(--muted); }
.props-t tbody tr { cursor: pointer; }
.props-t tbody tr:hover { background: rgba(255,255,255,.03); }
.prop-detail td { background: var(--surface-2); }
.pd { padding: 8px 4px; font-size: 12px; color: var(--muted); display: grid; gap: 6px; }
.pd-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.edge-w { display: inline-flex; align-items: center; gap: 5px; }
.edge-in {
  width: 62px; font: 12px var(--font-mono); color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
}
.edge-out { font-size: 11px; color: var(--faint); font-family: var(--font-mono); }
.edge-out .pos { color: var(--grass-bright); }
.edge-out .neg { color: var(--live); }

/* game card in the drawer */
.gc .gc-teams { display: flex; justify-content: space-between; gap: 10px; text-align: center; font: 700 15px var(--font-display); color: var(--chalk); margin: 4px 0 12px; }
.gc-teams em { color: var(--faint); font: 400 11px var(--font-mono); font-style: normal; }
.gc-teams small { color: var(--muted); font-weight: 400; }
.gc-teams .gc-at { color: var(--faint); font-size: 12px; align-self: center; }
.wp-bar {
  position: relative; height: 26px; border-radius: 8px; overflow: hidden;
  background: rgba(255,84,97,.25); margin-bottom: 8px;
}
.wp-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(83,211,55,.4); }
.wp-bar b { position: absolute; top: 5px; font: 700 11px var(--font-mono); color: var(--chalk); }
.wp-bar .wpa { left: 8px; } .wp-bar .wph { right: 8px; }
.gc-line { font-size: 12.5px; color: var(--muted); margin: 5px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gc-line b { color: var(--chalk); }
.gc-wx { font-size: 12px; color: var(--leather); margin: 6px 0; }
.gc-writeup {
  font-size: 13px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-left: 2px solid var(--grass);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.gc-pit { font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.gc-pit b { color: var(--chalk); }
.inn-viz { display: flex; gap: 4px; align-items: flex-end; height: 74px; margin: 6px 0 4px; }
.inn-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; justify-content: flex-end; }
.inn-col span { width: 8px; background: rgba(255,84,97,.5); border-radius: 2px 2px 0 0; }
.inn-col span.hb { background: rgba(83,211,55,.6); }
.inn-col b { font: 600 9px var(--font-mono); color: var(--faint); }

/* accuracy modal */
.acc-body .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.acc-body .stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface-2); }
.acc-body .stat .k { font: 600 10px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acc-body .stat .v { font: 700 22px var(--font-mono); color: var(--grass-bright); margin-top: 4px; }
.acc-body .stat .s { font-size: 11px; color: var(--faint); margin-top: 2px; }
.calib { display: flex; gap: 6px; align-items: flex-end; }
.cbin { flex: 1; text-align: center; }
.cbar { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 84px; }
.cbar span { width: 10px; border-radius: 2px 2px 0 0; }
.cbar .pred { background: rgba(255,255,255,.18); }
.cbar .act { background: var(--grass); }
.cbin small { font-size: 9px; color: var(--faint); }
.acc-recent { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }

.gprob { cursor: pointer; }


.props-bar { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; flex-wrap: wrap; }
.props-bar .props-toggle { margin: 0; }
.props-search {
  flex: 1; min-width: 160px;
  font: 13px var(--font-body); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px;
}
.props-search:focus { outline: none; border-color: var(--grass); box-shadow: 0 0 0 3px rgba(83,211,55,.15); }
.props-bar .props-count { color: var(--muted); white-space: nowrap; }


/* ================================================================ v0.6 routed views */
.sb-nav-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px; }
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font: 500 13.5px var(--font-body); color: var(--muted);
  text-decoration: none; cursor: pointer;
}
.sb-link:hover { background: rgba(255,255,255,.04); color: var(--text); }
.sb-link.on { background: rgba(83,211,55,.14); color: var(--chalk); }
.sb-link .ico { width: 18px; text-align: center; font-size: 13px; color: var(--faint); flex: none; }
.sb-link.on .ico { color: var(--grass-bright); }
.free-badge {
  font: 700 9px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--grass-bright); background: rgba(83,211,55,.14);
  border: 1px solid var(--grass-deep); border-radius: 999px; padding: 2px 6px;
  margin-left: auto;
}

.sb-chats { display: flex; flex-direction: column; min-height: 0; flex: 1; border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 8px; }
.sb-chats-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 14px 6px; font: 600 10px var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.mini-btn {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.mini-btn:hover { color: var(--chalk); border-color: var(--grass); background: rgba(83,211,55,.1); }

/* topbar tabs */
.tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tab {
  font: 600 12px var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.tab:hover { color: var(--chalk); }
.tab.on { color: var(--chalk); background: rgba(83,211,55,.14); border-color: var(--grass-deep); }
.tab.more { color: var(--faint); }

.more-menu {
  position: fixed; z-index: 80; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px; display: flex; flex-direction: column;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.7);
}
.more-menu button {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  color: var(--text); font: 13px var(--font-body); padding: 9px 11px; border-radius: 7px;
}
.more-menu button:hover { background: rgba(255,255,255,.06); }

/* board view container + view head */
.board-view { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 40px; }
.board-view > h4 {
  font: 600 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 8px; display: flex; align-items: baseline; gap: 10px;
}
.board-view > h4:first-child { margin-top: 4px; }
.h4-link, .board-view h4 .h4-link {
  font: 500 10px var(--font-body); letter-spacing: .02em; text-transform: none;
  color: var(--grass-bright); text-decoration: none;
}
.view-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.view-head h2 {
  margin: 0; font: 700 20px var(--font-display); letter-spacing: .02em;
  text-transform: uppercase; color: var(--chalk);
  display: flex; align-items: center; gap: 8px;
}
.view-head .free-badge { margin-left: 0; }
.vh-back {
  font: 600 12px var(--font-body); color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; cursor: pointer;
}
.vh-back:hover { color: var(--chalk); border-color: var(--grass); }
.vh-help {
  margin-left: auto; font: 500 12px var(--font-body); color: var(--grass-bright);
  background: transparent; border: 1px solid var(--grass-deep); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.vh-help:hover { background: rgba(83,211,55,.12); }
.view-sub { margin: 10px 0 14px; color: var(--muted); font-size: 13px; max-width: 70ch; }

/* per-sport news + injuries context strip */
.ctx-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0 6px; }
.ctx-col h4 { margin: 0 0 8px; font: 700 12px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ctx-news, .ctx-inj { display: grid; gap: 4px; }
.ctx-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line-soft, var(--line)); border-radius: 9px;
  background: var(--surface-2); text-decoration: none; color: inherit; font-size: 12.5px;
}
a.ctx-item:hover { border-color: var(--sport-accent, var(--grass)); background: rgba(255,255,255,.03); }
.ctx-h { color: var(--chalk, #e8e8e8); line-height: 1.35; }
.ctx-when { flex: none; color: var(--faint, var(--muted)); font-size: 11px; font-variant-numeric: tabular-nums; }
.inj-tag { flex: none; font: 700 10.5px var(--font-display); letter-spacing: .03em; border-radius: 999px; padding: 1px 7px; }
.inj-tag.out { color: #ff6a6a; background: rgba(255,84,97,.14); }
.inj-tag.q { color: #f4c752; background: rgba(244,199,82,.14); }

/* injury block on game / matchup cards */
.ib { margin-top: 12px; }
.ib > .tiny { display: block; margin-bottom: 6px; color: var(--muted); }
.ib-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ib-col > .tiny { display: block; font-weight: 700; color: var(--chalk, #e8e8e8); margin-bottom: 4px; letter-spacing: .04em; }
.ib-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--line-soft, var(--line)); }
@media (max-width: 520px) { .ib-cols { grid-template-columns: 1fr; } }

/* find-a-player lookup */
.fnd { margin: 16px 0 4px; max-width: 460px; }
.fnd h4 { margin: 0 0 8px; font: 700 12px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fnd .pq-results { max-height: 220px; margin-top: 6px; }
.fnd-card {
  margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--sport-accent, var(--grass)); border-radius: 10px;
  background: var(--surface-2); font-size: 13px;
}
.fnd-line { margin-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* league selector — soccer board */
.lg-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.lg-pill {
  font: 500 12px var(--font-body); color: var(--muted);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.lg-pill:hover { color: var(--chalk); border-color: var(--line-strong, var(--line)); }
.lg-pill.on {
  color: var(--ink, #0b0f0c); background: var(--sport-accent, var(--grass-bright));
  border-color: var(--sport-accent, var(--grass-bright)); font-weight: 600;
}

.tbl-wrap { overflow-x: auto; }
.empty {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 26px 20px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.empty p { margin: 4px 0; }

/* skeleton */
.skel { display: grid; gap: 8px; padding: 6px 0; }
.skel-row {
  height: 34px; border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skel 1.3s ease infinite;
}
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* fair-odds chip in tables */
.fo { font: 500 10px var(--font-mono); color: var(--faint); }
.props-t td .fo, .pstat td .fo { margin-left: 3px; }
.props-t th { text-transform: uppercase; }
td.l, th.l { text-align: left !important; }

/* game-card actions in board view */
.gc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.gc-actions .ghost-btn { text-decoration: none; }

/* help modal */
.help-body { font-size: 13.5px; color: var(--text); line-height: 1.65; }
.help-body p { margin: 0 0 10px; }
.help-body ul { margin: 0 0 12px; padding-left: 18px; }
.help-body li { margin: 4px 0; color: var(--muted); }
.help-body li b { color: var(--chalk); }

/* home dashboard */
.home-hero {
  border: 1px solid var(--line); border-left: 3px solid var(--grass);
  border-radius: 14px; padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(83,211,55,.08), rgba(16,20,28,.2));
  margin-bottom: 8px;
}
.home-hero h1 {
  margin: 0 0 8px; font: 700 27px var(--font-display); letter-spacing: .01em;
  text-transform: uppercase; color: var(--chalk);
}
.home-hero p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; max-width: 64ch; }
.home-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.home-cta .primary, .home-cta .ghost-btn { text-decoration: none; display: inline-flex; align-items: center; }

.home-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hg-card {
  text-align: left; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 13px; cursor: pointer; color: var(--text);
}
.hg-card:hover { border-color: var(--grass); background: rgba(83,211,55,.08); }
.hg-top { font: 700 14px var(--font-display); letter-spacing: .02em; color: var(--chalk); }
.hg-top b { color: var(--grass-bright); font-family: var(--font-mono); }
.hg-at { color: var(--muted); font-size: 11px; }
.hg-sub { margin-top: 5px; font-size: 11px; color: var(--muted); }
.hg-live { color: var(--live); font-weight: 700; }
.hg-final { color: var(--muted); }
.hg-time { color: var(--muted); }

.home-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.hp-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 12px;
}
.hp-card:hover { border-color: var(--grass); background: rgba(83,211,55,.08); }
.hp-name { font: 600 13px var(--font-body); color: var(--chalk); }
.hp-meta { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.hp-val { font: 700 15px var(--font-mono); color: var(--grass-bright); }
.hp-val small { font: 400 10px var(--font-body); color: var(--muted); }

@media (max-width: 560px) {
  .board-view { padding: 16px 14px 40px; }
  .home-hero h1 { font-size: 22px; }
}


/* ============================================================================
   v0.7 — DraftKings-style dark theme: crisp surfaces, electric-green accent
   ========================================================================== */

/* ---- layered premium background ---- */
#bg { z-index: -1; background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -8%, var(--glow), transparent 70%),
    radial-gradient(1100px 700px at 108% 8%, rgba(70,120,255,.06), transparent 60%),
    radial-gradient(1000px 900px at -10% 110%, rgba(83,211,55,.05), transparent 55%),
    linear-gradient(180deg, #0c1016 0%, var(--bg) 42%, #080a0e 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1200px 700px at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(1200px 700px at 50% 0%, #000 0%, transparent 78%);
}

::selection { background: rgba(83,211,55,.3); color: #fff; }
* { scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); }
*::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }

/* ---- shell ---- */
.app { background: transparent; }
.sidebar {
  background: linear-gradient(180deg, rgba(16,20,29,.92), rgba(11,14,20,.92));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.main-col { background: transparent; }

/* ---- header / topbar ---- */
header, .topbar {
  background: rgba(12,15,22,.82);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.brand .word { letter-spacing: .06em; }
.brand .word .ai { color: var(--grass); }

.health {
  border-color: var(--line); background: rgba(0,0,0,.25);
  color: var(--muted); font-weight: 500;
}
.health .dot { background: var(--grass); box-shadow: 0 0 10px var(--grass); }

/* ---- topbar tabs: underline style ---- */
.tabs { gap: 2px; }
.tab {
  border: 0; background: transparent; border-radius: 8px;
  padding: 8px 12px 10px; color: var(--muted);
  position: relative; letter-spacing: .05em;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.tab.on { color: #fff; background: transparent; }
.tab.on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--grass); box-shadow: 0 0 12px var(--grass);
}
.tab.more { color: var(--faint); }

/* ---- sidebar nav ---- */
.sb-link { border-radius: 10px; font-weight: 500; }
.sb-link:hover { background: rgba(255,255,255,.04); color: var(--text); }
.sb-link.on {
  background: linear-gradient(90deg, rgba(83,211,55,.16), rgba(83,211,55,.04));
  color: #fff; box-shadow: inset 2px 0 0 var(--grass);
}
.sb-link.on .ico { color: var(--grass); }
.free-badge {
  color: var(--grass); background: rgba(83,211,55,.12);
  border: 1px solid rgba(83,211,55,.28); font-weight: 700;
}

.mini-btn:hover { color: var(--grass); border-color: var(--grass); background: rgba(83,211,55,.12); }
.conv-item.active { background: rgba(83,211,55,.12); }
.conv-item.active::before { background: var(--grass); }

/* ---- buttons ---- */
.primary {
  background: linear-gradient(180deg, #63e046, #44c02a);
  color: var(--accent-ink); border: 0; border-radius: 10px;
  font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(83,211,55,.55);
  transition: filter .14s, transform .1s, box-shadow .14s;
}
.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary:active { transform: translateY(0); }

.ghost-btn {
  border-color: var(--line); color: var(--text);
  background: rgba(255,255,255,.02); border-radius: 10px;
}
.ghost-btn:hover {
  color: #fff; border-color: var(--grass);
  background: rgba(83,211,55,.1); box-shadow: var(--ring);
}
.icon-btn { border-radius: 9px; }
.icon-btn:hover { color: var(--grass); border-color: var(--grass); background: rgba(83,211,55,.1); }

.credits {
  background: rgba(83,211,55,.1); border-color: rgba(83,211,55,.3); color: #fff;
}
.credits .hex { color: var(--grass); }
.credits.low { background: rgba(255,84,97,.14); border-color: rgba(255,84,97,.42); }

/* ---- scoreboard rail ---- */
.scoreboard { background: #0b0e15; border-bottom: 1px solid var(--line); }
.sb-nav { background: #0b0e15; }
.daytab {
  color: var(--clay); background: rgba(255,180,61,.07);
  border-right: 1px solid var(--line-soft); letter-spacing: .1em;
}
.gcard { transition: background .14s; }
.gcard:hover { background: rgba(255,255,255,.04); }
.gcard.is-live { box-shadow: inset 0 2px 0 var(--grass); background: rgba(83,211,55,.05); }
.gcard.is-live .gstatus { color: var(--grass); }
.gcard .team .score { color: #fff; }
.gstatus { color: var(--faint); }

/* ---- chat view: fill the column, scroll the log, keep the composer pinned ----
   (#boardView already gets flex:1/min-height:0/overflow-y:auto; #chatView is a
   flex column so a long conversation scrolls inside #log instead of pushing the
   header / scoreboard / footer off-screen) */
.main-col { min-height: 0; overflow: hidden; }
#chatView { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#chatView .log { flex: 1; min-height: 0; }
#chatView .composer { flex: none; }

/* ---- board views ---- */
.board-view { padding: 22px 26px 48px; }
.view-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.view-head h2 { letter-spacing: .04em; }
.vh-help { color: var(--grass); border-color: rgba(83,211,55,.3); }
.vh-help:hover { background: rgba(83,211,55,.12); box-shadow: var(--ring); }
.vh-back:hover { color: #fff; border-color: var(--grass); }
.board-view > h4 { color: var(--muted); letter-spacing: .12em; }
.h4-link { color: var(--grass); }

/* ---- home dashboard ---- */
.home-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 30px 26px;
  background:
    radial-gradient(600px 260px at 0% 0%, rgba(83,211,55,.14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--elev-2);
}
.home-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,211,55,.12), transparent 65%);
  pointer-events: none;
}
.home-hero h1 {
  font-size: 34px; line-height: 1.05; letter-spacing: .01em;
  color: #fff; margin: 0 0 10px; max-width: 18ch;
}
.home-hero h1 .g,
.home-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--grass), var(--grass-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero p { color: var(--muted); font-size: 14px; max-width: 60ch; }
.home-cta .primary, .home-cta .ghost-btn { padding: 11px 18px; font-size: 13px; }

.hg-card, .hp-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--elev-1);
  transition: transform .12s, border-color .14s, background .14s, box-shadow .14s;
}
.hg-card:hover, .hp-card:hover {
  transform: translateY(-2px); border-color: rgba(83,211,55,.5);
  background: var(--surface-3); box-shadow: var(--elev-2);
}
.hg-top { color: #fff; letter-spacing: .03em; }
.hg-top b { color: var(--grass); }
.hg-live { color: var(--grass); }
.hp-name { color: #fff; }
.hp-val { color: var(--grass); }

/* ---- tables ---- */
.props-t, .pstat, table.admin { border-collapse: separate; border-spacing: 0; }
.props-t thead th, .pstat thead th {
  background: #0e1119; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.props-t th.sorted { color: var(--grass); }
.props-t tbody tr:nth-child(even) td { background: rgba(255,255,255,.014); }
.props-t tbody tr:hover td { background: rgba(83,211,55,.08); }
.props-t td, .pstat td { border-bottom: 1px solid var(--line-soft); }
.props-t td:first-child, .pstat td:first-child { color: #fff; }
.fo { color: var(--clay); opacity: .85; }
.prop-detail td { background: var(--surface) !important; }

.tbl-wrap {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden auto;
  box-shadow: var(--elev-1);
}
.tbl-wrap table { margin: 0; }

/* ---- game card ---- */
.gc-teams { color: #fff; }
.wp-bar {
  height: 30px; border-radius: 10px;
  background: rgba(255,84,97,.22); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.wp-bar > span { background: linear-gradient(90deg, rgba(83,211,55,.55), rgba(83,211,55,.35)); }
.wp-bar b { color: #fff; }
.gc-line b { color: #fff; }
.gc-wx { color: var(--clay); }
.gc-writeup {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--grass); border-radius: 12px;
}
.inn-col span { background: rgba(255,84,97,.5); }
.inn-col span.hb { background: rgba(83,211,55,.62); }

/* ---- misc surfaces ---- */
.modal-card, .palette-card { box-shadow: var(--elev-2); border-radius: 16px; }
.modal { background: rgba(4,7,12,.72); }
.welcome {
  border: 1px solid var(--line); border-left: 3px solid var(--grass);
  background: radial-gradient(500px 200px at 0% 0%, rgba(83,211,55,.1), transparent 70%), var(--surface);
  border-radius: 16px; box-shadow: var(--elev-1);
}
.welcome h2 { color: #fff; }
.chip {
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px;
}
.chip:hover { background: rgba(83,211,55,.12); border-color: var(--grass); color: #fff; }
.composer-inner {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--elev-1);
}
.composer-inner:focus-within { border-color: var(--grass); box-shadow: var(--ring); }
/* the textarea must fill the box — it was rendering at its default `cols` width */
.composer #input { width: 100%; display: block; flex: 0 0 auto; background: var(--surface-2); }
#input:focus { border-color: var(--grass); box-shadow: var(--ring); }

/* "working" indicator that replaces raw tool-call cards */
.thinking {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 12px; font-size: 12.5px; color: var(--muted);
}
.thinking .dots { display: inline-flex; gap: 4px; }
.thinking .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--grass);
  opacity: .3;
}
@media (prefers-reduced-motion: no-preference) {
  .thinking .dots i { animation: think 1.1s ease-in-out infinite; }
  .thinking .dots i:nth-child(2) { animation-delay: .16s; }
  .thinking .dots i:nth-child(3) { animation-delay: .32s; }
}
@keyframes think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.model-pill:hover { color: var(--grass); border-color: var(--grass); }
#send, .composer #send {
  background: linear-gradient(180deg, #63e046, #44c02a); color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px rgba(83,211,55,.55);
}
#send:hover { filter: brightness(1.06); }

.empty { border-color: var(--line); background: rgba(255,255,255,.015); border-radius: 14px; }
.skel-row { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; }
.more-menu { box-shadow: var(--elev-2); border-radius: 12px; }

.msg .role { color: var(--grass); }
.msg.user {
  background: linear-gradient(180deg, rgba(83,211,55,.14), rgba(83,211,55,.06));
  border: 1px solid rgba(83,211,55,.24); color: #fff;
}
.msg h2 { color: var(--grass); }
.tool { border-left-color: var(--clay); }
.tool > summary b { color: var(--clay); }
.tool .ok { color: var(--grass); }

footer { border-top: 1px solid var(--line-soft); color: var(--faint); }

@media (max-width: 620px) {
  .home-hero { padding: 22px 18px; border-radius: 14px; }
  .home-hero h1 { font-size: 26px; }
  .board-view { padding: 16px 14px 40px; }
}

:root { --panel: var(--surface); }

/* ---- sidebar: always leave a way to reopen it ---- */
/* desktop: the in-sidebar ‹ control scrolls off with the 0-width sidebar, so
   the topbar hamburger becomes the toggle once collapsed. Hide it while the
   sidebar is open (‹ handles that); show it (and hide the dead ‹) when collapsed. */
@media (min-width: 901px) {
  .app:not(.sb-collapsed) .only-narrow { display: none; }
  .app.sb-collapsed #sbCollapse { display: none; }
}

/* mobile: "collapsed" is a desktop-only idea — never let a stored collapsed
   state (or a desktop→mobile resize) squash the slide-over to 0 width */
@media (max-width: 900px) {
  .app.sb-collapsed .sidebar { width: 280px; border-right: 1px solid var(--line); }
  .app.sb-collapsed .sidebar > *,
  .app.sb-collapsed .sidebar .sb-top { opacity: 1; pointer-events: auto; }
}

/* ================================================================ v0.8 growth */
/* social-proof strip under the hero */
.home-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.home-proof .pf {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.home-proof .pf b {
  font: 700 15px var(--font-mono); color: var(--grass);
}
.home-proof:empty { display: none; }

/* "a friend invited you" banner */
.invite-banner {
  width: 100%; text-align: left; cursor: pointer;
  margin-bottom: 12px; padding: 11px 15px;
  font: 600 13px var(--font-body); color: #eafff1;
  background: linear-gradient(90deg, rgba(83,211,55,.2), rgba(83,211,55,.06));
  border: 1px solid rgba(83,211,55,.4); border-radius: 12px;
}
.invite-banner:hover { border-color: var(--grass); background: rgba(83,211,55,.18); }

/* invite section in the account modal */
.invite {
  border: 1px solid var(--line); border-left: 3px solid var(--grass);
  border-radius: 12px; padding: 14px 15px; margin: 6px 0 4px;
  background: radial-gradient(420px 160px at 0% 0%, rgba(83,211,55,.1), transparent 70%), var(--surface-2);
}
.invite h4 { margin: 0 0 4px; }
.invite p { margin: 0 0 11px; }
.invite p b { color: var(--grass); }
.invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-link {
  flex: 1; min-width: 180px;
  font: 12px var(--font-mono); color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px;
}
.invite-link:focus { outline: none; border-color: var(--grass); }
.invite-row .primary, .invite-row .ghost-btn { padding: 8px 14px; font-size: 12px; }
.invite-stats { margin-top: 10px; font-size: 12px; color: var(--muted); }
.invite-stats b { color: var(--chalk); font-family: var(--font-mono); }

/* model-results pipeline status line */
.acc-body .pipeline {
  margin: 0 0 14px; padding: 8px 12px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.acc-body .pipeline b { color: var(--chalk); font-family: var(--font-mono); }
.empty p b { color: var(--grass); }

/* model-results verdict + 3-up stat grid */
.acc-body .verdict {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  font: 600 13px var(--font-body); color: var(--text);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.02);
}
.acc-body .verdict.pos { border-color: rgba(83,211,55,.35); background: rgba(83,211,55,.08); color: #eafff1; }
.acc-body .verdict.neg { border-color: rgba(255,84,97,.35); background: rgba(255,84,97,.07); }
.acc-body .grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .acc-body .grid.grid-3 { grid-template-columns: 1fr; } }
.acc-body table.admin td.num.pos { color: var(--grass); }

/* ================================================================ v0.9 outside factors */
/* injuries */
.inj-block { margin: 10px 0 4px; }
.inj-block h4 { margin: 0 0 6px; }
.inj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.inj-list li { font-size: 12.5px; color: var(--text); }
.inj-tag {
  display: inline-block; min-width: 34px; text-align: center;
  font: 700 9px/1.6 var(--font-mono); letter-spacing: .03em;
  border-radius: 5px; padding: 1px 5px; margin-right: 7px;
  background: rgba(255,84,97,.14); color: var(--live); border: 1px solid rgba(255,84,97,.35);
}
.inj-tag.inj-il60 { background: rgba(255,180,61,.14); color: var(--clay); border-color: rgba(255,180,61,.35); }
.il-report {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.015);
}
.il-report > summary {
  cursor: pointer; padding: 9px 12px; font: 600 12px var(--font-display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.il-report[open] > summary { border-bottom: 1px solid var(--line-soft); }
.il-report .inj-list { padding: 10px 12px; }

/* recent form in the matchup analyzer */
.mu-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
@media (max-width: 560px) { .mu-forms { grid-template-columns: 1fr; } }
.mu-form { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.mu-form-name { font: 600 13px var(--font-body); color: #fff; margin-bottom: 3px; }
.mu-form-inj { font-size: 11.5px; color: var(--live); margin-bottom: 3px; }
.mu-form-line { font: 12px var(--font-mono); color: var(--muted); }

/* live win prob in the drawer */
.d-livewp { margin: 8px 0 4px; }
.lwp-bar {
  position: relative; height: 8px; border-radius: 5px; overflow: hidden;
  background: rgba(255,84,97,.3);
}
.lwp-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grass); }
.lwp-lbl { display: flex; justify-content: space-between; font: 500 10.5px var(--font-mono); color: var(--text); margin-top: 3px; }

/* live strip — shared live-game banner on the non-MLB game pages (MLB has
   its own richer live UI in the drawer, see .d-livewp above) */
.live-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-bottom: 12px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,84,97,.08); border: 1px solid rgba(255,84,97,.25);
}
.live-strip .hg-live { animation: ls-pulse 1.8s ease-in-out infinite; }
@keyframes ls-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ls-clock { font: 600 12.5px var(--font-mono); color: var(--text); }
.ls-score { font: 700 13px var(--font-mono); color: #fff; }
.ls-sit { font: 500 12px var(--font-body); color: var(--muted); }
.ls-play { flex-basis: 100%; color: var(--muted); }
.ls-wp { flex-basis: 100%; margin-top: 2px; }
.ls-wp-bar {
  position: relative; height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(255,84,97,.3);
}
.ls-wp-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grass); }

/* ================================================================ legal / faq pages */
.legal { max-width: 760px; line-height: 1.62; font-size: 13.5px; color: var(--text); }
.legal h3 {
  margin: 24px 0 6px; font: 700 14px var(--font-display); letter-spacing: .02em;
  color: #fff; border-bottom: 1px solid var(--line-soft); padding-bottom: 4px;
}
.legal h3:first-of-type { margin-top: 8px; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 6px 0 12px; padding-left: 20px; }
.legal li { margin: 4px 0; color: var(--muted); }
.legal li b, .legal p b { color: var(--chalk); }
.legal a { color: var(--grass); }
.legal hr { border: 0; border-top: 1px solid var(--line-soft); margin: 20px 0 12px; }
.legal .muted { color: var(--muted); }

/* ================================================================ v0.10 paywall */
.paywall {
  max-width: 620px; margin: 8px 0 0;
  border: 1px solid var(--line); border-left: 3px solid var(--grass);
  border-radius: 16px; padding: 22px 24px;
  background: radial-gradient(500px 220px at 0% 0%, rgba(83,211,55,.12), transparent 70%), var(--surface-2);
  box-shadow: var(--elev-1);
}
.paywall.pw-inline { margin-top: 8px; }
.pw-badge {
  display: inline-block; font: 700 10px/1 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--grass);
  background: rgba(83,211,55,.12); border: 1px solid rgba(83,211,55,.3);
  border-radius: 999px; padding: 5px 9px; margin-bottom: 12px;
}
.paywall h2 { margin: 0 0 8px; font: 700 22px var(--font-display); letter-spacing: .02em; color: #fff; }
.paywall p { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.pw-list { margin: 4px 0 16px; padding-left: 18px; display: grid; gap: 5px; }
.pw-list li { color: var(--text); font-size: 13px; }
.pw-list li::marker { color: var(--grass); }
.pw-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.pw-cta .primary, .pw-cta .ghost-btn { padding: 11px 18px; font-size: 13px; text-decoration: none; }
.paywall a { color: var(--grass); }

/* lock glyph on the data tabs when the viewer hasn't bought anything.
   Chat is NOT here — it only needs an account (trial credits work), so it
   gets the lock only while signed out. */
body.no-access .sb-link[data-view="props"],
body.no-access .sb-link[data-view="matchup"],
body.no-access .sb-link[data-view="results"],
body.signed-out .sb-link[data-view="chat"] { position: relative; }
body.no-access .sb-link[data-view="props"]::after,
body.no-access .sb-link[data-view="matchup"]::after,
body.no-access .sb-link[data-view="results"]::after,
body.signed-out .sb-link[data-view="chat"]::after {
  content: "🔒"; margin-left: auto; font-size: 10px; opacity: .6;
}

/* ================================================================ v0.10.1 landing page */
.landing { max-width: 1080px; margin: 0 auto; padding-bottom: 40px; }
.landing .lp-hero {
  text-align: center; padding: 48px 20px 40px;
  background: radial-gradient(680px 340px at 50% -10%, rgba(83,211,55,.14), transparent 70%);
}
.lp-kick {
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grass); margin-bottom: 14px;
}
.lp-hero h1 {
  margin: 0 auto 14px; max-width: 16ch;
  font: 800 clamp(30px, 5vw, 46px)/1.08 var(--font-display); letter-spacing: .01em; color: #fff;
}
.lp-hero h1 .g { color: var(--grass); }
.lp-sub { margin: 0 auto 22px; max-width: 60ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.lp-cta .primary { padding: 13px 26px; font-size: 14px; }
.lp-cta .ghost-btn { padding: 13px 20px; font-size: 13px; text-decoration: none; }
.lp-cta .linkish {
  background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.lp-cta .linkish:hover { color: var(--text); }
.lp-trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
  margin: 26px auto 0; max-width: 760px;
}
.lp-trust .pf { color: var(--muted); font-size: 12px; }
.lp-trust .pf b { color: var(--text); font-weight: 700; margin-right: 5px; }

.lp-sec { padding: 34px 20px; border-top: 1px solid var(--line-soft); }
.lp-sec > h2 {
  margin: 0 0 18px; font: 800 22px var(--font-display); letter-spacing: .01em; color: #fff;
}
.lp-sec .muted.small { color: var(--muted); font-size: 12.5px; font-weight: 400; }

.lp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lp-feat {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  background: var(--surface-2);
}
.lp-ico {
  display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(83,211,55,.12); border: 1px solid rgba(83,211,55,.3);
  font-size: 17px; margin-bottom: 10px;
}
.lp-feat h3 { margin: 0 0 6px; font: 700 15px var(--font-display); color: #fff; }
.lp-feat p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* five-sports showcase (multisport landing) */
.lp-sports { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; }
.lp-sport {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: var(--surface-2); border-top: 2px solid var(--sa, var(--grass-bright));
  display: flex; flex-direction: column; gap: 8px;
}
.lp-sport-top { display: flex; align-items: baseline; gap: 8px; }
.lp-sport-code {
  font: 700 11px var(--font-display); letter-spacing: .08em;
  color: var(--sa, var(--grass-bright)); border: 1px solid currentColor;
  border-radius: 6px; padding: 1px 6px;
}
.lp-sport-name { font: 700 15px var(--font-display); color: #fff; }
.lp-sport-tag { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; flex: 1; }
.lp-sport-mkts { display: flex; flex-wrap: wrap; gap: 4px; }
.lp-sport-mkts span {
  font-size: 10.5px; color: var(--muted-2, var(--muted)); background: rgba(255,255,255,.04);
  border: 1px solid var(--line-soft, var(--line)); border-radius: 999px; padding: 2px 7px;
}
.lp-sport-data { font-size: 11px; color: var(--faint, var(--muted)); font-variant-numeric: tabular-nums; }

.lp-steps { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.lp-steps li { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.lp-steps li b { color: var(--text); }
.lp-steps li::marker { color: var(--grass); font-weight: 700; }

.lp-plans {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 16px;
}
.lp-plans-main {
  flex: 1 1 320px; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; align-content: start;
}
.lp-plans-sub {
  grid-column: 1 / -1; margin: 8px 0 0;
  font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lp-plan {
  position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 8px;
}
.lp-plan.feature { border-color: rgba(83,211,55,.5); box-shadow: 0 0 0 1px rgba(83,211,55,.25); }
.lp-plan-tag {
  position: absolute; top: -10px; left: 20px;
  font: 700 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--grass); border-radius: 999px; padding: 5px 9px;
}
.lp-plan-name { font: 700 15px var(--font-display); color: #fff; }
.lp-plan-price { font: 800 26px var(--font-display); color: var(--grass); }
.lp-plan-price .muted { font-size: 12px; color: var(--muted); font-weight: 400; }
.lp-plan-blurb { color: var(--muted); font-size: 12.5px; line-height: 1.45; flex: 1; }
.lp-plan .lp-buy { margin-top: 6px; padding: 10px 14px; font-size: 13px; width: 100%; }

.lp-qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lp-q h3 { margin: 0 0 5px; font: 700 13.5px var(--font-display); color: #fff; }
.lp-q p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.lp-final {
  text-align: center; padding: 44px 20px; margin-top: 8px;
  border-top: 1px solid var(--line-soft);
  background: radial-gradient(520px 240px at 50% 120%, rgba(83,211,55,.12), transparent 70%);
}
.lp-final h2 { margin: 0 0 8px; font: 800 24px var(--font-display); color: #fff; }
.lp-final p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.lp-final .primary { padding: 13px 28px; font-size: 14px; }

.landing .invite-banner { margin: 12px auto 0; max-width: 620px; }

/* ---- v0.10.1 pricing: pack bonuses / FOMO ---- */
.lp-plan-tag.gold { background: linear-gradient(90deg,#f4c752,#e0a100); color:#241c00; }
.lp-plan.gold, .lp-plan.feature.gold {
  border-color: rgba(244,199,82,.55); box-shadow: 0 0 0 1px rgba(244,199,82,.28);
}
.lp-plan-credits { font: 700 13px var(--font-display); color: var(--text); }

/* ---- v0.14 credit packs: stacked gradient cards ---- */
.pk-col {
  flex: 0 0 290px; display: flex; flex-direction: column; gap: 10px;
}
.pk-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 1px;
  font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.pk-col-head span {
  font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--faint, var(--muted)); font-size: 10px;
}
.pk-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--surface-2); transition: border-color .15s, transform .15s;
}
.pk-card:hover { border-color: var(--line-strong, var(--line)); transform: translateY(-1px); }
.pk-banner {
  position: relative; overflow: hidden; padding: 15px 16px 14px; color: #08170a;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(120deg, #45d13c 0%, #9fe63b 100%);
}
.pk-card[data-tier="0"] .pk-banner { background: linear-gradient(120deg, #2bbfd6 0%, #4fd53f 100%); }
.pk-card[data-tier="1"] .pk-banner { background: linear-gradient(120deg, #45d13c 0%, #9fe63b 100%); }
.pk-card[data-tier="2"] .pk-banner { background: linear-gradient(120deg, #9fe63b 0%, #f4c752 100%); }
.pk-card[data-tier="3"] .pk-banner { background: linear-gradient(120deg, #f6c948 0%, #e39c00 100%); }
.pk-banner::before, .pk-banner::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, .18); pointer-events: none;
}
.pk-banner::before { width: 86px; height: 86px; right: -22px; top: -30px; }
.pk-banner::after  { width: 50px; height: 50px; right: 30px; bottom: -28px; border-width: 8px; }
.pk-name {
  position: relative; z-index: 1;
  font: 700 9px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; opacity: .68;
}
.pk-headline { position: relative; z-index: 1; font: 700 13px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.pk-headline b { font-size: 25px; font-weight: 800; letter-spacing: -.005em; }
.pk-tag {
  position: absolute; z-index: 1; top: 11px; right: 12px;
  font: 700 8px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .32); border-radius: 999px; padding: 4px 7px;
}
.pk-body {
  padding: 12px 15px 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2);
}
.pk-price {
  display: flex; align-items: baseline; gap: 7px;
  font: 800 20px/1 var(--font-display); color: #fff;
}
.pk-price span {
  font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.pk-bonus { font: 700 11px/1 var(--font-mono); letter-spacing: .02em; color: var(--grass); }
.pk-never { font: 400 11px/1 var(--font-mono); color: var(--muted); }
.pk-buy {
  width: 100%; margin-top: 4px; padding: 10px 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px;
  background: #21252c; color: #eef1f4;
  font: 700 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  transition: background .14s, border-color .14s;
}
.pk-buy:hover { background: #2b3039; border-color: var(--grass); }
.pk-how {
  margin-top: 1px; padding: 10px 12px; text-align: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
  font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: color .14s, border-color .14s;
}
.pk-how:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }

@media (max-width: 780px) {
  .pk-col {
    flex-basis: 100%;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  }
  .pk-col-head, .pk-how { grid-column: 1 / -1; }
}

/* multi-sport Single tier: one-of-five sport picker */
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.st-chip {
  font: 700 11px var(--font-display); letter-spacing: .06em;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.st-chip:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }
.st-chip.on {
  color: #08160b; border-color: var(--grass); background: var(--grass);
}
.st-chip.on::before { content: "✓ "; }
.st-single .lp-plan-price .st-price { transition: color .12s; }
.lp-plan .lp-buy.nudge, .lp-plan .buy.nudge {
  background: linear-gradient(90deg, #f4c752, #e0a100); color: #241c00;
}
.lp-plan.st-all .lp-plan-price { color: var(--gold, #f4c752); }
.lp-bonus {
  display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 999px;
  font: 700 10px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--accent-ink); background: var(--grass);
}
.lp-plan.gold .lp-bonus { background: #f4c752; }
.lp-strike {
  margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400;
  text-decoration: line-through; text-decoration-color: rgba(154,165,182,.6);
}
.lp-plan-price { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }

/* account modal reuses the landing pricing grid, stacked for the narrow modal */
.acct-plans { margin: 6px 0 4px; flex-direction: column; }
.acct-plans .lp-plans-main { width: 100%; }
.acct-plans .pk-col {
  flex-basis: auto; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.acct-plans .pk-col-head, .acct-plans .pk-how { grid-column: 1 / -1; }
.acct-plans .lp-plan { padding: 16px; }
.acct-plans .lp-plan.current { border-color: var(--grass); }
.acct-plans .lp-plan.current::after {
  content: "Current"; position: absolute; top: -10px; right: 14px;
  font: 700 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--grass); border-radius: 999px; padding: 5px 8px;
}

/* ---- v0.10.2 subscription perks ---- */
.lp-perks { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 7px; }
.lp-perks li {
  position: relative; padding-left: 20px; color: var(--text);
  font-size: 12.5px; line-height: 1.4;
}
.lp-perks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--grass); font-weight: 800;
}
.lp-plan.gold .lp-perks li::before { color: #f4c752; }
.lp-plan .lp-bonus { margin: 6px 0 2px; }

/* ---- v0.10.2 landing: track-record proof ---- */
.lp-proof .grid-3 { margin: 6px 0 14px; }
.lp-mkts { display: grid; gap: 6px; margin: 4px 0 12px; }
.lp-mkt {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: baseline;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); font-size: 13px;
}
.lp-mkt > span:first-child { color: var(--text); font-weight: 600; }
.lp-mkt b { color: var(--grass); font: 700 14px var(--font-display); }
@media (max-width: 560px) {
  .lp-mkt { grid-template-columns: 1fr auto; row-gap: 3px; }
}

/* locked (members-only) model rows */
.opt-row.locked { opacity: .6; }
.opt-row.locked:hover { border-color: transparent; background: none; cursor: default; }
.ctx-menu button[data-locked] { opacity: .72; }
.ctx-menu button[data-locked] .opt-note { color: var(--grass); }

/* ================================================================ v0.11 multi-sport */
.sport-switch{
  display:flex; flex-wrap:wrap; gap:5px; margin:0 0 12px; padding:5px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  scrollbar-width:none;
}
.sport-switch::-webkit-scrollbar{ display:none; }
.sport-switch .sp-btn{
  flex:1 1 28%; display:flex; align-items:center; gap:4px; justify-content:center;
  min-width:46px; padding:7px 6px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--muted); cursor:pointer; font-family:var(--font-mono);
  font-weight:600; font-size:11px; letter-spacing:.04em; transition:background .15s, color .15s, border-color .15s;
}
.sport-switch .sp-btn:hover:not(.on){ background:var(--surface-3); color:var(--text); }
.sport-switch .sp-btn.on{
  color:var(--sa); border-color:color-mix(in srgb, var(--sa) 45%, transparent);
  background:color-mix(in srgb, var(--sa) 12%, transparent);
}
.sport-switch .sp-code{ color:inherit; }
.sport-switch .sp-btn:not(.on) .sp-code{ color:var(--text); }
.sport-switch .sp-soon{
  font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  border:1px solid var(--line); border-radius:999px; padding:1px 4px;
}

.coming-soon{
  max-width:640px; border:1px solid var(--line); border-left:3px solid var(--sa, var(--grass));
  border-radius:16px; padding:22px 24px; background:var(--surface-2);
}
.coming-soon .cs-badge{
  display:inline-block; font:700 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--sa, var(--grass)); background:color-mix(in srgb, var(--sa, var(--grass)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--sa, var(--grass)) 30%, transparent);
  border-radius:999px; padding:5px 9px; margin-bottom:12px;
}
.coming-soon .cs-tag{ margin:0 0 16px; font-size:14.5px; color:var(--text); }
.coming-soon .cs-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; }
.coming-soon .cs-cols h4{ margin:0 0 7px; font:700 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.coming-soon .cs-cols ul{ margin:0; padding-left:16px; display:grid; gap:4px; }
.coming-soon .cs-cols li{ font-size:13px; color:var(--text); }
.coming-soon .cs-cols li::marker{ color:var(--sa, var(--grass)); }
.coming-soon .cs-meta{ display:grid; gap:8px; margin-bottom:18px; padding:12px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.coming-soon .cs-meta > div{ display:grid; grid-template-columns:64px 1fr; gap:10px; font-size:12.5px; }
.coming-soon .cs-meta .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.coming-soon .cs-meta span:last-child{ color:var(--muted); }
.coming-soon .cs-foot{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.coming-soon .cs-foot .primary, .coming-soon .cs-foot .ghost-btn{ padding:9px 15px; font-size:13px; text-decoration:none; }
.coming-soon .cs-note{ margin:0; font-size:11.5px; color:var(--faint); }
@media (max-width:560px){ .coming-soon .cs-cols{ grid-template-columns:1fr; } }

/* ---- v0.11 NHL board ---- */
.tablewrap{ overflow-x:auto; }
.tiny{ font-size:11px; color:var(--muted); }
td .tiny, .props-t td.tiny{ display:inline; margin-left:6px; }
.props-t td.l .tiny{ display:block; margin:2px 0 0; }
.view-head.sub{ padding:14px 16px 8px; align-items:baseline; }
.view-head.sub h3{ font:700 15px var(--font-display); margin:0; }
.nhl-card{ padding:16px 18px 18px; }
.nhl-h{ display:flex; align-items:center; gap:10px; font:700 20px var(--font-display); letter-spacing:.03em; margin-bottom:14px; }
.nhl-h .at{ color:var(--faint); font-weight:500; }
.nhl-h .tiny{ margin-left:auto; }
.nhl-pl{ margin:12px 0 4px; padding:9px 12px; background:var(--surface-2); border-radius:8px; }
.nhl-scorers{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:12px 0 6px; }
.nhl-scorers .pill{ font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 9px; }
.nhl-scorers .pill b{ color:var(--grass-bright); }

/* ================================================================ support */
/* The launcher and its panel. z-index sits above the page (40s) and below
   the modal stack (60) and toasts (70) on purpose: a sign-in dialog or an
   error toast raised from inside the widget must still land on top of it. */
/* --sup-bottom is set from support.js, and ONLY when the chat composer is
   on screen and sharing this corner (narrow layouts): it is then the measured
   distance from the viewport floor to the composer's top edge. Measured
   rather than guessed, because the composer autogrows as you type and does
   not sit flush against the bottom - the disclaimer footer is below it - so
   any constant is wrong for some combination of the two. Unset everywhere
   else, which is what makes the fallback here the normal case. */
.sup { position: fixed; right: 18px; z-index: 50; bottom: var(--sup-bottom, 18px); }

.sup-launch {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text); cursor: pointer;
  box-shadow: var(--elev-2);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.sup-launch:hover { border-color: var(--grass); transform: translateY(-1px); }
.sup-launch:focus-visible { outline: none; box-shadow: var(--ring), var(--elev-2); }
.sup-launch .ico-close { display: none; }
.sup.on .sup-launch .ico-open { display: none; }
.sup.on .sup-launch .ico-close { display: block; }
.sup.on .sup-launch { border-color: var(--grass); }

.sup-dot {
  position: absolute; top: 9px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grass); box-shadow: 0 0 0 2px var(--surface);
}

.sup-panel {
  position: absolute; right: 0; bottom: 64px;
  width: 366px; max-width: calc(100vw - 32px);
  /* The launcher is not always 18px off the floor - on a narrow chat view it
     is pushed up above the composer (--sup-bottom) - and the panel sits on
     top of the launcher, so its ceiling has to move with it or a tall
     composer pushes the panel's header off the top of the screen. */
  height: 540px;
  max-height: calc(100vh - var(--sup-bottom, 18px) - 92px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); box-shadow: var(--elev-2);
  animation: supIn .16s ease-out;
}
@keyframes supIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sup-panel { animation: none; } }

.sup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.sup-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-display); letter-spacing: .04em;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--grass-bright), var(--grass));
}
.sup-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.sup-title span {
  display: block; font-weight: 400; font-size: 11.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.sup-icon:hover { background: var(--surface-3); color: var(--text); }

.sup-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  gap: 10px; padding: 12px; overflow-y: auto;
}
.sup-empty { justify-content: center; gap: 16px; padding: 22px; }
.sup-empty p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.sup-btn {
  flex: none; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; font: 600 13.5px var(--font-body);
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--grass-bright), var(--grass));
}
.sup-btn:hover { filter: brightness(1.06); }
.sup-btn[disabled] { opacity: .6; cursor: default; filter: none; }

.sup-list { display: flex; flex-direction: column; gap: 6px; }
.sup-none { margin: 4px 2px; color: var(--faint); font-size: 13px; }
.sup-row {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
}
.sup-row:hover { border-color: var(--grass); }
.sup-row-top { display: flex; align-items: center; gap: 8px; }
.sup-subj {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-new { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--grass); }
.sup-row-meta { display: flex; align-items: center; gap: 8px; }
.sup-ago { color: var(--faint); font-size: 11px; }
.sup-pill {
  padding: 2px 8px; border-radius: 999px;
  font: 600 10.5px/1.6 var(--font-body); letter-spacing: .02em;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-3);
}
.sup-pill.esc { color: var(--clay); border-color: rgba(255,180,61,.35); }
.sup-pill.open { color: var(--grass); border-color: rgba(83,211,55,.3); }

.sup-form { display: flex; flex-direction: column; gap: 6px; }
.sup-label { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.sup-input {
  width: 100%; font: 13.5px/1.5 var(--font-body); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; resize: none;
}
.sup-input:focus { outline: none; border-color: var(--grass); box-shadow: var(--ring); }
.sup-area { min-height: 110px; resize: vertical; }

.sup-thread { gap: 0; padding: 0; }
.sup-msgs {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
}
.sup-msg { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.sup-msg.you { align-self: flex-end; align-items: flex-end; }
.sup-who { font-size: 10.5px; color: var(--faint); padding-left: 2px; }
.sup-bub {
  padding: 8px 11px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--line-soft); background: var(--surface-2);
}
.sup-msg.you .sup-bub {
  border-color: transparent; color: var(--accent-ink);
  background: linear-gradient(180deg, var(--grass-bright), var(--grass));
}
.sup-msg.team .sup-bub { border-color: rgba(255,180,61,.35); }
.sup-note {
  align-self: center; text-align: center; max-width: 92%;
  font-size: 11.5px; line-height: 1.5; color: var(--faint);
  padding: 6px 10px; border-radius: 10px; background: var(--surface-2);
}
.sup-typing { display: flex; gap: 4px; align-items: center; padding: 12px; }
.sup-typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--faint);
  animation: supBlink 1.1s infinite ease-in-out;
}
.sup-typing i:nth-child(2) { animation-delay: .18s; }
.sup-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes supBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.sup-foot {
  margin: 0; padding: 0 12px 8px; font-size: 11.5px; line-height: 1.5;
  color: var(--faint);
}
.sup-reply {
  flex: none; display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--line-soft);
}
.sup-send {
  flex: none; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid transparent;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--grass-bright), var(--grass));
}
.sup-send[disabled] { opacity: .5; cursor: default; }
.sup-acts {
  flex: none; display: flex; gap: 14px; justify-content: flex-end;
  padding: 0 12px 10px;
}
.sup-link {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: 500 11.5px var(--font-body); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.sup-link:hover { color: var(--text); }

@media (max-width: 620px) {
  .sup { right: 12px; bottom: var(--sup-bottom, 14px); }
  .sup-panel { bottom: 62px; }
}

/* ---- attachments (backend/web/uploads.js) -------------------------------
   Shared by the chat composer and the support widget, so the two cannot look
   like different features. Sized in rems off the existing scale rather than
   fixed pixels, so a reader who has scaled their text gets scaled chips. */
.up-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 0 0 6px;
}
/* No `.on` gate on the chips. The support widget's row is rebuilt from
   innerHTML and carries the attach button, so it always renders; the chat
   composer's row holds only the chips and is toggled with `hidden`. A rule
   that hid the chips unless a class was present made the chat composer
   upload a file successfully and then show nothing at all. */
.up-chips {
  display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0;
}
.up-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2, rgba(255,255,255,.03));
  max-width: 100%;
}
.up-chip.up-img { padding: 0; overflow: hidden; }
.up-chip.up-img img {
  display: block; width: 56px; height: 56px; object-fit: cover;
}
.up-chip.up-file { padding: 6px 8px; font-size: 12px; }
.up-chip .up-name {
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--chalk);
}
.up-chip .up-size { color: var(--muted); font-size: 11px; }
.up-x {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; line-height: 16px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--chalk);
  font-size: 13px; cursor: pointer;
}
.up-x:hover { border-color: var(--grass); color: var(--grass); }
.up-busy { font-size: 12px; color: var(--muted); align-self: center; }
.up-add {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.up-add[disabled] { opacity: .45; cursor: default; }
/* The file input exists only to be clicked programmatically. It is kept in
   the document (rather than created per click) so repeated picks work, and
   pulled out of the layout and the tab order rather than display:none, which
   in some browsers stops .click() opening the dialog at all. */
.up-input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; left: -9999px;
}
/* What a sent message shows. */
.up-sent-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.up-sent {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit; max-width: 100%;
}
.up-sent.up-img img {
  display: block; max-width: 220px; max-height: 220px;
  width: auto; height: auto; object-fit: contain;
}
.up-sent.up-file { padding: 6px 9px; font-size: 12px; }
.up-sent.up-file:hover { border-color: var(--grass); }
.up-sent .up-name { color: var(--chalk); }
.up-sent .up-size { color: var(--muted); font-size: 11px; }

/* Drag-over feedback, on both composers. */
.composer.drop .composer-inner,
.sup-panel.sup-drop {
  border-color: var(--grass);
  box-shadow: 0 0 0 3px rgba(83, 211, 55, .15);
}

@media (max-width: 620px) {
  .up-chip.up-img img { width: 46px; height: 46px; }
  .up-sent.up-img img { max-width: 160px; max-height: 160px; }
}

/* ---- prop boards: a row the model leans on vs one shown at the rate ------
   `lean` on a board row means the line is the one the track record keeps
   (backend/predict/lines.py). A row without it is priced honestly under the
   floor and is dimmed rather than hidden - the projection is still useful. */
.props-t tr.nolean td { opacity: .62; }
.lean-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: #08160b; background: var(--grass);
  vertical-align: 1px;
}

/* ---- admin: the two sides of one account ---------------------------------- */
.money-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  margin: 10px 0 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
}
.money-row .bal-n.neg { color: #e5484d; }
.money-row .bal-n.pos { color: var(--grass); }