:root{--bg:#f3ead6;--card:#fbf6e9;--ink:#1d2b26;--mut:#7a7762;--p:#0f4a3d;--s:#b8892b;--g:var(--p);--gold:var(--s);--line:#d9c9a0;--hd:color-mix(in srgb,var(--p) 78%,#000);--ht:color-mix(in srgb,var(--s) 45%,#fff);--on:#fff;--f1:'Aref Ruqaa',serif;--f2:Amiri,serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1714;--card:#15221d;--ink:#eadfc3;--mut:#a79f86;--g:color-mix(in srgb,var(--p) 45%,#fff);--gold:color-mix(in srgb,var(--s) 80%,#fff);--line:#2b3b34;--hd:color-mix(in srgb,var(--p) 40%,#000);--on:#111}}
:root[data-theme="dark"]{--bg:#0e1714;--card:#15221d;--ink:#eadfc3;--mut:#a79f86;--g:color-mix(in srgb,var(--p) 45%,#fff);--gold:color-mix(in srgb,var(--s) 80%,#fff);--line:#2b3b34;--hd:color-mix(in srgb,var(--p) 40%,#000);--on:#111}
html{scroll-padding-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs,19px)/1.9 var(--f2);-webkit-text-size-adjust:100%}
header{background:var(--hd);padding:22px 14px 12px;overflow:visible}
.bar{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.name{font:700 clamp(34px,7vw,52px)/2.3 var(--f1);color:var(--ht);text-decoration:none;text-align:center}.end{justify-self:end}
.btn{font:500 15px var(--f2);border:1px solid var(--gold);background:transparent;color:var(--g);border-radius:4px;padding:8px 14px;min-height:40px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
header .btn{color:var(--ht)}.btn.p{background:var(--g);color:var(--on);border-color:var(--g)}.btn.d{color:#b33;border-color:#b33}
main{max-width:1100px;margin:22px auto;padding:0 16px}
.juz{margin:18px 0}.juz h3{font:500 18px var(--f2);color:var(--g);margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.t{position:relative;display:grid;place-items:center;aspect-ratio:1;background:none;border:0;padding:0;font-size:clamp(40px,9.5vw,78px);line-height:1;color:inherit}
.t .g{font-family:'Amiri Quran','Amiri',serif;color:var(--line);line-height:1}
.t b{position:absolute;font:500 .26em var(--f2);color:var(--mut);opacity:.7}
button.t{cursor:pointer}.t.on .g{color:var(--g)}.t.dr .g{color:var(--gold)}.t.on b,.t.dr b{color:var(--ink);opacity:1}button.t:hover .g{color:var(--gold)}
.crumb{font:500 15px var(--f2)}.crumb a{color:var(--g);cursor:pointer}.crumb i{color:var(--mut);font-style:normal}
.qh{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);padding:18px;margin:12px 0;text-align:center}
.qh .n{font:500 15px var(--f2);color:var(--gold)}.qh h2{font:700 clamp(24px,5vw,34px) var(--f1);margin:2px 0;color:var(--g)}
.tabs{display:flex;gap:6px;overflow-x:auto;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);padding:8px 0;z-index:3}
.tabs a{flex:none;font:500 15px var(--f2);padding:7px 14px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:var(--card);cursor:pointer}
.tabs a.act{background:var(--g);color:var(--on);border-color:var(--g)}
.sec{background:var(--card);border:1px solid var(--line);border-right:5px solid var(--g);margin:16px 0}
.sec>h3{margin:0;padding:10px 18px;font:700 21px var(--f2);color:var(--g);border-bottom:1px solid var(--line)}
.qt{font:clamp(22px,4vw,28px)/2.3 'Amiri Quran','Amiri',serif;padding:14px 20px;white-space:pre-line;text-align:justify;overflow-wrap:anywhere}
.it{display:flex;gap:12px;padding:14px 18px;border-bottom:1px dotted var(--line);overflow-wrap:anywhere}.it:last-child{border:0}.it>div{min-width:0}
.no{flex:none;width:32px;height:32px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font:500 15px var(--f2);color:var(--gold)}
.tx{white-space:pre-line;margin:0}.src{font-size:16px;color:var(--gold);font-weight:700}.nt{font-size:16px;color:var(--mut)}
.pn{display:flex;justify-content:space-between;gap:8px;margin:20px 0}
h2.ah{font:700 28px var(--f1);color:var(--g);margin:6px 0}
label{display:block;font:500 15px var(--f2);margin:12px 0 4px;color:var(--g)}
input,textarea,select{display:block;width:100%;max-width:100%;font:18px/1.7 var(--f2);padding:9px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:4px}
textarea{min-height:90px;resize:vertical;overflow:hidden}input[type=checkbox]{display:inline-block;width:20px;height:20px;vertical-align:middle;margin-inline-start:6px}
.qa{font-family:'Amiri Quran','Amiri',serif;font-size:22px;line-height:2.1;min-height:170px}
.ac{border:1px solid var(--line);margin:18px 0;background:var(--card)}.ach{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line)}.ach h3{margin:0;font:700 19px var(--f2);color:var(--g)}
.ai{margin:12px;padding:10px 12px;border:1px solid var(--line);border-right:4px solid var(--gold);background:var(--bg)}.aih{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}.aih span{display:flex;gap:4px}
.sv{position:sticky;bottom:env(safe-area-inset-bottom,0px);display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 0;background:var(--bg);z-index:4}
.st{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}.sc{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);padding:12px;text-align:center}.sc b{display:block;font:700 30px var(--f2);color:var(--g)}.sc span{color:var(--mut)}
.lg{color:var(--mut);font-size:16px}.lg s{text-decoration:none;font-family:'Amiri Quran',serif;font-size:24px;vertical-align:middle}
.ms{color:var(--mut);font-size:16px}
h3.hh{font:700 22px var(--f1);color:var(--g);margin:24px 0 4px}.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 12px}
.al{display:grid;grid-template-columns:210px 1fr;gap:20px}.ab{min-width:0}.an{display:flex;flex-direction:column;gap:6px;align-self:start;position:sticky;top:10px}
.an a{font:500 15px var(--f2);padding:10px 14px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:var(--card);flex:none}.an a.act{background:var(--g);color:var(--on);border-color:var(--g)}
.sws{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}.sw{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}.sw.on{border-color:var(--ink);outline:2px solid var(--gold);outline-offset:2px}
.pv{border:1px solid var(--line);background:var(--card);padding:12px 18px;margin:14px 0}.pv h3{margin:0;font:700 26px var(--f1);color:var(--g)}.pv p{margin:0;font:20px var(--f2)}
#dw{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 24px));padding:6px 16px 12px;border:1px solid var(--gold);border-top:4px solid var(--gold);border-radius:6px;box-shadow:0 6px 24px #0003;z-index:20;line-height:1.9;animation:fi .6s}
#dw[hidden]{display:none}@keyframes fi{from{opacity:0;transform:translateY(12px)}}
.dh{display:flex;justify-content:space-between;align-items:center}.dh button{background:none;border:0;color:inherit;font-size:20px;cursor:pointer;opacity:.55;min-width:40px;min-height:36px}.ds{font-size:.75em;opacity:.75;margin-top:4px}
@media(max-width:700px){.al{grid-template-columns:1fr}.an{flex-direction:row;overflow-x:auto;position:static}}
@media(max-width:560px){.grid{grid-template-columns:repeat(4,1fr)}.t{font-size:min(17vw,76px)}.it{padding:12px}}

.fb{position:fixed;left:0;right:0;bottom:0;z-index:30}.cf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--hd);color:var(--ht);font:16px var(--f2);border-top:1px solid var(--gold)}
.cf .btn{color:var(--ht)}.cf .btn.p{background:var(--gold);border-color:var(--gold);color:var(--on)}
.swb{position:relative;display:inline-block;margin-bottom:16px}.swb em{position:absolute;bottom:-17px;right:50%;transform:translateX(50%);font:normal 11px var(--f2);background:var(--ink);color:var(--bg);padding:0 6px;border-radius:8px;white-space:nowrap}
.lk{background:none;border:0;color:var(--gold);cursor:pointer;font:inherit;text-decoration:underline;padding:0 6px}small.or{color:var(--mut)}
#ts{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 18px;border-radius:6px;z-index:40;max-width:92vw;text-align:center}#ts[hidden]{display:none}
.qb{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}body.adm main{padding-bottom:130px}

.name{padding:12px 8px 0;white-space:nowrap}.qh h2,h2.ah{line-height:1.9}
.tm{display:flex;gap:6px}.tm input{flex:1}.tm select{width:auto}.lgn{max-width:420px;margin:30px auto}
pre.rl{direction:ltr;text-align:left;overflow-x:auto;background:var(--card);border:1px solid var(--line);padding:10px;font:14px/1.6 monospace;white-space:pre}
.dbar{height:3px;background:#8884;margin-top:8px;border-radius:2px;overflow:hidden}.dbar i{display:block;height:100%;background:var(--gold);transform-origin:right;animation:dbr var(--dur,20s) linear forwards}@keyframes dbr{to{transform:scaleX(0)}}
.dc{font:13px var(--f2);opacity:.7}
#dw.out{animation-duration:.6s;animation-timing-function:ease-in;animation-fill-mode:forwards}
#dw.out.fade{animation-name:ofade}#dw.out.slide{animation-name:oslide}#dw.out.shrink{animation-name:oshrink}
@keyframes ofade{to{opacity:0}}@keyframes oslide{to{opacity:0;transform:translateY(46px)}}@keyframes oshrink{to{opacity:0;transform:scale(.6)}}

.tg{max-width:1100px;margin:14px auto 0;padding:0 16px;text-align:center;color:var(--mut)}.tg[hidden]{display:none}
footer#ft{max-width:1100px;margin:30px auto;padding:0 16px 24px;text-align:center;color:var(--mut);font-size:16px}footer#ft:empty{display:none}
.srch{margin:6px 0 4px}.srch input{font-size:18px;padding:11px 14px}.sri{display:block;padding:8px 12px;border-bottom:1px dotted var(--line);color:var(--ink);text-decoration:none;background:var(--card)}.sri b{color:var(--g)}.sri small{color:var(--mut)}

.btn.sm{padding:3px 11px;min-height:30px;font-size:14px}.fl{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.fl select{flex:1;min-width:130px;width:auto}