:root {
  --accent: #a855f7;
  --button-accent: #a855f7;
  --accent-soft: rgba(168, 85, 247, 0.2);
  --accent-glow: rgba(168, 85, 247, 0.45);
  --accent-strong: rgba(168, 85, 247, 0.75);
  --text-primary: #f5f3ff;
  --text-muted: #b7b1d6;
  --text-subtle: #8f88b3;
  --border: rgba(148, 137, 196, 0.2);
  --surface-1: rgba(22, 19, 36, 0.92);
  --surface-2: rgba(30, 24, 44, 0.92);
  --surface-3: rgba(18, 16, 28, 0.92);
  --shadow-lg: 0 20px 45px rgba(10, 7, 20, 0.45);
  --shadow-md: 0 10px 30px rgba(12, 9, 24, 0.35);
  --shadow-glow: 0 0 16px var(--accent-glow);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --bg-deep: #0b0b14;
  --bg-midnight: #05050b;
  --bg-velvet: #120818;
  --bg-aurora: #062a2a;
  --bg-slate: #111827;
  --bg-sunset: #2a1326;
  --bg-custom: #0b0b14;
  --bg-main: var(--bg-deep);
  --bg-tint: rgba(14, 10, 28, 0.7);
  --surface-input: color-mix(in srgb, var(--surface-2) 86%, #ffffff 8%);
  --surface-input-soft: color-mix(in srgb, var(--surface-2) 78%, transparent);
  --surface-overlay: color-mix(in srgb, var(--bg-main) 76%, transparent);
  --surface-player: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --surface-player-header-start: color-mix(in srgb, var(--surface-2) 96%, transparent);
  --surface-player-header-end: color-mix(in srgb, var(--surface-1) 92%, var(--accent-soft));
  --ring-accent: color-mix(in srgb, var(--accent) 28%, transparent);
}

:root[data-background='deep'] {
  --bg-main: var(--bg-deep);
  --bg-tint: rgba(14, 10, 28, 0.7);
  --surface-input: color-mix(in srgb, var(--surface-2) 86%, #ffffff 8%);
  --surface-input-soft: color-mix(in srgb, var(--surface-2) 78%, transparent);
  --surface-overlay: color-mix(in srgb, var(--bg-main) 76%, transparent);
  --surface-player: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --surface-player-header-start: color-mix(in srgb, var(--surface-2) 96%, transparent);
  --surface-player-header-end: color-mix(in srgb, var(--surface-1) 92%, var(--accent-soft));
  --ring-accent: color-mix(in srgb, var(--accent) 28%, transparent);
  --surface-1: rgba(21, 18, 34, 0.92);
  --surface-2: rgba(28, 22, 42, 0.92);
  --surface-3: rgba(18, 16, 28, 0.92);
}

:root[data-background='midnight'] {
  --bg-main: var(--bg-midnight);
  --bg-tint: rgba(8, 7, 18, 0.74);
  --surface-1: rgba(16, 14, 28, 0.94);
  --surface-2: rgba(22, 18, 36, 0.94);
  --surface-3: rgba(12, 10, 22, 0.95);
}

:root[data-background='velvet'] {
  --bg-main: var(--bg-velvet);
  --bg-tint: rgba(22, 10, 34, 0.72);
  --surface-1: rgba(26, 14, 40, 0.92);
  --surface-2: rgba(34, 18, 48, 0.94);
  --surface-3: rgba(22, 12, 34, 0.94);
}


:root[data-background='aurora'] {
  --bg-main: var(--bg-aurora);
  --bg-tint: rgba(6, 42, 42, 0.72);
  --surface-1: rgba(8, 48, 48, 0.9);
  --surface-2: rgba(10, 58, 58, 0.92);
  --surface-3: rgba(8, 40, 40, 0.93);
}

:root[data-background='slate'] {
  --bg-main: var(--bg-slate);
  --bg-tint: rgba(17, 24, 39, 0.72);
  --surface-1: rgba(21, 31, 52, 0.9);
  --surface-2: rgba(27, 39, 65, 0.92);
  --surface-3: rgba(19, 28, 47, 0.93);
}

:root[data-background='sunset'] {
  --bg-main: var(--bg-sunset);
  --bg-tint: rgba(42, 19, 38, 0.72);
  --surface-1: rgba(54, 21, 46, 0.9);
  --surface-2: rgba(68, 26, 56, 0.92);
  --surface-3: rgba(48, 20, 42, 0.93);
}

:root[data-background='custom'] {
  --bg-main: var(--bg-custom);
  --bg-tint: color-mix(in srgb, var(--bg-custom) 78%, transparent);
  --surface-1: color-mix(in srgb, var(--bg-custom) 72%, #ffffff 8%);
  --surface-2: color-mix(in srgb, var(--bg-custom) 68%, #ffffff 12%);
  --surface-3: color-mix(in srgb, var(--bg-custom) 76%, #000000 24%);
}

html,
body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  overflow-x: hidden;
}

body {
  background-image: radial-gradient(circle at top, rgba(168, 85, 247, 0.08), transparent 55%),
    radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.06), transparent 50%);
  background-attachment: fixed;
}

@media (min-width: 769px) {
  body.has-fixed-navbar #navbar-placeholder,
  body.has-fixed-navbar #navbarContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  body.has-fixed-navbar main {
    height: 100vh !important;
    padding-top: calc(64px + 20px) !important;
  }
}

html[data-motion='off'] * {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}


* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 10px;
}


.type-badge-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-inverse);
  background: color-mix(in srgb, #0f172a 82%, var(--accent) 18%);
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}