:root{color-scheme:light;--ink:#153d2c;--gold:#cda45c;--paper:#fcf6ea;--surface:#f9f1e5;--muted:#695f50;--background:#e9dac3;--overlay:0;--reader-scale:1;--text-size:1rem}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.5 'Segoe UI',Tahoma,Arial,sans-serif;background-color:var(--background);background-image:linear-gradient(rgb(7 30 30 / var(--overlay)),rgb(7 30 30 / var(--overlay))),var(--site-image,none);background-size:cover;background-position:center top;background-attachment:fixed}html[data-theme=night]{color-scheme:dark;--ink:#f8e9c8;--gold:#e5c271;--surface:#102e32;--muted:#d5d5c4;--background:#071d2b}button,select,input,textarea{font:inherit}button,select,.back{min-height:44px;border:1px solid #bba47c;border-radius:11px;background:linear-gradient(#fffdf8,#eee0c9);color:#173a2a;padding:8px 15px;font-weight:650}button{cursor:pointer}button:disabled,select:disabled{cursor:not-allowed;opacity:.65}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.book-viewport:focus-visible{outline:3px solid #e3a929;outline-offset:3px}button.primary,button[aria-pressed=true]{color:#fff9e9;border-color:#d9b364;background:linear-gradient(#23603d,#063523);box-shadow:inset 0 1px #ffffff55,0 2px 3px #0003}button:hover:not(:disabled){filter:brightness(1.08)}[hidden]{display:none!important}.top{background:linear-gradient(110deg,#052b23,#164b38);color:#fff9e9;padding:12px max(20px,3vw);display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:2px solid #d2af66}.brand{display:flex;align-items:center;gap:12px}.brand>span{font-size:42px;color:#e5c675}.brand strong{font-size:clamp(21px,2vw,29px)}.brand small{display:block;color:#e7dbc1}.top-actions,.actions,.segmented,.switch,.reading-controls,.scroll-row,.audio{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.badge{color:#133d2c;background:#f5dfae;border-radius:20px;padding:8px 14px;font-weight:bold}.back{text-decoration:none;display:inline-flex;align-items:center}.shell{max-width:1600px;margin:auto;padding:18px clamp(12px,2vw,28px) 30px}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.heading h1{font-size:clamp(24px,2.4vw,36px);margin:0 0 12px;text-shadow:0 1px #fff}.surface{border:1px solid var(--gold);background:var(--surface);border-radius:16px;box-shadow:0 3px 10px #2b1a0e26}.toolbar{padding:10px 14px;display:flex;align-items:end;gap:12px;margin-bottom:18px;flex-wrap:wrap}.toolbar label,.audio label,.panel label{display:grid;gap:4px;font-weight:700}.toolbar label{flex:1;min-width:125px}.work{display:flex;align-items:flex-start;gap:16px}.reader{min-width:0;flex:1}.book-viewport{overflow:auto;padding:10px 7px 16px}.book{display:flex;direction:rtl;width:calc(100% * var(--reader-scale));zoom:var(--reader-scale);margin-inline:auto;border:5px ridge #a47d36;border-radius:20px;background:#dac395;box-shadow:0 10px 20px #2114084d}.leaf{min-width:0;flex:1;min-height:clamp(360px,37vw,570px);padding:30px;text-align:center;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;color:#183d2c;background:radial-gradient(ellipse at center,#fffdf5,#f3e6d0);border:14px double #d3af68;outline:1px solid #486449;outline-offset:-23px;border-radius:11px 28px 18px 8px}.leaf+.leaf{border-radius:28px 11px 8px 18px;border-inline-start:3px solid #a98445}.leaf h2{font-size:clamp(20px,2.3vw,32px);margin:0}.leaf p{color:#6a655a;font-size:clamp(16px,1.4vw,22px)}.ornament{font-size:33px;color:#c39337}.book.single .second{display:none}.reading-controls{justify-content:center;padding:10px;margin-bottom:12px}.reading-controls span{font-weight:bold}.zoom{display:flex;gap:4px}.scroll-controls,.audio{padding:14px;margin-bottom:12px}.scroll-controls h2{margin:0;font-size:21px}.scroll-controls p{margin:4px 0 12px}.scroll-row input{flex:1;min-width:100px;accent-color:#15593c}.note{font-size:14px;color:var(--muted)}.audio{justify-content:space-around}.audio input{max-width:130px}.panel{width:min(390px,34%);flex-shrink:0;overflow:hidden}.panel-head{background:linear-gradient(110deg,#175338,#043321);color:#fff9e8;display:flex;align-items:center;justify-content:space-between;padding:8px 14px}.panel-head h2{margin:0}.panel-head button{border-radius:50%;min-width:44px;font-size:22px;padding:0}.panel-body{padding:14px;display:grid;gap:12px}.panel-body h3{margin:6px 0 0}.panel-body select,.panel-body textarea{width:100%}.panel-body textarea{background:#fffdf7;color:#163c2a;border:1px solid #b5a38b;border-radius:9px;padding:10px;resize:vertical}.empty{padding:18px;border:1px solid #d5c4a9;border-radius:12px;color:var(--ink);font-size:var(--text-size);line-height:1.8}.status{padding:12px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.status strong{font-size:19px}html[data-theme=night] .heading h1{text-shadow:none}html[data-theme=night] .surface{background:#102d31ef}html[data-theme=night] .note{color:#d5d5c4}html[data-theme=night] .toolbar select,html[data-theme=night] .panel select{background:#1c3b3e;color:#fff2d3}html[data-theme=night] .leaf{color:#183d2c} @media(max-width:850px){.work{flex-direction:column}.reader,.panel{width:100%}.panel{order:-1}.toolbar label{min-width:calc(50% - 12px)}.book .second{display:none}.leaf{min-height:450px}.top{align-items:flex-start;flex-direction:column}.top-actions{width:100%}.heading h1{margin:0}.heading{margin-bottom:12px}.actions{width:100%}.actions button{flex:1}.scroll-row label{flex-basis:100%}.audio{justify-content:center}.badge{display:none}}@media(max-width:420px){.shell{padding-inline:8px}.leaf{min-height:390px;padding:18px;border-width:10px;outline-offset:-17px}.reading-controls button{padding-inline:9px}.brand strong{font-size:21px}.top{padding:10px 12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.reader-page img{display:block;width:100%;height:auto;object-fit:contain}
.reader-page{padding:0;min-height:0;background:#fff;border:0;outline:0;box-shadow:none;display:block}
.reader-page:before,.reader-page:after{display:none}
.reader-page canvas{display:block;width:100%;height:auto}
/* Keep the title readable over every background without covering the image. */
.heading h1{background:#fcf6ea;color:#153d2c;padding:4px 12px;border:1px solid var(--gold);border-radius:12px;text-shadow:none}
html[data-theme=night] .heading h1{background:#102e32;color:#f8e9c8;text-shadow:none}
.book-viewport{max-height: min(70vh, 600px);overscroll-behavior:contain}
/* Site image tint is independent of the reader's day/night controls. */
body{background-color:var(--site-color,var(--background));background-image:linear-gradient(rgb(var(--overlay-color,7 30 48) / var(--overlay)),rgb(var(--overlay-color,7 30 48) / var(--overlay))),var(--site-image,none)}
/* Decorative reconstruction only: no page image or Quranic text is synthesized. */
.book-viewport{padding:18px 16px 23px;background:radial-gradient(ellipse at center,#f9f0dc55,transparent 70%),repeating-linear-gradient(45deg,#c79f5122 0 1px,transparent 1px 20px),repeating-linear-gradient(-45deg,#c79f5122 0 1px,transparent 1px 20px);border-radius:30px}
.book{border:5px ridge #ae8236;box-shadow:0 3px 0 #513509,0 8px 0 #9c7b45,0 14px 20px #21140866}
.leaf{position:relative;isolation:isolate;border:12px ridge #d9bd82;outline:2px solid #b78935;outline-offset:-20px;background:radial-gradient(ellipse at center,#fffdf5 22%,#f2e4ce 100%);box-shadow:inset 0 0 0 4px #fff8e8,inset 0 0 0 7px #b98e42,inset 0 0 0 10px #f4dfaf,inset 0 0 0 12px #3f6c4d}
.leaf:before{content:'';position:absolute;z-index:-1;inset:18px;border:5px double #c3963f;border-radius:48px 8px;box-shadow:inset 0 0 0 2px #47704f,0 0 0 2px #f4d68c;pointer-events:none}
.leaf:after{content:'❧  ✦  ❧';position:absolute;inset:auto 22% 24px;color:#b78328;border-bottom:1px solid #c79b4b;line-height:1.1;pointer-events:none}
.ornament{width:55%;font-size:30px;line-height:1;color:#b47c22;background:linear-gradient(90deg,transparent,#c5963f,transparent) center/100% 1px no-repeat;text-shadow:0 1px #fff}
.leaf h2,.leaf p{position:relative;max-width:85%}
html[data-theme=night] .book-viewport{background:radial-gradient(ellipse at center,#173c3a88,transparent 70%),repeating-linear-gradient(45deg,#c79f5122 0 1px,transparent 1px 20px),repeating-linear-gradient(-45deg,#c79f5122 0 1px,transparent 1px 20px)}
html[data-theme=night] .panel-body textarea{background:#f8f1e5;color:#163c2a}
.reading-controls .surah-control{display:inline-flex;align-items:center;gap:8px;max-width:100%}.reading-controls .surah-control select{min-width:0;max-width:100%}
.reading-controls .verse-control{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}.reading-controls .verse-control select{min-width:0;max-width:100%}.reading-controls .verse-control small{flex-basis:100%;color:var(--muted);overflow-wrap:anywhere}.reading-controls .verse-control small:empty{display:none}
@media(max-width:850px){.work{display:flex;flex-direction:column}.reader,.panel{width:100%}.panel{order:0}.book .second{display:flex}.book.single .second{display:none}.book-viewport{padding:12px 8px 20px}.leaf{min-height:450px}.reading-controls{display:flex}.reading-controls .zoom,.reading-controls #return-position{grid-column:span 3;justify-content:center}.toolbar{gap:8px}.toolbar label{min-width:calc(50% - 8px)}.segmented{justify-content:center}}
@media(max-width:420px){.leaf{min-height:390px;padding:26px 18px}.leaf:before{inset:13px;border-radius:35px 5px}.leaf h2{font-size:19px}.leaf p{font-size:15px}.book:not(.single){min-width:620px}.reading-controls{gap:4px}.reading-controls button{padding-inline:7px}}
.book-stage{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;gap:4px}
.book-viewport{min-width:0;touch-action:pan-x pan-y}
.page-nav{padding:4px;line-height:1;font-size:28px;color:#fff9e9;background:#174a31;border-color:var(--gold)}
.page-nav span{display:block;font-size:11px;line-height:1.3}
@media(max-width:600px){.book-stage{grid-template-columns:44px minmax(0,1fr) 44px;gap:0}.page-nav{font-size:24px}.page-nav span{font-size:10px}.reading-controls{display:flex;justify-content:center}.reading-controls .zoom{justify-content:center;flex-wrap:wrap}}
.study-group{display:grid;gap:8px;border:1px solid var(--gold);border-radius:10px;padding:10px;min-width:0}
.study-group h3{margin:0}
@media(min-width:851px){#study{order:-1}}
@media(min-width:480px) and (max-width:850px){.work:has(#tafsir:not([hidden])){flex-direction:row;gap:8px}.work:has(#tafsir:not([hidden])) .reader{width:auto;flex:1}.work:has(#tafsir:not([hidden])) #tafsir{width:42%;order:-1}.work:has(#tafsir:not([hidden])) .book-stage{grid-template-columns:32px minmax(0,1fr) 32px}.work:has(#tafsir:not([hidden])) .page-nav{min-width:0}.work:has(#tafsir:not([hidden])) .panel-body{padding:8px}}
.reader-page{padding:0;min-height:0;border:0}
.badge{display:inline-block}
/* Search stays in the control flow, below the page rather than over it. */
#verse-search-root{flex:1 1 100%;min-width:0;max-width:100%;overflow-wrap:anywhere}
#verse-search-root form{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
#verse-search-root form input,#verse-search-root form select{min-width:0;max-width:100%;flex:1 1 140px}
#verse-search-root p{margin:6px 0;color:var(--muted)}
#verse-search-root > div > section h2{font-size:1rem;margin:8px 0 2px}
#verse-search-root > div > section > div{max-height:12rem;overflow-y:auto;overscroll-behavior:contain}
#verse-search-root .verse-search-spacer{margin:0;padding:0;border:0;pointer-events:none}
#verse-search-root > div > section > div > button{display:block;position:relative;width:100%;max-width:100%;text-align:start;white-space:normal;overflow-wrap:anywhere;margin-block:4px;padding-inline-start:calc(5ch + 1.5rem)}
#verse-search-root .search-result-number{position:absolute;right:.5rem;top:.65em;min-width:5ch;text-align:center;direction:ltr;white-space:nowrap;overflow-wrap:normal;border-left:1px solid currentColor}
#verse-search-root mark{background:#ffdf80;color:#173a2a}