/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  /* Deep neutral base — dark without the harsh pure black */
  --bg:      #06080e;
  --bg2:     #0a0d14;
  --s1:      #0e121b;
  --s2:      #121722;
  --s3:      #172030;
  --border:  #1d2530;
  --border2: #27313e;
  --border3: #34404f;

  /* Softened signal green — readable, far less eye strain than neon */
  --g:       #8bc34a;
  --g2:      #9ccc65;
  --gd:      rgba(139,195,74,0.08);
  --gd2:     rgba(139,195,74,0.18);
  --g-border: rgba(139,195,74,0.22);

  /* Outcome colours — three unmistakably different hues, high contrast */
  --prob-home: #4ade80;   /* green  */
  --prob-draw: #3b82f6;   /* blue   */
  --prob-away: #f59e0b;   /* amber  */
  /* Brighter variants for text on dark backgrounds */
  --prob-home-txt: #4ade80;
  --prob-draw-txt: #60a5fa;
  --prob-away-txt: #fbbf24;

  --b:       #60a5fa;
  --bd:      rgba(96,165,250,0.10);
  --r:       #d9646f;
  --rd:      rgba(217,100,111,0.12);
  --gold:    #d4a94a;
  --goldd:   rgba(212,169,74,0.11);
  --purple:  #a78bda;
  --purpled: rgba(167,139,218,0.09);

  --text:    #e8eef4;
  --text2:   #8a9bb0;
  --text3:   #6b7d92;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Glass surfaces */
  --glass:        rgba(14,18,28,0.60);
  --glass-strong: rgba(14,18,28,0.78);
  --glass-border: rgba(255,255,255,0.06);
  --glass-hover:  rgba(255,255,255,0.10);
  --blur: 16px;
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* 450 + a hair of tracking reads noticeably better on dark backgrounds */
  font-weight:450; line-height:1.6; letter-spacing:.01em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
button { cursor:pointer; font-family:inherit; }

/* Figures line up in columns — essential for percentages and scores */
.hss-val,.tac-val,.mc-score,.mc-pl,.mc-dl,.mc-al,.mk-val,.hk-val,.tier-pct,
.mb,.csb-pct,.mm-score,.mf-count { font-variant-numeric:tabular-nums; }

/* Ambient depth — subtle, behind everything */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(139,195,74,0.06), transparent 55%),
    radial-gradient(ellipse 45% 35% at 85% 85%, rgba(106,139,176,0.04), transparent 50%);
}
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border3); border-radius:2px; }

/* Noise overlay */
body::before {
  content:''; position:fixed; inset:0; z-index:999; pointer-events:none; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(6,8,14,.72);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--glass-border);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 40px; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* The 404 page uses real <a> elements here so it works without any JS.
   Neutralising the link defaults keeps it identical to the app's own nav. */
.nav-logo {
  display:flex; align-items:center; gap:10px;
  cursor:pointer; flex-shrink:0; margin-right:16px;
  text-decoration:none; color:inherit;
}
.nav-logo .logo-flask { width:22px; height:26px; flex-shrink:0; }
.logo-text { font-size:19px; font-weight:700; letter-spacing:-.04em; color:#fff; line-height:1.1; }
.logo-text .logo-accent { color:var(--g); }
.logo-tagline { font-size:10px; font-weight:500; color:var(--text3); letter-spacing:.07em; text-transform:uppercase; margin-top:1px; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nl {
  background:transparent; border:none; color:var(--text2);
  font-size:13px; font-weight:500; letter-spacing:.03em;
  padding:8px 14px; border-radius:8px;
  transition:color .2s,background .2s; position:relative;
  text-decoration:none; display:inline-block;
}
.nl:hover { color:var(--text); background:rgba(255,255,255,.03); }
.nl.active { color:var(--text); }
.nl.active::after { content:''; position:absolute; bottom:-23px; left:14px; right:14px; height:2px; background:var(--g); border-radius:2px; }
.nav-right { margin-left:auto; }

/* ══════════════════════════════════════
   PAGES
══════════════════════════════════════ */
.page { display:none; }
.page.active { display:block; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  position:relative; max-width:1280px; margin:0 auto;
  padding:96px 40px 72px; text-align:center; z-index:1;
}
.hero-grid-lines {
  position:absolute; inset:0; opacity:0.03;
  background-image:linear-gradient(var(--border2) 1px,transparent 1px),linear-gradient(90deg,var(--border2) 1px,transparent 1px);
  background-size:80px 80px;
}
.hero-glow1 { position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(139,195,74,0.05) 0%,transparent 70%); top:-200px; right:-100px; pointer-events:none; }
.hero-glow2 { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(106,139,176,0.04) 0%,transparent 70%); bottom:0; left:5%; pointer-events:none; }
.hero-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

/* Eyebrow is now a glass pill rather than a bare line of caps */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; margin-bottom:34px;
  background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); border-radius:100px;
  font-size:12px; font-weight:600; color:var(--text2); letter-spacing:.05em;
  animation:fadeUp .6s ease both;
}
.hero-eyebrow::before {
  content:''; width:6px; height:6px; border-radius:50%; background:var(--g);
}

.hero-h1 {
  font-size:clamp(2.5rem,1.8rem + 3.5vw,4.25rem); font-weight:700;
  letter-spacing:-.035em; line-height:1.08; color:var(--text);
  margin-bottom:22px; text-wrap:balance;
}
.hero-h1 .hl2 { color:var(--g); }
.hero-sub {
  font-size:17px; color:var(--text2); line-height:1.7;
  max-width:520px; margin:0 auto 44px; font-weight:400;
  animation:fadeUp .6s .2s ease both;
}

.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:fadeUp .6s .25s ease both; }

.btn-g {
  background:var(--g); color:#0a0e14; border:none;
  padding:14px 28px; border-radius:11px;
  font-size:14px; font-weight:600; letter-spacing:0;
  transition:all .22s ease; display:inline-flex; align-items:center; gap:9px;
  box-shadow:0 4px 20px rgba(139,195,74,.18);
}
.btn-g:hover { background:var(--g2); transform:translateY(-1px); }
.btn-outline {
  background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--text); border:1px solid var(--glass-border);
  padding:14px 28px; border-radius:11px;
  font-size:14px; font-weight:600; transition:all .22s ease;
}
.btn-outline:hover { border-color:var(--glass-hover); background:rgba(20,26,38,.7); }
.btn-hero { font-size:15px; padding:15px 32px; }

.hero-secondary-link { margin-top:24px; animation:fadeUp .6s .35s ease both; }
.hero-link {
  background:transparent; border:none; color:var(--text3);
  font-size:13px; cursor:pointer; transition:color .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.hero-link:hover { color:var(--g); }

@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════
   LANDING — TODAY SECTION
══════════════════════════════════════ */
.sec-divider { height:1px; background:linear-gradient(90deg,transparent,var(--glass-border),transparent); }
.today-section { max-width:1280px; margin:0 auto; padding:12px 40px 56px; position:relative; z-index:1; }
.today-header { display:flex; flex-direction:column; align-items:center; margin-bottom:22px; gap:10px; text-align:center; }
.today-title { font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.top-picks-list { display:flex; flex-direction:column; gap:10px; }

/* ══════════════════════════════════════
   DATE STRIP
══════════════════════════════════════ */
.date-strip { display:flex; gap:6px; padding:12px 40px; background:rgba(10,13,20,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--glass-border); overflow-x:auto; align-items:center; -webkit-overflow-scrolling:touch; }
.date-strip::-webkit-scrollbar { height:0; }
/* Centres the days while the row fits, and gets out of the way once it has to
   scroll. `justify-content:center` alone would make the first days unreachable
   on a narrow screen — the overflow would be cut off past the left edge. */
.date-strip::before, .date-strip::after { content:''; margin:auto; }
.ds-btn {
  background:rgba(255,255,255,.03); border:1px solid var(--glass-border);
  color:var(--text2); padding:9px 16px; border-radius:10px;
  font-size:13px; font-weight:500; cursor:pointer; transition:all .2s;
  white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
}
.ds-btn:hover { color:var(--text); border-color:var(--border3); }
/* One selected-state treatment across the whole app: soft green tint, green
   border, green text — identical to .mf-chip.active and the market tabs.
   Today used to get a solid green fill with dark text, the only element on the
   page that did, which read as a different kind of control entirely. */
.ds-btn.active { background:rgba(139,195,74,.14); border-color:var(--g-border); color:var(--g2); font-weight:600; opacity:1; }
/* Today needs no colour of its own — the label already says "Today". */
.ds-btn.today { font-weight:600; color:var(--text); }
/* Days with no predicted fixtures — dimmed but still clickable */
.ds-btn.ds-empty { opacity:.4; }
.ds-btn.ds-empty:hover { opacity:.7; }
/* Per-day count of predicted matches */
.ds-n {
  font-size:11px; font-weight:700; color:var(--text3);
  background:rgba(255,255,255,.06); border-radius:20px;
  padding:1px 7px; min-width:20px; text-align:center; font-variant-numeric:tabular-nums;
}
.ds-btn.active .ds-n { background:rgba(139,195,74,.22); color:var(--g2); }

/* ══════════════════════════════════════
   MARKET TABS
══════════════════════════════════════ */
.market-strip { display:flex; padding:0 40px; background:rgba(10,13,20,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--glass-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.market-strip::-webkit-scrollbar { display:none; }
/* Same centring trick as the date strip, so the two rows line up */
.market-strip::before, .market-strip::after { content:''; margin:auto; }
.mkt-tab { background:transparent; border:none; border-bottom:2px solid transparent; color:var(--text2); font-size:13px; font-weight:600; letter-spacing:.02em; padding:12px 16px; cursor:pointer; transition:all .2s; white-space:nowrap; flex-shrink:0; }
.mkt-tab:hover { color:var(--text); }
.mkt-tab.active { color:var(--g); border-bottom-color:var(--g); }

/* ══════════════════════════════════════
   FILTERS
══════════════════════════════════════ */
.mc-filters { display:flex; flex-direction:column; gap:0; background:rgba(10,13,20,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-border); position:sticky; top:68px; z-index:100; }
/* Filter rows wrap rather than scroll, so plain centring is safe here.
   The max-width matches .mc-list, so on a wide monitor the controls sit in the
   same column as the cards instead of sprawling to both screen edges. */
.mf-row {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 40px; flex-wrap:wrap;
  max-width:1120px; width:100%; margin:0 auto;
}
.mf-row2 { border-top:1px solid var(--glass-border); padding:10px 40px; }
.mf-search { background:rgba(255,255,255,.03); border:1px solid var(--glass-border); color:var(--text); padding:8px 14px; border-radius:8px; font-size:13px; outline:none; transition:border-color .2s; width:190px; }
.mf-search::placeholder { color:var(--text3); }
.mf-search:focus { border-color:var(--g); }
.mf-div { width:1px; height:22px; background:var(--glass-border); flex-shrink:0; margin:0 2px; }
.mf-label { font-size:11px; font-weight:600; color:var(--text3); letter-spacing:.06em; text-transform:uppercase; flex-shrink:0; }
.mf-chips { display:flex; gap:3px; }
.mf-chip { background:rgba(255,255,255,.03); border:1px solid var(--glass-border); color:var(--text2); padding:6px 12px; border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:5px; }
.mf-chip:hover { color:var(--text); }
.mf-chip.active { background:rgba(139,195,74,.14); border-color:var(--g-border); color:var(--g2); }
/* Live chip overrides green after .mf-chip.active — must come after it */
.mf-chip.mf-chip-live.active { background:var(--rd); border-color:rgba(255,68,102,.3); color:var(--r); }
.prob-range { -webkit-appearance:none; width:80px; height:4px; background:var(--border2); border-radius:2px; outline:none; }
.prob-range::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--g); cursor:pointer; }
.mf-pval { font-size:11px; color:var(--g); min-width:32px; }
/* No margin-left:auto here. It used to absorb every spare pixel to shove the
   count against the right edge, which silently cancelled the row's centring
   and left search pinned far left and "42s ago" far right on a wide screen. */
.mf-count { font-size:10px; color:var(--text3); }
/* Selects need an OPAQUE background: the dropdown list is painted by the OS,
   so a translucent one leaves light text on a white sheet. */
.mf-select {
  background:#131a26; border:1px solid var(--glass-border); color:var(--text);
  font-size:12px; font-weight:500; padding:7px 28px 7px 10px; border-radius:8px;
  cursor:pointer; outline:none; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a9bb0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.mf-select:hover { border-color:var(--glass-hover); }
/* The list itself — every option gets explicit colours */
.mf-select option {
  background:#131a26; color:var(--text); padding:6px;
}
.mf-select option:checked {
  background:#1d2b1a; color:var(--g2);
}
.mf-select:focus { border-color:var(--g); }
.league-group { margin-bottom:4px; }
.lg-header { display:flex; align-items:center; gap:8px; padding:7px 16px; background:var(--s2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2; }
.lg-flag { width:16px; height:12px; object-fit:cover; border-radius:1px; }
.lg-name { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text2); }
.lg-count { margin-left:auto; font-size:10px; color:var(--text3); background:var(--s3); border:1px solid var(--border); padding:1px 7px; border-radius:10px; }


/* ── Active filter chips — what is on, one click to take it off ── */
.mf-active {
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  padding:0 40px 12px; align-items:center;
}
.mf-active.hidden { display:none; }
.fchip {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(139,195,74,.12); border:1px solid var(--g-border);
  color:var(--g2); border-radius:20px; padding:5px 12px;
  font-size:12px; font-weight:500; cursor:pointer; transition:all .2s;
}
.fchip:hover { background:rgba(139,195,74,.2); }
.fchip span { font-size:13px; opacity:.65; line-height:1; }
.fchip:hover span { opacity:1; }
.fchip-clear {
  background:transparent; border-color:var(--glass-border); color:var(--text3);
}
.fchip-clear:hover { background:rgba(255,255,255,.05); color:var(--text2); }

/* ── Empty state that explains itself ── */
.no-results-inner { text-align:center; padding:56px 24px; }
.es-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.es-sub   { font-size:14px; color:var(--text3); margin-bottom:18px; }
.es-sub strong { color:var(--text2); font-weight:600; }
.es-btn {
  background:rgba(139,195,74,.14); border:1px solid var(--g-border);
  color:var(--g2); border-radius:9px; padding:9px 18px;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
}
.es-btn:hover { background:rgba(139,195,74,.22); }

/* Disabled league options read as unavailable, not missing */
.mf-select option:disabled { color:var(--text3); }

/* ══════════════════════════════════════
   MATCH CARDS
══════════════════════════════════════ */
.mc-list { padding:16px 40px 40px; display:flex; flex-direction:column; gap:12px; max-width:1120px; margin:0 auto; }
/* The card is an <a> so crawlers can reach the match page and "open in new
   tab" works. These three lines undo what the browser does to links by
   default — without them every label inside the card gets underlined. */
.match-card { display:block; text-decoration:none; color:inherit; background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-border); border-radius:16px; overflow:hidden; cursor:pointer; transition:border-color .25s,background .25s,transform .25s; animation:fadeUp .3s ease both; }
.match-card:hover, .match-card:focus { text-decoration:none; }
.match-card:focus-visible { outline:2px solid var(--g); outline-offset:2px; }
.match-card:hover { border-color:var(--glass-hover); background:var(--glass-strong); transform:translateY(-2px); }
.match-card.mc-live { border-left:2px solid rgba(255,68,102,.45); }

.mc-header { display:flex; align-items:center; justify-content:space-between; padding:9px 18px; background:rgba(0,0,0,.18); border-bottom:1px solid var(--glass-border); }
.mc-league { font-size:12px; font-weight:600; color:var(--text2); letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.mc-league-flag { width:14px; height:10px; object-fit:cover; border-radius:1px; }
.mc-status-pill { font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; letter-spacing:.02em; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.mc-status-pill.live { background:rgba(255,68,102,.15); color:var(--r); font-weight:700; }
.mc-status-pill.finished { background:rgba(74,100,128,.1); color:var(--text3); }
.mc-status-pill.upcoming { background:rgba(41,182,255,.08); color:var(--b); }
.live-pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--r); animation:livePulse 1.4s ease-out infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(255,51,85,0.6)} 70%{box-shadow:0 0 0 5px rgba(255,51,85,0)} 100%{box-shadow:0 0 0 0 rgba(255,51,85,0)} }
.mc-tier-badge { font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px; letter-spacing:.03em; }
.tier-elite   { background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.3); color:#22d3ee; }
.tier-premium { background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.25); color:#fb923c; }
.tier-standard{ background:rgba(100,116,139,.08); border:1px solid rgba(100,116,139,.2); color:#94a3b8; }

/* ── 5-col card body: team | stat-bars-H | score-box | stat-bars-A | team ── */
.mc-body { display:grid; padding:16px 18px 12px; grid-template-columns:minmax(0,1fr) 110px 76px 110px minmax(0,1fr); align-items:center; gap:10px; }
/* No team metrics in the feed → collapse to team · score · team */
.mc-body-slim { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:20px; }
.mc-team-h { display:flex; align-items:center; gap:7px; min-width:0; }
.mc-team-a { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; }
.mc-logo { width:28px; height:28px; border-radius:50%; background:var(--s2); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; border:1px solid var(--border); overflow:hidden; }
.mc-logo img { width:100%; height:100%; object-fit:contain; }
.mc-tname { font-size:20px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; }
.mc-team-info { display:flex; flex-direction:column; gap:3px; min-width:0; max-width:100%; flex:1; }
.mc-team-info-r { align-items:flex-end; }
.mc-team-info-r .mc-tname { text-align:right; }
.mc-pos-badge { display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--text2); background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:6px; padding:2px 8px; width:fit-content; font-variant-numeric:tabular-nums; }
.mc-sbox { background:var(--s2); border:1px solid var(--border2); border-radius:5px; padding:6px 8px; text-align:center; flex-shrink:0; }
.csb-nodata { display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; }
.mc-score { font-size:18px; color:var(--text); letter-spacing:2px; }
.mc-score.score-flash { animation:scoreFlash .6s ease 2; }
@keyframes scoreFlash { 0%,100%{color:var(--text)} 50%{color:var(--g);text-shadow:0 0 12px rgba(139,195,74,.6)} }
.mc-vs-time { font-size:14px; color:var(--b); letter-spacing:1px; }
.mc-lmin { font-size:11px; color:var(--r); display:flex; align-items:center; justify-content:center; gap:3px; margin-top:2px; }

/* ── Compact stat bars ── */
.csb-home, .csb-away { display:flex; flex-direction:column; gap:3px; }
.csb-row { display:flex; align-items:center; gap:3px; }
.csb-row-r { flex-direction:row-reverse; }
.csb-lbl { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; width:26px; flex-shrink:0; }
.csb-pct { font-size:11px; font-weight:700; width:26px; flex-shrink:0; text-align:right; font-variant-numeric:tabular-nums; }
.csb-row-r .csb-pct { text-align:left; }
.csb-track { flex:1; height:4px; background:var(--s3); border-radius:2px; overflow:hidden; }
.csb-track-r { direction:rtl; }
.csb-fill { height:100%; border-radius:2px; }
.csb-lbl.atk, .csb-pct.atk { color:#4ade80; }
.csb-lbl.def, .csb-pct.def { color:#38bdf8; }
.csb-lbl.frm, .csb-pct.frm { color:#fbbf24; }
.csb-fill.atk { background:linear-gradient(90deg,rgba(74,222,128,.3),#4ade80); }
.csb-fill.def { background:linear-gradient(90deg,rgba(56,189,248,.3),#38bdf8); }
.csb-fill.frm { background:linear-gradient(90deg,rgba(251,191,36,.3),#fbbf24); }

/* Tier filter chip colors */
.mf-chip-premium.active { background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.3); color:#fb923c; }
.mf-chip-elite.active   { background:rgba(6,182,212,.1);   border-color:rgba(6,182,212,.3);   color:#22d3ee; }

.mc-prob-row { padding:0 18px 6px; }

/* ── Binary market split bar ───────────────────────────────────────
   Two sides, one number each; the stronger side carries the colour. */
/* Sized to sit alongside the 1X2 track rather than tower over it: that bar is
   14px, so a binary market at 44px read as a different component entirely.
   24px keeps the labels legible while the two states stay visually siblings. */
.mc-split {
  display:flex; gap:6px; height:24px;
}
.mc-side {
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; border-radius:7px; min-width:0;
  transition:background .2s,border-color .2s;
}
.mc-side-lbl {
  font-size:11px; font-weight:600; color:var(--text2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mc-side-pct {
  font-size:13px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
/* Green = the market, amber = its complement — the pairing the 1X2 bar
   already uses. The leaning side goes solid, the other stays tinted. */
.mc-side.yes { background:rgba(74,222,128,.13);  border-color:rgba(74,222,128,.30); }
.mc-side.no  { background:rgba(245,158,11,.13);  border-color:rgba(245,158,11,.30); }
.mc-side.yes .mc-side-lbl,
.mc-side.yes .mc-side-pct { color:var(--prob-home-txt); }
.mc-side.no  .mc-side-lbl,
.mc-side.no  .mc-side-pct { color:var(--prob-away-txt); }

.mc-side.yes.win { background:var(--prob-home); border-color:var(--prob-home); }
.mc-side.no.win  { background:var(--prob-away); border-color:var(--prob-away); }
.mc-side.win .mc-side-lbl { color:rgba(10,14,6,.68); }
.mc-side.win .mc-side-pct { color:#0a0e06; }
.mc-ptrack { height:14px; background:rgba(12,16,24,.9); border-radius:100px; overflow:hidden; display:flex; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.mc-ph { height:100%; background:linear-gradient(90deg,var(--prob-home),#8bc34a); border-radius:100px 0 0 100px; transition:width .8s cubic-bezier(.25,.46,.45,.94); overflow:hidden; }
.mc-pd { height:100%; background:var(--prob-draw); overflow:hidden; }
.mc-pa { flex:1; height:100%; background:var(--prob-away); border-radius:0 100px 100px 0; overflow:hidden; }
/* Percentages sit BELOW the bar, each in its outcome's colour */
.mc-prob-labels { display:flex; justify-content:space-between; padding:8px 1px 0; }
.mc-pl,.mc-dl,.mc-al { font-size:14px; font-weight:700; white-space:nowrap; letter-spacing:-.01em; }
.mc-pl { color:var(--prob-home-txt); }
.mc-dl { color:var(--prob-draw-txt); }
.mc-al { color:var(--prob-away-txt); }
.mc-prob-labels em { font-style:normal; font-weight:500; font-size:12px; color:var(--text2); margin-left:3px; }

.mc-form-row { display:flex; align-items:center; justify-content:space-between; padding:4px 14px; gap:6px; border-top:1px solid rgba(22,32,48,.7); }
.mc-form-side { display:flex; gap:3px; flex:1; }
.mc-form-side-a { justify-content:flex-end; }
.mc-form-label { font-size:10px; color:var(--text2); flex-shrink:0; text-transform:uppercase; }
.fd { width:22px; height:22px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.fd.w { background:rgba(139,195,74,.12); border:1px solid rgba(139,195,74,.3); color:var(--g); }
.fd.d { background:rgba(255,204,0,.09); border:1px solid rgba(255,204,0,.25); color:var(--gold); }
.fd.l { background:rgba(255,51,85,.09); border:1px solid rgba(255,51,85,.25); color:var(--r); }

.mc-badges { display:flex; align-items:center; gap:7px; padding:12px 18px 14px; flex-wrap:wrap; border-top:1px solid var(--glass-border); }
.mb { font-size:12px; font-weight:500; padding:5px 10px; border-radius:8px; display:inline-flex; align-items:center; }

/* ── Badges ────────────────────────────────────────────────────────
   The percentage stays bright and neutral so it always reads first.
   Confidence sits to its right as a lit-bar meter plus its word — the
   level is legible from the bar count alone, colour only reinforces. */
.mb {
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  gap:0;
}
.mb-mkt { font-size:12px; font-weight:500; color:var(--text2); margin-right:7px; }
.mb-pct { font-size:13px; font-weight:700; color:var(--text); letter-spacing:-.01em; }

/* Signal meter: 3 bars, lit 3 / 2 / 1 for HIGH / MED / LOW */
.cmeter {
  display:inline-flex; align-items:flex-end; gap:2px; height:12px; margin:0 5px 0 9px;
}
.cmeter i {
  display:block; width:3px; border-radius:1px;
  background:rgba(255,255,255,.16);
}
.cmeter i:nth-child(1) { height:5px; }
.cmeter i:nth-child(2) { height:8px; }
.cmeter i:nth-child(3) { height:11px; }
.clabel { font-size:10px; font-weight:700; letter-spacing:.04em; }
/* Meter inside a filter chip sits tighter to its word */
.mf-chip .cmeter { margin:0 6px 0 0; height:10px; }
.mf-chip .cmeter i:nth-child(1){height:4px} .mf-chip .cmeter i:nth-child(2){height:7px} .mf-chip .cmeter i:nth-child(3){height:10px}

/* Level colours — tinted plate, solid meter, full-strength word */
/* Badges reuse the probability bar's own palette so a card reads as one
   piece: the emerald that fills home is the emerald of a strong signal,
   the amber of away is the amber of a middling one. No solid fills —
   on a dark surface those glare and make their own text vibrate, so the
   colour lives in the text, the border and the meter. */
.mb-high {
  background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.48);
}
.mb-high .mb-mkt { color:#7fc99a; font-weight:600; }
.mb-high .mb-pct { color:var(--prob-home-txt); font-weight:700; }
.mb-high .clabel { color:var(--prob-home-txt); }
.mb-high .cmeter i    { background:rgba(74,222,128,.20); }
.mb-high .cmeter i.on { background:var(--prob-home); }

.mb-med {
  background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.38);
}
.mb-med .mb-mkt { color:#c2a463; }
.mb-med .mb-pct { color:var(--prob-away-txt); font-weight:700; }
.mb-med .clabel { color:var(--prob-away-txt); }
.mb-med .cmeter i    { background:rgba(245,158,11,.18); }
.mb-med .cmeter i.on { background:var(--prob-away); }

.mb-low {
  background:transparent; border-color:rgba(148,163,184,.15);
  padding:4px 9px;
}
.mb-low .mb-mkt { color:var(--text3); }
.mb-low .mb-pct { color:#93a3b6; font-weight:600; }
.mb-low .clabel { color:var(--text3); }
.mb-low .cmeter i    { background:rgba(148,163,184,.14); }
.mb-low .cmeter i.on { background:#7d8fa3; }

/* The market the list is sorted by, and the model's own pick */
.mb-lead { box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; }
.mb-lead .mb-mkt { color:var(--text); font-weight:600; }
.mb-word { font-style:normal; font-size:11px; color:var(--text3); margin-left:2px; }
.mb-stars { color:#fbbf24; letter-spacing:1px; background:rgba(251,191,36,.09); border-color:rgba(251,191,36,.22); }
.mb-src   { color:var(--text3); font-size:11px; }

/* ══════════════════════════════════════
   SKELETON LOADING
══════════════════════════════════════ */
.skeleton-card { height:120px; border-radius:6px; background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%); background-size:200% 100%; animation:skeleton 1.5s infinite; }
@keyframes skeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════
   NO RESULTS
══════════════════════════════════════ */
.no-results { text-align:center; padding:60px 20px; font-family:var(--mono); font-size:13px; color:var(--text3); }
.no-results.hidden { display:none; }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:500; display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal { background:var(--s1); border:1px solid var(--border2); border-radius:6px; width:100%; max-width:820px; overflow:hidden; animation:modalIn .25s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:rgba(0,0,0,.3); border-bottom:1px solid var(--border); }
.modal-league { font-size:13px; font-weight:600; color:var(--text2); letter-spacing:.06em; text-transform:uppercase; }
.modal-close { background:transparent; border:1px solid var(--border); color:var(--text2); width:28px; height:28px; border-radius:2px; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.modal-close:hover { border-color:var(--r); color:var(--r); }
.modal-match { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:24px 20px 16px; }
.mm-team { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mm-logo { width:56px; height:56px; border-radius:50%; background:var(--s2); display:flex; align-items:center; justify-content:center; font-size:28px; border:1px solid var(--border2); overflow:hidden; }
.mm-logo img { width:100%; height:100%; object-fit:contain; }
.mm-name { font-size:20px; font-weight:800; color:var(--text); text-align:center; }
.mm-score-box { text-align:center; }
.mm-score { font-size:46px; font-weight:700; color:var(--text); letter-spacing:1px; line-height:1; font-variant-numeric:tabular-nums; }
.mm-vs { font-size:15px; font-weight:600; color:var(--text3); letter-spacing:.15em; }
.modal-section { padding:0 20px 16px; }
.modal-section:last-child { padding-bottom:20px; }
.modal-label { font-size:12px; font-weight:600; color:var(--text3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.modal-ptrack { height:32px; background:var(--s2); border-radius:2px; overflow:hidden; display:flex; }
.mp-h { height:100%; background:linear-gradient(90deg,var(--prob-home),#8bc34a); display:flex; align-items:center; justify-content:center; }
.mp-d { height:100%; background:var(--prob-draw); display:flex; align-items:center; justify-content:center; }
.mp-a { flex:1; height:100%; background:var(--prob-away); display:flex; align-items:center; justify-content:center; }
.mp-lbl { font-size:11px; padding:0 8px; white-space:nowrap; }

/* ══════════════════════════════════════
   NO DATA / EMPTY STATES
══════════════════════════════════════ */
.no-data-msg { padding:24px; font-family:var(--mono); font-size:12px; color:var(--text3); text-align:center; }

/* ══════════════════════════════════════
   MATCH CENTER CTA BANNER (landing funnel)
══════════════════════════════════════ */
.mc-cta {
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--g-border); border-radius:16px;
  padding:24px 28px; margin-top:24px; cursor:pointer;
  transition:border-color .25s, transform .25s, background .25s;
}
.mc-cta:hover { border-color:rgba(139,195,74,.42); transform:translateY(-2px); background:var(--glass-strong); }
.mc-cta-title { font-size:18px; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:5px; }
.mc-cta-sub   { font-size:13px; color:var(--text2); }
.mc-cta .btn-g { flex-shrink:0; }

/* ══════════════════════════════════════
   HIGH CONFIDENCE CARD
══════════════════════════════════════ */
.mc-high-conf {
  border-color:rgba(139,195,74,.35) !important;
  box-shadow:0 0 0 1px rgba(139,195,74,.12), 0 4px 24px rgba(139,195,74,.07);
}
.mc-high-conf .mc-header { background:rgba(139,195,74,.04); }

/* ══════════════════════════════════════
   MATCH CARD ADDITIONS
══════════════════════════════════════ */
/* Round badge in header */
.mc-round-badge { font-size:11px; color:var(--text3); background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:5px; padding:2px 7px; margin-left:2px; font-weight:500; }

/* HT / ET score under main score */
.mc-ht-score {
  font-size:11px; color:var(--text3);
  letter-spacing:.3px; margin-top:2px; text-align:center;
}
.mc-et-score {
  font-size:11px; color:var(--gold);
  letter-spacing:.5px; text-transform:uppercase; text-align:center; margin-bottom:1px;
}

/* W/D/L record in form row */
.mc-wdl { display:flex; gap:3px; align-items:center; margin:0 5px; }
.wdl-w  { font-size:11px; font-weight:700; color:var(--g); }
.wdl-d  { font-size:11px; font-weight:700; color:var(--gold); }
.wdl-l  { font-size:11px; font-weight:700; color:var(--r); }

/* Prob bar labels row (1 / X / 2) */

/* High confidence badge */
@keyframes confPulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* ══════════════════════════════════════
   MODAL ADDITIONS
══════════════════════════════════════ */
.mm-ht         { font-size:12px; color:var(--text3); text-align:center; margin-top:5px; font-variant-numeric:tabular-nums; }
.mm-sub-score  { font-size:12px; font-weight:600; color:var(--gold); text-align:center; margin-top:4px; }

/* W/D/L in modal metrics */
.mm-wdl-row   { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.mm-wdl-w     { font-size:16px; color:var(--g); }
.mm-wdl-d     { font-size:16px; color:var(--gold); }
.mm-wdl-l     { font-size:16px; color:var(--r); }
.mm-wdl-label { font-size:11px; color:var(--text3); margin-left:2px; text-transform:uppercase; letter-spacing:.5px; }

/* Form dots inside modal metrics panel */
.mm-form-dots { display:flex; gap:3px; margin-top:8px; }

/* High confidence label inside AI pick section */
.mai-highconf {
  font-size:11px; font-weight:700;
  color:var(--g); letter-spacing:.8px; margin-top:4px;
  animation:confPulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════
   MATCH CARD — misc fixes
══════════════════════════════════════ */
.mc-header-right { display:flex; gap:6px; align-items:center; }

/* ══════════════════════════════════════
   STALE DATA BANNER
══════════════════════════════════════ */
.stale-banner {
  background:rgba(255,212,59,.08); border-bottom:1px solid rgba(255,212,59,.2);
  color:var(--gold); font-size:11px;
  padding:8px 16px; display:flex; align-items:center; gap:10px;
}
.stale-banner.hidden { display:none; }
.stale-retry {
  background:transparent; border:1px solid rgba(255,212,59,.3); color:var(--gold);
  font-size:10px; padding:2px 10px; border-radius:3px;
  cursor:pointer; transition:all .15s;
}
.stale-retry:hover { background:rgba(255,212,59,.1); }
/* `hidden` is not a global utility in this file — every user of it declares
   its own rule. Retry is pointless when the feed itself is stale. */
.stale-retry.hidden { display:none; }

/* ══════════════════════════════════════
   REFRESH BUTTON + LAST UPDATED
══════════════════════════════════════ */
.refresh-btn {
  background:transparent; border:1px solid var(--border); color:var(--text2);
  font-size:16px; width:28px; height:28px; border-radius:4px;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.refresh-btn:hover { border-color:var(--g); color:var(--g); }
.refresh-btn.spinning { animation:spin .7s linear infinite; color:var(--g); border-color:rgba(139,195,74,.3); }
.refresh-btn:disabled { pointer-events:none; opacity:.5; }
@keyframes spin { to { transform:rotate(360deg); } }

.last-updated {
  font-size:11px; color:var(--text3);
  white-space:nowrap; min-width:54px;
}

/* ══════════════════════════════════════
   LIVE COUNT BADGE ON CHIP
══════════════════════════════════════ */
.live-dot-chip {
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--r); flex-shrink:0; animation:livePulse 1.4s ease-out infinite;
}
.live-count-badge {
  background:var(--r); color:#fff; font-size:11px;
  font-weight:700; padding:0 5px; border-radius:8px; min-width:16px;
  text-align:center; line-height:16px; height:16px; display:inline-flex;
  align-items:center; justify-content:center;
}
.live-count-badge.hidden { display:none; }

/* ══════════════════════════════════════
   MODAL — MATCH EVENTS TIMELINE
══════════════════════════════════════ */
.modal-events { display:flex; flex-direction:column; }
.me-row {
  display:grid; grid-template-columns:1fr 56px 1fr; align-items:center;
  gap:14px; padding:11px 4px; border-bottom:1px solid var(--glass-border);
}
.me-row:last-child { border-bottom:none; }
.me-min {
  font-size:12px; font-weight:700; color:var(--text2);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
  border-radius:6px; padding:3px 0; text-align:center;
  font-variant-numeric:tabular-nums;
}
.me-side { font-size:15px; font-weight:600; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-l { text-align:right; }
.me-r { text-align:left; }
.me-assist { color:var(--text3); font-size:13px; font-weight:400; }
.me-arrow  { color:var(--g); }
.me-out    { color:var(--text3); }
.me-tag {
  font-size:10px; font-weight:700; letter-spacing:.05em;
  background:rgba(148,163,184,.14); color:#a8b8ca;
  padding:2px 6px; border-radius:4px; margin-left:5px;
}

/* ══════════════════════════════════════
   MODAL — AI PICK SECTION
══════════════════════════════════════ */
.modal-ai-row { display:flex; gap:12px; padding:0 20px 16px; }
.modal-ai-pick, .modal-ai-stars { background:var(--s2); border:1px solid var(--border); border-radius:4px; padding:14px 18px; flex:1; }
.mai-market { font-size:30px; font-weight:700; color:var(--g); line-height:1; margin:8px 0 5px; letter-spacing:-.02em; }
.mai-prob { font-size:13px; color:var(--text2); }
.mai-stars { font-size:18px; color:var(--gold); margin:6px 0 4px; letter-spacing:2px; }
.mai-tier { font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; display:inline-block; letter-spacing:.04em; }

/* ══════════════════════════════════════
   MODAL — ALL MARKETS GRID
══════════════════════════════════════ */
.modal-markets { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
@media(max-width:560px) { .modal-markets { grid-template-columns:repeat(2,1fr); } }
.mk-item { background:var(--s2); border:1px solid var(--border); border-radius:4px; padding:10px 12px; }
.mk-label { font-size:11px; color:var(--text3); letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px; }
.mk-val { font-size:22px; font-weight:700; line-height:1; margin-bottom:8px; letter-spacing:-.02em; }
.mk-bar-track { height:3px; background:var(--s3); border-radius:2px; overflow:hidden; }
.mk-bar-fill { height:100%; border-radius:2px; transition:width .6s ease; }

/* Market item color variants */
.mk-1 { border-top:2px solid var(--g); }
.mk-1 .mk-val { color:var(--g); }
.mk-1 .mk-bar-fill { background:var(--g); }

.mk-x { border-top:2px solid var(--text2); }
.mk-x .mk-val { color:var(--text2); }
.mk-x .mk-bar-fill { background:var(--text2); }

.mk-2 { border-top:2px solid var(--b); }
.mk-2 .mk-val { color:var(--b); }
.mk-2 .mk-bar-fill { background:var(--b); }

.mk-dc { border-top:2px solid #ff8c6a; }
.mk-dc .mk-val { color:#ff8c6a; }
.mk-dc .mk-bar-fill { background:#ff8c6a; }

.mk-goals { border-top:2px solid var(--g2); }
.mk-goals .mk-val { color:var(--g2); }
.mk-goals .mk-bar-fill { background:var(--g2); }

.mk-btts { border-top:2px solid var(--b); }
.mk-btts .mk-val { color:var(--b); }
.mk-btts .mk-bar-fill { background:var(--b); }

/* ══════════════════════════════════════
   MODAL — TEAM METRICS
══════════════════════════════════════ */
.modal-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mm-metrics-col { background:var(--s2); border:1px solid var(--border); border-radius:4px; padding:12px 14px; }
.mm-team-label { font-size:15px; font-weight:700; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.mm-pos { font-size:10px; color:var(--text3); background:var(--s3); border:1px solid var(--border2); padding:1px 5px; border-radius:3px; }
.mm-met-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.mm-met-lbl { font-size:11px; font-weight:700; letter-spacing:.5px; width:22px; flex-shrink:0; }
.mm-met-lbl.atk { color:#4ade80; }
.mm-met-lbl.def { color:#38bdf8; }
.mm-met-lbl.frm { color:#fbbf24; }
.mm-met-track { flex:1; height:5px; background:var(--s3); border-radius:3px; overflow:hidden; }
.mm-met-fill { height:100%; border-radius:3px; }
.mm-met-fill.atk { background:linear-gradient(90deg,rgba(74,222,128,.3),#4ade80); }
.mm-met-fill.def { background:linear-gradient(90deg,rgba(56,189,248,.3),#38bdf8); }
.mm-met-fill.frm { background:linear-gradient(90deg,rgba(251,191,36,.3),#fbbf24); }
.mm-met-val { font-size:10px; color:var(--text2); width:24px; text-align:right; flex-shrink:0; }

/* ══════════════════════════════════════
   MODAL — SCORE / HEADER ADDITIONS
══════════════════════════════════════ */
.mm-live-min { font-size:11px; color:var(--r); margin-top:4px; text-align:center; }
.mm-kickoff  { font-size:11px; color:var(--b); margin-top:4px; text-align:center; }
.modal-date  { font-size:12px; color:var(--text3); margin-top:4px; font-variant-numeric:tabular-nums; }
.mm-pos-badge { font-size:10px; color:var(--text3); background:var(--s3); border:1px solid var(--border2); padding:2px 7px; border-radius:3px; margin-top:2px; }

/* ══════════════════════════════════════
   MODAL — PROBABILITY BAR LABELS
══════════════════════════════════════ */
.mp-lbl-h { font-size:11px; color:#03060a; padding:0 6px; white-space:nowrap; font-weight:700; }
.mp-lbl-d { font-size:11px; color:rgba(232,240,255,.85); padding:0 4px; white-space:nowrap; }
.mp-lbl-a { font-size:11px; color:#fff; padding:0 6px; white-space:nowrap; font-weight:700; }

/* ══════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════ */
.back-to-top { position:fixed; bottom:24px; right:24px; z-index:400; background:var(--s2); border:1px solid var(--border3); color:var(--text2); width:36px; height:36px; border-radius:3px; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .2s; opacity:0; pointer-events:none; }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { border-color:var(--g); color:var(--g); }

/* ══════════════════════════════════════
   HERO TRUST CHIPS
══════════════════════════════════════ */
.hero-chips { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; animation:fadeUp .6s .25s ease both; }
.hchip {
  font-size:12px; font-weight:500; color:var(--text2);
  background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); border-radius:100px;
  padding:7px 15px;
}

/* ══════════════════════════════════════
   TRUST STRIP — the proof, right under the fold
══════════════════════════════════════ */
.trust-strip { max-width:1280px; margin:0 auto 40px; padding:0 40px; position:relative; z-index:1; }
.trust-inner {
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); border-radius:16px;
  padding:24px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.trust-item { text-align:center; flex:1; min-width:0; }
.trust-value { font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--text); margin-bottom:4px; }
.trust-value span { color:var(--g); }
.trust-label { font-size:12px; font-weight:500; color:var(--text3); line-height:1.4; }
.trust-divider { width:1px; height:34px; background:var(--glass-border); flex-shrink:0; }

/* ══════════════════════════════════════
   LAB PROCESS SECTION
══════════════════════════════════════ */
.lab-section { max-width:1280px; margin:0 auto; padding:24px 40px 72px; position:relative; z-index:1; }
.lab-head { margin-bottom:44px; text-align:center; }
.sec-eyebrow {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-size:12px; font-weight:600; color:var(--g);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;
}
.sec-eyebrow::before, .sec-eyebrow::after { content:''; width:24px; height:1px; background:var(--g); opacity:.4; }
.sec-title { font-size:clamp(24px,3.4vw,32px); font-weight:700; color:var(--text); letter-spacing:-.035em; }
.sec-title span { color:var(--g); }
.sec-sub {
  max-width:660px; margin:14px auto 0; font-size:15px;
  color:var(--text2); line-height:1.65;
}
/* Five stacked rows rather than three columns: the steps are a sequence,
   and reading them top to bottom makes that order obvious. */
.lab-steps { display:flex; flex-direction:column; gap:12px; max-width:1000px; margin:0 auto; }
.lab-step {
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); border-radius:16px;
  padding:24px 28px; position:relative; overflow:hidden; text-align:left;
  display:flex; align-items:flex-start; gap:22px;
  transition:border-color .25s, transform .25s;
}
.lab-step:hover { border-color:var(--glass-hover); transform:translateY(-2px); }
.ls-num {
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--g);
  letter-spacing:.06em; flex:none; padding-top:2px; min-width:26px;
}
.ls-body { flex:1; min-width:0; }
.ls-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:7px; letter-spacing:-.01em; }
.ls-text { font-size:14px; color:var(--text2); line-height:1.65; }

/* ── Responsible gambling — deliberately calm, no green call-to-action ── */
.safe-section { max-width:1000px; margin:0 auto; padding:8px 40px 72px; position:relative; z-index:1; }
.safe-label {
  font-size:12px; font-weight:600; color:var(--text3);
  letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.safe-label::after { content:''; flex:1; height:1px; background:var(--glass-border); }
.safe-card {
  background:linear-gradient(135deg, var(--gd) 0%, var(--glass) 55%);
  border:1px solid var(--g-border); border-radius:16px; padding:28px 32px;
}
.safe-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:20px; letter-spacing:-.01em; }
.safe-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 40px; }
.safe-item { font-size:14px; color:var(--text2); line-height:1.65; margin:0; }
.safe-item strong { color:var(--text); font-weight:600; }
.safe-foot {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--text3);
}

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.lab-step.reveal:nth-child(2) { transition-delay:.06s; }
.lab-step.reveal:nth-child(3) { transition-delay:.12s; }
.lab-step.reveal:nth-child(4) { transition-delay:.18s; }
.lab-step.reveal:nth-child(5) { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-eyebrow,.hero-h1,.hero-tagline,.hero-sub,.hero-chips,.hero-cta,.hero-secondary-link { animation:none; }
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  border-top:1px solid var(--glass-border); margin-top:8px;
  background:rgba(6,8,14,0.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:relative; z-index:1;
}
.footer-inner {
  max-width:1280px; margin:0 auto; padding:28px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-brand .logo-text { font-size:15px; }
.footer-tag { font-size:10px; font-weight:500; color:var(--text3); letter-spacing:.07em; text-transform:uppercase; margin-top:3px; }
.footer-links { display:flex; gap:20px; }
.footer-links button {
  background:transparent; border:none; color:var(--text3);
  font-size:13px; font-weight:500; padding:4px 0;
  transition:color .2s;
}
.footer-links button:hover { color:var(--text2); }
.footer-note { font-size:12px; color:var(--text3); line-height:1.6; text-align:right; }

/* ══════════════════════════════════════
   CONFIDENCE LABELS (HIGH / MEDIUM / LOW)
   Always rendered with their text — never colour alone.
══════════════════════════════════════ */
.cf {
  font-size:11px; font-weight:700;
  letter-spacing:.4px; padding:2px 5px; border-radius:4px; margin-left:5px;
}
/* Solid fills — a translucent tint over a coloured badge washed these out */
.cf-high   { background:rgba(74,222,128,.20);  color:#6ee7a0; }
.cf-medium { background:rgba(251,191,36,.20);  color:#fbbf24; }
.cf-low    { background:rgba(148,163,184,.18); color:#a3b2c4; }

/* Confidence filter chips */
.mf-chip-high.active { background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.42); color:#6ee7a0; }
.mf-chip-high .cmeter i.on { background:#4ade80; }
.mf-chip-med.active  { background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.45); color:#fbbf24; }

/* Adaptive Min% range hint */
.mf-range { font-size:11px; color:var(--text3); white-space:nowrap; }

/* Probability source badge on cards */

/* The market the list is currently sorted by — leads the badge row */

/* Confidence inside the modal market grid */
.mk-item   { position:relative; }
.mk-conf   { margin-left:0; margin-top:5px; display:inline-block; }
.mk-source { font-size:11px; color:var(--text3); text-transform:none; letter-spacing:0; margin-left:6px; }

/* ══════════════════════════════════════
   LINEUPS — FOOTBALL PITCH
══════════════════════════════════════ */
.lineups-loading { font-size:10px; color:var(--text3); padding:14px; text-align:center; }
.lineup-formations { display:flex; justify-content:space-between; margin-bottom:10px; font-size:12px; font-weight:600; color:var(--text2); }
.lf-away { color:#cfe3ff; }
.lf-home { color:var(--g); }

.pitch {
  position:relative; height:560px;
  background:linear-gradient(180deg,#0d6b34,#0a5c2c);
  border:2px solid rgba(255,255,255,.22); border-radius:8px;
  display:flex; flex-direction:column; overflow:hidden;
}
/* Mowing stripes */
.pitch::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 56px, transparent 56px 112px);
}
/* Markings */
.pitch-center-line   { position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(255,255,255,.22); }
.pitch-center-circle { position:absolute; left:50%; top:50%; width:92px; height:92px; border:2px solid rgba(255,255,255,.22); border-radius:50%; transform:translate(-50%,-50%); }
.pitch-box { position:absolute; left:50%; transform:translateX(-50%); width:46%; height:12%; border:2px solid rgba(255,255,255,.22); }
.pitch-box-top    { top:-2px; border-top:none; }
.pitch-box-bottom { bottom:-2px; border-bottom:none; }

.pitch-half { flex:1; display:flex; flex-direction:column; justify-content:space-around; padding:12px 6px; position:relative; z-index:1; }
.pitch-row  { display:flex; justify-content:space-around; }

.pl { display:flex; flex-direction:column; align-items:center; gap:3px; width:78px; min-width:0; }
.pl-dot {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  border:2px solid rgba(0,0,0,.35); box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.pl-home .pl-dot { background:var(--g); color:#0c1200; }
.pl-away .pl-dot { background:#f2f6ff; color:#101418; }
.pl-name {
  font-size:11px; font-weight:600; color:#f2f8f2;
  max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.9); text-align:center; letter-spacing:0;
}

.lineup-bench { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.lb-col   { background:var(--s2); border:1px solid var(--border); border-radius:4px; padding:10px 12px; }
.lb-title { font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.lb-item  { font-size:13px; color:var(--text2); padding:3px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-num   { color:var(--text3); display:inline-block; min-width:22px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:640px) {
  .pitch { height:440px; }
  .pl { width:52px; }
  .pl-name { max-width:52px; font-size:10px; }
  .lineup-bench { grid-template-columns:1fr; }
  /* Steps already stack; tighten them and drop the safety grid to one column */
  .lab-section { padding:24px 16px 48px; }
  .lab-step { padding:20px; gap:14px; }
  .safe-section { padding:8px 16px 56px; }
  .safe-card { padding:22px 20px; }
  .safe-grid { grid-template-columns:1fr; gap:14px; }
  .safe-foot { flex-direction:column; gap:6px; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-note { text-align:center; }
  .hero { padding:0 16px; min-height:auto; padding-top:48px; padding-bottom:48px; }
  .mf-row { gap:4px; padding:6px 12px; }
  .mf-search { width:120px; }
  .modal-match { grid-template-columns:1fr auto 1fr; gap:8px; }
  /* Collapse stat bars on mobile — show 3-col layout */
  .mc-body { grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr); }
  .csb-home, .csb-away { display:none; }
  .mc-tname { font-size:16px; }
  /* Upcoming: drop the league column on narrow screens */
  .ur-league { display:none; }
}

/* ══════════════════════════════════════
   SERVER-RENDERED PAGES (/match, /league)
   Real pages a crawler can read without running JavaScript. Users who
   land here get a readable page too, then the SPA takes over.
══════════════════════════════════════ */
.ssr-page { max-width:820px; margin:0 auto; padding:32px 24px 64px; }
.ssr-crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 22px; font-size:13px; color:var(--text3); }
.ssr-crumbs li + li::before { content:'›'; margin-right:8px; color:var(--border3); }
.ssr-crumbs a { color:var(--text2); text-decoration:none; }
.ssr-crumbs a:hover { color:var(--g); }
.ssr-h1 { font-size:clamp(26px,4vw,38px); font-weight:700; letter-spacing:-.03em; color:var(--text); margin-bottom:10px; }
.ssr-h2 { font-size:17px; font-weight:700; color:var(--text); margin:32px 0 14px; }
.ssr-meta { font-size:14px; color:var(--text2); margin-bottom:6px; }
.ssr-score { font-size:16px; color:var(--text); margin-top:10px; }
.ssr-table { width:100%; border-collapse:collapse; background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; }
.ssr-table caption { text-align:left; font-size:13px; color:var(--text3); padding:0 0 10px; }
.ssr-table th, .ssr-table td { padding:12px 16px; text-align:left; font-size:14px; border-bottom:1px solid var(--glass-border); }
.ssr-table thead th { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); font-weight:600; }
.ssr-table tbody th { font-weight:500; color:var(--text2); }
.ssr-table tr:last-child th, .ssr-table tr:last-child td { border-bottom:none; }
.ssr-pct { font-family:var(--mono); font-weight:600; color:var(--text); }
.ssr-conf { font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:6px; }
.ssr-high { background:var(--gd2); color:var(--g2); }
.ssr-medium { background:var(--goldd); color:var(--gold); }
.ssr-low { background:rgba(255,255,255,.05); color:var(--text3); }
.ssr-list { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:8px; }
.ssr-item a { display:flex; flex-direction:column; gap:4px; padding:14px 18px; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; text-decoration:none; transition:border-color .2s; }
.ssr-item a:hover { border-color:var(--g-border); }
.ssr-item-teams { font-size:15px; font-weight:600; color:var(--text); }
.ssr-item-meta { font-size:13px; color:var(--text3); }
.ssr-note { font-size:12px; color:var(--text3); margin-top:24px; line-height:1.6; }
.ssr-back { margin-top:18px; font-size:14px; }
.ssr-back a { color:var(--g); text-decoration:none; }
.ssr-back a:hover { text-decoration:underline; }
/* When JS boots and drives the SPA, the server copy would be duplicate. */
.ssr-hidden { display:none; }
@media(max-width:640px) { .ssr-page { padding:24px 16px 48px; } .ssr-table th, .ssr-table td { padding:10px 12px; } }

/* ── 404 ── */
.e404 { text-align:center; padding-top:80px; }
.e404-code {
  font-family:var(--mono); font-size:74px; font-weight:600;
  color:var(--g); opacity:.28; line-height:1; letter-spacing:-.04em; margin-bottom:8px;
}
.e404 .ssr-meta { max-width:520px; margin:0 auto; }
.e404 .ssr-note { max-width:520px; margin-left:auto; margin-right:auto; }