/* ============================================================
   TRADING APP — game cards, picks, sidebars, sport pages,
                 hub, performance, landing, golf
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   SPORT PAGE CHROME
────────────────────────────────────────────────────────────── */
.sport-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.sport-page-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.sport-source-line {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

/* Record bar */
.record-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: var(--space-sm) var(--space-md);
}

.record-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.record-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  min-width: 80px;
}

.record-divider {
  border: none;
  border-top: 1px solid var(--border);
}

.record-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.record-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.record-stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
}

/* Date nav */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.date-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.04em;
}

/* Explainer bar */
.explainer-bar {
  border: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.explainer-toggle {
  width: 100%;
  background: var(--bg-secondary);
  border: none;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition);
}

.explainer-toggle:hover { color: var(--text-primary); }

.explainer-content {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.explainer-section { margin-bottom: var(--space-md); }
.explainer-section:last-child { margin-bottom: 0; }

.explainer-section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.conf-rows { display: flex; flex-direction: column; gap: var(--space-xs); }

.conf-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.explainer-note {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

/* Games grid */
.games-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-xl);
}

@media (min-width: 600px)  { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .games-grid { grid-template-columns: repeat(3, 1fr); } }

/* ──────────────────────────────────────────────────────────────
   MATCHUP CARD
────────────────────────────────────────────────────────────── */
.matchup-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.matchup-card:hover {
  background: #1f1f1f;
}

/* Confidence left border */
.matchup-card.conf-extreme,
.matchup-card.conf-high {
  border-left-color: var(--semantic-high);
}

.matchup-card.conf-medium {
  border-left-color: var(--semantic-medium);
}

.matchup-card.conf-low {
  border-left-color: var(--semantic-low);
}

/* Status bar */
.card-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-wrap: wrap;
}

/* Team matchup section */
.team-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  gap: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
}

.team-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

@media (min-width: 1025px) {
  .team-logo-img { width: 56px; height: 56px; }
}

.team-side .team-abbr {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-score-display {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  min-width: 40px;
  text-align: center;
}

.score-winner { color: var(--semantic-high); }

.matchup-sep {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
  padding: 0 var(--space-sm);
}

/* Picks row — 4 columns */
.picks-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.pick-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-sm) var(--space-xs);
  border-right: 1px solid var(--border);
  gap: 3px;
  text-align: center;
  min-height: 70px;
}

.pick-cell:last-child { border-right: none; }

.pick-cell-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pick-cell-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
}

.pick-cell-odds {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.pick-na { color: var(--text-tertiary); }

.pick-over  { color: var(--semantic-high); }
.pick-under { color: var(--semantic-low); }

/* Card actions / pick selector */
.card-actions {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.pick-selector {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.pick-selector-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.pick-selector-btns {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.pick-type-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pick-type-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

.pick-type-btn.selected {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.pick-selector-actions {
  display: flex;
  gap: var(--space-xs);
}

/* B2B tag */
.b2b-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--semantic-medium);
  padding: 1px 5px;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Result display */
.result-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
}

.result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.result-score {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Injury section */
.injury-section {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.injury-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.injury-item {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
}

.injury-away { border-left: 2px solid var(--semantic-medium); }
.injury-home { border-left: 2px solid var(--text-secondary); }

.injury-status {
  color: var(--semantic-low);
  font-size: 9px;
}

/* Adjustments (collapsible) */
.adj-wrap {
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.adj-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition);
}

.adj-toggle:hover { color: var(--text-secondary); }

.adj-body {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}

.adj-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border-bottom: 1px solid rgba(42, 42, 42, 0.5);
}

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

.adj-label { color: var(--text-tertiary); }
.adj-pos   { color: var(--semantic-high); }
.adj-neg   { color: var(--semantic-low); }

/* How predictions work */
.how-it-works {
  margin-top: var(--space-xl);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.how-it-works-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 600px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .how-steps { grid-template-columns: repeat(4, 1fr); }
}

.how-step {
  padding: var(--space-md);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.how-step:last-child { border-right: none; }

.how-step-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--bg-tertiary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.how-step-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.how-step-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   NBA SIDEBAR
────────────────────────────────────────────────────────────── */
.game-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.game-sidebar {
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  width: 400px;
  max-width: 95vw;
  height: 100vh;
  overflow-y: auto;
  position: relative;
}

.sidebar-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), border-color var(--transition);
}

.sidebar-close:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* ──────────────────────────────────────────────────────────────
   MLB PITCHER ROW
────────────────────────────────────────────────────────────── */
.pitcher-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

.pitcher-name { color: var(--text-primary); font-weight: 600; }
.pitcher-era-good { color: var(--semantic-high); }
.pitcher-era-bad  { color: var(--semantic-low); }
.pitcher-era-avg  { color: var(--text-secondary); }
.pitcher-sep { color: var(--text-tertiary); font-size: 9px; letter-spacing: 0.08em; }

.park-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

.park-hitter { color: var(--semantic-medium); border: 1px solid rgba(234, 179, 8, 0.3); }
.park-pitcher { color: var(--semantic-high); border: 1px solid rgba(34, 197, 94, 0.3); }

.hr-hint {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  text-align: center;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
   MLB SIDEBAR
────────────────────────────────────────────────────────────── */
#mlb-game-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 95vw;
  z-index: 400;
  overflow-y: auto;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
}

#mlb-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 399;
}

/* ──────────────────────────────────────────────────────────────
   HUB PAGE
────────────────────────────────────────────────────────────── */
.hub-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}

@media (min-width: 900px) {
  .hub-layout {
    grid-template-columns: 260px 1fr;
  }
}

.hub-sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  padding: var(--space-md);
  overflow-y: auto;
  height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
}

@media (max-width: 899px) {
  .hub-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

.hub-main {
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
}

@media (min-width: 1025px) {
  .hub-main { padding: var(--space-lg); }
}

.sidebar-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.hub-greeting {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.hub-section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

/* Quick stats */
.quick-stats-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.quick-stat-pill {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  white-space: nowrap;
}

.quick-stat-pill strong {
  color: var(--text-primary);
}

/* Pick tracker items */
.pick-date-separator {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-sm) 0 var(--space-xs);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xs);
}

.pick-tracker-item {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--space-xs);
  background: var(--bg-secondary);
  transition: background var(--transition);
  cursor: pointer;
}

.pick-tracker-item:hover {
  background: var(--bg-tertiary);
}

.pick-tracker-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 3px;
}

.pick-matchup {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.pick-status-icon {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-tertiary);
}

.pick-delete-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-base);
  padding: 0;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}

.pick-delete-btn:hover { color: var(--semantic-low); }

.pick-details {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.pick-live-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--semantic-low);
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* Live now section */
.live-now-section {
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border);
}

.live-sport-section {
  border-top: 1px solid var(--border);
}

.live-sport-section:first-child { border-top: none; }

.live-sport-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.live-games-scroll {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: var(--space-md);
  scrollbar-width: thin;
}

.live-game-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--semantic-low);
  padding: var(--space-sm) var(--space-md);
  min-width: 120px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition);
  text-align: center;
}

.live-game-card:hover { background: var(--bg-tertiary); }

.live-score-display {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.live-game-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--semantic-low);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Bet slip cards */
.bet-slip-section {
  margin-bottom: var(--space-lg);
}

.bet-slip-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  position: relative;
  overflow: hidden;
}

.bet-slip-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.bet-slip-sport {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--border);
}

.bet-slip-sport.nba  { color: var(--semantic-medium); border-color: rgba(234, 179, 8, 0.3); }
.bet-slip-sport.mlb  { color: var(--semantic-high); border-color: rgba(34, 197, 94, 0.3); }
.bet-slip-sport.golf { color: var(--text-secondary); }

.bet-slip-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

.bet-slip-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bet-slip-pick {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.bet-slip-line {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.bet-slip-watermark {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.06;
  text-transform: uppercase;
  pointer-events: none;
  color: var(--text-primary);
}

.bet-slip-watermark.win  { opacity: 0.15; color: var(--semantic-high); }
.bet-slip-watermark.loss { opacity: 0.15; color: var(--semantic-low); }

/* Sport tiles */
.sport-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.sport-tile-hub {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: var(--space-md);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: background var(--transition), border-color var(--transition);
}

.sport-tile-hub:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
}

.sport-tile-hub.nba  { border-top: 3px solid var(--semantic-medium); }
.sport-tile-hub.mlb  { border-top: 3px solid var(--semantic-high); }
.sport-tile-hub.golf { border-top: 3px solid var(--text-secondary); }
.sport-tile-hub.locked { border-top-color: var(--border); opacity: 0.6; }

.sport-tile-hub-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sport-tile-hub-action {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* Model comparison */
.model-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

@media (max-width: 480px) {
  .model-comparison { grid-template-columns: 1fr; }
}

.comparison-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 0;
}

.comparison-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}

.comparison-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.comparison-stat:last-child { border-bottom: none; }

.comparison-stat strong { color: var(--text-primary); }

.comparison-stat small { color: var(--text-tertiary); }

/* Model filter tabs */
.model-filter-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

/* Coming soon */
.coming-soon-tiles {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.coming-soon-tile {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.cs-badge {
  font-size: 9px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ──────────────────────────────────────────────────────────────
   GOLF PAGE
────────────────────────────────────────────────────────────── */
.golf-banner {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.golf-tournament-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.golf-tournament-meta {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.golf-meta-item {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.golf-status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
}

.golf-status-live     { color: var(--semantic-low); border: 1px solid var(--semantic-low); }
.golf-status-upcoming { color: var(--semantic-medium); border: 1px solid rgba(234, 179, 8, 0.4); }
.golf-status-completed{ color: var(--text-tertiary); border: 1px solid var(--border); }

/* Golf record */
.golf-record-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  margin-bottom: var(--space-lg);
}

.golf-record-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.golf-record-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.golf-record-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
}

/* Golf section header */
.golf-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
}

.golf-section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.golf-section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Golf winner card */
.golf-winner-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--semantic-high);
  padding: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.golf-winner-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--semantic-high);
  margin-bottom: var(--space-sm);
}

.golf-winner-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.golf-winner-odds {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

/* Golf top 10 grid */
.golf-top10-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

@media (min-width: 600px) {
  .golf-top10-grid { grid-template-columns: repeat(2, 1fr); }
}

.golf-top10-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

.golf-top10-card:hover { background: var(--bg-tertiary); }

.golf-rank-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-tertiary);
  min-width: 20px;
  text-align: right;
}

.golf-player-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.golf-top10-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Golf matchup grid */
.golf-matchup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

@media (min-width: 600px) {
  .golf-matchup-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .golf-matchup-grid { grid-template-columns: repeat(3, 1fr); }
}

.golf-matchup-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  overflow: hidden;
}

.golf-matchup-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  gap: var(--space-sm);
}

.golf-matchup-player {
  flex: 1;
}

.golf-matchup-player-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.golf-pick-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--semantic-high);
  color: var(--semantic-high);
}

.golf-matchup-vs {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  padding: 0 var(--space-xs);
  flex-shrink: 0;
}

.golf-matchup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}

.golf-matchup-odds {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.golf-score-diff {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* Golf factors */
.golf-factors-wrap {
  background: var(--bg-primary);
}

.golf-factors-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition);
}

.golf-factors-toggle:hover { color: var(--text-secondary); }

.golf-factors-body {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}

.golf-factor-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border-bottom: 1px solid rgba(42, 42, 42, 0.5);
}

.golf-factor-row:last-child { border-bottom: none; }
.golf-factor-label { color: var(--text-tertiary); }
.golf-factor-val   { color: var(--text-primary); }

/* Golf empty / pending states */
.golf-error-card {
  border: 1px solid var(--border);
  padding: var(--space-xl);
  text-align: center;
  background: var(--bg-secondary);
}

.golf-error-icon  { font-size: 2rem; margin-bottom: var(--space-md); }
.golf-error-title { font-family: var(--font-mono); font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); }
.golf-error-msg   { font-size: var(--font-size-sm); color: var(--text-secondary); }

.golf-field-pending {
  border: 1px solid var(--border);
  padding: var(--space-xl);
  text-align: center;
  background: var(--bg-secondary);
}

.golf-field-pending-icon  { font-size: 2rem; margin-bottom: var(--space-md); }
.golf-field-pending-title { font-family: var(--font-mono); font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.golf-field-pending-sub   { font-size: var(--font-size-sm); color: var(--text-secondary); max-width: 400px; margin: 0 auto var(--space-md); }

.golf-notify-form {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.golf-notify-form input {
  max-width: 220px;
}

.golf-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  border: 1px solid var(--border);
}

/* golf actions */
.golf-actions { display: flex; gap: var(--space-xs); }
.golf-save-btn { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; }

/* ──────────────────────────────────────────────────────────────
   PERFORMANCE PAGE
────────────────────────────────────────────────────────────── */
.perf-page {
  padding: var(--space-lg) var(--space-md);
}

.perf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.perf-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.perf-sub {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.performance-nav-bar {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.perf-nav-btn {
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}

.perf-nav-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.perf-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.perf-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-md); }

.perf-overall-card {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.perf-overall-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.perf-overall-record {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.perf-dash { color: var(--text-tertiary); }

.perf-overall-pct {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.perf-overall-bar-wrap { flex: 1; min-width: 200px; }

.perf-bar {
  display: flex;
  height: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.perf-bar-win  { background: var(--semantic-high); transition: width 0.5s ease; }
.perf-bar-loss { background: var(--semantic-low); transition: width 0.5s ease; }

.perf-bar-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.perf-bar-win-label  { color: var(--semantic-high); }
.perf-bar-loss-label { color: var(--semantic-low); }

.perf-sports-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 600px) {
  .perf-sports-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .perf-sports-grid { grid-template-columns: repeat(3, 1fr); }
}

.perf-sport-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  overflow: hidden;
}

.perf-sport-nba  { border-top: 3px solid var(--semantic-medium); }
.perf-sport-mlb  { border-top: 3px solid var(--semantic-high); }
.perf-sport-golf { border-top: 3px solid var(--text-secondary); }

.perf-sport-header {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.perf-stat-table th { background: var(--bg-primary); }

.perf-positive { color: var(--semantic-high); }
.perf-negative { color: var(--semantic-low); }

.perf-section { margin-bottom: var(--space-lg); }

.perf-section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.perf-conf-table-wrap {
  border: 1px solid var(--border);
  overflow: hidden;
}

.conf-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.conf-extreme, .conf-high   { background: rgba(34, 197, 94, 0.15); color: var(--semantic-high); border: 1px solid rgba(34, 197, 94, 0.3); }
.conf-medium                { background: rgba(234, 179, 8, 0.15); color: var(--semantic-medium); border: 1px solid rgba(234, 179, 8, 0.3); }
.conf-low                   { background: rgba(239, 68, 68, 0.15); color: var(--semantic-low); border: 1px solid rgba(239, 68, 68, 0.3); }

.perf-timeline {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.perf-pick-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
}

.perf-pick-row:last-child { border-bottom: none; }
.perf-pick-row:hover { background: var(--bg-tertiary); }

.perf-pick-date    { font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; }
.perf-pick-sport   { white-space: nowrap; }
.perf-pick-matchup { font-family: var(--font-mono); color: var(--text-secondary); flex: 1; }
.perf-pick-pick    { font-family: var(--font-mono); color: var(--text-primary); }

.perf-pick-result  { font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: 700; }
.perf-result-win   { color: var(--semantic-high); }
.perf-result-loss  { color: var(--semantic-low); }
.perf-result-pending { color: var(--text-tertiary); }

/* ──────────────────────────────────────────────────────────────
   LANDING PAGE
────────────────────────────────────────────────────────────── */
.hero-section {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.hero-headline {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.hero-sub {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.section {
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.section-alt {
  background: var(--bg-secondary);
}

.section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.stat-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 600px) { .stat-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.stat-card-lg {
  text-align: center;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: var(--space-lg);
}

.stat-sport-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.stat-record {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-winpct {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--semantic-high);
}

.stat-winpct-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: var(--space-xs);
}

.cards-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 600px) { .cards-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px){ .cards-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.cards-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 600px) { .cards-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px){ .cards-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.sport-card-emoji {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.sport-card-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.sport-card-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.coming-soon-sports-row {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.coming-soon-sport-chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.chip-badge {
  font-size: 9px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Pick preview / featured picks */
.pick-preview-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-md);
}

.pick-sport-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.pick-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.pick-blur-wrap {
  position: relative;
  margin-bottom: var(--space-sm);
}

.pick-score-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
}

.pick-team, .pick-line {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.pick-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  backdrop-filter: blur(4px);
}

.pick-lock {
  font-size: 1.5rem;
}

/* How it works */
.how-step {
  padding: var(--space-lg);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.how-step-number {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--bg-tertiary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.how-step-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}

.how-step-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Pricing preview */
.plan-preview-card {
  padding: var(--space-lg);
  text-align: center;
}

.plan-preview-emoji {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.plan-preview-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}

.plan-preview-price {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.plan-preview-period {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-bottom: var(--space-xs);
}

.plan-preview-annual {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-bottom: var(--space-md);
}

.plan-preview-featured {
  border-color: var(--text-secondary);
}

.plan-preview-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--semantic-high);
  margin-bottom: var(--space-sm);
}

/* ════════════════════════════════════════════════════════════
   BANKROLL TRACKER
   ════════════════════════════════════════════════════════════ */
.bankroll-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-md);
}
.bankroll-title { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: 0.04em; }
.bankroll-sub   { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-xs); }

.bankroll-actions-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.bankroll-settings-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.bankroll-form-title { font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.08em; margin-bottom: var(--space-md); color: var(--text-tertiary); }
.bankroll-form-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
.bankroll-field      { display: flex; flex-direction: column; gap: var(--space-xs); }
.bankroll-field label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.bankroll-field input,
.bankroll-field select,
.bankroll-field textarea {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: var(--space-sm) var(--space-md);
  outline: none;
  width: 100%;
}
.bankroll-field input:focus,
.bankroll-field select:focus,
.bankroll-field textarea:focus { border-color: var(--text-secondary); }
.bankroll-field-wide { grid-column: 1 / -1; }
.bankroll-form-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.bankroll-form-msg { font-size: var(--font-size-xs); font-family: var(--font-mono); margin-top: var(--space-sm); }
.bankroll-form-ok  { color: var(--semantic-high); }
.bankroll-form-err { color: var(--semantic-low); }

.bankroll-modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
}
.bankroll-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: var(--space-xl);
  min-width: 320px;
  max-width: 480px;
  width: 90%;
}

.bankroll-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
@media (min-width: 640px) {
  .bankroll-stats-row { grid-template-columns: repeat(4, 1fr); }
}
.bankroll-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: var(--space-md);
}
.bankroll-stat-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-xs); }
.bankroll-stat-value { font-family: var(--font-mono); font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.1; }
.bankroll-stat-sub   { font-size: var(--font-size-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: var(--space-xs); }
.bankroll-pos { color: var(--semantic-high); }
.bankroll-neg { color: var(--semantic-low); }

.bankroll-add-section { margin-bottom: var(--space-xl); }
.bankroll-add-toggle  { margin-bottom: var(--space-md); }
.bankroll-add-form    { background: var(--bg-secondary); border: 1px solid var(--border); padding: var(--space-lg); }

.bankroll-history-section { margin-bottom: var(--space-xl); }
.bankroll-section-title   { font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--space-md); }
.bankroll-table-wrap      { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bankroll-empty { text-align: center; padding: var(--space-xl); color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); }

.bankroll-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--font-size-sm); }
.bankroll-table th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border); white-space: nowrap; }
.bankroll-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; }
.bankroll-table tr:hover td { background: var(--bg-secondary); }
.bankroll-table .number-font { font-family: var(--font-mono); }

.bet-sport-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; text-transform: uppercase; }
.sport-badge-nba  { color: var(--semantic-medium); }
.sport-badge-mlb  { color: var(--semantic-high); }
.sport-badge-golf { color: var(--text-secondary); }
.bet-result-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; text-transform: uppercase; }
.bet-result-win     { color: var(--semantic-high); }
.bet-result-loss    { color: var(--semantic-low); }
.bet-result-push    { color: var(--semantic-neutral); }
.bet-result-pending { color: var(--text-tertiary); }
.btn-micro { font-size: 10px; padding: 2px 8px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; }
.btn-micro:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.bankroll-balance-section { margin-bottom: var(--space-xl); }
.bankroll-balance-display { display: flex; align-items: center; gap: var(--space-md); font-family: var(--font-mono); margin-bottom: var(--space-md); }
.bankroll-balance-arrow   { color: var(--text-tertiary); }
.bankroll-balance-timeline { border: 1px solid var(--border); }
.bankroll-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
.bankroll-balance-row:last-child { border-bottom: none; }
.bankroll-chart-note { font-size: var(--font-size-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: var(--space-sm); }

/* ════════════════════════════════════════════════════════════
   BET SLIP / TICKET
   ════════════════════════════════════════════════════════════ */
.slip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-md);
}
.slip-title { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: 0.04em; }
.slip-date  { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-xs); }
.slip-print-btn { }

.slip-empty {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.slip-empty-icon { font-size: 40px; margin-bottom: var(--space-md); opacity: 0.3; }
.slip-empty-links { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }

.slip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.ticket-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-bottom: 1px dashed var(--border);
}
.ticket-brand { font-weight: 700; font-size: var(--font-size-xs); letter-spacing: 0.08em; }
.ticket-brand sup { font-size: 8px; color: var(--semantic-high); }
.ticket-sport-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border: 1px solid var(--border); }
.ticket-sport-nba  { border-color: rgba(234,179,8,0.3); color: var(--semantic-medium); }
.ticket-sport-mlb  { border-color: rgba(34,197,94,0.3); color: var(--semantic-high); }
.ticket-sport-golf { border-color: var(--border); color: var(--text-secondary); }
.ticket-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }

.ticket-perforation {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 6px, transparent 6px, transparent 12px);
}

.ticket-body {
  padding: var(--space-lg) var(--space-md);
}
.ticket-matchup   { font-weight: 700; font-size: var(--font-size-base); margin-bottom: var(--space-xs); letter-spacing: 0.02em; }
.ticket-bet-type  { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: var(--space-sm); }
.ticket-pick      { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--space-xs); }
.ticket-odds      { font-family: var(--font-mono); font-size: var(--font-size-lg); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.ticket-conf      { }

.ticket-stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ticket-stub-date    { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--text-tertiary); }
.ticket-disclaimer   { font-size: 9px; color: var(--text-tertiary); font-family: var(--font-mono); }
.ticket-result-watermark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticket-win     { color: var(--semantic-high); }
.ticket-loss    { color: var(--semantic-low); }
.ticket-pending { color: var(--text-tertiary); }

.slip-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xl);
}
.slip-footer-sep    { color: var(--text-tertiary); }
.slip-footer-win    { color: var(--semantic-high); }
.slip-footer-loss   { color: var(--semantic-low); }
.slip-footer-pending{ color: var(--text-tertiary); }

/* ════════════════════════════════════════════════════════════
   PRICING PAGE
   ════════════════════════════════════════════════════════════ */
.plan-card-name { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: 0.04em; margin-bottom: var(--space-sm); }
.plan-price     { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: 700; }
.toggle-label   { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════════
   LANDING PAGE SECTIONS
   ════════════════════════════════════════════════════════════ */
.landing-section { padding: var(--space-2xl) 0; }
.landing-section-alt { background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-section-header { text-align: center; margin-bottom: var(--space-xl); }
.landing-section-label  { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); margin-bottom: var(--space-sm); }
.landing-section-title  { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.stat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 640px) { .stat-grid-3 { grid-template-columns: 1fr; } }
.stat-card { background: var(--bg-tertiary); border: 1px solid var(--border); padding: var(--space-lg); text-align: center; }
.stat-sport-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); margin-bottom: var(--space-sm); }
.stat-record  { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: 700; letter-spacing: -0.02em; }
.stat-winpct  { font-family: var(--font-mono); font-size: var(--font-size-xl); color: var(--semantic-high); margin-top: var(--space-xs); }
.stat-winpct-label { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: var(--space-xs); }

.sport-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
@media (max-width: 768px) { .sport-preview-grid { grid-template-columns: 1fr; } }
.sport-preview-card { background: var(--bg-tertiary); border: 1px solid var(--border); padding: var(--space-lg); }
.sport-preview-abbr { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-tertiary); margin-bottom: var(--space-sm); }
.sport-preview-name { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.sport-preview-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-lg); }

.coming-soon-row   { text-align: center; margin-top: var(--space-lg); }
.coming-soon-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); margin-bottom: var(--space-sm); }
.coming-soon-chips { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.coming-soon-chip  { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border); color: var(--text-tertiary); font-family: var(--font-mono); }

.pick-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 768px) { .pick-preview-grid { grid-template-columns: 1fr; } }
.pick-preview-card    { background: var(--bg-tertiary); border: 1px solid var(--border); padding: var(--space-lg); }
.pick-preview-sport   { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); margin-bottom: var(--space-sm); }
.pick-preview-matchup { font-weight: 700; margin-bottom: var(--space-md); }
.pick-blur-wrap       { position: relative; overflow: hidden; }
.pick-blur-line       { padding: var(--space-sm) 0; font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--text-secondary); filter: blur(4px); }
.pick-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-sm);
  background: rgba(13,13,13,0.6);
  backdrop-filter: blur(1px);
}
.pick-lock-icon { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); font-family: var(--font-mono); }

.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
@media (max-width: 768px) { .how-grid { grid-template-columns: 1fr; } }
.how-step { }
.how-step-number { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-tertiary); margin-bottom: var(--space-sm); }
.how-step-title  { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.how-step-desc   { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; }

.pricing-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .pricing-preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pricing-preview-grid { grid-template-columns: 1fr; } }