/* ═══════════════════════════════════════════
   FANDUEL STYLE OVERHAUL — ScoreMatrix
   Replaces all CSS variables and core styles
   Logic/JS untouched
═══════════════════════════════════════════ */

/* ── Google Fonts: Keep Inter, replace Orbitron with Barlow Condensed ── */
/* Added via <link> in head */

:root {
  /* FanDuel palette */
  --bg: #0f1421;
  --surface: #1a1f2e;
  --surface2: #242b3d;
  --card-bg: #1a1f2e;
  --border: #2d3550;
  --accent: #1db1ff;       /* FD blue */
  --accent2: #ff6b35;      /* orange for away team */
  --green: #00d48b;
  --red: #ff4466;
  --yellow: #f5c842;
  --wc-orange: #ffb428;    /* EV Finder "Strong" badge accent, tuned per theme */
  --text: #ffffff;
  --text-dim: #8896b0;
  --text-faint: #6b7894;
  --stat-num: #e9ecf3;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,0.4);
  --header-bg: #0f1421;
  --card-shadow: 0 10px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  --card-border: #2d3550;
  --ic-second: #ffffff; /* icon mark's 2nd colour: white in dark mode, matching the SCORE wordmark */
  --icon-bg-1: #122238;   /* logo icon badge background, top-left stop */
  --icon-bg-2: #0a1220;   /* logo icon badge background, bottom-right stop */
  --icon-border: rgba(29,177,255,0.22);
  --icon-glow-op: 1;      /* breathing glow behind the ball, dimmed in light mode */
  --icon-ball-1: #1c3654;
  --icon-ball-2: #0d1a2b;
}

/* Light mode = FanDuel's light theme (white/light gray) */
body.light {
  --bg: #f0f2f7;
  --surface: #ffffff;
  --surface2: #f5f7fb;
  --card-bg: #ffffff;
  --border: #d8dde8;
  --accent: #0074e8;
  --accent2: #e05500;
  --green: #00924e;
  --red: #d6003a;
  --yellow: #c49000;
  --wc-orange: #a85c00;    /* deepened so it doesn't wash out on light bg */
  --text: #0d1421;
  --text-dim: #4a5670;
  --text-faint: #5f6b85;
  --stat-num: #333c4d;
  --shadow: 0 1px 4px rgba(0,0,0,0.1);
  --header-bg: #ffffff;
  --card-shadow: 0 2px 4px rgba(20,30,60,0.06), 0 12px 28px rgba(20,30,60,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  --card-border: #d8dde8;
  --ic-second: #e05500; /* icon mark's 2nd colour: orange in light mode, matching the MATRIX wordmark */
  --icon-bg-1: #ffffff;   /* matches header-bg exactly — no visible box, just the icon shapes on the page */
  --icon-bg-2: #ffffff;
  --icon-border: var(--border);
  --icon-glow-op: 0.3;
  --icon-ball-1: #3a6ea8;   /* clearly navy-blue rather than reading as flat black */
  --icon-ball-2: #17385c;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
/* Kill Android's 300ms tap delay on all interactive elements */
a, button, input, select, textarea, label, [role="button"], .tab, .mnav-btn, .card {
  touch-action: manipulation;
}
body {
  font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Typography ── */
h1, h2, h3, .card-title, .tab, .team-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

/* ── Header ── */
/* Header styling lives in the "HEADER — full redesign" block further down
   this file (search for that heading) — this used to be a second, older
   header {} declaration here, but every property it set was fully
   overridden by the later block anyway (same selector, later in the
   cascade always wins), so it was dead code. Removed to avoid someone
   editing this spot and wondering why nothing changes. */

/* ── Logo overrides ── */
.logo-wrap { position: relative; display: inline-flex; align-items: center; }
.sm-icon-glow { opacity: var(--icon-glow-op, 1); }
.sm-ball-pulse {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: sm-ball-pulse 2s ease-in-out infinite;
}
@keyframes sm-ball-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-ball-pulse { animation: none; }
}
.sm-ball-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: sm-ball-spin 3.6s linear infinite;
}
@keyframes sm-ball-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-ball-spin { animation: none; }
}

/* Icon mark: soft lift + pulsing blue halo so it reads at real size,
   and doesn't look like a flat dark block on a light header. */
.sm-icon-mark {
  filter: drop-shadow(0 2px 7px rgba(8,14,26,0.4)) drop-shadow(0 0 4px rgba(29,177,255,0.35));
  animation: sm-icon-breathe 4.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes sm-icon-breathe {
  0%, 100% { filter: drop-shadow(0 2px 7px rgba(8,14,26,0.4)) drop-shadow(0 0 3px rgba(29,177,255,0.3)); }
  50%      { filter: drop-shadow(0 2px 7px rgba(8,14,26,0.4)) drop-shadow(0 0 9px rgba(29,177,255,0.85)); }
}
body.light .sm-icon-mark {
  filter: drop-shadow(0 3px 9px rgba(8,14,26,0.22)) drop-shadow(0 0 4px rgba(29,177,255,0.4));
}
body.light .sm-icon-mark { animation: sm-icon-breathe-light 4.2s ease-in-out infinite; }
@keyframes sm-icon-breathe-light {
  0%, 100% { filter: drop-shadow(0 3px 9px rgba(8,14,26,0.22)) drop-shadow(0 0 3px rgba(29,177,255,0.35)); }
  50%      { filter: drop-shadow(0 3px 9px rgba(8,14,26,0.28)) drop-shadow(0 0 10px rgba(29,177,255,0.9)); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-icon-mark { animation: none; }
}
.byline {
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 1px;
  margin-top: 2px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Theme & FAQ buttons ── */
.theme-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.theme-btn:hover { background: var(--surface); border-color: var(--accent); }

.faq-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}
.faq-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Tabs ── */
.tabs {
  display: flex;
  background: var(--bg);
  border-bottom: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 79px; /* = current header height (see header redesign block) */
  z-index: 99;
  padding: 8px 12px;
  gap: 6px;
  align-items: center;
}
.tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  pointer-events: none;
}
body.light .tabs { box-shadow: 0 3px 10px rgba(15,20,33,0.08); }
.tabs::-webkit-scrollbar { display: none; }
@media(max-width:640px) { .tabs { top: 69px; padding: 6px 8px; gap: 5px; } }
@media(max-width:640px) { .lg-row1-grid { grid-template-columns: 1fr 1fr !important; } .lg-row1-grid .field:nth-child(n+3) { grid-column: span 1; } .lg-row2-grid { grid-template-columns: 1fr 1fr 1fr !important; } }
@media(max-width:480px) { .lg-row1-grid { grid-template-columns: 1fr 1fr !important; } .lg-row2-grid { grid-template-columns: 1fr 1fr !important; } }

.tab {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2px;
  text-transform: none;
  padding: 7px 15px;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: none;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.tab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
/* New-results indicator — small pulsing dot, top-right of the tab pill */
.tab.tab-pulse::after,
.mnav-btn.tab-pulse::after {
  content: '';
  position: absolute;
  top: 4px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(0,212,139,0.9);
  animation: hmb-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
.mnav-btn.tab-pulse::after { top: 2px; right: 8px; }
.tab:hover {
  color: var(--text);
  background: rgba(29,177,255,0.1);
  border-color: rgba(29,177,255,0.4);
  transform: translateY(-1px);
}
.tab:active { transform: scale(0.95); }
.tab.active {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(29,177,255,0.4), 0 1px 3px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.tab.active::before { opacity: 0; }
body.light .tab:hover { background: rgba(0,116,232,0.08); border-color: rgba(0,116,232,0.35); }
body.light .tab.active {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,116,232,0.35);
}

/* Tab animations */
@keyframes tab-ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(3);  opacity: 0; }
}
.tab-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 70px; height: 70px;
  margin-left: -35px; margin-top: -35px;
  pointer-events: none;
  animation: tab-ripple 0.55s cubic-bezier(0.2,0,0.4,1) forwards;
}
@keyframes tab-pop-in {
  0%   { transform: translateY(-1px) scale(0.92); opacity: 0.6; }
  60%  { transform: translateY(-2px) scale(1.06); opacity: 1; }
  100% { transform: translateY(-1px) scale(1);    opacity: 1; }
}
.tab.active { animation: tab-pop-in 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Main content ── */
main { padding: 20px; max-width: 1100px; margin: 0 auto; }
@media(max-width:640px) { main { padding: 12px 10px 96px; } }
.section {
  display: none;
  opacity: 0;
  transform: translateY(6px);
}
.section.active {
  display: block;
  animation: section-fade-in 0.28s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes section-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .section.active { animation: none; opacity: 1; transform: none; }
  .faq-a, .om-body { transition: none; }
}

/* ── Cards ── */
.card {
  background: rgba(26,31,46,0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(29,177,255,0.18);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
body.light .card {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,116,232,0.16);
}
.card:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  border-color: rgba(29,177,255,0.32);
  transform: translateY(-2px);
}
body.light .card:hover {
  box-shadow: 0 4px 6px rgba(20,30,60,0.07), 0 16px 32px rgba(20,30,60,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
  border-color: rgba(0,116,232,0.3);
  transform: translateY(-2px);
}
.bs-hero-card {
  border: 3px solid rgba(29,177,255,0.6) !important;
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(29,177,255,0.1), var(--card-shadow) !important;
  position: relative;
}
body.light .bs-hero-card {
  border-color: rgba(0,116,232,0.55) !important;
  box-shadow: 0 0 0 4px rgba(0,116,232,0.08), 0 4px 16px rgba(0,0,0,0.07) !important;
}

/* ── Premium micro-motion: bet summary reveal ── */
.bs-hero-card::before, .verdict-card::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}
body.light .bs-hero-card::before, body.light .verdict-card::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.14), transparent);
}
.verdict-card { position: relative; }

@keyframes pick-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pick-card {
  animation: pick-card-in 0.42s cubic-bezier(0.16,1,0.3,1) backwards;
}
.pick-card:nth-of-type(1) { animation-delay: 0.02s; }
.pick-card:nth-of-type(2) { animation-delay: 0.1s; }
.pick-card:nth-of-type(3) { animation-delay: 0.18s; }
.verdict-card, .qstat-card {
  animation: pick-card-in 0.42s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.22s;
}
.qstat-card:nth-of-type(2) { animation-delay: 0.28s; }
.qstat-card:nth-of-type(3) { animation-delay: 0.34s; }

@media (hover: hover) {
  .pick-card, .qstat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .pick-card:hover { transform: translateY(-3px); }
  .pick-card.pick-top:hover { transform: translateY(-4px); }
  .qstat-card:hover { transform: translateY(-2px); }
}

.pick-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  .pick-card, .verdict-card, .qstat-card { animation: none; opacity: 1; transform: none; }
  .pick-card:hover, .pick-card.pick-top:hover, .qstat-card:hover { transform: none; }
}

/* ── Card title ── */
.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 70%); }
body.light .card-title::after { opacity: 0.6; }

/* ── Team cards ── */
.team-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.team-card:hover { border-color: rgba(29,177,255,0.2); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.team-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.team-home .team-label { color: var(--accent); }
.team-away .team-label { color: var(--accent2); }

/* ── Inputs ── */
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  text-transform: uppercase;
}
input[type="number"], input[type="text"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 9px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  -moz-appearance: textfield;
}
/* ── iOS zoom fix: inputs/selects must be ≥16px on mobile or Safari zooms in ── */
@media (max-width: 640px) {
  input[type="number"], input[type="text"], select {
    font-size: 16px !important;
  }
}
input[type="number"] {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(29,177,255,0.15);
}
body.light input[type="number"]:focus, body.light input[type="text"]:focus {
  box-shadow: 0 0 0 2px rgba(0,116,232,0.12);
}
.input-yellow { border-color: rgba(245,200,66,0.35) !important; }
.input-yellow:focus { border-color: var(--yellow) !important; box-shadow: 0 0 0 2px rgba(245,200,66,0.12) !important; }

/* ── Stats table ── */
.teams-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.stats-table th {
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--border);
}
.stats-table th.team-col { text-align: left; min-width: 110px; }
.stats-table td { padding: 6px 8px; border: 1px solid var(--border); text-align: center; vertical-align: middle; }
.stats-table td.team-name-cell {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: left;
  padding-left: 8px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-table tr.home-row td.team-name-cell { color: var(--accent); background: rgba(29,177,255,0.05); }
.stats-table tr.away-row td.team-name-cell { color: var(--accent2); background: rgba(255,107,53,0.05); }
.stats-table input[type="number"], .stats-table input[type="text"] {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 4px 6px;
  width: 70px;
  text-align: center;
  -moz-appearance: textfield;
}
.stats-table input[type="number"] {
  font-family: 'JetBrains Mono', monospace;
}
.stats-table input[type="text"] { width: 110px; text-align: left; }
.stats-table input::-webkit-outer-spin-button, .stats-table input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stats-table input:focus { outline: none; border-color: var(--accent); background: var(--surface2); }
.stats-table .input-yellow { border-color: rgba(245,200,66,0.3) !important; }
.stats-table .input-yellow:focus { border-color: var(--yellow) !important; background: var(--surface2) !important; }

/* ── Results panel ── */
.results-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.results-header {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.results-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text);
}

/* ── Outcome grid ── */
.outcome-grid { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--border); }
.outcome-cell { padding: 22px 14px; text-align: center; border-right: 1px solid var(--border); position: relative; }
.outcome-cell:last-child { border-right: none; }
.outcome-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.outcome-pct {
  font-family: 'Inter', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}
.outcome-pct.home { color: var(--accent); }
.outcome-pct.draw { color: var(--yellow); }
.outcome-pct.away { color: var(--accent2); }
.outcome-odds { font-size: 0.75rem; color: var(--text-dim); margin-top: 5px; font-weight: 500; }
.outcome-signal { font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 5px; }

/* ── Outcome tiles (premium) ── */
.outcome-grid-premium {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.outcome-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  cursor: default;
}
.outcome-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 8px 8px 0 0;
}
.outcome-tile.tile-home::before { background: var(--accent); }
.outcome-tile.tile-draw::before { background: var(--yellow); }
.outcome-tile.tile-away::before { background: var(--accent2); }
.outcome-tile.tile-home { border-color: rgba(29,177,255,0.2); }
.outcome-tile.tile-draw { border-color: rgba(245,200,66,0.2); }
.outcome-tile.tile-away { border-color: rgba(255,107,53,0.2); }
.outcome-tile:hover.tile-home { background: rgba(29,177,255,0.06); border-color: rgba(29,177,255,0.3); }
.outcome-tile:hover.tile-draw { background: rgba(245,200,66,0.06); border-color: rgba(245,200,66,0.3); }
.outcome-tile:hover.tile-away { background: rgba(255,107,53,0.06); border-color: rgba(255,107,53,0.3); }
.otile-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.otile-pct { font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.otile-pct.home { color: var(--accent); }
.otile-pct.draw { color: var(--yellow); }
.otile-pct.away { color: var(--accent2); }
.otile-odds { font-size: 0.72rem; color: var(--text-dim); margin-top: 4px; font-weight: 500; }
.otile-signal { font-size: 0.56rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }

/* ── Probability bars ── */
.bar-wrap { display: flex; flex-direction: column; gap: 0; padding: 10px 14px; }
.bar-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.bar-label { font-size: 0.75rem; color: var(--text-dim); width: 80px; }
.bar-track { flex: 1; background: var(--surface2); border-radius: 4px; height: 7px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.bar-pct { font-size: 0.78rem; font-weight: 600; width: 40px; text-align: right; }
.bar-sep { height: 1px; background: var(--border); margin: 5px 0; }
.bar-group-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding: 6px 0 2px; }

/* ── Top scores ── */
.top-scores { display: flex; flex-direction: column; }
.score-row { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); gap: 12px; }
.score-row:last-child { border-bottom: none; }
.score-rank { font-size: 1rem; font-weight: 700; color: var(--text-faint); width: 18px; text-align: center; }
.score-value { font-size: 1.2rem; font-weight: 800; width: 48px; text-align: center; }
.score-pct { font-size: 0.85rem; color: var(--text-dim); flex: 1; }
.score-odds { font-weight: 700; font-size: 0.95rem; }
.score-type { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; width: 60px; text-align: center; }
.type-home { background: rgba(29,177,255,0.1); color: var(--accent); }
.type-draw { background: rgba(245,200,66,0.1); color: var(--yellow); }
.type-away { background: rgba(255,107,53,0.1); color: var(--accent2); }

/* ── Score tiles ── */
.scoreline-tiles { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; }
.score-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 62px;
  transition: border-color 0.15s;
  cursor: default;
}
.score-tile.tile-rank1 {
  background: rgba(29,177,255,0.08);
  border-color: rgba(29,177,255,0.4);
}

/* ── Most Likely Hero ── */
.most-likely-hero {
  background: var(--surface2);
  border: 2px solid rgba(29,177,255,0.4);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 0 0 1px rgba(29,177,255,0.1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.most-likely-hero:hover { border-color: rgba(29,177,255,0.6); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
body.light .most-likely-hero { border-color: rgba(0,116,232,0.35); box-shadow: 0 0 0 1px rgba(0,116,232,0.08); }
body.light .most-likely-hero:hover { border-color: rgba(0,116,232,0.55); }
.mlh-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.mlh-score-row { margin-bottom: 10px; }
.mlh-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 3px;
  line-height: 1;
}
.mlh-outcome-row { margin-bottom: 8px; }
.mlh-outcome-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mlh-meta-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.72rem; color: var(--text-dim); }
.mlh-meta-dot { color: var(--text-faint); }

/* ── Predicted score hero ── */
.ps-hero {
  background: var(--surface2);
  border: 1px solid rgba(29,177,255,0.25);
  border-radius: 10px;
  padding: 24px 18px;
  text-align: center;
}
.ps-eyebrow { font-size: 0.58rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); opacity: 0.7; margin-bottom: 14px; }
.ps-teams-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.ps-team-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ps-emblem { width: 78px; height: 91px; flex-shrink: 0; }
.ps-team { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-team.home { color: var(--accent); }
.ps-team.away { color: var(--accent2); }
.ps-scoreline { font-family: 'JetBrains Mono', monospace; font-size: 3.5rem; font-weight: 800; color: var(--text); letter-spacing: 4px; line-height: 1; flex-shrink: 0; }
.ps-divider { height: 1px; background: var(--border); margin: 14px 0 10px; }
.ps-caption { font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.5px; }

/* ── Confidence bar ── */
.confidence-bar-wrap { margin: 14px 0 4px; }
.confidence-bar-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.confidence-bar-track { height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.confidence-bar-fill { height: 100%; border-radius: 999px; transition: transform 0.7s ease; transform-origin: left; background: linear-gradient(90deg, var(--accent), #00d48b); }
.confidence-bar-fill.full { background: linear-gradient(90deg, var(--accent), var(--yellow)); }

/* ── Confidence meter (inputs) ── */
.conf-meter-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.conf-meter-wrap:hover { border-color: rgba(29,177,255,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.conf-meter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.conf-meter-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.conf-meter-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.conf-badge-high { background: rgba(0,212,139,0.12); color: var(--green); border: 1px solid rgba(0,212,139,0.3); }
.conf-badge-med { background: rgba(245,200,66,0.12); color: var(--yellow); border: 1px solid rgba(245,200,66,0.3); }
.conf-badge-low { background: rgba(255,68,102,0.1); color: var(--red); border: 1px solid rgba(255,68,102,0.25); }
.conf-bar-track { height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.conf-bar-fill { height: 100%; border-radius: 999px; transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }

/* ── EV Table ── */
.ev-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ev-table th {
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 11px;
  text-align: left;
  border: 1px solid var(--border);
}
.ev-table th.right { text-align: right; }
.ev-table th.center { text-align: center; }
.ev-table td { padding: 8px 11px; border: 1px solid var(--border); vertical-align: middle; }
.ev-table td.right { text-align: right; }
.ev-table td.center { text-align: center; }
.ev-table tr:hover td { background: rgba(255,255,255,0.02); }
.ev-market { font-weight: 500; color: var(--text); }
.ev-model-prob { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.92rem; }
.ev-odds-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 5px 8px;
  width: 68px;
  text-align: center;
  -moz-appearance: textfield;
}
.ev-odds-input::-webkit-outer-spin-button, .ev-odds-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ev-odds-input:focus { outline: none; border-color: var(--accent); }
.ev-value { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 800; }
.ev-pos { color: var(--green); }
.ev-neg { color: var(--red); }
.ev-neutral { color: var(--text-dim); }
.ev-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.ev-badge-pos { background: rgba(0,212,139,0.12); color: var(--green); border: 1px solid rgba(0,212,139,0.25); }
.ev-badge-neg { background: rgba(255,68,102,0.1); color: var(--red); border: 1px solid rgba(255,68,102,0.25); }
.ev-badge-neutral { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
.ev-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface2);
  padding: 6px 11px;
  border: 1px solid var(--border);
}
.ev-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.ev-summary-card {
  background: var(--surface2);
  border: 1px solid rgba(29,177,255,0.18);
  border-top: 3px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.15s, border-top-color 0.15s;
  position: relative;
  overflow: hidden;
}
body.light .ev-summary-card { border-color: rgba(0,116,232,0.16); }
.ev-summary-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.ev-summary-card.evc-bets  { border-top-color: var(--green); }
.ev-summary-card.evc-ev    { border-top-color: var(--accent); }
.ev-summary-card.evc-mkts  { border-top-color: var(--border); }
.ev-summary-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ev-summary-icon { font-size: 0.85rem; line-height: 1; }
.ev-summary-val { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 800; }
.ev-summary-sub { font-size: 0.62rem; color: var(--text-faint); margin-top: 3px; }
.ev-row-value { background: rgba(29,177,255,0.04) !important; }
.ev-row-value td { border-color: rgba(29,177,255,0.12) !important; }
.ev-row-strong { background: rgba(29,177,255,0.08) !important; outline: 1px solid rgba(29,177,255,0.2); }
.ev-row-strong td { border-color: rgba(29,177,255,0.2) !important; }
.ev-row-empty { opacity: 0.5; transition: opacity 0.2s ease; }
.ev-row-empty .ev-model-prob, .ev-row-empty .ev-market { opacity: 0.85; }
@media(max-width:640px) { #bs-quickstats { grid-template-columns: repeat(2, 1fr) !important; } }
/* ── Best Value Bet banner ── */
.ev-top-pick {
  background: linear-gradient(135deg, rgba(0,212,139,0.07) 0%, rgba(29,177,255,0.05) 100%);
  border: 1px solid rgba(0,212,139,0.3);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ev-top-pick:hover { border-color: rgba(0,212,139,0.55); border-left-color: var(--green); box-shadow: 0 4px 20px rgba(0,212,139,0.12); }
body.light .ev-top-pick { background: linear-gradient(135deg, rgba(0,148,78,0.07), rgba(0,116,232,0.04)); border-color: rgba(0,148,78,0.3); border-left-color: var(--green); }
body.light .ev-top-pick:hover { border-color: rgba(0,148,78,0.5); box-shadow: 0 4px 16px rgba(0,148,78,0.1); }

.ev-top-pick-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(0,212,139,0.12);
  border: 1px solid rgba(0,212,139,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
body.light .ev-top-pick-icon { background: rgba(0,148,78,0.1); border-color: rgba(0,148,78,0.2); }

.ev-top-pick-body { flex: 1; min-width: 0; }
.ev-top-pick-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
body.light .ev-top-pick-label { color: var(--green); }

.ev-top-pick-market {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-top-pick-market.pick-home { color: var(--accent); }
.ev-top-pick-market.pick-away { color: var(--accent2); }
.ev-top-pick-market.pick-draw { color: var(--yellow); }
.ev-top-pick-market.pick-goals { color: var(--text); }

.ev-top-pick-sub {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.ev-top-pick-ev {
  flex-shrink: 0;
  text-align: right;
}
.ev-top-pick-ev-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.ev-top-pick-ev-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
  text-align: right;
}

/* ── Empty states ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-dim); }
.empty-icon { font-size: 2.2rem; margin-bottom: 10px; color: var(--text-faint); }
.empty-icon svg { display: inline-block; vertical-align: middle; }
.empty-state p { font-size: 0.88rem; }

/* ── Notes ── */
.note { font-size: 0.72rem; color: var(--text-faint); text-align: center; padding: 10px; line-height: 1.5; }

/* ── Half sections ── */
.half-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Toggle switch ── */
.toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 21px;
  transition: all 0.2s;
}
.toggle-slider:before {
  position: absolute; content: ""; height: 15px; width: 15px;
  left: 2px; bottom: 2px;
  background: var(--text-dim);
  border-radius: 50%; transition: all 0.2s;
}
input:checked + .toggle-slider { background: rgba(29,177,255,0.15); border-color: var(--accent); }
input:checked + .toggle-slider:before { transform: translateX(17px); background: var(--accent); box-shadow: 0 0 4px rgba(29,177,255,0.5); }
.toggle-label { font-size: 0.78rem; color: var(--text-dim); font-weight: 500; }

/* ── SM toggle (secondary) ── */
.sm-toggle { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.sm-toggle input { opacity: 0; width: 0; height: 0; }
.sm-toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 21px; transition: all 0.2s;
}
.sm-toggle-slider:before {
  position: absolute; content: ""; height: 15px; width: 15px;
  left: 2px; bottom: 2px;
  background: var(--text-dim); border-radius: 50%; transition: all 0.2s;
}
.sm-toggle input:checked + .sm-toggle-slider { background: rgba(29,177,255,0.15); border-color: var(--accent); }
.sm-toggle input:checked + .sm-toggle-slider:before { transform: translateX(17px); background: var(--accent); box-shadow: 0 0 4px rgba(29,177,255,0.4); }
.sm-toggle input:active + .sm-toggle-slider:before { width: 19px; }
.sm-toggle input:checked:active + .sm-toggle-slider:before { transform: translateX(13px); width: 19px; }

/* ── Expand / section buttons ── */
/* ── Smooth accordion collapse (grid-rows technique) ──
   Animates to the exact content height with correct easing throughout,
   unlike max-height which needs a guessed cap and distorts the curve. */
.acc-collapse {
  display: grid;
  /* NOTE: bare `0fr` still respects each item's automatic minimum size
     (its min-content height), so closed panels never actually reached
     0 — they sat open at ~1 line of "peeking" content. Wrapping in
     minmax(0, ...) forces the track's minimum to true 0, so closed
     panels (Elo / Form / H2H / First-Second Half) fully collapse and
     their inputs/labels don't show until the toggle is switched on. */
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1);
}
.acc-collapse.open {
  grid-template-rows: minmax(0, 1fr);
}
.acc-collapse-inner {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .acc-collapse { transition: none; }
}

.expand-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: left;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.expand-btn:hover { border-color: var(--accent); color: var(--accent); }
.expand-btn:active { transform: scale(0.98); }

/* ── New / reset button ── */
.new-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.new-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Calculate button ── */
/* ── Calculate button ── */
@keyframes calc-shimmer {
  0%   { transform: skewX(-15deg) translateX(-300%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: skewX(-15deg) translateX(500%); opacity: 0; }
}
@keyframes calc-pulse {
  0%, 100% { opacity: 0.92; }
  50%       { opacity: 1; }
}
@keyframes calc-spin {
  to { transform: rotate(360deg); }
}
/* Loading: visible ring spinner shown while calculating */
.spin-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: calc-spin 0.6s linear infinite;
}
/* Loading: progress bar sweeps across bottom of button */
@keyframes calc-progress {
  0%   { width: 0%;   opacity: 1; }
  80%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
/* Loading: button breathes */
@keyframes calc-breathe {
  0%,100% { background: rgba(29,177,255,0.55); }
  50%      { background: rgba(29,177,255,0.8);  }
}
#calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.2s ease,
              background 0.2s ease,
              min-width 0.3s ease;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  animation: calc-pulse 3s ease-in-out infinite;
  min-width: 160px;
}
/* Shimmer sweep at idle */
#calc-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: calc-shimmer 4s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}
/* Progress bar element — sits at bottom of button */
#calc-btn .calc-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 0%;
  background: rgba(255,255,255,0.7);
  border-radius: 0 0 999px 999px;
  pointer-events: none;
  opacity: 0;
}
#calc-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 28px rgba(29,177,255,0.6), 0 3px 8px rgba(0,0,0,0.4);
  animation: none;
  background: #28beff;
}
#calc-btn:active {
  transform: scale(0.93) translateY(1px);
  box-shadow: 0 1px 6px rgba(29,177,255,0.25);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
  animation: none;
}
/* CSS classes for calc state machine — avoids inline style.transition overrides */
#calc-btn.state-press {
  transform: scale(0.93) translateY(1px);
  box-shadow: 0 1px 4px rgba(29,177,255,0.2);
  transition: transform 0.07s ease, box-shadow 0.07s ease, background 0.1s !important;
}
#calc-btn.state-loading {
  transform: scale(1.02);
  box-shadow: 0 4px 18px rgba(29,177,255,0.5);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease !important;
}
#calc-btn.state-done {
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(29,177,255,0.7);
  background: #28d48a;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, background 0.2s !important;
}
#calc-btn.state-settle {
  transform: scale(1);
  box-shadow: none;
  background: var(--accent);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, background 0.4s ease !important;
}
/* On touch: no hover state linger */
@media (hover: none) {
  #calc-btn:hover {
    transform: none;
    box-shadow: none;
    animation: calc-pulse 3s ease-in-out infinite;
    background: var(--accent);
  }
}
#calc-btn.loading {
  pointer-events: none;
  animation: calc-breathe 0.7s ease-in-out infinite;
  transform: scale(1);
  cursor: wait;
  min-width: 180px;
}
#calc-btn.loading::after { animation: none; opacity: 0; }
#calc-btn.loading .calc-progress-bar {
  animation: calc-progress 0.55s cubic-bezier(0.4,0,0.2,1) forwards;
}
body.light #calc-btn { background: var(--accent); color: #fff; }
body.light #calc-btn:hover { background: #0068d6; box-shadow: 0 8px 24px rgba(0,116,232,0.45); }
body.light #calc-btn.loading { animation: none; background: rgba(0,116,232,0.65); }

/* ── EV Sort button ── */
#ev-sort-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#ev-sort-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Form buttons ── */
.form-toggle-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.form-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.form-row:last-of-type { border-bottom: none; }
.form-team-label { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); }
.form-btns { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.form-btn {
  background: var(--surface2);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.form-btn:last-child { border-right: none; }
.form-btn:hover { background: var(--surface); color: var(--text); }
.form-btn:active { transform: scale(0.92); }
.form-btn.active-poor { background: rgba(255,68,102,0.12); color: var(--red); box-shadow: none; text-shadow: none; }
.form-btn.active-neutral { background: rgba(29,177,255,0.1); color: var(--accent); box-shadow: none; text-shadow: none; }
.form-btn.active-fire { background: rgba(0,212,139,0.1); color: var(--green); box-shadow: none; text-shadow: none; }



.form-stats-table td.team-col { font-weight: 700; }


.form-auto-note { font-size: 0.66rem; color: var(--text-faint); padding: 6px 0 0; font-style: italic; }
.form-index-val { font-weight: 700; color: var(--text); }

/* ── Results context bar ── */
.results-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 0.7rem;
}
.ctx-chip {
  background: rgba(29,177,255,0.08);
  border: 1px solid rgba(29,177,255,0.2);
  color: var(--text-dim);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
}
#ctx-tau-chip, #ctx-rho-chip { font-family: 'JetBrains Mono', monospace; }

/* ── Top scoreline ── */
.top-scoreline {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.top-scoreline:hover { border-color: rgba(29,177,255,0.3); }
.top-scoreline-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.top-scoreline-score {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 2px;
  line-height: 1;
}
.top-scoreline-prob { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; margin-top: 4px; }
.top-scoreline-ou { font-size: 0.7rem; color: var(--text-faint); margin-top: 2px; }

/* ── Score pills ── */
.score-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.score-pill.pill-top { border-color: rgba(29,177,255,0.35); background: rgba(29,177,255,0.06); }
.pill-score { font-size: 0.9rem; font-weight: 800; color: var(--accent); }
.pill-prob { font-size: 0.68rem; color: var(--text-dim); }
.pill-pct { font-size: 0.68rem; color: var(--text-dim); }

/* ── Butterfly chart ── */
.btfly-pct-hot { color: var(--accent); font-weight: 700; }
.btfly-pct-dim { color: var(--text-dim); }
.btfly-center { font-weight: 700; }
.btfly-header-lbl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.bar-l-hot { background: linear-gradient(270deg, var(--accent), rgba(29,177,255,0.4)); }
.bar-l { border-radius: 4px 0 0 4px; }
.bar-r { border-radius: 0 4px 4px 0; }

/* ── Lambda display ── */
.lambda-display { display: flex; gap: 16px; font-size: 0.8rem; }
.lambda-item { color: var(--text-dim); }
.lambda-item span { font-weight: 700; }
.lambda-home span { color: var(--accent); }
.lambda-away span { color: var(--accent2); }

/* ── HT fallback notice ── */
.ht-fallback-notice { font-size: 0.7rem; color: var(--text-dim); padding: 8px 4px; font-style: italic; }

/* ── O/U suggestion ── */
.ou-suggestion { font-size: 0.68rem; color: var(--accent); opacity: 0.7; padding: 4px 0 2px; letter-spacing: 0.3px; }

/* ── Input warnings ── */
.input-warn {
  display: none;
  font-size: 0.7rem;
  color: var(--yellow);
  padding: 6px 8px;
  background: rgba(245,200,66,0.06);
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 5px;
  margin-top: 8px;
}
.input-warn.show { display: block; }

/* Custom league averages — manage controls */
.lg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.lg-btn:hover { border-color: var(--accent); color: var(--accent); }
.lg-btn:active { transform: scale(0.93); }
.lg-btn.lg-btn-accent { border-color: rgba(29,177,255,0.4); color: var(--accent); }
.lg-btn.lg-btn-danger:hover { border-color: var(--red); color: var(--red); }
.lg-custom-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(0,212,139,0.12);
  border: 1px solid rgba(0,212,139,0.3);
  padding: 3px 7px;
  border-radius: 4px;
}
.lg-add-form {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: none;
}
.lg-add-form.open { display: block; }
.lg-add-form .field { margin-bottom: 8px; }
.lg-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 7px 9px;
  width: 100%;
}

/* ── Bet Summary ── */
.bs-pick {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.bs-pick:hover { border-color: rgba(29,177,255,0.2); }
.bs-pick-market { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 4px; }
.bs-pick-name { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bs-pick-prob { font-size: 0.78rem; color: var(--text-dim); }
.bs-pick-odds { font-size: 1rem; font-weight: 800; }

/* ── FAQ ── */
.faq-item {
  border-left: 3px solid var(--accent);
  padding: 0;
  margin-bottom: 10px;
  background: var(--surface2);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  transition: border-color 0.15s;
}
.faq-item:hover { border-left-color: #55ccff; }
.faq-q {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8f6ff;
  background: rgba(29,177,255,0.09);
  cursor: pointer;
  padding: 13px 14px 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.faq-q::after {
  content: '▸';
  font-size: 0.8rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.15s;
  line-height: 1;
  display: inline-block;
}
body.light .faq-q::after { color: var(--text-dim); }
body.light .faq-item.open .faq-q::after { color: var(--accent); }
.faq-item.open .faq-q {
  background: rgba(29,177,255,0.16);
  color: #ffffff;
}
.faq-item.open .faq-q::after { content: '▸'; transform: rotate(90deg); }
.faq-q:hover { background: rgba(29,177,255,0.13); color: #ffffff; }
.faq-a {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.75;
  padding: 0 16px;
  border-top: 0px solid rgba(29,177,255,0.12);
  background: var(--surface);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.35s ease, border-top-width 0.35s ease;
}
.faq-item.open .faq-a {
  max-height: 1200px;
  opacity: 1;
  padding: 12px 16px 14px;
  border-top-width: 1px;
}
body.light .faq-q { color: #003a6e; background: rgba(0,116,232,0.07); }
body.light .faq-item.open .faq-q { background: rgba(0,116,232,0.14); color: #001f4d; }

/* Help-guide accordion — visually identical to FAQ but independently scoped
   (separate class names) so it doesn't get swept up by the global FAQ
   accordion script, which closes ALL .faq-item elements on any click. */
.hg-item {
  border-left: 3px solid var(--accent);
  padding: 0;
  margin-bottom: 10px;
  background: var(--surface2);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  transition: border-color 0.15s;
}
.hg-item:hover { border-left-color: #55ccff; }
.hg-q {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8f6ff;
  background: rgba(29,177,255,0.09);
  cursor: pointer;
  padding: 13px 14px 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.hg-q:active { background: rgba(29,177,255,0.18); }
.hg-q::after {
  content: '▸';
  font-size: 0.8rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.15s;
  line-height: 1;
  display: inline-block;
}
body.light .hg-q::after { color: var(--text-dim); }
body.light .hg-item.open .hg-q::after { color: var(--accent); }
.hg-item.open .hg-q { background: rgba(29,177,255,0.16); color: #ffffff; }
.hg-item.open .hg-q::after { content: '▸'; transform: rotate(90deg); }
.hg-q:hover { background: rgba(29,177,255,0.13); color: #ffffff; }
.hg-a {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.75;
  padding: 0 16px;
  border-top: 0px solid rgba(29,177,255,0.12);
  background: var(--surface);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.35s ease, border-top-width 0.35s ease;
}
.hg-item.open .hg-a { max-height: 2400px; opacity: 1; padding: 12px 16px 14px; border-top-width: 1px; }
body.light .hg-q { color: #003a6e; background: rgba(0,116,232,0.07); }
body.light .hg-item.open .hg-q { background: rgba(0,116,232,0.14); color: #001f4d; }
.hg-a ol, .hg-a ul { margin: 8px 0 8px 18px; padding: 0; }
.hg-a li { margin-bottom: 6px; }
.hg-a code {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  color: var(--accent2, #55ccff);
  word-break: break-all;
}
body.light .hg-a code { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
.hg-a .hg-warn {
  background: rgba(255,180,0,0.08);
  border: 1px solid rgba(255,180,0,0.25);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.74rem;
}
.hg-a .hg-step-title { color: var(--text); font-weight: 700; }
body.light .faq-q:hover { background: rgba(0,116,232,0.11); color: #001f4d; }
body.light .faq-a { background: var(--surface); border-top-color: rgba(0,116,232,0.1); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}

/* ── Toast ── */
#sm-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  padding: 9px 16px;
  border-radius: 8px;
  z-index: 9999;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
  max-width: 300px;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
@media(max-width:640px) { #sm-toast { bottom: 96px; } }
@media(min-width:641px) { #sm-toast { bottom: 24px; } }
#sm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#sm-toast.warning { border-color: rgba(245,200,66,0.4); color: var(--yellow); }
#sm-toast.success { border-color: rgba(29,177,255,0.4); color: var(--accent); }

/* ── SW Update Banner ── */
#sw-update-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  padding: 9px 14px;
  border-radius: 8px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#sw-update-banner button {
  background: rgba(29,177,255,0.1);
  border: 1px solid rgba(29,177,255,0.3);
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
}

/* ── Mobile Navigation ── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-inner {
  display: flex;
  justify-content: space-around;
  padding: 6px 0;
}
.mnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.12s, transform 0.1s;
  position: relative;
  min-width: 50px;
  min-height: 48px;
  justify-content: center;
}
.mnav-btn:active { transform: scale(0.92); }
.mnav-btn.active { color: var(--accent); background: rgba(29,177,255,0.1); border-radius: 10px; }
body.light .mnav-btn.active { background: rgba(0,116,232,0.09); }
.mnav-icon { font-size: 1.15rem; }
.mnav-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 1px;
  transition: background 0.12s;
}
.mnav-btn.active .mnav-dot { background: var(--accent); }
@media(max-width:640px) { .mobile-nav { display: block; } .tabs { display: none !important; } }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── Light mode — override specific colored elements ── */
body.light .card-title { color: var(--text-dim); }
body.light .tab.active { text-shadow: none; }
body.light .faq-item { border-left-color: var(--accent); }
body.light .results-context { background: rgba(0,116,232,0.04); border-color: rgba(0,116,232,0.15); }
body.light .ctx-chip { background: rgba(0,116,232,0.06); border-color: rgba(0,116,232,0.18); }
body.light .confidence-bar-fill { background: linear-gradient(90deg, var(--accent), var(--green)); }
body.light .top-scoreline-score { color: var(--accent); text-shadow: none; }
body.light .score-pill.pill-top { border-color: rgba(0,116,232,0.4); background: rgba(0,116,232,0.06); }
body.light .pill-score { color: var(--accent); }
body.light .outcome-pct.home { color: var(--accent) !important; text-shadow: none !important; }
body.light .outcome-pct.draw { color: var(--yellow) !important; text-shadow: none !important; }
body.light .outcome-pct.away { color: var(--accent2) !important; text-shadow: none !important; }
body.light .otile-pct.home { color: var(--accent); }
body.light .otile-pct.draw { color: var(--yellow); }
body.light .otile-pct.away { color: var(--accent2); }
body.light .bar-l-hot { background: linear-gradient(270deg, var(--accent), rgba(0,116,232,0.4)) !important; }
body.light .score-tile.tile-rank1 { border-color: rgba(0,116,232,0.4); background: rgba(0,116,232,0.06); }
body.light .byline { color: var(--accent) !important; }
body.light .ou-suggestion { color: var(--accent); }
body.light .conf-badge-high { background: rgba(0,148,78,0.1); color: var(--green); border-color: rgba(0,148,78,0.25); }
body.light .ev-row-value { background: rgba(0,116,232,0.04) !important; }
body.light .ev-row-value td { border-color: rgba(0,116,232,0.1) !important; }
body.light .ev-row-strong { background: rgba(0,116,232,0.08) !important; outline-color: rgba(0,116,232,0.2) !important; }
body.light .ev-row-strong td { border-color: rgba(0,116,232,0.2) !important; }
body.light .ev-row-empty { opacity: 0.62; }
/* ev-top-pick light mode now handled in component CSS above */
body.light .top-scoreline { background: rgba(0,116,232,0.04) !important; border-color: rgba(0,116,232,0.18) !important; }
body.light .ps-hero { background-color: rgba(255,255,255,0.97); background-image: linear-gradient(135deg, rgba(0,116,232,0.06), rgba(0,116,232,0.02)); border-color: rgba(0,116,232,0.2); }
body.light .ps-scoreline { text-shadow: none; }
body.light .ps-caption { color: var(--text-dim); }
body.light .lambda-home span { color: var(--accent) !important; }
body.light .lambda-away span { color: var(--accent2) !important; }
body.light .btfly-pct-hot { color: var(--accent) !important; }
body.light .pill-pct { color: var(--text-dim); }
body.light .outcome-odds { color: var(--text-dim) !important; }
body.light .ht-fallback-notice { color: var(--text-dim) !important; }
body.light .form-toggle-header { background: var(--surface2); border-color: var(--border); color: var(--text-dim); }
body.light .form-row:not(:last-of-type) { border-bottom-color: var(--border) !important; }
body.light .form-toggle-wrap { border-color: var(--border) !important; }
body.light .form-btn { background: var(--surface2); border-color: var(--border); color: var(--text-dim); }
body.light .form-btn:hover:not(.active-poor):not(.active-neutral):not(.active-fire) { background: rgba(0,116,232,0.06); color: var(--text); }
body.light .form-btn.active-poor { background: rgba(255,68,102,0.1); color: var(--red); border-color: rgba(255,68,102,0.35); box-shadow: none; text-shadow: none; }
body.light .form-btn.active-neutral { background: rgba(0,116,232,0.1); color: var(--accent); border-color: rgba(0,116,232,0.35); box-shadow: none; text-shadow: none; }
body.light .form-btn.active-fire { background: rgba(0,148,78,0.1); color: var(--green); border-color: rgba(0,148,78,0.35); box-shadow: none; text-shadow: none; }
body.light .form-stats-table th { color: var(--text-dim); border-color: var(--border); }
body.light .form-stats-table td { border-color: var(--border); }
body.light .form-stats-table input[type=number] { background: var(--surface2); border-color: var(--border); color: var(--text); }
body.light .form-stats-table input[type=number]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,116,232,0.12); }
body.light .ps-eyebrow, body.light #ps-eyebrow-el { color: var(--accent) !important; opacity: 1 !important; font-weight: 700 !important; }
body.light .mlh-eyebrow, body.light #mlh-eyebrow-el { color: var(--text-dim) !important; }
body.light #sw-update-banner { background: var(--surface); border-color: rgba(0,116,232,0.4); color: var(--accent); }
body.light #sw-update-banner button { background: rgba(0,116,232,0.08); border-color: rgba(0,116,232,0.25); color: var(--accent); }
body.light .footer-copyright { color: var(--text-dim) !important; }

/* ── Logo SVG overrides for FD theme ── */
/* Light mode: SCORE = deep navy, MATRIX = medium blue — clear contrast */
body.light .logo-svg .sm-word-score  { fill: #0074e8 !important; }  /* SCORE — matches --accent (home/blue) */
body.light .logo-svg .sm-word-matrix { fill: #e05500 !important; }  /* MATRIX — matches --accent2 (away/orange) */

/* ── Pitch SVG light mode ── */
body.light .pitch-svg [fill="rgba(7,9,15,0.95)"] { fill: rgba(210,225,240,0.95) !important; }
body.light .pitch-svg [stroke="#0f1520"] { stroke: #8ab0cc !important; }
body.light .pitch-svg [stroke="#1a2540"] { stroke: #6a90ba !important; }
body.light .pitch-svg [fill="none"][stroke="#1a2540"] { stroke: #6a90ba !important; }
body.light .pitch-svg [fill="#aaff44"] { fill: #0055aa !important; }
body.light .pitch-svg [stroke="#88cc22"] { stroke: #003a8a !important; }
body.light .pitch-svg [fill="#ff8c42"] { fill: #c04800 !important; }
body.light .pitch-svg [stroke="#cc5500"] { stroke: #9a3000 !important; }
body.light .pitch-svg [stroke="#aaff44"]:not([fill="#aaff44"]) { stroke: #0055aa !important; }
body.light .pitch-svg [fill="rgba(170,255,68,0.1)"] { fill: rgba(0,85,170,0.12) !important; }
body.light .pitch-svg [fill="rgba(255,140,66,0.1)"] { fill: rgba(192,72,0,0.1) !important; }

/* ── Footer SVG ── */
/* Light mode footer: same two-shade logic */
body.light .site-footer svg .fsm-word-score  { fill: #0074e8 !important; opacity: 1 !important; }  /* SCORE — matches --accent (home/blue) */
body.light .site-footer svg .fsm-word-matrix { fill: #e05500 !important; opacity: 1 !important; }  /* MATRIX — matches --accent2 (away/orange) */
body.light .site-footer svg text:nth-of-type(3) { fill: rgba(0,60,140,0.35) !important; opacity: 1 !important; }  /* tagline */
body.light .site-footer svg polyline { stroke: #0055aa !important; }
body.light .site-footer svg line { stroke: rgba(0,85,170,0.25) !important; }
body.light .site-footer svg circle[fill*="aaff44"] { fill: #0055aa !important; }
body.light .site-footer svg rect[fill*="aaff44"] { fill: rgba(0,85,170,0.12) !important; stroke: rgba(0,85,170,0.4) !important; }
body.light .site-footer svg circle[stroke*="aaff44"] { stroke: rgba(0,85,170,0.4) !important; }
body.light .site-footer svg circle[fill*="170,255,68"] { fill: rgba(0,85,170,0.12) !important; }
body.light .site-footer svg rect[stroke*="aaff44"] { stroke: rgba(0,85,170,0.4) !important; }

/* ── Signals ── */
.sig-likely { color: var(--green); font-weight: 700; }
.sig-moderate { color: var(--yellow); font-weight: 700; }
.sig-unlikely { color: var(--red); font-weight: 700; }

/* ── Header byline / select ── */
select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  padding: 8px 10px;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238896b0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(29,177,255,0.12); }
select:disabled { opacity: 0.4; cursor: not-allowed; }
body.light select { background-color: var(--surface2); }
body.light select:focus { box-shadow: 0 0 0 2px rgba(0,116,232,0.12); }

/* ── Model badge ── */
.model-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  transition: border-color 0.15s;
  cursor: default;
}
.model-badge:hover { border-color: rgba(29,177,255,0.3); }
.model-badge-title { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.4px; color: var(--accent); font-family: 'Inter',sans-serif; text-transform: uppercase; white-space: nowrap; }
.model-badge-params { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
body.light .model-badge { background: var(--surface2); border-color: var(--border); }
body.light .model-badge:hover { border-color: rgba(0,116,232,0.3); }

@media(max-width:640px) {
  header { padding: 0 10px; height: 52px; gap: 8px; }
  .header-center { display: none; }
  .model-badge { padding: 4px 7px; }
  .model-badge-title { display: none; }
}

/* ── Misc ── */
.header-left { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  user-select: none;
}
.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

/* Pitch background — original bg colours, upgraded markings (penalty areas, arcs, goals, corners) */
body {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201600%20500'%3E%0A%20%20%3Crect%20width%3D'1600'%20height%3D'500'%20fill%3D'%230f1421'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(150%2C165%2C200%2C0.16)'%20stroke-width%3D'3'%3E%0A%20%20%20%20%3Cline%20x1%3D'0'%20y1%3D'0'%20x2%3D'1600'%20y2%3D'0'%2F%3E%0A%20%20%20%20%3Cline%20x1%3D'0'%20y1%3D'500'%20x2%3D'1600'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Cline%20x1%3D'800'%20y1%3D'0'%20x2%3D'800'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'800'%20cy%3D'250'%20r%3D'75'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D'800'%20cy%3D'250'%20r%3D'4'%20fill%3D'rgba(150%2C165%2C200%2C0.18)'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(29%2C177%2C255%2C0.30)'%20stroke-width%3D'3'%3E%0A%20%20%20%20%3Cline%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'0'%20y%3D'145'%20width%3D'165'%20height%3D'210'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'0'%20y%3D'205'%20width%3D'55'%20height%3D'90'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'0'%20y%3D'225'%20width%3D'22'%20height%3D'50'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M165%2C190%20A60%2C60%200%200%2C1%20165%2C310'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M0%2C40%20A40%2C40%200%200%2C1%2040%2C0'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M0%2C460%20A40%2C40%200%200%2C0%2040%2C500'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D'112'%20cy%3D'250'%20r%3D'4'%20fill%3D'rgba(29%2C177%2C255%2C0.30)'%2F%3E%0A%20%20%3Cline%20x1%3D'0'%20y1%3D'0'%20x2%3D'18.4'%20y2%3D'18.4'%20stroke%3D'rgba(29%2C177%2C255%2C0.30)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'18.4%2C18.4%200.1%2C22.7%2011.4%2C11.4'%20fill%3D'rgba(29%2C177%2C255%2C0.32)'%2F%3E%0A%20%20%3Cline%20x1%3D'0'%20y1%3D'500'%20x2%3D'18.4'%20y2%3D'481.6'%20stroke%3D'rgba(29%2C177%2C255%2C0.30)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'18.4%2C481.6%200.1%2C477.3%2011.4%2C488.6'%20fill%3D'rgba(29%2C177%2C255%2C0.32)'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C107%2C53%2C0.30)'%20stroke-width%3D'3'%3E%0A%20%20%20%20%3Cline%20x1%3D'1600'%20y1%3D'0'%20x2%3D'1600'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'1435'%20y%3D'145'%20width%3D'165'%20height%3D'210'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'1545'%20y%3D'205'%20width%3D'55'%20height%3D'90'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'1578'%20y%3D'225'%20width%3D'22'%20height%3D'50'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1435%2C190%20A60%2C60%200%200%2C0%201435%2C310'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1600%2C40%20A40%2C40%200%200%2C0%201560%2C0'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1600%2C460%20A40%2C40%200%200%2C1%201560%2C500'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D'1488'%20cy%3D'250'%20r%3D'4'%20fill%3D'rgba(255%2C107%2C53%2C0.30)'%2F%3E%0A%20%20%3Cline%20x1%3D'1600'%20y1%3D'0'%20x2%3D'1581.6'%20y2%3D'18.4'%20stroke%3D'rgba(255%2C107%2C53%2C0.30)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'1581.6%2C18.4%201599.9%2C22.7%201588.6%2C11.4'%20fill%3D'rgba(255%2C107%2C53%2C0.32)'%2F%3E%0A%20%20%3Cline%20x1%3D'1600'%20y1%3D'500'%20x2%3D'1581.6'%20y2%3D'481.6'%20stroke%3D'rgba(255%2C107%2C53%2C0.30)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'1581.6%2C481.6%201599.9%2C477.3%201588.6%2C488.6'%20fill%3D'rgba(255%2C107%2C53%2C0.32)'%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 100% 180%;
  background-position: center 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.light {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201600%20500'%3E%0A%20%20%3Crect%20width%3D'1600'%20height%3D'500'%20fill%3D'%23f0f2f7'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(74%2C86%2C112%2C0.08)'%20stroke-width%3D'3'%3E%0A%20%20%20%20%3Cline%20x1%3D'0'%20y1%3D'0'%20x2%3D'1600'%20y2%3D'0'%2F%3E%0A%20%20%20%20%3Cline%20x1%3D'0'%20y1%3D'500'%20x2%3D'1600'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Cline%20x1%3D'800'%20y1%3D'0'%20x2%3D'800'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'800'%20cy%3D'250'%20r%3D'75'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D'800'%20cy%3D'250'%20r%3D'4'%20fill%3D'rgba(74%2C86%2C112%2C0.10)'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(0%2C116%2C232%2C0.12)'%20stroke-width%3D'3'%3E%0A%20%20%20%20%3Cline%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'0'%20y%3D'145'%20width%3D'165'%20height%3D'210'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'0'%20y%3D'205'%20width%3D'55'%20height%3D'90'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'0'%20y%3D'225'%20width%3D'22'%20height%3D'50'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M165%2C190%20A60%2C60%200%200%2C1%20165%2C310'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M0%2C40%20A40%2C40%200%200%2C1%2040%2C0'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M0%2C460%20A40%2C40%200%200%2C0%2040%2C500'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D'112'%20cy%3D'250'%20r%3D'4'%20fill%3D'rgba(0%2C116%2C232%2C0.12)'%2F%3E%0A%20%20%3Cline%20x1%3D'0'%20y1%3D'0'%20x2%3D'18.4'%20y2%3D'18.4'%20stroke%3D'rgba(0%2C116%2C232%2C0.12)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'18.4%2C18.4%200.1%2C22.7%2011.4%2C11.4'%20fill%3D'rgba(0%2C116%2C232%2C0.16)'%2F%3E%0A%20%20%3Cline%20x1%3D'0'%20y1%3D'500'%20x2%3D'18.4'%20y2%3D'481.6'%20stroke%3D'rgba(0%2C116%2C232%2C0.12)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'18.4%2C481.6%200.1%2C477.3%2011.4%2C488.6'%20fill%3D'rgba(0%2C116%2C232%2C0.16)'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(224%2C85%2C0%2C0.12)'%20stroke-width%3D'3'%3E%0A%20%20%20%20%3Cline%20x1%3D'1600'%20y1%3D'0'%20x2%3D'1600'%20y2%3D'500'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'1435'%20y%3D'145'%20width%3D'165'%20height%3D'210'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'1545'%20y%3D'205'%20width%3D'55'%20height%3D'90'%2F%3E%0A%20%20%20%20%3Crect%20x%3D'1578'%20y%3D'225'%20width%3D'22'%20height%3D'50'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1435%2C190%20A60%2C60%200%200%2C0%201435%2C310'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1600%2C40%20A40%2C40%200%200%2C0%201560%2C0'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1600%2C460%20A40%2C40%200%200%2C1%201560%2C500'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ccircle%20cx%3D'1488'%20cy%3D'250'%20r%3D'4'%20fill%3D'rgba(224%2C85%2C0%2C0.12)'%2F%3E%0A%20%20%3Cline%20x1%3D'1600'%20y1%3D'0'%20x2%3D'1581.6'%20y2%3D'18.4'%20stroke%3D'rgba(224%2C85%2C0%2C0.12)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'1581.6%2C18.4%201599.9%2C22.7%201588.6%2C11.4'%20fill%3D'rgba(224%2C85%2C0%2C0.16)'%2F%3E%0A%20%20%3Cline%20x1%3D'1600'%20y1%3D'500'%20x2%3D'1581.6'%20y2%3D'481.6'%20stroke%3D'rgba(224%2C85%2C0%2C0.12)'%20stroke-width%3D'3'%2F%3E%0A%20%20%3Cpolygon%20points%3D'1581.6%2C481.6%201599.9%2C477.3%201588.6%2C488.6'%20fill%3D'rgba(224%2C85%2C0%2C0.16)'%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 100% 180%;
  background-position: center 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media(max-width:640px) { body, body.light { background-attachment: scroll; } }

/* pill tabs — no underline needed */

/* ── Override any Orbitron remnants from inline styles ── */
.card-title, .tab, .team-label, .conf-meter-title, .model-badge-title,
.ev-section-title, .bar-group-label, .otile-label, .ps-eyebrow,
.outcome-label, .mlh-eyebrow, #mlh-eyebrow-el, #ps-eyebrow-el {
  font-family: 'Inter', sans-serif !important;
}


/* ══════════════════════════════════════════
   TOGGLE CARDS — Elo / Form
══════════════════════════════════════════ */
.toggle-card {
  background: var(--surface);
  border: 1px solid rgba(29,177,255,0.18);
  border-left: 3px solid transparent;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.light .toggle-card { border-color: rgba(0,116,232,0.16); }
.toggle-card.is-on { border-left-color: var(--accent); }
.toggle-card:hover {
  border-color: rgba(29,177,255,0.3);
  box-shadow: 0 2px 12px rgba(29,177,255,0.08);
}
.toggle-card.is-on:hover { border-left-color: var(--accent); }
.toggle-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
  transition: background 0.15s;
}
.toggle-card-header:hover { background: rgba(29,177,255,0.03); }
.toggle-card-header:active { background: rgba(29,177,255,0.07); }
.toggle-card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toggle-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(29,177,255,0.08);
  border: 1px solid rgba(29,177,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.toggle-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.toggle-card-sub {
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.toggle-card-body {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  background: rgba(29,177,255,0.02);
}
body.light .toggle-card { background: var(--surface); }
body.light .toggle-card:hover { border-color: rgba(0,116,232,0.25); box-shadow: 0 2px 10px rgba(0,116,232,0.06); }
body.light .toggle-card.is-on { border-left-color: var(--accent); }
body.light .toggle-card-header:hover { background: rgba(0,116,232,0.02); }
body.light .toggle-card-icon { background: rgba(0,116,232,0.06); border-color: rgba(0,116,232,0.15); }
body.light .toggle-card-body { background: rgba(0,116,232,0.015); }
.toggle-card.is-on .toggle-card-icon { background: rgba(29,177,255,0.16); border-color: rgba(29,177,255,0.4); }
body.light .toggle-card.is-on .toggle-card-icon { background: rgba(0,116,232,0.12); border-color: rgba(0,116,232,0.35); }
body.light .sm-toggle-slider { border-color: #c3cad9; }

/* ══════════════════════════════════════════
   PREDICTED SCORE HERO — inputs tab
══════════════════════════════════════════ */
.ps-hero {
  background-color: rgba(26,31,46,0.96);
  background-image: linear-gradient(135deg, rgba(29,177,255,0.1), rgba(29,177,255,0.04));
  border: 1px solid rgba(29,177,255,0.3);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ps-hero::before {
  content: '';
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 180px; height: 50px;
  background: radial-gradient(ellipse, rgba(29,177,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   CALCULATE SECTION WRAPPER
══════════════════════════════════════════ */
.calc-section-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
}
.calc-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ══════════════════════════════════════════
   RESULTS — match header premium
══════════════════════════════════════════ */
.res-match-banner {
  background: linear-gradient(135deg, rgba(29,177,255,0.08), rgba(29,177,255,0.03));
  border: 1px solid rgba(29,177,255,0.2);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.res-match-teams {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.res-match-home { color: var(--accent); }
.res-match-away { color: var(--accent2); }
.res-match-vs {
  font-size: 0.7rem;
  color: var(--text-faint);
  font-weight: 600;
  padding: 3px 8px;
  background: var(--surface2);
  border-radius: 4px;
  letter-spacing: 1px;
}

/* ══════════════════════════════════════════
   OFFLINE BANNER
══════════════════════════════════════════ */
#offline-banner {
  position: sticky;
  top: 0;
  z-index: 101;
  background: linear-gradient(90deg, #b45309, #92400e);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: 0.2px;
}
body.light #offline-banner {
  background: linear-gradient(90deg, #d97706, #b45309);
}

/* ══════════════════════════════════════════
   HEADER — full redesign
══════════════════════════════════════════ */
header {
  background: linear-gradient(180deg, #0a1422 0%, #0f1b2e 100%);
  border-bottom: 1px solid rgba(29,177,255,0.18);
  padding: 0 20px;
  height: 79px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(29,177,255,0.1), 0 4px 20px rgba(0,0,0,0.4);
}
body.light header {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-bottom-color: rgba(0,116,232,0.15);
  box-shadow: 0 1px 0 rgba(0,116,232,0.08), 0 2px 12px rgba(0,0,0,0.06);
}

/* Edition pill */
.header-engine-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  margin-top: 1px;
  white-space: nowrap;
}
.het-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px rgba(0,212,139,0.8);
  animation: hmb-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.het-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  background: linear-gradient(90deg, var(--accent), #b48bff, var(--accent2), var(--accent));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: het-shimmer 7s linear infinite;
}
@keyframes het-shimmer {
  to { background-position: -250% center; }
}

/* ══════════════════════════
   MATCH CONTEXT BAR
══════════════════════════ */
.match-ctx-bar {
  position: sticky;
  top: 117px;
  z-index: 97;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(29,177,255,0.08), rgba(255,107,53,0.06));
  border-bottom: 1px solid rgba(29,177,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.match-ctx-bar::-webkit-scrollbar { display: none; }
body.light .match-ctx-bar {
  background: linear-gradient(90deg, rgba(0,116,232,0.06), rgba(224,85,0,0.04));
  border-bottom-color: rgba(0,116,232,0.12);
}
.mcb-team { font-weight: 700; font-size: 0.72rem; }
.mcb-team.home { color: var(--accent); }
.mcb-team.away { color: var(--accent2); }
.mcb-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}
.mcb-sep { color: var(--text-faint); opacity: 0.4; }
.mcb-conf { color: var(--text-dim); font-weight: 600; font-size: 0.65rem; font-family: 'JetBrains Mono', monospace; }
.mcb-bestbet { color: var(--yellow); font-weight: 700; font-size: 0.65rem; }
.mcb-bestbet-pct { color: #00b87a !important; opacity: 0.9; font-size: 0.5rem !important; font-weight: 600; margin-left: 2px; vertical-align: middle; font-family: 'JetBrains Mono', monospace; }
body.light .mcb-bestbet-pct { color: #00845a !important; opacity: 1; }

/* ══════════════════════════
   PROGRESS INDICATOR
══════════════════════════ */
.calc-progress-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 10px;
}
.cpi-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.cpi-bar-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: transform 0.3s ease, background 0.3s;
}
.cpi-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
body:not(.light) .cpi-label { color: rgba(168,188,224,0.55); }

/* ══════════════════════════
   OPTIONAL MODIFIERS ACCORDION
══════════════════════════ */
.om-accordion {
  position: relative;
  border: 1px solid rgba(29,177,255,0.28);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: rgba(26,31,46,0.96);
  background-image: linear-gradient(160deg, rgba(29,177,255,0.07) 0%, rgba(29,177,255,0.02) 100%);
  box-shadow: 0 0 0 1px rgba(29,177,255,0.06), 0 4px 24px rgba(29,177,255,0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.om-accordion:hover {
  border-color: rgba(29,177,255,0.45);
  box-shadow: 0 0 0 1px rgba(29,177,255,0.1), 0 4px 28px rgba(29,177,255,0.12);
}
.om-accordion.open {
  border-color: rgba(29,177,255,0.5);
  box-shadow: 0 0 0 1px rgba(29,177,255,0.12), 0 6px 32px rgba(29,177,255,0.14);
}
.om-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.om-header:hover { background: rgba(29,177,255,0.04); }
.om-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.om-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(29,177,255,0.1);
  border: 1px solid rgba(29,177,255,0.25);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.15s;
  flex-shrink: 0;
}
.om-accordion.open .om-icon {
  background: rgba(29,177,255,0.18);
}
.om-accordion.open .om-icon .om-vbar {
  transform: scaleY(0);
  opacity: 0;
}
.om-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(29,177,255,0.55);
  line-height: 1;
}
.om-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.om-active-dots { display: flex; gap: 5px; align-items: center; }
.om-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(0,212,139,0.7);
}
.om-body {
  border-top: 1px solid rgba(29,177,255,0.12);
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, padding 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}
.om-accordion.open .om-body {
  max-height: 600px;
  opacity: 1;
  padding-top: 10px;
  padding-bottom: 6px;
}
body.light .om-accordion {
  background-color: rgba(255,255,255,0.97);
  background-image: linear-gradient(160deg, rgba(0,116,232,0.05) 0%, rgba(0,116,232,0.015) 100%);
  border-color: rgba(0,116,232,0.25);
  box-shadow: 0 0 0 1px rgba(0,116,232,0.06), 0 4px 20px rgba(0,116,232,0.06);
}
body.light .om-accordion:hover { border-color: rgba(0,116,232,0.4); }
body.light .om-accordion.open { border-color: rgba(0,116,232,0.5); }
body.light .om-header:hover { background: rgba(0,116,232,0.03); }
body.light .om-icon { background: rgba(0,116,232,0.08); border-color: rgba(0,116,232,0.2); }
body.light .om-accordion.open .om-icon { background: rgba(0,116,232,0.15); }
body.light .om-title { color: rgba(0,116,232,0.55); }

/* ── Advanced league averages section — subtle panel with goal-net texture ── */
#advanced-inputs {
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(55deg, rgba(150,190,255,0.09) 0px, rgba(150,190,255,0.09) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(-55deg, rgba(150,190,255,0.09) 0px, rgba(150,190,255,0.09) 1px, transparent 1px, transparent 42px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
body.light #advanced-inputs {
  background-color: #e7eaf0;
  background-image:
    repeating-linear-gradient(55deg, rgba(100,112,135,0.16) 0px, rgba(100,112,135,0.16) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(-55deg, rgba(100,112,135,0.16) 0px, rgba(100,112,135,0.16) 1px, transparent 1px, transparent 42px);
  border: 1px solid #d3d8e3;
  border-radius: 10px;
  padding: 12px;
}

/* ── Compact "manage leagues" mini-accordion (Add League / Import / Export / Save) ── */
.lgm-accordion {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
  background: var(--surface2);
  transition: border-color 0.2s;
}
.lgm-accordion.open { border-color: rgba(29,177,255,0.4); }
.lgm-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  transition: background 0.15s;
}
.lgm-header:hover { background: rgba(29,177,255,0.05); color: var(--accent); }
.lgm-header:active { background: rgba(29,177,255,0.1); }
.lgm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  color: var(--text-faint);
  flex-shrink: 0;
  margin-right: 6px;
  transition: color 0.15s;
}
.lgm-header:hover .lgm-icon { color: var(--accent); }
.lgm-accordion.open .lgm-icon .lgm-vbar { transform: scaleY(0); opacity: 0; }
.lgm-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 6px;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease, padding 0.25s ease;
}
.lgm-accordion.open .lgm-body {
  max-height: 200px;
  opacity: 1;
  padding: 6px 6px 8px;
}
body.light .lgm-accordion { background: #fff; border-color: #d3d8e3; }
body.light .lgm-header:hover { background: rgba(0,116,232,0.05); }
body.light .om-body { border-top-color: rgba(0,116,232,0.1); }

/* ══════════════════════════
   MATCH LIST
══════════════════════════ */
.ml-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(0,212,139,0.15), rgba(0,212,139,0.05));
  border: 1px solid rgba(0,212,139,0.4);
  border-radius: 8px;
  color: var(--green);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}
.ml-add-btn:hover { background: rgba(0,212,139,0.2); border-color: var(--green); }
.ml-add-btn:active { transform: scale(0.97); background: rgba(0,212,139,0.28); }
.ml-add-btn-flash { background: rgba(0,212,139,0.3) !important; }
.ml-add-btn.signal-strong { box-shadow: 0 0 0 2px rgba(0,212,139,0.3); }
.ml-add-btn.signal-caution { background: linear-gradient(135deg, rgba(245,200,66,0.14), rgba(245,200,66,0.04)); border-color: rgba(245,200,66,0.45); color: var(--yellow); box-shadow: 0 0 0 2px rgba(245,200,66,0.22); }
.ml-add-btn.signal-caution:hover { background: rgba(245,200,66,0.2); border-color: var(--yellow); }
.ml-add-btn.signal-weak { background: linear-gradient(135deg, rgba(255,68,102,0.14), rgba(255,68,102,0.04)); border-color: rgba(255,68,102,0.5); color: var(--red); box-shadow: 0 0 0 2px rgba(255,68,102,0.3); }
.ml-add-btn.signal-weak:hover { background: rgba(255,68,102,0.22); border-color: var(--red); }
.ml-add-btn.signal-unproven { box-shadow: none; }

.ml-panel {
  background: var(--surface);
  border: 1px solid rgba(0,212,139,0.25);
  border-radius: 10px;
  margin-top: 14px;
  overflow: hidden;
}
.ml-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(0,212,139,0.06);
  border-bottom: 1px solid rgba(0,212,139,0.12);
}
.ml-panel-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
}
.ml-panel-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-faint);
}
.ml-panel-actions {
  display: flex;
  gap: 6px;
}
.ml-col-headers {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.7fr 60px 140px 28px;
  gap: 16px;
  padding: 8px 14px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light .ml-col-headers { border-color: rgba(0,0,0,0.07); }
.ml-col-headers span:nth-child(2) { text-align: center; }
.ml-col-headers span:nth-child(3) { text-align: center; }
.ml-col-headers span:nth-child(4) { text-align: center; }
.ml-col-headers span:nth-child(5) { text-align: left; }
@media (max-width: 640px) { .ml-col-headers { display: none; } }

.ml-entry {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.7fr 60px 140px 28px;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.12s;
}
.ml-entry:last-child { border-bottom: none; }
.ml-entry:hover { background: rgba(255,255,255,0.02); }
body.light .ml-entry:hover { background: rgba(0,0,0,0.02); }
body.light .ml-entry { border-bottom-color: rgba(0,0,0,0.1); }
.ml-entry-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ml-entry-pred {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  min-width: 0;
}
.ml-entry-outcome {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
@media (max-width: 640px) {
  .ml-panel-header { flex-wrap: wrap; row-gap: 8px; }
  .ml-entry {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main    remove"
      "pred    pred"
      "meta    meta"
      "outcome outcome";
    row-gap: 10px;
    padding: 12px;
  }
  .ml-entry-main { grid-area: main; }
  .ml-remove-btn { grid-area: remove; align-self: flex-start; }
  .ml-entry-pred {
    grid-area: pred;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "score conf"
      "bestbet bestbet";
    align-items: center;
    row-gap: 4px;
    column-gap: 10px;
    text-align: left !important;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 8px 12px;
  }
  body.light .ml-entry-pred { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.07); }
  .ml-entry-pred .ml-score { grid-area: score; justify-self: start; white-space: nowrap; }
  .ml-entry-pred .ml-conf { grid-area: conf; justify-self: end; white-space: nowrap; }
  .ml-entry-pred .ml-bestbet { grid-area: bestbet; text-align: center; margin-top: 2px; }
  .ml-entry-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 2px;
  }
  .ml-entry-score2, .ml-entry-fh {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .ml-entry-outcome {
    grid-area: outcome;
    justify-content: flex-start;
    min-width: 0;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  body.light .ml-entry-outcome { border-top-color: rgba(0,0,0,0.06); }
}
.ml-entry-meta {
  display: contents;
}
.ml-entry-score2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.ml-score2-label {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ml-score2-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
}
.ml-score2-val.dim { opacity: 0.4; }
.ml-entry-fh {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.ml-fh-label {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ml-fh-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
}
.ml-fh-val.dim { opacity: 0.4; }
.ml-fixture {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.ml-fixture .home { color: var(--accent); }
.ml-fixture .away { color: var(--accent2); }
.ml-details {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.ml-score { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--text-dim); }
.ml-ht-score { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600; color: var(--text-faint); margin-left: 3px; }
.ml-bestbet { font-size: 0.86rem; font-weight: 700; color: var(--yellow); }
.ml-bestbet-pct { font-size: 0.66rem !important; font-weight: 600; color: #00b87a !important; opacity: 0.9; margin-left: 2px; vertical-align: middle; }
body.light .ml-bestbet-pct { color: #00845a !important; opacity: 1; }
.ml-conf { font-size: 0.7rem; color: var(--text-faint); }
.ml-time { font-size: 0.66rem; color: var(--text-faint); opacity: 0.65; font-style: italic; }
.ml-kickoff-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-top: 6px; }
.ml-kickoff-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(29,177,255,0.1);
  color: var(--accent);
  border: 1px solid rgba(29,177,255,0.25);
  white-space: nowrap;
}
.ml-kickoff-tz { font-size: 0.6rem; font-weight: 600; color: var(--text-dim); margin-left: 4px; }
body.light .ml-kickoff-badge { background: rgba(0,116,232,0.08); }
.ml-remove-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s, transform 0.1s;
}
.ml-remove-btn:hover { opacity: 1; color: var(--red); }
.ml-remove-btn:active { transform: scale(0.85); }
.ml-history-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.ml-history-btn:hover { background: rgba(0,212,139,0.1); border-color: var(--accent); color: var(--accent); }
.ml-history-btn:active { transform: scale(0.93); }
body.light .ml-history-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); color: var(--text-dim); }

.ml-hist-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ml-hist-modal {
  background: var(--card-bg, #11161f);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.light .ml-hist-modal { background: #fff; border-color: rgba(0,0,0,0.12); }
.ml-hist-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
body.light .ml-hist-header { border-color: rgba(0,0,0,0.08); }
.ml-hist-title { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.ml-hist-close {
  background: none; border: none; color: var(--text-faint);
  font-size: 1.1rem; cursor: pointer; padding: 2px 8px; line-height: 1;
}
.ml-hist-close:hover { color: var(--text); }
.ml-hist-overall {
  display: flex; gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
body.light .ml-hist-overall { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
.ml-hist-body { overflow-y: auto; padding: 8px 0; }
.ml-hist-day {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.ml-hist-day-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ml-hist-day-row:hover { background: rgba(255,255,255,0.03); margin: -4px -18px; padding: 4px 18px; border-radius: 6px; }
body.light .ml-hist-day-row:hover { background: rgba(0,0,0,0.02); }
.ml-hist-day-date { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.ml-hist-day-stats { font-size: 0.65rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.ml-hist-day-stats .h { color: #00d48b; }
.ml-hist-day-stats .m { color: #ff6b6b; }
.ml-hist-empty { padding: 30px 18px; text-align: center; color: var(--text-faint); font-size: 0.8rem; }
.ml-hist-detail { padding: 4px 18px 12px; display: none; }
.ml-hist-detail.open { display: block; }
.ml-hist-match-row {
  font-size: 0.7rem; color: var(--text-dim);
  padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.ml-hist-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; gap: 8px; flex-wrap: wrap;
}
body.light .ml-hist-footer { border-color: rgba(0,0,0,0.08); }
.ml-outcome-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.ml-outcome-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 8px;
  width: 76px;
  text-align: center;
  transition: border-color 0.15s;
}
.ml-outcome-input::placeholder {
  font-weight: 500;
  font-size: 0.7rem;
  opacity: 0.5;
  letter-spacing: 0;
}
.ml-outcome-input:focus { outline: none; border-color: var(--accent); }
body.light .ml-outcome-input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: var(--text);
}
.ml-kickoff-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 8px;
  width: 110px;
  text-align: center;
  transition: border-color 0.15s;
}
.ml-kickoff-input:focus { outline: none; border-color: var(--accent); }
body.light .ml-kickoff-input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: var(--text);
}
.ml-outcome-save-btn {
  background: rgba(0,212,139,0.12);
  border: 1px solid rgba(0,212,139,0.3);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.ml-outcome-save-btn:hover { background: rgba(0,212,139,0.22); border-color: var(--accent); }
.ml-outcome-badge {
  font-size: 0.76rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.ml-outcome-badge.hit  { background: rgba(0,212,139,0.15); color: #00d48b; border: 1px solid rgba(0,212,139,0.3); }
.ml-outcome-badge.miss { background: rgba(255,80,80,0.12);  color: #ff6b6b; border: 1px solid rgba(255,80,80,0.3); }
.ml-outcome-badge.open { background: rgba(255,255,255,0.06); color: var(--text-faint); border: 1px solid rgba(255,255,255,0.1); }
body.light .ml-outcome-badge.hit  { background: rgba(0,180,100,0.1);  color: #00845a; border-color: rgba(0,180,100,0.25); }
body.light .ml-outcome-badge.miss { background: rgba(200,40,40,0.08); color: #c0392b; border-color: rgba(200,40,40,0.2); }
body.light .ml-outcome-badge.open { background: rgba(0,0,0,0.05); color: var(--text-faint); border-color: rgba(0,0,0,0.12); }
.ml-outcome-edit-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 5px;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.ml-outcome-edit-btn:hover { opacity: 1; }
.ml-empty {
  padding: 20px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-faint);
  font-style: italic;
}
.ml-stats-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
  padding: 8px 14px;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
body.light .ml-stats-bar { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.07); }
.ml-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 44px;
}
.ml-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.ml-stat-val.hit-val  { color: #00d48b; }
.ml-stat-val.miss-val { color: #ff6b6b; }
.ml-stat-val.rate-val { color: var(--accent2); }
body.light .ml-stat-val.hit-val  { color: #00845a; }
body.light .ml-stat-val.miss-val { color: #c0392b; }
.ml-stat-label {
  font-size: 0.52rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.ml-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.07);
  margin: 0 2px;
}
body.light .ml-stat-divider { background: rgba(0,0,0,0.1); }
.ml-filter-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  flex-wrap: wrap;
}
.ml-filter-tab {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--text-faint);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
  letter-spacing: 0.03em;
}
.ml-filter-tab:hover { border-color: var(--accent); color: var(--accent); }
.ml-filter-tab:active { transform: scale(0.94); }
.ml-filter-tab.active {
  background: rgba(0,212,139,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
body.light .ml-filter-tab { border-color: rgba(0,0,0,0.15); color: var(--text-faint); }
body.light .ml-filter-tab.active { background: rgba(0,180,100,0.1); border-color: #00845a; color: #00845a; }
.ml-league-tag {
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--text-faint);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 2px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
body.light .ml-league-tag { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); }
.ml-match-date {
  font-size: 0.58rem;
  color: var(--text-faint);
  opacity: 0.7;
  font-style: italic;
}
.ml-export-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid rgba(0,212,139,0.1);
  background: rgba(0,0,0,0.08);
  flex-wrap: wrap;
}
.contact-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(29,177,255,0.3);
  border-radius: 22px;
  padding: 8px 20px;
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  margin-top: 6px;
}
.contact-inline-btn:active { transform: scale(0.96); }
.contact-inline-btn:hover {
  background: rgba(29,177,255,0.08);
  border-color: var(--accent);
}
body.light .contact-inline-btn { border-color: rgba(0,116,232,0.3); color: var(--accent); }
body.light .contact-inline-btn:hover { background: rgba(0,116,232,0.06); }

/* ── Footer: 3-column layout fills the wide empty margins beside the
      logo/contact block on tablet+/desktop. Collapses to the original
      single centered column on narrow screens — mobile is untouched. ── */
.footer-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 0.85fr;
  gap: 36px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
  text-align: center;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-items: center; }
.footer-col-brand { align-items: center; }
.footer-col-heading {
  font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 4px;
}
.footer-about-text, .footer-contact-text {
  font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0 auto;
  max-width: 360px;
}
.footer-links { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s;
}
.footer-link-btn:hover { color: var(--accent); }
.footer-copyright {
  font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  width: 100%;
  max-width: 1100px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-align: center;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-about-text, .footer-contact-text { max-width: 100%; }
  .footer-col-links { display: none; }
}

.contact-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.contact-modal-overlay.open {
  display: flex;
  animation: contact-fadein 0.2s ease;
}
@keyframes contact-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.contact-modal-box {
  background: var(--surface);
  border: 1px solid rgba(29,177,255,0.2);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 28px 24px 36px;
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: contact-slidein 0.25s cubic-bezier(0.34,1.1,0.64,1);
}
body.light .contact-modal-box {
  background: var(--surface);
  border-color: rgba(0,116,232,0.15);
}
@keyframes contact-slidein {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.contact-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s;
}
.contact-modal-close:hover { background: var(--border); }
.contact-modal-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
  margin-bottom: 4px;
}
.contact-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}
.contact-modal-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.contact-modal-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 16px 0;
  opacity: 0.3;
}
.contact-modal-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-modal-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.contact-link-email:hover  { border-color: var(--accent); background: rgba(29,177,255,0.06); }
.contact-link-wa:hover     { border-color: #25d366; background: rgba(37,211,102,0.06); }
.contact-link-phone:hover  { border-color: var(--text-faint); background: rgba(255,255,255,0.03); }
.contact-link-icon { font-size: 1.3rem; flex-shrink: 0; }
.contact-link-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.contact-link-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-link-value {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}
.contact-link-email .contact-link-value  { color: var(--accent); }
.contact-link-wa .contact-link-value     { color: #25d366; }
.contact-link-arrow {
  font-size: 1rem;
  color: var(--text-faint);
  opacity: 0.4;
  flex-shrink: 0;
}
.contact-modal-footer {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 18px;
  font-style: italic;
  letter-spacing: 0.2px;
}
══════════════════════════════════════ */
.fm-card {
  background-color: rgba(29,177,255,0.07);
  background-image: linear-gradient(145deg, rgba(29,177,255,0.16), rgba(29,177,255,0.04) 70%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 3px solid rgba(29,177,255,0.75);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(29,177,255,0.12), 0 6px 24px rgba(0,0,0,0.25);
  padding: 18px 18px 14px;
}
body:not(.light) .fm-card {
  box-shadow: 0 0 0 4px rgba(29,177,255,0.12), 0 0 36px rgba(29,177,255,0.1), 0 6px 24px rgba(0,0,0,0.35);
}
body.light .fm-card {
  background-color: rgba(70,130,200,0.04);
  background-image: linear-gradient(145deg, rgba(70,130,200,0.08), rgba(70,130,200,0.015) 70%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(0,116,232,0.7);
  box-shadow: 0 0 0 4px rgba(0,116,232,0.1), 0 4px 16px rgba(0,0,0,0.07);
}
/* First/Second Half accordion — bluish tint with bold outer edges, matching .fm-card */
.fh-toggle-btn-accent {
  background-color: rgba(29,177,255,0.07);
  background-image: linear-gradient(145deg, rgba(29,177,255,0.14), rgba(29,177,255,0.03) 70%);
  border: 2px solid rgba(29,177,255,0.55);
  box-shadow: 0 0 0 3px rgba(29,177,255,0.1);
  color: var(--text);
}
.fh-toggle-btn-accent:hover { border-color: var(--accent); color: var(--accent); }
body.light .fh-toggle-btn-accent {
  background-color: rgba(70,130,200,0.04);
  background-image: linear-gradient(145deg, rgba(70,130,200,0.09), rgba(70,130,200,0.015) 70%);
  border-color: rgba(0,116,232,0.5);
  box-shadow: 0 0 0 3px rgba(0,116,232,0.08);
}
.fh-outer-card {
  background-color: rgba(29,177,255,0.05);
  background-image: linear-gradient(145deg, rgba(29,177,255,0.1), rgba(29,177,255,0.02) 70%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 3px solid rgba(29,177,255,0.65);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(29,177,255,0.1), 0 6px 24px rgba(0,0,0,0.25);
  padding: 16px 16px 4px;
  margin-bottom: 16px;
}
body:not(.light) .fh-outer-card {
  box-shadow: 0 0 0 4px rgba(29,177,255,0.1), 0 0 32px rgba(29,177,255,0.08), 0 6px 24px rgba(0,0,0,0.35);
}
body.light .fh-outer-card {
  background-color: rgba(70,130,200,0.03);
  background-image: linear-gradient(145deg, rgba(70,130,200,0.06), rgba(70,130,200,0.01) 70%);
  border-color: rgba(0,116,232,0.6);
  box-shadow: 0 0 0 4px rgba(0,116,232,0.08), 0 4px 16px rgba(0,0,0,0.07);
}
.fh-outer-card .card {
  background: rgba(0,0,0,0.15);
}
body.light .fh-outer-card .card {
  background: rgba(255,255,255,0.55);
}
.fm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fm-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 3px;
}
.fm-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}
body.light .fm-title { color: var(--text-dim); }
.fm-col-labels {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(29,177,255,0.12);
  margin-bottom: 6px;
}
.fm-col-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}
body:not(.light) .fm-col-label { color: rgba(168,188,224,0.5); }
.fm-col-label.fm-col-team { align-items: center; padding-left: 0; }
.jsy-vs-line { stroke: #555; }
.jsy-vs-circle { fill: #e8e8e8; stroke: #aaa; }
.jsy-vs-v { fill: #1d8fff; }
.jsy-vs-s { fill: #ff7c1d; }
body:not(.light) .jsy-vs-line { stroke: rgba(255,255,255,0.45); }
body:not(.light) .jsy-vs-circle { fill: #1a1a2e; stroke: rgba(255,255,255,0.35); }
body:not(.light) .jsy-vs-v { fill: #4dc8ff; }
body:not(.light) .jsy-vs-s { fill: #ffaa55; }
.fm-col-icon {
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.fm-icon-mp { background: rgba(245,200,66,0.12); border: 1px solid rgba(245,200,66,0.3); }
.fm-icon-gf { background: rgba(0,212,139,0.12); border: 1px solid rgba(0,212,139,0.3); }
.fm-icon-ga { background: rgba(255,68,102,0.12); border: 1px solid rgba(255,68,102,0.3); }
body.light .fm-icon-mp { background: rgba(155,110,0,0.09); border-color: rgba(155,110,0,0.25); }
body.light .fm-icon-gf { background: rgba(0,140,90,0.09); border-color: rgba(0,140,90,0.25); }
body.light .fm-icon-ga { background: rgba(200,30,55,0.09); border-color: rgba(200,30,55,0.25); }
:root {
  --icon-mp-strong: rgba(245,200,66,0.9);
  --icon-mp-mid:    rgba(245,200,66,0.5);
  --icon-mp-fill:   rgba(245,200,66,0.08);
  --icon-gf-strong: rgba(0,212,139,0.9);
  --icon-gf-mid:    rgba(0,212,139,0.4);
  --icon-gf-fill:   rgba(0,212,139,0.07);
  --icon-gf-ball:   rgba(0,212,139,0.18);
  --icon-ga-strong: rgba(255,68,102,0.85);
  --icon-ga-fill:   rgba(255,68,102,0.09);
  --icon-ga-ball:   rgba(255,68,102,0.15);
}
body.light {
  --icon-mp-strong: rgba(155,110,0,0.9);
  --icon-mp-mid:    rgba(155,110,0,0.45);
  --icon-mp-fill:   rgba(155,110,0,0.08);
  --icon-gf-strong: rgba(0,140,90,0.9);
  --icon-gf-mid:    rgba(0,140,90,0.35);
  --icon-gf-fill:   rgba(0,140,90,0.07);
  --icon-gf-ball:   rgba(0,140,90,0.15);
  --icon-ga-strong: rgba(200,30,55,0.85);
  --icon-ga-fill:   rgba(200,30,55,0.08);
  --icon-ga-ball:   rgba(200,30,55,0.13);
}
.fm-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 14px 4px;
  border-radius: 8px;
  transition: background 0.15s;
}
.fm-row:hover { background: rgba(255,255,255,0.025); }
body.light .fm-row:hover { background: rgba(0,0,0,0.025); }
.fm-row-home { border-left: 3px solid var(--accent); padding-left: 8px; background: rgba(29,177,255,0.035); }
.fm-row-away { border-left: 3px solid var(--accent2); padding-left: 8px; background: rgba(255,107,53,0.035); }
.fm-row-home:hover { background: rgba(29,177,255,0.07); }
.fm-row-away:hover { background: rgba(255,107,53,0.07); }
body.light .fm-row-home { background: rgba(0,116,232,0.04); }
body.light .fm-row-away { background: rgba(224,85,0,0.04); }
body.light .fm-row-home:hover { background: rgba(0,116,232,0.07); }
body.light .fm-row-away:hover { background: rgba(224,85,0,0.07); }
.fm-team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fm-team-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fm-indicator-home {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(29,177,255,0.6);
}
.fm-indicator-away {
  background: var(--accent2);
  box-shadow: 0 0 6px rgba(255,107,53,0.5);
}
.fm-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  width: 100%;
  padding: 5px 0;
  letter-spacing: 0.3px;
  transition: border-color 0.15s;
  text-align: center;
}
.fm-name-input::placeholder { color: var(--text-faint); font-weight: 400; text-align: center; }
.fm-name-home { color: var(--accent); }
.fm-name-away { color: var(--accent2); }
.fm-name-input:focus { outline: none; border-bottom-color: var(--accent); }
.fm-input-cell { display: flex; justify-content: center; }
input[type="number"].fm-input {
  width: 80px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.fm-input::placeholder { color: var(--text-faint); font-weight: 400; font-family: 'Inter', sans-serif; }
.fm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(29,177,255,0.15); }
.fm-input::-webkit-inner-spin-button, .fm-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.fm-input-scored { border-color: rgba(0,212,139,0.35); }
.fm-input-scored:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(0,212,139,0.15); }
.fm-input-conceded { border-color: rgba(255,68,102,0.3); }
.fm-input-conceded:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,68,102,0.15); }
.input-yellow.fm-input { border-color: rgba(245,200,66,0.35); }
.input-yellow.fm-input:focus { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(245,200,66,0.15); }
/* Dark-mode-only glow — the flat surface2 boxes get a faint neon edge so the core input card doesn't look dead */
body:not(.light) input[type="number"].fm-input {
  background: linear-gradient(160deg, rgba(255,255,255,0.025), var(--surface2) 65%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 2px 6px rgba(0,0,0,0.3);
}
body:not(.light) .fm-input-scored { box-shadow: 0 0 9px rgba(0,212,139,0.22), inset 0 0 0 1px rgba(0,212,139,0.12); }
body:not(.light) .fm-input-scored:focus { box-shadow: 0 0 14px rgba(0,212,139,0.4), 0 0 0 2px rgba(0,212,139,0.2); }
body:not(.light) .fm-input-conceded { box-shadow: 0 0 9px rgba(255,68,102,0.2), inset 0 0 0 1px rgba(255,68,102,0.1); }
body:not(.light) .fm-input-conceded:focus { box-shadow: 0 0 14px rgba(255,68,102,0.4), 0 0 0 2px rgba(255,68,102,0.2); }
body:not(.light) .input-yellow.fm-input { box-shadow: 0 0 9px rgba(245,200,66,0.22), inset 0 0 0 1px rgba(245,200,66,0.12); }
body:not(.light) .input-yellow.fm-input:focus { box-shadow: 0 0 14px rgba(245,200,66,0.4), 0 0 0 2px rgba(245,200,66,0.2); }
body:not(.light) .fm-name-home { text-shadow: 0 0 10px rgba(29,177,255,0.55); }
body:not(.light) .fm-name-away { text-shadow: 0 0 10px rgba(255,107,53,0.5); }
body:not(.light) .fm-indicator-home { box-shadow: 0 0 10px rgba(29,177,255,0.85); }
body:not(.light) .fm-indicator-away { box-shadow: 0 0 10px rgba(255,107,53,0.75); }
.fm-row-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,177,255,0.12), transparent);
  margin: 2px 4px;
}
.fm-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(29,177,255,0.07);
  letter-spacing: 0.3px;
}
@media(max-width:640px) {
  .fm-col-labels, .fm-row { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr; gap: 5px; }
  .fm-input { width: 60px; font-size: 0.84rem; padding: 8px 2px; }
  .fm-name-input { font-size: 0.78rem; }
}

/* Stats strip — centre */
.header-stats-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, rgba(29,177,255,0.08), rgba(255,255,255,0.02) 65%);
  border: 1px solid rgba(29,177,255,0.2);
  border-radius: 10px;
  padding: 0 14px 0 4px;
  height: 56px;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
body.light .header-stats-strip {
  background: linear-gradient(135deg, rgba(0,116,232,0.06), rgba(0,0,0,0.015) 65%);
  border-color: rgba(0,116,232,0.16);
  box-shadow: 0 3px 12px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
}
.hss-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px 0 12px;
}
.hss-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(29,177,255,0.8);
  animation: hmb-pulse 2.4s ease-in-out infinite;
}
.hss-live-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
}
body:not(.light) .hss-live-label { color: rgba(168,188,224,0.5); }

/* Mobile condensed stats strip — shown below 1280px instead of header-center */
.header-stats-strip-mobile { display: none; }
@media(max-width:1150px) {
  .header-stats-strip-mobile {
    display: block;
    background: linear-gradient(180deg, rgba(29,177,255,0.06), transparent);
    border-bottom: 1px solid rgba(29,177,255,0.15);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-stats-strip-mobile::-webkit-scrollbar { display: none; }
  body.light .header-stats-strip-mobile {
    background: linear-gradient(180deg, rgba(0,116,232,0.05), transparent);
    border-bottom-color: rgba(0,116,232,0.12);
  }
}
.hssm-track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
  width: max-content;
}
.hssm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  gap: 3px;
  flex-shrink: 0;
}
.hssm-label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
}
body:not(.light) .hssm-label { color: rgba(168,188,224,0.55); }
.hssm-value {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  letter-spacing: 0.2px;
  color: var(--hss-default, var(--text-dim));
}
.hssm-value.accent  { color: var(--accent); }
.hssm-value.home    { color: var(--accent); }
.hssm-value.away    { color: var(--accent2); }
.hssm-value.conf    { font-family: 'JetBrains Mono', 'Inter', monospace; font-weight: 600; }
.hssm-value.bestbet { color: var(--yellow); font-weight: 700; }
.hssm-sep {
  width: 1px;
  height: 24px;
  background: rgba(29,177,255,0.15);
  flex-shrink: 0;
}
body.light .hssm-sep { background: rgba(0,116,232,0.12); }
.hss-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  gap: 4px;
}
.hss-label {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
}
body:not(.light) .hss-label {
  color: rgba(168, 188, 224, 0.55);
}
.hss-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--hss-default, var(--text-dim));
  white-space: nowrap;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  letter-spacing: 0.2px;
}
body:not(.light) { --hss-default: #c3cee2; --hss-away: #ff9166; }
.hss-value.accent { color: var(--accent); }
.hss-value.home   { color: var(--accent); }
.hss-value.away   { color: var(--accent2); }
.hss-value.conf {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
}
.hss-value.bestbet {
  color: var(--yellow);
  font-weight: 700;
}
.hss-bestbet-pct {
  color: #00b87a;
  opacity: 0.9;
  font-weight: 600;
  font-size: 0.7rem;
  margin-left: 3px;
}
body.light .hss-bestbet-pct { color: #00845a; opacity: 1; }
.hss-bestbet-bracket {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(29,177,255,0.12);
  color: var(--accent);
  border: 1px solid rgba(29,177,255,0.22);
  margin-left: 3px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
body.light .hss-bestbet-bracket { background: rgba(0,116,232,0.1); border-color: rgba(0,116,232,0.2); }
.hss-sep {
  width: 1px;
  height: 34px;
  background: rgba(29,177,255,0.12);
  flex-shrink: 0;
}
body.light .hss-sep { background: rgba(0,116,232,0.1); }

/* Right: mode badge */
.header-mode-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(29,177,255,0.15);
  border-radius: 8px;
  padding: 7px 12px;
  flex-shrink: 0;
}
body.light .header-mode-badge {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,116,232,0.12);
}
.hmb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(29,177,255,0.8);
  flex-shrink: 0;
  animation: hmb-pulse 2.4s ease-in-out infinite;
}
@keyframes hmb-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}
.hmb-mode {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.hmb-sub {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', 'Inter', monospace;
}
.hmb-sub #badge-rho, .hmb-sub #badge-tau { font-weight: 700; }
@media(max-width:1150px) { .header-center { display: none; } }
@media(max-width:640px) {
  header { padding: 0 10px; height: 69px; gap: 8px; }
  .header-mode-badge { padding: 5px 7px; gap: 5px; }
  .hmb-sub { display: flex; font-size: 0.55rem; }
  .hmb-mode { font-size: 0; }
  .hmb-mode::before { content: 'DC+BIV'; font-size: 0.6rem; }
}

/* (.tabs top offset now set directly in the base .tabs block above) */

/* ══════════════════════════════════════════
   RESULTS — Scores + Distribution panel
══════════════════════════════════════════ */
.scores-dist-panel {
  display: grid;
  grid-template-columns: 180px 1px 1fr;
  margin-top: 14px;
  background: var(--surface2);
  border: 3px solid rgba(29,177,255,0.55);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(29,177,255,0.1);
  overflow: hidden;
  min-height: 160px;
}
body.light .scores-dist-panel {
  border-color: rgba(0,116,232,0.5);
  box-shadow: 0 0 0 4px rgba(0,116,232,0.08);
}
.sdp-left {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sdp-right {
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.sdp-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.sdp-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sdp-scores-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* scores-dist mobile handled in main mobile block */

/* ══════════════════════════════════════════
   GOAL DISTRIBUTION CHART — grouped bars
══════════════════════════════════════════ */
.gdist-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0;
}
.gdist-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.gdist-group-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.gdist-group-icon {
  font-size: 0.75rem;
  line-height: 1;
}
.gdist-group-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gdist-group-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gdist-pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.gdist-pair:last-child { border-bottom: none; }
body.light .gdist-pair { border-bottom-color: rgba(0,0,0,0.05); }

/* Each bar row */
.gdist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}
.gdist-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  width: 68px;
  flex-shrink: 0;
  white-space: nowrap;
}
.gdist-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
body.light .gdist-bar-track { background: rgba(0,0,0,0.06); }
.gdist-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left;
}
.gdist-pct {
  font-size: 0.72rem;
  font-weight: 700;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.gdist-signal {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gdist-signal-over,
.gdist-signal-yes  { background: rgba(29,177,255,0.12); color: var(--accent); border: 1px solid rgba(29,177,255,0.25); }
.gdist-signal-under { background: rgba(255,107,53,0.1);  color: var(--accent2); border: 1px solid rgba(255,107,53,0.25); }
.gdist-signal-no    { background: rgba(255,68,102,0.1);   color: var(--red); border: 1px solid rgba(255,68,102,0.2); }

/* ══════════════════════════════════════════
   FORM TABLE — redesigned 2-col layout
══════════════════════════════════════════ */
.form-layout-wrap {
  display: block;
}

/* match-row removed — MP is now column 2 in the form table */
.form-mp-warn {
  width: 100%;
  font-size: 0.68rem;
  color: var(--yellow);
  font-weight: 600;
  padding-top: 2px;
}

/* Table team col colours */
.form-stats-table td.home-col { color: var(--accent) !important; }
.form-stats-table td.away-col { color: var(--accent2) !important; }

/* Right side: FormMult indicator cards */
.form-indicators-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 110px;
}
.form-indicator-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s;
}
.form-indicator-card.home-indicator { border-color: rgba(29,177,255,0.2); }
.form-indicator-card.away-indicator { border-color: rgba(255,107,53,0.2); }
.fi-team-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.fi-team-label.home { color: var(--accent); }
.fi-team-label.away { color: var(--accent2); }
.fi-mult {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1;
  text-align: center;
}
.fi-state-wrap { margin-top: 2px; }
.fi-state-wrap .form-btns { border: none; gap: 3px; }
.fi-state-wrap .form-btn {
  padding: 4px 7px;
  font-size: 0.75rem;
  border-radius: 5px;
  border: 1px solid var(--border);
}
body.light .form-indicator-card.home-indicator { border-color: rgba(0,116,232,0.2); }
body.light .form-indicator-card.away-indicator { border-color: rgba(224,85,0,0.2); }
body.light .fi-team-label.home { color: var(--accent); }
body.light .fi-team-label.away { color: var(--accent2); }





/* ══════════════════════════════════════════
   MOBILE OPTIMISATION — ≤640px
══════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Base typography ── */
  body { font-size: 13px; }
  main { padding: 10px 8px 96px; }

  /* ── Touch targets — min 48px on mobile (a11y / mobile UX) ── */
  .theme-btn { width: 44px; height: 44px; }
  .lg-btn { min-height: 44px; padding: 9px 14px; }
  #calc-btn { min-height: 48px; }

  /* ── Cards ── */
  .card { padding: 14px 12px; margin-bottom: 12px; border-radius: 8px; }
  .card-title { font-size: 0.62rem; margin-bottom: 12px; }

  /* ── Outcome grid — main 1X2 ── */
  .outcome-grid { grid-template-columns: repeat(3,1fr); }
  .outcome-cell { padding: 14px 6px !important; }
  .outcome-label { font-size: 0.52rem; }
  .outcome-pct { font-size: 1.8rem !important; }
  .outcome-odds { font-size: 0.65rem; }
  .outcome-signal { font-size: 0.52rem; }

  /* ── Predicted score hero ── */
  .ps-hero { padding: 18px 12px; }
  .ps-scoreline { font-size: 2.8rem !important; letter-spacing: 2px; }
  .ps-team { font-size: 0.7rem; }
  .ps-eyebrow { font-size: 0.52rem; }
  .ps-teams-row { gap: 12px; }
  .ps-emblem { width: 60px; height: 70px; }

  /* ── Most Likely ── */
  .mlh-score { font-size: 2.8rem !important; }
  .mlh-eyebrow { font-size: 0.52rem; }

  /* ── Stats table (inputs) ── */
  .stats-table th { font-size: 0.55rem; padding: 6px 4px; }
  .stats-table td { padding: 5px 3px; }
  .stats-table input[type="number"],
  .stats-table input[type="text"] { width: 56px; font-size: 0.78rem; padding: 3px 4px; }
  .stats-table input[type="text"] { width: 80px; }
  .stats-table td.team-name-cell { font-size: 0.58rem; max-width: 60px; padding-left: 5px; }

  /* ── Form table ── */
  .form-stats-table { font-size: 0.75rem; }
  .form-stats-table th { font-size: 0.52rem; padding: 5px 3px; }
  .form-stats-table td { padding: 4px 3px; }
  .form-stats-table input[type=number] { width: 46px !important; font-size: 0.78rem; padding: 3px 4px; }
  .form-mult-inline { font-size: 0.58rem; }
  .form-btns { gap: 1px !important; }
  .form-btn { padding: 3px 4px !important; font-size: 0.68rem !important; }

  /* ── Goal distribution chart ── */
  .gdist-label { width: 52px; font-size: 0.6rem; }
  .gdist-pct { font-size: 0.65rem; width: 30px; }
  .gdist-signal { font-size: 0.48rem; padding: 1px 4px; }
  .gdist-group-title { font-size: 0.56rem; }

  /* ── Scores + dist panel ── */
  .scores-dist-panel { grid-template-columns: 1fr !important; }
  .sdp-divider { width: auto !important; height: 1px !important; }
  .sdp-left, .sdp-right { padding: 10px; }

  /* ── Top scoreline tiles ── */
  .top-scoreline { padding: 12px; }
  .top-scoreline-score { font-size: 2.2rem !important; }
  .score-pill { padding: 4px 6px; }
  .pill-score { font-size: 0.8rem; }
  .pill-prob, .pill-pct { font-size: 0.6rem; }

  /* ── Confidence bar ── */
  .conf-meter-wrap { padding: 12px; }
  .confidence-bar-label { font-size: 0.6rem; }

  /* ── EV table ── */
  .ev-table { font-size: 0.72rem; }
  .ev-table th { font-size: 0.55rem; padding: 6px 6px; }
  .ev-table td { padding: 6px 6px; }
  .ev-odds-input { width: 56px; font-size: 0.78rem; }
  .ev-summary { grid-template-columns: 1fr 1fr; gap: 7px; }
  .ev-summary-card { padding: 10px; }
  .ev-value { font-size: 0.88rem; }
  .ev-badge { font-size: 0.55rem; }
  .ev-market { font-size: 0.72rem; }

  /* ── Bet summary quickstats ── */
  #bs-quickstats { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }

  /* ── Top 3 picks row: stack #1 full-width above 2nd/3rd on small screens ── */
  #bs-1x2 > div { flex-wrap: wrap !important; }
  #bs-1x2 > div > div:first-child { flex: 1 1 100% !important; }
  #bs-1x2 > div > div:not(:first-child) { flex: 1 1 calc(50% - 5px) !important; }
  #bs-1x2 > div > div:not(:first-child) > div:last-child > div:first-child { font-size: 0.48rem !important; }
  #bs-1x2 > div > div:not(:first-child) > div:last-child > div:nth-child(2) { font-size: 0.82rem !important; }
  #bs-1x2 > div > div:not(:first-child) > div:last-child > div:nth-child(3) { font-size: 1.15rem !important; }

  /* ── Toggle cards ── */
  .toggle-card-icon { width: 28px; height: 28px; font-size: 0.85rem; }
  .toggle-card-title { font-size: 0.76rem; }
  .toggle-card-sub { font-size: 0.58rem; }

  /* ── Half sections ── */
  .half-sections { grid-template-columns: 1fr !important; }

  /* ── Results context chips ── */
  .results-context { gap: 4px; padding: 6px 8px; font-size: 0.62rem; }
  .ctx-chip { font-size: 0.58rem; padding: 1px 6px; }

  /* ── FAQ ── */
  .faq-q { font-size: 0.76rem; padding: 11px 12px 11px 14px; }
  .faq-a { font-size: 0.72rem; padding: 10px 14px 12px; }
  .faq-item { margin-bottom: 8px; }

  /* ── Tabs sticky position ── */
  .tabs { top: 69px !important; }

  /* ── Header stats strip hidden already, logo scale ── */
  .logo-svg { width: 214px !important; height: 38px !important; }
  .het-text { font-size: 0.54rem; }

  /* ── Butterfly / bar chart HT/2H ── */
  .res-inner { grid-template-columns: 1fr !important; }
  .res-left-border { border-right: none !important; border-bottom: 1px solid var(--border) !important; }

  /* ── Score tiles ── */
  .score-tile { min-width: 52px; padding: 6px 7px; }
  .scoreline-tiles { gap: 5px; }

  /* ── outcome tiles ── */
  .outcome-tile { padding: 12px 6px 10px; }
  .otile-pct { font-size: 1.8rem; }
  .otile-label { font-size: 0.5rem; }
  .otile-odds { font-size: 0.65rem; }

  /* ── Teams row ── */
  .teams-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .input-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── Select dropdowns ── */
  select { font-size: 0.8rem; padding: 7px 26px 7px 8px; }

  /* ── Lambda display ── */
  .lambda-display { font-size: 0.7rem; gap: 10px; flex-wrap: wrap; }

  /* ── Bar chart ── */
  .bar-wrap { padding: 6px 8px !important; }
  .bar-row { gap: 6px; padding: 3px 0; }
  .bar-label { font-size: 0.65rem; width: 60px; }
  .bar-pct { font-size: 0.68rem; width: 32px; }

  /* ── Note + empty state ── */
  .note { font-size: 0.65rem; }
  .empty-state { padding: 32px 16px; }
  .empty-icon { font-size: 1.8rem; }
  .empty-state p { font-size: 0.78rem; }

  /* ── Calc button ── */
  #calc-btn { font-size: 0.76rem; padding: 10px 22px; min-width: 140px; }

  /* ── Outcome grid in HT/2H — prevent overflow ── */
  .outcome-cell[style*="min-width:80px"] { min-width: 64px !important; }
}

/* ── Very small screens (≤360px) ── */
@media (max-width: 360px) {
  .outcome-pct { font-size: 1.5rem !important; }
  .ps-scoreline { font-size: 2.4rem !important; }
  .ps-emblem { width: 50px; height: 58px; }
  .ps-teams-row { gap: 8px; }
  .stats-table input[type="number"] { width: 48px; }
  .form-stats-table input[type=number] { width: 40px !important; }
  .ev-summary { grid-template-columns: 1fr !important; }
  #bs-quickstats { grid-template-columns: 1fr 1fr !important; }
  main { padding: 8px 6px 90px; }
}

/* ══════════════════════════════════════════
   FORM TABLE — LG spacing + FD blue palette
══════════════════════════════════════════ */
.form-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.form-stats-table th {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(29,177,255,0.65);
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(29,177,255,0.12);
  white-space: nowrap;
}
.form-stats-table th:first-child { text-align: left; }
.form-stats-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(29,177,255,0.07);
  text-align: center;
  vertical-align: middle;
}
.form-stats-table td:first-child { text-align: left; }
.form-stats-table td.team-col {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.form-stats-table td.home-col { color: var(--accent) !important; }
.form-stats-table td.away-col { color: var(--accent2) !important; }
.form-stats-table input[type=number] {
  width: 64px;
  background: rgba(29,177,255,0.06);
  border: 1px solid rgba(29,177,255,0.2);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  display: block;
  margin: 0 auto;
}
.form-stats-table input[type=number]::-webkit-outer-spin-button,
.form-stats-table input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.form-stats-table input[type=number]:focus {
  border-color: rgba(29,177,255,0.55);
  box-shadow: 0 0 8px rgba(29,177,255,0.18);
}

/* ── Form state buttons — LG glow style, FD palette ── */
.form-btns-inline {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  border: none;
}
/* Keep .form-btns generic override for inline usage */
.form-stats-table .form-btns {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  border: none;
}
.form-stats-table .form-btn,
.form-btns-inline .form-btn {
  flex: 1;
  padding: 8px 4px;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(29,177,255,0.15);
  border-radius: 7px;
  background: rgba(29,177,255,0.04);
  color: var(--text-faint);
  transition: all 0.2s ease;
  white-space: nowrap;
  opacity: 0.55;
  filter: grayscale(30%);
}
.form-stats-table .form-btn:hover:not(.active-poor):not(.active-neutral):not(.active-fire),
.form-btns-inline .form-btn:hover:not(.active-poor):not(.active-neutral):not(.active-fire) {
  background: rgba(29,177,255,0.1);
  border-color: rgba(29,177,255,0.3);
  opacity: 0.8;
  filter: none;
  transform: scale(1.08);
}
/* 🥶 POOR — icy red glow */
.form-stats-table .form-btn.active-poor,
.form-btns-inline .form-btn.active-poor {
  opacity: 1;
  filter: none;
  background: rgba(255,60,60,0.16);
  color: #ff7070;
  border-color: rgba(255,60,60,0.55);
  box-shadow: 0 0 16px rgba(255,60,60,0.4), inset 0 0 10px rgba(255,60,60,0.1);
  text-shadow: 0 0 10px rgba(255,80,80,0.95);
  transform: scale(1.1);
}
/* 😐 NEUTRAL — blue glow */
.form-stats-table .form-btn.active-neutral,
.form-btns-inline .form-btn.active-neutral {
  opacity: 1;
  filter: none;
  background: rgba(29,177,255,0.14);
  color: #7dcfff;
  border-color: rgba(29,177,255,0.5);
  box-shadow: 0 0 16px rgba(29,177,255,0.35), inset 0 0 10px rgba(29,177,255,0.1);
  text-shadow: 0 0 10px rgba(80,200,255,0.9);
  transform: scale(1.1);
}
/* 🔥 FIRE — amber glow */
.form-stats-table .form-btn.active-fire,
.form-btns-inline .form-btn.active-fire {
  opacity: 1;
  filter: none;
  background: rgba(255,155,20,0.16);
  color: #ffc040;
  border-color: rgba(255,155,20,0.6);
  box-shadow: 0 0 18px rgba(255,155,20,0.45), inset 0 0 10px rgba(255,155,20,0.1);
  text-shadow: 0 0 12px rgba(255,175,50,1);
  transform: scale(1.1);
}

/* FormMult inline */
.form-mult-inline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.3px;
  min-height: 14px;
}
.form-auto-note {
  font-size: 0.58rem;
  color: rgba(29,177,255,0.45);
  letter-spacing: 0.8px;
  padding: 6px 10px 8px;
  font-style: italic;
}

/* Light mode overrides */
body.light .form-stats-table th { color: #1a5fa0 !important; border-bottom-color: rgba(0,116,232,0.15) !important; }
body.light .form-stats-table td { border-bottom-color: rgba(0,0,0,0.07) !important; }
body.light .form-stats-table input[type=number] { background: rgba(0,116,232,0.04); border-color: rgba(0,116,232,0.2); color: #0d1421; }
body.light .form-stats-table input[type=number]:focus { border-color: rgba(0,116,232,0.5); box-shadow: 0 0 6px rgba(0,116,232,0.15); }
body.light .form-stats-table .form-btn,
body.light .form-btns-inline .form-btn { background: #f0f4fb; border-color: #c8d4e8; color: #3a4050; }
body.light .form-stats-table .form-btn.active-poor,
body.light .form-btns-inline .form-btn.active-poor { background: rgba(187,17,34,0.1); color: #bb1122; border-color: rgba(187,17,34,0.45); box-shadow: 0 0 10px rgba(187,17,34,0.25); text-shadow: none; }
body.light .form-stats-table .form-btn.active-neutral,
body.light .form-btns-inline .form-btn.active-neutral { background: rgba(0,116,232,0.1); color: #0055bb; border-color: rgba(0,116,232,0.45); box-shadow: 0 0 10px rgba(0,116,232,0.22); text-shadow: none; }
body.light .form-stats-table .form-btn.active-fire,
body.light .form-btns-inline .form-btn.active-fire { background: rgba(154,112,0,0.1); color: #8a6000; border-color: rgba(154,112,0,0.45); box-shadow: 0 0 10px rgba(154,112,0,0.22); text-shadow: none; }
body.light .form-auto-note { color: rgba(0,80,180,0.45) !important; }

/* ── xG / Over-Under pill row (FD edition) ── */
.xg-pill-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.xg-pill {
  background: rgba(29,177,255,0.06);
  border: 1px solid rgba(29,177,255,0.18);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 90px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.xg-pill:hover {
  background: rgba(29,177,255,0.1);
  border-color: rgba(29,177,255,0.3);
}
.xg-pill-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.xg-pill-val {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
}
.xg-pill-val.accent { color: var(--accent); }
.xg-pill-estimate { border-style: dashed; opacity: 0.72; }
.xg-pill-estimate .xg-pill-val { color: var(--text-dim); }
body.light .xg-pill { background: rgba(0,116,232,0.05); border-color: rgba(0,116,232,0.15); }
body.light .xg-pill:hover { background: rgba(0,116,232,0.09); border-color: rgba(0,116,232,0.28); }
@media(max-width:640px) {
  .xg-pill { min-width: 76px; padding: 6px 10px; }
  .xg-pill-val { font-size: 0.92rem; }
}

  

/* ── Mobile smoothness patch ── */

/* Contain overscroll on tab strip so it doesn't bleed to page */
.tabs {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Momentum scrolling on main content */
main {
  -webkit-overflow-scrolling: touch;
}

/* Stop SVG logo animations burning GPU when offscreen / in background */
@media (prefers-reduced-motion: reduce) {
  .logo-svg animate,
  .logo-svg animateTransform { animation-play-state: paused; }
}

/* GPU-composite the sticky header & nav bar — avoids paint on scroll */
header {
  transform: translateZ(0);
}
.mobile-nav {
  transform: translateZ(0);
}

/* Prevent the section fade-in from causing repaints mid-scroll */
.section {
  contain: layout style;
}

/* Faster, GPU-only tab active animation — drop the Y translate which triggers layout */
@keyframes tab-pop-in {
  0%   { transform: scale(0.93); opacity: 0.7; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.tab.active {
  animation: tab-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform;
}

/* Remove hover transforms on touch devices — they linger after tap */
@media (hover: none) {
  .tab:hover {
    transform: none;
    background: var(--surface2);
    border-color: var(--border);
  }
  .tab.active {
    transform: none;
    animation: none;
  }
  .onb-start:hover { transform: none; }
}

/* Faster mobile nav tap feedback */
.mnav-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Stats table inputs: ensure no zoom on iOS for inline-styled inputs */
@media (max-width: 640px) {
  .stats-table input[type="number"],
  .stats-table input[type="text"],
  .form-stats-table input[type="number"],
  .ev-odds-input,
  .fm-input,
  .lg-input,
  .ev-odds-input {
    font-size: 16px !important;
  }
  /* Prevent horizontal scroll bleed from cards */
  .card, .outcome-tile, .score-tile {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Fix: confidence bar already uses scaleX in predictor.js — ensure GPU compositing */
.confidence-bar-fill {
  will-change: transform;
}
.gdist-bar-fill {
  will-change: transform;
}

/* ══════════════════════════════════════════════════
   SCROLL SMOOTHNESS — THE REAL FIXES
   ══════════════════════════════════════════════════ */

/* 1. KILL backdrop-filter on cards during scroll on mobile.
      backdrop-filter forces the browser to composite every pixel
      behind every card — with 10+ cards visible, scroll FPS tanks to
      15-20fps on mid-range Android. The cards are 96% opaque anyway,
      so the blur is invisible. Replace with a solid colour. */
@media (max-width: 640px) {
  .card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--card-bg) !important;
  }
  body.light .card {
    background: #ffffff !important;
  }

  /* .fm-card has blur(10px) — even worse */
  .fm-card,
  body.light .fm-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Also kill any other stray blur in the scroll area */
  .conf-meter-wrap,
  .outcome-tile,
  .score-tile,
  .ps-card,
  .bet-summary-card,
  .ev-row {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* .contact-modal-overlay had blur(4px) that wasn't covered above —
     it sits full-screen (inset:0) and its content can be scrolled on
     small screens, so the blur was still compositing every frame
     while the user scrolled inside the open modal. Same fix as the
     cards: solid colour instead of blur, mobile only. */
  .contact-modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,0.78) !important;
  }
}

/* 9. PAUSE decorative infinite animations while the page is actively
      scrolling on mobile. hmb-pulse/het-dot/hss-live-dot only animate
      transform+opacity (compositor-cheap) so they're not a smoking gun
      on their own, but #calc-btn's idle animations include calc-shimmer
      (transform+opacity, cheap) AND the .loading variant calc-breathe,
      which animates `background` — a PAINT property — every 0.7s. None
      of these need to keep ticking while the user's thumb is mid-flick;
      pausing them removes any chance they compete with scroll on weak
      GPUs, and resumes them the instant scrolling stops (150ms after
      the last scroll event, matching the existing SVG-pause logic below).
      Toggled via body.is-scrolling, set in the script at the bottom. */
@media (max-width: 640px) {
  body.is-scrolling .hmb-dot,
  body.is-scrolling .het-dot,
  body.is-scrolling .hss-live-dot,
  body.is-scrolling #calc-btn,
  body.is-scrolling #calc-btn::after,
  body.is-scrolling #calc-btn.loading {
    animation-play-state: paused !important;
  }
}

/* 2. Content containment on cards — isolates paint to each card,
      so scrolling doesn't repaint the whole page */
.card {
  contain: content;
}

/* 3. html and body: ensure the scroll surface is the window,
      not a nested overflow container that loses momentum */
html {
  height: 100%;
  /* Smooth scroll only for programmatic scrollTo, not finger drags */
  scroll-behavior: auto;
}
body {
  /* NOTE: intentionally no fixed height here — a fixed height:100% on body
     clamps its box to one viewport, which caps the position:sticky
     containing block for header/.tabs at that same height. Past that point
     (roughly one viewport of scroll) the sticky header/tabs would detach
     and scroll away with the page, forcing a scroll to the very top/bottom
     to reach them. min-height:100vh (set earlier) is enough to keep the
     scroll surface on the window without breaking sticky. */
  /* Tell the browser we'll never transform the body — enables scroll
     optimisations in Chrome/Safari */
  transform: none;
  /* Prevent pull-to-refresh jank at the top of the page on Android */
  overscroll-behavior-y: contain;
}

/* 4. Passive touch — the browser can't start scrolling until JS
      touch handlers return. Force non-blocking touch on the main
      content wrapper so the browser scrolls instantly. */
main {
  touch-action: pan-y;
}

/* 5. Reduce paint area during scroll — sections not visible should
      not be painted at all */
.section:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* 6. Avoid backdrop-filter jank on low-end devices */
@media (max-width: 640px) {
  #sm-onboard-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 10, 22, 0.92);
  }
}

/* 7. Sticky header: use translateZ promotion but avoid will-change
      on children (causes excessive layer creation) */
header {
  isolation: isolate;
}
.tabs {
  isolation: isolate;
}
.mobile-nav {
  isolation: isolate;
}

/* 8. KILL the infinite header shimmer on mobile/low-end devices.
      .het-text animates `background-position` on a background-clip:text
      gradient, forever, from page load — that's a PAINT animation (not a
      compositor one), and it lives inside the sticky header, which is
      visible on screen the entire time the user scrolls. That means the
      main thread is repainting this label on every animation frame while
      it's also trying to keep up with scroll input — a classic source of
      stutter on weaker/older Android GPUs (e.g. Android 8 devices), even
      though it's barely noticeable on fast hardware. Swap to a static
      gradient fill — same look, zero ongoing paint cost. */
@media (max-width: 640px) {
  .het-text {
    animation: none !important;
    background-position: 0% center !important;
  }
}

/* ══════════════════════════════════════════════════
   LITE MODE — for old/low-end Android (≤8), flagged by
   the inline script in <head>. Old GPUs can't composite
   layered gradient + box-shadow + border-radius cards at
   60fps; this strips that stack to flat colour + flat border
   so paint cost per card drops dramatically, independent of
   scroll-event handling (which can't fix a GPU that's just
   too slow to composite the layers in the first place). */
html.lite-mode * {
  /* Kill every gradient background, all shadows, and all
     animations/transitions in one sweep. Specific component
     colours (--accent etc.) still come through since we're
     only stripping image-layer backgrounds, not solid ones. */
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
html.lite-mode .card,
html.lite-mode .fm-card,
html.lite-mode .outcome-tile,
html.lite-mode .score-tile,
html.lite-mode .ps-card,
html.lite-mode .bet-summary-card {
  border-radius: 4px !important;
  background: var(--card-bg) !important;
}
html.lite-mode body.light .card {
  background: #ffffff !important;
}
html.lite-mode #calc-btn {
  border-radius: 6px !important;
}
html.lite-mode #calc-btn::after {
  display: none !important;
}
/* Layer-explosion fix: confidence-bar-fill / gdist-bar-fill carry
   will-change:transform (added earlier to GPU-accelerate their width
   animation), but a single match render can produce 15-30 of these
   across the FH/2H/FT panels. will-change pins EACH one to its own
   persistent compositor layer even while static — on a weak/old GPU,
   managing and texture-uploading that many layers during a fast fling
   (as bars scroll in/out and layers get created/destroyed) is often
   worse than just letting them paint normally. Old Android specifically
   suffers here since this is exactly when layer churn spikes. */
html.lite-mode .confidence-bar-fill,
html.lite-mode .gdist-bar-fill {
  will-change: auto !important;
}
  

/* ── Keyboard focus states for tab bar + toggle-card headers ──
   These became keyboard-operable (role="tab"/"button" + tabindex="0")
   in the a11y pass; give them a visible on-brand focus ring that only
   shows for keyboard navigation, not mouse clicks. */
.tab:focus-visible,
.toggle-card-header:focus-visible {
  outline: 2px solid var(--accent, #1db1ff);
  outline-offset: 2px;
  border-radius: 6px;
}