/* ── Drag-and-drop drop-target highlight ── */
.bz-q-item.drag-target {
  background: rgba(37, 117, 252, 0.12) !important;
  outline: 2px solid rgba(37, 117, 252, 0.5);
  outline-offset: -2px;
}

/* ── Drag handle: always visible ── */
.bz-q-drag {
  opacity: 1;
}

/* ── Duration text next to action buttons ── */
.bz-q-dur {
  font-size: 0.75rem;
  color: var(--bz-text-dim);
  margin-right: 2px;
  white-space: nowrap;
}

/* ── Now-playing card: green glow border ── */
.bz-q-item.bz-now-card {
  border: 2px solid var(--accent-green, #1db954) !important;
  background: rgba(29, 185, 84, 0.06) !important;
  cursor: default !important;
}

.bz-q-item.bz-now-card:hover {
  background: rgba(29, 185, 84, 0.08) !important;
}

/* ── Staggered entry animation for queue items ── */
@keyframes bz-q-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

#bz-queue-list .bz-q-item {
  animation: bz-q-in 0.2s ease both;
}

#bz-queue-list .bz-q-item:nth-child(1) {
  animation-delay: 0.00s;
}

#bz-queue-list .bz-q-item:nth-child(2) {
  animation-delay: 0.03s;
}

#bz-queue-list .bz-q-item:nth-child(3) {
  animation-delay: 0.06s;
}

#bz-queue-list .bz-q-item:nth-child(4) {
  animation-delay: 0.09s;
}

#bz-queue-list .bz-q-item:nth-child(5) {
  animation-delay: 0.12s;
}

#bz-queue-list .bz-q-item:nth-child(6) {
  animation-delay: 0.14s;
}

#bz-queue-list .bz-q-item:nth-child(7) {
  animation-delay: 0.16s;
}

#bz-queue-list .bz-q-item:nth-child(8) {
  animation-delay: 0.18s;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX SECTION DIVIDER
   The horizontal line + badge that separates user queue
   from Auto-Mix injected songs.
═══════════════════════════════════════════════════════════ */
.bz-automix-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 12px;
  user-select: none;
  animation: bz-q-in 0.25s ease both;
}

.bz-automix-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(37, 117, 252, 0.35) 30%,
      rgba(37, 117, 252, 0.35) 70%,
      transparent);
}

.bz-automix-divider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  padding: 6px 14px 6px 10px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(37, 117, 252, 0.22) 0%, rgba(106, 17, 203, 0.22) 100%);
  border: 1px solid rgba(37, 117, 252, 0.38);
  box-shadow:
    0 0 18px rgba(37, 117, 252, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bz-automix-divider-label i {
  font-size: 0.75rem;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

@keyframes bz-am-pulse {

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

  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* ── Auto-Mix items: subtle left accent ── */
.bz-q-item[data-automix="true"] {
  border-left: 2px solid rgba(37, 117, 252, 0.30);
  padding-left: 10px;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX BADGE in stats bar
═══════════════════════════════════════════════════════════ */
.bz-automix-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2575fc;
  background: rgba(37, 117, 252, 0.10);
  border: 1px solid rgba(37, 117, 252, 0.28);
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

.bz-automix-badge i {
  font-size: 0.65rem;
}

.bz-am-count {
  background: #2575fc;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}

/* ── Loading hint when auto-mix will fill soon ── */
.bz-upnext-empty {
  color: rgba(167, 139, 250, 0.75);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 22px 0 8px;
  text-align: center;
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX LOADING INDICATOR
   Animated dots + text shown at bottom of queue list while
   Auto-Mix is fetching and scoring songs.
   Container rule is defined in the IMPROVED section below.
═══════════════════════════════════════════════════════════ */

/* Three bouncing dots */
.bz-aml-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bz-aml-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  display: block;
  animation: bz-aml-bounce 1.1s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.55);
}

.bz-aml-dots span:nth-child(1) {
  animation-delay: 0.00s;
}

.bz-aml-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.bz-aml-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes bz-aml-bounce {

  0%,
  80%,
  100% {
    transform: scale(0.75) translateY(0);
    opacity: 0.55;
  }

  40% {
    transform: scale(1.1) translateY(-6px);
    opacity: 1;
  }
}

/* Label text */
.bz-aml-text {
  font-size: 0.74rem;
  font-weight: 600;
  color: #2575fc;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

.bz-aml-text i {
  animation: bz-am-pulse 2.2s ease-in-out infinite;
  font-size: 0.70rem;
}

/* .bz-q-fav-btn base styles are in style.css — not redefined here */

/* ═══════════════════════════════════════════════════════════
   FAVOURITES TOAST NOTIFICATION
   Slides in from bottom with red heart icon
═══════════════════════════════════════════════════════════ */
.bz-fav-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 18, 24, 0.96);
  backdrop-filter: blur(18px);
  -webkit-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;
}

/* Red heart icon bubble */
.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;
}

/* Text stack */
.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
   Targets the dp-card that renders the Favourites playlist
═══════════════════════════════════════════════════════════ */
.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
   Overrides the generic .timer-buttons button rules in style.css
═══════════════════════════════════════════════════════════ */

/* Separator line between our button and the next one */
#modal-fav-btn+button {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Heart icon — red, overrides the generic var(--primary-color) rule */
#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);
}

/* Active state — song is already a favourite */
#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;
}

/* ═══════════════════════════════════════════════════════════
   QUEUE IMAGE WRAPPER
   Wraps the cover img so overlays (heart, AM badge) work
═══════════════════════════════════════════════════════════ */
.bz-q-img-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  margin-right: 14px;
  flex-shrink: 0;
}

.bz-q-img-wrap .bz-q-img {
  width: 100%;
  height: 100%;
  min-width: unset;
  margin-right: 0;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ── Now-playing cover heart overlay ── */
.bz-q-cover-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 8px;
}

.bz-q-cover-heart i {
  font-size: 1.25rem;
  color: #ff2d55;
  filter: drop-shadow(0 0 6px rgba(255, 45, 85, 0.80));
  animation: bz-heart-beat 1.8s ease-in-out infinite;
}

@keyframes bz-heart-beat {

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

  15% {
    transform: scale(1.18);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.10);
  }

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

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX QUEUE ROW STYLING
   Subtle blue-purple treatment for Auto-Mix injected songs
═══════════════════════════════════════════════════════════ */

.bz-q-item--automix {
  border-left: 2px solid rgba(37, 117, 252, 0.45);
  background: linear-gradient(90deg,
      rgba(37, 117, 252, 0.05) 0%,
      transparent 60%) !important;
}

.bz-q-item--automix:hover {
  background: linear-gradient(90deg,
      rgba(37, 117, 252, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 60%) !important;
}

/* Magic wand badge — bottom-right of cover thumbnail */
.bz-q-am-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.70), 0 0 0 2px rgba(0, 0, 0, 0.60);
  pointer-events: none;
  flex-shrink: 0;
}

.bz-q-am-badge i {
  font-size: 0.48rem;
  color: #fff;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

/* Artist text: soft blue tint on AutoMix rows */
.bz-q-item--automix .bz-q-artist {
  color: rgba(147, 197, 253, 0.75);
}

/* ── Sparkle wrap + chip inside upgraded divider ── */
.bz-am-sparkle-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(37, 117, 252, 0.55);
}

.bz-am-sparkle-wrap i {
  font-size: 0.60rem;
  color: #fff;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

.bz-am-title {
  background: linear-gradient(90deg, #6ec6ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: 2px;
}

.bz-am-chip {
  background: rgba(37, 117, 252, 0.25);
  border: 1px solid rgba(37, 117, 252, 0.40);
  color: #93c5fd;
  font-size: 0.60rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 8px;
  letter-spacing: 0.4px;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════
   QUEUE POSITION COUNTER  — "Song 3 of 24"
   Shown in the stats bar whenever a song is active.
═══════════════════════════════════════════════════════════ */
.bz-queue-pos-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.80rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 4px 14px;
  letter-spacing: 0.2px;
}

.bz-queue-pos-badge strong {
  color: #fff;
  font-weight: 800;
}

.bz-q-pos-sep {
  font-size: inherit;
  font-weight: 700;
  color: #fff;
  margin: 0 1px;
}

/* ═══════════════════════════════════════════════════════════
   SHUFFLE ACTIVE BADGE  — shown in stats bar next to song count
═══════════════════════════════════════════════════════════ */
.bz-shuffle-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
  animation: bz-shuffle-badge-in 0.25s ease both;
}

.bz-shuffle-active-badge i {
  font-size: 0.65rem;
  animation: bz-shuffle-spin 3s linear infinite;
}

@keyframes bz-shuffle-badge-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

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

@keyframes bz-shuffle-spin {

  0%,
  85%,
  100% {
    transform: rotate(0deg);
  }

  92% {
    transform: rotate(20deg);
  }

  96% {
    transform: rotate(-12deg);
  }
}

/* ═══════════════════════════════════════════════════════════
   SHUFFLE NOTICE BANNER  — "Up Next" contextual note
   Tells users why the queue order looks random.
═══════════════════════════════════════════════════════════ */
.bz-shuffle-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(90deg,
      rgba(245, 158, 11, 0.10) 0%,
      rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 10px;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 229, 153, 0.80);
  letter-spacing: 0.15px;
  animation: bz-q-in 0.22s ease both;
  user-select: none;
}

.bz-shuffle-notice-icon {
  font-size: 0.78rem;
  color: #f59e0b;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   IMPROVED AUTO-MIX LOADING STATE
   Header row (dots + text) + three skeleton placeholder cards
═══════════════════════════════════════════════════════════ */

/* Single canonical container rule — consolidated here */
.bz-automix-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 10px;
  animation: bz-q-in 0.25s ease both;
}

/* Header: dots + label on one row */
.bz-aml-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Skeleton rows — mimic real queue items */
.bz-aml-skeletons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bz-aml-skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 2px;
  border-radius: 12px;
  overflow: hidden;
}

/* Thumbnail placeholder */
.bz-aml-skel-thumb {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 8px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: bz-skel-shimmer 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Text line placeholders */
.bz-aml-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bz-aml-skel-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: bz-skel-shimmer 1.6s ease-in-out infinite;
}

.bz-aml-skel-title {
  width: 65%;
  animation-delay: 0.0s;
}

.bz-aml-skel-artist {
  width: 42%;
  height: 8px;
  animation-delay: 0.15s;
}

/* Stagger the rows slightly for a cascading shimmer effect */
.bz-aml-skeleton-row:nth-child(2) .bz-aml-skel-thumb,
.bz-aml-skeleton-row:nth-child(2) .bz-aml-skel-line {
  animation-delay: 0.1s;
}

.bz-aml-skeleton-row:nth-child(3) .bz-aml-skel-thumb,
.bz-aml-skeleton-row:nth-child(3) .bz-aml-skel-line {
  animation-delay: 0.2s;
}

@keyframes bz-skel-shimmer {
  0% {
    background-position: 200% 0;
  }

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

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: End of Queue Indicator card
   ════════════════════════════════════════════════════════════════════════════ */
.bz-end-of-queue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 4px 6px;
  padding: 22px 20px 18px;
  background: linear-gradient(145deg,
      rgba(109, 40, 217, 0.16) 0%,
      rgba(37, 117, 252, 0.10) 55%,
      rgba(109, 40, 217, 0.07) 100%);
  border: 1.5px solid rgba(124, 58, 237, 0.32);
  border-top-color: rgba(167, 139, 250, 0.48);
  border-radius: 20px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(109, 40, 217, 0.08),
    0 0 28px rgba(109, 40, 217, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: bz-eoq-fadein 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  position: relative;
  overflow: hidden;
}

/* Ambient glow blob behind the icon */
.bz-end-of-queue-card::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.20) 0%, transparent 70%);
  pointer-events: none;
}

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

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

/* ── Icon wrapper with pulsing ring ── */
.bz-eoq-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 2px;
}

.bz-eoq-icon {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.65));
  position: relative;
  z-index: 1;
  animation: bz-eoq-icon-float 3.5s ease-in-out infinite;
  line-height: 1;
}

.bz-eoq-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(139, 92, 246, 0.30);
  animation: bz-eoq-ring-pulse 2.4s ease-out infinite;
}

@keyframes bz-eoq-icon-float {

  0%,
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.55));
  }

  50% {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 22px rgba(139, 92, 246, 0.85));
  }
}

@keyframes bz-eoq-ring-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* ── Text group ── */
.bz-eoq-text-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.bz-eoq-title {
  font-size: 0.88rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ede9fe, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1px;
  line-height: 1.3;
}

.bz-eoq-sub {
  font-size: 0.73rem;
  color: rgba(196, 181, 253, 0.58);
  line-height: 1.55;
  letter-spacing: 0.1px;
  max-width: 240px;
}

/* ── Start Auto-Mix button ── */
.bz-eoq-btn {
  margin-top: 4px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #4338ca 100%);
  border: none;
  border-radius: 22px;
  color: #f0e8ff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.20s ease, transform 0.14s ease, opacity 0.15s;
  letter-spacing: 0.4px;
  box-shadow:
    0 4px 18px rgba(109, 40, 217, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bz-eoq-btn i {
  font-size: 0.78rem;
  animation: bz-eoq-wand-spin 3s ease-in-out infinite;
}

@keyframes bz-eoq-wand-spin {

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

  88% {
    transform: rotate(-18deg) scale(1.15);
  }

  94% {
    transform: rotate(14deg) scale(1.1);
  }
}

.bz-eoq-btn:hover {
  box-shadow:
    0 6px 26px rgba(109, 40, 217, 0.68),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transform: translateY(-2px) scale(1.03);
}

.bz-eoq-btn:active {
  transform: scale(0.96);
  opacity: 0.88;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX DIVIDER — Inline Toggle Switch
   Matches the AutoMix state in Settings; changes sync both ways.
═══════════════════════════════════════════════════════════ */
.bz-admix-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
}

.bz-admix-toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bz-admix-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  transition: background 0.22s ease, border-color 0.22s ease;
  display: block;
  flex-shrink: 0;
}

.bz-admix-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.22s ease;
}

.bz-admix-toggle-wrap input:checked~.bz-admix-slider {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  border-color: rgba(37, 117, 252, 0.55);
}

.bz-admix-toggle-wrap input:checked~.bz-admix-slider::after {
  transform: translateX(16px);
  background: #fff;
}

.bz-admix-toggle-wrap:hover .bz-admix-slider {
  border-color: rgba(37, 117, 252, 0.55);
}

/* ═══════════════════════════════════════════════════════════
   HEADER AUTO-MIX TOGGLE
   Sits inline beside the "Playback Queue" h1 heading.
   Title-group is made flex-row by JS so they share one line.
═══════════════════════════════════════════════════════════ */
/* ── Shuffle toggle pill — same structure as auto-mix wrap, orange accent ── */
.bz-header-shuffle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  background: linear-gradient(135deg,
      rgba(234, 88, 12, 0.10) 0%,
      rgba(180, 83, 9, 0.10) 100%);
  border: 1px solid rgba(234, 88, 12, 0.28);
  border-radius: 30px;
  flex-shrink: 0;
  user-select: none;
  cursor: default;
  animation: bz-q-in 0.22s ease both;
  transition: background 0.22s, border-color 0.22s;
}

.bz-header-shuffle-wrap--active {
  background: linear-gradient(135deg,
      rgba(234, 88, 12, 0.20) 0%,
      rgba(180, 83, 9, 0.20) 100%);
  border-color: rgba(234, 88, 12, 0.55);
}

.bz-header-shuf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.bz-header-shuf-label i {
  font-size: 0.70rem;
  color: #f97316;
}

.bz-header-shuffle-wrap--active .bz-header-shuf-label i {
  animation: bz-shuffle-spin 3s linear infinite;
}

/* Toggle switch — same pill design as auto-mix */
.bz-header-shuffle-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.bz-header-shuffle-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bz-header-shuf-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  display: block;
  flex-shrink: 0;
}

.bz-header-shuf-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.22s ease;
}

.bz-header-shuffle-toggle input:checked~.bz-header-shuf-slider {
  background: linear-gradient(135deg, #ea580c, #b45309);
  border-color: rgba(234, 88, 12, 0.60);
  box-shadow: 0 0 10px rgba(234, 88, 12, 0.40);
}

.bz-header-shuffle-toggle input:checked~.bz-header-shuf-slider::after {
  transform: translateX(18px);
  background: #fff;
}

.bz-header-shuffle-toggle:hover .bz-header-shuf-slider {
  border-color: rgba(234, 88, 12, 0.55);
}

.bz-header-automix-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  background: linear-gradient(135deg,
      rgba(37, 117, 252, 0.12) 0%,
      rgba(106, 17, 203, 0.12) 100%);
  border: 1px solid rgba(37, 117, 252, 0.30);
  border-radius: 30px;
  flex-shrink: 0;
  user-select: none;
  cursor: default;
  animation: bz-q-in 0.22s ease both;
  /* Vertically centred with the h1 via JS flex on title-group */
}

.bz-header-am-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.bz-header-am-label i {
  font-size: 0.70rem;
  color: #2575fc;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

/* Toggle switch — same pill design as inline queue divider toggle */
.bz-header-automix-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.bz-header-automix-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bz-header-am-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  transition: background 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease;
  display: block;
  flex-shrink: 0;
}

.bz-header-am-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    background 0.22s ease;
}

.bz-header-automix-toggle input:checked~.bz-header-am-slider {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  border-color: rgba(37, 117, 252, 0.55);
  box-shadow: 0 0 10px rgba(37, 117, 252, 0.38);
}

.bz-header-automix-toggle input:checked~.bz-header-am-slider::after {
  transform: translateX(18px);
  background: #fff;
}

.bz-header-automix-toggle:hover .bz-header-am-slider {
  border-color: rgba(37, 117, 252, 0.55);
}

/* Active glow on the label icon when toggle is on */
.bz-header-automix-toggle input:checked~.bz-header-am-slider {
  box-shadow: 0 0 12px rgba(37, 117, 252, 0.45);
}

/* Highlight the wrapper when active */
.bz-header-automix-wrap:has(input:checked) {
  background: linear-gradient(135deg,
      rgba(37, 117, 252, 0.18) 0%,
      rgba(106, 17, 203, 0.18) 100%);
  border-color: rgba(37, 117, 252, 0.48);
}



/* ── Stats bar (#bz-queue-stats): inline pill row ── */
#bz-queue-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ── Sub-row: holds "Song X of Y" + AUTO-MIX toggle beneath the heading ──
   align-items: center + explicit margin:0 kills the browser-default <p>
   block-margin that was pushing the stats badge above the automix pill. ── */
.bz-queue-toggles-row {
  display: none;
}

.bz-now-playing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bz-now-playing-header .bz-label {
  margin-bottom: 0;
}

.bz-now-playing-header #bz-queue-stats {
  margin: 0;
  padding: 0;
}

/* "NOW PLAYING" pill — matches the "Song X of Y" badge styling */
.bz-now-playing-badge {
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (max-width: 600px) {
  .bz-queue-menu {
    min-width: 220px;
  }
}

/* ════════════════════════════════════════════════════════════
   ADAPTIVE IMAGE LAZY LOADING
   — shimmer skeleton while the real image is off-screen
   — smooth fade-in when the IntersectionObserver fires
════════════════════════════════════════════════════════════ */

/* Skeleton shimmer for images waiting to load */
img[data-bz-lazy-src] {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 75%);
  background-size: 400% 100%;
  animation: bz-img-shimmer 1.6s ease-in-out infinite;
}

/* Fade in when image finishes loading */
img.bz-lazy-loaded {
  animation: bz-img-fadein 0.35s ease-out both;
}

/* Broken image placeholder — keep layout intact */
img.bz-lazy-error {
  opacity: 0.25;
  filter: grayscale(1);
}

@keyframes bz-img-shimmer {
  0% {
    background-position: 100% 0;
  }

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

@keyframes bz-img-fadein {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 1;
  }
}

/* ================================================================
   QUEUE ROW — 3-dot menu (consolidates favourite / play / remove)
================================================================ */

/* Always show duration + 3-dot button (no more hover-to-reveal) */
.bz-q-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative;
}

/* Lift the row above sibling rows while its menu is open
   (siblings each form their own stacking context via the
   row-entrance animation, so without this the popup can render
   underneath the row below it) */
.bz-q-item:has(.bz-q-menu.open) {
  z-index: 100;
  position: relative;
}

.bz-q-menu-btn {
  position: relative;
}

/* Dropdown menu */
.bz-q-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 999;
  min-width: 200px;
  background: #1b1b22;
  background-color: #1b1b22;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}

.bz-q-menu.open {
  display: flex;
}

.bz-q-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: #e6e6ee;
  font-size: 0.85rem;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.bz-q-menu-item i {
  width: 16px;
  text-align: center;
  color: #bbb;
}

.bz-q-menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.bz-q-menu-item.danger:hover {
  background: rgba(255, 64, 64, 0.15);
  color: #ff6b6b;
}

.bz-q-menu-item.danger:hover i {
  color: #ff6b6b;
}

@media (max-width: 600px) {
  .bz-q-menu {
    right: 0;
    min-width: 180px;
  }
}

/* ================================================================
   QUEUE HEADER — 3-dot menu (Shuffle / Auto-Mix / Save / Clear)
================================================================ */

.bz-queue-menu-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.bz-queue-menu-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.bz-queue-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  /* FIX: position:fixed escapes the overflow:hidden on .bz-queue-overlay so
     the dropdown is never clipped by the parent container. top/right are set
     dynamically by JS via getBoundingClientRect on every open; the static
     fallbacks below are overridden immediately and only matter if JS fails. */
  position: fixed;
  top: 60px;
  right: 16px;
  left: auto;
  z-index: 100001;
  min-width: 260px;
  background: #1b1b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  padding: 10px;
}

.bz-queue-menu.open {
  display: flex;
}

/* Toggle pills become full-width rows inside the dropdown */
.bz-queue-menu .bz-header-shuffle-wrap,
.bz-queue-menu .bz-header-automix-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-radius: 10px;
  padding: 9px 12px;
}

/* Save / Clear buttons become full-width list items */
.bz-queue-menu .bz-btn {
  width: 100%;
  border-radius: 10px;
  justify-content: flex-start;
  font-weight: 600;
}

.bz-queue-menu .bz-btn--save {
  background: rgba(22, 163, 74, 0.14) !important;
  color: #4ade80 !important;
}

.bz-queue-menu .bz-btn--save:hover {
  background: rgba(22, 163, 74, 0.28) !important;
  box-shadow: none !important;
}

.bz-queue-menu .bz-btn.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.bz-queue-menu .bz-btn.danger:hover {
  background: rgba(239, 68, 68, 0.24);
}

/* ── Back button row — sits above the queue header ────────────────────────── */
.bz-queue-back-row {
  display: flex;
  align-items: center;
  padding: 16px 6% 0;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .bz-queue-back-row {
    padding: 12px 4% 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   LYRICS HIGHLIGHTING — BUG FIXES
   1. Remove orange fill from lyric lines (was leaking from primary-color /
      gradient-fill rules used in the player progress bar)
   2. Slow the active-line transition so it stays in sync with audio timing
   3. Inactive lines stay at dim white — no orange tint at all
════════════════════════════════════════════════════════════════════════════ */

/* ── All lyric lines: white, no orange fill ── */
.lyrics-line,
.lrc-line,
.lyric-line,
[class*="lyric"],
[class*="lrc-"] {
  color: rgba(255, 255, 255, 0.40) !important;
  /* Kill any gradient text-fill that comes from the player's --primary-color */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  /* Smooth transition aligned to typical line durations (0.3 s) */
  transition: color 0.30s ease, opacity 0.30s ease, transform 0.30s ease !important;
  /* Remove any orange/amber text-shadow from progress fills */
  text-shadow: none !important;
}

/* ── Active / current lyric line: bright white, no orange ── */
.lyrics-line.active,
.lyrics-line.current,
.lrc-line.active,
.lrc-line.current,
.lyric-line.active,
.lyric-line.current,
[class*="lyric"].active,
[class*="lyric"].current,
[class*="lrc-"].active,
[class*="lrc-"].current,
.lyrics-line[data-active="true"],
.lrc-line[data-active="true"],
/* also cover inline-highlighted spans if the engine wraps the active word */
.active-lyric,
.current-lyric,
.lyric-active {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.04) !important;
  transition: color 0.30s ease, opacity 0.30s ease, transform 0.30s ease !important;
}

/* ── Kill the orange "fill" progress overlay some karaoke engines render ──
   These are the ::before / ::after pseudo-elements that sweep across the
   active line to show word-level progress using clip-path or width %.     */
.lyrics-line::before,
.lyrics-line::after,
.lrc-line::before,
.lrc-line::after,
.lyric-line::before,
.lyric-line::after,
[class*="lyric"]::before,
[class*="lyric"]::after,
[class*="lrc-"]::before,
[class*="lrc-"]::after,
.active-lyric::before,
.active-lyric::after {
  display: none !important;
  content: none !important;
}

/* ── Lyric fill / progress span (word-highlight engines) ── */
.lyric-fill,
.lrc-fill,
.lyric-progress,
.lrc-progress,
.lyrics-fill,
.lyrics-progress {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  /* Never orange */
  background-color: transparent !important;
}

/* ── Past lines: slightly brighter than future lines ── */
.lyrics-line.past,
.lrc-line.past,
.lyric-line.past {
  color: rgba(255, 255, 255, 0.28) !important;
  -webkit-text-fill-color: unset !important;
}

/* ── Lyrics container scroll: smooth, never jumpy ── */
.lyrics-container,
.lrc-container,
.lyrics-scroll,
.lrc-scroll,
[class*="lyrics-wrap"],
[class*="lrc-wrap"] {
  scroll-behavior: smooth !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — Section header icons & labels color fix
   The app's --primary-color is orange which bleeds into the Settings page
   section headings (ACCOUNT, DATA & PRIVACY, CLOUD SYNC, etc.) and their
   icons. These should use the purple/blue app accent, not orange.
════════════════════════════════════════════════════════════════════════════ */

/* ── Settings section heading labels ── */
.settings-section-title,
.settings-section-label,
.settings-category,
.settings-category-label,
.settings-group-label,
.settings-group-title,
.settings-heading,
[class*="settings-section"]>span,
[class*="settings-section"]>h2,
[class*="settings-section"]>h3,
[class*="settings-group"]>span,
[class*="settings-group"]>h2,
[class*="settings-group"]>h3 {
  color: #a78bfa !important;
  /* soft purple — matches the nav gradient */
}

/* ── Settings section icons (the icon next to ACCOUNT, DATA & PRIVACY etc.) ── */
.settings-section-title i,
.settings-section-title svg,
.settings-section-label i,
.settings-section-label svg,
.settings-category i,
.settings-category svg,
.settings-category-label i,
.settings-category-label svg,
.settings-group-label i,
.settings-group-label svg,
.settings-heading i,
.settings-heading svg,
[class*="settings-section"]>span i,
[class*="settings-section"]>span svg,
[class*="settings-group"]>span i,
[class*="settings-group"]>span svg {
  color: #a78bfa !important;
}

/* ── Settings nav tab: active state (the gear icon + "Settings" label) ── */
/* Only target the Settings nav item active color, not every nav item */
nav .nav-item[data-tab="settings"].active,
nav .nav-item[data-tab="settings"].active i,
nav .nav-item[data-tab="settings"].active span,
.nav-tab[href="#settings"].active,
.nav-tab[href="#settings"].active i,
.nav-tab[data-section="settings"].active,
.nav-tab[data-section="settings"].active i,
#nav-settings.active,
#nav-settings.active i {
  color: #a78bfa !important;
}

/* ── Broad sweep: any orange (#f59e0b / #f97316 / #ea580c) on Settings page ──
   These target the data-page / id pattern the app likely uses             */
#settings-page .settings-section-icon,
#settings-page .section-icon,
#settings-page .category-icon,
#settings .settings-section-icon,
#settings .section-icon,
#settings .category-icon,
[data-page="settings"] .settings-section-icon,
[data-page="settings"] .section-icon {
  color: #a78bfa !important;
}

/* ── Catch-all: any element inside a settings section header that is
   currently styled orange via the app's --primary-color variable ──
   We shadow the variable locally for just settings section headings. */
.settings-section-header,
.settings-category-header,
.settings-group-header,
[class*="settings-section-head"],
[class*="settings-group-head"] {
  --primary-color: #a78bfa !important;
  color: #a78bfa !important;
}

.settings-section-header i,
.settings-section-header svg,
.settings-category-header i,
.settings-category-header svg,
.settings-group-header i,
.settings-group-header svg,
[class*="settings-section-head"] i,
[class*="settings-section-head"] svg {
  color: #a78bfa !important;
}

/* ── Sign Up button: keep purple (not orange) ── */
#settings .btn-primary,
#settings-page .btn-primary,
[data-page="settings"] .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #2575fc) !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
  color: #fff !important;
}

/* ================================================================
   BEATZEN PRO — Queue + Auto-Mix Styles  v2.0
   Include after style.css:
       <link rel="stylesheet" href="beatzen-pro-styles.css">
   ================================================================ */

/* ── Drag-and-drop drop-target highlight ── */
.bz-q-item.drag-target {
  background: rgba(37, 117, 252, 0.12) !important;
  outline: 2px solid rgba(37, 117, 252, 0.5);
  outline-offset: -2px;
}

/* ── Drag handle: always visible ── */
.bz-q-drag {
  opacity: 1;
}

/* ── Duration text next to action buttons ── */
.bz-q-dur {
  font-size: 0.75rem;
  color: var(--bz-text-dim);
  margin-right: 2px;
  white-space: nowrap;
}

/* ── Now-playing card: green glow border ── */
.bz-q-item.bz-now-card {
  border: 2px solid var(--accent-green, #1db954) !important;
  background: rgba(29, 185, 84, 0.06) !important;
  cursor: default !important;
}

.bz-q-item.bz-now-card:hover {
  background: rgba(29, 185, 84, 0.08) !important;
}

/* ── Staggered entry animation for queue items ── */
@keyframes bz-q-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

#bz-queue-list .bz-q-item {
  animation: bz-q-in 0.2s ease both;
}

#bz-queue-list .bz-q-item:nth-child(1) {
  animation-delay: 0.00s;
}

#bz-queue-list .bz-q-item:nth-child(2) {
  animation-delay: 0.03s;
}

#bz-queue-list .bz-q-item:nth-child(3) {
  animation-delay: 0.06s;
}

#bz-queue-list .bz-q-item:nth-child(4) {
  animation-delay: 0.09s;
}

#bz-queue-list .bz-q-item:nth-child(5) {
  animation-delay: 0.12s;
}

#bz-queue-list .bz-q-item:nth-child(6) {
  animation-delay: 0.14s;
}

#bz-queue-list .bz-q-item:nth-child(7) {
  animation-delay: 0.16s;
}

#bz-queue-list .bz-q-item:nth-child(8) {
  animation-delay: 0.18s;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX SECTION DIVIDER
   The horizontal line + badge that separates user queue
   from Auto-Mix injected songs.
═══════════════════════════════════════════════════════════ */
.bz-automix-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 12px;
  user-select: none;
  animation: bz-q-in 0.25s ease both;
}

.bz-automix-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(37, 117, 252, 0.35) 30%,
      rgba(37, 117, 252, 0.35) 70%,
      transparent);
}

.bz-automix-divider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  padding: 6px 14px 6px 10px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(37, 117, 252, 0.22) 0%, rgba(106, 17, 203, 0.22) 100%);
  border: 1px solid rgba(37, 117, 252, 0.38);
  box-shadow:
    0 0 18px rgba(37, 117, 252, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bz-automix-divider-label i {
  font-size: 0.75rem;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

@keyframes bz-am-pulse {

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

  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* ── Auto-Mix items: subtle left accent ── */
.bz-q-item[data-automix="true"] {
  border-left: 2px solid rgba(37, 117, 252, 0.30);
  padding-left: 10px;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX BADGE in stats bar
═══════════════════════════════════════════════════════════ */
.bz-automix-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2575fc;
  background: rgba(37, 117, 252, 0.10);
  border: 1px solid rgba(37, 117, 252, 0.28);
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

.bz-automix-badge i {
  font-size: 0.65rem;
}

.bz-am-count {
  background: #2575fc;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}

/* ── Loading hint when auto-mix will fill soon ── */
.bz-upnext-empty {
  color: rgba(167, 139, 250, 0.75);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 22px 0 8px;
  text-align: center;
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX LOADING INDICATOR
   Animated dots + text shown at bottom of queue list while
   Auto-Mix is fetching and scoring songs.
   Container rule is defined in the IMPROVED section below.
═══════════════════════════════════════════════════════════ */

/* Three bouncing dots */
.bz-aml-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bz-aml-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  display: block;
  animation: bz-aml-bounce 1.1s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.55);
}

.bz-aml-dots span:nth-child(1) {
  animation-delay: 0.00s;
}

.bz-aml-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.bz-aml-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes bz-aml-bounce {

  0%,
  80%,
  100% {
    transform: scale(0.75) translateY(0);
    opacity: 0.55;
  }

  40% {
    transform: scale(1.1) translateY(-6px);
    opacity: 1;
  }
}

/* Label text */
.bz-aml-text {
  font-size: 0.74rem;
  font-weight: 600;
  color: #2575fc;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

.bz-aml-text i {
  animation: bz-am-pulse 2.2s ease-in-out infinite;
  font-size: 0.70rem;
}

/* .bz-q-fav-btn base styles are in style.css — not redefined here */

/* ═══════════════════════════════════════════════════════════
   FAVOURITES TOAST NOTIFICATION
   Slides in from bottom with red heart icon
═══════════════════════════════════════════════════════════ */
.bz-fav-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 18, 24, 0.96);
  backdrop-filter: blur(18px);
  -webkit-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;
}

/* Red heart icon bubble */
.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;
}

/* Text stack */
.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
   Targets the dp-card that renders the Favourites playlist
═══════════════════════════════════════════════════════════ */
.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
   Overrides the generic .timer-buttons button rules in style.css
═══════════════════════════════════════════════════════════ */

/* Separator line between our button and the next one */
#modal-fav-btn+button {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Heart icon — red, overrides the generic var(--primary-color) rule */
#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);
}

/* Active state — song is already a favourite */
#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;
}

/* ═══════════════════════════════════════════════════════════
   QUEUE IMAGE WRAPPER
   Wraps the cover img so overlays (heart, AM badge) work
═══════════════════════════════════════════════════════════ */
.bz-q-img-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  margin-right: 14px;
  flex-shrink: 0;
}

.bz-q-img-wrap .bz-q-img {
  width: 100%;
  height: 100%;
  min-width: unset;
  margin-right: 0;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ── Now-playing cover heart overlay ── */
.bz-q-cover-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 8px;
}

.bz-q-cover-heart i {
  font-size: 1.25rem;
  color: #ff2d55;
  filter: drop-shadow(0 0 6px rgba(255, 45, 85, 0.80));
  animation: bz-heart-beat 1.8s ease-in-out infinite;
}

@keyframes bz-heart-beat {

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

  15% {
    transform: scale(1.18);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.10);
  }

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

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX QUEUE ROW STYLING
   Subtle blue-purple treatment for Auto-Mix injected songs
═══════════════════════════════════════════════════════════ */

.bz-q-item--automix {
  border-left: 2px solid rgba(37, 117, 252, 0.45);
  background: linear-gradient(90deg,
      rgba(37, 117, 252, 0.05) 0%,
      transparent 60%) !important;
}

.bz-q-item--automix:hover {
  background: linear-gradient(90deg,
      rgba(37, 117, 252, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 60%) !important;
}

/* Magic wand badge — bottom-right of cover thumbnail */
.bz-q-am-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.70), 0 0 0 2px rgba(0, 0, 0, 0.60);
  pointer-events: none;
  flex-shrink: 0;
}

.bz-q-am-badge i {
  font-size: 0.48rem;
  color: #fff;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

/* Artist text: soft blue tint on AutoMix rows */
.bz-q-item--automix .bz-q-artist {
  color: rgba(147, 197, 253, 0.75);
}

/* ── Sparkle wrap + chip inside upgraded divider ── */
.bz-am-sparkle-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(37, 117, 252, 0.55);
}

.bz-am-sparkle-wrap i {
  font-size: 0.60rem;
  color: #fff;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

.bz-am-title {
  background: linear-gradient(90deg, #6ec6ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: 2px;
}

.bz-am-chip {
  background: rgba(37, 117, 252, 0.25);
  border: 1px solid rgba(37, 117, 252, 0.40);
  color: #93c5fd;
  font-size: 0.60rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 8px;
  letter-spacing: 0.4px;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════
   QUEUE POSITION COUNTER  — "Song 3 of 24"
   Shown in the stats bar whenever a song is active.
═══════════════════════════════════════════════════════════ */
.bz-queue-pos-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.80rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 4px 14px;
  letter-spacing: 0.2px;
}

.bz-queue-pos-badge strong {
  color: #fff;
  font-weight: 800;
}

.bz-q-pos-sep {
  font-size: inherit;
  font-weight: 700;
  color: #fff;
  margin: 0 1px;
}

/* ═══════════════════════════════════════════════════════════
   SHUFFLE ACTIVE BADGE  — shown in stats bar next to song count
═══════════════════════════════════════════════════════════ */
.bz-shuffle-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
  animation: bz-shuffle-badge-in 0.25s ease both;
}

.bz-shuffle-active-badge i {
  font-size: 0.65rem;
  animation: bz-shuffle-spin 3s linear infinite;
}

@keyframes bz-shuffle-badge-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

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

@keyframes bz-shuffle-spin {

  0%,
  85%,
  100% {
    transform: rotate(0deg);
  }

  92% {
    transform: rotate(20deg);
  }

  96% {
    transform: rotate(-12deg);
  }
}

/* ═══════════════════════════════════════════════════════════
   SHUFFLE NOTICE BANNER  — "Up Next" contextual note
   Tells users why the queue order looks random.
═══════════════════════════════════════════════════════════ */
.bz-shuffle-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(90deg,
      rgba(245, 158, 11, 0.10) 0%,
      rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 10px;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 229, 153, 0.80);
  letter-spacing: 0.15px;
  animation: bz-q-in 0.22s ease both;
  user-select: none;
}

.bz-shuffle-notice-icon {
  font-size: 0.78rem;
  color: #f59e0b;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   IMPROVED AUTO-MIX LOADING STATE
   Header row (dots + text) + three skeleton placeholder cards
═══════════════════════════════════════════════════════════ */

/* Single canonical container rule — consolidated here */
.bz-automix-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 10px;
  animation: bz-q-in 0.25s ease both;
}

/* Header: dots + label on one row */
.bz-aml-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Skeleton rows — mimic real queue items */
.bz-aml-skeletons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bz-aml-skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 2px;
  border-radius: 12px;
  overflow: hidden;
}

/* Thumbnail placeholder */
.bz-aml-skel-thumb {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 8px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: bz-skel-shimmer 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Text line placeholders */
.bz-aml-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bz-aml-skel-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 100%;
  animation: bz-skel-shimmer 1.6s ease-in-out infinite;
}

.bz-aml-skel-title {
  width: 65%;
  animation-delay: 0.0s;
}

.bz-aml-skel-artist {
  width: 42%;
  height: 8px;
  animation-delay: 0.15s;
}

/* Stagger the rows slightly for a cascading shimmer effect */
.bz-aml-skeleton-row:nth-child(2) .bz-aml-skel-thumb,
.bz-aml-skeleton-row:nth-child(2) .bz-aml-skel-line {
  animation-delay: 0.1s;
}

.bz-aml-skeleton-row:nth-child(3) .bz-aml-skel-thumb,
.bz-aml-skeleton-row:nth-child(3) .bz-aml-skel-line {
  animation-delay: 0.2s;
}

@keyframes bz-skel-shimmer {
  0% {
    background-position: 200% 0;
  }

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

/* ════════════════════════════════════════════════════════════════════════════
   FEATURE: End of Queue Indicator card
   ════════════════════════════════════════════════════════════════════════════ */
.bz-end-of-queue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 4px 6px;
  padding: 22px 20px 18px;
  background: linear-gradient(145deg,
      rgba(109, 40, 217, 0.16) 0%,
      rgba(37, 117, 252, 0.10) 55%,
      rgba(109, 40, 217, 0.07) 100%);
  border: 1.5px solid rgba(124, 58, 237, 0.32);
  border-top-color: rgba(167, 139, 250, 0.48);
  border-radius: 20px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(109, 40, 217, 0.08),
    0 0 28px rgba(109, 40, 217, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: bz-eoq-fadein 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  position: relative;
  overflow: hidden;
}

/* Ambient glow blob behind the icon */
.bz-end-of-queue-card::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.20) 0%, transparent 70%);
  pointer-events: none;
}

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

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

/* ── Icon wrapper with pulsing ring ── */
.bz-eoq-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 2px;
}

.bz-eoq-icon {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.65));
  position: relative;
  z-index: 1;
  animation: bz-eoq-icon-float 3.5s ease-in-out infinite;
  line-height: 1;
}

.bz-eoq-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(139, 92, 246, 0.30);
  animation: bz-eoq-ring-pulse 2.4s ease-out infinite;
}

@keyframes bz-eoq-icon-float {

  0%,
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.55));
  }

  50% {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 22px rgba(139, 92, 246, 0.85));
  }
}

@keyframes bz-eoq-ring-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* ── Text group ── */
.bz-eoq-text-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.bz-eoq-title {
  font-size: 0.88rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ede9fe, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1px;
  line-height: 1.3;
}

.bz-eoq-sub {
  font-size: 0.73rem;
  color: rgba(196, 181, 253, 0.58);
  line-height: 1.55;
  letter-spacing: 0.1px;
  max-width: 240px;
}

/* ── Start Auto-Mix button ── */
.bz-eoq-btn {
  margin-top: 4px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #4338ca 100%);
  border: none;
  border-radius: 22px;
  color: #f0e8ff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.20s ease, transform 0.14s ease, opacity 0.15s;
  letter-spacing: 0.4px;
  box-shadow:
    0 4px 18px rgba(109, 40, 217, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bz-eoq-btn i {
  font-size: 0.78rem;
  animation: bz-eoq-wand-spin 3s ease-in-out infinite;
}

@keyframes bz-eoq-wand-spin {

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

  88% {
    transform: rotate(-18deg) scale(1.15);
  }

  94% {
    transform: rotate(14deg) scale(1.1);
  }
}

.bz-eoq-btn:hover {
  box-shadow:
    0 6px 26px rgba(109, 40, 217, 0.68),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transform: translateY(-2px) scale(1.03);
}

.bz-eoq-btn:active {
  transform: scale(0.96);
  opacity: 0.88;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-MIX DIVIDER — Inline Toggle Switch
   Matches the AutoMix state in Settings; changes sync both ways.
═══════════════════════════════════════════════════════════ */
.bz-admix-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
}

.bz-admix-toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bz-admix-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  transition: background 0.22s ease, border-color 0.22s ease;
  display: block;
  flex-shrink: 0;
}

.bz-admix-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.22s ease;
}

.bz-admix-toggle-wrap input:checked~.bz-admix-slider {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  border-color: rgba(37, 117, 252, 0.55);
}

.bz-admix-toggle-wrap input:checked~.bz-admix-slider::after {
  transform: translateX(16px);
  background: #fff;
}

.bz-admix-toggle-wrap:hover .bz-admix-slider {
  border-color: rgba(37, 117, 252, 0.55);
}

/* ═══════════════════════════════════════════════════════════
   HEADER AUTO-MIX TOGGLE
   Sits inline beside the "Playback Queue" h1 heading.
   Title-group is made flex-row by JS so they share one line.
═══════════════════════════════════════════════════════════ */
/* ── Shuffle toggle pill — same structure as auto-mix wrap, orange accent ── */
.bz-header-shuffle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  background: linear-gradient(135deg,
      rgba(234, 88, 12, 0.10) 0%,
      rgba(180, 83, 9, 0.10) 100%);
  border: 1px solid rgba(234, 88, 12, 0.28);
  border-radius: 30px;
  flex-shrink: 0;
  user-select: none;
  cursor: default;
  animation: bz-q-in 0.22s ease both;
  transition: background 0.22s, border-color 0.22s;
}

.bz-header-shuffle-wrap--active {
  background: linear-gradient(135deg,
      rgba(234, 88, 12, 0.20) 0%,
      rgba(180, 83, 9, 0.20) 100%);
  border-color: rgba(234, 88, 12, 0.55);
}

.bz-header-shuf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.bz-header-shuf-label i {
  font-size: 0.70rem;
  color: #f97316;
}

.bz-header-shuffle-wrap--active .bz-header-shuf-label i {
  animation: bz-shuffle-spin 3s linear infinite;
}

/* Toggle switch — same pill design as auto-mix */
.bz-header-shuffle-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.bz-header-shuffle-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bz-header-shuf-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  display: block;
  flex-shrink: 0;
}

.bz-header-shuf-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.22s ease;
}

.bz-header-shuffle-toggle input:checked~.bz-header-shuf-slider {
  background: linear-gradient(135deg, #ea580c, #b45309);
  border-color: rgba(234, 88, 12, 0.60);
  box-shadow: 0 0 10px rgba(234, 88, 12, 0.40);
}

.bz-header-shuffle-toggle input:checked~.bz-header-shuf-slider::after {
  transform: translateX(18px);
  background: #fff;
}

.bz-header-shuffle-toggle:hover .bz-header-shuf-slider {
  border-color: rgba(234, 88, 12, 0.55);
}

.bz-header-automix-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  background: linear-gradient(135deg,
      rgba(37, 117, 252, 0.12) 0%,
      rgba(106, 17, 203, 0.12) 100%);
  border: 1px solid rgba(37, 117, 252, 0.30);
  border-radius: 30px;
  flex-shrink: 0;
  user-select: none;
  cursor: default;
  animation: bz-q-in 0.22s ease both;
  /* Vertically centred with the h1 via JS flex on title-group */
}

.bz-header-am-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.bz-header-am-label i {
  font-size: 0.70rem;
  color: #2575fc;
  animation: bz-am-pulse 2.8s ease-in-out infinite;
}

/* Toggle switch — same pill design as inline queue divider toggle */
.bz-header-automix-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.bz-header-automix-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bz-header-am-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  transition: background 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease;
  display: block;
  flex-shrink: 0;
}

.bz-header-am-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    background 0.22s ease;
}

.bz-header-automix-toggle input:checked~.bz-header-am-slider {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  border-color: rgba(37, 117, 252, 0.55);
  box-shadow: 0 0 10px rgba(37, 117, 252, 0.38);
}

.bz-header-automix-toggle input:checked~.bz-header-am-slider::after {
  transform: translateX(18px);
  background: #fff;
}

.bz-header-automix-toggle:hover .bz-header-am-slider {
  border-color: rgba(37, 117, 252, 0.55);
}

/* Active glow on the label icon when toggle is on */
.bz-header-automix-toggle input:checked~.bz-header-am-slider {
  box-shadow: 0 0 12px rgba(37, 117, 252, 0.45);
}

/* Highlight the wrapper when active */
.bz-header-automix-wrap:has(input:checked) {
  background: linear-gradient(135deg,
      rgba(37, 117, 252, 0.18) 0%,
      rgba(106, 17, 203, 0.18) 100%);
  border-color: rgba(37, 117, 252, 0.48);
}



/* ── Stats bar (#bz-queue-stats): inline pill row ── */
#bz-queue-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ── Sub-row: holds "Song X of Y" + AUTO-MIX toggle beneath the heading ──
   align-items: center + explicit margin:0 kills the browser-default <p>
   block-margin that was pushing the stats badge above the automix pill. ── */
.bz-queue-toggles-row {
  display: none;
}

.bz-now-playing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bz-now-playing-header .bz-label {
  margin-bottom: 0;
}

.bz-now-playing-header #bz-queue-stats {
  margin: 0;
  padding: 0;
}

/* "NOW PLAYING" pill — matches the "Song X of Y" badge styling */
.bz-now-playing-badge {
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (max-width: 600px) {
  .bz-queue-menu {
    min-width: 220px;
  }
}

/* ════════════════════════════════════════════════════════════
   ADAPTIVE IMAGE LAZY LOADING
   — shimmer skeleton while the real image is off-screen
   — smooth fade-in when the IntersectionObserver fires
════════════════════════════════════════════════════════════ */

/* Skeleton shimmer for images waiting to load */
img[data-bz-lazy-src] {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 75%);
  background-size: 400% 100%;
  animation: bz-img-shimmer 1.6s ease-in-out infinite;
}

/* Fade in when image finishes loading */
img.bz-lazy-loaded {
  animation: bz-img-fadein 0.35s ease-out both;
}

/* Broken image placeholder — keep layout intact */
img.bz-lazy-error {
  opacity: 0.25;
  filter: grayscale(1);
}

@keyframes bz-img-shimmer {
  0% {
    background-position: 100% 0;
  }

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

@keyframes bz-img-fadein {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 1;
  }
}

/* ================================================================
   QUEUE ROW — 3-dot menu (consolidates favourite / play / remove)
================================================================ */

/* Always show duration + 3-dot button (no more hover-to-reveal) */
.bz-q-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative;
}

/* Lift the row above sibling rows while its menu is open
   (siblings each form their own stacking context via the
   row-entrance animation, so without this the popup can render
   underneath the row below it) */
.bz-q-item:has(.bz-q-menu.open) {
  z-index: 100;
  position: relative;
}

.bz-q-menu-btn {
  position: relative;
}

/* Dropdown menu */
.bz-q-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 999;
  min-width: 200px;
  background: #1b1b22;
  background-color: #1b1b22;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}

.bz-q-menu.open {
  display: flex;
}

.bz-q-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: #e6e6ee;
  font-size: 0.85rem;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.bz-q-menu-item i {
  width: 16px;
  text-align: center;
  color: #bbb;
}

.bz-q-menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.bz-q-menu-item.danger:hover {
  background: rgba(255, 64, 64, 0.15);
  color: #ff6b6b;
}

.bz-q-menu-item.danger:hover i {
  color: #ff6b6b;
}

@media (max-width: 600px) {
  .bz-q-menu {
    right: 0;
    min-width: 180px;
  }
}

/* ================================================================
   QUEUE HEADER — 3-dot menu (Shuffle / Auto-Mix / Save / Clear)
================================================================ */

.bz-queue-menu-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.bz-queue-menu-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.bz-queue-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  /* FIX: position:fixed escapes the overflow:hidden on .bz-queue-overlay so
     the dropdown is never clipped by the parent container. top/right are set
     dynamically by JS via getBoundingClientRect on every open; the static
     fallbacks below are overridden immediately and only matter if JS fails. */
  position: fixed;
  top: 60px;
  right: 16px;
  left: auto;
  z-index: 100001;
  min-width: 260px;
  background: #1b1b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  padding: 10px;
}

.bz-queue-menu.open {
  display: flex;
}

/* Toggle pills become full-width rows inside the dropdown */
.bz-queue-menu .bz-header-shuffle-wrap,
.bz-queue-menu .bz-header-automix-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-radius: 10px;
  padding: 9px 12px;
}

/* Save / Clear buttons become full-width list items */
.bz-queue-menu .bz-btn {
  width: 100%;
  border-radius: 10px;
  justify-content: flex-start;
  font-weight: 600;
}

.bz-queue-menu .bz-btn--save {
  background: rgba(22, 163, 74, 0.14) !important;
  color: #4ade80 !important;
}

.bz-queue-menu .bz-btn--save:hover {
  background: rgba(22, 163, 74, 0.28) !important;
  box-shadow: none !important;
}

.bz-queue-menu .bz-btn.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.bz-queue-menu .bz-btn.danger:hover {
  background: rgba(239, 68, 68, 0.24);
}

/* ── Back button row — sits above the queue header ────────────────────────── */
.bz-queue-back-row {
  display: flex;
  align-items: center;
  padding: 16px 6% 0;
  flex-shrink: 0;
}



@media (max-width: 480px) {
  .bz-queue-back-row {
    padding: 12px 4% 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   LYRICS HIGHLIGHTING — BUG FIXES
   1. Remove orange fill from lyric lines (was leaking from primary-color /
      gradient-fill rules used in the player progress bar)
   2. Slow the active-line transition so it stays in sync with audio timing
   3. Inactive lines stay at dim white — no orange tint at all
════════════════════════════════════════════════════════════════════════════ */

/* ── All lyric lines: white, no orange fill ── */
.lyrics-line,
.lrc-line,
.lyric-line,
[class*="lyric"],
[class*="lrc-"] {
  color: rgba(255, 255, 255, 0.40) !important;
  /* Kill any gradient text-fill that comes from the player's --primary-color */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  /* Smooth transition aligned to typical line durations (0.3 s) */
  transition: color 0.30s ease, opacity 0.30s ease, transform 0.30s ease !important;
  /* Remove any orange/amber text-shadow from progress fills */
  text-shadow: none !important;
}

/* ── Active / current lyric line: bright white, no orange ── */
.lyrics-line.active,
.lyrics-line.current,
.lrc-line.active,
.lrc-line.current,
.lyric-line.active,
.lyric-line.current,
[class*="lyric"].active,
[class*="lyric"].current,
[class*="lrc-"].active,
[class*="lrc-"].current,
.lyrics-line[data-active="true"],
.lrc-line[data-active="true"],
/* also cover inline-highlighted spans if the engine wraps the active word */
.active-lyric,
.current-lyric,
.lyric-active {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.04) !important;
  transition: color 0.30s ease, opacity 0.30s ease, transform 0.30s ease !important;
}

/* ── Kill the orange "fill" progress overlay some karaoke engines render ──
   These are the ::before / ::after pseudo-elements that sweep across the
   active line to show word-level progress using clip-path or width %.     */
.lyrics-line::before,
.lyrics-line::after,
.lrc-line::before,
.lrc-line::after,
.lyric-line::before,
.lyric-line::after,
[class*="lyric"]::before,
[class*="lyric"]::after,
[class*="lrc-"]::before,
[class*="lrc-"]::after,
.active-lyric::before,
.active-lyric::after {
  display: none !important;
  content: none !important;
}

/* ── Lyric fill / progress span (word-highlight engines) ── */
.lyric-fill,
.lrc-fill,
.lyric-progress,
.lrc-progress,
.lyrics-fill,
.lyrics-progress {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  /* Never orange */
  background-color: transparent !important;
}

/* ── Past lines: slightly brighter than future lines ── */
.lyrics-line.past,
.lrc-line.past,
.lyric-line.past {
  color: rgba(255, 255, 255, 0.28) !important;
  -webkit-text-fill-color: unset !important;
}

/* ── Lyrics container scroll: smooth, never jumpy ── */
.lyrics-container,
.lrc-container,
.lyrics-scroll,
.lrc-scroll,
[class*="lyrics-wrap"],
[class*="lrc-wrap"] {
  scroll-behavior: smooth !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — Section header icons & labels color fix
   The app's --primary-color is orange which bleeds into the Settings page
   section headings (ACCOUNT, DATA & PRIVACY, CLOUD SYNC, etc.) and their
   icons. These should use the purple/blue app accent, not orange.
════════════════════════════════════════════════════════════════════════════ */

/* ── Settings section heading labels ── */
.settings-section-title,
.settings-section-label,
.settings-category,
.settings-category-label,
.settings-group-label,
.settings-group-title,
.settings-heading,
[class*="settings-section"]>span,
[class*="settings-section"]>h2,
[class*="settings-section"]>h3,
[class*="settings-group"]>span,
[class*="settings-group"]>h2,
[class*="settings-group"]>h3 {
  color: #a78bfa !important;
  /* soft purple — matches the nav gradient */
}

/* ── Settings section icons (the icon next to ACCOUNT, DATA & PRIVACY etc.) ── */
.settings-section-title i,
.settings-section-title svg,
.settings-section-label i,
.settings-section-label svg,
.settings-category i,
.settings-category svg,
.settings-category-label i,
.settings-category-label svg,
.settings-group-label i,
.settings-group-label svg,
.settings-heading i,
.settings-heading svg,
[class*="settings-section"]>span i,
[class*="settings-section"]>span svg,
[class*="settings-group"]>span i,
[class*="settings-group"]>span svg {
  color: #a78bfa !important;
}

/* ── Settings nav tab: active state (the gear icon + "Settings" label) ── */
/* Only target the Settings nav item active color, not every nav item */
nav .nav-item[data-tab="settings"].active,
nav .nav-item[data-tab="settings"].active i,
nav .nav-item[data-tab="settings"].active span,
.nav-tab[href="#settings"].active,
.nav-tab[href="#settings"].active i,
.nav-tab[data-section="settings"].active,
.nav-tab[data-section="settings"].active i,
#nav-settings.active,
#nav-settings.active i {
  color: #a78bfa !important;
}

/* ── Broad sweep: any orange (#f59e0b / #f97316 / #ea580c) on Settings page ──
   These target the data-page / id pattern the app likely uses             */
#settings-page .settings-section-icon,
#settings-page .section-icon,
#settings-page .category-icon,
#settings .settings-section-icon,
#settings .section-icon,
#settings .category-icon,
[data-page="settings"] .settings-section-icon,
[data-page="settings"] .section-icon {
  color: #a78bfa !important;
}

/* ── Catch-all: any element inside a settings section header that is
   currently styled orange via the app's --primary-color variable ──
   We shadow the variable locally for just settings section headings. */
.settings-section-header,
.settings-category-header,
.settings-group-header,
[class*="settings-section-head"],
[class*="settings-group-head"] {
  --primary-color: #a78bfa !important;
  color: #a78bfa !important;
}

.settings-section-header i,
.settings-section-header svg,
.settings-category-header i,
.settings-category-header svg,
.settings-group-header i,
.settings-group-header svg,
[class*="settings-section-head"] i,
[class*="settings-section-head"] svg {
  color: #a78bfa !important;
}

/* ── Sign Up button: keep purple (not orange) ── */
#settings .btn-primary,
#settings-page .btn-primary,
[data-page="settings"] .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #2575fc) !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
  color: #fff !important;
}