@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');
:root{--bg:#f3f0e7;--surface:#fffdf8;--surface2:#ebe7dc;--text:#173b32;--muted:#71847e;--green:#0f5f50;--green2:#17806b;--gold:#bd9445;--border:#ddd8cb;--shadow:0 18px 50px rgba(20,59,50,.10);--danger:#b45045}[hidden]{display:none!important}
[data-theme=dark]{--bg:#071a17;--surface:#102723;--surface2:#18332e;--text:#edf6f2;--muted:#91a9a2;--green:#66c3a8;--green2:#7bd6bc;--gold:#d6b46e;--border:#29433d;--shadow:0 22px 60px rgba(0,0,0,.28);--danger:#f08376}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'Tajawal','Manrope',sans-serif;min-height:100vh;transition:.25s;background-image:radial-gradient(circle at 80% 2%,rgba(189,148,69,.12),transparent 25%),radial-gradient(circle at 10% 30%,rgba(15,95,80,.07),transparent 25%)}button,input,select{font:inherit}.app-shell{width:min(100%,760px);min-height:100vh;margin:auto;background:color-mix(in srgb,var(--bg) 94%,transparent);position:relative;box-shadow:0 0 80px rgba(15,44,38,.08)}
.auth-view{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 10%,rgba(189,148,69,.16),transparent 32%)}.auth-card{width:min(100%,440px);background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:32px;box-shadow:var(--shadow);text-align:center}.auth-card>img{width:74px}.auth-card h1{font-size:32px;margin:12px 0 3px}.auth-card>p{color:var(--muted);margin:0 0 24px}.auth-card form{display:grid;gap:12px}.auth-card label{text-align:start}.auth-card label span{display:block;font-weight:700;margin-bottom:7px}.auth-card input{width:100%;font-size:17px}.auth-card form button{border:0;background:linear-gradient(135deg,var(--green),#15816c);color:#fff;border-radius:14px;padding:13px;font-weight:800;cursor:pointer}.auth-card .text-button{background:transparent;color:var(--green);padding:6px}.auth-card>small{display:block;color:var(--muted);margin-top:18px}.auth-status{min-height:24px!important;color:var(--danger)!important;margin:12px 0 0!important}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 22px 10px;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:21px}.brand img{width:34px;height:34px}.icon-button{width:42px;height:42px;border:1px solid var(--border);background:var(--surface);border-radius:14px;color:var(--text);display:grid;place-content:center;gap:4px;cursor:pointer}.icon-button span{width:18px;height:2px;background:currentColor;border-radius:5px}.theme-quick{font-size:20px}
.drawer{position:fixed;inset:0 auto 0 0;width:min(84vw,340px);background:var(--surface);z-index:60;padding:calc(30px + env(safe-area-inset-top)) 24px;transform:translateX(-105%);transition:.28s ease;box-shadow:25px 0 60px rgba(0,0,0,.2)}[dir=rtl] .drawer{left:auto;right:0;transform:translateX(105%)}.drawer.open{transform:none}.scrim{position:fixed;inset:0;background:#061b17a8;backdrop-filter:blur(3px);z-index:50;opacity:0;pointer-events:none;transition:.25s}.scrim.open{opacity:1;pointer-events:auto}.drawer-head{display:flex;align-items:center;gap:14px;padding-bottom:25px;border-bottom:1px solid var(--border)}.drawer-head img{width:48px}.drawer-head strong{display:block;font-size:23px}.drawer-head small{color:var(--muted)}.drawer nav{display:grid;gap:9px;margin-top:24px}.drawer nav button{display:flex;align-items:center;gap:14px;padding:15px;border:0;background:transparent;color:var(--muted);border-radius:15px;text-align:start;cursor:pointer}.drawer nav button.active{background:var(--surface2);color:var(--green)}.drawer nav span{width:28px;font-size:20px}.drawer nav b{font-size:16px}
main{padding:0 22px 44px}.page{display:none;animation:pageIn .28s ease}.page.active{display:block}@keyframes pageIn{from{opacity:0;transform:translateY(8px)}}.hero{text-align:center;padding:24px 0 30px}.city{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;margin:0}.pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(189,148,69,.12)}.clock{font-family:'Manrope',sans-serif;font-size:clamp(48px,13vw,84px);font-weight:700;letter-spacing:-4px;line-height:1.15;margin:12px 0 4px;color:var(--text)}.dates{display:flex;justify-content:center;align-items:center;gap:11px;color:var(--muted);font-size:15px;margin:0}.dates i{width:4px;height:4px;border-radius:50%;background:var(--gold)}.verse{max-width:520px;margin:25px auto 0;color:var(--green);font-size:17px;line-height:1.9}.section-title{display:flex;justify-content:space-between;align-items:end;margin:5px 0 15px}.section-title small,.page-heading small{color:var(--gold);font-weight:700}.section-title h1,.page-heading h1{font-size:27px;margin:2px 0 0}.method{font-size:12px;color:var(--muted);background:var(--surface2);border-radius:30px;padding:7px 11px}
.prayer-list{display:grid;gap:9px}.prayer-row{min-height:74px;border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:13px 15px;display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px;box-shadow:0 5px 18px rgba(20,59,50,.025);transition:.2s}.prayer-row.next{border-color:var(--gold);background:linear-gradient(100deg,var(--surface),color-mix(in srgb,var(--gold) 9%,var(--surface)))}.prayer-icon{width:42px;height:42px;border-radius:14px;background:var(--surface2);display:grid;place-items:center;color:var(--green);font-size:20px}.prayer-info strong{display:block;font-size:18px}.prayer-info small{color:var(--muted)}.prayer-time{font-family:'Manrope',sans-serif;font-size:20px;font-weight:700;direction:ltr}.bell{border:0;background:var(--surface2);border-radius:11px;color:var(--green);font-size:17px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}.bell.off{color:var(--muted);opacity:.62}.bell.disabled{opacity:.32;cursor:not-allowed}.next-card{margin-top:16px;border-radius:22px;padding:18px;background:linear-gradient(135deg,#0c5447,#123b34);color:#fff;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;box-shadow:var(--shadow)}.ring{width:46px;height:46px;border:1px solid #ffffff40;border-radius:15px;display:grid;place-items:center;font-size:23px}.next-card small{display:block;color:#c7dcd6}.next-card strong{font-size:18px}.next-card time{font:700 clamp(21px,6vw,30px) 'Manrope';color:#f1d493}
.page-heading{padding:30px 0 20px}.page-heading p{color:var(--muted);margin:8px 0;line-height:1.7}.summary-card,.tracking-card,.settings-group{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:0 8px 28px rgba(20,59,50,.04)}.summary-head{display:flex;align-items:center;justify-content:space-between}.summary-head small{display:block;color:var(--muted)}.summary-head strong{font:700 25px 'Manrope'}.legend{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}.legend span{width:8px;height:8px;border-radius:50%}.good{background:var(--green2)}.miss{background:var(--surface2);border:1px solid var(--border)}.chart{height:165px;display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:22px}.bar-item{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.bar-stack{height:125px;width:min(26px,70%);background:var(--surface2);border-radius:8px;display:flex;align-items:end;overflow:hidden}.bar-fill{width:100%;background:linear-gradient(var(--green2),var(--green));border-radius:8px;transition:height .5s}.bar-item small{font:600 10px 'Manrope';color:var(--muted)}.tracking-card{margin-top:14px}.tracking-date{display:flex;justify-content:space-between;align-items:center;text-align:center;padding-bottom:12px;border-bottom:1px solid var(--border)}.tracking-date button{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:24px}.tracking-date strong{display:block}.tracking-date small{color:var(--muted)}.track-row{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid var(--border)}.track-row:last-child{border:0}.track-row span{font-weight:700;font-size:17px}.choice{display:flex;background:var(--surface2);padding:4px;border-radius:12px}.choice button{border:0;padding:8px 11px;border-radius:9px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}.choice button.active.yes{background:var(--green);color:#fff}.choice button.active.no{background:var(--danger);color:#fff}
#settingsForm{display:grid;gap:14px}.settings-group h2{font-size:18px;margin:0 0 12px}.group-note{color:var(--muted);font-size:13px;margin:-7px 0 10px}.settings-group label,.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--border)}.settings-group label.stack{align-items:flex-start;flex-direction:column;gap:9px}.settings-group label span b{display:block}.settings-group label span small{color:var(--muted)}select,input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:11px 13px;outline:none}input:focus,select:focus{border-color:var(--green)}.stack input{width:100%}.switch{width:48px;height:28px;border-radius:30px;background:var(--surface2);border:1px solid var(--border);padding:3px;cursor:pointer;transition:.2s}.switch i{display:block;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:.2s}.switch.on{background:var(--green);border-color:var(--green)}.switch.on i{transform:translateX(20px);background:#fff}[dir=rtl] .switch.on i{transform:translateX(-20px)}.primary{border:0;background:linear-gradient(135deg,var(--green),#15816c);color:#fff;border-radius:15px;padding:15px;font-weight:800;font-size:17px;cursor:pointer}.save-status{text-align:center;color:var(--green);min-height:20px;margin:0}footer{text-align:center;padding:25px;color:var(--muted);font:600 11px 'Manrope';letter-spacing:1px}footer img{display:block;width:32px;margin:0 auto 7px;opacity:.65}
.audio-upload{display:grid;grid-template-columns:1fr auto;gap:9px}.audio-upload input{min-width:0}.audio-upload button,.audio-actions button{border:0;border-radius:12px;padding:11px 13px;background:var(--green);color:#fff;font-weight:700;cursor:pointer}.audio-actions{display:flex;gap:9px;margin-top:10px}.audio-actions button{flex:1;background:var(--surface2);color:var(--green);border:1px solid var(--border)}.audio-actions .danger-soft{color:var(--danger)}.account-card{display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:15px}.account-card small,.account-card b{display:block}.account-card small{color:var(--muted)}.account-card button{border:0;background:transparent;color:var(--danger);font-weight:700;cursor:pointer}
.alarm-modal{position:fixed;inset:0;z-index:100;background:#061713f2;display:grid;place-items:center;padding:22px;opacity:0;pointer-events:none;transition:.25s}.alarm-modal.open{opacity:1;pointer-events:auto}.alarm-glow{position:absolute;width:340px;height:340px;background:#b88b3b33;border-radius:50%;filter:blur(55px);animation:pulseGlow 1.2s infinite alternate}@keyframes pulseGlow{to{transform:scale(1.25);opacity:.35}}.alarm-content{position:relative;text-align:center;color:#fff;width:min(100%,460px)}.alarm-content>img{width:90px;filter:drop-shadow(0 10px 30px #0005);animation:ring 1s infinite}@keyframes ring{20%{transform:rotate(5deg)}40%{transform:rotate(-5deg)}60%{transform:rotate(3deg)}}.alarm-content>small{display:block;color:#d5b873;margin-top:15px}.alarm-content h2{font-size:38px;margin:3px 0}.alarm-content p{color:#c9d6d2;line-height:1.7}.send-code,#codeForm button{border:0;border-radius:14px;padding:13px 15px;font-weight:800;cursor:pointer}.send-code{background:#d2ac61;color:#173b32;width:100%;margin:10px 0}#codeForm{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}#alarmCode{background:#fff;color:#142e28;text-align:center;font:700 22px 'Manrope';letter-spacing:5px;text-transform:none}#codeForm button{background:#157864;color:#fff}.code-status{min-height:20px;margin:10px 0 0!important}.expiry{font:600 14px 'Manrope';margin:4px!important}.no-snooze{opacity:.6}.toast{position:fixed;z-index:150;bottom:25px;left:50%;transform:translate(-50%,30px);background:var(--text);color:var(--bg);padding:11px 17px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:430px){main{padding-inline:15px}.topbar{padding-inline:15px}.prayer-row{grid-template-columns:40px 1fr auto auto;padding-inline:11px;gap:8px}.prayer-time{font-size:18px}.next-card{grid-template-columns:42px 1fr;}.next-card time{grid-column:1/-1;text-align:center;border-top:1px solid #ffffff20;padding-top:11px}.summary-head{align-items:flex-start}.legend{flex-wrap:wrap;justify-content:end;max-width:120px}.choice button{padding:7px 9px}.clock{letter-spacing:-3px}}
@media(min-width:761px){.app-shell{margin-block:18px;min-height:calc(100vh - 36px);border-radius:32px;overflow:hidden}.drawer{top:18px;bottom:18px;border-radius:0 28px 28px 0}[dir=rtl] .drawer{border-radius:28px 0 0 28px}}