/* ============ Tokens ============ */
:root {
  --bg: #060a11;
  --surface: #0e1520;
  --surface-2: #142030;
  --surface-3: #1b293c;
  --border: #1c2839;
  --border-strong: #2a3a52;
  --text: #eef3fb;
  --text-2: #a8b5ca;
  --muted: #6f7f98;
  --brand: #34d399;            /* emerald */
  --brand-2: #22d3ee;          /* cyan */
  --grad: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
  --accent: #38bdf8;           /* projection, links, focus */
  --accent-soft: rgba(56, 189, 248, .14);
  --over: #60a5fa;
  --over-soft: rgba(96, 165, 250, .16);
  --under: #c084fc;
  --under-soft: rgba(192, 132, 252, .16);
  --good: #34d399;             /* value / cleared line */
  --good-strong: #10b981;
  --good-soft: rgba(var(--brand-rgb), .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .14);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, .13);
  --bar-miss: #2a3850;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -20px rgba(0,0,0,.8);
  --glow: 0 0 0 1px rgba(var(--brand-rgb), .35), 0 12px 40px -12px rgba(var(--brand-rgb), .35);
  --display: Outfit, Inter, system-ui, sans-serif;
  --nav-h: 66px;
  --brand-rgb: 52, 211, 153;     /* the brand colours as r,g,b, for tints */
  --brand2-rgb: 34, 211, 238;
  --on-brand: #04261d;           /* text on the brand gradient */
  --miss-top: #3a4a66;           /* chart bars that missed the line */
  --miss-bottom: #1f2a3d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11', 'ss01'; }
body { min-height: 100vh; background:
  radial-gradient(900px 480px at 85% -120px, rgba(var(--brand2-rgb), .10), transparent 65%),
  radial-gradient(800px 420px at 5% -80px, rgba(var(--brand-rgb), .09), transparent 60%),
  radial-gradient(900px 600px at 50% 120%, rgba(139, 92, 246, .06), transparent 60%),
  var(--bg); background-attachment: fixed; }
::selection { background: rgba(var(--brand-rgb), .35); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num, .tnum { font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 18px; height: 18px; flex: none; }
h1 { font-family: var(--display); font-size: 34px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 8px; font-weight: 800; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-family: var(--display); font-size: 21px; letter-spacing: -.01em; margin: 0 0 6px; font-weight: 700; }
h3 { font-size: 16px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
.lede { color: var(--text-2); margin: 0; max-width: 620px; }
.note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

/* ============ Top bar ============ */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(6, 10, 17, .72); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); }
.topbar-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px 24px 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text); text-decoration: none !important; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--grad); display: grid; place-items: center; color: #042f25; box-shadow: 0 6px 20px -6px rgba(var(--brand2-rgb), .6); }
.brand-mark svg { width: 18px; height: 18px; stroke-width: 2.6; }
/* Section tabs: one centered group of pills under the logo */
.tabs { display: flex; width: fit-content; max-width: calc(100% - 32px); margin: 2px auto 12px; gap: 4px; padding: 5px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--text-2); font-weight: 600; font-size: 14px; padding: 8px 16px; cursor: pointer; white-space: nowrap; border-radius: 11px; transition: color .15s, background .15s, box-shadow .15s; }
.tabs button svg { width: 17px; height: 17px; opacity: .7; transition: opacity .15s, color .15s; }
.tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.tabs button:hover svg { opacity: 1; }
.tabs button[aria-selected="true"] { color: var(--text); background: linear-gradient(180deg, rgba(var(--brand-rgb), .16), rgba(var(--brand2-rgb), .08)); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35), 0 6px 18px -10px rgba(var(--brand2-rgb), .7); }
.tabs button[aria-selected="true"] svg { opacity: 1; color: var(--brand); }
/* Fantasy: same group, a touch of gold */
.tabs .fx-tab svg { color: #fbbf24; opacity: .9; }
.tabs .fx-tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(251, 191, 36, .18), rgba(245, 158, 11, .07)); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .4), 0 6px 18px -10px rgba(251, 191, 36, .7); }
.tabs .fx-tab[aria-selected="true"] svg { color: #fbbf24; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--good); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2), 0 0 10px rgba(var(--brand-rgb), .8); }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; font-weight: 700; font-size: 15px; }
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }
/* Light/dark switch: shows the moon in the light design (tap for dark), the sun in the dark one */
#theme-btn .i-sun { display: none; }
:root:not([data-theme="light"]) #theme-btn .i-sun { display: block; }
:root:not([data-theme="light"]) #theme-btn .i-moon { display: none; }

/* ============ Layout ============ */
main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 40px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 120px), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stat { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; min-width: 104px; }
.stat b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat:last-child b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 12px; }

/* ============ Controls ============ */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tool-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 14px; cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--grad); color: var(--on-brand); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(var(--brand2-rgb), .7); }
select, input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; min-width: 0; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9bdc7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; padding: 9px 14px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none !important; }
.btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn.primary { background: var(--grad); color: var(--on-brand); border-color: transparent; box-shadow: 0 8px 22px -10px rgba(var(--brand2-rgb), .8); }
.btn.primary:hover { filter: brightness(1.08); }
.btn .count { background: var(--grad); color: var(--on-brand); border-radius: 999px; font-size: 11px; padding: 0 7px; line-height: 18px; }
.filter-panel { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch { align-items: flex-start; }
.switch > span { margin-top: 2px; }
.sw-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.sw-text b { color: var(--text); font-weight: 600; }
.sw-text small { color: var(--muted); font-size: 12.5px; }
.switch span { width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; flex: none; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background .15s; }
.switch input:checked + span { background: var(--grad); border-color: transparent; }
.switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.seg button { background: none; border: 0; color: var(--text-2); padding: 7px 16px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); color: var(--text); box-shadow: 0 -2px 0 0 var(--brand) inset, 0 2px 8px rgba(0,0,0,.35); }

/* ============ Notices / empty states ============ */
.empty-state { text-align: center; padding: 44px 24px; }
.empty-state .big-ico { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px; display: grid; place-items: center; background: var(--grad); color: var(--on-brand); box-shadow: 0 16px 40px -14px rgba(var(--brand2-rgb), .7); }
.empty-state .big-ico svg { width: 28px; height: 28px; }
.empty-state p { color: var(--text-2); max-width: 520px; margin: 6px auto; }
.empty-state .next { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--text-2); }
.empty-state .next b { color: var(--text); }
.empty-state .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.alert { background: var(--bad-soft); border: 1px solid rgba(255, 107, 107, .3); color: #ffc9c9; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.alert.warn { background: var(--warn-soft); border-color: rgba(251, 191, 36, .35); color: #fde68a; }

/* ============ Team badge & tags ============ */
.team { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; background: var(--tc, #333); color: var(--tf, #fff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.team.lg { height: 28px; min-width: 52px; font-size: 13px; border-radius: 8px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.tag.q { background: var(--warn-soft); color: var(--warn); }
.tag.d, .tag.out { background: var(--bad-soft); color: var(--bad); }
.tag.up { background: var(--good-soft); color: var(--good); }
.tag.weather { background: var(--accent-soft); color: #9cc2ff; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ============ Pick cards ============ */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pick-card { position: relative; overflow: hidden; background: radial-gradient(420px 160px at 100% 0%, var(--tint, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 140px), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; text-align: left; width: 100%; }
.pick-card:hover { border-color: rgba(var(--brand-rgb), .45); transform: translateY(-2px); box-shadow: var(--glow); }
.pick-card.r-strong { --tint: rgba(var(--brand-rgb), .16); }
.pick-card.r-strong::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.pick-card.r-good { --tint: rgba(var(--brand-rgb), .09); }
.pc-top { display: flex; gap: 12px; align-items: flex-start; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-3); flex: none; border: 2px solid var(--team-c, var(--border-strong)); box-shadow: 0 0 0 3px rgba(0,0,0,.25); }
.pc-who { min-width: 0; flex: 1; }
.pc-name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sub { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; margin-top: 3px; flex-wrap: wrap; }
.value-badge { flex: none; text-align: right; border-radius: 14px; padding: 7px 11px; background: var(--surface-2); min-width: 82px; border: 1px solid var(--border); }
.value-badge b { display: block; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.value-badge span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.value-badge.strong { background: linear-gradient(135deg, rgba(var(--brand-rgb), .28), rgba(var(--brand2-rgb), .18)); border-color: rgba(var(--brand-rgb), .45); }
.value-badge.strong span { color: #a7f3d0; }
.value-badge.strong b, .value-badge.good b { color: var(--good); }
.value-badge.good { background: var(--good-soft); border-color: rgba(var(--brand-rgb), .25); }
.value-badge.slight b { color: #a7f3d0; }
.value-badge.none b { color: var(--muted); }
.pc-pick { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.side { font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text); align-self: center; }
.side.over { background: var(--over-soft); color: #bfdbfe; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }
.side.under { background: var(--under-soft); color: #e9d5ff; box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .35); }
.pc-line { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pc-mk { color: var(--text-2); font-weight: 600; }
.pc-price { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; flex-wrap: wrap; }
.price { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.chance { display: grid; gap: 6px; }
.chance-bar { position: relative; height: 12px; border-radius: 999px; background: var(--surface-3); overflow: visible; }
.chance-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--bar-miss); }
.chance-bar i.ok { background: var(--grad); box-shadow: 0 0 14px rgba(var(--brand2-rgb), .45); }
.chance-bar b { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); }
.chance-legend { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); gap: 10px; }
.chance-legend strong { color: var(--text); font-weight: 700; }
.pc-facts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.fact { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 4px 9px; }
.fact b { color: var(--text); font-weight: 700; }
.spark { display: block; }
.spark .h { fill: var(--good); }
.spark .m { fill: var(--bar-miss); }
.spark .ln { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 2; }
.more-wrap { display: flex; justify-content: center; margin-top: 18px; }

/* ============ Sheet (dialog) ============ */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 12, .7); backdrop-filter: blur(6px); animation: fade .15s ease-out; }
.sheet-panel { position: relative; width: min(660px, calc(100vw - 32px)); max-height: min(88vh, 900px); overflow: auto; background: radial-gradient(600px 220px at 100% 0%, rgba(var(--brand2-rgb), .08), transparent 70%), var(--surface); border: 1px solid var(--border-strong); border-radius: 20px; padding: 22px 22px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: pop .18s ease-out; overscroll-behavior: contain; }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sheet h2 { margin-top: 2px; }
.sheet-section { margin-top: 20px; }
.sheet-section > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.summary-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text-2); margin-top: 14px; }
.summary-box b { color: var(--text); }
.book-list { display: grid; gap: 6px; }
.book-row { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.book-row.best { border-color: rgba(var(--brand-rgb), .5); background: linear-gradient(90deg, rgba(var(--brand-rgb), .16), rgba(var(--brand2-rgb), .06)); }
.price-check { display: flex; flex-direction: column; gap: 10px; }
.price-check input { font: inherit; font-size: 20px; font-weight: 700; width: 150px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.price-check input:focus { outline: none; border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.price-out { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); }
.price-out b { color: var(--text); }
.price-out .value-badge { flex: none; }
.price-warn { display: block; margin-top: 6px; color: #fbbf24; }
.book-row .listed-as { display: block; font-size: 12px; margin-top: 2px; }
.book-row .best-tag { font-size: 11px; font-weight: 700; color: var(--good); margin-left: 8px; text-transform: uppercase; letter-spacing: .05em; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kv div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.kv span { display: block; font-size: 12px; color: var(--muted); }
.kv small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.kv b { font-family: var(--display); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sheet-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.help h3 { margin-top: 18px; }
.help p, .help li { color: var(--text-2); }
.help dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 10px 0 0; }
.help dt { font-weight: 700; }
.help dd { margin: 0; color: var(--text-2); }

/* ============ Why / projection chain ============ */
.chain { display: grid; gap: 6px; }
.chain-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.chain-row .arrow { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.chain-row .arrow svg { width: 14px; height: 14px; stroke-width: 2.6; }
.chain-row.up .arrow { background: var(--good-soft); color: var(--good); }
.chain-row.dn .arrow { background: var(--bad-soft); color: var(--bad); }
.chain-row .what b { display: block; font-weight: 600; }
.chain-row .what span { color: var(--muted); font-size: 13px; }
.chain-row .f { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.chain-row.up .f { color: var(--good); }
.chain-row.dn .f { color: var(--bad); }
.chain-row.base, .chain-row.total { background: none; border: 1px dashed var(--border-strong); }
.chain-row.total { border: 1px solid rgba(var(--brand2-rgb), .45); background: linear-gradient(90deg, rgba(var(--brand-rgb), .14), rgba(var(--brand2-rgb), .08)); }
.chain-row.total .f { color: var(--text); font-family: var(--display); font-size: 20px; font-weight: 800; }
.chain-row.total .arrow { background: var(--grad); color: var(--on-brand); }

/* ============ Player page ============ */
.search-hero { text-align: center; padding: 26px 0 12px; }
.search-hero .lede { margin: 0 auto 18px; }
.search-hero.compact { text-align: left; padding: 0 0 18px; }
.search-hero.compact h1, .search-hero.compact .lede, .search-hero.compact .suggest { display: none; }
.ac { position: relative; max-width: 560px; margin: 0 auto; }
.search-hero.compact .ac { margin: 0; max-width: 420px; }
.ac input { width: 100%; padding: 14px 16px 14px 46px; font-size: 16px; border-radius: 14px; background: var(--surface); }
.search-hero.compact .ac input { padding: 10px 14px 10px 40px; font-size: 15px; border-radius: 12px; }
.search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-hero.compact .search-ico { left: 13px; }
.ac-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px; z-index: 25; max-height: 380px; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.5); text-align: left; }
.ac-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.ac-list li img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.ac-list li:hover, .ac-list li.active { background: var(--surface-3); }
.suggest { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.suggest .lbl { color: var(--muted); font-size: 13px; align-self: center; margin-right: 4px; }
.p-hero { position: relative; overflow: hidden; display: flex; gap: 20px; align-items: center; padding: 22px; margin-bottom: 16px; flex-wrap: wrap; background: radial-gradient(700px 260px at 0% 0%, var(--team-tint, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface); }
.p-hero::after { content: attr(data-team); position: absolute; right: -10px; bottom: -34px; font-family: var(--display); font-weight: 800; font-size: 150px; line-height: 1; color: rgba(255,255,255,.035); pointer-events: none; letter-spacing: -.04em; }
.p-hero img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 3px solid var(--team-c, var(--border-strong)); box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); }
.p-hero h1 { font-size: 34px; margin-bottom: 6px; }
.p-meta { display: flex; align-items: center; gap: 8px; color: var(--text-2); flex-wrap: wrap; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--text-2); }
.pill b { color: var(--text); }
.pill.warn { border-color: rgba(245, 185, 59, .45); background: var(--warn-soft); }
.pill.bad { border-color: rgba(255, 107, 107, .45); background: var(--bad-soft); }
.pill svg { width: 14px; height: 14px; }
.p-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.stepper { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 3px; }
.stepper button { width: 36px; height: 36px; border: 0; background: var(--surface-2); color: var(--text); border-radius: 9px; font-size: 20px; font-weight: 600; cursor: pointer; }
.stepper button:hover { background: var(--surface-3); }
.stepper input { width: 92px; text-align: center; border: 0; background: none; font-size: 18px; font-weight: 700; padding: 6px 4px; }
.stepper input:focus { box-shadow: none; }
.stepper .lbl { color: var(--muted); font-size: 12px; padding: 0 8px 0 10px; }
.book-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.book-chips .lbl { color: var(--muted); font-size: 13px; }
.verdict { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0; margin-bottom: 14px; overflow: hidden; }
.verdict > div { padding: 18px 20px; border-left: 1px solid var(--border); }
.verdict > div:first-child { border-left: 0; }
.verdict .lbl { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.verdict .big { font-family: var(--display); font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.verdict .big.over { color: var(--over); }
.verdict .big.under { color: var(--under); }
.verdict > div:first-child { background: radial-gradient(420px 180px at 0% 0%, var(--lean-tint, transparent), transparent 70%); }
.verdict .sub { color: var(--text-2); font-size: 13.5px; }
.split-bar { display: flex; height: 10px; gap: 2px; border-radius: 999px; overflow: hidden; margin-top: 12px; background: var(--surface-3); }
.split-bar i { background: linear-gradient(90deg, #3b82f6, var(--over)); border-radius: 999px 0 0 999px; }
.split-bar i + i { background: linear-gradient(90deg, var(--under), #a855f7); border-radius: 0 999px 999px 0; }
.split-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.dots { display: flex; gap: 4px; margin-top: 10px; }
.dots i { width: 14px; height: 14px; border-radius: 5px; background: var(--bar-miss); }
.dots i.h { background: var(--grad); box-shadow: 0 0 8px rgba(var(--brand-rgb), .45); }
.panel { padding: 18px 20px; margin-bottom: 14px; }
.panel > .sub, .panel-sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
details.panel > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
details.panel[open] > summary::after { transform: rotate(-135deg); }
details.panel[open] > summary { margin-bottom: 12px; }
details.panel > summary h3 { margin: 0; }
details.panel > summary .sub { color: var(--muted); font-size: 13px; font-weight: 400; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.dash { height: 0; border-top: 2px dashed var(--text-2); border-radius: 0; width: 16px; vertical-align: 3px; }
.legend i.proj { height: 3px; background: var(--accent); width: 16px; vertical-align: 3px; border-radius: 0; }
svg.chart { display: block; width: 100%; overflow: visible; }
.chart-wrap { width: 100%; min-height: 240px; }
svg.chart text { fill: var(--muted); stroke: none; font-size: 11px; font-family: Inter, sans-serif; }
svg.chart .grid-line { stroke: var(--border); stroke-width: 1; }
svg.chart .axis { stroke: var(--border-strong); stroke-width: 1; }
svg.chart .bar-hit { fill: url(#gHit); stroke: none; }
svg.chart .bar-miss { fill: url(#gMiss); stroke: none; }
svg.chart .old { opacity: .5; }
svg.chart .lbl-bg { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1; }
svg.chart .lbl-bg.proj-bg { fill: rgba(56, 189, 248, .18); stroke: rgba(56, 189, 248, .5); }
svg.chart text.lbl { fill: var(--text); font-weight: 700; font-size: 11.5px; }
svg.chart .line { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; }
svg.chart .proj { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(56, 189, 248, .6)); }
svg.chart .hit-area { fill: transparent; stroke: none; }
svg.chart g.bar:hover .b { filter: brightness(1.25); }
svg.chart .season-sep { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.depth { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; font-size: 14px; }
.depth h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .05em; }
.depth .row { display: flex; align-items: center; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
.depth .row .r { color: var(--muted); font-size: 12px; width: 32px; }
.depth .me { color: var(--good); font-weight: 700; }
.mini-list { display: grid; gap: 6px; }
.mini-pick { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.mini-pick:hover { border-color: var(--border-strong); }

/* ============ Tables ============ */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
.table-scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; text-transform: uppercase; letter-spacing: .05em; }
.grid th[data-k] { cursor: pointer; }
.grid th[data-k]:hover { color: var(--text); }
.grid th.sorted { color: var(--text); }
.grid th.sorted::after { content: ' ↓'; }
.grid th.sorted.asc::after { content: ' ↑'; }
.grid td { padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: rgba(var(--brand-rgb), .045); }
.num { text-align: right; }
.teamcell { display: flex; align-items: center; gap: 10px; }
.teamcell .nm { color: var(--text-2); }
td.heat { position: relative; }
.meter { position: relative; width: 110px; height: 8px; background: var(--surface-3); border-radius: 999px; display: inline-block; vertical-align: middle; margin-right: 10px; }
.meter .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--muted); border-radius: 2px; }
.meter .fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.meter .fill.soft { background: var(--grad); }
.meter .fill.tough { background: linear-gradient(90deg, #f43f5e, var(--bad)); }
.hit-mark { color: var(--good); font-weight: 700; }

/* ============ Games ============ */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; }
.game { position: relative; overflow: hidden; padding: 20px 18px 18px; background: radial-gradient(360px 140px at 0% 0%, var(--c1t, transparent), transparent 70%), radial-gradient(360px 140px at 100% 0%, var(--c2t, transparent), transparent 70%), var(--surface); }
.game::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c1, var(--brand)), var(--c2, var(--brand-2))); }
.game .hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.game .mu { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.game .mu .at { color: var(--muted); font-weight: 600; font-size: 14px; }
.game .when { color: var(--muted); font-size: 13px; text-align: right; }
.game .when b { color: var(--text-2); font-weight: 600; display: block; }
.wx { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; font-size: 14px; color: var(--text-2); }
.wx .wx-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.wx .wx-ico svg { width: 20px; height: 20px; }
.wx b { color: var(--text); }
.wx .fx { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.wx.hot { background: linear-gradient(90deg, rgba(56, 189, 248, .16), rgba(56, 189, 248, .05)); outline: 1px solid rgba(56, 189, 248, .4); }
.wx.hot .wx-ico { background: rgba(56, 189, 248, .25); color: #e0f2fe; }
.lines-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.game .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13.5px; }
.game h4 { margin: 12px 0 6px; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.game ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.game li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.game .none { color: var(--muted); }
.game .side-hd { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.traits { display: grid; gap: 3px; margin-top: 8px; color: var(--text-2); }
.calib { padding: 16px 20px; margin-top: 16px; }
.calib summary { cursor: pointer; font-weight: 600; }

/* ============ Footer, nav, tooltip ============ */
.foot { text-align: center; color: var(--text-2); font-size: 13px; padding: 24px 24px 36px; border-top: 1px solid var(--border); max-width: 1240px; margin: 0 auto; }
.foot p { margin: 4px 0; }
.bottom-nav { display: none; }
.tip { position: fixed; pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 10px; font-size: 13px; z-index: 70; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.tip b { font-size: 15px; }

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .tabs button { padding: 8px 11px; gap: 6px; font-size: 13.5px; }
  .games { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .topbar-in { padding: 10px 16px; gap: 10px; }
  .tabs { display: none; }
  .status-pill { font-size: 12px; padding: 5px 10px; }
  main { padding: 20px 16px 28px; }
  h1 { font-size: 27px; }
  .p-hero h1 { font-size: 26px; }
  .p-hero img { width: 72px; height: 72px; }
  .p-hero::after { font-size: 110px; }
  .verdict .big { font-size: 30px; }
  .page-head { margin-bottom: 14px; }
  .stat-row { width: 100%; }
  .stat { flex: 1; min-width: 0; padding: 8px 10px; }
  .stat b { font-size: 18px; }
  .picks { grid-template-columns: 1fr; gap: 12px; }
  .toolbar { gap: 10px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; width: calc(100% + 32px); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .tool-row { width: 100%; }
  .tool-row .select { flex: 1; min-width: 0; }
  .tool-row .select.book-pick { flex-basis: 100%; }
  .tool-row select { width: 100%; }
  .verdict { grid-template-columns: 1fr; }
  .verdict > div { border-left: 0; border-top: 1px solid var(--border); padding: 14px 16px; }
  .verdict > div:first-child { border-top: 0; }
  .game .cols { grid-template-columns: 1fr; gap: 4px; }
  .game .cols > div + div { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 12px; }
  .p-hero { padding: 14px; gap: 14px; }
  .panel { padding: 16px; }
  .kv { grid-template-columns: 1fr 1fr 1fr; }
  .kv b { font-size: 16px; }
  .sheet { align-items: flex-end; }
  .sheet-panel { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); animation: slide .2s ease-out; }
  @keyframes slide { from { transform: translateY(40px); opacity: .6; } }
  .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(8, 13, 21, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav button { background: none; border: 0; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; height: var(--nav-h); justify-content: center; cursor: pointer; }
  .bottom-nav button svg { width: 22px; height: 22px; }
  .bottom-nav button[aria-selected="true"] { color: var(--brand); }
  .bottom-nav button[aria-selected="true"] svg { filter: drop-shadow(0 0 6px rgba(var(--brand-rgb), .6)); }
  .foot { padding-bottom: 24px; }
  .tool-row .seg { flex-basis: 100%; }
  .tool-row .seg button { flex: 1; padding: 8px 6px; }
  .table-card .teamcell .nm { display: none; }
  .table-card .grid th, .table-card .grid td { padding: 10px 9px; }
  .def-table .meter { width: 54px; margin-right: 6px; }
  .def-table[data-rank="cur"] .c-prev, .def-table[data-rank="blend"] .c-prev, .def-table[data-rank="prev"] .c-blend { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Defense ranks */
.def-table td.main { font-size: 15px; font-weight: 800; color: var(--text); }
.def-table td.dim, .def-table th.dim { color: var(--muted); }
.def-table th.active { color: var(--text); }
.def-table th.active::after { content: ' ↓'; }
.def-table td.active-col { background: rgba(255, 255, 255, .025); }
.def-table tbody tr.team-row { cursor: pointer; }
.def-table .games-n { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }
.def-table .rk { color: var(--muted); font-size: 12px; }
.def-table .mu-txt { font-variant-numeric: tabular-nums; font-weight: 600; }
.def-table .mu-txt.soft { color: var(--good); }
.def-table .mu-txt.tough { color: var(--bad); }
.def-table tr.calc-row td { white-space: normal; background: var(--surface-2); padding: 14px 18px; }
.calc { display: grid; gap: 8px; font-size: 14px; color: var(--text-2); max-width: 820px; }
.calc b { color: var(--text); }
.calc .eq { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--surface-3); border-radius: 8px; padding: 8px 10px; color: var(--text); white-space: normal; }
.how { color: var(--text-2); font-size: 14px; display: grid; gap: 10px; margin-top: 12px; }
.how ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
/* Keep the worked example on screen when the table scrolls sideways */
.def-table tr.calc-row .calc { position: sticky; left: 18px; max-width: min(820px, calc(100vw - 80px)); }

/* Sortable column headers */
.th-sort { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.th-sort svg { width: 14px; height: 14px; opacity: .45; flex: none; }
.th-sort:hover { color: var(--text); }
.th-sort:hover svg { opacity: .9; }
th.num .th-sort { flex-direction: row-reverse; }
th.sorted-col { color: var(--text) !important; }
th.sorted-col .th-sort svg { opacity: 1; color: var(--brand); }
td.sorted-col { background: rgba(var(--brand-rgb), .04); }
.def-table th.active::after, .grid th.sorted::after, .grid th.sorted.asc::after { content: none; }

/* Line input: no native spinner arrows (we have − / + buttons) */
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.line-note { margin: -4px 0 16px; color: var(--text-2); font-size: 13.5px; display: flex; gap: 8px; align-items: flex-start; }
.line-note::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px rgba(var(--brand2-rgb), .6); }
.line-note b { color: var(--text); }

/* Sport switcher */
.sport-switch { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; }
.sport-switch button { border: 0; background: none; color: var(--text-2); font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.sport-switch button:hover { color: var(--text); }
.sport-switch button[aria-pressed="true"] { background: var(--grad); color: var(--on-brand); box-shadow: 0 4px 14px -6px rgba(var(--brand2-rgb), .7); }
@media (max-width: 760px) { .sport-switch button { padding: 5px 10px; font-size: 12px; } .brand span:last-child { display: none; } }

/* Track record */
.rec-section { margin-bottom: 22px; }
.rec-section > h2 { margin: 0 0 4px; }
.rec-section > .note { margin-bottom: 14px; }
.stat-row.big .stat { flex: 1; min-width: 120px; }
.stat b.pos { color: var(--good); }
.stat b.neg { color: var(--bad); }
.res { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.res.win { background: var(--good-soft); color: var(--good); }
.res.loss { background: var(--bad-soft); color: var(--bad); }
.res.push, .res.void { background: var(--surface-3); color: var(--text-2); }
.res.pending { background: var(--accent-soft); color: #9cd6ff; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
svg.line-chart { display: block; width: 100%; overflow: visible; }
svg.line-chart text { fill: var(--muted); stroke: none; font-size: 11px; font-family: Inter, sans-serif; }
svg.line-chart .grid-line { stroke: var(--border); stroke-width: 1; }
svg.line-chart .zero { stroke: var(--border-strong); stroke-width: 1.5; }
svg.line-chart .ln { stroke: var(--brand); stroke-width: 2.5; fill: none; }
svg.line-chart .area { fill: url(#gArea); stroke: none; }
svg.line-chart .pt { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
svg.line-chart .hit { fill: transparent; stroke: none; }
.big-verdict { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

/* Player chart: the last 10 games (what the "went over" box counts) and games with 0 */
.chart .last10 { fill: rgba(94, 234, 212, .06); stroke: rgba(94, 234, 212, .22); stroke-dasharray: 4 4; }
.chart .last10-lbl { fill: #5eead4; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.chart .zero { fill: #3a4a66; }

/* Local test builds (made-up odds) */
#update-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 900; display: flex; gap: 10px; align-items: center; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb), .5); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 14px 40px -12px rgba(0,0,0,.8); white-space: nowrap; }
#update-banner b { color: var(--good); }
@media (max-width: 760px) { #update-banner { bottom: calc(84px + env(safe-area-inset-bottom)); font-size: 13.5px; } }
#test-banner { position: sticky; top: 0; z-index: 1000; background: #dc2626; color: #fff; font-weight: 800; text-align: center; padding: 10px 16px; letter-spacing: .02em; }

/* ============ Chance vs break-even (pick cards and details) ============ */
.oc { display: grid; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.oc-row { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.oc-lbl { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.oc-row b { text-align: right; font-family: var(--display); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.oc-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.oc-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
.oc-fill.need { background: linear-gradient(90deg, #475569, #64748b); }
.oc.good .oc-fill.win { background: var(--grad); box-shadow: 0 0 12px rgba(var(--brand2-rgb), .45); }
.oc.good .oc-row:first-child b { color: var(--good); }
.oc.bad .oc-fill.win { background: linear-gradient(90deg, #be123c, var(--bad)); }
.oc.bad .oc-row:first-child b { color: var(--bad); }
.oc.research .oc-fill.win { background: #7c3aed; }
.oc.research .oc-row:first-child b { color: #6d28d9; }
:root:not([data-theme="light"]) .oc.research .oc-row:first-child b { color: #c4b5fd; }
.oc-say { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.oc-say b { color: var(--text); }
.oc.big { margin-top: 14px; padding: 14px 16px; }
.oc.big .oc-row { grid-template-columns: 118px 1fr 52px; font-size: 14px; }
.oc.big .oc-row b { font-size: 20px; }
.oc.big .oc-track { height: 12px; }
.oc.big .oc-say { font-size: 13.5px; }
.mini-dots { display: inline-flex; gap: 3px; }
.mini-dots i { width: 8px; height: 8px; border-radius: 3px; background: var(--bar-miss); }
.mini-dots i.h { background: var(--grad); box-shadow: 0 0 6px rgba(var(--brand-rgb), .5); }

/* Small phones: keep the header on one line (status shows as a dot; details on tap/hover) */
@media (max-width: 480px) {
  .topbar-in { gap: 8px; padding: 10px 12px; }
  .status-pill { padding: 8px; }
  .status-pill .st-txt { display: none; }
  .sport-switch button { padding: 5px 8px; }
  .oc-row { grid-template-columns: 96px 1fr 40px; gap: 8px; }
  .oc.big .oc-row { grid-template-columns: 100px 1fr 46px; }
}

/* Inline "How it works" link and fold-away explanations */
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.lede b.grad-text { font-weight: 800; }
details.explain { margin: 10px 0 0; font-size: 13.5px; color: var(--text-2); }
details.explain summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.explain summary::-webkit-details-marker { display: none; }
details.explain summary::before { content: '?'; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
details.explain p { margin: 8px 0 0; max-width: 640px; }

/* Details sheet: verdict line and fair odds */
.verdict-line { display: grid; gap: 2px; }
.verdict-line .vl-head { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--text); }
.verdict-line.good { border-color: rgba(var(--brand-rgb), .45); background: linear-gradient(135deg, rgba(var(--brand-rgb), .16), rgba(var(--brand2-rgb), .06)); }
.verdict-line.good .vl-head { color: var(--good); }
.oc-cap { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.oc-cap b { color: var(--text-2); }
.oc-cap + .oc.big { margin-top: 8px; }
.fair-row { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; margin-top: 10px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 13.5px; color: var(--text-2); }
.fair-row b { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--text); }
.fair-row small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 480px) { .fair-row { grid-template-columns: auto 1fr; } .fair-row small { grid-column: 1 / -1; } }

/* ============ Fantasy start/sit ============ */
.fx-list { display: grid; gap: 8px; }
.fx-row { display: grid; grid-template-columns: 52px 44px 1fr 150px 104px; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; transition: border-color .15s, transform .15s; }
.fx-row:hover { border-color: rgba(var(--brand-rgb), .45); transform: translateY(-1px); }
.fx-row .avatar { width: 44px; height: 44px; }
.fx-rank b { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--text-2); }
.fx-who { min-width: 0; display: grid; gap: 4px; }
.fx-name { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-who .tags { gap: 4px; }
.fx-proj { display: grid; gap: 3px; text-align: right; }
.fx-proj b { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.fx-proj small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fx-range { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--surface-3); margin-top: 3px; }
.fx-range .rg { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--brand-rgb), .45), rgba(var(--brand2-rgb), .6)); }
.fx-range .mid { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; background: #fff; }
.fx-tier { justify-self: end; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.fx-tier.t0 { background: var(--grad); color: var(--on-brand); box-shadow: 0 6px 16px -8px rgba(var(--brand2-rgb), .8); }
.fx-tier.t1 { background: var(--good-soft); color: var(--good); }
.fx-tier.t2 { background: var(--warn-soft); color: var(--warn); }
.fx-tier.t3 { background: var(--surface-3); color: var(--muted); }
.fx-row.tier-0 { border-color: rgba(var(--brand-rgb), .3); }
/* Who should I start */
.compare-card { margin-bottom: 18px; background: radial-gradient(520px 200px at 100% 0%, rgba(var(--brand-rgb), .10), transparent 70%), var(--surface); }
.cmp-ac { max-width: 460px; margin: 12px 0 0; }
.cmp-ac input { width: 100%; padding: 11px 14px 11px 42px; border-radius: 12px; }
.cmp-ac .search-ico { left: 14px; }
@media (max-width: 760px) {
  .fx-row { grid-template-columns: 40px 1fr auto; grid-template-areas: "av who proj" "av tags tier"; row-gap: 6px; padding: 12px; }
  .fx-row .fx-rank { display: none; }
  .fx-row .avatar { grid-area: av; width: 40px; height: 40px; align-self: start; }
  .fx-who { grid-area: who; }
  .fx-who .tags { display: none; }
  .fx-proj { grid-area: proj; }
  .fx-proj .fx-range { width: 96px; justify-self: end; }
  .fx-tier { grid-area: tier; font-size: 11px; padding: 4px 8px; }
  body[data-nav-count="7"] .bottom-nav button { font-size: 10px; }
  body[data-nav-count="7"] .bottom-nav button svg { width: 20px; height: 20px; }
}
.fx-rk-m { display: none; color: var(--muted); font-weight: 700; }
.fx-rank-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 4px; }
.fx-rank-top .chips { margin: 0; }
.ros-row { cursor: default; }
.ros-row:hover { transform: none; }
.ros-src { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .fx-rk-m { display: inline; } }
.fx-parts td, .fx-parts th { white-space: normal; }
.fx-parts td small.src { display: block; font-size: 11.5px; color: var(--muted); }
.fx-parts td small.src.ln { color: var(--good); }
.fx-parts tr.tot td { border-top: 1px solid var(--border-strong); font-weight: 700; }
.fx-parts tr.tot b { font-family: var(--display); font-size: 17px; }

/* Fantasy: view switch + scoring */
.fx-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin: 4px 0 14px; }
.fx-view button { display: inline-flex; align-items: center; gap: 7px; }
.fx-view .count { background: var(--grad); color: var(--on-brand); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 0 7px; line-height: 18px; }
#fx-pos { margin-bottom: 6px; }
.warn-txt { color: var(--warn); font-weight: 600; }
/* Compare: chips of the picked players */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmp-chips:empty { display: none; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); font-weight: 600; font-size: 14px; }
.cmp-chip > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.cmp-chip .muted { font-weight: 500; font-size: 12.5px; }
.cmp-chip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--text-2); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.cmp-chip button:hover { background: var(--bad-soft); color: var(--bad); }
/* Compare: the verdict and the reasons */
.cmp-verdict-card { margin-bottom: 14px; padding: 18px 20px; border-color: rgba(var(--brand-rgb), .4); background: radial-gradient(600px 220px at 0% 0%, rgba(var(--brand-rgb), .14), transparent 70%), var(--surface); }
.cmp-verdict-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.cmp-verdict-head .avatar { width: 64px; height: 64px; flex: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .45); }
.cmp-verdict-head h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.cmp-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--good); }
.cmp-sub { color: var(--text-2); font-size: 14.5px; margin-top: 3px; }
.cmp-risk { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 600; line-height: 1.45; }
.cmp-verdict-card h4, .take h4 { margin: 16px 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.why li { position: relative; padding: 9px 12px 9px 36px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.why li::before { position: absolute; left: 11px; top: 9px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.why li.pro::before { content: '✓'; background: var(--good-soft); color: var(--good); }
.why li.con::before { content: '+'; background: var(--surface-3); color: var(--text-2); }
.why li.info::before { content: 'i'; background: var(--surface-3); color: var(--accent); font-style: italic; }
/* Compare: side-by-side table */
.cmp-table-card { padding: 0; margin-bottom: 14px; overflow: hidden; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.cmp-table thead th { position: sticky; top: 0; background: var(--surface-2); padding: 14px 10px; vertical-align: top; }
.cmp-table tbody th { text-align: left; font-weight: 600; color: var(--text-2); min-width: 150px; }
.cmp-table tbody th small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.cmp-table td { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cmp-table td.best { color: var(--good); font-weight: 800; background: rgba(var(--brand-rgb), .07); }
.cmp-table tr.sec th { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; }
.cmp-col { display: grid; justify-items: center; gap: 4px; min-width: 110px; }
.cmp-col .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 3px var(--c); }
.cmp-col b { font-size: 14.5px; line-height: 1.2; }
.cmp-col .pc-sub { justify-content: center; font-size: 12px; font-weight: 500; }
.cmp-foot { margin: 0; padding: 10px 14px 12px; }
.cmp-mix { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cmp-table td small.pr { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.cmp-table td.best small.pr { color: var(--good); opacity: .85; }
.cmp-chart { width: 100%; height: auto; }
.cmp-chart text { fill: var(--muted); font-size: 12.5px; }
.cmp-chart .grid-line { stroke: var(--border); }
/* Player sheet: week-by-week bars and usage */
.wk-bars { display: flex; gap: 6px; align-items: flex-end; height: 120px; padding-top: 16px; }
.wk { flex: 1; max-width: 46px; height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; position: relative; }
.wk i { align-self: end; width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--accent), var(--brand)); }
.wk b { position: absolute; top: -16px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wk span { font-size: 11px; color: var(--muted); margin-top: 4px; }
.usage-kv { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 760px) {
  .fx-top { justify-content: stretch; }
  .fx-top .seg { width: 100%; }
  .fx-top .seg button { flex: 1; padding: 8px 6px; font-size: 13.5px; justify-content: center; }
  .cmp-verdict-card { padding: 16px; }
  .cmp-verdict-head .avatar { width: 52px; height: 52px; }
  .cmp-verdict-head h2 { font-size: 22px; }
  .cmp-table { font-size: 13px; }
  .cmp-table th, .cmp-table td { padding: 8px 8px; }
  .cmp-table tbody th { min-width: 118px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
  .cmp-table tr.sec th { position: static; }
  .cmp-col { min-width: 92px; }
  .cmp-col .avatar { width: 38px; height: 38px; }
  .cmp-chart text { font-size: 17px; }
}

/* Picks page: the two main filters */
.pick-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pf { display: flex; align-items: center; gap: 11px; flex: 1 1 260px; text-align: left; cursor: pointer; padding: 11px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); transition: border-color .15s, background .15s; }
.pf b { display: block; color: var(--text); font-size: 15px; }
.pf small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; margin-top: 1px; }
.pf-box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-strong); display: grid; place-items: center; }
.pf[aria-pressed="true"] { border-color: rgba(var(--brand-rgb), .55); background: linear-gradient(90deg, rgba(var(--brand-rgb), .12), rgba(var(--brand2-rgb), .04)), var(--surface); }
.pf[aria-pressed="true"] .pf-box { background: var(--grad); border-color: transparent; }
.pf[aria-pressed="true"] .pf-box::after { content: '✓'; color: var(--on-brand); font-weight: 900; font-size: 13px; }
.pf-note { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.pf-note b { color: var(--text-2); }
.model-fact.yes b { color: var(--good); }
.model-fact.no { color: var(--muted); }
.model-line { margin-top: 10px; }
.agree-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.agree-split > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.agree-split span { font-size: 12.5px; color: var(--muted); }
.agree-split b { font-family: var(--display); font-size: 20px; }
.agree-split small { color: var(--text-2); font-size: 12.5px; }
.agree-split .yes span { color: var(--good); }
@media (max-width: 560px) { .agree-split { grid-template-columns: 1fr; } }

/* Pick details: "Our take" */
.take { border-top: 1px solid var(--border); padding-top: 18px; }
.take-lead { margin: 0 0 4px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.take-lead b { color: var(--text); }
.take .why li b { color: var(--text); font-weight: 700; }
.take .why li.con::before { content: '−'; background: var(--bad-soft); color: var(--bad); }

/* Trade calculator */
.trade-card { margin-bottom: 14px; }
.trade-settings { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 4px; }
.switch.compact { padding: 6px 10px; }
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.trade-side { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 12px; }
.trade-side.give { border-color: rgba(244, 114, 182, .35); }
.trade-side.get { border-color: rgba(var(--brand-rgb), .4); }
.ts-head { display: flex; justify-content: space-between; align-items: baseline; }
.ts-head h4 { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ts-head span { font-size: 13px; color: var(--text-2); } .ts-head b { font-family: var(--display); font-size: 18px; color: var(--text); }
.trade-side .cmp-ac { max-width: none; margin-top: 8px; }
.tr-list { display: grid; gap: 8px; margin-top: 10px; }
.tr-row { display: grid; grid-template-columns: 40px 1fr auto 26px; gap: 10px; align-items: center; background: var(--surface); border-radius: 12px; padding: 9px 10px; }
.tr-row .avatar { width: 40px; height: 40px; align-self: start; }
.tr-who { min-width: 0; display: grid; gap: 3px; }
.tr-who b { overflow-wrap: anywhere; }
.tr-who .pc-sub { font-size: 12px; } .tr-line { font-size: 12.5px; } .tr-who .tags { gap: 4px; }
.tr-num { text-align: right; display: grid; }
.tr-num small.tr-split { font-size: 10.5px; white-space: nowrap; margin-top: 1px; } .tr-num b { font-family: var(--display); font-size: 20px; } .tr-num small { color: var(--muted); font-size: 11px; }
.tr-x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--text-2); cursor: pointer; font-size: 16px; line-height: 1; }
.tr-x:hover { background: var(--bad-soft); color: var(--bad); }
.tr-verdict { padding: 18px 20px; margin-bottom: 14px; }
.tr-how { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.tr-how b { color: var(--text); }
.tr-verdict h2 { margin: 2px 0 4px; font-size: 26px; }
.tr-verdict.win { border-color: rgba(var(--brand-rgb), .5); background: radial-gradient(600px 220px at 0% 0%, rgba(var(--brand-rgb), .14), transparent 70%), var(--surface); }
.tr-verdict.lose { border-color: rgba(248, 113, 113, .45); background: radial-gradient(600px 220px at 0% 0%, rgba(248, 113, 113, .12), transparent 70%), var(--surface); }
.tr-verdict.lose .cmp-kicker { color: var(--bad); }
.tr-verdict.even .cmp-kicker { color: var(--accent); }
.tr-scale { display: flex; gap: 4px; margin: 14px 0 6px; font-size: 13px; font-weight: 700; }
.tr-scale span { padding: 8px 10px; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 90px; }
.tr-scale .g { background: rgba(244, 114, 182, .18); color: #f9a8d4; }
.tr-scale .t { background: rgba(var(--brand-rgb), .18); color: var(--good); text-align: right; }
@media (max-width: 760px) { .trade-sides { grid-template-columns: 1fr; } .tr-verdict h2 { font-size: 22px; } }

/* Bottom bar: Fantasy in gold too */
.bottom-nav button[data-tab="fantasy"] { color: #d9a93a; }
.bottom-nav button[data-tab="fantasy"][aria-selected="true"] { color: #fbbf24; }
.bottom-nav button[data-tab="fantasy"][aria-selected="true"] svg { filter: drop-shadow(0 0 6px rgba(251, 191, 36, .6)); }

/* Uncertain "value": looks better than fair on paper, but not trusted */
.value-badge.unsure { background: var(--warn-soft); border-color: rgba(251, 191, 36, .35); }
.value-badge.unsure b { color: #fcd34d; }
.value-badge.unsure span { color: var(--warn); }
.pick-card.r-unsure { opacity: .85; }
.verdict-line.warn { border-color: rgba(251, 191, 36, .45); background: var(--warn-soft); }
.verdict-line.warn .vl-head { color: var(--warn); }

/* Small remove (×) buttons: a 44px touch target without changing how they look */
.cmp-chip button, .tr-x { position: relative; }
.cmp-chip button::after, .tr-x::after { content: ''; position: absolute; inset: -10px; }
/* Keyboard focus on clickable rows and list items */
.mini-pick:focus-visible, tr.team-row:focus-visible, .ac-list li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Suggested bet size on pick cards */
.pc-price .checked { margin-left: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.pc-price .checked.old { color: var(--warn); }
.pc-price .stake { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ============ Theme: "Clean light" (design 4, the default) ============
   <html data-theme="light">. The original dark look ("classic", design 1) is everything above:
   switch back by changing data-theme in index.html, or preview it with ?theme=classic. */
:root[data-theme="light"] {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #e9eef6;
  --border: #dfe5ee;
  --border-strong: #c9d3e1;
  --text: #0b1b33;
  --text-2: #33415c;
  --muted: #5b6b85;
  --brand: #1463ff;
  --brand-2: #3b82f6;
  --grad: linear-gradient(135deg, #1463ff 0%, #3b82f6 100%);
  --accent: #1463ff;
  --accent-soft: rgba(20, 99, 255, .09);
  --over: #1463ff;
  --over-soft: rgba(20, 99, 255, .09);
  --under: #7c3aed;
  --under-soft: rgba(124, 58, 237, .09);
  --good: #0f8a47;
  --good-strong: #0b7a3d;
  --good-soft: #e3f6ea;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --bad: #d92d4f;
  --bad-soft: #fde8ec;
  --bar-miss: #d5dde9;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -18px rgba(16, 24, 40, .25);
  --glow: 0 0 0 1px rgba(20, 99, 255, .3), 0 10px 30px -14px rgba(20, 99, 255, .35);
  --brand-rgb: 15, 138, 71;      /* tints that mean "good value" stay green */
  --brand2-rgb: 20, 99, 255;     /* the rest turn blue */
  --on-brand: #ffffff;
  --miss-top: #cfd8e5;
  --miss-bottom: #b9c5d6;
  color-scheme: light;
}
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] ::selection { background: rgba(20, 99, 255, .2); }
[data-theme="light"] .topbar { background: rgba(255, 255, 255, .88); }
[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, .95); }
[data-theme="light"] .tabs { background: #fff; }
[data-theme="light"] .sheet-backdrop { background: rgba(15, 23, 42, .35); }
[data-theme="light"] .sheet-panel { box-shadow: 0 30px 80px rgba(15, 23, 42, .25); }
[data-theme="light"] .seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 -2px 0 0 var(--brand) inset, 0 1px 3px rgba(16, 24, 40, .12); }
[data-theme="light"] .avatar, [data-theme="light"] .p-hero img { box-shadow: 0 1px 3px rgba(16, 24, 40, .15); }
[data-theme="light"] .ac-list, [data-theme="light"] .tip, [data-theme="light"] #update-banner { box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .25); }
[data-theme="light"] .alert { color: #9b1c33; border-color: rgba(217, 45, 79, .3); }
[data-theme="light"] .alert.warn { color: #7c4a03; border-color: rgba(180, 83, 9, .3); }
[data-theme="light"] .tag.weather, [data-theme="light"] .res.pending { color: #0b4bc4; }
[data-theme="light"] .value-badge.strong span, [data-theme="light"] .value-badge.slight b { color: var(--good-strong); }
[data-theme="light"] .value-badge.unsure b, [data-theme="light"] .price-warn { color: var(--warn); }
[data-theme="light"] .side.over { color: #0b4bc4; box-shadow: inset 0 0 0 1px rgba(20, 99, 255, .35); }
[data-theme="light"] .side.under { color: #5b21b6; box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .35); }
[data-theme="light"] .chance-bar b, [data-theme="light"] .fx-range .mid { background: var(--text); }
[data-theme="light"] .wx.hot .wx-ico { color: #0b4bc4; }
[data-theme="light"] .chart .last10-lbl { fill: #0f766e; }
[data-theme="light"] .tr-scale .g { color: #9d174d; }
[data-theme="light"] .tabs .fx-tab svg, [data-theme="light"] .tabs .fx-tab[aria-selected="true"] svg,
[data-theme="light"] .bottom-nav button[data-tab="fantasy"], [data-theme="light"] .bottom-nav button[data-tab="fantasy"][aria-selected="true"] { color: #b7791f; }
[data-theme="light"] .fx-tier.t0, [data-theme="light"] .fx-tier.t1 { color: var(--good-strong); }
[data-theme="light"] .fx-tier.t0 { color: #fff; }

/* ============ Track record: three separate records ============ */
.rec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 14px; }
.rec-card { --acc: var(--good); display: grid; gap: 6px; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); transition: border-color .15s, box-shadow .15s; }
.rec-card.k-top { --acc: #f59e0b; }
.rec-card.k-model { --acc: #3b82f6; }
.rec-card:hover { border-color: var(--border-strong); }
.rec-card[aria-pressed="true"] { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 10px 24px -16px var(--acc); }
.rc-top { display: flex; gap: 10px; align-items: center; }
.rc-top b { display: block; color: var(--text); font-size: 15px; }
.rc-top small { display: block; color: var(--muted); font-size: 12.5px; }
.rc-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
.rc-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-top .rc-ico svg, #record-live:has(.rec-card.k-top[aria-pressed="true"]) .rec-what .rc-ico svg { fill: currentColor; }
.rc-rec { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-top: 4px; }
.rc-nums { font-size: 14px; font-weight: 700; }
.rc-nums .pos { color: var(--good); } .rc-nums .neg { color: var(--bad); }
.rec-card small { color: var(--muted); font-size: 12.5px; }
.rec-what { --acc: var(--good); padding: 16px 18px; margin-bottom: 12px; border-left: 4px solid var(--acc); }
.rec-what .rc-ico { width: 40px; height: 40px; }
.rw-head { display: flex; gap: 12px; align-items: flex-start; }
.rw-head h2 { margin: 0 0 4px; font-size: 20px; }
.rw-head p { margin: 0; color: var(--text-2); line-height: 1.5; }
.rw-rules { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rw-rules li { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.rw-rules li.yes::before { content: '✓ '; color: var(--good); font-weight: 900; }
.rw-rules li.no { color: var(--muted); }
.rw-rules li.no::before { content: '✗ '; font-weight: 900; }
#record-live:has(.rec-card.k-top[aria-pressed="true"]) .rec-what { --acc: #f59e0b; }
#record-live:has(.rec-card.k-model[aria-pressed="true"]) .rec-what { --acc: #3b82f6; }
.rec-what .rc-ico { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
.rec-few { margin-bottom: 12px; }
.rec-gloss { margin: 0 0 12px; }
.rec-gloss dl { margin: 10px 0 0; display: grid; gap: 10px; }
.rec-gloss dt { font-weight: 800; color: var(--text); }
.rec-gloss dd { margin: 2px 0 0; color: var(--text-2); line-height: 1.5; }
.rec-list-head { margin: 18px 0 8px; font-size: 16px; }
.rec-list-head .muted { font-weight: 500; font-size: 13px; }
.rec-divider { margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 20px; }
.tag.top { background: rgba(245, 158, 11, .16); color: #b45309; border-color: rgba(245, 158, 11, .35); font-weight: 800; }
:root:not([data-theme="light"]) .tag.top { color: #fbbf24; }
.pf.pf-top[aria-pressed="true"] .pf-box { background: #f59e0b; }
@media (max-width: 760px) {
  .rec-cards { grid-template-columns: 1fr; gap: 8px; }
  .rec-card { grid-template-columns: 1fr auto; align-items: center; padding: 12px 14px; row-gap: 2px; }
  .rec-card .rc-top { grid-column: 1; grid-row: 1 / span 2; }
  .rec-card .rc-rec { grid-column: 2; margin: 0; font-size: 22px; text-align: right; }
  .rec-card .rc-nums { grid-column: 2; text-align: right; font-size: 13px; }
  .rec-card > small { grid-column: 1 / -1; }
}


/* Research logs sit below the picks, smaller */
.rec-sub { margin: 6px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rec-cards.research { grid-template-columns: repeat(2, 1fr); }
.rec-cards.research .rec-card { padding: 10px 14px; opacity: .9; }
.rec-cards.research .rc-rec { font-size: 20px; }
.rec-cards:not(.research) { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (max-width: 760px) { .rec-cards:not(.research) { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .rec-cards.research { grid-template-columns: 1fr; } }

/* Best bets (top of the Picks page) */
.best-bets { margin: 6px 0 18px; }
.bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bb-head h2 { margin: 0; }
.bb-day { margin: 14px 0 8px; font-size: 15px; color: var(--text-2); }
.bb-all { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.tag.best { background: rgba(var(--brand-rgb), .16); color: var(--good); border-color: rgba(var(--brand-rgb), .4); font-weight: 800; }
.fact.model-fact.ctx { opacity: .85; }
.model-line.ctx { border-left-color: var(--border-strong); }
.rec-card.k-best { --acc: var(--good); }
.rc-rec.pos { color: var(--good); } .rc-rec.neg { color: var(--bad); }

/* Fantasy in the top switch; on its page the NFL tabs step aside */
.sport-switch .sw-fx { color: #b45309; }
:root:not([data-theme="light"]) .sport-switch .sw-fx { color: #fbbf24; }
.sport-switch .sw-fx[aria-pressed="true"] { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #3b2300; }
body[data-fantasy="1"] .tabs, body[data-fantasy="1"] .bottom-nav { display: none; }
@media (max-width: 480px) {
  .sport-switch { padding: 2px; gap: 0; }
  .sport-switch button { padding: 5px 6px; font-size: 11px; letter-spacing: .02em; }
  .top-right { gap: 5px; }
  .top-right .icon-btn { width: 30px; height: 30px; }
  .topbar-in { gap: 6px; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 360px) { .status-pill { display: none; } }

.sport-switch .sw-fx { display: inline-flex; align-items: center; gap: 5px; }
.sport-switch .sw-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Phones: the switch gets its own row under the logo so 'Fantasy Football' fits */
@media (max-width: 560px) {
  .topbar-in { flex-wrap: wrap; row-gap: 8px; }
  .sport-switch { order: 3; width: 100%; display: flex; }
  .sport-switch button { flex: 1 1 auto; text-align: center; justify-content: center; }
  .sport-switch .sw-fx { flex: 2 1 auto; }
}
.rc-range { color: var(--muted); font-size: 12px; }
.rec-card.k-best { padding: 18px 20px; }

/* Picks page: Best bets only; everything else tucked into research */
.bb-summary { margin: 10px 0 0; font-size: 15px; color: var(--text-2); }
.bb-rules { margin-top: 12px; }
.research-box { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; }
.research-box > summary { cursor: pointer; font-weight: 800; font-size: 15px; color: var(--text-2); padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); list-style: none; }
.research-box > summary::-webkit-details-marker { display: none; }
.research-box > summary::before { content: '▸ '; }
.research-box[open] > summary::before { content: '▾ '; }
.research-box[open] > summary { margin-bottom: 12px; }

/* Best bets whose edge has gone: greyed out, below the active ones */
.bb-gone { position: relative; }
.bb-gone > .pick-card, .bb-gone > article, .bb-gone > .card { opacity: .55; filter: grayscale(.8); }
.bb-gone-label { font-size: 13px; font-weight: 800; color: var(--bad); margin: 0 0 6px 2px; }
.bb-gone-head { color: var(--muted); }
.pc-price .stake.gone { background: var(--bad-soft, rgba(220,38,38,.12)); color: var(--bad); }
.spark .ln { pointer-events: none; }
.spark rect[data-tip] { cursor: default; }
.spark rect[data-tip]:hover { opacity: .75; }

/* Mispriced page */
.mp-filters { display: flex; gap: 8px; margin: 4px 0 12px; }
.mp-filters .select { flex: 1; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 2px; }
.sec-head h2 { margin: 0; font-size: 20px; }
.sec-head small { color: var(--muted); font-size: 13px; }
.sec-note { margin: 0 0 10px; }
.empty-state.small { padding: 16px; }
.empty-state.small p { margin: 0; }
.tag.gap { background: rgba(20, 99, 255, .12); color: var(--brand); border-color: rgba(20, 99, 255, .35); font-weight: 800; }
.gap-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; text-align: left; }
.gap-lines > div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; }
.gap-lines small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.gap-lines b { font-family: var(--display); font-size: 20px; }
.gap-lines span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.gap-lines .mine { box-shadow: inset 0 0 0 1.5px var(--brand); background: rgba(20, 99, 255, .06); }
.games-more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.back-link { display: inline-block; margin-bottom: 6px; font-weight: 700; }
/* Projections page */
.research-note { background: rgba(217, 119, 6, .1); border: 1px solid rgba(217, 119, 6, .35); color: #92400e; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; margin-top: 8px; }
:root:not([data-theme="light"]) .research-note { color: #fbbf24; }
.pj-list { display: grid; gap: 8px; }
.pj-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; cursor: pointer; color: var(--text); font: inherit; }
.pj-row:hover { border-color: var(--border-strong); }
.pj-row.thin { opacity: .55; }
.pj-name b { font-size: 15px; }
.pj-name span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.pj-gap { text-align: right; }
.pj-gap b { font-family: var(--display); font-size: 18px; }
.pj-gap b.up { color: var(--good); } .pj-gap b.dn { color: var(--bad); }
.pj-gap small { display: block; font-size: 11.5px; color: var(--muted); }
.pj-vs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
.pj-vs .n { margin-left: auto; color: var(--muted); }
.pj-row.thin .pj-vs .n { color: var(--warn); font-weight: 700; }
.pj-row .tags { grid-column: 1 / -1; margin: 2px 0 0; }
.mp-filters .select { flex: 1 1 0; min-width: 0; }
.mp-filters .select select { width: 100%; min-width: 0; }

/* Model Over/Unders cards */
.proj-card.thin { opacity: .55; }
.proj-line { font-size: 14px; color: var(--text-2); margin: 2px 0 8px; }
.value-badge.model { background: rgba(124, 58, 237, .08); border-color: rgba(124, 58, 237, .35); }
.value-badge.model b, .value-badge.model span { color: #6d28d9; }
:root:not([data-theme="light"]) .value-badge.model b, :root:not([data-theme="light"]) .value-badge.model span { color: #c4b5fd; }
@media (max-width: 480px) { #tab-projections .mp-filters { flex-direction: column; } }
/* Over/Unders badge: our projected line (research, so not the pick colours) */
.value-badge.proj { background: rgba(14, 165, 233, .08); border-color: rgba(14, 165, 233, .4); }
.value-badge.proj b, .value-badge.proj span { color: #0369a1; }
:root:not([data-theme="light"]) .value-badge.proj b, :root:not([data-theme="light"]) .value-badge.proj span { color: #7dd3fc; }
/* Over/Unders: the books' line and ours, stacked (coloured like the side the model prefers) */
.line-pair { flex: none; display: grid; gap: 2px; min-width: 104px; padding: 7px 11px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.lp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.lp-row b { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }
.lp-row.ours span, .lp-row.ours b { font-weight: 800; }
.lp-row.ours b { font-size: 19px; }
.line-pair.over { background: var(--over-soft); border-color: rgba(96, 165, 250, .35); }
.line-pair.over .lp-row.ours { color: #bfdbfe; } .line-pair.over .lp-row.ours b { color: #bfdbfe; }
.line-pair.under { background: var(--under-soft); border-color: rgba(192, 132, 252, .35); }
.line-pair.under .lp-row.ours { color: #e9d5ff; } .line-pair.under .lp-row.ours b { color: #e9d5ff; }
[data-theme="light"] .line-pair.over { border-color: rgba(20, 99, 255, .35); }
[data-theme="light"] .line-pair.over .lp-row.ours, [data-theme="light"] .line-pair.over .lp-row.ours b { color: #0b4bc4; }
[data-theme="light"] .line-pair.under { border-color: rgba(124, 58, 237, .35); }
[data-theme="light"] .line-pair.under .lp-row.ours, [data-theme="light"] .line-pair.under .lp-row.ours b { color: #5b21b6; }
.off-card { display: grid; gap: 6px; padding: 12px 14px; font-size: 14px; }
/* Mispriced: an empty section is one short line */
.sec-empty { margin: 6px 0 14px; font-size: 14px; color: var(--muted); }
.sec-empty b { color: var(--text-2, var(--text)); font-weight: 700; }
.pc-early { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Record page: experiments and tests, collapsed */
.rec-tests > summary { cursor: pointer; list-style: none; }
.rec-tests > summary::-webkit-details-marker { display: none; }
.rec-tests > summary h2 { display: flex; align-items: center; gap: 8px; }
.rec-tests > summary h2::after { content: '▸'; font-size: .8em; color: var(--muted); }
.rec-tests[open] > summary h2::after { content: '▾'; }
.tag.rest { background: var(--surface-3); color: var(--muted); }
.status-pill.stale { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .45); }
:root:not([data-theme="light"]) .status-pill.stale { color: #fbbf24; }
/* Computers have Team Styles and Defense tabs in the top bar; the Games-page buttons are for phones */
@media (min-width: 761px) { .games-more { display: none; } }
/* Best bets that may come later (too early / waiting for the lineup): one line until tapped */
.wait-box { margin: 14px 0 6px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); font-size: 13.5px; color: var(--muted); }
.wait-box > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--text-2, var(--text)); }
.wait-box > summary::-webkit-details-marker { display: none; }
.wait-box > summary::after { content: ' ▸'; color: var(--muted); }
.wait-box[open] > summary::after { content: ' ▾'; }
.wait-box p { margin: 8px 0 0; } .wait-box ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
/* Track record: all sports together */
.all-sports h3 { margin: 0 0 8px; }
.all-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.all-row b { min-width: 76px; } .all-row span { color: var(--text-2, var(--text)); }
.all-since { margin-top: 8px; } .all-since small { color: var(--muted); font-weight: 600; }
.all-since .all-row { font-size: 13px; color: var(--muted); }
.rule-changes { margin-top: 10px; font-size: 13.5px; } .rule-changes > summary { cursor: pointer; font-weight: 700; }
.rule-changes ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; } .rule-changes li span { font-weight: 700; margin-right: 4px; }
.rule-changes small { color: var(--muted); }
@media (max-width: 760px) { .rec-card .rc-nums { max-width: 150px; justify-self: end; } }
/* ---------- Picks (rebuilt app) ---------- */
.proj-badge b { font-size: 22px; } .proj-badge span { text-transform: none; letter-spacing: 0; }
.pk-hits { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.pk-hits b { color: var(--text); }
.pk-why { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.old-records { margin-top: 28px; } .old-records > summary { cursor: pointer; font-weight: 700; color: var(--text-2); padding: 10px 0; }
.res-head { display: grid; gap: 6px; padding: 18px 20px; }
.res-head .res-verdict { font-size: 24px; font-weight: 800; margin: 0; }
.res-head .res-sub { color: var(--text-2); font-size: 15px; }
.res-before { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.res-break { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0; }
.res-break table { width: 100%; } .res-break td, .res-break th { padding: 6px 8px; text-align: left; }
.res-list td.w { color: var(--good); font-weight: 700; } .res-list td.l { color: var(--bad); font-weight: 700; }
#tab-board .mp-filters { display: none; }
/* The stale-prices warning always shows, even where the "Updated" text is hidden to save space */
.status-pill.stale { display: inline-flex !important; color: #b45309; border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .12); }
.status-pill.stale .st-txt { display: inline !important; }
:root:not([data-theme="light"]) .status-pill.stale { color: #fbbf24; }