/* =========================================
   NOXIASOUNDS — Full Screen Player
   + Login / Register Modal
   ========================================= */

/* ══════════════════════════════════════════
   FULL SCREEN PLAYER
══════════════════════════════════════════ */

.full-player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #08031a;

  /* Slide-up entrance */
  transform: translateY(100%);
  transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1);
}

.full-player.fp-open {
  transform: translateY(0);
}

/* ── Blurred BG from artwork ── */
.fp-bg {
  position: absolute;
  inset: -60px;
  background-size: cover;
  background-position: center;
  filter: blur(80px) brightness(0.25) saturate(1.6);
  transform: scale(1.15);
  z-index: 0;
  transition: background-image 1s ease;
}

.fp-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(6,2,16,0.70) 0%,
    rgba(6,2,16,0.10) 30%,
    rgba(6,2,16,0.05) 55%,
    rgba(6,2,16,0.85) 72%,
    rgba(6,2,16,0.98) 100%
  );
}

/* ── Header — fixed at top with proper safe-area ── */
.fp-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 520px;
  align-self: center;
  /* Key fix: safe area + extra breathing room */
  padding: max(56px, calc(env(safe-area-inset-top, 44px) + 20px)) 20px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.fp-header-info {
  flex: 1;
  text-align: center;
}

.fp-header-label {
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.fp-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}

.fp-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(157,92,255,0.35);
  color: #fff;
  box-shadow: 0 0 16px rgba(157,92,255,0.25), 0 2px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: scale(1.05);
}

.fp-btn:active { transform: scale(0.95); }

/* Add-to-playlist button — distinct accent */
.fp-add-playlist {
  background: rgba(124,58,237,0.18);
  border-color: rgba(157,92,255,0.30);
  color: var(--rose-warm);
}

.fp-add-playlist:hover {
  background: rgba(124,58,237,0.30);
  border-color: rgba(157,92,255,0.55);
  box-shadow: 0 0 20px rgba(124,58,237,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ── Artwork area — takes ~70% of screen height ── */
.fp-artwork-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

/* The GIF/image fills the full artwork area */
.fp-artwork {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fp-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.6s ease;
}

/* Subtle vignette over artwork */
.fp-artwork-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(100,40,200,0.08) 0%, transparent 70%),
    linear-gradient(0deg, rgba(6,2,16,0.85) 0%, transparent 35%);
  pointer-events: none;
  z-index: 2;
}

/* Ripple rings — centered in artwork area */
.fp-artwork-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(157,92,255,0.18);
  opacity: 0;
  transition: opacity 0.4s;
}

.full-player.fp-playing .fp-artwork-ring {
  opacity: 1;
}

.fp-ring-1 { width: 180px; height: 180px; animation: fpRingPulse 3.5s ease-in-out infinite 0s; }
.fp-ring-2 { width: 280px; height: 280px; animation: fpRingPulse 3.5s ease-in-out infinite 0.8s; }
.fp-ring-3 { width: 380px; height: 380px; animation: fpRingPulse 3.5s ease-in-out infinite 1.6s; }

@keyframes fpRingPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(0.95); opacity: 0.15; }
  50%       { transform: translate(-50%,-50%) scale(1.05); opacity: 0.40; }
}

/* Playing indicator dot */
.fp-playing-dot {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 24px;
  opacity: 0;
  transition: opacity 0.4s;
}

.full-player.fp-playing .fp-playing-dot {
  opacity: 0.7;
}

.fp-playing-dot span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to top, var(--purple-warm), var(--rose-warm));
  animation: fpDotBar 1.2s ease-in-out infinite;
}
.fp-playing-dot span:nth-child(1) { height: 8px;  animation-delay: 0s;   }
.fp-playing-dot span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.fp-playing-dot span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.fp-playing-dot span:nth-child(4) { height: 20px; animation-delay: 0.05s;}
.fp-playing-dot span:nth-child(5) { height: 12px; animation-delay: 0.15s;}

@keyframes fpDotBar {
  0%,100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}


/* ── GLASS CONTROLS PANEL — sticks to bottom ── */
.fp-controls-panel {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 520px;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.fp-controls-glass {
  background: rgba(10,5,26,0.72);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border: 1px solid rgba(157,92,255,0.20);
  border-radius: 28px;
  padding: 20px 22px 22px;
  box-shadow:
    0 -8px 40px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.08) inset;
  position: relative;
  overflow: hidden;
}

/* Shimmer line at top of glass panel */
.fp-controls-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,92,255,0.55), rgba(192,132,252,0.35), transparent);
}

/* Track info inside panel */
.fp-track-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.fp-track-text {
  flex: 1;
  min-width: 0;
}

.fp-track-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-track-category {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Heart / favourite button */
.fp-fav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.fp-fav-btn:hover, .fp-fav-btn.is-fav {
  background: rgba(192,132,252,0.15);
  border-color: rgba(192,132,252,0.35);
  color: var(--rose-warm);
}

/* ── Progress ── */
.fp-progress-wrap {
  margin-bottom: 16px;
}

.fp-progress-bar {
  width: 100%;
  height: 3px;                /* thin visual track */
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  margin-bottom: 7px;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Invisible expanded hit area — keeps visual bar thin */
.fp-progress-bar::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}

.fp-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--purple-warm), var(--rose-warm));
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(192,132,252,0.4);
  pointer-events: none;
  will-change: width;
  position: absolute;
  top: 0; left: 0;
}

.fp-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(157,92,255,0.7), 0 1px 4px rgba(0,0,0,0.5);
  cursor: grab;
  will-change: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fp-progress-thumb:active {
  transform: translate(-50%, -50%) scale(1.35);
  cursor: grabbing;
  box-shadow: 0 0 14px rgba(157,92,255,0.90), 0 2px 6px rgba(0,0,0,0.5);
}

.fp-time-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ── Controls row ── */
.fp-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.fp-ctrl-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,0.50);
  cursor: pointer;
  border-radius: 14px;
  padding: 6px 8px;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  min-width: 42px;
}

.fp-ctrl-btn:hover { color: rgba(255,255,255,0.85); transform: scale(1.10); }
.fp-ctrl-btn:active { transform: scale(0.92); }

.fp-ctrl-btn.is-active {
  color: var(--rose-warm);
}
.fp-ctrl-btn.is-active svg {
  filter: drop-shadow(0 0 5px rgba(192,132,252,0.7));
}

/* Main play/pause button */
.fp-play-main {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--purple-warm) 0%, #5b21b6 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 0 28px rgba(124,58,237,0.55),
    0 6px 20px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  padding: 0 !important;
  padding-left: 3px !important;
  flex-shrink: 0;
  gap: 0 !important;
}

.fp-play-main:hover {
  box-shadow:
    0 0 44px rgba(124,58,237,0.75),
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transform: scale(1.07) !important;
}

/* Timer label */
.fp-timer-label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  color: var(--rose-warm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Waveform hidden — replaced by dot in artwork area */
.fp-waveform { display: none; }


/* ══════════════════════════════════════════
   LOGIN / REGISTER MODAL
   Fix: z-index above everything, proper stacking
══════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;   /* ← above full player (200) and everything else */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 0;
}

/* The card itself must be above the backdrop */
.modal-card {
  position: relative;
  z-index: 1;   /* stacks above .modal-backdrop within .modal-overlay */
  width: 100%;
  max-width: 480px;
  border-radius: 32px 32px 0 0 !important;
  padding: 32px 26px calc(env(safe-area-inset-bottom, 0px) + 36px);
  background: rgba(12,5,28,0.96) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(157,92,255,0.28) !important;
  border-bottom: none !important;
  box-shadow:
    0 -12px 60px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.04) inset !important;

  animation: modalSlideUp 0.40s cubic-bezier(0.32,0.72,0,1) both;
}

@keyframes modalSlideUp {
  from { transform: translateY(100%); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Drag handle */
.modal-card::before {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 4px;
  background: rgba(255,255,255,0.14);
  border-radius: 4px;
}

/* Shimmer line */
.modal-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,92,255,0.50), transparent);
  border-radius: 0 0 2px 2px;
}

.modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.22s ease;
  z-index: 2;
}

.modal-close:hover {
  background: rgba(255,255,255,0.13);
  color: var(--text-primary);
}

.modal-icon {
  width: 54px; height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(192,132,252,0.12));
  border: 1px solid rgba(157,92,255,0.32);
  display: flex; align-items: center; justify-content: center;
  color: var(--rose-warm);
  margin: 0 auto 16px;
  box-shadow: 0 0 24px rgba(124,58,237,0.22);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.2;
}

.modal-subtitle {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Tabs */
.modal-tabs {
  display: flex;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 3px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.07);
  gap: 2px;
}

.modal-tab {
  flex: 1;
  padding: 9px 8px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
}

.modal-tab.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.30), rgba(124,58,237,0.15));
  color: var(--text-primary);
  border: 1px solid rgba(157,92,255,0.28);
  box-shadow: 0 0 12px rgba(124,58,237,0.18);
}

/* Fields */
.modal-form-wrap { display: flex; flex-direction: column; }

.modal-field {
  position: relative;
  margin-bottom: 12px;
}

.modal-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.modal-input {
  width: 100%;
  padding: 13px 44px 13px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 300;
  outline: none;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.modal-input::placeholder { color: rgba(180,160,220,0.35); }

.modal-input:focus {
  border-color: rgba(157,92,255,0.55);
  background: rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 3px rgba(124,58,237,0.14),
    0 0 20px rgba(124,58,237,0.10);
}

.modal-pw-toggle {
  position: absolute;
  right: 14px;
  bottom: 50%;
  transform: translateY(50%);
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  transition: color 0.2s;
}
.modal-pw-toggle:hover { color: var(--text-secondary); }

.modal-btn-primary {
  width: 100%;
  padding: 15px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: linear-gradient(135deg, var(--purple-warm), var(--purple-mid));
  color: #fff;
  border: none;
  box-shadow: 0 0 24px rgba(124,58,237,0.50), 0 4px 16px rgba(0,0,0,0.4);
  transition: all 0.30s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(124,58,237,0.70), 0 6px 20px rgba(0,0,0,0.5);
}

.modal-forgot {
  text-align: center;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.80rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.modal-forgot a {
  color: var(--rose-warm);
  text-decoration: none;
}

.modal-forgot a:hover { color: var(--text-primary); }

/* ══════════════════════════════════════════
   SECONDARY CONTROLS ROW (loop, volume, timer)
══════════════════════════════════════════ */

.fp-controls-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 10px;
  gap: 8px;
}

/* Volume wrapper */
.fp-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 160px;
}

/* Volume slider — proper vertical alignment fix */
.fp-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 20px;           /* tall hit area */
  background: transparent;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

/* WebKit track */
.fp-volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
}

/* WebKit thumb — centered on track */
.fp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rose-warm);
  box-shadow: 0 0 6px rgba(192,132,252,0.6);
  cursor: grab;
  margin-top: -5.5px;    /* center thumb on 3px track: (14-3)/2 = 5.5 */
  position: relative;
}

/* Firefox track */
.fp-volume-slider::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
}

/* Firefox thumb */
.fp-volume-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: none;
  background: var(--rose-warm);
  box-shadow: 0 0 6px rgba(192,132,252,0.6);
  cursor: grab;
}

/* Firefox fill */
.fp-volume-slider::-moz-range-progress {
  background: var(--purple-warm);
  height: 3px;
  border-radius: 3px;
}

/* Seek buttons with label */
.fp-seek-back,
.fp-seek-fwd {
  flex-direction: column;
  gap: 1px;
}

.fp-seek-back span,
.fp-seek-fwd span {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0;
  color: inherit;
  line-height: 1;
}


/* ══════════════════════════════════════════
   SLEEP TIMER POPUP
══════════════════════════════════════════ */

#sleep-timer-popup {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.stp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: stpFadeIn 0.25s ease both;
}

@keyframes stpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.stp-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  border-radius: 28px 28px 0 0;
  border-bottom: none !important;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: rgba(8, 3, 22, 0.97) !important;
  border: 1px solid rgba(157,92,255,0.25) !important;
  box-shadow: 0 -12px 48px rgba(0,0,0,0.65), 0 0 60px rgba(124,58,237,0.12) !important;

  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.32,0.72,0,1);
}

.stp-sheet-open {
  transform: translateY(0) !important;
}

.stp-sheet-closing {
  transform: translateY(100%) !important;
  transition: transform 0.28s cubic-bezier(0.4,0,1,1) !important;
}

/* Drag handle */
.stp-handle {
  width: 40px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.14);
  margin: 0 auto 20px;
}

/* Header */
.stp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.stp-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124,58,237,0.30), rgba(124,58,237,0.12));
  border: 1px solid rgba(157,92,255,0.32);
  color: var(--rose-warm);
  box-shadow: 0 0 18px rgba(124,58,237,0.22);
}

.stp-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.stp-desc {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Active timer row */
.stp-active-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.22);
  margin-bottom: 16px;
}

.stp-active-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.80rem;
  color: #10b981;
  font-weight: 400;
}

.stp-active-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: stpDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes stpDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.7); }
}

.stp-active-label { color: #6ee7b7; font-size: 0.78rem; }
#stp-countdown    { color: #10b981; font-weight: 500; }

.stp-cancel-btn {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: #f87171;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.20s ease;
  flex-shrink: 0;
}

.stp-cancel-btn:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.45);
}

/* Options grid — 4 per row */
.stp-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stp-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.stp-option:hover {
  background: rgba(124,58,237,0.16);
  border-color: rgba(157,92,255,0.30);
  transform: translateY(-2px);
}

.stp-option:active {
  transform: scale(0.96);
}

.stp-option-active {
  background: linear-gradient(135deg, rgba(124,58,237,0.28), rgba(124,58,237,0.12)) !important;
  border-color: rgba(157,92,255,0.50) !important;
  box-shadow: 0 0 18px rgba(124,58,237,0.25) !important;
}

.stp-opt-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.40));
}

.stp-opt-label {
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.stp-option-active .stp-opt-label {
  color: var(--rose-warm);
}

.stp-opt-check {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.62rem;
  color: var(--rose-warm);
  font-weight: 700;
}


/* ══════════════════════════════════════════
   PLAYER SMOOTH TRANSITIONS
══════════════════════════════════════════ */

/* Artwork image — base transition for crossfade */
#fp-artwork-img {
  transition: opacity 0.22s ease;
  will-change: opacity;
}

/* Background blur layer */
#fp-bg {
  transition: opacity 0.35s ease;
  will-change: opacity;
}

/* Track name + category */
#fp-track-name,
#fp-track-category {
  will-change: opacity, transform;
}

/* Control buttons — base press feedback */
.fp-ctrl-btn {
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              background 0.22s ease,
              box-shadow 0.22s ease,
              color 0.18s ease;
  will-change: transform;
}

.fp-ctrl-btn:active {
  transform: scale(0.88) !important;
}

/* Play button — larger pulse radius */
.fp-play-main {
  transition: transform 0.20s cubic-bezier(0.34,1.56,0.64,1),
              background 0.22s ease,
              box-shadow 0.25s ease !important;
}

.fp-play-main:active {
  transform: scale(0.84) !important;
}

/* Loop button active state glow */
.fp-loop.is-active {
  color: var(--rose-warm);
  background: rgba(124,58,237,0.25);
  border-color: rgba(157,92,255,0.45);
  box-shadow: 0 0 14px rgba(124,58,237,0.40);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* Volume slider thumb animation */
.fp-volume-slider::-webkit-slider-thumb {
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.15s ease;
}

.fp-volume-slider:active::-webkit-slider-thumb {
  transform: scale(1.35);
  box-shadow: 0 0 14px rgba(192,132,252,0.75);
}

/* Mini player track text */
#mini-title,
#mini-category {
  will-change: opacity;
  transition: opacity 0.18s ease;
}

/* Mini player thumbnail */
.mini-thumb {
  transition: opacity 0.25s ease;
  will-change: opacity;
}

/* Full player open/close animation */
#full-player {
  transition: transform 0.42s cubic-bezier(0.32,0.72,0,1),
              opacity 0.42s ease;
}

#full-player.fp-open {
  transform: translateY(0) !important;
  opacity: 1 !important;
}