:root {
  --primary: #6366f1;
  --primary-glow: rgba(99, 102, 241, 0.4);
  --accent: #ec4899;
  --bg-dark: #07090e;
  --card-bg: rgba(18, 24, 38, 0.65);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  user-select: none;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* افکت نور محیطی — Safari-friendly */
.ambient-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: none;
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
}
.glow-1 {
  background: radial-gradient(
    circle,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 55%, transparent) 28%,
    transparent 70%
  );
  top: 10%;
  left: 15%;
  animation: floatOrb 8s infinite alternate ease-in-out;
}
.glow-2 {
  background: radial-gradient(
    circle,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 28%,
    transparent 70%
  );
  bottom: 10%;
  right: 15%;
  animation: floatOrb 10s infinite alternate-reverse ease-in-out;
}

@keyframes floatOrb {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(40px) scale(1.15); }
}

/* استایل مودال ورودی */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 13, 0.88);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
}

.modal-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-card {
  background: rgba(26, 34, 52, 0.7);
  border: 1px solid var(--card-border);
  padding: 42px 32px;
  border-radius: 36px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8),
              0 0 40px var(--primary-glow);
  transform: translateY(0);
  transition: transform 0.4s ease;
}

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #a5b4fc;
  margin-bottom: 24px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #6366f1;
  border-radius: 50%;
  animation: pulseLight 1.6s infinite;
}

@keyframes pulseLight {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #6366f1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.modal-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7d2fe;
}

.modal-title {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 8px;
  background: linear-gradient(to bottom right, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #ffffff;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(236, 72, 153, 0.4);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* پلیر اصلی */
.player-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 390px;
  padding: 16px;
}

.player-card {
  background: var(--card-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--card-border);
  border-radius: 38px;
  padding: 30px 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ef4444;
}

.live-red-dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulseDotRed 1.2s infinite;
}

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

.station-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* دیسک وینیل چرخشی حرفه‌ای */
.disc-container {
  position: relative;
  margin: 10px 0 22px;
}

.disc-shadow {
  position: absolute;
  inset: 10px;
  background: var(--primary-glow);
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.5;
  transition: opacity 0.5s;
}

.vinyl {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a3142 0%, #0d111a 60%, #06080d 100%);
  border: 3px solid rgba(255, 255, 255, 0.08);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vinyl-groove {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.groove-1 { width: 145px; height: 145px; }
.groove-2 { width: 115px; height: 115px; }

.vinyl-center {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px var(--primary-glow);
}

.center-hole {
  width: 16px;
  height: 16px;
  background: var(--bg-dark);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.vinyl.playing {
  animation: spinVinyl 8s linear infinite;
}

@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* اطلاعات آهنگ */
.track-details {
  text-align: center;
  margin-bottom: 18px;
  width: 100%;
}

.song-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.artist-name {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* اکولایزر */
.equalizer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  margin-bottom: 22px;
}

.eq-bar {
  width: 3.5px;
  height: 4px;
  background: var(--primary);
  border-radius: 4px;
  transition: height 0.15s ease;
}

.equalizer-container.active .eq-bar {
  animation: soundWave 1.2s infinite ease-in-out alternate;
}

.equalizer-container.active .eq-bar:nth-child(1) { animation-duration: 0.6s; }
.equalizer-container.active .eq-bar:nth-child(2) { animation-duration: 0.8s; }
.equalizer-container.active .eq-bar:nth-child(3) { animation-duration: 0.5s; }
.equalizer-container.active .eq-bar:nth-child(4) { animation-duration: 0.9s; }
.equalizer-container.active .eq-bar:nth-child(5) { animation-duration: 0.4s; }
.equalizer-container.active .eq-bar:nth-child(6) { animation-duration: 0.7s; }
.equalizer-container.active .eq-bar:nth-child(7) { animation-duration: 0.85s; }
.equalizer-container.active .eq-bar:nth-child(8) { animation-duration: 0.55s; }
.equalizer-container.active .eq-bar:nth-child(9) { animation-duration: 0.75s; }
.equalizer-container.active .eq-bar:nth-child(10) { animation-duration: 0.65s; }

@keyframes soundWave {
  0% { height: 4px; opacity: 0.4; }
  50% { height: 24px; opacity: 1; background: var(--accent); }
  100% { height: 8px; opacity: 0.8; background: var(--primary); }
}

/* کنترل دکمه پلی */
.player-controls {
  margin-bottom: 22px;
}

.play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  color: #090d16;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.35);
}

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

/* اسلایدر ولوم */
.volume-box {
  width: 100%;
  max-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vol-icon {
  color: var(--text-muted);
}

.slider-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.hidden {
  display: none !important;
}

/* Next track */
.next-track-box {
  width: 100%;
  max-width: 290px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: -4px 0 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 16px;
  overflow: hidden;
}
.next-track-label {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 800;
  color: #a5b4fc;
}
.next-track-title {
  min-width: 0;
  flex: 1;
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== V4: stable, non-moving, iPhone-safe responsive layout ===== */
html, body {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

@supports (height: 100svh) {
  body {
    min-height: 100svh;
    height: 100svh; /* stable viewport: does not jump when Safari chrome hides/shows */
  }
}

/* No moving background/player elements. */
.ambient-glow,
.glow-1,
.glow-2,
.pulse-dot,
.live-red-dot,
.vinyl.playing {
  animation: none !important;
}

.player-wrapper {
  position: fixed;
  inset: 0;
  z-index: 10;
  width: min(100%, 420px);
  height: max-content;
  max-height: 100%;
  margin: auto;
  padding: clamp(8px, 2.5vw, 16px);
}

.player-card {
  width: 100%;
  padding: clamp(18px, 3.5vh, 30px) clamp(16px, 5vw, 24px);
  border-radius: clamp(24px, 7vw, 38px);
  overflow: hidden;
}

.disc-container {
  margin: clamp(4px, 1.5vh, 10px) 0 clamp(14px, 2.8vh, 22px);
}

.vinyl {
  width: clamp(128px, 24vh, 180px);
  height: clamp(128px, 24vh, 180px);
  transform: none !important;
}

.vinyl-center {
  width: clamp(48px, 9vh, 64px);
  height: clamp(48px, 9vh, 64px);
}

.track-details {
  min-height: 52px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-title {
  width: 100%;
  line-height: 1.55;
}

.next-track-box {
  height: 43px;
  min-height: 43px;
  margin: 0 0 14px;
}

/* V9: animated equalizer inside a fixed-height box (no layout jumping). */
.equalizer-container {
  height: 24px;
  min-height: 24px;
  margin-bottom: 16px;
  overflow: hidden;
}
.equalizer-container .eq-bar {
  height: 4px;
  opacity: .75;
  transform-origin: center bottom;
}
.equalizer-container.active .eq-bar {
  animation-name: soundWave !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-timing-function: ease-in-out !important;
}

.player-controls {
  margin-bottom: 0;
}

.play-btn,
.play-btn:hover,
.play-btn:active {
  transform: none !important;
}

/* Old volume CSS stays harmless, but no volume HTML exists. */
.volume-box { display: none !important; }

@media (max-height: 700px) {
  .player-header { margin-bottom: 12px; }
  .vinyl { width: 124px; height: 124px; }
  .disc-container { margin: 2px 0 12px; }
  .track-details { min-height: 44px; margin-bottom: 8px; }
  .next-track-box { margin-bottom: 10px; }
  .equalizer-container { margin-bottom: 10px; height: 18px; }
  .play-btn { width: 56px; height: 56px; }
}

@media (max-width: 360px) {
  .player-wrapper { padding: 8px; }
  .player-card { padding-left: 16px; padding-right: 16px; }
  .song-title { font-size: 1rem; }
  .station-tag { font-size: .66rem; }
}


/* V9.1 — two-line current title + richer next-track card */
#songTitle,
.song-title {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  line-height: 1.45 !important;
  min-height: 2.9em;
  max-height: 2.9em;
  overflow-wrap: anywhere;
}

.next-track-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 24px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
}

.next-track-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.next-track-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.next-track-label {
  font-size: 11px !important;
  opacity: .62 !important;
  letter-spacing: .1px;
}

.next-track-title {
  display: block !important;
  min-width: 0;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.next-track-arrow {
  flex: 0 0 auto;
  opacity: .45;
  font-size: 18px;
  transform: translateY(-1px);
}

@media (max-width: 430px) {
  #songTitle,
  .song-title {
    font-size: 18px !important;
  }

  .next-track-box {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  .next-track-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .next-track-title {
    font-size: 12.5px !important;
  }
}


/* V9.3 — live listeners */
.live-status-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.listener-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 11px;
  white-space: nowrap;
  color: rgba(255,255,255,.82);
}

.listener-icon {
  font-size: 9px;
  opacity: .65;
}

#listenerCount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.listener-text {
  opacity: .58;
}

@media (max-width: 390px) {
  .listener-pill {
    padding: 0 7px;
    gap: 4px;
  }
  .listener-text {
    display: none;
  }
}


/* ===== V9.5.7 — next-track ticker ===== */
.next-track-box {
  direction: rtl;
}

.next-track-content {
  overflow: hidden;
}

.next-track-marquee {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 22px;
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.next-track-marquee .next-track-title {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 22px;
  will-change: transform;
}

.next-track-marquee.is-scrolling .next-track-title {
  animation: nextTrackTicker var(--ticker-duration, 12s) linear infinite;
}

@keyframes nextTrackTicker {
  0%   { transform: translateX(100%); }
  8%   { transform: translateX(100%); }
  92%  { transform: translateX(calc(-100% - var(--ticker-gap, 0px))); }
  100% { transform: translateX(calc(-100% - var(--ticker-gap, 0px))); }
}

.next-track-marquee:not(.is-scrolling) .next-track-title {
  position: static;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right;
}

/* Arrow removed in V9.5.7. Keep this rule for cached/older HTML safety. */
.next-track-arrow {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .next-track-marquee.is-scrolling .next-track-title {
    animation-duration: calc(var(--ticker-duration, 12s) * 1.35);
  }
}


/* ===== V9.5.8 — ticker stability + mobile responsive fixes ===== */
.next-track-box {
  max-width: 100% !important;
  width: 100% !important;
}

.next-track-content {
  min-width: 0 !important;
  overflow: hidden !important;
}

.next-track-marquee {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* The title itself is never ellipsized while the ticker is active. */
.next-track-marquee.is-scrolling .next-track-title {
  text-overflow: clip !important;
}

/* Make the full pass clearly readable: enter from one side, leave completely,
   then restart after a brief pause. */
@keyframes nextTrackTicker {
  0%, 5% {
    transform: translateX(calc(100% + var(--ticker-gap, 20px)));
  }
  95%, 100% {
    transform: translateX(calc(-100% - var(--ticker-gap, 20px)));
  }
}

/* Absolutely remove the legacy arrow even if an old cached HTML fragment survives. */
.next-track-arrow,
.next-track-box .next-track-arrow {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Narrow phones: give the ticker more horizontal room. */
@media (max-width: 390px) {
  .player-wrapper {
    padding: 8px !important;
  }

  .player-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .next-track-box {
    gap: 8px !important;
    padding: 8px 9px !important;
  }

  .next-track-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .next-track-title {
    font-size: 12px !important;
  }
}

/* Short mobile viewports (browser chrome visible): compact vertically instead of clipping. */
@media (max-height: 760px) {
  .player-card {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .player-header {
    margin-bottom: 10px !important;
  }

  .disc-container {
    margin: 0 0 10px !important;
  }

  .vinyl {
    width: 118px !important;
    height: 118px !important;
  }

  .vinyl-center {
    width: 44px !important;
    height: 44px !important;
  }

  .track-details {
    min-height: 42px !important;
    margin-bottom: 7px !important;
  }

  #songTitle,
  .song-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    min-height: 2.7em !important;
    max-height: 2.7em !important;
  }

  .next-track-box {
    min-height: 52px !important;
    margin-bottom: 8px !important;
  }

  .equalizer-container {
    height: 18px !important;
    min-height: 18px !important;
    margin-bottom: 8px !important;
  }

  .play-btn {
    width: 54px !important;
    height: 54px !important;
  }
}

/* ===== V9.6.0 — viewport-centered fixed player (4-side centering) =====
   Keep the original card proportions; only fix positioning/responsiveness. */
html {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0 !important;
  overflow: hidden !important;
}

.player-wrapper {
  position: fixed !important;
  z-index: 10;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
  inset-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
  max-width: 390px !important;
  height: max-content !important;
  max-height: calc(100dvh - 24px) !important;
  margin: auto !important;
  padding: 0 !important;
  transform: none !important;
  direction: rtl;
}

.player-card {
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 auto !important;
}

/* Never let long text create horizontal page overflow. */
.player-card,
.track-details,
.next-track-box,
.next-track-content,
.next-track-marquee {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* V9.5.8 compact rules were for the wrong issue. Restore the normal card sizing. */
@media (max-width: 390px) {
  .player-wrapper { padding: 0 !important; }
  .player-card {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* ===== V9.6.1 — animated vinyl while radio is playing =====
   Animation is always attached and only its play-state changes, so Stop freezes
   the record at its current angle and Play continues from the same position. */
.vinyl {
  animation: nrVinylSpin 9s linear infinite !important;
  animation-play-state: paused !important;
  will-change: transform;
}

body.is-playing .vinyl {
  animation-play-state: running !important;
}

@keyframes nrVinylSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.disc-shadow {
  animation: nrDiscGlow 2.8s ease-in-out infinite !important;
  animation-play-state: paused !important;
  will-change: opacity, transform, filter;
}

body.is-playing .disc-shadow {
  animation-play-state: running !important;
}

@keyframes nrDiscGlow {
  0%, 100% { opacity: .42; transform: scale(.96); filter: blur(24px); }
  50%      { opacity: .72; transform: scale(1.08); filter: blur(30px); }
}

.vinyl-center {
  animation: nrCenterPulse 1.9s ease-in-out infinite !important;
  animation-play-state: paused !important;
  will-change: box-shadow;
}

body.is-playing .vinyl-center {
  animation-play-state: running !important;
}

@keyframes nrCenterPulse {
  0%, 100% { box-shadow: 0 0 14px var(--primary-glow); }
  50%      { box-shadow: 0 0 25px var(--primary-glow), 0 0 42px rgba(255, 79, 154, .18); }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl,
  .disc-shadow,
  .vinyl-center {
    animation: none !important;
  }
}
/* V11 engagement + cover */
.vinyl-center{overflow:hidden;position:absolute;z-index:4}.track-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1}.center-hole{position:relative;z-index:2}.engagement-row{display:flex;gap:10px;justify-content:center;margin:2px 0 12px}.mini-action{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#eee;border-radius:999px;padding:7px 12px;display:flex;align-items:center;gap:6px;cursor:pointer}.mini-action span{font-size:20px;line-height:1}.mini-action.liked{color:#ff4e91;border-color:rgba(255,78,145,.45);background:rgba(255,78,145,.1)}.message-overlay{position:fixed;inset:0;z-index:100;background:#000a;display:grid;place-items:center;padding:18px}.message-overlay[hidden]{display:none}.message-card{width:min(420px,100%);background:#171720;border:1px solid #333344;border-radius:22px;padding:22px;position:relative}.message-card textarea{width:100%;min-height:120px;resize:vertical;border-radius:14px;border:1px solid #363646;background:#0f0f16;color:#fff;padding:12px;font:inherit}.message-send{width:100%;margin-top:10px;padding:11px;border:0;border-radius:12px;background:#ff4e91;color:white;font-weight:800}.message-close{position:absolute;left:12px;top:10px;border:0;background:transparent;color:#aaa;font-size:28px}.message-card small{display:block;margin-top:8px;color:#aaa}

/* ===== V11.1 — polished actions + light/dark theme ===== */
.header-actions{display:flex;align-items:center;gap:9px}.theme-toggle{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#f6f6fb;display:grid;place-items:center;cursor:pointer;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}.theme-toggle:hover{transform:translateY(-2px);background:rgba(255,255,255,.10);border-color:rgba(255,78,145,.35);box-shadow:0 8px 24px rgba(0,0,0,.2)}.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.theme-toggle .theme-sun{display:none}body.light-theme .theme-toggle .theme-sun{display:block}body.light-theme .theme-toggle .theme-moon{display:none}
.engagement-row{gap:9px;margin:4px 0 13px}.mini-action{min-height:38px;padding:7px 12px 7px 13px;border-radius:13px;gap:7px;font-family:inherit;font-weight:700;letter-spacing:0;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease}.mini-action:hover{transform:translateY(-2px);border-color:rgba(255,78,145,.32);background:rgba(255,255,255,.085);box-shadow:0 8px 22px rgba(0,0,0,.18)}.mini-action:active{transform:translateY(0) scale(.97)}.mini-action .action-icon{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.065);transition:transform .2s ease,background .2s ease}.mini-action:hover .action-icon{transform:scale(1.07)}.mini-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mini-action .action-label{font-size:12px}.mini-action b{font-size:11px;min-width:18px;text-align:center}.mini-action.liked{color:#ff4e91;border-color:rgba(255,78,145,.4);background:rgba(255,78,145,.11)}.mini-action.liked .action-icon{background:rgba(255,78,145,.16)}.mini-action.liked svg{fill:currentColor}.message-action{color:#e9e9f2}
body.light-theme{--bg-dark:#f4f5f9;color:#20202a;background:#f4f5f9}body.light-theme .ambient-glow{opacity:.26}body.light-theme .player-card,body.light-theme .modal-card,body.light-theme .message-card{background:rgba(255,255,255,.88);border-color:rgba(30,30,45,.09);box-shadow:0 24px 70px rgba(50,50,70,.14)}body.light-theme .song-title,body.light-theme .modal-title,body.light-theme .message-card h3{color:#20202a}body.light-theme .artist-name,body.light-theme .next-track-label,body.light-theme .next-track-title,body.light-theme .modal-desc,body.light-theme .message-card small{color:#696978}body.light-theme .next-track-box,body.light-theme .listener-pill,body.light-theme .mini-action,body.light-theme .theme-toggle{background:rgba(35,35,50,.045);border-color:rgba(35,35,50,.09);color:#343441}body.light-theme .mini-action:hover,body.light-theme .theme-toggle:hover{background:rgba(35,35,50,.075)}body.light-theme .mini-action .action-icon{background:rgba(35,35,50,.06)}body.light-theme .message-card textarea{background:#f5f5f8;color:#20202a;border-color:#dedee7}body.light-theme .message-close{color:#6c6c78}
@media(max-width:390px){.mini-action{padding:7px 10px}.mini-action .action-label{font-size:11px}.theme-toggle{width:32px;height:32px}}

/* ===== V11.2 — balanced light theme + clean engagement icons ===== */
/* Engagement controls: one clean icon, no nested tile/circle distortion. */
.engagement-row{gap:12px!important;align-items:center}
.mini-action{height:42px!important;min-height:42px!important;padding:0 15px!important;border-radius:15px!important;gap:9px!important;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.mini-action .action-icon{width:22px!important;height:22px!important;border-radius:0!important;background:transparent!important;display:grid!important;place-items:center!important;flex:0 0 22px!important}
.mini-action svg{width:22px!important;height:22px!important;display:block!important;overflow:visible;stroke-width:1.7!important}
.mini-action:hover .action-icon{transform:scale(1.08)!important;background:transparent!important}
.mini-action .action-label{font-size:12px!important;line-height:1!important}
.mini-action b{font-size:12px!important;line-height:1!important;min-width:14px!important}
.mini-action.liked .action-icon{background:transparent!important}

/* Light mode should remain soft, not pure white. */
body.light-theme{
  --bg-dark:#e8e9f1!important;
  color:#262735!important;
  background:
    radial-gradient(circle at 10% 25%,rgba(120,116,255,.10),transparent 31%),
    radial-gradient(circle at 90% 78%,rgba(255,78,145,.09),transparent 32%),
    #e8e9f1!important;
}
body.light-theme .ambient-glow{opacity:.16!important}
body.light-theme .player-card,
body.light-theme .modal-card,
body.light-theme .message-card{
  background:rgba(242,243,248,.94)!important;
  border-color:rgba(48,50,70,.10)!important;
  box-shadow:0 24px 65px rgba(55,58,82,.16)!important;
}
body.light-theme .next-track-box,
body.light-theme .listener-pill,
body.light-theme .mini-action,
body.light-theme .theme-toggle{
  background:rgba(220,222,231,.72)!important;
  border-color:rgba(55,57,75,.11)!important;
  color:#30313e!important;
}
body.light-theme .mini-action:hover,
body.light-theme .theme-toggle:hover{background:rgba(210,212,224,.9)!important}
body.light-theme .play-btn{
  background:#2b2d3a!important;
  color:#fff!important;
  box-shadow:0 12px 30px rgba(37,39,55,.22)!important;
}
body.light-theme .message-card textarea{background:#e5e6ed!important;border-color:#d1d3de!important}


/* ===== V11.3 — full-disc artwork ===== */
.vinyl { overflow: hidden; isolation: isolate; }
.vinyl > .track-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.vinyl-groove { z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.12), transparent 22%), radial-gradient(circle, transparent 0 13%, rgba(7,9,14,.08) 14% 57%, rgba(7,9,14,.20) 100%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.42);
}
.vinyl-center {
  position: relative;
  z-index: 3;
  width: 22px !important;
  height: 22px !important;
  background: rgba(245,246,250,.94) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.35) !important;
}
.vinyl-center .center-hole {
  width: 7px !important;
  height: 7px !important;
  border: 0 !important;
  background: #171923 !important;
}


/* ===== V11.4.1 — cover disc polish; start modal intentionally untouched ===== */
.vinyl {
  overflow: hidden;
  isolation: isolate;
  border-width: 2px !important;
}
.vinyl.has-cover {
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.35) !important;
}
body.is-playing .vinyl.has-cover,
.vinyl.has-cover.playing {
  border-width: 1px !important;
  box-shadow: inset 0 0 7px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.22) !important;
}
.vinyl > .track-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  pointer-events: none;
}
.vinyl.has-cover .vinyl-center {
  position: relative !important;
  z-index: 4 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  background: rgba(18,20,28,.92) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) !important;
}
.vinyl.has-cover .center-hole {
  width: 6px !important;
  height: 6px !important;
  background: #090b10 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
/* No artwork: retain the familiar vinyl/label appearance. */
.vinyl:not(.has-cover) .vinyl-center {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  box-shadow: 0 0 15px var(--primary-glow) !important;
}
.vinyl:not(.has-cover) .center-hole {
  width: 12px !important;
  height: 12px !important;
  background: var(--bg-dark) !important;
  border: 2px solid rgba(255,255,255,.30) !important;
}

/* ===== V11.4.2 — reliable vinyl rotation =====
   Keep the animation attached at all times. Pause freezes the current angle;
   playback resumes from the same angle. This intentionally overrides older
   no-motion/player rules for the record only. */
.vinyl {
  animation: nrVinylSpin 9s linear infinite !important;
  animation-play-state: paused !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}
body.is-playing .vinyl,
.vinyl.playing {
  animation: nrVinylSpin 9s linear infinite !important;
  animation-play-state: running !important;
}
@media (prefers-reduced-motion: reduce) {
  .vinyl {
    animation: nrVinylSpin 9s linear infinite !important;
    animation-play-state: paused !important;
  }
  body.is-playing .vinyl,
  .vinyl.playing {
    animation-play-state: running !important;
  }
}


/* ===== V11.4.3 — Safari/iOS rotation owner =====
   JS owns the record transform; disable competing CSS transform animations. */
.vinyl,
body.is-playing .vinyl,
.vinyl.playing {
  animation: none !important;
}


/* ===== V11.4.4 — monotonic vinyl rotation =====
   No transform transition: Safari must render each JS angle directly.
   This prevents the apparent backward jump near angle wrap/interpolation. */
.vinyl,
body.is-playing .vinyl,
.vinyl.playing {
  animation: none !important;
  transition-property: border-color, box-shadow !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}

/* ===== V11.4.7 — single-node full-width next-track ticker =====
   JS owns horizontal motion. Every title, short or long, traverses the full
   viewport and restarts immediately after it fully exits. */
.next-track-marquee {
  position: relative !important;
  width: 100% !important;
  height: 22px !important;
  overflow: hidden !important;
  direction: ltr !important;
}
.next-track-ticker-track,
.next-track-ticker-track.is-scrolling {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 22px !important;
  display: block !important;
  transform: none !important;
  animation: none !important;
}
.next-track-marquee .next-track-title,
.next-track-marquee.is-scrolling .next-track-title,
.next-track-ticker-track .next-track-title {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 22px !important;
  animation: none !important;
  transition: none !important;
  will-change: transform;
}
.next-track-title-clone { display: none !important; }

/* V11.4.7 — guarantee exactly one visible ticker node. */
.next-track-ticker-track > .next-track-title:not(#nextSongTitle) { display:none !important; }
#nextSongTitle { visibility:visible !important; }


/* V11.4.8 — subtle connection state + one-time PWA install hint */
.live-pill.is-connecting {
  color:#f59e0b; border-color:rgba(245,158,11,.42); background:rgba(245,158,11,.12);
}
.live-pill.is-connecting .live-red-dot { background:#f59e0b; animation:pulseDotRed .7s infinite; }
.live-pill.is-offline { color:#94a3b8; border-color:rgba(148,163,184,.32); background:rgba(148,163,184,.10); }
.live-pill.is-offline .live-red-dot { background:#94a3b8; animation:none; }
.pwa-install-hint{position:fixed;z-index:80;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,430px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(17,20,32,.94);box-shadow:0 18px 55px rgba(0,0,0,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);direction:rtl}
.pwa-install-hint[hidden]{display:none!important}.pwa-install-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.pwa-install-copy strong{font-size:.86rem;color:#f8fafc}.pwa-install-copy span{font-size:.72rem;line-height:1.7;color:#aeb8ca}.pwa-install-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.pwa-install-actions button{border:0;cursor:pointer}.pwa-install-actions #pwaInstallBtn{padding:8px 12px;border-radius:11px;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-weight:800}.pwa-install-actions #pwaInstallClose{width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.08);color:#cbd5e1;font-size:1.25rem;line-height:1}.light-theme .pwa-install-hint{background:rgba(242,243,248,.96);border-color:rgba(30,41,59,.12)}.light-theme .pwa-install-copy strong{color:#202638}.light-theme .pwa-install-copy span{color:#667085}.light-theme .pwa-install-actions #pwaInstallClose{background:rgba(30,41,59,.08);color:#475467}


/* ===== V13 — current track artwork final override ===== */

/*
 * With artwork:
 * fill the whole rotating vinyl disc with the current track cover.
 */
.vinyl.has-cover {
    overflow: hidden !important;
    isolation: isolate;
    background: #090b10 !important;
}

.vinyl.has-cover > .track-cover {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Keep the subtle record surface above the artwork. */
.vinyl.has-cover::after {
    z-index: 1 !important;
}

.vinyl.has-cover .vinyl-groove {
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Small spindle in the center; do not hide the artwork. */
.vinyl.has-cover .vinyl-center {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 50% !important;
    background: rgba(12,14,20,.92) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.22),
        0 2px 8px rgba(0,0,0,.45) !important;
}

.vinyl.has-cover .center-hole {
    position: relative !important;
    z-index: 4 !important;
    width: 5px !important;
    height: 5px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    background: #050609 !important;
}

/*
 * Without artwork:
 * the existing vinyl design is left untouched.
 */

/* ===== Multi-channel selector ===== */
.channel-selector-wrap {
  width: 100%;
  max-width: 290px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 14px;
}

.channel-selector-label {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 800;
  color: var(--text-muted);
}

.channel-selector {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  outline: none;
}

.channel-selector:focus {
  border-color: rgba(255,255,255,.28);
}

.light-theme .channel-selector {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}

@media (max-height: 700px) {
  .channel-selector-wrap {
    margin-bottom: 8px;
  }

  .channel-selector {
    height: 34px;
  }
}

/* ===== Channel Wheel UI V1 ===== */
.channel-wheel-wrap {
  width: 100%;
  max-width: 290px;
  margin: -6px 0 14px;
  text-align: center;
}

.channel-wheel-label {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  opacity: .72;
}

.channel-wheel {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 34px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 64px;
  padding: 4px 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 24px rgba(0,0,0,.08);
}

.channel-wheel-arrow {
  width: 32px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: var(--text-muted);
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.channel-wheel-arrow:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}

.channel-wheel-arrow:disabled {
  opacity: .25;
  cursor: default;
}

.channel-wheel-window {
  position: relative;
  min-width: 0;
  height: 54px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 15px 24px 15px;
  align-items: center;
}

.channel-wheel-side {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 15px;
  color: var(--text-muted);
  opacity: .38;
}

.channel-wheel-current {
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.channel-wheel-current strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 850;
  color: #fff;
}

.channel-wheel-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 9px var(--primary);
}

.channel-selector-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.light-theme .channel-wheel {
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.025);
}

.light-theme .channel-wheel-current strong {
  color: #111827;
}

.light-theme .channel-wheel-arrow {
  background: rgba(0,0,0,.035);
}

@media (max-height: 700px) {
  .channel-wheel-wrap {
    margin-bottom: 8px;
  }

  .channel-wheel {
    min-height: 56px;
  }
}

/* ===== Channel Drag Rail V2 ===== */

.channel-wheel-wrap {
  display: none !important;
}

.channel-rail-wrap {
  width: 100%;
  max-width: 340px;
  margin: -5px 0 14px;
}

.channel-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 7px 6px;
}

.channel-rail-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 850;
  color: var(--text-muted);
}

.channel-rail-hint {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
  color: var(--text-muted);
  opacity: .52;
}

.channel-rail-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 17px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.022)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 7px 22px rgba(0,0,0,.07);
}

.channel-rail {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 22px;
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
  -ms-overflow-style: none;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;

  /*
   * Custom tuner owns horizontal dragging.
   * Safari keeps native vertical page scrolling only.
   */
  /*
   * The tuner owns its gesture completely.
   * Prevent iOS Safari from cancelling horizontal pointer drag.
   */
  touch-action: none;
  overscroll-behavior-x: contain;

  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.channel-rail::-webkit-scrollbar {
  display: none;
}

.channel-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.channel-rail-item {
  flex: 0 0 auto;
  max-width: 145px;
  height: 38px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  border: 1px solid transparent;
  border-radius: 12px;

  background: transparent;
  color: var(--text-muted);

  font: inherit;
  font-size: 12px;
  font-weight: 750;

  cursor: pointer;
  white-space: nowrap;

  scroll-snap-align: center;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.channel-rail-item:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
}

.channel-rail-item.is-active {
  color: #fff;
  background: rgba(255,255,255,.095);
  border-color: rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.08);
}

.channel-rail-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
}

.channel-rail-item.is-active .channel-rail-dot {
  background: var(--primary);
  opacity: 1;
  box-shadow: 0 0 8px var(--primary);
}

.channel-rail-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-rail-fade {
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 3;
  width: 23px;
  pointer-events: none;
}

.channel-rail-fade-start {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(13,15,20,.90),
    rgba(13,15,20,0)
  );
}

.channel-rail-fade-end {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(13,15,20,.90),
    rgba(13,15,20,0)
  );
}

.light-theme .channel-rail-shell {
  border-color: rgba(0,0,0,.075);
  background: rgba(0,0,0,.025);
}

.light-theme .channel-rail-item.is-active {
  color: #111827;
  background: rgba(0,0,0,.065);
  border-color: rgba(0,0,0,.08);
}

.light-theme .channel-rail-item:hover {
  color: #111827;
  background: rgba(0,0,0,.045);
}

.light-theme .channel-rail-fade-start {
  background: linear-gradient(
    to left,
    rgba(245,245,247,.94),
    rgba(245,245,247,0)
  );
}

.light-theme .channel-rail-fade-end {
  background: linear-gradient(
    to right,
    rgba(245,245,247,.94),
    rgba(245,245,247,0)
  );
}

@media (max-width: 480px) {
  .channel-rail-wrap {
    max-width: 100%;
  }

  .channel-rail {
    padding-left: 18px;
    padding-right: 18px;
  }

  .channel-rail-item {
    height: 36px;
    padding: 0 12px;
  }
}

@media (max-height: 700px) {
  .channel-rail-wrap {
    margin-bottom: 8px;
  }

  .channel-rail-head {
    margin-bottom: 4px;
  }
}

/* ===== Channel Rail V2.1 Compact ===== */

.channel-rail-wrap {
  margin-top: -8px !important;
  margin-bottom: 10px !important;
}

.channel-rail-head {
  display: none !important;
}

.channel-rail-drag-hint {
  height: 12px;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-muted);
  opacity: .55;

  font-size: 22px;
  line-height: 10px;
  font-weight: 300;

  user-select: none;
  pointer-events: none;

  transform: scaleX(1.65);
  transform-origin: center;
}

.channel-rail-shell {
  border-radius: 14px !important;
}

.channel-rail {
  gap: 5px !important;
  padding: 4px 18px !important;
  min-height: 0 !important;
}

.channel-rail-item {
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

.channel-rail-dot {
  width: 4px !important;
  height: 4px !important;
}

.channel-rail-fade {
  width: 18px !important;
}

@media (max-width: 480px) {
  .channel-rail {
    padding: 4px 15px !important;
  }

  .channel-rail-item {
    height: 30px !important;
    padding: 0 10px !important;
  }
}

/* ===== Channel Rail V2.2 Arrow/Spacing Polish ===== */

.channel-rail-wrap {
  margin-top: -8px !important;
  margin-bottom: 8px !important;
}

/* Small centered drag hint — same visual size as previous hint */
.channel-rail-drag-hint {
  height: 8px !important;
  margin: 0 0 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 10px !important;
  line-height: 8px !important;
  font-weight: 400 !important;

  opacity: .52 !important;

  transform: none !important;
  pointer-events: none !important;
}


/* ===== Channel Rail V2.3 ===== */

/* Less space between channel rail and Live/listener area */
.channel-rail-wrap {
  margin-bottom: 2px !important;
}

/* Keep the hint compact */
.channel-rail-drag-hint {
  height: 8px !important;
  margin: 0 !important;

  font-size: 0 !important;
  line-height: 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: .52 !important;
  transform: none !important;
}

/* longer center line with small arrows */
.channel-rail-drag-hint::before {
  content: "←────────→";
  display: block;

  font-size: 9px;
  line-height: 8px;
  font-weight: 400;
  letter-spacing: -1px;

  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== Channel Rail V2.3.1 Arrow Direction Fix ===== */

.channel-rail-drag-hint::before {
  content: "←────────→" !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ===== Channel Rail V2.3.2 Top Gap ===== */
.channel-rail-wrap {
  margin-top: -12px !important;
}

/* ===== Channel Rail V2.3.3 Top Gap ===== */
.channel-rail-wrap {
  margin-top: -14px !important;
}

/* ===== Channel Rail V2.3.4 Arrow Polish ===== */

.channel-rail-drag-hint {
  margin-bottom: 2px !important;
}

.channel-rail-drag-hint::before {
  content: "←──────→" !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}


/* ===== Channel Tuner V1 ===== */

/*
 * Visual-only tuner skin.
 * Existing channel switching / drag / audio logic stays untouched.
 */

.channel-rail-wrap{
  margin-top:-14px !important;
  margin-bottom:2px !important;
}

/* Remove the old arrow — the scale itself communicates dragging */
.channel-rail-drag-hint{
  display:none !important;
}

.channel-tuner-shell{
  position:relative;
  height:48px;

  border-radius:13px !important;
  overflow:hidden;

  border-color:rgba(255,255,255,.09) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045) 0%,
      rgba(255,255,255,.018) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -8px 20px rgba(0,0,0,.08),
    0 5px 18px rgba(0,0,0,.06) !important;
}

/*
 * Existing scroll rail remains the actual interactive layer.
 */
.channel-tuner-shell .channel-rail{
  position:relative;
  z-index:2;

  height:34px;
  padding:2px 18px 4px !important;

  gap:10px !important;

  align-items:center;
}

/* Slightly flatter station labels */
.channel-tuner-shell .channel-rail-item{
  height:28px !important;
  padding:0 10px !important;

  border-radius:9px !important;

  font-size:10.5px !important;
  font-weight:780 !important;

  background:transparent;
}

/* Active station: subtle, not a giant button */
.channel-tuner-shell .channel-rail-item.is-active{
  color:#fff;

  background:
    linear-gradient(
      180deg,
      rgba(207,68,255,.18),
      rgba(255,47,139,.10)
    );

  border-color:rgba(255,87,190,.23);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 12px rgba(207,68,255,.08);
}

.channel-tuner-shell .channel-rail-dot{
  width:4px !important;
  height:4px !important;
}

/*
 * Vintage radio frequency ticks.
 * Purely decorative and does not intercept touch.
 */
.channel-tuner-scale{
  position:absolute;
  z-index:1;

  left:10px;
  right:10px;
  bottom:5px;

  height:10px;

  pointer-events:none;

  opacity:.72;

  background:
    repeating-linear-gradient(
      to right,
      rgba(209,164,94,.78) 0,
      rgba(209,164,94,.78) 1px,
      transparent 1px,
      transparent 8px
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 38%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 38%,
      #000 100%
    );
}

/* Stronger major ticks */
.channel-tuner-scale::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 39px,
      rgba(229,184,111,.92) 39px,
      rgba(229,184,111,.92) 41px,
      transparent 41px,
      transparent 80px
    );
}

/*
 * Fixed tuning needle.
 * The stations/scale move underneath it, like an old radio dial.
 */
.channel-tuner-needle{
  position:absolute;
  z-index:5;

  left:50%;
  bottom:3px;

  width:2px;
  height:14px;

  transform:translateX(-50%);

  border-radius:999px;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,78,188,.35),
      #ff3fa9
    );

  box-shadow:
    0 0 6px rgba(255,63,169,.72),
    0 0 12px rgba(204,68,255,.30);
}

.channel-tuner-needle::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-2px;

  width:5px;
  height:5px;

  transform:translateX(-50%);

  border-radius:50%;

  background:#ff3fa9;

  box-shadow:
    0 0 7px rgba(255,63,169,.85);
}

/* Keep fades above labels/scale but below the needle */
.channel-tuner-shell .channel-rail-fade{
  z-index:4;
  width:15px !important;
}

/* Dragging should feel more mechanical/direct */
.channel-tuner-shell .channel-rail.is-dragging{
  cursor:grabbing;
}

/* Light theme */
.light-theme .channel-tuner-shell{
  border-color:rgba(0,0,0,.075) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(0,0,0,.018)
    ) !important;
}

.light-theme .channel-tuner-scale{
  opacity:.60;
}

.light-theme .channel-tuner-shell .channel-rail-item.is-active{
  color:#111827;
}

/* Mobile: intentionally low-profile */
@media (max-width:480px){

  .channel-tuner-shell{
    height:46px;
  }

  .channel-tuner-shell .channel-rail{
    height:33px;
    padding:2px 15px 4px !important;
    gap:8px !important;
  }

  .channel-tuner-shell .channel-rail-item{
    height:27px !important;
    padding:0 9px !important;
    font-size:10px !important;
  }

  .channel-tuner-scale{
    left:8px;
    right:8px;
  }
}



/* ===== Channel Tuner V2 — Real Dial ===== */

/*
 * Fixed center needle + moving dial.
 * Channel names and frequency marks move as one surface.
 */

.channel-tuner-shell .channel-rail{
  position:relative;

  /*
   * Half-width breathing room allows the first and last
   * stations to reach the fixed center needle.
   */
  padding-left:48% !important;
  padding-right:48% !important;

  scroll-snap-type:none !important;
}

/*
 * The scale is now an absolute layer inside channelRail,
 * therefore it travels with the station labels.
 */
.channel-tuner-shell .channel-tuner-scale{
  position:absolute;

  left:0;
  right:0;
  bottom:4px;

  width:auto;
  height:9px;

  z-index:0;
  pointer-events:none;

  opacity:.68;
}

/*
 * Labels sit above moving frequency marks.
 */
.channel-tuner-shell .channel-rail-item{
  position:relative;
  z-index:2;
}

/*
 * Give the label row a little more room above the scale,
 * while keeping the tuner compact.
 */
.channel-tuner-shell{
  height:48px;
}

.channel-tuner-shell .channel-rail{
  height:46px;
  padding-top:1px !important;
  padding-bottom:11px !important;
}

/*
 * Fixed center needle.
 */
.channel-tuner-shell .channel-tuner-needle{
  z-index:6;
  bottom:2px;
  height:16px;
}

/*
 * Tiny center reference line continuing upward.
 */
.channel-tuner-shell .channel-tuner-needle::before{
  content:"";

  position:absolute;
  left:50%;
  bottom:12px;

  width:1px;
  height:8px;

  transform:translateX(-50%);

  background:rgba(255,63,169,.30);
}

/*
 * While dragging, remove smooth scrolling so the dial follows
 * the finger directly. Snap animation is applied by JS on release.
 */
.channel-tuner-shell .channel-rail.is-dragging{
  scroll-behavior:auto !important;
}

@media (max-width:480px){

  .channel-tuner-shell{
    height:46px;
  }

  .channel-tuner-shell .channel-rail{
    height:44px;

    padding-left:47% !important;
    padding-right:47% !important;

    padding-top:1px !important;
    padding-bottom:10px !important;
  }
}


/* ===== Channel Tuner V2.3 — Full RTL Track ===== */

/*
 * Keep the original V1 tick design exactly as-is.
 * Only fix the physical size/origin of the moving scale.
 */
.channel-tuner-shell .channel-tuner-scale{
  left:auto !important;
  right:0 !important;

  width:var(--tuner-track-width, 100%) !important;
  min-width:0 !important;
  max-width:none !important;
}

/* ===== Channel Tuner — Active Dot Only ===== */

/* Remove active button/card appearance */
.channel-tuner-shell .channel-rail-item.is-active{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Selected channel indicator: bright purple dot */
.channel-tuner-shell .channel-rail-item[aria-pressed="true"] .channel-rail-dot{
  background:#c96cff !important;
  opacity:1 !important;
  box-shadow:
    0 0 5px rgba(201,108,255,.95),
    0 0 10px rgba(201,108,255,.55) !important;
}


/* ===== Channel Tuner V2.6 — Compact Balanced Dial ===== */

/*
 * Compact the tuner itself without squeezing the
 * station labels into the frequency scale.
 */
.channel-tuner-shell{
  height:42px !important;
}

.channel-tuner-shell .channel-rail{
  height:40px !important;

  /* Keep labels in their own upper area */
  padding-top:0 !important;
  padding-bottom:10px !important;
}

/* Frequency scale remains at the bottom */
.channel-tuner-shell .channel-tuner-scale{
  bottom:2px !important;
  height:8px !important;
}

/* Fixed needle stays aligned with the scale */
.channel-tuner-shell .channel-tuner-needle{
  bottom:1px !important;
  height:14px !important;
}

/*
 * Mobile keeps a little more touch height.
 */
@media (max-width:480px){
  .channel-tuner-shell{
    height:44px !important;
  }

  .channel-tuner-shell .channel-rail{
    height:42px !important;
    padding-top:0 !important;
    padding-bottom:10px !important;
  }

  .channel-tuner-shell .channel-tuner-scale{
    bottom:2px !important;
  }
}


/* ===== V2.8 — Tuner Internal Spacing Only ===== */

/*
 * Do NOT change tuner outer height/margins or vinyl spacing.
 * Only bring station labels slightly closer to the frequency scale.
 */
.channel-tuner-shell .channel-rail{
  padding-top:2px !important;
  padding-bottom:8px !important;
}

@media (max-width:480px){
  .channel-tuner-shell .channel-rail{
    padding-top:2px !important;
    padding-bottom:8px !important;
  }
}

/* ===== V2.9 — Tuner Inner Box Tightening ===== */

/*
 * Reduce ONLY the empty vertical space inside the tuner box.
 * Compensate below the tuner so the vinyl keeps its position.
 */
.channel-tuner-shell{
  height:40px !important;
}

.channel-tuner-shell .channel-rail{
  height:38px !important;
}

/* Preserve tuner-to-vinyl visual spacing */
.channel-rail-wrap{
  margin-bottom:4px !important;
}

@media (max-width:480px){
  .channel-tuner-shell{
    height:40px !important;
  }

  .channel-tuner-shell .channel-rail{
    height:38px !important;
  }

  .channel-rail-wrap{
    margin-bottom:4px !important;
  }
}


/* ===== V2.10 — Tuner Box Tighter ===== */

/* Smaller outer tuner box */
.channel-tuner-shell{
  height:36px !important;
}

.channel-tuner-shell .channel-rail{
  height:34px !important;
}

/* Keep vinyl in approximately the same vertical position */
.channel-rail-wrap{
  margin-bottom:8px !important;
}

@media (max-width:480px){
  .channel-tuner-shell{
    height:36px !important;
  }

  .channel-tuner-shell .channel-rail{
    height:34px !important;
  }

  .channel-rail-wrap{
    margin-bottom:8px !important;
  }
}


/* ===== V2.11 — Tuner Top Gap Fix ===== */
/* Restore breathing room between header controls and tuner only. */
.channel-rail-wrap{
  margin-top:0 !important;
}

@media (max-width:480px){
  .channel-rail-wrap{
    margin-top:0 !important;
  }
}

/* ===== V2.12 — Wide + Short Phone Vertical Restore ===== */
/*
 * Phones such as Galaxy Note 8 can have a short browser viewport
 * while still having enough screen width.
 * Restore some vertical presence without affecting narrow phones
 * such as iPhone 7.
 */
@media (min-width:391px) and (max-height:760px) {

  .player-card{
    padding-top:22px !important;
    padding-bottom:22px !important;
  }

  .player-header{
    margin-bottom:14px !important;
  }

  .disc-container{
    margin:4px 0 14px !important;
  }

  .vinyl{
    width:145px !important;
    height:145px !important;
  }

  .vinyl-center{
    width:52px !important;
    height:52px !important;
  }

  .track-details{
    min-height:48px !important;
    margin-bottom:10px !important;
  }

  #songTitle,
  .song-title{
    font-size:16px !important;
    line-height:1.4 !important;
  }

  .next-track-box{
    min-height:58px !important;
    margin-bottom:11px !important;
  }

  .equalizer-container{
    height:22px !important;
    min-height:22px !important;
    margin-bottom:11px !important;
  }

  .play-btn{
    width:64px !important;
    height:64px !important;
  }
}


/* ===== V11.5 — bottom quick actions ===== */

.player-quick-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  margin:4px 0 13px!important;
  direction:ltr;
}

.player-quick-actions .quick-action{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  position:relative;
  flex:0 0 44px!important;
}

.player-quick-actions .mini-action .action-icon{
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
}

.player-quick-actions .mini-action svg,
.player-quick-actions .theme-toggle svg{
  width:21px!important;
  height:21px!important;
}

.player-quick-actions #likeCount{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px!important;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px!important;
  line-height:18px!important;
  background:#ff4e91;
  color:#fff;
  box-shadow:0 3px 10px rgba(255,78,145,.30);
}

.player-quick-actions .like-action.liked svg{
  fill:currentColor!important;
}

.player-quick-actions .theme-quick-action{
  color:#f6f6fb;
}

body.light-theme .player-quick-actions .theme-quick-action{
  color:#343441;
}

@media(max-width:390px){
  .player-quick-actions{
    gap:10px!important;
  }

  .player-quick-actions .quick-action{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    flex-basis:42px!important;
  }
}

/* ===== V13.1 — final soft light theme ===== */
/* Softer, calmer light mode. Dark mode is untouched. */

body.light-theme{
  --bg-dark:#dfe0e9!important;
  color:#242532!important;
  background:
    radial-gradient(circle at 8% 22%,rgba(116,110,220,.065),transparent 32%),
    radial-gradient(circle at 91% 78%,rgba(225,82,145,.055),transparent 34%),
    #dfe0e9!important;
}

body.light-theme .ambient-glow{
  opacity:.09!important;
}

body.light-theme .player-card,
body.light-theme .modal-card,
body.light-theme .message-card{
  background:rgba(235,236,243,.96)!important;
  border-color:rgba(48,50,70,.14)!important;
  box-shadow:0 24px 65px rgba(43,45,65,.18)!important;
}

body.light-theme .song-title,
body.light-theme .modal-title,
body.light-theme .message-card h3{
  color:#20212c!important;
}

body.light-theme .artist-name,
body.light-theme .next-track-label,
body.light-theme .next-track-title,
body.light-theme .modal-desc,
body.light-theme .message-card small{
  color:#696b7b!important;
}

body.light-theme .next-track-box,
body.light-theme .listener-pill,
body.light-theme .mini-action,
body.light-theme .theme-toggle{
  background:rgba(210,212,223,.76)!important;
  border-color:rgba(50,52,72,.14)!important;
  color:#30313e!important;
}

body.light-theme .mini-action:hover,
body.light-theme .theme-toggle:hover{
  background:rgba(199,201,214,.92)!important;
}

body.light-theme .channel-tuner-shell,
body.light-theme .channel-rail-shell,
body.light-theme .channel-selector,
body.light-theme .channel-wheel{
  background:rgba(210,212,223,.48)!important;
  border-color:rgba(50,52,72,.12)!important;
}

body.light-theme .channel-rail-fade-start{
  background:linear-gradient(
    to left,
    rgba(235,236,243,.96),
    rgba(235,236,243,0)
  )!important;
}

body.light-theme .channel-rail-fade-end{
  background:linear-gradient(
    to right,
    rgba(235,236,243,.96),
    rgba(235,236,243,0)
  )!important;
}

body.light-theme .message-card textarea{
  background:#dedfe7!important;
  color:#20212c!important;
  border-color:#c5c7d2!important;
}

/* Keep the main transport control visually strong. */
body.light-theme .play-btn{
  background:#2b2d3a!important;
  color:#fff!important;
  box-shadow:0 12px 30px rgba(37,39,55,.22)!important;
}


/* ===== V13.2 — light tuner and text contrast ===== */
/* Light mode only: stronger tuner + clearer secondary typography. */

body.light-theme .channel-tuner-shell{
  background:rgba(196,199,212,.58)!important;
  border-color:rgba(48,50,70,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 5px 15px rgba(45,47,65,.06)!important;
}

/* Restore the warm vintage frequency ticks in light mode. */
body.light-theme .channel-tuner-scale{
  opacity:.92!important;
}

/* Major golden ticks get a little more presence. */
body.light-theme .channel-tuner-scale::after{
  opacity:1!important;
}

/* Station labels: readable without competing with active station. */
body.light-theme .channel-tuner-shell .channel-rail-item{
  color:#686b7a!important;
}

body.light-theme .channel-tuner-shell .channel-rail-item.is-active,
body.light-theme .channel-tuner-shell .channel-rail-item[aria-pressed="true"]{
  color:#20212c!important;
}

/* Slightly stronger secondary text across the player. */
body.light-theme .artist-name{
  color:#5b5e6d!important;
}

body.light-theme .next-track-label{
  color:#666978!important;
}

body.light-theme .next-track-title{
  color:#555866!important;
}

/* Give the next-track panel a little more separation. */
body.light-theme .next-track-box{
  background:rgba(202,204,216,.72)!important;
  border-color:rgba(48,50,70,.16)!important;
}


/* ===== V13.3 — light final polish ===== */
/* Light mode only: vinyl glow + liked heart + station tag contrast. */

/* Subtle purple/blue halo around the cover, similar to dark mode
   but deliberately softer for the light surface. */
body.light-theme .disc-shadow{
  background:rgba(99,102,241,.20)!important;
  opacity:.52!important;
  filter:blur(27px)!important;
  box-shadow:
    0 0 28px rgba(99,102,241,.15),
    0 0 46px rgba(236,72,153,.07)!important;
}

/* Liked heart uses the same pink accent as its count badge. */
body.light-theme .player-quick-actions .like-action.liked{
  color:#ff4e91!important;
  border-color:rgba(255,78,145,.48)!important;
  background:rgba(255,78,145,.10)!important;
}

body.light-theme .player-quick-actions .like-action.liked svg{
  color:#ff4e91!important;
  fill:#ff4e91!important;
  stroke:#ff4e91!important;
}

/* Stronger NEGAH STREAM label in light mode. */
body.light-theme .station-tag{
  color:#555866!important;
}


/* ===== V13.4 — light cover glow and next icon ===== */

/*
 * In light mode the old disc-shadow gets visually lost.
 * Give the whole disc container a visible but soft violet halo.
 */
body.light-theme .disc-container{
  filter:
    drop-shadow(0 0 16px rgba(99,102,241,.22))
    drop-shadow(0 0 30px rgba(99,102,241,.13))
    drop-shadow(0 0 42px rgba(236,72,153,.07))!important;
}

/* Reinforce the original glow layer as well. */
body.light-theme .disc-shadow{
  background:rgba(99,102,241,.34)!important;
  opacity:.78!important;
  filter:blur(30px)!important;
}

/*
 * Next-track music icon:
 * clearer frame and a slightly darker inner surface.
 */
body.light-theme .next-track-icon{
  background:rgba(181,184,199,.68)!important;
  border:1px solid rgba(48,50,70,.18)!important;
  color:#292b38!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 4px 12px rgba(45,47,65,.08)!important;
}


/* ===== V13.5 — stronger light tuner ===== */
/* Light mode only. No dimensions or tuner positioning changed. */

body.light-theme .channel-tuner-shell{
  background:
    linear-gradient(
      180deg,
      rgba(188,191,205,.72) 0%,
      rgba(205,207,218,.66) 100%
    )!important;

  border:1px solid rgba(55,57,78,.25)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(62,64,84,.08),
    0 7px 18px rgba(48,50,70,.12)!important;
}

/* Make the frequency scale clearly visible. */
body.light-theme .channel-tuner-scale{
  opacity:1!important;
  filter:
    saturate(1.35)
    contrast(1.12)!important;
}

/* Stronger station labels. */
body.light-theme .channel-tuner-shell .channel-rail-item{
  color:#5b5e6d!important;
  text-shadow:0 1px 0 rgba(255,255,255,.34);
}

/* Selected station remains the strongest item. */
body.light-theme .channel-tuner-shell .channel-rail-item.is-active,
body.light-theme .channel-tuner-shell .channel-rail-item[aria-pressed="true"]{
  color:#20212c!important;
  text-shadow:none!important;
}

/* Slightly stronger inactive station dots. */
body.light-theme .channel-tuner-shell .channel-rail-item::after{
  opacity:.82!important;
}

/* Keep the pink tuning indicator visually dominant. */
body.light-theme .channel-tuner-shell .channel-rail-item.is-active::after,
body.light-theme .channel-tuner-shell .channel-rail-item[aria-pressed="true"]::after{
  opacity:1!important;
}

/* Slight depth at the lower edge where the frequency ticks sit. */
body.light-theme .channel-tuner-shell::after{
  opacity:.95!important;
}


/* ===== V13.6 — dark tuner in light mode ===== */
/* Keep the page light, but give the radio tuner its own dark face. */

body.light-theme .channel-tuner-shell{
  background:
    linear-gradient(
      180deg,
      #363944 0%,
      #292c35 100%
    )!important;

  border:1px solid rgba(20,22,30,.42)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 7px 18px rgba(35,37,52,.16)!important;
}

/* Frequency ticks: warm gold against the dark dial. */
body.light-theme .channel-tuner-scale{
  opacity:1!important;
  filter:
    saturate(1.55)
    brightness(1.12)
    contrast(1.12)!important;
}

/* Inactive station names. */
body.light-theme .channel-tuner-shell .channel-rail-item{
  color:#b9bdc9!important;
  text-shadow:none!important;
}

/* Active station. */
body.light-theme .channel-tuner-shell .channel-rail-item.is-active,
body.light-theme .channel-tuner-shell .channel-rail-item[aria-pressed="true"]{
  color:#ffffff!important;
  text-shadow:0 0 10px rgba(255,255,255,.10)!important;
}

/* Inactive station dots. */
body.light-theme .channel-tuner-shell .channel-rail-item::after{
  opacity:.72!important;
}

/* Active pink dot stays vivid. */
body.light-theme .channel-tuner-shell .channel-rail-item.is-active::after,
body.light-theme .channel-tuner-shell .channel-rail-item[aria-pressed="true"]::after{
  opacity:1!important;
}


/* ===== V13.7 — balanced light tuner ===== */
/* Medium tuner surface + seamless side fades. */

body.light-theme .channel-tuner-shell{
  background:
    linear-gradient(
      180deg,
      #666a77 0%,
      #575b68 100%
    )!important;

  border-color:rgba(44,46,62,.30)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(25,27,38,.16),
    0 6px 16px rgba(45,47,65,.12)!important;
}

/* Remove the pale blocks at both ends by fading into tuner colors. */
body.light-theme .channel-rail-fade-start{
  background:
    linear-gradient(
      to left,
      rgba(87,91,104,0),
      rgba(87,91,104,.82) 58%,
      #5b5f6c 100%
    )!important;
}

body.light-theme .channel-rail-fade-end{
  background:
    linear-gradient(
      to right,
      rgba(87,91,104,0),
      rgba(87,91,104,.82) 58%,
      #5b5f6c 100%
    )!important;
}

/* Labels remain clear, but softer than the very dark version. */
body.light-theme .channel-tuner-shell .channel-rail-item{
  color:#d2d4dc!important;
}

body.light-theme .channel-tuner-shell .channel-rail-item.is-active,
body.light-theme .channel-tuner-shell .channel-rail-item[aria-pressed="true"]{
  color:#ffffff!important;
}

/* Gold scale remains vivid. */
body.light-theme .channel-tuner-scale{
  opacity:1!important;
  filter:
    saturate(1.45)
    brightness(1.10)
    contrast(1.08)!important;
}


/* ===== V13.8 — soft tuner side fades ===== */
/* Keep V13.7 tuner colors; only soften both edge fades. */

body.light-theme .channel-rail-fade-start{
  background:
    linear-gradient(
      to left,
      rgba(87,91,104,0) 0%,
      rgba(87,91,104,.16) 24%,
      rgba(87,91,104,.40) 48%,
      rgba(87,91,104,.68) 72%,
      rgba(91,95,108,.92) 100%
    )!important;
}

body.light-theme .channel-rail-fade-end{
  background:
    linear-gradient(
      to right,
      rgba(87,91,104,0) 0%,
      rgba(87,91,104,.16) 24%,
      rgba(87,91,104,.40) 48%,
      rgba(87,91,104,.68) 72%,
      rgba(91,95,108,.92) 100%
    )!important;
}


/* ===== V13.9 — remove light tuner edge fades ===== */
/* The side fade overlays create visible vertical seams on the medium tuner. */

body.light-theme .channel-rail-fade-start,
body.light-theme .channel-rail-fade-end{
  display:none!important;
}


/* ===== V13.7 — polished light entry modal ===== */
/* Only the initial entry screen in light mode. */

body.light-theme #startModal.modal-overlay{
  background:rgba(222,224,232,.72)!important;
  backdrop-filter:blur(25px)!important;
  -webkit-backdrop-filter:blur(25px)!important;
}

/* Soft light card matching the main player language. */
body.light-theme #startModal .modal-card{
  background:rgba(238,239,244,.94)!important;
  border:1px solid rgba(48,50,70,.11)!important;

  box-shadow:
    0 28px 65px rgba(45,47,65,.18),
    0 0 38px rgba(99,102,241,.10)!important;
}

/* Live badge */
body.light-theme #startModal .modal-badge{
  background:rgba(99,102,241,.10)!important;
  border-color:rgba(99,102,241,.28)!important;
  color:#666ccf!important;
}

/* Radio icon */
body.light-theme #startModal .modal-icon-wrap{
  background:
    linear-gradient(
      135deg,
      rgba(99,102,241,.15),
      rgba(236,72,153,.13)
    )!important;

  border-color:rgba(99,102,241,.15)!important;
  color:#7479e7!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 24px rgba(99,102,241,.08)!important;
}

/* Fix transparent gradient text inherited from dark mode. */
body.light-theme #startModal .modal-title{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:#252733!important;
  color:#252733!important;
}

/* Description */
body.light-theme #startModal .modal-desc{
  color:#666977!important;
}

/* Keep CTA vivid and give it cleaner depth on the light card. */
body.light-theme #startModal .btn-primary{
  color:#fff!important;
  box-shadow:
    0 10px 25px rgba(99,102,241,.20),
    0 7px 20px rgba(236,72,153,.13)!important;
}


/* ===== V13.8 — Safari safe light cover glow ===== */
/* Light mode only. Use the dedicated glow layer instead of container drop-shadow. */

body.light-theme .disc-container{
  filter:none!important;
  -webkit-filter:none!important;
}

/*
 * Dedicated glow layer behind the vinyl.
 * Explicit dimensions/inset + WebKit filter improve Safari rendering.
 */
body.light-theme .disc-shadow{
  position:absolute!important;
  inset:-8px!important;
  border-radius:50%!important;

  background:
    radial-gradient(
      circle,
      rgba(99,102,241,.34) 0%,
      rgba(99,102,241,.25) 42%,
      rgba(139,92,246,.16) 62%,
      rgba(236,72,153,.08) 76%,
      transparent 100%
    )!important;

  opacity:1!important;

  filter:blur(18px)!important;
  -webkit-filter:blur(18px)!important;

  transform:translateZ(0)!important;
  -webkit-transform:translateZ(0)!important;

  pointer-events:none!important;
  z-index:0!important;

  box-shadow:
    0 0 24px rgba(99,102,241,.16),
    0 0 42px rgba(139,92,246,.10)!important;
}

/* Keep the rotating artwork explicitly above the glow. */
body.light-theme .vinyl{
  position:relative!important;
  z-index:1!important;
}


/* ===== NEGAH PROFILE V1.1 ===== */

.profile-overlay{
  position:fixed;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(4,5,10,.74);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.profile-overlay[hidden]{
  display:none!important;
}

.profile-card{
  position:relative;
  width:min(440px,100%);
  max-height:min(720px,calc(100vh - 36px));
  overflow:auto;
  overscroll-behavior:contain;
  direction:rtl;
  padding:26px 22px 22px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  background:rgba(23,23,32,.97);
  color:#f5f5fa;
  box-shadow:0 28px 80px rgba(0,0,0,.42);
}

.profile-close{
  position:absolute;
  top:11px;
  left:13px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#aaaab6;
  font:inherit;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.profile-close:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.profile-state[hidden]{
  display:none!important;
}

.profile-state{
  text-align:center;
}

#profileLoading{
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#aaaab8;
}

.profile-spinner{
  width:30px;
  height:30px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#ff4e91;
  animation:profile-spin .75s linear infinite;
}

@keyframes profile-spin{
  to{transform:rotate(360deg)}
}

.profile-avatar{
  width:66px;
  height:66px;
  flex:0 0 66px;
  display:grid;
  place-items:center;
  border-radius:21px;
  background:
    linear-gradient(145deg,rgba(255,78,145,.20),rgba(119,104,255,.20));
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.profile-avatar-guest{
  margin:8px auto 16px;
}

.profile-avatar svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.profile-avatar span{
  font-size:25px;
  font-weight:900;
}

#profileGuest h2,
#profileError h2{
  margin:0;
  color:#fff;
  font-size:21px;
}

.profile-subtitle{
  max-width:340px;
  margin:9px auto 20px;
  color:#aaaab8;
  font-size:13px;
  line-height:1.9;
}

.profile-dev-login{
  text-align:right;
}

.profile-dev-login label{
  display:block;
  margin:0 3px 7px;
  color:#d4d4dd;
  font-size:12px;
  font-weight:700;
}

.profile-dev-login input{
  width:100%;
  height:46px;
  box-sizing:border-box;
  padding:0 13px;
  direction:ltr;
  text-align:left;
  border:1px solid #363646;
  border-radius:13px;
  outline:none;
  background:#0f0f16;
  color:#fff;
  font:inherit;
}

.profile-dev-login input:focus{
  border-color:rgba(255,78,145,.65);
  box-shadow:0 0 0 3px rgba(255,78,145,.10);
}

.profile-primary-btn{
  width:100%;
  min-height:45px;
  margin-top:11px;
  border:0;
  border-radius:13px;
  background:#ff4e91;
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease,opacity .18s ease;
}

.profile-primary-btn:hover{
  transform:translateY(-1px);
}

.profile-primary-btn:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}

.profile-status{
  display:block;
  min-height:18px;
  margin-top:8px;
  color:#ff9abb;
  font-size:11px;
}

.profile-dev-note{
  margin:12px 0 0;
  color:#747481;
  font-size:10px;
}

.profile-account-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 2px 18px;
  text-align:right;
}

.profile-account-copy{
  min-width:0;
  flex:1;
}

.profile-account-copy h2{
  margin:0 0 5px;
  overflow:hidden;
  color:#fff;
  font-size:19px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-account-copy p{
  margin:0;
  overflow:hidden;
  direction:ltr;
  color:#aaaab8;
  font-size:12px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-join-date{
  display:block;
  margin-top:5px;
  color:#777785;
  font-size:10px;
}

.profile-menu{
  display:grid;
  gap:8px;
  margin-top:4px;
}

.profile-menu-item{
  width:100%;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  color:#eeeef5;
  font:inherit;
  text-align:right;
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.profile-menu-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.075);
  border-color:rgba(255,78,145,.22);
}

.profile-menu-icon{
  width:37px;
  height:37px;
  flex:0 0 37px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,.055);
  color:#ff6ca3;
  font-size:21px;
}

.profile-menu-copy{
  min-width:0;
  flex:1;
}

.profile-menu-copy strong,
.profile-menu-copy small{
  display:block;
}

.profile-menu-copy strong{
  margin-bottom:3px;
  font-size:12px;
}

.profile-menu-copy small{
  color:#858594;
  font-size:10px;
}

.profile-menu-arrow{
  color:#6f6f7c;
  font-size:22px;
}

.profile-section-status{
  display:block;
  min-height:17px;
  margin-top:9px;
  color:#8f8f9d;
  font-size:10px;
}

.profile-logout-btn{
  width:100%;
  min-height:42px;
  margin-top:8px;
  border:1px solid rgba(255,90,110,.22);
  border-radius:13px;
  background:rgba(255,70,90,.07);
  color:#ff8494;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.profile-logout-btn:hover{
  background:rgba(255,70,90,.12);
}

#profileError{
  padding:42px 0 16px;
}

#profileError p{
  color:#9999a7;
  font-size:12px;
}

.profile-action.is-authenticated{
  border-color:rgba(255,78,145,.34)!important;
  color:#ff6ca3!important;
}

.profile-action.is-authenticated .action-icon{
  transform:scale(1.04);
}

body.light-theme .profile-card{
  background:rgba(235,236,243,.98)!important;
  border-color:rgba(48,50,70,.14)!important;
  color:#252632!important;
  box-shadow:0 28px 75px rgba(43,45,65,.22)!important;
}

body.light-theme .profile-close{
  color:#686a78;
}

body.light-theme .profile-close:hover{
  background:rgba(40,42,60,.07);
  color:#242532;
}

body.light-theme #profileGuest h2,
body.light-theme #profileError h2,
body.light-theme .profile-account-copy h2{
  color:#20212c!important;
}

body.light-theme .profile-subtitle,
body.light-theme .profile-account-copy p{
  color:#626574!important;
}

body.light-theme .profile-dev-login label{
  color:#4e5060;
}

body.light-theme .profile-dev-login input{
  background:#dedfe7;
  border-color:#c5c7d2;
  color:#20212c;
}

body.light-theme .profile-menu-item{
  background:rgba(210,212,223,.60);
  border-color:rgba(50,52,72,.11);
  color:#30313e;
}

body.light-theme .profile-menu-item:hover{
  background:rgba(199,201,214,.88);
}

body.light-theme .profile-menu-icon{
  background:rgba(55,57,75,.07);
}

body.light-theme .profile-menu-copy small,
body.light-theme .profile-section-status{
  color:#666978;
}

body.light-theme .profile-avatar{
  border-color:rgba(50,52,72,.12);
  color:#343542;
}

@media(max-width:480px){
  .profile-overlay{
    padding:12px;
  }

  .profile-card{
    max-height:calc(100vh - 24px);
    padding:24px 16px 18px;
    border-radius:21px;
  }

  .profile-account-head{
    gap:11px;
  }

  .profile-avatar{
    width:58px;
    height:58px;
    flex-basis:58px;
    border-radius:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .profile-spinner{
    animation:none;
  }

  .profile-menu-item,
  .profile-primary-btn{
    transition:none;
  }
}

/* ===== NEGAH LIKED SONGS V1.6 — PROFILE LIST ===== */

.profile-likes-panel{
    width:100%;
    margin-top:12px;
}

.profile-likes-panel[hidden]{
    display:none!important;
}

.profile-likes-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.profile-likes-head>strong{
    min-width:0;
    text-align:center;
    font-size:14px;
    font-weight:800;
}

.profile-likes-back{
    appearance:none;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
    color:inherit;
    border-radius:10px;
    padding:7px 10px;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}

.profile-likes-count{
    min-width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,78,145,.13);
    border:1px solid rgba(255,78,145,.24);
    color:#ff6ba2;
    font-size:12px;
    font-weight:800;
}

.profile-likes-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:310px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:1px 1px 4px;
}

.profile-liked-row{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 11px;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.075);
    background:rgba(255,255,255,.04);
}

.profile-liked-copy{
    flex:1;
    min-width:0;
}

.profile-liked-copy strong,
.profile-liked-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.profile-liked-copy strong{
    font-size:13px;
    line-height:1.7;
}

.profile-liked-copy small{
    margin-top:1px;
    font-size:11px;
    opacity:.62;
}

.profile-liked-remove{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,78,145,.25);
    background:rgba(255,78,145,.10);
    color:#ff5d98;
    font-size:19px;
    line-height:1;
    cursor:pointer;
}

.profile-liked-remove:disabled{
    opacity:.45;
    cursor:wait;
}

.profile-likes-message{
    padding:20px 10px;
    text-align:center;
    font-size:12px;
    opacity:.68;
}

body.light-theme .profile-likes-back{
    border-color:rgba(43,45,58,.10);
    background:rgba(43,45,58,.045);
}

body.light-theme .profile-liked-row{
    border-color:rgba(43,45,58,.08);
    background:rgba(43,45,58,.035);
}

body.light-theme .profile-likes-count{
    background:rgba(255,78,145,.10);
}


/* ===== NEGAH LIKED SONGS V1.6.1 — UI POLISH ===== */

/* Respect JS hidden state even if older profile CSS sets display. */
.profile-menu[hidden]{
    display:none!important;
}

.profile-liked-remove{
    padding:0;
    font-size:0;
}

.profile-liked-heart-svg{
    display:block;
    width:20px;
    height:20px;
    flex:none;
    overflow:visible;
    fill:#ff5d98;
    stroke:none;
}

body.light-theme .profile-liked-heart-svg{
    fill:#ff4e91;
}



/* ===== NEGAH PROFILE V1.6.2 — SUBPAGE LAYOUT ===== */

/*
 * Subpages behave as independent profile screens.
 * Only the subpage header + its content remain visible.
 */
#profileAccount.profile-subpage-open > .profile-account-head,
#profileAccount.profile-subpage-open > .profile-menu,
#profileAccount.profile-subpage-open > .profile-section-status,
#profileAccount.profile-subpage-open > .profile-logout-btn{
    display:none!important;
}

#profileAccount.profile-subpage-open .profile-likes-panel{
    margin-top:0;
}

/* Cleaner standalone subpage header */
#profileAccount.profile-subpage-open .profile-likes-head{
    margin-bottom:16px;
    min-height:34px;
}

#profileAccount.profile-subpage-open .profile-likes-head > strong{
    font-size:15px;
}



/* ===== NEGAH PROFILE V1.6.4 — EXACT MAIN SIZE ===== */

/*
 * JS records the real height of the normal Profile screen.
 * Every profile subpage keeps exactly that minimum outer size.
 */
.profile-card{
    min-height:var(--profile-main-card-height, auto);
}

.profile-card:not(.profile-has-subpage){
    min-height:0;
}

.profile-card.profile-has-subpage{
    min-height:var(--profile-main-card-height, 0px);
}

#profileAccount.profile-subpage-open{
    min-height:0;
}

#profileAccount.profile-subpage-open .profile-likes-panel{
    min-height:0;
    display:flex;
    flex-direction:column;
    height:100%;
}


/* ===== NEGAH PROFILE V1.6.5 — SUBPAGE CLOSE CLEARANCE ===== */

/*
 * Reserve space for the modal close button.
 * Prevents subpage header/count controls from overlapping it.
 */
#profileAccount.profile-subpage-open .profile-likes-head{
    padding-left:48px;
    box-sizing:border-box;
}


/* ===== NEGAH OFFLINE V1.4 — LIKED SONG SAVE ===== */

.profile-liked-offline{
    flex:0 0 auto;
    min-height:32px;
    padding:0 10px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
    color:inherit;
    font:inherit;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
}

.profile-liked-offline:hover{
    background:rgba(255,255,255,.09);
}

.profile-liked-offline.is-loading{
    opacity:.62;
    cursor:wait;
}

.profile-liked-offline.is-saved{
    border-color:rgba(82,196,126,.28);
    background:rgba(82,196,126,.10);
}

.profile-liked-offline:disabled.is-saved{
    opacity:1;
    cursor:default;
}

body.light-theme .profile-liked-offline{
    border-color:rgba(43,45,58,.11);
    background:rgba(43,45,58,.045);
}

body.light-theme .profile-liked-offline:hover{
    background:rgba(43,45,58,.075);
}

body.light-theme .profile-liked-offline.is-saved{
    border-color:rgba(50,145,90,.22);
    background:rgba(50,145,90,.08);
}

@media (max-width:420px){
    .profile-liked-row{
        gap:7px;
    }

    .profile-liked-offline{
        padding:0 8px;
        font-size:10px;
    }
}

/* ===== NEGAH OFFLINE V1.4.1 — ICON UI ===== */

.profile-liked-offline{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:rgba(255,255,255,.68);
    line-height:1;
    cursor:pointer;
    transition:
        color .16s ease,
        transform .16s ease,
        background .16s ease;
}

.profile-liked-offline svg{
    display:block;
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-liked-offline:hover{
    color:#fff;
    background:rgba(255,255,255,.06);
    transform:scale(1.05);
}

.profile-liked-offline.is-loading{
    opacity:1;
    cursor:wait;
    transform:none;
}

.profile-liked-offline.is-saved,
.profile-liked-offline:disabled.is-saved{
    color:#1ed760;
    background:transparent;
    opacity:1;
    cursor:default;
}

.profile-offline-spinner{
    display:block;
    width:19px;
    height:19px;
    box-sizing:border-box;
    border:2px solid rgba(255,255,255,.22);
    border-top-color:currentColor;
    border-radius:50%;
    animation:negahOfflineSpin .75s linear infinite;
}

@keyframes negahOfflineSpin{
    to{
        transform:rotate(360deg);
    }
}

body.light-theme .profile-liked-offline{
    color:rgba(43,45,58,.58);
    background:transparent;
}

body.light-theme .profile-liked-offline:hover{
    color:#2b2d3a;
    background:rgba(43,45,58,.055);
}

body.light-theme .profile-liked-offline.is-saved,
body.light-theme .profile-liked-offline:disabled.is-saved{
    color:#169b4b;
    background:transparent;
}

body.light-theme .profile-offline-spinner{
    border-color:rgba(43,45,58,.18);
    border-top-color:currentColor;
}

@media (prefers-reduced-motion:reduce){
    .profile-liked-offline{
        transition:none;
    }

    .profile-offline-spinner{
        animation-duration:1.4s;
    }
}

@media (max-width:420px){
    .profile-liked-offline{
        width:32px;
        min-width:32px;
        height:32px;
        min-height:32px;
        padding:0;
    }
}

/* ===== NEGAH OFFLINE V1.5 — MY OFFLINE PAGE ===== */

.profile-offline-saved-icon{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1ed760;
}

.profile-offline-saved-icon svg{
    display:block;
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

body.light-theme .profile-offline-saved-icon{
    color:#169b4b;
}

/* Reuse the frozen Profile subpage geometry for Offline. */
#profileAccount.profile-subpage-open .profile-offline-panel{
    margin-top:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    height:100%;
}

#profileAccount.profile-subpage-open .profile-offline-panel .profile-likes-head{
    margin-bottom:16px;
    min-height:34px;
    padding-left:48px;
    box-sizing:border-box;
}

#profileAccount.profile-subpage-open .profile-offline-panel .profile-likes-head > strong{
    font-size:15px;
}


/* ===== NEGAH OFFLINE V1.6 — PLAY CONTROL ===== */

.profile-offline-play{
    flex:0 0 auto;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:rgba(255,255,255,.72);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        transform .15s ease,
        color .15s ease,
        opacity .15s ease;
}

.profile-offline-play svg{
    display:block;
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-offline-play .offline-play-shape{
    fill:currentColor;
    stroke:none;
}

.profile-offline-play:hover{
    transform:scale(1.06);
    color:#fff;
}

.profile-offline-play.is-playing{
    color:#1ed760;
}

.profile-offline-play.is-loading{
    cursor:wait;
}

.profile-offline-play:disabled{
    opacity:.72;
}

.profile-offline-play-spinner{
    width:19px;
    height:19px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:profileOfflinePlaySpin .7s linear infinite;
}

@keyframes profileOfflinePlaySpin{
    to{ transform:rotate(360deg); }
}

body.light-theme .profile-offline-play{
    color:rgba(22,25,35,.68);
}

body.light-theme .profile-offline-play:hover{
    color:#11141d;
}

body.light-theme .profile-offline-play.is-playing{
    color:#169b4b;
}

@media (max-width:560px){
    .profile-offline-play{
        width:32px;
        height:32px;
    }
}

@media (prefers-reduced-motion:reduce){
    .profile-offline-play{
        transition:none;
    }

    .profile-offline-play-spinner{
        animation-duration:1.2s;
    }
}

/* ===== NEGAH OFFLINE V1.7 — REMOVE CONTROL ===== */

.profile-offline-remove{
    flex:0 0 auto;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:rgba(255,255,255,.46);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        transform .15s ease,
        color .15s ease,
        background-color .15s ease,
        opacity .15s ease;
}

.profile-offline-remove svg{
    display:block;
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-offline-remove:hover{
    color:#ff6b7f;
    transform:scale(1.05);
}

.profile-offline-remove.is-confirming{
    color:#ff526a;
    background:rgba(255,82,106,.12);
}

.profile-offline-remove.is-removing{
    cursor:wait;
    opacity:.72;
}

.profile-offline-remove:disabled{
    cursor:wait;
}

.profile-offline-remove-spinner{
    width:18px;
    height:18px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:profileOfflineRemoveSpin .7s linear infinite;
}

@keyframes profileOfflineRemoveSpin{
    to{ transform:rotate(360deg); }
}

body.light-theme .profile-offline-remove{
    color:rgba(22,25,35,.46);
}

body.light-theme .profile-offline-remove:hover,
body.light-theme .profile-offline-remove.is-confirming{
    color:#d93650;
}

body.light-theme .profile-offline-remove.is-confirming{
    background:rgba(217,54,80,.09);
}

@media (max-width:560px){
    .profile-offline-remove{
        width:32px;
        height:32px;
    }
}

@media (prefers-reduced-motion:reduce){
    .profile-offline-remove{
        transition:none;
    }

    .profile-offline-remove-spinner{
        animation-duration:1.2s;
    }
}

/* ===== NEGAH OFFLINE V1.7.1 — CLEAR REMOVE CONFIRMATION ===== */

.profile-offline-row{
    position:relative;
}

.profile-offline-remove-confirm{
    flex:0 0 100%;
    width:100%;
    box-sizing:border-box;
    margin-top:7px;
    padding:8px 9px;
    border-radius:11px;
    background:rgba(255,82,106,.09);
    border:1px solid rgba(255,82,106,.18);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.profile-offline-remove-question{
    min-width:0;
    color:rgba(255,255,255,.86);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.profile-offline-remove-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
}

.profile-offline-remove-yes,
.profile-offline-remove-cancel{
    min-height:29px;
    padding:4px 10px;
    border-radius:8px;
    font:inherit;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.profile-offline-remove-yes{
    border:1px solid rgba(255,82,106,.38);
    background:rgba(255,82,106,.17);
    color:#ff7184;
}

.profile-offline-remove-cancel{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.76);
}

.profile-offline-remove-yes:hover{
    background:rgba(255,82,106,.25);
}

.profile-offline-remove-cancel:hover{
    background:rgba(255,255,255,.10);
    color:#fff;
}

.profile-offline-remove-yes:disabled{
    cursor:wait;
    opacity:.72;
}

body.light-theme .profile-offline-remove-confirm{
    background:rgba(217,54,80,.055);
    border-color:rgba(217,54,80,.15);
}

body.light-theme .profile-offline-remove-question{
    color:rgba(22,25,35,.84);
}

body.light-theme .profile-offline-remove-yes{
    color:#c72f47;
    border-color:rgba(199,47,71,.25);
    background:rgba(199,47,71,.08);
}

body.light-theme .profile-offline-remove-cancel{
    color:rgba(22,25,35,.68);
    border-color:rgba(22,25,35,.10);
    background:rgba(22,25,35,.035);
}

@media (max-width:560px){
    .profile-offline-remove-confirm{
        gap:7px;
        padding:7px 8px;
    }

    .profile-offline-remove-question{
        font-size:11px;
    }

    .profile-offline-remove-yes,
    .profile-offline-remove-cancel{
        padding:4px 8px;
    }
}

/* ===== NEGAH OFFLINE V1.7.2 — INLINE REMOVE CONFIRMATION ===== */

.profile-offline-row.remove-confirm-open{
    flex-wrap:nowrap;
}

.profile-offline-row.remove-confirm-open .profile-liked-copy{
    flex:1 1 auto;
    min-width:0;
}

.profile-offline-row.remove-confirm-open
.profile-offline-remove-confirm{
    flex:0 0 auto;
    width:auto;
    max-width:none;
    margin:0;
    padding:5px 7px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    white-space:nowrap;
}

.profile-offline-row.remove-confirm-open
.profile-offline-remove-question{
    flex:0 0 auto;
    min-width:auto;
    white-space:nowrap;
    font-size:11px;
}

.profile-offline-row.remove-confirm-open
.profile-offline-remove-actions{
    flex:0 0 auto;
    gap:5px;
}

.profile-offline-row.remove-confirm-open
.profile-offline-remove-yes,
.profile-offline-row.remove-confirm-open
.profile-offline-remove-cancel{
    min-height:27px;
    padding:3px 8px;
    font-size:10px;
    white-space:nowrap;
}

@media (max-width:560px){
    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-confirm{
        padding:4px 6px;
        gap:5px;
    }

    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-question{
        font-size:10px;
    }

    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-yes,
    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-cancel{
        min-height:26px;
        padding:3px 6px;
        font-size:10px;
    }
}

/* ===== NEGAH PROFILE V1.8 — LARGE 95% WORKSPACE ===== */

/*
 * Profile is now a large workspace instead of a compact dialog.
 * Main Profile and all Profile subpages share this geometry.
 */

.profile-card{
    width:min(760px, calc(100vw - 48px)) !important;
    height:min(820px, calc(100vh - 48px)) !important;
    max-width:none !important;
    max-height:none !important;
    box-sizing:border-box;
    overflow:auto;
}

/*
 * V1.6.4 previously used the natural height of the compact Profile
 * as the subpage minimum. V1.8 gives the card an explicit workspace
 * height, so every subpage automatically inherits the same size.
 */
.profile-card.profile-has-subpage{
    min-height:0 !important;
}

#profileAccount.profile-subpage-open{
    height:100%;
    min-height:0;
}

#profileAccount.profile-subpage-open .profile-likes-panel,
#profileAccount.profile-subpage-open .profile-offline-panel{
    height:100%;
    min-height:0;
    box-sizing:border-box;
}

/*
 * The list area should consume the available workspace while keeping
 * room for the future Offline bottom player.
 */
#profileAccount.profile-subpage-open .profile-likes-list,
#profileAccount.profile-subpage-open .profile-offline-list{
    min-height:0;
}

/* Tablet */
@media (max-width:820px){
    .profile-card{
        width:calc(100vw - 32px) !important;
        height:calc(100vh - 32px) !important;
    }
}

/* Phone */
@media (max-width:480px){
    .profile-overlay{
        padding:10px !important;
    }

    .profile-card{
        width:calc(100vw - 20px) !important;
        height:calc(100vh - 20px) !important;
        padding:24px 16px 18px;
        border-radius:21px;
    }
}

@supports (height:100dvh){
    .profile-card{
        height:min(820px, calc(100dvh - 48px)) !important;
    }

    @media (max-width:820px){
        .profile-card{
            height:calc(100dvh - 32px) !important;
        }
    }

    @media (max-width:480px){
        .profile-card{
            height:calc(100dvh - 20px) !important;
        }
    }
}

/* ===== NEGAH PROFILE V1.8.1 — PLAYER-SIZED PROFILE ===== */

/*
 * Profile should visually match the main Radio card,
 * not behave as a large desktop workspace.
 *
 * Width follows the main player card.
 * Height is intentionally about 3% shorter than the available
 * main-player viewport presence.
 */

.profile-card{
    width:min(390px, calc(100vw - 32px)) !important;
    height:min(760px, calc((100vh - 32px) * .97)) !important;

    max-width:390px !important;
    max-height:none !important;

    box-sizing:border-box;
    overflow:auto;
}

/* Keep every Profile subpage exactly the same outer size. */
.profile-card.profile-has-subpage{
    min-height:0 !important;
}

#profileAccount.profile-subpage-open{
    height:100%;
    min-height:0;
}

#profileAccount.profile-subpage-open .profile-likes-panel,
#profileAccount.profile-subpage-open .profile-offline-panel{
    height:100%;
    min-height:0;
    box-sizing:border-box;
}

/* Mobile */
@media (max-width:480px){
    .profile-overlay{
        padding:10px !important;
    }

    .profile-card{
        width:calc(100vw - 20px) !important;
        max-width:390px !important;
        height:calc((100vh - 20px) * .97) !important;

        padding:24px 16px 18px;
        border-radius:21px;
    }
}

/* Correct sizing when dynamic viewport units are supported. */
@supports (height:100dvh){

    .profile-card{
        height:min(
            760px,
            calc((100dvh - 32px) * .97)
        ) !important;
    }

    @media (max-width:480px){
        .profile-card{
            height:calc(
                (100dvh - 20px) * .97
            ) !important;
        }
    }
}

/* ===== NEGAH PROFILE V1.8.2 — MATCH PLAYER HEIGHT ===== */

/*
 * Measured main Player:
 *   390 × 705 px
 *
 * Profile target:
 *   same width
 *   97% of Player height = 684 px
 */

.profile-card{
    width:min(390px, calc(100vw - 32px)) !important;
    max-width:390px !important;

    height:min(684px, calc(100vh - 24px)) !important;
    max-height:min(684px, calc(100vh - 24px)) !important;

    box-sizing:border-box;
    overflow:auto;
}

/* Subpages keep exactly the same Profile geometry. */
.profile-card.profile-has-subpage{
    min-height:0 !important;
}

#profileAccount.profile-subpage-open{
    height:100%;
    min-height:0;
}

#profileAccount.profile-subpage-open .profile-likes-panel,
#profileAccount.profile-subpage-open .profile-offline-panel{
    height:100%;
    min-height:0;
    box-sizing:border-box;
}

/* Narrow phones */
@media (max-width:480px){
    .profile-overlay{
        padding:10px !important;
    }

    .profile-card{
        width:min(390px, calc(100vw - 20px)) !important;

        height:min(684px, calc(100vh - 20px)) !important;
        max-height:min(684px, calc(100vh - 20px)) !important;

        padding:24px 16px 18px;
        border-radius:21px;
    }
}

/* Mobile browser chrome safe height */
@supports (height:100dvh){

    .profile-card{
        height:min(684px, calc(100dvh - 24px)) !important;
        max-height:min(684px, calc(100dvh - 24px)) !important;
    }

    @media (max-width:480px){
        .profile-card{
            height:min(684px, calc(100dvh - 20px)) !important;
            max-height:min(684px, calc(100dvh - 20px)) !important;
        }
    }
}

/* ===== NEGAH PROFILE V1.8.3 — LOGOUT AT BOTTOM ===== */

/*
 * Keep Logout visually anchored to the bottom of the main Profile card.
 * No logout/auth logic is changed.
 */

.profile-card:not(.profile-subpage-open){
    display:flex;
    flex-direction:column;
}

.profile-card:not(.profile-subpage-open) .profile-menu{
    flex:0 0 auto;
}

.profile-card:not(.profile-subpage-open) .profile-logout{
    margin-top:auto !important;
}

/* ===== NEGAH PROFILE V1.8.4 — FIX LOGOUT BOTTOM SELECTOR ===== */

/*
 * V1.8.3 targeted .profile-logout, but the real button class
 * is .profile-logout-btn.
 *
 * Keep Logout at the bottom of the normal Profile screen.
 */
.profile-card:not(.profile-subpage-open) .profile-logout-btn{
    margin-top:auto !important;
    margin-bottom:0 !important;
    flex:0 0 auto;
}


/* ===== NEGAH PROFILE V1.8.5 — LOGOUT TRUE BOTTOM ===== */

/*
 * Logout lives inside .profile-state.
 * Make profile-state consume the remaining card height,
 * then anchor Logout at its bottom.
 */

.profile-card:not(.profile-subpage-open) .profile-state{
    flex:1 1 auto;
    min-height:0;

    display:flex;
    flex-direction:column;
}

.profile-card:not(.profile-subpage-open) .profile-logout-btn{
    margin-top:auto !important;
    margin-bottom:0 !important;
    flex:0 0 auto;
}


/* ===== NEGAH PROFILE V1.8.6 — SOFT BACKGROUND OVERLAY ===== */

/*
 * Preserve the blue/red ambient background of the main player.
 * Profile remains only slightly darker to keep modal separation.
 */
.profile-overlay{
    background:rgba(4,5,10,.18) !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
}


/* ===== NEGAH PROFILE V1.8.7 — CLEAN SUBPAGE HEADER ===== */

/*
 * Shared header for Likes + Offline:
 *
 * RIGHT   : Back
 * CENTER  : Title
 * LEFT    : Count
 *
 * The complete header sits slightly below the modal close button,
 * so the count and X no longer visually collide.
 */
#profileAccount.profile-subpage-open .profile-likes-head,
#profileAccount.profile-subpage-open .profile-offline-panel .profile-likes-head{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;

    padding-left:0 !important;
    padding-top:14px;

    margin-bottom:16px;
    box-sizing:border-box;
}

/* Right column */
#profileAccount.profile-subpage-open .profile-likes-back{
    grid-column:1;
    grid-row:1;
    justify-self:start;
}

/* Center column */
#profileAccount.profile-subpage-open .profile-likes-head > strong{
    grid-column:2;
    grid-row:1;
    justify-self:center;

    width:100%;
    text-align:center;
}

/* Left column */
#profileAccount.profile-subpage-open .profile-likes-count{
    grid-column:3;
    grid-row:1;
    justify-self:end;
}


/* ===== NEGAH PROFILE V1.8.8 — MAIN PROFILE HEADER MIRROR ===== */

/*
 * MAIN PROFILE ONLY
 *
 * TOP RIGHT : X
 *
 * ACCOUNT HEADER:
 * LEFT      : Avatar
 * NEXT      : Name / Email / Join date
 *
 * Likes / Offline subpages are intentionally untouched.
 */


/* ---------------------------------------------------------
   1) MAIN PROFILE CLOSE — TOP RIGHT
   --------------------------------------------------------- */

#profileModal .profile-card > .profile-close{
    left:auto !important;
    right:13px !important;
}


/* ---------------------------------------------------------
   2) MAIN ACCOUNT HEADER — AVATAR ON LEFT
   --------------------------------------------------------- */

#profileAccount:not(.profile-subpage-open) > .profile-account-head{
    direction:ltr !important;

    display:flex;
    flex-direction:row !important;
    align-items:center;

    gap:14px;

    text-align:left !important;
}


/* Avatar stays physically on the LEFT. */
#profileAccount:not(.profile-subpage-open)
> .profile-account-head
> .profile-avatar{
    order:1;

    flex:0 0 66px;

    margin:0 !important;
}


/* Text sits immediately to the RIGHT of avatar. */
#profileAccount:not(.profile-subpage-open)
> .profile-account-head
> .profile-account-copy{
    order:2;

    flex:1;
    min-width:0;

    direction:ltr !important;
    text-align:left !important;
}


/* ---------------------------------------------------------
   3) NAME — LEFT ALIGNED
   --------------------------------------------------------- */

#profileAccount:not(.profile-subpage-open)
> .profile-account-head
> .profile-account-copy
> h2{
    direction:ltr !important;
    text-align:left !important;

    margin-left:0 !important;
    margin-right:0 !important;
}


/* ---------------------------------------------------------
   4) EMAIL — LEFT ALIGNED
   --------------------------------------------------------- */

#profileAccount:not(.profile-subpage-open)
> .profile-account-head
> .profile-account-copy
> p{
    direction:ltr !important;
    text-align:left !important;

    margin-left:0 !important;
    margin-right:0 !important;
}


/* ---------------------------------------------------------
   5) JOIN DATE — SAME LEFT TEXT AXIS
   Persian text remains readable RTL, while its block
   stays aligned to the left with name/email.
   --------------------------------------------------------- */

#profileAccount:not(.profile-subpage-open)
> .profile-account-head
> .profile-account-copy
> .profile-join-date{
    display:block;

    direction:rtl !important;
    text-align:left !important;

    margin-left:0 !important;
    margin-right:0 !important;
}


/* ---------------------------------------------------------
   6) MOBILE
   --------------------------------------------------------- */

@media (max-width:480px){

    #profileModal .profile-card > .profile-close{
        left:auto !important;
        right:13px !important;
    }

    #profileAccount:not(.profile-subpage-open)
    > .profile-account-head{
        gap:11px;
    }

    #profileAccount:not(.profile-subpage-open)
    > .profile-account-head
    > .profile-avatar{
        flex-basis:58px;
    }
}


/* ===== NEGAH PROFILE V1.8.9 — STRUCTURAL SUBPAGE HEADER ===== */

/*
 * REAL TWO-ROW HEADER
 *
 * ROW 1:
 * RIGHT = modal X
 * LEFT  = Back
 *
 * ROW 2:
 * RIGHT = Title
 * LEFT  = Count
 *
 * Existing Likes/Offline lists and logic are untouched.
 */


/* ---------------------------------------------------------
   HEADER WRAPPER
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open .profile-subpage-header{
    display:flex;
    flex-direction:column;

    width:100%;

    margin:0 0 16px 0;
    padding:0;

    box-sizing:border-box;
}


/* ---------------------------------------------------------
   ROW 1 — BACK LEFT / X REMAINS MODAL TOP RIGHT
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open .profile-subpage-actions{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    direction:ltr;

    width:100%;
    min-height:38px;

    margin:0 0 10px 0;
    padding:0;

    box-sizing:border-box;
}


/* Back is now a normal element — NO absolute positioning. */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    position:static !important;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    margin:0 !important;

    grid-column:auto !important;
    grid-row:auto !important;

    justify-self:auto !important;
}


/* X stays physically at top-right of the modal. */

#profileModal .profile-card > .profile-close{
    left:auto !important;
    right:13px !important;
}


/* ---------------------------------------------------------
   ROW 2 — TITLE RIGHT / COUNT LEFT
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head,

#profileAccount.profile-subpage-open
.profile-offline-panel
.profile-subpage-header
.profile-likes-head{

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    grid-template-rows:
        auto !important;

    align-items:center;

    width:100%;

    min-height:34px !important;

    padding:0 !important;
    margin:0 !important;

    box-sizing:border-box;
}


/* TITLE — RIGHT */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head > strong{

    grid-column:1 !important;
    grid-row:1 !important;

    justify-self:start !important;

    width:auto !important;
    min-width:0;

    margin:0 !important;

    direction:rtl;
    text-align:right !important;

    font-size:15px;
}


/* COUNT — LEFT */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-count{

    grid-column:2 !important;
    grid-row:1 !important;

    justify-self:end !important;
    align-self:center;

    margin:0 !important;
}


/* ---------------------------------------------------------
   REMOVE OLD V1.6.5 CLOSE CLEARANCE FROM NEW HEADER
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head{

    padding-left:0 !important;
    padding-top:0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:480px){

    #profileModal .profile-card > .profile-close{
        left:auto !important;
        right:13px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-actions{

        min-height:36px;
        margin-bottom:9px;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-header{

        margin-bottom:15px;
    }
}


/* ===== NEGAH PROFILE V1.8.9.1 — SUBPAGE HEADER GEOMETRY ===== */

/*
 * Structural V1.8.9 stays intact.
 * This block ONLY tunes spacing/alignment.
 */


/* ---------------------------------------------------------
   COMPLETE HEADER
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open .profile-subpage-header{
    margin-bottom:14px !important;
}


/* ---------------------------------------------------------
   ROW 1 — X / BACK

   Make the action row more compact.
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open .profile-subpage-actions{
    min-height:34px !important;

    margin-top:0 !important;
    margin-bottom:12px !important;

    padding:0 !important;
}


/* Back keeps the same physical left edge. */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    margin:0 !important;
}


/* ---------------------------------------------------------
   ROW 2 — TITLE / COUNT

   Physical layout:
   LEFT column  = same action axis as hearts
   RIGHT column = title
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head,

#profileAccount.profile-subpage-open
.profile-offline-panel
.profile-subpage-header
.profile-likes-head{

    /*
     * 74px left control zone.
     * This places count on the same visual axis
     * as the heart/play control column below.
     */

    grid-template-columns:
        74px
        minmax(0,1fr) !important;

    min-height:34px !important;

    padding:0 !important;
    margin:0 !important;

    direction:ltr !important;
}


/* COUNT — PHYSICAL LEFT */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-count{

    grid-column:1 !important;
    grid-row:1 !important;

    justify-self:center !important;
    align-self:center !important;

    margin:0 !important;
}


/* TITLE — PHYSICAL RIGHT */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head > strong{

    grid-column:2 !important;
    grid-row:1 !important;

    justify-self:end !important;
    align-self:center !important;

    width:auto !important;

    margin:0 !important;

    direction:rtl !important;
    text-align:right !important;
}


/* ---------------------------------------------------------
   X / BACK VERTICAL AXIS
   --------------------------------------------------------- */

#profileModal .profile-card > .profile-close{
    top:13px !important;
    right:13px !important;
    left:auto !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:480px){

    #profileAccount.profile-subpage-open
    .profile-subpage-actions{
        min-height:34px !important;
        margin-bottom:10px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-header{
        margin-bottom:12px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-header
    .profile-likes-head,

    #profileAccount.profile-subpage-open
    .profile-offline-panel
    .profile-subpage-header
    .profile-likes-head{

        grid-template-columns:
            66px
            minmax(0,1fr) !important;
    }
}


/* ===== NEGAH PROFILE V1.8.9.2 — FINAL NAVIGATION HEADER ===== */

/*
 * RTL navigation:
 *
 * RIGHT = Back
 * LEFT  = Go to Radio
 *
 * Second row remains:
 * RIGHT = Title
 * LEFT  = Count
 */


/* ---------------------------------------------------------
   TOP ROW
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open .profile-subpage-actions{
    position:relative !important;

    display:flex !important;
    align-items:center !important;

    width:100% !important;
    min-height:42px !important;

    margin:0 0 12px 0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   BACK — TOP RIGHT
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{

    position:absolute !important;

    top:0 !important;
    right:0 !important;
    left:auto !important;

    min-height:42px;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;

    direction:rtl !important;

    z-index:5;
}


/* Add navigation arrow without changing HTML / JS. */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back::after{
    content:"←";

    display:inline-block;

    margin-right:7px;

    font-size:17px;
    line-height:1;

    opacity:.78;
}


/* ---------------------------------------------------------
   GO TO RADIO — TOP LEFT

   profileClose keeps the same ID and existing JS behavior.
   --------------------------------------------------------- */

#profileModal .profile-card > #profileClose{

    position:absolute !important;

    top:0 !important;
    left:0 !important;
    right:auto !important;

    width:auto !important;
    height:42px !important;
    min-width:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px;

    padding:0 14px !important;
    margin:0 !important;

    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:11px !important;

    background:rgba(255,255,255,.055) !important;

    color:#d6d6df !important;

    font-size:13px !important;
    font-weight:700 !important;
    line-height:1 !important;

    white-space:nowrap;

    cursor:pointer;

    z-index:20 !important;
}


#profileModal .profile-card > #profileClose:hover{
    background:rgba(255,255,255,.09) !important;
    color:#fff !important;
}


#profileModal
.profile-card
> #profileClose
.profile-close{
    place-items:initial !important;
}


/* Small neutral radio indicator */

#profileClose .profile-radio-return-icon{
    width:17px;
    height:17px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 17px;

    border:1.5px solid currentColor;
    border-radius:50%;

    font-size:8px;
    line-height:1;

    opacity:.85;
}


#profileClose .profile-radio-return-label{
    display:inline-block;
}


/* ---------------------------------------------------------
   MAIN PROFILE

   On the normal Profile page, keep the original close button
   compact. The text is hidden there so V1.8.8 geometry remains.
   --------------------------------------------------------- */

#profileAccount:not(.profile-subpage-open)
~ #profileClose{
    width:34px;
}


/* ---------------------------------------------------------
   LIGHT MODE
   --------------------------------------------------------- */

body.light-theme
#profileModal
.profile-card
> #profileClose{

    border-color:rgba(40,42,60,.14) !important;

    background:rgba(40,42,60,.045) !important;

    color:#5d6070 !important;
}


body.light-theme
#profileModal
.profile-card
> #profileClose:hover{

    background:rgba(40,42,60,.08) !important;

    color:#242532 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:480px){

    #profileAccount.profile-subpage-open
    .profile-subpage-actions{
        min-height:40px !important;
        margin-bottom:10px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{
        min-height:40px;
    }

    #profileModal .profile-card > #profileClose{
        height:40px !important;
        padding:0 11px !important;

        font-size:12px !important;
    }

    #profileClose .profile-radio-return-icon{
        width:15px;
        height:15px;
        flex-basis:15px;
    }
}


/* ===== NEGAH PROFILE V1.8.9.3 — NAVIGATION FIX ===== */


/* =========================================================
   MAIN PROFILE
   Restore the original compact X.
   ========================================================= */

#profileAccount:not(.profile-subpage-open) ~ #profileClose{
    top:13px !important;
    right:13px !important;
    left:auto !important;

    width:34px !important;
    min-width:34px !important;
    height:34px !important;

    padding:0 !important;

    border:0 !important;
    background:transparent !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:0 !important;
}


/* Hide "Go to radio" content on MAIN profile */

#profileAccount:not(.profile-subpage-open)
~ #profileClose
.profile-radio-return-icon,

#profileAccount:not(.profile-subpage-open)
~ #profileClose
.profile-radio-return-label{
    display:none !important;
}


/* Restore X visually */

#profileAccount:not(.profile-subpage-open)
~ #profileClose::before{
    content:"×";

    display:block;

    font-size:32px;
    font-weight:700;
    line-height:1;

    color:#b9bac5;
}


/* =========================================================
   SUBPAGES
   Likes + Offline
   ========================================================= */

#profileAccount.profile-subpage-open ~ #profileClose{
    top:0 !important;
    left:0 !important;
    right:auto !important;

    width:auto !important;
    min-width:0 !important;
    height:42px !important;

    padding:0 14px !important;

    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:11px !important;

    background:rgba(255,255,255,.055) !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    font-size:13px !important;
}


/* Make sure its real contents are visible in subpages */

#profileAccount.profile-subpage-open
~ #profileClose
.profile-radio-return-icon{
    display:inline-flex !important;
}

#profileAccount.profile-subpage-open
~ #profileClose
.profile-radio-return-label{
    display:inline-block !important;
}


/* No generated X in subpages */

#profileAccount.profile-subpage-open ~ #profileClose::before{
    content:none !important;
}


/* =========================================================
   SUBPAGE TOP ROW GEOMETRY

   Same horizontal inset as song cards.
   ========================================================= */

#profileAccount.profile-subpage-open .profile-subpage-actions{
    width:100% !important;

    min-height:42px !important;

    margin:0 0 12px 0 !important;

    padding:0 !important;
}


/* BACK — RIGHT */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    top:0 !important;
    right:0 !important;
    left:auto !important;

    height:42px !important;
    min-height:42px !important;

    margin:0 !important;
}


/* GO TO RADIO — LEFT */

#profileAccount.profile-subpage-open ~ #profileClose{
    top:0 !important;
}


/* =========================================================
   LIGHT MODE — MAIN X
   ========================================================= */

body.light-theme
#profileAccount:not(.profile-subpage-open)
~ #profileClose{
    background:transparent !important;
    border:0 !important;
}

body.light-theme
#profileAccount:not(.profile-subpage-open)
~ #profileClose::before{
    color:#686a78;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:480px){

    #profileAccount:not(.profile-subpage-open) ~ #profileClose{
        width:32px !important;
        min-width:32px !important;
        height:32px !important;
    }

    #profileAccount:not(.profile-subpage-open)
    ~ #profileClose::before{
        font-size:29px;
    }

    #profileAccount.profile-subpage-open ~ #profileClose,
    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{
        height:40px !important;
        min-height:40px !important;
    }
}


/* ===== NEGAH PROFILE V1.8.9.4 — DOM-CORRECT CLOSE STATE ===== */

/*
 * REAL DOM:
 *
 * .profile-card
 *   #profileClose
 *   ...
 *   #profileAccount
 *
 * Therefore state detection must happen on .profile-card via :has().
 */


/* =========================================================
   MAIN PROFILE
   profileAccount visible, but NOT in subpage mode.
   Restore original X.
   ========================================================= */

#profileModal
.profile-card:has(#profileAccount:not(.profile-subpage-open))
> #profileClose{

    top:13px !important;
    right:13px !important;
    left:auto !important;

    width:34px !important;
    min-width:34px !important;
    height:34px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;

    font-size:0 !important;
}


/* Hide radio contents on MAIN profile */

#profileModal
.profile-card:has(#profileAccount:not(.profile-subpage-open))
> #profileClose
.profile-radio-return-icon,

#profileModal
.profile-card:has(#profileAccount:not(.profile-subpage-open))
> #profileClose
.profile-radio-return-label{

    display:none !important;
}


/* Original-style X */

#profileModal
.profile-card:has(#profileAccount:not(.profile-subpage-open))
> #profileClose::before{

    content:"×" !important;

    display:block !important;

    font-size:32px !important;
    font-weight:700 !important;
    line-height:1 !important;

    color:#b9bac5 !important;
}


/* =========================================================
   SUBPAGE
   Likes / Offline
   Show "Go to Radio" on LEFT.
   ========================================================= */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{

    top:0 !important;
    left:0 !important;
    right:auto !important;

    width:auto !important;
    min-width:0 !important;
    height:42px !important;

    padding:0 14px !important;
    margin:0 !important;

    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:11px !important;

    background:rgba(255,255,255,.055) !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    font-size:13px !important;
    font-weight:700 !important;
}


/* Radio contents visible */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose
.profile-radio-return-icon{

    display:inline-flex !important;
}

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose
.profile-radio-return-label{

    display:inline-block !important;
}


/* No generated X in subpages */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose::before{

    content:none !important;
}


/* =========================================================
   TOP-RIGHT BACK
   Keep it exactly opposite Go-to-Radio.
   ========================================================= */

#profileAccount.profile-subpage-open
.profile-state
.profile-subpage-actions
.profile-likes-back{

    top:0 !important;
    right:0 !important;
    left:auto !important;

    height:42px !important;
    min-height:42px !important;

    margin:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

body.light-theme
#profileModal
.profile-card:has(#profileAccount:not(.profile-subpage-open))
> #profileClose{

    border:0 !important;
    background:transparent !important;
}

body.light-theme
#profileModal
.profile-card:has(#profileAccount:not(.profile-subpage-open))
> #profileClose::before{

    color:#686a78 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:480px){

    #profileModal
    .profile-card:has(#profileAccount:not(.profile-subpage-open))
    > #profileClose{

        width:32px !important;
        min-width:32px !important;
        height:32px !important;
    }

    #profileModal
    .profile-card:has(#profileAccount:not(.profile-subpage-open))
    > #profileClose::before{

        font-size:29px !important;
    }

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose{

        height:40px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        height:40px !important;
        min-height:40px !important;
    }
}


/* ===== NEGAH PROFILE V1.8.9.5 — EQUAL SUBPAGE NAV BUTTONS ===== */

/*
 * ONLY subpage navigation buttons.
 *
 * LEFT  = Go to Radio
 * RIGHT = Back
 *
 * Same:
 * - top position
 * - width
 * - height
 * - radius
 * - padding
 * - alignment
 */


/* GO TO RADIO — LEFT */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{

    top:16px !important;
    left:16px !important;
    right:auto !important;

    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;

    height:58px !important;
    min-height:58px !important;

    padding:0 14px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:14px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:16px !important;
    line-height:1 !important;
}


/* BACK — RIGHT */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{

    position:absolute !important;

    top:16px !important;
    right:16px !important;
    left:auto !important;

    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;

    height:58px !important;
    min-height:58px !important;

    padding:0 14px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:14px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:16px !important;
    line-height:1 !important;
}


/* Reserve exactly the same vertical area for the first row */

#profileAccount.profile-subpage-open
.profile-subpage-actions{

    min-height:74px !important;

    margin:0 0 12px 0 !important;
    padding:0 !important;
}


/* MOBILE */

@media (max-width:480px){

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose,

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        top:12px !important;

        width:150px !important;
        min-width:150px !important;
        max-width:150px !important;

        height:50px !important;
        min-height:50px !important;

        padding:0 10px !important;

        font-size:14px !important;

        border-radius:12px !important;
    }

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose{
        left:12px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{
        right:12px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-actions{
        min-height:62px !important;
    }
}


/* ===== NEGAH PROFILE V1.8.9.6 — COMPACT ALIGNED NAV ===== */

/*
 * Subpages only.
 * LEFT  : Go to Radio
 * RIGHT : Back
 *
 * Both:
 * 150 x 46
 * same top axis
 */


/* TOP ACTION ROW */

#profileAccount.profile-subpage-open
.profile-subpage-actions{
    position:relative !important;

    width:100% !important;
    height:62px !important;
    min-height:62px !important;

    margin:0 0 12px 0 !important;
    padding:0 !important;
}


/* GO TO RADIO — LEFT */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{

    top:16px !important;
    left:16px !important;
    right:auto !important;

    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    height:46px !important;
    min-height:46px !important;

    padding:0 10px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    font-size:14px !important;
    line-height:1 !important;
}


/* BACK — RIGHT */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{

    position:absolute !important;

    top:16px !important;
    right:16px !important;
    left:auto !important;

    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    height:46px !important;
    min-height:46px !important;

    padding:0 10px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    font-size:14px !important;
    line-height:1 !important;
}


/* MOBILE */

@media (max-width:480px){

    #profileAccount.profile-subpage-open
    .profile-subpage-actions{
        height:58px !important;
        min-height:58px !important;
    }

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose,

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        top:12px !important;

        width:132px !important;
        min-width:132px !important;
        max-width:132px !important;

        height:42px !important;
        min-height:42px !important;

        padding:0 8px !important;

        font-size:13px !important;

        border-radius:11px !important;
    }

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose{
        left:12px !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{
        right:12px !important;
    }
}


/* ===== NEGAH PROFILE V1.8.9.7 — SWAP + ALIGN NAV ===== */

/*
 * FINAL NAV ORDER:
 *
 * LEFT  = Back
 * RIGHT = Go to Radio
 *
 * Both exactly:
 * 150 × 46px
 * top: 16px
 */


/* ---------------------------------------------------------
   GO TO RADIO — RIGHT
   --------------------------------------------------------- */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{

    top:16px !important;

    right:16px !important;
    left:auto !important;

    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    padding:0 10px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    line-height:1 !important;
}


/* ---------------------------------------------------------
   BACK — LEFT
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{

    position:absolute !important;

    top:16px !important;

    left:16px !important;
    right:auto !important;

    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    padding:0 10px !important;
    margin:0 !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    line-height:1 !important;
}


/* ---------------------------------------------------------
   KEEP ONE CLEAN ROW
   --------------------------------------------------------- */

#profileAccount.profile-subpage-open
.profile-subpage-actions{

    position:relative !important;

    height:62px !important;
    min-height:62px !important;

    margin:0 0 12px 0 !important;
    padding:0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:480px){

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose,

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        top:12px !important;

        width:132px !important;
        min-width:132px !important;
        max-width:132px !important;

        height:42px !important;
        min-height:42px !important;
        max-height:42px !important;
    }


    /* Go to Radio — RIGHT */

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose{

        right:12px !important;
        left:auto !important;
    }


    /* Back — LEFT */

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        left:12px !important;
        right:auto !important;
    }


    #profileAccount.profile-subpage-open
    .profile-subpage-actions{

        height:58px !important;
        min-height:58px !important;
    }
}


/* ===== NEGAH PROFILE V1.8.9.8 — EXACT 24PX NAV ALIGNMENT ===== */

/*
 * Browser measurement:
 *
 * Go to Radio top = 125.5
 * Back top        = 149.5
 * Difference      = +24px
 *
 * Size already identical:
 * 132 × 42
 *
 * Therefore ONLY Back is moved 24px upward.
 */

@media (max-width:480px){

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        top:-12px !important;
    }
}


/* ===== NEGAH PROFILE — SUBPAGE NAV FINAL MICRO-TUNE 120x38 ===== */

/*
 * Current measured geometry:
 * radio top = back top
 * radio size = back size
 *
 * Keep geometry synchronized.
 * Only make both controls smaller.
 */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose,

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{

    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

    padding:0 10px !important;

    box-sizing:border-box !important;

    border-radius:11px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:14px !important;
    line-height:1 !important;
}

/* Keep the current exact vertical alignment. */
#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{
    top:16px !important;
}

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    top:16px !important;
}


/* Mobile */
@media (max-width:480px){

    #profileModal
    .profile-card:has(#profileAccount.profile-subpage-open)
    > #profileClose,

    #profileAccount.profile-subpage-open
    .profile-subpage-actions
    .profile-likes-back{

        width:112px !important;
        min-width:112px !important;
        max-width:112px !important;

        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;

        padding:0 8px !important;

        font-size:13px !important;
        border-radius:10px !important;
    }
}


/* ===== NEGAH PROFILE — EXACT SUBPAGE NAV ALIGNMENT ===== */

/*
 * Measured before fix:
 *
 * Radio:
 * right gap = 13px
 * top       = 129.5
 *
 * Back:
 * left gap  = 29px
 * top       = 153.5
 *
 * Required correction for Back:
 * X = -16px
 * Y = -24px
 *
 * Size remains exactly 112x36.
 */


/* GO TO RADIO — RIGHT REFERENCE */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{

    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    right:13px !important;
    left:auto !important;
}


/* BACK — EXACT MIRROR */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{

    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    /*
     * Existing rendered position:
     * left gap = 29px
     * top difference = +24px
     *
     * Translate to exact mirror.
     */
    transform:translate(-16px,-24px) !important;
}


/* ===== NEGAH PROFILE — SUBPAGE HEADER GAP MICRO-TUNE ===== */

/*
 * Navigation buttons are now correct and frozen.
 *
 * ONLY move the second header row upward:
 * - count
 * - title
 *
 * Likes + Offline.
 */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head{
    transform:translateY(-20px) !important;
}


/*
 * Recover the space created by transform so the song list
 * follows the header upward as well.
 */
#profileAccount.profile-subpage-open
.profile-subpage-header{
    margin-bottom:-6px !important;
}


/* Mobile */
@media (max-width:480px){

    #profileAccount.profile-subpage-open
    .profile-subpage-header
    .profile-likes-head{
        transform:translateY(-16px) !important;
    }
}


/* ===== NEGAH PROFILE — SUBPAGE NAV PIXEL ALIGN V1 ===== */

/*
 * Measured after rollback:
 *
 * Radio:
 * right gap = 14px
 * top       = 35px
 *
 * Back:
 * left gap  = 23px
 * top       = 37px
 *
 * Correction:
 * Back 9px LEFT
 * Back 2px UP
 *
 * Button size remains 112x36.
 */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    transform:translate(-25px,-26px) !important;
}


/* ===== NEGAH PROFILE — SUBPAGE TITLE GAP HALF ===== */

/*
 * Navigation buttons are FROZEN.
 * ONLY reduce the vertical gap below them.
 * Moves title + count upward.
 */

#profileAccount.profile-subpage-open
.profile-subpage-header
.profile-likes-head{
    transform:translateY(-38px) !important;
}

/* Pull following content upward accordingly */
#profileAccount.profile-subpage-open
.profile-subpage-header{
    margin-bottom:-24px !important;
}

@media (max-width:480px){

    #profileAccount.profile-subpage-open
    .profile-subpage-header
    .profile-likes-head{
        transform:translateY(-30px) !important;
    }

    #profileAccount.profile-subpage-open
    .profile-subpage-header{
        margin-bottom:-18px !important;
    }
}


/* ===== NEGAH PROFILE — NAV ALIGN EXACTLY TO SONG ROW ===== */

/*
 * Browser measurement:
 *
 * SONG ROW:
 * left  = 725
 * right = 1067
 *
 * BACK:
 * left = 715
 * -> move RIGHT 10px
 *
 * RADIO:
 * right = 1077
 * -> move LEFT 10px
 *
 * Vertical difference = 0px.
 *
 * ONLY horizontal position is changed.
 */


/* GO TO RADIO — move 10px LEFT */

#profileModal
.profile-card:has(#profileAccount.profile-subpage-open)
> #profileClose{
    transform:translateX(-10px) !important;
}


/* BACK — previous transform included vertical alignment.
   Preserve Y exactly and add +10px to current X. */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    transform:translate(-6px,-24px) !important;
}


/* ===== NEGAH PROFILE — BACK EXACT SONG ROW LEFT ALIGN ===== */

/*
 * Measured:
 * BACK_LEFT = 734
 * ROW_LEFT  = 725
 *
 * Back must move exactly 9px LEFT.
 *
 * Previous transform:
 * translate(-6px,-24px)
 *
 * New:
 * translate(-15px,-24px)
 *
 * Y remains unchanged.
 */

#profileAccount.profile-subpage-open
.profile-subpage-actions
.profile-likes-back{
    transform:translate(-15px,-24px) !important;
}


/* ===== NEGAH LIKED SONGS V1.9 — COVER + LTR ROW ===== */

/*
 * Frozen Profile header is intentionally untouched.
 * Liked-song content flows visually from left to right:
 * cover -> copy -> offline -> like.
 */
.profile-liked-row{
    direction:ltr;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 34px 34px;
    align-items:center;
    column-gap:10px;
}

.profile-liked-cover-wrap{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );
    border:1px solid rgba(255,255,255,.075);
    box-sizing:border-box;
}

.profile-liked-cover-wrap::before{
    content:'♫';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    line-height:1;
    color:rgba(255,255,255,.30);
}

.profile-liked-cover{
    position:relative;
    z-index:1;
    display:none;
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-liked-cover-wrap.has-cover
.profile-liked-cover{
    display:block;
}

.profile-liked-copy{
    min-width:0;
    direction:ltr;
    text-align:left;
}

.profile-liked-copy strong{
    direction:ltr;
    text-align:left;
    unicode-bidi:plaintext;
}

.profile-liked-copy small{
    text-align:left;
    unicode-bidi:plaintext;
}

.profile-liked-offline,
.profile-liked-remove{
    margin:0;
    justify-self:center;
}

body.light-theme .profile-liked-cover-wrap{
    background:
        linear-gradient(
            145deg,
            rgba(43,45,58,.09),
            rgba(43,45,58,.025)
        );
    border-color:rgba(43,45,58,.08);
}

body.light-theme
.profile-liked-cover-wrap::before{
    color:rgba(43,45,58,.28);
}

@media (max-width:420px){
    .profile-liked-row{
        grid-template-columns:44px minmax(0,1fr) 32px 34px;
        column-gap:8px;
    }

    .profile-liked-cover-wrap{
        width:44px;
        height:44px;
        min-width:44px;
        border-radius:9px;
    }
}

/* ===== NEGAH LIKED SONGS V1.9.2 — PLAIN COUNT LABEL ===== */

/*
 * Only the Liked Songs counter.
 * Offline counter keeps its existing circular design.
 */
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesCount{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;

    color:inherit !important;
    font-size:12px !important;
    font-weight:600 !important;

    white-space:nowrap !important;

    /* Keep the exact existing header position. */
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 !important;
}

body.light-theme
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesCount{
    background:transparent !important;
    border:0 !important;
    color:inherit !important;
}

/* ===== NEGAH LIKED SONGS V1.9.3 — COUNT ORDER ===== */
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesCount{
    direction:ltr !important;
    unicode-bidi:isolate !important;
}

/* ===== NEGAH LIKED SONGS V1.9.4 — PERSIAN COUNT ORDER FIX ===== */
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesCount{
    direction:rtl !important;
    unicode-bidi:normal !important;
}

/* ===== NEGAH LIKED SONGS V1.9.5 — HARD COUNT ORDER ===== */

#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesCount{
    direction:ltr !important;
    unicode-bidi:isolate !important;

    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
}

#profileLikesCount
.profile-likes-count-number,
#profileLikesCount
.profile-likes-count-label{
    display:block;
    direction:rtl;
    unicode-bidi:isolate;
}

/* ===== NEGAH LIKED SONGS V1.9.6 — PHYSICAL COUNT COLUMNS ===== */

#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesCount{
    display:grid !important;
    grid-template-columns:auto auto !important;
    grid-template-rows:auto !important;
    column-gap:4px !important;

    direction:ltr !important;
    unicode-bidi:isolate !important;

    align-items:center !important;
}

/* Physical LEFT = number */
#profileLikesCount
.profile-likes-count-number{
    grid-column:1 !important;
    grid-row:1 !important;

    direction:ltr !important;
    unicode-bidi:isolate !important;

    justify-self:end !important;
}

/* Physical RIGHT = word */
#profileLikesCount
.profile-likes-count-label{
    grid-column:2 !important;
    grid-row:1 !important;

    direction:rtl !important;
    unicode-bidi:isolate !important;

    justify-self:start !important;
}

/* ===== NEGAH OFFLINE V1.8 — UNIFIED LIKED-STYLE ROWS ===== */

/*
 * Physical row:
 * LEFT -> RIGHT
 * cover | title/artist | play | remove
 */
#profileOfflineList .profile-offline-row{
    direction:ltr !important;

    display:grid !important;

    grid-template-columns:
        48px
        minmax(0,1fr)
        34px
        34px !important;

    align-items:center !important;
    column-gap:10px !important;
}

/* Cover */
#profileOfflineList
.profile-offline-row
.profile-liked-cover-wrap{
    grid-column:1 !important;
    grid-row:1 !important;
}

/* English / mixed metadata */
#profileOfflineList
.profile-offline-row
.profile-liked-copy{
    grid-column:2 !important;
    grid-row:1 !important;

    min-width:0 !important;

    direction:ltr !important;
    text-align:left !important;
}

/* Play */
#profileOfflineList
.profile-offline-row
.profile-offline-play{
    grid-column:3 !important;
    grid-row:1 !important;

    justify-self:center !important;
}

/* Delete */
#profileOfflineList
.profile-offline-row
.profile-offline-remove{
    grid-column:4 !important;
    grid-row:1 !important;

    justify-self:center !important;
}

/*
 * The saved check is intentionally gone.
 * Presence in "My Offline" already means saved.
 */
#profileOfflineList
.profile-offline-saved-icon{
    display:none !important;
}

@media (max-width:420px){
    #profileOfflineList .profile-offline-row{
        grid-template-columns:
            44px
            minmax(0,1fr)
            32px
            34px !important;

        column-gap:8px !important;
    }
}

/* ===== NEGAH OFFLINE V1.9 — FINAL ROW FIX PACK ===== */

/*
 * LEFT -> RIGHT:
 * cover | metadata | play | saved | trash
 *
 * Controls are intentionally close together and closer
 * to the physical right edge of the song card.
 */
#profileOfflineList .profile-offline-row{
    direction:ltr !important;

    display:grid !important;

    grid-template-columns:
        48px
        minmax(0,1fr)
        30px
        30px
        30px !important;

    column-gap:4px !important;

    padding-left:10px !important;
    padding-right:8px !important;

    align-items:center !important;
}

/* Cover */
#profileOfflineList
.profile-offline-row
.profile-liked-cover-wrap{
    grid-column:1 !important;
    grid-row:1 !important;
}

/* Copy */
#profileOfflineList
.profile-offline-row
.profile-liked-copy{
    grid-column:2 !important;
    grid-row:1 !important;

    min-width:0 !important;

    direction:ltr !important;
    text-align:left !important;
}

/* Play */
#profileOfflineList
.profile-offline-row
.profile-offline-play{
    grid-column:3 !important;
    grid-row:1 !important;

    width:30px !important;
    height:30px !important;

    justify-self:center !important;
}

/* Saved */
#profileOfflineList
.profile-offline-row
.profile-offline-saved-icon{
    display:inline-flex !important;

    grid-column:4 !important;
    grid-row:1 !important;

    width:30px !important;
    height:30px !important;

    justify-self:center !important;
}

/* Trash */
#profileOfflineList
.profile-offline-row
.profile-offline-remove{
    grid-column:5 !important;
    grid-row:1 !important;

    width:30px !important;
    height:30px !important;

    justify-self:center !important;
}

/*
 * Delete confirmation stays INSIDE the card.
 * It occupies the metadata + control area instead of
 * being appended beyond the physical row.
 */
#profileOfflineList
.profile-offline-row.remove-confirm-open{
    grid-template-columns:
        48px
        minmax(0,1fr) !important;

    column-gap:8px !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-liked-cover-wrap{
    grid-column:1 !important;
    grid-row:1 !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-liked-copy{
    display:none !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-play,
#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-saved-icon,
#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-remove{
    display:none !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-remove-confirm{
    grid-column:2 !important;
    grid-row:1 !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:6px 8px !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    direction:rtl !important;
    gap:6px !important;

    overflow:hidden !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-remove-question{
    min-width:0 !important;

    font-size:11px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-remove-actions{
    flex:0 0 auto !important;
    gap:4px !important;
}

#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-remove-yes,
#profileOfflineList
.profile-offline-row.remove-confirm-open
.profile-offline-remove-cancel{
    min-height:27px !important;
    padding:3px 7px !important;
    font-size:10px !important;
}

/* Phone */
@media (max-width:420px){

    #profileOfflineList .profile-offline-row{
        grid-template-columns:
            44px
            minmax(0,1fr)
            28px
            28px
            28px !important;

        column-gap:3px !important;

        padding-left:9px !important;
        padding-right:6px !important;
    }

    #profileOfflineList
    .profile-offline-row
    .profile-offline-play,
    #profileOfflineList
    .profile-offline-row
    .profile-offline-saved-icon,
    #profileOfflineList
    .profile-offline-row
    .profile-offline-remove{
        width:28px !important;
        height:28px !important;
    }

    #profileOfflineList
    .profile-offline-row.remove-confirm-open{
        grid-template-columns:
            44px
            minmax(0,1fr) !important;

        column-gap:6px !important;
    }

    #profileOfflineList
    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-confirm{
        padding:5px 6px !important;
        gap:4px !important;
    }

    #profileOfflineList
    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-question{
        font-size:10px !important;
    }

    #profileOfflineList
    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-yes,
    #profileOfflineList
    .profile-offline-row.remove-confirm-open
    .profile-offline-remove-cancel{
        padding:3px 5px !important;
    }
}


/* ===== NEGAH OFFLINE V1.9.1 — PLAIN COUNT LABEL ===== */

/*
 * Match the frozen Liked Songs count:
 * physical LEFT = number
 * physical RIGHT = "آهنگ"
 */
#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineCount{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;

    color:inherit !important;

    display:grid !important;
    grid-template-columns:auto auto !important;
    grid-template-rows:auto !important;
    column-gap:4px !important;

    direction:ltr !important;
    unicode-bidi:isolate !important;

    align-items:center !important;

    font-size:12px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
}

#profileOfflineCount
.profile-offline-count-number{
    grid-column:1 !important;
    grid-row:1 !important;

    display:block !important;

    direction:ltr !important;
    unicode-bidi:isolate !important;

    justify-self:end !important;
}

#profileOfflineCount
.profile-offline-count-label{
    grid-column:2 !important;
    grid-row:1 !important;

    display:block !important;

    direction:rtl !important;
    unicode-bidi:isolate !important;

    justify-self:start !important;
}

body.light-theme
#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineCount{
    border:0 !important;
    background:transparent !important;
    color:inherit !important;
}

/* ===== NEGAH OFFLINE PLAYER V2.0 — MINI PLAYER UI ===== */

#offlineMiniPlayer[hidden]{
    display:none !important;
}

#offlineMiniPlayer{
    flex:0 0 auto;

    margin-top:10px;
    padding:10px 11px 9px;

    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    background:rgba(255,255,255,.045);

    direction:ltr;
}

.offline-mini-now{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    column-gap:9px;
    align-items:center;
}

.offline-mini-cover-wrap{
    width:42px;
    height:42px;

    overflow:hidden;

    border-radius:9px;

    background:rgba(255,255,255,.07);
}

.offline-mini-cover{
    display:none;

    width:100%;
    height:100%;

    object-fit:cover;
}

.offline-mini-cover-wrap.has-cover
.offline-mini-cover{
    display:block;
}

.offline-mini-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    text-align:left;
    direction:ltr;
}

.offline-mini-copy strong,
.offline-mini-copy small{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.offline-mini-copy strong{
    color:rgba(255,255,255,.94);

    font-size:13px;
    font-weight:700;
}

.offline-mini-copy small{
    margin-top:2px;

    color:rgba(255,255,255,.53);

    font-size:11px;
}

.offline-mini-progress{
    margin-top:9px;
}

.offline-mini-seek{
    display:block;

    width:100%;
    height:18px;

    margin:0;

    cursor:pointer;

    accent-color:#1ed760;
}

.offline-mini-times{
    margin-top:-1px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    color:rgba(255,255,255,.48);

    font-size:10px;
    font-variant-numeric:tabular-nums;
}

.offline-mini-controls{
    margin-top:4px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;
}

.offline-mini-control{
    width:34px;
    height:34px;

    padding:0;

    border:0;
    border-radius:50%;

    background:transparent;
    color:rgba(255,255,255,.74);

    display:inline-flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:
        color .15s ease,
        transform .15s ease,
        background-color .15s ease;
}

.offline-mini-control svg{
    display:block;

    width:22px;
    height:22px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.offline-mini-control:hover{
    color:#fff;
    transform:scale(1.05);
}


/* ===== NEGAH OFFLINE SHUFFLE/REPEAT ACTIVE V1 ===== */

.offline-mini-mode{
    position:relative;
    color:rgba(255,255,255,.42);
}

.offline-mini-mode.is-active{
    color:#38d996;
    background:rgba(56,217,150,.13);
    box-shadow:
        inset 0 0 0 1px rgba(56,217,150,.28),
        0 0 12px rgba(56,217,150,.08);
}

.offline-mini-mode.is-active:hover{
    color:#56e5aa;
    background:rgba(56,217,150,.18);
}

.offline-mini-repeat-one{
    position:absolute;
    right:2px;
    bottom:1px;

    min-width:13px;
    height:13px;

    padding:0 2px;

    border-radius:7px;

    background:#38d996;
    color:#0f1714;

    font-size:9px;
    font-weight:800;
    line-height:13px;
    text-align:center;

    pointer-events:none;
}

.offline-mini-repeat-one[hidden]{
    display:none !important;
}

.offline-mini-main{
    width:40px;
    height:40px;

    color:#101217;
    background:#fff;
}

.offline-mini-main:hover{
    color:#101217;
    background:rgba(255,255,255,.92);
}

.offline-mini-main-shape{
    fill:currentColor;
    stroke:none;
}

.offline-mini-control:disabled{
    opacity:.32;
    cursor:default;
    transform:none;
}


/* Light mode */

body.light-theme
#offlineMiniPlayer{
    border-color:rgba(22,25,35,.09);
    background:rgba(22,25,35,.035);
}

body.light-theme
.offline-mini-cover-wrap{
    background:rgba(22,25,35,.06);
}

body.light-theme
.offline-mini-copy strong{
    color:rgba(22,25,35,.92);
}

body.light-theme
.offline-mini-copy small{
    color:rgba(22,25,35,.52);
}

body.light-theme
.offline-mini-times{
    color:rgba(22,25,35,.48);
}

body.light-theme
.offline-mini-control{
    color:rgba(22,25,35,.70);
}

body.light-theme
.offline-mini-control:hover{
    color:#11141d;
}

body.light-theme
.offline-mini-mode{
    color:rgba(22,25,35,.42);
}

body.light-theme
.offline-mini-mode.is-active{
    color:#087f57;
    background:rgba(24,177,119,.12);
    box-shadow:
        inset 0 0 0 1px rgba(24,177,119,.24),
        0 0 10px rgba(24,177,119,.06);
}

body.light-theme
.offline-mini-mode.is-active:hover{
    color:#066f4c;
    background:rgba(24,177,119,.17);
}

body.light-theme
.offline-mini-repeat-one{
    background:#159b69;
    color:#fff;
}

body.light-theme
.offline-mini-main{
    color:#fff;
    background:#171a22;
}

body.light-theme
.offline-mini-main:hover{
    color:#fff;
    background:#242833;
}


@media (max-width:420px){

    #offlineMiniPlayer{
        margin-top:8px;
        padding:9px 10px 8px;
    }

    .offline-mini-now{
        grid-template-columns:
            38px minmax(0,1fr);

        column-gap:8px;
    }

    .offline-mini-cover-wrap{
        width:38px;
        height:38px;
    }

    .offline-mini-controls{
        gap:16px;
    }
}

@media (prefers-reduced-motion:reduce){

    .offline-mini-control{
        transition:none;
    }
}


/* ===== NEGAH OFFLINE PLAYER V2.0.1 — BOTTOM POSITION ONLY ===== */

/*
 * Position only.
 * Do NOT change width, height, padding, cover,
 * typography, seek bar or transport controls.
 */
#profileAccount.profile-subpage-open
#profileOfflinePanel
#offlineMiniPlayer{
    margin-top:auto !important;
    margin-bottom:0 !important;
}



/* ===== NEGAH LIKED SONGS V1.9.7B — LIST ONLY FLEX FIX ===== */

/*
 * IMPORTANT:
 * Likes only.
 * Do not touch profileLikesPanel.
 * Do not touch Offline panel/list/player.
 *
 * The old shared .profile-likes-list rule has max-height:310px.
 * Override that limit only for the real Liked Songs list.
 */
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList{
    flex:1 1 0 !important;
    min-height:0 !important;

    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    padding-bottom:8px;
}

/* Keep header outside the scrolling list. */
#profileAccount.profile-subpage-open
#profileLikesPanel
> .profile-subpage-header{
    flex:0 0 auto !important;
}

/* Loading / empty messages must not consume the flexible list height. */
#profileAccount.profile-subpage-open
#profileLikesPanel
> #profileLikesLoading,
#profileAccount.profile-subpage-open
#profileLikesPanel
> #profileLikesEmpty{
    flex:0 0 auto !important;
}

/* Subtle scrollbar */
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent;
}

#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList::-webkit-scrollbar{
    width:5px;
}

#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList::-webkit-scrollbar-track{
    background:transparent;
}

#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:999px;
}

body.light-theme
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList{
    scrollbar-color:rgba(22,25,35,.18) transparent;
}

body.light-theme
#profileAccount.profile-subpage-open
#profileLikesPanel
#profileLikesList::-webkit-scrollbar-thumb{
    background:rgba(22,25,35,.18);
}



/* ===== NEGAH OFFLINE V1.9.8 — LIST FLEX ABOVE PLAYER ===== */

/*
 * Offline only.
 * Header stays fixed.
 * Mini Player stays fixed at bottom.
 * Only Offline list consumes the remaining space and scrolls.
 *
 * Do NOT touch Likes.
 * Do NOT change Mini Player appearance or position.
 */
#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList{
    flex:1 1 0 !important;
    min-height:0 !important;

    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    padding-bottom:8px;
}


/* Header must never enter the scrolling area. */
#profileAccount.profile-subpage-open
#profileOfflinePanel
> .profile-subpage-header{
    flex:0 0 auto !important;
}


/* Loading / empty messages must not consume flexible list space. */
#profileAccount.profile-subpage-open
#profileOfflinePanel
> #profileOfflineLoading,
#profileAccount.profile-subpage-open
#profileOfflinePanel
> #profileOfflineEmpty{
    flex:0 0 auto !important;
}


/* Mini Player keeps its own natural size at the bottom. */
#profileAccount.profile-subpage-open
#profileOfflinePanel
> #offlineMiniPlayer{
    flex:0 0 auto !important;
}


/* Subtle scrollbar */
#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent;
}

#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList::-webkit-scrollbar{
    width:5px;
}

#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList::-webkit-scrollbar-track{
    background:transparent;
}

#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:999px;
}

body.light-theme
#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList{
    scrollbar-color:rgba(22,25,35,.18) transparent;
}

body.light-theme
#profileAccount.profile-subpage-open
#profileOfflinePanel
#profileOfflineList::-webkit-scrollbar-thumb{
    background:rgba(22,25,35,.18);
}



/* ===== NEGAH OFFLINE PLAYER POLISH V1 ===== */

/*
 * Visual only.
 * Do not change Offline playback logic or bottom positioning.
 */

#offlineMiniPlayer{
    padding:9px 12px 8px;

    border-color:rgba(255,255,255,.09);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.022)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}


/* Now playing */

.offline-mini-now{
    grid-template-columns:
        44px minmax(0,1fr);

    column-gap:10px;

    align-items:center;
}

.offline-mini-cover-wrap{
    width:44px;
    height:44px;

    border-radius:10px;

    overflow:hidden;

    box-shadow:
        0 4px 12px rgba(0,0,0,.18);
}

.offline-mini-cover{
    width:100%;
    height:100%;
    object-fit:cover;
}

.offline-mini-copy{
    min-width:0;
}

.offline-mini-copy strong{
    display:block;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    padding-inline-end:5px;

    font-size:13px;
    font-weight:750;
    line-height:1.35;
}

.offline-mini-copy small{
    display:block;

    margin-top:2px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    padding-inline-end:5px;

    font-size:10.5px;
    line-height:1.3;

    opacity:.82;
}


/* Seek */

.offline-mini-progress{
    margin-top:7px;
}

.offline-mini-seek{
    display:block;

    width:100%;
    height:16px;

    margin:0;

    cursor:pointer;
}


/*
 * Keep the time labels visually separate
 * from the seek track.
 */
.offline-mini-times{
    margin-top:3px;

    padding:0 1px;

    font-size:9.5px;
    line-height:1.15;

    opacity:.78;
}


/* Five transport/mode controls */

.offline-mini-controls{
    margin-top:3px;

    gap:clamp(8px, 3.5vw, 17px);
}

.offline-mini-control{
    width:32px;
    height:32px;
}

.offline-mini-control svg{
    width:20px;
    height:20px;
}

.offline-mini-main{
    width:39px;
    height:39px;

    box-shadow:
        0 3px 11px rgba(0,0,0,.16);
}


/*
 * Shuffle / Repeat are secondary controls.
 * Active state from V1 remains clearly visible.
 */
.offline-mini-mode{
    width:31px;
    height:31px;
}

.offline-mini-mode svg{
    width:19px;
    height:19px;
}


/* Light mode */

body.light-theme
#offlineMiniPlayer{
    border-color:rgba(22,25,35,.08);

    background:
        linear-gradient(
            145deg,
            rgba(22,25,35,.035),
            rgba(22,25,35,.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.60);
}

body.light-theme
.offline-mini-cover-wrap{
    box-shadow:
        0 4px 12px rgba(22,25,35,.11);
}

body.light-theme
.offline-mini-main{
    box-shadow:
        0 3px 10px rgba(22,25,35,.14);
}


/* Small phones */

@media (max-width:420px){

    #offlineMiniPlayer{
        padding:8px 9px 7px;
    }

    .offline-mini-now{
        grid-template-columns:
            40px minmax(0,1fr);

        column-gap:8px;
    }

    .offline-mini-cover-wrap{
        width:40px;
        height:40px;
    }

    .offline-mini-progress{
        margin-top:6px;
    }

    .offline-mini-times{
        margin-top:3px;
    }

    .offline-mini-controls{
        margin-top:2px;
        gap:clamp(7px, 3.4vw, 14px);
    }

    .offline-mini-control{
        width:31px;
        height:31px;
    }

    .offline-mini-main{
        width:38px;
        height:38px;
    }

    .offline-mini-mode{
        width:30px;
        height:30px;
    }
}


/* ===== NEGAH OFFLINE PLAYER TIME SPACING V1 ===== */

.offline-mini-times{
    margin-top:6px;
    padding:0 3px;

    font-size:10px;
    line-height:1.2;

    opacity:.88;
}

@media (max-width:420px){
    .offline-mini-times{
        margin-top:6px;
        padding:0 3px;
    }
}


/* ===== NEGAH OFFLINE PLAYER FLOATING SURFACE V1 ===== */

/*
 * Surface separation only.
 * No dimensions, spacing or playback controls are changed.
 */

#offlineMiniPlayer{
    border-color:rgba(255,255,255,.14);

    background:
        linear-gradient(
            145deg,
            rgba(31,32,40,.98),
            rgba(24,25,32,.98)
        );

    box-shadow:
        0 -12px 28px rgba(0,0,0,.24),
        0 12px 30px rgba(0,0,0,.22),
        0 0 0 1px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* Light theme */

body.light-theme
#offlineMiniPlayer{
    border-color:rgba(22,25,35,.13);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(246,247,249,.99)
        );

    box-shadow:
        0 -12px 28px rgba(22,25,35,.10),
        0 12px 30px rgba(22,25,35,.09),
        0 0 0 1px rgba(22,25,35,.025),
        inset 0 1px 0 rgba(255,255,255,.90);
}

/* ===== TUNER_CENTER_PADDING_FIX_V3 =====
 * The circular tuner now uses repeated channel copies.
 * Legacy V2 48%/47% edge breathing-room breaks reliable
 * initial centering of the selected middle-copy station.
 */
.channel-tuner-shell .channel-rail {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 480px) {
    .channel-tuner-shell .channel-rail {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}