/* ── Listo — Custom styles on top of Tailwind ─────────────────────────────── */

/* Scrollbar hide utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Smooth scrollbar for content areas */
* { scroll-behavior: smooth; }

/* Range input styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1DB954;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(29,185,84,0.2);
}

/* Card hover lift */
.card-hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Green glow button */
.btn-glow {
  box-shadow: 0 4px 24px rgba(29,185,84,0.35);
}
.btn-glow:hover {
  box-shadow: 0 6px 32px rgba(29,185,84,0.5);
}

/* Glassmorphism card */
.glass-card {
  background: rgba(40,40,40,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Progress bar fill animation */
#player-progress {
  transition: width 0.5s linear;
}

/* Page transitions */
main {
  animation: fadeIn 0.35s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}