@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@400;500;600;700;800&display=swap');:root{--bg:#f8f7f2;--surface:#fff;--text:#203b30;--muted:#728278;--green:#215b45;--line:#e5e9df;--gold:#b69b62;--soft:#edf2e9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Tajawal,system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.6;cursor:default}.shell{max-width:1100px;margin:auto;padding:0 22px}.top{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--green);font-size:25px;font-weight:800;display:flex;align-items:center;gap:10px}.brand small{font-size:10px;letter-spacing:2px;display:block;font-weight:500}.brandmark{border:1px solid var(--gold);border-radius:50%;height:41px;width:41px;display:grid;place-items:center;color:var(--gold)}.actions{display:flex;gap:8px}.actions button,.back{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:11px 15px}.hero{text-align:center;padding:72px 0 82px;position:relative}.ornament{font-family:Amiri,serif;color:var(--gold);font-size:32px}.eyebrow,.overline{font-size:13px;letter-spacing:1px;color:var(--gold);font-weight:700}.hero h1{font-family:Amiri,serif;font-size:clamp(45px,7vw,79px);line-height:1.45;margin:12px 0;color:var(--green);font-weight:400}.hero h1 em{font-style:normal;color:var(--gold)}.verse-ref{font-size:13px;color:var(--muted);margin-top:0}.intro{color:var(--muted);font-size:17px;max-width:480px;line-height:1.9;margin:26px auto}.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.primary,.secondary{padding:15px 26px;border-radius:12px;font-weight:700;border:1px solid var(--green)}.primary{background:var(--green);color:white}.secondary{background:transparent;color:var(--green)}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:25px}.sectionhead h2,.tasbeeh h2,.impact h2{font-size:29px;margin:8px 0;color:var(--green)}#todayLabel{color:var(--muted);font-size:13px}.categories{padding:15px 0 85px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cat{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:27px 22px;text-align:right;min-height:178px;transition:transform .15s,box-shadow .15s;color:var(--text)}.cat:hover{transform:translateY(-3px);box-shadow:0 12px 28px #153b2510}.cat-icon{width:47px;height:47px;border-radius:13px;background:var(--soft);color:var(--green);display:grid;place-items:center;font-size:25px;margin-bottom:19px}.cat strong{display:block;font-size:19px}.cat small{display:block;color:var(--muted);font-size:13px;margin-top:8px}.reading{padding:20px 0 65px}.reading-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:24px}.progress-track{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:22px}.progress-track div{height:100%;width:0;background:var(--green);transition:width .2s}.dhikr{background:var(--surface);border:1px solid var(--line);border-radius:20px;margin:16px 0;padding:26px}.dhikr.done{border-color:#8aaf93}.dhikr-top{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.dhikr-text{font-family:Amiri,serif;font-size:clamp(24px,4vw,30px);line-height:2.05;text-align:center;padding:25px 4px;white-space:pre-line}.dhikr-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.source{color:var(--muted);font-size:12px;max-width:60%}.countbtn{border:0;background:var(--green);color:white;border-radius:11px;padding:12px 18px;min-width:150px}.tasbeeh{text-align:center;background:var(--soft);padding:55px 15px;border-radius:28px;margin-bottom:65px}.tasbeeh p{font-family:Amiri,serif;font-size:28px}.tasbeeh-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:25px auto 15px;width:180px;height:180px;border-radius:50%;background:var(--green);color:white;border:9px solid #d6e3d6;box-shadow:0 10px 25px #214e3229}.tasbeeh-circle strong{font-size:51px}.tasbeeh-circle span{font-size:13px}.reset{background:none;border:0;color:var(--green);padding:12px}.impact{text-align:center;border:1px solid var(--line);border-radius:25px;background:var(--surface);padding:48px 24px;margin-bottom:70px}.impact>p{max-width:560px;margin:16px auto 26px;color:var(--muted);line-height:1.9}footer{border-top:1px solid var(--line);padding:25px 0 35px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:12px;padding:12px 20px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}#toast.show{opacity:1}body.dark{--bg:#101d19;--surface:#1a2b24;--text:#e5ede5;--muted:#a5b6a9;--green:#91c4a3;--line:#30453b;--gold:#cbb27c;--soft:#263c31}body.dark .primary,body.dark .countbtn,body.dark .tasbeeh-circle{background:#356a51;color:white}body.dark .secondary{color:var(--green)}@media(max-width:680px){.shell{padding:0 17px}.top{height:72px}.hero{padding:48px 0 60px}.grid{grid-template-columns:repeat(2,1fr);gap:11px}.cat{min-height:153px;padding:19px 15px}.cat strong{font-size:17px}.cat-icon{margin-bottom:13px}.sectionhead h2,.tasbeeh h2,.impact h2{font-size:25px}.dhikr{padding:18px}.source{max-width:100%}.dhikr-bottom{align-items:stretch}.countbtn{flex:1}.impact{padding:34px 17px}footer{flex-direction:column;text-align:center;gap:7px}}