@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary: #6366f1;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--background: #0f172a;--surface: #1e293b;--surface-hover: #334155;--border: #334155;--text: #f8fafc;--text-muted: #94a3b8}[data-theme=light]{--background: #f1f5f9;--surface: #ffffff;--surface-hover: #e2e8f0;--border: #e2e8f0;--text: #1e293b;--text-muted: #64748b}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--text);min-height:100vh;transition:background .3s ease,color .3s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}button,input{font-family:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--surface-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--primary);color:#fff}.header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;margin-bottom:.75rem}.header-brand{display:flex;align-items:center;gap:.5rem}.brand-icon{font-size:1.5rem}.brand-name{font-size:1.25rem;font-weight:700;color:var(--text);margin:0;letter-spacing:-.5px}.header-actions{display:flex;gap:.4rem}.header-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface);border:none;border-radius:10px;color:var(--text-muted);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.header-btn:hover{background:var(--surface-hover);color:var(--text)}.header-btn:active{transform:scale(.95)}@media(max-width:480px){.header{padding:.5rem 0;margin-bottom:.5rem}.brand-name{font-size:1.1rem}.brand-icon{font-size:1.25rem}.header-btn{width:36px;height:36px;border-radius:8px}.header-actions{gap:.25rem}}@media(max-width:360px){.brand-name{font-size:1rem}.header-btn{width:32px;height:32px}}.mode-selector{display:flex;justify-content:center;gap:.35rem;padding:.4rem;background:var(--surface);border-radius:12px;margin-bottom:.75rem;flex-wrap:wrap}.mode-btn{padding:.65rem 1rem;border:2px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent}.mode-btn:hover:not(.active){background:var(--surface-hover);color:var(--text)}.mode-btn:active{transform:scale(.97)}.mode-btn.active{font-weight:600}@media(max-width:480px){.mode-selector{gap:.25rem;padding:.35rem;border-radius:10px}.mode-btn{padding:.5rem .75rem;font-size:.75rem;border-radius:6px}}@media(max-width:360px){.mode-btn{padding:.45rem .6rem;font-size:.7rem}}.timer-container{display:flex;justify-content:center;align-items:center;margin:1.5rem 0}.timer-ring-wrapper{position:relative;width:280px;height:280px}.timer-ring{width:100%;height:100%;transform:rotate(-90deg)}.timer-ring-background{fill:none;stroke:var(--surface);stroke-width:8}.timer-ring-progress{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.timer-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem}.timer-mode-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px}.timer-display{font-size:3.5rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-2px}.timer-sessions{font-size:.8rem;color:var(--text-muted)}@media(max-width:768px){.timer-container{margin:1rem 0}.timer-ring-wrapper{width:260px;height:260px}}@media(max-width:480px){.timer-ring-wrapper{width:220px;height:220px}.timer-display{font-size:2.75rem}.timer-mode-label{font-size:.75rem;letter-spacing:1px}.timer-sessions{font-size:.7rem}}@media(max-width:360px){.timer-ring-wrapper{width:190px;height:190px}.timer-display{font-size:2.25rem}.timer-content{gap:.25rem}}.controls-container{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin:1.5rem 0}.control-btn{display:flex;justify-content:center;align-items:center;border:none;cursor:pointer;transition:all .3s ease}.control-btn.primary{width:70px;height:70px;border-radius:50%;color:#fff}.control-btn.primary:hover{transform:scale(1.05)}.control-btn.primary:active{transform:scale(.95)}.control-btn.secondary{width:50px;height:50px;border-radius:50%;background:var(--surface);color:var(--text-muted)}.control-btn.secondary:hover{background:var(--surface-hover);color:var(--text);transform:scale(1.05)}.control-btn.secondary:active{transform:scale(.95)}@media(max-width:480px){.control-btn.primary{width:60px;height:60px}.control-btn.secondary{width:44px;height:44px}}.task-list-container{background:var(--surface);border-radius:16px;padding:1.5rem;margin-top:2rem}.task-list-title{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text)}.task-input-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.task-input{flex:1;padding:.75rem 1rem;border:1px solid var(--border);border-radius:10px;background:var(--background);color:var(--text);font-size:.95rem;transition:border-color .2s ease}.task-input:focus{outline:none;border-color:var(--primary)}.task-input::placeholder{color:var(--text-muted)}.add-task-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:10px;background:var(--primary);color:#fff;cursor:pointer;transition:all .2s ease}.add-task-btn:hover:not(:disabled){opacity:.9;transform:scale(1.02)}.add-task-btn:disabled{opacity:.5;cursor:not-allowed}.task-list{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto}.task-list::-webkit-scrollbar{width:4px}.task-list::-webkit-scrollbar-track{background:transparent}.task-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.empty-message{color:var(--text-muted);font-size:.9rem;text-align:center;padding:1rem 0}.task-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--background);border-radius:10px;transition:all .2s ease}.task-item:hover{background:var(--surface-hover)}.task-item.completed .task-text{text-decoration:line-through;color:var(--text-muted)}.task-toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;color:var(--text-muted);cursor:pointer;transition:color .2s ease}.task-toggle:hover{color:var(--primary)}.task-item.completed .task-toggle,.task-item.completed .check-icon{color:var(--success)}.task-text{flex:1;font-size:.95rem;color:var(--text)}.task-delete{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;color:var(--text-muted);cursor:pointer;opacity:0;transition:all .2s ease;border-radius:6px}.task-item:hover .task-delete{opacity:1}.task-delete:hover{color:var(--danger);background:#ef44441a}.quote-container{text-align:center;margin-top:1.5rem;padding:1rem}.quote-text{color:var(--text-muted);font-size:.95rem;font-style:italic;margin:0;line-height:1.5}.settings-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;animation:fadeIn .2s ease}.settings-modal{background:var(--surface);border-radius:16px;width:90%;max-width:420px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}.settings-header h2{margin:0;font-size:1.25rem;color:var(--text)}.settings-content{padding:1.5rem}.settings-section{margin-bottom:1.5rem}.settings-section:last-child{margin-bottom:0}.section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--text-muted)}.section-header h3{margin:0;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border)}.setting-row:last-child{border-bottom:none}.setting-row label{color:var(--text);font-size:.95rem}.setting-row input[type=number]{width:70px;padding:.5rem;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--text);font-size:.95rem;text-align:center}.setting-row input[type=number]:focus{outline:none;border-color:var(--primary)}.toggle-btn{position:relative;width:50px;height:28px;background:var(--background);border:none;border-radius:14px;cursor:pointer;transition:background .3s ease}.toggle-btn.active{background:var(--primary)}.toggle-slider{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .3s ease}.toggle-btn.active .toggle-slider{transform:translate(22px)}.volume-slider{flex:1;margin-right:1rem;accent-color:var(--primary)}.volume-value{color:var(--text-muted);font-size:.9rem;min-width:40px;text-align:right}.settings-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid var(--border)}.btn-primary,.btn-secondary{padding:.6rem 1.25rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--primary);border:none;color:#fff}.btn-primary:hover{opacity:.9}.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn-secondary:hover{background:var(--surface-hover);color:var(--text)}.stats-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;animation:fadeIn .2s ease}.stats-modal{background:var(--surface);border-radius:16px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}.stats-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}.stats-header h2{margin:0;font-size:1.25rem;color:var(--text)}.stats-content{padding:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.stat-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--background);border-radius:12px}.stat-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px}.stat-info{display:flex;flex-direction:column}.stat-value{font-size:1.25rem;font-weight:700;color:var(--text)}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.weekly-overview{background:var(--background);border-radius:12px;padding:1.25rem}.weekly-overview h3{margin:0 0 1rem;font-size:.9rem;font-weight:600;color:var(--text)}.weekly-chart{display:flex;justify-content:space-between;align-items:flex-end;height:100px;gap:.5rem}.day-bar-container{display:flex;flex-direction:column;align-items:center;flex:1;height:100%}.day-bar{width:100%;max-width:30px;background:linear-gradient(180deg,var(--primary) 0%,rgba(99,102,241,.6) 100%);border-radius:4px 4px 0 0;margin-top:auto;transition:height .3s ease}.day-label{font-size:.7rem;color:var(--text-muted);margin-top:.5rem;text-transform:uppercase}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}.ambient-sound-container{background:var(--surface);border-radius:16px;padding:1.25rem;margin-top:1.5rem}.ambient-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ambient-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text)}.ambient-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--background);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .2s ease}.ambient-toggle:hover{background:var(--surface-hover);color:var(--text)}.ambient-toggle.playing{background:var(--primary);border-color:var(--primary);color:#fff}.ambient-toggle.playing:hover{opacity:.9}.sound-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem;margin-bottom:1rem}.sound-option{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .5rem;background:var(--background);border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s ease}.sound-option:hover{background:var(--surface-hover)}.sound-option.active{border-color:var(--primary);background:#6366f11a}.sound-emoji{font-size:1.5rem}.sound-name{font-size:.75rem;color:var(--text-muted);font-weight:500}.sound-option.active .sound-name{color:var(--primary)}.ambient-volume{display:flex;align-items:center;gap:.75rem}.ambient-volume label{font-size:.85rem;color:var(--text-muted);min-width:50px}.ambient-volume .volume-slider{flex:1;accent-color:var(--primary)}.ambient-volume .volume-value{font-size:.85rem;color:var(--text-muted);min-width:40px;text-align:right}@media(max-width:480px){.sound-options{grid-template-columns:repeat(3,1fr)}.ambient-header{flex-direction:column;gap:.75rem;align-items:flex-start}}.bg-selector-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.bg-selector-modal{background:var(--surface);border-radius:16px;width:90%;max-width:400px;max-height:80vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bg-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.bg-selector-title{display:flex;align-items:center;gap:.5rem;color:var(--text)}.bg-selector-title h2{margin:0;font-size:1.1rem}.bg-selector-content{padding:1rem}.custom-image-section{margin-bottom:1rem}.custom-image-section h3{margin:0 0 .75rem;font-size:.85rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.custom-image-controls{display:flex;gap:.5rem;margin-bottom:.75rem}.upload-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--primary);border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.upload-btn:hover{opacity:.9}.remove-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--background);border:1px solid var(--border);border-radius:8px;color:var(--danger);cursor:pointer;transition:all .2s ease}.remove-btn:hover{background:#ef44441a}.custom-preview-btn{position:relative;width:100%;height:80px;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s ease;background:none;padding:0}.custom-preview-btn:hover{border-color:var(--border)}.custom-preview-btn.active{border-color:var(--primary)}.custom-preview-image{width:100%;height:100%;background-size:cover;background-position:center}.glossy-badge{position:absolute;bottom:.5rem;right:.5rem;padding:.25rem .5rem;background:#ffffffe6;border-radius:4px;font-size:.7rem;font-weight:600;color:#1e293b}.bg-divider{display:flex;align-items:center;margin:1rem 0;gap:.75rem}.bg-divider:before,.bg-divider:after{content:"";flex:1;height:1px;background:var(--border)}.bg-divider span{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.bg-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem;background:transparent;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s ease}.bg-option:hover{background:var(--surface-hover)}.bg-option.active{border-color:var(--primary);background:#6366f11a}.bg-preview{width:60px;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center}.no-bg-text{font-size:1.5rem;color:var(--text-muted)}.bg-name{font-size:.75rem;color:var(--text-muted);font-weight:500}.bg-option.active .bg-name{color:var(--primary)}.close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;border-radius:6px;transition:all .2s ease}.close-btn:hover{background:var(--surface-hover);color:var(--text)}@media(max-width:360px){.bg-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.bg-preview{width:50px;height:50px}.bg-name{font-size:.65rem}}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;transition:background .3s ease;overflow-x:hidden;position:relative}.app.has-custom-bg{background-attachment:fixed!important}.glossy-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#ffffff26,#ffffff0d,#ffffff1a);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:none;z-index:0}.app.has-custom-bg .app-container{position:relative;z-index:1}.app-container{max-width:480px;width:100%;margin:0 auto;padding:1rem 1.5rem 2rem;flex:1}.main-content{display:flex;flex-direction:column;align-items:center}.keyboard-hint{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--text-muted)}.keyboard-hint kbd{display:inline-block;padding:.2rem .5rem;background:var(--surface);border-radius:4px;font-family:inherit;font-size:.75rem;margin:0 .25rem}@media(max-width:768px){.app-container{padding:.75rem 1.25rem 1.5rem}}@media(max-width:480px){.app-container{padding:.5rem .75rem 1.5rem}.keyboard-hint{display:none}}@media(max-width:360px){.app-container{padding:.5rem .5rem 1rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.main-content{animation:fadeInUp .4s ease}@supports (padding: env(safe-area-inset-bottom)){.app-container{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}}