:root{--bg: #f7f4ec;--surface: #ffffff;--surface-2: #fbf9f4;--ink: #1b2a24;--ink-2: #3c4b44;--muted: #8a958f;--line: #ece7da;--line-2: #f2eee4;--emerald: #13684c;--emerald-2: #0e5640;--emerald-soft: #e7f3ec;--emerald-tint: #f2f9f5;--gold: #b8892f;--gold-soft: #fbf3e2;--warn: #b4542a;--warn-soft: #fdf0e8;--shadow-sm: 0 1px 2px rgb(40 50 40 / 5%);--shadow: 0 1px 2px rgb(40 50 40 / 4%), 0 8px 24px -8px rgb(40 50 40 / 10%);--shadow-lg: 0 2px 4px rgb(19 104 76 / 4%), 0 20px 40px -16px rgb(19 104 76 / 22%);color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body.no-scroll{overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}svg{width:22px;height:22px;flex:none}.shell{max-width:460px;margin:0 auto;min-height:100dvh;padding:0 16px calc(100px + env(safe-area-inset-bottom))}.brand{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 2px 4px;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--ink-2)}.brand-ar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:Amiri,serif;font-size:13px;line-height:1;padding-top:3px;background:var(--emerald);color:#fff;box-shadow:0 4px 10px -3px #13684c73}.greet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 12px}.greet-date{margin:0;font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.2}.greet-hijri{margin:1px 0 0;color:var(--gold);font-weight:600;font-size:13px}.streak{display:flex;align-items:center;gap:4px;flex:none;padding:6px 11px 6px 9px;border-radius:99px;background:var(--gold-soft);color:var(--gold);font-weight:800;font-size:14px;border:1px solid #f0e0bb}.streak svg{width:16px;height:16px}.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}.hero:before{content:"";position:absolute;z-index:-1;top:-40px;right:-30px;width:200px;height:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%2313684c' stroke-width='1'%3E%3Crect x='12' y='12' width='20' height='20'/%3E%3Crect x='12' y='12' width='20' height='20' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E");opacity:.09;-webkit-mask-image:radial-gradient(circle at 60% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(circle at 60% 40%,#000 20%,transparent 70%)}.hero-text{flex:1;min-width:0}.eyebrow{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--emerald);font-weight:800}.hero h1{margin:3px 0 4px;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}.hero-range{margin:0;color:var(--ink-2);font-weight:600;font-size:14px}.hero-range span{color:var(--gold);margin:0 2px}.hero .sub{margin:4px 0 0;color:var(--ink-2)}.khatam{display:flex;align-items:center;gap:8px;margin-top:10px}.khatam .bar{flex:1;margin:0}.khatam span{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}.ring-wrap{position:relative;width:78px;height:78px;flex:none}.ring{width:78px;height:78px;transform:rotate(-90deg)}.ring-track{fill:none;stroke:var(--emerald-soft);stroke-width:7}.ring-bar{fill:none;stroke:var(--emerald);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}.ring-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.ring-label strong{font-size:26px;font-weight:800;letter-spacing:-.03em}.ring-label span{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:3px}.hero-khatam{flex-direction:column;align-items:flex-start}.hero-khatam h1{font-size:30px}.bar{height:5px;border-radius:5px;background:var(--line-2);overflow:hidden}.bar-fill{height:100%;min-width:5px;background:linear-gradient(90deg,var(--emerald),#3fa57a);border-radius:5px;transition:width .6s ease}.section-title{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted);margin:22px 2px 10px}.section-title:after{content:"";flex:1;height:1px;background:var(--line)}.timeline{display:flex;flex-direction:column;gap:8px;margin-top:12px}.slot{display:flex;align-items:center;gap:12px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,background .2s}.slot.is-now{border-color:#e6cf9c;box-shadow:0 0 0 3px var(--gold-soft),var(--shadow)}.slot.is-done{background:var(--emerald-tint);border-color:#d6ebdf;box-shadow:none}.slot-icon{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:all .25s}.slot-icon svg{width:21px;height:21px}.is-now .slot-icon{background:var(--gold-soft);border-color:#ecd7a8;color:var(--gold)}.is-done .slot-icon{background:var(--emerald-soft);border-color:#cfe5d8;color:var(--emerald)}.slot-main{flex:1;min-width:0;text-align:left;padding:0;display:flex;flex-direction:column;gap:1px}.slot-name{display:flex;align-items:baseline;gap:6px}.prayer{font-weight:800;font-size:15.5px;letter-spacing:-.015em}.prayer-ar{font-family:Amiri,serif;font-size:14px;color:var(--gold);line-height:1}.chip{font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;background:var(--line-2);color:var(--muted);align-self:center;letter-spacing:.02em}.chip-now{background:var(--gold-soft);color:var(--gold)}.range{font-weight:700;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.is-done .range{color:var(--muted)}.meta{font-size:12px;color:var(--muted);font-weight:500}.is-done .meta{color:var(--emerald);font-weight:600}.check{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--surface);color:transparent;transition:all .2s}.check:hover{border-color:var(--emerald);color:#b9d9c8}.is-now .check{border-color:#e2c98f}.check svg{width:20px;height:20px}.is-done .check{background:var(--emerald);border-color:var(--emerald);color:#fff;animation:pop .3s ease}@keyframes pop{50%{transform:scale(1.12)}}.notice{width:100%;margin-top:10px;padding:10px 14px;border-radius:14px;background:var(--warn-soft);color:var(--warn);border:1px solid #f5d9c8;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;text-align:left}.notice-cta{font-weight:800;text-decoration:underline;text-underline-offset:3px}.backlog{margin-top:8px;padding-bottom:6px;border-bottom:1px dashed var(--line)}.foot-note{text-align:center;color:var(--muted);font-size:12.5px;margin:22px 0 0}.shell.fit{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.shell.fit .content,.shell.fit .today{flex:1;min-height:0;display:flex;flex-direction:column}.shell.fit .today-list{flex:1;min-height:0;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));max-height:480px}.shell.fit .today-list .slot{min-height:0}@media (max-height: 700px){.shell.fit .hero h1{font-size:28px}.shell.fit .hero{padding:12px 14px}.shell.fit .ring-wrap,.shell.fit .ring{width:64px;height:64px}.shell.fit .ring-label strong{font-size:22px}.shell.fit .greet{padding-bottom:8px}.shell.fit .greet-date{font-size:18px}.shell.fit .slot{padding:6px 8px}.shell.fit .slot-icon,.shell.fit .check{width:38px;height:38px;border-radius:12px}.shell.fit .timeline{gap:6px;margin-top:10px}}.page-head{padding:10px 2px 4px}.page-head h1{margin:0 0 4px;font-size:26px;font-weight:800;letter-spacing:-.03em}.page-head .sub{margin:0 0 16px;color:var(--muted);font-size:13.5px}.days{display:flex;flex-direction:column;gap:8px}.day{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}.day.today{border-color:#e6cf9c;box-shadow:0 0 0 3px var(--gold-soft)}.day-head{width:100%;display:flex;align-items:center;gap:12px;padding:12px;text-align:left}.day-num{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}.day.today .day-num{background:var(--gold-soft);color:var(--gold);border-color:#ecd7a8}.day.full .day-num{background:var(--emerald);color:#fff;border-color:var(--emerald)}.day.late .day-num{background:var(--warn-soft);color:var(--warn);border-color:#f5d9c8}.day-info{flex:1;min-width:0;display:flex;flex-direction:column}.day-title{font-weight:800;letter-spacing:-.01em}.day-title em{font-style:normal;font-weight:500;color:var(--muted);font-size:12.5px;margin-left:4px}.day-range{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dots{display:flex;gap:3px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--emerald)}.chev{color:var(--muted);transition:transform .2s}.chev svg{width:18px;height:18px}.day.open .chev{transform:rotate(180deg)}.day-body{padding:4px 12px 12px;border-top:1px solid var(--line-2);background:var(--surface-2)}.day-body.timeline{margin-top:0;padding-top:10px}.day-body .slot{box-shadow:none}.form{padding:16px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm)}.form h3{margin:0 0 8px;font-size:15px;font-weight:800}.form label{font-weight:700;display:block;margin-bottom:8px}.form input[type=date]{width:100%;padding:12px 13px;border-radius:13px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:600}.form input[type=date]:focus{outline:2px solid var(--emerald);outline-offset:1px}.hint{color:var(--muted);font-size:13px;margin:8px 0 0}.info{margin:0;padding-left:18px;color:var(--ink-2);font-size:13.5px;display:grid;gap:7px}.info li::marker{color:var(--gold)}.btn{padding:12px 18px;border-radius:14px;font-weight:700}.btn-primary{background:var(--emerald);color:#fff;box-shadow:0 6px 16px -6px #13684c99}.btn-light{background:var(--emerald);color:#fff;margin-top:14px}.btn-ghost{background:var(--emerald-soft);color:var(--emerald)}.btn-danger{background:var(--warn-soft);color:var(--warn);margin-top:12px;width:100%}.nav{position:fixed;left:50%;transform:translate(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(428px,calc(100% - 32px));display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:24px;background:#ffffffdb;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);box-shadow:0 12px 32px -10px #28322838}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:18px;font-size:11.5px;font-weight:700;color:var(--muted);transition:background .2s,color .2s}.nav-btn svg{width:21px;height:21px}.nav-btn.active{background:var(--emerald-soft);color:var(--emerald)}.reader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;background:#fdfbf5;animation:up .25s ease}@keyframes up{0%{transform:translateY(16px);opacity:0}}.reader-head,.reader-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;max-width:640px;width:100%;margin:0 auto}.reader-head{padding-top:calc(10px + env(safe-area-inset-top))}.reader-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom));justify-content:space-between}.reader-title{flex:1;display:flex;flex-direction:column;line-height:1.25}.reader-title strong{font-weight:800}.reader-title span{font-size:12.5px;color:var(--muted)}.reader-count{font-size:12.5px;font-weight:800;color:var(--emerald);background:var(--emerald-soft);padding:5px 11px;border-radius:99px}.reader-count:empty{display:none}.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}.icon-btn:disabled{opacity:.35;cursor:default}.reader-page{flex:1;min-height:0;display:grid;place-items:center;padding:4px 14px;overflow:auto;touch-action:pan-y}.reader-page img{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#fff;border-radius:10px;padding:10px;border:1px solid var(--line);box-shadow:var(--shadow)}.reader-hint{font-size:13px;color:var(--muted);font-weight:600}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.brand-sync{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:5px}.brand-sync:before,.sync-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}[data-sync-label][data-kind=ok]:before{background:#2fae74}[data-sync-label][data-kind=syncing]:before{background:var(--gold);animation:blink 1s infinite}[data-sync-label][data-kind=error]{color:var(--warn)}[data-sync-label][data-kind=error]:before{background:var(--warn)}@keyframes blink{50%{opacity:.3}}.sync-card{border-color:#d6ebdf;background:linear-gradient(180deg,var(--emerald-tint),var(--surface) 60%)}.sync-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.sync-head h3{margin:0}.sync-pill{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:3px 9px;border-radius:99px}.steps{margin:10px 0 14px;padding-left:20px;color:var(--ink-2);font-size:13.5px;display:grid;gap:4px}.steps em{font-style:normal;font-weight:700;color:var(--emerald)}.btn-block{width:100%}.sync-join{display:flex;gap:8px;margin-top:10px}.sync-join input{flex:1;min-width:0;padding:11px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px ui-monospace,SF Mono,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase}.sync-join input:focus{outline:2px solid var(--emerald);outline-offset:1px}.sync-code{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding:10px 10px 10px 14px;border-radius:14px;background:var(--surface);border:1px dashed #bcdcc9}.sync-code code{font:700 16px ui-monospace,SF Mono,Menlo,monospace;letter-spacing:.06em;color:var(--emerald-2)}.btn-sm{padding:7px 12px;border-radius:10px;font-size:13px}.sync-actions{display:flex;gap:8px;margin-top:10px}.sync-actions .btn{flex:1}.btn-plain{background:transparent;color:var(--muted);border:1px solid var(--line)}