:root {
  color-scheme: light;
  --bg: #edf1f5;
  --bg-soft: #dde5ee;
  --bg-alt: #f3f6fa;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: #ffffff;
  --border: rgba(30, 47, 73, 0.16);
  --text: #1f3148;
  --muted: #5f7189;
  --accent: #f0c36c;
  --accent-2: #71d4c7;
  --accent-3: #8da4ff;
  --sidebar-bg: linear-gradient(180deg, rgba(246, 249, 253, 0.96), rgba(232, 238, 247, 0.9));
  --menu-text: #42556f;
  --menu-active-text: #20334b;
  --menu-active-bg: rgba(61, 82, 110, 0.13);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 252, 0.95));
  --stat-bg: rgba(36, 53, 78, 0.06);
  --reciter-style: #364d69;
  --chip-text: #41546e;
  --chip-bg: rgba(36, 53, 78, 0.08);
  --badge-text: #1f3249;
  --badge-bg: rgba(36, 53, 78, 0.12);
  --play-text: #1f3249;
  --play-bg: rgba(36, 53, 78, 0.16);
  --duration-text: #1f3249;
  --duration-bg: rgba(36, 53, 78, 0.16);
  --ghost-text: #31445d;
  --ghost-bg: rgba(36, 53, 78, 0.08);
  --ghost-border: rgba(36, 53, 78, 0.14);
  --shadow: 0 16px 48px rgba(17, 29, 43, 0.14);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

body[data-theme='white'] {
  --bg: #f8f9fb;
  --bg-soft: #eef2f7;
  --bg-alt: #ffffff;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-strong: #ffffff;
  --border: rgba(39, 57, 85, 0.13);
  --text: #21344c;
  --muted: #61748d;
  --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 246, 252, 0.94));
  --menu-text: #455a75;
  --menu-active-text: #21344c;
  --menu-active-bg: rgba(66, 88, 118, 0.11);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 253, 0.98));
  --stat-bg: rgba(39, 57, 85, 0.05);
  --reciter-style: #3a5170;
  --chip-text: #455a74;
  --chip-bg: rgba(39, 57, 85, 0.07);
  --badge-text: #21344c;
  --badge-bg: rgba(39, 57, 85, 0.11);
  --play-text: #21344c;
  --play-bg: rgba(39, 57, 85, 0.14);
  --duration-text: #21344c;
  --duration-bg: rgba(39, 57, 85, 0.14);
  --ghost-text: #334862;
  --ghost-bg: rgba(39, 57, 85, 0.07);
  --ghost-border: rgba(39, 57, 85, 0.13);
  --shadow: 0 14px 40px rgba(17, 29, 43, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(113, 212, 199, 0.2), transparent 28%),
    radial-gradient(circle at top right, rgba(240, 195, 108, 0.18), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 45%, var(--bg-alt) 100%);
  direction: rtl;
  text-align: right;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

#app {
  min-height: 100vh;
}

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 20px;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  backdrop-filter: blur(18px);
  /* stick to viewport so footer buttons always stay visible */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 22px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #0b1320;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), #ffe5b0);
  box-shadow: var(--shadow);
}

.brand p,
.brand span,
.eyebrow,
.menu-item,
.video-meta p,
.reciter-card p,
.hero-copy p,
.now-playing p,
.playlist-card p,
.about-card p,
.about-card li {
  margin: 0;
}

.brand p {
  font-size: 1.05rem;
  font-weight: 700;
}

.brand span,
.eyebrow,
.video-meta p,
.reciter-card p,
.now-playing p,
.playlist-card p,
.about-card p,
.about-card li {
  color: var(--muted);
}

.menu {
  display: grid;
  gap: 8px;
}

.menu-item {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--menu-text);
  background: transparent;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.menu-item:hover,
.menu-item.active {
  color: var(--menu-active-text);
  background: var(--menu-active-bg);
  transform: translateX(-3px);
}

.sidebar-footer {
  display: grid;
  gap: 12px;
}

.content {
  padding: 28px;
  display: grid;
  gap: 22px;
}

.topbar,
.section-header,
.info-split {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.topbar {
  padding-bottom: 6px;
}

.topbar h1,
.hero-copy h2,
.section-header h3,
.playlist-card h3,
.about-card h3 {
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-weight: 620;
  text-wrap: balance;
  font-family: 'Segoe UI Variable Display', 'SF Pro Display', 'Segoe UI', sans-serif;
}

.topbar h1 {
  max-width: 11ch;
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
}

.topbar-actions,
.hero-actions,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.card {
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-xl);
}

.hero-copy {
  display: grid;
  gap: 16px;
  align-content: start;
}

.hero-copy h2 {
  font-size: clamp(1.3rem, 2.1vw, 2.05rem);
  max-width: 13ch;
}

.pill,
.chip,
.badge,
.duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.pill {
  width: fit-content;
  padding: 8px 14px;
  color: #fff5de;
  background: rgba(240, 195, 108, 0.12);
  border: 1px solid rgba(240, 195, 108, 0.22);
}

.hero-panel {
  display: grid;
  gap: 16px;
}

.now-playing,
.stat-grid,
.reciter-card,
.video-card,
.playlist-card,
.about-card {
  border-radius: var(--radius-lg);
}

.now-playing {
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(141, 164, 255, 0.18), rgba(113, 212, 199, 0.08)),
    var(--panel);
}

.now-playing span,
.stat-grid span {
  display: block;
  color: var(--muted);
}

.now-playing strong {
  display: block;
  margin: 8px 0;
  font-size: 1.5rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat-grid div {
  padding: 18px;
  text-align: center;
  background: var(--stat-bg);
}

.stat-grid strong {
  display: block;
  font-size: 1.4rem;
}

.section-header h3 {
  font-size: clamp(1.08rem, 1.45vw, 1.4rem);
}

.card-grid,
.video-grid {
  display: grid;
  gap: 16px;
}

.card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reciter-card {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.reciter-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: #0c1523;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #fff2cf);
}

.reciter-card span {
  color: var(--reciter-style);
}

/* Force legible text on the dark gradient reciter cards */
.card-grid .reciter-card h4 {
  color: #fff;
}
.card-grid .reciter-card p {
  color: rgba(255, 255, 255, 0.65);
}
.card-grid .reciter-card strong {
  color: rgba(255, 255, 255, 0.85);
}
.card-grid .reciter-card span {
  color: rgba(255, 255, 255, 0.55);
}

/* Per-accent vivid color for the style label */
.card-grid .reciter-card.sunrise span  { color: #f5c97a; }
.card-grid .reciter-card.ocean span    { color: #71d4c7; }
.card-grid .reciter-card.dune span     { color: #9aaaff; }
.card-grid .reciter-card.emerald span  { color: #50d181; }
.card-grid .reciter-card.rose span     { color: #ec8aaa; }
.card-grid .reciter-card.violet span   { color: #c48aec; }
.card-grid .reciter-card.forest span   { color: #5ecf8a; }
.card-grid .reciter-card.coral span    { color: #f07a60; }
.card-grid .reciter-card.amber span    { color: #f0c040; }
.card-grid .reciter-card.slate span    { color: #88b4d8; }
.card-grid .reciter-card.teal span     { color: #30c8b4; }
.card-grid .reciter-card.indigo span   { color: #8a90f0; }

.sunrise {
  background: linear-gradient(180deg, rgba(245, 182, 110, 0.18), rgba(12, 18, 28, 0.95));
}

.ocean {
  background: linear-gradient(180deg, rgba(113, 212, 199, 0.18), rgba(12, 18, 28, 0.95));
}

.dune {
  background: linear-gradient(180deg, rgba(141, 164, 255, 0.16), rgba(12, 18, 28, 0.95));
}

.emerald {
  background: linear-gradient(180deg, rgba(80, 209, 129, 0.16), rgba(12, 18, 28, 0.95));
}

.rose {
  background: linear-gradient(180deg, rgba(236, 110, 140, 0.18), rgba(12, 18, 28, 0.95));
}

.violet {
  background: linear-gradient(180deg, rgba(168, 110, 236, 0.18), rgba(12, 18, 28, 0.95));
}

.forest {
  background: linear-gradient(180deg, rgba(60, 175, 110, 0.18), rgba(12, 18, 28, 0.95));
}

.coral {
  background: linear-gradient(180deg, rgba(240, 110, 80, 0.18), rgba(12, 18, 28, 0.95));
}

.amber {
  background: linear-gradient(180deg, rgba(240, 185, 50, 0.18), rgba(12, 18, 28, 0.95));
}

.slate {
  background: linear-gradient(180deg, rgba(100, 140, 185, 0.18), rgba(12, 18, 28, 0.95));
}

.teal {
  background: linear-gradient(180deg, rgba(48, 200, 180, 0.18), rgba(12, 18, 28, 0.95));
}

.indigo {
  background: linear-gradient(180deg, rgba(90, 95, 220, 0.18), rgba(12, 18, 28, 0.95));
}

.nasheed-card {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.nasheed-card audio {
  width: 100%;
}

.nasheed-grid {
  display: grid;
  gap: 14px;
}

[data-tab-panel] {
  display: none;
}

[data-tab-panel].active {
  display: grid;
  gap: 16px;
}

.chip {
  padding: 10px 14px;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid transparent;
}

.chip.active {
  color: #08131f;
  background: linear-gradient(135deg, var(--accent), #ffe4ae);
}

.video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-card {
  overflow: hidden;
}

.thumbnail {
  position: relative;
  min-height: 220px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 45%);
}

.video-card.sunrise .thumbnail {
  background-color: rgba(214, 135, 64, 0.2);
}

.video-card.ocean .thumbnail {
  background-color: rgba(41, 109, 171, 0.24);
}

.video-card.dune .thumbnail {
  background-color: rgba(85, 96, 199, 0.22);
}

.badge,
.duration {
  width: fit-content;
  padding: 8px 12px;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
}

.badge {
  color: var(--badge-text);
  background: var(--badge-bg);
}

.play-button {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  color: var(--play-text);
  font-size: 1.35rem;
  background: var(--play-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.duration {
  margin-left: auto;
  color: var(--duration-text);
  background: var(--duration-bg);
}

.video-meta {
  padding: 18px;
  display: grid;
  gap: 8px;
}

.video-meta h4,
.reciter-card h4 {
  margin: 0;
  font-size: 1.05rem;
}

.info-split {
  align-items: stretch;
}

.playlist-card,
.about-card {
  flex: 1;
  padding: 24px;
  display: grid;
  gap: 14px;
}

.about-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.primary-button,
.ghost-button {
  padding: 12px 18px;
  border-radius: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-button {
  color: #0b1320;
  background: linear-gradient(135deg, var(--accent), #ffe4ae);
  box-shadow: 0 12px 30px rgba(240, 195, 108, 0.18);
}

.ghost-button {
  color: var(--ghost-text);
  background: var(--ghost-bg);
  border: 1px solid var(--ghost-border);
}

.primary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.theme-switch {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ghost-bg);
  border: 1px solid var(--ghost-border);
}

.theme-button {
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ghost-text);
  background: transparent;
  cursor: pointer;
}

.theme-button.active {
  color: #1f3148;
  background: linear-gradient(135deg, var(--accent), #ffe4ae);
}

.audio-library {
  display: grid;
  gap: 14px;
}

.audio-track {
  padding: 18px;
  border-radius: var(--radius-lg);
  display: grid;
  gap: 12px;
}

.audio-track-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.audio-track-head h4,
.audio-track-head p {
  margin: 0;
}

.audio-track audio {
  width: 100%;
}

.audio-track-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.listen-count {
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .card-grid,
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile hamburger button (hidden on desktop) ─────────────────────────── */
.mob-nav-bar {
  display: none;
}

@media (max-width: 860px) {
  /* Top bar on mobile */
  .mob-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(18px);
  }

  .mob-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    text-decoration: none;
  }

  .mob-nav-brand .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.85rem;
  }

  .hamburger-btn {
    background: var(--ghost-bg);
    border: 1px solid var(--ghost-border);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1;
  }

  /* Sidebar becomes a slide-in drawer */
  .shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80vw;
    max-width: 300px;
    height: 100vh;
    z-index: 300;
    border-right: 0;
    border-left: 1px solid var(--border);
    transition: right 260ms ease;
    overflow-y: auto;
  }

  .sidebar.open {
    right: 0;
  }

  /* Overlay behind open drawer */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 299;
    backdrop-filter: blur(2px);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .content {
    padding: 18px;
  }

  .topbar,
  .section-header,
  .info-split {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 680px) {
  .card-grid,
  .video-grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions,
  .hero-actions,
  .chip-row {
    width: 100%;
  }

  .topbar-actions button,
  .hero-actions button,
  .chip-row button {
    flex: 1 1 140px;
  }

  .audio-track-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Auth & Forms ──────────────────────────────────────────────────────────── */

/* ── Auth pages (login / signup) ─────────────────────────────────────────── */

.auth-scene {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #0b1a35 0%, #0c2444 45%, #18103a 100%);
  position: relative;
  overflow: hidden;
}

/* decorative floating orbs */
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbDrift 14s ease-in-out infinite alternate;
}
.auth-orb--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(240,195,108,.22), transparent 70%);
  top: -180px; left: -140px;
  animation-delay: 0s;
}
.auth-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(113,212,199,.18), transparent 70%);
  bottom: -120px; right: -100px;
  animation-delay: -5s;
}
.auth-orb--3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(160,100,240,.14), transparent 70%);
  top: 50%; left: 55%;
  animation-delay: -9s;
}
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -40px) scale(1.08); }
}

.auth-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 480px;
}

.auth-brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  opacity: 0.92;
  transition: opacity 150ms;
}
.auth-brand-link:hover { opacity: 1; }

.auth-logo-mark {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent, #f0c36c), #ffe5b0);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0b1320;
  box-shadow: 0 4px 18px rgba(240,195,108,.4);
}

.auth-site-name {
  font-family: 'Segoe UI Variable Display', 'SF Pro Display', 'Segoe UI', sans-serif;
}

.auth-card {
  width: 100%;
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 44px 40px 36px;
  display: grid;
  gap: 28px;
  box-shadow: 0 32px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
}

.auth-card-head { display: grid; gap: 6px; }

.auth-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent, #f0c36c);
  margin: 0;
}

.auth-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-family: 'Segoe UI Variable Display', 'SF Pro Display', 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

/* form fields */
.auth-field { display: grid; gap: 8px; }

.auth-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .02em;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  right: 14px;
  font-size: 0.85rem;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  line-height: 1;
}

.auth-input {
  width: 100%;
  padding: 14px 40px 14px 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  box-sizing: border-box;
  direction: ltr;
  text-align: left;
}
.auth-input::placeholder { color: rgba(255,255,255,.3); }
.auth-input:focus {
  border-color: var(--accent, #f0c36c);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(240,195,108,.18);
}

.eye-btn {
  position: absolute;
  left: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  line-height: 1;
  transition: color 150ms;
}
.eye-btn:hover { color: rgba(255,255,255,.85); }

/* password strength */
.pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.strength-track {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 280ms ease, background 280ms ease;
}
.strength-label {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 40px;
  text-align: left;
}

/* submit button */
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 24px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #f0c36c, #e8a835);
  color: #0b1320;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms;
  box-shadow: 0 6px 24px rgba(240,195,108,.35);
  margin-top: 4px;
}
.auth-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(240,195,108,.45);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* spinner */
.auth-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(11,19,32,.3);
  border-top-color: #0b1320;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.3);
  font-size: 0.82rem;
  letter-spacing: .06em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}

/* bottom links */
.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.auth-links p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,.55);
}
.auth-links a {
  color: var(--accent, #f0c36c);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms;
}
.auth-links a:hover { opacity: .8; text-decoration: underline; }

.auth-back {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,.4) !important;
  font-weight: 500 !important;
}
.auth-back:hover { color: rgba(255,255,255,.7) !important; }

/* alert inside dark card */
.auth-card .alert.error  { background: rgba(220,60,60,.18); border-color: rgba(220,60,60,.35); color: #ff8a80; }
.auth-card .alert.success{ background: rgba(60,180,100,.18); border-color: rgba(60,180,100,.35); color: #69f0ae; }

/* keep old .auth-page / .form-* for playlist page */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}


/* ── Playlist page ────────────────────────────────────────────────────────── */

.auth-user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--stat-bg);
  font-size: 0.95rem;
}

.playlist-create-form { display: flex; gap: 10px; align-items: center; }
.playlist-create-form .form-input { flex: 1; }

.playlist-list { display: grid; gap: 16px; }

.playlist-item {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  display: grid;
  gap: 12px;
}

.playlist-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.playlist-item-head h4 { margin: 0; font-size: 1.08rem; }

.track-list { display: grid; gap: 8px; }

.track-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--stat-bg);
}

.track-row-info { display: grid; gap: 3px; }
.track-row-info span { font-size: 0.88rem; color: var(--muted); }

.btn-icon {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}
.btn-icon:hover { background: rgba(220,60,60,.12); color: #c0392b; }

.add-to-playlist-btn {
  background: var(--ghost-bg);
  border: 1px solid var(--ghost-border);
  color: var(--ghost-text);
  padding: 9px 14px;
  border-radius: 12px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 140ms ease;
}
.add-to-playlist-btn:hover { background: rgba(240,195,108,.15); }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,.55);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }

.modal {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  border-radius: var(--radius-xl);
  display: grid;
  gap: 18px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.modal h3 { margin: 0; font-size: 1.15rem; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.playlist-select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  outline: none;
}

/* ── Local video grid ─────────────────────────────────────────────────────── */

.local-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  margin: 0 -28px;
}

.local-video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
  min-width: 0;
}

.local-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(10, 20, 35, 0.22);
}

/* thumbnail wrapper with hover play overlay */
.lvc-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0e16;
  overflow: hidden;
}

.lvc-thumb-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.lvc-play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0);
  transition: background 180ms ease;
}

.local-video-card:hover .lvc-play-overlay { background: rgba(0,0,0,0.4); }

.lvc-play-icon {
  font-size: 3rem;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms ease, transform 180ms ease;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.7));
}

.local-video-card:hover .lvc-play-icon { opacity: 1; transform: scale(1); }

.lvc-footer {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.lvc-footer h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 620;
  color: var(--text);
}

/* ── Theater mode (YouTube-like) ──────────────────────────────────────────── */

.theater-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
  margin: 0 -28px;
}

.theater-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.theater-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

.theater-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 2px;
}

.theater-title {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
}

.theater-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.theater-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
}

.theater-btn:hover:not(:disabled) {
  background: var(--chip-bg);
  transform: translateY(-1px);
}

.theater-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.theater-btn--back {
  background: var(--chip-bg);
}

/* Playlist sidebar */
.theater-playlist {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.theater-playlist-label {
  margin: 0;
  padding: 14px 16px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
}

.theater-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 150ms;
}

.theater-item:last-child { border-bottom: none; }

.theater-item:hover:not(.theater-item--active) { background: var(--chip-bg); }

.theater-item--active {
  background: linear-gradient(90deg, rgba(240,195,108,.10), transparent);
  cursor: default;
}

.theater-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0e16;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.theater-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.theater-now {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(240,195,108,.22);
}

.theater-now span {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,0,0,.55);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
}

.theater-hover-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0);
  transition: background 160ms;
}

.theater-item:hover .theater-hover-play { background: rgba(0,0,0,.4); }

.theater-hover-play span {
  color: #fff;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 160ms;
}

.theater-item:hover .theater-hover-play span { opacity: 1; }

.theater-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
}

.theater-item-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.theater-item-num {
  font-size: 0.75rem;
  color: var(--muted);
}

.theater-item-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* view count badges – video grid & theater */
.lvc-view-count,
.theater-view-count,
.theater-main-count {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lvc-view-count { display: block; margin-top: 2px; }

.theater-main-count {
  font-size: 0.85rem;
  color: var(--muted);
  margin: -8px 0 4px;
}

@media (max-width: 1100px) {
  .local-video-grid {
    grid-template-columns: 1fr;
    margin: 0 -28px;
  }
  .theater-wrap {
    grid-template-columns: 1fr;
    margin: 0 -28px;
  }
  .theater-playlist {
    max-height: 420px;
  }
}

/* ── المختارات page ───────────────────────────────────────────────────────── */

.moch-hero {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  padding: 32px 28px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(240,195,108,.08), rgba(113,212,199,.06));
}

.moch-hero-body { display: flex; flex-direction: column; gap: 12px; }

.moch-hero-eye {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.moch-hero-star {
  color: #e8a835;
  font-size: 1rem;
  letter-spacing: 2px;
}

.moch-hero-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.moch-hero-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;
}

.moch-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.moch-hero-player { width: 100%; margin-top: 4px; }

/* decorative art */
.moch-hero-art {
  position: relative;
  display: grid;
  place-items: center;
}

.moch-art-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: .18;
}
.moch-art-ring--1 { width: 140px; height: 140px; }
.moch-art-ring--2 { width: 105px; height: 105px; opacity: .12; }
.moch-art-ring--3 { width: 70px;  height: 70px;  opacity: .08; }

.moch-art-glyph {
  font-size: 2rem;
  color: var(--accent);
  opacity: .7;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* filter tabs */
.moch-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.moch-tab {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.moch-tab:hover { background: var(--chip-bg); color: var(--text); }

.moch-tab--active {
  background: var(--accent);
  color: #0b1320;
  border-color: var(--accent);
}

/* stats bar */
.moch-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 2px 0;
}

.moch-stats-sep { opacity: .5; }
.moch-stats-five { color: #e8a835; font-weight: 600; }

/* cards grid */
.moch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.moch-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-lg);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.moch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10,20,35,.15);
}

.moch-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.moch-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.moch-stars {
  font-size: 0.82rem;
  color: #e8a835;
  letter-spacing: 1px;
}

.moch-label {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.moch-count-badge {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.moch-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }

.moch-card-surah {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

/* ── Live TV page ───────────────────────────────────────────────────────────── */
.live-player-wrap {
  padding: 1.5rem 0;
}
.live-header {
  margin-bottom: 1.2rem;
}
.live-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  letter-spacing: .05em;
}
.live-embed-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 960px;
  position: relative;
}
.live-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.live-video {
  width: 100%;
  height: 100%;
  display: block;
}
.live-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.6rem;
  padding: 0 0.5rem;
}
.live-note a { color: var(--accent); }

/* ── Siar subject card tweaks ───────────────────────────────────────────────── */
.siar-subject-card .reciter-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Dua popup ──────────────────────────────────────────────────────────────── */
.dua-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 18, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: dua-fade-in 0.5s ease;
}
.dua-overlay.dua-hiding {
  animation: dua-fade-out 0.4s ease forwards;
}
@keyframes dua-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dua-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.dua-modal {
  background: linear-gradient(160deg, #0d1a2e 0%, #0a1220 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  max-width: 480px;
  width: 92%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212,175,55,0.1);
  animation: dua-slide-up 0.5s ease;
}
@keyframes dua-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.dua-bismillah {
  font-size: 1rem;
  color: rgba(212, 175, 55, 0.7);
  letter-spacing: .06em;
  margin-bottom: 1.4rem;
}
.dua-arabic {
  font-size: 1.45rem;
  line-height: 2;
  color: #f0e6c8;
  font-weight: 600;
  margin-bottom: 1rem;
}
.dua-second {
  font-size: 1.2rem;
  color: rgba(240, 230, 200, 0.75);
}
.dua-sub {
  margin: 1rem 0 1.6rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
}
.dua-close-btn {
  min-width: 160px;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #d4af37, #a07c20);
  border: none;
  color: #0a1220;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .2s;
}
.dua-close-btn:hover { opacity: .85; }


.moch-card-reciter {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}

.moch-card-note {
  margin: 0;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.55;
}

.moch-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.moch-duration {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.moch-card-footer audio { width: 100%; }

@media (max-width: 900px) {
  .moch-hero { grid-template-columns: 1fr; }
  .moch-hero-art { display: none; }
  .moch-grid { grid-template-columns: 1fr; }
}

/* ── Reciter track panel (rtp) ────────────────────────────────────────────── */

.rtp {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  overflow: hidden;
}

.rtp.hidden { display: none; }

.rtp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.rtp-header h3 { margin: 0; font-size: 1.15rem; }
.rtp-header .eyebrow { margin: 0 0 4px; }

.rtp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rtp-autoplay-btn {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}

.rtp-autoplay-btn.active {
  background: var(--accent);
  color: #0b1320;
  border-color: var(--accent);
}

.rtp-tracks {
  display: grid;
  gap: 14px;
  padding: 20px 24px;
}

.rtp-empty {
  padding: 12px 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Selected reciter card */
.reciter-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reciter not-yet-downloaded notice */
.rtp-unavailable {
  padding: 20px 0 10px;
  display: grid;
  gap: 8px;
}
.rtp-unavailable p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.rtp-unavailable-hint { font-size: 0.85rem !important; }
.rtp-unavailable code {
  background: var(--chip-bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.85em;
}

/* Surah number badge in track panel */
.rtp-surah-num {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Theater autoplay active button */
.theater-btn--autoplay-on {
  background: var(--accent);
  color: #0b1320;
  border-color: var(--accent);
}

/* ── Video duration badge ─────────────────────────────────────────────────── */

.lvc-duration-badge {
  position: absolute;
  bottom: 6px;
  left: 8px;        /* left = bottom-left in RTL */
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: .02em;
  line-height: 1.6;
  /* hide until set */
  min-width: 0;
}

.lvc-duration-badge:empty { display: none; }

/* ── Favorites button (video grid + audio tracks) ────────────────────────── */

.fav-video-btn,
.fav-audio-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--muted);
  transition: color 140ms, background 140ms, border-color 140ms;
  line-height: 1.5;
  flex-shrink: 0;
}

.fav-video-btn:hover,
.fav-audio-btn:hover { color: #e05; border-color: #e05; }

.fav-video-btn.active,
.fav-audio-btn.active {
  color: #e05;
  border-color: #e05;
  background: rgba(238, 0, 85, 0.08);
}

/* lvc-footer row for title + fav button */
.lvc-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Home page favorites sections ────────────────────────────────────────── */

.fav-section {
  margin-top: 28px;
}

.fav-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.fav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.fav-item-info {
  flex: 1 1 180px;
  display: grid;
  gap: 3px;
}

.fav-item-info strong { font-size: 1rem; }
.fav-item-info span   { font-size: 0.85rem; color: var(--muted); }

.fav-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 240px;
  min-width: 0;
}

.fav-item-actions audio { flex: 1 1 180px; min-width: 0; }

.fav-empty {
  color: var(--muted);
  font-size: 0.95rem;
  padding: 10px 0;
}

@media (max-width: 680px) {
  .fav-item { flex-direction: column; align-items: stretch; }
  .rtp-header { flex-direction: column; align-items: stretch; }
}