/* self-hosted fonts */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Inter-latin-normal-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Inter-latin-normal-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Inter-latin-normal-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Inter-latin-normal-400.woff2') format('woff2')}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Amiri-arabic-normal-400.woff2') format('woff2')}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Amiri-latin-normal-400.woff2') format('woff2')}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Amiri-arabic-normal-700.woff2') format('woff2')}
@font-face{font-family:'UthmanicHafs';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/uthmanic-hafs.woff2') format('woff2')}
@font-face{font-family:'SurahNameV2';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/surah-name-v2.woff2') format('woff2')}

/* ============================================================
   JUZ — design system v3 (senior UX rebuild)
   Light/Dark ambient modes · emerald + amber · tactile
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --emerald:#0F5132;
  --emerald-bright:#12B76A;
  --amber:#D4AF37;
  --amber-bright:#F3D062;
  --focus-ring:#0F5132;
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --surface-2:#F2F4F7;
  --border:#EAECF0;
  --text:#101828;
  --text-2:#475467;
  --muted:#667085;
  --faint:#98A2B3;
  --line-soft:#EAECF0;
  --on-emerald:#FFFFFF;
  --glow:rgba(18,183,106,.25);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --arabic:'Amiri','Scheherazade New','Traditional Arabic',Georgia,serif;
  --r-lg:16px; --r-md:8px;
  --player-h:78px;
  --shadow:0 8px 30px rgba(16,24,40,.08);
  --shadow-lg:0 20px 60px rgba(16,24,40,.16);
}
html[data-theme="dark"]{
  --emerald:#12B76A;
  --emerald-bright:#12B76A;
  --amber:#F3D062;
  --focus-ring:#12B76A;
  --bg:#121316;
  --surface:#1F2128;
  --surface-2:#2A2D36;
  --border:#2D313E;
  --text:#F9FAFB;
  --text-2:#C2C9D3;
  --muted:#A7B0C0;
  --faint:#858FA2;
  --line-soft:#2D313E;
  --on-emerald:#04231A;
  --glow:rgba(18,183,106,.28);
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
}

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  height:100vh;height:100dvh;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input{font:inherit}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--emerald);color:var(--on-emerald)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.ar,.arabic{font-family:var(--arabic)}
.muted{color:var(--muted)}
.tag{color:var(--text-2);background:var(--surface-2)}
.small{font-size:12.5px}
.micro{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- shell grid ---------- */
body{display:grid;grid-template-columns:220px 1fr;grid-template-rows:1fr var(--player-h)}
.sidebar{grid-column:1;grid-row:1}
.main{grid-column:2;grid-row:1;min-width:0}
.player{grid-column:1/-1;grid-row:2}
.mobile-tabs{display:none}

/* ---------- sidebar ---------- */
.sidebar{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 12px 14px;gap:6px;min-height:0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;padding:2px 10px 16px}
.brand svg{width:28px;height:28px;color:var(--emerald)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:10px;
  color:var(--text-2);font-weight:600;font-size:13.5px;transition:all .15s;min-height:48px;
}
.nav a svg{width:20px;height:20px;flex:none}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.active{background:var(--emerald);color:var(--on-emerald)}
.nav a.active svg{color:var(--on-emerald)}
.theme-toggle{
  display:flex;align-items:center;gap:10px;margin:8px 10px;padding:10px 12px;border-radius:10px;
  color:var(--text-2);font-size:13px;font-weight:600;min-height:44px;transition:all .15s;
}
.theme-toggle:hover{background:var(--surface-2);color:var(--text)}
.theme-toggle svg{width:18px;height:18px}
.icon-sun{display:none}
html[data-theme="light"] .icon-sun{display:block}
html[data-theme="light"] .icon-moon{display:none}
.side-note{
  margin-top:auto;padding:14px 16px;border:1px solid var(--border);border-radius:14px;
  font-size:12px;line-height:1.6;
  background:color-mix(in srgb,var(--emerald) 6%,var(--surface));
  color:var(--text-2);display:flex;flex-direction:column;gap:6px;
}
.side-note .note-row{display:flex;align-items:center;gap:9px}
.side-note .note-row svg{width:18px;height:18px;color:var(--emerald);flex:none}
.side-note b{color:var(--emerald);display:block;font-size:12.5px}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;padding:12px 22px;
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:40;
}
.icon-btn{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:all .15s;flex:none;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:19px;height:19px}
.crumb{font-size:13px;font-weight:700;color:var(--muted)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme-toggle.mini{width:48px;height:48px;padding:0;margin:0;justify-content:center;border-radius:12px}
.reciter-pill{
  display:flex;align-items:center;gap:9px;padding:6px 16px 6px 6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:12.5px;font-weight:600;
  min-height:48px;transition:all .15s;
}
.reciter-pill:hover{border-color:var(--emerald)}
.reciter-pill .av{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--emerald);color:var(--on-emerald);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.reciter-pill svg{width:14px;height:14px;color:var(--muted)}
#menu-btn{display:none}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.scroll{flex:1;overflow-y:auto;padding:24px 26px calc(96px + 30px);scroll-behavior:smooth}
.view{display:none}
.view.active{display:block;animation:fade .32s cubic-bezier(.2,.7,.3,1) both}
.view.leaving{animation:fadeout .16s ease both}
@keyframes fade{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}
@keyframes fadeout{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}
.view-head{margin-bottom:18px}
.view-head h1,.greet h1{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.02em}
.greet{margin-bottom:20px}
.greet h1{display:inline}
.greet p{margin-top:3px;font-size:13.5px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px}
.sec-head h2{font-size:17px;font-weight:700}
.sec-head h3{font-size:14px;font-weight:700;color:var(--text-2)}
.text-btn{color:var(--emerald);font-size:12.5px;font-weight:600;min-height:48px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center}
.text-btn:hover{background:var(--surface-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:14.5px;border-radius:14px;min-height:48px;padding:0 22px;
  transition:all .15s;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--emerald);color:var(--on-emerald);box-shadow:0 6px 20px var(--glow)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-wide{width:100%}

/* ---------- hero continue card ---------- */
.hero-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--emerald),color-mix(in srgb,var(--emerald) 60%,#000 40%));
  color:var(--on-emerald);padding:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 85% 20%,rgba(255,255,255,.18),transparent 60%);
}
.hero-main{flex:1;min-width:230px;position:relative}
.hero-tag{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:5px}
.hero-main h2{font-size:clamp(19px,2.6vw,24px);font-weight:800;letter-spacing:-.01em}
.hero-meta{font-size:12.5px;opacity:.9;margin-top:3px;display:block}
.hero-progress{display:flex;align-items:center;gap:12px;margin:16px 0}
.hero-bar{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.hero-bar i{display:block;height:100%;background:var(--amber-bright);border-radius:999px;transition:width .4s}
.hero-pct{font-size:12px;font-weight:700;min-width:40px;text-align:right}
.hero-ar{font-size:clamp(34px,5vw,48px);line-height:1;padding:8px 4px 0;opacity:.95;position:relative}
.hero-ar .ar-glyph{font-size:clamp(40px,6vw,58px)}
.hero-start{
  position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--amber-bright);
  color:#3A2E08;font-weight:800;font-size:13.5px;min-height:48px;padding:0 22px;border-radius:14px;
  transition:all .15s;box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.hero-start:hover{transform:translateY(-1px);filter:brightness(1.06)}
.hero-start svg{width:16px;height:16px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-ghost{
  display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:14px;
  border:1.5px solid var(--border);color:var(--text-2);font-weight:700;font-size:13.5px;transition:all .15s;
}
.hero-ghost:hover{border-color:var(--emerald);color:var(--text)}

/* ---------- chips ---------- */
.chips-scroll{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  font-size:13px;font-weight:600;min-height:48px;white-space:nowrap;transition:all .15s;
}
.chip svg{width:16px;height:16px;color:var(--emerald)}
.chip:hover{border-color:var(--emerald);color:var(--text)}
.chip.active{background:var(--emerald);color:var(--on-emerald);border-color:var(--emerald)}
.chip.active svg{color:var(--on-emerald)}
.chip.today::after{content:"· Today";font-size:10px;opacity:.85}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:13px;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:9px;
  transition:all .18s;
}
.card:hover{border-color:var(--emerald);transform:translateY(-2px);box-shadow:var(--shadow)}
.card .cover{
  aspect-ratio:1;border-radius:12px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.card .cover .ar{font-size:clamp(26px,3vw,36px);color:rgba(255,255,255,.94);line-height:1;padding-top:8px}
.card .cover .ar-glyph{font-size:clamp(38px,5vw,54px);color:rgba(255,255,255,.96);line-height:1;padding-top:6px;text-shadow:0 3px 14px rgba(0,0,0,.35)}
.card .play-btn{
  position:absolute;right:9px;bottom:9px;width:42px;height:42px;border-radius:50%;
  background:var(--emerald);color:var(--on-emerald);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.35);opacity:0;transform:translateY(6px);transition:all .2s;
}
.card .play-btn svg{width:17px;height:17px}
.card:hover .play-btn{opacity:1;transform:none}
.card:hover .play-btn:hover{transform:scale(1.08)}
.card b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card span{font-size:11.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- list rows (browse) ---------- */
.list{display:flex;flex-direction:column;gap:4px}
@media(max-width:900px){.row{gap:10px;padding:10px 10px;min-height:64px}}
.row{
  display:grid;grid-template-columns:44px 46px 1fr auto;align-items:center;gap:12px;
  padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .15s;min-height:60px;
  border-bottom:1px solid var(--line-soft);
}
.row:hover{background:var(--surface)}
.row.active{background:color-mix(in srgb,var(--emerald) 12%,transparent)}
.row .idx{
  width:36px;height:36px;border-radius:50%;background:var(--surface-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.row.active .idx{background:var(--emerald);color:var(--on-emerald)}
.row .ar-name{font-family:var(--arabic);font-size:26px;color:var(--text-2);text-align:center;line-height:1}
.row .ar-name .ar-glyph{font-size:26px}
.row.active .ar-name{color:var(--emerald)}
.row .m{min-width:0}
.row .m b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m .meta-line{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.row .m .meta-line span{font-size:11px;color:var(--muted)}
.row .m .meta-line .tag{background:var(--surface-2);padding:2px 8px;border-radius:999px;font-weight:600}
.row .fav{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);opacity:0;transition:all .15s;
}
.row:hover .fav{opacity:1}
.row .fav:hover{color:var(--emerald)}
.row .fav svg{width:17px;height:17px}
.row .fav.on{color:var(--emerald);opacity:1}
.row .fav.on svg{fill:var(--emerald);stroke:none}
.row .play-go{
  width:48px;height:48px;border-radius:50%;background:var(--emerald);color:var(--on-emerald);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s;
}
.row:hover .play-go{opacity:1}
.row .play-go svg{width:16px;height:16px}
.row.active .play-go{opacity:1}
/* "Playing" label on the active row — state is never color-only */
.playing-tag{
  display:inline-flex;align-items:center;gap:5px;background:var(--emerald);color:var(--on-emerald);
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 9px;border-radius:999px;margin-left:8px;vertical-align:2px;
}
.playing-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
/* result count line above the list */
.result-count{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.04em;margin:2px 2px 10px;text-transform:uppercase}
/* play-button loading state — small spinner inside the primary button */
.big.loading{position:relative;pointer-events:none}
.big.loading svg{opacity:0}
.big.loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;
  border:2.5px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* expanded-player status actions (idle browse / finished replay / error retry) */
.np-status-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.np-status-actions .pill{min-height:44px;padding:8px 14px;width:100%;justify-content:center;gap:9px;border-radius:11px}
.np-status-actions .pill svg{flex:none}
.np-status-actions .pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-status-actions .err-note{font-size:12px;color:var(--amber);width:100%}

/* segmented */
.segmented{
  display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:4px;margin:6px 0 16px;flex-wrap:wrap;
}
.seg{padding:12px 18px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-2);min-height:48px;transition:all .15s}
.seg:hover{color:var(--text)}
.seg.active{background:var(--emerald);color:var(--on-emerald)}

/* search */
.searchbox{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--border);
  border-radius:14px;padding:13px 18px;max-width:520px;margin-bottom:14px;transition:border-color .2s,box-shadow .2s;
}
.searchbox:focus-within{border-color:var(--emerald);box-shadow:0 0 0 4px var(--glow)}
.searchbox svg{width:19px;height:19px;color:var(--muted);flex:none}
.searchbox input{flex:1;border:none;outline:none;background:none;font-size:14.5px;color:var(--text);min-height:30px}
.searchbox input::placeholder{color:var(--muted)}
.search-clear{
  width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .15s;
}
.search-clear:hover{background:var(--surface-2);color:var(--text)}
.search-clear svg{width:15px;height:15px}

/* group labels */
.group-label{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.group-label::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- journey ---------- */
.journey-layout{
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 34px;
}
@media(max-width:820px){.journey-layout{grid-template-columns:1fr;gap:22px;padding:22px 18px}}
.dial-wrap{display:flex;justify-content:center}
.dial{position:relative;width:min(56vw,210px);aspect-ratio:1}
.dial svg{width:100%;height:100%}
.dial-track{stroke:var(--surface-2)}
.dial-progress{stroke:var(--emerald);stroke-dasharray:553;stroke-dashoffset:553;transition:stroke-dashoffset .6s ease}
.dial-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8px}
.dial-core b{font-size:34px;font-weight:800;letter-spacing:-.02em}
.dial-core span{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.journey-info{min-width:0}
.juz-stepper{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.juz-title{flex:1;min-width:0}
.juz-title .micro{display:block;margin-bottom:3px;color:var(--emerald)}
.juz-title b{font-size:18px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.juz-title .muted{font-size:12.5px}
/* juz names — Arabic + transliteration */
.juz-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 3px}
.jz-name{font-family:Amiri,serif;font-weight:700;color:var(--emerald);line-height:1.25}
.juz-name .jz-name{font-size:21px}
.juz-name b{display:inline;font-size:15px;font-weight:700;color:var(--text-2)}
.jz-nick{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);border-radius:99px;padding:2px 8px;white-space:nowrap}
/* 30-juz reference cards */
.juz-ref{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;margin-top:2px}
.jz-card{
  display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 16px;min-width:0;
  transition:border-color .15s ease,transform .15s ease;
}
.jz-card:hover{border-color:var(--emerald);transform:translateY(-1px)}
.jz-num{grid-row:1/4;width:44px;height:44px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.jz-head{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.jz-head .jz-name{font-size:18px}
.jz-head b{font-size:13.5px;font-weight:700;color:var(--text-2)}
.jz-range{font-size:11.5px;color:var(--muted);min-width:0}
.jz-counts{font-size:10.5px;font-weight:800;color:var(--text-2);letter-spacing:.03em}
/* browse: selected juz header */
.jz-browse-head{
  display:grid;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px;
}
.jz-browse-head .jz-name{font-size:22px}
.jz-browse-head b{font-size:16px;font-weight:700;color:var(--text-2)}
.jz-browse-head .jz-range{font-size:12.5px}
.jz-browse-head .jz-counts{font-size:11px}
.paces{display:flex;gap:10px;flex-wrap:wrap}
.pace{
  flex:1;min-width:104px;text-align:center;border:1.5px solid var(--border);border-radius:12px;
  padding:13px 8px;cursor:pointer;transition:all .18s;min-height:52px;background:var(--surface);
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}
.pace:hover{border-color:var(--emerald);transform:translateY(-1px)}
.pace.active{border-color:var(--emerald);background:var(--emerald);color:var(--on-emerald)}
.pace.active span{color:var(--on-emerald);opacity:.9}
.pace b{display:block;font-size:14px}
.pace span{font-size:10.5px;color:var(--muted)}
.juz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(min-width:900px){.juz-grid{grid-template-columns:repeat(10,1fr)}}

.juz-tile{
  width:100%;text-align:center;color:inherit;
  aspect-ratio:1;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  transition:all .15s;position:relative;
}
.juz-tile:disabled{cursor:default}
.juz-tile:disabled:hover{border-color:var(--border);transform:none}
.juz-tile:hover{border-color:var(--emerald);transform:translateY(-2px)}
.juz-tile .num{font-size:15px;font-weight:800;color:var(--text-2)}
.juz-tile.done{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.juz-tile.done .num{color:var(--on-emerald)}
.juz-tile.done svg{width:16px;height:16px}
.juz-tile.today{border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 35%,transparent);background:color-mix(in srgb,var(--amber) 10%,var(--surface))}
.juz-tile.today .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.juz-tile span{font-size:9px;color:var(--muted);font-weight:600}
.juz-tile.done span{color:var(--on-emerald);opacity:.85}

/* ---------- reciters ---------- */
.fav-reciters{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.fav-reciters::-webkit-scrollbar{display:none}
.fav-rec{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:6px;border-radius:14px;
  min-width:72px;transition:all .15s;
}
.fav-rec:hover{background:var(--surface)}
.fav-rec .av{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--emerald);color:var(--on-emerald);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.fav-rec span{font-size:10.5px;color:var(--muted);max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-list{display:flex;flex-direction:column;gap:6px}
.rec-card{
  display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all .15s;
}
.rec-card:hover{border-color:var(--emerald)}
.rec-card.current{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 8%,transparent)}
.rec-card .sel-badge{
  display:none;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-emerald);background:var(--emerald);padding:4px 10px;border-radius:999px;margin-left:auto;white-space:nowrap;
}
.rec-card.current .sel-badge{display:inline-flex}
.rec-card .pick{color:var(--muted)}
.rec-card .pick svg{width:19px;height:19px}
.rec-card .photo{
  width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--emerald);color:var(--on-emerald);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.rec-card .m{flex:1;min-width:0}
.rec-card .m b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-card .m .meta-line{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.rec-card .m .meta-line span{font-size:11px;color:var(--muted)}
.rec-card .m .meta-line .tag{background:var(--surface-2);padding:2px 8px;border-radius:999px;font-weight:600}
.rec-card .pick{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .15s;flex:none;
}
.rec-card .pick svg{width:18px;height:18px}
.rec-card .pick:hover{color:var(--emerald)}
.rec-card.current .pick{color:var(--emerald)}
.rec-card.current .pick svg{fill:var(--emerald);stroke:none}

/* ---------- drawer (reciters) ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,94vw);z-index:90;
  background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
  transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer-head b{font-size:15px}
.drawer-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80}
@media(max-width:820px){
  .drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-height:76vh;border-left:none;border-top:1px solid var(--border);border-radius:20px 20px 0 0;transform:translateY(105%)}
  .drawer.open{transform:none}
}

/* ---------- player bar ---------- */
.player{
  position:relative;background:color-mix(in srgb,var(--text) 4%,var(--surface));border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:14px;
  padding:0 16px;position:relative;z-index:30;
  box-shadow:0 -8px 24px rgba(0,0,0,.06);
}
.p-open{display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer;border-radius:12px;padding:6px;min-height:48px}
.p-open:hover{background:var(--surface-2)}
.p-cover{
  width:52px;height:52px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--emerald),#0B3B2C);box-shadow:var(--shadow);
  overflow:hidden;
}
.p-cover .ar{font-size:22px;color:var(--on-emerald);font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.35);line-height:1}
.p-meta{min-width:0}
.p-meta b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-center{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.p-controls{display:flex;align-items:center;gap:10px}
/* compact player stays quiet: only play/pause + progress.
   Shuffle/rewind/forward/repeat live in the expanded player. */
.player .p-controls{display:flex;align-items:center;gap:12px}
.player .p-controls .c{width:44px;height:44px}
.player .p-controls .c svg{width:20px;height:20px}
.player .p-controls .big{
  width:54px;height:54px;border-radius:50%;
  background:var(--emerald);color:var(--on-emerald);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px var(--glow);
}
.player .p-controls .big svg{width:24px;height:24px}
.player .p-controls .big:active{transform:scale(.95)}
@media(min-width:901px){
  .player .p-controls{gap:16px}
  .player .p-controls .big{width:60px;height:60px}
  .player .p-controls .big svg{width:27px;height:27px}
}
.c{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:all .15s}
.c:hover{color:var(--text)}
.c:active{transform:scale(.92)}
.c svg{width:19px;height:19px}
.c.on{color:var(--emerald)}
.c.on svg{fill:var(--emerald)}
.big{
  width:48px;height:48px;border-radius:50%;background:var(--emerald);color:var(--on-emerald);
  display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 4px 14px var(--glow);
}
.big:hover{transform:scale(1.06);filter:brightness(1.08)}
.big svg{width:19px;height:19px}
.p-progress{display:flex;align-items:center;gap:10px;width:100%;max-width:520px}
.p-progress .t{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px}
.p-progress .t:last-child{text-align:right}
.range-wrap{flex:1;position:relative}
.range{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--emerald) var(--p,0%),var(--border) var(--p,0%));
  padding:14px 0;background-clip:content-box;
}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--emerald);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--emerald);border:none}
.bar-range{height:3px;transition:height .15s}
.player:hover .bar-range{height:6px}
.tooltip{
  position:absolute;bottom:16px;left:0;transform:translateX(-50%);
  background:var(--text);color:var(--bg);font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;
  white-space:nowrap;pointer-events:none;box-shadow:var(--shadow);z-index:5;
}
.p-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.range.vol{max-width:90px}

/* ---------- mobile ---------- */
@media(max-width:900px){
  :root{--player-h:72px}
  body{grid-template-columns:1fr;grid-template-rows:1fr var(--player-h) auto}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);z-index:95;
    transform:translateX(-105%);transition:transform .26s ease;box-shadow:var(--shadow-lg);
  }
  body.menu-open .sidebar{transform:none}
  body.menu-open .scrim{display:block}
  #menu-btn{display:flex}
  .main{grid-column:1;grid-row:1}
  .mobile-tabs{
    display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);
    border-top:1px solid var(--border);padding:6px 4px calc(10px + env(safe-area-inset-bottom));grid-column:1;grid-row:3;
  }
  .mobile-tabs a{
    display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);
    font-size:9.5px;font-weight:600;padding:5px 2px;border-radius:10px;min-height:44px;justify-content:center;
  }
  .mobile-tabs a svg{width:20px;height:20px}
  .mobile-tabs a.active{color:var(--emerald)}
  .player{grid-row:2;padding:0 10px;grid-template-columns:minmax(0,1fr) auto;min-height:64px}
  .player .p-center{display:none}
  .player .p-right{display:none}
  .p-mobile{display:flex!important;align-items:center;gap:6px}
  .p-mobile-play{
    display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
    background:var(--emerald);color:var(--on-emerald);box-shadow:0 4px 14px var(--glow);transition:transform .12s;
  }
  .p-mobile-play:active{transform:scale(.94)}
  .p-mobile-play svg{width:20px;height:20px}
  .p-mobile-expand{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--muted)}
  .p-mobile-expand svg{width:20px;height:20px}
  .scroll{padding:18px 16px calc(96px + 20px)}
  .theme-toggle.mini{display:flex}
  .topbar{padding:10px 14px}
}

/* ---------- now playing ---------- */
.np{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  transform:translateY(102%);transition:transform .26s ease-out;
  display:flex;flex-direction:column;overflow:hidden;
}
.np.open{transform:none}
.np-top{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border);flex:none;
}
.np-title{flex:1;min-width:0;text-align:center}
.np-title b{font-size:11px;letter-spacing:.2em;display:block}
.np-title span{font-size:11px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#np-bookmark.on{color:var(--amber)}
#np-bookmark.on svg{fill:var(--amber);stroke:none}
.np-body{
  flex:1;display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
  padding:26px 44px 36px;min-height:0;overflow-y:auto;
}
@media(max-width:820px){.np-body{grid-template-columns:1fr;gap:18px;padding:18px 20px 34px}}
.np-art-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.np-art{
  width:min(40vh,260px);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--emerald),#0B3B2C);box-shadow:0 0 0 10px color-mix(in srgb,var(--emerald) 12%,transparent),0 20px 60px var(--shadow-lg);
}
.np-art .ar{font-size:clamp(52px,8vw,96px);color:var(--on-emerald);line-height:1;padding-top:12px}
.np-art .ar-glyph{font-size:clamp(44px,7vw,84px)}
.np-art-meta{text-align:center}
.np-name{font-size:clamp(21px,3vw,28px);font-weight:800;letter-spacing:-.02em;display:block}
.np-sub{font-size:12.5px;color:var(--muted);display:block;margin-top:3px}
.np-reciter{font-size:13px;color:var(--emerald);font-weight:700;display:block;margin-top:5px}
.np-side{display:flex;flex-direction:column;align-items:center;gap:20px;min-width:0;max-width:560px;margin:0 auto;width:100%}
.np-verse{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;text-align:center;min-height:120px;
}
.v-ar{font-family:var(--arabic);font-size:clamp(20px,2.6vw,26px);line-height:2.15;direction:rtl;font-feature-settings:"cv01"}
.v-en{font-size:13px;color:var(--text-2);font-style:italic;margin-top:8px;line-height:1.65}
.v-ref{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-weight:700}
.np-seek-wrap{width:100%}
.np-times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:6px}
.np-range{height:7px}
.np-controls{display:flex;align-items:center;gap:20px}
.np-controls .c{width:48px;height:48px}
.np-controls .c svg{width:21px;height:21px}
.np-controls .big{width:62px;height:62px}
.np-controls .big svg{width:24px;height:24px}
.np-pills{width:100%;display:flex;flex-direction:column;gap:14px}
.pill-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:76px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:11px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);
  font-size:12.5px;font-weight:700;color:var(--text-2);min-height:48px;transition:all .15s;
}
.pill svg{width:15px;height:15px;flex:none}
.np-top .pill{padding:9px 13px;min-height:40px;font-size:12px}
.pill:hover{border-color:var(--emerald);color:var(--text)}
.pill.active{border-color:var(--emerald);background:var(--emerald);color:var(--on-emerald)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--player-h) + 20px);transform:translateX(-50%) translateY(10px);
  background:var(--text);color:var(--bg);font-size:12.5px;font-weight:600;
  padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:all .25s;z-index:200;white-space:nowrap;max-width:92vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- empty / fallback ---------- */
.empty{padding:30px 10px;color:var(--muted);font-size:13.5px;text-align:center}
.empty b{display:block;color:var(--text);font-size:15px;margin-bottom:5px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* thin integrated seek line at the player's top border */
.p-top-line{
  position:absolute;top:0;left:0;right:0;height:2px;background:var(--border);
  cursor:pointer;z-index:2;
}
.p-top-line i{
  display:block;height:100%;background:var(--emerald);width:0%;transition:width .2s linear;
}
.player:hover .p-top-line{height:6px}
.p-top-line:hover{height:6px}
@media(max-width:900px){.p-top-line{height:2px}.player:hover .p-top-line{height:6px}}

.np-photo{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
}
.np-art img.np-photo{display:block}

/* Quranic typography */
.uthmani{font-family:'UthmanicHafs','Amiri','Scheherazade New','Traditional Arabic',Georgia,serif}
.ar-glyph{font-family:'SurahNameV2','Amiri','Scheherazade New','Traditional Arabic',Georgia,serif}
.v-ar{font-family:'UthmanicHafs','Amiri','Scheherazade New','Traditional Arabic',Georgia,serif}

/* ramadan countdown card */
.ramadan-card{
  display:flex;align-items:center;gap:16px;margin:0 0 6px;padding:18px 20px;
  border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--emerald) 35%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--emerald) 16%,transparent),transparent);
}
.ramadan-card .ric{
  width:52px;height:52px;border-radius:14px;flex:none;
  background:var(--emerald);color:var(--on-emerald);display:flex;align-items:center;justify-content:center;
}
.ramadan-card .ric svg{width:26px;height:26px}
.ramadan-card .rm{flex:1;min-width:0}
.ramadan-card .rm b{font-size:16px;font-weight:700;display:block}
.ramadan-card .rm span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.ramadan-card .days{
  font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  background:var(--emerald);color:var(--on-emerald);border-radius:999px;padding:9px 16px;
  box-shadow:0 3px 12px var(--glow);
}

/* reciter toolbar */
.rec-toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.rec-toolbar .chips{margin:0}

/* safety: never let an inline svg blow up a button */
button svg{max-width:24px;max-height:24px}
.pill svg{width:15px;height:15px}

/* library empty CTA */
#lib-favs-empty{text-align:center;padding:36px 16px;border:1px dashed var(--border);border-radius:16px;margin-top:8px}
#lib-favs-empty b{display:block;font-size:15px;margin-bottom:4px}

/* richer surah cards */
.card .cover{position:relative}
.card .cover-pattern{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.card .cover .ar-glyph{position:relative;z-index:1}
.card .cover .cover-num{
  position:absolute;top:8px;left:10px;z-index:1;
  font-size:10px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;
}
.card .card-meta{font-size:10.5px;color:var(--muted);font-weight:600}
.card b + span{display:block}
.card:hover .cover .cover-pattern{opacity:.7;transform:scale(1.03);transition:all .3s}

/* journey day-0 state */
.journey-layout .dial .dial-core b{color:var(--emerald)}

/* reciter use button (primary action) */
.use-reciter{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;font-weight:700;color:var(--text-2);
  border:1.5px solid var(--border);border-radius:999px;padding:9px 16px;
  min-height:44px;white-space:nowrap;transition:all .18s;
}
.use-reciter:hover{border-color:var(--emerald);color:var(--emerald);transform:translateY(-1px)}
.use-reciter.active{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald);pointer-events:none}
.use-check{display:inline-flex;align-items:center;justify-content:center}
.use-check svg{width:14px;height:14px}
.rec-card .pick{width:44px;height:44px}

/* ---- quiet physical motion system ---- */
.btn,.chip,.pill,.use-reciter,.hero-start{transition:transform .14s ease,background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease}
.btn:active,.chip:active,.pill:active,.use-reciter:active,.hero-start:active,.big:active{transform:scale(.97)}
/* browse filter change: fade + drift */
.list,.cards{transition:opacity .2s ease,transform .2s ease}
.list.fading,.cards.fading{opacity:0;transform:translateY(5px)}
/* reciter drawer: scrim fade + slide (240-320ms) */
.drawer{transition:transform .26s cubic-bezier(.4,0,.2,1)}
.scrim{transition:opacity .25s ease}
/* player expansion: bottom-sheet (260-360ms) */
.np{transition:transform .32s cubic-bezier(.4,0,.2,1)}
/* ayah crossfade (180-240ms) */
.v-ar,.v-en{transition:opacity .22s ease}
.v-ar.swap,.v-en.swap{opacity:0}
/* journey ring + cells (180-240ms) */
.dial-progress{transition:stroke-dashoffset .22s ease}
.juz-tile{transition:background .18s ease,border-color .18s ease,transform .18s ease}
/* toast (180-240ms) */
.toast{transition:opacity .22s ease,transform .22s ease}
/* respects reduced motion */
@media (prefers-reduced-motion: reduce){
  .list,.cards,.v-ar,.v-en,.juz-tile,.dial-progress,.toast,.drawer,.np,.scrim{transition:none!important}
  .btn:active,.chip:active,.pill:active,.use-reciter:active,.hero-start:active,.big:active{transform:none}
}

/* journey locked/upcoming tiles */
.juz-tile.locked{opacity:.55;border-style:dashed}
.juz-tile.locked:hover{border-color:var(--amber);opacity:.8;transform:none}
.juz-tile .lock{position:absolute;top:5px;right:5px;width:10px;height:10px;color:var(--faint);opacity:.7}
/* done start button */
.btn.btn-done{background:var(--surface-2);color:var(--muted);pointer-events:none;box-shadow:none}
.btn.btn-done svg{display:none}
/* reciter medallion */
.rec-card .photo,.fav-rec .av,.rec-item .av,.reciter-pill .av{border:2px solid rgba(243,208,98,.4)}

.np-vol{display:flex;align-items:center;gap:12px;width:100%}
.np-vol .range.vol{max-width:180px}

/* partial progress indicator inside juz tiles */
.juz-tile .tile-progress{
  position:absolute;left:6px;right:6px;bottom:6px;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--emerald) 18%,transparent);overflow:hidden;
}
.juz-tile .tile-progress i{
  display:block;height:100%;background:var(--emerald);border-radius:2px;
}
.juz-tile.today .tile-progress{background:color-mix(in srgb,var(--amber) 22%,transparent)}
.juz-tile.today .tile-progress i{background:var(--amber)}

/* horizontal scroll card rows on mobile with peek */
@media(max-width:820px){
  .hscroll{display:flex;overflow-x:auto;gap:12px;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:none}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll .card{flex:0 0 138px;scroll-snap-align:start}
}

/* HQ badge */
.hq-badge{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:.06em;vertical-align:2px;
  color:var(--emerald);background:color-mix(in srgb,var(--emerald) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--emerald) 35%,transparent);
  border-radius:6px;padding:1px 6px;margin-left:5px;
}
/* library empty art */
.empty-art{
  width:64px;height:64px;border-radius:50%;margin:0 auto 14px;
  background:color-mix(in srgb,var(--emerald) 10%,var(--surface));
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
}
.empty-art svg{color:var(--emerald)}

/* real logo in brand */
.brand-logo{width:38px;height:38px;flex:none;border-radius:10px;box-shadow:0 2px 10px var(--glow)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px}
.brand-logo:hover{transform:scale(1.05);transition:transform .2s}
/* now-playing empty logo */
.np-art-logo{width:52%;height:52%;opacity:.9}
.np-art .ar{display:block}
.topbar-logo{width:26px;height:26px;flex:none}
@media(min-width:901px){.topbar-logo{display:none}}
/* JUZZ compatibility and responsive UX refinements */

html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,input,select{max-width:100%}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .topbar{background:var(--bg)}
  .hero-card{background:linear-gradient(135deg,var(--emerald),#087a4a)}
  .side-note,.account-nav{background:var(--surface)}
  .player{background:var(--surface)}
  .row.active,.rec-card.current{background:#153b2c}
  .juz-tile.today,.juz-tile.available{background:var(--surface)}
  .empty-art,.hq-badge{background:var(--surface-2)}
  .np-secondary-controls .pill.on{background:var(--surface-2)}
}
@supports not (gap:1rem){
  .chips-scroll>*+*,.fav-reciters>*+*,.np-controls>*+*,.actions>*+*{margin-left:10px}
  .rec-list>*+*,.most-listened>*+*{margin-top:8px}
}
@media(max-width:900px){
  .mobile-tabs{padding:6px 4px 10px;padding:6px 4px calc(10px + env(safe-area-inset-bottom))}
  .scroll{padding-bottom:132px;padding-bottom:calc(116px + env(safe-area-inset-bottom))}
  .player{padding-bottom:0}
}
.reciter-pill-copy{display:grid;min-width:0;text-align:left;line-height:1.15}
.reciter-pill-copy small{display:block;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.reciter-pill-copy #pill-name{display:block;min-width:0;max-width:142px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:430px){
  .reciter-pill{width:auto;min-width:0;max-width:138px;padding:5px 8px 5px 5px;gap:6px}
  .reciter-pill-copy #pill-name{max-width:70px;font-size:11px}
  .reciter-pill>svg{width:12px}
  .topbar .crumb{flex:1;min-width:38px;font-size:13px}
}
@media(max-width:340px){
  .topbar .theme-toggle.mini{display:none}
  .topbar{gap:6px;padding-inline:8px}
  .scroll{padding-inline:12px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  :root{--player-h:64px}
  .mobile-tabs{padding-top:2px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .mobile-tabs a{min-height:40px;padding:2px}
  .player{min-height:60px}
  .p-cover{width:44px;height:44px}
}

/* Custom clear buttons own search dismissal; suppress browser duplicate icons. */
input[type="search"]::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
input[type="search"]::-ms-clear{display:none;width:0;height:0}

/* Optional account entry replaces the duplicate labelled theme control. */
.sidebar-account{margin-top:auto;padding:2px 0 4px}
.sidebar .side-note{margin-top:4px}
.account-nav{display:flex;align-items:center;gap:11px;min-height:52px;padding:8px 10px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);text-decoration:none}
.account-nav:hover{border-color:var(--emerald)}
.account-nav-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--emerald) 14%,var(--surface));color:var(--emerald)}
.account-nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.account-nav b,.account-nav small{display:block;max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-nav b{font-size:12.5px}.account-nav small{color:var(--muted);font-size:10.5px;margin-top:1px}

/* Ayah-based Quran progress. */
.progress-layout{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:center;gap:34px;padding:26px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.progress-summary h2{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:8px 0 10px;letter-spacing:-.03em}
.progress-summary p{max-width:580px;margin-bottom:22px}.progress-summary .btn{min-height:50px;padding:0 22px}
.progress-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 34px}
.progress-stat{padding:17px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.progress-stat span{display:block;color:var(--muted);font-size:11.5px}.progress-stat b{display:block;font-size:24px;margin-top:3px;font-variant-numeric:tabular-nums}
.progress-surahs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.progress-surah-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto 40px;align-items:center;gap:10px;min-height:76px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:left}
.progress-surah-card:hover,.progress-surah-card:focus-visible{border-color:var(--emerald)}
.progress-surah-card .idx{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:800}
.progress-surah-main{min-width:0}.progress-surah-main b,.progress-surah-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-surah-main b{font-size:14px}.progress-surah-main small{font-size:11px;color:var(--muted);margin-top:2px}
.progress-mini{display:block;height:4px;margin-top:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}.progress-mini i{display:block;height:100%;background:var(--emerald);border-radius:inherit}
.progress-surah-pct{font-size:12px;font-weight:800;color:var(--emerald);font-variant-numeric:tabular-nums}.progress-surah-card>svg{width:18px;height:18px;color:var(--text-2);justify-self:center}
.progress-empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:16px}.progress-empty .btn{display:inline-flex;margin-top:14px;min-height:46px;padding:0 18px;text-decoration:none}
@media(max-width:820px){.progress-layout{grid-template-columns:1fr;gap:20px;padding:20px}.progress-stats{grid-template-columns:repeat(2,1fr)}.progress-surahs{grid-template-columns:1fr}}
@media(max-width:420px){.progress-stats{gap:8px}.progress-stat{padding:13px}.progress-stat b{font-size:20px}.progress-surah-card{grid-template-columns:40px minmax(0,1fr) auto}.progress-surah-card>svg{display:none}}

/* Secondary card playback stays visually subordinate to the global player. */
.card .play-btn{width:40px;height:40px;right:9px;bottom:9px}
.card .play-btn svg{width:17px;height:17px}
@media(max-width:600px){.card .play-btn{width:40px;height:40px}.card .play-btn svg{width:17px;height:17px}}

/* Expanded player: visible seek track, symmetric transport, secondary controls. */
.np-seek-wrap{width:100%;padding:2px 0}
.np-seek-wrap .range-wrap{min-height:44px;display:flex;align-items:center}
.np-range{
  height:32px;
  padding:14px 0;
  background:linear-gradient(to right,var(--emerald) var(--p,0%),color-mix(in srgb,var(--text) 30%,var(--surface)) var(--p,0%));
  background-clip:content-box;
}
.np-range::-webkit-slider-thumb{width:16px;height:16px}
.np-controls{display:grid;grid-template-columns:48px 56px 48px;align-items:center;justify-content:center;gap:16px}
.np-controls .c{width:48px;height:48px}
.np-controls .big{width:56px;height:56px}
.np-secondary-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;justify-content:center;gap:10px;width:min(100%,300px);margin-inline:auto;padding-top:2px}
.np-secondary-controls .pill{display:grid;grid-template-columns:20px auto;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:48px;padding:10px 14px;line-height:1;text-align:center}
.np-secondary-controls .pill svg{display:block;width:18px;height:18px;justify-self:center}
.np-secondary-controls .pill span{display:block;line-height:1;justify-self:center}
.np-secondary-controls .pill.on{border-color:var(--emerald);color:var(--emerald);background:color-mix(in srgb,var(--emerald) 9%,var(--surface))}
@media(max-width:600px){
  .np-controls{grid-template-columns:48px 48px 48px;gap:14px}
  .np-controls .big{width:48px;height:48px}
  .np-secondary-controls{width:100%}
}
@media(max-width:300px){.np-secondary-controls{grid-template-columns:1fr}}

/* Desktop compact player: stable hierarchy and true transport grid.
   Identity | previous | play | next | progress/time | expand */
@media(min-width:901px){
  :root{--player-h:84px}
  .player{
    display:grid;
    grid-template-columns:minmax(180px,1fr) 40px 52px 40px minmax(160px,1.45fr) 44px;
    align-items:center;
    gap:8px;
    min-height:84px;
    padding:0 18px;
  }
  .player .p-open{grid-column:1;min-width:0;max-width:430px;padding:6px 8px}
  .player .p-cover{width:48px;height:48px;border-radius:11px}
  .player .p-center,.player .p-controls{display:contents}
  .player #p-rewind{grid-column:2}
  .player #p-play{grid-column:3}
  .player #p-fwd{grid-column:4}
  .player .p-controls .c{
    width:40px;height:40px;
    color:var(--text-2);
    background:transparent;
    box-shadow:none;
  }
  .player .p-controls .c:hover{background:var(--surface-2);color:var(--text)}
  .player .p-controls .c svg{width:19px;height:19px}
  .player .p-controls .big{
    width:52px;height:52px;
    background:var(--emerald);color:var(--on-emerald);
    box-shadow:0 5px 18px var(--glow);
  }
  .player .p-controls .big svg{width:23px;height:23px}
  .player .p-progress{grid-column:5;width:100%;max-width:620px;gap:8px;padding:0 6px}
  .player .bar-range{
    height:32px;padding:14px 0;
    background:linear-gradient(to right,var(--emerald) var(--p,0%),color-mix(in srgb,var(--text) 28%,var(--surface)) var(--p,0%));
    background-clip:content-box;
  }
  .player .p-right{grid-column:6;justify-content:center}
  .player .p-right .c{width:44px;height:44px;color:var(--text-2)}
  .player .p-right .c:hover{background:var(--surface-2);color:var(--text)}
  .player .p-top-line{height:2px}
}
@media(min-width:901px) and (max-width:1100px){
  .player{grid-template-columns:minmax(150px,1fr) 38px 50px 38px minmax(100px,1fr) 40px;gap:5px;padding:0 10px}
  .player .p-progress .t{display:none}
  .player .p-controls .big{width:50px;height:50px}
}

/* Long player and reciter metadata remain contained at every width. */
.p-open{overflow:hidden}
.p-meta{min-width:0;max-width:100%;overflow:hidden}
.p-meta b,.p-meta span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-card .m{overflow:hidden}
.rec-card .m b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.rec-card .m .meta-line{min-width:0;max-width:100%;overflow:hidden}
.rec-card .m .meta-line .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Reciter detail and selection actions have separate hierarchy. */
.rec-card-actions{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.rec-card-actions .use-reciter{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-reciter{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);font-size:11.5px;font-weight:700;text-decoration:none;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.view-reciter:hover,.view-reciter:focus-visible{border-color:var(--emerald);color:var(--emerald)}
.drawer .rec-card,.drawer .rec-card.current{
  display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:10px 12px;padding:12px;
}
.drawer .rec-card .photo{grid-column:1;grid-row:1}
.drawer .rec-card .m{grid-column:2;grid-row:1}
.drawer .rec-card .pick{grid-column:3;grid-row:1;width:44px;height:44px}
.drawer .rec-card-actions{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;width:100%}
.drawer .rec-card-actions .use-reciter,.drawer .view-reciter{width:100%;min-height:44px}
@media(max-width:900px){
  .rec-list .rec-card{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:10px 12px;padding:12px}
  .rec-list .rec-card .photo{grid-column:1;grid-row:1}
  .rec-list .rec-card .m{grid-column:2;grid-row:1;min-width:0}
  .rec-list .rec-card .pick{grid-column:3;grid-row:1;width:44px;height:44px}
  .rec-card-actions{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1.2fr;width:100%}
  .rec-card .rec-card-actions .use-reciter{grid-column:auto;grid-row:auto;width:100%}
  .view-reciter{width:100%;min-height:44px}
}
@media(max-width:340px){.rec-card-actions,.drawer .rec-card-actions{grid-template-columns:1fr}.rec-card-actions .use-reciter{min-height:44px}}

/* Clickable custom controls clearly expose hover and keyboard focus. */
.card[role="button"]:focus-visible,
.fav-rec[role="button"]:focus-visible,
.p-open[role="button"]:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
.card[role="button"]:focus-visible .play-btn{
  opacity:1;
  transform:none;
}

/* Five browse-row children need five explicit desktop columns. */
.row{
  grid-template-columns:44px 46px minmax(0,1fr) 48px 44px 48px;
}
.row .share-surah{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);opacity:0;transition:.15s}
.row:hover .share-surah,.row .share-surah:focus-visible{opacity:1}
.row .share-surah:hover{background:var(--surface-2);color:var(--emerald)}
.row .share-surah svg{width:17px;height:17px}
.row .play-go:focus-visible,
.row .fav:focus-visible{
  opacity:1;
}

/* Hidden modal surfaces must never intercept pointer input. */
.drawer[inert],.np[inert]{pointer-events:none}

/* Upcoming juz remain visually quiet without reducing text below AA contrast. */
.juz-tile.locked{opacity:1;background:color-mix(in srgb,var(--surface) 72%,var(--bg))}
.juz-tile.locked span{color:var(--muted)}

/* Improve minimum contrast for supporting copy and inactive controls. */
.crumb,.muted,.micro,.result-count,.group-label,
.p-meta span,.p-progress .t,.mobile-tabs a,.np-sub,.v-ref,.np-times,
.pill-label,.empty,.row .m .meta-line span,.card span,.card .card-meta,
.ramadan-card .rm span,.rec-card .m .meta-line span{
  color:var(--muted);
}

@media(max-width:600px){
  .topbar{gap:8px;padding:9px 12px}

  /* Browse filters stay in one stable row without orphaned controls. */
  .segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:2px;flex-wrap:nowrap}
  .segmented .seg{min-width:0;padding:10px 5px;font-size:12px;white-space:nowrap}

  /* A single horizontal filter rail stays legible and avoids competing rows. */
  .rec-toolbar .chips{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:2px 2px 10px;
    margin-inline:-2px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .rec-toolbar .chips::-webkit-scrollbar{display:none}
  .rec-toolbar .chips .chip{flex:0 0 auto;scroll-snap-align:start}

  /* Keep full reciter identity readable; actions own a separate row. */
  .rec-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 44px;
    align-items:center;
    gap:10px 12px;
    padding:12px;
  }
  .rec-card .photo{grid-column:1;grid-row:1}
  .rec-card .m{grid-column:2;grid-row:1;min-width:0}
  .rec-card .m b{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.3;
  }
  .rec-card .m .meta-line{min-width:0;max-width:100%}
  .rec-card .m .meta-line span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rec-card .pick{grid-column:3;grid-row:1;width:44px;height:44px}
  .rec-card .use-reciter{grid-column:1/-1;grid-row:2;width:100%;min-width:0}

  /* Active mobile navigation includes a shape indicator, not color alone. */
  .mobile-tabs a{position:relative}
  .mobile-tabs a.active::after{content:"";position:absolute;bottom:0;width:20px;height:3px;border-radius:99px;background:currentColor}

  .crumb{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-right{gap:4px;margin-left:auto}
  .theme-toggle.mini{margin:0;padding:8px;min-height:40px}
  .reciter-pill{padding:5px 9px;gap:7px;max-width:152px}
  .reciter-pill #pill-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .scroll{padding:16px 16px calc(96px + 18px)}
  .greet{margin-bottom:16px}
  .greet h1{font-size:25px}

  .ramadan-card{gap:12px;padding:14px;margin-bottom:8px}
  .ramadan-card .ric{width:44px;height:44px;border-radius:12px}
  .ramadan-card .ric svg{width:22px;height:22px}
  .ramadan-card .rm b{font-size:14px}
  .ramadan-card .rm span{font-size:11.5px;line-height:1.45}
  .ramadan-card .days{font-size:17px;padding:8px 12px}

  .hero-card{padding:20px;gap:12px;min-height:0;align-items:flex-start}
  .hero-main{min-width:100%;padding-right:0}
  .hero-main h2{font-size:21px}
  .hero-meta{font-size:12px}
  .hero-actions{gap:9px}
  .hero-start,.hero-ghost{min-height:46px}
  .hero-ar{position:absolute;right:18px;top:16px;opacity:.18;padding:0;pointer-events:none}
  .hero-ar .ar-glyph{font-size:62px}

  /* Compact, scannable rows: hide the decorative glyph, preserve number + actions. */
  .row{
    grid-template-columns:36px minmax(0,1fr) 40px 40px 44px;
    gap:8px;
    min-height:76px;
    padding:9px 4px;
  }
  .row .ar-name{display:none}
  .row .idx{width:36px;height:36px}
  .row .fav,.row .share-surah{width:40px;height:44px;opacity:1}
  .row .play-go{width:44px;height:44px;opacity:1}
  .row .fav{color:var(--text-2)}
  .row .m .meta-line{gap:4px}
  .row .m .meta-line .tag{padding:2px 6px}
  .row .m .meta-line span:nth-child(n+4){display:none}

  .card .play-btn{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

/* Keep essential mobile labels at a readable 12px minimum. */
.card span,.card .card-meta,.pill-label,.mobile-tabs a{font-size:12px}
@media(max-width:600px){.ramadan-card .rm span{font-size:12px}}
@media(max-width:360px){
  .topbar .theme-toggle.mini{display:none}
  .topbar .crumb{flex:1;font-size:14px;font-weight:700;overflow:visible;text-overflow:clip}
  .reciter-pill{width:60px;min-width:60px;padding:6px;gap:4px;justify-content:center}
  .reciter-pill-copy{display:none}
  .reciter-pill>svg{width:12px}
}

/* Compact By-Juz trigger and searchable selection sheet. */
.juz-select-field{display:none}
.juz-desktop-selector{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:14px;scrollbar-width:none}
.juz-desktop-selector::-webkit-scrollbar{display:none}
.juz-empty{border:1px dashed var(--border);border-radius:14px;margin-top:4px}
.juz-drawer{
  position:fixed;left:50%;bottom:0;z-index:90;
  width:min(620px,100%);max-height:min(82vh,760px);
  transform:translate(-50%,105%);
  background:var(--surface);border:1px solid var(--border);border-bottom:0;
  border-radius:22px 22px 0 0;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.juz-drawer.open{transform:translate(-50%,0)}
.juz-drawer[inert]{pointer-events:none}
.drawer-sub{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:2px}
.juz-drawer-tools{padding:12px 14px 8px}
.juz-drawer-list{overflow-y:auto;padding:6px 12px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.juz-choice{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(70px,auto) 24px;
  align-items:center;gap:12px;width:100%;min-height:76px;padding:10px 12px;
  border:1px solid transparent;border-radius:13px;text-align:left;background:transparent;
}
.juz-choice:hover,.juz-choice:focus-visible{background:var(--surface-2);border-color:var(--border)}
.juz-choice.selected{background:color-mix(in srgb,var(--emerald) 10%,var(--surface));border-color:var(--emerald)}
.juz-choice-num{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.juz-choice-main{min-width:0}
.juz-choice-main b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.juz-choice-main small{display:block;color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.juz-choice-ar{font-family:var(--arabic);font-size:18px;color:var(--text-2);text-align:right;white-space:nowrap}
.juz-choice-check{width:20px;height:20px;color:var(--emerald)}
.sr-only{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}
@media(max-width:600px){
  .juz-desktop-selector{display:none}
  .juz-select-field{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
    align-items:center;width:100%;min-height:58px;margin:2px 0 14px;padding:9px 14px;
    border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:left;
  }
  .juz-trigger-label{grid-column:1;grid-row:1;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .juz-select-field strong{grid-column:1;grid-row:2;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .juz-select-field svg{grid-column:2;grid-row:1/3;width:20px;height:20px;fill:none;stroke:var(--text-2);stroke-width:2}
  .juz-drawer{max-height:86vh}
  .juz-choice{grid-template-columns:42px minmax(0,1fr) 22px;gap:10px;min-height:78px;padding:10px}
  .juz-choice-ar{grid-column:2;display:block;text-align:left;font-size:16px;margin-top:2px}
  .juz-choice-check{grid-column:3;grid-row:1/3}
}

/* Quick-routine results explain the set before playback. */
.routine-result-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px;margin-bottom:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.routine-result-head h2{font-size:20px;margin:2px 0}
.routine-result-head .text-btn{align-self:start;color:var(--text-2);text-decoration:none;font-weight:700;font-size:12px}
.routine-result-head .btn{min-height:46px;padding:0 18px}
@media(max-width:600px){.routine-result-head{grid-template-columns:1fr;gap:12px}.routine-result-head .btn{width:100%}.routine-result-head .text-btn{min-height:32px;display:flex;align-items:center}}

/* Available juz are actionable, not visually presented as locked. */
.juz-tile.available{opacity:1;border-style:solid;background:color-mix(in srgb,var(--surface) 78%,var(--bg))}
.juz-tile.available:hover,.juz-tile.available:focus-visible{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 8%,var(--surface))}
.juz-tile.available span{color:var(--muted)}

/* Low-noise legal and provenance navigation across every app route. */
.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:44px;
  padding:22px 2px 8px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}
.site-footer nav{display:flex;gap:8px 16px;flex-wrap:wrap}
.site-footer a{color:var(--text-2);text-decoration:none;font-weight:600}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--text)}
@media(max-width:600px){
  .site-footer{align-items:flex-start;flex-direction:column;margin-top:34px;padding-bottom:12px}
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:12px}
  .site-footer a{min-height:34px;display:flex;align-items:center}
}

/* The HTML hidden attribute must win over generic img/svg display rules. */
[hidden]{display:none!important}

/* Reciter portraits are true circles at every size, regardless of source
   aspect ratio or flexbox pressure. */
.reciter-pill .av{
  flex:0 0 32px;
  width:32px;
  height:32px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  padding:0;
}
.reciter-pill .av-img{
  display:block;
  width:100%;
  height:100%;
  min-width:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:center 34%;
}
.fav-rec .av{
  display:block;
  flex:0 0 58px;
  width:58px;
  height:58px;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  object-position:center 34%;
  overflow:hidden;
}
.rec-card .photo{
  display:block;
  flex:0 0 48px;
  width:48px;
  height:48px;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  object-position:center 34%;
}

/* Surah artwork in both compact and expanded players uses SurahNameV2. */
.p-cover .ar-glyph{
  font-family:'SurahNameV2','Amiri',serif;
  font-size:34px;
  line-height:1;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.np-art #np-art-ar,.np-art #np-art-ar .ar-glyph{
  font-family:'SurahNameV2','Amiri',serif;
  color:#fff;
}
.np-art #np-art-ar .ar-glyph{
  font-size:clamp(72px,11vw,112px);
  text-shadow:0 4px 18px rgba(0,0,0,.35);
}


/* UI fix: smaller play button on home collection cards */
#home-collections .card .play-btn{width:32px;height:32px;right:8px;bottom:8px}
#home-collections .card .play-btn svg{width:14px;height:14px}


/* Full-surah playback mode chip on reciter cards */
.tag.full-tag{background:#0f3b2a;color:#7de8b5;border:1px solid #1a5c40}


/* Mini player: surah name and meta always stay inside the frame */
.p-open .p-meta{flex:1;min-width:0;max-width:100%;overflow:hidden}
.p-open .p-meta b,
.p-open .p-meta span{display:block;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-open .p-cover{flex:none}
.player{overflow:hidden}

/* Now-playing status actions: compact centered buttons (idle/replay/retry) */
.np-status-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.np-status-actions .pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 20px;border-radius:999px;width:auto;flex:0 1 auto}
.np-status-actions .pill svg{flex:none;width:16px;height:16px}
.np-status-actions .pill span{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-status-actions .pill#np-idle-browse{background:var(--emerald);border-color:transparent;color:var(--on-emerald);font-weight:800;box-shadow:0 4px 16px var(--glow)}
.np-status-actions .pill#np-idle-browse:hover{border-color:transparent;filter:brightness(1.06)}
.np-status-actions .pill#np-more{background:transparent}


/* QPC Madinah Mushaf rendering needs generous line spacing */
.v-ar{line-height:2.1;word-spacing:.1em}


/* SEO hero (homepage) */
.greet .greeting-line{display:inline;font-size:clamp(14px,1.8vw,16px);font-weight:800;letter-spacing:-.01em;color:var(--emerald)}
.home-intro{margin:2px 0 20px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.home-intro h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.home-intro p{color:var(--muted);margin:0 0 12px;font-size:13.5px;max-width:640px}
.home-intro-links{display:flex;gap:10px;flex-wrap:wrap}
.noscript-seo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}