/* =====================================================================
   Miftah — Listen (Spotify-style audio library & player)
   ===================================================================== */

/* Reader & listen players never show at the same time */
body:not([data-view="read"]) #player { display: none !important; }
body[data-view="read"] .lp { display: none !important; }
body.has-lp:not([data-view="read"]) { padding-bottom: 96px; }

/* ---------- Layout ---------- */
.listen { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; padding: 12px;
  min-height: calc(100vh - 62px); align-items: start; }
.l-side { position: sticky; top: 74px; display: grid; gap: 12px; max-height: calc(100vh - 190px); grid-template-rows: auto minmax(0, 1fr); }
.l-nav, .l-lib { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.l-nav { display: grid; padding: 8px; gap: 2px; }
.l-nav a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--muted);
  text-decoration: none; font-weight: 600; transition: color .15s, background .15s; }
.l-nav a:hover { color: var(--fg); }
.l-nav a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
.l-nav-lib { display: none !important; }
.l-lib { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.l-lib-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 16px; }
.l-lib-head span { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--muted); }
.l-lib-list { overflow-y: auto; padding: 4px 8px 10px; }
.l-lib-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--fg);
  text-decoration: none; min-width: 0; }
.l-lib-item:hover { background: var(--surface-2); }
.l-lib-item[aria-current="page"] { background: var(--accent-soft); }
.l-lib-item .t { display: grid; min-width: 0; }
.l-lib-item strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-lib-item span { font-size: .78rem; color: var(--muted); }
.l-lib-item .art { color: #fff; }

.l-main { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-height: calc(100vh - 190px);
  overflow: hidden; }
.l-page { padding: 0 0 28px; }
.l-section { padding: 18px 24px 4px; }
.l-section h2 { font-size: 1.25rem; margin: 0 0 14px; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: baseline; }
.l-section h2 a { font-size: .8rem; color: var(--muted); text-decoration: none; font-weight: 600; }
.l-section h2 a:hover { color: var(--accent); text-decoration: underline; }
.l-greet { padding: 26px 24px 4px; margin: 0; font-size: 1.8rem; letter-spacing: -.02em; }
.l-empty { color: var(--muted); padding: 30px 24px; text-align: center; }

/* ---------- Artwork (generated covers & avatars) ---------- */
.art { --h: 170; display: grid; place-items: center; flex: none; overflow: hidden; position: relative; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 45) 60% 24%)); border-radius: 8px;
  container-type: inline-size; }
.art .ini { font-weight: 700; letter-spacing: .02em; }
/* Surah-name glyph: sized to the artwork (cqw), shrunk if wide, and optically centred (vars set by fitGlyph) */
.art .glyph { --g: 50; font-family: "surahnames"; line-height: 1;
  font-size: min(calc(var(--g) * 1cqw), calc(80cqw / var(--gw, 1.6)), calc(70cqw / var(--gh, .8)));
  translate: calc(var(--gx, 0) * 1em) calc(var(--gy, 0) * 1em); }
.art-sm .glyph { --g: 64; }
.art.round { border-radius: 50%; }
.art-sm { width: 44px; height: 44px; font-size: 15px; border-radius: 6px; }
.art-md { width: 100%; aspect-ratio: 1; font-size: 30px; border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.art-lg { width: 200px; height: 200px; font-size: 56px; box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
.art-xl { width: min(78vw, 360px, 42vh); aspect-ratio: 1; border-radius: 14px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); margin: 0 auto;
  font-size: min(16vw, 64px, 8vh); }
.art .badge-ini { position: absolute; right: 8%; bottom: 8%; width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid;
  place-items: center; background: rgb(0 0 0 / .28); font-weight: 700; font-size: .5em; backdrop-filter: blur(4px); }
.art-sm .badge-ini { display: none; }
.art.liked { background: linear-gradient(135deg, #4f46e5, #0f766e); }

/* ---------- Card grids ---------- */
.l-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.l-grid.scroll { grid-auto-flow: column; grid-auto-columns: minmax(150px, 170px); grid-template-columns: none;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.l-grid.scroll::-webkit-scrollbar { display: none; }
.l-grid.scroll > * { scroll-snap-align: start; }
.l-card { display: grid; gap: 10px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--fg); position: relative;
  transition: background .15s; border: 0; background: none; text-align: left; }
.l-card:hover { background: var(--surface-2); }
.l-card strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-card span.sub { font-size: .8rem; color: var(--muted); margin-top: -6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-card .card-play { position: absolute; right: 20px; top: calc(100% - 110px); width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; opacity: 0;
  transform: translateY(8px); transition: opacity .15s, transform .15s; box-shadow: 0 6px 16px rgb(0 0 0 / .3); }
.l-card:hover .card-play, .l-card:focus-within .card-play { opacity: 1; transform: none; }
@media (hover: none) { .l-card .card-play { display: none; } }

/* Compact surah tiles */
.l-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.l-tile { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--surface-2);
  color: var(--fg); text-decoration: none; min-width: 0; transition: filter .15s; }
.l-tile:hover { filter: brightness(1.04); outline: 1px solid var(--line); }
.l-tile .t { display: grid; min-width: 0; }
.l-tile strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-tile span { font-size: .75rem; color: var(--muted); }

/* ---------- Page header (reciter / surah / playlist) ---------- */
.l-hero { --h: 170; display: flex; align-items: flex-end; gap: 24px; padding: 60px 24px 24px;
  background: linear-gradient(180deg, hsl(var(--h) 45% 40% / .55), transparent); }
.l-hero .kind { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.l-hero h1 { margin: 6px 0 8px; font-size: clamp(1.8rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1.05; word-break: break-word; }
.l-hero .meta { color: var(--muted); font-size: .9rem; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; margin-top: 0; }
.l-hero .ar { font-family: "surahnames"; font-size: 2.4rem; line-height: 1; color: var(--fg); display: block; margin-top: 4px; }
.l-actions { display: flex; align-items: center; gap: 14px; padding: 8px 24px 12px; }
.l-bigplay { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; box-shadow: 0 8px 20px rgb(0 0 0 / .2); transition: transform .1s, filter .15s; }
.l-bigplay:hover { transform: scale(1.04); filter: brightness(1.06); }
.l-bigplay svg { width: 26px; height: 26px; }
.l-bigplay .i-pause { display: none; }
.l-bigplay.is-playing .i-pause { display: block; }
.l-bigplay.is-playing .i-play { display: none; }
.l-actions .icon-btn { width: 44px; height: 44px; }
.l-actions .icon-btn svg { width: 24px; height: 24px; }

/* ---------- Track list ---------- */
.l-tracks { list-style: none; margin: 0; padding: 0 12px; }
.l-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 36px 36px; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.l-row:hover, .l-row:focus-within { background: var(--surface-2); }
.l-row .num { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.l-row .main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.l-row .t { display: grid; min-width: 0; }
.l-row strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-row .t span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-row .ar { font-family: "surahnames"; font-size: 1.6rem; color: var(--muted); line-height: 1; }
.l-row.current strong, .l-row.current .num { color: var(--accent); }
.l-row .icon-btn { width: 34px; height: 34px; }
.l-row .l-like:not([aria-pressed="true"]) { opacity: 0; }
.l-row:hover .l-like, .l-row:focus-within .l-like { opacity: 1; }
@media (hover: none) { .l-row .l-like { opacity: 1 !important; } }
.l-row .row-play { display: none; }
.l-row:hover .num-text { display: none; }
.l-row:hover .row-play { display: inline-grid; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; background: var(--accent); border-radius: 1px; animation: eq 1s infinite ease-in-out; }
.eq i:nth-child(2) { animation-delay: -.4s; } .eq i:nth-child(3) { animation-delay: -.7s; }
.eq.paused i { animation: none; height: 4px; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.l-more-row { padding: 8px 20px; }
.l-more-row a { color: var(--muted); font-weight: 600; font-size: .85rem; text-decoration: none; }
.l-more-row a:hover { color: var(--accent); }

/* ---------- Likes ---------- */
.l-like .i-heart-on { display: none; }
.l-like[aria-pressed="true"] { color: var(--accent); }
.l-like[aria-pressed="true"] .i-heart { display: none; }
.l-like[aria-pressed="true"] .i-heart-on { display: block; }
.l-like.pop svg { animation: pop-heart .3s ease; }
@keyframes pop-heart { 50% { transform: scale(1.3); } }

/* ---------- Search ---------- */
.l-search { position: sticky; top: 0; z-index: 2; padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.l-search .sd-search { max-width: 480px; }
.l-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.l-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--surface-2);
  color: var(--fg); text-decoration: none; font-weight: 600; font-size: .9rem; }
.l-chip:hover { outline: 1px solid var(--accent); }
.l-chip .art { width: 30px; height: 30px; font-size: 11px; }
.l-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.l-group-head .t { display: grid; }
.l-group-head strong { font-size: 1.05rem; }
.l-group-head span { font-size: .8rem; color: var(--muted); }

/* ---------- Mini player ---------- */
.lp { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 35; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 10px 40px rgb(0 0 0 / .22); overflow: hidden; }
.lp[hidden] { display: none; }
.lp-progress { height: 2px; background: var(--surface-2); display: none; }
#lpBar { height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.lp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; }
.lp-close { color: var(--muted); }
.lp-track { display: flex; align-items: center; gap: 12px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; }
.lp-text { display: grid; min-width: 0; }
.lp-text strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-text span { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-center { display: grid; gap: 2px; justify-items: center; }
.lp-ctrls { display: flex; align-items: center; gap: 8px; }
.lp-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); display: grid; place-items: center;
  transition: transform .1s; }
.lp-play:active { transform: scale(.94); }
.lp-play svg { width: 18px; height: 18px; }
.lp-play.xl { width: 68px; height: 68px; }
.lp-play.xl svg { width: 30px; height: 30px; }
.lp-play .i-pause, .lp-play .spinner { display: none; }
.is-playing .lp-play .i-pause { display: block; }
.is-playing .lp-play .i-play { display: none; }
.is-loading .lp-play .spinner { display: block; }
.is-loading .lp-play .i-play, .is-loading .lp-play .i-pause { display: none !important; }
[data-act="shuffle"][aria-pressed="true"], [data-act="repeat"].on { color: var(--accent); }
[data-act="repeat"] .i-rep1 { display: none; }
[data-act="repeat"].one .i-rep1 { display: block; }
[data-act="repeat"].one .i-rep { display: none; }
.lp-seek { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.lp-seek .seek { flex: 1; }
.lp-right { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.l-sleep-btn.on { color: var(--accent); }
.sleep-left { font-size: .7rem; font-weight: 600; margin-left: 2px; font-variant-numeric: tabular-nums; }
.l-sleep-btn:has(.sleep-left:not(:empty)) { width: auto; padding: 0 8px; }

/* Range slider */
.seek { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; cursor: pointer; margin: 0;
  background: linear-gradient(to right, var(--accent) 0 var(--p, 0%), var(--line) var(--p, 0%) 100%); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 0;
  opacity: 0; transition: opacity .15s; }
.seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 0; }
.seek:hover::-webkit-slider-thumb, .seek:focus-visible::-webkit-slider-thumb, .lpf .seek::-webkit-slider-thumb { opacity: 1; }

/* ---------- Full player ---------- */
.lpf { --h: 170; position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow-y: auto; animation: slide-up .28s ease; }
.lpf[hidden] { display: none; }
.lpf-bg { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, hsl(var(--h) 50% 40% / .5), transparent 70%); }
.lpf-inner { position: relative; max-width: 460px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column;
  gap: 22px; padding: 16px 22px calc(28px + env(safe-area-inset-bottom)); }
.lpf-top { display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; }
.lpf-top-actions { display: flex; justify-content: flex-end; gap: 2px; }
.lpf-fs { visibility: hidden; }
.lpf.lyrics .lpf-fs { visibility: visible; }

/* ---------- Synced lyrics ---------- */
.lpf.lyrics .lpf-inner { max-width: 760px; height: 100dvh; min-height: 0; }
.lpf.lyrics .art-xl { display: none; }
.ly { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.ly[hidden] { display: none; }
.ly-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18vh 8px 34vh; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent);
  scrollbar-width: none; }
.ly-body::-webkit-scrollbar { display: none; }
.ly-status { text-align: center; color: var(--muted); padding: 30px; }
.ly-head { display: grid; justify-items: center; gap: 4px; margin-bottom: 18px; }
.ly-glyph { font-family: "surahnames"; font-size: 64px; line-height: 1; color: var(--fg); translate: calc(var(--gx, 0) * 1em) calc(var(--gy, 0) * 1em); }
.ly-sub { color: var(--muted); font-size: .85rem; }
.ly-bismillah { font-family: var(--font-ar); text-align: center; font-size: clamp(24px, 4.2vw, 34px); margin: 0 0 20px; opacity: .8; }
.ly-ayah { padding: 14px 16px; border-radius: 16px; cursor: pointer; opacity: .42; transition: opacity .35s, background .35s, transform .35s;
  transform-origin: center; }
.ly-ayah:hover { opacity: .75; }
.ly-ayah.past { opacity: .32; }
.ly-ayah.current { opacity: 1; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); transform: scale(1.01); }
.ly-ayah:focus-visible { outline: 2px solid var(--accent); }
.ly-ar { margin: 0; font-family: var(--font-ar); font-size: clamp(26px, 4.8vw, 40px); line-height: 2; text-align: center; color: var(--fg); }
.ly-w { transition: opacity .15s, text-shadow .15s; border-radius: 6px; }
.ly-ayah.current .ly-w { opacity: .5; }
.ly-ayah.current .ly-w.done { opacity: 1; }
.ly-ayah.current .ly-w.on { opacity: 1; color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
.tajweed-on .ly-ayah.current .ly-w.on { color: inherit; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ly-end { color: var(--accent); font-size: .8em; margin: 0 .2em; }
.ly-tr { margin: 4px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; }
.ly-ayah.current .ly-tr { color: var(--fg); }
.ly-tr.rtl { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; line-height: 2.2; }
.ly-resume { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 9px 16px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: .85rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / .3); }
.ly-resume[hidden] { display: none; }
.ly-resume svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.lpf.lyrics .lpf-meta { margin-top: 0; }
.lpf.lyrics .lpf-inner { gap: 14px; }
.l-lyrics-btn.on { color: var(--accent); border-color: var(--accent); }
/* Full screen (TV / car): bigger text, controls stay */
.lpf.fs .lpf-inner { max-width: 1100px; }
.lpf.fs .ly-ar { font-size: clamp(34px, 5.4vw, 72px); }
.lpf.fs .ly-tr { font-size: clamp(18px, 2.4vw, 30px); max-width: 900px; }
@media (max-width: 560px) { .lpf.lyrics .lpf-extra { gap: 6px; } .ly-body { padding: 12vh 0 30vh; } .ly-ayah { padding: 10px 8px; } }
.lpf-from { display: grid; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lpf-from strong { color: var(--fg); text-transform: none; letter-spacing: 0; font-size: .85rem; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpf-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.lpf-titles { flex: 1; min-width: 0; }
.lpf-titles h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpf-sub { background: none; border: 0; padding: 0; color: var(--muted); font-size: 1rem; }
.lpf-sub:hover { color: var(--fg); text-decoration: underline; }
.l-like-lg { width: 44px; height: 44px; } .l-like-lg svg { width: 26px; height: 26px; }
.lpf-seek .seek { width: 100%; }
.lpf-times { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.lpf-ctrls { display: flex; align-items: center; justify-content: space-between; }
.lpf-ctrls .icon-btn { width: 46px; height: 46px; }
.lpf-ctrls .icon-btn svg { width: 24px; height: 24px; }
.lpf-ctrls .icon-btn.lg svg { width: 30px; height: 30px; }
.lpf-extra { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.pill-btn svg { width: 16px; height: 16px; }
.pill-btn:hover { border-color: var(--accent); }
.pill-btn.on { border-color: var(--accent); color: var(--accent); }
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } }

/* ---------- Queue panel ---------- */
.lq { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 55; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgb(0 0 0 / .2); display: grid; grid-template-rows: auto 1fr;
  animation: slide-in .22s ease; }
.lq[hidden] { display: none; }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
.lq-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.lq-head h2 { margin: 0; font-size: 1.1rem; }
.lq-head > div { display: flex; align-items: center; gap: 4px; }
.lq-body { overflow-y: auto; padding: 8px 4px 24px; }
.lq-body h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 14px 6px; }
.lq-body .l-tracks { padding: 0 4px; }
.lq-body .l-row { grid-template-columns: minmax(0, 1fr) 34px; }
.text-btn { background: none; border: 0; color: var(--muted); font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.text-btn:hover { color: var(--fg); background: var(--surface-2); }

/* ---------- Action sheet / prompt ---------- */
.l-sheet { width: min(420px, calc(100vw - 16px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  color: var(--fg); box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
.l-sheet[open] { animation: pop .16s ease; }
.l-sheet::backdrop { background: rgb(0 0 0 / .45); }
.l-sheet-head { display: grid; gap: 2px; padding: 16px 18px 10px; }
.l-sheet-head span { color: var(--muted); font-size: .85rem; }
.l-sheet-body { display: grid; padding: 0 8px 6px; max-height: 60vh; overflow-y: auto; }
.l-sheet-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 0; background: none; border-radius: 10px;
  text-align: left; font-size: .95rem; }
.l-sheet-item:hover, .l-sheet-item:focus-visible { background: var(--surface-2); outline: none; }
.l-sheet-item.active { color: var(--accent); font-weight: 600; }
.l-sheet-item.danger { color: #e5484d; }
.l-sheet-item svg { width: 20px; height: 20px; color: var(--muted); }
.l-sheet-item.active svg { color: var(--accent); }
.l-sheet-sep { height: 1px; background: var(--line); margin: 6px 10px; }
.l-sheet-cancel { width: calc(100% - 16px); margin: 4px 8px 10px; padding: 12px; border-radius: 10px; border: 0; background: var(--surface-2);
  font-weight: 600; }
.l-input { width: calc(100% - 36px); margin: 4px 18px 12px; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); font-size: 16px; }
.l-input:focus { outline: none; border-color: var(--accent); }
.l-prompt-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
.l-prompt-actions .btn-primary { border: 0; }

/* ---------- Random Quran card ---------- */
.l-random { position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 30px 22px;
  border-radius: 16px; color: #fff; background: linear-gradient(120deg, #0f766e, #1e3a8a 60%, #6d28d9); box-shadow: var(--shadow); }
.l-random-text { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; max-width: 560px; }
.l-random .kind { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.l-random h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; display: block; }
.l-random p { margin: 0; opacity: .85; font-size: .92rem; line-height: 1.5; max-width: 460px; }
.l-random-ctrls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; margin-top: 12px; }
.l-random-pick { display: flex; align-items: center; gap: 8px; background: rgb(255 255 255 / .14); border-radius: 999px;
  padding: 4px 4px 4px 14px; font-size: .8rem; font-weight: 600; }
.l-random-pick select { width: auto; max-width: 240px; border: 0; border-radius: 999px; padding: 7px 30px 7px 12px;
  background-color: rgb(0 0 0 / .25); color: #fff; font-size: .88rem; }
.l-random-pick select option { color: var(--fg); background: var(--surface); }
.l-random-play { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 20px;
  background: #fff; color: #0b3b36; font-weight: 700; box-shadow: 0 6px 18px rgb(0 0 0 / .25); transition: transform .1s; }
.l-random-play:hover { transform: scale(1.03); }
.l-random-play svg { width: 18px; height: 18px; }
/* Decorative covers, faded, on both sides behind the centred text */
.l-random-deco { position: absolute; inset: 0; pointer-events: none; opacity: .22; }
.l-random-deco .art-sm { position: absolute; width: 70px; height: 70px; border-radius: 14px; box-shadow: 0 8px 20px rgb(0 0 0 / .25); }
.l-random-deco .art-sm:nth-child(1) { left: 4%; top: 14%; transform: rotate(-12deg); }
.l-random-deco .art-sm:nth-child(2) { left: 11%; bottom: 10%; transform: rotate(8deg); }
.l-random-deco .art-sm:nth-child(3) { right: 5%; top: 12%; transform: rotate(10deg); }
.l-random-deco .art-sm:nth-child(4) { right: 12%; bottom: 8%; transform: rotate(-8deg); }
.l-random-deco .art-sm:nth-child(5) { display: none; }
@media (max-width: 760px) {
  .l-random { padding: 24px 16px; }
  .l-random-deco .art-sm { width: 54px; height: 54px; }
  .l-random-deco .art-sm:nth-child(2), .l-random-deco .art-sm:nth-child(4) { display: none; }
  .l-random-pick { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Sound mix ---------- */
.mix-sounds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 16px 14px; }
.mix-sounds button { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s; }
.mix-sounds button svg { width: 26px; height: 26px; }
.mix-sounds button:hover { color: var(--fg); }
.mix-sounds button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mix-rows { display: grid; gap: 14px; padding: 6px 18px 12px; }
.mix-row { display: grid; grid-template-columns: 118px 1fr 42px; align-items: center; gap: 12px; }
.mix-row .seek { height: 6px; }
.mix-row .seek::-webkit-slider-thumb { opacity: 1; width: 16px; height: 16px; }
.mix-name { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.mix-name svg { width: 18px; height: 18px; color: var(--muted); }
.mix-row output { text-align: right; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mix-row.off { opacity: .45; }
.mix-note { margin: 0; font-size: .8rem; color: var(--muted); }
.l-mix-btn.on { color: var(--accent); border-color: var(--accent); }
@media (max-width: 420px) {
  .mix-sounds { grid-template-columns: repeat(2, 1fr); }
  .mix-row { grid-template-columns: 1fr 42px; }
  .mix-row .mix-name { grid-column: 1 / -1; }
}

/* ---------- Listen home: library, featured, empty states ---------- */
.l-home .l-section { padding-top: 22px; }
.l-hint { margin: -8px 0 12px; color: var(--muted); font-size: .85rem; }
.l-reshuffle { font-size: .8rem; }
.l-libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.l-libtile { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--surface-2);
  color: var(--fg); text-decoration: none; border: 1px solid transparent; text-align: left; min-width: 0; transition: border-color .15s, transform .15s; }
.l-libtile:hover { border-color: var(--accent); transform: translateY(-1px); }
.l-libtile .art-sm { width: 52px; height: 52px; border-radius: 10px; }
.l-libtile .t { display: grid; min-width: 0; }
.l-libtile strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-libtile .t span { font-size: .78rem; color: var(--muted); }
.l-libtile.add { border: 1px dashed var(--line); background: transparent; }
.stats-art { background: linear-gradient(135deg, #f59e0b, #db2777) !important; color: #fff; display: grid; place-items: center; }

/* ---------- Listening stats ---------- */
.l-stats { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); }
.l-stats-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.l-stat { display: grid; gap: 2px; padding: 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.l-stat strong { font-size: clamp(1.05rem, 4.6vw, 1.45rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-stat span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.l-stats-favs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.l-fav { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color .15s; }
.l-fav:hover { border-color: var(--accent); }
.l-fav .art-sm { width: 56px; height: 56px; flex: none; }
.l-fav .t { display: grid; min-width: 0; }
.l-fav .k { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.l-fav strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-fav .t span:last-child { font-size: .78rem; color: var(--muted); }
.l-stats-empty { margin: 0; color: var(--muted); font-size: .9rem; text-align: center; }
.l-stats-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.l-stats.compact .l-stat { padding: 10px 8px; }
.l-stats.compact .l-stat strong { font-size: clamp(1rem, 4.2vw, 1.2rem); }
@media (max-width: 560px) { .l-stats { padding: 14px; } .l-stat { padding: 12px 6px; } }
.add-art { background: var(--surface-2) !important; color: var(--accent) !important; border: 1px dashed var(--line); }
.dl-art { background: linear-gradient(135deg, #0ea5e9, #0f766e) !important; color: #fff; }

/* Featured / recently played: the whole card plays */
.l-track-card { cursor: pointer; }
.l-track-card .art { position: relative; }
.l-track-card .card-play { position: absolute; right: 8%; bottom: 8%; top: auto; width: 42px; height: 42px; opacity: 0; transform: translateY(6px); }
.l-track-card:hover .card-play, .l-track-card:focus-visible .card-play { opacity: 1; transform: none; }
.l-track-card .card-play svg { width: 18px; height: 18px; }
.l-grid.scroll:has(.l-track-card.big) { grid-auto-columns: minmax(170px, 200px); }
.l-track-card.big strong { font-size: 1rem; }
@media (hover: none) { .l-track-card .card-play { opacity: 1; transform: none; width: 36px; height: 36px; display: grid; } }

.l-emptystate { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 24px 50px; max-width: 460px; margin: 0 auto; }
.l-empty-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.l-empty-icon svg { width: 34px; height: 34px; }
.l-emptystate strong { font-size: 1.15rem; }
.l-emptystate p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.l-emptystate .btn-primary { text-decoration: none; }
@media (max-width: 760px) {
  .l-libgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .l-libtile { padding: 6px 8px 6px 6px; gap: 8px; }
  .l-libtile .art-sm { width: 44px; height: 44px; }
  .l-grid.scroll:has(.l-track-card.big) { grid-auto-columns: 150px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lp-body { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; }
  .lp-desk { display: none !important; }
  .lp-progress { display: block; }
  .lp-center { display: block; }
}
@media (max-width: 760px) {
  .listen { display: block; padding: 0; }
  .l-side { position: sticky; top: 61px; z-index: 6; max-height: none; display: block; background: var(--bg); padding: 8px 10px; }
  .l-lib { display: none; }
  .l-nav { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; }
  .l-nav a { justify-content: center; gap: 8px; padding: 8px; font-size: .88rem; }
  .l-nav-lib { display: flex !important; }
  .l-main { border: 0; border-radius: 0; background: transparent; min-height: 0; }
  .l-section { padding: 14px 14px 2px; }
  .l-greet { padding: 18px 14px 2px; font-size: 1.5rem; }
  .l-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 16px 16px; }
  .l-hero .art-lg { width: 160px; height: 160px; align-self: center; }
  .l-actions { padding: 6px 16px 10px; }
  .l-tracks { padding: 0 4px; }
  .l-row { grid-template-columns: minmax(0, 1fr) 34px 34px; gap: 8px; }
  .l-row .num, .l-row .ar { display: none; }
  .l-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
  .l-grid.scroll { grid-auto-columns: 140px; }
  .l-card { padding: 8px; }
  .l-search { padding: 12px 14px; top: 0; }
  .l-tiles { grid-template-columns: 1fr 1fr; }
  .lp { left: 6px; right: 6px; bottom: 6px; }
}
@media (max-width: 420px) { .l-tiles { grid-template-columns: 1fr; } }

.l-sheet-head:focus { outline: none; }