@font-face{font-family:"QuranHafs";src:url("/quran/fonts/uthmanic_hafs_v20.ttf") format("truetype");font-display:block}
@font-face{font-family:"QuranWarsh";src:url("/quran/fonts/uthmanic_warsh_v21.ttf") format("truetype");font-display:block}
@font-face{font-family:"QuranQaloun";src:url("/quran/fonts/uthmanic_qaloun_v21.ttf") format("truetype");font-display:block}
@font-face{font-family:"QuranShubah";src:url("/quran/fonts/uthmanic_shuba_v20.ttf") format("truetype");font-display:block}
@font-face{font-family:"QuranDouri";src:url("/quran/fonts/uthmanic_douri_v20.ttf") format("truetype");font-display:block}
@font-face{font-family:"QuranSousi";src:url("/quran/fonts/uthmanic_sousi_v20.ttf") format("truetype");font-display:block}
:root{
  --reader-green:#204544;
  --reader-green-dark:#142f2e;
  --reader-gold:#e5a72a;
  --reader-burgundy:#b87913;
  --reader-radius:18px;
  --book-height:calc(100dvh - 296px);
}
*{box-sizing:border-box}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.quran-body{background:radial-gradient(circle at 14% 4%,rgba(32,69,68,.08),transparent 29%),var(--cream);min-height:100dvh}
.quran-site-header{z-index:120}
.quran-main{padding:18px 0 48px}
.reader-shell{position:relative}
.reader-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}
.reader-heading-row .crumbs{margin:0 0 8px}
.reader-heading-copy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.reader-heading-copy h1{font-size:clamp(24px,3vw,38px);line-height:1;margin:0;letter-spacing:-.035em}
.reader-live-status{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.reading-badge{display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border-radius:999px;background:var(--reader-green);color:#fff;font-size:12px;font-weight:850;box-shadow:0 8px 22px rgba(32,69,68,.2)}
.reader-toolbar{position:relative;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;background:color-mix(in srgb,var(--paper) 96%,transparent);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 36px rgba(20,47,46,.1);backdrop-filter:blur(18px);transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease}
.toolbar-primary,.toolbar-secondary{display:flex;align-items:center;gap:8px;min-width:0}
.toolbar-primary{flex:1}
.toolbar-secondary{justify-content:flex-end}
.control-field{height:42px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--cream);min-width:0}
.control-field>span{font-size:10px;line-height:1;color:var(--muted);font-weight:900;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.control-field select,.control-field input,.theme-select select{border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-weight:780;min-width:0}
.control-field select{width:100%;cursor:pointer}
.control-reading{flex:0 1 190px}.control-surah{flex:1 1 230px}.control-page{flex:0 0 104px}.control-page input{width:50px;text-align:center;font-variant-numeric:tabular-nums}
.toolbar-button,.icon-control,.font-size-control{height:42px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto}
.toolbar-button{padding:0 11px;cursor:pointer;font-size:12px;font-weight:850;transition:border-color .24s cubic-bezier(.2,.7,.2,1),background-color .24s cubic-bezier(.2,.7,.2,1),transform .24s cubic-bezier(.2,.7,.2,1),color .24s ease,box-shadow .24s ease}
.toolbar-button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--reader-green) 45%,var(--line))}
.toolbar-button:focus-visible,.side-arrow:focus-visible,.mobile-bottom-controls button:focus-visible,.ribbon-bookmark:focus-visible,.dialog-close:focus-visible{outline:3px solid color-mix(in srgb,var(--reader-green) 30%,transparent);outline-offset:3px}
.toolbar-button svg,.icon-control svg,.side-arrow svg,.mobile-bottom-controls svg{width:18px;height:18px;fill:currentColor}
.toolbar-button.active{background:var(--reader-burgundy);border-color:var(--reader-burgundy);color:#fff}
.icon-button{width:42px;padding:0}
.count-pill{min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-size:10px}
.theme-select{padding:0 7px}.theme-select svg{width:17px}.theme-select select{max-width:74px;font-size:12px;cursor:pointer}
.font-size-control{padding:0 9px;gap:6px}.font-size-control input{width:72px;accent-color:var(--reader-green)}.font-a{font-family:Georgia,serif;font-weight:700}.font-a.small{font-size:11px}.font-a.large{font-size:16px}
.reader-context{min-height:40px;display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:8px 4px;color:var(--muted)}
.reader-title-block{display:flex;align-items:baseline;gap:10px;min-width:0}.reader-title-block strong{color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-title-block span{font-size:12px;white-space:nowrap}
.book-viewport{position:relative;display:grid;place-items:center;min-height:390px;perspective:2800px;perspective-origin:50% 48%;isolation:isolate;user-select:none;-webkit-user-select:none;touch-action:pan-y;overflow:visible}
.desktop-book{position:relative;width:min(calc(100% - 118px),calc(var(--book-height) * 1.44));max-width:1220px;min-width:650px;aspect-ratio:1.44/1;transform-style:preserve-3d;transform:translateZ(0)}
.book-cover{position:absolute;inset:-8px -10px -12px;border-radius:12px 12px 18px 18px;background:linear-gradient(115deg,#49382a,#76583b 38%,#4b3929 52%,#76583b 70%,#49382a);box-shadow:0 12px 0 #30251c,0 24px 42px rgba(22,16,10,.26);z-index:0}
.book-spread{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);transform-style:preserve-3d;z-index:2;contain:layout paint style}.book-spread.is-turning{pointer-events:none}
.book-gutter{position:relative;z-index:18;background:linear-gradient(90deg,rgba(38,25,12,.28),rgba(255,255,255,.13) 37%,rgba(34,24,13,.31) 52%,rgba(255,255,255,.09) 67%,rgba(38,25,12,.25));box-shadow:inset 6px 0 12px rgba(36,25,14,.18),inset -6px 0 12px rgba(36,25,14,.18)}
.book-gutter span{position:absolute;inset:0 7px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.24),transparent);filter:blur(2px)}
.mushaf-page{position:relative;min-width:0;overflow:hidden;background:#fbf6e8;color:#17130e;border:1px solid rgba(109,84,48,.34);transform-style:preserve-3d;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:default}
.mushaf-page-left{border-radius:9px 2px 2px 13px;box-shadow:inset -22px 0 28px -26px rgba(48,31,12,.75),inset 5px 0 10px rgba(255,255,255,.65)}
.mushaf-page-right{border-radius:2px 9px 13px 2px;box-shadow:inset 22px 0 28px -26px rgba(48,31,12,.75),inset -5px 0 10px rgba(255,255,255,.65)}
.mushaf-page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.3),transparent 35%),repeating-linear-gradient(0deg,rgba(100,70,30,.012) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}
.mushaf-page[aria-current="page"]{outline:2px solid color-mix(in srgb,var(--reader-gold) 60%,transparent);outline-offset:-4px}
.page-inner{position:absolute;inset:0;padding:3.5% 5.3% 2.7%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;z-index:2}
.page-frame{position:absolute;inset:2.2%;border:1px solid color-mix(in srgb,var(--reader-gold) 48%,transparent);border-radius:7px;pointer-events:none;z-index:1}
.page-frame::before,.page-frame::after{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--reader-gold) 24%,transparent);border-radius:4px}
.page-frame::after{inset:9px;border-style:dotted;opacity:.55}
.page-running-head{position:relative;z-index:3;height:38px;min-height:38px;display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,1.45fr) minmax(72px,1fr);align-items:center;gap:10px;padding:6px 3.2% 16px;border:0;background:#fbf6e8;font-family:system-ui,sans-serif;color:#665236;font-size:clamp(8px,.68vw,10px);font-weight:760;line-height:1.15;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-running-head::after{content:"";position:absolute;left:2.6%;right:2.6%;bottom:4px;height:1px;background:rgba(130,97,47,.24)}
.page-running-head span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}.page-running-head span:first-child{text-align:start}.page-running-head span:nth-child(2){font-weight:900;color:#3f3323;text-align:center}.page-running-head span:last-child{text-align:end}
.page-content{min-height:0;display:grid;place-items:center;padding:2.2% 2.2% 2.35%;overflow:hidden}
.quran-page-text{width:100%;max-height:100%;padding:.18em .06em .52em;font-family:var(--active-quran-font,"QuranHafs");font-size:var(--quran-font-size,34px);font-weight:400;font-style:normal;line-height:1.86;text-align:justify;text-align-last:center;direction:rtl;unicode-bidi:plaintext;word-spacing:0;letter-spacing:0;overflow:visible;font-synthesis:none;font-kerning:normal;font-variant-ligatures:common-ligatures contextual;font-feature-settings:"rlig" 1,"liga" 1,"calt" 1,"kern" 1;text-rendering:optimizeLegibility}
.quran-page-text.is-sparse{align-self:center;text-align:center;line-height:2.05}
.ayah{display:inline;white-space:normal}
.surah-banner{direction:rtl;margin:.18em auto .38em;padding:.22em 1.8em .28em;display:flex;align-items:center;justify-content:center;position:relative;width:min(94%,340px);min-height:1.62em;border:1px solid rgba(137,95,36,.55);border-radius:999px;background:linear-gradient(90deg,transparent,rgba(229,167,42,.12) 18%,rgba(229,167,42,.16) 50%,rgba(229,167,42,.12) 82%,transparent);color:#4e391d;font-family:var(--active-quran-font,"QuranHafs"),serif;font-size:.75em;text-align:center;line-height:1.2}
.surah-banner::before,.surah-banner::after{content:"◆";position:absolute;font-family:Georgia,serif;font-size:.38em;color:#9a6e2a}.surah-banner::before{right:.8em}.surah-banner::after{left:.8em}
.page-footer{position:relative;z-index:3;height:42px;min-height:42px;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:10px;padding:16px 3.2% 4px;border:0;background:#fbf6e8;font-family:system-ui,sans-serif;color:#6b573b;font-size:clamp(8px,.64vw,9.5px);line-height:1.1;white-space:nowrap}
.page-footer::before{content:"";position:absolute;left:2.6%;right:2.6%;top:4px;height:1px;background:rgba(130,97,47,.24)}
.page-footer span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}.page-footer span:first-child{text-align:start}.page-footer strong{justify-self:center;min-width:30px;height:21px;padding:0 7px;border:1px solid rgba(141,100,41,.45);border-radius:999px;display:grid;place-items:center;background:#fbf6e8;color:#44341f;font-size:11px;line-height:1;font-variant-numeric:tabular-nums}.page-footer span:last-child{text-align:end}
.loading-page,.page-error{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;font-family:system-ui,sans-serif;color:#6f604d;background:#fbf6e8}.page-error{color:#8b2937}
.ribbon-bookmark{position:absolute;z-index:44;top:-7px;left:50%;transform:translateX(-50%);width:27px;height:104px;border:0;padding:0;background:linear-gradient(90deg,#671b28,#a23545 44%,#7b2130);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);box-shadow:0 8px 8px rgba(48,13,19,.25);cursor:pointer;transition:height .24s ease,filter .24s ease,transform .24s ease}
.ribbon-bookmark::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 25% 70%,rgba(0,0,0,.18));pointer-events:none}.ribbon-bookmark span{position:absolute;left:50%;top:19px;width:7px;height:7px;border:1px solid rgba(255,255,255,.72);border-radius:50%;transform:translateX(-50%)}
.ribbon-bookmark:hover{height:116px;filter:brightness(1.06)}.ribbon-bookmark.active{height:128px;background:linear-gradient(90deg,#8b5a16,#c18b33 44%,#8c5d18)}
.side-arrow{position:absolute;top:50%;z-index:65;width:48px;height:70px;margin-top:-35px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--paper) 95%,transparent);color:var(--reader-green);display:grid;place-items:center;box-shadow:0 15px 38px rgba(20,47,46,.15);cursor:pointer;backdrop-filter:blur(14px);transition:transform .2s ease,opacity .2s ease,background .2s ease}
.side-arrow:hover:not(:disabled){transform:translateY(-2px);background:var(--paper)}.side-arrow:disabled{opacity:.27;cursor:not-allowed}.side-arrow svg{width:27px;height:27px}.side-arrow-next{left:0}.side-arrow-previous{right:0}
.turn-layer{position:absolute;inset:0;z-index:38;pointer-events:none;perspective:2800px;perspective-origin:50% 48%;transform-style:preserve-3d}
.turn-sheet{position:absolute;top:0;bottom:0;width:calc((100% - 18px)/2);z-index:3;transform:translateZ(1.5px) rotateY(.01deg);transform-style:preserve-3d;will-change:transform;contain:layout paint style;transition:transform .92s cubic-bezier(.45,.05,.55,.95)}
.turn-sheet.forward{left:0;transform-origin:100% 50%}.turn-sheet.backward{right:0;transform-origin:0 50%}
.sheet-face{position:absolute;inset:0;overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden}.sheet-face.front{transform:rotateY(.01deg) translateZ(.35px)}.sheet-face.back{transform:rotateY(180deg) translateZ(.35px)}
.sheet-face .mushaf-page{position:absolute;inset:0;width:100%;height:100%;border-radius:3px;box-shadow:none}
.turn-sheet::before,.turn-sheet::after{content:"";position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.turn-sheet::before{background:linear-gradient(90deg,rgba(18,12,7,.34),rgba(18,12,7,.08) 18%,transparent 42%,rgba(255,255,255,.24) 78%,rgba(255,255,255,.08))}
.turn-sheet::after{background:linear-gradient(90deg,transparent 42%,rgba(0,0,0,.28) 50%,transparent 58%);filter:blur(4px)}
.turn-sheet.forward.running{transform:translateZ(1.5px) rotateY(179.85deg)}.turn-sheet.backward.running{transform:translateZ(1.5px) rotateY(-179.85deg)}
.turn-sheet.running::before{animation:foldLightSmooth .92s cubic-bezier(.45,.05,.55,.95) both}.turn-sheet.running::after{animation:foldCreaseSmooth .92s cubic-bezier(.45,.05,.55,.95) both}
@keyframes foldLightSmooth{0%,100%{opacity:0}30%{opacity:.34}49%{opacity:.84}70%{opacity:.28}}
@keyframes foldCreaseSmooth{0%,100%{opacity:0}42%,58%{opacity:.74}}
.book-viewport.theme-sepia .mushaf-page,.book-viewport.theme-sepia .loading-page,.book-viewport.theme-sepia .page-running-head,.book-viewport.theme-sepia .page-footer{background:#efe0bd;color:#21180e}.book-viewport.theme-sepia .page-footer strong{background:#efe0bd}.book-viewport.theme-sepia .mushaf-page::before{background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.22),transparent 35%),repeating-linear-gradient(0deg,rgba(88,55,14,.02) 0 1px,transparent 1px 4px)}
.book-viewport.theme-night .mushaf-page,.book-viewport.theme-night .loading-page,.book-viewport.theme-night .page-running-head,.book-viewport.theme-night .page-footer{background:#171d1b;color:#e8e1cb;border-color:#3f4c47}.book-viewport.theme-night .page-footer strong{background:#171d1b}.book-viewport.theme-night .mushaf-page::before{background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.035),transparent 35%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);mix-blend-mode:screen}.book-viewport.theme-night .page-running-head,.book-viewport.theme-night .page-footer{color:#aeb8b2;border-color:#38433f}.book-viewport.theme-night .page-running-head span:nth-child(2),.book-viewport.theme-night .page-footer strong{color:#e5dec9}.book-viewport.theme-night .page-footer strong{border-color:#58645f}.book-viewport.theme-night .surah-banner{color:#d9c79c;border-color:#725e35;background:linear-gradient(90deg,transparent,rgba(177,139,69,.08) 18%,rgba(177,139,69,.13) 50%,rgba(177,139,69,.08) 82%,transparent)}
.mobile-book,.mobile-bottom-controls{display:none}
.reader-toast{position:fixed;left:50%;bottom:30px;z-index:250;transform:translate(-50%,18px);padding:10px 15px;border-radius:999px;background:#13231f;color:#fff;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.22s ease}.reader-toast.show{opacity:1;transform:translate(-50%,0)}
.reader-source{margin-top:42px;padding:14px 16px 15px;line-height:1.55}.reader-source>strong{display:block;margin-bottom:3px}.reader-source>span{display:block}.reader-source .source-complex{display:inline;font-weight:900;color:#163f69;text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.bookmarks-dialog{width:min(620px,calc(100% - 26px));max-height:min(78dvh,720px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 30px 90px rgba(5,30,24,.3)}
.bookmarks-dialog::backdrop{background:rgba(3,22,17,.52);backdrop-filter:blur(5px)}
.dialog-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 16px;background:var(--paper);border-bottom:1px solid var(--line)}.dialog-head h2{margin:8px 0 0}.dialog-close{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);font-size:24px;cursor:pointer}
.bookmarks-list{display:grid;gap:9px;padding:14px 18px;overflow:auto}.bookmark-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--cream)}.bookmark-main{border:0;background:transparent;color:var(--ink);text-align:start;cursor:pointer;padding:0;min-width:0}.bookmark-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bookmark-main small{display:block;margin-top:4px;color:var(--muted)}.bookmark-actions{display:flex;gap:6px}.bookmark-actions button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);cursor:pointer}.bookmark-actions button:last-child{color:#a12c3d}.empty-bookmarks{padding:34px;text-align:center;color:var(--muted)}.dialog-privacy{margin:0;padding:13px 20px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.reader-shell:fullscreen{width:100%;max-width:none;height:100dvh;padding:12px 18px 18px;background:var(--cream);overflow:hidden}.reader-shell:fullscreen .reader-heading-row,.reader-shell:fullscreen .reader-source{display:none}.reader-shell:fullscreen .reader-toolbar{margin-bottom:4px}.reader-shell:fullscreen .book-viewport{height:calc(100dvh - 112px)}.reader-shell:fullscreen .desktop-book{width:min(calc(100% - 118px),calc((100dvh - 126px)*1.44))}
html[dir="rtl"] .reader-heading-copy h1{letter-spacing:0}.reader-toolbar,.book-spread,.mobile-bottom-controls{direction:ltr}html[dir="rtl"] .control-field,html[dir="rtl"] .toolbar-button,html[dir="rtl"] .theme-select{direction:rtl}.quran-page-text{direction:rtl}
@media(max-width:1080px){
  :root{--book-height:calc(100dvh - 345px)}
  .reader-toolbar{align-items:stretch;flex-direction:column}.toolbar-primary,.toolbar-secondary{width:100%}.toolbar-secondary{justify-content:space-between}.control-reading{flex-basis:220px}.toolbar-button{flex:1}.icon-button,.bookmark-list-button{flex:0 0 42px}  .desktop-book{width:min(calc(100% - 108px),calc(var(--book-height)*1.44));min-width:560px}
}
@media(max-width:760px){
  :root{--mobile-book-height:calc(100dvh - 286px)}
  .quran-main{padding:12px 0 36px}.reader-shell{width:min(100% - 18px,1180px)}
  .reader-heading-row{align-items:center}.reader-heading-copy .eyebrow{display:none}.reader-heading-copy h1{font-size:25px}.reader-live-status .status{display:none}
  .reader-toolbar{position:relative;padding:8px;border-radius:15px;gap:8px}.toolbar-primary{display:grid;grid-template-columns:1fr 1fr 82px;gap:6px}.control-field{height:40px;padding:0 8px;display:grid;grid-template-rows:auto auto;align-content:center;gap:2px}.control-field>span{font-size:8px}.control-field select,.control-field input{font-size:11px;width:100%}.control-page input{text-align:start}
  .toolbar-secondary{display:grid;grid-template-columns:1fr auto auto auto auto;gap:6px}.font-size-control{min-width:0;padding:0 7px}.font-size-control input{width:min(22vw,82px)}.toolbar-button{width:40px;min-width:40px;padding:0;flex:0 0 40px}.toolbar-button>span:not(.count-pill){display:none}.theme-select{min-width:0}.theme-select select{max-width:64px;font-size:10px}.theme-select svg{display:none}.toolbar-secondary #bookmark,.toolbar-secondary #openBookmarks{display:none}
  .reader-context{min-height:34px;padding:6px 2px}.reader-title-block{width:100%;justify-content:space-between}.reader-title-block strong{font-size:12px}.reader-title-block span{font-size:10px}  .book-viewport{min-height:0;height:auto;overflow:hidden;padding:0 2px 4px;perspective:1800px}.desktop-book,.side-arrow{display:none}.mobile-book{position:relative;display:block;width:min(calc(100vw - 40px),calc(var(--mobile-book-height)*.715));max-width:500px;aspect-ratio:.715/1;margin:auto;transform-style:preserve-3d;transform:translateZ(0)}.mobile-mushaf-page{position:absolute;inset:0;border-radius:10px;box-shadow:0 18px 34px rgba(30,22,12,.2),inset 9px 0 20px -17px rgba(48,31,12,.62),inset -9px 0 20px -17px rgba(48,31,12,.62)}.mobile-mushaf-page .page-inner{padding:4.2% 5.2% 3.2%}.mobile-mushaf-page .quran-page-text{padding-top:.16em;padding-bottom:.58em;line-height:1.84}.mobile-mushaf-page .page-running-head{height:34px;min-height:34px;grid-template-columns:minmax(55px,1fr) minmax(0,1.25fr) minmax(55px,1fr);font-size:8px;padding:5px 3.2% 14px}.mobile-mushaf-page .page-footer{height:38px;min-height:38px;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);font-size:8px;padding:14px 3.2% 3px}
  .mobile-turn-layer{position:absolute;inset:0;z-index:20;pointer-events:none;perspective:1900px;perspective-origin:50% 50%;transform-style:preserve-3d}.mobile-turn-sheet{position:absolute;inset:0;z-index:2;transform:translateZ(1px) rotateY(.01deg);transform-style:preserve-3d;will-change:transform;contain:layout paint style;transition:transform .68s cubic-bezier(.45,.05,.55,.95)}.mobile-turn-sheet.forward{transform-origin:left center}.mobile-turn-sheet.backward{transform-origin:right center}.mobile-turn-sheet .sheet-face{border-radius:10px}.mobile-turn-sheet.forward.running{transform:translateZ(1px) rotateY(-179.85deg)}.mobile-turn-sheet.backward.running{transform:translateZ(1px) rotateY(179.85deg)}
  .mobile-bottom-controls{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:90;display:grid;grid-template-columns:46px 46px 1fr 46px 46px;gap:6px;width:min(100%,430px);margin:10px auto 0;padding:7px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:0 18px 44px rgba(5,40,31,.2);backdrop-filter:blur(18px)}.mobile-bottom-controls button{height:42px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);display:grid;place-items:center;cursor:pointer}.mobile-bottom-controls button:disabled{opacity:.35}.mobile-bottom-controls button.active{background:var(--reader-burgundy);border-color:var(--reader-burgundy);color:#fff}.mobile-bottom-controls svg{width:19px;height:19px}.mobile-page-label{display:flex!important;align-items:center;justify-content:center!important;gap:5px!important;font-size:11px;font-weight:800}.mobile-page-label strong{font-size:14px;font-variant-numeric:tabular-nums}
  .reader-source{margin-top:28px}.reader-shell:fullscreen{padding:8px}.reader-shell:fullscreen .reader-toolbar{display:none}.reader-shell:fullscreen .reader-context{display:none}.reader-shell:fullscreen .book-viewport{height:calc(100dvh - 76px);display:grid}.reader-shell:fullscreen .mobile-book{width:min(calc(100vw - 18px),calc((100dvh - 152px)*.715))}.reader-shell:fullscreen .mobile-bottom-controls{position:fixed;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 16px),430px)}
}
@media(max-width:420px){
  :root{--mobile-book-height:calc(100dvh - 300px)}
  .reader-heading-copy h1{font-size:22px}.reading-badge{font-size:10px;min-height:28px}.toolbar-primary{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 70px}.toolbar-secondary{grid-template-columns:minmax(0,1fr) auto auto auto auto}.font-size-control .font-a{display:none}.theme-select select{max-width:58px}.reader-title-block span{display:none}
}
@media(max-height:720px) and (min-width:761px){:root{--book-height:calc(100dvh - 300px)}.desktop-book{min-width:0}.quran-main{padding-top:10px}.reader-heading-row{margin-bottom:8px}.reader-heading-copy .eyebrow{display:none}.reader-heading-copy h1{font-size:27px}.reader-context{min-height:34px;padding-block:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.turn-sheet,.mobile-turn-sheet{display:none!important}}

.quran-body .tool-footer .shell{gap:18px}
@media(max-width:760px){.quran-body .tool-footer .shell{flex-direction:column;justify-content:center;gap:5px;text-align:center}}

/* Quran Online: search, Tafseer and dedicated Mushaf fullscreen */
@font-face{font-family:"TafseerQuranFont";src:url("/quran/fonts/uthmanic_hafs_v20.ttf") format("truetype");font-display:block}
.reader-toolbar{gap:8px}
.toolbar-primary{min-width:0}
.control-reading{flex-basis:166px}.control-surah{flex-basis:210px}.control-page{flex-basis:96px}
.toolbar-secondary{gap:6px}
.toolbar-secondary .toolbar-button>span:not(.count-pill){display:none}
.toolbar-search{width:42px;min-width:42px}
.mushaf-fullscreen-button{color:var(--reader-green)}
.mushaf-fullscreen-button.active{background:var(--reader-green);border-color:var(--reader-green);color:#fff}

.ayah{position:relative;border-radius:.16em;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}
.ayah:hover{background:rgba(229,167,42,.09)}
.ayah:focus-visible{outline:2px solid rgba(32,69,68,.46);outline-offset:.08em;background:rgba(32,69,68,.08)}
.ayah.is-highlighted{background:rgba(229,167,42,.2);box-shadow:0 0 0 .12em rgba(229,167,42,.12)}
.book-viewport.theme-night .ayah:hover{background:rgba(217,199,156,.09)}
.book-viewport.theme-night .ayah.is-highlighted{background:rgba(217,199,156,.17);box-shadow:0 0 0 .12em rgba(217,199,156,.1)}

.reader-dialog{width:min(760px,calc(100% - 24px));max-height:min(86dvh,820px);overflow:hidden}
.reader-dialog .dialog-head{position:relative}
.quran-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:16px 18px 10px}
.quran-search-input-wrap{height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--cream)}
.quran-search-input-wrap svg{width:19px;height:19px;fill:var(--muted);flex:0 0 auto}
.quran-search-input-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px}
.quran-search-form>button,.tafseer-actions button,.search-result-actions button{border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);font:inherit;font-size:12px;font-weight:850;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.quran-search-form>button{min-width:86px;padding:0 16px;background:var(--reader-green);border-color:var(--reader-green);color:#fff}
.quran-search-form>button:hover,.tafseer-actions button:hover,.search-result-actions button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--reader-green) 52%,var(--line))}
.search-status{margin:0;padding:0 19px 12px;color:var(--muted);font-size:12px}
.search-results{display:grid;gap:10px;max-height:calc(86dvh - 190px);padding:0 18px 18px;overflow:auto;overscroll-behavior:contain}
.search-result{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--cream)}
.search-result-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;color:var(--muted);font-size:11px}
.search-result-head strong{color:var(--ink);font-size:13px}
.search-ayah{margin:0;padding:8px 2px 12px;color:var(--ink);font-family:"TafseerQuranFont",serif;font-size:24px;line-height:1.85;text-align:right}
.search-result-actions{display:flex;justify-content:flex-end;gap:7px}
.search-result-actions button{min-height:36px;padding:0 12px;background:var(--paper)}
.search-result-actions button:last-child{background:color-mix(in srgb,var(--reader-green) 9%,var(--paper));color:var(--reader-green-dark)}

.tafseer-dialog{width:min(720px,calc(100% - 24px))}
.tafseer-card{padding:18px 22px 20px;overflow:auto;max-height:calc(86dvh - 180px)}
.tafseer-reference{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tafseer-reference strong{font-size:14px}.tafseer-reference span{color:var(--muted);font-size:12px;font-weight:800}
.tafseer-ayah{margin:16px 0;padding:15px 16px;border:1px solid color-mix(in srgb,var(--reader-gold) 34%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--reader-gold) 6%,var(--cream));color:var(--ink);font-family:"TafseerQuranFont",serif;font-size:clamp(25px,3.2vw,34px);line-height:1.9;text-align:center}
.tafseer-text{color:var(--ink);font-family:system-ui,"Segoe UI",Tahoma,sans-serif;font-size:16px;line-height:2;text-align:right;white-space:pre-wrap}
.tafseer-actions{display:grid;grid-template-columns:1fr minmax(150px,1.35fr) 1fr;gap:8px;padding:13px 18px 18px;border-top:1px solid var(--line);background:var(--paper)}
.tafseer-actions button{min-height:42px;padding:0 12px}
.tafseer-actions button.primary{background:var(--reader-green);border-color:var(--reader-green);color:#fff}
.tafseer-actions button:disabled{opacity:.42;cursor:not-allowed;transform:none}

.mushaf-fullscreen-exit{display:none;position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:300;width:44px;height:44px;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(20,26,23,.72);color:#fff;font-size:27px;line-height:1;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.24);backdrop-filter:blur(12px)}
#bookViewport:fullscreen{width:100vw;height:100dvh;min-height:100dvh;padding:24px 74px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#f7f1e5 0,#e7dfd0 72%,#d9cfbf 100%);perspective:3200px}
#bookViewport:fullscreen .mushaf-fullscreen-exit{display:grid;place-items:center}
#bookViewport:fullscreen .desktop-book{width:min(calc(100vw - 172px),calc((100dvh - 52px)*1.44));max-width:none;min-width:0}
#bookViewport:fullscreen .side-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:240}
#bookViewport:fullscreen .side-arrow-next{left:max(18px,env(safe-area-inset-left))}
#bookViewport:fullscreen .side-arrow-previous{right:max(18px,env(safe-area-inset-right))}
#bookViewport:fullscreen.theme-sepia{background:radial-gradient(circle at 50% 35%,#e9d5af 0,#c7a978 76%,#aa895c 100%)}
#bookViewport:fullscreen.theme-night{background:radial-gradient(circle at 50% 35%,#25312d 0,#111815 76%,#090d0b 100%)}

@media(max-width:1180px) and (min-width:761px){
  .reader-toolbar{align-items:stretch;flex-direction:column}
  .toolbar-primary,.toolbar-secondary{width:100%}
  .toolbar-secondary{justify-content:space-between}
  .control-reading{flex-basis:210px}.control-surah{flex:1}.toolbar-button{flex:0 0 42px}
}

@media(max-width:760px){
  .toolbar-primary{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 70px 40px}
  .toolbar-search{width:40px;min-width:40px;height:40px}
  .toolbar-secondary{grid-template-columns:minmax(54px,1fr) minmax(72px,1.25fr) repeat(4,40px)}
  .toolbar-secondary #fullscreen{display:none}
  .toolbar-secondary .toolbar-button{width:40px;min-width:40px}
  .search-dialog,.tafseer-dialog{width:calc(100% - 14px);max-height:92dvh;border-radius:18px}
  .quran-search-form{grid-template-columns:1fr;padding:12px 12px 8px}.quran-search-form>button{min-height:42px}
  .search-status{padding:0 13px 10px}.search-results{max-height:calc(92dvh - 232px);padding:0 12px 14px}.search-result{padding:12px}.search-ayah{font-size:22px}
  .tafseer-card{padding:14px 14px 16px;max-height:calc(92dvh - 184px)}.tafseer-ayah{font-size:25px}.tafseer-text{font-size:15px;line-height:1.9}
  .tafseer-actions{grid-template-columns:44px minmax(0,1fr) 44px;padding:10px 12px 12px}.tafseer-actions button:first-child,.tafseer-actions button:last-child{font-size:0}.tafseer-actions button:first-child::before{content:"‹";font-size:25px}.tafseer-actions button:last-child::before{content:"›";font-size:25px}
  #bookViewport:fullscreen{padding:8px;display:grid;place-items:center;background:#e7dfd0}
  #bookViewport:fullscreen .desktop-book{display:none}
  #bookViewport:fullscreen .mobile-book{display:block;width:min(calc(100vw - 16px),calc((100dvh - 16px)*.715));max-width:none}
  #bookViewport:fullscreen .side-arrow{display:none}
  #bookViewport:fullscreen .mushaf-fullscreen-exit{width:40px;height:40px;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));font-size:24px}
}

@media(max-width:380px){
  .toolbar-primary{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 62px 40px}
  .toolbar-secondary{grid-template-columns:minmax(50px,1fr) minmax(62px,1.15fr) repeat(4,38px);gap:5px}
  .toolbar-secondary .toolbar-button{width:38px;min-width:38px}
}


/* Official TawheedTech reader chrome */
.quran-body{background:radial-gradient(circle at 14% 4%,rgba(229,167,42,.07),transparent 29%),var(--cream)}
.reading-badge{background:var(--reader-green);box-shadow:0 8px 22px rgba(32,69,68,.20)}
.toolbar-button.active{background:var(--reader-burgundy);border-color:var(--reader-burgundy);color:#172827}
.ribbon-bookmark{filter:drop-shadow(0 8px 7px rgba(20,47,46,.25))}
#bookViewport:fullscreen.theme-night{background:radial-gradient(circle at 50% 35%,#253b39 0,#142726 76%,#0d1c1b 100%)}

/* Shared TawheedTech site shell ------------------------------------------------ */
.quran-body{padding-top:104px}
.quran-global-header{position:fixed;top:0;inset-inline:0;z-index:1000}
.quran-global-header .header-shell{background:color-mix(in srgb,var(--paper) 88%,transparent);border-color:var(--line);box-shadow:0 14px 50px rgba(0,20,17,.13);backdrop-filter:blur(20px);color:var(--ink)}
.quran-global-header .desktop-nav a.is-active{opacity:1}
.quran-global-header .mobile-menu a.is-active{background:color-mix(in srgb,var(--tt-gold) 13%,var(--cream));color:var(--ink);font-weight:800}
.quran-global-footer{margin-top:0}
.quran-global-footer .button{width:max-content}
.quran-global-footer .footer-links a{width:max-content}
html[data-theme="dark"] .quran-global-header .header-shell{background:color-mix(in srgb,var(--tt-teal-deep) 90%,transparent);border-color:rgba(255,255,255,.1);color:var(--tt-ivory)}
html[data-theme="dark"] .quran-global-header .icon-button,
html[data-theme="dark"] .quran-global-header .language-button,
html[data-theme="dark"] .quran-global-header .menu-button{border-color:rgba(255,255,255,.14);color:var(--tt-ivory)}
html[data-theme="dark"] .quran-global-header .mobile-menu{background:color-mix(in srgb,var(--tt-teal-deep) 96%,transparent);color:var(--tt-ivory);border-color:rgba(255,255,255,.1)}
@media(max-width:900px){.quran-body{padding-top:96px}}
@media(max-width:620px){.quran-body{padding-top:88px}.quran-global-header{padding-inline:10px}.quran-global-header .header-shell{min-height:62px;padding:6px 8px 6px 10px;border-radius:17px}.quran-global-footer{padding-top:54px}.quran-global-footer .footer-top{gap:34px}.quran-global-footer .footer-bottom{align-items:flex-start}}

/* Professional fixed-geometry page curl engine.
   The two pages meet at one physical hinge; the visible gutter is an overlay,
   so the turning sheet never jumps by the former 18px grid column. */
.book-spread{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:0;
  overflow:visible;
}
.book-spread>.mushaf-page-left{grid-column:1;grid-row:1}
.book-spread>.mushaf-page-right{grid-column:2;grid-row:1}
.book-gutter{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:18px;
  transform:translateX(-50%);
  z-index:24;
  pointer-events:none;
}
.turn-layer{
  position:absolute;
  inset:0;
  z-index:38;
  pointer-events:none;
  perspective:6000px;
  perspective-origin:50% 46%;
  transform-style:preserve-3d;
  overflow:visible;
}
.page-curl{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
  isolation:isolate;
}
.curl-strip{
  position:absolute;
  left:0;
  transform-origin:0 50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  contain:layout paint style;
}
.curl-face{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:var(--curl-paper,#fbf6e8);
}
.curl-face.front{transform:translateZ(.45px)}
.curl-face.back{transform:rotateY(180deg) translateZ(.45px)}
.curl-face-clip{
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
  background:inherit;
}
.curl-page-copy{
  position:absolute!important;
  right:auto!important;
  bottom:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  transform:none!important;
  contain:layout paint style;
}
.curl-face::before,.curl-face::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}
.curl-face::after{
  background:#21150b;
  opacity:var(--curl-shadow,0);
  mix-blend-mode:multiply;
}
.curl-face::before{
  background:#fff;
  opacity:var(--curl-highlight,0);
  mix-blend-mode:screen;
}
.curl-bed-shadow{
  position:absolute;
  top:var(--curl-page-top);
  width:50%;
  height:var(--curl-page-height);
  z-index:4;
  pointer-events:none;
  opacity:0;
  filter:blur(1.4px);
}
.curl-bed-shadow.on-left{
  left:0;
  background:linear-gradient(270deg,rgba(26,17,8,.36),rgba(26,17,8,.11) 8%,transparent 31%);
}
.curl-bed-shadow.on-right{
  right:0;
  background:linear-gradient(90deg,rgba(26,17,8,.36),rgba(26,17,8,.11) 8%,transparent 31%);
}
.curl-edge-shadow{
  position:absolute;
  top:var(--curl-page-top);
  height:var(--curl-page-height);
  z-index:390;
  border-radius:50%;
  pointer-events:none;
  background:rgba(22,14,7,.34);
  filter:blur(13px);
  transform-origin:50% 50%;
  will-change:transform,width,opacity;
}
.curl-spine-veil{
  position:absolute;
  top:var(--curl-page-top);
  left:var(--curl-spine-x);
  width:32px;
  height:var(--curl-page-height);
  z-index:420;
  transform:translateX(-50%) translateZ(2px);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(27,17,8,.22) 20%,rgba(255,255,255,.1) 43%,rgba(25,16,8,.32) 51%,rgba(255,255,255,.07) 66%,transparent);
  box-shadow:inset 5px 0 9px -7px rgba(22,14,7,.9),inset -5px 0 9px -7px rgba(22,14,7,.9);
  filter:blur(.25px);
  will-change:opacity;
}
.book-spread.is-turning .book-gutter{opacity:.86}
.book-spread.is-turning .ribbon-bookmark{filter:saturate(.96) brightness(.98)}
.book-viewport.theme-sepia .curl-face{--curl-paper:#efe0bd}
.book-viewport.theme-night .curl-face{--curl-paper:#171d1b}
.book-viewport.theme-night .curl-face::after{background:#000;mix-blend-mode:normal}
.book-viewport.theme-night .curl-face::before{background:#d8e0dc;mix-blend-mode:screen}

@media(max-width:760px){
  .mobile-turn-sheet{
    transform:translateZ(1px);
    transition:none;
    animation:none;
    will-change:transform;
  }
  .mobile-turn-sheet.forward{transform-origin:left center}
  .mobile-turn-sheet.backward{transform-origin:right center}
  .mobile-turn-sheet.forward.running{animation:mobilePageCurlForward .76s cubic-bezier(.22,.68,.2,1) both}
  .mobile-turn-sheet.backward.running{animation:mobilePageCurlBackward .76s cubic-bezier(.22,.68,.2,1) both}
  .mobile-turn-shadow{
    position:absolute;
    inset:0;
    z-index:15;
    border-radius:10px;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(90deg,transparent 34%,rgba(24,15,7,.3) 50%,transparent 66%);
  }
  .mobile-turn-sheet.running .mobile-turn-shadow{animation:mobileCurlShadow .76s ease-in-out both}
  @keyframes mobilePageCurlForward{
    0%{transform:translate3d(0,0,1px) rotateY(.01deg)}
    42%{transform:translate3d(0,0,28px) rotateY(-76deg)}
    58%{transform:translate3d(0,0,28px) rotateY(-104deg)}
    100%{transform:translate3d(0,0,1px) rotateY(-179.9deg)}
  }
  @keyframes mobilePageCurlBackward{
    0%{transform:translate3d(0,0,1px) rotateY(.01deg)}
    42%{transform:translate3d(0,0,28px) rotateY(76deg)}
    58%{transform:translate3d(0,0,28px) rotateY(104deg)}
    100%{transform:translate3d(0,0,1px) rotateY(179.9deg)}
  }
  @keyframes mobileCurlShadow{0%,100%{opacity:0}45%,55%{opacity:.72}}
}

@media(prefers-reduced-motion:reduce){
  .page-curl,.mobile-turn-sheet{display:none!important}
}
.reader-shell.is-page-turning .reader-toolbar,
.reader-shell.is-page-turning .reader-context,
.reader-shell.is-page-turning .mobile-bottom-controls{pointer-events:none}
.reader-shell.is-page-turning .reader-toolbar{filter:saturate(.98)}

/* Dark-mode native dropdown contrast ----------------------------------------
   Native select popups are rendered outside the normal toolbar paint layer.
   Give the control and every popup row explicit dark palette values so the
   list stays readable in normal view, reader fullscreen, and browser fullscreen. */
html[data-theme="dark"] .reader-toolbar select{
  color-scheme:dark;
  color:#fffaf0;
  background-color:transparent;
  -webkit-text-fill-color:#fffaf0;
}
html[data-theme="dark"] .reader-toolbar select option,
html[data-theme="dark"] .reader-toolbar select optgroup{
  color:#fffaf0!important;
  background-color:#142f2e!important;
  -webkit-text-fill-color:#fffaf0;
  font-weight:700;
}
html[data-theme="dark"] .reader-toolbar select option:checked{
  color:#0d2322!important;
  background-color:#e5a72a!important;
  -webkit-text-fill-color:#0d2322;
  font-weight:900;
}
html[data-theme="dark"] .reader-toolbar select option:disabled{
  color:#8aa19f!important;
  background-color:#142f2e!important;
  -webkit-text-fill-color:#8aa19f;
}
html[data-theme="dark"] .reader-toolbar select:focus-visible{
  outline:2px solid color-mix(in srgb,#e5a72a 72%,transparent);
  outline-offset:3px;
}
/* Firefox/Chromium use the element color-scheme for the popup scrollbar and
   selection surface. Reassert it inside both supported fullscreen modes. */
html[data-theme="dark"] .reader-shell:fullscreen select,
html[data-theme="dark"] #bookViewport:fullscreen select{
  color-scheme:dark;
}
html[data-theme="dark"] .reader-toolbar select option:hover,
html[data-theme="dark"] .reader-toolbar select option:focus{
  color:#fffaf0!important;
  background-color:#29514f!important;
  -webkit-text-fill-color:#fffaf0;
}
html[data-theme="dark"] .reader-toolbar select{
  scrollbar-color:#66827f #142f2e;
  scrollbar-width:thin;
}
html[data-theme="dark"] .reader-toolbar select::-webkit-scrollbar{width:10px}
html[data-theme="dark"] .reader-toolbar select::-webkit-scrollbar-track{background:#142f2e}
html[data-theme="dark"] .reader-toolbar select::-webkit-scrollbar-thumb{background:#66827f;border:2px solid #142f2e;border-radius:999px}


/* Keep Qur'anic source text and Surah names Arabic in every interface locale. */
.quran-arabic,.quran-page-text,.search-ayah,#tafseerAyah,#tafseerText{font-family:var(--active-quran-font,"QuranHafs"),"Noto Naskh Arabic","Amiri",serif;direction:rtl;text-align:right;unicode-bidi:isolate}
#readerTitle.quran-arabic{font-family:"Noto Naskh Arabic","Amiri",serif;line-height:1.5}
.page-running-head span:nth-child(2),.page-footer span{direction:rtl;unicode-bidi:isolate;font-family:"Noto Naskh Arabic","Amiri",serif}
.reader-toolbar,.toolbar-groups,.toolbar-group{min-width:0}
.toolbar-group{flex-wrap:wrap}
.toolbar-group label,.toolbar-button{min-width:0}
.toolbar-group select{max-width:min(100%,220px)}
@media(max-width:1100px){.reader-toolbar{align-items:stretch}.toolbar-groups{flex-wrap:wrap}.toolbar-group{flex:1 1 280px}}
@media(max-width:640px){.toolbar-group{flex-basis:100%}.toolbar-group select{max-width:100%}}

/* Narration font integrity ---------------------------------------------------
   The global shell deliberately gives ordinary Arabic UI text a site font.
   Mushaf text is different: every riwayah must use its matching KFGQPC font.
   These higher-specificity !important rules override only the reader text and
   prevent the global .quran-arabic rule from producing missing-glyph squares. */
.quran-body .quran-page-text,
.quran-body .quran-page-text .ayah,
.quran-body .surah-banner{
  font-family:var(--active-quran-font,"QuranHafs")!important;
  font-weight:400!important;
  font-style:normal!important;
  font-synthesis:none!important;
  font-kerning:normal;
  font-feature-settings:"rlig" 1,"liga" 1,"calt" 1,"kern" 1;
  letter-spacing:0!important;
  word-spacing:0;
}
.quran-body .quran-page-text .ayah{unicode-bidi:isolate}
.quran-body .search-ayah,
.quran-body #tafseerAyah{
  font-family:"TafseerQuranFont",serif!important;
}