@font-face{font-family:Tajawal;src:url(../fonts/Tajawal-Regular.ttf);font-weight:400}
@font-face{font-family:Tajawal;src:url(../fonts/Tajawal-Medium.ttf);font-weight:500}
@font-face{font-family:Tajawal;src:url(../fonts/Tajawal-Bold.ttf);font-weight:700}
@font-face{font-family:Amiri;src:url(../fonts/Amiri-Regular.ttf);font-weight:400}
@font-face{font-family:Amiri;src:url(../fonts/Amiri-Bold.ttf);font-weight:700}
@font-face{font-family:AmiriQuran;src:url(../fonts/AmiriQuran-Regular.ttf)}
@font-face{font-family:Cairo;src:url(../fonts/Cairo.ttf);font-weight:200 900}
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--kb:0px;--bg:#FBF7F3;--surf:#FFFDFB;--surf2:#F1E7E4;--on:#2B1C1F;--on2:#8C7B7E;--pri:#7B2336;--pri2:#5A1626;--onpri:#fff;--pc:#F0DEE1;--line:#EADDD9;--gold:#B08D3C;--ok:#3E7D4F;--scrim:rgba(20,8,10,.5);
--hero:linear-gradient(135deg,#000 0%,#1a0a0e 45%,#7B2336 130%);--pat:none;--ui:Tajawal,Cairo,system-ui,sans-serif;--q:AmiriQuran,Amiri,serif;--a:Amiri,AmiriQuran,serif;--r:28px;--nav:72px;--em:cubic-bezier(.05,.7,.1,1);--e:cubic-bezier(.2,0,0,1);--ee:cubic-bezier(.3,0,0,1)}
:root[data-eff=dark]{--bg:#150D0F;--surf:#20141A;--surf2:#2B1C22;--on:#F4E9EA;--on2:#B09DA1;--pri:#E58AA0;--pri2:#C96A82;--onpri:#3A0C18;--pc:#4A2230;--line:#38262D;--gold:#D9B766;--scrim:rgba(0,0,0,.65);--hero:linear-gradient(135deg,#000,#1a0a0e 45%,#6B1D30 130%)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--on);font-family:var(--ui);overflow:hidden;transition:background-color .35s var(--e),color .35s var(--e)}
body{background-image:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;position:relative;overflow:hidden;touch-action:manipulation}
input,textarea{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:14px 16px;width:100%;outline:none;transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--pri)}
svg.i{width:24px;height:24px;fill:currentColor;flex:none}
.app{position:fixed;inset:0;max-width:640px;margin:0 auto;overflow:hidden}
.page{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--sat) + 12px) 16px calc(var(--nav) + var(--sab) + 24px);visibility:hidden;opacity:0}
.page.screen{padding-bottom:calc(var(--sab) + 28px);background:var(--bg);background-image:var(--pat);z-index:5}
.page.on{visibility:visible;opacity:1}
.page.in-f{animation:inF .4s var(--em) backwards}.page.in-b{animation:inB .4s var(--em) backwards}.page.out{visibility:visible;animation:out .24s var(--e) both;pointer-events:none}
.page.push{animation:push .46s var(--em) backwards}.page.pop{visibility:visible;animation:pop .3s var(--e) both;pointer-events:none}
@keyframes inF{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes inB{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes out{to{opacity:0}}
@keyframes push{from{opacity:0;transform:translateX(-72px)}to{opacity:1;transform:none}}
@keyframes pop{to{opacity:0;transform:translateX(-72px)}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.page.on>*{animation:up .5s var(--em) both}.page.settled>*{animation:none!important}.page.on>*:nth-child(2){animation-delay:.04s}.page.on>*:nth-child(3){animation-delay:.08s}.page.on>*:nth-child(4){animation-delay:.12s}.page.on>*:nth-child(n+5){animation-delay:.16s}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);animation:rip .55s var(--e) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.top{display:flex;align-items:center;gap:10px;min-height:60px;margin-bottom:10px}
.top h1{flex:1;font-size:22px;font-weight:700;text-align:center}.top.start h1{text-align:start}
.top .sp{width:48px}
.ib{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surf);border:1px solid var(--line);color:var(--on);flex:none}
.ib.p{color:var(--pri)}.ib:active{transform:scale(.92)}.ib{transition:transform .15s}
h2{font-size:18px;font-weight:700;margin:22px 4px 12px;display:flex;justify-content:space-between;align-items:center}
h2 small{font-size:14px;font-weight:500;color:var(--on2)}h2 a,h2 button.l{color:var(--pri);font-size:14px;font-weight:500;padding:8px;border-radius:14px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:block;width:100%;text-align:start;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:transform .15s,background-color .3s}
button.card:active{transform:scale(.985)}
.hero{border-radius:var(--r);padding:20px;color:#fff;background:var(--hero);position:relative;overflow:hidden;width:100%;text-align:start;display:block}
.hero .mos{position:absolute;left:-6px;bottom:-4px;width:140px;opacity:.5;color:var(--pri)}
.row{display:flex;align-items:center;gap:14px}.row>.g{flex:1;min-width:0}
.sub{color:var(--on2);font-size:13px}.hero .sub{color:inherit;opacity:.72}
.big{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.bar{height:8px;border-radius:4px;background:var(--surf2);overflow:hidden;margin-top:10px}.hero .bar{background:rgba(255,255,255,.18)}
.bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:4px;transition:width .6s var(--ee)}
.ring{position:relative;flex:none}.ring svg{transform:rotate(-90deg)}.ring circle{fill:none;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ee)}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;font-size:13px;font-weight:500;text-align:center}
.qa .ic,.ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--pc);color:var(--pri);flex:none}
.list{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:var(--surf);border:1px solid var(--line);width:100%;text-align:start;transition:transform .15s}
.item:active{transform:scale(.985)}.item .g{flex:1;min-width:0}.item b{display:block;font-weight:600}
.chev{color:var(--on2)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{padding:0 16px;min-height:40px;border-radius:14px;border:1px solid var(--line);background:var(--surf);white-space:nowrap;font-size:14px;font-weight:500;flex:none;transition:all .2s}
.chip.on{background:var(--pc);border-color:var(--pri);color:var(--pri)}
.chip.o{border-color:var(--on2);color:var(--pri);background:none}
.btn{min-height:52px;border-radius:26px;padding:0 24px;background:var(--pri);color:var(--onpri);font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-shadow:0 6px 16px -6px var(--pri);transition:transform .15s}
.btn:active{transform:scale(.97)}.btn.o{background:none;color:var(--pri);border:1.5px solid var(--pri);box-shadow:none}.btn.d{background:#A8332B;color:#fff}.btn.g{background:var(--surf);color:var(--on);border:1px solid var(--line);box-shadow:none}
.sw{width:56px;height:32px;border-radius:16px;background:var(--surf2);border:2px solid var(--on2);position:relative;flex:none;transition:all .25s var(--e)}
.sw::after{content:"";position:absolute;top:5px;inset-inline-start:6px;width:16px;height:16px;border-radius:50%;background:var(--on2);transition:all .25s var(--e)}
.sw.on{background:var(--pri);border-color:var(--pri)}.sw.on::after{inset-inline-start:28px;width:22px;height:22px;top:2px;background:var(--onpri)}
.tip{color:var(--on2);text-align:center;padding:30px 10px;font-size:14px}
nav.nav{position:fixed;bottom:0;inset-inline:0;max-width:640px;margin:0 auto;height:calc(var(--nav) + var(--sab));padding-bottom:var(--sab);background:var(--surf);border-top:1px solid var(--line);display:flex;z-index:20;transition:transform .3s var(--e)}
nav.nav.hide{transform:translateY(110%)}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500;color:var(--on2)}
nav button span.pl{width:56px;height:30px;border-radius:15px;display:grid;place-items:center;transition:background .3s}
nav button.on{color:var(--pri);font-weight:700}nav button.on span.pl{background:var(--pc)}
#scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity .25s;z-index:40}#scrim.on{opacity:1;visibility:visible}
.sheet{position:fixed;inset-inline:0;bottom:var(--kb);max-width:640px;margin:0 auto;background:var(--surf);border-radius:32px 32px 0 0;padding:12px 20px calc(var(--sab) + 24px);z-index:50;transform:translateY(105%);transition:transform .38s var(--ee);max-height:88%;overflow-y:auto}
.sheet.on{transform:none}.sheet::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 16px}
.sheet h3{font-size:19px;margin-bottom:14px}
.dlg{position:fixed;inset:0;display:grid;place-items:center;z-index:60;pointer-events:none;visibility:hidden}.dlg.on{visibility:visible;pointer-events:auto}
.dlg>div{background:var(--surf);border-radius:28px;padding:24px;width:min(88%,380px);transform:scale(.9);opacity:0;transition:all .3s var(--ee);display:grid;gap:14px}.dlg.on>div{transform:none;opacity:1}
.dlg h3{font-size:20px}.dlg .acts{display:flex;gap:6px;justify-content:flex-start}.dlg .acts button{padding:10px 16px;border-radius:16px;color:var(--pri);font-weight:700}
.menu{position:fixed;background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:55;min-width:210px;transform-origin:top left;animation:mn .22s var(--ee)}
@keyframes mn{from{opacity:0;transform:scale(.85)}}
.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:14px;text-align:start}
#sn{position:fixed;bottom:calc(var(--nav) + 20px + var(--sab) + var(--kb));inset-inline:20px;margin:0 auto;max-width:420px;background:var(--on);color:var(--bg);padding:14px 18px;border-radius:18px;z-index:70;opacity:0;transform:translateY(20px);transition:all .3s var(--ee);pointer-events:none;text-align:center;font-size:14px}#sn.on{opacity:1;transform:none}
/* quran */
.mushaf{font-family:var(--q);line-height:2.35;text-align:justify;text-align-last:center;font-size:var(--fs,26px);padding:6px 4px}
.an{color:var(--gold);font-size:.7em;padding:0 4px}
/* azkar card */
.zc{display:grid;gap:14px}.zt{font-family:var(--a);font-size:var(--zfs,24px);line-height:2.1;text-align:justify}
.zf{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.cnt{width:56px;height:56px;border-radius:50%;background:var(--pc);border:2px solid var(--pri);color:var(--pri);font-weight:700;font-size:18px;display:grid;place-items:center;transition:all .2s}
.cnt.done{background:var(--pri);color:var(--onpri);animation:pop2 .4s var(--ee)}.zc.done{opacity:.55}
@keyframes pop2{40%{transform:scale(1.2)}}
.src{color:var(--gold);font-size:13px}
/* tasbih */
.tz{position:relative;width:min(78vw,320px);aspect-ratio:1;margin:18px auto;display:grid;place-items:center;border-radius:50%;touch-action:pan-y;user-select:none}
.tz svg.rg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tz circle{fill:none;stroke-linecap:round}.tz .pr{transition:stroke-dashoffset .25s var(--ee)}
.tz .in{width:84%;aspect-ratio:1;border-radius:50%;background:var(--surf);display:grid;place-items:center;align-content:center;gap:6px;box-shadow:0 8px 40px -12px var(--pri);transition:transform .12s}
.tz.press .in{transform:scale(.95)}.tz .n{font-size:84px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tz .n.bump{animation:bump .25s var(--ee)}@keyframes bump{50%{transform:scale(1.12)}}
.statbox{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:14px}.statbox>div+div{border-inline-start:1px solid var(--line)}.statbox b{display:block;font-size:24px}
/* week strip */
.wk{display:flex;justify-content:space-between;background:var(--surf);border-radius:24px;padding:14px 10px}
.wk div{display:grid;gap:6px;justify-items:center;font-size:13px;color:var(--on2)}.wk i{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:#fff}.wk i.d{background:var(--gold);border-color:var(--gold)}
.chk{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent;flex:none;transition:all .25s var(--ee)}.chk.on{background:var(--pri);border-color:var(--pri);color:var(--onpri);animation:pop2 .4s var(--ee)}
.item.next{border:1.5px solid var(--gold)}.lbl{color:var(--gold);font-weight:700;font-size:14px;display:flex;gap:6px;align-items:center}
.pts{color:var(--on2);font-size:13px;direction:ltr}
.acc{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;display:grid;place-items:center;font-size:40px;font-weight:700;flex:none}
.gb{display:grid;place-items:center;min-height:100%;align-content:center;gap:18px;text-align:center}
.gb .lg{width:110px;height:110px;border-radius:32px;box-shadow:0 14px 34px -12px var(--pri)}
.gbtn{background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:28px;min-height:54px;display:flex;gap:12px;align-items:center;justify-content:center;width:100%;font-weight:700}
.sep{display:flex;align-items:center;gap:12px;color:var(--on2);font-size:13px;width:100%}.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.err{color:#A8332B;font-size:13px}.ok{color:var(--ok)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#pbar{position:fixed;inset-inline:12px;bottom:calc(var(--nav) + 10px + var(--sab));max-width:616px;margin:0 auto;background:var(--surf);border:1px solid var(--line);border-radius:26px;padding:8px 10px;z-index:19;box-shadow:0 10px 30px rgba(0,0,0,.16);transform:translateY(160%);transition:transform .35s var(--ee);display:flex}
#pbar.on{transform:none}
.hero button.l,.l{background:none}
#pbar:not(.on){visibility:hidden}
.hero.cl{background:var(--pc);color:var(--on)}.hero.cl .sub{color:var(--on2);opacity:1}.hero.cl .wk{background:var(--surf)!important;color:var(--on2)!important}

/* =====================================================================
   v3 — أخضر نشِط بزخرفة نجمية، ملء الشاشة، Material 3 بمقاس أصغر
   ===================================================================== */
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 80 80'%3E%3Cpath d='M40 6l6.5 13.5 14.8-4.8-4.8 14.8L70 36l-13.5 6.5 4.8 14.8-14.8-4.8L40 66l-6.5-13.5-14.8 4.8 4.8-14.8L10 36l13.5-6.5-4.8-14.8 14.8 4.8z' fill='none' stroke='%23B3923F' stroke-opacity='.13' stroke-width='1.4'/%3E%3Ccircle cx='40' cy='36' r='3' fill='none' stroke='%23B3923F' stroke-opacity='.1' stroke-width='1.4'/%3E%3C/svg%3E");
--tile:56px;--pat:var(--star)}
:root[data-pal=green]{--bg:#F6F4EC;--surf:#FFFFFF;--surf2:#ECEBDD;--on:#17261E;--on2:#66756B;--pri:#2F6B52;--pri2:#1E4D3B;--onpri:#fff;--pc:#E3EEDC;--line:#E5E1CE;--gold:#B3923F;--ok:#2F7D4F;
--hero:linear-gradient(135deg,#17453A 0%,#2A6E55 45%,#1C5442 75%,#17453A 100%)}
:root[data-eff=dark][data-pal=green]{--bg:#0E1612;--surf:#16211B;--surf2:#202D26;--on:#E8F0E6;--on2:#9BAD9F;--pri:#8FD0A8;--pri2:#6FB98B;--onpri:#08301C;--pc:#223A2E;--line:#2A3A31;--gold:#D6B764;--scrim:rgba(0,0,0,.65);
--hero:linear-gradient(135deg,#0F3328 0%,#1F5A44 50%,#133E30 100%)}
:root[data-pal=burgundy]{--pat:none}
html{font-size:15px}
body{font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,html{background:var(--bg)}

/* خلفية زخرفية متحرّكة بلطف */
.app::before{content:"";position:absolute;inset:-80px;background:var(--pat);animation:drift 70s linear infinite;pointer-events:none;z-index:0;will-change:transform}
.page{z-index:1}.page.screen{background-image:var(--pat);background-color:var(--bg);z-index:5}
@keyframes drift{to{transform:translate(var(--tile),var(--tile))}}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes floaty{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-26px,22px) scale(1.18)}}

/* hero حي: تدرّج متحرك + زخرفة + توهج */
.hero{background-size:260% 260%;animation:sheen 16s ease-in-out infinite alternate;box-shadow:0 10px 26px -14px var(--pri2);padding:16px}
.hero::before{content:"";position:absolute;inset:-80px;background:var(--star);opacity:.9;animation:drift 55s linear infinite;pointer-events:none;mix-blend-mode:screen}
.hero::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(214,183,100,.34),transparent 66%);top:-70px;inset-inline-end:-50px;animation:floaty 9s ease-in-out infinite alternate;pointer-events:none}
.hero>*{position:relative;z-index:1}.hero .mos{z-index:0}
.hero.cl{animation:none;background:var(--pc)}.hero.cl::before,.hero.cl::after{display:none}
.page.on>.hero{animation:up .45s var(--ee) both,sheen 16s ease-in-out .45s infinite alternate}

/* ---------- مقاس أصغر ومتّسق (Material 3) ---------- */
:root{--r:20px;--nav:62px}
.page{padding:calc(var(--sat) + 6px) 14px calc(var(--nav) + var(--sab) + 20px)}
.top{min-height:52px;margin-bottom:6px;gap:8px}
.top h1{font-size:19px;font-weight:700;letter-spacing:0}
.top .sp{width:42px}
.ib{width:42px;height:42px;background:var(--surf);border-color:var(--line)}
.ib svg.i{width:22px;height:22px}
svg.i{width:22px;height:22px}
h2{font-size:15px;margin:18px 4px 10px}
h2 small{font-size:12px}h2 a,h2 button.l{font-size:13px}
.card{padding:14px;border-radius:var(--r)}
.hero{border-radius:var(--r)}
.sub{font-size:12px;line-height:1.55}
.big{font-size:28px;font-variant-numeric:tabular-nums}
.pill{padding:10px 14px;border-radius:16px}
.item{padding:12px 14px;border-radius:18px;gap:12px}
.item b{font-size:14px}
.ic,.qa .ic{width:40px;height:40px;border-radius:14px}
.ic svg.i{width:22px;height:22px}
.qa{font-size:12px;padding:12px 4px;gap:6px}
.chip{min-height:36px;padding:0 14px;font-size:13px;border-radius:12px}
.btn{min-height:46px;border-radius:23px;font-size:14px;padding:0 20px}
.sw{width:50px;height:28px;border-radius:14px}
.sw::after{top:4px;inset-inline-start:5px;width:14px;height:14px}.sw.on::after{inset-inline-start:25px;width:20px;height:20px;top:2px}
.cnt{width:48px;height:48px;font-size:17px}
.pc{padding:13px;border-radius:20px;min-height:104px}.pc .tm{font-size:15px}.pc .tg{font-size:11px}
.sheet{border-radius:28px 28px 0 0;padding:10px 18px calc(var(--sab) + 20px)}.sheet h3{font-size:17px}
.dlg h3{font-size:18px}.dlg>div{border-radius:24px;padding:20px}
.menu{border-radius:16px}.menu button{padding:12px}
.statbox b{font-size:20px}
.acc{width:76px;height:76px;font-size:32px}
.zt{font-size:var(--zfs,28px)}
.mushaf{line-height:2.25}
.hero .big,.pc .tm span,.pts,.cnt,.tz .n,.statbox b,.tmv{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.tmv{display:inline-block}

/* شريط التنقل — Material 3 على كامل العرض وخلف شريط النظام */
nav.nav{height:calc(var(--nav) + var(--sab));padding-bottom:var(--sab);background:color-mix(in srgb,var(--surf) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
nav button{font-size:11px;gap:3px;font-weight:500}
nav button span.pl{width:52px;height:28px;border-radius:14px;transition:background .3s var(--ee),transform .3s var(--ee)}
nav button svg.i{width:22px;height:22px}
nav button:active span.pl{transform:scale(.9)}
nav button.on span.pl{animation:pill .38s var(--ee)}
@keyframes pill{from{transform:scaleX(.55);opacity:.4}to{transform:none;opacity:1}}
#pbar{bottom:calc(var(--nav) + 8px + var(--sab));border-radius:22px}
.page.screen{padding-bottom:calc(var(--sab) + 24px)}

/* تفاعل أنشط عند اللمس */
.card:active,.item:active,.pc:active{background:color-mix(in srgb,var(--pc) 55%,var(--surf))}
.chip:active{transform:scale(.95)}.btn:active{transform:scale(.97);filter:brightness(.95)}
.item.next{border-color:var(--gold)}
button.card,.item,.chip,.btn,.ib,.cnt{transition:transform .14s var(--e),background-color .25s,border-color .25s,color .25s,filter .2s}

/* ---------- التسبيح (مثل التصميم المرجعي) ---------- */
.tpg{display:flex;flex-direction:column;min-height:100%;gap:10px}
.tday{border:1.5px dashed var(--gold);color:var(--gold);border-radius:14px;padding:5px 12px;font-size:12px;font-weight:500;white-space:nowrap}
.tdh{border:1.5px dashed var(--gold);border-radius:20px;padding:18px 12px;text-align:center;font-family:var(--a);font-weight:700;font-size:28px;line-height:1.9;background:color-mix(in srgb,var(--surf) 55%,transparent);color:var(--on)}
.tarea{flex:1;display:grid;place-items:center;align-content:center;gap:12px;min-height:300px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tz{width:min(70vw,276px);margin:0}
.tz circle{stroke-linecap:round}
.tz .in{width:82%;background:var(--pc);border:1.5px solid var(--gold);background-image:var(--star);box-shadow:0 10px 36px -16px var(--pri),inset 0 0 0 5px color-mix(in srgb,var(--pc) 70%,transparent);transition:transform .12s var(--ee)}
.tz .n{font-size:68px;font-weight:700;color:var(--pri2);line-height:1}
:root[data-eff=dark] .tz .n{color:var(--pri)}
.tz .of{font-size:13px;color:var(--on2);direction:rtl}
.tz.press .in{transform:scale(.94)}
.tz.pulse .rg circle.pr{animation:glow .3s var(--ee)}
@keyframes glow{50%{stroke-width:5.2}}
.tz .ripple{position:absolute;inset:9%;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.tz.pulse .ripple{animation:ripo .45s var(--e)}
@keyframes ripo{from{opacity:.55;transform:scale(.9)}to{opacity:0;transform:scale(1.18)}}
.tleft{color:var(--on2);font-size:13px}
.tacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tacts button{min-height:46px;border-radius:16px;background:var(--surf);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px}
.tacts button svg{color:var(--gold)}
.ttg{display:flex;background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:6px 14px}
.ttg>div{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;font-size:14px;font-weight:500}
.ttg>div+div{border-inline-start:1px solid var(--line);padding-inline-start:14px;margin-inline-start:14px}
.sw.g2.on{background:#78AF68;border-color:#78AF68}
.sw.g2.on::after{background:#fff}

/* ---------- الأذكار: بطاقة تفاعلية ---------- */
.zc.tap{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .12s var(--ee),opacity .3s,background-color .3s;position:relative;overflow:hidden}
.zc.tap:active{transform:scale(.99)}
.zc.pulse{animation:zp .28s var(--ee)}@keyframes zp{50%{background:var(--pc)}}
.zc.done{opacity:.6}
.zc .zt{text-align:center;text-align-last:center;text-wrap:pretty}
.zc .src{font-size:12px;text-align:start}
.zf{gap:4px}
.zf .ib{width:38px;height:38px;border:0;background:none;color:var(--gold)}
.zf .ib.mut{color:var(--on2)}
.zf .cnt{width:44px;height:44px;font-size:16px;background:var(--pc);border:1.5px solid var(--pri);color:var(--pri2);margin-inline-start:2px}
:root[data-eff=dark] .zf .cnt{color:var(--pri)}
.zf .cnt.done{background:var(--pri);color:var(--onpri)}
.zrip{position:absolute;border-radius:50%;background:var(--pri);opacity:.16;transform:scale(0);animation:rip .55s var(--e) forwards;pointer-events:none}
.fsw{display:grid;gap:16px}
.fsp{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:16px 10px;text-align:center;font-family:var(--a);line-height:2;min-height:78px;display:grid;place-items:center;overflow:hidden}
.fsr{display:flex;align-items:center;gap:12px;direction:ltr}
.fsr span{font-family:var(--a);color:var(--on2)}
input[type=range].rg2{-webkit-appearance:none;appearance:none;flex:1;height:30px;background:none;border:0;padding:0;border-radius:0}
input[type=range].rg2::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--surf2);background-image:radial-gradient(circle,var(--on2) 1.6px,transparent 2px);background-size:calc(100%/8) 6px;background-position:left center}
input[type=range].rg2::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--gold);margin-top:-10px;border:3px solid var(--surf);box-shadow:0 2px 8px rgba(0,0,0,.25)}
input[type=range].rg2:active::-webkit-slider-thumb{transform:scale(1.15)}

/* =====================================================================
   v3.0 — التذكيرات · الصيام والتقويم الهجري · المزيد · حركات Flutter
   ===================================================================== */
:root{--c-sunna:#BFDCD3;--c-bid:#EBDFB8;--c-eid:#F2CBC4;--c-custom:#CAD8EE;--gold-bar:#B3923F}
:root[data-eff=dark]{--c-sunna:#2B5246;--c-bid:#4B4226;--c-eid:#5B2E2B;--c-custom:#2E4062}
/* ripple بلمعة (ink sparkle) */
.rip.sp{background:radial-gradient(circle,currentColor 0,transparent 70%);opacity:.2;animation:rip .6s cubic-bezier(.2,0,0,1) forwards}
.rip.sp::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.8;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:spk .6s steps(4) forwards}
@keyframes spk{from{transform:rotate(0)}to{transform:rotate(40deg);opacity:0}}
/* مفتاح Material 3: الإبهام يكبر عند الضغط */
.sw::after{transition:inset-inline-start .3s var(--em),width .2s var(--e),height .2s var(--e),top .2s var(--e),background .25s}
.sw:active::after{width:24px;height:24px;top:1px}
.sw.on:active::after{top:1px}
/* عناوين الأقسام بشريط ذهبي */
.secH{display:flex;align-items:center;gap:10px;margin:24px 4px 12px}.secH i{width:5px;align-self:stretch;min-height:22px;border-radius:3px;background:var(--gold-bar);flex:none}
.secH b{font-size:17px;font-weight:700;display:block}.secH .g{flex:1}.secH>div{flex:1}
.fsub{margin:-4px 4px 12px}
/* بطاقة hero داكنة (التذكير القادم / الصيام القادم) */
.rhero{position:relative;overflow:hidden;border-radius:28px;padding:18px;color:#F3EFE0;background:linear-gradient(135deg,#142F2E 0%,#1B4A43 55%,#143A36 100%);box-shadow:0 14px 28px -18px #0b2a26;display:grid;gap:18px}
.rhero::before{content:"";position:absolute;inset:-80px;background:var(--star);opacity:.9;animation:drift 60s linear infinite;pointer-events:none}
.rhero>*{position:relative}
.rh-t{display:flex;align-items:center;gap:14px}.rh-t .g{flex:1;min-width:0}
.rh-ic{width:56px;height:56px;border-radius:50%;border:1.5px solid #B3923F;display:grid;place-items:center;color:#D9B766;background:rgba(179,146,63,.14);flex:none}
.rh-ic svg{width:26px;height:26px}.bellr svg{transform-origin:50% 8%;animation:ring 3.2s var(--e) 1s infinite}
@keyframes ring{0%,60%,100%{transform:none}66%{transform:rotate(14deg)}72%{transform:rotate(-12deg)}78%{transform:rotate(8deg)}84%{transform:rotate(-5deg)}90%{transform:rotate(2deg)}}
.rh-k{font-size:13px;opacity:.7}.rh-n{font-size:22px;font-weight:700;line-height:1.35;margin:2px 0}.rh-w{color:#D9B766;font-size:14px;font-weight:500}
.rh-b{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pillb{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:20px;background:rgba(255,255,255,.1);color:#F3EFE0;font-size:14px;font-weight:500;transition:transform .15s,background .2s}
.pillb:active{transform:scale(.95);background:rgba(255,255,255,.18)}.pillb svg{width:20px;height:20px}
.pillb.o{background:none;border:1.5px solid rgba(179,146,63,.75);color:#D9B766}
.card.warn{border-color:var(--gold);margin:12px 0 0}
/* بطاقات التذكير */
.rl{display:grid;gap:10px}
.rc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:26px;background:var(--surf);border:1.5px solid var(--line);cursor:pointer;transition:transform .15s var(--e),background-color .25s,opacity .25s;position:relative;overflow:hidden}
.rc:active{transform:scale(.985);background:color-mix(in srgb,var(--pc) 55%,var(--surf))}
.rc .g{flex:1;min-width:0;display:grid;gap:1px}.rc b{font-size:16px;font-weight:700}
.ric{width:50px;height:50px;border-radius:50%;background:var(--pc);color:var(--pri2);display:grid;place-items:center;flex:none;transition:opacity .25s,transform .3s var(--em)}
.ric.big{width:56px;height:56px;margin:0 auto 6px}.ric svg{width:24px;height:24px}
:root[data-eff=dark] .ric{color:var(--pri)}
.rc.off .ric,.rc.off .rt{opacity:.55}
.rt{display:flex;align-items:baseline;gap:4px;direction:rtl;flex:none;transition:opacity .25s}.rt b{font-size:22px;font-weight:700;color:var(--on)}.rt small{font-size:12px;color:var(--on2)}
.rempty{display:grid;justify-items:center;gap:4px;width:100%;padding:22px 16px;border-radius:26px;background:var(--surf);border:1.5px solid var(--line);text-align:center;transition:transform .15s}
.rempty:active{transform:scale(.985)}.rempty b{font-size:17px}.rempty .sub{max-width:260px}
.fab{position:fixed;inset-inline-end:16px;bottom:calc(var(--sab) + 20px);z-index:30;display:flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:18px;background:var(--pri);color:var(--onpri);font-weight:700;font-size:15px;box-shadow:0 10px 24px -8px var(--pri),0 2px 6px rgba(0,0,0,.18);transition:transform .3s var(--em),padding .3s var(--em),gap .3s var(--em);animation:fabin .55s var(--em) .25s backwards}
.fab span{max-width:120px;overflow:hidden;white-space:nowrap;transition:max-width .3s var(--em),opacity .2s}
.fab.mini{padding:0 14px;gap:0}.fab.mini span{max-width:0;opacity:0}.fab:active{transform:scale(.94)}
@keyframes fabin{from{transform:translateY(90px) scale(.6);opacity:0}}
/* أيام الأسبوع وحقل الوقت */
.wdc{display:flex;gap:6px}.dc{flex:1;min-width:0;height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--surf);font-weight:700;font-size:12px;transition:background .2s,color .2s,transform .15s,border-color .2s}
.dc.on{background:var(--pri);color:var(--onpri);border-color:var(--pri)}.dc:active{transform:scale(.92)}
.tbox{display:flex;align-items:center;justify-content:space-between;background:var(--pc);border-radius:22px;padding:6px 18px;font-weight:700}
.tbox input{width:auto;border:0;background:none;font-size:30px;font-weight:700;direction:ltr;text-align:center;color:var(--pri2);padding:6px}
.icp{flex-wrap:wrap}.chip.ic2{min-width:46px;padding:0 10px;display:grid;place-items:center}
.btn.d{box-shadow:none}
label.sel{position:relative;display:block}label.sel select{width:100%;appearance:none;-webkit-appearance:none;background:var(--surf2);border:0;border-radius:16px;padding:14px 16px;font-size:15px;outline:none}label.sel .sc{position:absolute;inset-inline-start:12px;top:50%;margin-top:-11px;transform:rotate(-90deg);pointer-events:none;color:var(--on2)}
/* التقويم الهجري */
.calc{margin-top:14px;padding:14px 12px;overflow:hidden}
.ch{display:flex;align-items:center;gap:8px}.ch h3{font-size:19px;font-weight:700}.ch .ib{background:none;border-color:transparent}
.mnote{margin:6px 4px 2px;padding:8px 12px;border-radius:14px;background:var(--pc);color:var(--pri2);font-size:12.5px;text-align:center}
:root[data-eff=dark] .mnote{color:var(--pri)}
.cw{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0 8px;text-align:center;font-size:12px;color:var(--on2)}
.cg-w{overflow:hidden;margin:0 -2px;padding:2px}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cg.slL{animation:slL .38s var(--em)}.cg.slR{animation:slR .38s var(--em)}.cg.slU{animation:up .38s var(--em)}
@keyframes slL{from{opacity:0;transform:translateX(-48px)}}@keyframes slR{from{opacity:0;transform:translateX(48px)}}
.cd{position:relative;aspect-ratio:.86;border-radius:14px;background:var(--surf2);display:grid;place-content:center;justify-items:center;gap:0;color:var(--on);transition:transform .18s var(--e),box-shadow .2s;overflow:hidden}
.cd.e{background:none;pointer-events:none}.cd b{font-size:17px;font-weight:700;line-height:1.2}.cd small{font-size:11px;opacity:.6;direction:ltr;line-height:1.1}
.cd.fard{background:var(--pri);color:var(--onpri)}.cd.sunna{background:var(--c-sunna)}.cd.bid{background:var(--c-bid)}.cd.eid{background:var(--c-eid)}.cd.custom{background:var(--c-custom)}
.cd.td{box-shadow:inset 0 0 0 2.5px var(--pri)}.cd.sel{transform:scale(.92)}.cd:active{transform:scale(.9)}
.cd .dot,.lg .dot{display:block;width:5px;height:5px;border-radius:50%;background:var(--pri);text-decoration:none}.cd .dot{position:absolute;bottom:4px;inset-inline:0;margin:auto}.cd.fard .dot{background:var(--onpri)}
.cd .cs{position:absolute;top:4px;inset-inline-end:4px;width:6px;height:6px;border-radius:2px;background:var(--gold);transform:rotate(45deg);text-decoration:none}
.cd .ck{position:absolute;top:2px;inset-inline-start:3px;color:var(--ok);display:grid;animation:pop2 .4s var(--em)}.cd .ck svg{width:13px;height:13px}.cd.fard .ck{color:#fff}
.lg{display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 4px 0;font-size:12px;color:var(--on2)}.lg span{display:flex;align-items:center;gap:6px}
.k{display:inline-block;width:14px;height:14px;border-radius:5px;background:var(--surf2);flex:none}.k.fard{background:var(--pri)}.k.sunna{background:var(--c-sunna)}.k.bid{background:var(--c-bid)}.k.eid{background:var(--c-eid)}.k.custom{background:var(--c-custom)}
.tg2{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:16px;background:var(--surf2);margin-bottom:8px}.tg2 .k{margin-top:5px}.tg2 b{display:block}
.seas{padding:0}.sr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}.sr:first-child{border-top:0}
.sr b{display:block;font-size:16px}.pl2{flex:none;padding:7px 12px;border-radius:14px;background:var(--surf2);color:var(--pri2);font-size:12.5px;font-weight:700;white-space:nowrap}.pl2.on{background:var(--pri);color:var(--onpri)}
:root[data-eff=dark] .pl2:not(.on){color:var(--pri)}
.adjc{margin-top:14px}
/* المزيد */
.mg{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mf{display:grid;gap:10px;margin-top:2px}
.mc{display:flex;align-items:center;gap:12px;padding:14px;border-radius:26px;background:var(--surf);border:1.5px solid var(--line);cursor:pointer;min-height:84px;transition:transform .15s var(--e),background-color .25s,opacity .25s;position:relative;overflow:hidden;animation:up .5s var(--em) calc(var(--i,0)*45ms) backwards}
.mf .mc{min-height:0}.mc:active{transform:scale(.97);background:color-mix(in srgb,var(--pc) 55%,var(--surf))}
.mc .g{flex:1;min-width:0;display:grid;gap:2px}.mc b{font-size:15px;font-weight:700}.mc .sub{font-size:11.5px}
.mic{width:46px;height:46px;border-radius:50%;background:var(--pc);color:var(--pri2);display:grid;place-items:center;flex:none;order:2}:root[data-eff=dark] .mic{color:var(--pri)}
.mc .g{order:1}.mc>svg{order:3}.mc.hid{opacity:.45}
.mg .mc{flex-direction:row-reverse;justify-content:space-between}.mg .mc .g{text-align:start}
.med{display:flex;gap:2px;order:4}.med button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--on2);background:var(--surf2)}.med svg{width:18px;height:18px}.mg .mc .med{flex-direction:column}
.mcat{animation:up .5s var(--em) calc(var(--i,0)*60ms) backwards}.mcat .secH .med{order:0}
.page.settled .mc,.page.settled .mcat{animation:none}
/* قوائم الصفحات تتتابع عند الدخول فقط */
.page:not(.settled) .rc,.page:not(.settled) .sr{animation:up .5s var(--em) calc(var(--i,0)*45ms) backwards}

.mc b{font-size:14.5px;line-height:1.35}.mf .mc .mic{order:0}.mf .mc b{font-size:15.5px}