/* ============================================================
   The Lab Analytics — NFL section · shared design system (mockup)
   Dark editorial + blue accent, Bahnschrift, rounded elevated cards.
   Single source of truth for all NFL section pages.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:'Bahnschrift','DIN Alternate','Hanken Grotesk','Century Gothic',sans-serif;
  background:#050505; color:#cbd5e1; font-size:15px; font-weight:500; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:#2273c5; text-decoration:none; transition:color 180ms; } a:hover{ color:#4a94de; }

/* ---- header / nav ---- */
.header{ background:#020202; border-bottom:1px solid #232323; position:sticky; top:38px; z-index:50; }
.header-inner{ padding:14px 24px 0; max-width:1100px; margin:0 auto; }
.header-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.header-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.header-brand:hover{ color:inherit; text-decoration:none; }
.header-logo{ height:36px; width:36px; border-radius:6px; display:block; object-fit:contain; }
.header h1{ font-size:20px; font-weight:700; color:#F8FAFC; letter-spacing:0.3px; }
.header h1 .sep{ color:#2e2e2e; margin:0 8px; font-weight:300; } .header h1 .sport{ color:#94A3B8; font-weight:400; }
.season-tag{ font-size:10px; color:#2273c5; text-transform:uppercase; letter-spacing:2px; font-weight:600; border:1px solid #1e3a6e; padding:3px 10px; border-radius:4px; }
.header-nav{ display:flex; gap:3px; border-top:1px solid #161616; margin:0 -24px; padding:7px 22px 9px; flex-wrap:wrap; }
.header-nav a{ position:relative; padding:8px 14px; font-size:12px; color:#94a3b8; letter-spacing:0.4px; font-weight:600; text-transform:uppercase; border-radius:8px; transition:color 160ms ease, background 160ms ease; }
.header-nav a:hover{ color:#e8edf3; background:rgba(255,255,255,0.05); }
.header-nav a.here{ color:#cfe3fb; background:rgba(34,115,197,0.15); }
.header-nav a.here::after{ content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:linear-gradient(90deg,#2273c5,#4a94de); }
.mock-ribbon{ background:#2e2210; color:#c89040; border-bottom:1px solid #3a2c12; font-size:10px; letter-spacing:1px; text-align:center; padding:6px 16px; text-transform:uppercase; }
.shell{ max-width:1100px; margin:0 auto; padding:0 24px; }

/* ---- top utility bar (auth) ---- */
.topbar{ background:#070707; border-bottom:1px solid #161616; position:sticky; top:0; z-index:60; }
.topbar-inner{ max-width:1100px; margin:0 auto; padding:0 24px; height:38px; display:flex; align-items:center; gap:16px; }
.topbar-tag{ margin-right:auto; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#566072; }
.tb-link{ font-size:12px; font-weight:600; letter-spacing:0.3px; color:#aab4c0; }
.tb-link:hover{ color:#fff; text-decoration:none; }
.tb-cta{ font-size:12px; font-weight:800; letter-spacing:0.3px; color:#1a1206; padding:6px 15px; border-radius:7px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); box-shadow:0 6px 16px -8px var(--gold-glow); transition:transform 140ms, box-shadow 140ms; }
.tb-cta:hover{ transform:translateY(-1px); text-decoration:none; color:#1a1206; box-shadow:0 10px 22px -8px var(--gold-glow); }

/* ---- verdict strip ---- */
.verdict-bar{ border-bottom:1px solid #161616; }
.verdict-inner{ padding:10px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; }
.verdict-tag{ font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#aab4c0; background:#1e1e1e; padding:3px 10px; border-radius:4px; }
.v-go{ color:#22C55E; font-weight:700; } .v-no{ color:#64748B; font-weight:600; }
.verdict-note{ color:#64748B; margin-left:auto; }

/* ---- HERO ---- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid #1a1a1a; background:#040404; }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(34,115,197,0.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 64px); }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:36px; align-items:center; padding:40px 0 44px; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#2273c5; margin-bottom:14px; }
.hero-h{ font-family:'Hanken Grotesk',sans-serif; font-size:46px; line-height:1.04; font-weight:800; letter-spacing:-0.02em; color:#F8FAFC; }
.hero-h .accent{ background:linear-gradient(90deg,#4a94de,#2273c5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub{ margin:16px 0 22px; font-size:16px; color:#94A3B8; max-width:46ch; line-height:1.55; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-size:12px; color:#b8c2cf; background:#0d0d0d; border:1px solid #232323; border-radius:999px; }
.chip b{ color:#F8FAFC; font-weight:700; font-variant-numeric:tabular-nums; }
.chip.up b{ color:#22C55E; } .chip.accent b{ color:#4a94de; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; border-radius:8px; border:1px solid #2a2a2a; color:#cbd5e1; transition:all 180ms; }
.btn:hover{ border-color:#3a3a3a; color:#fff; text-decoration:none; transform:translateY(-1px); }
.btn.primary{ background:linear-gradient(135deg,#2273c5,#1a5599); border-color:transparent; color:#fff; box-shadow:0 6px 20px -8px rgba(34,115,197,0.7); }
.btn.primary:hover{ box-shadow:0 10px 26px -8px rgba(34,115,197,0.9); }

.feat{ background:linear-gradient(180deg,#0e0e0e,#0a0a0a); border:1px solid #242424; border-radius:14px; padding:18px 20px 16px; box-shadow:0 24px 60px -28px rgba(0,0,0,0.9); position:relative; overflow:hidden; isolation:isolate; }
/* matchup background: team-colored glows + ghosted logos behind the card */
.feat-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 45%, var(--home-glow,rgba(34,115,197,0.18)), transparent 55%),
    radial-gradient(120% 90% at 100% 55%, var(--away-glow,rgba(80,80,80,0.14)), transparent 55%); }
.feat-bg img{ position:absolute; top:50%; height:150px; width:150px; object-fit:contain; opacity:0.10; filter:saturate(1.4); }
.feat-bg .bg-home{ left:10px; transform:translateY(-52%); }
.feat-bg .bg-away{ right:10px; transform:translateY(-48%); }
.feat-pick.tc{ color:var(--home,#2273c5); border-color:var(--home,#1e3a6e); }
.feat-row.win{ position:relative; }
.feat-row.win::before{ content:""; position:absolute; left:-20px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--home,#2273c5); }
.feat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.feat-label{ font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#64748B; }
.live-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#ff5a5a; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#ff4040; animation:pulse 1.3s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,64,64,0.65); opacity:1; } 50%{ box-shadow:0 0 0 6px rgba(255,64,64,0); opacity:0.4; } }
.feat-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.feat-row + .feat-row{ border-top:1px solid #161616; }
.feat-row img{ height:40px; width:40px; object-fit:contain; }
.feat-name{ flex:1; font-size:18px; font-weight:700; color:#94A3B8; }
.feat-row.win .feat-name{ color:#F8FAFC; }
.feat-pick{ font-size:9px; font-weight:800; letter-spacing:0.6px; color:#2273c5; border:1px solid #1e3a6e; border-radius:4px; padding:2px 6px; margin-left:8px; vertical-align:middle; }
.feat-score{ font-size:30px; font-weight:800; color:#F8FAFC; font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }
.feat-row:not(.win) .feat-score{ color:#5b6573; }
.feat-meta{ margin-top:14px; padding-top:14px; border-top:1px solid #1a1a1a; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.conf-wrap{ flex:1; }
.conf-line{ display:flex; justify-content:space-between; font-size:11px; color:#64748B; margin-bottom:5px; } .conf-line b{ color:#cbd5e1; }
.conf-track{ height:6px; background:#1a1a1a; border-radius:99px; overflow:hidden; }
.conf-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--home,#2273c5),#4a94de); width:0; transition:width 1.1s cubic-bezier(.2,.85,.25,1); }
.edge-chip{ font-size:12px; font-weight:800; color:#22C55E; background:#0f2417; border:1px solid #1c3a26; border-radius:6px; padding:6px 10px; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- this-week strip ---- */
.strip-head{ display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 12px; }
.strip-title{ font-size:13px; font-weight:700; color:#F8FAFC; text-transform:uppercase; letter-spacing:0.8px; }
.strip-link{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#64748B; }
.strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.tile{ background:#0d0d0d; border:1px solid #232323; border-radius:10px; padding:12px; transition:transform 160ms, border-color 160ms, box-shadow 160ms; cursor:pointer; box-shadow:inset 0 2px 0 var(--tc,transparent); }
.tile:hover{ transform:translateY(-3px); border-color:var(--tc,#2273c5); }
.tile-row{ display:flex; align-items:center; gap:7px; padding:3px 0; font-size:13px; color:#94A3B8; font-weight:600; }
.tile-row img{ height:20px; width:20px; object-fit:contain; } .tile-row.win{ color:#F8FAFC; }
.tile-row .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tile-row .sc{ font-variant-numeric:tabular-nums; font-weight:700; }
.tile-foot{ margin-top:10px; padding-top:8px; border-top:1px solid #181818; display:flex; justify-content:space-between; align-items:center; }
.tile-when{ font-size:10px; color:#64748B; text-transform:uppercase; letter-spacing:0.4px; } .tile-when.live{ color:#ff5a5a; font-weight:700; }
.tile-edge{ font-size:11px; font-weight:700; color:#22C55E; font-variant-numeric:tabular-nums; }

/* ---- generic page wrappers ---- */
.wrap{ padding:28px 0 56px; }
.page{ padding:28px 0 56px; }
.cols{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.crumb{ font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:12px; }
.crumb a{ color:#64748B; } .crumb a:hover{ color:#2273c5; }
.page-title{ font-family:'Hanken Grotesk',sans-serif; font-size:30px; font-weight:800; letter-spacing:-0.01em; color:#F8FAFC; }
.subtitle{ font-size:13px; color:#64748B; margin:6px 0 22px; }
.section-title{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:#94A3B8; margin:30px 0 12px; }

/* ---- panels + tables ---- */
.panel{ background:#0d0d0d; border:1px solid #232323; border-radius:12px; overflow:hidden; }
.panel + .panel{ margin-top:18px; }
.panel-head{ padding:12px 16px; font-size:11px; font-weight:700; color:#2273c5; border-bottom:1px solid #232323; text-transform:uppercase; letter-spacing:1.2px; background:#080808; display:flex; justify-content:space-between; align-items:center; }
.panel-head .tiny{ color:#64748B; font-weight:600; letter-spacing:0.4px; }
table{ width:100%; border-collapse:collapse; }
caption{ text-align:left; padding:0; }
th{ text-align:left; font-size:10px; color:#64748B; font-weight:700; padding:8px 12px; border-bottom:1px solid #232323; text-transform:uppercase; letter-spacing:0.5px; background:#080808; }
th.r{ text-align:right; }
td{ padding:8px 12px; font-size:14px; border-bottom:1px solid #161616; }
td.r{ text-align:right; font-variant-numeric:tabular-nums; }
tr{ transition:background 140ms; } tbody tr:hover td{ background:#141414; }
.rk{ color:#64748B; width:32px; font-weight:700; font-variant-numeric:tabular-nums; } .top3 .rk{ color:#2273c5; }
.tm{ display:flex; align-items:center; gap:8px; } .tm img{ height:22px; width:22px; object-fit:contain; }
.tm b{ color:#F8FAFC; font-weight:600; } .conf{ color:#64748B; font-weight:400; font-size:11px; margin-left:2px; }
.rec{ color:#94A3B8; font-variant-numeric:tabular-nums; } .pos{ color:#22C55E; } .neg{ color:#c0564b; } .srs{ font-weight:700; }
.morelink{ display:block; padding:10px 16px; font-size:11px; color:#64748B; border-top:1px solid #232323; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.morelink:hover{ color:#2273c5; background:#141414; }

/* ---- sidebar ---- */
.sidebar-stack{ display:flex; flex-direction:column; gap:18px; }
.spark-wrap{ padding:16px; }
.spark-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.spark-big{ font-size:26px; font-weight:800; color:#22C55E; font-variant-numeric:tabular-nums; }
.spark-cap{ font-size:11px; color:#64748B; text-align:right; }
.spark-foot{ display:flex; justify-content:space-between; font-size:10px; color:#3f4854; margin-top:4px; font-variant-numeric:tabular-nums; }
.leader-row{ padding:10px 16px; border-bottom:1px solid #161616; display:flex; justify-content:space-between; align-items:baseline; gap:8px; transition:background 140ms; }
.leader-row:hover{ background:#141414; } .leader-row:last-of-type{ border-bottom:none; }
.leader-cat{ color:#64748B; font-size:10px; text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
.leader-team{ color:#b8c2cf; font-weight:600; font-size:13px; } .leader-val{ color:#2273c5; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.leader-val.green{ color:#22C55E; } .leader-val.grey{ color:#64748B; }
.update-note{ padding:10px 16px; font-size:10px; color:#64748B; border-top:1px solid #232323; letter-spacing:0.3px; }

/* ---- predictions: strips + tiers + game cards ---- */
.data-bar{ display:flex; align-items:center; gap:20px; padding:14px 0; border-bottom:1px solid #1a1a1a; flex-wrap:wrap; }
.day-indicator{ display:flex; align-items:center; gap:8px; padding-right:20px; border-right:1px solid #232323; }
.day-label{ font-size:11px; color:#94A3B8; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.day-date{ font-size:20px; font-weight:700; color:#F8FAFC; font-variant-numeric:tabular-nums; }
.data-metrics{ display:flex; gap:22px; flex:1; flex-wrap:wrap; }
.metric{ display:flex; flex-direction:column; gap:1px; }
.metric-label{ font-size:10px; color:#64748B; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.metric-value{ font-size:18px; font-weight:700; color:#cbd5e1; font-variant-numeric:tabular-nums; }
.metric-value.accent{ color:#4a94de; } .metric-value.green{ color:#22C55E; }
.results-banner{ display:flex; gap:24px; padding:10px 0; border-bottom:1px solid #1a1a1a; }
.results-label{ font-size:10px; color:#64748B; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-right:8px; }
.results-value{ font-size:14px; font-weight:700; color:#cbd5e1; font-variant-numeric:tabular-nums; }
.date-nav{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 0; border-bottom:1px solid #1a1a1a; }
.date-nav-btn{ font-size:12px; font-weight:600; color:#2273c5; padding:5px 12px; border:1px solid #232323; border-radius:6px; }
.date-nav-btn:hover{ background:#0d0d0d; } .date-nav-btn.disabled{ color:#2a2a2a; border-color:#161616; pointer-events:none; }
.date-nav-current{ font-size:14px; font-weight:700; color:#F8FAFC; }
.filter-bar{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #1a1a1a; flex-wrap:wrap; }
.search-box{ flex:1; max-width:300px; padding:9px 12px; background:#0d0d0d; border:1px solid #232323; border-radius:8px; color:#F8FAFC; font-family:inherit; font-size:13px; }
.search-box:focus{ outline:none; border-color:#2273c5; }
.filter-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-btn{ padding:7px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; background:#0d0d0d; border:1px solid #232323; border-radius:7px; color:#94A3B8; cursor:pointer; font-family:inherit; }
.filter-btn.active{ border-color:#2273c5; color:#2273c5; background:#0a1d2e; }
.filter-count{ font-size:12px; color:#64748B; margin-left:auto; }

.content{ padding:0 0 48px; }
.tier-section{ margin-top:18px; }
.tier-header{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.tier-chevron{ font-size:12px; color:#64748B; width:16px; }
.tier-label{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:#94A3B8; }
.tier-label-high{ color:#22C55E; } .tier-label-med{ color:#4a94de; } .tier-label-low{ color:#94A3B8; }
.tier-count{ font-size:11px; color:#64748B; font-weight:600; }
.tier-line{ flex:1; height:1px; background:#1a1a1a; }
.games-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; }

.game-card{ background:#0d0d0d; border:1px solid #232323; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform 160ms, border-color 160ms; }
.game-card:hover{ transform:translateY(-2px); border-color:#2f4d6e; }
.game-header{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#080808; border-bottom:1px solid #1c1c1c; }
.confidence-badge{ display:inline-flex; align-items:center; gap:7px; padding:3px 9px; border-radius:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.conf-high{ background:#0f2417; color:#22C55E; } .conf-medium{ background:#0a1d2e; color:#4a94de; } .conf-low{ background:#1e1e1e; color:#94A3B8; }
.conf-meter{ width:44px; height:5px; background:#1a1a1a; border-radius:99px; overflow:hidden; }
.conf-meter-fill{ height:100%; border-radius:99px; width:0; transition:width 1s cubic-bezier(.2,.85,.25,1); }
.conf-meter-high{ background:#22C55E; } .conf-meter-med{ background:#4a94de; } .conf-meter-low{ background:#606060; }
.edge-badge{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; }
.edge-pos{ background:#0f2417; color:#22C55E; } .edge-neg{ background:#161616; color:#64748B; }
.game-info{ padding:12px; flex:1; display:flex; flex-direction:column; gap:8px; }
.teams{ display:flex; flex-direction:column; gap:4px; }
.team{ display:flex; flex-direction:column; padding:5px 7px; border-left:3px solid transparent; border-radius:0 6px 6px 0; }
.team.winner{ border-left-color:var(--home,#2273c5); background:linear-gradient(90deg, color-mix(in srgb, var(--home,#2273c5) 16%, transparent), transparent 80%); }
.team.winner .pick-tag{ color:var(--home,#2273c5); border-color:color-mix(in srgb, var(--home,#2273c5) 50%, #1e3a6e); }
.team-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.team-left{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.team-name{ font-size:15px; font-weight:700; color:#F8FAFC; display:flex; align-items:center; gap:5px; }
.team-name img{ height:22px; width:22px; object-fit:contain; }
.team-name .pick-tag{ font-size:9px; font-weight:800; color:#2273c5; letter-spacing:0.5px; border:1px solid #1e3a6e; border-radius:4px; padding:1px 5px; margin-left:4px; }
.team-rank-badge{ font-size:9px; font-weight:700; color:#2273c5; background:#0a1d2e; padding:1px 5px; border-radius:3px; }
.team-meta{ display:flex; align-items:center; gap:8px; font-size:11px; }
.team-prob,.team-record{ color:#94A3B8; font-variant-numeric:tabular-nums; }
.team-ml{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; padding:2px 6px; border-radius:5px; align-self:flex-start; }
.team-ml.fav{ background:#0a1d2e; color:#4a94de; } .team-ml.dog{ background:#16130a; color:#c89040; }
.vs{ font-size:10px; color:#3f4854; font-weight:700; text-align:center; letter-spacing:1px; }
.prediction{ padding-top:8px; border-top:1px solid #1a1a1a; display:flex; justify-content:space-between; align-items:center; }
.pred-label{ font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:0.5px; }
.pred-team{ font-size:14px; font-weight:700; color:#4a94de; }
.final-score{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; min-width:28px; text-align:right; }
.final-score.winner{ color:#F8FAFC; } .final-score.loser{ color:#5b6573; }

/* ---- richer scores & standings ---- */
.score-highlights{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:8px 0 2px; }
.shl-card{ position:relative; overflow:hidden; background:linear-gradient(180deg,#101010,#0b0b0b); border:1px solid #232323; border-radius:12px; padding:14px 16px 14px 18px; }
.shl-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,#4a94de); }
.shl-k{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.9px; color:#64748B; }
.shl-v{ font-size:23px; font-weight:800; color:#F8FAFC; margin:4px 0 3px; font-variant-numeric:tabular-nums; letter-spacing:-0.3px; }
.shl-sub{ font-size:12px; color:#94A3B8; display:flex; align-items:center; gap:6px; }
.shl-sub img{ height:18px; width:18px; object-fit:contain; }

.game-card{ position:relative; }
.gc-ghost{ position:absolute; right:-12px; bottom:-16px; width:92px; height:92px; opacity:0.08; pointer-events:none; }
.gc-ghost img{ width:100%; height:100%; object-fit:contain; }
.gc-margin{ font-size:11px; font-weight:700; color:#9aa6b4; background:#16161b; border:1px solid #232323; border-radius:5px; padding:2px 8px; font-variant-numeric:tabular-nums; }
.final-score.winner::after{ content:"▸"; font-size:11px; color:var(--home,#4a94de); margin-left:6px; vertical-align:middle; }

.stand-table{ width:100%; border-collapse:collapse; }
.stand-table caption{ text-align:left; font-size:13px; font-weight:800; letter-spacing:0.4px; color:#cbd5e1; padding:0 0 8px; }
.stand-table th{ font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#5b6573; font-weight:700; text-align:right; padding:0 6px 6px; }
.stand-table th:first-child{ text-align:left; }
.stand-table td{ padding:6px 6px; border-top:1px solid #161616; font-size:13px; color:#cbd5e1; text-align:right; font-variant-numeric:tabular-nums; }
.stand-table td:first-child{ text-align:left; }
.stand-table .st-team{ display:flex; align-items:center; gap:8px; font-weight:600; color:#F8FAFC; }
.stand-table .st-team img{ height:20px; width:20px; object-fit:contain; }
.stand-table tr.leader td{ background:linear-gradient(90deg, rgba(232,192,103,0.10), transparent 75%); }
.stand-table tr.leader td:first-child{ box-shadow:inset 3px 0 0 var(--gold,#E8C067); }
.stand-table tr.leader .st-team{ color:#fff; }
.st-net.pos{ color:#22C55E; } .st-net.neg{ color:#ef6b6b; }
.stand-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }

/* ---- track record tear sheet ---- */
.tr-hero{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:center; padding:34px 0 26px; }
.tr-headline{ font-family:'Hanken Grotesk',sans-serif; font-size:44px; line-height:1.05; font-weight:800; letter-spacing:-0.025em; color:#F8FAFC; }
.tr-headline .accent{ background:linear-gradient(90deg,#4a94de,#2273c5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tr-lede{ margin:18px 0 0; font-size:16px; color:#9aa6b4; max-width:48ch; line-height:1.6; }
.tr-lede b{ color:#e2e8f0; font-weight:700; }
.tr-tear{ position:relative; overflow:hidden; border:1px solid #1d2a3d; border-radius:18px;
  background:linear-gradient(165deg,#0f1622,#080a0e); padding:30px 32px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(34,115,197,0.10); }
.tr-tear::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(34,115,197,0.22), transparent 55%); }
.tr-tear-k{ position:relative; font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:#4a94de; }
.tr-tear-big{ position:relative; font-family:'Hanken Grotesk',sans-serif; font-size:74px; font-weight:800;
  color:var(--gold); letter-spacing:-0.04em; line-height:0.92; margin:10px 0 4px; font-variant-numeric:tabular-nums; }
.tr-tear-unit{ font-size:24px; font-weight:800; color:#7a8aa0; letter-spacing:0.02em; margin-left:8px; }
.tr-tear-cap{ position:relative; font-size:13px; color:#9aa6b4; line-height:1.5; }
.tr-tear-cap b{ color:#cbd5e1; }
.tr-tear-row{ position:relative; display:flex; gap:30px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(74,148,222,0.16); }
.tr-tear-stat .n{ font-family:'Hanken Grotesk',sans-serif; font-size:24px; font-weight:800; color:#F8FAFC; font-variant-numeric:tabular-nums; line-height:1; }
.tr-tear-stat .n.green{ color:#34d27b; }
.tr-tear-stat .l{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.7px; color:#64748B; margin-top:6px; }

.tr-seasons{ border:1px solid #1d1d1d; border-radius:16px; background:#0b0b0b; padding:6px 22px 14px; }
.tr-srow{ display:grid; grid-template-columns:54px 70px 78px 1fr 78px; align-items:center; gap:18px; padding:15px 0; border-top:1px solid #161616; }
.tr-srow:first-child{ border-top:none; }
.tr-syear{ font-family:'Hanken Grotesk',sans-serif; font-size:19px; font-weight:800; color:#F8FAFC; }
.tr-sbets{ font-size:12px; color:#5b6573; font-variant-numeric:tabular-nums; }
.tr-sclv{ font-size:13px; font-weight:700; color:#9fb4cf; font-variant-numeric:tabular-nums; }
.tr-sbarwrap{ position:relative; height:24px; border-radius:6px;
  background:linear-gradient(90deg, rgba(239,107,107,0.07), transparent 50%, rgba(52,210,123,0.07)); }
.tr-sbarwrap::before{ content:""; position:absolute; left:50%; top:3px; bottom:3px; width:1px; background:#2a2a2a; }
.tr-sbar{ position:absolute; top:5px; bottom:5px; border-radius:4px; }
.tr-sbar.pos{ left:50%; background:linear-gradient(90deg,#1d7a47,#34d27b); }
.tr-sbar.neg{ right:50%; background:linear-gradient(90deg,#ef6b6b,#9e2b2b); }
.tr-sroi{ text-align:right; font-family:'Hanken Grotesk',sans-serif; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.tr-sroi.pos{ color:#34d27b; } .tr-sroi.neg{ color:#ef6b6b; }
.tr-srow.total{ border-top:1px solid rgba(232,192,103,0.30); margin-top:2px; }
.tr-srow.total .tr-syear{ color:var(--gold); font-size:16px; }
.tr-srow.total .tr-sroi{ color:var(--gold); }
.tr-clvrow{ display:grid; grid-template-columns:60px 88px 1fr 88px; align-items:center; gap:18px; padding:15px 0; border-top:1px solid #161616; }
.tr-clvrow:first-child{ border-top:none; }
.tr-clvtrack{ position:relative; height:22px; border-radius:6px; background:#121212; overflow:hidden; }
.tr-clvbar{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg,#2273c5,#4a94de); }
.tr-clvval{ text-align:right; font-family:'Hanken Grotesk',sans-serif; font-size:18px; font-weight:800; color:#4a94de; font-variant-numeric:tabular-nums; }
.tr-cap{ font-size:12px; color:#64748B; margin:12px 2px 0; line-height:1.55; }

.tr-pending{ display:flex; align-items:center; gap:16px; border:1px solid #1d1d1d; border-left:2px solid #2273c5;
  border-radius:12px; background:linear-gradient(90deg, rgba(34,115,197,0.06), #0a0a0a 60%); padding:18px 22px; }
.tr-pending .dot{ width:9px; height:9px; border-radius:99px; background:#4a94de; box-shadow:0 0 0 0 rgba(34,115,197,0.5); animation:trpulse 2.4s infinite; flex:none; }
@keyframes trpulse{ 0%{ box-shadow:0 0 0 0 rgba(34,115,197,0.5);} 70%{ box-shadow:0 0 0 11px rgba(34,115,197,0);} 100%{ box-shadow:0 0 0 0 rgba(34,115,197,0);} }
.tr-pending .pt{ font-size:14px; font-weight:700; color:#e2e8f0; }
.tr-pending .ps{ font-size:12.5px; color:#8a96a4; margin-top:2px; line-height:1.5; }
.tr-note{ border-top:1px solid #1a1a1a; margin-top:30px; padding-top:18px; font-size:13px; color:#7a8595; line-height:1.65; max-width:78ch; }
.tr-note b{ color:#cbd5e1; } .tr-note code{ font-size:12px; color:#9aa6b4; }
@media(max-width:820px){ .tr-hero{ grid-template-columns:1fr; gap:26px; } .tr-headline{ font-size:34px; } .tr-tear-big{ font-size:60px; }
  .tr-srow{ grid-template-columns:44px 1fr 66px; gap:12px; } .tr-sbets,.tr-sclv{ display:none; } }

/* ---- power rankings ---- */
.rk-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:10px 0 24px; }
.rk-pod{ position:relative; overflow:hidden; border:1px solid #1f1f1f; border-radius:16px;
  background:linear-gradient(180deg,#101010,#0a0a0a); padding:20px 22px; display:flex; align-items:center; gap:16px; }
.rk-pod::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 110% at 110% -10%, color-mix(in srgb, var(--tc,#4a94de) 26%, transparent), transparent 58%); }
.rk-pod.first{ border-color:rgba(232,192,103,0.42); box-shadow:0 30px 70px -44px rgba(232,192,103,0.4); }
.rk-pod-rank{ position:relative; font-family:'Hanken Grotesk',sans-serif; font-size:38px; font-weight:800; color:#272727; line-height:1; width:34px; }
.rk-pod.first .rk-pod-rank{ color:var(--gold); }
.rk-pod img{ height:52px; width:52px; object-fit:contain; position:relative; }
.rk-pod-body{ position:relative; min-width:0; }
.rk-pod-name{ font-family:'Hanken Grotesk',sans-serif; font-size:19px; font-weight:800; color:#F8FAFC; letter-spacing:-0.01em; }
.rk-pod-sub{ font-size:12px; color:#94A3B8; margin-top:2px; }
.rk-pod-srs{ position:relative; margin-left:auto; font-family:'Hanken Grotesk',sans-serif; font-size:27px; font-weight:800; color:#34d27b; font-variant-numeric:tabular-nums; text-align:right; }
.rk-pod-srs span{ display:block; font-size:9px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#5b6573; }

.rk-list{ border:1px solid #1d1d1d; border-radius:14px; background:#0b0b0b; overflow:hidden; }
.rk-head, .rk-row{ display:grid; grid-template-columns:42px minmax(132px,1fr) 1.15fr 58px 56px 56px 60px; align-items:center; gap:11px; padding:11px 16px; }
.rk-head{ border-bottom:1px solid #1a1a1a; }
.rk-head span{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:#5b6573; }
.rk-head .rh-r{ text-align:right; }
.rk-row{ border-top:1px solid #141414; transition:background 140ms; }
.rk-row:first-of-type{ border-top:none; }
.rk-row:hover{ background:#0f0f0f; }
.rk-row.top3{ background:linear-gradient(90deg, color-mix(in srgb, var(--tc,#888) 9%, transparent), transparent 42%); }
.rk-rank{ font-family:'Hanken Grotesk',sans-serif; font-size:16px; font-weight:800; color:#5b6573; text-align:center; }
.rk-row.top3 .rk-rank{ color:var(--tc); }
.rk-team{ display:flex; align-items:center; gap:11px; min-width:0; }
.rk-team img{ height:29px; width:29px; object-fit:contain; flex:none; }
.rk-name{ font-size:15px; font-weight:700; color:#F8FAFC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-sub{ font-size:11px; color:#64748B; margin-top:1px; }
.rk-barwrap{ position:relative; height:22px; }
.rk-barwrap::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#262626; }
.rk-bar{ position:absolute; top:4px; bottom:4px; border-radius:3px; background:var(--tc,#4a94de); }
.rk-bar.pos{ left:50%; } .rk-bar.neg{ right:50%; opacity:0.5; }
.rk-srs{ font-family:'Hanken Grotesk',sans-serif; font-size:17px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; }
.rk-srs.pos{ color:#e8edf3; } .rk-srs.neg{ color:#8a96a4; }
.rk-stat{ font-size:13.5px; font-weight:600; color:#aeb8c4; text-align:right; font-variant-numeric:tabular-nums; }
.rk-stat.pos{ color:#34d27b; } .rk-stat.neg{ color:#ef6b6b; }
.rk-method{ border-top:1px solid #1a1a1a; margin-top:26px; padding-top:18px; font-size:13px; color:#7a8595; line-height:1.65; max-width:80ch; }
.rk-method b{ color:#cbd5e1; }
@media(max-width:820px){ .rk-podium{ grid-template-columns:1fr; } .rk-head, .rk-row{ grid-template-columns:34px 1fr 56px; gap:10px; }
  .rk-barwrap,.rk-stat,.rk-head .rh-bar,.rk-head .rh-stat{ display:none; } }
.result-badge{ display:inline-flex; padding:3px 9px; border-radius:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.result-win{ background:#0f2417; color:#22C55E; } .result-loss{ background:#2e1a1a; color:#c0564b; }

/* ---- track record: KPI + chart ---- */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:0 0 26px; }
.kpi{ background:#0d0d0d; border:1px solid #232323; border-radius:12px; padding:18px; transition:border-color 160ms; }
.kpi:hover{ border-color:#2f4d6e; }
.kpi .label{ font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#64748B; font-weight:600; }
.kpi .val{ font-family:'Hanken Grotesk',sans-serif; font-size:26px; font-weight:800; color:#F8FAFC; margin-top:8px; font-variant-numeric:tabular-nums; }
.kpi .val.pos{ color:#22C55E; } .kpi .val.neg{ color:#c0564b; } .kpi .val.pending{ color:#64748B; font-size:17px; }
.kpi .sub{ font-size:11px; color:#94A3B8; margin-top:4px; }
/* compact KPI strip (site.css v=8) -- smaller, more proportional stat boxes for
   the recaps section. Narrower min-width so 5 tiles stay square-ish rather than
   stretching wide; tighter padding + type scale. */
.kpi-row.kpi-sm{ grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin:0 0 20px; }
.kpi-row.kpi-sm .kpi{ padding:12px 14px; border-radius:10px; }
.kpi-row.kpi-sm .kpi .label{ font-size:9px; }
.kpi-row.kpi-sm .kpi .val{ font-size:20px; margin-top:5px; }
.kpi-row.kpi-sm .kpi .val.pending{ font-size:14px; }
.kpi-row.kpi-sm .kpi .sub{ font-size:10px; margin-top:3px; }
.chart{ background:#0d0d0d; border:1px solid #232323; border-radius:12px; padding:20px; margin:0 0 18px; }
.chart h3,.panel-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#94A3B8; margin:0 0 16px; }
.bars{ display:flex; align-items:flex-end; gap:24px; height:180px; border-bottom:1px solid #232323; }
.bar{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.barval{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; margin-bottom:6px; color:#22C55E; }
.barval.grey{ color:#64748B; font-size:12px; }
.bar .fill{ background:linear-gradient(180deg,#4a94de,#2273c5); width:100%; max-width:120px; border-radius:4px 4px 0 0;
  height:0; transition:height 1.1s cubic-bezier(.2,.85,.25,1); }
.bar .fill.muted{ background:repeating-linear-gradient(135deg,#222 0 6px,#1a1a1a 6px 12px); }
.bar-labels{ display:flex; gap:24px; margin-top:8px; }
.bar-labels span{ flex:1; text-align:center; font-size:11px; color:#94A3B8; font-weight:600; }
.lead{ font-size:16px; color:#94A3B8; max-width:60ch; margin:0 0 22px; line-height:1.55; } .lead b{ color:#cbd5e1; }

/* track-record hero KPI strip */
.tr-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
.tr-kpi{ background:rgba(13,13,13,0.6); border:1px solid #242424; border-radius:12px; padding:16px 18px; backdrop-filter:blur(2px); }
.tr-kpi .l{ font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:#64748B; font-weight:600; }
.tr-kpi .v{ font-family:'Hanken Grotesk',sans-serif; font-size:32px; font-weight:800; color:#22C55E; margin-top:6px; font-variant-numeric:tabular-nums; line-height:1; }
.tr-kpi .v.grey{ color:#64748B; font-size:22px; }
.tr-kpi .s{ font-size:11px; color:#94A3B8; margin-top:6px; }

/* per-market verdict cards */
.vcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 18px; }
.vcard{ background:#0d0d0d; border:1px solid #232323; border-radius:12px; padding:18px; position:relative; transition:transform 160ms, border-color 160ms; }
.vcard:hover{ transform:translateY(-2px); }
.vcard.go{ border-color:#1c3a26; background:linear-gradient(180deg,rgba(34,197,94,0.06),#0d0d0d); }
.vcard.go::before{ content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(34,197,94,0.25); pointer-events:none; }
.vcard-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.vcard-market{ font-size:15px; font-weight:700; color:#F8FAFC; }
.vbadge{ font-size:10px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; padding:3px 9px; border-radius:6px; }
.vbadge.go{ background:#0f2417; color:#22C55E; } .vbadge.no{ background:#2e1a1a; color:#c0564b; }
.vstat{ display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-top:1px solid #161616; }
.vstat:first-of-type{ border-top:none; } .vstat .k{ color:#64748B; } .vstat .v{ font-weight:700; font-variant-numeric:tabular-nums; }
.vwhy{ font-size:12px; color:#94A3B8; margin-top:12px; line-height:1.5; }

/* empty live ledger state */
.empty-ledger{ display:flex; align-items:center; gap:16px; padding:22px; }
.empty-ledger .pulse-ring{ width:40px; height:40px; border-radius:50%; border:2px solid #1e3a6e; flex:none; position:relative; }
.empty-ledger .pulse-ring::after{ content:""; position:absolute; inset:11px; border-radius:50%; background:#2273c5; animation:pulse 1.8s ease-in-out infinite; }
.empty-ledger .et{ font-size:15px; font-weight:700; color:#cbd5e1; } .empty-ledger .es{ font-size:12px; color:#64748B; margin-top:3px; }

/* ---- scores ---- */
.stand-wrap{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.scores-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }

/* ---- rankings methodology ---- */
.method{ margin-top:20px; font-size:12px; color:#64748B; line-height:1.7; max-width:82ch; }
.method b{ color:#94A3B8; font-weight:600; }
@media (max-width:760px){ .wide-table th:nth-child(n+7),.wide-table td:nth-child(n+7){ display:none; } }

/* ---- footer + a11y ---- */
.footer,.footnote{ max-width:1100px; margin:0 auto; padding:18px 24px; font-size:11px; color:#64748B; border-top:1px solid #161616; line-height:1.7; }
.footnote{ max-width:none; }
a:focus-visible,[tabindex]:focus-visible{ outline:2px solid #4a94de; outline-offset:2px; border-radius:3px; }
.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; }
/* NOTE: mockup intentionally always animates so motion can be reviewed.
   A production build should restore: @media (prefers-reduced-motion: reduce){ animations off }. */

/* ============================================================
   PREMIUM TIER — paywalled Predictions page only
   Gold/amber accent + PRO badging layered over the dark base.
   Free pages stay blue; the paid product reads as the upgrade.
   ============================================================ */
:root{ --gold:#e8c067; --gold-2:#d4a843; --gold-deep:#b8862c; --gold-glow:rgba(232,192,103,0.22); }

/* page-level premium tint: a hairline gold top-rule + warmer base */
body.premium{ background:radial-gradient(1100px 520px at 50% -180px, rgba(232,192,103,0.05), transparent 70%), #050505; }
body.premium .header{ box-shadow:inset 0 2px 0 0 var(--gold-2); }

/* PRO badge */
.pro-badge{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:#1a1206; padding:4px 11px; border-radius:5px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); box-shadow:0 4px 14px -6px var(--gold-glow); }
.pro-badge .star{ font-size:11px; line-height:1; }
.kicker.gold{ color:var(--gold); }
.hero-h .accent.gold{ background:linear-gradient(90deg,var(--gold),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.chip.gold b{ color:var(--gold); }

/* ---- view switch (Member ⇄ Non-subscriber) ---- */
.view-switch{ padding-top:14px; }
.vs-inner{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px;
  background:linear-gradient(180deg,rgba(232,192,103,0.06),#0b0b0b); border:1px solid #2a2415; border-radius:11px; }
.vs-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#8a7a4a; }
.vs-toggle{ display:inline-flex; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:8px; padding:3px; gap:3px; }
.vs-btn{ font-family:inherit; cursor:pointer; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  color:#94A3B8; background:transparent; border:0; padding:7px 16px; border-radius:6px; transition:all 160ms; }
.vs-btn:hover{ color:#cbd5e1; }
.vs-btn.active{ color:#1a1206; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); box-shadow:0 4px 12px -6px var(--gold-glow); }
.vs-note{ font-size:11px; color:#64748B; margin-left:auto; }
body.view-locked .vs-note::before{ content:"You are previewing the locked, non-subscriber view. "; color:#8a7a4a; }

/* ---- Edge of the Week — featured top pick ---- */
.edge-feature{ position:relative; isolation:isolate; overflow:hidden; margin:18px 0 6px;
  background:linear-gradient(180deg,#12100a,#0a0a0a); border:1px solid #3a3115; border-radius:16px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(232,192,103,0.10); }
.ef-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 100% at 0% 40%, var(--home-glow,rgba(34,115,197,0.20)), transparent 55%),
            radial-gradient(110% 100% at 100% 60%, var(--gold-glow), transparent 60%); }
.ef-bg img{ position:absolute; top:50%; height:190px; width:190px; object-fit:contain; opacity:0.13; filter:saturate(1.3); }
.ef-bg .ef-home{ left:14px; transform:translateY(-52%); } .ef-bg .ef-away{ right:auto; left:34%; transform:translateY(-48%); }
.ef-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid rgba(232,192,103,0.14); }
.ef-kicker{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); }
.ef-frozen{ font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#8a7a4a; }
.ef-body{ display:grid; grid-template-columns:1.05fr 1fr; gap:24px; padding:20px; }
.ef-matchup{ display:flex; flex-direction:column; gap:6px; justify-content:center; }
.ef-team{ display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; padding:10px 12px; border-radius:10px; border:1px solid transparent; }
.ef-team img{ height:48px; width:48px; object-fit:contain; }
.ef-team.win{ border-color:color-mix(in srgb, var(--home,#2273c5) 45%, #2a2415); background:linear-gradient(90deg, color-mix(in srgb, var(--home,#2273c5) 14%, transparent), transparent 85%); }
.ef-tn{ font-size:20px; font-weight:800; color:#F8FAFC; line-height:1.1; }
.ef-team:not(.win) .ef-tn{ color:#94A3B8; }
.ef-pick{ font-size:9px; font-weight:800; letter-spacing:0.6px; color:#1a1206; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); border-radius:4px; padding:2px 6px; margin-left:9px; vertical-align:middle; }
.ef-rec{ font-size:11px; color:#64748B; margin-top:3px; }
.ef-at{ font-size:11px; color:#3f4854; font-weight:700; letter-spacing:1px; text-align:center; padding:2px 0; }
.ef-ml{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; padding:5px 10px; border-radius:7px; }
.ef-ml.fav{ background:#0a1d2e; color:#4a94de; } .ef-ml.dog{ background:#16130a; color:var(--gold); }
.ef-analytics{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#1c1810; border:1px solid #2a2415; border-radius:12px; overflow:hidden; align-content:start; }
.efa{ display:flex; flex-direction:column; gap:3px; padding:12px 14px; background:#0c0b08; }
.efa span{ font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:#64748B; font-weight:600; }
.efa b{ font-size:19px; font-weight:800; color:#F8FAFC; font-variant-numeric:tabular-nums; }
.efa b.dim{ color:#7a8595; } .efa b.gold{ color:var(--gold); }
.efa.hl{ background:linear-gradient(180deg,rgba(232,192,103,0.08),#0c0b08); }
.ef-foot{ display:flex; align-items:center; gap:20px; padding:14px 20px; border-top:1px solid rgba(232,192,103,0.14); flex-wrap:wrap; }
.ef-conf{ flex:1; min-width:200px; }
.ef-conf-line{ display:flex; justify-content:space-between; font-size:11px; color:#64748B; margin-bottom:6px; } .ef-conf-line b{ color:#cbd5e1; }
.ef-conf-track{ height:7px; background:#1a1a1a; border-radius:99px; overflow:hidden; }
.ef-conf-fill{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width 1.1s cubic-bezier(.2,.85,.25,1); }
.ef-edge{ font-size:30px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.ef-edge span{ font-size:10px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#64748B; margin-top:5px; }

/* ---- enriched analytics inside standard pick cards ---- */
.game-card.premium .prediction{ border-top-color:#241f12; }
.analytics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:10px; background:#1c1810; border:1px solid #241f12; border-radius:9px; overflow:hidden; }
.an{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:#0b0a07; }
.an-k{ font-size:9px; text-transform:uppercase; letter-spacing:0.5px; color:#64748B; font-weight:600; }
.an-v{ font-size:14px; font-weight:800; color:#e6edf5; font-variant-numeric:tabular-nums; }
.an-v.dim{ color:#7a8595; } .an-v.gold{ color:var(--gold); } .an-v.green{ color:#22C55E; }

/* ---- locked / teaser state ---- */
.picks-region{ position:relative; }
.lock-pill{ display:none; }
a.game-card.locked{ text-decoration:none; display:flex; flex-direction:column; cursor:pointer; }
a.game-card.locked:hover{ border-color:#2f4d6e; }
/* ---- membership page ---- */
.mb-svg{ width:22px; height:22px; }
.mb-hero-wrap{ position:relative; overflow:hidden; border-bottom:1px solid #181818; }
.mb-hero-bg{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 78% 0%, rgba(232,192,103,0.16), transparent 60%),
    radial-gradient(50% 80% at 8% 30%, rgba(34,115,197,0.16), transparent 60%); }
.mb-hero{ position:relative; padding:64px 0 56px; max-width:62ch; }
.mb-eyebrow{ font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#4a94de; margin-bottom:18px; }
.mb-h1{ font-family:'Hanken Grotesk',sans-serif; font-size:60px; line-height:1.02; font-weight:800; letter-spacing:-0.035em; color:#F8FAFC; margin:0; }
.mb-h1 .accent{ background:linear-gradient(92deg,var(--gold),#f3d488); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mb-sub{ margin:22px 0 28px; font-size:18px; line-height:1.6; color:#aab4c0; max-width:54ch; }
.mb-sub b{ color:#eef2f6; font-weight:700; }
.mb-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.mb-btn{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:800; letter-spacing:0.2px; color:#1a1206;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); padding:14px 24px; border-radius:11px;
  box-shadow:0 16px 34px -14px var(--gold-glow); transition:transform 150ms, box-shadow 150ms; }
.mb-btn:hover{ transform:translateY(-2px); color:#1a1206; text-decoration:none; box-shadow:0 22px 44px -14px var(--gold-glow); }
.mb-btn .mb-btn-ic{ width:18px; height:18px; transition:transform 150ms; }
.mb-btn:hover .mb-btn-ic{ transform:translateX(3px); }
.mb-btn.ghost{ color:#cbd5e1; background:transparent; border:1px solid #2c2c2c; box-shadow:none; }
.mb-btn.ghost:hover{ color:#fff; border-color:#3d4a5c; background:#101010; }
.mb-btn.lg{ font-size:16px; padding:16px 28px; }
.mb-trust{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; color:#7a8595; }
.mb-trust-ic{ width:16px; height:16px; color:#4e9a56; }

.mb-proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid #1d1d1d; border-radius:16px;
  background:linear-gradient(180deg,#0e0e0e,#0a0a0a); overflow:hidden; margin:-28px 0 8px; position:relative; z-index:2; }
.mb-stat{ padding:24px 26px; border-left:1px solid #181818; }
.mb-stat:first-child{ border-left:none; }
.mb-sv{ font-family:'Hanken Grotesk',sans-serif; font-size:40px; font-weight:800; color:#eef2f6; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1; }
.mb-sv.gold{ color:var(--gold); }
.mb-frac{ font-size:22px; color:#5b6573; }
.mb-sl{ font-size:12px; font-weight:700; color:#94A3B8; margin-top:12px; }
.mb-sl span{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#5b6573; margin-top:3px; }

.mb-section-head{ margin:54px 0 22px; }
.mb-h2{ font-family:'Hanken Grotesk',sans-serif; font-size:30px; font-weight:800; letter-spacing:-0.02em; color:#F8FAFC; margin:0; }
.mb-lead{ margin:12px 0 0; font-size:16px; line-height:1.6; color:#94A3B8; max-width:64ch; }
.mb-lead i{ color:#cbd5e1; font-style:italic; }
.mb-benefits{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.mb-benefit{ border:1px solid #1d1d1d; border-radius:15px; background:#0b0b0b; padding:24px 22px; transition:transform 160ms, border-color 160ms; }
.mb-benefit:hover{ transform:translateY(-3px); border-color:#2a3445; }
.mb-ic{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:11px;
  background:linear-gradient(150deg, rgba(74,148,222,0.14), rgba(232,192,103,0.10)); color:#7fb0ec; margin-bottom:16px; }
.mb-ic .mb-svg{ width:22px; height:22px; }
.mb-bt{ font-size:16px; font-weight:800; color:#F8FAFC; letter-spacing:-0.01em; }
.mb-bd{ font-size:13.5px; color:#94A3B8; line-height:1.6; margin-top:7px; }
.mb-bd b{ color:#e2e8f0; }

.mb-cred{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; margin:54px 0 0;
  border:1px solid #1d2a3d; border-radius:18px; background:linear-gradient(160deg,#0d1420,#0a0a0c); padding:34px 32px; }
.mb-cred-mark{ display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:14px;
  background:linear-gradient(150deg, rgba(34,115,197,0.22), rgba(34,115,197,0.05)); color:#5a9ee6; }
.mb-cred-mark .mb-cred-ic{ width:28px; height:28px; }
.mb-cred .mb-lead b{ color:#eef2f6; }
.mb-honest{ display:flex; gap:11px; align-items:flex-start; margin:18px 0 0; padding:14px 16px; border-radius:11px;
  background:rgba(255,255,255,0.02); border:1px solid #20272f; font-size:13.5px; line-height:1.6; color:#9aa6b4; }
.mb-honest .mb-honest-ic{ width:18px; height:18px; color:#4e9a56; flex:none; margin-top:2px; }
.mb-honest b{ color:#cbd5e1; }

.mb-final{ text-align:center; margin:60px 0 56px; padding:48px 28px; border:1px solid #2a2415; border-radius:20px;
  background:radial-gradient(120% 130% at 50% 0%, rgba(232,192,103,0.10), transparent 60%), #0b0a08; }
.mb-final .mb-h2{ font-size:34px; }
.mb-final .mb-lead{ margin:14px auto 26px; }
.mb-fine{ font-size:12.5px; color:#677483; margin-top:16px; }
.mb-disclosure{ font-size:12px; color:#5b6573; line-height:1.6; max-width:80ch; margin:26px 0 56px; }
.mb-disclosure b{ color:#94a3b8; }
@media(max-width:820px){ .mb-h1{ font-size:40px; } .mb-proof{ grid-template-columns:1fr; } .mb-stat{ border-left:none; border-top:1px solid #181818; }
  .mb-stat:first-child{ border-top:none; } .mb-cred{ grid-template-columns:1fr; gap:16px; } }
.locked-body{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:130px; padding:18px; color:#5b6573; font-size:12px; text-align:center; }
.locked-body .lk{ font-size:24px; opacity:0.65; }
.locked-bar{ width:80%; height:13px; border-radius:7px; background:linear-gradient(90deg,#161616,#212121,#161616); }
.locked-bar.short{ width:55%; }
.unlock-cta{ display:none; }
body.view-locked .games-grid{ filter:blur(7px) saturate(0.7); pointer-events:none; user-select:none; opacity:0.85; }
body.view-locked .picks-region::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,5,5,0.1),rgba(5,5,5,0.65)); border-radius:12px; pointer-events:none; }
body.view-locked .unlock-cta{ display:flex; position:absolute; inset:0; z-index:3; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; }
body.view-locked .picks-region:not(:has(.games-grid)) .unlock-cta{ position:static; padding:48px 24px 8px; }
.unlock-card{ max-width:420px; background:linear-gradient(180deg,#15120a,#0b0a08); border:1px solid #3a3115; border-radius:16px; padding:30px 28px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(232,192,103,0.12); }
.unlock-lock{ width:54px; height:54px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(232,192,103,0.28), rgba(232,192,103,0.05)); border:1px solid #3a3115; font-size:24px; }
.unlock-card h3{ font-family:'Hanken Grotesk',sans-serif; font-size:23px; font-weight:800; color:#F8FAFC; letter-spacing:-0.01em; }
.unlock-card p{ font-size:13px; color:#94A3B8; margin:10px 0 20px; line-height:1.55; }
.unlock-card p b{ color:var(--gold); }
.unlock-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.8px; border-radius:9px; color:#1a1206; background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 12px 30px -10px var(--gold-glow); transition:transform 160ms, box-shadow 160ms; }
.unlock-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px var(--gold-glow); color:#1a1206; text-decoration:none; }
.unlock-fine{ margin-top:14px; font-size:11px; color:#64748B; }
.unlock-fine s{ color:#4a5260; } .unlock-fine b{ color:#cbd5e1; }
/* the free teaser pick (Edge of the Week) stays sharp in locked mode */
body.view-locked .edge-feature{ filter:none; }
body.view-locked .ef-frozen::after{ content:" · free preview"; color:var(--gold); }

/* ---- waitlist email form (membership page + predictions paywall) ---- */
.waitlist-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.waitlist-form input[type=email]{ flex:1; min-width:220px; padding:13px 16px; font:inherit; font-size:14px;
  color:#F8FAFC; background:#0d0d0d; border:1px solid #2a2a2a; }
.waitlist-form input[type=email]::placeholder{ color:#5b6472; }
.waitlist-form input[type=email]:focus{ outline:none; border-color:#2273c5; box-shadow:0 0 0 3px rgba(34,115,197,0.18); }
.mb-waitlist{ max-width:460px; margin:8px auto 0; justify-content:center; }
.waitlist-done{ font-size:14px; font-weight:700; color:#34d27b; text-align:center; padding:14px 0 2px; }
#mb-join{ scroll-margin-top:120px; }

/* ---- responsive ---- */
@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; } .hero-h{ font-size:36px; }
  .strip{ grid-template-columns:repeat(2,1fr); } .strip .tile:nth-child(5){ display:none; }
  .cols{ grid-template-columns:1fr; } .season-tag{ display:none; }
  .games-grid,.stand-wrap{ grid-template-columns:1fr; }
  .ef-body{ grid-template-columns:1fr; gap:18px; }
  .analytics{ grid-template-columns:repeat(3,1fr); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sharp-edge redesign (2026-06-27): square off every card / panel / button /
   badge / nav / progress-bar corner for a flat, angular look. Genuine circular
   indicators (status dots, pulse rings, the unlock lock) keep their radius so
   they don't render as squares. Single override layer — to revert the redesign,
   delete this block.
   ────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{ border-radius:0 !important; }
.live-dot,
.tr-pending .dot,
.empty-ledger .pulse-ring,
.empty-ledger .pulse-ring::after,
.unlock-lock{ border-radius:50% !important; }

/* ============================================================
   UFC SECTION — additions on top of the shared design system.
   Fighters have no team logos, so we use initial-avatars, and we
   add MMA-native components: STRONG/VALUE/LEAN tiers, method &
   round prop bars, best-book chip, live HIT/MISS scoreboard.
   ============================================================ */

/* fighter initial avatar (replaces team logo) */
.fighter-av{ height:34px; width:34px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; letter-spacing:-0.02em; color:#cfe0f2; background:linear-gradient(160deg,#16283e,#0d1826);
  border:1px solid #22364e; font-variant-numeric:tabular-nums; }
.fighter-av.sm{ height:24px; width:24px; font-size:10px; }
.fighter-av.win{ color:#eaf4ff; background:linear-gradient(160deg,#1b3a5c,#0f2338); border-color:#2f5580; }
/* headshot photo variant: fill the circle (was the per-generator FIGHTER_AVATAR_CSS shim) */
.fighter-av.photo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

/* tier badges — the single source of bet rec (STRONG / VALUE / LEAN) */
.tier-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:6px; font-size:10px;
  font-weight:800; letter-spacing:0.6px; text-transform:uppercase; }
.tier-badge.strong{ background:linear-gradient(135deg,rgba(232,192,103,0.16),rgba(184,134,44,0.10)); color:var(--gold); border:1px solid #3a3115; }
.tier-badge.value{ background:#0a1d2e; color:#4a94de; border:1px solid #1e3a6e; }
.tier-badge.lean{ background:#161616; color:#94A3B8; border:1px solid #262626; }
.tier-badge .u{ font-size:9px; opacity:0.85; }

/* unit chip */
.units-chip{ font-size:10px; font-weight:800; color:#0d1826; background:linear-gradient(135deg,#4a94de,#2273c5); padding:2px 7px; border-radius:5px; }
.units-chip.dog{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#1a1206; }

/* best-book shopping chip */
.book-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#22C55E;
  background:#0f2417; border:1px solid #1c3a26; border-radius:6px; padding:3px 9px; font-variant-numeric:tabular-nums; }
.book-chip .bk{ color:#64748B; font-weight:600; text-transform:uppercase; font-size:9px; letter-spacing:0.4px; }

/* prop rows: method (KO / SUB / DEC) + rounds (O/U 2.5) */
.props{ padding-top:9px; margin-top:2px; border-top:1px solid #1a1a1a; display:flex; flex-direction:column; gap:8px; }
.prop-line{ display:flex; align-items:center; gap:10px; }
.prop-k{ font-size:9px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:#64748B; width:52px; flex:none; }
.seg{ flex:1; display:flex; height:7px; border-radius:99px; overflow:hidden; background:#141414; }
.seg span{ height:100%; }
.seg .ko{ background:#c0564b; } .seg .sub{ background:#4a94de; } .seg .dec{ background:#c89040; }
.seg .under{ background:#3f5978; } .seg .over{ background:#22C55E; }
.prop-legend{ display:flex; gap:12px; font-size:10px; color:#64748B; font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.prop-legend b{ color:#b8c2cf; font-weight:700; } .prop-legend .d{ width:7px; height:7px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }

/* live HIT / MISS scoreboard banner */
.live-strip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 16px; margin:16px 0 4px;
  border:1px solid #1d1d1d; border-left:2px solid #22C55E; border-radius:12px; background:linear-gradient(90deg,rgba(34,197,94,0.06),#0a0a0a 60%); }
.live-strip .lv-dot{ width:9px; height:9px; border-radius:99px; background:#ff4040; animation:pulse 1.3s ease-in-out infinite; flex:none; }
.live-strip .lv-score{ font-size:15px; font-weight:800; color:#F8FAFC; font-variant-numeric:tabular-nums; }
.live-strip .lv-score b.hit{ color:#22C55E; } .live-strip .lv-score b.miss{ color:#c0564b; }
.live-strip .lv-note{ font-size:12px; color:#64748B; margin-left:auto; }

/* result HIT/MISS pills for recap */
.res-pill{ display:inline-flex; padding:3px 10px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; }
.res-pill.hit{ background:#0f2417; color:#22C55E; } .res-pill.miss{ background:#2e1a1a; color:#c0564b; }

/* glicko rating pill */
.glicko{ font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }

/* weight-class select to match search box */
.wc-select{ padding:9px 12px; background:#0d0d0d; border:1px solid #232323; border-radius:8px; color:#cbd5e1; font-family:inherit; font-size:13px; cursor:pointer; }
.wc-select:focus{ outline:none; border-color:#2273c5; }

/* fighter profile identity block */
.f-identity{ display:flex; align-items:center; gap:16px; padding:20px; background:#080808; border-bottom:1px solid #232323; }
.f-identity .fighter-av{ height:56px; width:56px; font-size:20px; }
.f-name{ font-family:'Hanken Grotesk',sans-serif; font-size:24px; font-weight:800; color:#F8FAFC; letter-spacing:-0.01em; }
.f-sub{ font-size:12px; color:#94A3B8; margin-top:2px; text-transform:uppercase; letter-spacing:0.6px; }
.f-rec{ font-family:'Hanken Grotesk',sans-serif; font-size:22px; font-weight:800; color:#cbd5e1; margin-left:auto; font-variant-numeric:tabular-nums; }

/* fighter profile info rows (identity + win-methods sidebar) */
.p-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 20px; border-top:1px solid #161616; font-size:13px; }
.f-identity + .p-row{ border-top:none; }
.p-val{ color:#cbd5e1; font-weight:700; font-variant-numeric:tabular-nums; }

/* fighter career-average / betting stat grid (cells split by 1px gap over dark bg) */
.stats-grid{ display:grid; gap:1px; background:#1a1a1a; }
.stat-cell{ padding:13px 15px; background:#0d0d0d; }
.stat-val{ font-family:'Hanken Grotesk',sans-serif; font-size:19px; font-weight:800; color:#F8FAFC; font-variant-numeric:tabular-nums; line-height:1; }
.stat-label{ font-size:10px; color:#64748B; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }

/* fight-history method detail + neutral result pills (draw / pending) */
.detail{ color:#5b6573; font-size:11px; }
.res-pill.draw{ background:#2e2410; color:#c89040; }
.res-pill.pend{ background:#161616; color:#94A3B8; }

/* recaps-index listing (dated links inside a .panel) -- superseded by the
   .recap-grid card grid below (site.css v=7); left in place in case any
   cached/older recap HTML still references it. */
.recap-list{ list-style:none; }
.recap-list li{ padding:11px 15px; border-bottom:1px solid #161616; font-size:14px; }
.recap-list li:last-child{ border-bottom:none; }
.recap-list li a{ color:#cbd5e1; font-weight:700; font-variant-numeric:tabular-nums; }
.recap-list li a:hover{ color:#F8FAFC; }

/* recaps-index card grid (site.css v=7) -- one .recap-card per event, event
   name + date + HIT/MISS record pill + accuracy + best call. Reuses the
   existing .res-pill for the record (no new pill CSS). */
.recap-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:0 0 24px; }
a.recap-card{ display:flex; flex-direction:column; gap:8px; background:#0d0d0d; border:1px solid #232323; border-radius:12px; padding:16px; text-decoration:none; cursor:pointer; transition:transform 160ms, border-color 160ms; }
a.recap-card:hover{ transform:translateY(-2px); border-color:#2f4d6e; }
.recap-card .rc-name{ font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:#F8FAFC; font-size:15px; line-height:1.3; }
.recap-card .rc-date{ font-size:11px; color:#64748B; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; }
.recap-card .rc-meta{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.recap-card .rc-sub{ font-size:11px; color:#94A3B8; }

/* recaps-index sortable ruled table (site.css v=8) -- one row per event inside
   a .panel: Event · Model record · Tracked bets · Method · High-conf · Best call.
   Reuses the base table/th/td + .rec/.pos/.neg conventions; adds click-to-sort
   affordances and vertical column dividers ("straight lines" grid). */
.recap-table th{ cursor:pointer; user-select:none; white-space:nowrap; }
.recap-table th:hover{ color:#cbd5e1; }
.recap-table th .arw{ opacity:0.35; font-size:8px; margin-left:5px; }
.recap-table th.sorted{ color:#4a94de; } .recap-table th.sorted .arw{ opacity:1; color:#2273c5; }
.recap-table th + th, .recap-table td + td{ border-left:1px solid #1a1a1a; }
.recap-table td{ vertical-align:middle; }
.recap-table tbody tr{ cursor:pointer; }
.recap-table .rec.big{ display:block; font-size:16px; font-weight:800; line-height:1.15; }
.recap-table .rec.pend{ color:#e0a341; } .recap-table .rec.muted{ color:#3f4854; }
.recap-table .sub{ display:block; font-size:11px; color:#64748B; margin-top:2px; font-weight:500; }
.recap-table .c-event{ min-width:210px; }
.recap-table .ev-link{ color:#F8FAFC; font-weight:700; font-size:14px; display:block; }
.recap-table tr:hover .ev-link{ color:#4a94de; }
.recap-table .c-best{ color:#cbd5e1; font-weight:600; white-space:nowrap; }
.recap-note{ margin-top:16px; font-size:12px; color:#64748B; line-height:1.65; }
.recap-note b{ color:#94A3B8; }

/* ============================================================
   PREDICTIONS SECTION — functional CSS for predictions.html,
   migrated off the retired static round-trip (phase 10 plan 06).
   The shared design system above already styles the structural
   card classes (.game-card / .team / .confidence-badge /
   .tier-* / .filter-btn / .data-bar / .metric / .edge-badge).
   Only the predictions-ONLY functional classes live here: tier
   collapse + colour variants, edge-tier badges, method/round prop
   bars, the live-results overlay + #liveBanner, the Strong/Value
   ledger bar, the upcoming-schedule grid, and the Chart.js
   line-movement section. Migrated verbatim — do NOT restyle — to
   preserve behavioural parity with the pre-migration page.
   ============================================================ */

/* tier header interaction + collapse (toggleTier hook) */
.tier-header{ cursor:pointer; user-select:none; }
.tier-chevron.collapsed{ transform:rotate(-90deg); }
.tier-body.hidden{ display:none; }
.tier-label-strong{ color:rgb(110,231,142); }
.tier-label-value{ color:rgb(34,197,94); }
.tier-label-lean{ color:rgb(148,163,184); }

/* game-card filter hide (filterCards hook) */
.game-card.card-hidden{ display:none; }

/* edge / tier badges on cards (STRONG / VALUE / LEAN + best-book) */
.edge-value{ background:rgb(20,46,26); color:rgb(34,197,94); }
.edge-strong{ background:rgb(30,68,38); color:rgb(110,231,142); box-shadow:inset 0 0 0 1px rgb(34,197,94); }
.edge-small{ background:rgb(22,22,22); color:rgb(148,163,184); }
.edge-fade{ background:rgb(46,20,20); color:rgb(204,68,68); }

/* predicted-winner probability subtext */
.pred-prob{ font-size:13px; color:rgb(148,163,184); font-weight:400; }

/* method / rounds prop bars — scoped to .game-card so the fighter-page
   .props column layout in the UFC section above is left untouched */
.game-card .props{ padding-top:8px; border-top:1px solid rgb(35,35,35); display:flex; gap:16px; align-items:center; }
.game-card .prop{ display:flex; flex-direction:column; gap:2px; }
.prop-label{ font-size:11px; color:rgb(102,102,102); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.prop-val{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:rgb(184,194,207); }
.prop-bar{ display:flex; height:6px; width:110px; border-radius:3px; overflow:hidden; gap:1px; }
.prop-bar-ko{ background:rgb(204,68,68); }
.prop-bar-sub{ background:rgb(34,115,197); }
.prop-bar-dec{ background:rgb(200,144,64); }

/* live-results overlay — green/red tint on graded cards (applyLiveResults) */
.game-card.fight-correct{ border-color:rgb(34,197,94); background:rgb(14,30,18); box-shadow:inset 0 0 0 1px rgba(34,197,94,0.35), 0 0 12px rgba(34,197,94,0.18); }
.game-card.fight-correct .game-header{ background:rgb(20,46,26); border-bottom-color:rgba(34,197,94,0.35); }
.game-card.fight-incorrect{ border-color:rgb(192,86,75); background:rgb(28,14,14); box-shadow:inset 0 0 0 1px rgba(192,86,75,0.3); }
.game-card.fight-incorrect .game-header{ background:rgb(46,26,26); border-bottom-color:rgba(192,86,75,0.3); }
.game-card.fight-correct .team.winner,
.game-card.fight-incorrect .team.winner{ border-left-color:transparent; background:none; }
.result-detail{ padding:6px 0 0; border-top:1px solid rgb(35,35,35); margin-top:4px; display:flex; align-items:center; gap:8px; }
.result-winner-label{ font-size:10px; color:rgb(100,116,139); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.result-winner-name{ font-size:14px; font-weight:700; color:rgb(34,197,94); }
.fight-incorrect .result-winner-name{ color:rgb(220,80,80); }
.result-method-tag{ font-size:11px; font-weight:600; color:rgb(203,213,225); padding:1px 6px; background:rgb(35,35,35); border-radius:2px; }
.result-round-tag{ font-size:11px; font-weight:600; color:rgb(148,163,184); }

/* live-results banner (#liveBanner — toggled .active by pollLiveResults) */
.live-banner{ padding:10px 24px; background:rgb(8,8,8); border-bottom:1px solid rgb(35,35,35); display:none; align-items:center; gap:16px; }
.live-banner.active{ display:flex; }
.live-banner .live-dot{ width:8px; height:8px; border-radius:50%; background:rgb(200,144,64); animation:livepulse 1.5s ease-in-out infinite; }
@keyframes livepulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
.live-label{ font-size:10px; font-weight:700; color:rgb(200,144,64); text-transform:uppercase; letter-spacing:1.2px; }
.live-score{ font-size:16px; font-weight:700; color:rgb(184,194,207); font-variant-numeric:tabular-nums; }
.live-score .correct{ color:rgb(248,250,252); }
.live-score .sep{ color:rgb(100,116,139); }
.live-score .incorrect{ color:rgb(248,250,252); }
.live-detail{ font-size:11px; color:rgb(148,163,184); }
.live-updated{ font-size:10px; color:rgb(100,116,139); margin-left:auto; }

/* upcoming-schedule grid */
.schedule-wrap{ padding:20px 24px 0; max-width:1100px; margin:0 auto; }
.schedule-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.sched-card{ background:rgb(13,13,13); border:1px solid rgb(35,35,35); padding:10px 14px; transition:border-color 150ms; cursor:default; }
.sched-card:hover{ border-color:rgb(51,51,51); }
.sched-card.active{ border-color:rgb(34,115,197); }
.sched-date{ font-size:10px; color:rgb(100,116,139); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.sched-name{ font-size:13px; color:rgb(248,250,252); font-weight:700; margin-top:2px; }
.sched-fights{ font-size:11px; color:rgb(148,163,184); margin-top:2px; }
.sched-tag{ font-size:9px; font-weight:700; padding:1px 6px; border-radius:2px; margin-top:4px; display:inline-block; }
.sched-tag-next{ background:rgb(20,46,26); color:rgb(34,197,94); }
.sched-tag-ppv{ background:rgb(46,34,16); color:rgb(200,144,64); }
.panel-sched{ background:rgb(13,13,13); border:1px solid rgb(35,35,35); margin-bottom:16px; }
.panel-sched-head{ padding:10px 14px; font-size:11px; font-weight:700; color:rgb(200,144,64); border-bottom:1px solid rgb(35,35,35); text-transform:uppercase; letter-spacing:1.2px; background:rgb(8,8,8); }

/* Strong/Value track-record ledger bar */
.ledger-bar{ display:flex; align-items:center; gap:28px; padding:14px 24px; border-bottom:1px solid rgb(35,35,35); background:rgb(8,8,8); }
.ledger-bar.empty{ justify-content:flex-start; }
.ledger-empty{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; color:rgb(100,116,139); }
.ledger-headline{ display:flex; align-items:baseline; gap:10px; padding-right:24px; border-right:1px solid rgb(35,35,35); }
.ledger-pl-label{ font-size:11px; font-weight:600; color:rgb(148,163,184); text-transform:uppercase; letter-spacing:0.05em; }
.ledger-pl-val{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:22px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.ledger-pl-meta{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; color:rgb(148,163,184); letter-spacing:0.02em; }
.ledger-windows{ display:flex; gap:18px; padding-right:24px; border-right:1px solid rgb(35,35,35); }
.ledger-win{ display:flex; flex-direction:column; gap:2px; }
.ledger-win-label{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(100,116,139); text-transform:uppercase; letter-spacing:0.4px; font-weight:600; }
.ledger-win-val{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.ledger-win-val.muted{ color:rgb(100,116,139); }
.ledger-win-sub{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(148,163,184); }
.ledger-tiers{ display:flex; gap:18px; }
.ledger-tier-cell{ display:flex; flex-direction:column; gap:2px; }
.ledger-tier-label{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(100,116,139); text-transform:uppercase; letter-spacing:0.4px; font-weight:600; }
.ledger-tier-val{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; color:rgb(203,213,225); font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width: 700px) {
  .ledger-bar{ flex-wrap:wrap; gap:12px; }
  .ledger-headline, .ledger-windows{ border-right:none; padding-right:0; }
}

/* Chart.js line-movement — Consensus (refreshLineMovement, 60s poll) */
.lm-section{ padding:24px 24px 40px; }
.lm-section-title{ font-size:18px; font-weight:600; color:rgb(248,250,252); letter-spacing:-0.015em; margin-bottom:4px; }
.lm-sub{ font-size:12px; color:rgb(148,163,184); margin-bottom:14px; font-family:'JetBrains Mono', ui-monospace, monospace; }
.lm-sub .lm-live-dot{ width:7px; height:7px; border-radius:50%; background:rgb(200,144,64); display:inline-block; margin-right:6px; animation:lm-pulse 1.5s ease-in-out infinite; vertical-align:middle; }
@keyframes lm-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
.lm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); gap:14px; }
.lm-card{ background:rgb(13,13,13); border:1px solid rgb(35,35,35); display:flex; flex-direction:column; transition:border-color 150ms; }
.lm-card:hover{ border-color:rgb(51,51,51); }
.lm-card-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:rgb(8,8,8); border-bottom:1px solid rgb(35,35,35); }
.lm-wc{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(148,163,184); text-transform:uppercase; letter-spacing:0.06em; }
.lm-meta{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(100,116,139); text-transform:uppercase; letter-spacing:0.4px; }
.lm-headline{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:10px 14px 8px; border-bottom:1px solid rgb(22,22,22); }
.lm-headline-col{ display:flex; flex-direction:column; gap:2px; padding:4px 0; }
.lm-headline-col + .lm-headline-col{ padding-left:14px; border-left:1px solid rgb(22,22,22); }
.lm-headline-name{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(100,116,139); text-transform:uppercase; letter-spacing:0.4px; font-weight:600; }
.lm-headline-row{ display:flex; align-items:baseline; gap:8px; }
.lm-headline-val{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.lm-headline-delta{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; font-weight:700; }
.lm-headline-delta.up{ color:rgb(34,197,94); }
.lm-headline-delta.down{ color:rgb(204,68,68); }
.lm-headline-delta.flat{ color:rgb(100,116,139); }
.lm-chart-box{ height:200px; position:relative; padding:4px 4px 0; background:rgb(10,10,10); }
.lm-legend{ display:flex; gap:16px; padding:8px 14px 10px; font-size:11px; color:rgb(148,163,184); border-top:1px solid rgb(22,22,22); background:rgb(10,10,10); }
.lm-legend-item{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.4px; }
.lm-legend-dot{ width:14px; height:2px; }
.lm-legend-pickem{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(100,116,139); text-transform:uppercase; letter-spacing:0.4px; }
.lm-legend-pickem .lm-dash{ width:14px; height:0; border-top:1px dashed rgb(70,70,70); }
.lm-legend-model{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(200,144,64); text-transform:uppercase; letter-spacing:0.4px; font-weight:600; }
.lm-legend-model .lm-dash{ width:14px; height:0; border-top:1.5px dashed rgb(200,144,64); }
.lm-legend-model.hidden{ display:none; }
.lm-sharp{ display:none; align-items:center; gap:8px; padding:7px 12px;
            background:rgba(200,144,64,0.08); border-bottom:1px solid rgba(200,144,64,0.30);
            font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; font-weight:600;
            color:rgb(200,144,64); text-transform:uppercase; letter-spacing:0.06em; }
.lm-sharp.active{ display:flex; }
.lm-sharp-dot{ width:6px; height:6px; border-radius:50%; background:rgb(200,144,64);
                box-shadow:0 0 6px rgba(200,144,64,0.6); animation:lm-pulse 1.4s ease-in-out infinite; }
.lm-sharp-window{ margin-left:auto; color:rgb(100,116,139); font-weight:500; }
.lm-empty{ padding:20px; text-align:center; color:rgb(100,116,139); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; }
.lm-locked-note{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:10px; color:rgb(100,116,139); margin-top:8px; letter-spacing:0.03em; }
.lm-locked-note .lm-locked-dash{ display:inline-block; width:14px; height:0; border-top:1.5px dashed rgb(200,144,64); vertical-align:middle; margin-right:4px; }

/* ============================================================
   FOOTBALL VISUAL RESTYLE (2026-07-08 · phase 10-08)
   Reskins the existing site.css layouts to the /football/ home.css
   visual language WITHOUT touching structure or markup: brighter
   gold, JetBrains Mono numerals, a page-wide ambient glow, glowing
   gradient tier headers, gradient card fills, and la-topnav chrome
   polish. Appended last so it wins the cascade. Single override
   layer — delete this whole block to revert to the flat look.
   ============================================================ */

/* --- tokens: add --mono; --gold is already #e8c067 (premium block) --- */
:root{ --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* --- page-wide ambient glow + faint vertical grid (from home.css) --- */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 560px at 84% -6%, rgba(34,115,197,0.16), transparent 68%),
    radial-gradient(760px 460px at 8% 2%, rgba(74,148,222,0.07), transparent 70%),
    radial-gradient(900px 700px at 100% 60%, rgba(34,115,197,0.05), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.013) 0 1px, transparent 1px 64px); }

/* --- chrome: la-topnav feel (no auth topbar exists → dock header to top) --- */
.header{ top:0; }
.brand-title{ font-family:'Hanken Grotesk',sans-serif; font-size:20px; font-weight:700;
  color:#F8FAFC; letter-spacing:0.3px; }
.brand-title .sep{ color:#2e2e2e; margin:0 8px; font-weight:300; }
.brand-title .sport{ color:#94A3B8; font-weight:400; }

/* --- JetBrains Mono numerals + labels (the /football/ data-terminal feel).
       Body copy and headings stay Bahnschrift / Hanken. --- */
.metric-value,.day-date,.results-value,.pred-prob,
.kpi .val,.tr-kpi .v,.tr-tear-big,.tr-tear-stat .n,.tr-sroi,.tr-syear,.tr-sclv,
.tr-sbets,.tr-clvval,.rk-srs,.rk-rank,.rk-pod-rank,.rk-pod-srs,.rk-stat,
.shl-v,.gc-margin,.efa b,.ef-edge,.ef-ml,.an-v,.barval,
.final-score,.feat-score,.team-ml,.team-prob,.team-record,.team-rank-badge,
.glicko,.stat-val,.f-rec,.p-val,.leader-val,.spark-big,.spark-foot,
.mb-sv,.mb-frac{
  font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums; }
.kicker,.mb-eyebrow,.tr-tear-k,.season-tag,.metric-label,.stat-label,
.leader-cat,.results-label,.filter-count,.shl-k,.kpi .label,.tr-kpi .l,
.an-k,.tile-when,.tile-edge,.day-label,.pf-wc{ font-family:var(--mono); }

/* --- consolidate legacy gold (#c89040 / rgb(200,144,64)) → --gold #e8c067 --- */
.mock-ribbon,.team-ml.dog,.live-label,.sched-tag-ppv,.panel-sched-head,
.lm-legend-model,.lm-sharp{ color:var(--gold); }
.seg .dec,.prop-bar-dec,.live-banner .live-dot,.lm-sub .lm-live-dot,
.lm-sharp-dot{ background:var(--gold); }
.lm-legend-model .lm-dash,.lm-locked-note .lm-locked-dash{ border-top-color:var(--gold); }
.lm-sharp{ background:rgba(232,192,103,0.08); border-bottom-color:rgba(232,192,103,0.30); }
.lm-sharp-dot{ box-shadow:0 0 6px rgba(232,192,103,0.6); }

/* --- gradient card fills + soft glow (from home.css .pf-card / .game) --- */
.game-card,.kpi,.tile,.vcard,.sched-card,.panel-sched,.lm-card,.chart,.panel,a.recap-card{
  background:linear-gradient(180deg,#0d0d0d,#0a0a0a); }
.game-card,.kpi,.tile,.vcard,a.recap-card{ box-shadow:0 16px 44px -30px rgba(0,0,0,0.85); }

/* --- glowing gradient tier headers (Strong=gold, Value=blue, Lean=slate).
       The predictions generator tags .tier-section[data-tier-section]. --- */
[data-tier-section] .tier-header{ padding:11px 14px; margin-bottom:6px;
  border-left:3px solid var(--rule-strong,#2e2e2e);
  background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent 55%); }
[data-tier-section="strong"] .tier-header{ border-left-color:var(--gold);
  background:linear-gradient(90deg, rgba(232,192,103,0.16), rgba(232,192,103,0.02) 42%, transparent);
  box-shadow:0 0 46px -22px rgba(232,192,103,0.55); }
[data-tier-section="value"] .tier-header{ border-left-color:#2273c5;
  background:linear-gradient(90deg, rgba(34,115,197,0.18), transparent 48%);
  box-shadow:0 0 46px -24px rgba(34,115,197,0.6); }
[data-tier-section="lean"] .tier-header{ border-left-color:#3a4453;
  background:linear-gradient(90deg, rgba(148,163,184,0.07), transparent 42%); }
[data-tier-section] .tier-header .tier-line{ opacity:0.4; }

/* --- predictions method / rounds props: keep them on ONE compact horizontal
       row so the card stays short. The predictions .game-card .props rule set
       display:flex + align-items:center but never a flex-direction, so the
       UFC-section .props{flex-direction:column} leaked in via the cascade and
       forced every card ~300px taller. Force row + inline each label:value. --- */
.game-card .props{ flex-direction:row; flex-wrap:wrap; align-items:center;
  justify-content:flex-start; gap:7px 14px; }
.game-card .prop{ flex-direction:row; align-items:center; gap:6px; }
.game-card .prop-bar{ width:84px; }
.game-card .prop-label{ font-size:9px; letter-spacing:0.6px; }
.game-card .prop-val{ font-size:13px; }

/* --- Fighter Stats: ranked table with gold, glowing top-3 (football
       rankings-table look). Rank cell + top3 class are set per visible row
       by applyFilters() so filtering renumbers 1..N with no gaps. --- */
.rk-h{ width:34px; text-align:center !important; }
td.rk{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:center;
  color:var(--ink-4,#64748B); font-weight:700; width:34px; }
tbody tr.top3 td.rk{ color:#4a94de; font-weight:800; }
tbody tr.top3 td{ background:linear-gradient(90deg, rgba(34,115,197,0.12), transparent 62%); }
tbody tr.top3:hover td{ background:linear-gradient(90deg, rgba(34,115,197,0.18), transparent 62%); }
tbody tr.top3 td:first-child{ box-shadow:inset 3px 0 0 #2273c5; }
tbody tr.top3 .tm b{ color:#fff; }
/* mono numerals across right-aligned data columns (record, UFC, KO/SUB/DEC…) */
td.r,.rec{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* --- Strong tier reads GOLD end-to-end. The tier header bar is gold, but the
       10-06 predictions block colored the strong label, confidence badge, meter
       and Strong-Play chip GREEN — green-on-gold clashed. Unify to gold; the
       best-book chip stays green as the deliberate "best price" money signal. --- */
.tier-label-strong{ color:var(--gold); }
.confidence-badge.conf-high{ background:#191408; color:var(--gold); }
.conf-meter-high{ background:linear-gradient(90deg,var(--gold-deep),var(--gold)); }
.edge-badge.edge-strong{ background:#191408; color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(232,192,103,0.45); }

/* --- bigger, more readable prediction cards: 2-up on desktop (was ~3-up at
       330px, which cramped names/chips/props) + a bump to the small text. --- */
.games-grid{ grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:14px; }
.game-card .game-info{ padding:15px 16px; gap:10px; }
.game-card .fighter-av{ height:38px; width:38px; font-size:14px; }
.game-card .team-name{ font-size:17px; }
.game-card .team-meta{ font-size:12.5px; }
.game-card .team-ml{ font-size:12.5px; padding:3px 8px; }
.game-card .confidence-badge{ font-size:11px; padding:4px 10px; }
.game-card .pred-label{ font-size:12px; }
.game-card .pred-team{ font-size:15px; }
.game-card .prop-label{ font-size:10px; }
.game-card .prop-val{ font-size:14.5px; }
.game-card .prop-bar{ width:100px; height:7px; }
.tier-badge,.game-card .edge-badge,.units-chip,.book-chip{ font-size:11px; }
@media (max-width:820px){ .games-grid{ grid-template-columns:1fr; } }

/* --- center the predictions page content (it had no .shell wrapper, so its
       top-level strips + card grid spanned the full viewport; every other UFC
       page centers via .shell). Constrain to the same 1100px, centered. --- */
body > h1,.live-banner,.data-bar,.ledger-bar,.filter-bar,.content,
.results-banner,.date-nav,.live-strip,.lm-section,.schedule-wrap,.tracked{
  max-width:1100px; margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px; }

/* --- Line-movement chart, now embedded at the bottom of each fight card
       (moved out of the standalone .lm-section grid). The .lm-slot is filled
       async by the poll loop; it stays collapsed until a chart lands so empty
       cards show no stray divider. Nested .lm-card sheds its own frame/shadow
       and sits flush inside the game-card. --- */
.lm-slot{ border-top:1px solid #1a1a1a; background:#0a0a0a; }
.lm-slot:empty{ display:none; border-top:none; }
.lm-slot .lm-card{ border:none; background:transparent; box-shadow:none; }
.lm-slot .lm-card:hover{ border:none; }
.lm-slot .lm-chart-box{ height:150px; }
.lm-slot .lm-headline{ padding:8px 12px 6px; }
.lm-slot .lm-headline-val{ font-size:15px; }
.lm-slot .lm-headline-col + .lm-headline-col{ padding-left:12px; }
.lm-slot .lm-legend{ padding:7px 12px 9px; flex-wrap:wrap; gap:10px 14px; }

/* --- Tracked Bets: the model's active + recent Strong/Value positions,
       listed at the top of predictions (the ledger's open + settled bets). --- */
.tracked{ margin-top:12px; }
.tracked-panel{ border:1px solid var(--rule,#232323);
  background:linear-gradient(180deg,#0d0d0d,#0a0a0a);
  box-shadow:0 16px 44px -30px rgba(0,0,0,0.85); }
.tracked-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--rule-soft,#161616);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:#94A3B8; }
.tracked-sub{ font-weight:500; letter-spacing:0.04em; color:#64748B; text-transform:none; }
.tb-row{ display:flex; align-items:center; gap:12px; padding:9px 16px;
  border-bottom:1px solid #141414; font-size:13.5px; }
.tb-row:last-child{ border-bottom:none; }
.tb-tier{ font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:0.06em;
  padding:3px 7px; flex:none; }
.tb-tier.c-strong{ color:var(--gold); background:#191408; border:1px solid #3a2e14; }
.tb-tier.c-value{ color:#4a94de; background:#0c1626; border:1px solid #1c3350; }
.tb-pick{ font-weight:700; color:#F8FAFC; flex:none; }
.tb-matchup{ color:#64748B; font-size:12px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-lock{ font-family:var(--mono); font-size:9px; color:#64748B; white-space:nowrap; flex:none; }
.tb-odds{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:#cbd5e1; flex:none; }
.tb-units{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:#94A3B8;
  font-size:12px; flex:none; width:34px; text-align:right; }
.tb-status{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; padding:3px 8px; flex:none; min-width:96px; text-align:center; }
.tb-status.open,.tb-status.pending{ color:#94A3B8; background:#161616; border:1px solid #262626; }
.tb-status.won{ color:#22C55E; background:#0f2417; border:1px solid #1c3a26; }
.tb-status.lost{ color:#c0564b; background:#2e1a1a; border:1px solid #3a2020; }
@media(max-width:640px){ .tb-matchup{ display:none; } }