/* === SPOOTHUR THEME v2 — Bright & Sporty === */
:root {
  --bg: #3a3f55;
  --bg-2: #434960;
  --surface: #141825;
  --surface-2: #181c2c;
  --surface-3: #1c2132;
  --text: #e8eaf0;
  --text-2: #9ca3bf;
  --text-3: #6b7394;
  --border: rgba(180,190,220,.08);
  --border-strong: rgba(180,190,220,.14);
  --red: #E8364E;
  --red-bg: rgba(232,54,78,.12);
  --blue: #2563EB;
  --blue-bg: rgba(37,99,235,.12);
  --green: #0EA55E;
  --green-bg: rgba(14,165,94,.12);
  --yellow: #E8A817;
  --yellow-bg: rgba(232,168,23,.12);
  --orange: #E8651A;
  --orange-bg: rgba(232,101,26,.12);
  --gradient-brand: linear-gradient(135deg, #E8364E 0%, #2563EB 100%);
  --gradient-nba: linear-gradient(135deg, #E8651A 0%, #E8364E 100%);
  --gradient-nfl: linear-gradient(135deg, #2563EB 0%, #6366F1 100%);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.25);
  --radius: 14px;
  --radius-sm: 8px;
}

/* === BASE === */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  position: relative;
}

/* Court pattern background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(232,54,78,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% -20%, rgba(37,99,235,.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border: 2px solid rgba(232,54,78,.04);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* === NAV === */
.nav, .top {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}
.nav-logo .s1 { color: var(--red) !important; }
.nav-logo .s2 { color: var(--blue) !important; }
.nav-links a {
  color: var(--text-2) !important;
  font-weight: 600 !important;
}
.nav-links a:hover {
  color: var(--text) !important;
  background: var(--bg-2) !important;
}
.nav-links a.active {
  color: var(--red) !important;
  background: var(--red-bg) !important;
}

/* === BUTTONS === */
.btn {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn:hover {
  background: var(--bg-2) !important;
  color: var(--text) !important;
}
.btn-primary, .cta-nba {
  background: var(--gradient-nba) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(232,54,78,.25) !important;
}
.cta-nfl {
  background: var(--gradient-nfl) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.25) !important;
}
.btn-green {
  background: var(--green-bg) !important;
  color: var(--green) !important;
  border-color: rgba(14,165,94,.2) !important;
}
.btn-red {
  background: var(--red-bg) !important;
  color: var(--red) !important;
  border-color: rgba(232,54,78,.2) !important;
}
.btn-blue {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
  border-color: rgba(37,99,235,.2) !important;
}

/* === HERO === */
.hero, .hero-nba, .hero-nfl {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.hero h1 { color: var(--text) !important; }
.hero h1 .accent {
  background: var(--gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero p { color: var(--text-2) !important; }
.hero::before { display: none !important; }

.hero-nba { position: relative; overflow: hidden; }
.hero-nba::before {
  content: '🏀';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
  opacity: .08;
  pointer-events: none;
}
.hero-nfl::before {
  content: '🏈';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
  opacity: .08;
  pointer-events: none;
}

.hero-nba h1 { color: var(--text) !important; }
.hero-nba p { color: var(--text-2) !important; }
.hero-nfl h1 { color: var(--text) !important; }
.hero-nfl p { color: var(--text-2) !important; }

.season-tag {
  background: var(--green-bg) !important;
  border-color: rgba(14,165,94,.2) !important;
  color: var(--green) !important;
}

/* === STAT CARDS === */
.stat-box, .stat-card, .stat, .st, .kpi {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-box .num, .stat-card .num, .stat .n, .st .n, .kpi .num {
  color: var(--text) !important;
}
.stat-box .lbl, .stat-card .lbl, .stat .l, .st .l, .kpi .lbl {
  color: var(--text-3) !important;
}

/* === PICK CARDS === */
.pick-card, .pick, .preview-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.pick-card:hover, .pick:hover, .preview-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
.pick.selected {
  border-color: rgba(14,165,94,.3) !important;
  background: var(--green-bg) !important;
}
.pick.pub {
  border-left: 3px solid var(--green) !important;
}
.pick-player, .pick-info .name, .card-name, .pick-name {
  color: var(--text) !important;
}
.pick-label, .pick-info .lbl {
  color: var(--orange) !important;
}
.pick-game, .pick-info .team {
  color: var(--text-3) !important;
}
.pick-explanation {
  color: var(--text-2) !important;
  background: var(--surface-2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-style: normal !important;
}

/* Confidence badges */
.pick-conf .score, .pick-conf .sc, .conf-score {
  font-weight: 900 !important;
}
.pick-conf .score.high, .pick-conf .sc.h, .conf-score.high { color: var(--green) !important; }
.pick-conf .score.mid, .pick-conf .sc.m, .conf-score.mid { color: var(--yellow) !important; }
.pick-conf .score.low, .pick-conf .sc.l, .conf-score.low { color: var(--text-3) !important; }

/* Stats bar in pick */
.pick-stats {
  background: var(--surface-3) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px !important;
  border: none !important;
}
.pick-stat .val { color: var(--text) !important; font-weight: 700 !important; }
.pick-stat .lbl { color: var(--text-3) !important; }

/* Stake highlight */
.pick-stake, .stake-tag {
  background: var(--green-bg) !important;
  color: var(--green) !important;
  border-radius: var(--radius-sm) !important;
}

/* Category badges */
.cat-safe {
  background: var(--green-bg) !important;
  color: var(--green) !important;
  border-color: rgba(14,165,94,.2) !important;
}
.cat-value {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
  border-color: rgba(37,99,235,.2) !important;
}
.cat-risk {
  background: var(--yellow-bg) !important;
  color: var(--yellow) !important;
  border-color: rgba(232,168,23,.2) !important;
}

/* === PREVIEW CARDS (landing) === */
.preview-card {
  position: relative;
}
.blur-overlay {
  backdrop-filter: blur(4px) !important;
  background: rgba(20,24,40,.5) !important;
}
.blur-overlay span {
  background: var(--gradient-brand) !important;
  box-shadow: 0 4px 16px rgba(232,54,78,.2) !important;
}
.preview-tag.nba {
  background: var(--red-bg) !important;
  color: var(--red) !important;
}
.preview-tag.nfl {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
}

/* === FEATURES === */
.feature {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.feature:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}
.feature h3 { color: var(--text) !important; }
.feature p { color: var(--text-2) !important; }

/* === FOOTER === */
.footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-3) !important;
}
.footer a { color: var(--text-2) !important; }

/* === NFL PAGE === */
.offseason-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}
.offseason-card h2 { color: var(--text) !important; }
.offseason-card p { color: var(--text-2) !important; }
.offseason-card .date {
  background: var(--blue-bg) !important;
  border-color: rgba(37,99,235,.2) !important;
  color: var(--blue) !important;
}
.cd-box {
  background: var(--surface-3) !important;
}
.cd-box .num { color: var(--text) !important; }
.cd-box .unit { color: var(--text-3) !important; }
.preview-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.preview-item h4 { color: var(--text) !important; }
.preview-item p { color: var(--text-2) !important; }

/* === RESULTS PAGE === */
.results-table th {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border-bottom: 2px solid var(--border-strong) !important;
}
.results-table td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.results-table tr:hover td {
  background: var(--surface-2) !important;
}
.result-badge.won { background: var(--green-bg) !important; color: var(--green) !important; }
.result-badge.lost { background: var(--red-bg) !important; color: var(--red) !important; }
.result-badge.push { background: var(--yellow-bg) !important; color: var(--yellow) !important; }
.result-badge.pending { background: var(--surface-3) !important; color: var(--text-3) !important; }
.pnl.pos { color: var(--green) !important; }
.pnl.neg { color: var(--red) !important; }

/* Charts */
.chart-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.chart-card h3 { color: var(--text) !important; }
.bar-bg { background: var(--bg-2) !important; }
.bar-val { color: var(--text) !important; }
.bar-label { color: var(--text-2) !important; }

/* Streak dots */
.streak-dot.w { background: var(--green-bg) !important; color: var(--green) !important; border-color: rgba(14,165,94,.25) !important; }
.streak-dot.l { background: var(--red-bg) !important; color: var(--red) !important; border-color: rgba(232,54,78,.25) !important; }

/* === INPUTS === */
input, select, textarea {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* === FLOATING BALLS — brighter === */
.float-ball {
  opacity: .12 !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar-thumb {
  background: rgba(180,190,220,.15) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(180,190,220,.25) !important;
}

/* === NO PICKS STATE === */
.no-picks, .empty {
  color: var(--text-3) !important;
}

/* === DATE NAV === */
.date-nav {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}
.date-label { color: var(--text) !important; }

/* === ANALYSIS POINTS (moderator) === */
.ap { color: var(--text-2) !important; border-color: var(--border) !important; }
.pick-body { background: var(--surface-2) !important; border-radius: 0 0 var(--radius) var(--radius) !important; }

/* === MODERATOR SPECIFIC === */
.pick-foot {
  background: var(--surface-2) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
.bk-pill {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-3) !important;
}
.bk-pill.active {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: var(--green-bg) !important;
}

/* === STATUS BAR === */
.status.ok {
  background: var(--green-bg) !important;
  border-color: rgba(14,165,94,.2) !important;
  color: var(--green) !important;
}
.status.err {
  background: var(--red-bg) !important;
  border-color: rgba(232,54,78,.2) !important;
  color: var(--red) !important;
}