:root {
  color-scheme: dark;
  --site-font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --theme-bg: #101317;
  --theme-bg-soft: #171b20;
  --theme-panel: rgba(24, 29, 35, 0.95);
  --theme-panel-2: rgba(19, 23, 28, 0.92);
  --theme-border: rgba(165, 176, 190, 0.24);
  --theme-text: #e3e8ed;
  --theme-muted: #9ca7b3;
  --theme-accent: #8f9caf;
  --theme-accent-soft: rgba(143, 156, 175, 0.18);
  --theme-highlight: #edf0f3;
  --theme-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #eef3f7;
  --theme-bg-soft: #ffffff;
  --theme-panel: rgba(255, 255, 255, 0.98);
  --theme-panel-2: rgba(246, 249, 252, 0.98);
  --theme-border: rgba(19, 38, 58, 0.2);
  --theme-text: #111827;
  --theme-muted: #344256;
  --theme-accent: #174f7a;
  --theme-accent-soft: rgba(23, 79, 122, 0.12);
  --theme-highlight: #07111f;
  --theme-shadow: 0 16px 38px rgba(31, 50, 73, 0.12);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top right, rgba(49, 124, 170, 0.13), transparent 34%),
    radial-gradient(circle at top left, rgba(210, 151, 48, 0.1), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, var(--theme-bg) 100%) !important;
}

html[data-theme="light"] main,
html[data-theme="light"] aside,
html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .video-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .playlist-card,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .quick-card,
html[data-theme="light"] .meta-card,
html[data-theme="light"] .source,
html[data-theme="light"] .sidebar-intro,
html[data-theme="light"] .sidebar-playlist,
html[data-theme="light"] .topbar-wrap .pill,
html[data-theme="light"] .topbar-wrap .circle,
html[data-theme="light"] .thumb-card {
  background: linear-gradient(180deg, #ffffff, #f7fafc) !important;
}

html,
body {
  font-family: var(--site-font) !important;
}

body {
  background:
    radial-gradient(circle at top right, rgba(143, 156, 175, 0.08), transparent 34%),
    radial-gradient(circle at top left, rgba(120, 132, 148, 0.06), transparent 30%),
    linear-gradient(180deg, var(--theme-bg-soft) 0%, var(--theme-bg) 100%) !important;
  color: var(--theme-text) !important;
}

body::before {
  opacity: 0.03 !important;
}

main,
aside,
.hero,
.panel,
.card,
.video-card,
.feature-card,
.playlist-card,
.hero-panel,
.quick-card,
.meta-card,
.source,
.sidebar-intro,
.sidebar-playlist,
.topbar-wrap .pill,
.topbar-wrap .circle,
.thumb-card {
  border-color: var(--theme-border) !important;
  background: linear-gradient(180deg, var(--theme-panel), var(--theme-panel-2)) !important;
  box-shadow: var(--theme-shadow) !important;
  color: var(--theme-text) !important;
}

.hero,
.hero-panel {
  background:
    linear-gradient(180deg, var(--theme-panel), var(--theme-panel-2)),
    radial-gradient(circle at top left, var(--theme-accent-soft), transparent 55%) !important;
}

h1,
h2,
h3,
.name,
.section-title,
.card-head h2,
.video-head strong {
  color: var(--theme-highlight) !important;
}

p,
.lead,
.bio,
.sub,
.panel p,
.section-note,
.meta-card span,
.quick-card span,
.sidebar-intro p,
.sidebar-playlist p,
.card-foot,
.pager-status,
.form-note,
.status,
.meta,
.hero-social-preview .meta {
  color: var(--theme-muted) !important;
}

.kicker,
.eyebrow,
.nav-title,
.embed-title,
.hero-social-preview .label {
  color: var(--theme-accent) !important;
}

a {
  color: var(--theme-accent);
}

html[data-theme="light"] a {
  color: #0f5f91;
}

.btn,
.hero-btn,
.hero-pill,
.nav-list a,
.video-fallback,
.top-link,
.link,
.pager-link,
.pill,
.circle,
.mini-btn,
.mini-btn-secondary,
.list a,
.list .item-link,
.submit-btn,
.captcha-refresh {
  border-color: var(--theme-border) !important;
  background: var(--theme-bg-soft) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

.hero-btn-primary {
  background: #2a323b !important;
  color: #e6ebf0 !important;
  border-color: #4a5868 !important;
}

html[data-theme="light"] .hero-btn-primary,
html[data-theme="light"] .submit-btn {
  background: #0f5f91 !important;
  color: #ffffff !important;
  border-color: #0b4d75 !important;
}

.btn:hover,
.btn:focus-visible,
.hero-btn:hover,
.hero-btn:focus-visible,
.nav-list a:hover,
.nav-list a:focus-visible,
.video-fallback:hover,
.video-fallback:focus-visible,
.top-link:hover,
.top-link:focus-visible,
.link:hover,
.link:focus-visible,
.pager-link:hover,
.pager-link:focus-visible,
.pill:hover,
.pill:focus-visible,
.circle:hover,
.circle:focus-visible,
.mini-btn:hover,
.mini-btn:focus-visible,
.mini-btn-secondary:hover,
.mini-btn-secondary:focus-visible,
.list a:hover,
.list a:focus-visible,
.thumb-card:hover,
.thumb-card:focus-visible,
.submit-btn:hover,
.submit-btn:focus-visible,
.captcha-refresh:hover,
.captcha-refresh:focus-visible {
  background: var(--theme-accent-soft) !important;
  border-color: rgba(143, 156, 175, 0.45) !important;
  text-decoration: none !important;
}

.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
  background: #313b46 !important;
}

html[data-theme="light"] .hero-btn-primary:hover,
html[data-theme="light"] .hero-btn-primary:focus-visible,
html[data-theme="light"] .submit-btn:hover,
html[data-theme="light"] .submit-btn:focus-visible {
  background: #0b4d75 !important;
  border-color: #083a59 !important;
}

.hero-social-preview,
.status,
.empty,
.loading-card {
  border-color: var(--theme-border) !important;
  background: var(--theme-bg-soft) !important;
  color: var(--theme-text) !important;
}

.field input,
.field textarea,
.search-row input,
.search-row select,
.search-row button {
  border-color: var(--theme-border) !important;
  background: var(--theme-bg-soft) !important;
  color: var(--theme-text) !important;
}

.field input::placeholder,
.field textarea::placeholder,
.search-row input::placeholder {
  color: var(--theme-muted) !important;
}

.icon,
.count-pill {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent) !important;
  border-color: transparent !important;
}

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--theme-panel) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--theme-shadow);
}

.theme-toggle label {
  color: var(--theme-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.theme-toggle select {
  border: 1px solid var(--theme-border);
  background: var(--theme-bg-soft);
  color: var(--theme-text);
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
}

@media (max-width: 640px) {
  .theme-toggle {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: space-between;
  }

  body {
    padding-bottom: 86px !important;
  }
}