/* Dark theme forced sitewide (not just following system preference) —
   deliberately a bit darker/moodier than a typical light/dark-adaptive site. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-variable.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #09090b;
  --panel: #17151d;
  --panel-2: #1e1b26;
  --text: #f4f4f6;
  --muted: #9696a8;
  --muted-dim: #6c6c7c;
  --accent: #a855f7;
  --accent-bright: #c084fc;
  --accent-dim: #7c3aed;
  --accent-soft: rgba(168, 85, 247, 0.12);
  --cyan: #2dd4ee;
  --cyan-soft: rgba(45, 212, 238, 0.12);
  --win: #34e88a;
  --loss: #ff4d7e;
  --border: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(196, 132, 252, 0.4);
  --radius: 14px;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}
/* Form fields stay normally selectable/editable regardless of the
   page-wide no-select above — otherwise typing/editing would feel broken. */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
}
/* Numbers that should line up in columns or read as data (odds, units,
   stats) use the monospace face with tabular figures instead of the
   variable proportional face. */
.stat-number, .hero-number, .match-time, .match-odds, .pick-books,
.bookmaker-table, .stats-table, .history-table, .result-score,
.profit-pos, .profit-neg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

main { max-width: 780px; margin: 0 auto; padding: 0 1.25rem 3rem; }

header.site-header {
  border-bottom: 1px solid var(--border); margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 780px; margin-left: auto; margin-right: auto; padding: 1rem 1.25rem;
}
header .logo {
  font-size: 1.15rem; font-weight: 700; color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.logo-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 12px 3px rgba(192, 132, 252, 0.6);
}
.nav-links { display: flex; align-items: center; gap: 1rem; }
header .nav-link { color: var(--muted); text-decoration: none; font-size: 0.85rem; }
header .nav-link:hover { color: var(--accent-bright); }
header .nav-link--accent { color: var(--accent-bright); font-weight: 600; }

/* A native <details>/<summary> dropdown, no JS -- this app's CSP is
   script-src 'none' on purpose, so any interactive nav menu has to work
   without it. Opens on click (native <details> behaviour) AND on hover
   (the :hover rule below), closes when the mouse leaves or (after a click)
   when <summary> is clicked again. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; list-style: none;
}
.nav-dropdown__trigger::-webkit-details-marker { display: none; }
.nav-dropdown__icon { color: var(--muted); }
.nav-dropdown:hover .nav-dropdown__trigger,
.nav-dropdown[open] .nav-dropdown__trigger { background: var(--panel-2); }
.nav-dropdown:hover .nav-dropdown__icon,
.nav-dropdown[open] .nav-dropdown__icon { color: var(--accent-bright); }
.nav-dropdown__menu {
  display: none;
  position: absolute; top: calc(100% + 0.6rem); right: 0;
  min-width: 160px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  padding: 0.4rem;
  z-index: 30;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown[open] .nav-dropdown__menu { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-dropdown__item {
  color: var(--text); text-decoration: none; font-size: 0.85rem;
  padding: 0.5rem 0.7rem; border-radius: 8px;
}
.nav-dropdown__item:hover { background: var(--accent-soft); color: var(--accent-bright); }
.nav-dropdown__divider { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; }

.flash-messages { margin-bottom: 1rem; }
.flash {
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 0 0 0.5rem;
}

/* --- Auth pages --- */
.auth-box { max-width: 380px; margin: 2rem auto; }
.auth-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.auth-form input, .bet-form input, select {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.55rem 0.7rem; color: var(--text); font-size: 0.95rem;
}
.btn-primary {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 0.6rem 1.1rem; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { background: var(--accent-dim); box-shadow: 0 0 16px 2px rgba(168, 85, 247, 0.35); }
.btn-ledger { margin: 0.75rem 0 1.25rem; font-size: 1.05rem; padding: 0.7rem 1.4rem; }
.btn-small {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.7rem; font-size: 0.8rem; cursor: pointer;
}

/* --- Bets page --- */
.stat-row { display: flex; gap: 0.75rem; margin: 1.25rem 0; }
.stat-tile {
  flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.9rem; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 34px -26px rgba(0, 0, 0, 0.7);
}
.stat-number { display: block; font-size: 1.5rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
.chart-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; }
.profit-chart { width: 100%; height: auto; display: block; }

.add-bet-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.bet-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.bet-form input { flex: 1; min-width: 140px; }

.bet-table, .admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.bet-table th, .bet-table td, .admin-table th, .admin-table td {
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left;
}
.bet-table th, .admin-table th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.profit-pos { color: var(--win); font-weight: 600; }
.profit-neg { color: var(--loss); font-weight: 600; }

.bet-row-list { display: flex; flex-direction: column; gap: 0.6rem; }
.bet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--muted-dim);
  border-radius: 8px; padding: 0.7rem 0.9rem; flex-wrap: wrap;
}
.bet-row--win { border-left-color: var(--win); }
.bet-row--loss { border-left-color: var(--loss); }
.bet-row-info { flex: 1; min-width: 0; }
.bet-row-title { font-weight: 600; font-size: 0.95rem; }
.bet-row-desc { color: var(--muted); font-size: 0.82rem; margin-top: 0.1rem; }
.bet-row-score { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; }

.outcome-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.outcome-buttons--compact { margin-top: 0.5rem; }
.outcome-buttons form { display: contents; }
.outcome-btn {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  border-radius: 6px; padding: 0.4rem 0.7rem; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.outcome-btn--win:hover, .outcome-btn--win.is-active { background: var(--win); border-color: var(--win); color: #06210f; }
.outcome-btn--loss:hover, .outcome-btn--loss.is-active { background: var(--loss); border-color: var(--loss); color: #2a0009; }
.outcome-btn--void:hover, .outcome-btn--void.is-active { background: var(--muted); border-color: var(--muted); color: var(--bg); }

.admin-table .suspended-row { opacity: 0.55; }
.badge-admin {
  background: var(--accent-soft); color: var(--accent-bright); font-size: 0.7rem;
  padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.3rem;
}

.day-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.day-tab {
  padding: 0.6rem 1rem; color: var(--muted); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.day-tab:hover { color: var(--text); }
.day-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent); }

.page-head { margin-bottom: 1.75rem; }
h1 { font-size: 1.5rem; margin: 0 0 0.2rem; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
h3 { font-size: 1rem; margin: 0; }
.summary, .hint, .no-data { color: var(--muted); font-size: 0.88rem; }
.no-data { font-style: italic; }
.back-link { color: var(--accent-bright); text-decoration: none; font-size: 0.85rem; }

/* --- Top picks --- */
.top-picks { margin-bottom: 2.5rem; }
/* perspective on the grid, not the cards, is what makes each card's fixed
   rotateX below read as leaning toward the viewer instead of a flat skew */
.pick-grid { display: grid; gap: 1rem; perspective: 1400px; }
.pick-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem 1rem 2.75rem;
  transform: rotateX(5deg);
  transform-origin: 50% 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 34px 50px -30px rgba(168, 85, 247, 0.4),
    0 16px 26px -16px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), border-color 0.25s ease;
}
.pick-card:hover {
  transform: rotateX(9deg) translateY(-5px);
  border-color: var(--border-hover);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 44px 60px -26px rgba(168, 85, 247, 0.5),
    0 20px 30px -14px rgba(0, 0, 0, 0.65);
}
.pick-rank {
  position: absolute; left: 0.9rem; top: 1rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-dim));
  color: #fff;
  font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 14px 2px rgba(168, 85, 247, 0.45);
}
.pick-tag {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-bright); background: var(--accent-soft);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 999px; padding: 0.22rem 0.6rem; margin-bottom: 0.6rem;
}
.pick-card h3 { font-size: 1.05rem; margin-bottom: 0.1rem; }
.pick-league { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.5rem; }
.pick-desc { font-weight: 600; margin: 0 0 0.4rem; }
.pick-stats { display: flex; gap: 1.5rem; margin: 0.7rem 0 0.9rem; }
.pick-stat .num { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.pick-stat .num.odds { color: var(--cyan); }
.pick-stat .label {
  display: block; color: var(--muted-dim); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem;
}
.strength-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; }
.strength-row .label { color: var(--muted); font-size: 0.78rem; }
.strength-row .value { font-size: 0.78rem; font-weight: 650; color: var(--accent-bright); }
.strength-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-bottom: 0.9rem; }
.strength-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright));
  box-shadow: 0 0 10px 1px rgba(168, 85, 247, 0.5);
}
.pick-reasoning { color: var(--muted); margin: 0 0 0.6rem; }
.pick-books { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.5rem; }
.pick-link { display: inline-block; margin-top: 0.2rem; color: var(--accent-bright); font-size: 0.85rem; font-weight: 500; }

.pick-card-wrap { display: flex; flex-direction: column; }
.bet365-mark {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-top: 0.6rem; padding: 0.55rem 0.9rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.8rem; color: var(--muted);
}
.bet365-mark-btns { display: flex; gap: 0.4rem; }
.bet365-mark form { display: contents; }
.bet365-btn {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 0.28rem 0.85rem; font-size: 0.78rem; font-weight: 650;
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bet365-btn:hover { border-color: var(--border-hover); color: var(--text); }
.bet365-btn.bet365-yes.active { background: var(--win); border-color: var(--win); color: #06210f; }
.bet365-btn.bet365-no.active { background: var(--loss); border-color: var(--loss); color: #2a0009; }

/* --- Top status bar + match ticker --- */
.top-bar {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 0.55rem 1.5rem; font-size: 0.8rem; color: var(--muted);
  overflow-x: auto; margin: 0 0 1.5rem;
}
.top-bar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; white-space: nowrap; }
.top-bar-item:first-child { padding-left: 0; }
.top-bar-item:not(:first-child) { border-left: 1px solid var(--border); }
.top-bar-item strong { color: var(--text); font-weight: 600; }
.top-bar-item .num { color: var(--accent-bright); font-weight: 600; }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--win);
  box-shadow: 0 0 6px 1px rgba(52, 232, 138, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.ticker {
  overflow: hidden; border-bottom: 1px solid var(--border); background: var(--panel);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin: 0 0 1.5rem;
}
.ticker-track { display: flex; width: max-content; animation: scroll-ticker 90s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.ticker-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.4rem;
  font-size: 0.78rem; color: var(--muted-dim); white-space: nowrap; border-right: 1px solid var(--border);
}
.ticker-item .odds { color: var(--muted); font-weight: 600; }
@keyframes scroll-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- How it works --- */
.how-it-works { margin-bottom: 2.5rem; }
.how-it-works h2 { margin-top: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.step { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.step-icon {
  width: 1.8rem; height: 1.8rem; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid rgba(168, 85, 247, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright); font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.82rem;
  margin-bottom: 0.6rem;
}
.step h4 { font-size: 0.9rem; margin: 0 0 0.3rem; }
.step p { font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .pick-stats { flex-wrap: wrap; gap: 0.9rem; }
}
.pick-card:hover .pick-link { color: var(--cyan); }

/* --- Parlays --- */
.parlay-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transform: rotateX(5deg);
  transform-origin: 50% 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 34px 50px -30px rgba(168, 85, 247, 0.4),
    0 16px 26px -16px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), border-color 0.25s ease;
}
.parlay-card:hover {
  transform: rotateX(9deg) translateY(-5px);
  border-color: var(--border-hover);
}
.parlay-card h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.parlay-summary { font-weight: 600; margin: 0 0 0.5rem; }
.parlay-legs { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.2rem; }
.parlay-block { margin-top: 2.5rem; }
.parlay-block h3 { font-size: 1rem; }

/* --- Match list --- */
.all-matches h2 { margin-top: 0; }
.search-form { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 1.25rem; }
.search-form input { flex: 1; max-width: 320px; }
.league-group { margin-bottom: 1.25rem; }
.league-group h3 { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.match-list {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.match-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0.9rem; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.match-row:last-child { border-bottom: none; }
.match-row:hover { background: var(--panel-2); }
.match-time { color: var(--muted); font-size: 0.85rem; width: 3.4rem; flex-shrink: 0; }
.match-teams { flex: 1; font-size: 0.92rem; }
.match-odds { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* --- Match detail --- */
.status { color: var(--muted); font-size: 0.9rem; margin-top: 0; }
.odds-box, .final-stats, .analysis {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-top: 1rem;
}
.best-odds { font-size: 1.05rem; margin: 0 0 0.75rem; }

.bookmaker-table, .match-table, .stats-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bookmaker-table th, .bookmaker-table td, .stats-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; }
.bookmaker-table tr:last-child td, .stats-table tr:last-child td { border-bottom: none; }
.bookmaker-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.bookmaker-table tr.highlight { background: var(--cyan-soft); font-weight: 600; color: var(--cyan); }
.bookmaker-table tr.no-data td { color: var(--muted); font-style: italic; }
.stats-table td { text-align: center; }
.stats-table .stat-title { color: var(--muted); font-size: 0.85rem; }

/* H2H meetings — a card per meeting instead of a dense multi-column table,
   per explicit feedback that the table version looked cluttered. Stacks
   vertically and wraps naturally, so it never needs horizontal scroll at
   any viewport width, unlike the table it replaced. */
.h2h-list { display: flex; flex-direction: column; gap: 0.6rem; }
.h2h-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.h2h-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.h2h-card-date { color: var(--muted); font-size: 0.8rem; }
.h2h-card-score {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.05rem; color: var(--text);
}
.h2h-card-teams { font-weight: 600; margin: 0.2rem 0 0.6rem; }
.h2h-card-stats {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding-top: 0.6rem; border-top: 1px solid var(--border);
}
.h2h-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.h2h-stat-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.h2h-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 0.88rem; color: var(--text);
}
.h2h-stat-value .hint { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 0.68rem; }

/* Per-team half-by-half cards on the dedicated tab -- same visual language
   as the H2H cards, replacing a table that mixed real rows with fake
   colspan "header" rows to fake a per-team grouping. */
.half-card-list { display: flex; flex-direction: column; gap: 0.6rem; }
.half-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.half-card-team { font-weight: 600; margin-bottom: 0.6rem; }
.half-card-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.half-stat { display: flex; align-items: baseline; gap: 0.6rem; }
.half-stat-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; min-width: 3.5rem; }
.half-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 0.88rem; color: var(--text);
}
.half-stat-value .hint { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 0.68rem; }

.goal-list { display: flex; flex-direction: column; gap: 0.4rem; }
.goal-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; }
.goal-minute {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  color: var(--accent-bright); font-weight: 600; min-width: 2.4rem;
}
.goal-half {
  color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.goal-team { color: var(--muted); min-width: 8rem; }
.goal-player { font-weight: 600; }

.reasoning-list { padding-left: 1.2rem; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.92rem; }

/* Match-detail page tabs — plain radio inputs + labels, no JS (this app's
   CSP is script-src 'none' on purpose). Each label toggles its matching
   panel via the checked sibling selector, same technique already proven
   for the nav dropdown elsewhere in this file. */
.match-tabs { margin: 1.5rem 0; }
.match-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.match-tab-panel { display: none; }
#mtab-why:checked ~ #mpanel-why,
#mtab-h2h:checked ~ #mpanel-h2h,
#mtab-recent:checked ~ #mpanel-recent,
#mtab-half:checked ~ #mpanel-half { display: block; }

.match-tab-nav {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.match-tab-label {
  cursor: pointer; padding: 0.5rem 0.9rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
}
.match-tab-label:hover { color: var(--text); border-color: var(--border-hover); }
#mtab-why:checked ~ .match-tab-nav label[for="mtab-why"],
#mtab-h2h:checked ~ .match-tab-nav label[for="mtab-h2h"],
#mtab-recent:checked ~ .match-tab-nav label[for="mtab-recent"],
#mtab-half:checked ~ .match-tab-nav label[for="mtab-half"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.indicator-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.indicator { padding: 0.55rem 0.8rem; background: var(--panel-2); border-radius: 6px; font-size: 0.92rem; }
.indicator.no-data { color: var(--muted); font-style: italic; }

.team-columns { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.25rem; }
.team-col { flex: 1; min-width: 220px; }
.team-col ul, .team-col ol { padding-left: 1.1rem; margin: 0.4rem 0; }
.team-col h4 { font-size: 0.85rem; color: var(--muted); margin: 0.75rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.02em; }

footer { max-width: 780px; margin: 2rem auto 0; padding: 0 1.25rem; color: var(--muted); font-size: 0.78rem; }

.fab-mybets {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 40;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 0.85rem; font-weight: 700;
  padding: 0.75rem 1.1rem; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(168, 85, 247, 0.35);
}
.fab-mybets:hover { background: var(--accent-dim); }
@media (max-width: 520px) {
  .fab-mybets span, .fab-mybets { font-size: 0.8rem; }
  .fab-mybets { padding: 0.7rem 0.9rem; }
}

/* --- Results / track record page: always-black, forced regardless of light/dark preference --- */
.ledger-page {
  --r-bg: #0a0b0d; --r-panel: #131519; --r-border: #23262b;
  --r-text: #f2f3f5; --r-muted: #7d828c;
  --r-green: #2ee6a0; --r-red: #ff5c6c; --r-gold: #e8b64a;
  background: var(--r-bg); color: var(--r-text);
  margin: -1.5rem -1.25rem 0; padding: 1.75rem 1.25rem 2.5rem;
}
.ledger-page .back-link { color: var(--r-gold); }
.ledger-page h2 {
  color: var(--r-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: 2rem 0 0.9rem;
}
.ledger-page .no-data { color: var(--r-muted); font-style: italic; }
.ledger-page .hint { color: var(--r-muted); font-size: 0.8rem; margin-top: 2rem; }

.ledger-hero { display: flex; gap: 1rem; margin-top: 1.25rem; }
.hero-stat {
  flex: 1; background: var(--r-panel); border: 1px solid var(--r-border); border-radius: 12px;
  padding: 1.25rem 1rem; text-align: center;
}
.hero-number {
  display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--r-gold);
}
.hero-label { display: block; color: var(--r-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3rem; }

.result-list { display: flex; flex-direction: column; gap: 0.6rem; }
.result-row {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--r-panel); border: 1px solid var(--r-border); border-left: 3px solid var(--r-muted);
  border-radius: 8px; padding: 0.7rem 0.9rem;
}
.result-row.hit { border-left-color: var(--r-green); }
.result-row.miss { border-left-color: var(--r-red); }
.result-row.pending { border-left-color: var(--r-muted); }
.result-badge {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; background: rgba(255,255,255,0.06); color: var(--r-muted);
}
.result-row.hit .result-badge { color: var(--r-green); background: rgba(46, 230, 160, 0.12); }
.result-row.miss .result-badge { color: var(--r-red); background: rgba(255, 92, 108, 0.12); }
.result-info { flex: 1; min-width: 0; }
.result-teams { font-weight: 600; font-size: 0.95rem; }
.result-desc { color: var(--r-muted); font-size: 0.82rem; margin-top: 0.1rem; }
.result-score { font-weight: 700; color: var(--r-text); white-space: nowrap; }

.history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.history-table th, .history-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--r-border); text-align: left; }
.history-table th { color: var(--r-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.ledger-page .pos { color: var(--r-green); }
.ledger-page .neg { color: var(--r-red); }
.ledger-page .chart-box { background: var(--r-panel); border: 1px solid var(--r-border); border-radius: 10px; padding: 1rem; margin: 1rem 0 1.5rem; }
.hero-number.pos { color: var(--r-green); }
.hero-number.neg { color: var(--r-red); }

/* --- Mobile --- */
/* Wide tables would otherwise force the whole page to scroll sideways on a
   phone — this makes each table scroll horizontally on its own instead,
   without needing a wrapper element around every <table> in every template. */
.bet-table, .admin-table, .bookmaker-table, .match-table, .stats-table, .history-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

@media (max-width: 600px) {
  main, header.site-header, footer { padding-left: 0.9rem; padding-right: 0.9rem; }
  /* .ledger-page breaks out of main's padding with a matching negative
     margin (see its base rule) to go full-bleed black — has to be updated
     here too, or the negative margin (still -1.25rem) overshoots main's
     now-smaller 0.9rem padding and pushes the page into horizontal
     overflow. Confirmed via a real 375px-viewport Playwright check. */
  .ledger-page { margin: -1.5rem -0.9rem 0; padding-left: 0.9rem; padding-right: 0.9rem; }

  header.site-header { flex-wrap: wrap; gap: 0.5rem; }
  .nav-links { flex-wrap: wrap; gap: 0.6rem 0.9rem; }

  /* Three-tiles-in-a-row stat blocks are too cramped at phone width —
     stack them instead of shrinking the numbers illegibly small. */
  .stat-row, .ledger-hero { flex-direction: column; }

  .bet-form { flex-direction: column; align-items: stretch; }
  .bet-form input, .bet-form button { width: 100%; }
  .search-form { flex-wrap: wrap; }
  .search-form input { max-width: none; width: 100%; }

  .team-columns { gap: 1.25rem; }

  .pick-card { padding: 1rem 1rem 1rem 2.5rem; }

  h1 { font-size: 1.3rem; }
  .hero-number { font-size: 1.9rem; }
}