/* ═══════════════════════════════════════════════════════════════════
   OddsOS — LuxeFlow 2026 Premium Layer
   Glassmorphism 2.0 + Soft Gradients + Depth System
   Drop-in override: import AFTER styles.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* Refined dark palette with depth */
  --bg:       #07090d;
  --bg-mesh:  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(30,58,138,0.18) 0%, transparent 70%),
              radial-gradient(ellipse 60% 50% at 80% 90%, rgba(76,29,149,0.10) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 10% 80%, rgba(6,78,59,0.08) 0%, transparent 50%);
  --surface:  rgba(15,18,25,0.65);
  --surface2: rgba(22,27,38,0.55);
  --border:   rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --glass-blur: 14px;
  --glass-border: 1px solid rgba(255,255,255,0.07);
  --glass-glow: inset 0 1px 0 0 rgba(255,255,255,0.05);

  /* Accent gradient system */
  --green:      #a3e635;
  --green-dark:  #84cc16;
  --green-glow:  rgba(163,230,53,0.10);
  --accent-grad: linear-gradient(135deg, #a3e635 0%, #34d399 100%);
  --gold:        #fbbf24;
  --gold-grad:   linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --purple:      #a78bfa;
  --purple-grad: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
  --red:         #f87171;

  /* Refined text */
  --text:    #eef2f0;
  --muted:   #94a3b8;

  /* Elevation shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
  --shadow-glow-green: 0 0 20px rgba(163,230,53,0.08);
  --shadow-glow-gold:  0 0 20px rgba(251,191,36,0.08);
  --shadow-glow-purple:0 0 20px rgba(167,139,250,0.08);
}


/* ── 2. BODY — GRADIENT CANVAS ──────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-mesh);
  pointer-events: none;
}


/* ── 3. HEADER — FROSTED GLASS ──────────────────────────────────── */
header {
  background: rgba(7,9,13,0.75);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: var(--glass-border);
  box-shadow: var(--glass-glow), 0 1px 12px rgba(0,0,0,0.3);
}

.logo em { color: var(--green); }


.roi-chip {
  background: linear-gradient(135deg, rgba(163,230,53,0.12), rgba(52,211,153,0.08));
  border: 1px solid rgba(163,230,53,0.18);
  color: var(--green);
}


/* ── 4. TICKER — GLASS BAR ──────────────────────────────────────── */
.ticker {
  background: rgba(10,14,20,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--glass-border);
}

.ticker-game {
  border-right: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.ticker-game:hover {
  background: rgba(255,255,255,0.03);
}
.ticker-game.live {
  background: linear-gradient(180deg, rgba(163,230,53,0.06) 0%, transparent 100%);
}
.ticker-game .tg-team.winning { color: var(--green); }


/* ── 5. NAV — GLASS BAR + ACTIVE GLOW ──────────────────────────── */
nav {
  background: rgba(10,14,20,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--glass-border);
}
.nav-btn {
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.nav-btn.active {
  color: var(--green);
  border-bottom-color: var(--green);
  text-shadow: 0 0 12px rgba(163,230,53,0.3);
}
.nav-btn:hover:not(.active) { color: var(--text); }


/* ── 6. PICK CARDS — GLASSMORPHISM 2.0 ──────────────────────────── */
.pick-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--glass-glow), var(--shadow-sm);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Left accent bar — gradient instead of flat */
.pick-card::before {
  background: var(--accent-grad);
  border-radius: 12px 0 0 12px;
}
.pick-card.prop::before { background: var(--gold-grad); }
.pick-card.parlay::before { background: var(--purple-grad); }

/* Hover — lift + glow */
.pick-card:hover {
  border-color: rgba(163,230,53,0.15);
  background: rgba(15,18,25,0.8);
  box-shadow: var(--glass-glow), var(--shadow-md), var(--shadow-glow-green);
  transform: translateY(-1px);
}
.pick-card.prop:hover {
  border-color: rgba(251,191,36,0.15);
  box-shadow: var(--glass-glow), var(--shadow-md), var(--shadow-glow-gold);
}
.pick-card.parlay:hover {
  border-color: rgba(167,139,250,0.15);
  box-shadow: var(--glass-glow), var(--shadow-md), var(--shadow-glow-purple);
}

/* Expanded state */
.pick-card.expanded {
  border-color: rgba(163,230,53,0.12);
  background: rgba(15,18,25,0.85);
  box-shadow: var(--glass-glow), var(--shadow-md);
}
.pick-card.prop.expanded { border-color: rgba(251,191,36,0.12); }
.pick-card.parlay.expanded { border-color: rgba(167,139,250,0.12); }

/* Live pick — breathing glow */
.pick-card.pick-live {
  border-color: rgba(163,230,53,0.25);
  animation: liveGlow 3s ease-in-out infinite;
}
@keyframes liveGlow {
  0%, 100% { box-shadow: var(--glass-glow), var(--shadow-sm), 0 0 15px rgba(163,230,53,0.06); }
  50% { box-shadow: var(--glass-glow), var(--shadow-sm), 0 0 30px rgba(163,230,53,0.12); }
}

/* Pick name — slightly larger for readability */
.pick-name { font-size: 14px; letter-spacing: -0.3px; }

/* Odds — gradient text for emphasis */
.odds-num {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 22px;
}
.odds-num.gold {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.odds-num.purple {
  background: var(--purple-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.odds-num.dim {
  background: none;
  -webkit-text-fill-color: var(--text);
}

/* Tags — glass */
.tag {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  transition: all 0.2s;
}
.tag.g {
  background: linear-gradient(135deg, rgba(163,230,53,0.10), rgba(52,211,153,0.06));
  border-color: rgba(163,230,53,0.15);
  color: var(--green);
}
.tag.y {
  background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(245,158,11,0.06));
  border-color: rgba(251,191,36,0.15);
  color: var(--gold);
}


/* ── 7. LOCK CARDS — GLASS + DEPTH ──────────────────────────────── */
.lock-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--glass-glow), var(--shadow-sm);
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.lock-card::before {
  background: var(--accent-grad);
  height: 2px;
  border-radius: 14px 14px 0 0;
}
.lock-card:hover {
  border-color: rgba(163,230,53,0.12);
  box-shadow: var(--glass-glow), var(--shadow-md), var(--shadow-glow-green);
  transform: translateY(-3px);
}

/* Locks page header */
.locks-page-title {
  background: linear-gradient(135deg, var(--gold), #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.locks-page-rank {
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.06));
  border-color: rgba(251,191,36,0.2);
}


/* ── 8. EXPAND PANEL — NESTED GLASS ──────────────────────────────── */
.expand-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  box-shadow: var(--glass-glow);
}
.pick-expand {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Probability bar */
.prob-bar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.prob-bar-fill {
  border-radius: 4px;
  background: var(--accent-grad);
}

/* Gauge */
.gauge-meta-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  box-shadow: var(--glass-glow);
}


/* ── 9. AI EXPLANATION — GLASS VARIANT ──────────────────────────── */
.ai-why {
  background: linear-gradient(135deg, rgba(163,230,53,0.04) 0%, rgba(52,211,153,0.02) 100%);
  border: 1px solid rgba(163,230,53,0.10);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-why.prop-why {
  background: linear-gradient(135deg, rgba(251,191,36,0.04) 0%, rgba(245,158,11,0.02) 100%);
  border-color: rgba(251,191,36,0.10);
}
.ai-why.parlay-why {
  background: linear-gradient(135deg, rgba(167,139,250,0.04) 0%, rgba(129,140,248,0.02) 100%);
  border-color: rgba(167,139,250,0.10);
}


/* ── 10. GENERIC CARDS & STATS — GLASS ──────────────────────────── */
.card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--glass-glow), var(--shadow-sm);
  border-radius: 14px;
}
.stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  box-shadow: var(--glass-glow);
  transition: all 0.25s;
}
.stat-card:hover {
  border-color: rgba(255,255,255,0.10);
  box-shadow: var(--glass-glow), var(--shadow-sm);
}
.stat-big.g {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 11. CHART BOX — GLASS ──────────────────────────────────────── */
.chart-box {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--glass-glow), var(--shadow-sm);
  border-radius: 14px;
}


/* ── 12. BUTTONS — GRADIENT + GLASS ─────────────────────────────── */
.btn-primary {
  background: var(--accent-grad);
  color: #000;
  box-shadow: 0 2px 12px rgba(163,230,53,0.2);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(163,230,53,0.3);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.btn-outline {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s;
}
.btn-outline:hover {
  border-color: rgba(163,230,53,0.25);
  color: var(--green);
  background: rgba(163,230,53,0.04);
}

.mode-tab {
  border-radius: 24px;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.mode-tab.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #000;
  box-shadow: 0 2px 12px rgba(163,230,53,0.2);
}


/* ── 13. INPUTS — GLASS ──────────────────────────────────────────── */
.inp {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: all 0.25s;
}
.inp:focus {
  border-color: rgba(163,230,53,0.35);
  box-shadow: 0 0 0 3px rgba(163,230,53,0.08);
}


/* ── 14. TOGGLES — GRADIENT ──────────────────────────────────────── */
.toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.toggle.on {
  background: var(--accent-grad);
  border-color: transparent;
}
.toggle::after {
  background: var(--muted);
}
.toggle.on::after {
  background: #000;
}


/* ── 15. DATA TABLE — GLASS ROWS ────────────────────────────────── */
.data-table th {
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.data-table td {
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.daily-row:hover {
  background: rgba(255,255,255,0.03);
}
.daily-row.daily-open {
  background: linear-gradient(90deg, rgba(163,230,53,0.04) 0%, transparent 100%);
}


/* ── 16. BET ITEMS — SUBTLE GLASS ────────────────────────────────── */
.bet-item { border-bottom: 1px solid rgba(255,255,255,0.04); }
.bet-item:hover { background: rgba(255,255,255,0.02); }
.bet-item.expanded {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.bet-amount.pos {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 17. TOAST — GLASS ──────────────────────────────────────────── */
.toast {
  background: rgba(15,18,25,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--glass-border);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
}
.toast.ok { border-color: rgba(163,230,53,0.25); }
.toast.err { border-color: rgba(248,113,113,0.25); }


/* ── 18. SHARE CARD — PREMIUM GRADIENT ──────────────────────────── */
.share-overlay { background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); }
.share-card { border-radius: 18px; box-shadow: var(--shadow-lg); }
.share-card-inner {
  background: linear-gradient(155deg, rgba(15,18,25,0.95) 0%, rgba(30,41,59,0.9) 50%, rgba(15,18,25,0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.share-lock {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}


/* ── 19. LOADING — GRADIENT SPINNER ──────────────────────────────── */
.spinner {
  border-color: rgba(255,255,255,0.06);
  border-top-color: var(--green);
}

/* Shimmer — glass */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── 20. SCROLLBAR — REFINED ────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }


/* ── 21. SECTION HEADERS — FADE UP ANIMATION ────────────────────── */
.picks-grid > * {
  animation: cardFadeUp 0.4s ease-out both;
}
.picks-grid > *:nth-child(1) { animation-delay: 0.02s; }
.picks-grid > *:nth-child(2) { animation-delay: 0.06s; }
.picks-grid > *:nth-child(3) { animation-delay: 0.10s; }
.picks-grid > *:nth-child(4) { animation-delay: 0.14s; }
.picks-grid > *:nth-child(5) { animation-delay: 0.18s; }
.picks-grid > *:nth-child(6) { animation-delay: 0.22s; }
.picks-grid > *:nth-child(7) { animation-delay: 0.26s; }
.picks-grid > *:nth-child(8) { animation-delay: 0.30s; }

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 22. LOCKS SECTION — PREMIUM DIVIDERS ─────────────────────── */
.locks-divider-line {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.locks-divider-text {
  color: var(--muted);
}
.locks-section {
  position: relative;
}


/* ── 23. RESULT BOXES — GLASS VARIANTS ──────────────────────────── */
.res-ok {
  background: linear-gradient(135deg, rgba(163,230,53,0.08), rgba(52,211,153,0.04));
  border: 1px solid rgba(163,230,53,0.15);
  border-radius: 12px;
}
.res-err {
  background: linear-gradient(135deg, rgba(248,113,113,0.08), rgba(239,68,68,0.04));
  border: 1px solid rgba(248,113,113,0.15);
  border-radius: 12px;
}


/* ── 24. FOOTER — SUBTLE ────────────────────────────────────────── */
footer {
  border-top: 1px solid rgba(255,255,255,0.04);
}


/* ── 25. PARLAY SECTION HEADER ──────────────────────────────────── */
.feed-section-header {
  background: rgba(7,9,13,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}


/* ── 26. SHARE BUTTON — GLASS ───────────────────────────────────── */
.share-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  transition: all 0.25s;
}
.share-btn:hover {
  background: var(--accent-grad);
  color: #000;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(163,230,53,0.2);
}


/* ── 27. SETTLE BUTTONS — GLASS VARIANT ─────────────────────────── */
.settle-win {
  background: linear-gradient(135deg, rgba(163,230,53,0.08), rgba(52,211,153,0.04));
  border: 1px solid rgba(163,230,53,0.2);
  border-radius: 10px;
}
.settle-win:hover {
  background: linear-gradient(135deg, rgba(163,230,53,0.16), rgba(52,211,153,0.08));
}
.settle-loss {
  background: linear-gradient(135deg, rgba(248,113,113,0.06), rgba(239,68,68,0.03));
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: 10px;
}
.settle-push {
  background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(245,158,11,0.03));
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 10px;
}


/* ── 28. RESPONSIVE — MOBILE GLASS REFINEMENTS ──────────────────── */
@media(max-width: 480px) {
  .pick-card {
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .lock-card { border-radius: 10px; }
  .card { border-radius: 10px; }
  .stat-card { border-radius: 8px; }
  .odds-num { font-size: 18px; }
  .btn-primary, .btn-outline { border-radius: 10px; }

  /* Reduce mesh gradient intensity on mobile for perf */
  body::before {
    background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(30,58,138,0.12) 0%, transparent 70%);
  }
}


/* ── 29. REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .picks-grid > * { animation: none !important; }
  .pick-card { transition: none !important; }
  .lock-card { transition: none !important; }
  .pick-card.pick-live { animation: none !important; }
  .ticker-inner, .ticker-fallback { animation: none !important; }
}


/* ── 30. LONGSHOT SECTION — PREMIUM GRADIENT HEADER ─────────────── */
.longshot-header {
  background: linear-gradient(135deg, rgba(167,139,250,0.08) 0%, rgba(129,140,248,0.04) 100%);
  border: 1px solid rgba(167,139,250,0.12);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}