body {
      background-color: #0A0A0C;
      font-family: 'Segoe UI', sans-serif;
    }
    .song-item {
    cursor: grab;
    }

    .song-item {
      background: #1a1a1a;
      border: 1px solid #2d2d2d;
      padding: 12px 16px;
      border-radius: 12px;
      margin: 6px 0;
      color: white;
      font-size: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
    }

    .song-item:hover {
      background: linear-gradient(45deg, #ff6f61, #ff4500);
      color: white;
      box-shadow: 0 4px 12px rgba(255, 99, 71, 0.7);
      transform: scale(1.03);
    }
    .song-item.active {
      background: linear-gradient(45deg, #ff6f61, #ff4500);
      color: white;
      font-weight: bold;
      box-shadow: 0 4px 10px rgba(255, 99, 71, 0.7);
      transform: scale(1.05);
    }
    
    .add-to-playlist-btn,
    .remove-from-playlist-btn {
      background-color: #fb923c;
      color: black;
      border: none;
      padding: 6px 10px;
      font-size: 0.85rem;
      border-radius: 8px;
      cursor: pointer;
      margin-left: 12px;
      transition: background 0.3s;
    }

    .add-to-playlist-btn:hover {
      background-color: #f97316;
    }

    .remove-from-playlist-btn {
      background-color: #1a1a1a;
      color: #f87171;
      border: 1px solid #333;
    }

    .remove-from-playlist-btn:hover {
      background-color: #b91c1c;
      color: white;
    }

    #logoutBtn, #guestSignInBtn {
      background: linear-gradient(to right, #fb923c, #ea580c);
      color: black;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    #logoutBtn:hover, #guestSignInBtn:hover {
      background: linear-gradient(to right, #f97316, #c2410c);
      color: white;
    }

    input[type="range"]::-webkit-slider-thumb {
      background: #fb923c;
      border: none;
    }

    #playlistPickerModal {
      background-color: rgba(0, 0, 0, 0.85);
    }

    .glass-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 16px;
      margin-bottom: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }

    #shuffleBtn:hover {
  background-color: #f97316 !important; /* orange hover */
}

html, body {
  touch-action: pan-x pan-y;   /* ✅ allow scroll, block pinch/double-tap zoom */
  -ms-touch-action: pan-x pan-y;
  overscroll-behavior: none;   /* stop overscroll bounce */
  -webkit-text-size-adjust: 100%; /* ✅ iOS Safari: prevent text auto-zoom */
}


    /* Jungle Green Theme */
body.jungle-theme .add-to-playlist-btn,
body.jungle-theme .bg-orange-500,
body.jungle-theme .bg-gradient-to-r,
body.jungle-theme #logoutBtn,
body.jungle-theme #guestSignInBtn {
  background-color: #22c55e !important;
  background-image: linear-gradient(to right, #22c55e, #15803d) !important;
  color: white !important;
  box-shadow: 0 0 10px #22c55e !important;
}

body.jungle-theme .hover\:bg-red-600:hover {
  background-color: #15803d !important;
}

body.jungle-theme .border-orange-500 {
  border-color: #22c55e !important;
}

body.jungle-theme .focus\:ring-red-500:focus {
  box-shadow: 0 0 0 3px #22c55e !important;
}

body.jungle-theme .text-orange-400,
body.jungle-theme .text-orange-300 {
  color: #22c55e !important;
}

body.jungle-theme .song-item:hover,
body.jungle-theme .song-item.active {
  background: linear-gradient(45deg, #16a34a, #15803d) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.7) !important;
}

body.jungle-theme #shuffleBtn:hover {
  background-color: #15803d !important; /* green hover in jungle theme */
}

/* Coffee Color Theme */
body.coffee-theme .add-to-playlist-btn,
body.coffee-theme .bg-orange-500,
body.coffee-theme .bg-gradient-to-r,
body.coffee-theme #logoutBtn,
body.coffee-theme #guestSignInBtn {
  background-color: #6f4e37 !important;
  background-image: linear-gradient(to right, #8b5e3c, #3e2c23) !important;
  color: white !important;
  box-shadow: 0 0 10px #6f4e37 !important;
}
body.coffee-theme .song-item:hover,
body.coffee-theme .song-item.active {
  background: linear-gradient(45deg, #8b5e3c, #3e2c23) !important;
  box-shadow: 0 4px 12px rgba(139, 94, 60, 0.7) !important;
}
body.coffee-theme #shuffleBtn:hover {
  background-color: #3e2c23 !important;
}

/* Ocean Blue Theme */
body.ocean-theme .add-to-playlist-btn,
body.ocean-theme .bg-orange-500,
body.ocean-theme .bg-gradient-to-r,
body.ocean-theme #logoutBtn,
body.ocean-theme #guestSignInBtn {
  background-color: #0284c7 !important;
  background-image: linear-gradient(to right, #0ea5e9, #0284c7) !important;
  color: white !important;
  box-shadow: 0 0 10px #0ea5e9 !important;
}
body.ocean-theme .song-item:hover,
body.ocean-theme .song-item.active {
  background: linear-gradient(45deg, #0ea5e9, #0284c7) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.7) !important;
}
body.ocean-theme #shuffleBtn:hover {
  background-color: #0369a1 !important;
}

/* Retro Vibes Theme */
body.retro-theme .add-to-playlist-btn,
body.retro-theme .bg-orange-500,
body.retro-theme .bg-gradient-to-r,
body.retro-theme #logoutBtn,
body.retro-theme #guestSignInBtn {
  background-color: #ffb347 !important;
  background-image: linear-gradient(to right, #ffcc33, #ff8c00) !important;
  color: black !important;
  box-shadow: 0 0 10px #ffcc33 !important;
}
body.retro-theme .song-item:hover,
body.retro-theme .song-item.active {
  background: linear-gradient(45deg, #ffcc33, #ff8c00) !important;
  box-shadow: 0 4px 12px rgba(255, 204, 51, 0.7) !important;
  color: black !important;
}
body.retro-theme #shuffleBtn:hover {
  background-color: #ff8c00 !important;
}

/* Shared adjustments for dynamic components */
body.coffee-theme .theme-border {
  border-color: #8b5e3c !important;
}
body.coffee-theme .theme-focus:focus {
  box-shadow: 0 0 0 2px #8b5e3c !important;
}
body.coffee-theme .theme-text {
  color: #8b5e3c !important;
}

body.ocean-theme .theme-border {
  border-color: #0ea5e9 !important;
}
body.ocean-theme .theme-focus:focus {
  box-shadow: 0 0 0 2px #0ea5e9 !important;
}
body.ocean-theme .theme-text {
  color: #0ea5e9 !important;
}

body.retro-theme .theme-border {
  border-color: #ffcc33 !important;
}
body.retro-theme .theme-focus:focus {
  box-shadow: 0 0 0 2px #ffcc33 !important;
}
body.retro-theme .theme-text {
  color: #ffcc33 !important;
}

body.jungle-theme .theme-border {
  border-color: #22c55e !important;
}
body.jungle-theme .theme-focus:focus {
  box-shadow: 0 0 0 2px #22c55e !important;
}
body.jungle-theme .theme-text {
  color: #22c55e !important;
}

/* Midnight Purple Theme */
body.purple-theme .add-to-playlist-btn,
body.purple-theme .bg-orange-500,
body.purple-theme .bg-gradient-to-r,
body.purple-theme #logoutBtn,
body.purple-theme #guestSignInBtn {
  background-color: #6b21a8 !important;
  background-image: linear-gradient(to right, #9333ea, #6b21a8) !important;
  color: white !important;
  box-shadow: 0 0 10px #9333ea !important;
}
body.purple-theme .song-item:hover,
body.purple-theme .song-item.active {
  background: linear-gradient(45deg, #9333ea, #6b21a8) !important;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.7) !important;
}
body.purple-theme #shuffleBtn:hover {
  background-color: #6b21a8 !important;
}
body.purple-theme .theme-border { border-color: #9333ea !important; }
body.purple-theme .theme-focus:focus { box-shadow: 0 0 0 2px #9333ea !important; }
body.purple-theme .theme-text { color: #9333ea !important; }
body.purple-theme { --slider-glow: #9333ea; }

/* Mint Frost Theme */
body.mint-theme .add-to-playlist-btn,
body.mint-theme .bg-orange-500,
body.mint-theme .bg-gradient-to-r,
body.mint-theme #logoutBtn,
body.mint-theme #guestSignInBtn {
  background-color: #2dd4bf !important;
  background-image: linear-gradient(to right, #5eead4, #14b8a6) !important;
  color: black !important;
  box-shadow: 0 0 10px #2dd4bf !important;
}
body.mint-theme .song-item:hover,
body.mint-theme .song-item.active {
  background: linear-gradient(45deg, #5eead4, #14b8a6) !important;
  box-shadow: 0 4px 12px rgba(94, 234, 212, 0.7) !important;
}
body.mint-theme #shuffleBtn:hover {
  background-color: #14b8a6 !important;
}
body.mint-theme .theme-border { border-color: #2dd4bf !important; }
body.mint-theme .theme-focus:focus { box-shadow: 0 0 0 2px #2dd4bf !important; }
body.mint-theme .theme-text { color: #2dd4bf !important; }
body.mint-theme { --slider-glow: #2dd4bf; }

/* Cyber Neon Theme */
body.neon-theme .add-to-playlist-btn,
body.neon-theme .bg-orange-500,
body.neon-theme .bg-gradient-to-r,
body.neon-theme #logoutBtn,
body.neon-theme #guestSignInBtn {
  background-color: #ec4899 !important;
  background-image: linear-gradient(to right, #ec4899, #3b82f6) !important;
  color: white !important;
  box-shadow: 0 0 10px #ec4899 !important;
}
body.neon-theme .song-item:hover,
body.neon-theme .song-item.active {
  background: linear-gradient(45deg, #ec4899, #3b82f6) !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.7) !important;
}
body.neon-theme #shuffleBtn:hover {
  background-color: #3b82f6 !important;
}
body.neon-theme .theme-border { border-color: #ec4899 !important; }
body.neon-theme .theme-focus:focus { box-shadow: 0 0 0 2px #ec4899 !important; }
body.neon-theme .theme-text { color: #ec4899 !important; }
body.neon-theme { --slider-glow: #ec4899; }

.theme-btn {
  @apply w-full py-2 rounded-xl shadow-md transition-all duration-300 font-semibold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.theme-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}
#themeModalContent {
  max-height: 80vh; /* Ensures it doesn't go off screen */
  overflow-y: auto; /* Allows internal scroll */
}


/* Sunset Blaze Theme */
body.sunset-theme .add-to-playlist-btn,
body.sunset-theme .bg-orange-500,
body.sunset-theme .bg-gradient-to-r,
body.sunset-theme #logoutBtn,
body.sunset-theme #guestSignInBtn {
  background-color: #f97316 !important;
  background-image: linear-gradient(to right, #f97316, #e11d48) !important;
  color: white !important;
  box-shadow: 0 0 10px #f97316 !important;
}
body.sunset-theme .song-item:hover,
body.sunset-theme .song-item.active {
  background: linear-gradient(45deg, #f97316, #e11d48) !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.7) !important;
}
body.sunset-theme #shuffleBtn:hover {
  background-color: #e11d48 !important;
}
body.sunset-theme .theme-border { border-color: #f97316 !important; }
body.sunset-theme .theme-focus:focus { box-shadow: 0 0 0 2px #f97316 !important; }
body.sunset-theme .theme-text { color: #f97316 !important; }

/* Matrix Tech Theme */
body.matrix-theme .add-to-playlist-btn,
body.matrix-theme .bg-orange-500,
body.matrix-theme .bg-gradient-to-r,
body.matrix-theme #logoutBtn,
body.matrix-theme #guestSignInBtn {
  background-color: #0f0f0f !important;
  background-image: linear-gradient(to right, #0f0f0f, #00ff00) !important;
  color: #00ff00 !important;
  box-shadow: 0 0 10px #00ff00 !important;
}
body.matrix-theme .song-item:hover,
body.matrix-theme .song-item.active {
  background: linear-gradient(45deg, #00ff00, #006400) !important;
  color: black !important;
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.7) !important;
}
body.matrix-theme #shuffleBtn:hover {
  background-color: #006400 !important;
}
body.matrix-theme .theme-border { border-color: #00ff00 !important; }
body.matrix-theme .theme-focus:focus { box-shadow: 0 0 0 2px #00ff00 !important; }
body.matrix-theme .theme-text { color: #00ff00 !important; }

/* Pastel Dream Theme */
body.pastel-theme .add-to-playlist-btn,
body.pastel-theme .bg-orange-500,
body.pastel-theme .bg-gradient-to-r,
body.pastel-theme #logoutBtn,
body.pastel-theme #guestSignInBtn {
  background-color: #fbcfe8 !important;
  background-image: linear-gradient(to right, #fbcfe8, #a5f3fc) !important;
  color: #111827 !important;
  box-shadow: 0 0 10px #fbcfe8 !important;
}
body.pastel-theme .song-item:hover,
body.pastel-theme .song-item.active {
  background: linear-gradient(45deg, #fbcfe8, #a5f3fc) !important;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(251, 207, 232, 0.7) !important;
}
body.pastel-theme #shuffleBtn:hover {
  background-color: #a5f3fc !important;
}
body.pastel-theme .theme-border { border-color: #fbcfe8 !important; }
body.pastel-theme .theme-focus:focus { box-shadow: 0 0 0 2px #fbcfe8 !important; }
body.pastel-theme .theme-text { color: #fbcfe8 !important; }

/* Aurora Glow Theme */
body.aurora-theme .add-to-playlist-btn,
body.aurora-theme .bg-orange-500,
body.aurora-theme .bg-gradient-to-r,
body.aurora-theme #logoutBtn,
body.aurora-theme #guestSignInBtn {
  background-color: #6366f1 !important;
  background-image: linear-gradient(to right, #6366f1, #22d3ee) !important;
  color: white !important;
  box-shadow: 0 0 10px #22d3ee !important;
}
body.aurora-theme .song-item:hover,
body.aurora-theme .song-item.active {
  background: linear-gradient(45deg, #6366f1, #22d3ee) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.7) !important;
}
body.aurora-theme #shuffleBtn:hover {
  background-color: #4f46e5 !important;
}
body.aurora-theme .theme-border { border-color: #22d3ee !important; }
body.aurora-theme .theme-focus:focus { box-shadow: 0 0 0 2px #22d3ee !important; }
body.aurora-theme .theme-text { color: #22d3ee !important; }


button:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

/* Default (non-themed) border and focus */
.theme-border {
  border-color: #fb923c !important; /* same orange as your buttons */
}
.theme-focus:focus {
  box-shadow: 0 0 0 2px #fb923c !important;
}
.theme-text {
  color: #fb923c !important;
}

/* Example theme override */
body.purple-theme #volumeSlider {
  accent-color: #a855f7;
}

#lyricsBox {
  transition: all 0.3s ease-in-out;
}

/* Default progress bar (non-themed) */
input.theme-progress[type="range"] {
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #fb923c, #f97316); /* Firefly orange default */
  position: relative;
  z-index: 1;
  overflow: visible;
}



input.theme-progress[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fb923c;
  border: 2px solid white;
  box-shadow: 0 0 6px rgba(255, 87, 34, 0.5);
  position: relative;
  z-index: 2;  /* ✅ Bring it above */
}



input.theme-progress[type="range"]::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #f97316;
  border: 2px solid white;
  box-shadow: 0 0 6px rgba(255, 87, 34, 0.8);
  cursor: pointer;
}

/* 🎨 Theme-specific overrides */

body.jungle-theme input.theme-progress {
  background: linear-gradient(to right, #065f46, #10b981);
}
body.coffee-theme input.theme-progress {
  background: linear-gradient(to right, #4b2e1e, #d97706);
}
body.ocean-theme input.theme-progress {
  background: linear-gradient(to right, #0ea5e9, #0284c7);
}
body.retro-theme input.theme-progress {
  background: linear-gradient(to right, #facc15, #f59e0b);
}
body.purple-theme input.theme-progress {
  background: linear-gradient(to right, #7c3aed, #9333ea);
}
body.sunset-theme input.theme-progress {
  background: linear-gradient(to right, #fb923c, #f43f5e);
}
body.mint-theme input.theme-progress {
  background: linear-gradient(to right, #2dd4bf, #14b8a6);
}
body.neon-theme input.theme-progress {
  background: linear-gradient(to right, #ec4899, #3b82f6);
}
body.matrix-theme input.theme-progress {
  background: linear-gradient(to right, #16a34a, #065f46);
}
body.pastel-theme input.theme-progress {
  background: linear-gradient(to right, #fbcfe8, #a5f3fc);
}
body.aurora-theme input.theme-progress {
  background: linear-gradient(to right, #6366f1, #06b6d4);
}

/* 🎨 Theme-specific thumb colors */

body.jungle-theme input.theme-progress::-webkit-slider-thumb {
  background: #10b981; /* Emerald */
}
body.coffee-theme input.theme-progress::-webkit-slider-thumb {
  background: #d97706; /* Amber */
}
body.ocean-theme input.theme-progress::-webkit-slider-thumb {
  background: #0ea5e9; /* Sky */
}
body.retro-theme input.theme-progress::-webkit-slider-thumb {
  background: #f59e0b; /* Yellow/Orange */
}
body.purple-theme input.theme-progress::-webkit-slider-thumb {
  background: #9333ea; /* Violet */
}
body.sunset-theme input.theme-progress::-webkit-slider-thumb {
  background: #f43f5e; /* Rose */
}
body.mint-theme input.theme-progress::-webkit-slider-thumb {
  background: #2dd4bf; /* Teal */
}
body.neon-theme input.theme-progress::-webkit-slider-thumb {
  background: #ec4899; /* Hot Pink */
}
body.matrix-theme input.theme-progress::-webkit-slider-thumb {
  background: #22c55e; /* Green */
}
body.pastel-theme input.theme-progress::-webkit-slider-thumb {
  background: #fbcfe8; /* Soft Pink */
}
body.aurora-theme input.theme-progress::-webkit-slider-thumb {
  background: #06b6d4; /* Cyan */
}
body.default input.theme-progress::-webkit-slider-thumb {
  background: #f97316; /* Orange */
}