@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700;800&display=swap');
:root{--bg:#f3f7f4;--card:#fff;--ink:#123b2f;--muted:#70827a;--p:#0b4635;--p2:#17644e;--line:#dce8e1;--shadow:0 10px 28px #0b46350e}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Cairo,Arial,sans-serif}body.dark{--bg:#08130f;--card:#10221b;--ink:#eff8f3;--muted:#9eb3a9;--line:#254035;--shadow:none}
header{height:70px;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:20}.brand{font-weight:800;font-size:23px}.brand small{font-size:10px;opacity:.7}header button{width:44px;height:44px;border:0;border-radius:13px;background:#ffffff18;color:#fff;font-size:22px}
.drawer{position:fixed;top:70px;right:0;width:245px;bottom:0;background:var(--card);z-index:30;transform:translateX(100%);transition:.2s;box-shadow:-10px 0 30px #0002;padding:12px}.drawer.open{transform:none}.drawer button{width:100%;padding:14px;text-align:right;background:transparent;color:var(--ink);border-bottom:1px solid var(--line);border-radius:10px}
main{max-width:860px;margin:auto;padding:16px 14px 95px}.page{display:none}.page.active{display:block}.hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:27px;padding:24px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.hero h1{font-size:31px;margin:5px 0}.hero>span{font:70px Amiri;opacity:.3}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid button{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:19px;padding:17px;text-align:right;box-shadow:var(--shadow)}.grid b{font-size:27px;display:block}.grid strong{display:block;margin-top:5px;font-size:17px}.grid small{color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-top:12px;box-shadow:var(--shadow)}.muted{color:var(--muted);font-size:12px}.primary{background:var(--p);color:#fff;padding:10px 16px;border-radius:11px}.head{display:flex;align-items:center;gap:10px;margin:8px 0 14px}.head h2{flex:1;margin:0}.head button{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 14px}.qtoolbar{display:grid;grid-template-columns:1fr 1fr auto auto;gap:7px}.qtoolbar input,.qtoolbar select,#hsearch,.hadith-tools button{min-width:0;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:11px}.qtoolbar button{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px}.mushaf{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;margin-top:10px;box-shadow:var(--shadow)}.qtitle{text-align:center;font:700 30px Amiri}.qmeta{text-align:center;color:var(--muted);font-size:12px;margin:4px}.qtext{font:31px/2.2 Amiri;text-align:justify;margin-top:18px}.ayah{display:inline}.num{display:inline-flex;width:30px;height:30px;border:1px solid var(--p);border-radius:50%;align-items:center;justify-content:center;font:13px Cairo;color:var(--p);margin:0 3px}.qnav{display:flex;gap:7px;margin-top:18px}.qnav button{flex:1;padding:11px;border:0;border-radius:11px;background:var(--p);color:#fff}.switch,.chips,.targets{display:flex;gap:7px;overflow:auto;margin-bottom:10px}.switch button,.chips button,.targets button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;padding:10px 13px;white-space:nowrap}.switch button.active,.chips button.active{background:var(--p);color:#fff}.hadith-tools{display:flex;gap:7px;margin:9px 0}.hadith{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:10px 0}.hadith h3{margin:0 0 7px}.hadith p{font:23px/1.9 Amiri;margin:0}.hadith small{color:var(--muted)}#azlist article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:9px 0}.aztext{font:24px/1.9 Amiri}.repeat{color:var(--muted);margin-top:8px}.tasbeeh{background:var(--p);color:#fff;border-radius:28px;text-align:center;padding:20px}.tasbeeh select{width:100%;padding:13px;border:0;border-radius:13px}.tasbeeh #counter{font-size:82px;margin:28px 0 4px}.tasbeeh #chosen{font:27px Amiri;margin-bottom:15px}.tasbeeh #bead{width:min(75vw,310px);height:min(75vw,310px);border-radius:50%;border:0;background:#f8f5ed;color:#153e32;font-weight:800;box-shadow:inset 0 0 0 12px #0b463510,0 15px 30px #0003}.targets{justify-content:center;margin-top:16px}.targets button{background:#fff;color:#173d31}.settings-list{display:grid;gap:15px}.settings-list input{width:100%}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:25}.bottom-nav button{background:transparent;color:var(--muted);font-size:20px}.bottom-nav small{display:block;font-size:9px}.bottom-nav button.active{color:var(--p);font-weight:800}
@media(min-width:700px){.grid{grid-template-columns:repeat(4,1fr)}.qtext{font-size:34px}}
@media(max-width:520px){.qtoolbar{grid-template-columns:1fr auto auto}.qtoolbar select{grid-column:1/-1;grid-row:1}.qtoolbar input{grid-column:1/-1}.qtext{font-size:30px}}