.animate-spin-slow {
  animation: spin 8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
  transition: all 0.15s ease;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.nav-btn.active {
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(255, 138, 0, 0.3);
  color: #ffffff;
}

.tag-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 0.5rem;
  background-color: #14161f;
  border: 1px solid #222538;
  color: #d1d5db;
  transition: all 0.15s;
}

.tag-btn:hover {
  border-color: #ff8a00;
  color: #ff8a00;
}

.song-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.song-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 138, 0, 0.4);
  box-shadow: 0 10px 25px -5px rgba(255, 138, 0, 0.1);
}

.tab-content {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}