:root,[data-theme=light]{--bg: #faf7f2;--fg: #1a1a1a;--muted: #6b7280;--accent: #1a4d2e;--accent-light: #2d6a4f;--accent-glow: rgba(26, 77, 46, .2);--card: rgba(255, 255, 255, .85);--card-solid: #ffffff;--border: #e2e8f0;--pattern-color: rgba(26, 77, 46, .06);--status-ontime: #059669;--status-ontime-bg: #ecfdf5;--status-late: #d97706;--status-late-bg: #fffbeb;--status-missed: #dc2626;--status-missed-bg: #fef2f2;--status-neutral: #f4f4f5;--glass-bg: rgba(255, 255, 255, .7)}[data-theme=dark]{--bg: #111827;--fg: #f3f4f6;--muted: #9ca3af;--accent: #34d399;--accent-light: #6ee7b7;--accent-glow: rgba(52, 211, 153, .2);--card: rgba(31, 41, 55, .85);--card-solid: #1f2937;--border: #374151;--status-ontime: #34d399;--status-ontime-bg: rgba(52, 211, 153, .1);--status-late: #fbbf24;--status-late-bg: rgba(251, 191, 36, .1);--status-missed: #f87171;--status-missed-bg: rgba(248, 113, 113, .1);--status-neutral: rgba(55, 65, 81, .5);--glass-bg: rgba(17, 24, 39, .8)}[data-theme=sepia]{--bg: #f0e6d2;--fg: #3e2723;--muted: #5d4037;--accent: #8b5a2b;--accent-light: #a1887f;--accent-glow: rgba(139, 90, 43, .2);--card: rgba(255, 253, 245, .9);--card-solid: #fffdf5;--border: #d7ccc8;--status-ontime: #2e7d32;--status-ontime-bg: #e8f5e9;--status-late: #e65100;--status-late-bg: #fff3e0;--status-missed: #c62828;--status-missed-bg: #ffebee;--status-neutral: #efebe9;--glass-bg: rgba(240, 230, 210, .9)}.salah-page{min-height:calc(100vh - 80px);position:relative}.salah-pattern{position:fixed;inset:0;pointer-events:none;z-index:0;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1' stroke-opacity='0.1'%3E%3Cpath d='M40 0L80 40L40 80L0 40L40 0zm0 10L10 40l30 30 30-30L40 10z' /%3E%3C/g%3E%3C/svg%3E");background-blend-mode:multiply}.salah-gradient{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at top,transparent 0%,var(--bg) 70%),radial-gradient(ellipse at bottom right,var(--accent-glow) 0%,transparent 50%)}.salah-content{position:relative;z-index:10}.salah-header{display:flex;flex-direction:column;gap:16px}@media(min-width:640px){.salah-header{flex-direction:row;align-items:flex-end;justify-content:space-between}}.salah-header-title p{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:4px}.salah-header-title h1{font-family:Space Grotesk,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}@media(min-width:768px){.salah-header-title h1{font-size:36px}}.salah-header-controls{display:flex;align-items:center;gap:12px}.salah-month-nav{display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:var(--card);border:1px solid var(--border)}.salah-month-display{font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:700;min-width:140px;text-align:center}.salah-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:16px;color:var(--muted)}.salah-loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.prayer-grid{display:grid;gap:3px;background:var(--border);border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #0000000f}.grid-header{background:var(--card-solid);padding:14px 10px;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;border-bottom:1px solid var(--border)}.day-cell{background:var(--card);backdrop-filter:blur(4px);padding:14px 10px;font-weight:600;text-align:center;font-size:14px;color:var(--fg);display:flex;align-items:center;justify-content:center;position:relative}.day-cell.is-today{background:linear-gradient(135deg,var(--status-ontime-bg) 0%,var(--status-ontime-bg) 100%);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent-light);z-index:2}.prayer-cell{background:var(--status-neutral);min-height:52px;cursor:pointer;position:relative;transition:all .15s ease-out;display:flex;align-items:center;justify-content:center;border:2px solid transparent}.prayer-cell svg{width:18px;height:18px;stroke-width:2.5;opacity:.15;transition:all .15s ease}.prayer-cell:hover{background:var(--border);z-index:5}.prayer-cell:active{transform:scale(.95)}.prayer-cell:focus-visible{outline:none;z-index:10;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.prayer-cell[data-status=ontime]{background:var(--status-ontime-bg)}.prayer-cell[data-status=ontime] svg{opacity:1;stroke:var(--status-ontime)}.prayer-cell[data-status=late]{background:var(--status-late-bg)}.prayer-cell[data-status=late] svg{opacity:1;stroke:var(--status-late)}.prayer-cell[data-status=missed]{background:var(--status-missed-bg)}.prayer-cell[data-status=missed] svg{opacity:1;stroke:var(--status-missed)}.floating-selector{position:fixed;z-index:1100;background:var(--card-solid);border-radius:12px;box-shadow:0 16px 40px #0003;opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .15s ease,transform .15s ease;pointer-events:none;border:1px solid var(--border);padding:6px;min-width:140px}.floating-selector:before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:var(--card-solid);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:translate(-50%) rotate(45deg);border-radius:2px}.floating-selector.arrow-flip:before{top:auto;bottom:-6px;border-left:none;border-top:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:translate(-50%) rotate(45deg)}.floating-selector.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.selector-option{padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;text-align:left;width:100%;display:flex;align-items:center;gap:10px;border-radius:6px;color:var(--fg)}.selector-option:hover,.selector-option:focus{background:var(--status-neutral);outline:none}.selector-option[data-status=ontime]{color:var(--status-ontime)}.selector-option[data-status=late]{color:var(--status-late)}.selector-option[data-status=missed]{color:var(--status-missed)}.selector-option.clear{color:var(--muted);border-top:1px solid var(--border);border-radius:0 0 6px 6px;margin-top:4px;padding-top:10px}.nav-btn{background:var(--card-solid);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .2s ease;color:var(--fg);font-weight:600;display:flex;align-items:center;justify-content:center}.nav-btn:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--card-solid);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--fg);transition:all .3s ease}.theme-toggle:hover{transform:rotate(15deg);border-color:var(--accent)}.visibility-toggle{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:var(--card-solid);border:1px solid var(--border);cursor:pointer;color:var(--fg);font-size:13px;font-weight:600;transition:all .2s ease}.visibility-toggle:hover{border-color:var(--accent);color:var(--accent)}.stat-card{background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center;transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000f}.stat-number{font-family:Space Grotesk,sans-serif;font-size:32px;font-weight:700;line-height:1;margin-bottom:4px}.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:16px;background:var(--accent);color:#fff;border:none;box-shadow:0 8px 24px var(--accent-glow);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;z-index:50}.fab:hover{transform:scale(1.05)}.analytics-overlay{position:fixed;inset:0;background:#0006;backdrop-filter:blur(4px);z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease}.analytics-overlay.visible{opacity:1;pointer-events:auto}.analytics-drawer{position:fixed;bottom:0;left:0;right:0;height:90vh;background:var(--glass-bg);border-top-left-radius:24px;border-top-right-radius:24px;z-index:101;transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:0 -10px 40px #0000001a;overflow:hidden;pointer-events:none}.analytics-drawer.visible{transform:translateY(0);pointer-events:auto}@media(min-width:768px){.analytics-drawer{inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(.95);opacity:0;width:500px;height:auto;max-height:85vh;border-radius:20px;transition:opacity .3s ease,transform .3s ease}.analytics-drawer.visible{transform:translate(-50%,-50%) scale(1);opacity:1}}.drawer-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto}@media(min-width:768px){.drawer-handle{display:none}}.drawer-header{padding:0 24px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.tab-nav{display:flex;gap:8px;padding:16px 24px 0;overflow-x:auto}.tab-btn{padding:8px 16px;border-radius:8px;font-weight:600;font-size:14px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap}.tab-btn.active{background:var(--accent);color:#fff}.tab-btn:not(.active):hover{background:var(--status-neutral)}.tab-content{flex:1;overflow-y:auto;padding:24px;display:none}.tab-content.active{display:block;animation:fadeIn .3s ease}.chart-container{display:flex;align-items:center;justify-content:center;padding:24px 0;position:relative}.donut-chart{width:180px;height:180px;transform:rotate(-90deg)}.donut-segment{fill:none;stroke-width:20;stroke-linecap:round}.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.bar-chart-item{margin-bottom:16px}.bar-label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;font-weight:500}.bar-track{height:8px;background:var(--status-neutral);border-radius:4px;overflow:hidden}.bar-fill{height:100%;border-radius:4px;transition:width .5s ease-out;background:var(--accent)}.streak-badge{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-light) 100%);color:#fff;padding:20px;border-radius:16px;text-align:center;box-shadow:0 8px 20px var(--accent-glow)}.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.heatmap-day{aspect-ratio:1;border-radius:4px;background:var(--status-neutral);transition:transform .1s}.heatmap-day:hover{transform:scale(1.2)}.heatmap-day.level-1{background:var(--status-late-bg);border:1px solid var(--status-late)}.heatmap-day.level-2{background:var(--status-ontime-bg);border:1px solid var(--status-ontime)}.heatmap-day.level-3{background:var(--status-ontime)}.insight-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;align-items:center;gap:12px}.insight-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pattern-layer{position:fixed;inset:0;pointer-events:none;z-index:0;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1' stroke-opacity='0.1'%3E%3Cpath d='M40 0L80 40L40 80L0 40L40 0zm0 10L10 40l30 30 30-30L40 10z' /%3E%3C/g%3E%3C/svg%3E");background-blend-mode:multiply}.gradient-layer{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at top,transparent 0%,var(--bg) 70%),radial-gradient(ellipse at bottom right,var(--accent-glow) 0%,transparent 50%)}.content-wrapper{position:relative;z-index:10}@media(max-width:640px){.prayer-grid-wrapper{overflow-x:auto;margin:0 -16px;padding:0 16px 10px}.prayer-grid{min-width:500px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.font-display{font-family:Space Grotesk,sans-serif}.login-required{text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.login-required-icon{width:80px;height:80px;border-radius:50%;background:var(--accent-glow);display:flex;align-items:center;justify-content:center;margin-bottom:24px}.login-required-icon svg{width:40px;height:40px;stroke:var(--accent)}.login-required h2{font-family:Space Grotesk,sans-serif;font-size:28px;font-weight:700;margin-bottom:12px;color:var(--fg)}.login-required p{color:var(--muted);margin-bottom:32px;font-size:16px;max-width:300px}.login-required .btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:14px 28px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;transition:all .2s ease}.login-required .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--accent-glow);background:var(--accent-light)}.login-required .btn-primary svg{width:18px;height:18px}.salah-loading{text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.view-toggle-btn{border:none;background:transparent;cursor:pointer;padding:8px 16px;transition:all .2s}.view-toggle-btn:hover,.user-result:hover{background:var(--status-neutral)}.btn-primary{background:var(--accent);color:#fff;border:none;cursor:pointer;padding:8px 16px;border-radius:8px;font-weight:600;transition:all .2s}.btn-primary:hover{background:var(--accent-light)}