:root{--bg:#061b16;--bg2:#08271f;--panel:#0d3026;--panel2:#113b30;--panel3:#174737;--line:rgba(228,198,137,.18);--gold:#d9b875;--gold2:#f2d9a0;--mint:#8fc7a9;--text:#f5f1e7;--muted:#aabeb2;--red:#d96667;--shadow:0 18px 48px rgba(0,0,0,.28);--radius:24px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(ellipse at 50% -15%,#155140 0,transparent 52%),linear-gradient(155deg,#061b16 0%,#08261f 52%,#061b16 100%);padding-bottom:calc(88px + var(--safe-bottom));-webkit-tap-highlight-color:transparent}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(rgba(232,205,151,.28) .65px,transparent .65px);background-size:19px 19px;mask-image:linear-gradient(to bottom,black,transparent 85%);z-index:-1}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-header{position:sticky;top:0;z-index:20;padding:calc(9px + var(--safe-top)) 16px 10px;background:rgba(5,26,20,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,194,143,.12)}.header-inner{max-width:720px;margin:auto;display:flex;align-items:center;gap:12px;min-height:48px}.icon-btn{width:44px;height:44px;border:1px solid rgba(229,205,155,.18);background:rgba(255,255,255,.045);color:var(--text);display:grid;place-items:center;border-radius:15px;flex:none}.icon-btn svg{width:21px;height:21px}.brand-mini{display:flex;align-items:center;gap:9px;min-width:0}.brand-mini img{width:39px;height:39px;border-radius:12px;object-fit:cover;border:1px solid rgba(230,204,151,.42)}.brand-mini strong{display:block;font-family:Georgia,serif;font-size:20px;letter-spacing:.3px}.brand-mini small{display:block;color:var(--muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.header-spacer{flex:1}.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f0d8a5,#9d7442);color:#173428;font-weight:800;border:2px solid rgba(255,255,255,.26);flex:none}.page-wrap{max-width:720px;margin:0 auto;padding:22px 16px 30px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);font-weight:750}.page-title{font-family:Georgia,"Times New Roman",serif;font-size:clamp(29px,7vw,39px);font-weight:500;letter-spacing:-.5px;margin:7px 0 7px;line-height:1.12}.subtitle{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.card{background:linear-gradient(145deg,rgba(19,62,49,.88),rgba(10,42,33,.94));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card-soft{background:rgba(255,255,255,.045);border:1px solid rgba(226,202,159,.12);border-radius:20px;padding:15px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:25px 2px 12px}.section-head h2{font-size:17px;margin:0;font-weight:700;letter-spacing:.1px}.section-head a,.text-link{font-size:12px;color:var(--gold2);font-weight:650}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.btn{border:0;border-radius:16px;padding:14px 17px;font-weight:750;min-height:49px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .16s ease,filter .16s ease,background .16s ease}.btn:active{transform:scale(.975)}.btn-primary{color:#18382a;background:linear-gradient(135deg,#f4dfb5,#d7b274);box-shadow:0 8px 25px rgba(211,175,112,.2)}.btn-secondary{color:var(--text);background:rgba(255,255,255,.07);border:1px solid rgba(223,199,153,.17)}.btn-ghost{color:var(--gold2);background:transparent;border:1px solid rgba(223,199,153,.24)}.btn-danger{color:#ffeaea;background:rgba(196,70,75,.18);border:1px solid rgba(217,102,103,.4)}.btn-block{width:100%}.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}.field{display:grid;gap:8px;margin:14px 0}.field label{color:#e2d8c2;font-size:13px;font-weight:650}.input,.select,.textarea{width:100%;border-radius:15px;border:1px solid rgba(225,202,161,.22);background:rgba(2,19,14,.42);color:var(--text);padding:14px 15px;outline:none;min-height:50px}.input:focus,.select:focus,.textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,184,117,.12)}.input::placeholder,.textarea::placeholder{color:#82998c}.textarea{resize:vertical;min-height:92px}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.55}.tiny{font-size:10px;color:var(--muted)}.divider{height:1px;background:rgba(226,202,159,.13);margin:16px 0}.pill{border:1px solid rgba(224,198,145,.24);border-radius:999px;padding:6px 10px;font-size:11px;color:var(--gold2);display:inline-flex;align-items:center;gap:6px}.pill.green{border-color:rgba(118,203,155,.3);color:#a7e2bf;background:rgba(84,164,119,.1)}.pill.red{border-color:rgba(217,102,103,.45);color:#ffb0b0;background:rgba(217,102,103,.13)}.stat{font-family:Georgia,serif;font-size:35px;line-height:1;color:var(--gold2)}.stat-label{font-size:11px;color:var(--muted);margin-top:6px}.hero{position:relative;overflow:hidden;padding:22px 20px;min-height:180px;background:radial-gradient(circle at 87% 25%,rgba(226,197,132,.18),transparent 34%),linear-gradient(135deg,#174d3c,#0b3025 70%)}.hero:after{content:"۞";position:absolute;right:15px;bottom:-42px;font-size:176px;color:rgba(235,211,159,.055);line-height:1}.hero-content{position:relative;z-index:1}.greeting-ar{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;font-size:28px;color:var(--gold2);direction:rtl}.greeting-name{font-family:Georgia,serif;font-size:28px;margin:4px 0 7px}.brand-lockup{display:flex;align-items:center;gap:13px}.brand-lockup img{width:76px;height:76px;border-radius:18px;object-fit:cover;border:1px solid rgba(233,206,154,.4);box-shadow:0 10px 24px rgba(0,0,0,.22)}.brand-lockup .brand-name{font-family:Georgia,serif;font-size:27px;letter-spacing:.7px}.brand-lockup .brand-tag{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-top:4px}.dhikr-item{display:flex;align-items:center;gap:12px;min-height:83px;text-align:left;width:100%;color:var(--text);border:1px solid rgba(225,201,157,.14);background:linear-gradient(145deg,rgba(24,76,58,.9),rgba(13,49,37,.96));border-radius:19px;padding:13px;box-shadow:0 9px 24px rgba(0,0,0,.14)}.dhikr-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;flex:none;background:rgba(230,201,145,.12);color:var(--gold2)}.dhikr-icon svg{width:23px;height:23px}.dhikr-item strong{font-size:13px;display:block;line-height:1.3}.dhikr-item small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.arrow{margin-left:auto;color:var(--gold);font-size:20px}.progress-track{height:7px;border-radius:20px;background:rgba(255,255,255,.1);overflow:hidden}.progress-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#a5d8b7,#ddbf81);width:0;transition:width .3s ease}.resume-card{position:relative;border-color:rgba(219,186,119,.45)}.resume-card.warning{border-color:rgba(224,84,91,.7);animation:softPulse 1.7s ease-in-out infinite}.resume-card.expired{display:none}@keyframes softPulse{0%,100%{box-shadow:0 0 0 rgba(217,75,83,0)}50%{box-shadow:0 0 22px rgba(217,75,83,.22)}}.resume-count{font-family:Georgia,serif;font-size:34px;color:var(--gold2)}.resume-card.warning .resume-count{color:#ff9797}.bottom-nav{position:fixed;z-index:19;bottom:0;left:0;right:0;padding:8px 12px calc(8px + var(--safe-bottom));background:rgba(4,23,17,.94);backdrop-filter:blur(18px);border-top:1px solid rgba(220,194,143,.12)}.bottom-nav-inner{max-width:600px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.nav-item{display:grid;justify-items:center;gap:4px;color:#8fa99a;font-size:10px;padding:7px 2px;border-radius:13px}.nav-item svg{width:20px;height:20px}.nav-item.active{color:var(--gold2);background:rgba(218,185,117,.1)}.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.56);z-index:40;opacity:0;visibility:hidden;transition:.24s}.drawer{position:fixed;z-index:41;top:0;bottom:0;left:0;width:min(49vw,260px);padding:calc(18px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));background:linear-gradient(165deg,#103a2c,#061b15);border-right:1px solid rgba(228,199,141,.23);transform:translateX(-105%);transition:transform .27s cubic-bezier(.2,.8,.2,1);overflow:auto;box-shadow:20px 0 70px rgba(0,0,0,.35)}.drawer-open .drawer-backdrop{opacity:1;visibility:visible}.drawer-open .drawer{transform:translateX(0)}.drawer-profile{display:flex;align-items:center;gap:12px;padding:14px 10px 20px;border-bottom:1px solid rgba(225,204,162,.14);margin-bottom:12px}.drawer-avatar{width:53px;height:53px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#f3dfb3,#b38a50);color:#153729;font-size:20px;font-weight:850}.drawer-link{display:flex;align-items:center;gap:8px;padding:12px 7px;border-radius:12px;color:#dbe8de;font-size:12px;font-weight:650;margin:3px 0}.drawer-link svg{width:17px;height:17px;flex:none}.drawer-link span{min-width:0;line-height:1.25}.drawer-link svg{width:19px;height:19px;color:#c7b17e}.drawer-link.active,.drawer-link:active{background:rgba(225,197,138,.13);color:var(--gold2)}.drawer-link span:last-child{margin-left:auto;color:var(--muted);font-size:17px}.toast{position:fixed;z-index:80;left:50%;bottom:calc(94px + var(--safe-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e9d7af;color:#153328;padding:12px 17px;border-radius:14px;box-shadow:var(--shadow);font-weight:700;font-size:13px;max-width:calc(100vw - 32px);text-align:center;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.welcome-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:26px 18px calc(26px + var(--safe-bottom))}.welcome-card{width:min(100%,440px);position:relative;overflow:hidden;text-align:center;padding:25px 21px 23px}.welcome-card:before{content:"";position:absolute;inset:9px;border:1px solid rgba(223,195,137,.16);border-radius:19px;pointer-events:none}.welcome-logo{width:116px;height:116px;border-radius:26px;object-fit:cover;display:block;margin:0 auto 18px;border:1px solid rgba(234,205,150,.45);box-shadow:0 14px 32px rgba(0,0,0,.25)}.welcome-card .greeting-ar{font-size:34px}.welcome-card h1{font:500 38px Georgia,serif;margin:0 0 4px}.welcome-card .subtitle{margin-bottom:24px}.welcome-card .input{text-align:center;font-size:17px}.glass-hint{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);backdrop-filter:blur(12px);border-radius:19px;padding:15px;margin:12px 0 17px}.arabic{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;direction:rtl;text-align:center;line-height:1.9;font-size:27px;color:#f0dfb9}.gold-line{height:1px;background:linear-gradient(90deg,transparent,rgba(222,187,116,.65),transparent);margin:15px 0}.target-option{border:1px solid rgba(225,199,151,.18);background:rgba(255,255,255,.045);color:var(--text);padding:13px 8px;border-radius:14px;font-weight:750}.target-option.selected{border-color:var(--mint);background:rgba(100,174,128,.16);box-shadow:inset 0 0 0 1px rgba(100,174,128,.2)}.bead-stage{position:relative;margin:15px auto 8px;width:min(100%,410px);aspect-ratio:1.25/1;border-radius:30px;background:radial-gradient(ellipse at center,rgba(219,186,118,.1),transparent 64%),linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.06));border:1px solid rgba(226,200,150,.12);overflow:hidden}.bead-stage svg{width:100%;height:100%;display:block}.counter-panel{text-align:center;padding:5px 0 12px}.counter-number{font:500 clamp(54px,15vw,78px)/1 Georgia,serif;letter-spacing:1px;color:#f5e7c9;text-shadow:0 3px 25px rgba(221,186,115,.19);font-variant-numeric:tabular-nums}.counter-label{color:var(--muted);font-size:12px;margin-top:7px}.counter-progress{max-width:300px;margin:15px auto 0}.tap-button{width:124px;height:124px;border-radius:50%;border:1px solid rgba(250,228,186,.75);background:radial-gradient(circle at 30% 22%,#fff4d8,#ddbd7f 52%,#967344 100%);color:#123428;box-shadow:0 12px 34px rgba(209,176,111,.27),inset 0 2px 5px rgba(255,255,255,.7);font:700 19px Georgia,serif;display:grid;place-items:center;margin:14px auto 12px;touch-action:manipulation;user-select:none}.tap-button:active{transform:scale(.95);filter:brightness(1.04)}.tap-button span{font:800 31px system-ui;line-height:1}.action-row{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.action-row .btn{min-width:92px;min-height:43px;padding:10px 13px;font-size:12px}.session-phrase{font:500 22px "Noto Naskh Arabic","Noto Sans Arabic",serif;text-align:center;color:var(--gold2);direction:rtl;line-height:1.8;margin:0 0 5px}.session-phrase.latin{font:600 15px system-ui;direction:ltr;color:#d6e3d8}.phase-chip{font-size:11px;color:var(--gold2);margin-top:7px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar-head{color:var(--muted);font-size:10px;text-align:center;padding:5px}.calendar-day{min-height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.045);font-size:12px;color:#c0cec4;position:relative}.calendar-day.done{background:linear-gradient(145deg,rgba(67,143,97,.75),rgba(34,101,67,.72));border-color:rgba(135,207,158,.35);color:#f1fff3}.calendar-day.today{outline:1px solid var(--gold);outline-offset:2px}.calendar-day.missed{background:rgba(193,77,82,.11);color:#f19a9b;border-color:rgba(193,77,82,.16)}.calendar-day.empty{background:transparent;border:0}.target-card{display:flex;align-items:center;gap:13px}.target-card .target-info{flex:1;min-width:0}.target-card strong{font-size:14px}.target-card .meta{font-size:11px;color:var(--muted);margin-top:4px}.target-card .target-progress{margin-top:9px}.target-card .mini-actions{display:flex;gap:5px}.mini-btn{width:34px;height:34px;border:1px solid rgba(225,200,151,.15);border-radius:11px;color:var(--gold2);background:rgba(255,255,255,.04)}.pill-tabs{display:flex;gap:7px;overflow:auto;padding:2px 0 8px;scrollbar-width:none}.pill-tabs button{white-space:nowrap;border:1px solid rgba(225,199,151,.18);border-radius:99px;padding:9px 13px;background:rgba(255,255,255,.04);color:var(--muted);font-size:11px}.pill-tabs button.active{color:#17382a;background:var(--gold2);border-color:var(--gold2);font-weight:800}.list-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(227,202,159,.11)}.list-row:last-child{border-bottom:0}.list-row .grow{flex:1}.ayah-result{padding:17px;border:1px solid rgba(222,191,132,.22);border-radius:19px;background:rgba(255,255,255,.045);margin-top:14px}.ayah-result .arabic{font-size:30px}.notice{border:1px solid rgba(221,185,117,.25);background:rgba(221,185,117,.075);border-radius:15px;padding:12px 13px;color:#e2d3b4;font-size:11px;line-height:1.6}.notice.warning{border-color:rgba(215,102,103,.34);background:rgba(215,102,103,.09);color:#ffc0bf}.empty-state{text-align:center;padding:28px 18px;color:var(--muted)}.empty-state svg{width:38px;height:38px;color:var(--gold);margin-bottom:10px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(228,201,151,.12)}.settings-row:last-child{border:0}.switch{appearance:none;width:46px;height:27px;background:#42584e;border-radius:99px;position:relative;transition:.2s}.switch:before{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;background:#eef1e6;border-radius:50%;transition:.2s}.switch:checked{background:#c6a46a}.switch:checked:before{left:22px;background:#18382a}.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:22px}.modal-backdrop.show{display:flex}.modal{width:min(100%,390px);background:#0c3025;border:1px solid var(--line);border-radius:23px;padding:21px;box-shadow:var(--shadow)}.modal h3{font:500 25px Georgia,serif;margin:0 0 7px}.footer-note{text-align:center;color:#789184;font-size:10px;margin:25px 10px 0;line-height:1.6}.hidden{display:none!important}
@media(min-width:600px){.page-wrap{padding-top:30px}.grid-2{gap:14px}.hero{padding:28px}.bead-stage{max-width:420px}}
@media(max-width:360px){.page-wrap{padding-left:12px;padding-right:12px}.card{padding:15px}.grid-2{gap:8px}.dhikr-item{padding:10px;gap:8px}.dhikr-icon{width:38px;height:38px}.dhikr-item strong{font-size:12px}.bottom-nav{padding-left:5px;padding-right:5px}.bead-stage{aspect-ratio:1.15/1}.tap-button{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

#movingMarker{transition:transform .24s cubic-bezier(.2,.75,.3,1)}#beads circle{transition:r .16s ease,opacity .2s ease}