/**
 * MusicBox — Midnight Vinyl design system
 * Dark cinematic music UI · Outfit + DM Sans
 */
:root {
  --vb-bg: #08080a;
  --vb-bg-elevated: #0f0f12;
  --vb-surface: #141418;
  --vb-surface-hover: #1a1a1f;
  --vb-surface-raised: #1e1e24;
  --vb-border: rgba(255, 255, 255, 0.07);
  --vb-border-strong: rgba(255, 255, 255, 0.12);
  --vb-text: #f4f4f5;
  --vb-text-muted: #a1a1aa;
  --vb-text-dim: #71717a;
  --vb-accent: #ff4d6d;
  --vb-accent-soft: rgba(255, 77, 109, 0.14);
  --vb-accent-glow: rgba(255, 77, 109, 0.45);
  --vb-gold: #f5b942;
  --vb-radius-lg: 8px;
  --vb-radius-xl: 8px;
  --vb-shadow-card: none;
  --vb-shadow-glow: none;
  --vb-font-display: "Outfit", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --vb-font-body: "DM Sans", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --vb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html.vb-theme {
  font-family: var(--vb-font-body);
  color-scheme: dark;
}

html.vb-theme body {
  background: var(--vb-bg);
  color: var(--vb-text);
  background-image: none;
}

html.vb-theme h1,
html.vb-theme h2,
html.vb-theme h3,
html.vb-theme .vb-display {
  font-family: var(--vb-font-display);
  letter-spacing: -0.03em;
}

/* —— Tailwind semantic overrides —— */
html.vb-theme .bg-bg {
  background-color: var(--vb-bg) !important;
}

html.vb-theme .bg-bg\/85 {
  background-color: rgba(8, 8, 10, 0.85) !important;
}

html.vb-theme .bg-panel,
html.vb-theme .bg-white {
  background-color: var(--vb-surface) !important;
}

html.vb-theme .bg-panel\/90 {
  background-color: rgba(20, 20, 24, 0.92) !important;
}

html.vb-theme .bg-zinc-50,
html.vb-theme .bg-zinc-50\/50,
html.vb-theme .bg-zinc-50\/80 {
  background-color: var(--vb-surface-raised) !important;
}

html.vb-theme .bg-zinc-100 {
  background-color: var(--vb-surface-hover) !important;
}

html.vb-theme .bg-zinc-200 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

html.vb-theme .bg-zinc-900\/35 {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

html.vb-theme .text-zinc-900,
html.vb-theme .text-zinc-700 {
  color: var(--vb-text) !important;
}

html.vb-theme .text-soft,
html.vb-theme .text-zinc-400 {
  color: var(--vb-text-muted) !important;
}

html.vb-theme .text-accent,
html.vb-theme .border-accent {
  --tw-text-opacity: 1;
  --tw-border-opacity: 1;
  color: var(--vb-accent) !important;
  border-color: var(--vb-accent) !important;
}

html.vb-theme .bg-accent {
  background-color: var(--vb-accent) !important;
}

html.vb-theme .bg-accent\/80 {
  background-color: rgba(255, 77, 109, 0.8) !important;
}

html.vb-theme .border-zinc-200,
html.vb-theme .border-zinc-300 {
  border-color: var(--vb-border) !important;
}

html.vb-theme .hover\:border-zinc-300:hover {
  border-color: var(--vb-border-strong) !important;
}

html.vb-theme .hover\:bg-zinc-100:hover,
html.vb-theme .hover\:bg-zinc-200:hover {
  background-color: var(--vb-surface-hover) !important;
}

html.vb-theme .hover\:text-zinc-900:hover {
  color: var(--vb-text) !important;
}

html.vb-theme .focus\:border-accent:focus {
  border-color: var(--vb-accent) !important;
}

/* Status badges stay readable on dark */
html.vb-theme .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

html.vb-theme .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

html.vb-theme .text-emerald-600,
html.vb-theme .text-emerald-700 {
  color: #34d399 !important;
}

html.vb-theme .border-emerald-200,
html.vb-theme .border-emerald-300 {
  border-color: rgba(52, 211, 153, 0.25) !important;
}

html.vb-theme .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

html.vb-theme .text-red-600,
html.vb-theme .text-red-700,
html.vb-theme .text-rose-600 {
  color: #f87171 !important;
}

html.vb-theme .border-red-200 {
  border-color: rgba(248, 113, 113, 0.25) !important;
}

html.vb-theme .hover\:bg-emerald-100:hover {
  background-color: rgba(16, 185, 129, 0.2) !important;
}

html.vb-theme .hover\:bg-red-100:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

/* —— Shell header —— */
html.vb-theme .vb-shell-header {
  border-bottom: 1px solid var(--vb-border-strong);
  background: var(--vb-bg);
  backdrop-filter: none;
}

html.vb-theme .vb-shell-header__brand a {
  font-family: var(--vb-font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
}

html.vb-theme .vb-shell-header__brand .text-accent {
  background: none;
  color: var(--vb-accent) !important;
}

html.vb-theme .vb-shell-header__actions label {
  background: var(--vb-surface) !important;
  border-color: var(--vb-border) !important;
  transition: border-color 0.2s var(--vb-ease-out), box-shadow 0.2s var(--vb-ease-out);
}

html.vb-theme .vb-shell-header__actions label:focus-within {
  border-color: var(--vb-accent) !important;
  box-shadow: 0 0 0 3px var(--vb-accent-soft);
}

html.vb-theme #open-mobile-menu {
  background: #2a2a32 !important;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

html.vb-theme #open-mobile-menu:hover {
  background: #35353f !important;
  color: #ffffff !important;
}

/* —— Navigation —— */
html.vb-theme .menu-item {
  color: var(--vb-text-muted);
  border-radius: 4px;
  transition:
    color 0.18s var(--vb-ease-out),
    background 0.18s var(--vb-ease-out);
}

html.vb-theme .menu-item:hover {
  background: var(--vb-surface-hover);
  color: var(--vb-text);
}

html.vb-theme .menu-item.active {
  background: var(--vb-accent);
  color: #fff;
  box-shadow: none;
}

html.vb-theme #mobile-menu .bg-panel,
html.vb-theme #mobile-menu .vb-mobile-drawer {
  background: #1e1e24 !important;
  color: #f4f4f5 !important;
}

/* —— Cards & panels —— */
html.vb-theme .music-card,
html.vb-theme .rounded-2\.5xl.border,
html.vb-theme section.rounded-2\.5xl {
  border-color: var(--vb-border) !important;
}

html.vb-theme .ad-slot {
  border-color: var(--vb-border);
  background: var(--vb-surface);
  border-radius: var(--vb-radius-lg);
}

html.vb-theme .admin-panel {
  background: var(--vb-surface) !important;
  border-color: var(--vb-border) !important;
}

/* —— Pills & secondary buttons —— */
html.vb-theme .vb-pill,
html.vb-theme a.rounded-full.border.border-zinc-200.bg-zinc-100,
html.vb-theme span.rounded-full.border.border-zinc-200.bg-zinc-100 {
  background: var(--vb-surface-hover) !important;
  border-color: var(--vb-border) !important;
  color: var(--vb-text-muted) !important;
}

html.vb-theme .vb-pill:hover,
html.vb-theme a.rounded-full.border.border-zinc-200.bg-zinc-100:hover {
  background: var(--vb-surface-raised) !important;
  color: var(--vb-text) !important;
}

/* —— Scrollbar —— */
html.vb-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.vb-theme ::-webkit-scrollbar-track {
  background: transparent;
}

html.vb-theme ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

html.vb-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

html.vb-theme .admin-subnav {
  background: var(--vb-surface) !important;
  border-color: var(--vb-border) !important;
}

html.vb-theme .admin-subnav-link {
  color: var(--vb-text-muted);
}

html.vb-theme .admin-subnav-link:hover {
  background: var(--vb-surface-hover);
  color: var(--vb-text);
}

html.vb-theme .admin-subnav-link--active {
  background: var(--vb-accent-soft);
  color: var(--vb-accent);
}

html.vb-theme .vb-page-panel {
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  background: var(--vb-surface);
  padding: 1.25rem 1.5rem;
}

@media (min-width: 640px) {
  html.vb-theme .vb-page-panel {
    padding: 1.5rem;
  }
}

html.vb-theme [data-top10-widget] aside {
  background: var(--vb-surface) !important;
  border-color: var(--vb-border) !important;
}

html.vb-theme [data-top10-widget] a.group {
  background: var(--vb-surface-hover) !important;
  border-color: var(--vb-border) !important;
}

html.vb-theme [data-top10-widget] a.group:hover {
  background: var(--vb-surface-raised) !important;
  border-color: var(--vb-border-strong) !important;
}

html.vb-theme .apple-signin-loading-title {
  color: var(--vb-text);
}

html.vb-theme .apple-signin-loading-sub {
  color: var(--vb-text-muted);
}

html.vb-theme .ad-fallback {
  color: var(--vb-text-dim);
}

/* —— Audio player chrome —— */
html.vb-theme audio {
  filter: invert(0.88) hue-rotate(180deg);
  border-radius: 0.75rem;
}