:root{--n:#0a2a22;--n2:#0f3d33;--n3:#14503f;--g:#c9a24b;--g2:#e8cf8e;--iv:#f6efdc;--iv2:#fbf7ea;--ink:#16302a;--mut:#5d6f67;--lap:#1f4e79;--rail:76px}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:15px/1.5 system-ui,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--iv);overflow:hidden}
#app{display:grid;grid-template-columns:var(--rail) 1fr;height:100vh;height:100dvh}
body.open{--rail:236px}
/* rail */
#rail{background:linear-gradient(180deg,var(--n),var(--n2));color:var(--g2);display:flex;flex-direction:column;border-inline-end:2px solid var(--g);min-height:0;position:relative;z-index:5}
#rail:before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 61 27 85 15 73 39 98 50 73 61 85 85 61 73 50 98 39 73 15 85 27 61 2 50 27 39 15 15 39 27Z' fill='none' stroke='%23e8cf8e' stroke-width='3'/%3E%3C/svg%3E")}
.brand{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.05rem;height:64px;border-bottom:1px solid #c9a24b44;position:relative}
.brand .bs{width:34px;height:34px;color:var(--g);flex:none}.brand b{font:700 1.6rem Amiri,serif;color:var(--g2);white-space:nowrap;display:none}
body.open .brand b{display:block}
#items{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding:.6rem .55rem 1rem;position:relative;scrollbar-width:thin;scrollbar-color:#c9a24b66 transparent}
.gsep{height:1px;margin:.55rem .4rem;background:linear-gradient(90deg,transparent,#c9a24b88,transparent)}
.it{display:flex;align-items:center;gap:.8rem;width:100%;min-height:46px;padding:0 .55rem;margin:2px 0;border:0;border-radius:14px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;position:relative;text-decoration:none}
.it .ic{flex:none;width:36px;height:36px;display:grid;place-items:center;font-size:1.2rem;clip-path:polygon(50% 0,85% 15%,100% 50%,85% 85%,50% 100%,15% 85%,0 50%,15% 15%);background:#c9a24b22}
.it .tx{display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
body.open .it .tx{display:block}
.it:hover{background:#ffffff10}.it:focus-visible{outline:2px solid var(--g);outline-offset:1px}
.it.on{background:linear-gradient(90deg,#c9a24b33,#c9a24b0d)}.it.on .ic{background:var(--g);color:var(--n)}
.it.on:before{content:"";position:absolute;inset-inline-start:-.55rem;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--g)}
[dir=rtl] .it.on:before{border-radius:4px 0 0 4px}
body:not(.open) .it:hover:after{content:attr(data-t);position:fixed;inset-inline-start:calc(var(--rail) + 8px);background:var(--n);color:var(--g2);border:1px solid var(--g);padding:.3rem .7rem;border-radius:8px;font-size:.85rem;white-space:nowrap;z-index:50;pointer-events:none;margin-top:-4px}
/* main */
#main{display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;height:100dvh}
#bar{height:52px;flex:none;display:flex;align-items:center;gap:.6rem;padding:0 .9rem;background:var(--n);color:var(--g2);border-bottom:2px solid var(--g)}
#bar .sp{flex:1}.ib{width:38px;height:38px;border:0;border-radius:50%;background:#ffffff12;color:inherit;font-size:1.1rem;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.ib:hover{background:#ffffff22}
.sel{display:flex;align-items:center;gap:.4rem;background:#ffffff12;border-radius:99px;padding:0 .3rem 0 .8rem;height:38px}
.sel select{background:transparent;color:inherit;border:0;font:inherit;max-width:min(32vw,300px);height:36px;cursor:pointer}.sel select option{color:#111}
#livepill{display:flex;align-items:center;gap:.45rem;background:#16a34a;color:#fff;text-decoration:none;border-radius:99px;padding:.25rem .8rem;font-weight:700;font-size:.9rem}
#livepill[hidden]{display:none}#livepill i{width:.6em;height:.6em;border-radius:50%;background:#fff;animation:bl 1s infinite}@keyframes bl{50%{opacity:.25}}
.pg{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 0 3rem}
.pg[hidden],#fr[hidden]{display:none}
#fr{flex:1;min-height:0;width:100%;border:0;background:var(--iv)}
/* home */
#home{background:var(--iv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 61 27 85 15 73 39 98 50 73 61 85 85 61 73 50 98 39 73 15 85 27 61 2 50 27 39 15 15 39 27Z' fill='none' stroke='%23c9a24b' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E")}
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 80% 0,var(--n3),var(--n) 62%);color:var(--iv);display:flex;align-items:center;gap:2rem;padding:2.2rem clamp(1.2rem,4vw,4rem) 2.4rem;border-bottom:3px solid var(--g)}
.hero:after{content:"";position:absolute;inset:auto 0 -1px;height:14px;background:repeating-linear-gradient(90deg,var(--g) 0 14px,transparent 14px 28px);opacity:.35}
.arch{width:150px;height:195px;color:var(--g);flex:none}.ht{flex:1;min-width:0}
.bsm{font:400 clamp(1.8rem,3.4vw,3rem)/1.5 Amiri,"Noto Naskh Arabic",serif;color:var(--g2)}
.hero h1{margin:.1rem 0 .2rem;font:700 clamp(1.5rem,2.6vw,2.3rem) Amiri,serif;letter-spacing:.02em}
.hero p{margin:0;color:#e8dcb9;font-size:1.05rem}#hn{margin-top:.9rem;display:flex;gap:.6rem;flex-wrap:wrap}
.pillx{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #c9a24b99;border-radius:99px;padding:.35rem .95rem;background:#ffffff0f;color:var(--g2);text-decoration:none}
.rose{position:absolute;inset-inline-end:-40px;top:-40px;width:340px;height:340px;opacity:.16;color:var(--g);pointer-events:none}
.rose svg{position:absolute;inset:0;width:100%;height:100%}.rose svg+svg{transform:rotate(22.5deg) scale(.8)}
.pt{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;padding:1.2rem clamp(1rem,4vw,4rem) 0}
.pt div{min-width:104px;text-align:center;background:var(--iv2);border:1px solid #c9a24b88;border-radius:16px 16px 4px 4px;padding:.55rem .9rem}
.pt b{display:block;font-size:1.15rem;color:var(--n2)}.pt span{font-size:.8rem;color:var(--mut)}.pt .nx{background:var(--n2);border-color:var(--g)}.pt .nx b{color:var(--g2)}.pt .nx span{color:#d9ccaa}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.1rem;padding:1.6rem clamp(1rem,4vw,4rem) 0}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.5rem;min-height:150px;padding:1rem .8rem;border:1px solid #c9a24baa;border-radius:90px 90px 14px 14px;background:linear-gradient(180deg,#fffdf4,var(--iv2));color:var(--ink);font:inherit;cursor:pointer;text-decoration:none;text-align:center;transition:transform .18s,box-shadow .18s}
.tile .ic{font-size:2rem;line-height:1;filter:drop-shadow(0 1px 0 #fff)}.tile b{font-weight:600}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px #0a2a2226}.tile:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.tile:before{content:"";position:absolute;inset:6px;border:1px solid #c9a24b55;border-radius:84px 84px 8px 8px;pointer-events:none}
.qbox{max-width:980px;margin:0 auto;padding:1.4rem clamp(1rem,3vw,2rem)}
#fr.wide{display:block}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:1000px){.arch,.rose{display:none}}

#micb{height:38px;min-width:38px;border:0;border-radius:50%;background:#ffffff12;color:inherit;font-size:1.05rem;cursor:pointer}#micb:hover{background:#ffffff22}
/* Quran finder and other library forms inside the web app: the platform's standard form look (size, radius, focus ring, buttons) in the web app's green and gold */
.qbox input,.qbox select,.qbox textarea{width:100%;min-height:44px;padding:.62em .85em;border:1px solid #cbd5c9;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.qbox input:focus,.qbox select:focus,.qbox textarea:focus,.qbox .btn:focus-visible{outline:none;border-color:var(--n3);box-shadow:0 0 0 4px #14503f33}
.qbox .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:44px;padding:.6em 1.1em;border:1px solid #cbd5c9;border-radius:12px;background:#fff;color:var(--ink);font:600 .95rem system-ui,"Segoe UI",Roboto,sans-serif;cursor:pointer;text-decoration:none;max-width:100%;touch-action:manipulation}
.qbox .btn:hover{border-color:var(--n3);color:var(--n3)}.qbox .btn.p{background:linear-gradient(135deg,var(--n3),var(--n));color:#fff;border-color:transparent}.qbox .btn.p:hover{color:#fff;filter:brightness(1.1)}
.qbox .ql-bar{gap:.6rem}.qbox .ql-bar select{min-width:9.5rem}.qbox .ql-bar input{min-width:12rem}
.qbox .ql-v{background:#fff;border-color:#e2dcc6;box-shadow:0 1px 2px #0a2a220d}.qbox .ql-tag{background:#e7efe6;color:var(--n3)}
@media(max-width:560px){.qbox .ql-bar>*{flex:1 1 100%}}

/* collapsible groups in the side panel */
.it.gh .tx{display:none;flex:1;align-items:center;justify-content:space-between;gap:.4rem}body.open .it.gh .tx{display:flex}
.chv{width:.5rem;height:.5rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s;margin-inline-end:.3rem;flex:none}.gh.open .chv{transform:rotate(-135deg)}
.sub{padding:.05rem 0 .3rem}body:not(.open) .sub{display:none}.sub[hidden]{display:none}
.it.c{min-height:40px;margin-inline-start:.45rem;width:calc(100% - .45rem)}.it.c .ic{width:30px;height:30px;font-size:1rem}
.it.gh .tx>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.it.gh.hon .tx>span{color:var(--g2);font-weight:700}