/* ═══════════════════════════════════════════════════════════
   FAVOURITES — Heart button in queue rows
═══════════════════════════════════════════════════════════ */
.bz-q-fav-btn {
  color: rgba(255, 255, 255, 0.35);
  background: transparent;
  border: none;
  font-size: 0.9rem;
  transition: color 0.18s, transform 0.18s, text-shadow 0.18s;
}

.bz-q-fav-btn:hover {
  color: #ff2d55;
  transform: scale(1.25);
}

/* Active = song is in favourites: bright solid red heart */
.bz-q-fav-btn--active {
  color: #ff2d55 !important;
  text-shadow: 0 0 12px rgba(255, 45, 85, 0.85), 0 0 24px rgba(255, 45, 85, 0.40);
  animation: bz-fav-pop 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.bz-q-fav-btn--active:hover {
  color: #ff6b81 !important;
  transform: scale(1.20);
  text-shadow: 0 0 16px rgba(255, 80, 100, 0.90);
}

@keyframes bz-fav-pop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.40);
  }

  70% {
    transform: scale(0.88);
  }

  100% {
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   FAVOURITES TOAST NOTIFICATION
═══════════════════════════════════════════════════════════ */
.bz-fav-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 18, 24, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 45, 85, 0.45);
  border-radius: 14px;
  padding: 11px 16px 11px 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 45, 85, 0.12),
    0 0 18px rgba(255, 45, 85, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.26s ease, transform 0.26s ease;
  min-width: 230px;
  max-width: 320px;
  pointer-events: auto;
  user-select: none;
}

.bz-fav-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d55, #ff6b81);
  box-shadow: 0 4px 14px rgba(255, 45, 85, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bz-fav-toast-icon i {
  color: #fff;
  font-size: 14px;
}

.bz-fav-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.bz-fav-toast-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ff6b81;
  text-transform: uppercase;
  white-space: nowrap;
}

.bz-fav-toast-song {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════════
   FAVOURITES PLAYLIST CARD — heart cover glow in Your Playlists
═══════════════════════════════════════════════════════════ */
.dp-card[data-dp-id="bz-favourites-playlist"] .dp-card-inner {
  border: 1.5px solid rgba(255, 45, 85, 0.45);
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.18);
}

.dp-card[data-dp-id="bz-favourites-playlist"] .dp-card-collage {
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.30), rgba(18, 18, 24, 0.85));
}

.dp-card[data-dp-id="bz-favourites-playlist"] .dp-card-name {
  color: #ff6b81;
}

/* ═══════════════════════════════════════════════════════════
   FAVOURITES — "Add to Favourites" in song context menu modal
═══════════════════════════════════════════════════════════ */
#modal-fav-btn+button {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#modal-fav-btn .bz-fav-modal-icon {
  color: rgba(255, 80, 100, 0.65) !important;
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.22s;
}

#modal-fav-btn:hover .bz-fav-modal-icon {
  color: #ff2d55 !important;
  transform: scale(1.22);
}

#modal-fav-btn.bz-fav-modal-btn--active .bz-fav-modal-icon {
  color: #ff2d55 !important;
  filter: drop-shadow(0 0 5px rgba(255, 45, 85, 0.60));
}

#modal-fav-btn.bz-fav-modal-btn--active {
  color: #ff2d55 !important;
}

#modal-fav-btn.bz-fav-modal-btn--active:hover {
  background: rgba(255, 45, 85, 0.10) !important;
}

/* ── AutoMix history badge (listening activity) ─────────────────────────── */
.bzh-automix-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #2575fc;
  background: rgba(37, 117, 252, 0.12);
  border: 1px solid rgba(37, 117, 252, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

.bzh-automix-movie {
  color: #b3b3b3;
  font-size: 0.7rem;
}

/* ── Now Playing fav button in queue overlay ─────────────────────────────── */
.bz-q-now-fav-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 0.9rem !important;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07) !important;
  border: none !important;
  color: #aaa !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, transform 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bz-q-now-fav-btn:hover {
  background: rgba(255, 80, 80, 0.18) !important;
  color: #ff4c4c !important;
  transform: scale(1.12) !important;
}

.bz-q-now-fav-btn.bz-q-fav-btn--active {
  background: rgba(255, 60, 60, 0.2) !important;
  color: #ff4c4c !important;
}

.bz-q-now-fav-btn.bz-q-fav-btn--active:hover {
  background: rgba(255, 60, 60, 0.35) !important;
}

/* ── AutoMix source label in Listen Again cards ───────────────────────────── */
.bzp-la-automix-source {
  color: #2575fc !important;
  font-weight: 600 !important;
}

/* ============================================================
   32. SCROLL TO TOP BUTTON
   ============================================================ */
.bz-scroll-top-btn {
  position: fixed;
  bottom: calc(var(--player-height, 120px) + 20px);
  right: 18px;
  z-index: 9000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #2575fc 100%);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
  animation: bz-fadein-up 0.3s ease both;
}

.bz-scroll-top-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.6), 0 3px 10px rgba(0, 0, 0, 0.4);
}

.bz-scroll-top-btn:active {
  transform: scale(0.93);
}

@keyframes bz-fadein-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   33. YEAR JUMP BAR
   ============================================================ */
.bz-year-jump-bar {
  position: fixed;
  top: var(--nav-height, 70px);
  left: 0;
  right: 0;
  z-index: 799;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1e1246 0%, #0d1e4a 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 2px solid rgba(124, 58, 237, 0.55);
  border-radius: 0 0 14px 14px;
  padding: 0 10px;
  margin: 0;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.25);
  /* Height controlled by inner content; JS reads this to offset the page */
}

.bz-year-jump-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.bz-year-jump-pill {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: 999px;
  border: 2px solid rgba(167, 139, 250, 0.55);
  background: rgba(124, 58, 237, 0.22);
  color: #c4b5fd;
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: inherit;
  white-space: nowrap;
}

.bz-year-jump-pill:hover {
  background: rgba(124, 58, 237, 0.50);
  border-color: #a78bfa;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

.bz-year-jump-pill:active {
  transform: scale(0.95);
}

.bz-year-jump-pill.active {
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.60);
}

/* Dark mode — same strong look */
body.dark-mode .bz-year-jump-bar {
  background: linear-gradient(135deg, #0e0820 0%, #080f28 100%);
  border-color: rgba(124, 58, 237, 0.50);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50);
}

body.dark-mode .bz-year-jump-pill {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
}

body.dark-mode .bz-year-jump-pill:hover {
  background: rgba(124, 58, 237, 0.45);
  border-color: #a78bfa;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

body.dark-mode .bz-year-jump-pill.active {
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.60);
}

/* ── Save Queue as Playlist button in queue header ── */
.bz-btn--save {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.bz-btn--save:hover {
  background: linear-gradient(135deg, #15803d, #166534) !important;
  box-shadow: 0 4px 18px rgba(22, 163, 74, 0.40) !important;
}

/* ═══════════════════════════════════════════════
   SONG INFO PANEL
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   SONG INFO PANEL — compact centered card
═══════════════════════════════════════════════ */
.bz-song-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bz-song-info-overlay.visible {
  opacity: 1;
}

.bz-song-info-panel {
  background: #13132b;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  width: 100%;
  max-width: 400px;
  padding: 0;
  transform: scale(0.92) translateY(16px);
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.70);
  position: relative;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.bz-song-info-overlay.visible .bz-song-info-panel {
  transform: scale(1) translateY(0);
}

.bz-si-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bz-si-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.bz-si-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.55);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.bz-si-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.bz-si-body {
  padding: 0 18px 18px;
  overflow-y: auto;
  flex: 1;
}

.bz-si-artwork-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 14px;
}

.bz-si-artwork {
  width: 110px;
  height: 110px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60);
}

.bz-si-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bz-si-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bz-si-row:last-child {
  border-bottom: none;
}

.bz-si-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(124, 58, 237, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.bz-si-row-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bz-si-row-label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 600;
}

.bz-si-row-value {
  font-size: 0.86rem;
  color: #e2e2f0;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.bz-si-source {
  display: none;
}

/* Skeleton loader */
.bz-si-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.bz-si-skel-line {
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: bzSkelShimmer 1.4s infinite;
  width: 100%;
}

.bz-si-skel-short {
  width: 45%;
}

.bz-si-skel-medium {
  width: 70%;
}

@keyframes bzSkelShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Song Info button in menu */
#modal-song-info-btn {
  color: #a78bfa !important;
}

#modal-song-info-btn i {
  color: #a78bfa !important;
}

/* ================================================================
   SCHEDULED DARK MODE — Settings panel
   ================================================================ */

.schedule-dm-panel {
  margin: 0 0 4px 0;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: sdm-fadein 0.22s ease;
}

@keyframes sdm-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Day chips ── */
.schedule-dm-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-dm-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sdm-day-chip {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.sdm-day-chip:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}

.sdm-day-chip.active {
  background: rgba(139, 92, 246, 0.28);
  border-color: rgba(139, 92, 246, 0.7);
  color: #a78bfa;
  font-weight: 700;
}

.sdm-day-all.active {
  background: rgba(139, 92, 246, 0.35);
  border-color: #7c3aed;
  color: #c4b5fd;
}

/* ── Time pickers row: side-by-side ── */
.schedule-dm-times {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.schedule-dm-time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.schedule-dm-time-label {
  font-size: 0.70rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* The two inputs (Hr + Min + AM/PM) sit side by side inside each block */
.sdm-manual-inputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.sdm-time-input {
  width: 52px;
  height: 44px;
  background: rgba(109, 40, 217, 0.12);
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  border-radius: 10px;
  color: #e2d9ff;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  caret-color: #a78bfa;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  appearance: textfield;
}

.sdm-time-input:focus {
  border-color: rgba(139, 92, 246, 0.80);
  background: rgba(109, 40, 217, 0.22);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.sdm-time-input::placeholder {
  color: rgba(196, 181, 253, 0.30);
}

.sdm-manual-colon {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
  user-select: none;
}

.sdm-ampm-toggle {
  height: 44px;
  min-width: 52px;
  padding: 0 10px;
  background: rgba(109, 40, 217, 0.14);
  border: 1.5px solid rgba(139, 92, 246, 0.38);
  border-radius: 10px;
  color: #c4b5fd;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.10s;
}

.sdm-ampm-toggle:hover {
  background: rgba(139, 92, 246, 0.26);
  border-color: rgba(139, 92, 246, 0.65);
  color: #fff;
}

.sdm-ampm-toggle:active {
  transform: scale(0.93);
  background: rgba(139, 92, 246, 0.38);
}

/* Arrow divider between Turn On and Turn Off */
.schedule-dm-arrow {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.22);
  align-self: center;
  margin-top: 22px;
  flex-shrink: 0;
}

/* ── Active badge ── */
.schedule-dm-active-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: #a78bfa;
  font-weight: 600;
}

.schedule-dm-active-badge i {
  font-size: 0.85rem;
  color: #8b5cf6;
  flex-shrink: 0;
}

/* ── Lock manual toggle while schedule is active ── */
.switch.sdm-managed {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Responsive: stack vertically on very small screens ── */
@media (max-width: 380px) {
  .schedule-dm-times {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .schedule-dm-arrow {
    transform: rotate(90deg);
    margin-top: 0;
  }
}

/* AM/PM wheel — narrower than Hr/Min */
.sdm-ampm-wheel {
  width: 48px !important;
}

.sdm-ampm-wheel .picker-item {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Set Schedule button ── */
.sdm-set-schedule-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #2575fc 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s, background 0.2s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}

.sdm-set-schedule-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.50);
}

.sdm-set-schedule-btn:active {
  transform: scale(0.97);
  opacity: 1;
}

.sdm-set-schedule-btn--pending {
  background: linear-gradient(135deg, #7c3aed 0%, #2575fc 100%);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
  animation: sdm-btn-pulse 1.6s ease-in-out infinite;
}

@keyframes sdm-btn-pulse {

  0%,
  100% {
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
  }

  50% {
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.65);
  }
}

.sdm-set-schedule-btn--saved {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow: 0 4px 18px rgba(22, 163, 74, 0.40) !important;
  animation: none !important;
}

/* Cancel Schedule — red state */
.sdm-set-schedule-btn--cancel {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.40) !important;
  animation: none !important;
}

.sdm-set-schedule-btn--cancel:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.55) !important;
  opacity: 1 !important;
}

/* ============================================================
   HOME YEAR SECTIONS — responsive grid (no horizontal scroll)
   Scoped to #year-sections-container so playlists are unaffected
   ============================================================ */

#year-sections-container .albums-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  flex-wrap: unset;
  gap: 10px;
  padding: 4px 16px 16px;
}

/* Cards fill their grid cell instead of being fixed-width flex items */
#year-sections-container .album-card {
  flex: unset !important;
  min-width: 0 !important;
  width: 100%;
  scroll-snap-align: none;
}

/* Enforce strict 1:1 ratio on the image wrapper so mobile doesn't break */
#year-sections-container .album-card-img-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
}

#year-sections-container .album-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Tablet */
@media (max-width: 767px) {
  #year-sections-container .albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 4px 14px 14px;
  }
}

/* Mobile — lock to 3 columns so cards stay comfortably sized */
@media (max-width: 480px) {
  #year-sections-container .albums-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px 12px 14px;
  }
}

/* Small phones — still 3 columns, tighter gap */
@media (max-width: 360px) {
  #year-sections-container .albums-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px 10px 12px;
  }
}

/* ============================================================
   32. LOADER & AUTH GATE (moved from index.html inline <style>)
   ============================================================ */
/* ══════════════════════════════════════════
           BEAT ZEN — Premium Loader
        ══════════════════════════════════════════ */
#bz-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #08081a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  opacity: 1;
  visibility: visible;
  /* explicit — prevents inheritance-based transition inconsistency on first load */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#bz-loader-overlay::before,
#bz-loader-overlay::after {
  content: none;
}

/* bz-loader-instant intentionally removed — class is no longer added by any script */

/* FIX: overlapping splash + auth-gate text on refresh ──────────────────────
   Previously this faded opacity 1→0 over the SAME 0.5s window that the
   auth gate (#bz-auth-gate.bz-gate-visible) fades opacity 0→1 over its own
   0.28s — both fully-opaque text layers (logo/"BEAT ZEN"/tagline vs.
   Sign Up/Sign In copy) were visible and crossfading on top of each other
   at the same screen position for ~0.28s, reading as garbled double text.
   Fix: pointer-events turn off immediately (no functional cost), but the
   visual opacity fade is delayed until AFTER the gate's own 0.28s fade-in
   animation has already finished and settled at opacity:1. By the time the
   loader visibly starts to fade, the gate is a single, fully-rendered,
   non-animating layer underneath it, so the loader fades to reveal a
   static screen instead of crossfading into another moving one. */
#bz-loader-overlay.bz-loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
    visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.bz-loader-ring {
  position: relative;
  width: 108px;
  height: 108px;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.bz-loader-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: bzRingSpin 2.2s linear infinite;
}

@keyframes bzRingSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.bz-loader-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 3;
}

.bz-loader-ring-fill {
  fill: none;
  stroke: url(#bzRingGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 60;
}

.bz-loader-ring img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
}

.bz-loader-brand {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e2d9ff 0%, #a78bfa 50%, #60a5fa 100%);
  color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}

.bz-loader-tagline {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 38px;
}

.bz-loader-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 220px;
}

.bz-loader-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.bz-loader-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  animation: bzDotWave 1.2s ease-in-out infinite;
}

.bz-loader-dots span:nth-child(1) {
  animation-delay: 0s;
  background: #7c3aed;
}

.bz-loader-dots span:nth-child(2) {
  animation-delay: 0.18s;
  background: #4f46e5;
}

.bz-loader-dots span:nth-child(3) {
  animation-delay: 0.36s;
  background: #2575fc;
}

.bz-loader-dots span:nth-child(4) {
  animation-delay: 0.54s;
  background: #0ea5e9;
}

@keyframes bzDotWave {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  40% {
    transform: scale(1.25);
    opacity: 1;
  }
}

.bz-loader-status {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  letter-spacing: 0.3px;
  min-height: 1.3em;
}

/* PLAY BUTTONS & HIGHLIGHTS */

.album-card-img-wrap {
  position: relative;
  overflow: hidden;
}

/* ── Mobile touch: keep music bars visible on now-playing card ── */

.bze-card-play:hover {
  background: #1db954 !important;
  box-shadow: 0 4px 18px rgba(29, 185, 84, 0.55) !important;
}

.bze-card-play--active {
  background: #1db954 !important;
  box-shadow: 0 4px 18px rgba(29, 185, 84, 0.55) !important;
}

.song-item.active {
  background: transparent !important;
  border: 2px solid #1db954 !important;
}

.song-item.active .song-item-title {
  color: inherit !important;
}


/* ── Guarantee: hide signed-in panel from first paint.
              auth.js calls showSignedIn() only after Firebase confirms the user.
              Using a class toggle so JS can override without fighting inline style. ── */
#bz-auth-signedin {
  display: none !important;
}

#bz-auth-signedin.bz-auth-visible {
  display: block !important;
}

/* ══════════════════════════════════════════════════════
           AUTH GATE OVERLAY — fully responsive, viewport-safe
           Uses 100dvh so mobile browser chrome is excluded.
        ══════════════════════════════════════════════════════ */

/* ── Overlay wrapper ─────────────────────────────────── */
#bz-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: linear-gradient(160deg, #08081a 0%, #0e0b22 55%, #060612 100%);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  /* fallback for browsers without dvh */
  min-height: 100dvh;
  /* accounts for mobile browser chrome (address bar, bottom bar) */
  padding: 16px;
  box-sizing: border-box;
}

#bz-auth-gate.bz-gate-visible {
  display: flex;
  animation: bzGateFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bzGateFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ambient blobs — pointer-events:none so they never interfere */
#bz-auth-gate::before {
  content: '';
  position: fixed;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  top: -80px;
  left: -60px;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

#bz-auth-gate::after {
  content: '';
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, #2575fc 0%, transparent 70%);
  bottom: -50px;
  right: -50px;
  filter: blur(80px);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

/* ── Card ────────────────────────────────────────────── */
.bz-gate-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.09) 0%, rgba(37, 117, 252, 0.05) 100%);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 22px;
  padding: clamp(12px, 2.5vw, 18px) clamp(14px, 3vw, 20px) clamp(10px, 2vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.10);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-sizing: border-box;
}

/* ── Brand row ───────────────────────────────────────── */
.bz-gate-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  flex-shrink: 0;
}

.bz-gate-brand img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.5);
}

.bz-gate-brand-name {
  font-size: clamp(0.88rem, 2.5vw, 1.05rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e2d9ff 0%, #a78bfa 50%, #60a5fa 100%);
  color: transparent;
  background-clip: text;
}

/* ── Lock icon ───────────────────────────────────────── */
.bz-gate-lock {
  width: clamp(50px, 11vw, 62px);
  height: clamp(50px, 11vw, 62px);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(37, 117, 252, 0.12));
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(12px, 2.5vh, 18px);
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.22);
  flex-shrink: 0;
}

.bz-gate-lock i {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  color: #a78bfa;
}

/* ── Text ────────────────────────────────────────────── */
.bz-gate-title {
  font-size: clamp(1rem, 4vw, 1.22rem);
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: clamp(5px, 1vh, 8px);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.bz-gate-subtitle {
  font-size: clamp(0.78rem, 2.5vw, 0.84rem);
  color: rgba(255, 255, 255, 0.48);
  text-align: center;
  line-height: 1.55;
  margin-bottom: clamp(12px, 2.5vh, 18px);
  max-width: 310px;
  flex-shrink: 0;
}

/* ── Action buttons ──────────────────────────────────── */
.bz-gate-actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: clamp(7px, 1.2vh, 10px);
  flex-shrink: 0;
}

.bz-gate-signup-btn {
  flex: 1;
  padding: clamp(11px, 2vh, 13px) 12px;
  border-radius: 13px;
  border: 1.5px solid rgba(124, 58, 237, 0.45);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(37, 117, 252, 0.12));
  color: #e2d9fc;
  font-size: clamp(0.82rem, 2.3vw, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
}

.bz-gate-signup-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 117, 252, 0.20));
  border-color: rgba(124, 58, 237, 0.70);
  transform: translateY(-1px);
}

.bz-gate-signup-btn:active {
  transform: scale(0.98);
}

.bz-gate-signin-btn {
  flex: 1;
  padding: clamp(11px, 2vh, 13px) 12px;
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.60);
  font-size: clamp(0.82rem, 2.3vw, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
}

.bz-gate-signin-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.bz-gate-signin-btn:active {
  transform: scale(0.98);
}

.bz-gate-signin-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: clamp(2px, 0.5vh, 4px);
  font-size: clamp(0.76rem, 2.2vw, 0.82rem);
  color: rgba(255, 255, 255, 0.36);
  flex-wrap: wrap;
}

.bz-gate-signin-link {
  background: none;
  border: none;
  color: #a78bfa;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bz-gate-signin-link:hover {
  color: #c4b5fd;
}

/* ── Footer / open settings ──────────────────────────── */
.bz-gate-footer {
  margin-top: clamp(8px, 1.5vh, 12px);
  text-align: center;
  flex-shrink: 0;
}

.bz-gate-settings-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.40);
  font-size: clamp(0.74rem, 2vw, 0.78rem);
  font-family: inherit;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}

.bz-gate-settings-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
}

/* ── Very small screens (< 360px) ────────────────────── */
@media (max-width: 359px) {
  #bz-auth-gate {
    padding: 10px;
  }

  .bz-gate-card {
    border-radius: 16px;
  }

  .bz-gate-lock {
    width: 44px;
    height: 44px;
  }

  .bz-gate-lock i {
    font-size: 1.1rem;
  }

  .bz-gate-subtitle {
    display: none;
  }

  /* hide on tiny screens to save space */
}

/* ── Short viewport (landscape mobile, < 520px tall) ─── */
@media (max-height: 520px) {
  .bz-gate-brand {
    margin-bottom: 10px;
  }

  .bz-gate-lock {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }

  .bz-gate-lock i {
    font-size: 1rem;
  }

  .bz-gate-title {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .bz-gate-subtitle {
    font-size: 0.74rem;
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .bz-gate-actions {
    gap: 6px;
    flex-direction: row;
  }

  .bz-gate-signup-btn {
    padding: 9px 10px;
    font-size: 0.81rem;
  }

  .bz-gate-signin-btn {
    padding: 9px 10px;
    font-size: 0.81rem;
  }

  .bz-gate-footer {
    margin-top: 8px;
  }
}

/* ── Auth Notice Banner (inside Settings) ───────────────── */
#bz-auth-notice {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(37, 117, 252, 0.08));
  border: 1.5px solid rgba(124, 58, 237, 0.28);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  display: none;
}

.bz-auth-notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.bz-auth-notice-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.bz-auth-notice-icon i {
  color: #fff;
  font-size: 1rem;
}

.bz-auth-notice-text h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e2d9fc;
}

.bz-auth-notice-text p {
  margin: 0;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.5;
}

/* ── Utility ────────────────────────────────────────────── */
.bz-hidden {
  display: none !important;
}

/* ── Email Auth Divider ─────────────────────────────────── */
.bz-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

.bz-auth-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.bz-auth-divider-text {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Email Auth Toggle Buttons ──────────────────────────── */
.bz-email-auth-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.bz-email-auth-toggle-btn {
  flex: 1;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(124, 58, 237, 0.45);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(37, 117, 252, 0.10));
  color: #e2d9fc;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.bz-email-auth-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 117, 252, 0.18));
  border-color: rgba(124, 58, 237, 0.7);
  transform: translateY(-1px);
}

.bz-email-auth-toggle-btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

.bz-email-auth-toggle-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ── Email Form Container ───────────────────────────────── */
.bz-email-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: bzFormSlideIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes bzFormSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bz-email-form-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e2d9fc;
  margin-bottom: 6px;
}

.bz-form-back-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.8rem;
  transition: background 0.18s, color 0.18s;
}

.bz-form-back-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #fff;
}

/* ── Fields ─────────────────────────────────────────────── */
.bz-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.bz-field-label {
  font-size: 0.80rem;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 2px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bz-field-input {
  width: 100%;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}

.bz-field-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.bz-field-input:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.10);
}

.bz-field-hint {
  font-size: 0.72rem;
  min-height: 16px;
  transition: color 0.2s;
}

.bz-field-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.bz-field-pw-wrap .bz-field-input {
  padding-right: 38px;
}

.bz-pw-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  font-size: 0.82rem;
  transition: color 0.18s;
}

.bz-pw-toggle:hover {
  color: #a78bfa;
}

/* ── Form Error ─────────────────────────────────────────── */
.bz-form-error {
  font-size: 0.8rem;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 8px 11px;
}

.bz-form-success {
  font-size: 0.8rem;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 8px 11px;
}

/* ── Submit Button ──────────────────────────────────────── */
.bz-form-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}

.bz-form-submit-btn:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bz-form-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ── Switch text ────────────────────────────────────────── */
.bz-form-switch-text {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 10px;
}

.bz-form-link-btn {
  background: none;
  border: none;
  color: #a78bfa;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}

.bz-form-link-btn:hover {
  color: #c4b5fd;
}

.bz-otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.bz-otp-digit {
  width: 42px;
  height: 50px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
  caret-color: #7c3aed;
}

.bz-otp-digit:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}

.bz-otp-digit.bz-otp-filled {
  border-color: #a78bfa;
}

@media (max-width: 380px) {
  .bz-otp-digit {
    width: 36px;
    height: 44px;
    font-size: 1.1rem;
  }

  .bz-otp-inputs {
    gap: 5px;
  }
}

/* ── Forgot / Reset Password Step Containers ────────────── */
/* Each step div must be its own flex column so children
           get consistent spacing without relying on browser margins */
#bz-forgot-step-input,
#bz-forgot-step-reset {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* we control spacing individually below */
}

/* Header row */
#bz-forgot-step-input .bz-email-form-header,
#bz-forgot-step-reset .bz-email-form-header {
  margin-bottom: 14px;
}

/* Subtitle / description paragraph */
#bz-forgot-step-input>p,
#bz-forgot-step-reset>p {
  margin: 0 0 18px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

/* Field groups — consistent gap between label and input */
#bz-forgot-step-input .bz-field-wrap,
#bz-forgot-step-reset .bz-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  /* breathing room between consecutive fields */
}

/* Last field-wrap before error / button shouldn't double-margin */
#bz-forgot-step-input .bz-field-wrap:last-of-type,
#bz-forgot-step-reset .bz-field-wrap:last-of-type {
  margin-bottom: 0;
}

/* Labels — slightly brighter, more readable */
#bz-forgot-step-input .bz-field-label,
#bz-forgot-step-reset .bz-field-label {
  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.52);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Inputs — cleaner focus ring */
#bz-forgot-step-input .bz-field-input,
#bz-forgot-step-reset .bz-field-input {
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  color: #fff;
  font-size: 0.91rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  width: 100%;
}

#bz-forgot-step-input .bz-field-input:focus,
#bz-forgot-step-reset .bz-field-input:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.09);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

#bz-forgot-step-input .bz-field-input::placeholder,
#bz-forgot-step-reset .bz-field-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Error pill — separated from the field above it with clear gap */
#bz-forgot-step-input .bz-form-error,
#bz-forgot-step-reset .bz-form-error {
  margin-top: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 13px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  font-size: 0.79rem;
  color: #fca5a5;
  line-height: 1.45;
  animation: bzErrorShake 0.28s ease;
}

#bz-forgot-step-input .bz-form-error::before,
#bz-forgot-step-reset .bz-form-error::before {
  content: '\f071';
  /* fa-triangle-exclamation */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.78rem;
  color: #f87171;
  flex-shrink: 0;
  margin-top: 1px;
}

@keyframes bzErrorShake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  50% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Submit button — extra top breathing room */
#bz-forgot-step-input .bz-form-submit-btn,
#bz-forgot-step-reset .bz-form-submit-btn {
  margin-top: 8px;
}

/* "Remembered it?" switch text */
#bz-forgot-step-input .bz-form-switch-text {
  margin-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
}

/* ── Sent / Done confirmation steps ─────────────────────── */
#bz-forgot-step-sent,
#bz-forgot-step-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 12px 4px;
}

#bz-forgot-step-sent h3,
#bz-forgot-step-done h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

#bz-forgot-step-sent p,
#bz-forgot-step-done p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
  margin: 0 0 6px;
}

#bz-forgot-step-sent .bz-form-submit-btn,
#bz-forgot-step-done .bz-form-submit-btn {
  margin-top: 18px;
  width: 100%;
}

/* Icon circle for sent / done steps */
.bz-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  flex-shrink: 0;
}

/* ============================================================
   33. EXTRACTED INLINE STYLES — element-level rules
   ============================================================ */


/* Sync rows layout (Settings > Account) */
/* #bz-upload-btn — removed; live sync needs no manual controls */

.bz-sync-row--mt {
  margin-top: 10px;
}

/* Keyboard Shortcuts row */
.bz-shortcuts-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* View Shortcuts button */
#view-shortcuts-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* Forgot password link row */
.bz-forgot-link-row {
  text-align: right;
  margin-top: 15px;
  margin-bottom: 15px;
}

#bz-forgot-link-btn {
  font-size: 0.8rem;
}

/* Field hint warning variant */
.bz-field-hint--warning {
  color: #ef4444;
  font-weight: 500;
}

/* Auth step icon variants */
.bz-step-icon--purple {
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.bz-step-icon--success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.bz-step-icon--purple i {
  color: #fff;
  font-size: 1.5rem;
}

.bz-step-icon--success i {
  color: #fff;
  font-size: 1.6rem;
}

/* Auth text utility variants */
.bz-text-muted-inline {
  color: rgba(255, 255, 255, 0.5);
}

.bz-text-dim-sm {
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.38);
}

.bz-text-subtle-strong {
  color: rgba(255, 255, 255, 0.55);
}

.bz-text-accent-purple {
  color: #a78bfa;
}

/* Submit button gradient variants */
.bz-btn--purple-gradient {
  background: linear-gradient(135deg, #7c3aed, #2575fc) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35) !important;
}

.bz-btn--success-gradient {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35) !important;
}

/* Toast container — defined in section 21 above */

/* Delete confirm popup */
#delete-confirm-popup .timer-popup-content {
  border: 1px solid #e74c3c;
  padding: 2rem 1rem;
  text-align: center;
}

#delete-confirm-popup h3 {
  color: #ecf0f1;
  margin-top: 0;
}

#delete-confirm-popup p {
  color: #bdc3c7;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.bz-popup-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#confirm-delete-btn,
#cancel-delete-btn {
  width: 85%;
  height: 45px;
  border-radius: 8px;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

#confirm-delete-btn {
  background: #e74c3c;
}

#cancel-delete-btn {
  background: #2575fc;
}

/* Player left click target */
.player-left {
  cursor: pointer;
}

/* Timer heading (initially hidden — controlled by JS) */
#timer-heading {
  display: none;
  /* shown via JS when timer starts */
}

/* Modal create/list UI (initially hidden — controlled by JS) */
#modal-create-ui,
#modal-list-ui {
  display: none;
  width: 100%;
}

/* #fs-goto-playlist-btn — display controlled via inline style by script.js */

/* #bz-upload-btn and #bz-download-btn removed — live sync needs no manual controls */

/* #bz-settings-locked — display controlled via inline style by auth.js */

/* ============================================================
   34. ADDITIONAL EXTRACTED — Second Pass
   ============================================================ */

/* Success popup icon */
.bz-success-icon {
  font-size: 3.5rem;
  color: #38c71b;
  margin-bottom: 10px;
}

/* Playlist modal — top z-index layer */
.bz-modal--top {
  z-index: 20001;
}

/* Field hint warning icon spacing */
.bz-field-hint--warning i {
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Sleep Timer — Divider
   ════════════════════════════════════════════════════════════════════════════ */
.bz-timer-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.bz-timer-divider::before,
.bz-timer-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.28), transparent);
}

.bz-timer-divider span {
  font-size: 0.6rem;
  color: rgba(196, 181, 253, 0.60);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(109, 40, 217, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.28);
  padding: 2px 9px;
  border-radius: 20px;
}

/* ── OR section wrapper (divider + choose manually label) ── */
.bz-timer-or-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
  gap: 10px;
}

/* ── "Choose Manually" label under the OR divider ── */
.bz-choose-manual-label {
  font-size: 0.63rem;
  color: rgba(196, 181, 253, 0.50);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 700;
  margin: 0 0 0.35rem;
  text-align: left;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bz-choose-manual-label i {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Sleep Timer Quick-Presets
   ════════════════════════════════════════════════════════════════════════════ */
.bz-timer-presets {
  display: flex;
  gap: 7px;
  justify-content: flex-start;
  margin-bottom: 0.3rem;
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bz-preset-btn {
  flex: 1;
  padding: 7px 4px 9px;
  background: rgba(109, 40, 217, 0.08);
  border: 1.5px solid rgba(139, 92, 246, 0.20);
  border-radius: 14px;
  color: rgba(196, 181, 253, 0.70);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
  outline: none;
  touch-action: manipulation;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.bz-preset-num {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.bz-preset-unit {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.70;
}

.bz-preset-btn:hover {
  background: rgba(109, 40, 217, 0.18);
  border-color: rgba(139, 92, 246, 0.42);
  color: #c4b5fd;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.25);
}

.bz-preset-btn:active {
  transform: scale(0.94);
}

.bz-preset-btn.bz-preset-active {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.80), rgba(67, 56, 202, 0.80));
  border-color: rgba(139, 92, 246, 0.70);
  color: #f0e8ff;
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px) scale(1.03);
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Sleep Timer Preset Confirmation Panel
   ════════════════════════════════════════════════════════════════════════════ */
.bz-preset-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px;
  width: 100%;
  position: relative;
  z-index: 1;
  animation: bz-confirm-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes bz-confirm-in {
  from {
    opacity: 0;
    transform: scale(0.90) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bz-confirm-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0px;
}

.bz-confirm-icon i {
  font-size: 1.4rem;
  color: #c4b5fd;
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.85));
  position: relative;
  z-index: 1;
  animation: bz-moon-bob 4s ease-in-out infinite;
}

.bz-confirm-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.35);
  animation: bz-ring-expand 2s ease-out infinite;
}

.bz-confirm-label {
  font-size: 0.70rem;
  color: rgba(196, 181, 253, 0.50);
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.bz-confirm-duration {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #e2d9f3, #c4b5fd, #a78bfa);
  color: transparent;
  background-clip: text;
  margin: 0 0 8px;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.40));
}

.bz-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.bz-confirm-start {
  width: 100%;
  padding: 11px 20px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 60%, #4338ca 100%);
  border: none;
  border-radius: 14px;
  color: #f0e8ff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 22px rgba(109, 40, 217, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: inherit;
}

.bz-confirm-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(109, 40, 217, 0.62);
}

.bz-confirm-start:active {
  transform: scale(0.97);
}

.bz-confirm-back {
  width: 100%;
  padding: 9px 20px;
  background: rgba(109, 40, 217, 0.07);
  border: 1.5px solid rgba(139, 92, 246, 0.22);
  border-radius: 12px;
  color: rgba(196, 181, 253, 0.65);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
}

.bz-confirm-back:hover {
  border-color: rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
  background: rgba(109, 40, 217, 0.14);
}

.bz-confirm-back:active {
  transform: scale(0.97);
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Quick-Add Swipe Gesture (Swipe right → add to queue)
   ════════════════════════════════════════════════════════════════════════════ */
.song-item {
  position: relative;
  overflow: hidden;
}

.bz-swipe-hint {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 18px;
  gap: 8px;
  background: linear-gradient(90deg, rgba(37, 117, 252, 0.85) 0%, rgba(37, 117, 252, 0.0) 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  border-radius: inherit;
  z-index: 0;
}

.bz-swipe-hint i {
  font-size: 1rem;
}

.song-item.bz-swiping .bz-swipe-hint {
  opacity: 1;
}

.song-item-inner {
  position: relative;
  z-index: 1;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(.22, .68, 0, 1.2);
  background: inherit;
  display: flex;
  align-items: center;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Global Skeleton / Shimmer utilities
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes bz-shimmer-slide {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.bz-skel {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.11) 50%,
      rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
  animation: bz-shimmer-slide 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Song-row skeleton */
.bz-song-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  pointer-events: none;
}

.bz-song-skeleton .bz-skel-thumb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
}

.bz-song-skeleton .bz-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bz-song-skeleton .bz-skel-title {
  height: 11px;
  width: 62%;
}

.bz-song-skeleton .bz-skel-artist {
  height: 9px;
  width: 38%;
  animation-delay: 0.12s;
}

/* stagger skeleton rows */
.bz-song-skeleton:nth-child(2) .bz-skel {
  animation-delay: 0.08s;
}

.bz-song-skeleton:nth-child(3) .bz-skel {
  animation-delay: 0.16s;
}

.bz-song-skeleton:nth-child(4) .bz-skel {
  animation-delay: 0.24s;
}

.bz-song-skeleton:nth-child(5) .bz-skel {
  animation-delay: 0.32s;
}


/* (sleep timer preset confirm CSS is already defined above in the presets section) */

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL SKELETON / SHIMMER SYSTEM — v2
   Single keyframe, unified .bz-skel base class (already defined above).
   All new surface-specific rules live here so they are easy to find / remove.
   Naming convention:
     .bz-sk-*          → skeleton containers / structural wrappers
     .bz-sk-*__*       → child slots inside a skeleton container
   Every skeleton is pointer-events:none so stray taps never fire.
   Remove a surface by deleting its block — nothing else will break.
══════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fade-out transition when real content replaces a skeleton ─────────── */
@keyframes bz-skel-fadein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bz-sk-replaced {
  /* add to real content wrapper after skeleton swap */
  animation: bz-skel-fadein 0.22s ease-out both;
}

/* ── 1. HOME — year-section header skeleton ───────────────────────────────── */
/* Mimics the <h2>2024</h2> heading above each album row */
.bz-sk-year-heading {
  height: 22px;
  width: 64px;
  border-radius: 6px;
  margin: 18px 0 12px 2px;
  pointer-events: none;
}

/* ── 2. HOME / PLAYLISTS — horizontal album-card skeleton row ─────────────── */
/* Mimics .albums-grid containing .album-card items (140 × ~175px) */
.bz-sk-grid {
  display: flex;
  gap: 12px;
  overflow: hidden;
  /* clip so no horizontal scroll flash */
  padding: 2px 0 6px;
  pointer-events: none;
}

.bz-sk-card {
  flex: 0 0 140px;
  min-width: 140px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.bz-sk-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px 10px 0 0;
}

.bz-sk-card__title {
  height: 11px;
  width: 72%;
  border-radius: 5px;
  margin: 9px auto 4px;
}

.bz-sk-card__sub {
  height: 8px;
  width: 48%;
  border-radius: 4px;
  margin: 0 auto 10px;
  animation-delay: 0.1s;
}

/* Stagger shimmer across the card row for a wave effect */
.bz-sk-card:nth-child(2) .bz-skel {
  animation-delay: 0.07s;
}

.bz-sk-card:nth-child(3) .bz-skel {
  animation-delay: 0.14s;
}

.bz-sk-card:nth-child(4) .bz-skel {
  animation-delay: 0.21s;
}

.bz-sk-card:nth-child(5) .bz-skel {
  animation-delay: 0.28s;
}

.bz-sk-card:nth-child(6) .bz-skel {
  animation-delay: 0.35s;
}

/* ── 3. HOME — full year-section block (heading + grid) ──────────────────── */
.bz-sk-year-section {
  margin-bottom: 28px;
  pointer-events: none;
}

/* ── 4. PLAYLISTS — section header skeleton ───────────────────────────────── */
/* Mimics the bzp-section-head icon + title + subtitle row */
.bz-sk-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  pointer-events: none;
}

.bz-sk-section-head__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bz-sk-section-head__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bz-sk-section-head__title {
  height: 13px;
  width: 140px;
  border-radius: 6px;
}

.bz-sk-section-head__sub {
  height: 9px;
  width: 200px;
  border-radius: 5px;
  animation-delay: 0.1s;
}

/* ── 5. ALBUM DETAIL — header (cover + meta) skeleton ────────────────────── */
.bz-sk-album-header {
  display: flex;
  gap: 18px;
  padding: 16px 16px 20px;
  pointer-events: none;
}

.bz-sk-album-header__cover {
  width: 110px;
  height: 110px;
  min-width: 110px;
  border-radius: 14px;
}

.bz-sk-album-header__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.bz-sk-album-header__title {
  height: 16px;
  width: 80%;
  border-radius: 7px;
}

.bz-sk-album-header__artist {
  height: 11px;
  width: 55%;
  border-radius: 6px;
  animation-delay: 0.08s;
}

.bz-sk-album-header__count {
  height: 9px;
  width: 40%;
  border-radius: 5px;
  animation-delay: 0.16s;
}

/* Action-bar skeleton (Play + Share buttons) */
.bz-sk-album-header__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.bz-sk-album-header__btn {
  height: 34px;
  width: 90px;
  border-radius: 20px;
}

.bz-sk-album-header__btn:nth-child(2) {
  width: 66px;
  animation-delay: 0.1s;
}

/* ── 6. SEARCH RESULTS — skeleton section ─────────────────────────────────── */
.bz-sk-search {
  padding: 8px 0;
  pointer-events: none;
}

.bz-sk-search__heading {
  height: 14px;
  width: 90px;
  border-radius: 6px;
  margin-bottom: 14px;
}

/* ── 7. SETTINGS — profile card skeleton ─────────────────────────────────── */
.bz-sk-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  pointer-events: none;
}

.bz-sk-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bz-sk-profile__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bz-sk-profile__name {
  height: 13px;
  width: 55%;
  border-radius: 6px;
}

.bz-sk-profile__email {
  height: 10px;
  width: 75%;
  border-radius: 5px;
  animation-delay: 0.1s;
}

/* ── 8. Responsive — wider cards on larger screens ────────────────────────── */
@media (min-width: 480px) {
  .bz-sk-card {
    flex: 0 0 160px;
    min-width: 160px;
  }

  .bz-sk-album-header__cover {
    width: 130px;
    height: 130px;
    min-width: 130px;
  }
}

@media (min-width: 768px) {
  .bz-sk-card {
    flex: 0 0 180px;
    min-width: 180px;
  }

  .bz-sk-album-header__cover {
    width: 150px;
    height: 150px;
    min-width: 150px;
  }

  .bz-sk-section-head__sub {
    width: 260px;
  }
}

/* ── SDM: Collapse / Expand header ──────────────────────────────────── */
/* ── SDM: collapse button lives in the main setting-item row ── */
.sdm-setting-item {
  gap: 10px;
}

.sdm-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: 26px;
  padding: 0 10px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 20px;
  color: rgba(196, 181, 253, 0.80);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.sdm-collapse-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* When toggle is ON the button must always be clickable — never truly hidden */
.sdm-collapse-btn--hidden {
  visibility: hidden;
  pointer-events: none;
}

.sdm-collapse-btn:hover {
  background: rgba(139, 92, 246, 0.28);
  border-color: rgba(139, 92, 246, 0.65);
  color: #c4b5fd;
}

.sdm-collapse-btn:active {
  transform: scale(0.93);
}

/* Chevron rotates smoothly: up = panel open, down = panel collapsed */
.sdm-collapse-btn .fa-chevron-up {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.60rem;
}

.sdm-collapse-btn.collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

/* Blinking dot inside the ON pill */
@keyframes sdm-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* ── SDM: Collapsible panel body ──────────────────────────────────────── */
.sdm-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════
   LYRICS OVERLAY  v4  (moved here from duplicate block)
   ═══════════════════════════════════════════════════════ */
#bz-lyr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-color, #0d0d14);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Blurred album-art background layer ── */
#bz-lyr-overlay::before {
  content: '';
  position: absolute;
  inset: -40px;
  /* overscan so blur edges don't show */
  z-index: 0;
  background-image: var(--lyr-cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(52px) saturate(1.6) brightness(0.38);
  transform: scale(1.08);
  transition: background-image 0.4s ease, filter 0.4s ease;
  pointer-events: none;
}

/* ── Dark gradient scrim over the blur for text legibility ── */
#bz-lyr-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.30) 40%,
      rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

/* All direct children sit above the pseudo-element layers */
#bz-lyr-overlay>* {
  position: relative;
  z-index: 2;
}

#bz-lyr-overlay.bz-lyr-in {
  transform: translateY(0);
}

#bz-lyr-overlay.bz-lyr-exit {
  transform: translateY(100%);
}

.bz-lyr-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ── Mini player bar ── */
.bz-lyr-miniplayer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 64px;
  box-sizing: border-box;
}

.bz-lyr-mini-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bz-lyr-mini-cover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}

.bz-lyr-mini-info {
  min-width: 0;
  flex: 1;
}

.bz-lyr-mini-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-lyr-mini-artist {
  font-size: 11px;
  color: var(--text-muted, #999);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-lyr-mini-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

.bz-lyr-mini-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.bz-lyr-ctrl {
  background: none;
  border: none;
  color: var(--text-color, #fff);
  font-size: 15px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.8;
  transition: background 0.15s, opacity 0.15s;
}

.bz-lyr-ctrl:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.bz-lyr-ctrl.bz-lyr-pp {
  background: rgba(255, 255, 255, 0.1);
  font-size: 16px;
  width: 40px;
  height: 40px;
  opacity: 1;
}

.bz-lyr-ctrl.bz-lyr-pp:hover {
  background: rgba(255, 255, 255, 0.18);
}

.bz-lyr-close {
  background: none;
  border: none;
  color: var(--text-muted, #999);
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.bz-lyr-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.bz-lyr-edit-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #aaa);
  font-size: 14px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}

.bz-lyr-edit-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* ── Sync toggle button ── */
.bz-lyr-sync-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #aaa);
  font-size: 13px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}

.bz-lyr-sync-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.bz-lyr-sync-btn.active {
  background: var(--accent-color, #a78bfa);
  border-color: transparent;
  color: #fff;
}

/* ── EN transliteration toggle switch ── */
.bz-lyr-translit-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.bz-lyr-translit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #aaa);
  letter-spacing: 0.5px;
  transition: color 0.18s;
}

.bz-lyr-translit-toggle.active .bz-lyr-translit-label {
  color: var(--accent-color, #a78bfa);
}

.bz-lyr-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.bz-lyr-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bz-lyr-translit-toggle.active .bz-lyr-toggle-track {
  background: var(--accent-color, #a78bfa);
  border-color: transparent;
}

.bz-lyr-translit-toggle.active .bz-lyr-toggle-thumb {
  transform: translateX(16px);
}

/* ── Lyrics scroll area ── */
.bz-lyr-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 48px;
}

.bz-lyr-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.bz-lyr-line {
  display: block;
  width: 100%;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-color, #fff);
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.bz-lyr-gap {
  height: 16px;
  width: 100%;
}

/* ── Loading ── */
.bz-lyr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 60px;
  color: var(--text-muted, #999);
  font-size: 14px;
}

.bz-lyr-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-color, #a78bfa);
  border-radius: 50%;
  animation: bzLyrSpin 0.75s linear infinite;
}

@keyframes bzLyrSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Error ── */
.bz-lyr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px 0;
  text-align: center;
  color: var(--text-muted, #999);
}

.bz-lyr-error .fa-music {
  font-size: 34px;
  opacity: 0.25;
}

.bz-lyr-error p {
  font-size: 15px;
  margin: 0;
}

.bz-lyr-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.bz-lyr-links a {
  color: var(--accent-color, #a78bfa);
  font-size: 13px;
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 20px;
  transition: background 0.18s;
}

.bz-lyr-links a:hover {
  background: rgba(167, 139, 250, 0.1);
}

.bz-lyr-admin-tip {
  font-size: 12px;
  color: var(--accent-color, #a78bfa);
  margin-top: 8px;
  opacity: 0.75;
}

/* ── Admin editor ── */
.bz-lyr-editor {
  flex-direction: column;
  padding: 10px 14px 14px;
  gap: 10px;
  background: var(--bg-color, #0f0f0f);
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bz-lyr-textarea {
  width: 100%;
  min-height: 240px;
  max-height: 55vh;
  resize: vertical;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-color, #fff);
  font-size: 14px;
  line-height: 1.7;
  padding: 12px 14px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.18s;
}

.bz-lyr-textarea:focus {
  border-color: var(--accent-color, #a78bfa);
}

.bz-lyr-editor-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.bz-lyr-cancel,
.bz-lyr-save {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.18s;
}

.bz-lyr-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color, #fff);
}

.bz-lyr-save {
  background: var(--accent-color, #a78bfa);
  color: #fff;
}

.bz-lyr-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bz-lyr-cancel:hover {
  background: rgba(255, 255, 255, 0.13);
}

.bz-lyr-save:hover:not(:disabled) {
  opacity: 0.87;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .bz-lyr-line {
    font-size: 15px;
  }

  .bz-lyr-mini-cover {
    width: 38px;
    height: 38px;
  }

  .bz-lyr-mini-title {
    font-size: 12px;
  }

  .bz-lyr-mini-artist {
    font-size: 10px;
  }

  /* Keep EN label visible on small screens — just shrink it */
  .bz-lyr-translit-label {
    font-size: 10px;
    letter-spacing: 0;
  }

  .bz-lyr-ctrl {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .bz-lyr-ctrl.bz-lyr-pp {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .bz-lyr-edit-btn,
  .bz-lyr-sync-btn,
  .bz-lyr-close {
    width: 32px;
    height: 32px;
  }

  .bz-lyr-miniplayer {
    gap: 6px;
    padding: 8px 10px;
  }

  .bz-lyr-mini-right {
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .bz-lyr-mini-info {
    display: none;
  }
}

/* ── LRC timestamp-sync line states ── */
.bz-lyr-timed {
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.35;
  transform: scale(0.94);
  cursor: pointer;
  position: relative;
  padding: 2px 0;
  --lyr-fill: 0;
}

.bz-lyr-timed:hover {
  opacity: 0.6;
  transform: scale(0.97);
}

.bz-lyr-timed.bz-lyr-past {
  opacity: 0.25;
  transform: scale(0.92);
  color: var(--text-color, #fff);
}

.bz-lyr-timed.bz-lyr-active {
  opacity: 1;
  transform: scale(1.05);
  font-weight: 700;
  /* Left-to-right fill: accent sweeps across the text as the line plays */
  background: linear-gradient(to right,
      var(--accent-color, #a78bfa) calc(var(--lyr-fill, 0) * 100%),
      rgba(255, 255, 255, 0.9) calc(var(--lyr-fill, 0) * 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color, #a78bfa) 55%, transparent));
}

/* ============================================================
   BEAT ZEN — PREMIUM STYLESHEET
   Section order:
     1.  Design Tokens (CSS variables)
     2.  Dark Mode Token Overrides
     3.  Global Reset & Base
     4.  Custom Scrollbar
     5.  Animations & Keyframes
     6.  Navigation Bar
     7.  Search Bar & Recent Searches
     8.  Home — Album Grid & Cards
     9.  Playlists — Horizontal Scroll Rows
    10.  Album Detail View
    11.  Song List
    12.  Music Player Bar (Mini — Fixed Bottom)
    13.  Music Player — Maximised / Fullscreen
    14.  Settings & About Pages
    15.  Popups & Modals
    16.  Sleep Timer — Wheel Picker
    17.  Song 3-Dot Context Menu
    18.  Queue Overlay
    19.  Queue Clear Confirm Popup
    20.  Dark Mode Component Overrides
    21.  Utility Classes
    22.  Playlist Empty State
    23.  History Section (Playlists)
    24.  History Full Modal (Overlay)
    25.  Settings — Clear History Button
    26.  Settings — Preferences Sections
    27.  Settings — About Card
    28.  Settings — Contact Card
    29.  Micro Popup (alert / confirm replacement)
    30.  Daily Playlists Section
    31.  Settings — Account / Auth Panel
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS (CSS VARIABLES)
   Central source of truth for all colors, sizes, and effects.
   Change once here to update the entire site consistently.
   ============================================================ */
:root {
  /* Brand & Accent */
  --primary-color: #f39c12;
  --primary-hover: #e67e22;
  --primary-glow: rgba(243, 156, 18, 0.25);
  --accent-blue: #2575fc;
  --accent-blue-hover: #1a5ed8;
  --accent-green: #1db954;
  --accent-red: #e74c3c;

  /* Backgrounds */
  --bg: #2c3e50;
  --bg-card: #34495e;
  --bg-player: #1a242f;
  --bg-deep: #1a1a2e;
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --bg-glass: rgba(255, 255, 255, 0.06);
  --bg-glass-hover: rgba(255, 255, 255, 0.12);

  /* Text */
  --text: #ecf0f1;
  --text-muted: #bdc3c7;
  --text-dim: #7f8c8d;

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Navigation */
  --nav-gradient: linear-gradient(90deg, #6a11cb, #2575fc);
  --nav-height: 70px;

  /* Player */
  --player-height: 120px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-player: 0 -4px 20px rgba(0, 0, 0, 0.5);
  --shadow-popup: 0 20px 60px rgba(0, 0, 0, 0.7);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Queue overlay tokens */
  --bz-bg: rgba(8, 8, 12, 0.98);
  --bz-accent: #2575fc;
  --bz-danger: #ff4d4d;
  --bz-text-dim: #9ca3af;
  --bz-radius: 14px;
}


/* ============================================================
   2. DARK MODE TOKENS
   Override only the variables that change in full-dark mode.
   Everything using var() automatically inherits these values.
   ============================================================ */
body.dark-mode {
  --bg: #000000;
  --bg-card: #0f0f0f;
  --bg-player: #050505;
  --bg-deep: #000000;
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --text-muted: #aaaaaa;
  --text-dim: #555555;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.7);
  --nav-gradient: #000000;
}


/* ============================================================
   3. GLOBAL RESET & BASE
   Sets foundational styles: box model, font, scroll behavior.
   All interactive elements clear the blue tap highlight ring.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* always reserve scrollbar space — prevents leftward shift when loader hides */
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  padding-top: var(--nav-height);
  padding-bottom: var(--player-height);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

body.no-scroll {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
a,
.album-card,
.song-item {
  outline: none;
}

img {
  display: block;
  max-width: 100%;
}


/* ============================================================
   4. SCROLLBAR
   Thin custom scrollbar matching the dark premium theme.
   Thumb turns orange on hover to reinforce brand color.
   ============================================================ */
/* Standard scrollbar — thin, dark thumb, transparent track */
* {
  scrollbar-width: thin;
  scrollbar-color: #3d5166 transparent;
}


/* ============================================================
   5. ANIMATIONS & KEYFRAMES
   All @keyframes defined here in one place for easy reference.
   Used by: history items, popups, timers, player states.
   ============================================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-timer {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes pulse-urgent {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ============================================================
   6. NAVIGATION BAR
   Fixed top bar with gradient background and icon+label links.
   Active nav link glows in brand orange for clear wayfinding.
   ============================================================ */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--nav-gradient);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 1000;
  transition: background var(--transition-slow);
}

body.dark-mode .navbar {
  border-bottom: 1px solid var(--border);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nav-links a {
  display: flex;
  justify-content: center;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast);
  border-radius: var(--radius-md);
}

.nav-links a:hover {
  color: #ffffff;
}

.nav-link-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.nav-link-content i {
  font-size: 1.2rem;
  transition: transform var(--transition-fast);
}

.nav-links a:hover .nav-link-content i {
  transform: translateY(-2px);
}

/* Active state */
.nav-link-content.active {
  color: var(--primary-color);
  font-weight: 700;
}

.nav-link-content.active i {
  color: var(--primary-color);
  filter: drop-shadow(0 0 6px var(--primary-glow));
}

/* Mobile Nav */
@media (max-width: 768px) {
  .nav-links {
    width: 100%;
    justify-content: space-around;
    gap: 0;
    padding: 0 4px;
  }

  .nav-links a {
    padding: 6px 4px;
    flex: 1;
    justify-content: center;
  }

  .nav-link-content {
    font-size: 0.62rem;
    gap: 4px;
  }

  .nav-link-content i {
    font-size: 1.05rem;
  }
}

@media (max-width: 380px) {
  .nav-link-content {
    font-size: 0.56rem;
  }

  .nav-link-content i {
    font-size: 0.95rem;
  }
}


/* ============================================================
   7. SEARCH BAR
   Full-width input with icon overlay and animated clear button.
   Focuses with orange border glow to signal active input state.
   ============================================================ */
.search-container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.5rem 2rem 0;
  animation: fadeIn 0.3s ease;
}

.search-container.hidden {
  display: none;
}

.search-bar-wrapper {
  position: relative;
  width: 90%;
  max-width: 900px;
}

.search-bar {
  width: 100%;
  padding: 13px 48px 13px 46px;
  font-size: 16px;
  font-family: inherit;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
    background-color var(--transition-base);
}

.search-bar::placeholder {
  color: var(--text-dim);
}

.search-bar:focus {
  background-color: rgba(0, 0, 0, 0.6);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

body.dark-mode .search-bar {
  background-color: #0a0a0a;
  border-color: #222;
}

body.dark-mode .search-bar:focus {
  background-color: #111;
  border-color: var(--primary-color);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 1rem;
  pointer-events: none;
}

.clear-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  z-index: 10;
}

.clear-search-icon:hover {
  color: var(--accent-red);
}

/* ── Recent Searches Panel ── */
#recent-searches-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background: var(--bg-card, #161616);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);
  animation: rsSlideIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  /* Prevent browser native autocomplete showing above this */
  isolation: isolate;
}

@keyframes rsSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rs-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}

.rs-item:last-child {
  border-bottom: none;
}

.rs-item:hover,
.rs-item:active {
  background: rgba(255, 255, 255, 0.06);
}

.rs-item .rs-icon {
  font-size: 0.78rem;
  color: var(--text-dim, rgba(255, 255, 255, 0.35));
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.rs-item .rs-text {
  flex: 1;
  font-size: 0.90rem;
  color: var(--text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.rs-item .rs-remove {
  font-size: 0.70rem;
  color: var(--text-dim, rgba(255, 255, 255, 0.28));
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.rs-item .rs-remove:hover {
  color: var(--accent-red, #e74c3c);
  background: rgba(231, 76, 60, 0.12);
}

.rs-footer {
  display: flex;
  justify-content: flex-end;
  padding: 7px 14px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
}

.rs-clear-all {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim, rgba(255, 255, 255, 0.35));
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}

.rs-clear-all:hover {
  color: var(--accent-red, #e74c3c);
  background: rgba(231, 76, 60, 0.10);
}

body.dark-mode #recent-searches-panel {
  background: #0d0d0d;
  border-color: #1e1e1e;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.70);
}

body.dark-mode .rs-footer {
  background: rgba(0, 0, 0, 0.30);
}

/* No results message */
.no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  font-size: 1rem;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  animation: fadeIn 0.4s ease;
}

@media (max-width: 768px) {
  .search-container {
    padding: 1rem 1rem 0;
  }

  .search-bar-wrapper {
    width: 100%;
  }
}


/* ============================================================
   8. ALBUM GRID & CARDS (HOME / PLAYLISTS / ARTISTS)
   Always 3 columns on mobile, scales up on larger screens.
   Cards are strictly 1:1 ratio image + visible label below.
   ============================================================ */
/* ============================================================
   HOME — Year Sections & Album Cards
   Horizontal scroll rows matching Playlists card style.
   ============================================================ */
.year-sections-container {
  padding: 0.25rem 0 1rem;
}

.year-section {
  margin: 1.25rem 0 1.75rem;
  overflow: hidden;
}

.year-section h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 0.45rem 16px;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

/* Albums Grid — horizontal scroll carousel (matches Playlists bzp-row) */
.albums-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 16px 12px 16px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: stretch;
  justify-content: flex-start;
}

.albums-grid {
  scrollbar-width: none;
}

/* Album Card — matches bze-card exactly */
.album-card {
  flex: 0 0 140px;
  min-width: 140px;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, background 0.18s ease;
}

.album-card:hover,
.album-card:active {
  transform: scale(1.04);
  background: rgba(255, 255, 255, 0.09);
}

body.dark-mode .album-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .album-card:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* Image wrapper */
.album-card-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Strict 1:1 image with zoom on hover */
.album-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.album-card:hover img {
  transform: scale(1.06);
}

/* ══════════════════════════════════════════════════════════════
   MUSIC BARS — animated equaliser overlay on currently-playing
   album card. Hidden by default; visible when the parent card
   has the .album-card--now-playing class AND audio is playing.
   Paused state freezes the bars in place.
══════════════════════════════════════════════════════════════ */
@keyframes bz-bar1 {

  0%,
  100% {
    height: 4px;
  }

  25% {
    height: 16px;
  }

  50% {
    height: 8px;
  }

  75% {
    height: 20px;
  }
}

@keyframes bz-bar2 {

  0%,
  100% {
    height: 18px;
  }

  25% {
    height: 6px;
  }

  50% {
    height: 22px;
  }

  75% {
    height: 10px;
  }
}

@keyframes bz-bar3 {

  0%,
  100% {
    height: 10px;
  }

  25% {
    height: 22px;
  }

  50% {
    height: 4px;
  }

  75% {
    height: 16px;
  }
}

@keyframes bz-bar4 {

  0%,
  100% {
    height: 20px;
  }

  25% {
    height: 8px;
  }

  50% {
    height: 14px;
  }

  75% {
    height: 4px;
  }
}

/* Container — sits at bottom-right of the image wrap */
.album-card-music-bars {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* Individual bars */
.album-card-music-bars span {
  display: block;
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: #1db954;
  box-shadow: 0 0 6px rgba(29, 185, 84, 0.70);
  height: 4px;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  /* default: frozen */
}

.album-card-music-bars span:nth-child(1) {
  animation-name: bz-bar1;
  animation-delay: 0.00s;
}

.album-card-music-bars span:nth-child(2) {
  animation-name: bz-bar2;
  animation-delay: 0.15s;
}

.album-card-music-bars span:nth-child(3) {
  animation-name: bz-bar3;
  animation-delay: 0.30s;
}

.album-card-music-bars span:nth-child(4) {
  animation-name: bz-bar4;
  animation-delay: 0.45s;
}

/* Show bars only on the currently-playing card */
.album-card--now-playing .album-card-music-bars {
  opacity: 1;
}

/* Animate bars when audio is actually playing */
.album-card--now-playing.album-card--playing .album-card-music-bars span {
  animation-play-state: running;
}

/* Subtle green glow border on the now-playing card */
.album-card--now-playing {
  border-color: rgba(29, 185, 84, 0.50) !important;
  box-shadow: 0 0 0 1.5px rgba(29, 185, 84, 0.30);
}

/* Info label below image */
.album-info {
  padding: 8px 10px 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.album-info h2 {
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  /* Two-line clamp — no vendor prefixes */
  white-space: normal;
  overflow: hidden;
  max-height: calc(1.35em * 2);
  line-height: 1.35;
  word-break: break-word;
  text-align: center;
}

/* Responsive — tighten card size on smaller screens */
@media (max-width: 767px) {
  .year-section h2 {
    font-size: 1.4rem;
    margin-left: 14px;
  }

  .album-card {
    flex: 0 0 115px;
    min-width: 115px;
    border-radius: 12px;
  }

  .album-info {
    padding: 6px 8px 8px;
  }

  .album-info h2 {
    font-size: 0.76rem;
  }
}

@media (max-width: 480px) {
  .album-card {
    flex: 0 0 100px;
    min-width: 100px;
    border-radius: 10px;
  }

  .album-info h2 {
    font-size: 0.70rem;
  }
}


/* ============================================================
   9. PLAYLISTS SECTION — overrides (base styles now shared)
   ============================================================ */
#playlists-container .albums-grid {
  padding: 4px 16px 14px 16px !important;
}

#playlists-container .year-section h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 1.25rem 0 0.45rem 16px;
}

/* Playlists album-card info: same 2-line clamp */
#playlists-container .album-info h2 {
  font-size: 0.86rem !important;
  white-space: normal !important;
  overflow: hidden !important;
  max-height: calc(1.35em * 2) !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

@media (max-width: 767px) {
  #playlists-container .year-section h2 {
    font-size: 1.4rem !important;
    margin: 1.25rem 14px 0.4rem !important;
  }

  #playlists-container .album-info h2 {
    font-size: 0.76rem !important;
  }
}

@media (max-width: 480px) {
  #playlists-container .album-info h2 {
    font-size: 0.70rem !important;
  }
}

/* ── Playlists: grid layout matching home year-sections grid (no horizontal scroll) ── */
#playlists-container .bzp-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  padding: 4px 16px 16px 16px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

#playlists-container .bzp-card {
  flex: unset !important;
  width: 100% !important;
  min-width: 0 !important;
}

#playlists-container .bzp-card-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}

#playlists-container .bzp-card-cover img,
#playlists-container .bzp-card-gradient {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 767px) {
  #playlists-container .bzp-row {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    padding: 4px 14px 14px 14px !important;
  }
}

@media (max-width: 480px) {
  #playlists-container .bzp-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 4px 12px 14px 12px !important;
  }
}




/* ============================================================
   10. ALBUM DETAIL VIEW
   Full album page showing cover, metadata, action buttons, songs.
   Centered layout with generous max-width for comfortable reading.
   ============================================================ */
.album-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 4rem;
  position: relative;
  animation: fadeIn 0.3s ease;
}

.album-main-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 92%;
  max-width: 1100px;
  margin-top: 1.5rem;
}

body.dark-mode .album-main-content {
  background-color: #0a0a0a;
  border-color: #1a1a1a;
}

.album-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.album-info-section img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.album-text-info {
  flex-grow: 1;
  text-align: center;
}

.album-text-info h2 {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--text);
  letter-spacing: -0.5px;
}

.album-text-info p {
  margin: 6px 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Playlist/smart-playlist description — shown in album view after Songs/Duration line */
.album-playlist-desc {
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.48);
  margin: 2px 0 8px;
  line-height: 1.5;
}

/* Album action buttons row */
.album-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 12px 0 6px;
  flex-wrap: wrap;
}

.action-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 12px 0 6px;
  flex-wrap: wrap;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast), opacity var(--transition-fast);
  letter-spacing: 0.3px;
}

.action-btn:active {
  transform: scale(0.95) !important;
}

/* Primary Play button — premium gradient, sharper corners */
.action-btn.primary,
.action-btn.main-play,
.play-album-btn {
  background: var(--nav-gradient) !important;
  color: #fff !important;
  padding: 0 28px;
  min-width: 130px;
  box-shadow: 0 4px 18px rgba(37, 117, 252, 0.35);
  border-radius: 10px !important;
  border: none !important;
  height: 44px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.action-btn.primary:hover,
.action-btn.main-play:hover,
.play-album-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 117, 252, 0.45);
}

body.dark-mode .action-btn.primary,
body.dark-mode .action-btn.main-play,
body.dark-mode .play-album-btn {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  box-shadow: none;
  color: #fff !important;
}

body.dark-mode .action-btn.primary:hover,
body.dark-mode .action-btn.main-play:hover,
body.dark-mode .play-album-btn:hover {
  background: #222 !important;
  border-color: #555 !important;
}

/* Secondary buttons (Share, Delete) — icon + text label */
.action-btn.secondary {
  height: 44px;
  background: var(--bg-glass);
  color: var(--text);
  border: 1px solid var(--border-strong) !important;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 10px !important;
  padding: 0 18px;
  gap: 7px;
  white-space: nowrap;
}

.action-btn.secondary:hover {
  background: var(--bg-glass-hover);
  border-color: var(--primary-color) !important;
  transform: translateY(-2px);
}

/* Share button — subtle blue tint */
.action-btn.share-album-btn {
  color: var(--accent-blue);
  border-color: rgba(37, 117, 252, 0.35) !important;
}

.action-btn.share-album-btn:hover {
  background: rgba(37, 117, 252, 0.12);
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue);
}

/* Delete button — red tint */
.action-btn.delete-playlist-btn {
  color: var(--accent-red);
  border-color: rgba(231, 76, 60, 0.35) !important;
}

.action-btn.delete-playlist-btn:hover {
  background: rgba(231, 76, 60, 0.12);
  border-color: var(--accent-red) !important;
}

/* No hover transform on touch devices */
@media (hover: none) {
  .action-btn:hover {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .album-main-content {
    width: 96%;
    padding: 1rem;
    margin-top: 0.75rem;
  }

  .album-info-section img {
    width: 160px;
    height: 160px;
  }

  .album-text-info h2 {
    font-size: 1.5rem;
  }

  .album-text-info p {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {

  .action-btn.primary,
  .action-btn.main-play,
  .play-album-btn {
    min-width: 110px;
    padding: 0 16px;
    font-size: 0.84rem;
  }

  .action-btn.secondary {
    height: 40px;
    padding: 0 13px;
    font-size: 0.82rem;
  }
}


/* ============================================================
   11. SONG LIST
   Individual song rows in the album detail view with hover glow.
   Active song gets green border and glow to show now-playing state.
   ============================================================ */
.song-item {
  background-color: var(--bg);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  width: 100%;
  /* FIX: prevent swipe gesture from blocking tap on mobile */
  -webkit-tap-highlight-color: transparent;
}



.song-item.active {
  border-color: var(--accent-green) !important;
  background: transparent !important;
}

.song-item.active .song-item-title {
  color: var(--text) !important;
}

body.dark-mode .song-item {
  background-color: #0d0d0d;
  border-color: transparent;
}



body.dark-mode .song-item.active {
  border-color: var(--accent-green) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-mode .song-item.active .song-item-title {
  color: var(--text) !important;
}

.song-details {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.song-text-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.playlist-song-cover {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.song-item-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-item-artist {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.song-item-duration {
  font-size: 0.82rem;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Three-dot menu button */
.song-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.song-menu-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--primary-color);
}

.bottom-spacer {
  height: 6rem;
}

@media (max-width: 768px) {
  .song-item {
    padding: 9px 10px;
    margin-bottom: 6px;
  }

  .song-item-title {
    font-size: 0.88rem;
  }

  .song-item-artist {
    font-size: 0.76rem;
  }

  .playlist-song-cover {
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   12. MUSIC PLAYER BAR (MINI — FIXED BOTTOM)
   Always-visible bottom strip showing cover, title, controls.
   On mobile: collapsed to cover + title + play only; no seekbar.
   ============================================================ */
.player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-player);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-player);
  z-index: 2000;
  padding: 0.9rem 1.5rem 0.7rem;
  box-sizing: border-box;
  transition: background-color var(--transition-slow);
  cursor: default;
}


body.dark-mode .player {
  background-color: #000;
  border-top-color: #1a1a1a;
}

.player-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  position: relative;
}

/* Left: album cover + song info */
.player-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  z-index: 1;
  cursor: default;
  /* FIX: instant tap for fullscreen open on mobile */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.player-album-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player-album-cover {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.player-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 0;
}

.song-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.song-artist {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* Middle: transport controls — absolute center of the bar */
.player-middle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  z-index: 2;
}

.player-middle>* {
  pointer-events: all;
}

.player-controls-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.player-controls-top button {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: color var(--transition-fast), transform var(--transition-fast),
    background var(--transition-fast);
  /* FIX: eliminate 300ms tap delay and ghost tap highlight on iOS/Android */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: hover) {
  .player-controls-top button:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
  }
}

.player-controls-top button:active {
  transform: scale(0.9) !important;
}

.player-controls-top button.active {
  color: var(--primary-color) !important;
  filter: drop-shadow(0 0 6px var(--primary-glow));
}

/* Shuffle and loop in player-right (desktop) — match other right-side buttons */
#shuffle-btn,
#loop-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: color var(--transition-fast), transform var(--transition-fast),
    background var(--transition-fast);
  flex-shrink: 0;
}

@media (hover: hover) {

  #shuffle-btn:hover,
  #loop-btn:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
  }
}

#shuffle-btn:active,
#loop-btn:active {
  transform: scale(0.9) !important;
}

#shuffle-btn.active,
#loop-btn.active {
  color: var(--primary-color) !important;
  filter: drop-shadow(0 0 6px var(--primary-glow));
}

/* Right: timer + queue + maximize — flex row, mirrors left */
.player-right {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: 0.5rem;
  justify-content: flex-end;
  z-index: 1;
}

/* Maximize button styling */
#maximize-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

@media (hover: hover) {
  #maximize-btn:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
  }
}

#maximize-btn:active {
  transform: scale(0.9) !important;
}

#bz-queue-open-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
  #bz-queue-open-btn:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
  }
}

#bz-queue-open-btn:active {
  transform: scale(0.9);
}

/* Ensure queue btn visible in mobile mini player */
@media (max-width: 768px) {
  #bz-queue-open-btn {
    display: flex !important;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
}

/* Progress bar row */
.progress-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  width: 100%;
}

.progress-container span {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 32px;
  flex-shrink: 0;
}

#progress-bar {
  flex-grow: 1;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

#progress {
  height: 100%;
  width: 0%;
  background: var(--nav-gradient);
  border-radius: var(--radius-pill);
  transition: none;
}

#progress.ready {
  transition: width 0.1s linear;
}

body.dark-mode #progress {
  background: #ffffff;
}

/* mini-play-pause only visible on mobile */
.mini-play-pause-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
  /* FIX: instant tap response on mobile */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Timer button container */
.timer-btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Timer button — match exact same sizing as all other player control buttons */
#timer-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: color var(--transition-fast), transform var(--transition-fast),
    background var(--transition-fast);
}

@media (hover: hover) {
  #timer-btn:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
  }
}

#timer-btn:active {
  transform: scale(0.9) !important;
}

#timer-btn.active {
  color: var(--primary-color) !important;
  filter: drop-shadow(0 0 6px var(--primary-glow));
}

/* Mobile player layout */
@media (max-width: 768px) {
  .player {
    padding: 8px 10px;
    min-height: 76px;
  }

  .player-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
  }

  .player-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    overflow: hidden;
  }

  .player-album-cover {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
  }

  .player-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .song-title {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }

  .song-artist {
    font-size: 0.73rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    margin-top: 2px;
  }

  /* Constrain right-side buttons to fixed small width */
  .player-right {
    display: flex !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    min-width: auto !important;
    gap: 0px !important;
    align-items: center !important;
  }

  .player-right #bz-queue-open-btn,
  .player-right .mini-play-pause-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.05rem !important;
  }

  /* Hide most controls on mobile mini bar */
  #prev-btn,
  #next-btn,
  .progress-container,
  .player-middle {
    display: none !important;
  }

  /* Also hide timer from player-right on mobile mini */
  .player-right .timer-btn-container,
  .player-right #maximize-btn {
    display: none !important;
  }

  /* Reset absolute positioning from desktop middle */
  .player-middle {
    position: static !important;
    transform: none !important;
  }

  /* Hide maximize in mobile mini, keep queue + mini-play visible */
  .player-right #maximize-btn {
    display: none !important;
  }

  .player-right #bz-queue-open-btn {
    display: flex !important;
  }

  /* Mini play/pause button visible on mobile only */
  .mini-play-pause-btn {
    display: flex !important;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
  }

  .mini-play-pause-btn:active {
    transform: scale(0.9);
  }
}


/* ============================================================
   13. MAXIMIZED PLAYER (FULLSCREEN)
   Expands to fill entire viewport with large cover art and controls.
   Desktop shows prev/play/next row; mobile uses a 5-column grid.
   ============================================================ */

/* Shared maximized base */
.player.maximized {
  height: 100dvh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* FIX: respect device safe areas (notch / status bar / home indicator) */
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem) 1rem;
  background-color: var(--bg-player);
  box-sizing: border-box;
  z-index: 9999;
  overflow: hidden;
  cursor: default;
}

body.dark-mode .player.maximized {
  background-color: #000;
}

/* Hide navbar and main content when player is maximized */
.player.maximized~.navbar,
.player.maximized~main {
  display: none;
}

/* Minimize button */
.minimize-btn {
  display: none;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  font-size: 1.1rem;
  transition: background var(--transition-fast);
  align-items: center;
  justify-content: center;
}

.minimize-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

#main-player.maximized .minimize-btn {
  display: flex;
}

/* ── Fullscreen three-dot menu button ── */
.fs-menu-btn {
  display: none;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  font-size: 1.1rem;
  transition: background var(--transition-fast);
  align-items: center;
  justify-content: center;
}

.fs-menu-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

#main-player.maximized .fs-menu-btn {
  display: flex;
}

/* ── Fullscreen dropdown menu ── */
.fs-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  right: 18px;
  background: rgba(20, 20, 30, 0.97);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 170px;
  z-index: 10002;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: fadeInScale 0.18s ease;
}

.fs-menu-dropdown.open {
  display: block;
}

.fs-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.fs-menu-item i {
  font-size: 0.95rem;
  color: var(--primary-color);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.fs-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
}

/* Content stack in maximized mode */
.player.maximized .player-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  gap: 0;
  height: auto;
  position: static !important;
}

/* player-middle in fullscreen: reset absolute positioning */
.player.maximized .player-middle {
  display: flex !important;
  position: static !important;
  transform: none !important;
  width: 100%;
  justify-content: center;
  pointer-events: all;
}

/* player-right in fullscreen stacks below controls */
.player.maximized .player-right {
  order: 10;
}

/* Progress bar in fullscreen stacks after controls */
.player.maximized .progress-container {
  order: 5;
}

/* Header stack (Playing From label + movie name) */
.player-header-stack {
  display: none;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  animation: fadeIn 0.4s ease;
}

#main-player.maximized .player-header-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.header-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 3px;
  opacity: 0.8;
}

.header-movie {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.25;
  padding: 0 12px;
}

/* Left section in maximized */
.player.maximized .player-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
  flex: none;
  gap: 0;
  cursor: default;
  overflow: visible !important;
  position: static !important;
  z-index: auto !important;
}

/* Album cover in maximized */
.player.maximized .player-album-cover {
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 18px;
  transition: box-shadow var(--transition-slow);
}

/* Song info in maximized */
.player.maximized .player-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
  flex: none !important;
  min-width: 0;
  overflow: visible !important;
  margin-bottom: 14px;
}

/* Fullscreen song-title */
.player.maximized .song-title {
  font-size: 1.25rem !important;
  font-weight: 800;
  color: var(--text) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 92%;
  width: 92%;
  text-align: center;
  margin-bottom: 6px;
  display: block;
  word-break: break-word;
}

/* Fullscreen song-artist — always visible, wraps if needed */
.player.maximized .song-artist {
  font-size: 0.84rem !important;
  max-width: 88%;
  width: 88%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  color: var(--text-muted) !important;
  display: block !important;
  margin: 0 auto !important;
  text-align: center;
  word-break: break-word;
}

/* Progress bar in maximized */
.player.maximized .progress-container {
  display: flex !important;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  padding: 0;
  order: 5;
}

.player.maximized #progress-bar {
  height: 5px;
  border-radius: var(--radius-pill);
  flex-grow: 1;
}

/* ─── DESKTOP MAXIMIZED (≥ 769px) ─── */
@media (min-width: 769px) {
  .player.maximized .player-content {
    max-width: 440px;
  }

  .player.maximized .player-album-cover {
    width: 280px !important;
    height: 280px !important;
    max-width: 42vh;
    max-height: 42vh;
  }

  .header-movie {
    font-size: 1.2rem;
  }

  /* Desktop controls: only prev / play / next in fullscreen */
  .player.maximized .player-controls-top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    gap: 28px !important;
    margin: 0;
    position: relative;
    z-index: 10001;
  }

  /* Hide shuffle, loop, timer, queue from fullscreen on desktop — only prev/play/next shown */
  .player.maximized #shuffle-btn,
  .player.maximized #loop-btn,
  .player.maximized .timer-btn-container,
  .player.maximized #timer-btn,
  .player.maximized .player-right {
    display: none !important;
  }

  .player.maximized #prev-btn,
  .player.maximized #next-btn {
    display: flex !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.8rem !important;
    color: var(--text) !important;
    background: none !important;
    border: none !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    cursor: pointer !important;
  }

  .player.maximized #play-pause-btn {
    display: flex !important;
    width: 72px !important;
    height: 72px !important;
    font-size: 2.4rem !important;
    color: var(--text) !important;
    background: none !important;
    border: none !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    cursor: pointer !important;
  }

  /* Desktop fullscreen — hide maximize btn */
  .player.maximized #maximize-btn {
    display: none !important;
  }

  .player.maximized .player-controls-top button:hover {
    color: var(--primary-color) !important;
    transform: scale(1.1) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .player.maximized #play-pause-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  /* Hide player-right in desktop fullscreen */
  .player.maximized .player-right {
    display: none !important;
  }

  /* Show progress bar in desktop fullscreen — below controls */
  .player.maximized .progress-container {
    display: flex !important;
    max-width: 440px;
    width: 100%;
    margin: 16px auto 0;
    padding: 0;
    order: 5;
  }
}

/* ─── MOBILE MAXIMIZED (≤ 768px) ─── */
@media (max-width: 768px) {
  .player.maximized {
    /* FIX: push all content below the phone status bar/notch.
       env(safe-area-inset-top) covers notched devices; the extra 2rem
       gives breathing room so the first line (label) is fully visible. */
    padding: calc(env(safe-area-inset-top, 0px) + 2.8rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1.4rem) 1rem !important;
    justify-content: center;
    overflow-y: auto;
  }

  .player.maximized .header-label {
    font-size: 0.82rem !important;
    letter-spacing: 2.2px !important;
  }

  .player.maximized .header-movie {
    font-size: 1.2rem !important;
    letter-spacing: 1.7px !important;
  }

  .player.maximized .player-header-stack {
    margin-bottom: 14px !important;
  }

  .player.maximized .player-album-cover {
    width: 72vw !important;
    height: 72vw !important;
    max-width: 300px !important;
    max-height: 300px !important;
    margin-bottom: 16px;
  }

  /* Song title in mobile fullscreen — wrap, fully visible */
  .player.maximized .song-title {
    font-size: 1.1rem !important;
    max-width: 92%;
    width: 92%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    color: var(--text) !important;
    word-break: break-word;
  }

  /* Song artist in mobile fullscreen — centered, wraps if needed */
  .player.maximized .song-artist {
    font-size: 0.84rem !important;
    max-width: 88%;
    width: 88%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    color: var(--text-muted) !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    word-break: break-word;
  }

  .player.maximized .player-info {
    margin-bottom: 8px !important;
    overflow: visible !important;
    align-items: center !important;
  }

  /* Progress bar: shown above controls */
  .player.maximized .progress-container {
    display: flex !important;
    width: 100%;
    max-width: 320px;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px 0;
    padding: 0;
    order: 0;
  }

  /* Show only main transport controls in grid */
  .player.maximized #prev-btn,
  .player.maximized #next-btn {
    display: flex !important;
  }

  /* Hide shuffle and loop from row 1 grid — they go to row 2 (player-right) */
  .player.maximized #shuffle-btn,
  .player.maximized #loop-btn {
    display: flex !important;
  }

  .player.maximized #maximize-btn {
    display: none !important;
  }

  .player.maximized .player-controls-top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    order: unset !important;
    align-self: auto !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10001 !important;
    margin: 0 auto !important;
    gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-width: 320px !important;
  }

  .player.maximized .player-controls-top #shuffle-btn,
  .player.maximized .player-controls-top #loop-btn {
    display: inline-flex !important;
  }

  .player.maximized .timer-btn-container {
    display: none !important;
  }

  .player.maximized #shuffle-btn,
  .player.maximized #prev-btn,
  .player.maximized #play-pause-btn,
  .player.maximized #next-btn,
  .player.maximized #loop-btn {
    display: inline-flex !important;
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    font-size: 1.4rem !important;
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .player.maximized #shuffle-btn {
    opacity: 0.85 !important;
  }

  .player.maximized #play-pause-btn {
    font-size: 1.9rem !important;
    opacity: 1 !important;
  }

  .player.maximized #prev-btn,
  .player.maximized #next-btn {
    font-size: 1.55rem !important;
    opacity: 1 !important;
  }

  .player.maximized #loop-btn {
    opacity: 0.85 !important;
  }

  .player.maximized .player-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    order: unset !important;
    position: static !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 8px auto 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .player.maximized .player-right #maximize-btn {
    display: none !important;
  }

  .player.maximized .player-right #shuffle-btn {
    display: none !important;
  }

  .player.maximized .player-right #loop-btn {
    display: none !important;
  }

  .player.maximized .player-right .timer-btn-container {
    display: inline-flex !important;
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .player.maximized .player-right #timer-btn {
    display: inline-flex !important;
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    font-size: 1.3rem !important;
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .player.maximized .player-right #bz-queue-open-btn {
    display: inline-flex !important;
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    font-size: 1.3rem !important;
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.85 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .player.maximized .mini-play-pause-btn {
    display: none !important;
  }

  .player.maximized #shuffle-btn.active,
  .player.maximized #loop-btn.active,
  .player.maximized #timer-btn.active {
    color: var(--primary-color) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px var(--primary-glow));
  }

  body.dark-mode .player.maximized #prev-btn,
  body.dark-mode .player.maximized #play-pause-btn,
  body.dark-mode .player.maximized #next-btn,
  body.dark-mode .player.maximized #timer-btn,
  body.dark-mode .player.maximized #bz-queue-open-btn {
    color: #ffffff !important;
  }

  body.dark-mode .player.maximized #shuffle-btn:not(.active),
  body.dark-mode .player.maximized #loop-btn:not(.active) {
    color: #ffffff !important;
  }

  body.dark-mode .player.maximized #shuffle-btn.active,
  body.dark-mode .player.maximized #loop-btn.active {
    color: var(--primary-color) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px var(--primary-glow)) !important;
  }

  .player.maximized .player-controls-top button:active,
  .player.maximized .player-right button:active {
    transform: scale(0.88) !important;
    opacity: 0.65 !important;
  }
}

@media (max-width: 480px) {
  .player.maximized .player-album-cover {
    width: 78vw !important;
    height: 78vw !important;
  }
}


/* ============================================================
   14. ABOUT & SETTINGS PAGES
   Info cards with left-orange-border headings and muted body text.
   Settings items are rows with a label stack and toggle switch.
   ============================================================ */
.about-container,
.settings-container,
.playlists-container,
.playlists-container {
  display: none;
}

.settings-container {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.info-content-wrapper {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 860px;
  margin: 1.5rem auto;
  width: calc(100% - 3rem);
  animation: fadeIn 0.3s ease;
}

body.dark-mode .info-content-wrapper {
  background-color: #0a0a0a;
  border-color: #1a1a1a;
}

.info-content-wrapper h3 {
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  padding-left: 14px;
  border-left: 4px solid var(--primary-color);
}

.info-content-wrapper p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.info-content-wrapper hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 1.75rem 0;
}

/* Features checklist */
.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.features-list li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary-color);
}

/* Settings rows */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--bg-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.setting-item:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-strong);
}

body.dark-mode .setting-item:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-strong);
}

.setting-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.setting-text h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.setting-text p {
  margin: 3px 0 0;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Toggle switch */
.switch {
  position: relative;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 30px;
  inset: 0;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 2px;
  background: #ccc;
  border-radius: 50%;
  transition: transform var(--transition-base), background var(--transition-base);
}

input:checked+.slider {
  background: var(--accent-green);
  border-color: var(--accent-green);
  box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
}

input:checked+.slider::before {
  transform: translateX(22px);
  background: #fff;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 8px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
  background-color: #0d0d0d;
  border-color: #222;
  color: #fff;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--nav-gradient);
  color: #fff;
  border: none;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.submit-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

body.dark-mode .submit-btn {
  background: #111;
  border: 1px solid #333;
  color: #fff;
}

body.dark-mode .submit-btn:hover {
  background: #1a1a1a;
}

/* Year button (search results) */
.year-button {
  background-color: var(--primary-color);
  color: #111;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-block;
  border: none;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.year-button:hover {
  background-color: var(--primary-hover);
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .info-content-wrapper {
    width: calc(100% - 2rem);
    margin: 1rem auto;
    padding: 1.1rem;
  }

  .setting-item {
    padding: 10px 12px;
  }

  .switch {
    width: 42px;
    height: 22px;
  }

  .slider::before {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .setting-text h4 {
    font-size: 0.88rem;
  }

  .setting-text p {
    font-size: 0.7rem;
  }
}


/* ============================================================
   15. POPUPS & MODALS
   Centered overlay cards for timer, success, confirm, playlist.
   All share backdrop blur and smooth scale-in entrance animation.
   ============================================================ */

/* Generic overlay backdrop */
.timer-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 1);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99998;
  padding: 16px 28px;
}

.timer-popup.visible {
  display: flex;
}

/* ── Timer popup card ── */
.timer-popup-content {
  position: relative;
  background: linear-gradient(160deg, #0e0720 0%, #090518 50%, #06030f 100%);
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-top-color: rgba(167, 139, 250, 0.50);
  padding: 0.6rem 1.1rem 0.65rem;
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(109, 40, 217, 0.10),
    0 0 60px rgba(109, 40, 217, 0.22),
    0 32px 80px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: hidden;
  animation: bz-timer-enter 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes bz-timer-enter {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Starfield decoration */
.bz-timer-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.bz-timer-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: bz-star-twinkle var(--d, 3s) ease-in-out infinite;
  opacity: var(--o, 0.4);
}

.bz-timer-stars span:nth-child(1) {
  top: 8%;
  left: 12%;
  --d: 2.8s;
  --o: 0.55;
}

.bz-timer-stars span:nth-child(2) {
  top: 15%;
  left: 78%;
  --d: 3.5s;
  --o: 0.40;
  width: 1.5px;
  height: 1.5px;
}

.bz-timer-stars span:nth-child(3) {
  top: 5%;
  left: 52%;
  --d: 2.2s;
  --o: 0.65;
}

.bz-timer-stars span:nth-child(4) {
  top: 22%;
  left: 90%;
  --d: 4.0s;
  --o: 0.30;
  width: 1px;
  height: 1px;
}

.bz-timer-stars span:nth-child(5) {
  top: 32%;
  left: 6%;
  --d: 3.2s;
  --o: 0.45;
}

.bz-timer-stars span:nth-child(6) {
  top: 80%;
  left: 88%;
  --d: 2.6s;
  --o: 0.50;
}

.bz-timer-stars span:nth-child(7) {
  top: 88%;
  left: 20%;
  --d: 3.8s;
  --o: 0.35;
  width: 1.5px;
  height: 1.5px;
}

.bz-timer-stars span:nth-child(8) {
  top: 75%;
  left: 55%;
  --d: 2.4s;
  --o: 0.45;
}

.bz-timer-stars span:nth-child(9) {
  top: 60%;
  left: 93%;
  --d: 3.1s;
  --o: 0.30;
  width: 1px;
  height: 1px;
}

.bz-timer-stars span:nth-child(10) {
  top: 45%;
  left: 3%;
  --d: 4.2s;
  --o: 0.40;
}

@keyframes bz-star-twinkle {

  0%,
  100% {
    opacity: var(--o, 0.4);
    transform: scale(1);
  }

  50% {
    opacity: calc(var(--o, 0.4) * 2);
    transform: scale(1.4);
  }
}

/* ── Header section ── */
.bz-timer-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.3rem;
  position: relative;
  z-index: 1;
}

.bz-timer-moon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
}

.bz-timer-moon-icon {
  font-size: 1.3rem;
  color: #c4b5fd;
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.85));
  position: relative;
  z-index: 1;
  animation: bz-moon-bob 4s ease-in-out infinite;
}

@keyframes bz-moon-bob {

  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }

  50% {
    transform: translateY(-4px) rotate(-12deg);
  }
}

.bz-timer-moon-glow {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.30) 0%, transparent 70%);
  animation: bz-moon-pulse 4s ease-in-out infinite;
}

@keyframes bz-moon-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.timer-popup-content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: #ede9fe;
  letter-spacing: 0.3px;
  text-align: center;
}

.bz-timer-subtitle {
  font-size: 0.71rem;
  color: rgba(196, 181, 253, 0.62);
  margin: 1px 0 0;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

/* Running state: slightly brighter + wider tracking for emphasis */
.bz-timer-subtitle--running {
  color: rgba(167, 139, 250, 0.82);
  letter-spacing: 0.8px;
}

/* ── Close button ── */
.close-popup-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.20);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 181, 253, 0.65);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
  z-index: 10;
  padding: 0;
}

.close-popup-btn:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
  transform: scale(1.08);
}

/* ── Timer action buttons ── */
.timer-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.timer-buttons button {
  width: 100%;
  padding: 11px 20px;
  border-radius: 16px;
  border: none;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#start-timer-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 60%, #4338ca 100%);
  color: #f0e8ff;
  box-shadow: 0 4px 24px rgba(109, 40, 217, 0.50), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  letter-spacing: 0.3px;
}

#start-timer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(109, 40, 217, 0.65), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 60%, #4f46e5 100%);
}

#start-timer-btn:active {
  transform: scale(0.97);
}

#cancel-timer-btn {
  background: rgba(239, 68, 68, 0.07);
  border: 1.5px solid rgba(239, 68, 68, 0.28);
  color: rgba(252, 165, 165, 0.80);
  letter-spacing: 0.2px;
}

#cancel-timer-btn:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(252, 165, 165, 0.50);
  color: #fca5a5;
}

#cancel-timer-btn:active {
  transform: scale(0.97);
}

/* ── Timer Ended Popup ── */
.timer-ended-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(160deg, #0e0720 0%, #06030f 100%);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-top-color: rgba(167, 139, 250, 0.55);
  padding: 2rem 1.8rem 1.8rem;
  border-radius: 28px;
  box-shadow: 0 0 60px rgba(109, 40, 217, 0.30), 0 24px 70px rgba(0, 0, 0, 0.85);
  z-index: 12000;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 90%;
  max-width: 300px;
  gap: 8px;
  opacity: 0;
  transition: none;
}

.timer-ended-popup.visible {
  display: flex;
  animation: bz-timer-enter 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.bz-ended-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  width: 64px;
  height: 64px;
}

.bz-ended-moon {
  font-size: 2.2rem;
  color: #c4b5fd;
  filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.90));
  position: relative;
  z-index: 1;
  animation: bz-moon-bob 4s ease-in-out infinite;
}

.bz-ended-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bz-ended-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.35);
  animation: bz-ring-expand 2.5s ease-out infinite;
}

.bz-ended-ring--1 {
  width: 52px;
  height: 52px;
}

.bz-ended-ring--2 {
  width: 52px;
  height: 52px;
  animation-delay: 1.25s;
}

@keyframes bz-ring-expand {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.timer-ended-popup h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ede9fe;
  margin: 4px 0 0;
  letter-spacing: 0.2px;
}

.timer-ended-popup p {
  font-size: 0.82rem;
  color: rgba(196, 181, 253, 0.55);
  margin: 2px 0 10px;
  line-height: 1.5;
}

#close-timer-ended {
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  color: #f0e8ff;
  border: none;
  padding: 13px 0;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.45);
  transition: transform 0.15s, box-shadow 0.2s;
}

#close-timer-ended:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(109, 40, 217, 0.60);
}

/* Success popup */
#success-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0f1e12;
  border: 2px solid var(--accent-green);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popup);
  text-align: center;
  z-index: 11000;
  width: 90%;
  max-width: 300px;
  display: none;
  flex-direction: column;
  align-items: center;
  animation: fadeInScale 0.25s ease;
}

#close-success-popup {
  background: var(--accent-green);
  color: #fff;
  border: none;
  padding: 11px 40px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  margin-top: 1rem;
  transition: background var(--transition-fast);
}

#close-success-popup:hover {
  background: #17a844;
}


/* ============================================================
   16. SLEEP TIMER — WHEEL PICKER
   Scroll-snap drum-roll pickers for Hours, Minutes, Seconds.
   ============================================================ */
.timer-columns-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
  padding: 6px 6px;
  background: rgba(109, 40, 217, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.14);
  border-radius: 20px;
  width: 100%;
}

.bz-wheel-sep {
  font-size: 1.6rem;
  font-weight: 800;
  color: rgba(139, 92, 246, 0.45);
  line-height: 1;
  padding-bottom: 6px;
  user-select: none;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.column-label {
  font-size: 0.62rem;
  color: rgba(196, 181, 253, 0.55);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}

.wheel-picker-container {
  position: relative;
  height: 62px;
  width: 82px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}

.wheel {
  padding: 15px 0;
}

.picker-item {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 300;
  color: rgba(139, 92, 246, 0.30);
  scroll-snap-align: center;
  transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.picker-item.active {
  color: #c4b5fd;
  font-weight: 700;
  transform: scale(1.18);
  text-shadow: 0 0 16px rgba(167, 139, 250, 0.65);
}

.selection-indicator {
  position: absolute;
  top: 15px;
  height: 32px;
  width: 100%;
  background: rgba(109, 40, 217, 0.14);
  border-top: 1px solid rgba(139, 92, 246, 0.38);
  border-bottom: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 8px;
  pointer-events: none;
}

/* ── Running countdown display ── */
.timer-display-container {
  margin-bottom: 0.55rem;
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

#timer-heading {
  font-size: 0.68rem;
  color: rgba(196, 181, 253, 0.50);
  display: none;
  margin-bottom: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

#timer-display {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #e2d9f3 0%, #c4b5fd 40%, #a78bfa 70%, #818cf8 100%);
  color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.55));
  line-height: 1;
}

.bz-timer-display-glow {
  display: none;
  margin: 6px auto 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.60), transparent);
  border-radius: 2px;
}

/* Show glow when timer is running */
#timer-display:not(:empty)~.bz-timer-display-glow {
  display: block;
}

/* ── Pulse animation states ── */
.timer-pulse-active {
  animation: bz-timer-glow-pulse 2.2s ease-in-out infinite;
}

.timer-pulse-urgent {
  animation: bz-timer-urgent 0.65s ease-in-out infinite;
}

@keyframes bz-timer-glow-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.50));
  }

  50% {
    filter: drop-shadow(0 0 28px rgba(167, 139, 250, 0.90));
  }
}

@keyframes bz-timer-urgent {

  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.55));
    color: #fca5a5;
  }

  50% {
    filter: drop-shadow(0 0 30px rgba(239, 68, 68, 0.90));
    color: #ef4444;
  }
}


/* Song 3-dot menu — Spotify-style anchored dropdown, no dim overlay */
#playlist-modal {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

#playlist-modal {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#playlist-modal .timer-popup-content {
  background: rgba(14, 14, 24, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 0;
  width: 260px;
  max-width: 260px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.40);
  overflow: hidden;
  /* top/left set by JS — position: fixed injected inline */
  animation: bz-ctx-in 0.14s ease both;
}

/* ── Fullscreen nav buttons injected into context menu ── */
#playlist-modal .bz-fs-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 13px 16px;
  background: transparent;
  color: var(--text);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.1px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

#playlist-modal .bz-fs-nav-btn i {
  font-size: 0.95rem;
  color: var(--primary-color);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

#playlist-modal .bz-fs-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--primary-color);
}

#playlist-modal .bz-fs-nav-btn:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.12);
}

/* ── Share Song card button in context menu ── */
#modal-share-song-btn {
  color: #38bdf8 !important;
}

#modal-share-song-btn i {
  color: #38bdf8 !important;
}

/* ── Copy Song Link button in context menu ── */
#modal-copy-link-btn {
  color: #4ade80 !important;
}

#modal-copy-link-btn i {
  color: #4ade80 !important;
}

@keyframes bz-ctx-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-5px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

body.dark-mode #playlist-modal .timer-popup-content {
  background: rgba(8, 8, 14, 0.98);
  border-color: #222;
}

/* Song title — uppercase label, same as dropdown header */
#modal-song-title {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  min-height: 18px;
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid var(--border);
  padding: 15px 44px 15px 16px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: inherit;
}

/* Button list — flush rows, no card borders, matches .fs-menu-item layout */
#playlist-modal .timer-buttons {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

/* Main action list — capped to ~4.5 rows so the menu stays compact
   while clearly hinting (via the half-cut 5th row) that more items
   scroll into view; remaining items scroll inside this list while
   the header (title + close button) stays fixed in place above it.
   Row math: each row = 13px top pad + 13px bottom pad + ~18px line
   height = ~44px, +1px border-top on rows 2+.
   4 full rows = 44 + (45*3) = 179px, + container's 4px top/bottom
   padding (8px) = 187px. Half of a 5th row (~45/2 ≈ 22-23px) on top
   of that = ~210px total. */
#modal-main-options {
  max-height: 210px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#modal-main-options::-webkit-scrollbar {
  width: 5px;
}

#modal-main-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

#modal-main-options::-webkit-scrollbar-track {
  background: transparent;
}

/* Each row — identical to .fs-menu-item */
#playlist-modal .timer-buttons button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 13px 16px;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.1px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Icon — primary color, fixed width, matches .fs-menu-item i */
#playlist-modal .timer-buttons button i {
  font-size: 0.95rem;
  color: var(--primary-color);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Thin separator between rows */
#playlist-modal .timer-buttons button+button {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hover — matches .fs-menu-item:hover */
#playlist-modal .timer-buttons button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--primary-color);
}

#playlist-modal .timer-buttons button:hover i {
  color: var(--primary-color);
}

#playlist-modal .timer-buttons button:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.12);
}

/* Close button — pinned to the top-right corner of the title row.
   NOTE: this button is a DOM sibling of #modal-song-title (both live
   directly under .timer-popup-content), so top:50% here computes
   against the height of the ENTIRE modal content box (which grows
   with the button list), not just the title row — that was the bug.
   A fixed pixel offset (matching the base .close-popup-btn rule)
   keeps it pinned to the title row regardless of modal height. */
#playlist-modal .close-popup-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: transparent;
  border: none !important;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  z-index: 2;
  padding: 0;
}

#playlist-modal .close-popup-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text);
  transform: scale(1.08);
}

/* Play Next — green, matches fullscreen style */
#modal-play-next-btn {
  color: #4ade80 !important;
}

#modal-play-next-btn i {
  color: #4ade80 !important;
}

#modal-play-next-btn:hover {
  background: rgba(74, 222, 128, 0.08) !important;
  color: #4ade80 !important;
}

/* Remove from History — red */
#modal-remove-history-btn {
  color: #f87171 !important;
}

#modal-remove-history-btn i {
  color: #f87171 !important;
}

#modal-remove-history-btn:hover {
  background: rgba(248, 113, 113, 0.08) !important;
  color: #f87171 !important;
}

/* Create/List UI wrappers — padded like a panel section */
#modal-create-ui,
#modal-list-ui {
  padding: 12px 14px 10px;
  width: 100%;
}

/* Create name input — dark glass style */
#new-playlist-name {
  width: 100%;
  padding: 10px 13px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong) !important;
  color: var(--text);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  outline: none;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

#new-playlist-name:focus {
  border-color: var(--primary-color) !important;
}

/* Confirm / Cancel row inside create UI */
#modal-create-ui .timer-buttons {
  flex-direction: row !important;
  gap: 8px !important;
  padding: 0 !important;
}

#modal-create-ui .timer-buttons button {
  flex: 1;
  border-radius: var(--radius-sm) !important;
  padding: 10px 8px !important;
  font-size: 0.85rem !important;
  justify-content: center;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
}

#confirm-create-btn {
  background: var(--primary-color) !important;
  color: #fff !important;
  border-color: var(--primary-color) !important;
}

#confirm-create-btn:hover {
  filter: brightness(1.12);
}

/* Existing playlists scroll list */
#existing-playlists-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  padding: 4px;
}

/* Back button in list UI */
#back-to-main-btn {
  width: 100%;
  border-radius: var(--radius-sm) !important;
  padding: 10px !important;
  font-size: 0.85rem !important;
  justify-content: center;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

#modal-play-next-btn:hover {
  background-color: rgba(29, 185, 84, 0.2) !important;
}

/* Playlist list inside modal */
#existing-playlists-list {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
  margin-top: 8px;
}

#existing-playlists-list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  animation: fadeIn 0.25s ease;
}

#existing-playlists-list span {
  font-size: 0.88rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

#existing-playlists-list button {
  width: auto !important;
  padding: 6px 14px !important;
  font-size: 0.78rem !important;
  background-color: var(--primary-color) !important;
  color: #111 !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  margin-bottom: 0 !important;
  justify-content: center !important;
  font-weight: 700 !important;
}

/* New playlist name input */
#new-playlist-name {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: #0d0d0d;
  border: 1px solid var(--accent-blue);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#new-playlist-name:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

#confirm-create-btn {
  background: var(--accent-blue) !important;
  color: #fff !important;
}

#back-to-main-btn {
  background: transparent !important;
  border: 1px solid #555 !important;
  color: var(--text-muted) !important;
  justify-content: center !important;
}

/* Delete confirm popup */
#delete-confirm-popup .timer-popup-content {
  border-color: var(--accent-red);
}


/* ============================================================
   18. BEAT ZEN QUEUE OVERLAY
   Full-screen playback queue with draggable up-next items list.
   Now-playing card is accent-blue tinted to stand out clearly.
   ============================================================ */
.bz-queue-overlay {
  position: fixed;
  inset: 0;
  background: var(--bz-bg);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  display: none;
  flex-direction: column;
  z-index: 99999;
  color: #fff;
  overflow: hidden;
}

.bz-queue-overlay.active {
  display: flex;
}

/* Queue header */
.bz-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 6% 16px;
  gap: 12px;
}

.bz-queue-title-group {
  min-width: 0;
}

.bz-queue-title-group h1 {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bz-queue-stats {
  color: var(--bz-text-dim);
  font-size: 0.85rem;
  margin-top: 4px;
}

.bz-queue-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Queue buttons */
.bz-btn {
  border: none;
  padding: 9px 16px;
  border-radius: 30px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.85rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.bz-btn:hover,
.bz-btn:focus-visible {
  background: var(--bz-accent);
  outline: none;
}

.bz-btn.danger:hover,
.bz-btn.danger:focus-visible {
  background: var(--bz-danger);
}

.bz-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.07);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.bz-close-btn:hover,
.bz-close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
  outline: none;
}

/* Section labels */
.bz-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--bz-text-dim);
  margin-bottom: 10px;
}

/* Now playing section */
.bz-now-playing {
  flex-shrink: 0;
  padding: 0 6% 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bz-now-card {
  border: 2px solid var(--accent-green, #1db954) !important;
  background: rgba(29, 185, 84, 0.06) !important;
  cursor: default;
}

.bz-now-card:hover {
  background: rgba(29, 185, 84, 0.08) !important;
}

/* Ensure consistent now-playing card treatment */
.bz-q-item.bz-now-card,
.bz-q-item.bz-now-card:hover {
  background: rgba(29, 185, 84, 0.06) !important;
}

/* Now playing controls */
.bz-q-now-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 8px;
}

.bz-q-ctrl-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    transform var(--transition-fast);
  flex-shrink: 0;
}

.bz-q-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: scale(1.08);
}

.bz-q-ctrl-btn:active {
  transform: scale(0.94);
}

.bz-q-playpause {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  background: var(--bz-accent);
  color: #fff;
}

.bz-q-playpause:hover {
  background: #1a63e8;
}

/* Queue body / up next */
.bz-queue-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 6% 28px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.bz-queue-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* Queue item */
.bz-q-item {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 4px;
  border-radius: var(--bz-radius);
  transition: background var(--transition-fast);
  user-select: none;
  margin-bottom: 4px;
  cursor: pointer;
}

.bz-q-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bz-q-item.dragging {
  opacity: 0.35;
  background: rgba(255, 255, 255, 0.08);
}

.bz-q-img {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 14px;
}

.bz-q-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bz-q-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-q-artist {
  display: block;
  font-size: 0.8rem;
  color: var(--bz-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions (visible on hover/tap) */
.bz-q-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.bz-q-item:hover .bz-q-actions,
.bz-q-item.touch-active .bz-q-actions {
  opacity: 1;
  pointer-events: auto;
}

.bz-q-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #bbb;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bz-q-action-btn:hover {
  background: var(--bz-accent);
  color: #fff;
}

.bz-q-action-btn.danger:hover {
  background: var(--bz-danger);
  color: #fff;
}

/* Drag handle — see full definition in the drag-and-drop section below */

/* Empty states */
.bz-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 52px;
  color: var(--bz-text-dim);
  text-align: center;
}

.bz-empty i {
  font-size: 3rem;
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(124, 58, 237, 0.45));
  animation: bz-empty-float 3s ease-in-out infinite;
}

@keyframes bz-empty-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.bz-empty p {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.85), rgba(167, 139, 250, 0.85));
  color: transparent;
  background-clip: text;
  margin: 0;
}

.bz-upnext-empty {
  color: var(--bz-text-dim);
  font-size: 0.85rem;
  padding: 16px 0;
  text-align: center;
}

/* Queue open button in player bar */
.player-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Queue responsive */
@media (max-width: 900px) {
  .bz-queue-header {
    padding: 22px 5% 14px;
  }

  .bz-now-playing,
  .bz-queue-body {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 600px) {
  .bz-queue-header {
    padding: 18px 4% 12px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .bz-queue-title-group h1 {
    font-size: 1.5rem;
  }

  .bz-queue-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .bz-now-playing,
  .bz-queue-body {
    padding-left: 4%;
    padding-right: 4%;
  }

  .bz-q-img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin-right: 10px;
  }

  .bz-q-title {
    font-size: 0.88rem;
  }

  .bz-q-artist {
    font-size: 0.76rem;
  }

  .bz-q-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .bz-q-action-btn {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .bz-q-drag {
    width: 24px;
    height: 24px;
  }

  .bz-btn span {
    display: none;
  }

  .bz-btn {
    padding: 9px 11px;
  }

  .bz-q-ctrl-btn {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
  }

  .bz-q-playpause {
    width: 38px;
    height: 38px;
    font-size: 0.88rem;
  }
}

@media (max-width: 380px) {
  .bz-queue-title-group h1 {
    font-size: 1.3rem;
  }

  .bz-q-img {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .bz-q-now-controls {
    gap: 5px;
  }

  .bz-q-ctrl-btn {
    width: 28px;
    height: 28px;
  }

  .bz-q-playpause {
    width: 34px;
    height: 34px;
  }
}


/* ============================================================
   19. QUEUE CLEAR CONFIRM POPUP
   Danger-red icon popup for confirming queue clear action.
   Spring scale-in animation makes it feel tactile and premium.
   ============================================================ */
.bz-clear-popup {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bz-clear-popup.visible {
  opacity: 1;
}

.bz-popup-box {
  background: #13141a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 28px 26px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.9) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}

.bz-clear-popup.visible .bz-popup-box {
  transform: scale(1) translateY(0);
}

.bz-popup-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 77, 77, 0.12);
  border: 1px solid rgba(255, 77, 77, 0.3);
  font-size: 1.4rem;
  color: var(--bz-danger);
}

.bz-popup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.bz-popup-body {
  font-size: 0.88rem;
  color: #aaa;
  line-height: 1.65;
  margin: 0;
}

.bz-popup-body strong {
  color: #fff;
}

.bz-popup-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #6bcb77;
}

.bz-popup-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.bz-popup-cancel,
.bz-popup-ok {
  flex: 1;
  border: none;
  border-radius: 30px;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.bz-popup-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
}

.bz-popup-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.bz-popup-cancel:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}

.bz-popup-ok {
  background: var(--bz-danger);
  color: #fff;
}

.bz-popup-ok:hover {
  background: #e03a3a;
}

.bz-popup-ok:active {
  transform: scale(0.96);
}

.bz-popup-ok:focus-visible {
  outline: 2px solid #ff8080;
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .bz-popup-box {
    padding: 24px 18px 20px;
    gap: 11px;
    border-radius: 16px;
  }

  .bz-popup-actions {
    flex-direction: column;
  }

  .bz-popup-cancel,
  .bz-popup-ok {
    flex: unset;
    width: 100%;
  }
}


/* ============================================================
   20. DARK MODE — COMPONENT OVERRIDES
   Targeted overrides for components that need deeper black.
   Uses CSS variable system; most elements inherit automatically.
   ============================================================ */
body.dark-mode .song-item {
  background: #0a0a0a;
}

body.dark-mode .song-item:hover {
  background: #141414;
}

body.dark-mode .song-item.active {
  background: transparent !important;
  border-color: var(--accent-green) !important;
  box-shadow: none !important;
}

body.dark-mode .song-item.active .song-item-title {
  color: var(--text) !important;
}

body.dark-mode .year-section h2 {
  color: #e0e0e0;
}

body.dark-mode .album-info h2 {
  color: #e0e0e0;
}

body.dark-mode #progress {
  background: #ffffff;
}

body.dark-mode .nav-link-content.active {
  color: var(--primary-color) !important;
}

/* Keep subtle hover in dark mode */
body.dark-mode .album-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px #2a2a2a;
}

body.dark-mode .nav-links a:hover {
  opacity: 0.85;
}

/* Dark mode mobile nav gap */
@media (max-width: 768px) {
  body.dark-mode .nav-links {
    gap: 0;
  }
}


/* ============================================================
   21. UTILITY CLASSES
   Reusable layout and visibility helpers across the entire site.
   Keep this section small — prefer component-level styles above.
   ============================================================ */

/* View containers hidden by default, shown by JS */
.hidden {
  display: none !important;
}

/* Fade animation helper */
.animate-fade {
  animation: fadeIn 0.35s ease;
}

/* Toast container */
/* ─── Toast container — bottom-center, stacks upward ─── */
/* ── Toast container — centred above player bar ── */
#toast-container {
  position: fixed;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Container is as wide as the viewport minus safe margins;
     toasts inside stretch to fill it via width:100% */
  width: min(480px, calc(100vw - 32px));
}

/* ─── Shared pill styles: repeat-rewind + generic toasts ─── */
.bz-rr-toast,
.bz-generic-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  /* fill container — no more narrow pills */
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(20, 10, 45, 0.97) 0%, rgba(10, 10, 30, 0.97) 100%);
  border: 1px solid rgba(124, 58, 237, 0.45);
  border-radius: 14px;
  padding: 13px 42px 22px 14px;
  /* right padding leaves room for × button */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  overflow: hidden;
  /* needed for progress bar clipping only */
}

/* Close (×) button */
.bz-toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  pointer-events: auto;
  line-height: 1;
}

.bz-toast-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Progress bar — shrinks left→right over --toast-duration */
.bz-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 14px 14px;
  opacity: 0.7;
  transform-origin: left center;
  transform: scaleX(1);
  transition: none;
}

.bz-toast-progress--running {
  transform: scaleX(0);
  transition: transform var(--toast-duration, 5000ms) linear;
}

/* Icon circle */
.bz-rr-icon-wrap {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Text block */
.bz-rr-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

/* Feature name label — larger, readable */
.bz-rr-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #a78bfa;
  line-height: 1.2;
}

/* Message body — full text, no truncation */
.bz-rr-sub {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.88);
  white-space: normal;
  overflow: visible;
  /* no clipping — show full message */
  line-height: 1.45;
  word-break: break-word;
  max-height: none;
  /* remove old 2-line cap */
}

/* Mobile: full width minus safe padding */
@media (max-width: 600px) {
  #toast-container {
    width: calc(100vw - 24px);
    bottom: 115px;
  }

  .bz-rr-toast,
  .bz-generic-toast {
    border-radius: 12px;
    padding: 12px 40px 20px 12px;
    gap: 10px;
  }

  .bz-rr-icon-wrap {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .bz-rr-label {
    font-size: 0.74rem;
  }

  .bz-rr-sub {
    font-size: 0.82rem;
  }
}


/* Search results container */
.search-results-container {
  padding: 0 0.75rem;
}



/* ============================================================
   22. HISTORY SECTION (EXPLORE)
   Detailed play-history list with cover art, metadata, borders.
   Each row shows song name, artist, time, date, and play source.
   ============================================================ */
#bz-history-section {
  margin-top: 0.5rem;
}

#bz-history-section h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 1.25rem 0 0.75rem 4px;
  color: var(--text);
}

/* Outer border wrapping the preview history list */
.bz-history-list {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

body.dark-mode .bz-history-list {
  background: #0a0a0a;
  border-color: #222;
}

/* Individual history preview row (shared layout with overlay row) */
.bz-history-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 10px 14px !important;
  transition: background var(--transition-fast) !important;
  cursor: pointer;
}

.bz-history-item:last-of-type {
  border-bottom: none !important;
}

.bz-history-item:hover {
  background: var(--bg-glass) !important;
}

body.dark-mode .bz-history-item {
  border-bottom-color: #1a1a1a !important;
}

body.dark-mode .bz-history-item:hover {
  background: #111 !important;
}

/* History cover image — square, matching row height */
.bz-history-item .playlist-song-cover {
  width: 48px !important;
  height: 48px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--border) !important;
}

/* Meta line: time · date · source · album */
.bz-history-meta {
  font-size: 0.72rem !important;
  color: var(--text-dim) !important;
  margin-top: 3px !important;
  display: block !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 767px) {
  .bz-history-item .playlist-song-cover {
    width: 42px !important;
    height: 42px !important;
  }

  .bz-history-meta {
    font-size: 0.67rem !important;
  }
}

/* ── Shared row layout (preview + overlay) ── */
.bzh-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.bzh-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bzh-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.bzh-artist {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bzh-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  line-height: 1.4;
}

.bzh-meta-icon {
  font-size: 9px;
  opacity: 0.7;
  margin-right: 2px;
}

.bzh-dot {
  opacity: 0.4;
  font-weight: 400;
  padding: 0 1px;
}

.bzh-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 10px;
}

.bzh-dur {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.bzh-play-hint {
  font-size: 10px;
  color: var(--primary-color);
  opacity: 0;
  transition: opacity 0.15s;
}

.bz-history-item:hover .bzh-play-hint,
.bzh-full-row:hover .bzh-play-hint {
  opacity: 1;
}

/* ── Show Full History button ── */
.bzh-show-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg, rgba(37, 117, 252, 0.12), rgba(106, 17, 203, 0.12));
  border: none;
  border-top: 1.5px solid var(--border-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bzh-show-all-btn:hover {
  background: linear-gradient(135deg, rgba(37, 117, 252, 0.22), rgba(106, 17, 203, 0.22));
  color: #fff;
}

.bzh-show-all-btn i {
  color: var(--accent-blue);
  font-size: 13px;
}

.bzh-count-badge {
  background: var(--accent-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}

body.dark-mode .bzh-show-all-btn {
  border-top-color: #222;
  color: #ccc;
}

/* ══════════════════════════════════════════════════════════
   FULL HISTORY OVERLAY
   ══════════════════════════════════════════════════════════ */
#bzh-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.28s ease;
}

#bzh-overlay.bzh-overlay-visible {
  opacity: 1;
}

#bzh-overlay.bzh-overlay-visible .bzh-modal {
  transform: translateY(0);
}

.bzh-modal {
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  border: 1.5px solid var(--border-strong);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(40px);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  overflow: hidden;
}

body.dark-mode .bzh-modal {
  background: #0d0d0d;
  border-color: #222;
}

/* Modal header */
.bzh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1.5px solid var(--border-strong);
  flex-shrink: 0;
}

body.dark-mode .bzh-modal-header {
  border-bottom-color: #222;
}

.bzh-modal-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}

.bzh-modal-title i {
  color: var(--accent-blue);
  font-size: 15px;
}

.bzh-modal-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(37, 117, 252, 0.15);
  color: var(--accent-blue);
  border: 1px solid rgba(37, 117, 252, 0.28);
  border-radius: 20px;
  padding: 2px 9px;
}

.bzh-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-glass);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bzh-close-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--text);
}

/* Scrollable body */
.bzh-modal-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.bzh-modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Full-history individual row — 3px gap between rows */
.bzh-full-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  margin: 0 10px 3px;
  border-radius: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.12s;
}

.bzh-full-row:last-child {
  margin-bottom: 0;
}

.bzh-full-row:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-strong);
  transform: translateX(3px);
}

.bzh-full-row:active {
  transform: scale(0.98);
}

body.dark-mode .bzh-full-row {
  background: #111;
  border-color: #1e1e1e;
}

body.dark-mode .bzh-full-row:hover {
  background: #1a1a1a;
  border-color: #333;
}

/* Cover image inside overlay row */
.bzh-cover {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
}

/* Active / now-playing highlight in overlay - thick blue outer border, no background tint */
html .bzh-full-row.bzh-playing {
  background: transparent !important;
  border: 2px solid var(--accent-blue) !important;
}

.bzh-full-row.bzh-playing .bzh-title {
  color: var(--accent-blue) !important;
}

.bzh-full-row.bzh-playing .bzh-play-hint {
  opacity: 1 !important;
  color: var(--accent-blue) !important;
}

/* Active highlight in preview list - thick blue outer border, no background tint */
html .bz-history-item.bzh-playing {
  background: transparent !important;
  border: 2px solid var(--accent-blue) !important;
}

.bz-history-item.bzh-playing .bzh-title {
  color: var(--accent-blue);
}

/* Empty state */
.bzh-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-dim);
  font-size: 14px;
}

@media (max-width: 767px) {
  .bzh-modal {
    max-height: 90vh;
    border-radius: 18px 18px 0 0;
  }

  .bzh-full-row {
    padding: 10px 14px;
    margin: 0 6px 3px;
  }

  .bzh-cover {
    width: 44px;
    height: 44px;
  }

  .bzh-title {
    font-size: 13px;
  }

  .bzh-artist {
    font-size: 11px;
  }

  .bzh-meta {
    font-size: 10px;
  }

  .bzh-show-all-btn {
    font-size: 12px;
    padding: 12px 14px;
  }
}


/* ============================================================
   23. CLEAR HISTORY BUTTON (SETTINGS)
   Danger-styled action row for wiping the play history.
   Matches the existing setting-item layout exactly.
   ============================================================ */
.clear-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  background: rgba(231, 76, 60, 0.12);
  color: var(--accent-red);
  border: 1.5px solid rgba(231, 76, 60, 0.35);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
}

.clear-history-btn:hover {
  background: rgba(231, 76, 60, 0.22);
  border-color: var(--accent-red);
  transform: scale(1.03);
}

.clear-history-btn:active {
  transform: scale(0.97);
}

body.dark-mode .clear-history-btn {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.25);
}

body.dark-mode .clear-history-btn:hover {
  background: rgba(231, 76, 60, 0.18);
}

@media (max-width: 480px) {
  .clear-history-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 0.8rem;
  }
}

/* ============================================================
   24. SETTINGS — REDESIGNED SECTIONS (v4)
   Consistent with dark-mode & history toggle card styles.
   ============================================================ */

/* ── Section group wrapper ── */
.stg-section {
  max-width: 860px;
  margin: 0 auto 10px;
  width: calc(100% - 3rem);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Nested stg-section (e.g. Preferences inside Account) should not shrink again */
.stg-section .stg-section {
  width: 100%;
  margin: 12px 0 0;
}

/* ── Section label (group header) ── */
.stg-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary-color);
  padding: 14px 4px 8px;
  opacity: 0.85;
}

.stg-section-label i {
  font-size: 0.78rem;
  opacity: 0.9;
}

/* ── Setting item (card row) ── */
.setting-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-strong);
}

body.dark-mode .setting-item {
  background: var(--bg-card);
  border-color: var(--border-strong);
}

body.dark-mode .setting-item:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-strong);
}

/* ── Icon badge ── */
.stg-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.stg-icon--purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.stg-icon--blue {
  background: rgba(37, 117, 252, 0.14);
  color: #60a5fa;
}

.stg-icon--orange {
  background: rgba(249, 115, 22, 0.14);
  color: #fb923c;
}

.stg-icon--red {
  background: rgba(231, 76, 60, 0.13);
  color: #f87171;
}

.stg-icon--green {
  background: rgba(29, 185, 84, 0.13);
  color: #4ade80;
}

body.dark-mode .stg-icon--purple {
  background: rgba(168, 85, 247, 0.10);
}

body.dark-mode .stg-icon--blue {
  background: rgba(37, 117, 252, 0.10);
}

body.dark-mode .stg-icon--orange {
  background: rgba(249, 115, 22, 0.10);
}

body.dark-mode .stg-icon--red {
  background: rgba(231, 76, 60, 0.10);
}

body.dark-mode .stg-icon--green {
  background: rgba(29, 185, 84, 0.10);
}

/* Teal icon (loop / repeat) */
.stg-icon--teal {
  background: rgba(6, 182, 212, 0.14);
  color: #22d3ee;
}

body.dark-mode .stg-icon--teal {
  background: rgba(6, 182, 212, 0.10);
}

/* ── Keyboard shortcut key badge shown in settings rows ── */
.bz-key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.4px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: default;
}

body.dark-mode .bz-key-badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}

/* ── Scrollable Preferences list: 5.5 items visible before scroll ── */
.stg-prefs-scroll {
  max-height: 412px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.35) transparent;
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  padding-right: 2px;
}

.stg-prefs-scroll .setting-item:last-child {
  margin-bottom: 8px;
}

/* ── Pair wrapper: holds Restore + Delete side by side ── */
.stg-btn-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Action button (right side of row) ── */
.stg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.stg-action-btn:hover {
  transform: scale(1.04);
}

.stg-action-btn:active {
  transform: scale(0.96);
}

.stg-btn--danger {
  background: rgba(231, 76, 60, 0.12);
  color: var(--accent-red);
  border-color: rgba(231, 76, 60, 0.30);
}

.stg-btn--danger:hover {
  background: rgba(231, 76, 60, 0.22);
  border-color: var(--accent-red);
}

.stg-btn--green {
  background: rgba(29, 185, 84, 0.12);
  color: var(--accent-green);
  border-color: rgba(29, 185, 84, 0.28);
}

.stg-btn--green:hover {
  background: rgba(29, 185, 84, 0.22);
  border-color: var(--accent-green);
}

.stg-btn--purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.28);
}

.stg-btn--purple:hover {
  background: rgba(168, 85, 247, 0.22);
  border-color: #c084fc;
}

body.dark-mode .stg-btn--danger {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.22);
}

body.dark-mode .stg-btn--green {
  background: rgba(29, 185, 84, 0.08);
  border-color: rgba(29, 185, 84, 0.22);
}

body.dark-mode .stg-btn--purple {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.22);
}

.stg-btn--blue {
  background: rgba(37, 117, 252, 0.12);
  color: #60a5fa;
  border-color: rgba(37, 117, 252, 0.28);
}

.stg-btn--blue:hover {
  background: rgba(37, 117, 252, 0.22);
  border-color: #60a5fa;
}

body.dark-mode .stg-btn--blue {
  background: rgba(37, 117, 252, 0.08);
  border-color: rgba(37, 117, 252, 0.22);
}

/* ── Manual sync rows: dimmed when auto-sync is ON ── */
#bz-manual-upload-row.bz-sync-manual-dimmed,
#bz-manual-download-row.bz-sync-manual-dimmed {
  opacity: 0.45;
  pointer-events: none;
}

/* ── About card ── */
.stg-about-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
  animation: fadeIn 0.3s ease;
  overflow: hidden;
}

body.dark-mode .stg-about-card {
  background: var(--bg-card);
  border-color: var(--border-strong);
}

/* ── Header row: [icon+text] [know-more] [logo] ── */
.stg-about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Left zone: small icon box + name/tagline */
.stg-about-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.stg-about-icon-box {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f8ef7 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(79, 142, 247, 0.35);
}

.stg-about-icon-box i {
  font-size: 1rem;
  color: #fff;
}

.stg-about-text-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stg-about-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.stg-about-tagline {
  font-size: 0.72rem;
  color: var(--primary-color);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Know More button — center zone, vertically centered ── */
.stg-know-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.stg-know-more-btn:hover {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 2px 10px var(--primary-glow);
}

.stg-know-more-btn i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

/* ── Logo image — far right ── */
.stg-about-logo-wrap {
  flex-shrink: 0;
}

.stg-about-img {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  display: block;
}

/* ── Collapsible details ── */
.stg-about-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  opacity: 0;
}

.stg-about-details--open {
  max-height: 600px;
  opacity: 1;
}

/* Contact form needs more room than the About chip grid */
.stg-contact-details.stg-about-details--open {
  max-height: 900px;
}

.stg-about-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 16px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── Features label ── */
.stg-features-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

/* ── Feature chips grid ── */
.stg-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding-bottom: 2px;
}

.stg-feature-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.stg-feature-chip:hover {
  background: var(--bg-glass-hover);
  border-color: var(--primary-color);
}

.stg-feature-chip i {
  font-size: 0.8rem;
  color: var(--primary-color);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

body.dark-mode .stg-feature-chip {
  background: var(--bg-card);
  border-color: #1c1c1c;
}

body.dark-mode .stg-feature-chip:hover {
  background: var(--bg-glass-hover);
  border-color: var(--primary-color);
}

/* ── Contact card ── */
.stg-contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 20px 18px 18px;
  animation: fadeIn 0.3s ease;
}

body.dark-mode .stg-contact-card {
  background: var(--bg-card);
  border-color: var(--border-strong);
}

.stg-contact-intro {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 16px;
}

/* ── Form helpers ── */
.stg-required {
  color: var(--accent-red);
  font-weight: 600;
}

.stg-optional {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ── Responsive ── */
@media (max-width: 540px) {
  .stg-about-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .stg-about-icon-box i {
    font-size: 0.85rem;
  }

  .stg-know-more-btn {
    padding: 6px 10px;
    font-size: 0.70rem;
  }

  /* ── Both cards: icon left | heading+tagline stacked | button right ── */

  /* Restore flex on the header (same structure as About card) */
  .stg-contact-card .stg-about-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  /* Restore flex wrappers (undo display:contents from earlier attempt) */
  .stg-contact-card .stg-about-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .stg-contact-card .stg-about-text-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  /* Smaller font so the long text wraps to ~2 lines beside the icon */
  .stg-contact-card .stg-about-name {
    font-size: 0.76rem;
    line-height: 1.4;
    max-height: none;
    overflow: visible;
    font-weight: 700;
  }

  /* Button stays at top-right, aligned to the icon row */
  .stg-contact-card .stg-know-more-btn {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
  }

  .stg-section,
  #stg-account-section {
    width: calc(100% - 2rem);
  }

  .stg-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stg-action-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 0.75rem;
  }

  .stg-icon-wrap {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .stg-about-img {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 360px) {
  .stg-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .stg-feature-chip {
    font-size: 0.7rem;
    padding: 8px 8px;
  }

  .stg-about-img {
    width: 52px;
    height: 52px;
  }


}

/* ── Keep legacy .setting-text working ── */
.setting-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.setting-text h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.setting-text p {
  margin: 3px 0 0;
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════
   BZ MICRO POPUP  — replaces native alert() / confirm()
   Reuses existing .bz-clear-popup / .bz-popup-box framework
   with extra variants for single-button (alert) and input
   ════════════════════════════════════════════════════════════ */

/* Full-screen overlay shared with bz-clear-popup */
#bz-micro-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

#bz-micro-popup.visible {
  opacity: 1;
  pointer-events: all;
}

#bz-micro-popup .bz-popup-box {
  animation: bzPopupIn 0.26s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes bzPopupIn {
  from {
    transform: scale(0.88) translateY(16px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Single-button (alert) — full width */
.bz-popup-single {
  flex: 1;
  width: 100%;
}

/* Input field inside popup */
#bz-micro-popup input[type="text"] {
  transition: border-color 0.18s;
}

#bz-micro-popup input[type="text"]:focus {
  border-color: rgba(124, 58, 237, 0.70) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* ============================================================
   DAILY PLAYLISTS SECTION
   4 time-slot rows, each with 3 cards in horizontal scroll.
   Cards: 1:1 ratio, 2x2 collage cover, bottom-only gradient.
   ============================================================ */

/* Section wrapper — same as other playlists sections */
.dp-section {
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════
   DAILY SLOT HEADER — heading + inline countdown
   Both always on one line, same visual weight
   ═══════════════════════════════════════════════ */

/* Header row: title + countdown side by side, never wrap */
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
  flex-wrap: nowrap;
}

.dp-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

/* ── Circle icon badge — matches playlists section icon style ── */
.dp-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 15px;
}

/* Per-slot colors matching screenshot exactly */
.dp-icon-morning {
  background: rgba(246, 201, 14, 0.18);
  color: #f6c90e;
  border: 1.5px solid rgba(246, 201, 14, 0.35);
}

.dp-icon-afternoon {
  background: rgba(243, 156, 18, 0.18);
  color: #f39c12;
  border: 1.5px solid rgba(243, 156, 18, 0.35);
}

.dp-icon-evening {
  background: rgba(167, 139, 250, 0.18);
  color: #a78bfa;
  border: 1.5px solid rgba(167, 139, 250, 0.35);
}

.dp-icon-midnight {
  background: rgba(129, 140, 248, 0.18);
  color: #818cf8;
  border: 1.5px solid rgba(129, 140, 248, 0.35);
}

.dp-icon-playlist {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1.5px solid rgba(168, 85, 247, 0.35);
}

.dp-icon-recap {
  background: rgba(37, 117, 252, 0.18);
  color: #60a5fa;
  border: 1.5px solid rgba(37, 117, 252, 0.35);
}

.dp-icon-default {
  background: rgba(37, 117, 252, 0.15);
  color: var(--primary-color);
  border: 1.5px solid rgba(37, 117, 252, 0.30);
}

/* Pulsing green dot for active slot */
.dp-active-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1db954;
  box-shadow: 0 0 6px #1db954;
  flex-shrink: 0;
  animation: dp-pulse 1.6s ease-in-out infinite;
}

@keyframes dp-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.55;
    transform: scale(0.8);
  }
}

/* Countdown pill — same font size as heading */
.dp-countdown-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dp-countdown-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.dp-countdown-timer {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-color, #2575fc);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

body.dark-mode .dp-countdown-wrap {
  background: rgba(255, 255, 255, 0.04);
}


/* Card: same flex-item sizing as playlists cards */
.dp-card {
  flex: 0 0 140px !important;
  min-width: 140px !important;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}

.dp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.dp-card:active {
  transform: scale(0.96);
}

.dp-card-inner {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 2×2 collage fills the whole card square */
.dp-card-collage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.dp-card-collage img {
  width: 50%;
  height: 50%;
  object-fit: cover;
  display: block;
}

/* Beat Zen logo — small circle, top-left */
.dp-card-logo {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

/* Recap year card — text panel sits just below the logo, not over the year number */
.dp-recap-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  padding: 18px 9px 8px;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 65%, transparent 100%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Text area — bottom only gradient, no full overlay */
.dp-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 9px 9px;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.dp-card-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  word-break: break-word;
  overflow: hidden;
  display: block;
  max-height: 2.6em;
}

.dp-card-count {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
  font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .dp-card {
    flex: 0 0 115px !important;
    min-width: 115px !important;
  }

  /* Single-line header: heading left, countdown right — NEVER wraps */
  .dp-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
  }

  .dp-header h2 {
    font-size: 1.15rem;
    font-weight: 800;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin: 0 !important;
    gap: 8px;
  }

  .dp-icon-badge {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .dp-countdown-wrap {
    flex: 0 0 auto;
    padding: 3px 8px;
    gap: 3px;
    white-space: nowrap;
    margin-left: auto;
  }

  .dp-countdown-label {
    font-size: 0.65rem;
  }

  .dp-countdown-timer {
    font-size: 0.65rem;
    letter-spacing: 0.8px;
  }

  .dp-card-name {
    font-size: 0.7rem;
  }

  .dp-card-logo {
    width: 18px;
    height: 18px;
    top: 5px;
    left: 5px;
  }
}

@media (max-width: 480px) {
  .dp-header h2 {
    font-size: 1rem;
  }

  .dp-icon-badge {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .dp-card {
    flex: 0 0 105px !important;
    min-width: 105px !important;
  }

  .dp-header h2 {
    font-size: 0.92rem;
  }

  .dp-icon-badge {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .dp-countdown-wrap {
    padding: 2px 6px;
    gap: 2px;
  }

  .dp-countdown-label {
    font-size: 0.60rem;
  }

  .dp-countdown-timer {
    font-size: 0.60rem;
  }
}








/* ============================================================
   SETTINGS — ACCOUNT / GOOGLE SIGN-IN SECTION
   Sign-out state: centred card with cloud icon + auth buttons.
   Sign-in state: avatar row, sync status, upload/download row.
   ============================================================ */

/* ── Signed-out card ── */
.bz-auth-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* ── Cloud icon in sign-out card ── */
.bz-auth-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(106, 17, 203, 0.18), rgba(37, 117, 252, 0.18));
  border: 1.5px solid rgba(106, 17, 203, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #a78bfa;
  flex-shrink: 0;
}

/* ── Text block inside sign-out card ── */
.bz-auth-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.bz-auth-card-text h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.bz-auth-card-text p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 340px;
}

/* ── Signed-in card wrapper ── */
.bz-auth-card--in {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 18px !important;
  gap: 0 !important;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
  text-align: left;
}

/* ── Header row: Avatar | User Info | Sign Out (desktop) ──
   On desktop (>480px) all three sit on one row.
   On mobile (≤480px) sign-out drops to its own row.         */
.bz-auth-header-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "avatar info signout";
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* ── Avatar ── */
.bz-auth-avatar {
  grid-area: avatar;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(124, 58, 237, 0.60);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  display: block;
}

/* ── User info column ── */
.bz-auth-user-info {
  grid-area: info;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* ── Name ── */
.bz-auth-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  text-align: left;
}

/* ── Email ── */
.bz-auth-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
  text-align: left;
}

/* ── Sync status — green tick + single-line text ── */
.bz-auth-sync-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 500;
  color: #4ade80;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.bz-auth-sync-status i {
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* Tick icon — green, with gap before the "Synced" label */
.bz-sync-tick {
  color: #4ade80;
  margin-right: 4px;
}

/* Cloud icon — amber when offline */
.bz-sync-offline-icon {
  color: #fbbf24;
  margin-right: 4px;
}

/* Desktop: all inline — single line "Last Synced • 24 May, 12:12 am" */
.bz-sync-label,
.bz-sync-sep,
.bz-sync-time {
  display: inline;
  white-space: nowrap;
}

/* Mobile: keep single line — "Synced • 6 Jun 12:07 pm" */
@media (max-width: 768px) {
  .bz-auth-sync-status {
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  .bz-sync-label {
    display: inline;
    width: auto;
  }

  .bz-sync-sep {
    display: inline;
  }

  .bz-sync-time {
    display: inline;
    white-space: nowrap;
  }
}

/* ── Sign Out button (desktop: 3rd grid column) ── */
#bz-google-signout-btn {
  grid-area: signout;
  flex-shrink: 0;
  align-self: center;
  padding: 9px 16px;
  font-size: 0.82rem;
  white-space: nowrap;
  height: auto;
  line-height: 1.4;
}

/* ── Sync Info banner ── */
.bz-sync-info {
  width: 100%;
  margin-top: 0;
  padding: 11px 14px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 10px;
  color: #c084fc;
  font-size: 0.76rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.45;
  box-sizing: border-box;
  text-align: left;
}

.bz-sync-info i {
  flex-shrink: 0;
  font-size: 0.82rem;
}

/* ── Sync row: banner + button ALWAYS side by side ── */
.bz-sync-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
}

.bz-sync-row .bz-sync-info {
  flex: 1;
  margin-top: 0;
}

#bz-smart-sync-btn {
  display: flex !important;
  width: auto !important;
  margin-top: 0 !important;
  justify-content: center !important;
  font-size: 0.88rem !important;
  padding: 11px 20px !important;
  border-radius: 10px !important;
  letter-spacing: 0.3px;
  box-sizing: border-box;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   MOBILE ≤ 480px
   • Sign Out stays beside avatar/name (3-col grid intact)
   • Sync Data button sits inline beside the banner text
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Keep desktop 3-col grid — Sign Out stays beside user info */
  .bz-auth-header-row {
    grid-template-columns: 48px 1fr auto;
    grid-template-areas: "avatar info signout";
    align-items: center;
    gap: 10px;
  }

  .bz-auth-avatar {
    width: 48px;
    height: 48px;
  }

  #bz-google-signout-btn {
    padding: 8px 11px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .bz-auth-name {
    font-size: 0.88rem;
  }

  .bz-auth-email {
    font-size: 0.73rem;
  }

  .bz-auth-sync-status {
    font-size: 0.65rem;
    margin-top: 4px;
  }

  /* Sync row stays row — just tighten sizing on mobile */
  .bz-sync-row {
    gap: 10px;
    margin-top: 12px;
  }

  .bz-sync-row .bz-sync-info {
    font-size: 0.72rem;
    padding: 9px 11px;
  }

  /* Sync Data button: compact on mobile */
  #bz-smart-sync-btn {
    padding: 9px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    gap: 5px;
  }
}

/* Very small phones ≤ 360px */
@media (max-width: 360px) {
  .bz-auth-header-row {
    gap: 8px;
  }

  .bz-auth-avatar {
    width: 42px;
    height: 42px;
  }

  #bz-google-signout-btn {
    padding: 7px 9px;
    font-size: 0.73rem;
  }

  .bz-auth-name {
    font-size: 0.84rem;
  }

  .bz-auth-email {
    font-size: 0.69rem;
  }

  .bz-sync-row .bz-sync-info {
    font-size: 0.68rem;
    padding: 8px 9px;
  }

  #bz-smart-sync-btn {
    padding: 8px 10px !important;
    font-size: 0.71rem !important;
  }
}

/* ============================================================
   AUTO MIX / QUEUE ENHANCEMENTS
   ============================================================ */

/* stg-icon pink for Auto Mix */
.stg-icon--pink {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
  border: 1.5px solid rgba(236, 72, 153, 0.35);
}

/* Drag handle — now on the LEFT, always visible */
.bz-q-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  cursor: grab;
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  flex-shrink: 0;
  touch-action: none;
  transition: color 0.15s;
  order: -1;
  margin-right: 2px;
}

.bz-q-drag:hover {
  color: rgba(255, 255, 255, 0.7);
}

.bz-q-drag:active {
  cursor: grabbing;
}

/* Drop-over highlight when dragging */
.bz-q-item.drag-over {
  background: rgba(124, 58, 237, 0.18) !important;
  border-top: 2px solid #7c3aed;
}

/* Add-to-playlist button — green accent */
.bz-q-action-btn.bz-q-add-playlist {
  color: #6bcb77;
}

.bz-q-action-btn.bz-q-add-playlist:hover {
  background: rgba(107, 203, 119, 0.20) !important;
  color: #6bcb77 !important;
}

/* ── Add to Playlist popup ── */
.bz-q-pl-popup {
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.bz-q-pl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.bz-q-pl-option {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.bz-q-pl-option:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.45);
}

.bz-q-pl-new-btn {
  width: 100%;
  padding: 10px 14px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px dashed rgba(124, 58, 237, 0.45);
  border-radius: 10px;
  color: #a78bfa;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.bz-q-pl-new-btn:hover {
  background: rgba(124, 58, 237, 0.28);
}

/* Auto Mix badge on queue items — class .bz-q-item--automix is used by JS; full styles in beatzen-pro.css */

/* ================================================================
   FAVOURITES ENGINE — heart button, toast, playlist card, modal btn
   (moved from beatzen-pro.css)
================================================================ */

/* ═══════════════════════════════════════════════════════════
   FAVOURITES — Heart button in queue rows
═══════════════════════════════════════════════════════════ */
.bz-q-fav-btn {
  color: rgba(255, 255, 255, 0.35);
  background: transparent;
  border: none;
  font-size: 0.9rem;
  transition: color 0.18s, transform 0.18s, text-shadow 0.18s;
}

.bz-q-fav-btn:hover {
  color: #ff2d55;
  transform: scale(1.25);
}

/* Active = song is in favourites: bright solid red heart */
.bz-q-fav-btn--active {
  color: #ff2d55 !important;
  text-shadow: 0 0 12px rgba(255, 45, 85, 0.85), 0 0 24px rgba(255, 45, 85, 0.40);
  animation: bz-fav-pop 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.bz-q-fav-btn--active:hover {
  color: #ff6b81 !important;
  transform: scale(1.20);
  text-shadow: 0 0 16px rgba(255, 80, 100, 0.90);
}

@keyframes bz-fav-pop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.40);
  }

  70% {
    transform: scale(0.88);
  }

  100% {
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   FAVOURITES TOAST NOTIFICATION
═══════════════════════════════════════════════════════════ */
.bz-fav-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 18, 24, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 45, 85, 0.45);
  border-radius: 14px;
  padding: 11px 16px 11px 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 45, 85, 0.12),
    0 0 18px rgba(255, 45, 85, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.26s ease, transform 0.26s ease;
  min-width: 230px;
  max-width: 320px;
  pointer-events: auto;
  user-select: none;
}

.bz-fav-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d55, #ff6b81);
  box-shadow: 0 4px 14px rgba(255, 45, 85, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bz-fav-toast-icon i {
  color: #fff;
  font-size: 14px;
}

.bz-fav-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.bz-fav-toast-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ff6b81;
  text-transform: uppercase;
  white-space: nowrap;
}

.bz-fav-toast-song {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════════
   FAVOURITES PLAYLIST CARD — heart cover glow in Your Playlists
═══════════════════════════════════════════════════════════ */
.dp-card[data-dp-id="bz-favourites-playlist"] .dp-card-inner {
  border: 1.5px solid rgba(255, 45, 85, 0.45);
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.18);
}

.dp-card[data-dp-id="bz-favourites-playlist"] .dp-card-collage {
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.30), rgba(18, 18, 24, 0.85));
}

.dp-card[data-dp-id="bz-favourites-playlist"] .dp-card-name {
  color: #ff6b81;
}

/* ═══════════════════════════════════════════════════════════
   FAVOURITES — "Add to Favourites" in song context menu modal
═══════════════════════════════════════════════════════════ */
#modal-fav-btn+button {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#modal-fav-btn .bz-fav-modal-icon {
  color: rgba(255, 80, 100, 0.65) !important;
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.22s;
}

#modal-fav-btn:hover .bz-fav-modal-icon {
  color: #ff2d55 !important;
  transform: scale(1.22);
}

#modal-fav-btn.bz-fav-modal-btn--active .bz-fav-modal-icon {
  color: #ff2d55 !important;
  filter: drop-shadow(0 0 5px rgba(255, 45, 85, 0.60));
}

#modal-fav-btn.bz-fav-modal-btn--active {
  color: #ff2d55 !important;
}

#modal-fav-btn.bz-fav-modal-btn--active:hover {
  background: rgba(255, 45, 85, 0.10) !important;
}

/* ── AutoMix history badge (listening activity) ─────────────────────────── */
.bzh-automix-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #2575fc;
  background: rgba(37, 117, 252, 0.12);
  border: 1px solid rgba(37, 117, 252, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

.bzh-automix-movie {
  color: #b3b3b3;
  font-size: 0.7rem;
}

/* ── Now Playing fav button in queue overlay ─────────────────────────────── */
.bz-q-now-fav-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 0.9rem !important;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07) !important;
  border: none !important;
  color: #aaa !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, transform 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bz-q-now-fav-btn:hover {
  background: rgba(255, 80, 80, 0.18) !important;
  color: #ff4c4c !important;
  transform: scale(1.12) !important;
}

.bz-q-now-fav-btn.bz-q-fav-btn--active {
  background: rgba(255, 60, 60, 0.2) !important;
  color: #ff4c4c !important;
}

.bz-q-now-fav-btn.bz-q-fav-btn--active:hover {
  background: rgba(255, 60, 60, 0.35) !important;
}

/* ── AutoMix source label in Listen Again cards ───────────────────────────── */
.bzp-la-automix-source {
  color: #2575fc !important;
  font-weight: 600 !important;
}

/* ============================================================
   32. SCROLL TO TOP BUTTON
   ============================================================ */
.bz-scroll-top-btn {
  position: fixed;
  bottom: calc(var(--player-height, 120px) + 20px);
  right: 18px;
  z-index: 9000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #2575fc 100%);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
  animation: bz-fadein-up 0.3s ease both;
}

.bz-scroll-top-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.6), 0 3px 10px rgba(0, 0, 0, 0.4);
}

.bz-scroll-top-btn:active {
  transform: scale(0.93);
}

@keyframes bz-fadein-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   33. YEAR JUMP BAR
   ============================================================ */
.bz-year-jump-bar {
  position: fixed;
  top: var(--nav-height, 70px);
  left: 0;
  right: 0;
  z-index: 799;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1e1246 0%, #0d1e4a 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 2px solid rgba(124, 58, 237, 0.55);
  border-radius: 0 0 14px 14px;
  padding: 0 10px;
  margin: 0;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.25);
  /* Height controlled by inner content; JS reads this to offset the page */
}

.bz-year-jump-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.bz-year-jump-pill {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: 999px;
  border: 2px solid rgba(167, 139, 250, 0.55);
  background: rgba(124, 58, 237, 0.22);
  color: #c4b5fd;
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: inherit;
  white-space: nowrap;
}

.bz-year-jump-pill:hover {
  background: rgba(124, 58, 237, 0.50);
  border-color: #a78bfa;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

.bz-year-jump-pill:active {
  transform: scale(0.95);
}

.bz-year-jump-pill.active {
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.60);
}

/* Dark mode — same strong look */
body.dark-mode .bz-year-jump-bar {
  background: linear-gradient(135deg, #0e0820 0%, #080f28 100%);
  border-color: rgba(124, 58, 237, 0.50);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50);
}

body.dark-mode .bz-year-jump-pill {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
}

body.dark-mode .bz-year-jump-pill:hover {
  background: rgba(124, 58, 237, 0.45);
  border-color: #a78bfa;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

body.dark-mode .bz-year-jump-pill.active {
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.60);
}

/* ── Save Queue as Playlist button in queue header ── */
.bz-btn--save {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.bz-btn--save:hover {
  background: linear-gradient(135deg, #15803d, #166534) !important;
  box-shadow: 0 4px 18px rgba(22, 163, 74, 0.40) !important;
}

/* ═══════════════════════════════════════════════
   SONG INFO PANEL
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   SONG INFO PANEL — compact centered card
═══════════════════════════════════════════════ */
.bz-song-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bz-song-info-overlay.visible {
  opacity: 1;
}

.bz-song-info-panel {
  background: #13132b;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  width: 100%;
  max-width: 400px;
  padding: 0;
  transform: scale(0.92) translateY(16px);
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.70);
  position: relative;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.bz-song-info-overlay.visible .bz-song-info-panel {
  transform: scale(1) translateY(0);
}

.bz-si-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bz-si-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.bz-si-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.55);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.bz-si-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.bz-si-body {
  padding: 0 18px 18px;
  overflow-y: auto;
  flex: 1;
}

.bz-si-artwork-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 14px;
}

.bz-si-artwork {
  width: 110px;
  height: 110px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60);
}

.bz-si-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bz-si-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bz-si-row:last-child {
  border-bottom: none;
}

.bz-si-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(124, 58, 237, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.bz-si-row-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bz-si-row-label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 600;
}

.bz-si-row-value {
  font-size: 0.86rem;
  color: #e2e2f0;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.bz-si-source {
  display: none;
}

/* Skeleton loader */
.bz-si-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.bz-si-skel-line {
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: bzSkelShimmer 1.4s infinite;
  width: 100%;
}

.bz-si-skel-short {
  width: 45%;
}

.bz-si-skel-medium {
  width: 70%;
}

@keyframes bzSkelShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Song Info button in menu */
#modal-song-info-btn {
  color: #a78bfa !important;
}

#modal-song-info-btn i {
  color: #a78bfa !important;
}

/* ================================================================
   SCHEDULED DARK MODE — Settings panel
   ================================================================ */

.schedule-dm-panel {
  margin: 0 0 4px 0;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: sdm-fadein 0.22s ease;
}

@keyframes sdm-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Day chips ── */
.schedule-dm-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-dm-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sdm-day-chip {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.sdm-day-chip:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}

.sdm-day-chip.active {
  background: rgba(139, 92, 246, 0.28);
  border-color: rgba(139, 92, 246, 0.7);
  color: #a78bfa;
  font-weight: 700;
}

.sdm-day-all.active {
  background: rgba(139, 92, 246, 0.35);
  border-color: #7c3aed;
  color: #c4b5fd;
}

/* ── Time pickers row: side-by-side ── */
.schedule-dm-times {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.schedule-dm-time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.schedule-dm-time-label {
  font-size: 0.70rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* The two inputs (Hr + Min + AM/PM) sit side by side inside each block */
.sdm-manual-inputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.sdm-time-input {
  width: 52px;
  height: 44px;
  background: rgba(109, 40, 217, 0.12);
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  border-radius: 10px;
  color: #e2d9ff;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  caret-color: #a78bfa;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  appearance: textfield;
}

.sdm-time-input:focus {
  border-color: rgba(139, 92, 246, 0.80);
  background: rgba(109, 40, 217, 0.22);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.sdm-time-input::placeholder {
  color: rgba(196, 181, 253, 0.30);
}

.sdm-manual-colon {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
  user-select: none;
}

.sdm-ampm-toggle {
  height: 44px;
  min-width: 52px;
  padding: 0 10px;
  background: rgba(109, 40, 217, 0.14);
  border: 1.5px solid rgba(139, 92, 246, 0.38);
  border-radius: 10px;
  color: #c4b5fd;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.10s;
}

.sdm-ampm-toggle:hover {
  background: rgba(139, 92, 246, 0.26);
  border-color: rgba(139, 92, 246, 0.65);
  color: #fff;
}

.sdm-ampm-toggle:active {
  transform: scale(0.93);
  background: rgba(139, 92, 246, 0.38);
}

/* Arrow divider between Turn On and Turn Off */
.schedule-dm-arrow {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.22);
  align-self: center;
  margin-top: 22px;
  flex-shrink: 0;
}

/* ── Active badge ── */
.schedule-dm-active-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: #a78bfa;
  font-weight: 600;
}

.schedule-dm-active-badge i {
  font-size: 0.85rem;
  color: #8b5cf6;
  flex-shrink: 0;
}

/* ── Lock manual toggle while schedule is active ── */
.switch.sdm-managed {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Responsive: stack vertically on very small screens ── */
@media (max-width: 380px) {
  .schedule-dm-times {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .schedule-dm-arrow {
    transform: rotate(90deg);
    margin-top: 0;
  }
}

/* AM/PM wheel — narrower than Hr/Min */
.sdm-ampm-wheel {
  width: 48px !important;
}

.sdm-ampm-wheel .picker-item {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Set Schedule button ── */
.sdm-set-schedule-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #2575fc 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s, background 0.2s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}

.sdm-set-schedule-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.50);
}

.sdm-set-schedule-btn:active {
  transform: scale(0.97);
  opacity: 1;
}

.sdm-set-schedule-btn--pending {
  background: linear-gradient(135deg, #7c3aed 0%, #2575fc 100%);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
  animation: sdm-btn-pulse 1.6s ease-in-out infinite;
}

@keyframes sdm-btn-pulse {

  0%,
  100% {
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
  }

  50% {
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.65);
  }
}

.sdm-set-schedule-btn--saved {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow: 0 4px 18px rgba(22, 163, 74, 0.40) !important;
  animation: none !important;
}

/* Cancel Schedule — red state */
.sdm-set-schedule-btn--cancel {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.40) !important;
  animation: none !important;
}

.sdm-set-schedule-btn--cancel:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.55) !important;
  opacity: 1 !important;
}

/* ============================================================
   HOME YEAR SECTIONS — responsive grid (no horizontal scroll)
   Scoped to #year-sections-container so playlists are unaffected
   ============================================================ */

#year-sections-container .albums-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  flex-wrap: unset;
  gap: 10px;
  padding: 4px 16px 16px;
}

/* Cards fill their grid cell instead of being fixed-width flex items */
#year-sections-container .album-card {
  flex: unset !important;
  min-width: 0 !important;
  width: 100%;
  scroll-snap-align: none;
}

/* Enforce strict 1:1 ratio on the image wrapper so mobile doesn't break */
#year-sections-container .album-card-img-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
}

#year-sections-container .album-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Tablet */
@media (max-width: 767px) {
  #year-sections-container .albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 4px 14px 14px;
  }
}

/* Mobile — lock to 3 columns so cards stay comfortably sized */
@media (max-width: 480px) {
  #year-sections-container .albums-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px 12px 14px;
  }
}

/* Small phones — still 3 columns, tighter gap */
@media (max-width: 360px) {
  #year-sections-container .albums-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px 10px 12px;
  }
}

/* ============================================================
   32. LOADER & AUTH GATE (moved from index.html inline <style>)
   ============================================================ */
/* ══════════════════════════════════════════
           BEAT ZEN — Premium Loader
        ══════════════════════════════════════════ */
#bz-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #08081a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  opacity: 1;
  visibility: visible;
  /* explicit — prevents inheritance-based transition inconsistency on first load */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#bz-loader-overlay::before,
#bz-loader-overlay::after {
  content: none;
}

/* bz-loader-instant intentionally removed — class is no longer added by any script */

#bz-loader-overlay.bz-loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bz-loader-ring {
  position: relative;
  width: 108px;
  height: 108px;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.bz-loader-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: bzRingSpin 2.2s linear infinite;
}

@keyframes bzRingSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.bz-loader-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 3;
}

.bz-loader-ring-fill {
  fill: none;
  stroke: url(#bzRingGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 60;
}

.bz-loader-ring img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
}

.bz-loader-brand {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e2d9ff 0%, #a78bfa 50%, #60a5fa 100%);
  color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}

.bz-loader-tagline {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 38px;
}

.bz-loader-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 220px;
}

.bz-loader-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.bz-loader-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  animation: bzDotWave 1.2s ease-in-out infinite;
}

.bz-loader-dots span:nth-child(1) {
  animation-delay: 0s;
  background: #7c3aed;
}

.bz-loader-dots span:nth-child(2) {
  animation-delay: 0.18s;
  background: #4f46e5;
}

.bz-loader-dots span:nth-child(3) {
  animation-delay: 0.36s;
  background: #2575fc;
}

.bz-loader-dots span:nth-child(4) {
  animation-delay: 0.54s;
  background: #0ea5e9;
}

@keyframes bzDotWave {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  40% {
    transform: scale(1.25);
    opacity: 1;
  }
}

.bz-loader-status {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  letter-spacing: 0.3px;
  min-height: 1.3em;
}

/* PLAY BUTTONS & HIGHLIGHTS */

.album-card-img-wrap {
  position: relative;
  overflow: hidden;
}

/* ── Mobile touch: keep music bars visible on now-playing card ── */

.bze-card-play:hover {
  background: #1db954 !important;
  box-shadow: 0 4px 18px rgba(29, 185, 84, 0.55) !important;
}

.bze-card-play--active {
  background: #1db954 !important;
  box-shadow: 0 4px 18px rgba(29, 185, 84, 0.55) !important;
}

.song-item.active {
  background: transparent !important;
  border: 2px solid #1db954 !important;
}

.song-item.active .song-item-title {
  color: inherit !important;
}


/* ── Guarantee: hide signed-in panel from first paint.
              auth.js calls showSignedIn() only after Firebase confirms the user.
              Using a class toggle so JS can override without fighting inline style. ── */
#bz-auth-signedin {
  display: none !important;
}

#bz-auth-signedin.bz-auth-visible {
  display: block !important;
}

/* ══════════════════════════════════════════════════════
           AUTH GATE OVERLAY — fully responsive, viewport-safe
           Uses 100dvh so mobile browser chrome is excluded.
        ══════════════════════════════════════════════════════ */

/* ── Overlay wrapper ─────────────────────────────────── */
#bz-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: linear-gradient(160deg, #08081a 0%, #0e0b22 55%, #060612 100%);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  /* fallback for browsers without dvh */
  min-height: 100dvh;
  /* accounts for mobile browser chrome (address bar, bottom bar) */
  padding: 16px;
  box-sizing: border-box;
}

#bz-auth-gate.bz-gate-visible {
  display: flex;
  animation: bzGateFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bzGateFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ambient blobs — pointer-events:none so they never interfere */
#bz-auth-gate::before {
  content: '';
  position: fixed;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  top: -80px;
  left: -60px;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

#bz-auth-gate::after {
  content: '';
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, #2575fc 0%, transparent 70%);
  bottom: -50px;
  right: -50px;
  filter: blur(80px);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

/* ── Card ────────────────────────────────────────────── */
.bz-gate-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.09) 0%, rgba(37, 117, 252, 0.05) 100%);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 22px;
  padding: clamp(12px, 2.5vw, 18px) clamp(14px, 3vw, 20px) clamp(10px, 2vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.10);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-sizing: border-box;
}

/* ── Brand row ───────────────────────────────────────── */
.bz-gate-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  flex-shrink: 0;
}

.bz-gate-brand img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.5);
}

.bz-gate-brand-name {
  font-size: clamp(0.88rem, 2.5vw, 1.05rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e2d9ff 0%, #a78bfa 50%, #60a5fa 100%);
  color: transparent;
  background-clip: text;
}

/* ── Lock icon ───────────────────────────────────────── */
.bz-gate-lock {
  width: clamp(50px, 11vw, 62px);
  height: clamp(50px, 11vw, 62px);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(37, 117, 252, 0.12));
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(12px, 2.5vh, 18px);
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.22);
  flex-shrink: 0;
}

.bz-gate-lock i {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  color: #a78bfa;
}

/* ── Text ────────────────────────────────────────────── */
.bz-gate-title {
  font-size: clamp(1rem, 4vw, 1.22rem);
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: clamp(5px, 1vh, 8px);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.bz-gate-subtitle {
  font-size: clamp(0.78rem, 2.5vw, 0.84rem);
  color: rgba(255, 255, 255, 0.48);
  text-align: center;
  line-height: 1.55;
  margin-bottom: clamp(12px, 2.5vh, 18px);
  max-width: 310px;
  flex-shrink: 0;
}

/* ── Action buttons ──────────────────────────────────── */
.bz-gate-actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: clamp(7px, 1.2vh, 10px);
  flex-shrink: 0;
}

.bz-gate-signup-btn {
  flex: 1;
  padding: clamp(11px, 2vh, 13px) 12px;
  border-radius: 13px;
  border: 1.5px solid rgba(124, 58, 237, 0.45);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(37, 117, 252, 0.12));
  color: #e2d9fc;
  font-size: clamp(0.82rem, 2.3vw, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
}

.bz-gate-signup-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 117, 252, 0.20));
  border-color: rgba(124, 58, 237, 0.70);
  transform: translateY(-1px);
}

.bz-gate-signup-btn:active {
  transform: scale(0.98);
}

.bz-gate-signin-btn {
  flex: 1;
  padding: clamp(11px, 2vh, 13px) 12px;
  border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.60);
  font-size: clamp(0.82rem, 2.3vw, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
}

.bz-gate-signin-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.bz-gate-signin-btn:active {
  transform: scale(0.98);
}

.bz-gate-signin-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: clamp(2px, 0.5vh, 4px);
  font-size: clamp(0.76rem, 2.2vw, 0.82rem);
  color: rgba(255, 255, 255, 0.36);
  flex-wrap: wrap;
}

.bz-gate-signin-link {
  background: none;
  border: none;
  color: #a78bfa;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bz-gate-signin-link:hover {
  color: #c4b5fd;
}

/* ── Footer / open settings ──────────────────────────── */
.bz-gate-footer {
  margin-top: clamp(8px, 1.5vh, 12px);
  text-align: center;
  flex-shrink: 0;
}

.bz-gate-settings-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.40);
  font-size: clamp(0.74rem, 2vw, 0.78rem);
  font-family: inherit;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}

.bz-gate-settings-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
}

/* ── Very small screens (< 360px) ────────────────────── */
@media (max-width: 359px) {
  #bz-auth-gate {
    padding: 10px;
  }

  .bz-gate-card {
    border-radius: 16px;
  }

  .bz-gate-lock {
    width: 44px;
    height: 44px;
  }

  .bz-gate-lock i {
    font-size: 1.1rem;
  }

  .bz-gate-subtitle {
    display: none;
  }

  /* hide on tiny screens to save space */
}

/* ── Short viewport (landscape mobile, < 520px tall) ─── */
@media (max-height: 520px) {
  .bz-gate-brand {
    margin-bottom: 10px;
  }

  .bz-gate-lock {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }

  .bz-gate-lock i {
    font-size: 1rem;
  }

  .bz-gate-title {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .bz-gate-subtitle {
    font-size: 0.74rem;
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .bz-gate-actions {
    gap: 6px;
    flex-direction: row;
  }

  .bz-gate-signup-btn {
    padding: 9px 10px;
    font-size: 0.81rem;
  }

  .bz-gate-signin-btn {
    padding: 9px 10px;
    font-size: 0.81rem;
  }

  .bz-gate-footer {
    margin-top: 8px;
  }
}

/* ── Auth Notice Banner (inside Settings) ───────────────── */
#bz-auth-notice {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(37, 117, 252, 0.08));
  border: 1.5px solid rgba(124, 58, 237, 0.28);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  display: none;
}

.bz-auth-notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.bz-auth-notice-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.bz-auth-notice-icon i {
  color: #fff;
  font-size: 1rem;
}

.bz-auth-notice-text h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e2d9fc;
}

.bz-auth-notice-text p {
  margin: 0;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.5;
}

/* ── Utility ────────────────────────────────────────────── */
.bz-hidden {
  display: none !important;
}

/* ── Email Auth Divider ─────────────────────────────────── */
.bz-auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

.bz-auth-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.bz-auth-divider-text {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Email Auth Toggle Buttons ──────────────────────────── */
.bz-email-auth-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.bz-email-auth-toggle-btn {
  flex: 1;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(124, 58, 237, 0.45);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(37, 117, 252, 0.10));
  color: #e2d9fc;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.bz-email-auth-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 117, 252, 0.18));
  border-color: rgba(124, 58, 237, 0.7);
  transform: translateY(-1px);
}

.bz-email-auth-toggle-btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

.bz-email-auth-toggle-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ── Email Form Container ───────────────────────────────── */
.bz-email-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: bzFormSlideIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes bzFormSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bz-email-form-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e2d9fc;
  margin-bottom: 6px;
}

.bz-form-back-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.8rem;
  transition: background 0.18s, color 0.18s;
}

.bz-form-back-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #fff;
}

/* ── Fields ─────────────────────────────────────────────── */
.bz-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.bz-field-label {
  font-size: 0.80rem;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 2px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bz-field-input {
  width: 100%;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}

.bz-field-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.bz-field-input:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.10);
}

.bz-field-hint {
  font-size: 0.72rem;
  min-height: 16px;
  transition: color 0.2s;
}

.bz-field-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.bz-field-pw-wrap .bz-field-input {
  padding-right: 38px;
}

.bz-pw-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  font-size: 0.82rem;
  transition: color 0.18s;
}

.bz-pw-toggle:hover {
  color: #a78bfa;
}

/* ── Form Error ─────────────────────────────────────────── */
.bz-form-error {
  font-size: 0.8rem;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 8px 11px;
}

.bz-form-success {
  font-size: 0.8rem;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 8px 11px;
}

/* ── Submit Button ──────────────────────────────────────── */
.bz-form-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}

.bz-form-submit-btn:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bz-form-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ── Switch text ────────────────────────────────────────── */
.bz-form-switch-text {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 10px;
}

.bz-form-link-btn {
  background: none;
  border: none;
  color: #a78bfa;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}

.bz-form-link-btn:hover {
  color: #c4b5fd;
}

.bz-otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.bz-otp-digit {
  width: 42px;
  height: 50px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
  caret-color: #7c3aed;
}

.bz-otp-digit:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}

.bz-otp-digit.bz-otp-filled {
  border-color: #a78bfa;
}

@media (max-width: 380px) {
  .bz-otp-digit {
    width: 36px;
    height: 44px;
    font-size: 1.1rem;
  }

  .bz-otp-inputs {
    gap: 5px;
  }
}

/* ── Forgot / Reset Password Step Containers ────────────── */
/* Each step div must be its own flex column so children
           get consistent spacing without relying on browser margins */
#bz-forgot-step-input,
#bz-forgot-step-reset {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* we control spacing individually below */
}

/* Header row */
#bz-forgot-step-input .bz-email-form-header,
#bz-forgot-step-reset .bz-email-form-header {
  margin-bottom: 14px;
}

/* Subtitle / description paragraph */
#bz-forgot-step-input>p,
#bz-forgot-step-reset>p {
  margin: 0 0 18px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

/* Field groups — consistent gap between label and input */
#bz-forgot-step-input .bz-field-wrap,
#bz-forgot-step-reset .bz-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  /* breathing room between consecutive fields */
}

/* Last field-wrap before error / button shouldn't double-margin */
#bz-forgot-step-input .bz-field-wrap:last-of-type,
#bz-forgot-step-reset .bz-field-wrap:last-of-type {
  margin-bottom: 0;
}

/* Labels — slightly brighter, more readable */
#bz-forgot-step-input .bz-field-label,
#bz-forgot-step-reset .bz-field-label {
  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.52);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Inputs — cleaner focus ring */
#bz-forgot-step-input .bz-field-input,
#bz-forgot-step-reset .bz-field-input {
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  color: #fff;
  font-size: 0.91rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  width: 100%;
}

#bz-forgot-step-input .bz-field-input:focus,
#bz-forgot-step-reset .bz-field-input:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.09);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

#bz-forgot-step-input .bz-field-input::placeholder,
#bz-forgot-step-reset .bz-field-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Error pill — separated from the field above it with clear gap */
#bz-forgot-step-input .bz-form-error,
#bz-forgot-step-reset .bz-form-error {
  margin-top: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 13px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  font-size: 0.79rem;
  color: #fca5a5;
  line-height: 1.45;
  animation: bzErrorShake 0.28s ease;
}

#bz-forgot-step-input .bz-form-error::before,
#bz-forgot-step-reset .bz-form-error::before {
  content: '\f071';
  /* fa-triangle-exclamation */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.78rem;
  color: #f87171;
  flex-shrink: 0;
  margin-top: 1px;
}

@keyframes bzErrorShake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  50% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Submit button — extra top breathing room */
#bz-forgot-step-input .bz-form-submit-btn,
#bz-forgot-step-reset .bz-form-submit-btn {
  margin-top: 8px;
}

/* "Remembered it?" switch text */
#bz-forgot-step-input .bz-form-switch-text {
  margin-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
}

/* ── Sent / Done confirmation steps ─────────────────────── */
#bz-forgot-step-sent,
#bz-forgot-step-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 12px 4px;
}

#bz-forgot-step-sent h3,
#bz-forgot-step-done h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

#bz-forgot-step-sent p,
#bz-forgot-step-done p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
  margin: 0 0 6px;
}

#bz-forgot-step-sent .bz-form-submit-btn,
#bz-forgot-step-done .bz-form-submit-btn {
  margin-top: 18px;
  width: 100%;
}

/* Icon circle for sent / done steps */
.bz-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  flex-shrink: 0;
}

/* ============================================================
   33. EXTRACTED INLINE STYLES — element-level rules
   ============================================================ */


/* Sync rows layout (Settings > Account) */
/* #bz-upload-btn — removed; live sync needs no manual controls */

.bz-sync-row--mt {
  margin-top: 10px;
}

/* Keyboard Shortcuts row */
.bz-shortcuts-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* View Shortcuts button */
#view-shortcuts-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* Forgot password link row */
.bz-forgot-link-row {
  text-align: right;
  margin-top: 15px;
  margin-bottom: 15px;
}

#bz-forgot-link-btn {
  font-size: 0.8rem;
}

/* Field hint warning variant */
.bz-field-hint--warning {
  color: #ef4444;
  font-weight: 500;
}

/* Auth step icon variants */
.bz-step-icon--purple {
  background: linear-gradient(135deg, #7c3aed, #2575fc);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.bz-step-icon--success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.bz-step-icon--purple i {
  color: #fff;
  font-size: 1.5rem;
}

.bz-step-icon--success i {
  color: #fff;
  font-size: 1.6rem;
}

/* Auth text utility variants */
.bz-text-muted-inline {
  color: rgba(255, 255, 255, 0.5);
}

.bz-text-dim-sm {
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.38);
}

.bz-text-subtle-strong {
  color: rgba(255, 255, 255, 0.55);
}

.bz-text-accent-purple {
  color: #a78bfa;
}

/* Submit button gradient variants */
.bz-btn--purple-gradient {
  background: linear-gradient(135deg, #7c3aed, #2575fc) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35) !important;
}

.bz-btn--success-gradient {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35) !important;
}

/* Toast container — defined in section 21 above */

/* Delete confirm popup */
#delete-confirm-popup .timer-popup-content {
  border: 1px solid #e74c3c;
  padding: 2rem 1rem;
  text-align: center;
}

#delete-confirm-popup h3 {
  color: #ecf0f1;
  margin-top: 0;
}

#delete-confirm-popup p {
  color: #bdc3c7;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.bz-popup-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#confirm-delete-btn,
#cancel-delete-btn {
  width: 85%;
  height: 45px;
  border-radius: 8px;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}

#confirm-delete-btn {
  background: #e74c3c;
}

#cancel-delete-btn {
  background: #2575fc;
}

/* Player left click target */
.player-left {
  cursor: pointer;
}

/* Timer heading (initially hidden — controlled by JS) */
#timer-heading {
  display: none;
  /* shown via JS when timer starts */
}

/* Modal create/list UI (initially hidden — controlled by JS) */
#modal-create-ui,
#modal-list-ui {
  display: none;
  width: 100%;
}

/* #fs-goto-playlist-btn — display controlled via inline style by script.js */

/* #bz-upload-btn and #bz-download-btn removed — live sync needs no manual controls */

/* #bz-settings-locked — display controlled via inline style by auth.js */

/* ============================================================
   34. ADDITIONAL EXTRACTED — Second Pass
   ============================================================ */

/* Success popup icon */
.bz-success-icon {
  font-size: 3.5rem;
  color: #38c71b;
  margin-bottom: 10px;
}

/* Playlist modal — top z-index layer */
.bz-modal--top {
  z-index: 20001;
}

/* Field hint warning icon spacing */
.bz-field-hint--warning i {
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Sleep Timer — Divider
   ════════════════════════════════════════════════════════════════════════════ */
.bz-timer-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.bz-timer-divider::before,
.bz-timer-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.28), transparent);
}

.bz-timer-divider span {
  font-size: 0.6rem;
  color: rgba(196, 181, 253, 0.60);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(109, 40, 217, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.28);
  padding: 2px 9px;
  border-radius: 20px;
}

/* ── OR section wrapper (divider + choose manually label) ── */
.bz-timer-or-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
  gap: 10px;
}

/* ── "Choose Manually" label under the OR divider ── */
.bz-choose-manual-label {
  font-size: 0.63rem;
  color: rgba(196, 181, 253, 0.50);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 700;
  margin: 0 0 0.35rem;
  text-align: left;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bz-choose-manual-label i {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Sleep Timer Quick-Presets
   ════════════════════════════════════════════════════════════════════════════ */
.bz-timer-presets {
  display: flex;
  gap: 7px;
  justify-content: flex-start;
  margin-bottom: 0.3rem;
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bz-preset-btn {
  flex: 1;
  padding: 7px 4px 9px;
  background: rgba(109, 40, 217, 0.08);
  border: 1.5px solid rgba(139, 92, 246, 0.20);
  border-radius: 14px;
  color: rgba(196, 181, 253, 0.70);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
  outline: none;
  touch-action: manipulation;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.bz-preset-num {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.bz-preset-unit {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.70;
}

.bz-preset-btn:hover {
  background: rgba(109, 40, 217, 0.18);
  border-color: rgba(139, 92, 246, 0.42);
  color: #c4b5fd;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.25);
}

.bz-preset-btn:active {
  transform: scale(0.94);
}

.bz-preset-btn.bz-preset-active {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.80), rgba(67, 56, 202, 0.80));
  border-color: rgba(139, 92, 246, 0.70);
  color: #f0e8ff;
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px) scale(1.03);
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Sleep Timer Preset Confirmation Panel
   ════════════════════════════════════════════════════════════════════════════ */
.bz-preset-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px;
  width: 100%;
  position: relative;
  z-index: 1;
  animation: bz-confirm-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes bz-confirm-in {
  from {
    opacity: 0;
    transform: scale(0.90) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bz-confirm-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0px;
}

.bz-confirm-icon i {
  font-size: 1.4rem;
  color: #c4b5fd;
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.85));
  position: relative;
  z-index: 1;
  animation: bz-moon-bob 4s ease-in-out infinite;
}

.bz-confirm-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.35);
  animation: bz-ring-expand 2s ease-out infinite;
}

.bz-confirm-label {
  font-size: 0.70rem;
  color: rgba(196, 181, 253, 0.50);
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.bz-confirm-duration {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #e2d9f3, #c4b5fd, #a78bfa);
  color: transparent;
  background-clip: text;
  margin: 0 0 8px;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.40));
}

.bz-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.bz-confirm-start {
  width: 100%;
  padding: 11px 20px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 60%, #4338ca 100%);
  border: none;
  border-radius: 14px;
  color: #f0e8ff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 22px rgba(109, 40, 217, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: inherit;
}

.bz-confirm-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(109, 40, 217, 0.62);
}

.bz-confirm-start:active {
  transform: scale(0.97);
}

.bz-confirm-back {
  width: 100%;
  padding: 9px 20px;
  background: rgba(109, 40, 217, 0.07);
  border: 1.5px solid rgba(139, 92, 246, 0.22);
  border-radius: 12px;
  color: rgba(196, 181, 253, 0.65);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
}

.bz-confirm-back:hover {
  border-color: rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
  background: rgba(109, 40, 217, 0.14);
}

.bz-confirm-back:active {
  transform: scale(0.97);
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Quick-Add Swipe Gesture (Swipe right → add to queue)
   ════════════════════════════════════════════════════════════════════════════ */
.song-item {
  position: relative;
  overflow: hidden;
}

.bz-swipe-hint {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 18px;
  gap: 8px;
  background: linear-gradient(90deg, rgba(37, 117, 252, 0.85) 0%, rgba(37, 117, 252, 0.0) 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  border-radius: inherit;
  z-index: 0;
}

.bz-swipe-hint i {
  font-size: 1rem;
}

.song-item.bz-swiping .bz-swipe-hint {
  opacity: 1;
}

.song-item-inner {
  position: relative;
  z-index: 1;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(.22, .68, 0, 1.2);
  background: inherit;
  display: flex;
  align-items: center;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: Global Skeleton / Shimmer utilities
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes bz-shimmer-slide {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.bz-skel {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.11) 50%,
      rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
  animation: bz-shimmer-slide 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Song-row skeleton */
.bz-song-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  pointer-events: none;
}

.bz-song-skeleton .bz-skel-thumb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
}

.bz-song-skeleton .bz-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bz-song-skeleton .bz-skel-title {
  height: 11px;
  width: 62%;
}

.bz-song-skeleton .bz-skel-artist {
  height: 9px;
  width: 38%;
  animation-delay: 0.12s;
}

/* stagger skeleton rows */
.bz-song-skeleton:nth-child(2) .bz-skel {
  animation-delay: 0.08s;
}

.bz-song-skeleton:nth-child(3) .bz-skel {
  animation-delay: 0.16s;
}

.bz-song-skeleton:nth-child(4) .bz-skel {
  animation-delay: 0.24s;
}

.bz-song-skeleton:nth-child(5) .bz-skel {
  animation-delay: 0.32s;
}


/* (sleep timer preset confirm CSS is already defined above in the presets section) */

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL SKELETON / SHIMMER SYSTEM — v2
   Single keyframe, unified .bz-skel base class (already defined above).
   All new surface-specific rules live here so they are easy to find / remove.
   Naming convention:
     .bz-sk-*          → skeleton containers / structural wrappers
     .bz-sk-*__*       → child slots inside a skeleton container
   Every skeleton is pointer-events:none so stray taps never fire.
   Remove a surface by deleting its block — nothing else will break.
══════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fade-out transition when real content replaces a skeleton ─────────── */
@keyframes bz-skel-fadein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bz-sk-replaced {
  /* add to real content wrapper after skeleton swap */
  animation: bz-skel-fadein 0.22s ease-out both;
}

/* ── 1. HOME — year-section header skeleton ───────────────────────────────── */
/* Mimics the <h2>2024</h2> heading above each album row */
.bz-sk-year-heading {
  height: 22px;
  width: 64px;
  border-radius: 6px;
  margin: 18px 0 12px 2px;
  pointer-events: none;
}

/* ── 2. HOME / PLAYLISTS — horizontal album-card skeleton row ─────────────── */
/* Mimics .albums-grid containing .album-card items (140 × ~175px) */
.bz-sk-grid {
  display: flex;
  gap: 12px;
  overflow: hidden;
  /* clip so no horizontal scroll flash */
  padding: 2px 0 6px;
  pointer-events: none;
}

.bz-sk-card {
  flex: 0 0 140px;
  min-width: 140px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.bz-sk-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px 10px 0 0;
}

.bz-sk-card__title {
  height: 11px;
  width: 72%;
  border-radius: 5px;
  margin: 9px auto 4px;
}

.bz-sk-card__sub {
  height: 8px;
  width: 48%;
  border-radius: 4px;
  margin: 0 auto 10px;
  animation-delay: 0.1s;
}

/* Stagger shimmer across the card row for a wave effect */
.bz-sk-card:nth-child(2) .bz-skel {
  animation-delay: 0.07s;
}

.bz-sk-card:nth-child(3) .bz-skel {
  animation-delay: 0.14s;
}

.bz-sk-card:nth-child(4) .bz-skel {
  animation-delay: 0.21s;
}

.bz-sk-card:nth-child(5) .bz-skel {
  animation-delay: 0.28s;
}

.bz-sk-card:nth-child(6) .bz-skel {
  animation-delay: 0.35s;
}

/* ── 3. HOME — full year-section block (heading + grid) ──────────────────── */
.bz-sk-year-section {
  margin-bottom: 28px;
  pointer-events: none;
}

/* ── 4. PLAYLISTS — section header skeleton ───────────────────────────────── */
/* Mimics the bzp-section-head icon + title + subtitle row */
.bz-sk-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  pointer-events: none;
}

.bz-sk-section-head__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bz-sk-section-head__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bz-sk-section-head__title {
  height: 13px;
  width: 140px;
  border-radius: 6px;
}

.bz-sk-section-head__sub {
  height: 9px;
  width: 200px;
  border-radius: 5px;
  animation-delay: 0.1s;
}

/* ── 5. ALBUM DETAIL — header (cover + meta) skeleton ────────────────────── */
.bz-sk-album-header {
  display: flex;
  gap: 18px;
  padding: 16px 16px 20px;
  pointer-events: none;
}

.bz-sk-album-header__cover {
  width: 110px;
  height: 110px;
  min-width: 110px;
  border-radius: 14px;
}

.bz-sk-album-header__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.bz-sk-album-header__title {
  height: 16px;
  width: 80%;
  border-radius: 7px;
}

.bz-sk-album-header__artist {
  height: 11px;
  width: 55%;
  border-radius: 6px;
  animation-delay: 0.08s;
}

.bz-sk-album-header__count {
  height: 9px;
  width: 40%;
  border-radius: 5px;
  animation-delay: 0.16s;
}

/* Action-bar skeleton (Play + Share buttons) */
.bz-sk-album-header__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.bz-sk-album-header__btn {
  height: 34px;
  width: 90px;
  border-radius: 20px;
}

.bz-sk-album-header__btn:nth-child(2) {
  width: 66px;
  animation-delay: 0.1s;
}

/* ── 6. SEARCH RESULTS — skeleton section ─────────────────────────────────── */
.bz-sk-search {
  padding: 8px 0;
  pointer-events: none;
}

.bz-sk-search__heading {
  height: 14px;
  width: 90px;
  border-radius: 6px;
  margin-bottom: 14px;
}

/* ── 7. SETTINGS — profile card skeleton ─────────────────────────────────── */
.bz-sk-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  pointer-events: none;
}

.bz-sk-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bz-sk-profile__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bz-sk-profile__name {
  height: 13px;
  width: 55%;
  border-radius: 6px;
}

.bz-sk-profile__email {
  height: 10px;
  width: 75%;
  border-radius: 5px;
  animation-delay: 0.1s;
}

/* ── 8. Responsive — wider cards on larger screens ────────────────────────── */
@media (min-width: 480px) {
  .bz-sk-card {
    flex: 0 0 160px;
    min-width: 160px;
  }

  .bz-sk-album-header__cover {
    width: 130px;
    height: 130px;
    min-width: 130px;
  }
}

@media (min-width: 768px) {
  .bz-sk-card {
    flex: 0 0 180px;
    min-width: 180px;
  }

  .bz-sk-album-header__cover {
    width: 150px;
    height: 150px;
    min-width: 150px;
  }

  .bz-sk-section-head__sub {
    width: 260px;
  }
}

/* ── SDM: Collapse / Expand header ──────────────────────────────────── */
/* ── SDM: collapse button lives in the main setting-item row ── */
.sdm-setting-item {
  gap: 10px;
}

.sdm-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: 26px;
  padding: 0 10px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 20px;
  color: rgba(196, 181, 253, 0.80);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.sdm-collapse-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* When toggle is ON the button must always be clickable — never truly hidden */
.sdm-collapse-btn--hidden {
  visibility: hidden;
  pointer-events: none;
}

.sdm-collapse-btn:hover {
  background: rgba(139, 92, 246, 0.28);
  border-color: rgba(139, 92, 246, 0.65);
  color: #c4b5fd;
}

.sdm-collapse-btn:active {
  transform: scale(0.93);
}

/* Chevron rotates smoothly: up = panel open, down = panel collapsed */
.sdm-collapse-btn .fa-chevron-up {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.60rem;
}

.sdm-collapse-btn.collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

/* Blinking dot inside the ON pill */
@keyframes sdm-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* ── SDM: Collapsible panel body ──────────────────────────────────────── */
.sdm-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════
   LYRICS OVERLAY  v4  (moved here from duplicate block)
   ═══════════════════════════════════════════════════════ */
#bz-lyr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-color, #0d0d14);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Blurred album-art background layer ── */
#bz-lyr-overlay::before {
  content: '';
  position: absolute;
  inset: -40px;
  /* overscan so blur edges don't show */
  z-index: 0;
  background-image: var(--lyr-cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(52px) saturate(1.6) brightness(0.38);
  transform: scale(1.08);
  transition: background-image 0.4s ease, filter 0.4s ease;
  pointer-events: none;
}

/* ── Dark gradient scrim over the blur for text legibility ── */
#bz-lyr-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.30) 40%,
      rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

/* All direct children sit above the pseudo-element layers */
#bz-lyr-overlay>* {
  position: relative;
  z-index: 2;
}

#bz-lyr-overlay.bz-lyr-in {
  transform: translateY(0);
}

#bz-lyr-overlay.bz-lyr-exit {
  transform: translateY(100%);
}

.bz-lyr-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ── Mini player bar ── */
.bz-lyr-miniplayer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 64px;
  box-sizing: border-box;
}

.bz-lyr-mini-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bz-lyr-mini-cover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}

.bz-lyr-mini-info {
  min-width: 0;
  flex: 1;
}

.bz-lyr-mini-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-lyr-mini-artist {
  font-size: 11px;
  color: var(--text-muted, #999);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-lyr-mini-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

.bz-lyr-mini-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.bz-lyr-ctrl {
  background: none;
  border: none;
  color: var(--text-color, #fff);
  font-size: 15px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.8;
  transition: background 0.15s, opacity 0.15s;
}

.bz-lyr-ctrl:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.bz-lyr-ctrl.bz-lyr-pp {
  background: rgba(255, 255, 255, 0.1);
  font-size: 16px;
  width: 40px;
  height: 40px;
  opacity: 1;
}

.bz-lyr-ctrl.bz-lyr-pp:hover {
  background: rgba(255, 255, 255, 0.18);
}

.bz-lyr-close {
  background: none;
  border: none;
  color: var(--text-muted, #999);
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.bz-lyr-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.bz-lyr-edit-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #aaa);
  font-size: 14px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}

.bz-lyr-edit-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* ── Sync toggle button ── */
.bz-lyr-sync-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #aaa);
  font-size: 13px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}

.bz-lyr-sync-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.bz-lyr-sync-btn.active {
  background: var(--accent-color, #a78bfa);
  border-color: transparent;
  color: #fff;
}

/* ── EN transliteration toggle switch ── */
.bz-lyr-translit-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.bz-lyr-translit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #aaa);
  letter-spacing: 0.5px;
  transition: color 0.18s;
}

.bz-lyr-translit-toggle.active .bz-lyr-translit-label {
  color: var(--accent-color, #a78bfa);
}

.bz-lyr-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.bz-lyr-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bz-lyr-translit-toggle.active .bz-lyr-toggle-track {
  background: var(--accent-color, #a78bfa);
  border-color: transparent;
}

.bz-lyr-translit-toggle.active .bz-lyr-toggle-thumb {
  transform: translateX(16px);
}

/* ── Lyrics scroll area ── */
.bz-lyr-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 48px;
}

.bz-lyr-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.bz-lyr-line {
  display: block;
  width: 100%;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-color, #fff);
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.bz-lyr-gap {
  height: 16px;
  width: 100%;
}

/* ── Loading ── */
.bz-lyr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 60px;
  color: var(--text-muted, #999);
  font-size: 14px;
}

.bz-lyr-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-color, #a78bfa);
  border-radius: 50%;
  animation: bzLyrSpin 0.75s linear infinite;
}

@keyframes bzLyrSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Error ── */
.bz-lyr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px 0;
  text-align: center;
  color: var(--text-muted, #999);
}

.bz-lyr-error .fa-music {
  font-size: 34px;
  opacity: 0.25;
}

.bz-lyr-error p {
  font-size: 15px;
  margin: 0;
}

.bz-lyr-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.bz-lyr-links a {
  color: var(--accent-color, #a78bfa);
  font-size: 13px;
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 20px;
  transition: background 0.18s;
}

.bz-lyr-links a:hover {
  background: rgba(167, 139, 250, 0.1);
}

.bz-lyr-admin-tip {
  font-size: 12px;
  color: var(--accent-color, #a78bfa);
  margin-top: 8px;
  opacity: 0.75;
}

/* ── Admin editor ── */
.bz-lyr-editor {
  flex-direction: column;
  padding: 10px 14px 14px;
  gap: 10px;
  background: var(--bg-color, #0f0f0f);
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bz-lyr-textarea {
  width: 100%;
  min-height: 240px;
  max-height: 55vh;
  resize: vertical;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-color, #fff);
  font-size: 14px;
  line-height: 1.7;
  padding: 12px 14px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.18s;
}

.bz-lyr-textarea:focus {
  border-color: var(--accent-color, #a78bfa);
}

.bz-lyr-editor-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.bz-lyr-cancel,
.bz-lyr-save {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.18s;
}

.bz-lyr-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color, #fff);
}

.bz-lyr-save {
  background: var(--accent-color, #a78bfa);
  color: #fff;
}

.bz-lyr-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bz-lyr-cancel:hover {
  background: rgba(255, 255, 255, 0.13);
}

.bz-lyr-save:hover:not(:disabled) {
  opacity: 0.87;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .bz-lyr-line {
    font-size: 15px;
  }

  .bz-lyr-mini-cover {
    width: 38px;
    height: 38px;
  }

  .bz-lyr-mini-title {
    font-size: 12px;
  }

  .bz-lyr-mini-artist {
    font-size: 10px;
  }

  /* Keep EN label visible on small screens — just shrink it */
  .bz-lyr-translit-label {
    font-size: 10px;
    letter-spacing: 0;
  }

  .bz-lyr-ctrl {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .bz-lyr-ctrl.bz-lyr-pp {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .bz-lyr-edit-btn,
  .bz-lyr-sync-btn,
  .bz-lyr-close {
    width: 32px;
    height: 32px;
  }

  .bz-lyr-miniplayer {
    gap: 6px;
    padding: 8px 10px;
  }

  .bz-lyr-mini-right {
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .bz-lyr-mini-info {
    display: none;
  }
}

/* ── LRC timestamp-sync line states ── */
.bz-lyr-timed {
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.35;
  transform: scale(0.94);
  cursor: pointer;
  position: relative;
  padding: 2px 0;
  --lyr-fill: 0;
}

.bz-lyr-timed:hover {
  opacity: 0.6;
  transform: scale(0.97);
}

.bz-lyr-timed.bz-lyr-past {
  opacity: 0.25;
  transform: scale(0.92);
  color: var(--text-color, #fff);
}

.bz-lyr-timed.bz-lyr-active {
  opacity: 1;
  transform: scale(1.05);
  font-weight: 700;
  /* Left-to-right fill: accent sweeps across the text as the line plays */
  background: linear-gradient(to right,
      var(--accent-color, #a78bfa) calc(var(--lyr-fill, 0) * 100%),
      rgba(255, 255, 255, 0.9) calc(var(--lyr-fill, 0) * 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color, #a78bfa) 55%, transparent));
}