@import"https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap";:root{font-family:Funnel Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--bg-primary: #f0f4f8;--bg-secondary: #ffffff;--bg-tertiary: #e1e8f0;--text-primary: #0a192f;--text-secondary: #4a5568;--text-accent: #0056b3;--text-muted: #718096;--border-color: #e2e8f0;--border-accent: #0056b3;--accent-primary: #0056b3;--accent-secondary: #e6f0fa;--accent-hover: #004494;--success-color: #38a169;--success-bg: #f0fff4;--color-session-subuh: #4299e1;--color-session-dhuhr: #ecc94b;--color-session-ashar: #ed8936;--color-session-maghrib: #e53e3e;--color-session-isya: #805ad5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{--bg-primary: #050505;--bg-secondary: #121212;--bg-tertiary: #1e1e1e;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-accent: #63b3ed;--text-muted: #a0aec0;--border-color: #2d3748;--border-accent: #3182ce;--accent-primary: #3182ce;--accent-secondary: #1a365d;--accent-hover: #2b6cb0;--success-color: #48bb78;--success-bg: #22543d;--color-session-subuh: #63b3ed;--color-session-dhuhr: #f6e05e;--color-session-ashar: #f6ad55;--color-session-maghrib: #fc8181;--color-session-isya: #b794f4}body{margin:0;min-height:100vh;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer;border:none;background:none}.app-container{max-width:480px;margin:0 auto;padding:20px 20px 60px}.about-container{max-width:800px;margin:0 auto;padding:20px 20px 80px}.card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:20px;box-shadow:0 4px 6px #0000000d}[data-theme=dark] .card{box-shadow:0 4px 6px #0003}.progress-circle{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}.styled-input{width:100%;box-sizing:border-box;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;padding:12px 14px;color:var(--text-primary);font-size:16px;font-family:inherit;outline:none;transition:all .2s}.styled-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-secondary)}.primary-btn{padding:14px;background:var(--accent-primary);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s,transform .1s;text-align:center}.primary-btn:hover:not(:disabled){background:var(--accent-hover)}.primary-btn:active:not(:disabled){transform:translateY(1px)}.secondary-btn{padding:14px 20px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;color:var(--text-secondary);font-size:14px;cursor:pointer;font-family:inherit;transition:all .2s;text-align:center}.secondary-btn:hover{background:var(--border-color);color:var(--text-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes twinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}