/* === SPOOTHUR THEME v3 — Cream Light & Cheerful === */
:root {
  --bg: #FBF6E8;
  --bg-2: #F4E8CC;
  --surface: #F8EFD0;
  --surface-2: #F1E4BC;
  --surface-3: #E8D6AA;
  --text: #1A1410;
  --text-2: #5C4F3E;
  --text-3: #8A7A65;
  --border: rgba(120,100,70,.18);
  --border-strong: rgba(120,100,70,.28);
  --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,.14);
  --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(120,100,70,.08);
  --shadow-md: 0 4px 16px rgba(120,100,70,.12);
  --shadow-lg: 0 8px 32px rgba(120,100,70,.18);
  --radius: 14px;
  --radius-sm: 8px;
}

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

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(232,54,78,.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% -20%, rgba(37,99,235,.10) 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,.08);
  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: .12;
  pointer-events: none;
}
.hero-nfl::before {
  content: '🏈';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
  opacity: .12;
  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;
}
.stat-box .formula { 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;
}

.pick-conf .score, .pick-conf .sc, .conf-score { font-weight: 900 !important; }
.pick-conf .score.high, .pick-conf .sc.h, .conf-score.high, .history-conf.h, .conf-badge.h { color: var(--green) !important; }
.pick-conf .score.mid, .pick-conf .sc.m, .conf-score.mid, .history-conf.m, .conf-badge.m { color: var(--yellow) !important; }
.pick-conf .score.low, .pick-conf .sc.l, .conf-score.low, .history-conf.l, .conf-badge.l { color: var(--text-3) !important; }
.pick-conf .conf-label, .pick-conf .of { color: var(--text-3) !important; }
/* Gold brilliant (≥ 9.5) — animated metallic shine */
.pick-conf .score.gold, .pick-conf .sc.g, .conf-score.gold, .history-conf.g, .conf-badge.g {
  background: linear-gradient(110deg,#8B6914 0%,#D4AF37 20%,#FFD700 40%,#FFF8DC 50%,#FFD700 60%,#D4AF37 80%,#8B6914 100%) !important;
  background-size: 220% 100% !important;
  animation: confGoldShine 3s linear infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 5px rgba(255,215,0,.45));
}
@keyframes confGoldShine {0%{background-position:0% 0}100%{background-position:220% 0}}

.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; }

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

.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(80,60,30,.30) !important;
}
.blur-overlay span {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(232,54,78,.25) !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; }
.footer-disclaimer p { color: var(--text-3) !important; }
.footer-contact .contact-label { color: var(--text-2) !important; }
.footer-contact .x-logo {
  background: linear-gradient(135deg, var(--red), var(--blue)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(232,54,78,.18) !important;
}
.footer-contact .x-logo:hover { box-shadow: 0 8px 22px rgba(232,54,78,.28) !important; transform: translateY(-2px); }

/* === 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, .result-badge.refund { 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; }

.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; border: 1px solid #B8B0A0 !important; }
.bar-val { color: var(--text) !important; }
.bar-label { color: var(--text-2) !important; }

.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; }
.streak-dot.p { background: var(--yellow-bg) !important; color: var(--yellow) !important; border-color: rgba(232,168,23,.25) !important; }

.kpi-info { background: var(--bg-2) !important; color: var(--text-3) !important; border-color: var(--border) !important; }
.kpi-info:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.kpi-info .tooltip { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text-2) !important; box-shadow: var(--shadow-lg) !important; }
.kpi-info .tooltip strong { color: var(--text) !important; }
.kpi-info .tooltip code { background: var(--bg-2) !important; color: var(--blue) !important; }

/* === INPUTS === */
input, select, textarea {
  background: var(--surface) !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;
}

.float-ball { opacity: .14 !important; }

::-webkit-scrollbar-thumb { background: rgba(120,100,70,.18) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,100,70,.30) !important; }

.no-picks, .empty { color: var(--text-3) !important; }

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

.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; }
.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; }

/* Login wall */
.login-wall { background: var(--bg) !important; }
.login-box { background: var(--surface) !important; box-shadow: var(--shadow-lg) !important; }
.login-box h2 .ball { background: none !important; }
.login-box p { color: var(--text-3) !important; }
.login-box input { background: var(--surface-2) !important; }

/* Status */
.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; }
.status-bar { background: var(--surface) !important; color: var(--text-2) !important; border-color: var(--border) !important; }
.status-bar.success { background: var(--green-bg) !important; color: var(--green) !important; border-color: rgba(14,165,94,.25) !important; }
.status-bar.error { background: var(--red-bg) !important; color: var(--red) !important; border-color: rgba(232,54,78,.25) !important; }

/* Sport tabs (moderator) */
.sport-tabs { background: linear-gradient(180deg, var(--bg-2), transparent) !important; border-bottom: 1px solid var(--border) !important; }
.sport-tab { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text-2) !important; }
.sport-tab:hover { background: var(--bg-2) !important; color: var(--text) !important; }
.sport-tab.active.nba { background: var(--orange-bg) !important; color: var(--orange) !important; border-color: rgba(232,101,26,.35) !important; }
.sport-tab.active.nfl { background: var(--blue-bg) !important; color: var(--blue) !important; border-color: rgba(37,99,235,.35) !important; }

/* Sport pills (resultats filter) */
.sport-pill { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text-3) !important; }
.sport-pill:hover { color: var(--text) !important; border-color: var(--border-strong) !important; }
.sport-pill.active[data-sport="nba"] { background: var(--orange-bg) !important; color: var(--orange) !important; border-color: rgba(232,101,26,.35) !important; }
.sport-pill.active[data-sport="nfl"] { background: var(--blue-bg) !important; color: var(--blue) !important; border-color: rgba(37,99,235,.35) !important; }

/* History tables (NBA / NFL pages) */
.history-table { background: var(--surface) !important; border-color: var(--border) !important; }
.history-table th { background: var(--surface-2) !important; color: var(--text-3) !important; border-color: var(--border) !important; }
.history-table td { color: var(--text) !important; border-color: var(--border) !important; }
.history-table tr:hover td { background: var(--surface-2) !important; }
.res-badge.won { background: var(--green-bg) !important; color: var(--green) !important; }
.res-badge.lost { background: var(--red-bg) !important; color: var(--red) !important; }
.res-badge.push, .res-badge.refund { background: var(--yellow-bg) !important; color: var(--yellow) !important; }
.res-badge.pending { background: var(--surface-3) !important; color: var(--text-3) !important; }
.history-title { color: var(--text) !important; }
.history-title .badge { background: var(--surface-3) !important; color: var(--text-3) !important; }
.history-empty { color: var(--text-3) !important; }

/* General text colors */
.section-title { color: var(--text) !important; }
.section-title .badge, .badge { background: var(--surface-3) !important; color: var(--text-3) !important; }
.subtitle { color: var(--text-2) !important; }
h1, h2, h3, h4 { color: var(--text); }