:root {
  color-scheme: dark;
  --bg: #071015;
  --surface: #0d181f;
  --surface-2: #12222b;
  --line: rgba(191, 221, 225, 0.13);
  --text: #f4f7f5;
  --muted: #8ea2a7;
  --accent: #92f3c0;
  --accent-2: #5ad9e7;
  --amber: #ffc874;
  --danger: #ff8a8a;
  --radius: 18px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 80% -5%, rgba(90, 217, 231, 0.14), transparent 31rem),
    radial-gradient(circle at 4% 20%, rgba(146, 243, 192, 0.07), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
}

button, select { font: inherit; }

button, select { -webkit-tap-highlight-color: transparent; }

.site-shell { width: min(100%, 1280px); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

.topbar {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: #062014; font-family: Manrope, sans-serif; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Manrope, sans-serif; font-size: 15px; }
.brand small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.topbar-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(146,243,192,.09); }
.product-nav { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,12,16,.45); }
.product-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.product-nav a:hover { color: var(--text); }
.product-nav a.active { background: rgba(146,243,192,.12); color: var(--accent); }

.hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding: clamp(52px, 7vw, 88px) 0 44px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--accent); font-family: Manrope, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.hero h1 { margin: 0; max-width: 780px; font: 800 clamp(42px, 7vw, 82px)/.98 Manrope, sans-serif; letter-spacing: -.055em; }
.hero h1 span { color: var(--accent); }
.hero-copy { max-width: 700px; margin: 24px 0 0; color: #b4c2c5; font-size: clamp(15px, 2vw, 18px); line-height: 1.6; }
.hero-stat { min-width: 170px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13,24,31,.72); }
.hero-stat strong, .hero-stat span { display: block; }
.hero-stat strong { font: 800 44px/1 Manrope, sans-serif; color: var(--accent-2); }
.hero-stat span { margin-top: 8px; color: var(--muted); font-size: 12px; }


.control-panel, .weekly-board, .market-card, .score-card, .archetype-card, .method-note { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,34,43,.93), rgba(10,20,26,.94)); border-radius: var(--radius); }

/* —— published tracking ledgers —— */
.tracking-panel { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,34,43,.93), rgba(10,20,26,.94)); }
.tracking-intro { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tracking-status-quiet { opacity: .72; font-size: 11px; }
.tracking-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tracking-metrics > div { padding: 15px 20px; border-left: 1px solid var(--line); }
.tracking-metrics > div:first-child { border-left: 0; }
.tracking-metrics small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.tracking-metrics strong { display: block; margin-top: 5px; color: var(--text); font: 800 20px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.tracking-rows { display: grid; }
.tracking-group-label { padding: 10px 20px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tracking-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(180px, .9fr); gap: 12px 18px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.tracking-main { min-width: 0; }
.tracking-main strong, .tracking-main small { display: block; }
.tracking-main strong { color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-main small { margin-top: 3px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; text-align: right; }
.tracking-book { color: var(--muted); font-size: 10px; }
.tracking-units { min-width: 4.5rem; color: var(--text); font: 700 12px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.tracking-meta b { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.tracking-win, .tracking-hit { color: var(--accent); }
.tracking-loss, .tracking-miss { color: var(--danger); }
.tracking-push, .tracking-pending, .tracking-void, .tracking-ungradable { color: var(--muted); }
.tracking-empty { padding: 24px 20px; color: var(--muted); font-size: 11px; text-align: center; line-height: 1.5; }
.tracking-expand { margin: 0; padding: 12px 20px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--accent-2); cursor: pointer; font: 700 11px Manrope, sans-serif; text-align: center; }
.tracking-expand:hover { background: rgba(90,217,231,.06); }
.prop-tracking-panel { margin-top: 18px; }
.recap-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(110px, .8fr) minmax(90px, .55fr) minmax(72px, .45fr); gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .tracking-metrics { grid-template-columns: repeat(2, 1fr); }
  .tracking-metrics > div:nth-child(3),
  .tracking-metrics > div:nth-child(4) { border-top: 1px solid var(--line); }
  .tracking-metrics > div:nth-child(3) { border-left: 0; }
  .tracking-row { grid-template-columns: 1fr; padding: 12px 16px; }
  .tracking-main strong { white-space: normal; font-size: 11px; }
  .tracking-main small { white-space: normal; }
  .tracking-meta { justify-content: flex-start; text-align: left; }
  .recap-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px 16px; }
}
.control-panel { overflow: hidden; }
.weekly-board { margin-bottom: 18px; overflow: hidden; }
.match-lab { margin: 0 0 18px; overflow: hidden; }
.next-goal { margin: 0 0 18px; }
.next-goal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.next-team { padding: 20px 22px 18px; }
.next-team + .next-team { border-left: 1px solid var(--line); }
.next-team header { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.next-team header p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.next-team header h3 { margin: 0; font: 800 22px/1.1 Manrope, sans-serif; }
.next-team header strong { font: 800 28px/1 Manrope, sans-serif; color: var(--accent); }
.next-team header small { font-size: 12px; color: var(--muted); }
.next-stack { display: flex; height: 10px; margin: 14px 0 16px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.next-stack-seg { display: block; height: 100%; }
.next-stack-seg.s0 { background: var(--accent); }
.next-stack-seg.s1 { background: color-mix(in srgb, var(--accent) 70%, white); }
.next-stack-seg.s2 { background: color-mix(in srgb, var(--accent) 45%, white); }
.next-stack-seg.s3 { background: color-mix(in srgb, var(--accent) 25%, white); }
.next-team.away-tone .next-stack-seg.s0 { background: var(--amber); }
.next-team.away-tone .next-stack-seg.s1 { background: color-mix(in srgb, var(--amber) 70%, white); }
.next-team.away-tone .next-stack-seg.s2 { background: color-mix(in srgb, var(--amber) 45%, white); }
.next-team.away-tone .next-stack-seg.s3 { background: color-mix(in srgb, var(--amber) 25%, white); }
.next-bar { height: 8px; margin: 14px 0 16px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.next-bar i { display: block; height: 100%; background: var(--accent); }
.next-team.away-tone .next-bar i { background: var(--amber); }
.next-team.away-tone header strong { color: var(--amber); }
.next-player { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.next-player span small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.next-player b { font: 800 14px/1 Manrope, sans-serif; }
.next-player.other { color: var(--muted); }
.next-menu { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 800px) {
  .next-goal-body { grid-template-columns: 1fr; }
  .next-team + .next-team { border-left: 0; border-top: 1px solid var(--line); }
}
.match-lab-body { display: grid; grid-template-columns: minmax(280px, 1.3fr) minmax(220px, .9fr) 160px; gap: 22px; padding: 20px 24px 24px; }
.lab-label { margin: 0 0 10px; color: var(--muted); font: 800 11px/1 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.lab-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.lab-cell { min-height: 44px; padding: 5px 4px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--accent) calc(var(--heat) * 38%), var(--surface-2)); color: var(--text); text-align: left; }
.lab-cell strong, .lab-cell span { display: block; }
.lab-cell strong { font: 700 11px Manrope, sans-serif; }
.lab-cell span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.lab-axis { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.lab-scorer { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.lab-scorer small { display: block; color: var(--muted); font-size: 11px; }
.lab-scorer b { font: 800 14px Manrope, sans-serif; color: var(--accent); }
.lab-scorer i { position: absolute; left: 0; right: auto; bottom: 2px; height: 2px; background: var(--accent); opacity: .5; }
.lab-score { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font: 700 13px Manrope, sans-serif; }
@media (max-width: 900px) {
  .match-lab-body { grid-template-columns: 1fr; }
}

.panel-heading, .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.panel-heading h2, .card-heading h2 { margin: 0; font: 700 22px/1.2 Manrope, sans-serif; letter-spacing: -.02em; }
.league-control { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }

select {
  width: 100%;
  min-height: 48px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(191,221,225,.2);
  border-radius: 11px;
  background-color: #0a151b;
  color: var(--text);
  outline: none;
}
select:hover, select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(90,217,231,.08); }
.league-control select { width: min(360px, 46vw); min-height: 42px; }

.live-fixture-bar { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(280px, 1.5fr) auto; gap: 12px; align-items: center; padding: 14px 26px; background: rgba(4,11,15,.48); border-bottom: 1px solid var(--line); }
.fixture-title { min-width: 0; display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 12px; }
.fixture-title > span:last-child { overflow: visible; text-overflow: unset; white-space: normal; line-height: 1.35; }
.api-badge { flex: none; padding: 5px 7px; border-radius: 6px; background: rgba(146,243,192,.12); color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.fixture-quick-prices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.fixture-quick-card { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; cursor: pointer; }
.fixture-quick-card:hover, .fixture-quick-card:focus-visible { border-color: var(--accent); background: rgba(146,243,192,.08); outline: none; }
.fixture-quick-card.team-only { border-color: rgba(214,162,79,.28); }
.fixture-quick-match, .fixture-quick-meta, .fixture-quick-odds { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-quick-match { font-size: 12px; font-weight: 700; }
.fixture-quick-match i { color: var(--muted); font-style: normal; }
.fixture-quick-meta { margin-top: 4px; color: var(--muted); font-size: 9px; }
.fixture-quick-odds { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 8px; color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.fixture-quick-odds b:last-child { color: var(--amber); text-align: right; }
.fixture-quick-odds span { color: var(--muted); font-size: 9px; text-align: center; }
.fixture-unavailable { display: none; }
.ghost-button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: #c8d2d3; cursor: pointer; }
.ghost-button:hover { border-color: var(--accent); color: var(--accent); }

.weekly-heading { align-items: flex-end; }
.weekly-range { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.weekly-actions { display: flex; align-items: center; gap: 12px; }
.board-status { color: var(--muted); font-size: 11px; }
.weekly-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 22px 22px; }
.edge-card { position: relative; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4,12,16,.54); overflow: hidden; }
.edge-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: .9; }
.edge-topline { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.edge-confidence { padding: 4px 6px; border-radius: 6px; background: rgba(146,243,192,.09); color: var(--accent); font-weight: 700; }
.edge-matchup { margin: 14px 0 4px; overflow: hidden; font: 700 15px/1.35 Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.edge-time { color: var(--muted); font-size: 10px; }
.edge-play { margin-top: 15px; color: #dfe7e5; font-size: 12px; font-weight: 600; }
.edge-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.edge-prices span { min-width: 0; }
.edge-prices small, .edge-prices strong { display: block; }
.edge-prices em { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.edge-prices small { color: #6e8388; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.edge-prices strong { margin-top: 4px; overflow: hidden; font: 700 14px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.edge-prices .edge-number { color: var(--accent); }
.edge-book { margin-top: 10px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.edge-empty { grid-column: 1 / -1; padding: 20px; color: var(--muted); text-align: center; font-size: 12px; }
.edge-skeleton { min-height: 175px; border-radius: 14px; background: linear-gradient(100deg, rgba(255,255,255,.025) 25%, rgba(255,255,255,.065) 50%, rgba(255,255,255,.025) 75%); background-size: 200% 100%; animation: edge-pulse 1.4s infinite; }
@keyframes edge-pulse { to { background-position: -200% 0; } }

.team-picker-grid { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); gap: 18px; align-items: center; padding: clamp(20px, 3vw, 32px) 26px 30px; }
.team-picker { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,14,19,.5); }
.team-picker > label { display: block; margin: 20px 0 8px; color: var(--muted); font-size: 11px; }
.side-label { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.side-label span { color: var(--accent-2); font: 800 10px Manrope, sans-serif; letter-spacing: .15em; }
.side-label small { max-width: 70%; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.team-picker.away .side-label span { color: var(--amber); }
.team-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-top: 1px solid var(--line); }
.team-mini-stats span { padding: 14px 8px 0; border-right: 1px solid var(--line); text-align: center; }
.team-mini-stats span:last-child { border-right: 0; }
.team-mini-stats small, .team-mini-stats strong { display: block; }
.team-mini-stats small { color: var(--muted); font-size: 10px; }
.team-mini-stats strong { margin-top: 3px; font: 700 16px Manrope, sans-serif; }
.swap-button { width: 46px; height: 46px; border: 1px solid rgba(146,243,192,.35); border-radius: 50%; background: rgba(146,243,192,.08); color: var(--accent); font-size: 24px; cursor: pointer; }
.swap-button:hover { background: var(--accent); color: #082018; transform: rotate(180deg); transition: .2s ease; }

.projection-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: #08141a; overflow: hidden; }
.projection-team, .projection-center { display: grid; align-content: center; min-height: 160px; padding: 24px; text-align: center; }
.projection-team span { color: #c6d1d2; font-weight: 600; }
.projection-team strong { margin: 8px 0 3px; font: 800 clamp(44px, 6vw, 68px)/1 Manrope, sans-serif; }
.projection-team small, .projection-center span, .projection-center small { color: var(--muted); font-size: 11px; }
.home-tone strong { color: var(--accent-2); }
.away-tone strong { color: var(--amber); }
.projection-center { min-width: 210px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: rgba(255,255,255,.018); }
.projection-center strong { margin: 8px 0; font: 700 28px Manrope, sans-serif; }

.results-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 18px; }
.market-card, .score-card { overflow: hidden; }
.price-note { padding: 6px 9px; border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 10px; }
.market-header, .market-row { display: grid; grid-template-columns: minmax(140px, 1.25fr) repeat(4, minmax(84px, .72fr)); gap: 8px; align-items: center; }
.market-header { padding: 11px 22px; color: #657d83; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.market-header span:not(:first-child) { text-align: right; }
.market-row { min-height: 52px; padding: 8px 22px; border-top: 1px solid var(--line); }
.market-row:first-child { border-top: 0; }
.market-label strong, .market-label small { display: block; }
.market-label strong { font-size: 13px; }
.market-label small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.market-value { text-align: right; font-variant-numeric: tabular-nums; }
.market-value.fair { color: var(--accent); font-weight: 700; }
.market-value.fair strong, .market-value.fair small { display: block; }
.market-value.fair small { margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 400; }
.market-value.best { color: var(--amber); font-weight: 600; }
.market-value.best strong, .market-value.best small { display: block; }
.market-value.best small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.market-value.edge.positive { color: var(--accent); }
.market-value.edge.negative { color: var(--danger); }
.market-value.edge small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }

.score-card .card-heading { padding-bottom: 21px; }
.score-rows { padding: 10px 22px 8px; }
.score-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; min-height: 47px; border-bottom: 1px solid var(--line); }
.score-row:last-child { border-bottom: 0; }
.score-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 10px; }
.scoreline { font: 700 18px Manrope, sans-serif; }
.score-prob { color: var(--muted); font-size: 12px; }
.model-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.model-meta span { min-width: 0; padding: 16px 8px; border-right: 1px solid var(--line); text-align: center; }
.model-meta span:last-child { border-right: 0; }
.model-meta small, .model-meta strong { display: block; }
.model-meta small { color: var(--muted); font-size: 9px; }
.model-meta strong { margin-top: 5px; font: 600 12px Manrope, sans-serif; }

.archetype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.archetype-card { padding: 24px; }
.archetype-side { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.archetype-card h3 { margin: 12px 0 5px; font: 700 20px Manrope, sans-serif; }
.archetype-name { color: var(--accent); font-size: 13px; font-weight: 700; }
.archetype-card p { min-height: 40px; margin: 13px 0 0; color: #a9b8ba; font-size: 12px; line-height: 1.55; }
.archetype-meter { height: 5px; margin-top: 19px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.archetype-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

.method-note { margin: 18px 0 38px; padding: 23px 26px; display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: start; }
.method-note strong { font: 700 14px Manrope, sans-serif; }
.method-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0 38px; border-top: 1px solid var(--line); color: #65777c; font-size: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.props-hero { padding-bottom: 38px; }
.props-hero h1 { max-width: 940px; font-size: clamp(40px, 6vw, 72px); }
.props-pickers .team-picker > label { margin-top: 14px; }
.props-projection { margin-top: 18px; }
.prop-toolbar { display: flex; align-items: end; gap: 14px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8,20,26,.8); }
.prop-toolbar > label { min-width: 170px; color: var(--muted); font-size: 10px; }
.prop-toolbar > label span { display: block; margin: 0 0 6px 3px; }
.prop-toolbar select { min-height: 42px; }
.prop-toolbar .segmented { margin-right: 0; }
.player-search { flex: 1 1 250px; max-width: 380px; }
.player-search input { width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface); color: var(--text); font: 500 12px DM Sans, sans-serif; }
.player-search input::placeholder { color: var(--muted); }
.player-search input:hover, .player-search input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(77,115,218,.10); }
.segmented { display: flex; gap: 4px; margin-right: auto; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #081218; }
.segmented button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.segmented button.active { background: rgba(90,217,231,.12); color: var(--accent-2); }
.prop-board, .prop-recap, .top-props, .shot-ladders, .parlay-builder, .formation-card, .match-lab, .next-goal { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,34,43,.93), rgba(10,20,26,.94)); }
.prop-recap { margin-bottom: 18px; }
.recap-rows { display: grid; }
.recap-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(110px, .8fr) minmax(90px, .55fr) minmax(72px, .45fr); gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.recap-row:first-child { border-top: 0; }
.recap-player strong, .recap-player small, .recap-price strong, .recap-price small { display: block; }
.recap-player strong { font: 700 12px Manrope, sans-serif; }
.recap-stat { display: inline-block; margin-right: 7px; padding: 3px 6px; border-radius: 999px; background: var(--surface-2); color: var(--accent); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.recap-player small, .recap-price small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.recap-price strong { color: var(--amber); font: 700 13px Manrope, sans-serif; }
.recap-ev { color: var(--accent); font-size: 11px; font-weight: 700; }
.recap-result { justify-self: end; min-width: 66px; padding: 6px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
.recap-result.hit { background: var(--success-soft); color: var(--accent); }
.recap-ev small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 600; }
.recap-result.miss { background: rgba(225,92,92,.10); color: var(--danger); }
.recap-result.void { background: var(--surface-2); color: var(--muted); }
.recap-empty { padding: 28px 20px; color: var(--muted); font-size: 11px; text-align: center; }
.top-props { margin-bottom: 18px; }
.best-play-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 20px; }
.best-play-card { position: relative; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(4,12,16,.58); overflow: hidden; }
.best-play-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-2); content: ""; }
.best-play-card.away-play::before { background: var(--amber); }
.best-play-top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.best-play-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-play-card h3 { margin: 13px 0 2px; overflow: hidden; font: 700 15px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.best-play-card > p { margin: 0; color: #b8c5c7; font-size: 10px; }
.best-play-card > .best-play-reason { margin-top: 11px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.best-play-volume { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.best-play-volume span { padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; }
.best-play-volume small, .best-play-volume strong { display: block; }
.best-play-volume small { color: var(--muted); font-size: 7px; letter-spacing: .06em; }
.best-play-volume strong { margin-top: 3px; font: 700 13px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.best-play-reason strong { color: #dce8e5; }
.best-play-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.best-play-prices small, .best-play-prices strong { display: block; }
.best-play-prices small { color: #667d82; font-size: 7px; letter-spacing: .06em; }
.best-play-prices strong { margin-top: 4px; font: 700 13px Manrope, sans-serif; }
.best-play-prices .best-edge { color: var(--accent); }
.best-play-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 8px; }
.best-play-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-play-empty { grid-column: 1 / -1; padding: 28px 18px; color: var(--muted); text-align: center; font-size: 11px; }
.parlay-builder { margin-bottom: 18px; }
.shot-ladders { margin-bottom: 12px; }
.shot-ladder-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.shot-ladder-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.shot-ladder-heading { display: flex; justify-content: space-between; gap: 12px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.shot-ladder-heading strong, .shot-ladder-heading small { display: block; }
.shot-ladder-heading strong { font: 700 14px Manrope, sans-serif; }
.shot-ladder-heading small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.shot-ladder-heading > span { color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.away-ladder .shot-ladder-heading > span { color: var(--amber); }
.shot-ladder-rungs { display: grid; }
.shot-ladder-rungs > div { display: grid; grid-template-columns: minmax(72px, .65fr) minmax(56px, .4fr) minmax(0, 1.5fr); gap: 8px; align-items: center; padding: 10px 15px; border-top: 1px solid var(--line); }
.shot-ladder-rungs > div:first-child { border-top: 0; }
.shot-ladder-rungs > div.positive-rung { background: var(--success-soft); }
.shot-ladder-rungs span { color: var(--muted); font-size: 9px; }
.shot-ladder-rungs strong { color: var(--amber); font: 700 12px Manrope, sans-serif; text-align: right; }
.shot-ladder-rungs small { color: var(--muted); font-size: 8px; line-height: 1.35; text-align: right; }
.shot-ladder-rungs small b { font-weight: 700; }
.shot-ladder-rungs small b.positive { color: var(--accent); }
.shot-ladder-rungs small b.negative { color: var(--danger); }
.ladder-empty { grid-column: 1 / -1; padding: 34px 22px; color: var(--muted); text-align: center; font-size: 11px; }
.parlay-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.h2h-recreate { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.h2h-recreate strong, .h2h-recreate span { display: block; }
.h2h-recreate strong { font: 700 12px Manrope, sans-serif; }
.h2h-recreate span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.h2h-recreate button { flex: none; }
.parlay-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(210px, 1fr) auto auto; gap: 10px; align-items: end; padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(5,15,20,.32); }
.parlay-controls label { min-width: 0; color: var(--muted); font-size: 10px; }
.parlay-controls label span { display: block; margin: 0 0 6px 3px; }
.parlay-controls select { width: 100%; min-height: 42px; }
.parlay-add { min-height: 44px; padding: 0 20px; border: 1px solid rgba(146,243,192,.4); border-radius: 10px; background: var(--accent); color: #06140f; cursor: pointer; font-weight: 800; }
.parlay-add:hover { filter: brightness(1.06); }
.parlay-add:disabled { cursor: not-allowed; filter: none; opacity: .45; }
.parlay-legs { display: grid; gap: 9px; align-content: start; min-height: 190px; padding: 18px 20px; }
.parlay-empty { display: grid; min-height: 154px; place-items: center; padding: 24px; border: 1px dashed rgba(111,143,148,.3); border-radius: 12px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.55; }
.parlay-leg { display: grid; grid-template-columns: minmax(0, 1.7fr) 92px 92px 176px 36px; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,12,16,.56); }
.parlay-leg-player { min-width: 0; }
.parlay-leg-player strong, .parlay-leg-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parlay-leg-player strong { font: 700 12px Manrope, sans-serif; }
.parlay-leg-player small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.parlay-leg-stat { width: 100%; min-width: 0; text-align: right; }
.parlay-leg-stat span, .parlay-leg-stat strong, .parlay-leg-stat small { display: block; }
.parlay-leg-stat span { color: #657d83; font-size: 7px; letter-spacing: .07em; }
.parlay-leg-stat strong { margin-top: 3px; color: var(--accent); font: 700 13px/1 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.parlay-leg-stat.market strong { color: var(--amber); }
.parlay-leg-stat small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.parlay-remove { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.parlay-remove:hover { border-color: var(--danger); color: var(--danger); }
.parlay-summary { display: grid; align-content: start; gap: 16px; padding: 23px; border-left: 1px solid var(--line); background: rgba(4,12,16,.45); }
.parlay-summary > div { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.parlay-summary span, .parlay-summary strong { display: block; }
.parlay-summary span { color: #657d83; font-size: 8px; letter-spacing: .07em; }
.parlay-summary strong { margin-top: 6px; font: 800 26px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.parlay-summary > div:nth-child(2) strong { color: var(--accent); }
.parlay-summary small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.prop-table-header, .prop-row { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(7, minmax(74px, .58fr)); gap: 8px; align-items: center; }
.prop-table-header { padding: 12px 22px; color: #657d83; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.prop-table-header span:not(:first-child) { text-align: right; }
.prop-row { position: relative; min-height: 76px; padding: 11px 22px; border-top: 1px solid var(--line); cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
.prop-row:hover, .prop-row:focus-visible { z-index: 1; outline: 0; background: color-mix(in srgb, var(--accent-2) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent); }
.prop-row::before { position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 99px; background: var(--accent-2); content: ""; }
.prop-row.away-player::before { background: var(--amber); }
.prop-player { min-width: 0; }
.prop-player > div { display: flex; align-items: center; gap: 8px; }
.prop-player strong { overflow: hidden; font: 700 13px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.prop-player small { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.role-pill { flex: none; min-width: 28px; padding: 3px 5px; border-radius: 5px; background: rgba(90,217,231,.1); color: var(--accent-2); font-size: 8px; font-weight: 800; text-align: center; }
.away-player .role-pill { background: rgba(255,200,116,.1); color: var(--amber); }
.prop-number { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.prop-number.fair { color: var(--accent); font-weight: 700; }
.prop-number.market { color: var(--amber); font-weight: 700; }
.prop-number.market small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.prop-number.edge.positive { color: var(--accent); }
.prop-number.edge.negative { color: var(--danger); }
.prop-number.edge small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 400; line-height: 1.25; }
.prop-empty { padding: 48px 22px; color: var(--muted); text-align: center; font-size: 12px; }
.player-dialog { width: min(1040px, calc(100vw - 28px)); max-width: none; max-height: min(860px, calc(100vh - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 28px 80px rgba(8,18,30,.32); overflow: hidden; }
.player-dialog::backdrop { background: rgba(8,15,25,.58); backdrop-filter: blur(5px); }
.player-dialog-shell { max-height: min(860px, calc(100vh - 28px)); overflow: auto; }
.player-dialog-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 19px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
.player-dialog-header span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.player-dialog-header h2 { margin: 4px 0 3px; font: 800 27px Manrope, sans-serif; }
.player-dialog-header p { margin: 0; color: var(--muted); font-size: 11px; }
.player-dialog-close { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 24px; line-height: 1; }
.player-dialog-close:hover, .player-dialog-close:focus-visible { border-color: var(--accent-2); outline: 0; color: var(--accent-2); }
.player-dialog-body { padding: 20px 24px 26px; }
.player-detail-decision { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(460px, 1.2fr); gap: 18px 28px; padding: 20px; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--surface-2) 92%, transparent), var(--surface)); }
.player-detail-decision.play { border-left-color: var(--accent); }
.player-detail-decision.pass { border-left-color: var(--danger); }
.player-detail-decision-copy > span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.player-detail-decision.play .player-detail-decision-copy > span { color: var(--accent); }
.player-detail-decision.pass .player-detail-decision-copy > span { color: var(--danger); }
.player-detail-decision-copy h3 { margin: 6px 0 5px; font: 800 22px Manrope, sans-serif; }
.player-detail-decision-copy p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.player-detail-decision-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.player-detail-decision-numbers > div { min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); }
.player-detail-decision-numbers small, .player-detail-decision-numbers span { display: block; overflow: hidden; color: var(--muted); font-size: 7px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.player-detail-decision-numbers strong { display: block; margin: 6px 0 3px; font: 800 21px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.player-detail-decision.play .decision-ev strong { color: var(--accent); }
.player-detail-decision.pass .decision-ev strong { color: var(--danger); }
.player-detail-decision footer { grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.player-detail-decision.unavailable { display: block; border-left-color: var(--line); }
.player-detail-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.player-detail-metrics { margin-top: 12px; }
.player-detail-metrics > div { min-width: 0; min-height: 108px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.player-detail-metrics span { display: block; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.player-detail-metrics strong { display: block; margin-top: 7px; font: 800 22px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.player-detail-metrics small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.player-detail-ladders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.player-detail-table { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.player-detail-table-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.player-detail-table-title h3, .player-detail-read h3 { margin: 0; padding: 14px 16px; font: 700 14px Manrope, sans-serif; }
.player-detail-table-title > span { margin-right: 14px; padding: 4px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.player-detail-table-head, .player-detail-line { display: grid; grid-template-columns: minmax(76px, 1fr) repeat(3, minmax(74px, .82fr)); gap: 8px; align-items: center; padding: 9px 13px; border-top: 1px solid var(--line); }
.player-detail-table-head { color: var(--muted); background: var(--surface-2); font-size: 7px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.player-detail-table-head span:not(:first-child), .player-detail-line > span { text-align: right; }
.player-detail-line { min-height: 48px; font-size: 10px; font-variant-numeric: tabular-nums; }
.player-detail-line strong { font: 700 10px Manrope, sans-serif; }
.player-detail-line > span:nth-child(3) { font-weight: 700; }
.player-detail-line > span:last-child { color: var(--amber); font-weight: 700; }
.player-detail-line small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 400; }
.player-detail-line small b { font-weight: 800; }
.player-detail-line small b.positive { color: var(--accent); }
.player-detail-line small b.negative { color: var(--danger); }
.player-detail-line.model-only { display: none; }
.player-dialog-body.show-model-only .player-detail-line.model-only { display: grid; }
.player-detail-no-price { margin: 0; padding: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.player-dialog-body.show-model-only .player-detail-no-price { display: none; }
.player-detail-model-toggle { display: block; margin: 12px auto 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font: 700 8px Manrope, sans-serif; letter-spacing: .05em; }
.player-detail-model-toggle:hover, .player-detail-model-toggle:focus-visible { border-color: var(--accent-2); outline: 0; color: var(--accent-2); }
.player-detail-read { margin-top: 18px; border: 1px solid var(--line); border-radius: 13px; }
.player-detail-read p { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.45; }
.formation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.formation-card { padding: 22px 24px; }
.formation-card h3 { margin: 0 0 16px; font: 700 17px/1.35 Manrope, sans-serif; }
.formation-notes { display: grid; gap: 8px; }
.formation-notes span { display: block; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.formation-notes strong { color: #dfe7e5; }
.props-method { margin-top: 18px; }

/* The props screen follows the baseball board's compact, decision-first
   hierarchy: a quiet header, a short product intro, and dense action cards. */
.props-page .site-shell { width: min(100%, 1440px); padding: 0 clamp(14px, 2vw, 28px); }
.props-page .topbar { min-height: 68px; }
.props-page .brand-mark { width: 36px; height: 36px; border-radius: 9px; }
.props-page .props-hero { align-items: center; padding: 28px 4px 24px; }
.props-page .props-hero h1 { max-width: none; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; }
.props-page .props-hero h1 br { display: none; }
.props-page .props-hero h1 span { margin-left: .18em; }
.props-page .hero-copy { max-width: 820px; margin-top: 12px; font-size: 13px; line-height: 1.5; }
.props-page .hero-stat { min-width: 146px; padding: 16px 18px; border-radius: 14px; }
.props-page .hero-stat strong { font-size: 32px; }
.props-page .panel-heading, .props-page .card-heading { padding: 17px 20px; }
.props-page .panel-heading h2, .props-page .card-heading h2 { font-size: 18px; }
.props-page .live-fixture-bar { padding: 10px 20px; }
.props-page .team-picker-grid { gap: 12px; padding: 14px 20px 18px; }
.props-page .team-picker { padding: 14px; border-radius: 12px; }
.props-page .team-picker > label { margin: 10px 0 6px; }
.props-page select { min-height: 42px; }
.props-page .projection-strip { margin: 12px 0; border-radius: 14px; }
.props-page .projection-team, .props-page .projection-center { min-height: 104px; padding: 15px; }
.props-page .projection-team strong { font-size: clamp(34px, 4vw, 48px); }
.props-page .projection-center { min-width: 190px; }
.props-page .top-props, .props-page .parlay-builder { margin-bottom: 12px; }
.props-page .best-play-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px; }
.props-page .best-play-card { min-height: 162px; border-color: rgba(146,243,192,.18); background: linear-gradient(145deg, rgba(34,75,63,.30), rgba(7,22,23,.72)); }
.props-page .best-play-card::before { width: 4px; background: #4db58a; }
.props-page .best-play-card.away-play::before { background: #d6a24f; }
.props-page .best-play-card h3 { margin-top: 10px; }
.props-page .prop-toolbar { margin-bottom: 12px; }
.props-page .prop-row { min-height: 68px; padding-top: 9px; padding-bottom: 9px; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stat { display: none; }
  .panel-heading { align-items: stretch; flex-direction: column; }
  .league-control { align-items: stretch; flex-direction: column; }
  .league-control select { width: 100%; }
  .live-fixture-bar { grid-template-columns: 1fr auto; }
  .fixture-title { grid-column: 1 / -1; }
  .fixture-quick-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-picker-grid { grid-template-columns: 1fr; }
  .swap-button { justify-self: center; transform: rotate(90deg); }
  .swap-button:hover { transform: rotate(270deg); }
  .results-grid, .archetype-grid { grid-template-columns: 1fr; }
  .weekly-rows { grid-template-columns: 1fr 1fr; }
  .method-note { grid-template-columns: 1fr; }
  .topbar-meta { display: none; }
  .prop-toolbar { align-items: stretch; flex-wrap: wrap; }
  .segmented { width: 100%; margin: 0; }
  .segmented button { flex: 1; }
  .prop-toolbar > label { flex: 1; }
  .player-search { max-width: none; flex-basis: 100%; }
  .player-detail-decision { grid-template-columns: 1fr; }
  .player-detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formation-grid { grid-template-columns: 1fr; }
  .props-page .best-play-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-ladder-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parlay-workspace { grid-template-columns: 1fr; }
  .parlay-summary { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 0; }
  .parlay-summary small { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-shell { padding: 0 12px; }
  .topbar-meta { display: none; }
  .topbar { min-height: 74px; flex-wrap: wrap; padding: 12px 0; }
  .product-nav { order: 3; width: 100%; }
  .product-nav a { flex: 1; text-align: center; }
  .hero { padding: 46px 4px 32px; }
  .hero h1 { font-size: clamp(40px, 14vw, 60px); }
  .panel-heading, .team-picker-grid { padding-right: 16px; padding-left: 16px; }
  .weekly-heading { align-items: stretch; flex-direction: column; }
  .weekly-actions { justify-content: space-between; }
  .weekly-actions { flex-wrap: wrap; }
  .weekly-rows { grid-template-columns: 1fr; padding-right: 16px; padding-left: 16px; }
  .live-fixture-bar { padding: 14px 16px; }
  .fixture-quick-prices { grid-template-columns: 1fr; }
  .projection-strip { grid-template-columns: 1fr 1fr; }
  .projection-center { grid-column: 1 / -1; grid-row: 2; min-height: 95px; border: 1px solid var(--line); border-width: 1px 0 0; }
  .projection-team { min-height: 130px; padding: 18px 10px; }
  .projection-team strong { font-size: 44px; }
  .market-header { display: none; }
  .market-row { grid-template-columns: 1fr repeat(2, minmax(74px, auto)); padding: 13px 16px; gap: 8px; }
  .market-row .market-value:nth-child(4), .market-row .market-value:nth-child(5) { margin-top: 4px; }
  .market-label { grid-row: span 2; }
  .market-value { font-size: 12px; }
  .market-value::before { display: block; margin-bottom: 2px; color: #62767a; font-size: 8px; letter-spacing: .08em; }
  .market-value.probability::before { content: "PROB"; }
  .market-value.fair::before { content: "FAIR"; }
  .market-value.best::before { content: "MARKET"; }
  .market-value.edge::before { content: "EDGE"; }
  footer { flex-direction: column; gap: 6px; }
  .prop-toolbar { padding: 12px; }
  .prop-toolbar > label { min-width: calc(50% - 8px); }
  .prop-toolbar > label.player-search { min-width: 100%; }
  .prop-table-header { display: none; }
  .prop-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 14px 17px; }
  .prop-player { grid-column: 1 / -1; }
  .prop-player small { white-space: normal; }
  .prop-number { font-size: 11px; }
  .prop-number::before { display: block; margin-bottom: 2px; color: #61777c; content: attr(data-label); font-size: 7px; letter-spacing: .07em; }
  .prop-number:nth-child(2) { display: none; }
  .player-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 14px; }
  .player-dialog-shell { max-height: calc(100vh - 16px); }
  .player-dialog-header { padding: 17px 16px 14px; }
  .player-dialog-header h2 { font-size: 23px; }
  .player-dialog-body { padding: 14px; }
  .player-detail-decision { gap: 16px; padding: 15px; }
  .player-detail-decision-copy h3 { font-size: 19px; }
  .player-detail-decision-numbers { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .player-detail-decision-numbers > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .player-detail-metrics { grid-template-columns: 1fr 1fr; }
  .player-detail-metrics > div:first-child { grid-column: 1 / -1; }
  .player-detail-prices, .player-detail-ladders { grid-template-columns: 1fr; }
  .player-detail-table-head, .player-detail-line { grid-template-columns: minmax(68px, 1fr) repeat(3, minmax(62px, .8fr)); padding-right: 10px; padding-left: 10px; }
  .formation-card { padding: 20px 16px; }
  .props-page .best-play-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .props-page .best-play-card { width: 100%; min-height: 0; padding: 18px; }
  .props-page .best-play-top { align-items: flex-start; gap: 12px; font-size: 9px; line-height: 1.35; }
  .props-page .best-play-top span { text-overflow: clip; white-space: normal; }
  .props-page .best-play-top span:last-child { text-align: right; }
  .props-page .best-play-card h3 { margin-top: 14px; overflow: visible; font-size: 18px; text-overflow: clip; white-space: normal; }
  .props-page .best-play-card > p { font-size: 12px; }
  .props-page .best-play-card > .best-play-reason { margin-top: 13px; font-size: 11px; line-height: 1.55; }
  .props-page .best-play-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; }
  .props-page .best-play-prices span { min-width: 0; }
  .props-page .best-play-prices small { font-size: 8px; line-height: 1.3; }
  .props-page .best-play-prices strong { font-size: 16px; }
  .props-page .best-play-foot { flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 9px; }
  .props-page .best-play-foot span { text-overflow: clip; white-space: normal; }
  .shot-ladder-rows { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .shot-ladder-heading { align-items: flex-start; flex-direction: column; }
  .shot-ladder-rungs > div { grid-template-columns: 62px 58px minmax(0, 1fr); padding: 10px 12px; }
  .h2h-recreate { align-items: stretch; flex-direction: column; padding: 14px; }
  .h2h-recreate button { width: 100%; }
  .parlay-controls { grid-template-columns: 1fr 1fr; padding: 14px; }
  .parlay-controls label { grid-column: 1 / -1; }
  .parlay-controls button { width: 100%; }
  .parlay-legs { padding: 14px; }
  .parlay-leg { grid-template-columns: minmax(0, 1fr) 72px 72px 30px; gap: 8px; }
  .parlay-leg-stat.market { display: none; }
  .parlay-summary { grid-template-columns: 1fr 1fr; padding: 18px 14px; }
  .parlay-summary > div:first-child { grid-column: 1 / -1; }
}

/* Minimal board theme: the same utility-first hierarchy as CC Baseball. */
:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --success-soft: #f1f8f4;
  --line: #dfe4ec;
  --text: #182033;
  --muted: #667085;
  --accent: #398a68;
  --accent-2: #4d73da;
  --amber: #a96317;
  --danger: #b42318;
  --shadow: 0 2px 10px rgba(16, 24, 40, .035);
  --radius: 16px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101318;
  --surface: #181c22;
  --surface-2: #20252d;
  --success-soft: #192821;
  --line: #303640;
  --text: #f4f6f8;
  --muted: #9aa4b2;
  --accent: #73c9a4;
  --accent-2: #81a1f4;
  --amber: #e2a65d;
  --danger: #f58d86;
  --shadow: none;
}

html, body { background: var(--bg); }
body { background-image: none; color: var(--text); }
.site-shell, .props-page .site-shell { width: min(100%, 1380px); padding: 0 clamp(14px, 2vw, 24px); }
main { padding-top: 20px; }
.hero, .props-page .props-hero { display: none; }

.topbar, .props-page .topbar { min-height: 72px; border-color: var(--line); }
.brand { gap: 9px; }
.brand-mark, .props-page .brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-2); color: #fff; }
.brand strong { color: var(--text); font-size: 17px; }
.brand small { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-meta { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 10px; }
.live-dot { background: var(--accent); box-shadow: none; }
.product-nav { border: 0; background: transparent; }
.product-nav a { color: var(--muted); }
.product-nav a:hover { color: var(--text); }
.product-nav a.active { background: #eaf0ff; color: #355ec5; }
html[data-theme="dark"] .product-nav a.active { background: #26334f; color: #a9bdf5; }
.theme-toggle { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: var(--shadow); }
.theme-toggle:hover { border-color: var(--accent-2); }

.control-panel,
.weekly-board,
.tracking-panel,
.market-card,
.score-card,
.archetype-card,
	.method-note,
	.prop-board,
	.prop-recap,
	.top-props,
.shot-ladders,
.parlay-builder,
.formation-card,
.match-lab,
.next-goal {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-heading, .card-heading, .model-meta, .score-row, .market-row, .prop-row { border-color: var(--line); }
.panel-heading, .card-heading, .props-page .panel-heading, .props-page .card-heading { padding: 18px 20px; }
.panel-heading h2, .card-heading h2, .props-page .panel-heading h2, .props-page .card-heading h2 { color: var(--text); font-size: 19px; }
.eyebrow, .section-kicker { color: var(--accent); font-size: 9px; letter-spacing: .12em; }
.price-note, .api-badge { background: var(--surface-2); color: var(--muted); }
.api-badge { color: var(--accent); }
.live-fixture-bar, .parlay-controls { border-color: var(--line); background: var(--surface-2); }

select { border-color: var(--line); background-color: var(--surface); color: var(--text); }
select:hover, select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(77,115,218,.10); }
.ghost-button { border-color: var(--line); background: var(--surface); color: var(--text); }
.ghost-button:hover { border-color: var(--accent-2); color: var(--accent-2); }

.edge-card,
.team-picker,
.best-play-card,
.parlay-leg,
.parlay-empty,
.formation-notes span {
  border-color: var(--line);
  background: var(--surface-2);
}
.edge-card, .props-page .best-play-card { background: var(--success-soft); }
.edge-card::before, .props-page .best-play-card::before { background: var(--accent); opacity: 1; }
.edge-confidence { background: #dcefe5; color: #246a4d; }
html[data-theme="dark"] .edge-confidence { background: #244236; color: #92dab9; }
.edge-play, .formation-notes strong, .best-play-reason strong { color: var(--text); }
.edge-skeleton { background: linear-gradient(100deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; }

.projection-strip, .props-page .projection-strip { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); }
.projection-team, .projection-center, .props-page .projection-team, .props-page .projection-center { min-height: 108px; background: var(--surface); }
.projection-center { border-color: var(--line); background: var(--surface-2); }
.projection-team span { color: var(--text); }
.home-tone strong { color: var(--accent-2); }
.away-tone strong { color: var(--amber); }

.segmented { border-color: var(--line); background: var(--surface-2); }
.segmented button { color: var(--muted); }
.segmented button.active { background: var(--surface); color: var(--accent-2); box-shadow: var(--shadow); }
.prop-toolbar { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); }
.role-pill { background: #e9f0ff; color: #355ec5; }
.away-player .role-pill { background: #fff2df; color: #9a5a14; }
html[data-theme="dark"] .role-pill { background: #26334f; color: #a9bdf5; }
html[data-theme="dark"] .away-player .role-pill { background: #4a3420; color: #efbd7e; }
.prop-number.fair, .market-value.fair, .best-play-prices .best-edge, .prop-number.edge.positive { color: var(--accent); }
.prop-number.market, .market-value.best, .parlay-leg-stat.market strong { color: var(--amber); }
.prop-number.edge.negative, .market-value.edge.negative { color: var(--danger); }
.parlay-summary { border-color: var(--line); background: var(--surface-2); }
.parlay-add { background: var(--accent); border-color: var(--accent); color: #fff; }

.top-props { margin-bottom: 16px; }
.props-page .best-play-rows { padding: 14px 18px 18px; }
.props-page .best-play-card { min-height: 154px; }
.best-play-card > p { color: var(--muted); }
.best-play-prices, .best-play-foot, .edge-prices { border-color: var(--line); }
.market-header, .prop-table-header { color: var(--muted); }
.market-row, .prop-row { background: transparent; }
.market-row:nth-child(even), .prop-row:nth-child(even) { background: var(--surface-2); }
.method-note p, footer { color: var(--muted); }
footer { border-color: var(--line); }

@media (max-width: 820px) {
  main { padding-top: 14px; }
  .topbar-actions .topbar-meta { display: none; }
  .props-page .best-play-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .site-shell, .props-page .site-shell { padding: 0 10px; }
  .topbar, .props-page .topbar { min-height: 64px; padding: 9px 2px; }
  .brand-mark, .props-page .brand-mark { width: 30px; height: 30px; }
  .brand strong { font-size: 15px; }
  .theme-toggle { min-height: 36px; padding: 0 11px; }
  .product-nav { gap: 2px; }
  .product-nav a { padding: 8px; }
  .panel-heading, .card-heading, .props-page .panel-heading, .props-page .card-heading { padding: 15px 14px; }
  .panel-heading h2, .card-heading h2, .props-page .panel-heading h2, .props-page .card-heading h2 { font-size: 18px; }
  .props-page .best-play-rows { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .props-page .best-play-card { min-height: 0; }
  .recap-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px 16px; }
  .recap-price, .recap-ev { grid-row: 2; }
  .recap-result { grid-column: 2; grid-row: 1; }
}

.shot-map { margin: 12px 20px 4px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.shot-map-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 0 0 4px; min-height: 0; }
.shot-map-heading h3 { margin: 2px 0 0; font: 800 14px/1.2 Manrope, sans-serif; }
.shot-map-status { color: var(--muted); font-size: 10px; text-align: right; max-width: 42%; }
.shot-map-readout { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; color: var(--text); font-size: 12px; }
.shot-map-readout span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.shot-map-pitch .zone-label { fill: #fff; font: 600 2.1px Manrope, sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 0.25px; }
.shot-map-pitch-wrap { width: 100%; background: #247a4f; border-radius: 10px; padding: 8px; }
.shot-map-pitch { display: block; width: 100%; height: auto; }
.shot-map-pitch .pitch-grass { fill: #247a4f; }
.shot-map-pitch .pitch-line { stroke: rgba(255,255,255,.78); stroke-width: 0.45; fill: none; }
.shot-map-pitch .pitch-spot { fill: rgba(255,255,255,.85); }
.shot-dot { fill: rgba(255,255,255,.62); stroke: rgba(0,0,0,.15); stroke-width: 0.15; }
.shot-dot.on { fill: #d7ecff; }
.shot-dot.goal { fill: #f4d35e; }
.shot-map-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.shot-zone { display: grid; gap: 1px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); text-align: left; cursor: default; }
.shot-zone strong { font-size: 10px; }
.shot-zone span { color: var(--muted); font-size: 9px; }
.shot-zone b { font: 800 12px Manrope, sans-serif; }
.shot-zone.hot b { color: var(--accent); }
.shot-zone.cold b { color: var(--danger); }
@media (max-width: 720px) { .shot-map-zones { grid-template-columns: 1fr 1fr; } }

.shot-map-overlays { display: flex; gap: 6px; margin: 6px 0 8px; padding: 0; }
.shot-overlay { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 6px 12px; font-size: 11px; cursor: pointer; pointer-events: auto; }
.shot-overlay.active { border-color: var(--accent); color: var(--accent); }
.shot-map-pitch-wrap { max-height: 230px; }

.shot-map { position: relative; z-index: 1; overflow: visible; margin-top: 8px; }
.shot-map-heading h3 { display: none !important; }



.player-detail-ladders { position: relative; z-index: 0; background: var(--surface); }

.shot-map-readout span{cursor:pointer}

.shot-map-heading .section-kicker { font-size: 11px; letter-spacing: .12em; }
.shot-map-status { font-size: 11px; color: var(--muted); }
.shot-map-stats { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 8px; }
.shot-map-stats em { font-style: normal; color: var(--text); font-size: 13px; font-weight: 700; }
.shot-map-stats em + em { color: var(--muted); font-weight: 600; }
.shot-map-stats em.hot { color: var(--accent); }
.shot-map-stats em.cold { color: var(--danger); }
.shot-map-legend { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.4; max-width: 42rem; }
.shot-overlay:hover, .shot-overlay:focus-visible { border-color: var(--accent-2); outline: 0; }
.zone-badge rect { fill: rgba(10,18,14,.72); }
.zone-badge-main { fill: #fff; font: 700 2.3px Manrope, sans-serif; }
.zone-badge-sub { fill: #d7e4dc; font: 600 1.6px Manrope, sans-serif; }
.zone-badge.hot .zone-badge-sub { fill: #b7f0c4; }
.zone-badge.cold .zone-badge-sub { fill: #ffb4b0; }
@media (max-width: 720px) {
  .shot-map-overlays { flex-direction: column; align-items: stretch; }
  .shot-overlay { width: 100%; text-align: left; }
}

.shot-map-pitch .goal-mark { fill: #fff; font: 700 2.3px Manrope, sans-serif; letter-spacing: 0.2px; }
.shot-map-pitch .pitch-grass { fill: #2b7a52; }
.shot-map-legend { max-width: 46rem; }

.shot-map-legend {
  display: block;
  width: 100%;
  margin: 16px 0 12px;
  padding: 0;
  overflow: visible;
  white-space: normal;
  line-height: 1.45;
  max-width: none;
  position: static;
}
.shot-map, .shot-map-pitch-wrap { overflow: visible; }
.shot-map-pitch .goal-frame { fill: none; stroke: #fff; stroke-width: 0.55; }
.shot-map-pitch .goal-mark { fill: #16331f; font: 700 2.1px Manrope, sans-serif; }
.shot-map-pitch .zone-rest { stroke-dasharray: 0.9 0.7; }

.shot-map-pitch { width: 100%; height: auto; max-height: none; }
.shot-map-pitch-wrap { max-height: none; background: transparent; padding: 0; }
.shot-map-zones { display: block !important; margin-top: 12px; }
.shot-map-pitch .goal-mark { fill: #16331f; font: 700 14px Manrope, sans-serif; }
.shot-map-pitch .goal-frame-fill { fill: none; stroke: #16331f; stroke-width: 3; }
.shot-map-pitch .pitch-grass { fill: #2b7a52; }
.shot-map-pitch .pitch-line { fill: none; stroke: rgba(255,255,255,.88); stroke-width: 2; }
.shot-map-pitch .pitch-spot { fill: #16331f; }
.shot-map-pitch .goal-mark-dot { fill: #fff; stroke: #16331f; stroke-width: 1.5; }
.shot-map-pitch .leader-halo { fill: none; stroke: rgba(255,255,255,.72); stroke-width: 3.5; }
.shot-map-pitch .leader-line { fill: none; stroke: #16331f; stroke-width: 1.25; }
.shot-map-pitch .leader-dot { fill: #16331f; }
.shot-map-pitch .callout-name { fill: #6b7c70; font: 600 11px Manrope, sans-serif; letter-spacing: .12em; }
.shot-map-pitch .callout-shots { fill: #16331f; font: 600 23px Manrope, sans-serif; }
.shot-map-pitch .callout-xg { fill: #5b6a60; font: 500 12.5px Manrope, sans-serif; }
.shot-map-pitch .callout-def { fill: #16331f; font: 600 12.5px Manrope, sans-serif; }
.shot-map-legend { margin: 16px 0 12px; overflow: visible; white-space: normal; line-height: 1.45; }
.shot-board-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.shot-board-table th, .shot-board-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.shot-board-table th:first-child, .shot-board-table td:first-child { text-align: left; }

.shot-map-pitch-wrap { max-height: none !important; overflow: visible !important; background: transparent; padding: 8px 0 0; }
.shot-map-pitch { max-height: none !important; width: 100%; height: auto; aspect-ratio: 12 / 5; }
.shot-map { overflow: visible !important; }


/* —— mobile product —— */
html { -webkit-text-size-adjust: 100%; }
body { padding-bottom: env(safe-area-inset-bottom); }
.board-split {
  padding: 10px 16px 6px;
  color: var(--muted);
  font: 800 11px/1 Manrope, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

@media (max-width: 760px) {
  .tracking-metrics { grid-template-columns: repeat(2, 1fr); }
  .tracking-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .tracking-metrics > div:nth-child(4) { border-top: 1px solid var(--line); }
  .tracking-row { padding: 12px 16px; }
  .tracking-row strong { font-size: 11px; }
  .tracking-row small { white-space: normal; }
}

@media (max-width: 760px) {
  .site-shell { padding: 0 12px calc(16px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 64px; padding: 10px 0; gap: 8px; }
  .product-nav { order: 3; width: 100%; }
  .product-nav a { flex: 1; min-height: 44px; display: grid; place-items: center; font-size: 14px; }
  .theme-toggle { min-height: 40px; font-size: 12px; }
  .topbar-meta { display: none; }

  .props-page main, body.props-page main {
    display: flex;
    flex-direction: column;
  }
  .props-hero { order: 0; padding: 16px 4px 8px; }
  .props-hero .hero-copy, .props-hero .hero-stat { display: none; }
  .props-hero h1 { font-size: 28px; line-height: 1.1; }
  .control-panel { order: 1; }
  .props-projection { order: 2; }
  .prop-recap { order: 3; }
  .prop-toolbar { order: 4; }
  .prop-board { order: 5; }
  .top-props { order: 6; }
  .shot-ladders { order: 7; }
  .parlay-builder { order: 8; }
  .match-lab { order: 9; }
  .formation-grid { order: 10; }
  .props-method { order: 11; }

  .top-props.is-empty, .shot-ladders.is-empty { display: none; }

  .live-fixture-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .live-fixture-bar .fixture-title { grid-column: 1 / -1; }
  .live-fixture-bar label { min-width: 0; }
  .live-fixture-bar select { width: 100%; }
  .ghost-button { min-width: 44px; padding: 0 12px; }

  .prop-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .prop-toolbar .segmented, .prop-toolbar .player-search { grid-column: 1 / -1; }
  .segmented { display: flex; }
  .segmented button { flex: 1; min-height: 44px; font-size: 13px; }

  .prop-table-header { display: none; }
  .prop-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 8px;
    min-height: 0;
    padding: 14px 14px 12px 16px;
  }
  .prop-player { grid-column: 1 / -1; }
  .prop-player small {
    white-space: normal;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .prop-player strong { font-size: 16px; white-space: normal; }
  .prop-number { display: none; text-align: left; font-size: 16px; }
  .prop-number.fair, .prop-number.market, .prop-number.edge { display: block; }
  .prop-number::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
  }
  .prop-number.market small { font-size: 11px; white-space: normal; }
  .prop-number.edge small { font-size: 11px; }

  .recap-rows { display: grid; gap: 0; }
  .recap-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 12px 14px;
  }
  .recap-player { grid-column: 1 / -1; }
  .recap-player small, .recap-price small, .recap-ev small { font-size: 12px; }
  .recap-result { min-height: 32px; font-size: 12px; }

  .parlay-workspace, .parlay-controls, .parlay-leg {
    display: grid;
    grid-template-columns: 1fr;
  }
  .parlay-summary { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; }
  .parlay-leg { padding: 12px; }

  .player-dialog { width: 100%; max-width: 100%; height: 100dvh; margin: 0; border-radius: 0; }
  .player-dialog-close { width: 44px; height: 44px; font-size: 24px; }
  .player-dialog-header { padding: 16px 16px 12px; }
  .player-dialog-body { padding: 0 12px 24px; }

  .shot-map-pitch-wrap {
    max-height: none !important;
    overflow: visible !important;
    padding: 0;
  }
  .shot-map-pitch {
    max-height: none !important;
    width: 100%;
    height: auto;
    aspect-ratio: 576 / 368;
  }
  .shot-map-legend { font-size: 13px; line-height: 1.45; }
  .shot-board-table { font-size: 13px; }
  .shot-board-table th, .shot-board-table td { padding: 8px 6px; }

  .best-play-card p, .best-play-reason { font-size: 13px; }
  .price-note { font-size: 12px; }
  .panel-heading, .card-heading { padding: 16px; gap: 12px; align-items: start; flex-direction: column; }
  .panel-heading h2, .card-heading h2 { font-size: 20px; }
}

@media (max-width: 760px) {
  .shot-map-overlays { flex-wrap: wrap; }
  .shot-overlay { min-height: 40px; }
}

.prop-number.market small { white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.35; }
.prop-player small { white-space: normal; text-overflow: unset; overflow: visible; }
@media (max-width: 760px) {
  .prop-number.market { grid-column: 1 / -1; }
  .prop-player small { -webkit-line-clamp: 4; }
}

.shot-map-status { overflow: visible; white-space: nowrap; }
.shot-map-pitch .callout-shots { font: 600 16px Manrope, sans-serif !important; }
.shot-map-pitch .callout-name { font: 600 10px Manrope, sans-serif !important; letter-spacing: .1em; }

.slip-optimizer { margin: 26px 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.slip-intro { max-width: 680px; margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.slip-stepper { display: flex; gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 18px 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.slip-stepper span { display: inline-flex; gap: 8px; align-items: center; }
.slip-stepper span.active { color: var(--text); }
.slip-stepper b { color: var(--accent); }
.slip-grid { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr); gap: 18px; }
.slip-upload-panel, .slip-review-panel { min-height: 260px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.slip-upload-drop { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px dashed var(--line); border-radius: 12px; cursor: pointer; text-align: center; }
.slip-upload-drop strong { font-size: 16px; }
.slip-upload-drop span:not(.upload-icon) { color: var(--muted); font-size: 12px; }
.slip-upload-drop em { padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 12px; font-style: normal; font-weight: 800; }
.slip-upload-drop:hover { border-color: var(--accent); background: var(--surface-2); }
.slip-file { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.slip-file img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }
.slip-file button { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-decoration: underline; }
.slip-file button[hidden] { display: none !important; }
.slip-file button:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
.slip-review-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.slip-review-head h3 { margin: 5px 0 0; font-size: 23px; }
.slip-review-legs { margin-top: 18px; }
.slip-empty { margin: 0; padding: 22px 0; color: var(--muted); line-height: 1.5; }
.slip-leg { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.slip-leg div { display: grid; gap: 5px; }
.slip-leg span { color: var(--muted); font-size: 12px; }
.slip-leg b { color: var(--muted); white-space: nowrap; font-size: 11px; font-weight: 700; }
.slip-parlay-summary { margin-top: 18px; padding: 18px; border: 1px solid var(--accent); border-radius: 14px; background: var(--surface-2); }
.slip-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.slip-summary-heading strong { font-size: 18px; }
.slip-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.slip-summary-grid > div { display: grid; gap: 5px; min-width: 0; }
.slip-summary-grid span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.slip-summary-grid strong { color: var(--accent); font-size: 22px; font-variant-numeric: tabular-nums; }
.slip-summary-grid strong.negative { color: var(--danger, #b33a2b); }
.slip-parlay-summary p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.slip-verdict { display: grid; gap: 5px; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); }
.slip-verdict span { color: var(--muted); line-height: 1.45; }
.slip-optimize-button { margin-top: 14px; }
@media (max-width: 760px) {
  .slip-optimizer { padding: 14px; border-radius: 14px; }
  .slip-stepper { gap: 12px; font-size: 10px; }
  .slip-grid { grid-template-columns: 1fr; }
  .slip-upload-panel, .slip-review-panel { min-height: 0; padding: 14px; }
  .slip-review-head { display: grid; }
  .slip-summary-heading { display: grid; gap: 5px; }
.slip-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2026-09 customer hierarchy and readability pass */
[hidden] { display: none !important; }
.compact-action {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.compact-action:hover, .compact-action:focus-visible { border-color: var(--accent-2); outline: 0; }
.weekly-rows:not(.show-all) .edge-card:nth-of-type(n + 4) { display: none; }
.edge-book { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: normal; }
.edge-book a { flex: none; color: var(--accent-2); font-size: 11px; font-weight: 800; text-decoration: none; }
.edge-book a:hover, .edge-book a:focus-visible { text-decoration: underline; }
.market-secondary { display: none; }
.market-rows.show-all .market-secondary { display: grid; }
.market-row.is-qualified { background: var(--success-soft); box-shadow: inset 3px 0 var(--accent); }
.market-actions { display: flex; justify-content: center; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.market-actions .compact-action { width: min(100%, 300px); }

.props-page main { display: flex; flex-direction: column; }
.props-page .control-panel { order: 0; }
.props-page .props-projection { order: 1; }
.matchup-empty { order: 1; display: grid; gap: 5px; margin: 12px 0; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.matchup-empty strong { font: 800 17px Manrope, sans-serif; }
.matchup-empty span { color: var(--muted); font-size: 13px; }
.matchup-empty[hidden] { display: none; }
.props-page main.no-active-matchup .tool-tabs, .props-page main.no-active-matchup .tool-panel { display: none !important; }
.tool-tabs { order: 2; display: flex; gap: 5px; margin: 2px 0 14px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); scrollbar-width: thin; }
.tool-tabs button { flex: 1 0 auto; min-height: 42px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 800; }
.tool-tabs button:hover, .tool-tabs button:focus-visible { color: var(--text); outline: 2px solid color-mix(in srgb, var(--accent-2) 45%, transparent); outline-offset: -2px; }
.tool-tabs button.active { background: #eaf0ff; color: #355ec5; box-shadow: var(--shadow); }
html[data-theme="dark"] .tool-tabs button.active { background: #26334f; color: #a9bdf5; }
.tool-panel { order: 3; }
.tool-panel[hidden], .board-rest[hidden] { display: none !important; }
.advanced-controls { border-top: 1px solid var(--line); }
.advanced-controls > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 20px; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 800; list-style-position: inside; }
.advanced-controls > summary small { color: var(--muted); font-size: 12px; font-weight: 500; }
.advanced-controls[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.board-empty-plays { padding: 18px 20px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.5; max-width: 46rem; margin-inline: auto; }
.board-empty-plays strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 14px; }
.board-rest-toggle { width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--accent-2); cursor: pointer; font-size: 13px; font-weight: 800; }
.board-rest-toggle:hover, .board-rest-toggle:focus-visible { background: color-mix(in srgb, var(--accent-2) 8%, var(--surface)); outline: 0; }
.best-play-card[role="button"] { cursor: pointer; }
.best-play-card[role="button"]:hover, .best-play-card[role="button"]:focus-visible { border-color: var(--accent); outline: 0; box-shadow: 0 8px 24px rgba(16, 24, 40, .10); transform: translateY(-1px); }
.best-play-foot strong { flex: none; color: var(--accent-2); font-size: 10px; }

/* Critical betting context should not be rendered as microcopy. */
.board-status, .weekly-range, .fixture-title, .team-picker > label, .projection-team small,
.projection-center span, .projection-center small, .market-label small, .price-note,
.best-play-card > p, .best-play-reason, .best-play-foot, .prop-player small,
.prop-number.market small, .prop-number.edge small, .method-note p { font-size: 12px; }
.market-header, .prop-table-header { font-size: 10px; }
.market-label strong, .prop-player strong { font-size: 14px; }
.edge-time, .edge-book, .fixture-quick-meta { font-size: 11px; }
.edge-prices small, .best-play-prices small { font-size: 10px; }
.market-value.best small, .market-value.edge small { font-size: 10px; }

button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (max-width: 760px) {
  .tool-tabs { position: sticky; z-index: 12; top: 0; margin-right: -2px; margin-left: -2px; border-radius: 0 0 12px 12px; }
  .tool-tabs button { min-height: 44px; padding: 0 13px; font-size: 12px; }
  .props-page .prop-toolbar[data-tool-panel="board"] { position: sticky; z-index: 10; top: 55px; }
  .advanced-controls > summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; min-height: 60px; padding: 10px 14px; }
  .fixture-quick-prices { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fixture-quick-card { flex: 0 0 86%; scroll-snap-align: start; }
  .prop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop-number.projection-stat, .prop-number[data-label="PROB"] { display: block; }
  .prop-number.market { grid-column: 1 / -1; }
  .market-row { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(72px, auto)); }
  .weekly-actions { align-items: center; }
  .weekly-actions .board-status { flex: 1; }
  .edge-book { align-items: flex-start; }
}


/* —— Auth-check skeleton (login-first; no free board) —— */
.auth-checking { display: none; margin: 24px 0 8px; }
body.is-checking-auth .auth-checking { display: block; }
body:not(.is-checking-auth) .auth-checking { display: none !important; }
.auth-checking-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.auth-checking-card strong { display: block; font: 800 15px/1.2 Manrope, sans-serif; }
.auth-checking-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.auth-checking-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-checking-spinner { animation: none; border-top-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }
}

/* —— Membership gate / teaser / auth chrome —— */
/* Fail closed: paid UI only when body.is-member is set after /api/auth/me */
body:not(.is-member) .member-only { display: none !important; }
body:not(.is-teaser) .teaser-only { display: none !important; }
body.is-teaser .teaser-only,
body.is-teaser .teaser-only[hidden] { display: block !important; }
body.is-checking-auth .teaser-only { opacity: 0; }
body.is-member .teaser-only { display: none !important; }

.auth-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.auth-link {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.auth-link:hover { color: var(--text); }
.auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.auth-cta:hover { border-color: var(--accent); }
.auth-member {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.member-email {
  color: var(--muted);
  font-size: 11px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-signout { color: var(--accent-2); }

/* QUARANTINED teaser UI (login-first funnel) — unused HTML; kept for possible restore. */
.teaser-gate { margin: 0 0 28px; }
.teaser-panel {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18,34,43,.93), rgba(10,20,26,.94));
}
html[data-theme="light"] .teaser-panel,
:root .teaser-panel {
  background: var(--surface);
  box-shadow: var(--shadow);
}
.teaser-copy {
  max-width: 640px;
  margin: 10px 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.teaser-panel .locked-preview {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  filter: none;
}
.locked-preview .lock-badge {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.locked-preview .edge-prices,
.locked-preview .edge-play,
.locked-preview .edge-time {
  filter: blur(3.5px);
  user-select: none;
}
.locked-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 12px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 92%, transparent) 35%);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.locked-hint { color: var(--accent-2); font-size: 11px; font-weight: 800; }

.wins-gallery {
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}
.wins-gallery h3 {
  margin: 0 0 8px;
  font: 800 clamp(20px, 3vw, 26px)/1.15 Manrope, sans-serif;
  letter-spacing: -.02em;
}
.wins-copy {
  max-width: 560px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.wins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .wins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .wins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wins-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--bg) 88%, #000);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .wins-card {
  background: color-mix(in srgb, var(--surface-2, var(--bg)) 92%, #0a141a);
}
.wins-card a {
  display: block;
  text-decoration: none;
}
.wins-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #0a141a;
  transition: transform .2s ease, opacity .2s ease;
}
.wins-card a:hover img,
.wins-card a:focus-visible img {
  transform: scale(1.015);
  opacity: .96;
}
.wins-card a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  outline-offset: 2px;
}
.wins-card figcaption {
  padding: 10px 12px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.wins-disclaimer {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
}

.access-cta-panel {
  margin-top: 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.access-cta-panel h3 {
  margin: 0 0 8px;
  font: 800 18px Manrope, sans-serif;
}
.access-cta-panel p {
  margin: 0 0 16px;
  max-width: 640px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.access-cta-panel a { color: var(--accent-2); }
.teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.teaser-actions .auth-cta { min-height: 44px; padding: 0 18px; }
.auth-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text) !important;
}
.teaser-disclaimer {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 38px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}
.footer-links a:hover { color: var(--accent-2); }

/* Login */
.login-main, .legal-main {
  padding: clamp(28px, 5vw, 56px) 0 40px;
  display: grid;
  justify-items: center;
}
.login-card, .legal-card {
  width: min(100%, 520px);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.legal-card { width: min(100%, 760px); }
.login-card h1, .legal-card h1 {
  margin: 0;
  font: 800 clamp(28px, 5vw, 40px)/1.05 Manrope, sans-serif;
  letter-spacing: -.03em;
}
.login-copy {
  margin: 12px 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 6px; }
.login-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-form input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, var(--bg));
  color: var(--text);
  font: inherit;
}
.login-form input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  outline-offset: 1px;
}
.login-submit { width: 100%; min-height: 48px; border: 0; cursor: pointer; font: inherit; }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}
.login-help {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.login-help a { color: var(--accent-2); }

.login-steps {
  margin: 0.75rem 0 1rem 1.1rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.login-steps li { margin: 0.35rem 0; }
.login-steps a { color: var(--accent-2); }

.legal-card h2 {
  margin: 28px 0 10px;
  font: 800 18px Manrope, sans-serif;
}
.legal-card p, .legal-card li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.legal-card ul { padding-left: 1.2em; }
.legal-card a { color: var(--accent-2); }

@media (max-width: 760px) {
  .auth-chrome { gap: 6px; }
  .member-email { display: none; }
  .teaser-actions { flex-direction: column; align-items: stretch; }
  .teaser-actions .auth-cta,
  .teaser-actions .auth-secondary { width: 100%; }
}