*{box-sizing:border-box}

:root{
  --theme:#167260;
  --theme-dark:#0d5d50;
  --theme-darker:#08483e;
  --theme-soft:#e5f4ef;
  --theme-faint:#f2faf7;
  --theme-rgb:22,114,96;
  --word-active:#fff0b0;
  --word-reading:#ffd768;
  --accent:#f1c86b;
  --ink:#21312d;
  --muted:#75817c;
  --line:#e3e9e6;
  --page:#f4f7f6;
  --paper:#fff;
  --cream:#fff4d7;
  --danger:#b74343;
  --font-scale:1;
  --panel-shadow:0 25px 70px rgba(38,54,48,.10);
  --card-shadow:0 24px 65px rgba(67,48,111,.13);
}

html[data-theme="emerald"]{
  --theme:#167260;--theme-dark:#0d5d50;--theme-darker:#08483e;--theme-soft:#e5f4ef;--theme-faint:#f2faf7;--theme-rgb:22,114,96;--word-active:#fff0b0;--word-reading:#ffd768;
}
html[data-theme="navy"]{
  --theme:#214b73;--theme-dark:#183d61;--theme-darker:#102f4d;--theme-soft:#e7eef5;--theme-faint:#f3f7fa;--theme-rgb:33,75,115;--word-active:#c9f3ff;--word-reading:#7fdef8;
}
html[data-theme="turquoise"]{
  --theme:#168b9b;--theme-dark:#0c7382;--theme-darker:#075b67;--theme-soft:#e4f4f6;--theme-faint:#f2fafb;--theme-rgb:22,139,155;--word-active:#fff0b0;--word-reading:#ffd768;
}
html[data-theme="blue"]{
  --theme:#2d74ae;--theme-dark:#215f92;--theme-darker:#174a73;--theme-soft:#e7f0f8;--theme-faint:#f4f8fc;--theme-rgb:45,116,174;--word-active:#fff0ae;--word-reading:#ffd569;
}
html[data-theme="purple"]{
  --theme:#684aa6;--theme-dark:#4c337d;--theme-darker:#3f2b69;--theme-soft:#eee9f7;--theme-faint:#f7f4fb;--theme-rgb:104,74,166;--word-active:#c9f6e8;--word-reading:#8ce6c5;
}
html[data-theme="lilac"]{
  --theme:#8e5dac;--theme-dark:#75478f;--theme-darker:#603674;--theme-soft:#f2eafa;--theme-faint:#faf5fc;--theme-rgb:142,93,172;--word-active:#fff3b2;--word-reading:#ffdf7a;
}
html[data-theme="rose"]{
  --theme:#b24f72;--theme-dark:#963b5c;--theme-darker:#7c2e4a;--theme-soft:#f8e8ee;--theme-faint:#fdf5f8;--theme-rgb:178,79,114;--word-active:#fff0ae;--word-reading:#ffd56d;
}
html[data-theme="peach"]{
  --theme:#b96a53;--theme-dark:#98513f;--theme-darker:#7d4032;--theme-soft:#f8ebe6;--theme-faint:#fdf7f4;--theme-rgb:185,106,83;--word-active:#fff4bd;--word-reading:#ffe083;
}
html[data-theme="amber"]{
  --theme:#a8721c;--theme-dark:#895c13;--theme-darker:#6f490d;--theme-soft:#f6eddc;--theme-faint:#fbf8f1;--theme-rgb:168,114,28;--word-active:#d8f8ff;--word-reading:#9be8f6;
}

html[data-theme="graphite"]{
  --theme:#4f5c63;--theme-dark:#3d484e;--theme-darker:#2f383d;--theme-soft:#e9edef;--theme-faint:#f5f7f8;--theme-rgb:79,92,99;--word-active:#fff0b0;--word-reading:#ffd768;
}
html[data-theme="kids"]{
  --theme:#6b58b7;--theme-dark:#4a78a8;--theme-darker:#315f8e;--theme-soft:#edf2ff;--theme-faint:#f8f9ff;--theme-rgb:107,88,183;--word-active:#fff2a8;--word-reading:#ffe16a;
}

html{scroll-behavior:smooth;background:var(--page)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 13%,rgba(var(--theme-rgb),.035),transparent 24%),
    linear-gradient(180deg,#f6f8f8 0,#f2f6f5 100%);
  font-family:Yekan,Tahoma,Arial,sans-serif;
  line-height:1.8;
  min-height:100vh;
}

@font-face{
  font-family:"Yekan";
  src:url("/font/YekanBakhFaNum-Regular.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"hafs";
  src:url("/font/Hafs.woff2") format("woff2");
  font-display:swap;
}

button,select,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.srOnly{
  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;
}


/* ---------- Local SVG icons (Font Awesome Free, no CDN) ---------- */
.svgIcon{
  --icon:none;
  display:inline-block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
  vertical-align:-.12em;
}
.icon-play{--icon:url("./icons/play.svg")}
.icon-pause{--icon:url("./icons/pause.svg")}
.icon-stop{--icon:url("./icons/stop.svg")}
.icon-backward-step{--icon:url("./icons/backward-step.svg")}
.icon-forward-step{--icon:url("./icons/forward-step.svg")}
.icon-backward-fast{--icon:url("./icons/backward-fast.svg")}
.icon-forward-fast{--icon:url("./icons/forward-fast.svg")}
.icon-expand{--icon:url("./icons/expand.svg")}
.icon-compress{--icon:url("./icons/compress.svg")}
.icon-bars{--icon:url("./icons/bars.svg")}
.icon-repeat{--icon:url("./icons/repeat.svg")}
.icon-chevron-down{--icon:url("./icons/chevron-down.svg")}
.icon-chevron-right{--icon:url("./icons/chevron-right.svg")}
.icon-chevron-left{--icon:url("./icons/chevron-left.svg")}
.icon-book-quran{--icon:url("./icons/book-quran.svg")}
.icon-media-studio{--icon:url("./icons/media-studio.svg")}
.icon-create-image{--icon:url("./icons/image-create.svg")}
.icon-create-video{--icon:url("./icons/video-create.svg")}
.icon-link{--icon:url("./icons/link.svg")}
.icon-copy-link{--icon:url("./icons/copy-link.svg")}
.icon-share{--icon:url("./icons/share.svg")}

/* ---------- Header ---------- */
.topBar{
  width:min(1360px,calc(100% - 32px));
  max-width:1360px;
  height:76px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:#fff;
  border-bottom:0;
  position:relative;
  z-index:50;
}
.topBar::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#fff;
  border-bottom:1px solid #e7ece9;
  box-shadow:0 3px 14px rgba(31,51,43,.025);
  z-index:-1;
}
.brand{
  display:flex;
  align-items:center;
  gap:15px;
  color:inherit;
  text-decoration:none;
}
.brandIcon{
  width:54px;height:54px;
  border-radius:16px;
  background:linear-gradient(145deg,var(--theme),var(--theme-dark));
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(var(--theme-rgb),.22);
  transition:background .25s ease,box-shadow .25s ease;
}
.brandIcon svg{width:28px;height:28px}
.brandText{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.brandText strong{font-size:27px;color:var(--theme-dark);font-weight:800;transition:color .25s ease}
.brandText small{font-size:12px;color:#7b837f;margin-top:5px}

.themePicker{position:relative;direction:rtl}
.themeToggle{
  min-width:72px;height:40px;
  padding:0 10px;
  border:1px solid #e1e7e4;
  border-radius:11px;
  background:#fff;
  color:#52615a;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  box-shadow:0 3px 8px rgba(44,62,55,.025);
}
.themeToggle:hover{border-color:rgba(var(--theme-rgb),.34)}
.themeDot{
  width:18px;height:18px;border-radius:50%;display:block;
  background:var(--theme);
  border:3px solid #fff;
  box-shadow:0 0 0 1px #d9dfdc,0 4px 10px rgba(var(--theme-rgb),.24);
  transition:background .25s ease;
}
.themeMenu{
  position:absolute;
  direction:rtl;
  left:0;
  top:48px;
  width:304px;
  padding:10px;
  border:1px solid #dfe6e2;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 22px 55px rgba(41,56,50,.16);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.985);
  transform-origin:top left;
  transition:.18s ease;
  z-index:90;
  backdrop-filter:blur(10px);
}
.themePicker.open .themeMenu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.themeMenu button{
  height:42px;
  padding:0 11px;
  border:1px solid #e2e7e4;
  border-radius:11px;
  background:#fff;
  color:#5e6964;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.themeMenu button:hover{background:#fafcfb;border-color:#d4ddd8}
.themeMenu button.active{background:var(--theme-faint);border-color:rgba(var(--theme-rgb),.35);color:var(--theme)}
.themeMenu button i{
  width:18px;height:18px;border-radius:50%;display:block;flex:0 0 auto;background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Theme swatches moved from inline HTML styles for CSP compatibility */
.themeMenu [data-theme-value="emerald"] i{--swatch:#0d6f61}
.themeMenu [data-theme-value="navy"] i{--swatch:#183f63}
.themeMenu [data-theme-value="turquoise"] i{--swatch:#13899b}
.themeMenu [data-theme-value="blue"] i{--swatch:#2d73ad}
.themeMenu [data-theme-value="purple"] i{--swatch:#694aa6}
.themeMenu [data-theme-value="lilac"] i{--swatch:#8c5aa8}
.themeMenu [data-theme-value="rose"] i{--swatch:#b04c6f}
.themeMenu [data-theme-value="peach"] i{--swatch:#b86752}
.themeMenu [data-theme-value="amber"] i{--swatch:#a97018}
.themeMenu [data-theme-value="graphite"] i{--swatch:#4f5c63}
.themeMenu button i.kidsSwatch{
  background:conic-gradient(#6a55b6,#2698c5,#30a56f,#f0b844,#e36469,#6a55b6);
}

/* ---------- Main shell ---------- */
.appShell{
  width:min(1360px,calc(100% - 32px));
  max-width:1360px;
  margin:0 auto;
  padding:32px 18px 34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  grid-template-areas:"content side";
  gap:20px;
  align-items:start;
  direction:ltr;
}
.contentPanel{grid-area:content;min-width:0;direction:rtl}
.sidePanel{grid-area:side;direction:rtl}

.sidePanel{
  height:635px;
  min-height:635px;
  overflow:auto;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(230,235,232,.9);
  border-radius:16px;
  box-shadow:var(--panel-shadow);
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--theme-rgb),.28) transparent;
}
.sidePanel::-webkit-scrollbar{width:7px}
.sidePanel::-webkit-scrollbar-thumb{background:rgba(var(--theme-rgb),.24);border-radius:99px}
.sidePanelHeader{
  padding:24px 24px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #e7ece9;
}
.sidePanelHeader>div{display:flex;flex-direction:column;align-items:flex-start}
.sidePanelHeader strong{font-size:20px;color:var(--theme-dark);font-weight:800;transition:color .25s ease}
.sidePanelHeader span{font-size:11px;color:#808985;margin-top:6px}
.mobileToggle{display:none}
.mobileToggle .svgIcon{width:16px;height:16px}
.sidePanelBody{padding:16px 24px 24px}
.sidePanel select,.sidePanel input[type=number],.sidePanel button{letter-spacing:0}
.sidePanel .advancedBox summary{font-size:13px}
.sidePanel .softBtn{font-size:13px}

.modeTabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#eff3f1;
  padding:5px;
  border-radius:15px;
  gap:4px;
  margin-bottom:18px;
}
.tab{
  height:44px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#53645d;
  font-size:14px;
  font-weight:700;
}
.tab.active{
  background:#fff;
  color:var(--theme);
  box-shadow:0 4px 14px rgba(42,56,50,.06);
}
.selectAyahBtn{
  width:100%;height:52px;
  border:0;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--theme),var(--theme-dark));
  font-size:16px;
  font-weight:800;
  box-shadow:0 10px 26px rgba(var(--theme-rgb),.18);
  transition:transform .15s ease,filter .15s ease,background .25s ease;
}
.selectAyahBtn:hover{filter:brightness(1.03);transform:translateY(-1px)}
.panelDivider{height:1px;background:#e5ebe8;margin:16px 0 5px}

.filterStack{display:flex;flex-direction:column;gap:10px}
.filterStack label>span,
.learningControls label>span{
  display:block;
  margin:0 3px 5px;
  font-size:11px;
  font-weight:700;
  color:#68736e;
}
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:8px}
select,input[type=number]{
  width:100%;
  height:49px;
  border:1px solid #e0e7e3;
  border-radius:11px;
  padding:0 11px;
  background:#fff;
  color:#25352f;
  outline:none;
  font-size:14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
select:focus,input:focus{border-color:rgba(var(--theme-rgb),.48);box-shadow:0 0 0 4px rgba(var(--theme-rgb),.08)}
.inlineField{display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:8px}
.softBtn{
  border:1px solid #dce4e0;
  border-radius:11px;
  background:#f4f7f6;
  color:#53665d;
  min-height:46px;
  padding:8px 14px;
}
.pageField .softBtn{height:49px;font-size:14px}
.softBtn:hover{background:var(--theme-faint);border-color:rgba(var(--theme-rgb),.25);color:var(--theme-dark)}

.advancedBox{
  margin-top:15px;
  border:1px solid #e4eae7;
  border-radius:14px;
  overflow:hidden;
  background:#fbfcfc;
}
.advancedBox summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  color:#52625b;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.advancedBox summary::-webkit-details-marker{display:none}
.advancedBox summary::after{content:"";width:12px;height:12px;background:var(--theme);-webkit-mask:url("./icons/chevron-down.svg") center/contain no-repeat;mask:url("./icons/chevron-down.svg") center/contain no-repeat;transition:transform .18s ease}
.advancedBox[open] summary::after{transform:rotate(180deg)}
.advancedBody{padding:0 13px 14px}
.fontBox,.learningControls,.jumpGrid,.checkStack{
  padding:13px;
  border:1px solid #e1e8e4;
  border-radius:14px;
  background:#fff;
  margin-top:7px;
}
.fontBoxHead,.speedBoxHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.fontBoxHead span,.speedBoxHead span{font-size:12px;color:#68736e}
.fontBoxHead strong,.speedBoxHead strong{color:var(--theme)}
#fontScaleRange,#playbackRateRange{width:100%}
.settingRange{
  appearance:none;
  -webkit-appearance:none;
  height:4px;
  border:0;
  border-radius:999px;
  outline:0;
  background:linear-gradient(90deg,var(--theme) 0 var(--range-progress,50%),#e5ebe8 var(--range-progress,50%) 100%);
  cursor:pointer;
  direction:ltr;
}
.settingRange::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:transparent}
.settingRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-5px;
  border-radius:50%;border:2px solid #fff;
  background:var(--theme);
  box-shadow:0 1px 5px rgba(var(--theme-rgb),.28);
}
.settingRange::-moz-range-track{height:4px;border-radius:999px;background:#e5ebe8}
.settingRange::-moz-range-progress{height:4px;border-radius:999px;background:var(--theme)}
.settingRange::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;border:2px solid #fff;
  background:var(--theme);box-shadow:0 1px 5px rgba(var(--theme-rgb),.28)
}
.fontPresets,.speedPresets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.fontPresets button,.speedPresets button{
  border:1px solid #dfe6e2;background:#fff;border-radius:10px;color:#53645d;padding:6px 2px;font-size:11px;
}
.fontPresets button.active,.speedPresets button.active{background:var(--theme);border-color:var(--theme);color:#fff}
.speedBox{
  padding:13px;
  border:1px solid #e1e8e4;
  border-radius:14px;
  background:#fff;
  margin-top:7px;
}
.settingRangeBox{transition:border-color .18s ease,box-shadow .18s ease}
.settingRangeBox:focus-within{border-color:rgba(var(--theme-rgb),.26);box-shadow:0 0 0 3px rgba(var(--theme-rgb),.055)}
.learningControls{display:flex;flex-direction:column;gap:9px}
.repeatBtn{
  border:0;
  border-radius:12px;
  min-height:44px;
  background:linear-gradient(135deg,#aa7c28,#8e651d);
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.repeatBtn .svgIcon{width:14px;height:14px}
.repeatBtn.active{background:linear-gradient(135deg,#b44747,#8f3030)}
.jumpGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jumpGrid .softBtn{margin:0}
.checkStack{display:flex;flex-direction:column;gap:7px}
.checkLabel{display:flex;align-items:center;gap:7px;font-size:12px;color:#607068}
.checkLabel input{accent-color:var(--theme)}

/* ---------- Main listening card ---------- */
.ayahStage{min-height:635px}
.listenCard{
  position:relative;
  min-height:635px;
  height:635px;
  overflow:hidden;
  border-radius:20px;
  padding:27px 36px 24px;
  color:#fff;
  background:
    radial-gradient(circle at 17% 13%,rgba(255,255,255,.10),transparent 31%),
    linear-gradient(135deg,color-mix(in srgb,var(--theme) 92%,white 8%) 0%,var(--theme) 38%,var(--theme-dark) 100%);
  box-shadow:var(--card-shadow);
  transition:background .3s ease,box-shadow .3s ease;
  display:flex;
  flex-direction:column;
}
html[data-theme="kids"] .listenCard{
  background:
    radial-gradient(circle at 19% 17%,rgba(255,255,255,.13),transparent 28%),
    linear-gradient(135deg,#7356b6 0%,#4f79b9 38%,#29948e 72%,#b86e79 118%);
}
.ornament{
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.075);
  pointer-events:none;
}
.ornamentOne{left:-430px;top:-255px}
.ornamentTwo{left:-285px;top:-350px;width:730px;height:730px}
.listenHeading{position:relative;z-index:2;text-align:right;display:flex;flex-direction:column;align-items:flex-start;margin-right:0}
.playingEyebrow{font-size:14px;color:rgba(255,255,255,.76);margin-bottom:8px}
.nowPlaying{
  max-width:84%;
  font-size:30px;
  line-height:1.55;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.playerStatus{font-size:14px;color:rgba(255,255,255,.74);margin-top:5px;min-height:26px}

.focusVerse{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-height:175px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 20px 12px;
}
.basmalaCard{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  flex:0 0 auto;
  border:0;
  background:transparent;
  box-shadow:none;
  color:rgba(255,255,255,.92);
  font-family:hafs,"Traditional Arabic",serif;
  font-size:calc(25px * var(--font-scale));
  white-space:nowrap;
}
.versesList{width:100%;display:flex;align-items:center;justify-content:center}
.ayahCard{
  display:none;
  width:100%;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
  text-align:center;
}
.ayahCard.active{display:block}
.ayahHeader{display:none}
.ayahArabic{
  direction:rtl;
  text-align:center;
  color:#fff;
  font-family:hafs,"Traditional Arabic","Amiri",serif;
  font-size:calc(39px * var(--font-scale));
  line-height:2.05;
  padding:10px 22px 8px;
  min-height:93px;
}
.ayahTranslation{
  max-width:760px;
  margin:0 auto;
  border:0;
  padding:4px 18px 0;
  color:rgba(255,255,255,.80);
  font-size:calc(17px * var(--font-scale));
  line-height:2;
}
.inlineQuranWord,.inlineQuranMark{font-family:inherit}
.inlineQuranWord{
  display:inline;
  cursor:pointer;
  border-radius:4px;
  transition:color .12s ease,text-shadow .12s ease;
}
.inlineQuranWord:hover{color:#fff3b7}
.inlineQuranWord.wordActive{color:var(--word-active)!important;font-weight:800;text-shadow:0 0 12px color-mix(in srgb,var(--word-active) 24%,transparent)}
.inlineQuranWord.wordReading{color:var(--word-reading)!important;font-weight:800;text-shadow:0 0 11px color-mix(in srgb,var(--word-reading) 20%,transparent)}
.inlineQuranWord.wordActive.wordReading{color:var(--word-reading)!important}
.wordStrip{display:none!important}

.playerPanel{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  padding:14px 20px 12px;
}
#audio,#wordAudio{display:none!important}
.customProgressRow{
  direction:ltr;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  align-items:center;
  gap:11px;
  color:rgba(255,255,255,.72);
  font-size:11px;
}
.customProgress{
  --played:0%;
  width:100%;
  height:16px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.customProgress::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(to right,rgba(255,255,255,.52) 0 var(--played),rgba(255,255,255,.16) var(--played) 100%);
}
.customProgress::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.78);margin-top:-2px;border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
  transition:transform .18s ease,background .18s ease;
}
.customProgress:hover::-webkit-slider-thumb{transform:scale(1.12);background:#fff}
.customProgress::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.16)}
.customProgress::-moz-range-progress{height:4px;border-radius:99px;background:rgba(255,255,255,.52)}
.customProgress::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:rgba(255,255,255,.78)}
.customControls{
  direction:ltr;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-top:7px;
}
.controlCluster{display:flex;align-items:center;gap:10px}
.controlCluster:last-child{justify-content:flex-end}
.roundControl{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.045);
  color:#fff;
  display:grid;place-items:center;
  font-size:17px;
  transition:.15s ease;
}
.roundControl .svgIcon{width:15px;height:15px;opacity:.94}
.roundControl:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.playerQuickTools{
  direction:rtl;
  width:max-content;
  max-width:100%;
  margin:10px auto 0;
  padding:5px 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(7px);
}
.quickToolBtn{
  width:35px;height:35px;border-radius:50%;border:0;background:transparent;color:rgba(255,255,255,.86);
  display:grid;place-items:center;cursor:pointer;transition:.15s ease;
}
.quickToolBtn .svgIcon{width:14px;height:14px}
#shareAyahBtn{width:37px;height:37px}
#shareAyahBtn .svgIcon{width:16.5px;height:16.5px}
.quickToolBtn:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px)}
.quickToolBtn.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.playerToolMenu{position:relative;display:grid;place-items:center}
.playerMiniMenu{position:absolute;bottom:calc(100% + 10px);right:50%;transform:translateX(50%);z-index:50;min-width:210px;padding:11px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(19,38,34,.97);box-shadow:0 18px 45px rgba(0,0,0,.28);color:#fff;text-align:right;direction:rtl}
.playerMiniMenu[hidden]{display:none!important}
.playerMiniMenu strong{display:block;font-size:12px;margin:0 2px 8px}
.playerMiniMenu small{display:block;margin:8px 2px 0;color:rgba(255,255,255,.62);font-size:10px;line-height:1.7}
.miniMenuChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.miniMenuChoices button{min-width:0;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.065);color:#fff;padding:7px 5px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.miniMenuChoices button:hover,.miniMenuChoices button.active{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.28)}
.sleepChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
.sleepToolWrap{display:none}










@media(max-width:900px){.sleepToolWrap{display:grid}.playerMiniMenu{min-width:190px}.miniMenuChoices button{font-size:10.5px}.sleepChoices button{padding-block:8px}}
.quickToolMedia{color:#fff}
.playerToolDivider{width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 2px}
.shareToast{
  position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,16px);
  z-index:2000;min-width:170px;max-width:calc(100vw - 32px);padding:10px 15px;border-radius:12px;
  background:rgba(24,38,33,.94);color:#fff;text-align:center;font-size:12px;font-weight:800;
  box-shadow:0 12px 32px rgba(0,0,0,.20);opacity:0;pointer-events:none;transition:.2s ease;
}
.shareToast.show{opacity:1;transform:translate(-50%,0)}
.mainPlayBtn{
  width:76px;height:76px;border-radius:50%;border:0;background:#fff;color:var(--theme);
  display:grid;place-items:center;font-size:27px;font-weight:800;box-shadow:0 12px 28px rgba(28,20,48,.13);
  transition:color .25s ease,transform .15s ease;
}
.mainPlayBtn .svgIcon{width:21px;height:21px}
.mainPlayBtn:hover{transform:scale(1.025)}
.syncHint{
  margin-top:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:rgba(255,255,255,.74);
  font-size:12px;
}
.syncHint i{
  width:8px;height:8px;border-radius:50%;background:var(--accent);display:block;
  box-shadow:0 0 0 7px rgba(241,200,107,.08);
}
.warningBox{
  position:relative;
  z-index:3;
  margin-top:10px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:8px 18px;
  border-radius:14px;
  border:1px solid #ead69f;
  background:var(--cream);
  color:#85631f;
  font-size:13px;
}

/* ---------- Player fullscreen ---------- */
.listenCard:fullscreen,
.listenCard:-webkit-full-screen,
.listenCard.playerFullscreenFallback{
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0!important;
  border-radius:0!important;
  padding:max(24px,env(safe-area-inset-top)) clamp(18px,5vw,70px) max(18px,env(safe-area-inset-bottom))!important;
  box-shadow:none!important;
}
.listenCard:fullscreen .focusVerse,
.listenCard:-webkit-full-screen .focusVerse,
.listenCard.playerFullscreenFallback .focusVerse{
  min-height:0!important;
  padding-block:clamp(14px,4vh,48px)!important;
}
.listenCard:fullscreen .playerPanel,
.listenCard:-webkit-full-screen .playerPanel,
.listenCard.playerFullscreenFallback .playerPanel{
  width:min(980px,100%)!important;
  margin-inline:auto!important;
}
.listenCard:fullscreen .nowPlaying,
.listenCard:-webkit-full-screen .nowPlaying,
.listenCard.playerFullscreenFallback .nowPlaying{max-width:92%!important}
.listenCard.playerFullscreenFallback{position:fixed!important;inset:0!important;z-index:12000!important}
body.playerFullscreenFallbackOpen{overflow:hidden!important}

/* ---------- Mushaf ---------- */
.mushafSection{
  min-height:680px;
  background:#fff;
  border:1px solid #e6ebe8;
  border-radius:36px;
  padding:24px;
  box-shadow:var(--panel-shadow);
}
.mushafToolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  text-align:center;
  max-width:960px;
  margin:0 auto 15px;
}
.mushafToolbar>div{display:flex;flex-direction:column}
.mushafToolbar strong{color:var(--theme-dark)}
.mushafToolbar span,.mushafClickHint{color:#7a8781;font-size:12px}
.mushafPageNav{
  min-width:82px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:10px;font-size:12px;font-weight:800;
}
.mushafPageNav .svgIcon{width:11px;height:11px}
.mushafPageMeta{min-width:0}
.mushafFrame{
  max-width:960px;
  margin:0 auto;
  padding:23px;
  border-radius:25px;
  background:linear-gradient(135deg,#e8d7b2,#f8f2e5,#ddc89b);
  border:1px solid #d9c293;
  box-shadow:0 18px 48px rgba(57,47,26,.13);
}
.mushafInner{
  min-height:980px;
  padding:42px 22px;
  border:1px solid #d9caaa;
  border-radius:15px;
  background:#fffdf8;
  box-shadow:inset 0 0 0 7px rgba(176,146,93,.055),inset 0 0 45px rgba(142,112,60,.045);
}
.mushafPage{direction:rtl;text-align:center}
.mushafLine{min-height:calc(53px * var(--font-scale));white-space:nowrap;text-align:center;line-height:1.75}
.qcfWord{display:inline-block;cursor:pointer;border-radius:4px;transition:color .12s ease}
.qcfWord:hover{color:var(--theme)}
.qcfWord.active{background:transparent!important;box-shadow:none!important}
.qcfWord.wordActive{color:var(--theme-dark)!important;font-weight:800}
.qcfWord.wordReading{color:var(--theme)!important;font-weight:800;text-shadow:0 0 8px rgba(var(--theme-rgb),.12)}
.qcfAyahEnd{cursor:pointer;border-radius:50%}
.qcfAyahEnd:hover{color:var(--theme)}
.mushafTranslationPanel{
  max-width:960px;margin:16px auto 0;padding:19px 22px;background:#fff;border:1px solid #e2e8e5;border-radius:17px;
}
.mushafTranslationPanel h3{margin:0 0 10px;color:var(--theme-dark)}
.pageTranslationItem{padding:9px 0;border-top:1px dashed #e6ebe8;font-size:calc(14px * var(--font-scale))}
.pageTranslationItem:first-child{border-top:0}
.pageTranslationItem.active{background:var(--theme-faint);border-radius:10px;padding:9px 11px;box-shadow:inset -4px 0 0 var(--theme)}
.pageTranslationItem strong{color:var(--theme)}

footer{
  width:min(1360px,calc(100% - 32px));
  max-width:1360px;
  margin:0 auto;
  padding:0 24px 30px;
  color:#89938e;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}

/* ---------- Minimal filter panel refinement ---------- */
.sidePanel{
  border-radius:16px;
  box-shadow:0 14px 38px rgba(38,54,48,.07);
}
.sidePanelHeader{
  padding:18px 18px 13px;
  gap:10px;
}
.sidePanelHeader strong{font-size:17px}
.sidePanelHeader span{font-size:10px;margin-top:4px}
.sidePanelBody{padding:13px 18px 18px}

.sidePanel .modeTabs{
  padding:3px;
  gap:3px;
  margin-bottom:12px;
  border-radius:8px;
}
.sidePanel .tab{
  height:37px;
  border-radius:6px;
  font-size:12.5px;
  font-weight:700;
}
.sidePanel .selectAyahBtn{
  height:44px;
  border-radius:8px;
  font-size:13.5px;
  box-shadow:0 7px 18px rgba(var(--theme-rgb),.13);
}
.sidePanel .panelDivider{margin:11px 0 4px}
.sidePanel .panelDividerTop{margin-top:2px}
.sidePanel .filterStack{gap:8px}
.sidePanel .filterStack label>span,
.sidePanel .learningControls label>span{
  margin:0 2px 4px;
  font-size:10.5px;
  font-weight:700;
}
.sidePanel .twoCol{gap:7px}
.sidePanel select,
.sidePanel input[type=number]{
  height:42px;
  border-radius:7px;
  padding:0 9px;
  font-size:12.5px;
}
.sidePanel select:focus,
.sidePanel input[type=number]:focus{
  box-shadow:0 0 0 3px rgba(var(--theme-rgb),.07);
}
.sidePanel .inlineField{grid-template-columns:minmax(0,1fr) 60px;gap:7px}
.sidePanel .softBtn{
  min-height:41px;
  border-radius:7px;
  padding:7px 10px;
  font-size:12px;
}
.sidePanel .pageField .softBtn{height:42px;font-size:12px}
.sidePanel .advancedBox{
  margin-top:10px;
  border-radius:8px;
}
.sidePanel .advancedBox summary{
  padding:9px 11px;
  font-size:11.5px;
}
.sidePanel .advancedBody{padding:0 10px 10px}
.sidePanel .fontBox,
.sidePanel .speedBox,
.sidePanel .learningControls,
.sidePanel .jumpGrid,
.sidePanel .checkStack{
  padding:10px;
  border-radius:8px;
  margin-top:6px;
}
.sidePanel .fontBoxHead span,.sidePanel .speedBoxHead span{font-size:11px}
.sidePanel .fontBoxHead strong,.sidePanel .speedBoxHead strong{font-size:11.5px}
.sidePanel .fontPresets button,.sidePanel .speedPresets button{padding:5px 2px;font-size:10.5px;border-radius:6px}
.sidePanel .learningControls{gap:7px}
.sidePanel .repeatBtn{min-height:41px;border-radius:7px;font-size:12px}
.sidePanel .jumpGrid{gap:7px}
.sidePanel .checkStack{gap:6px}
.sidePanel .checkLabel{font-size:11.5px}

/* ---------- Responsive ---------- */
@media(max-width:1400px){
  .appShell{grid-template-columns:minmax(0,1fr) 325px;gap:18px}
  .sidePanelHeader{padding:17px 17px 12px}
  .sidePanelBody{padding:12px 17px 17px}
  .sidePanelHeader strong{font-size:16.5px}
  .listenCard{padding:26px 30px 22px}
}

@media(max-width:1050px){
  .topBar{height:74px}
  .brandIcon{width:52px;height:52px;border-radius:15px}
  .brandText strong{font-size:27px}
  .appShell{
    padding-top:24px;
    grid-template-columns:minmax(0,1fr) 300px;
    grid-template-areas:"content side";
    gap:16px;
  }
  .sidePanel{height:635px;min-height:635px;border-radius:16px}
  .listenCard{height:635px;min-height:635px;border-radius:18px}
  .nowPlaying{font-size:24px}
  .ayahArabic{font-size:calc(34px * var(--font-scale))}
  .mainPlayBtn{width:72px;height:72px}
  .themeMenu{width:300px}
}

@media(max-width:820px){
  .topBar{height:76px;padding:0 14px}
  .brand{gap:10px}
  .brandIcon{width:48px;height:48px;border-radius:14px}
  .brandText strong{font-size:22px}
  .brandText small{font-size:11px;margin-top:3px}
  .themeToggle{height:40px;min-width:70px;border-radius:11px;padding:0 10px}
  .themeDot{width:18px;height:18px}
  .themeMenu{top:48px;width:min(304px,calc(100vw - 28px));grid-template-columns:1fr 1fr}

  .appShell{display:flex;flex-direction:column;width:calc(100% - 20px);padding:16px 10px 28px;gap:12px;direction:rtl}
  .sidePanel{order:0;width:100%;height:auto;min-height:0;overflow:visible;border-radius:14px}
  .contentPanel{order:1;width:100%}
  .sidePanelHeader{padding:15px 17px;border-bottom:0}
  .sidePanelHeader strong{font-size:17px}
  .mobileToggle{
    display:grid;place-items:center;width:42px;height:42px;border:1px solid #e0e7e3;border-radius:12px;background:#f5f8f7;color:var(--theme);
  }
  .sidePanelBody{padding:0 15px 16px}
  .sidePanelBody.mobileCollapsed{display:none}
  .modeTabs{margin-bottom:10px}
  .tab{height:40px}
  .selectAyahBtn{height:46px;font-size:14px}
  .filterStack{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .surahAyahRow{grid-column:1/-1}
  .filterStack>label:first-child,.filterStack>label:nth-of-type(2),.filterStack>label:nth-of-type(3){grid-column:1/-1}
  .filterStack>.twoCol{grid-column:1/-1}
  .advancedBox{grid-column:1/-1}
  .listenCard{height:auto;min-height:610px;border-radius:17px;padding:25px 18px 20px}
  .nowPlaying{max-width:100%;font-size:22px}
  .focusVerse{min-height:240px;padding:24px 0 12px}
  .ayahArabic{font-size:calc(31px * var(--font-scale));padding:8px 8px}
  .ayahTranslation{font-size:calc(15px * var(--font-scale));padding:3px 8px 0}
  .playerPanel{padding:16px 14px 14px}
  .customProgressRow{grid-template-columns:46px 1fr 46px;gap:7px}
  .roundControl{width:46px;height:46px}
  .mainPlayBtn{width:72px;height:72px;font-size:27px}
  .controlCluster{gap:7px}
  .warningBox{padding:8px 14px}
  .mushafSection{border-radius:26px;padding:14px}
  .mushafInner{min-height:760px;padding:30px 10px}
}

@media(max-width:520px){
  .brandText strong{font-size:20px}
  .brandText small{display:none}
  .themeToggle span{display:none}
  .themeToggle{min-width:40px;width:40px;padding:0}
  .themeMenu{grid-template-columns:1fr 1fr;gap:7px;padding:10px}
  .themeMenu button{height:40px;padding:0 9px;font-size:12px}
  .themeMenu button i{width:17px;height:17px}
  .filterStack{display:flex;flex-direction:column}
  .surahAyahRow{grid-template-columns:minmax(0,1.35fr) minmax(86px,.65fr)}
  .sidePanelHeader{padding:14px 15px}
  .sidePanelBody{padding:0 13px 14px}
  .twoCol{grid-template-columns:1fr 1fr}
  .listenCard{min-height:590px;padding:22px 13px 16px}
  .playingEyebrow{font-size:12px}
  .nowPlaying{font-size:18px}
  .playerStatus{font-size:12px}
  .focusVerse{min-height:245px;padding-top:34px}
  .basmalaCard{font-size:calc(20px * var(--font-scale));top:17px}
  .ayahArabic{font-size:calc(28px * var(--font-scale));line-height:2.1}
  .ayahTranslation{font-size:calc(14px * var(--font-scale));line-height:1.9}
  .customControls{grid-template-columns:1fr auto 1fr}
  .controlCluster{gap:5px}
  .roundControl{width:40px;height:40px;font-size:14px}
  .mainPlayBtn{width:64px;height:64px;font-size:24px}
  .syncHint{font-size:10px}
  .mushafToolbar{grid-template-columns:1fr 1.4fr 1fr;gap:6px}
  footer{flex-direction:column;padding:0 14px 24px}
}

.playVerseBtn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.playVerseBtn .svgIcon{width:12px;height:12px}


/* ---------- Compact primary navigation / repeat layout ---------- */
.sidePanelHeader>div{display:flex;align-items:center;min-height:28px}
.sidePanelHeader strong{line-height:1.35}

/* سوره و آیه در یک ردیف؛ ناوبری قبلی/بعدی فقط در پلیر می‌ماند */
.surahAyahRow{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(92px,.55fr);
  gap:7px;
  align-items:end;
}
.surahAyahRow label{min-width:0}
.surahAyahRow select{min-width:0;width:100%}

.sidePanel .learningControls{padding:9px}
.repeatInlineRow{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) 64px;
  gap:6px;
  align-items:end;
}
.repeatInlineRow label{min-width:0}
.sidePanel .repeatInlineRow select{width:100%;min-width:0}
.sidePanel .compactRepeatBtn{
  width:64px;
  min-width:64px;
  height:42px;
  min-height:42px;
  padding:0 7px;
  border-radius:7px;
  gap:5px;
  font-size:11px;
  white-space:nowrap;
}
.sidePanel .compactRepeatBtn .svgIcon{width:12px;height:12px}

@media(max-width:1050px){
  .repeatInlineRow{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 58px}
  .sidePanel .compactRepeatBtn{width:58px;min-width:58px}
}

@media(max-width:760px){
  .repeatInlineRow{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) 64px}
  .sidePanel .compactRepeatBtn{width:64px;min-width:64px}
}

/* ==========================================================
   Mobile app navigation — fixed Android-like bottom bar
   ========================================================== */
.icon-home{--icon:url("./icons/home.svg")}
.icon-headphones{--icon:url("./icons/headphones.svg")}
.icon-book-open{--icon:url("./icons/book-open.svg")}
.icon-info{--icon:url("./icons/info.svg")}
.icon-xmark{--icon:url("./icons/xmark.svg")}

.mobileBottomNav,
.mobileBottomSheet,
.mobileSheetBackdrop{display:none}

@media(max-width:820px){
  body{padding-bottom:74px}
  body.mobileSheetOpen{overflow:hidden}

  /* در موبایل ستون دسکتاپ حذف می‌شود؛ همان کنترل‌ها داخل Bottom Sheet منتقل می‌شوند. */
  .sidePanel{display:none!important}
  .appShell{
    width:calc(100% - 20px);
    padding:16px 10px 24px;
    gap:0;
  }
  .contentPanel{order:0;width:100%}
  footer{padding-bottom:18px}

  .mobileBottomNav{
    position:fixed;
    z-index:170;
    right:0;
    left:0;
    bottom:0;
    height:68px;
    padding:5px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    direction:rtl;
    background:rgba(255,255,255,.985);
    border-top:1px solid #e6ece9;
    box-shadow:0 -8px 28px rgba(35,52,45,.055);
  }
  .mobileNavItem{
    position:relative;
    border:0;
    background:transparent;
    color:#7b8781;
    min-width:0;
    padding:4px 2px 3px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:9.5px;
    font-weight:700;
    line-height:1.25;
    transition:color .16s ease;
    isolation:isolate;
  }
  .mobileNavItem::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:4px;
    width:42px;
    height:28px;
    border-radius:14px;
    background:transparent;
    transition:background .16s ease,transform .16s ease;
  }
  .mobileNavItem .svgIcon{
    width:19px;
    height:19px;
    margin-bottom:1px;
    transition:transform .16s ease;
  }
  .mobileNavItem.active{color:var(--theme-dark)}
  .mobileNavItem.active::before{background:var(--theme-soft)}
  .mobileNavItem.active .svgIcon{transform:translateY(-1px)}

  .mobileSheetBackdrop{
    display:block;
    position:fixed;
    z-index:150;
    inset:0 0 68px 0;
    width:100%;
    border:0;
    padding:0;
    background:rgba(16,27,23,.28);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .mobileSheetBackdrop.isVisible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .mobileBottomSheet{
    display:flex;
    position:fixed;
    z-index:160;
    right:50%;
    bottom:68px;
    width:min(100%,560px);
    max-height:min(76dvh,690px);
    flex-direction:column;
    background:#fff;
    border:1px solid #e4eae7;
    border-bottom:0;
    border-radius:20px 20px 0 0;
    box-shadow:0 -20px 55px rgba(28,43,37,.16);
    transform:translate(50%,calc(100% + 24px));
    opacity:.98;
    visibility:hidden;
    pointer-events:none;
    transition:transform .25s cubic-bezier(.2,.75,.25,1),visibility .25s ease;
    overflow:hidden;
  }
  .mobileBottomSheet.isOpen{
    transform:translate(50%,0);
    visibility:visible;
    pointer-events:auto;
  }
  .mobileSheetHandle{
    width:38px;
    height:4px;
    flex:0 0 auto;
    margin:8px auto 2px;
    border-radius:999px;
    background:#dce3df;
  }
  .mobileSheetHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 16px 11px;
    border-bottom:1px solid #edf1ef;
  }
  .mobileSheetHeader>div{display:flex;flex-direction:column;align-items:flex-start;line-height:1.45}
  .mobileSheetHeader strong{font-size:15px;color:#26352f;font-weight:800}
  .mobileSheetHeader span{font-size:10px;color:#8a938f;margin-top:2px}
  .mobileSheetClose{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:1px solid #e5ebe8;
    border-radius:9px;
    background:#f8faf9;
    color:#65716b;
    display:grid;
    place-items:center;
  }
  .mobileSheetClose .svgIcon{width:15px;height:15px}
  .mobileSheetContent{
    overflow:auto;
    overscroll-behavior:contain;
    padding:12px 15px max(16px,env(safe-area-inset-bottom));
    scrollbar-width:thin;
    scrollbar-color:#dfe6e2 transparent;
  }

  /* کنترل‌های اصلی داخل شیت تلاوت */
  #mobilePlaybackContent .modeTabs{
    margin:0 0 11px;
    padding:3px;
    border-radius:9px;
  }
  #mobilePlaybackContent .tab{height:38px;border-radius:7px;font-size:12px}
  #mobilePlaybackContent .filterStack{display:flex;flex-direction:column;gap:8px}
  #mobilePlaybackContent .filterStack label>span,
  #mobileTextContent>label>span,
  #mobileTextContent .learningControls label>span{
    display:block;
    margin:0 3px 4px;
    font-size:10.5px;
    font-weight:700;
    color:#6c7772;
  }
  #mobilePlaybackContent select,
  #mobilePlaybackContent input[type=number],
  #mobileTextContent select{
    height:42px;
    border-radius:8px;
    padding:0 10px;
    font-size:12px;
  }
  #mobilePlaybackContent .surahAyahRow{
    grid-template-columns:minmax(0,1.4fr) minmax(82px,.6fr);
    gap:7px;
  }
  #mobilePlaybackContent .inlineField{grid-template-columns:minmax(0,1fr) 56px;gap:7px}
  #mobilePlaybackContent .pageField .softBtn{
    height:42px;
    min-height:42px;
    padding:0 8px;
    border-radius:8px;
    font-size:11px;
  }

  /* سرعت پخش در شیت انتخاب تلاوت */
  #mobilePlaybackContent .speedBox{
    padding:11px;
    margin-top:10px;
    border-radius:9px;
  }
  #mobilePlaybackContent .speedBoxHead span{font-size:10.5px}
  #mobilePlaybackContent .speedBoxHead strong{font-size:11px}
  #mobilePlaybackContent .speedPresets button{
    padding:5px 2px;
    border-radius:6px;
    font-size:10px;
  }

  /* تنظیمات متن و تمرین */
  #mobileTextContent>#translationControl{display:block;margin:0 0 10px}
  #mobileTextContent .fontBox,
  #mobileTextContent .learningControls,
  #mobileTextContent .checkStack{
    padding:11px;
    border-radius:9px;
    margin-top:8px;
  }
  #mobileTextContent .fontBoxHead span{font-size:10.5px}
  #mobileTextContent .fontBoxHead strong{font-size:11px}
  #mobileTextContent .fontPresets button{
    padding:5px 2px;
    border-radius:6px;
    font-size:10px;
  }
  #mobileTextContent .repeatInlineRow{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.78fr) 58px;
    gap:6px;
  }
  #mobileTextContent .compactRepeatBtn{
    width:58px;
    min-width:58px;
    height:42px;
    min-height:42px;
    padding:0 6px;
    border-radius:7px;
    font-size:10.5px;
  }
  #mobileTextContent .checkLabel{font-size:11px}

  .mobileAboutContent{
    text-align:center;
    padding-top:18px;
    padding-bottom:26px;
  }
  .mobileAboutMark{
    width:54px;
    height:54px;
    margin:0 auto 10px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(145deg,var(--theme),var(--theme-dark));
    font-family:serif;
    font-size:30px;
  }
  .mobileAboutContent p{
    max-width:360px;
    margin:0 auto;
    color:#63706a;
    font-size:12px;
    line-height:2;
  }
}

@media(max-width:420px){
  .mobileBottomNav{height:66px;padding-inline:4px}
  .mobileNavItem{font-size:9px}
  .mobileNavItem .svgIcon{width:18px;height:18px}
  .mobileBottomSheet{bottom:66px;max-height:78dvh}
  .mobileSheetBackdrop{bottom:66px}
  .mobileSheetContent{padding-inline:12px}
}


/* ==========================================================
   Mobile viewport fit refinements
   - no footer on phones
   - player fits the first viewport without an initial scroll
   - bottom navigation stays fully visible above the safe area
   ========================================================== */
@media(max-width:820px){
  html,body{min-height:100%;overflow-x:hidden}
  body{
    padding-bottom:0!important;
    min-height:100dvh;
  }

  /* Footer is redundant on the app-like mobile view. */
  footer{display:none!important}

  .appShell{
    width:100%;
    max-width:100%;
    margin:0;
    padding:10px 10px 0!important;
    min-height:0;
  }
  .ayahStage{min-height:0!important}

  /* Keep the main listening card inside the visible viewport.
     76px header + 64px nav + ~16px breathing room. */
  .listenCard{
    height:min(560px,calc(100dvh - 156px - env(safe-area-inset-bottom)))!important;
    min-height:0!important;
    border-radius:14px!important;
    padding:18px 16px 11px!important;
  }
  .listenHeading{flex:0 0 auto}
  .nowPlaying{font-size:18px;line-height:1.45;max-width:100%}
  .playerStatus{font-size:11px;margin-top:2px;min-height:20px}
  .focusVerse{
    min-height:0!important;
    padding:9px 5px 6px!important;
    gap:5px;
  }
  .basmalaCard{font-size:calc(19px * var(--font-scale))!important}
  .ayahArabic{
    font-size:calc(27px * var(--font-scale))!important;
    line-height:1.9!important;
    min-height:0!important;
    padding:4px 4px!important;
  }
  .ayahTranslation{
    font-size:calc(13px * var(--font-scale))!important;
    line-height:1.75!important;
    padding:1px 5px 0!important;
  }
  .playerPanel{padding:9px 4px 5px!important}
  .customProgressRow{
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    gap:6px!important;
    font-size:10px!important;
  }
  .customControls{margin-top:4px!important}
  .controlCluster{gap:5px!important}
  .roundControl{width:38px!important;height:38px!important}
  .roundControl .svgIcon{width:13px;height:13px}
  .mainPlayBtn{width:58px!important;height:58px!important}
  .mainPlayBtn .svgIcon{width:18px;height:18px}
  .syncHint{margin-top:4px!important;font-size:9.5px!important;gap:6px}
  .syncHint i{width:6px;height:6px;box-shadow:0 0 0 5px rgba(241,200,107,.07)}
  .warningBox{margin-top:5px;min-height:34px;padding:5px 10px;font-size:11px}

  /* A real fixed app bar: its total height includes the phone safe area. */
  .mobileBottomNav{
    position:fixed!important;
    inset-inline:0!important;
    top:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:calc(64px + env(safe-area-inset-bottom))!important;
    min-height:calc(64px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    padding:4px 6px max(4px,env(safe-area-inset-bottom))!important;
    z-index:999!important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
  }
  .mobileNavItem{padding:3px 2px 2px!important;gap:2px!important;font-size:9.5px!important}
  .mobileNavItem .svgIcon{width:19px!important;height:19px!important}

  /* Sheets always stop exactly above the fixed navigation. */
  .mobileBottomSheet{
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    max-height:calc(100dvh - 76px - 64px - env(safe-area-inset-bottom))!important;
  }
  .mobileSheetBackdrop{
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
  }
}

/* Extra compression for short phone viewports, not just narrow screens. */
@media(max-width:520px) and (max-height:700px){
  .topBar{height:68px!important}
  .brandIcon{width:42px;height:42px;border-radius:12px}
  .brandText strong{font-size:18px}
  .appShell{padding-top:8px!important}
  .listenCard{
    height:calc(100dvh - 144px - env(safe-area-inset-bottom))!important;
    padding:14px 12px 8px!important;
  }
  .nowPlaying{font-size:16px}
  .playerStatus{min-height:17px;font-size:10px}
  .focusVerse{padding:5px 3px 3px!important}
  .basmalaCard{font-size:calc(17px * var(--font-scale))!important}
  .ayahArabic{font-size:calc(24px * var(--font-scale))!important;line-height:1.75!important}
  .ayahTranslation{font-size:calc(12px * var(--font-scale))!important;line-height:1.55!important}
  .playerPanel{padding-top:6px!important}
  .roundControl{width:35px!important;height:35px!important}
  .mainPlayBtn{width:54px!important;height:54px!important}
  .syncHint{font-size:9px!important;margin-top:2px!important}
}


/* ==========================================================
   Stable mobile viewport / bottom navigation
   CSS-only: no VisualViewport scroll tracking, so the bar does
   not jump when browser chrome expands/collapses while scrolling.
   ========================================================== */
@media(max-width:820px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
  }

  body{
    min-height:100svh;
    padding-bottom:0!important;
  }

  /* The full-width white header must not create a 100vw overflow. */
  .topBar::before{
    left:-16px!important;
    right:-16px!important;
    width:auto!important;
    transform:none!important;
  }

  .appShell,
  .contentPanel,
  .ayahStage,
  .listenCard{
    max-width:100%;
  }

  /* svh stays stable while the browser's address/tool bars animate. */
  .listenCard{
    height:min(560px,calc(100svh - 156px - env(safe-area-inset-bottom)))!important;
  }

  .mobileBottomNav{
    display:grid!important;
    position:fixed!important;
    inset-inline:0!important;
    top:auto!important;
    bottom:0!important;
    width:auto!important;
    max-width:none!important;
    height:calc(64px + env(safe-area-inset-bottom))!important;
    min-height:calc(64px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    padding:4px max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
    transform:none!important;
    -webkit-transform:none!important;
    z-index:9999!important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    touch-action:manipulation;
  }

  .mobileBottomSheet{
    right:0!important;
    left:0!important;
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    width:min(100%,560px)!important;
    max-width:100%!important;
    max-height:calc(100svh - 76px - 64px - env(safe-area-inset-bottom))!important;
    margin-inline:auto!important;
    transform:translateY(calc(100% + 24px))!important;
  }
  .mobileBottomSheet.isOpen{
    transform:translateY(0)!important;
  }

  .mobileSheetBackdrop{
    right:0!important;
    left:0!important;
    width:auto!important;
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:520px) and (max-height:700px){
  .listenCard{
    height:calc(100svh - 144px - env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:420px){
  .mobileBottomNav{
    height:calc(60px + env(safe-area-inset-bottom))!important;
    min-height:calc(60px + env(safe-area-inset-bottom))!important;
  }
  .mobileBottomSheet,
  .mobileSheetBackdrop{
    bottom:calc(60px + env(safe-area-inset-bottom))!important;
  }
  .mobileBottomSheet{
    max-height:calc(100svh - 76px - 60px - env(safe-area-inset-bottom))!important;
  }
}


/* ==========================================================
   Mobile Mushaf + quieter player controls
   ========================================================== */
@media(max-width:820px){
  /* Mushaf is a top-level mobile destination, not a filter tab. */
  #mobilePlaybackContent .modeTabs{display:none!important}
  .mobileNavItem{font-size:9px!important}
  .mobileNavItem::before{width:36px;height:26px;border-radius:10px}
  .mobileNavItem .svgIcon{width:18px!important;height:18px!important}

  /* Responsive, paper-like Mushaf without the oversized desktop frame. */
  .mushafSection{
    width:100%;
    min-height:0;
    margin:0;
    padding:0 0 calc(76px + env(safe-area-inset-bottom));
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .mushafToolbar{
    position:sticky;
    top:6px;
    z-index:24;
    grid-template-columns:64px minmax(0,1fr) 64px;
    gap:7px;
    width:100%;
    max-width:none;
    margin:0 0 8px;
    padding:6px;
    border:1px solid #e4eae7;
    border-radius:12px;
    background:rgba(255,255,255,.96);
    box-shadow:0 7px 22px rgba(33,49,42,.055);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .mushafPageNav{
    min-width:0;
    width:100%;
    height:38px;
    padding:0 7px;
    gap:5px;
    border:0;
    border-radius:8px;
    background:var(--theme-faint);
    color:var(--theme-dark);
    font-size:10px;
    box-shadow:none;
  }
  .mushafPageNav .svgIcon{width:10px;height:10px}
  .mushafPageMeta{gap:0!important;justify-content:center;align-items:center}
  .mushafToolbar strong{font-size:13px;line-height:1.35}
  .mushafToolbar #mushafStatus{font-size:9.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mushafClickHint{display:none}

  .mushafFrame{
    width:100%;
    max-width:none;
    margin:0;
    padding:5px;
    overflow:hidden;
    border:1px solid #e0d3b8;
    border-radius:11px;
    background:#eee3cc;
    box-shadow:0 8px 28px rgba(57,47,26,.07);
  }
  .mushafInner{
    width:100%;
    min-height:0;
    padding:16px 3px 17px;
    overflow:hidden;
    border:1px solid #e0d6c1;
    border-radius:7px;
    background:#fffdf8;
    box-shadow:inset 0 0 24px rgba(142,112,60,.035);
  }
  .mushafPage{width:100%;max-width:100%;overflow:hidden}
  .mushafLine{
    width:100%;
    min-height:36px;
    white-space:nowrap;
    line-height:1.62;
    overflow:visible;
    transform-origin:center center;
  }
  .qcfWord{border-radius:2px}
  .mushafTranslationPanel{
    width:100%;
    max-width:none;
    margin:9px 0 0;
    padding:13px 12px;
    border-radius:10px;
    box-shadow:none;
  }
  .mushafTranslationPanel h3{font-size:13px;margin-bottom:6px}
  .pageTranslationItem{font-size:calc(12px * var(--font-scale));line-height:1.9;padding:7px 0}
  .pageTranslationItem.active{border-radius:6px;padding:7px 8px}

  /* Player controls fade out only while mobile audio is playing.
     Space remains reserved, so nothing jumps when controls hide/show. */
  .listenCard .playerPanel{
    opacity:1;
    transform:translateY(0);
    transition:opacity .28s ease,transform .28s ease;
  }
  .listenCard.mobileControlsHidden .playerPanel{
    opacity:0;
    transform:translateY(5px);
    pointer-events:none;
  }
  .listenCard.mobileControlsHidden{cursor:pointer}
}

@media(max-width:390px){
  .mobileNavItem{font-size:8.4px!important;letter-spacing:-.1px}
  .mobileNavItem .svgIcon{width:17px!important;height:17px!important}
  .mushafToolbar{grid-template-columns:58px minmax(0,1fr) 58px}
  .mushafPageNav{font-size:9.5px;padding-inline:4px}
  .mushafInner{padding-inline:2px}
}

/* ==========================================================
   V21 — cleaner theme trigger, Mushaf affordance, mobile translation toggle
   ========================================================== */
.icon-eye{--icon:url("./icons/eye.svg")}
.icon-eye-off{--icon:url("./icons/eye-off.svg")}

/* Theme selector: no boxed control; the live color dot is the control. */
.themeToggle{
  min-width:38px!important;
  width:38px!important;
  height:38px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit;
  display:grid!important;
  place-items:center;
  overflow:visible;
}
.themeToggle:hover,.themeToggle:focus-visible{
  border:0!important;
  background:transparent!important;
  outline:none;
}
.themeToggle:focus-visible .themeDot{box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(var(--theme-rgb),.28)}
.themeDot{
  position:relative;
  width:24px!important;
  height:24px!important;
  border:3px solid #fff!important;
  border-radius:50%;
  background:var(--theme);
  box-shadow:0 0 0 1px rgba(var(--theme-rgb),.18),0 5px 14px rgba(var(--theme-rgb),.23)!important;
  transition:background .25s ease,transform .2s ease,box-shadow .2s ease;
}
.themeToggle:hover .themeDot{transform:scale(1.06)}
.themeDot::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1.5px solid rgba(var(--theme-rgb),.40);
  border-radius:50%;
  pointer-events:none;
  animation:themeLivePulse 2.25s ease-in-out infinite;
}
@keyframes themeLivePulse{
  0%,100%{transform:scale(.84);opacity:.18}
  50%{transform:scale(1.12);opacity:.72}
}
@media(prefers-reduced-motion:reduce){.themeDot::before{animation:none;opacity:.35}}

.themeMenuHeader{
  grid-column:1/-1;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 3px 4px 5px;
  border-bottom:1px solid #edf1ef;
  margin-bottom:1px;
}
.themeMenuHeader strong{font-size:12px;color:#4f5f57;font-weight:800}
.themeMenu .themeMenuClose{
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:8px;
  background:#f5f8f6;
  color:#68756f;
  display:grid;
  place-items:center;
  box-shadow:none;
}
.themeMenu .themeMenuClose:hover{background:var(--theme-faint);color:var(--theme)}
.themeMenuClose .svgIcon{width:12px;height:12px}

/* Make the Mushaf interaction discoverable without cluttering the page. */
.mushafGuide{
  max-width:960px;
  margin:0 auto 11px;
  min-height:38px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(var(--theme-rgb),.12);
  border-radius:9px;
  background:var(--theme-faint);
  color:#66736d;
  font-size:11px;
  line-height:1.7;
}
.mushafGuide strong{color:var(--theme-dark)}
.mushafGuideIcon{
  width:24px;height:24px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--theme);
  box-shadow:0 0 0 1px rgba(var(--theme-rgb),.12);
}
.mushafGuideIcon .svgIcon{width:9px;height:9px;margin-left:-1px}
.mushafGuideWord{padding-right:9px;border-right:1px solid rgba(var(--theme-rgb),.14);color:#84908a}
.qcfAyahEnd{
  color:var(--theme-dark);
  transition:color .15s ease,filter .15s ease,transform .15s ease;
  outline:none;
}
.qcfAyahEnd:hover,.qcfAyahEnd:focus-visible{
  color:var(--theme)!important;
  filter:drop-shadow(0 0 5px rgba(var(--theme-rgb),.18));
  transform:scale(1.06);
}
.qcfAyahEnd:focus-visible{box-shadow:0 0 0 2px rgba(var(--theme-rgb),.18)}

/* Translation visibility control is available in the player on all screen sizes. */
.mobileTranslationToggle{display:grid!important}
.listenCard.translationHidden .ayahTranslation{display:none!important}

@media(max-width:820px){
  .mobileTranslationToggle{display:grid!important}
  .mushafGuide{
    width:calc(100% - 4px);
    min-height:34px;
    margin:0 2px 7px;
    padding:6px 8px;
    justify-content:flex-start;
    gap:7px;
    border-radius:8px;
    font-size:10px;
  }
  .mushafGuideIcon{width:22px;height:22px}
  .mushafGuideWord{display:none}
  .qcfAyahEnd{color:var(--theme-dark)}
}

/* ==========================================================
   V22 — mobile polish: clearer Mushaf guidance, compact header,
   full active nav highlight, minimalist Mushaf paging
   ========================================================== */
.mushafGuideText{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.mushafGuideText strong{white-space:nowrap}
.mushafGuideText b{font-weight:800;color:var(--theme-dark)}
.mushafAyahSample{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--theme-rgb),.28);
  border-radius:50%;
  background:#fff;
  color:var(--theme-dark);
  font-family:"hafs",Yekan,Tahoma,sans-serif;
  font-size:14px;
  line-height:1;
  box-shadow:0 3px 10px rgba(var(--theme-rgb),.08);
}
.qcfAyahEnd{cursor:pointer}

@media(max-width:820px){
  /* Slightly shorter mobile header. */
  .topBar{
    height:64px!important;
    padding:0 12px!important;
  }
  .brand{gap:8px!important}
  .brandIcon{
    width:40px!important;
    height:40px!important;
    border-radius:11px!important;
  }
  .brandIcon svg{width:22px!important;height:22px!important}
  .brandText strong{font-size:18px!important;line-height:1.25}
  .brandText small{font-size:9.5px!important;margin-top:1px!important}
  .themeToggle{width:36px!important;min-width:36px!important;height:36px!important}
  .themeDot{width:22px!important;height:22px!important}

  .appShell{padding-top:8px!important}
  .listenCard{
    height:min(570px,calc(100svh - 144px - env(safe-area-inset-bottom)))!important;
  }
  .mobileBottomSheet{
    max-height:calc(100svh - 64px - 64px - env(safe-area-inset-bottom))!important;
  }

  /* Active mobile navigation state includes icon + label, not only the icon. */
  .mobileNavItem{
    margin:3px 2px!important;
    padding:4px 2px 3px!important;
    border-radius:10px!important;
  }
  .mobileNavItem::before{
    inset:0!important;
    top:0!important;
    width:auto!important;
    height:auto!important;
    border-radius:10px!important;
  }
  .mobileNavItem.active::before{background:var(--theme-soft)!important}
  .mobileNavItem.active .svgIcon{transform:none!important}

  /* Clearer Mushaf action hint: explicit action + visual sample of an ayah number. */
  .mushafGuide{
    width:100%!important;
    min-height:46px!important;
    margin:0 0 8px!important;
    padding:7px 9px!important;
    gap:8px!important;
    border-color:rgba(var(--theme-rgb),.17)!important;
    background:linear-gradient(90deg,var(--theme-faint),#fff)!important;
    font-size:10px!important;
    line-height:1.45!important;
  }
  .mushafGuideIcon{
    width:26px!important;
    height:26px!important;
    box-shadow:0 0 0 1px rgba(var(--theme-rgb),.16)!important;
  }
  .mushafGuideText{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .mushafGuideText strong{font-size:10.5px!important;line-height:1.35}
  .mushafGuideText>span{color:#6e7c75;font-size:9.5px;white-space:normal}
  .mushafGuideText b{font-weight:800}
  .mushafAyahSample{
    width:28px;height:28px;flex-basis:28px;
    font-size:14px;
    box-shadow:0 0 0 3px rgba(var(--theme-rgb),.055);
  }
  .mushafGuideWord{display:none!important}

  /* Mushaf page navigation: icon-only ghost controls and a quieter toolbar. */
  .mushafToolbar{
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    gap:6px!important;
    padding:4px 2px!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:none!important;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
  }
  .mushafPageNav{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    margin:auto!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #e5ebe8!important;
    border-radius:50%!important;
    background:#fff!important;
    color:var(--theme-dark)!important;
    box-shadow:0 3px 10px rgba(35,52,45,.035)!important;
  }
  .mushafPageNav:hover,.mushafPageNav:active{
    background:var(--theme-faint)!important;
    border-color:rgba(var(--theme-rgb),.20)!important;
  }
  .mushafPageNav>span:not(.svgIcon){display:none!important}
  .mushafPageNav .svgIcon{width:11px!important;height:11px!important}
  .mushafPageMeta strong{font-size:12.5px!important}
  .mushafToolbar #mushafStatus{font-size:9px!important;color:#8a948f!important}
}

@media(max-width:420px){
  .mobileBottomSheet{
    max-height:calc(100svh - 64px - 60px - env(safe-area-inset-bottom))!important;
  }
  .brandText small{display:none!important}
  .mushafGuideIcon{display:none!important}
  .mushafGuide{padding-inline:8px!important}
}

/* ---------- Quran media creation modal ---------- */
.mediaCreateModal[hidden]{display:none!important}
.mediaCreateModal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;direction:rtl}
.mediaCreateBackdrop{position:absolute;inset:0;background:rgba(12,18,16,.64);backdrop-filter:blur(5px)}
.mediaCreateDialog{position:relative;width:min(1180px,96vw);height:min(860px,92vh);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#111916;border:1px solid rgba(255,255,255,.12);box-shadow:0 28px 90px rgba(0,0,0,.38)}
.mediaCreateHead{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#15201c;color:#fff;border-bottom:1px solid rgba(255,255,255,.09)}
.mediaCreateHead strong{font-size:14px}
.mediaCreateClose{width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.mediaCreateClose:hover{background:rgba(255,255,255,.16)}
.mediaCreateFrame{width:100%;height:100%;flex:1;border:0;background:#0d1412}
body.mediaModalOpen{overflow:hidden}
@media(max-width:700px){
  .mediaCreateModal{padding:0}
  .mediaCreateDialog{width:100vw;height:100dvh;border-radius:0;border:0}
  .mediaCreateHead{height:48px;flex-basis:48px}
}

@media(max-width:520px){
  .playerQuickTools{margin-top:7px;padding:4px 6px;gap:4px}
  .quickToolBtn{width:32px;height:32px}
  .quickToolBtn .svgIcon{width:13px;height:13px}
}


/* ---------- Obligatory sajdah awareness ---------- */
.ayahIdentity{display:flex;align-items:center;gap:8px;min-width:0}
.sajdahVerseBadge{
  display:inline-flex;align-items:center;gap:5px;min-height:27px;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--theme) 9%,#fff);border:1px solid color-mix(in srgb,var(--theme) 22%,#fff);
  color:var(--theme-dark);font-size:10.5px;font-weight:900;white-space:nowrap
}
.sajdahVerseBadge b{font-family:serif;font-size:17px;line-height:1;font-weight:400}
.sajdahAlert[hidden]{display:none!important}
.sajdahAlert{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:18px}
.sajdahAlertBackdrop{position:absolute;inset:0;background:rgba(8,18,15,.58);backdrop-filter:blur(7px)}
.sajdahAlertDialog{
  position:relative;z-index:1;width:min(430px,100%);padding:28px 26px 23px;border-radius:24px;background:#fff;color:#20322c;
  text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.55)
}
.sajdahAlertMark{
  width:62px;height:62px;margin:0 auto 13px;border-radius:20px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--theme) 12%,#fff);color:var(--theme);font-family:serif;font-size:37px;line-height:1
}
.sajdahAlertDialog strong{display:block;font-size:20px;font-weight:950;color:#1c3029}
.sajdahAlertDialog p{margin:9px auto 8px;max-width:330px;font-size:13px;line-height:1.9;color:#66776f}
.sajdahAlertVerse{display:inline-flex;padding:5px 11px;border-radius:999px;background:#f3f6f4;color:#52645c;font-size:11px;font-weight:900}
.sajdahAlertActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:19px}
.sajdahAlertActions button{min-height:44px;border-radius:13px;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.sajdahAlertPrimary{border:1px solid var(--theme);background:var(--theme);color:#fff}
.sajdahAlertSecondary{border:1px solid #dfe7e3;background:#f7f9f8;color:#405149}
body.sajdahAlertOpen{overflow:hidden}
@media(max-width:620px){
  .sajdahVerseBadge{padding:3px 7px;font-size:9.5px}.sajdahVerseBadge b{font-size:15px}
  .sajdahAlertDialog{padding:24px 18px 19px;border-radius:21px}.sajdahAlertDialog strong{font-size:18px}
}

.icon-clock{--icon:url("./icons/clock.svg")}


/* ==========================================================
   V12 — edge-to-edge mobile player, true focus mode,
   top-layer messages, fullscreen auto-hide controls.
   ========================================================== */
.shareToast{z-index:30000!important}
.listenCard.fullscreenControlsHidden{cursor:none}
.listenCard.fullscreenControlsHidden .playerPanel{
  opacity:0!important;
  transform:translateY(7px)!important;
  pointer-events:none!important;
  transition:opacity .28s ease,transform .28s ease!important;
}




@media(max-width:820px){
  body{--mobile-header-h:76px;--mobile-nav-h:64px}

  /* The player touches the header and bottom navigation; only its own
     internal padding remains. */
  .appShell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
  }
  .contentPanel,.ayahStage{width:100%!important;margin:0!important;padding:0!important}
  .listenCard{
    width:100%!important;
    max-width:100%!important;
    height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  /* Toasts/messages live above the fixed mobile navigation. */
  .shareToast{
    bottom:calc(var(--mobile-nav-h) + max(12px,env(safe-area-inset-bottom)))!important;
    z-index:30000!important;
  }

  
  
  
  
  
  
}
@media(max-width:520px) and (max-height:700px){
  body{--mobile-header-h:68px}
}
@media(max-width:420px){
  body{--mobile-nav-h:60px}
}
@media(max-width:820px){
  
}


/* ==========================================================
   V13 — clearer minimal filters, playback speed in player,
   and a compact Mushaf mini player.
   ========================================================== */

/* Right panel: clearer hierarchy without card clutter. */
.sidePanel .filterStack{gap:9px}
.sidePanel .filterStack>label,
.sidePanel .surahAyahRow>label{
  display:block;
  padding:7px 8px 8px;
  border:1px solid #e7ece9;
  border-radius:10px;
  background:rgba(255,255,255,.72);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.sidePanel .filterStack>label:focus-within,
.sidePanel .surahAyahRow>label:focus-within{
  border-color:rgba(var(--theme-rgb),.28);
  background:#fff;
  box-shadow:0 0 0 3px rgba(var(--theme-rgb),.045);
}
.sidePanel .filterStack label>span{
  margin:0 1px 4px;
  color:#77837d;
  font-size:10px;
  font-weight:800;
}
.sidePanel .filterStack select,
.sidePanel .filterStack input[type=number]{
  height:35px;
  min-height:35px;
  padding:0 7px;
  border:0;
  border-radius:7px;
  background:#f5f8f6;
  box-shadow:none!important;
  font-size:12.5px;
}
.sidePanel .filterStack select:focus,
.sidePanel .filterStack input[type=number]:focus{background:var(--theme-faint)}
.sidePanel .pageField .softBtn{height:35px;min-height:35px;border-radius:7px;padding:4px 8px}
.sidePanel .surahAyahRow{gap:8px}
.sidePanel .advancedBox{background:rgba(255,255,255,.58);border-color:#e7ece9}

/* Playback rate now belongs to playback, not the settings panel. */
.rateQuickBtn{width:auto!important;min-width:38px;padding:0 8px;border-radius:999px!important;font-variant-numeric:tabular-nums;font-size:11px;font-weight:900}
.rateQuickBtn span{display:block;line-height:1;white-space:nowrap}
.rateMiniMenu{min-width:235px}
.rateChoices{grid-template-columns:repeat(5,minmax(0,1fr))}
.rateChoices button{padding-inline:4px}

/* Compact audio controller for Mushaf. It appears only after audio starts. */
.mushafMiniPlayer[hidden]{display:none!important}
.mushafMiniPlayer{
  position:fixed;
  z-index:160;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(560px,calc(100% - 28px));
  min-height:62px;
  margin:0;
  padding:8px 10px 8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  direction:rtl;
  border:1px solid rgba(var(--theme-rgb),.18);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  box-shadow:0 14px 38px rgba(28,48,40,.14);
}
.mushafMiniMeta{min-width:0;display:flex;flex-direction:column;gap:2px}
.mushafMiniMeta strong{font-size:12px;color:var(--theme-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mushafMiniMeta span{font-size:10px;color:#7a8781}
.mushafMiniControls{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.mushafMiniControls>button{
  width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;
  background:#f2f6f4;color:var(--theme-dark);cursor:pointer
}
.mushafMiniControls>button:hover{background:var(--theme-soft)}
.mushafMiniControls .mushafMiniPlay{width:40px;height:40px;background:var(--theme);color:#fff;box-shadow:0 7px 17px rgba(var(--theme-rgb),.22)}
.mushafMiniControls .svgIcon{width:13px;height:13px}
.mushafMiniRate select{
  width:66px;height:34px;min-height:34px;padding:0 7px;border:1px solid #e2e9e5;border-radius:9px;
  background:#fff;color:#52635b;font-size:11px;font-weight:800;outline:none
}

@media(max-width:820px){
  .mushafMiniPlayer{
    position:fixed;
    right:8px;left:8px;
    transform:none;
    bottom:calc(var(--mobile-nav-h,64px) + max(8px,env(safe-area-inset-bottom)));
    width:auto;
    margin:0;
    min-height:58px;
    padding:7px 9px 7px 11px;
    border-radius:16px;
    z-index:160;
  }
  .mushafMiniMeta strong{font-size:11px}
  .mushafMiniMeta span{font-size:9.5px}
  .mushafMiniControls{gap:3px}
  .mushafMiniControls>button{width:31px;height:31px}
  .mushafMiniControls .mushafMiniPlay{width:37px;height:37px}
  .mushafMiniRate select{width:59px;height:31px;min-height:31px;font-size:10px;padding-inline:5px}
  .rateMiniMenu{min-width:215px}
}

/* ==========================================================
   V14 — stronger desktop player controls + subtle dynamic tint.
   ========================================================== */

/* Keep the selected theme as the base. A very soft moving light layer
   adds life to the player without turning it into a colourful UI. */
.listenCard::before{
  content:"";
  position:absolute;
  inset:-22%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%,rgba(73,205,183,.22),transparent 31%),
    radial-gradient(circle at 78% 22%,rgba(111,145,235,.18),transparent 32%),
    radial-gradient(circle at 72% 78%,rgba(216,169,92,.13),transparent 30%),
    radial-gradient(circle at 28% 76%,rgba(185,105,170,.11),transparent 29%);
  opacity:.34;
  filter:hue-rotate(0deg) saturate(.92);
  transform:translate3d(-1.5%,0,0) scale(1.02);
  animation:quran2PlayerAmbient 26s ease-in-out infinite alternate;
  transition:opacity .6s ease,filter .6s ease;
}
.listenCard.dynamicPlaying::before{
  opacity:.52;
  filter:hue-rotate(12deg) saturate(1.06);
  animation-duration:14s;
}
@keyframes quran2PlayerAmbient{
  0%{transform:translate3d(-2.5%,-1%,0) scale(1.02) rotate(-1deg);filter:hue-rotate(0deg) saturate(.92)}
  34%{transform:translate3d(2%,1.5%,0) scale(1.06) rotate(1.5deg);filter:hue-rotate(12deg) saturate(.98)}
  68%{transform:translate3d(-.5%,2.5%,0) scale(1.04) rotate(-.5deg);filter:hue-rotate(25deg) saturate(1.02)}
  100%{transform:translate3d(2.5%,-1.5%,0) scale(1.07) rotate(1deg);filter:hue-rotate(38deg) saturate(.96)}
}

/* Desktop: the quick tools were visually lighter than the main controls.
   Increase their hit area and icon weight, while leaving mobile compact. */
@media (min-width:901px){
  .playerQuickTools{
    gap:7px;
    padding:6px 9px;
  }
  .quickToolBtn{
    width:42px;
    height:42px;
    font-size:13px;
  }
  .quickToolBtn .svgIcon{
    width:17.5px;
    height:17.5px;
  }
  #shareAyahBtn{
    width:44px;
    height:44px;
  }
  #shareAyahBtn .svgIcon{
    width:19.5px;
    height:19.5px;
  }
  .rateQuickBtn{
    min-width:46px!important;
    padding-inline:10px!important;
    font-size:12.5px!important;
  }
  .playerToolDivider{height:23px}
  .playerMiniMenu strong{font-size:13px}
  .miniMenuChoices button{font-size:11.5px}
}

/* A tiny amount of accent on interaction makes the toolbar clearer without
   permanently colouring every control. */
.quickToolBtn:hover,
.quickToolBtn:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 5px 16px rgba(0,0,0,.08);
}
.quickToolBtn.active,
.rateQuickBtn[aria-expanded="true"],
#smartRepeatBtn[aria-expanded="true"],
#sleepTimerBtn[aria-expanded="true"]{
  background:rgba(241,200,107,.16);
  color:#fff6d8;
  box-shadow:inset 0 0 0 1px rgba(255,232,177,.18);
}

@media (prefers-reduced-motion:reduce){
  .listenCard::before{
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}

/* ==========================================================
   V15 — visible but calm dynamic colour ambience.
   The V14 layer was intentionally too subtle on dark themes.
   ========================================================== */
.listenCard::before{
  inset:-18%;
  background:
    radial-gradient(circle at 12% 20%,rgba(54,226,191,.52),transparent 31%),
    radial-gradient(circle at 86% 18%,rgba(94,144,255,.44),transparent 33%),
    radial-gradient(circle at 82% 84%,rgba(255,193,92,.36),transparent 31%),
    radial-gradient(circle at 22% 82%,rgba(224,100,193,.34),transparent 30%);
  opacity:.56;
  mix-blend-mode:screen;
  filter:hue-rotate(0deg) saturate(1.08);
  animation:quran2PlayerAmbientV15 22s ease-in-out infinite alternate;
  transition:opacity .55s ease,filter .55s ease;
}
.listenCard.dynamicPlaying::before{
  opacity:.82;
  filter:hue-rotate(8deg) saturate(1.28);
  animation-duration:10s;
}

/* A thin inner colour halo makes the motion readable even on themes where
   the large ambient layer visually blends into the card background. */
.listenCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(112,230,208,.16),
    inset 0 0 38px rgba(82,161,235,.08),
    inset 0 -22px 48px rgba(221,135,185,.06);
  opacity:.72;
  animation:quran2PlayerEdgeV15 18s ease-in-out infinite alternate;
}
.listenCard.dynamicPlaying::after{
  opacity:1;
  animation-duration:8.5s;
}

@keyframes quran2PlayerAmbientV15{
  0%{
    transform:translate3d(-4%,-2%,0) scale(1.04) rotate(-2deg);
    filter:hue-rotate(0deg) saturate(1.08);
  }
  32%{
    transform:translate3d(3%,-1%,0) scale(1.10) rotate(1deg);
    filter:hue-rotate(34deg) saturate(1.16);
  }
  66%{
    transform:translate3d(-1%,4%,0) scale(1.07) rotate(-1deg);
    filter:hue-rotate(78deg) saturate(1.22);
  }
  100%{
    transform:translate3d(4%,-2%,0) scale(1.11) rotate(2deg);
    filter:hue-rotate(128deg) saturate(1.14);
  }
}
@keyframes quran2PlayerEdgeV15{
  0%{
    box-shadow:
      inset 0 0 0 1px rgba(92,224,196,.18),
      inset 22px 4px 52px rgba(54,207,185,.10),
      inset -20px -8px 54px rgba(91,133,241,.08);
  }
  48%{
    box-shadow:
      inset 0 0 0 1px rgba(111,157,244,.20),
      inset -16px 8px 58px rgba(94,144,255,.11),
      inset 20px -8px 52px rgba(236,172,82,.08);
  }
  100%{
    box-shadow:
      inset 0 0 0 1px rgba(226,130,197,.20),
      inset 18px -6px 56px rgba(222,105,188,.10),
      inset -18px 10px 50px rgba(73,211,189,.08);
  }
}

/* Make the centre play control participate in the ambience without changing
   its white, high-contrast face. */
.listenCard .mainPlayBtn{
  position:relative;
  z-index:2;
  box-shadow:
    0 12px 28px rgba(28,20,48,.13),
    0 0 0 0 rgba(73,205,183,0);
}
.listenCard.dynamicPlaying .mainPlayBtn{
  animation:quran2PlayHaloV15 7.5s ease-in-out infinite;
}
@keyframes quran2PlayHaloV15{
  0%,100%{
    box-shadow:0 12px 28px rgba(28,20,48,.13),0 0 0 7px rgba(64,215,187,.10),0 0 28px rgba(64,215,187,.18);
  }
  33%{
    box-shadow:0 12px 28px rgba(28,20,48,.13),0 0 0 8px rgba(98,143,244,.11),0 0 31px rgba(98,143,244,.20);
  }
  66%{
    box-shadow:0 12px 28px rgba(28,20,48,.13),0 0 0 7px rgba(225,123,190,.10),0 0 29px rgba(225,123,190,.18);
  }
}

/* Keep all real player content above the ambient overlays. */
.listenCard > *{position:relative;z-index:2}
.listenCard > .ornament{position:absolute;z-index:1}

@media (prefers-reduced-motion:reduce){
  .listenCard::before,
  .listenCard::after,
  .listenCard.dynamicPlaying .mainPlayBtn{
    animation:none!important;
  }
  .listenCard::before{opacity:.48!important;filter:none!important;transform:none!important}
}

/* ==========================================================
   V16 — selectable Dynamic theme.
   Dynamic ambience is now opt-in from the theme menu.
   ========================================================== */
html[data-theme="dynamic"]{
  /* Fallback values before JS begins the slow colour cycle. */
  --theme:#168b9b;
  --theme-dark:#0c7382;
  --theme-darker:#075b67;
  --theme-soft:#e4f4f6;
  --theme-faint:#f2fafb;
  --theme-rgb:22,139,155;
  --word-active:#fff0b0;
  --word-reading:#ffd768;
}

.themeMenu button i.dynamicSwatch{
  position:relative;
  overflow:hidden;
  background:conic-gradient(from 30deg,#167260,#168b9b,#2d74ae,#684aa6,#b24f72,#167260);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 0 0 1px rgba(50,70,63,.06);
}
.themeMenu button i.dynamicSwatch::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:rgba(255,255,255,.30);
  filter:blur(1px);
}
html[data-theme="dynamic"] .themeMenu button[data-theme-value="dynamic"] i.dynamicSwatch{
  animation:quran2DynamicSwatch 7s linear infinite;
}
@keyframes quran2DynamicSwatch{to{transform:rotate(360deg)}}

/* V15's moving player colour is no longer forced on every fixed theme. */
html:not([data-theme="dynamic"]) .listenCard::before,
html:not([data-theme="dynamic"]) .listenCard::after{
  display:none!important;
}
html:not([data-theme="dynamic"]) .listenCard.dynamicPlaying .mainPlayBtn{
  animation:none!important;
}

/* In dynamic mode the current colour dot itself visibly follows the live theme. */
html[data-theme="dynamic"] .themeDot{
  background:var(--theme);
  box-shadow:0 0 0 1px rgba(var(--theme-rgb),.20),0 5px 16px rgba(var(--theme-rgb),.28)!important;
}

@media (prefers-reduced-motion:reduce){
  html[data-theme="dynamic"] .themeMenu button[data-theme-value="dynamic"] i.dynamicSwatch{animation:none}
}


/* ==========================================================
   V17 — desktop colour drawer: circles only
   ========================================================== */
@media (min-width:901px){
  .themePicker{position:static}
  .themeMenu{
    position:fixed;
    top:88px;
    right:18px;
    left:auto;
    width:188px;
    max-height:calc(100vh - 112px);
    overflow:auto;
    padding:14px;
    border:1px solid rgba(50,68,60,.10);
    border-radius:22px 0 0 22px;
    background:rgba(255,255,255,.94);
    box-shadow:-18px 24px 55px rgba(28,43,36,.16);
    backdrop-filter:blur(18px) saturate(1.08);
    -webkit-backdrop-filter:blur(18px) saturate(1.08);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
    opacity:0;
    visibility:hidden;
    transform:translateX(118%);
    transform-origin:center right;
    transition:transform .28s cubic-bezier(.2,.78,.2,1),opacity .2s ease,visibility .2s ease;
    z-index:120;
  }
  .themePicker.open .themeMenu{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
  .themeMenuHeader{
    grid-column:1/-1;
    min-height:24px;
    padding:0 0 4px;
    border:0;
    margin:0;
    justify-content:flex-start;
  }
  .themeMenuHeader strong{display:none}
  .themeMenu .themeMenuClose{
    margin-right:auto;
    width:28px;
    min-width:28px;
    height:28px;
    border-radius:50%;
    background:#f3f6f4;
  }
  .themeMenu>button[data-theme-value]{
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
    margin:0 auto;
    border:0;
    border-radius:50%;
    background:transparent;
    display:grid;
    place-items:center;
    position:relative;
    box-shadow:none;
  }
  .themeMenu>button[data-theme-value]>span{display:none}
  .themeMenu>button[data-theme-value]>i{
    width:32px;
    height:32px;
    border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.055),0 4px 12px rgba(42,58,50,.10);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  .themeMenu>button[data-theme-value]:hover>i{
    transform:scale(1.12);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 7px 18px rgba(42,58,50,.16);
  }
  .themeMenu>button[data-theme-value].active::after{
    content:"";
    position:absolute;
    inset:2px;
    border:2px solid var(--theme);
    border-radius:50%;
    box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(var(--theme-rgb),.20);
    pointer-events:none;
  }
  .themeMenu>button[data-theme-value]:focus-visible{outline:none}
  .themeMenu>button[data-theme-value]:focus-visible::before{
    content:"";
    position:absolute;
    inset:-3px;
    border:2px solid rgba(var(--theme-rgb),.42);
    border-radius:50%;
  }
}

/* ==========================================================
   V18 — desktop theme palette slides beside the header trigger
   ========================================================== */
@media (min-width:901px){
  .themePicker{
    position:relative;
    display:flex;
    align-items:center;
    z-index:130;
  }
  .themeMenu{
    position:absolute;
    top:50%;
    left:calc(100% + 10px);
    right:auto;
    width:auto;
    max-width:none;
    max-height:none;
    overflow:visible;
    padding:8px 10px;
    border:1px solid rgba(50,68,60,.10);
    border-radius:17px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 34px rgba(28,43,36,.13);
    backdrop-filter:blur(16px) saturate(1.06);
    -webkit-backdrop-filter:blur(16px) saturate(1.06);
    display:flex;
    align-items:center;
    gap:5px;
    opacity:0;
    visibility:hidden;
    transform:translate(-10px,-50%) scale(.975);
    transform-origin:left center;
    transition:transform .22s cubic-bezier(.2,.78,.2,1),opacity .16s ease,visibility .16s ease;
    z-index:135;
    white-space:nowrap;
  }
  .themePicker.open .themeMenu{
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%) scale(1);
  }
  .themeMenuHeader{display:none}
  .themeMenu>button[data-theme-value]{
    width:36px;
    min-width:36px;
    height:36px;
    padding:0;
    margin:0;
    border:0;
    border-radius:50%;
    background:transparent;
    display:grid;
    place-items:center;
    position:relative;
    box-shadow:none;
    flex:0 0 36px;
  }
  .themeMenu>button[data-theme-value]>span{display:none}
  .themeMenu>button[data-theme-value]>i{
    width:27px;
    height:27px;
    border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.055),0 3px 9px rgba(42,58,50,.10);
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .themeMenu>button[data-theme-value]:hover>i{
    transform:scale(1.13);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 6px 14px rgba(42,58,50,.16);
  }
  .themeMenu>button[data-theme-value].active::after{
    content:"";
    position:absolute;
    inset:2px;
    border:2px solid var(--theme);
    border-radius:50%;
    box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(var(--theme-rgb),.20);
    pointer-events:none;
  }
  .themeMenu>button[data-theme-value]:focus-visible{outline:none}
  .themeMenu>button[data-theme-value]:focus-visible::before{
    content:"";
    position:absolute;
    inset:-2px;
    border:2px solid rgba(var(--theme-rgb),.42);
    border-radius:50%;
  }
}

/* At narrower desktop widths keep the palette beside the trigger, but wrap it
   into two short rows so it never collides with the brand. */
@media (min-width:901px) and (max-width:1120px){
  .themeMenu{
    width:252px;
    display:grid;
    grid-template-columns:repeat(6,36px);
    justify-content:center;
    gap:5px;
    white-space:normal;
  }
}


/* ==========================================================
   V19 — beginner-friendly navigation + refined player popovers
   ========================================================== */


@media (min-width:901px){
  
}

/* Clear semantic groups keep labels useful without visual clutter. */
.sidePanel .filterGroupTitle{
  display:flex;
  align-items:center;
  gap:9px;
  margin:3px 2px 1px;
  color:#586761;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:-.1px;
}
.sidePanel .filterGroupTitle::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(218,227,222,0),#dfe7e3 24%,#dfe7e3 100%);
}
.sidePanel .filterGroupTitlePlayback{margin-top:6px}
.sidePanel .filterStack{
  gap:7px;
}
.sidePanel .filterStack>label,
.sidePanel .surahAyahRow>label{
  padding:6px 7px 7px;
  border-color:#e8eeeb;
  background:rgba(255,255,255,.66);
}
.sidePanel .filterStack label>span{
  color:#66746e;
  font-size:10.5px;
  margin-bottom:4px;
}
.sidePanel .filterStack select,
.sidePanel .filterStack input[type=number]{
  font-size:13px;
  background:#f6f8f7;
}
.sidePanel .filterStack select:hover,
.sidePanel .filterStack input[type=number]:hover{background:#f2f6f4}

/* Player popovers: compact, obvious and visually tied to their trigger. */
.playerMiniMenu{
  bottom:calc(100% + 13px);
  min-width:218px;
  padding:12px;
  border-radius:14px;
  background:rgba(17,34,30,.97);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 16px 42px rgba(0,0,0,.30);
  backdrop-filter:blur(16px);
}
.playerMiniMenu::after{
  content:"";
  position:absolute;
  top:100%;
  right:50%;
  width:10px;
  height:10px;
  transform:translate(50%,-5px) rotate(45deg);
  background:rgba(17,34,30,.97);
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.playerMiniMenu strong{
  margin:0 2px 9px;
  color:rgba(255,255,255,.88);
  font-weight:850;
}
.miniMenuChoices{gap:6px}
.miniMenuChoices button{
  min-height:34px;
  border-radius:10px;
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.miniMenuChoices button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
}
.miniMenuChoices button.active{
  background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.rateQuickBtn{
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.035)!important;
}
.rateQuickBtn:hover,.rateQuickBtn[aria-expanded="true"]{
  background:rgba(255,255,255,.13)!important;
}
#smartRepeatBtn[aria-expanded="true"],
#smartRepeatBtn.active{
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}

/* Mobile keeps labels and group names because discoverability matters more than density. */
@media (max-width:900px){
  .sidePanel .filterGroupTitle{font-size:12px;margin-top:5px}
  .playerMiniMenu{
    min-width:min(245px,calc(100vw - 32px));
    padding:12px;
  }
  .miniMenuChoices button{min-height:38px;font-size:11px}
}

@media (max-width:900px){.filterGroupTitleText{display:none!important}}

/* ==========================================================
   V20 — compact no-scroll filters + true segmented popovers
   ========================================================== */

/* Desktop filter panel: no decorative header; content starts immediately. */
@media (min-width:821px){
  .sidePanelHeader{display:none!important}
  .sidePanelBody{padding-top:13px!important}
}

/* Remove group headings from older versions if any remain. */
.filterGroupTitle{display:none!important}

/* Compact fields keep context INSIDE the control instead of consuming a row. */
.compactFilters{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
.compactFilters .compactField{
  min-width:0;
  min-height:42px;
  padding:0 7px 0 8px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  border:1px solid #e5ece8!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.70)!important;
  box-shadow:none!important;
}
.compactFilters .compactField:focus-within{
  border-color:rgba(var(--theme-rgb),.28)!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(var(--theme-rgb),.04)!important;
}
.compactFilters .fieldPrefix{
  margin:0!important;
  color:#7b8781!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap;
}
.compactFilters .compactField select,
.compactFilters .compactField input[type=number]{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12.5px!important;
}
.compactFilters .navigationPairRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  min-width:0;
}
.compactFilters .compactPageField .pageField{
  display:grid;
  grid-template-columns:minmax(0,1fr) 47px;
  gap:5px;
  align-items:center;
}
.compactFilters .compactPageField .softBtn{
  width:47px;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:7px!important;
  font-size:10.5px!important;
}
.sidePanel .panelDividerTop{margin:7px 0!important}
.sidePanel .modeTabs{margin-bottom:4px!important}
.sidePanel .advancedBox{margin-top:7px!important}


@media (min-width:901px){
  
}

/* Rate/repeat are now true segmented floating rails, not dark dialog cards. */
#playbackRateMenu,
#smartRepeatMenu{
  min-width:0!important;
  width:max-content!important;
  max-width:min(92vw,340px)!important;
  padding:6px!important;
  bottom:calc(100% + 11px)!important;
  border:1px solid rgba(255,255,255,.68)!important;
  border-radius:999px!important;
  background:rgba(250,252,251,.94)!important;
  color:#33483f!important;
  box-shadow:0 12px 32px rgba(11,29,23,.20)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
  backdrop-filter:blur(18px) saturate(1.15)!important;
  white-space:nowrap;
}
#playbackRateMenu::after,
#smartRepeatMenu::after{
  width:9px!important;
  height:9px!important;
  background:rgba(250,252,251,.94)!important;
  border-right:1px solid rgba(255,255,255,.7)!important;
  border-bottom:1px solid rgba(255,255,255,.7)!important;
}
#playbackRateMenu>strong,
#smartRepeatMenu>strong,
#playbackRateMenu>small,
#smartRepeatMenu>small{display:none!important}
#playbackRateMenu .miniMenuChoices,
#smartRepeatMenu .miniMenuChoices{
  display:flex!important;
  grid-template-columns:none!important;
  gap:4px!important;
}
#playbackRateMenu .miniMenuChoices button,
#smartRepeatMenu .miniMenuChoices button{
  min-width:42px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#52645c!important;
  font-size:10.5px!important;
  font-weight:900!important;
  box-shadow:none!important;
  transform:none!important;
}
#playbackRateMenu .miniMenuChoices button:hover,
#smartRepeatMenu .miniMenuChoices button:hover{
  background:#edf3f0!important;
  color:var(--theme-dark)!important;
}
#playbackRateMenu .miniMenuChoices button.active,
#smartRepeatMenu .miniMenuChoices button.active{
  background:var(--theme)!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(var(--theme-rgb),.22)!important;
}
#smartRepeatMenu .miniMenuChoices button{min-width:38px!important}

/* Mobile bottom sheet gets the same dense navigation without losing clarity. */
@media (max-width:820px){
  #mobilePlaybackContent .compactFilters{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }
  #mobilePlaybackContent .compactField{
    min-height:44px!important;
    padding-inline:9px!important;
    border:1px solid #e5ece8!important;
    border-radius:10px!important;
    background:#fff!important;
  }
  #mobilePlaybackContent .compactField select,
  #mobilePlaybackContent .compactField input[type=number]{
    height:40px!important;
    min-height:40px!important;
    padding:0 4px!important;
    border:0!important;
    background:transparent!important;
  }
  #mobilePlaybackContent .navigationPairRow{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  #playbackRateMenu,
  #smartRepeatMenu{
    max-width:calc(100vw - 24px)!important;
  }
  #playbackRateMenu .miniMenuChoices button,
  #smartRepeatMenu .miniMenuChoices button{
    height:36px!important;
    min-height:36px!important;
    font-size:11px!important;
  }
}

/* Translation is moved out of the filter stack on mobile; keep the same inline-label language. */
@media (max-width:820px){
  #mobileTextContent>#translationControl.compactField{
    min-height:44px!important;
    margin:0 0 8px!important;
    padding:0 9px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    border:1px solid #e5ece8!important;
    border-radius:10px!important;
    background:#fff!important;
  }
  #mobileTextContent>#translationControl .fieldPrefix{
    display:block!important;
    margin:0!important;
    color:#7b8781!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:850!important;
  }
  #mobileTextContent>#translationControl select{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 4px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}


/* ==========================================================
   V21 — two-row navigation + text settings open by default
   ========================================================== */
.compactFilters .surahAyahPair{
  grid-template-columns:minmax(0,1.65fr) minmax(92px,.55fr)!important;
}
.compactFilters .juzPagePair{
  grid-template-columns:minmax(108px,.72fr) minmax(0,1.28fr)!important;
}
.compactFilters .compactSurahField,
.compactFilters .compactAyahField,
.compactFilters .compactJuzField,
.compactFilters .compactPageField{min-width:0!important}
.sidePanel .advancedBox[open] summary{
  color:var(--theme-dark);
}
@media (max-width:820px){
  #mobilePlaybackContent .surahAyahPair{
    grid-template-columns:minmax(0,1.48fr) minmax(88px,.52fr)!important;
  }
  #mobilePlaybackContent .juzPagePair{
    grid-template-columns:minmax(96px,.72fr) minmax(0,1.28fr)!important;
  }
}
@media (max-width:390px){
  #mobilePlaybackContent .surahAyahPair{
    grid-template-columns:minmax(0,1.42fr) minmax(82px,.58fr)!important;
  }
  #mobilePlaybackContent .juzPagePair{
    grid-template-columns:minmax(90px,.70fr) minmax(0,1.30fr)!important;
  }
  #mobilePlaybackContent .compactFilters .fieldPrefix{font-size:10px!important}
}

/* Translation of the selected Quran word, including the fullscreen player. */
.wordTranslationPopup{position:fixed!important;z-index:20000!important;display:flex;align-items:center;gap:12px;margin:0!important;padding:10px 12px;border:1px solid rgba(var(--theme-rgb),.3);border-radius:14px;background:var(--paper);color:var(--theme-dark);box-shadow:0 8px 28px rgba(0,0,0,.2);font-family:Yekan,Tahoma,Arial,sans-serif;font-size:16px;font-weight:500;line-height:1.8;text-align:right;direction:rtl}
.wordTranslationPopup[hidden]{display:none!important}
.wordTranslationText{min-width:0;overflow-wrap:anywhere}
.wordTranslationClose{flex:0 0 30px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--theme-soft);color:var(--theme-dark);font:24px/1 Tahoma,Arial,sans-serif;display:grid;place-items:center}
.wordTranslationClose:focus-visible,.inlineQuranWord:focus-visible,.qcfWord[role="button"]:focus-visible{outline:2px solid var(--theme);outline-offset:3px}
html[data-theme=black] .wordTranslationPopup{background:#252525;color:#fff;border-color:#888;box-shadow:0 8px 28px rgba(0,0,0,.55)}
html[data-theme=black] .wordTranslationClose{background:#3b3b3b;color:#fff}
html[data-theme=black] .wordTranslationClose:focus-visible{outline-color:#fff}

/* Keep each visible fragment of the current mushaf verse together. */
body[data-unified=quran] .mushafLine .mushafVerseSegment{display:inline-block;border-radius:8px;vertical-align:baseline}
html[data-theme] body[data-unified=quran] .mushafLine .mushafVerseSegment.active{background:var(--mushaf-verse-background)!important;box-shadow:0 0 0 2px var(--mushaf-verse-background);transition:none}
@media(prefers-reduced-motion:reduce){body[data-unified=quran] .mushafLine .mushafVerseSegment.active{transition:none}}