:root{--bg: #f4f4f5;--fg: #0a0a0a;--muted: #525252;--surface: #ffffff;--border: rgba(0, 0, 0, .1);--inverse: #0a0a0a;--scrollbar: #0a0a0a;--header-bg: rgba(244, 244, 245, .72);--accent: #3b82f6;--available: #ea580c;--glow: rgba(59, 130, 246, .14);--glow-cyan: rgba(34, 211, 238, .1);--glow-teal: rgba(45, 212, 191, .09);--glow-soft: rgba(59, 130, 246, .05);--font-body: "Outfit", sans-serif;--font-display: "Syne", sans-serif}.dark{--bg: #090909;--fg: #ffffff;--muted: #a3a3a3;--surface: #111111;--border: rgba(255, 255, 255, .1);--inverse: #ffffff;--scrollbar: #ffffff;--header-bg: rgba(9, 9, 9, .72);--accent: #3b82f6;--available: #4ade80;--glow: rgba(59, 130, 246, .18);--glow-cyan: rgba(34, 211, 238, .12);--glow-teal: rgba(45, 212, 191, .11);--glow-soft: rgba(59, 130, 246, .06)}*,*:before,*:after{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}body{margin:0;min-height:100dvh;background-color:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:1rem;line-height:1.6;background-image:radial-gradient(ellipse 85% 50% at 42% -12%,var(--glow),transparent 68%),radial-gradient(ellipse 60% 45% at 88% 18%,var(--glow-cyan),transparent 62%),radial-gradient(ellipse 55% 40% at 8% 55%,var(--glow-teal),transparent 60%),radial-gradient(ellipse 45% 30% at 70% 85%,var(--glow-soft),transparent 65%);background-attachment:fixed;transition:background-color .2s ease,color .2s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100dvh}.font-display{font-family:var(--font-display)}button{font-family:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-shell{width:91.666%;max-width:42rem;margin:0 auto;padding:1.5rem 0 4rem;display:flex;flex-direction:column;gap:0}@media (min-width: 1024px){.app-shell{width:66.666%}}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem;transition:margin-bottom .3s ease}.brand{margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1}.header-actions{display:flex;align-items:center;gap:.5rem}@media (min-width: 480px){.header-actions{gap:.75rem}}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--border);border-radius:.5rem;background:transparent;color:var(--fg);transition:background-color .2s ease,border-color .2s ease}.icon-btn:hover{background:var(--surface)}.icon-btn svg{width:1.125rem;height:1.125rem}.prayer-dropdown{position:relative}.prayer-chip{display:inline-flex;align-items:center;justify-content:center;height:2.5rem;max-width:11.5rem;padding:0 .85rem;border:1px solid var(--border);border-radius:.5rem;background:transparent;color:var(--muted);font-family:var(--font-body);font-size:.8125rem;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.prayer-chip:hover{background:var(--surface);color:var(--fg)}.prayer-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prayer-dropdown.is-near .prayer-chip{border-color:color-mix(in srgb,var(--available) 45%,var(--border));color:var(--available)}.prayer-dropdown.is-near .prayer-chip:hover{color:var(--available);background:color-mix(in srgb,var(--available) 8%,transparent)}.prayer-dropdown.is-open .prayer-chip{background:var(--surface);color:var(--fg)}.prayer-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:40;min-width:11.5rem;margin:0;padding:.35rem;list-style:none;border:1px solid var(--border);border-radius:.75rem;background:var(--surface);box-shadow:0 8px 24px #0000001f}.prayer-menu.is-animated{animation:prayer-menu-in .2s ease}@keyframes prayer-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.prayer-menu-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .65rem;border-radius:.5rem;color:var(--muted);font-size:.8125rem;line-height:1.3}.prayer-menu-item.is-next{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)}.prayer-menu-name{font-weight:500}.prayer-menu-time{font-variant-numeric:tabular-nums;letter-spacing:.02em}.drawer-salah-controls{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem;padding-top:.25rem}.drawer-salah-btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;height:2.25rem;padding:0 .9rem;border:1px solid var(--border);border-radius:.5rem;background:transparent;color:var(--fg);font-family:var(--font-body);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease}.drawer-salah-btn:hover:not(:disabled){background:var(--surface)}.drawer-salah-btn:disabled{opacity:.6;cursor:wait}.drawer-salah-hint,.drawer-salah-error{margin:0;font-size:.75rem;line-height:1.45;color:var(--muted)}.drawer-salah-error{color:var(--available)}.drawer-field{display:flex;flex-direction:column;gap:.35rem}.drawer-field-label{font-size:.75rem;font-weight:500;color:var(--muted)}.drawer-select{width:100%;height:2.35rem;padding:0 .75rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:.875rem;cursor:pointer}.drawer-select:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.app-shell.is-zen .app-header{margin-bottom:3.5rem}.app-shell.is-zen .timer-card{padding-bottom:2rem}.reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-6px);pointer-events:none;transition:grid-template-rows .3s ease,opacity .28s ease,transform .3s ease}.reveal.is-in{grid-template-rows:1fr;opacity:1;transform:none;pointer-events:auto}.reveal-inner{overflow:hidden;min-height:0}.reveal.is-in .reveal-inner{overflow:visible}.reveal-todos:not(.is-in){transform:translateY(8px)}.hero{text-align:center;animation:hero-in .7s ease-out both}.quote-rotator{margin:0 0 2rem;min-height:4.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-tagline,.quote-text{margin:0;font-size:.9375rem;color:var(--muted);line-height:1.5;max-width:28rem}.quote-text{display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:opacity .4s ease,transform .4s ease}.quote-body{font-style:italic}.quote-author{font-size:.75rem;font-style:normal;font-weight:500;letter-spacing:.02em;color:var(--muted);opacity:.8}.quote-author:before{content:"— "}.quote-in{opacity:1;transform:translateY(0)}.quote-out{opacity:0;transform:translateY(-8px)}.timer-card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:2rem 1.5rem 1.75rem;margin-bottom:1.5rem;transition:padding-bottom .3s ease}.timer-status{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;max-width:100%;margin:0 0 .75rem;font-size:.8125rem;font-weight:500;color:var(--muted)}.timer-status.is-active{color:var(--available)}.timer-status.is-action{padding:0;border:none;background:transparent;font-family:inherit;cursor:pointer;transition:color .2s ease}.timer-status.is-action:hover{color:var(--fg)}.timer-status-text{display:inline-flex;align-items:baseline;gap:.35rem;min-width:0;text-align:left}.timer-status-mode{flex-shrink:0;letter-spacing:.04em;text-transform:uppercase}.timer-status-sep{flex-shrink:0;opacity:.7}.timer-status-intention{min-width:0;font-size:.875rem;font-weight:500;letter-spacing:.01em;text-transform:none;word-break:break-word}.timer-status-intention.is-placeholder{font-style:italic;font-weight:400;opacity:.85}.status-dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex-shrink:0}.timer-status.is-active .status-dot{animation:status-pulse 1.6s ease-in-out infinite}.time-left{margin:0 0 1.25rem;font-family:var(--font-display);font-size:clamp(3.5rem,14vw,5rem);font-weight:700;letter-spacing:-.04em;line-height:1;tabular-nums:true;font-variant-numeric:tabular-nums}.durations-inline{display:flex;align-items:stretch;justify-content:center;gap:0;padding-top:1.25rem;border-top:1px solid var(--border)}.duration-control{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4rem}.duration-sep{width:1px;align-self:stretch;margin:.15rem 0;background:var(--border);flex-shrink:0}.duration-label{font-size:.6875rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.duration-controls{display:inline-flex;align-items:center;gap:.25rem}.duration-value{display:inline-flex;align-items:baseline;justify-content:center;gap:.2rem;min-width:2.75rem;text-align:center;font-family:var(--font-display);font-size:.9375rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg)}.duration-unit{font-family:var(--font-body);font-size:.625rem;font-weight:500;letter-spacing:.02em;color:var(--muted);opacity:.85}.duration-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:1px solid transparent;border-radius:.375rem;background:transparent;color:var(--muted);transition:background-color .2s ease,border-color .2s ease,color .2s ease}.duration-btn:hover:not(:disabled){background:var(--bg);border-color:var(--border);color:var(--fg)}.duration-btn:disabled{opacity:.35;cursor:not-allowed}.duration-btn svg{width:.75rem;height:.75rem}.cta-group{display:flex;align-items:center;justify-content:center;gap:.75rem}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.625rem 1.25rem;border:none;border-radius:.5rem;background:var(--fg);color:var(--bg);font-size:.875rem;font-weight:500;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease}.btn-primary:hover:not(:disabled){transform:translateY(-1px);opacity:.92;box-shadow:0 0 0 1px var(--glow-soft),0 8px 24px -8px var(--glow),0 4px 16px -6px var(--glow-cyan)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary svg{width:1.125rem;height:1.125rem}.btn-outline{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--border);border-radius:.5rem;background:transparent;color:var(--fg);transition:background-color .2s ease}.btn-outline:hover:not(:disabled){background:var(--surface)}.btn-outline svg{width:1.125rem;height:1.125rem}.todos{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)}.app-footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center}.app-footer p{margin:0;font-size:.8125rem;color:var(--muted);letter-spacing:.01em}.footer-tagline{max-width:28rem;margin-inline:auto;line-height:1.5}.footer-privacy{margin-top:.35rem;font-size:.75rem;opacity:.85}.footer-credit{margin-top:.85rem;font-size:.75rem}.app-footer a{color:inherit;text-decoration:underline;text-underline-offset:.15em;transition:color .2s ease}.app-footer a:hover{color:var(--fg)}.session-progress{margin-top:1.75rem;margin-bottom:.5rem;text-align:center}.session-dots{display:flex;justify-content:center;gap:.5rem;margin-top:0}.session-dot{width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--border);background:transparent;transition:background-color .2s ease,border-color .2s ease}.session-dot.is-filled{background:var(--available);border-color:var(--available)}.cycle-hint{margin:.75rem 0 0;font-family:var(--font-body);font-size:.8125rem;font-weight:500;letter-spacing:.01em;line-height:1.4;color:var(--fg)}.flow-stats{margin:.5rem 0 0;text-align:center;font-size:.8125rem;line-height:1.5;color:var(--muted)}.flow-stats-sep{margin:0 .4rem}.flow-streak{color:var(--muted)}.todos-panel{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.25rem 1.5rem}.todos-form{display:flex;gap:.5rem;margin-bottom:1rem}.todos-input{flex:1;min-width:0;height:2.5rem;padding:0 .875rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg);color:var(--fg);font-family:inherit;font-size:.875rem;transition:border-color .2s ease}.todos-input::placeholder{color:var(--muted)}.todos-input:focus{outline:none;border-color:var(--fg)}.todos-add{flex-shrink:0;height:2.5rem;padding:0 .875rem;border:none;border-radius:.5rem;background:var(--fg);color:var(--bg);font-size:.8125rem;font-weight:500;transition:opacity .2s ease}.todos-add:hover:not(:disabled){opacity:.92}.todos-empty{margin:0;padding:.25rem 0;font-size:.875rem;color:var(--muted);text-align:center}.todos-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.todos-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .25rem;border-radius:.5rem;background:transparent;transition:background-color .2s ease,box-shadow .2s ease,opacity .2s ease}.todos-item.is-active,.todos-item.is-selectable:hover{background:var(--glow-soft)}.todos-item.is-dragging{opacity:.35;background:transparent;box-shadow:none}.todos-item.is-dragging.is-selectable:hover{background:transparent}.todos-item-overlay{min-width:12rem;max-width:min(90vw,36rem);padding:.5rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;box-shadow:0 8px 24px #0000001f,0 2px 6px #0000000f;cursor:grabbing;transform:scale(1.02);transform-origin:left center}.dark .todos-item-overlay{box-shadow:0 10px 28px #00000073,0 2px 8px #00000040}.todos-item-overlay.is-active{background:var(--surface);box-shadow:0 8px 24px #0000001f,0 0 0 1px var(--border),0 0 20px var(--glow-soft)}.todos-drag{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:.375rem;background:transparent;color:var(--muted);flex-shrink:0;cursor:grab;touch-action:none;transition:color .2s ease,background-color .2s ease}.todos-drag:hover{color:var(--fg);background:var(--bg)}.todos-drag:active,.todos-item-overlay .todos-drag{cursor:grabbing}.todos-drag:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.todos-drag svg{width:.75rem;height:.75rem;pointer-events:none}.todos-focus-dot{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--muted);pointer-events:none}.todos-focus-dot.is-active{color:var(--available)}.todos-focus-dot.is-done{opacity:.35}.todos-focus-dot-core{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex-shrink:0}.todos-focus-dot.is-active .todos-focus-dot-core{animation:status-pulse 1.6s ease-in-out infinite}.todos-select{flex:1;min-width:0;margin:0;padding:0;border:none;background:transparent;color:inherit;font-family:inherit;text-align:left;cursor:pointer}.todos-select:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:.25rem}.todos-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.todos-check input{width:1rem;height:1rem;flex-shrink:0;accent-color:var(--fg);cursor:pointer}.todos-text{font-size:.9375rem;line-height:1.4;word-break:break-word}.todos-item.is-done .todos-text{flex:1;min-width:0;color:var(--muted);text-decoration:line-through}.todos-item.is-active .todos-text{font-weight:500}.todos-remove{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:.5rem;background:transparent;color:var(--muted);flex-shrink:0;transition:color .2s ease,background-color .2s ease}.todos-remove:hover{color:var(--fg);background:var(--bg)}.todos-remove svg{width:.875rem;height:.875rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.drawer-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;justify-content:flex-end}.drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;border:none;padding:0;margin:0;background:#00000059;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer;animation:drawer-backdrop-in .25s ease both}.drawer-root.is-closing .drawer-backdrop{animation:drawer-backdrop-out .25s ease both;pointer-events:none}.settings-drawer{position:relative;z-index:1;display:flex;flex-direction:column;width:min(22.5rem,100%);height:100%;background:var(--surface);border-left:1px solid var(--border);color:var(--fg);box-shadow:-12px 0 40px -24px #00000059;animation:drawer-in .3s ease both}.drawer-root.is-closing .settings-drawer{animation:drawer-out .3s ease both}.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}.drawer-title{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.03em}.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border);border-radius:.5rem;background:transparent;color:var(--fg);transition:background-color .2s ease}.drawer-close:hover{background:var(--bg)}.drawer-close svg{width:1rem;height:1rem}.drawer-body{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1.75rem;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}.drawer-section-title{margin:0 0 .75rem;font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.drawer-section-list{display:flex;flex-direction:column;gap:.25rem}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .15rem;cursor:pointer}.setting-row-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;text-align:left}.setting-row-label{font-size:.9375rem;font-weight:500;color:var(--fg);line-height:1.3}.setting-row-desc{font-size:.75rem;color:var(--muted);line-height:1.4}.drawer-shortcuts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.drawer-shortcuts li{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.875rem;color:var(--muted)}.drawer-shortcuts kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;padding:.2rem .45rem;border:1px solid var(--border);border-radius:.375rem;background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:.75rem;font-weight:500;letter-spacing:.01em}.drawer-privacy{margin:0;font-size:.8125rem;line-height:1.55;color:var(--muted)}.setting-switch{-moz-appearance:none;appearance:none;-webkit-appearance:none;position:relative;width:2.5rem;height:1.4rem;margin:0;flex-shrink:0;border:1px solid var(--border);border-radius:999px;background:var(--bg);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.setting-switch:after{content:"";position:absolute;top:50%;left:.15rem;width:1rem;height:1rem;border-radius:50%;background:var(--muted);transform:translateY(-50%);transition:transform .2s ease,background-color .2s ease}.setting-switch:checked{background:var(--fg);border-color:var(--fg)}.setting-switch:checked:after{transform:translate(1.05rem,-50%);background:var(--bg)}.setting-switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@keyframes drawer-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes drawer-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes drawer-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}@keyframes drawer-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(1rem)}}@keyframes hero-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}@media (prefers-reduced-motion: reduce){.hero,.timer-status.is-active .status-dot,.todos-focus-dot.is-active .todos-focus-dot-core{animation:none}.todos-item{transition:none}.todos-item-overlay{transform:none;box-shadow:none}.todos-drag{transition:none}.btn-primary:hover:not(:disabled){transform:none}.quote-text{transition:none}.quote-out{transform:none}.drawer-backdrop,.settings-drawer{animation:none}.setting-switch,.setting-switch:after{transition:none}.prayer-chip,.drawer-salah-btn{transition:none}.prayer-menu.is-animated{animation:none}.app-header,.timer-card,.reveal{transition:none}.reveal:not(.is-in){transform:none}}