/* ============================================================
   SPORTS TRACKER — EnteRHlytics Design System
   ============================================================ */


/* ---- Design Tokens ---- */
:root {
  /* Navy palette */
  --navy-900: #0f2235;
  --navy-800: #162e47;
  --navy-700: #1c3d5c;
  --navy-600: #245070;
  --navy-500: #2d6489;
  --navy-400: #4a7fa0;
  --navy-300: #7aaabb;
  --navy-200: #b0cedb;
  --navy-100: #ddeaf0;
  --navy-50:  #f0f6f9;

  /* Green */
  --green-700: #1a6b3a;
  --green-600: #228248;
  --green-500: #2ea65c;
  --green-400: #4dbd76;

  /* Orange */
  --orange-700: #b85a10;
  --orange-600: #d46a18;
  --orange-500: #f07a28;
  --orange-400: #f59552;
  --orange-300: #f9bb89;

  /* Steel */
  --steel-700: #0f4e72;
  --steel-600: #166490;
  --steel-500: #1f7db0;
  --steel-400: #4398c2;

  /* Neutrals */
  --neutral-950: #0d1117;
  --neutral-900: #1a2130;
  --neutral-800: #2c3647;
  --neutral-700: #3d4e62;
  --neutral-600: #54677e;
  --neutral-500: #6e839a;
  --neutral-400: #94a8bc;
  --neutral-300: #baccda;
  --neutral-200: #d8e3ec;
  --neutral-100: #edf3f7;
  --neutral-50:  #f5f7f9;

  /* Semantic — Light (default) */
  --bg:             #f4f6f8;
  --surface:        #ffffff;
  --card:           #f5f7f9;
  --card-hover:     #edf3f7;
  --border:         #d8e3ec;
  --border-mid:     #baccda;
  --border-bright:  #94a8bc;

  --text:           #1c3d5c;
  --text-muted:     #3d4e62;
  --text-dim:       #6e839a;

  /* Sport colors */
  --nba:            #f07a28;
  --nba-dim:        rgba(240, 122, 40, 0.10);
  --nba-glow:       rgba(240, 122, 40, 0.25);

  --mlb:            #1f7db0;
  --mlb-dim:        rgba(31, 125, 176, 0.10);
  --mlb-glow:       rgba(31, 125, 176, 0.25);

  --dota:           #2d6489;
  --dota-dim:       rgba(45, 100, 137, 0.10);
  --dota-glow:      rgba(45, 100, 137, 0.25);

  --f1:             #dc2626;
  --f1-dim:         rgba(220, 38, 38, 0.10);
  --f1-glow:        rgba(220, 38, 38, 0.25);

  --cricket:        #2ea65c;
  --cricket-dim:    rgba(46, 166, 92, 0.10);
  --cricket-glow:   rgba(46, 166, 92, 0.25);

  --football:       #3b6fd4;
  --football-dim:   rgba(59, 111, 212, 0.10);
  --football-glow:  rgba(59, 111, 212, 0.25);

  --nfl:            #7c4dcc;
  --nfl-dim:        rgba(124, 77, 204, 0.10);

  --win:            #2ea65c;
  --win-dim:        rgba(46, 166, 92, 0.08);

  --accent:         #f07a28;
  --accent-dim:     rgba(240, 122, 40, 0.12);

  /* Typography */
  --font-display:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:      'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --nav-height:     68px;
  --max-width:      1200px;
  --radius:         8px;
  --radius-sm:      4px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-full:    9999px;
  --transition:     0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(28, 63, 92, 0.06);
  --shadow-sm:  0 2px 6px rgba(28, 63, 92, 0.08);
  --shadow-md:  0 4px 16px rgba(28, 63, 92, 0.10);
  --shadow-lg:  0 8px 32px rgba(28, 63, 92, 0.12);
  --shadow-xl:  0 16px 56px rgba(28, 63, 92, 0.16);
}

/* ---- Dark Mode Override ---- */
[data-theme="dark"] {
  --bg:             #0d1117;
  --surface:        #161b22;
  --card:           #1f2937;
  --card-hover:     #243040;
  --border:         #2c3647;
  --border-mid:     #3d4e62;
  --border-bright:  #54677e;

  --text:           #e2ecf4;
  --text-muted:     #94a8bc;
  --text-dim:       #54677e;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body > nav {
  background: #0f1923;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .nav-brand-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .nav-brand-pill .nav-brand-name {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .nav-brand-pill .nav-brand-sub {
  color: var(--orange-400);
}

/* ---- Theme Toggle ---- */
.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.theme-toggle svg { pointer-events: none; flex-shrink: 0; }

/* Light mode: show moon, hide sun */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .label-dark  { display: inline; }
.theme-toggle .label-light { display: none; }

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .label-dark  { display: none; }
[data-theme="dark"] .theme-toggle .label-light { display: inline; }

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

body {
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- Navigation ---- */
body > nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--navy-700);
  box-shadow: 0 2px 12px rgba(28, 63, 92, 0.22);
  display: flex;
  align-items: center;
}

.nav-inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
}

/* White pill brand */
.nav-brand {
  text-decoration: none;
  margin-right: 32px;
  flex-shrink: 0;
}

.nav-brand-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  padding: 6px 14px 6px 10px;
  transition: box-shadow var(--transition);
}

.nav-brand-pill:hover {
  box-shadow: var(--shadow-sm);
}

.nav-brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-brand-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.nav-brand-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--orange-500);
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Keep old .nav-logo for backward compat (not shown in new design) */
.nav-logo { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  gap: 2px;
}

.nav-links a {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: color var(--transition);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--orange-500);
  transform: scaleX(0);
  transition: transform var(--transition);
  border-radius: 1px;
}

.nav-links a:hover { color: rgba(255, 255, 255, 0.95); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: #ffffff; }
.nav-links a.active::after { transform: scaleX(1); }

/* ---- Main Content ---- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---- Page Header ---- */
.page-header { margin-bottom: 36px; }

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-500);
  margin-bottom: 8px;
  display: block;
}

.page-title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 12px;
  max-width: 520px;
  line-height: 1.65;
}

/* ---- Animate-in utility ---- */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- Stats Bar ---- */
.stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.stat-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-xs);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.stat-value.accent-nba     { color: var(--nba); }
.stat-value.accent-mlb     { color: var(--mlb); }
.stat-value.accent-dota    { color: var(--dota); }
.stat-value.accent-dota2   { color: var(--dota); }
.stat-value.accent-f1      { color: var(--f1); }
.stat-value.accent-win     { color: var(--win); }
.stat-value.accent-cricket { color: var(--cricket); }
.stat-value.accent-football { color: var(--football); }

/* ---- Table Controls ---- */
.table-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-chips { display: flex; gap: 6px; }

.chip {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  border-radius: var(--radius-full);
}

.chip:hover {
  border-color: var(--border-bright);
  color: var(--text);
  background: var(--card);
}

.chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--navy-700);
}

.chip[data-filter-sport="nba"].active {
  background: var(--nba-dim);
  border-color: var(--nba);
  color: var(--nba);
}

.chip[data-filter-sport="mlb"].active {
  background: var(--mlb-dim);
  border-color: var(--mlb);
  color: var(--mlb);
}

.chip[data-filter-sport="dota2"].active {
  background: var(--dota-dim);
  border-color: var(--dota);
  color: var(--dota);
}

.chip[data-filter-sport="cricket"].active {
  background: var(--cricket-dim);
  border-color: var(--cricket);
  color: var(--cricket);
}

.chip[data-filter-sport="football"].active {
  background: var(--football-dim);
  border-color: var(--football);
  color: var(--football);
}

/* ---- Search Input ---- */
.search-wrap {
  flex: 1;
  max-width: 260px;
  position: relative;
}

.search-wrap::before {
  content: '⌕';
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
}

#games-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px 8px 32px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

#games-search::placeholder { color: var(--text-dim); }
#games-search:focus {
  border-color: var(--navy-400);
  box-shadow: 0 0 0 3px rgba(28, 63, 92, 0.08);
}

.results-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
  letter-spacing: 0.04em;
}

/* ---- Data Table Wrapper ---- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: var(--navy-700);
  border-bottom: none;
}

thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

thead th[data-sort] {
  cursor: pointer;
  transition: color var(--transition);
}

thead th[data-sort]:hover { color: #ffffff; }
thead th[data-sort-active="true"] { color: var(--orange-300); }
thead th[data-sort-active="true"][data-sort-dir="asc"]::after  { content: ' ↑'; }
thead th[data-sort-active="true"][data-sort-dir="desc"]::after { content: ' ↓'; }

/* ---- Game Rows ---- */
.game-row {
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease, background var(--transition);
}

.game-row.visible {
  opacity: 1;
  transform: translateY(0);
}

.game-row:last-child { border-bottom: none; }
.game-row:hover { background: var(--card-hover); }

.game-row td {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}

.game-row.winner-home .td-home,
.game-row.winner-away .td-away {
  color: var(--win);
  font-weight: 600;
}

/* ---- Sport Tag ---- */
.sport-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  white-space: nowrap;
}

.sport-tag--nba {
  background: var(--nba-dim);
  color: var(--nba);
  border: 1px solid rgba(240, 122, 40, 0.28);
}

.sport-tag--mlb {
  background: var(--mlb-dim);
  color: var(--mlb);
  border: 1px solid rgba(31, 125, 176, 0.28);
}

.sport-tag--dota2 {
  background: var(--dota-dim);
  color: var(--dota);
  border: 1px solid rgba(45, 100, 137, 0.28);
}

.sport-tag--f1 {
  background: var(--f1-dim);
  color: var(--f1);
  border: 1px solid rgba(220, 38, 38, 0.28);
}

.sport-tag--cricket {
  background: var(--cricket-dim);
  color: var(--cricket);
  border: 1px solid rgba(46, 166, 92, 0.28);
}

.sport-tag--football {
  background: var(--football-dim);
  color: var(--football);
  border: 1px solid rgba(59, 111, 212, 0.28);
}

/* ---- Cell Styles ---- */
.td-sport { min-width: 88px; }
.td-date  { min-width: 120px; }

.date-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

.season-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  display: block;
  margin-top: 1px;
}

.td-score {
  text-align: center;
  min-width: 110px;
}

.score-display {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.td-home, .td-away {
  min-width: 140px;
  font-size: 13px;
}

.td-league {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Empty State ---- */
.empty-row td {
  padding: 60px 16px !important;
  text-align: center;
  border-left: none !important;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-icon {
  font-size: 36px;
  color: var(--text-dim);
}

/* ---- Section ---- */
.section { margin-bottom: 48px; }

.section-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* ---- Hero Table (Dota) ---- */
.hero-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  width: 28px;
}

.hero-name { font-size: 13px; font-weight: 500; }

.stat-num {
  font-family: var(--font-mono);
  font-size: 13px;
}

.win-rate-cell {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.win-rate-high { color: var(--win); }
.win-rate-mid  { color: var(--nba); }
.win-rate-low  { color: var(--f1); }

/* ---- Tournament List ---- */
.tournament-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tournament-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition);
}

.tournament-item:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-sm);
}

.tournament-name  { font-size: 13px; font-weight: 500; color: var(--text); }
.tournament-value { font-family: var(--font-mono); font-size: 12px; color: var(--dota); }

/* ---- Cricket Analytics ---- */
.cricket-accent { color: var(--cricket); }
.football-accent { color: var(--football); }

.table-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 16px 0 6px;
}

a.tournament-item {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

a.tournament-item:hover {
  border-color: var(--border-bright);
  background: var(--card);
}

/* ---- F1 Analytics ---- */
.driver-number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.trend-cell { min-width: 240px; }

.trend-start {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.trend-series {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--f1);
}

.radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-xs);
}

.radio-item-header {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.radio-driver {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.radio-team,
.radio-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.radio-player {
  width: 100%;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
}

.radio-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--f1);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radio-link-muted { color: var(--text-dim); }

/* ---- Analytics Meta ---- */
.analytics-meta {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.meta-item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.meta-item strong { color: var(--text); font-weight: 600; }

/* ---- Warning / Error Boxes ---- */
.warning-box {
  background: rgba(240, 122, 40, 0.06);
  border: 1px solid rgba(240, 122, 40, 0.3);
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 13px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.warning-box strong {
  color: var(--nba);
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.error-box {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 13px;
  border-radius: var(--radius);
}

.error-box strong {
  color: var(--f1);
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Chart Containers ---- */
.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* ---- Teams Grid ---- */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: all var(--transition);
  animation: slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: var(--shadow-xs);
}

.team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-bright);
}

.team-abbr {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy-500);
  line-height: 1;
  margin-bottom: 4px;
}

.team-abbr.sport-nba     { color: var(--nba); }
.team-abbr.sport-mlb     { color: var(--mlb); }
.team-abbr.sport-f1      { color: var(--f1); }
.team-abbr.sport-dota2   { color: var(--dota); }
.team-abbr.sport-cricket { color: var(--cricket); }
.team-abbr.sport-football { color: var(--football); }

.team-name  { font-size: 12px; color: var(--text); font-weight: 500; }

.team-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

a.team-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.team-card-link:hover .team-card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.team-card-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 10px;
  transition: color var(--transition);
}

a.team-card-link:hover .team-card-cta { color: var(--orange-500); }

.page-back { margin-bottom: 24px; }

.back-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-600);
  text-decoration: none;
  transition: color var(--transition);
}

.back-link:hover { color: var(--orange-500); }

/* ---- Favourites Section ---- */
.fav-section { margin-bottom: 40px; }

.fav-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 1px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
}

.fav-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fav-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.sport-label-nba     { color: var(--nba); }
.sport-label-mlb     { color: var(--mlb); }
.sport-label-f1      { color: var(--f1); }
.sport-label-dota2   { color: var(--dota); }
.sport-label-cricket { color: var(--cricket); }
.sport-label-football { color: var(--football); }

/* ---- Dashboard Analytics Section ---- */
.dash-section {
  margin: 52px 0 48px;
}

.dash-section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dash-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--orange-500);
  flex-shrink: 0;
}

.dash-section-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ---- Dashboard Panel ---- */
.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.dash-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* border-top accent — replaces the ::before left bar */
.dash-panel--f1   { border-top-color: var(--f1); }
.dash-panel--dota { border-top-color: var(--dota); }
.dash-panel--nba  { border-top-color: var(--nba); }

.dash-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dash-panel-head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dash-panel--f1   .dash-panel-eyebrow { color: var(--f1); }
.dash-panel--dota .dash-panel-eyebrow { color: var(--dota); }
.dash-panel--nba  .dash-panel-eyebrow { color: var(--nba); }

.dash-panel-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.dash-panel-arrow {
  font-size: 18px;
  color: var(--border-bright);
  transition: color var(--transition), transform var(--transition);
  margin-top: 2px;
}

.dash-panel:hover .dash-panel-arrow {
  color: var(--text-muted);
  transform: translateX(3px);
}

/* ---- Panel Body Content ---- */
.dash-session-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}

.dash-session-loc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.dash-session-year {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.dash-stat-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.dash-stat-cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-stat-val {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.dash-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dash-f1-color   { color: var(--f1); }
.dash-dota-color { color: var(--dota); }
.dash-nba-color  { color: var(--nba); }

.dash-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.dash-meta-row:first-child { border-top: 1px solid var(--border); }

.dash-meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.dash-meta-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.dash-table-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
  margin-bottom: 4px;
}

.dash-hero-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.dash-hero-row:last-child { border-bottom: none; }

.dash-hero-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-hero-picks {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dash-hero-wr {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

.dash-wr-high { color: var(--win); }
.dash-wr-mid  { color: var(--nba); }
.dash-wr-low  { color: var(--f1); }

.dash-unavail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.07em;
  padding: 20px 0;
  text-align: center;
}

/* ---- Skeleton Loader ---- */
@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skel-line,
.skel-stat,
.skel-hero-row {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s infinite linear;
  border-radius: var(--radius-sm);
}

.skel-line {
  height: 14px;
  width: 100%;
  margin-bottom: 10px;
}

.skel-line.skel-short { width: 60%; }

.skel-stat-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.skel-stat {
  height: 52px;
  flex: 1;
}

.skel-hero-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.skel-hero-row { height: 30px; width: 100%; }

/* ---- Responsive Dashboard ---- */
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid .dash-panel--nba { grid-column: span 2; }
}

@media (max-width: 540px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid .dash-panel--nba { grid-column: span 1; }
}

/* ---- Index Hero ---- */
.hero-section {
  background: var(--navy-50);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
  margin-bottom: 0;
}

[data-theme="dark"] .hero-section {
  background: var(--navy-900);
}

.hero-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin-bottom: 18px;
  display: block;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1.02;
  color: var(--navy-700);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

[data-theme="dark"] .hero-headline {
  color: var(--navy-100);
}

.hero-headline em {
  font-style: italic;
  color: var(--orange-500);
  -webkit-text-stroke: 0;
}

.hero-desc {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.65;
  margin-bottom: 32px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 28px;
  background: var(--orange-500);
  border-radius: var(--radius-full);
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(240, 122, 40, 0.35);
}

.hero-cta:hover {
  background: var(--orange-600);
  box-shadow: 0 6px 20px rgba(240, 122, 40, 0.45);
  transform: translateY(-1px);
  color: #ffffff;
}

.hero-cta-arrow { transition: transform var(--transition); }
.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }

/* ---- Sport Cards (index) ---- */
.sport-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
}

.sport-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: block;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: var(--shadow-sm);
  min-height: 0;
}

.sport-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.sport-card.nba  { border-top-color: var(--nba); }
.sport-card.mlb  { border-top-color: var(--mlb); }
.sport-card.dota { border-top-color: var(--dota); }
.sport-card.f1   { border-top-color: var(--f1); }

.sport-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.sport-card.nba .sport-card-eyebrow  { color: var(--nba); }
.sport-card.mlb .sport-card-eyebrow  { color: var(--mlb); }
.sport-card.dota .sport-card-eyebrow { color: var(--dota); }
.sport-card.f1 .sport-card-eyebrow   { color: var(--f1); }

.sport-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.sport-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---- Hero Media Mosaic ---- */
.hero-media {
  align-self: stretch;
  min-height: 320px;
  position: relative;
}

.hero-media-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-media-tile {
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.hero-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.82;
  transition: opacity 0.5s ease;
}

.hero-media-tile:hover img { opacity: 0.95; }

.hero-media-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-media-tile--nba::after    { background: linear-gradient(135deg, rgba(240,122,40,0.22) 0%, transparent 65%); }
.hero-media-tile--f1::after     { background: linear-gradient(225deg, rgba(220,38,38,0.22) 0%, transparent 65%); }
.hero-media-tile--cricket::after { background: linear-gradient(135deg, rgba(46,166,92,0.22) 0%, transparent 65%); }
.hero-media-tile--dota::after   { background: linear-gradient(225deg, rgba(45,100,137,0.22) 0%, transparent 65%); }

/* ---- Page Header — Sport Imagery (analytics pages) ---- */
.page-header {
  position: relative;
  overflow: hidden;
}

.page-header--nba::before,
.page-header--f1::before,
.page-header--dota::before,
.page-header--cricket::before,
.page-header--football::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, transparent 100%);
  pointer-events: none;
}

.page-header--nba::before {
  background-image: none;
}

.page-header--f1::before {
  background-image: none;
}

.page-header--dota::before {
  background-image: none;
}

.page-header--cricket::before {
  background-image: none;
}

.page-header--football::before {
  background-image: none;
}

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-headline  { font-size: 56px; }
  .hero-section   { grid-template-columns: 1fr 320px; gap: 32px; padding: 40px 36px; }
  .stat-cell      { flex: 1 1 30%; }
  .sport-cards    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero-section   { grid-template-columns: 1fr; gap: 28px; }
  .hero-media     { min-height: 220px; }
  .hero-media-tile { min-height: 104px; }
}

@media (max-width: 768px) {
  .hero-section   { padding: 32px 24px; }
  .hero-headline  { font-size: 48px; }
  .nav-brand      { margin-right: 16px; }
  .stats-bar      { flex-wrap: wrap; }
  .stat-cell      { flex: 1 1 40%; }
  .page-title     { font-size: 40px; }
  .radio-item-header { gap: 8px; }
  .trend-cell { min-width: 180px; }
  .page-header--nba::before,
  .page-header--f1::before,
  .page-header--dota::before,
  .page-header--cricket::before,
  .page-header--football::before { width: 35%; opacity: 0.07; }
}

@media (max-width: 480px) {
  .hero-headline  { font-size: 38px; }
  .sport-cards    { grid-template-columns: 1fr; }
  .stat-cell      { flex: 1 1 100%; }
  .page-title     { font-size: 32px; }
  .filter-chips   { flex-wrap: wrap; gap: 6px; }
  .chip           { min-height: 44px; padding: 8px 14px; }
  #games-search   { min-height: 44px; }
  .table-wrap     { overflow-x: auto; }
}

/* ============================================================
   Accounts, onboarding & forms
   ============================================================ */
.nav-account { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.nav-account a {
  white-space: nowrap;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.78);
  padding: 7px 12px; border-radius: var(--radius-full); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-account a:hover, .nav-account a.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav-account a.nav-cta { background: var(--accent); color: #fff; }
.nav-account a.nav-cta:hover { background: var(--orange-600); }

.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.flash {
  padding: 12px 16px; border-radius: var(--radius); font-size: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.flash-error { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.06); }
.flash-info { border-color: rgba(46, 166, 92, 0.35); background: var(--win-dim); }

.auth-card {
  max-width: 460px; margin: 24px auto; padding: 36px 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.auth-title { font-family: var(--font-display); font-size: 34px; line-height: 1.1; color: var(--text); margin-bottom: 10px; overflow-wrap: anywhere; }
.auth-sub { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.auth-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; color: var(--text-dim); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-fine { font-size: 12px; color: var(--text-dim); margin-top: 16px; }
.auth-fine a { color: var(--text-muted); }
.danger-zone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.danger-title { font-size: 15px; font-weight: 600; color: var(--f1); margin-bottom: 6px; }

.form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--radius);
  padding: 11px 14px; transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 11px 18px; border-radius: var(--radius); border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--orange-600); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-mid); }
.btn-ghost:hover { background: var(--card-hover); }
.btn-danger { background: transparent; color: var(--f1); border-color: rgba(220, 38, 38, 0.45); }
.btn-danger:hover { background: rgba(220, 38, 38, 0.08); }
.btn:focus-visible, .follow-card:focus-visible, .sport-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.following-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.following-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.following-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.following-chips form { margin: 0; }
.following-empty { font-size: 13px; color: var(--text-dim); }
.chip-followed { cursor: pointer; border-color: var(--accent); color: var(--text); }

.sport-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sport-tab {
  padding: 8px 16px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; border: 1px solid var(--border);
  background: var(--surface);
}
.sport-tab.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.onboarding-search { margin-bottom: 28px; max-width: 420px; }

.follow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.follow-grid form { margin: 0; }
.follow-card {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition);
}
.follow-card:hover { border-color: var(--border-bright); background: var(--card-hover); }
.follow-card.is-followed { border-color: var(--accent); background: var(--accent-dim); }
.follow-logo { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.follow-logo-fallback {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--card); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.follow-name { flex: 1; font-size: 14px; font-weight: 500; line-height: 1.3; }
.follow-action { font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.follow-card.is-followed .follow-action { color: var(--text-muted); }

@media (max-width: 640px) {
  .auth-card { padding: 28px 20px; }
  .nav-account { margin-left: 0; }
}

/* ============================================================
   Feed, fixtures, teams (Phase 1)
   ============================================================ */
.sport-tag--nfl { background: var(--nfl-dim); color: var(--nfl); border: 1px solid rgba(124, 77, 204, 0.28); }
.sport-accent-football { --sport: var(--football); }
.sport-accent-nfl { --sport: var(--nfl); }
.sport-accent-nba { --sport: var(--nba); }
.sport-accent-f1 { --sport: var(--f1); }

.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.section-link:hover { text-decoration: underline; }

.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--card); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-live { background: rgba(220, 38, 38, 0.1); color: var(--f1); border-color: rgba(220, 38, 38, 0.35); }
.badge-muted { color: var(--text-dim); }

.team-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.team-link:hover { text-decoration: underline; }
.team-logo { width: 22px; height: 22px; object-fit: contain; }

/* Win probability */
.prob { margin: 12px 0 4px; }
.prob-bar { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; background: var(--card); gap: 2px; }
.prob-seg { display: block; height: 100%; }
.prob-home { background: var(--accent); }
.prob-draw { background: var(--border-bright); }
.prob-away { background: var(--navy-400); }
.prob-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.prob-labels strong { color: var(--text); font-family: var(--font-mono); }
.prob-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.prob-note a { color: var(--text-muted); }

/* Form */
.form-pills { display: inline-flex; gap: 3px; vertical-align: middle; }
.form-pill {
  width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #fff;
}
.form-W { background: var(--green-600); }
.form-D { background: var(--neutral-600); }
.form-L { background: #b91c1c; }

/* AI copy */
.ai-block {
  margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--border);
}
.ai-label {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.ai-headline { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--text); margin-bottom: 8px; }
.ai-block p { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin-top: 8px; }

/* Fixture rows */
.fx-list { display: flex; flex-direction: column; gap: 6px; }
.fx-row {
  display: grid; grid-template-columns: 96px 180px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--transition), background var(--transition);
}
.fx-row:hover { border-color: var(--border-bright); background: var(--card-hover); }
.fx-row-live { border-color: rgba(220, 38, 38, 0.35); }
.fx-when { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
.fx-teams { font-size: 14px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.fx-hl { font-weight: 700; }
.fx-vs { color: var(--text-dim); font-size: 12px; }
.fx-score { font-family: var(--font-mono); font-weight: 700; padding: 0 4px; }
.fx-meta { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fx-fav { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.fx-list-compact .fx-row { grid-template-columns: 1fr; gap: 4px; }
.fx-list-compact .sport-tag, .fx-list-compact .fx-meta { display: none; }

/* Landing */
.hero-demo { display: flex; align-items: center; justify-content: center; }
.demo-card {
  position: relative; width: 100%; max-width: 340px; padding: 20px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.demo-tag {
  position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.demo-teams { font-size: 18px; font-weight: 700; margin: 12px 0; color: var(--text); }
.demo-copy { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin-top: 14px; }
.demo-copy strong { color: var(--text); display: block; margin-bottom: 4px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.how-card {
  display: block; padding: 20px; border-radius: var(--radius-lg); text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
}
a.how-card:hover { border-color: var(--border-bright); }
.how-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.how-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.how-num {
  display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; margin-bottom: 10px;
  border-radius: 50%; background: var(--accent-dim); color: var(--accent);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}

/* Feed */
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 40px; }
.feed-card {
  padding: 18px 20px; border-radius: var(--radius-xl); background: var(--surface);
  border: 1px solid var(--border); border-top: 3px solid var(--sport, var(--accent)); box-shadow: var(--shadow-sm);
}
.feed-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.feed-logo { width: 40px; height: 40px; object-fit: contain; }
.feed-card-title { flex: 1; min-width: 0; }
.feed-card-title h2 { font-size: 19px; font-weight: 700; margin-top: 4px; }
.feed-card-title h2 a { color: var(--text); text-decoration: none; }
.feed-card-title h2 a:hover { text-decoration: underline; }
.feed-block { padding-top: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
.feed-block-head { display: flex; align-items: center; gap: 8px; }
.feed-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-600); font-weight: 600;
}
.feed-when { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.feed-match { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; }
.feed-match:hover { text-decoration: underline; }
.feed-empty { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* Fixture page */
.match-head { margin-bottom: 24px; }
.match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 10px; }
.match-side { display: flex; flex-direction: column; gap: 4px; font-size: 22px; }
.match-side-away { align-items: flex-end; text-align: right; }
.match-role {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.match-center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.match-score { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; color: var(--text); }
.match-score span { color: var(--text-dim); padding: 0 6px; }
.match-vs { font-family: var(--font-display); font-size: 28px; color: var(--text-dim); }
.match-when { margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.match-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.match-main > .ai-block:first-child { margin-top: 0; }
.panel {
  padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--border); margin-bottom: 16px;
}
.panel-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.form-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; margin: 6px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.data-table thead th { color: rgba(255, 255, 255, 0.88); }  /* readable on the navy header row */

/* Team page */
.team-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.team-head-logo { width: 72px; height: 72px; object-fit: contain; }
.team-head > div:nth-child(2) { flex: 1; min-width: 220px; }
.team-head-meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.team-rating { font-family: var(--font-mono); font-size: 12px; }
.team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team-cols .fx-row { grid-template-columns: 180px 1fr auto; }
.team-cols .fx-row .sport-tag { display: none; }

.results-controls { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

footer .footer-text a { color: var(--text-muted); }
footer .footer-text:first-child { max-width: 640px; line-height: 1.6; }

@media (max-width: 900px) {
  .match-grid, .team-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fx-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .fx-row .sport-tag { display: none; }
  .fx-when { grid-column: 1 / -1; order: -1; }
  .team-cols .fx-row { grid-template-columns: 1fr auto; }
  .feed { grid-template-columns: 1fr; }
  .match-side { font-size: 17px; }
  .match-score { font-size: 36px; }
  footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Legal pages */
.legal { max-width: 720px; }
.legal-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.legal-updated { font-size: 12px; color: var(--text-muted); margin: 8px 0 24px; font-family: var(--font-mono); }
.legal h2 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; color: var(--text); }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal a { color: var(--accent); }
.legal-contact { margin-top: 32px; }

/* Compact header on small screens: logo only, scrollable links, icon-only theme toggle */
@media (max-width: 760px) {
  .nav-inner { padding: 0 12px; gap: 6px; }
  .nav-brand { margin-right: 4px; }
  .nav-brand-text { display: none; }
  .nav-links { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 0 9px; }
  .theme-toggle .label-dark, .theme-toggle .label-light { display: none; }
  .nav-account { margin-left: 0; gap: 2px; }
  .nav-account a { padding: 7px 9px; }
}
.page-subtitle a { color: var(--accent); }

/* Plans and Pro */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 820px; }
.plan-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.plan-card-pro { border: 2px solid var(--accent); }
.plan-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.plan-price { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; color: var(--text); }
.plan-price span { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.plan-alt { font-size: 13px; color: var(--text-muted); }
.plan-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; flex: 1; }
.plan-list li { font-size: 14px; line-height: 1.5; color: var(--text); padding-left: 22px; position: relative; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--win); font-weight: 700; }
.plan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-fine { max-width: 820px; margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.plan-fine a { color: var(--text-muted); }
.plan-status { margin: 20px 0 8px; padding: 16px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); }
.plan-status h2 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.plan-status p { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin-bottom: 12px; }
.pro-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full); background: var(--accent-dim); color: var(--orange-600);
}
.upsell { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.upsell a { color: var(--orange-600); font-weight: 600; }
.ai-teaser { position: relative; }
.teaser-lines { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; filter: blur(2px); }
.teaser-lines span { display: block; height: 10px; border-radius: var(--radius-full); background: var(--border); }
.teaser-lines span:nth-child(2) { width: 92%; }
.teaser-lines span:nth-child(3) { width: 96%; }
.teaser-lines span:nth-child(4) { width: 58%; }
.breakdown-table th[scope="row"] { font-weight: 500; color: var(--text-muted); font-size: 13px; }
.breakdown-table td { font-family: var(--font-mono); }
.breakdown-note { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin-top: 12px; }

/* Key players (Pro): each side's leaders over its last few games */
.kp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.kp-team { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.kp-scroll { overflow-x: auto; }
.kp-table { font-size: 13px; }
.kp-table th[scope="row"] { font-weight: 500; }
.kp-table td { font-family: var(--font-mono); }
.kp-role { display: block; font-size: 11px; font-weight: 400; color: var(--text-dim); text-transform: capitalize; }
.kp-trend { font-family: var(--font-body); }
.kp-up { color: var(--win); }
.kp-down { color: var(--orange-600); }

/* Ads (free tier). Space is reserved up front so a late ad doesn't shift the page. */
.ad-slot { margin: 24px 0; min-height: 280px; display: flex; flex-direction: column; gap: 6px; }
.ad-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.ad-label a { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.ad-slot ins.adsbygoogle { min-height: 250px; border-radius: var(--radius); background: var(--card); }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Affiliate links */
.affiliate-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.affiliate-list a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 600; transition: border-color var(--transition);
}
.affiliate-list a:hover { border-color: var(--border-bright); }
.affiliate-cat { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.affiliate-note { font-size: 11px; color: var(--text-dim); margin-top: 10px; }

/* Track record */
:root { --chart-series: #d46a18; }
[data-theme="dark"] { --chart-series: #e0701f; }  /* validated against the dark surface separately */
.tr-table th[scope="row"] { font-weight: 600; }
.tr-table td { font-family: var(--font-mono); font-size: 13px; }
.tr-subtitle { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.tr-lead { margin: 0 0 12px; }
.tr-good { color: var(--win); font-family: var(--font-body); font-weight: 600; }
.tr-bad { color: var(--text-muted); font-family: var(--font-body); }
.tr-hash { font-size: 11px; overflow-wrap: anywhere; color: var(--text-muted); }
.tr-digests td:nth-child(3) { max-width: 360px; }
.tr-chart { max-width: 460px; margin: 0; }
.cal-svg { width: 100%; height: auto; display: block; }
.cal-grid { stroke: var(--border); stroke-width: 1; }
.cal-tick, .cal-axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body); }
.cal-diagonal { stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cal-line { fill: none; stroke: var(--chart-series); stroke-width: 2; stroke-linejoin: round; }
.cal-dot { fill: var(--chart-series); stroke: var(--surface); stroke-width: 2; }
.cal-hit { fill: transparent; }
.cal-point { cursor: default; outline: none; }
.cal-point:hover .cal-dot, .cal-point:focus-visible .cal-dot { stroke: var(--text); }
.tr-details { margin-top: 12px; font-size: 13px; }
.tr-details summary { cursor: pointer; color: var(--text-muted); margin-bottom: 8px; }
.digest-toggle { align-items: center; margin-bottom: 12px; }

/* Share buttons */
.share-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; }
.share-image-link { font-size: 12px; color: var(--text-muted); }
.share-status { font-size: 12px; color: var(--win); }
.share-preview { width: 100%; height: auto; border-radius: 10px; margin: 12px 0; border: 1px solid var(--border); }
.match-head .share-box { justify-content: center; }

/* Beat the AI pick'em */
.pick-panel .upsell { margin-bottom: 10px; }
.pick-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-btn {
  min-width: 88px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-mid); background: var(--surface); color: var(--text);
  font: 600 13px var(--font-body); transition: border-color var(--transition), background var(--transition);
}
.pick-btn:hover { border-color: var(--orange-500); }
.pick-btn.is-picked { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
.picks-summary { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-bottom: 18px; }
.picks-summary > .btn { align-self: center; }
.picks-stat { flex: 1 1 220px; margin: 0; }
.picks-stat p { margin: 4px 0 0; }
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.pick-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.pick-row-done { border-color: var(--border-mid); }
.pick-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pick-title { font-weight: 700; color: var(--text); text-decoration: none; }
.pick-meta { font-size: 12px; color: var(--text-muted); }
.picks-ai-line { margin: 0 0 12px; }
.league-table tr.is-me td { background: var(--card-hover); font-weight: 700; }
.league-table td { vertical-align: middle; }

/* Team hub */
.trend { margin: 0; }
.trend-svg { width: 100%; max-width: 360px; height: auto; display: block; }
.trend-line { fill: none; stroke: var(--chart-series); stroke-width: 2; stroke-linejoin: round; }
.trend-dot { fill: var(--chart-series); }
.recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.recap-list a { color: var(--text); text-decoration: none; font-size: 14px; }
.recap-list a:hover { text-decoration: underline; }
.recap-score { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.page-eyebrow a, .match-when a, .fav-section-title a { color: inherit; }

/* Account: display name, referrals; onboarding digest opt-in */
.inline-form { flex-direction: row; align-items: center; gap: 8px; }
.inline-form .input { flex: 1; }
.referral-link { font-size: 13px; overflow-wrap: anywhere; }
.digest-optin { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.digest-optin-label { flex: 1 1 320px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.digest-optin-label input { margin-top: 3px; }

/* Admin metrics */
.metrics-table td { font-family: var(--font-mono); font-size: 13px; text-align: right; }


/* StatLocus public beta: readable, fast, and accessible without remote assets. */
:root {
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  --bg: #f6f7f9;
  --text: #172b3a;
  --text-muted: #465765;
  --text-dim: #596b78;
  --accent: #29634d;
  --accent-dim: #e6f0eb;
  --nba: #a75214;
  --cricket: #227343;
  --win: #227343;
}
[data-theme="dark"] {
  --bg: #101820;
  --surface: #19252f;
  --card: #20313e;
  --text: #edf3f7;
  --text-muted: #b5c5d1;
  --text-dim: #a5b7c4;
  --accent: #7fc9aa;
  --accent-dim: #243d34;
  --nba: #f5a565;
  --f1: #ff8f8f;
  --cricket: #76cb94;
  --win: #76cb94;
  --mlb: #76bbe1;
  --dota: #9eacfa;
  --football: #91b4ff;
}
html { scroll-padding-top: 120px; }
body { font-size: 16px; }
a { color: var(--accent); }
button, input, select { font: inherit; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 1000; padding: 12px 20px; background: var(--surface); color: var(--text); transform: translateY(-160%); border: 2px solid var(--accent); }
.skip-link:focus { transform: translateY(0); }
.site-nav, [data-theme="dark"] .site-nav { height: auto; min-height: 74px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; }
.site-nav .nav-inner { gap: 32px; min-height: 74px; }
.site-nav .nav-brand { display: inline-flex; gap: 10px; align-items: center; color: var(--text); font-size: 22px; font-weight: 750; letter-spacing: -.7px; margin-right: auto; }
.beta-badge { color: var(--text-dim); font-size: 10px; font-weight: 600; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; letter-spacing: .5px; text-transform: uppercase; }
.site-nav .nav-links { height: 74px; gap: 2px; }
.site-nav .nav-links > a { color: var(--text-muted); height: 44px; border-radius: 6px; padding: 0 14px; font-size: 14px; }
.site-nav .nav-links > a.active { color: var(--accent); background: var(--accent-dim); }
.site-nav .nav-links a::after { display: none; }
.site-nav .nav-links a:hover { color: var(--accent); }
.site-nav .theme-toggle { color: var(--text-muted); border-color: var(--border); margin-left: 0; min-height: 40px; background: transparent; padding: 8px 12px; font-size: 12px; }
.site-nav .theme-toggle:hover { background: var(--card); color: var(--text); }
.sports-menu { position: relative; color: var(--text-muted); font-size: 14px; }
.sports-menu summary { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; border-radius: 6px; }
.sports-menu summary::-webkit-details-marker { display: none; }
.sports-menu[open] summary, .sports-menu summary:hover { background: var(--card); color: var(--text); }
.sports-menu-links { position: absolute; right: 0; top: 51px; min-width: 230px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lg); }
.site-nav .sports-menu-links a { height: auto; min-height: 44px; padding: 10px 12px; color: var(--text-muted); font-size: 14px; }
.site-nav .sports-menu-links a:hover { background: var(--card); border-radius: 4px; }
main { padding-top: 36px; padding-bottom: 56px; }
main:focus { outline: none; }
.page-header { margin-bottom: 26px; }
.page-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: -1.4px; }
.page-eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .12em; font-weight: 600; }
.page-subtitle { max-width: 740px; font-size: 16px; }
.page-header::before { display: none; }
.stat-value { font-size: 30px; letter-spacing: -1px; line-height: 1.15; }
.stat-label { font-size: 10px; letter-spacing: .07em; }
.stat-cell { min-width: 135px; padding: 16px 18px; }
.section-title { font-size: 23px; letter-spacing: -.5px; line-height: 1.3; }
.section-header { flex-wrap: wrap; gap: 6px 18px; }
.section-count { letter-spacing: 0; }
.chip { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 15px; font-size: 13px; }
.chip.active, .chip[data-filter-sport].active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }
.filter-chips { flex-wrap: wrap; }
.table-controls { gap: 16px; }
.search-wrap { max-width: none; flex: 1 1 260px; }
#games-search { min-height: 44px; font: 14px var(--font-body); }
.table-help { font-size: 13px; color: var(--text-dim); margin: 12px 0; }
.table-help a { text-underline-offset: 3px; }
thead th { font-size: 11px; letter-spacing: .04em; color: #edf3f7; }
td { font-size: 14px; }
.empty-state { gap: 12px; max-width: 600px; margin: auto; }
.empty-state strong { color: var(--text); }
.info-note { padding: 14px 18px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
.warning-box, .error-box { border-left: 1px solid var(--border); border: 1px solid var(--border); border-radius: 8px; padding: 20px; font-size: 15px; line-height: 1.7; }
.error-box strong, .warning-box strong { font-family: var(--font-body); }
.error-box a, .warning-box a { text-underline-offset: 3px; }
.empty-state .empty-icon { display: none; }
.fav-section-title { font-family: var(--font-body); }
.landing-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; padding: 40px 0 54px; align-items: center; }
.landing-intro h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -2.8px; color: var(--text); margin: 18px 0 22px; }
.landing-intro > p { max-width: 540px; line-height: 1.75; font-size: 17px; }
.landing-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 20px; min-height: 48px; font-size: 14px; font-weight: 650; border-radius: 6px; text-decoration: none; border: 1px solid var(--accent); }
.button-primary { background: var(--accent); color: var(--surface); }
.button-primary:hover { filter: brightness(1.1); }
.button-secondary { color: var(--text); border-color: var(--border-mid); background: var(--surface); }
.button-secondary:hover { background: var(--card); }
.landing-intro > .landing-note { color: var(--text-dim); font-size: 12px; margin-top: 18px; }
.start-panel { background: var(--surface); padding: 28px; border: 1px solid var(--border); border-radius: 10px; }
.start-panel h2 { color: var(--text); font-size: 25px; letter-spacing: -.7px; margin: 8px 0 24px; }
.start-panel > a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; color: var(--text); padding: 18px 0; border-top: 1px solid var(--border); font-size: 14px; text-decoration: none; }
.start-panel > a:hover { color: var(--accent); }
.question-sport { font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--text-dim); }
.start-panel > p { color: var(--text-dim); font-size: 12px; margin-top: 12px; }
.explore-section { scroll-margin-top: 110px; margin-top: 20px; }
.landing-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.landing-section-heading h2, .data-note h2 { color: var(--text); font-size: 28px; letter-spacing: -.8px; line-height: 1.2; }
.landing-section-heading p { font-size: 13px; color: var(--text-dim); margin-bottom: 3px; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.explore-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; text-decoration: none; color: var(--text-muted); transition: border-color .2s, background .2s; }
.explore-card:hover { border-color: var(--border-bright); background: var(--card); }
.explore-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.sport-kicker { font-size: 11px; font-weight: 650; }
.explore-card h3 { font-size: 25px; letter-spacing: -.6px; color: var(--text); margin-bottom: 8px; }
.explore-card p { font-size: 14px; line-height: 1.65; min-height: 70px; }
.explore-card-link { display: block; font-weight: 650; font-size: 12px; color: var(--text); margin-top: 20px; }
[data-sport="nba"] .sport-kicker { color: var(--nba); }
[data-sport="dota2"] .sport-kicker { color: var(--dota); }
[data-sport="f1"] .sport-kicker { color: var(--f1); }
[data-sport="mlb"] .sport-kicker { color: var(--mlb); }
[data-sport="cricket"] .sport-kicker { color: var(--cricket); }
[data-sport="football"] .sport-kicker { color: var(--football); }
.data-note { margin-top: 54px; border-top: 1px solid var(--border); padding-top: 32px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.data-note p { font-size: 14px; line-height: 1.8; }
.text-link { display: inline-block; text-decoration: none; font-size: 13px; font-weight: 650; margin-top: 12px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer { padding-top: 28px; padding-bottom: 32px; gap: 28px; align-items: flex-start; font-size: 12px; }
.footer-brand { color: var(--text); text-decoration: none; font-size: 19px; font-weight: 750; }
.site-footer p { color: var(--text-muted); margin-top: 8px; }
.site-footer .footer-note { color: var(--text-dim); font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 2px; }
.footer-links a { color: var(--text-muted); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.content-page, .prose { max-width: 800px; margin-inline: auto; }
.content-page h2, .prose h2 { font-size: 24px; color: var(--text); margin: 28px 0 10px; }
.content-page p, .prose p { margin: 12px 0; line-height: 1.8; }
.content-page ul, .content-page ol, .prose ul, .prose ol { padding-left: 24px; }
.content-page li, .prose li { margin: 8px 0; }
.metric-guide { margin: 18px 0 26px; border: 1px solid var(--border); background: var(--surface); padding: 16px 20px; border-radius: 8px; font-size: 14px; }
.metric-guide summary { cursor: pointer; color: var(--text); font-weight: 600; min-height: 28px; }
.metric-guide dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin-top: 16px; }
.metric-guide dt { font-weight: 650; color: var(--text); }
.metric-guide dd { margin: 0; }
@media (max-width: 980px) {
  .site-nav .nav-inner { gap: 12px; }
  .site-nav .nav-links > a { padding-inline: 10px; }
  .landing-hero { gap: 32px; }
  .start-panel { padding: 24px; }
  .landing-intro h1 { font-size: 46px; letter-spacing: -2px; }
  .explore-card { padding: 20px; }
}
@media (max-width: 760px) {
  .site-nav .nav-inner { flex-wrap: wrap; justify-content: space-between; gap: 0; padding-top: 12px; }
  .site-nav .nav-brand { font-size: 21px; }
  .site-nav .theme-toggle { order: 1; font-size: 11px; }
  .site-nav .nav-links { order: 2; width: 100%; height: 58px; justify-content: space-between; }
  .site-nav .nav-links > a, .sports-menu summary { font-size: 13px; padding-inline: 12px; }
  .sports-menu-links { top: 48px; }
  main { padding: 26px 20px 40px; }
  .landing-hero { grid-template-columns: 1fr; padding: 12px 0 28px; gap: 30px; }
  .landing-intro h1 { font-size: clamp(40px, 8vw, 54px); }
  .landing-intro > p { font-size: 16px; }
  .start-panel h2 { margin-bottom: 16px; }
  .landing-section-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .landing-section-heading h2, .data-note h2 { font-size: 26px; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-card p { min-height: 90px; }
  .data-note { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
  .site-footer { flex-direction: column; gap: 18px; padding-inline: 20px; }
  .footer-links { gap: 20px; }
  .stats-bar { gap: 8px; }
  .stat-cell { flex: 1 1 42%; min-width: 125px; }
  .section { margin-bottom: 32px; }
  .tournament-item { flex-wrap: wrap; gap: 8px; }
  .table-controls { gap: 10px; }
  .results-count { font-size: 12px; }
}
@media (max-width: 430px) {
  .site-nav .nav-inner { padding-inline: 16px; }
  .site-nav .nav-links > a, .sports-menu summary { padding-inline: 9px; font-size: 12px; }
  .landing-actions { gap: 10px; }
  .button-primary, .button-secondary { padding-inline: 15px; font-size: 13px; gap: 12px; }
  .explore-grid { grid-template-columns: 1fr; gap: 12px; }
  .explore-card p { min-height: 0; }
  .explore-card h3 { font-size: 24px; }
  .explore-card-top { margin-bottom: 12px; }
  .explore-card-link { margin-top: 14px; }
  .metric-guide dl { grid-template-columns: 1fr; gap: 3px; }
  .metric-guide dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .game-row { opacity: 1; transform: none; }
}
.public-content h1 { font-size: clamp(30px, 4vw, 44px); color: var(--text); letter-spacing: -1.2px; line-height: 1.2; margin-bottom: 24px; }
.public-content h2 { font-size: 23px; color: var(--text); letter-spacing: -.5px; margin: 30px 0 10px; }
.public-content p { margin: 14px 0; }
.public-content ul, .public-content ol { padding-left: 24px; }
.public-content li { margin: 8px 0; }
.public-content a { text-underline-offset: 3px; }
.public-content .hero-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }

@media (max-width: 760px) {
  .theme-toggle { flex-shrink: 0; min-width: 36px; min-height: 36px; padding: 6px; }
  .theme-toggle::before { content: "\263e"; font-size: 18px; }
  [data-theme="dark"] .theme-toggle::before { content: "\2600"; }
}