/* ─── Dark space theme (main page only — overrides style.css) ─────────────── */

:root {
  --text:      #dce5f5;
  --muted:     #7a8ba8;
  --line:      rgba(255, 255, 255, 0.10);
  --hover:     rgba(255, 255, 255, 0.055);
  --active-bg: rgba(188, 0, 45, 0.20);
}

/* ─── Body / canvas ──────────────────────────────────────────────────────── */
body {
  background: #07090f;
}

#space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

header, main, footer {
  position: relative;
  z-index: 1;
}

/* ─── Moon — bigger glow in the dark ────────────────────────────────────── */
.moon {
  box-shadow:
    0 0 0 0      rgba(188, 0, 45, 0.5),
    0 0 40px 10px rgba(188, 0, 45, 0.35),
    0 0 90px 20px rgba(188, 0, 45, 0.18);
}

@keyframes pulse {
  0%,100% {
    box-shadow:
      0 0 0 0      rgba(188,0,45,0.5),
      0 0 40px 10px rgba(188,0,45,0.35),
      0 0 90px 20px rgba(188,0,45,0.18);
  }
  50% {
    box-shadow:
      0 0 0 18px   rgba(188,0,45,0),
      0 0 60px 16px rgba(188,0,45,0.45),
      0 0 120px 30px rgba(188,0,45,0.25);
  }
}

/* ─── Glass cards ────────────────────────────────────────────────────────── */
.player-wrap {
  background: rgba(7, 9, 22, 0.58);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-color: rgba(255, 255, 255, 0.10);
}

.track-list {
  background: rgba(7, 9, 22, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.10);
}

/* ─── Track items ────────────────────────────────────────────────────────── */
.track-item { border-bottom-color: rgba(255, 255, 255, 0.07); }

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.progress-wrap { background: rgba(255, 255, 255, 0.10); }

/* ─── Volume slider ──────────────────────────────────────────────────────── */
input[type="range"] { background: rgba(255, 255, 255, 0.12); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer { color: rgba(255, 255, 255, 0.15); }
footer p { color: rgba(255, 255, 255, 0.15); }

/* ─── Empty state ────────────────────────────────────────────────────────── */
.empty {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.empty strong { color: var(--text); }