/* ── Default theme: dark glassmorphism with aurora effects ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  /* Colors */
  --color-bg:             #080818;
  --color-bg-overlay:     rgba(8, 8, 24, 0.72);
  --color-surface:        rgba(255,255,255,0.03);
  --color-surface-hover:  rgba(255,255,255,0.06);
  --color-surface-active: rgba(77,111,255,0.10);
  --color-border:         rgba(255,255,255,0.06);
  --color-border-hover:   rgba(255,255,255,0.10);
  --color-border-active:  rgba(77,111,255,0.30);
  --color-accent:         #4d6fff;
  --color-accent-hover:   #3a5ce0;
  --color-accent-alpha:   rgba(77,111,255,0.12);
  --color-success:        #4ade80;
  --color-text:           #fff;
  --color-text-muted:     rgba(255,255,255,0.35);
  --color-text-subtle:    rgba(255,255,255,0.30);
  --color-text-dim:       rgba(255,255,255,0.20);
  --color-icon-btn:       rgba(255,255,255,0.40);

  /* Navbar */
  --navbar-bg:     rgba(8,8,24,0.92);
  --navbar-border: rgba(255,255,255,0.06);
  --navbar-blur:   12px;
  --navbar-height: 50px;

  /* Hero */
  --hero-gradient:       radial-gradient(ellipse 70% 70% at 30% 50%, rgba(8,0,201,0.18) 0%, transparent 70%);
  --hero-heading-accent: #4d6fff;

  /* Player bar */
  --playerbar-bg:         rgba(8,8,24,0.97);
  --playerbar-border:     rgba(255,255,255,0.08);
  --playerbar-blur:       16px;
  --playerbar-height:     72px;
  --playerbar-art-radius: 6px;

  /* Progress bars */
  --progress-track:        rgba(255,255,255,0.10);
  --progress-fill:         #4d6fff;
  --progress-height-bar:   4px;
  --progress-height-fp:    5px;
  --progress-height-hover: 7px;

  /* Buttons */
  --btn-bg:          rgba(255,255,255,0.05);
  --btn-bg-hover:    rgba(255,255,255,0.10);
  --btn-border:      rgba(255,255,255,0.08);
  --btn-color:       rgba(255,255,255,0.60);
  --btn-color-hover: #fff;
  --btn-radius-round: 50%;

  /* Song list */
  --row-radius:     12px;
  --row-art-radius: 8px;

  /* Fullscreen overlay */
  --fp-art-radius:       14px;
  --fp-art-shadow:       0 24px 64px rgba(0,0,0,0.7);
  --fp-bg-blur:          70px;
  --fp-bg-brightness:    0.18;
  --fp-bg-saturate:      1.6;
  --fp-lyrics-color:     rgba(255,255,255,0.55);
  --fp-lyrics-line-height: 2;
  --fp-label-color:      #4d6fff;

  /* Typography */
  --font-ui:   'Space Grotesk', sans-serif;
  --font-mono: monospace;
  --font-time: var(--font-ui);

  /* Search */
  --search-bg:           rgba(255,255,255,0.05);
  --search-border:       rgba(255,255,255,0.08);
  --search-border-focus: rgba(77,111,255,0.50);
  --search-radius:       10px;

  /* Group labels */
  --group-label-color:   #4d6fff;
  --group-label-divider: rgba(77,111,255,0.20);

  /* Misc */
  --lyrics-wrap-border: rgba(255,255,255,0.06);

  /* Layout */
  --hero-padding:   4rem 0 3rem;
  --song-art-size:  52px;
  --pb-art-size:    44px;
  --body-bg-image:  none;
}


/* ════════════════════════════════════════════════════════════════════
   STRUCTURAL OVERRIDES — Animated Aurora Glassmorphism
   ════════════════════════════════════════════════════════════════════ */

/* ── Animated mesh gradient background ── */
[data-theme="default"] body {
  background:
    linear-gradient(135deg,
      #080818 0%,
      #0a0a2e 25%,
      #0e0820 50%,
      #080818 75%,
      #0a0e28 100%
    ) !important;
  position: relative;
}

/* Aurora gradient layer behind content */
[data-theme="default"] body {
  background: transparent !important;
  position: relative;
}

/* ── Rotating glowing orbs ── */
[data-theme="default"] body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 250vmax;
  height: 250vmax;
  margin-top: -125vmax;
  margin-left: -125vmax;
  z-index: -2;
  background-color: #030308;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(77, 111, 255, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(120, 50, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 240, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(77, 111, 255, 0.15) 0%, transparent 50%);
  animation: techBroOrbs 40s linear infinite;
  pointer-events: none;
}

/* ── Technical Grid Overlay ── */
[data-theme="default"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 80%);
  pointer-events: none;
  animation: gridDrift 20s linear infinite;
}

@keyframes techBroOrbs {
  0% {
    transform: rotate(0deg) scale(1);
  }
  33% {
    transform: rotate(120deg) scale(1.1) translate(3%, 3%);
  }
  66% {
    transform: rotate(240deg) scale(0.9) translate(-3%, -3%);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes gridDrift {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* ── Hero: enhanced with gradient glow ── */
[data-theme="default"] .hero {
  background-image:
    radial-gradient(ellipse 60% 60% at 25% 60%, rgba(77,111,255,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 75% 40%, rgba(120,80,255,0.10) 0%, transparent 60%);
  border-bottom: 1px solid rgba(77,111,255,0.10);
}
[data-theme="default"] .hero h1 {
  background: linear-gradient(135deg, #ffffff 0%, #c0d0ff 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="default"] .hero h1 span {
  background: linear-gradient(135deg, #4d6fff 0%, #7b9aff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Song rows: glassmorphism cards with hover lift ── */
[data-theme="default"] .song-row {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
[data-theme="default"] .song-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(77,111,255,0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(77,111,255,0.08);
}
[data-theme="default"] .song-row.active {
  background: rgba(77,111,255,0.10);
  border-color: rgba(77,111,255,0.30);
  box-shadow: 0 0 20px rgba(77,111,255,0.15), 0 4px 16px rgba(0,0,0,0.2);
}
[data-theme="default"] .song-row.active .song-title {
  color: #a0b8ff;
}

/* ── Search: glass search with glow on focus ── */
[data-theme="default"] #search {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-theme="default"] #search:focus {
  border-color: rgba(77,111,255,0.50);
  box-shadow: 0 0 20px rgba(77,111,255,0.12), 0 0 0 1px rgba(77,111,255,0.15);
}

/* ── Progress bar: glowing fill ── */
[data-theme="default"] #pb-fill,
[data-theme="default"] #fp-pfill {
  background: linear-gradient(90deg, #3a5ce0 0%, #4d6fff 40%, #7b9aff 100%);
  box-shadow: 0 0 8px rgba(77,111,255,0.4);
}

/* ── Play button: accent glow ── */
[data-theme="default"] #pb-play {
  box-shadow: 0 0 16px rgba(77,111,255,0.3), 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="default"] #pb-play:hover {
  box-shadow: 0 0 24px rgba(77,111,255,0.45), 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="default"] #fp-play-btn {
  box-shadow: 0 0 20px rgba(77,111,255,0.35), 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="default"] #fp-play-btn:hover {
  box-shadow: 0 0 32px rgba(77,111,255,0.5), 0 4px 16px rgba(0,0,0,0.4);
}

/* ── Navbar: stronger glass ── */
[data-theme="default"] .navbar {
  border-bottom: 1px solid rgba(77,111,255,0.08) !important;
}

/* ── Player bar: glass with glow line ── */
[data-theme="default"] #player-bar {
  border-top: 1px solid rgba(77,111,255,0.12);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

/* ── Group labels: accent glow ── */
[data-theme="default"] .group-label::after {
  background: linear-gradient(90deg, rgba(77,111,255,0.25) 0%, rgba(77,111,255,0.05) 100%);
}

/* ── Icon buttons: glass effect ── */
[data-theme="default"] .icon-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="default"] .icon-btn:hover {
  box-shadow: 0 0 10px rgba(77,111,255,0.12);
}

/* ── Album art in song row: subtle glow on active ── */
[data-theme="default"] .song-row.active .song-art {
  box-shadow: 0 0 12px rgba(77,111,255,0.25);
}

/* ── Fullscreen: enhanced background effect ── */
[data-theme="default"] #fp-overlay {
  background: #060614;
}
[data-theme="default"] #fp-art {
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 40px rgba(77,111,255,0.15);
}

/* ── Theme picker: glass ── */
[data-theme="default"] .theme-picker-menu {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(77,111,255,0.12);
}

/* ── Custom scrollbar ── */
[data-theme="default"] ::-webkit-scrollbar { width: 8px; }
[data-theme="default"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
[data-theme="default"] ::-webkit-scrollbar-thumb {
  background: rgba(77,111,255,0.25);
  border-radius: 4px;
}
[data-theme="default"] ::-webkit-scrollbar-thumb:hover { background: rgba(77,111,255,0.4); }