:root {
  --primary-color: #06b6d4;
  --secondary-color: #f59e0b;
  --bg-color: #020617;
  --surface-color: #0f172a;
  --card-color: #111c34;
  --border-color: #284061;
  --heading-color: #f8fafc;
  --body-color: #e2e8f0;
  --muted-color: #94a3b8;
  --radius: 18px;
  --shadow-strength: 0.35;
}

html:not(.dark) {
  --bg-color: #f1f5f9;
  --surface-color: #ffffff;
  --card-color: #f8fafc;
  --border-color: #cbd5e1;
  --heading-color: #0f172a;
  --body-color: #334155;
  --muted-color: #64748b;
}

html,
body {
  background: radial-gradient(circle at 15% 15%, rgba(6, 182, 212, 0.16), transparent 32%),
    radial-gradient(circle at 85% 5%, rgba(245, 158, 11, 0.12), transparent 28%), var(--bg-color);
  color: var(--body-color);
}

.shell {
  max-width: min(1180px, 96vw);
  margin: 0 auto;
}

.surface-card {
  border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-color) 94%, transparent),
    color-mix(in srgb, var(--card-color) 96%, transparent)
  );
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(2, 6, 23, var(--shadow-strength));
}

html:not(.dark) .surface-card {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

html:not(.dark) [class*='bg-slate-900'],
html:not(.dark) [class*='bg-slate-800'] {
  background-color: #f8fafc !important;
}

html:not(.dark) [class*='text-slate-100'],
html:not(.dark) [class*='text-slate-200'],
html:not(.dark) [class*='text-slate-300'] {
  color: #1e293b !important;
}

html:not(.dark) [class*='text-slate-400'],
html:not(.dark) [class*='text-slate-500'] {
  color: #64748b !important;
}

html:not(.dark) [class*='border-slate-700'],
html:not(.dark) [class*='border-slate-800'] {
  border-color: #cbd5e1 !important;
}

.module-title {
  color: var(--heading-color);
  letter-spacing: 0.01em;
}

.module-subtitle {
  color: var(--muted-color);
}

.module-hidden {
  display: none !important;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65);
  animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.tab-btn.active {
  color: var(--heading-color);
  border-bottom-color: var(--primary-color);
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.16), transparent);
}

.tiny-pill {
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--muted-color);
}

.status-past {
  color: #64748b;
}

.status-live {
  color: #34d399;
}

.status-upcoming {
  color: #facc15;
}

@media (max-width: 900px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 901px) {
  .mobile-nav {
    position: static;
    transform: none;
    max-width: none;
    border-radius: var(--radius);
  }
}