:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface2: #1e1e1e;
  --accent: #ffffff;
  --accent-fg: #0a0a0a;
  --text: #e8e8e8;
  --muted: #555;
  --border: #222;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  /* prevent accidental zoom on double-tap for controls */
  touch-action: manipulation;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Range inputs — tall thumb for fat-finger use ─────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  width: 100%;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

/* ─── Video container — hidden on mobile, visible on desktop ────── */
.video-hidden { display: none !important; }
@media (min-width: 768px) {
  .video-hidden { display: block !important; }
  /* On desktop, hide the toggle button since video is always shown */
  #video-toggle-btn { display: none; }
}

/* ─── Tracklist — hidden by default (collapsed) ─────────────────── */
.tracklist-hidden { display: none; }

/* ─── Safe area bottom padding (notched phones) ─────────────────── */
.safe-bottom { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* ─── Active track item ─────────────────────────────────────────── */
.track-item.active {
  border-bottom: 1px solid var(--accent);
}
.track-item.active .track-title {
  color: var(--accent);
}

/* ─── Shuffle active ────────────────────────────────────────────── */
.shuffle-active {
  color: var(--accent) !important;
  opacity: 1 !important;
}