/* ── Ayah Finder Overlay ─────────────────────────────── */
#ayah-finder-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;}
#ayah-finder-overlay.on{display:flex;}
.af-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.92);}
.af-shell{position:relative;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:#0f1628;border:1px solid rgba(255,255,255,0.05);border-radius:20px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.6);margin:16px;display:flex;flex-direction:column;}
@media(min-width:820px){.af-shell{max-width:100%;max-height:100%;height:100%;border-radius:0;margin:0;border:none;}#ayah-finder-overlay{align-items:stretch;justify-content:stretch;}}
.af-header{display:none;}
.af-title{display:none;}
.af-close{position:fixed;top:16px;right:16px;z-index:100001;background:#13aac1;border:none;color:#ecfcf9;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:700;line-height:1;box-shadow:0 2px 12px rgba(0,0,0,0.4);}
.af-close::after{content:'✕';}
.af-close:hover{background:#0d8fa0;}
.af-body{padding:16px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;justify-content:center;min-height:100%;flex:1;}
.af-status-row{display:flex;align-items:center;gap:8px;}
.af-dot{width:10px;height:10px;border-radius:50%;background:#616a95;transition:all .2s;}
.af-dot.live{background:#2ecc71;box-shadow:0 0 0 4px rgba(46,204,113,.2);}
.af-status{font-size:14px;color:#c8d3e8;text-align:center;}
.af-raw-wrap{width:100%;}
.af-raw{width:100%;min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid #28325d;background:transparent;color:#e8eefc;font-size:18px;text-align:center;direction:rtl;font-family:'Traditional Arabic','Scheherazade',serif;line-height:1.8;word-wrap:break-word;}
/* Mic button */
.af-mic-shell{margin-top:4px;}
.af-mic-btn{position:relative;width:180px;height:180px;border-radius:50%;border:none;padding:0;background:transparent;cursor:pointer;outline:none;}
.af-mic-glow{position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22) 0,transparent 60%);opacity:0;pointer-events:none;transition:opacity .18s;}
.af-mic-outer{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 20%,#4bd3a8 0,#2aa483 40%,#050714 100%);box-shadow:0 14px 30px rgba(0,0,0,.5);}
.af-mic-inner{position:absolute;inset:14px;border-radius:50%;background:#050816;}
.af-mic-center{position:absolute;inset:28px;border-radius:50%;background:#34b39c;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.af-mic-btn.holding .af-mic-center{animation:afPulse 1.1s ease-in-out infinite;}
@keyframes afPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.15);transform:scale(1);}50%{box-shadow:0 0 0 14px rgba(255,255,255,.04);transform:scale(1.03);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);transform:scale(1);}}
.af-mic-btn.holding .af-mic-glow{opacity:1;animation:afGlow 1s ease-in-out infinite;}
@keyframes afGlow{0%{opacity:.3;}50%{opacity:.7;}100%{opacity:.3;}}
.af-mic-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.af-mic-icon svg{width:56px;height:56px;fill:#f6fffd;}
.af-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;opacity:0;}
.af-mic-btn.show-count .af-mic-icon{opacity:0;}
.af-mic-btn.show-count .af-countdown{opacity:1;}
.af-progress-svg{position:absolute;inset:2px;transform:rotate(-90deg);}
.af-prog-bg{stroke:#050b18;stroke-width:7;fill:none;}
.af-prog-fg{stroke:rgba(52,179,156,.7);stroke-width:7;fill:none;stroke-dasharray:0 999;stroke-dashoffset:0;}

/* Mode section */
.af-mode-section{text-align:center;margin-bottom:2px;}
.af-mode-label{font-size:12px;color:#667;margin-bottom:6px;letter-spacing:.5px;}
.af-info-btn{font-size:13px;cursor:pointer;opacity:.5;transition:opacity .2s;vertical-align:middle;}
.af-info-btn:hover{opacity:1;}
/*
.af-info-btn{display:none;}
.af-info-btn:hover{opacity:1;}
*/
/* Toggle */
.af-toggle-track{position:relative;width:240px;height:38px;border-radius:19px;background:#151c30;border:1px solid rgba(255,255,255,0.08);cursor:pointer;padding:0;outline:none;display:flex;align-items:center;overflow:hidden;}
.af-toggle-thumb{position:absolute;top:2px;left:2px;width:117px;height:32px;border-radius:16px;background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.35);transition:transform .25s ease;pointer-events:none;z-index:0;}
.af-toggle-track.on .af-toggle-thumb{transform:translateX(118px);}
.af-toggle-text{width:50%;text-align:center;font-size:13px;font-weight:600;color:#8899aa;z-index:1;pointer-events:none;transition:color .2s;white-space:nowrap;line-height:38px;user-select:none;}
.af-toggle-text.af-toggle-active{color:#38bdf8;}
.af-hint{display:none;}
/* Results */
.af-results{width:100%;margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.06);}
.af-results-list{display:flex;flex-direction:column;gap:4px;}
.af-view-btn{width:100%;margin-top:10px;padding:10px;border-radius:10px;border:1px solid rgba(52,179,156,0.4);background:rgba(52,179,156,0.1);color:#34b39c;font-size:14px;font-weight:600;cursor:pointer;}
.af-view-btn:hover{background:rgba(52,179,156,0.2);}
#mushaf-preview-overlay{position:fixed;inset:0;z-index:100003;display:none;align-items:stretch;justify-content:stretch;background:#0a0f1e;} 

/* Ayah Finder — light mode overrides */
body.qp-theme-light .af-backdrop { background: rgba(0,0,0,0.55); }
body.qp-theme-light .af-shell {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  color: #0f172a;
}
body.qp-theme-light .af-close { background:#0d8fa0; }
body.qp-theme-light .af-status { color: #334155; }
body.qp-theme-light .af-raw {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}
body.qp-theme-light .af-toggle-track {
  background: #f1f5f9;
  border-color: rgba(0,0,0,0.12);
}
body.qp-theme-light .af-toggle-text { color: #475569; }
body.qp-theme-light .af-toggle-text.af-toggle-active { color: #0284c7; }
body.qp-theme-light .af-toggle-thumb {
  background: rgba(2,132,199,0.1);
  border-color: rgba(2,132,199,0.4);
}
body.qp-theme-light .af-results { border-top-color: rgba(0,0,0,0.08); }
body.qp-theme-light .af-view-btn {
  border-color: rgba(13,148,136,0.4);
  background: rgba(13,148,136,0.08);
  color: #0d9488;
}
body.qp-theme-light .af-mode-label { color: #94a3b8; }
body.qp-theme-light .af-prog-bg { stroke: #e2e8f0; }
body.qp-theme-light .af-dot { background: #94a3b8; }
body.qp-theme-light .af-dot.live { background: #16a34a; }
/*background:rgba(8,12,28,0.97);*/

#mushaf-preview-overlay.on{display:flex;}
#mushaf-preview-inner{width:100%;max-width:960px;height:100%;margin:0 auto;display:flex;flex-direction:column;position:relative;padding-top:94px;}
.mp-topbar-inner{width:100%;max-width:960px;margin:0 auto;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;padding:0 14px;box-sizing:border-box;}
#mushaf-preview-topbar{position:fixed;top:0;left:0;right:0;z-index:100005;background:rgba(8,12,28,0.99);padding:10px 0;display:block;border-bottom:none;}
/* ── View mode tab bar ── */
#mp-view-tabs{display:block;padding:0;background:rgba(8,12,28,0.99);border-bottom:none;position:fixed;top:52px;left:0;right:0;z-index:100005;}
.mp-tabs-inner{display:flex;gap:0;max-width:960px;margin:0 auto;}
@keyframes mpFooterPulse{0%{filter:brightness(1);}40%{filter:brightness(1.5);}100%{filter:brightness(1);}}
.mp-pill-row-glow{animation:mpFooterPulse 1.4s ease-out 0.3s 1;}
.mp-vtab{flex:1;text-align:center;background:none;border:none;border-bottom:2px solid transparent;color:rgba(212,232,228,0.45);font-size:12px;font-weight:700;padding:7px 0 8px;cursor:pointer;font-family:system-ui,sans-serif;letter-spacing:.3px;text-transform:uppercase;transition:color .15s,border-color .15s;white-space:nowrap;}
.mp-vtab.mp-vtab-active{color:#34b39c;border-bottom-color:#34b39c;}
.mp-vtab:hover:not(.mp-vtab-active){color:rgba(212,232,228,0.75);}
body.qp-theme-light #mp-view-tabs{background:#ffffff;border-bottom-color:#e5e5ea;}
body.qp-theme-light .mp-vtab{color:rgba(29,29,31,0.4);}
body.qp-theme-light .mp-vtab.mp-vtab-active{color:#0a7060;border-bottom-color:#0a7060;}
/* ── Mode: Arabic only — hide transliteration column ── */
#mushaf-preview-body.mp-mode-arabic .mp-tr-col{display:none!important;}
#mushaf-preview-body.mp-mode-arabic .mp-verse{flex:0 0 100%!important;width:100%!important;border-right:none!important;padding-right:20px!important;}
#mushaf-preview-body.mp-mode-arabic .mp-en-row{display:none!important;}
/* ── Mode: Translit only — hide Arabic column ── */
#mushaf-preview-body.mp-mode-translit .mp-verse{display:none!important;}
#mushaf-preview-body.mp-mode-translit .mp-tr-col{flex:0 0 100%!important;width:100%!important;border-right:none!important;padding-left:20px!important;font-size:18px!important;line-height:1.75!important;}
#mushaf-preview-topbar{position:fixed;top:0;left:0;right:0;z-index:100005;background:rgba(8,12,28,0.99);padding:10px 0;display:block;border-bottom:none;}
#mp-ayah-finder-btn{background:none;border:none;color:#d4e8e4;font-size:16px;font-weight:400;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:system-ui,sans-serif;white-space:nowrap;flex-shrink:0;transition:background .15s;}
#mp-ayah-finder-btn:hover{background:rgba(0,0,0,.05);}
#mp-pill-row{display:none;flex-wrap:nowrap;align-items:center;padding:10px 12px;gap:0;border-top:none;background:#1a5f8a;overflow:hidden;flex-shrink:0;position:fixed;bottom:0;left:0;right:0;z-index:100004;}
#mp-pill-row .mp-pill-inner{width:100%;max-width:960px;margin:0 auto;display:flex;align-items:center;gap:0;}
body.qp-theme-light #mp-pill-row{background:#1a5f8a;}
#mp-pill-bar-wrap{flex:1;position:relative;overflow:hidden;min-width:0;background:transparent;}
#mp-pill-bar{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 4px 2px 0;}
#mp-pill-bar::-webkit-scrollbar{display:none;}
#mp-pill-fade{position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,#1a5f8a);pointer-events:none;}
.mp-ref-pill{flex-shrink:0;padding:4px 10px;border:none;background:none!important;color:rgba(255,255,255,0.72);font-size:12px;font-weight:600;cursor:pointer;font-family:system-ui,sans-serif;white-space:nowrap;transition:color .15s;border-radius:0;}
.mp-ref-pill::after{content:"·";margin-left:8px;color:rgba(255,255,255,0.35);pointer-events:none;}
.mp-ref-pill:last-of-type::after{content:"";}
.mp-ref-pill:hover{color:#fff;}
.mp-ref-pill.mp-pill-active{color:#fff;font-weight:800;}
.mp-ref-pill:hover{border-color:rgba(52,179,156,.5);color:#34b39c;background:rgba(52,179,156,.08);}
.mp-ref-pill.mp-pill-active{border-color:rgba(52,179,156,.6);background:rgba(52,179,156,.15);color:#34b39c;font-weight:700;}
#mp-pill-viewall{flex-shrink:0;margin-right:12px;padding:4px 0;border:none;background:none;color:rgba(255,255,255,0.95);font-size:12px;font-weight:800;cursor:pointer;font-family:system-ui,sans-serif;white-space:nowrap;letter-spacing:.3px;text-transform:uppercase;border-right:1px solid rgba(255,255,255,0.25);padding-right:12px;}
#mp-pill-viewall:hover{color:#fff;opacity:1;}
.mp-va-card{border-bottom:1px solid rgba(255,255,255,.06);}
body.qp-theme-light .mp-va-card{background:#fff;border:1px solid #e5e5ea!important;border-radius:12px!important;}
body.qp-theme-light .mp-va-card-label [style*='rgba(52,179,156,.35']{color:rgba(10,120,100,.55)!important;border-right-color:rgba(10,120,100,.18)!important;}
body.qp-theme-light .mp-va-card-label .mp-va-ref{color:#1d1d1f;}
body.qp-theme-light .mp-va-card-label .mp-va-juz{color:#6e6e73;}
.mp-va-card-label{display:flex;align-items:center;gap:8px;padding:8px 10px 4px;direction:ltr;}
.mp-va-juz{font-size:10px;font-weight:600;color:#38bdf8;background:rgba(56,189,248,.12);padding:2px 7px;border-radius:5px;white-space:nowrap;font-family:system-ui,sans-serif;}
.mp-va-ref{font-size:13px;color:#5ee8d0;font-weight:700;font-family:system-ui,sans-serif;}
.mp-va-dots{background:none;border:none;color:#94a3b8;font-size:18px;cursor:pointer;padding:2px 8px;border-radius:6px;line-height:1;transition:background .15s;flex-shrink:0;}
.mp-va-dots:hover{background:rgba(148,163,184,.12);color:#e8eaf2;}
.mp-dots-menu{position:fixed;z-index:200030;background:rgba(18,28,48,0.72);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:6px;min-width:210px;box-shadow:0 12px 40px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);font-family:system-ui,sans-serif;}
.mp-dots-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;border-radius:8px;color:#e8eaf2;font-size:13px;cursor:pointer;text-align:left;transition:background .12s;}
.mp-dots-menu button:hover{background:rgba(52,179,156,.12);}
.mp-dots-menu button .mp-dm-icon{font-size:16px;width:22px;text-align:center;}
.mp-dots-menu button .mp-dm-label{flex:1;}
body.qp-theme-light .mp-dots-menu{background:rgba(248,250,252,0.82);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-color:rgba(0,0,0,.1);box-shadow:0 12px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);}
body.qp-theme-light .mp-dots-menu button{color:#1e293b;}
.mp-va-gap{height:44px;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;}
.mp-va-gap span{font-size:10px;color:rgba(52,179,156,.35);font-family:system-ui,sans-serif;letter-spacing:2px;}
body.qp-theme-light .mp-ref-pill{color:rgba(255,255,255,0.88)!important;}
body.qp-theme-light .mp-ref-pill.mp-pill-active{color:#fff!important;}
body.qp-theme-light #mp-pill-viewall{color:#fff!important;}
body.qp-theme-light .mp-ref-pill{border-color:#e5e5ea;background:#f5f5f7;color:#3a3a3c;}
body.qp-theme-light .mp-ref-pill:hover{border-color:#e36000;color:#e36000;background:rgba(227,96,0,.05);}
body.qp-theme-light .mp-ref-pill.mp-pill-active{border-color:#e36000;background:rgba(227,96,0,.08);color:#e36000;}
body.qp-theme-light .mp-va-juz{color:#6e6e73;background:#f5f5f7;border:1px solid #e5e5ea;}
body.qp-theme-light .mp-va-ref{color:#1d1d1f;}
body.qp-theme-light #mp-ayah-finder-btn{color:#1d1d1f;}
body.qp-theme-light #mp-pill-fade{background:linear-gradient(to right,transparent,#1a5f8a);}
body.qp-theme-light #mp-ayah-finder-btn{color:#1d1d1f;}
#mushaf-preview-actionbar{position:sticky;bottom:0;z-index:3;background:rgba(10,15,30,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 20px;display:flex;justify-content:center;align-items:center;gap:12px;border-top:1px solid rgba(52,179,156,.12);}
body.qp-theme-light #mushaf-preview-actionbar{background:#ffffff;border-top:1px solid #e5e5ea;}
#mushaf-preview-close{background:#13aac1;border:none;color:#ecfcf9;border-radius:50%;width:36px;height:36px;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:700;line-height:1;flex-shrink:0;transition:background .15s;box-sizing:border-box;}
#mushaf-preview-header{display:flex;justify-content:center;gap:10px;align-items:center;}
#mushaf-preview-header .mp-hdr-box{background:none;border:none;border-radius:0;padding:0;font-family:system-ui,sans-serif;font-size:14px;color:#e0f2fe;font-weight:600;letter-spacing:.1px;}
#mushaf-preview-nav{display:flex;justify-content:center;gap:8px;}
#mushaf-preview-nav button{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.1);color:#3a3a3c;border-radius:8px;padding:4px 12px;cursor:pointer;font-size:12px;font-family:system-ui,sans-serif;font-weight:600;}
#mushaf-preview-nav button:disabled{opacity:.25;cursor:default;}
#mushaf-preview-nav button.mp-active-toggle{background:rgba(227,96,0,.1);border-color:rgba(227,96,0,.25);color:#e36000;}
#mushaf-preview-body{direction:rtl;text-align:right;font-family:'me_quran',serif;font-size:clamp(18px, calc(24px * var(--mp-ar-scale, 1)), 34px);line-height:2.25;color:#d4e8e4;position:relative;padding:12px 6px 80px;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;flex:1;scrollbar-width:none;-ms-overflow-style:none;}
#mushaf-preview-body::-webkit-scrollbar{display:none;}
body.qp-theme-dark #mushaf-preview-body{color:#d4e8e4;}
body.qp-theme-dark #mushaf-preview-body{--mp-en-color:rgba(212,232,228,0.7);--mp-tr-color:rgba(212,232,228,0.65);}
.mp-vsep{transition:opacity 0.15s;}
.mp-vsep:hover{opacity:0.8;}
body.qp-theme-light .mp-vsep div[style*="color:#20b2aa"]{color:#0a7a72 !important;}
body.qp-theme-light #mushaf-preview-body{--mp-en-color:#3a3a3c;--mp-tr-color:#6e6e73;}
#mushaf-preview-body .mp-tr-seg{display:inline-block;margin-top:11px;}

#mushaf-preview-fade{position:sticky;bottom:0;left:0;right:0;height:140px;margin-top:-140px;background:linear-gradient(to bottom,rgba(8,12,28,0) 0%,rgba(8,12,28,0) 30%,rgba(8,12,28,0.97) 100%);pointer-events:none;z-index:1;}
#mushaf-preview-body .mp-verse{display:inline;cursor:pointer;padding:2px 0;border-radius:4px;transition:background .15s;}
#mushaf-preview-body .mp-verse:active{background:rgba(16,185,129,.1);}
#mushaf-preview-body .mp-tr-br{display:block;margin-top:5px;}
#mushaf-preview-body .mp-ayah{color:#eab207;font-size:17px;margin:0 4px;cursor:default;font-family:'me_quran',serif;}
#mushaf-preview-body .mp-match{color:#e50d87;}
#mushaf-preview-body.mp-locating{filter:blur(4px);opacity:0.45;transition:filter 0.8s,opacity 0.8s;pointer-events:none;}
#mushaf-preview-body.mp-revealed{filter:none;opacity:1;transition:filter 0.8s,opacity 0.8s;}

#mushaf-preview-body.mp-translit-mode{direction:ltr;text-align:left;font-family:system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.3;color:#c8d3e8;}
#mushaf-preview-body.mp-translit-mode .mp-verse{display:inline;margin-bottom:0;padding:0;border-bottom:none;}
#mushaf-preview-body.mp-translit-mode .mp-ayah{font-size:13px;display:inline;color:rgba(52,179,156,.5);margin:0 4px 0 2px;}
#mushaf-preview-body.mp-translit-mode .mp-match{border-bottom-color:#f59e0b;color:#e0f2fe;}

body.qp-theme-light #mushaf-preview-body.mp-translit-mode{color:#3a3a3c;}
body.qp-theme-light #mushaf-preview-body.mp-translit-mode .mp-match{color:#e36000;}
body.qp-theme-light #mushaf-preview-body.mp-translit-mode .mp-verse{border-bottom-color:rgba(100,116,139,.1);}
#mushaf-preview-body.mp-viewall-mode{direction:rtl;text-align:right;}
#mushaf-preview-body.mp-viewall-mode .mp-va-card{margin-bottom:0;position:relative;}
#mushaf-preview-body.mp-viewall-mode .mp-va-header{direction:ltr;text-align:left;font-family:system-ui,sans-serif;font-size:12px;color:#34b39c;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(52,179,156,.15);letter-spacing:.3px;}
#mushaf-preview-body.mp-viewall-mode .mp-va-header .mp-va-juz{display:inline-block;background:rgba(56,189,248,.12);color:#38bdf8;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;margin-right:6px;}
#mushaf-preview-body.mp-viewall-mode .mp-va-trail{display:inline;-webkit-mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,1) 100%);mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,1) 100%);}
#mushaf-preview-body.mp-viewall-mode .mp-va-divider{height:50px;}
body.qp-theme-light #mushaf-preview-body.mp-viewall-mode{background:#f5f5f7;border-radius:12px;padding:16px;}
body.qp-theme-light .mp-tr-col{border-right:1px solid rgba(0,0,0,0.06) !important;}

body.qp-theme-light #mushaf-preview-overlay{background:#ffffff;}
body.qp-theme-light #mushaf-preview-body{color:#1d1d1f;}
body.qp-theme-light #mushaf-preview-body .mp-ayah{color:#6e6e73;}
body.qp-theme-light #mushaf-preview-body .mp-match{color:#e36000;}
body.qp-theme-light #mushaf-preview-fade{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);}
body.qp-theme-light #mushaf-preview-close{background:#13aac1;color:#ecfcf9;}
body.qp-theme-light #mp-font-toggle{color:#1d1d1f!important;}
#mp-theme-toggle:hover{background:rgba(255,255,255,.18);}
body.qp-theme-light #mp-theme-toggle{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.5);box-shadow:0 0 0 1px rgba(0,0,0,.2);}
body.qp-theme-light #mp-theme-toggle:hover{background:rgba(0,0,0,.16);}
body.qp-theme-light #mp-theme-toggle svg:first-of-type{stroke:#fff;}
body.qp-theme-light #mp-theme-toggle svg:last-of-type{stroke:#1d1d1f;}
/* dark default: knob RIGHT (moon) */
#mp-theme-knob{transform:translateX(28px);}
/* light: knob LEFT (sun) */
body.qp-theme-light #mp-theme-knob{transform:translateX(0)!important;background:#047857;}
body.qp-theme-light #mp-mhk-dbg-btn{color:#047857;border-color:rgba(4,120,87,.4);}
body.qp-theme-light .mp-vtab{color:rgba(0,0,0,0.35);}
body.qp-theme-light .mp-vtab.mp-vtab-active{color:#047857;border-bottom-color:#047857;}
/* light topbar handled above */
body.qp-theme-light #mushaf-preview-body.mp-translit-mode{color:#334155;}
#true-mushaf-overlay{background:#0a0f1e;overflow-x:hidden;padding:0 max(8px,calc((100vw - 960px)/2));box-sizing:border-box;}
#true-mushaf-inner{max-width:650px!important;margin:0 auto!important;width:100%!important;min-width:0!important;}#true-mushaf-overlay:not(.tm-pm) #true-mushaf-inner{max-width:var(--tm-inner-max,700px)!important;}#true-mushaf-body:not(.tm-page-mode){max-width:var(--tm-inner-max,700px)!important;}
/* Dark mode: invert body content so QPC fonts (designed for light bg) render correctly */
body:not(.qp-theme-light) #true-mushaf-body .qpc-page-section{font-palette:--tmDark;}   /* _2197: use the font's own dark palette instead of inverting (which flipped tajweed colours) */
body.qp-theme-light #true-mushaf-overlay{background:#ffffff;padding:0 max(0px,calc((100vw - 960px)/2));box-sizing:border-box;}
body.qp-theme-light #true-mushaf-inner{background:#ffffff;max-width:650px!important;margin:0 auto!important;}
/* _2218: desktop - use the browser width (quran.com-style wider centered column); mobile stays 650px */
@media (min-width:1024px){#true-mushaf-overlay{padding:0 max(8px,calc((100vw - 1140px)/2))!important;}body.qp-theme-light #true-mushaf-overlay{padding:0 max(0px,calc((100vw - 1140px)/2))!important;}#true-mushaf-inner,body.qp-theme-light #true-mushaf-inner{max-width:min(92vw,1100px)!important;}#true-mushaf-overlay:not(.tm-pm) #true-mushaf-inner{max-width:min(92vw,var(--tm-inner-max,1100px))!important;}}
#true-mushaf-topbar{background:rgba(8,12,28,0.99);}#tm-settings-pop{position:fixed;inset:0;z-index:100070;align-items:flex-start;justify-content:center;background:rgba(4,7,16,0.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0;}.tm-set-card{margin-top:9vh;width:calc(100% - 36px);max-width:432px;background:rgba(12,17,33,0.985);border:1px solid rgba(52,179,156,0.22);border-radius:20px;padding:4px 22px 20px;box-shadow:0 24px 60px rgba(0,0,0,0.62);max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}.tm-set-head{display:flex;align-items:center;justify-content:space-between;padding:16px 0 14px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:2px;}.tm-set-title{font-family:system-ui,sans-serif;font-size:20px;font-weight:700;color:#5ee8d0;letter-spacing:.2px;}.tm-set-x{background:none;border:none;color:rgba(180,200,220,0.7);font-size:26px;line-height:1;cursor:pointer;padding:0 2px;border-radius:8px;}.tm-set-x:hover{color:#cfe6df;}#tm-settings-pop .tm-set-card > div:not(.tm-set-head):not(.tm-set-div){padding:12px 2px !important;}#tm-set-row-size{display:none !important;}   /* _2501: Arabic size removed from the settings panel (size still adjustable via the aA island) */#tm-settings-pop .tm-set-toggle,#tm-settings-pop .tm-set-div{display:none !important;}#tm-settings-pop.from-lab .tm-set-toggle{display:flex !important;}#tm-settings-pop.from-lab .tm-set-div{display:block !important;}#tm-settings-pop.from-lab #tm-set-row-gloss{display:none !important;}#tm-settings-pop .tm-set-label{font-family:system-ui,sans-serif;font-size:14px;color:rgba(192,206,224,0.9);}.tm-set-select{background:rgba(52,179,156,0.10);border:1px solid rgba(52,179,156,0.32);border-radius:10px;color:#d8e6de;padding:7px 11px;font-family:system-ui,sans-serif;font-size:14px;cursor:pointer;outline:none;}#tm-theme-toggle{color:#5ee8d0 !important;display:inline-flex;align-items:center;justify-content:center;width:40px;height:34px;padding:0 !important;}#tm-theme-toggle svg{display:block;}.tm-set-div{height:1px;background:rgba(255,255,255,0.08);margin:14px 0 2px;}.tm-set-toggle{display:flex !important;align-items:center;gap:10px;padding:12px 2px !important;font-family:system-ui,sans-serif;font-size:14.5px;color:#dbe2e9;cursor:pointer;}.tm-set-toggle input{width:18px;height:18px;accent-color:#0fa37a;cursor:pointer;flex-shrink:0;}.tm-set-lo{opacity:.55;font-size:12.5px;}#tm-settings-btn:hover{background:rgba(52,179,156,0.14);}@media (max-width:767px){.tm-set-card{margin-top:7vh;}}body.qp-theme-light #tm-settings-pop{background:rgba(20,30,40,0.4);}body.qp-theme-light .tm-set-card{background:rgba(249,246,239,0.99);border-color:rgba(10,120,90,0.2);box-shadow:0 24px 60px rgba(0,0,0,0.22);}body.qp-theme-light .tm-set-head{border-bottom-color:rgba(0,0,0,0.08);}body.qp-theme-light .tm-set-title{color:#0a7d5e;}body.qp-theme-light #tm-settings-pop .tm-set-label{color:#0a5c4a;}body.qp-theme-light .tm-set-x{color:rgba(10,92,74,0.7);}body.qp-theme-light .tm-set-div{background:rgba(0,0,0,0.08);}body.qp-theme-light .tm-set-toggle{color:#0a3c30;}body.qp-theme-light .tm-set-select{background:rgba(13,143,160,0.08);border-color:rgba(13,143,160,0.3);color:#0a4c3e;}body.qp-theme-light #tm-font-minus,body.qp-theme-light #tm-font-plus{color:#0d8fa0 !important;border-color:rgba(13,143,160,0.4) !important;}body.qp-theme-light #tm-font-aa{color:#0d8fa0 !important;}body.qp-theme-light #tm-theme-toggle{color:#0a7d5e !important;border-color:rgba(13,143,160,0.4) !important;}
body.qp-theme-light #true-mushaf-topbar{background:rgba(255,255,255,0.98);border-bottom-color:rgba(0,0,0,0.08);}
body.qp-theme-light #true-mushaf-topbar #true-mushaf-header{color:#0a7060 !important;}
body.qp-theme-light #true-mushaf-topbar button:not(#true-mushaf-close){color:#0a7060 !important;border-color:rgba(10,112,90,0.4) !important;}
body.qp-theme-light #true-mushaf-header{color:#0a5c4a;}
body.qp-theme-light #true-mushaf-close{color:#64748b;border-color:rgba(100,116,139,0.25);background:rgba(100,116,139,0.08);}
body.qp-theme-light #true-mushaf-body{color:#0f2620;}
body.qp-theme-light #true-mushaf-body .tm-verse{color:#0f2620;}
body.qp-theme-light #true-mushaf-body .tm-ayah-mark{color:rgba(10,112,96,0.65);}
body.qp-theme-light #true-mushaf-fade{background:linear-gradient(to bottom,rgba(250,247,240,0) 0%,rgba(250,247,240,0.97) 100%) !important;}   /* _2115 TASK 4: !important - the element's INLINE dark gradient was beating this rule */
body.qp-theme-light #tm-theme-toggle{border-color:rgba(13,143,160,0.35);}
body.qp-theme-light #true-mushaf-popup-inner{background:rgba(245,245,252,0.78)!important;border-color:rgba(0,0,0,0.09)!important;box-shadow:0 8px 32px rgba(0,0,0,0.14)!important;}
body.qp-theme-light .tm-popup-div{background:rgba(0,0,0,0.06)!important;}
body.qp-theme-light #true-mushaf-popup-ref{color:rgba(10,112,96,0.9)!important;}
body.qp-theme-light #true-mushaf-popup-khatm{color:rgba(10,112,96,0.95)!important;}
body.qp-theme-light #true-mushaf-popup-return{color:rgba(50,70,100,0.8)!important;}
body.qp-theme-light #qpc-popup-play{color:rgba(10,112,96,0.95)!important;}
body.qp-theme-light #qpc-popup-stop{color:rgba(190,40,40,0.9)!important;}
.tm-surah-hdr{background:linear-gradient(135deg,#10b7cf 0%,#108fa5 42%,#0a6f88 72%,#07556d 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 8px 20px rgba(0,0,0,0.25);position:relative;overflow:hidden;}
.tm-surah-hdr::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('/QuranPlus/img/pattern-1.jpg');background-size:448px auto;background-repeat:repeat;opacity:0.06;mix-blend-mode:overlay;border-radius:12px;}
body.qp-theme-light .tm-surah-hdr{background:linear-gradient(135deg,#10b7cf 0%,#108fa5 42%,#0a6f88 72%,#07556d 100%);}
body.qp-theme-light .tm-surah-hdr div{color:#ffffff !important;}
body.qp-theme-light .tm-surah-hdr span{color:rgba(255,255,255,0.85) !important;opacity:1 !important;}
body:not(.qp-theme-light) .tm-surah-hdr div{color:#ffffff !important;}
body:not(.qp-theme-light) .tm-surah-hdr span{color:rgba(255,255,255,0.85) !important;opacity:1 !important;}
body:not(.qp-theme-light) #true-mushaf-body #bismillah-image{filter:invert(1);}   /* _2197: black SVG -> white in dark (page-section no longer inverted) */
#true-mushaf-body::-webkit-scrollbar{display:none;}
.tm-verse{display:inline;cursor:pointer;font-family:'me_quran',serif;}
.tm-verse:active{opacity:0.7;}
.tm-ayah-mark{color:rgba(52,179,156,0.9);font-size:0.65em;margin:0 14px 0 10px;font-family:'me_quran',serif;vertical-align:middle;}
.tm-sep{display:block;text-align:center;font-family:system-ui,sans-serif;font-size:11px;color:rgba(52,179,156,0.7);margin:4px 0 2px;letter-spacing:0.5px;}
.sb-sortable-ghost{opacity:0.3;background:rgba(52,179,156,0.1);border-radius:8px;}
.sb-sortable-chosen{background:rgba(52,179,156,0.06);border-radius:8px;}
.sb-sortable-drag{box-shadow:0 8px 24px rgba(0,0,0,0.35);opacity:0.95 !important;border-radius:8px;}
.sb-icon{flex-shrink:0;cursor:pointer;padding:6px;opacity:1;transition:opacity 0.2s;}
.sb-icon:hover{opacity:0.75;}
.sb-icon .sb-bm-svg path{fill:rgb(234 237 241 / 0%);stroke:#ffffffcf;transition:fill 0.2s, stroke 0.2s;}
body.qp-theme-light .sb-icon .sb-bm-svg path{
  fill: #ffffff !important;
  stroke: rgb(1 7 15);
  stroke-width: 1px;
  transition: fill 0.2s, stroke 0.2s;
}
.sb-icon.bookmarked .sb-bm-svg path{fill:#07edd6 !important;}
body.qp-theme-light .sb-icon.bookmarked .sb-bm-svg path{
  fill: #1cc259 !important;
  stroke: black;
}
.sb-icon:hover:not(.bookmarked) .sb-bm-svg path{fill:rgba(148,163,184,0.5);}
body.qp-theme-light .sb-icon:hover:not(.bookmarked) .sb-bm-svg path{
  fill: #f1f5f9 !important;
  stroke: rgb(1 7 15);
}
body.qp-theme-light #mushaf-preview-header .mp-hdr-box{background:none;border:none;color:#1d1d1f;font-weight:600;}
/* desktop side padding removed */
#mushaf-preview-header{flex:1;text-align:center;overflow:hidden;min-width:0;display:flex;justify-content:center;align-items:center;}
#mushaf-preview-header .mp-hdr-box{font-size:14px;font-weight:700;letter-spacing:.3px;color:#e0f2fe;}
body.qp-theme-light #mushaf-preview-header .mp-hdr-box{color:#1d1d1f;}
body.qp-theme-light #mushaf-preview-topbar{background:#f0f0f5;}
body.qp-theme-light #mp-view-tabs{background:#f0f0f5;}
body.qp-theme-light .mp-tabs-inner{background:#f0f0f5;}
body.qp-theme-light #mushaf-preview-hint{color:rgba(100,116,139,.4);}
body.qp-theme-light .mp-vsep-menu{color:rgba(10,120,100,.5) !important;}
body.qp-theme-light .mp-vsep-menu:hover{color:rgba(10,120,100,.85) !important;}
body.qp-theme-light .mp-va-card{border-color:rgba(0,0,0,.08) !important;background:#fff !important;}
body.qp-theme-light .mp-va-card:hover{background:#f9fffe !important;}
body.qp-theme-light .mp-va-ref{color:#0a7060;}



/* Track Live Recitation button */
.af-track-live-btn{width:100%;margin-top:14px;padding:13px 18px;border-radius:12px;border:1px solid rgba(52,179,156,0.3);background:linear-gradient(135deg,rgba(9,162,147,0.15),rgba(206,13,90,0.1));color:#34b39c;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:0.3px;}
.af-track-live-btn:hover{background:linear-gradient(135deg,rgba(9,162,147,0.25),rgba(206,13,90,0.18));border-color:rgba(52,179,156,0.5);}

/* ── Taraweeh Full-Screen Listening Overlay ── */
.tlr-listen-overlay{position:fixed;inset:0;z-index:100001;display:flex;align-items:flex-start;justify-content:center;background:rgba(8,12,28,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;transition:opacity .4s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.tlr-listen-overlay.active{opacity:1;}
.tlr-listen-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:28vh;padding-left:32px;padding-right:32px;padding-bottom:40px;max-width:500px;width:100%;text-align:center;}
/* _1557: compact the overlay when Ask AI review panel is showing — pulls the textarea up right below the title. */
#qp-speak-overlay.qp-sp-review .tlr-listen-content{padding-top:18vh;gap:10px;}
#qp-speak-overlay.qp-sp-review #sp-askai-review{margin-top:4px;}
/* _1561 Task 2+3: Ask AI overlay — center the whole block vertically in
   the viewport (no forced padding-top), so both the standby and the review
   panel sit naturally in the middle. The overlay itself flips from
   align-items:flex-start (the .tlr-listen-overlay default) to center. */
#qp-speak-overlay.qp-sp-askai{align-items:center;}
#qp-speak-overlay.qp-sp-askai .tlr-listen-content{padding-top:0;padding-bottom:20px;gap:10px;}
/* _1561 Task 4: transcript moves BELOW the button row. Orders below
   intentionally leave room: icon=1, title=2, sub=3, peak bar=4, status=5,
   buttons=6, transcript=7, back=99 (absolutely positioned so order is moot
   but we still pin it high enough to keep it out of any flow fallback). */
#qp-speak-overlay.qp-sp-askai .tlr-listen-icon{order:1;}
#qp-speak-overlay.qp-sp-askai #qp-speak-title{order:2;}
#qp-speak-overlay.qp-sp-askai #qp-speak-sub{order:3;}
#qp-speak-overlay.qp-sp-askai #sp-vol-bar{order:4;margin-top:6px !important;}
#qp-speak-overlay.qp-sp-askai #qp-speak-status{order:5;min-height:0 !important;margin-top:0 !important;}
#qp-speak-overlay.qp-sp-askai #tlr-btn-row-speak{order:6;margin-top:4px !important;}
/* _1670: fix transcribed text invisibility in light theme.
   Inline style sets color:#e0f2fe (pale blue) which works on the
   dark overlay background but disappears on light. Override with
   high-contrast slate-near-black via !important so it beats inline. */
/* _1677: removed v1670 light-theme transcript color rule. The Speak
   overlay background is always dark regardless of body theme, so the
   default light transcript color (#e0f2fe inline) is correct in both
   themes. The v1670 rule was producing dark-on-dark in light theme. */
#qp-speak-overlay.qp-sp-askai #qp-speak-arabic{order:7;margin-top:10px !important;min-height:22px;max-width:92vw !important;padding:0 8px;}
/* _1561 Task 3: review panel — make sure the textarea/Reset/Ask-AI block
   renders AFTER the 'Review & Submit' title. Default order is 0, which put
   it ABOVE the title in the flex column (visible as the title-at-bottom
   bug). Give it a high explicit order. */
#qp-speak-overlay.qp-sp-askai #sp-askai-review{order:8;}
/* Review state on top of askai: override padding-top so the block stays
   perfectly centered even in review mode. */
#qp-speak-overlay.qp-sp-askai.qp-sp-review .tlr-listen-content{padding-top:0;}
.tlr-listen-icon{animation:tlrBreath 2.5s ease-in-out infinite;position:relative;display:flex;align-items:center;justify-content:center;width:120px;height:120px;}
@keyframes tlrBreath{0%,100%{transform:scale(1);opacity:0.9;}50%{transform:scale(1.08);opacity:1;}}
/* _1561 Task 6: outer glow pulse — added via .qp-ringing class while the
   depleting ring is visible. Mirrors the hands-free overlay's glow-outer. */
@keyframes qpRingGlow{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0);}50%{box-shadow:0 0 44px 12px rgba(56,189,248,.24);}}
.tlr-listen-icon.qp-ringing{border-radius:50%;animation:tlrBreath 2.5s ease-in-out infinite, qpRingGlow 2.2s ease-in-out infinite;}
.tlr-listen-title{font-size:26px;font-weight:700;color:#e0f2fe;letter-spacing:0.5px;text-shadow:0 0 30px rgba(56,189,248,0.3);}
.tlr-listen-sub{font-size:14px;color:#8899aa;line-height:1.6;max-width:460px;white-space:pre-line;}
.tlr-listen-attempt{font-size:13px;color:#38bdf8;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:4px;}
.tlr-listen-dots{display:none;}
.tlr-dot-pulse{width:10px;height:10px;border-radius:50%;background:#38bdf8;animation:tlrDotBounce 1.4s ease-in-out infinite;}
.tlr-dot-pulse.d2{animation-delay:0.2s;}
.tlr-dot-pulse.d3{animation-delay:0.4s;}
@keyframes tlrDotBounce{0%,80%,100%{transform:scale(0.6);opacity:0.3;}40%{transform:scale(1.1);opacity:1;}}
.tlr-listen-cancel{padding:10px 32px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:#c8d3e8;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;}
.tlr-stop-search{padding:10px 24px;border-radius:10px;border:1px solid rgba(52,179,156,.4);background:rgba(52,179,156,.12);color:#34b39c;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;}
.tlr-listen-cancel:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}

/* Found state within the listening overlay */
.tlr-listen-overlay.found .tlr-listen-icon{animation:none;transform:scale(1.15);opacity:1;}

.tlr-listen-overlay.found .tlr-listen-cancel{display:none;}
.tlr-listen-overlay.found .tlr-listen-attempt{color:#10b981;}

/* Failed state */

.tlr-listen-overlay.failed .tlr-listen-icon svg rect{fill:rgba(245,158,11,0.7);}
.tlr-listen-overlay.failed .tlr-listen-icon svg path{stroke:rgba(245,158,11,0.5);}
.tlr-listen-overlay.failed .tlr-listen-attempt{color:#f59e0b;}

/* Thin status bar (Re-sync only) */
.tlr-status-bar{position:fixed;bottom:0;left:0;right:0;z-index:99999;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:rgba(13,18,37,0.95);border-top:1px solid rgba(52,179,156,0.25);font-size:13px;color:#a8b3d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .3s,transform .3s;transform:translateY(0);}
.tlr-status-bar.hidden{opacity:0;transform:translateY(100%);pointer-events:none;}
.tlr-status-dot{width:8px;height:8px;border-radius:50%;background:#616a95;flex-shrink:0;}
.tlr-status-dot.listening{background:#2ecc71;box-shadow:0 0 6px rgba(46,204,113,0.4);animation:tlrPulse 1.2s ease-in-out infinite;}
@keyframes tlrPulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* Re-sync floating button (styled like vv-back-to-intro) */
.tlr-resync-btn{    scale: 1.2;position:fixed;bottom:69px;right:39px;z-index:100001;display:flex;align-items:center;gap:6px;padding:10px 16px;background:linear-gradient(279deg,#09a293 0%,#ce0d5a 100%);overflow:visible;border:none;border-radius:11px;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 4px 12px rgba(9,162,147,0.4);transition:transform .15s ease,box-shadow .15s ease,opacity .3s;}
.tlr-resync-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(9,162,147,0.5);}
.tlr-resync-btn:active{transform:scale(0.96);}
.tlr-resync-btn.hidden{opacity:0;pointer-events:none;}

/* ═══════════════════════════════════════════════════════════
   MOBILE FULL-SCREEN OVERLAYS
   Applies to all major overlay panels on narrow screens.
   Desktop (>768px) is completely unaffected.
   Slide-up transition only activates when body has class
   qp-slide-transitions (set via ?setSlide=1 URL param).
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Verse Overlay ── */
  .vv-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    margin: 0 !important;
  }

  /* ── Settings ── */
  .prefs-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
  }
  #prefs-host {
    align-items: flex-start !important;
    padding: 0 !important;
  }

  /* ── Surah Introduction ── */
  .surah-intro-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .surah-intro-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* ── Saved / Playlists ── */
  .ql-folders-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .ql-folders-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* ── Ayah Finder ── */
  #ayah-finder-overlay {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }
  .af-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* ── Iframe Overlays (Ask AI, Root Search, Qibla, Tafseer etc) ── */
  .big-ol-shell {
    inset: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── History Overlay ── */
  .vv-history-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .vv-history-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* ── Verse Tools & Page Tools (vv-actions-card) ── */
  .vv-actions-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .vv-actions-card {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }

  /* ── Verse Tools long-press sheet (qp-vtools) ── */
  .qp-vtools .vt-sheet {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .qp-modal.qp-vtools {
    align-items: flex-start !important;
    padding: 0 !important;
  }

  /* ── Help Overlay: handled in its own CSS block above ── */

  /* ── Transliteration: less indent on mobile ── */
  .vv-tr {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

    /* ── Quick Launchpad ── */
  .qp-lp-container {
    width: 100vw !important;
    max-width: 100vw !important;
    border-right: none !important;
  }

  /* ── PillRow: add trailing padding so last pill is fully visible ── */
  .browsebar .pillRow {
    padding-right: 32px !important;
  }

  /* ── Single scrollbar: hide outer scrollbar, chapters list scrolls internally ── */
  /* Only suppress the redundant outer scrollbar — don't lock body height */
  body::-webkit-scrollbar { display: none; }
  body { scrollbar-width: none; }

  /* ── Slide-up transitions (only when flag is active) ── */

  body.qp-slide-transitions .surah-intro-modal,
  body.qp-slide-transitions .ql-folders-modal,
  body.qp-slide-transitions .af-shell,
  body.qp-slide-transitions .prefs-card,
  body.qp-slide-transitions .vv-history-modal,
  body.qp-slide-transitions .vv-actions-card,
  body.qp-slide-transitions #ql-help-overlay .ql-help-shell {
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  body.qp-slide-transitions .surah-intro-overlay.is-visible .surah-intro-modal,
  body.qp-slide-transitions .ql-folders-overlay.is-visible .ql-folders-modal,
  body.qp-slide-transitions #ayah-finder-overlay.on .af-shell,
  body.qp-slide-transitions #prefs-host[style*="opacity: 1"] .prefs-card,
  body.qp-slide-transitions #prefs-host[style*="opacity:1"] .prefs-card,
  body.qp-slide-transitions .vv-history-overlay .vv-history-modal,
  body.qp-slide-transitions .vv-actions-visible .vv-actions-card,
  body.qp-slide-transitions #ql-help-overlay.is-visible .ql-help-shell {
    transform: translateY(0);
  }

}