:root{--focus-h:96;--focus-s:14%;--focus-l:52%;--short-h:168;--short-s:25%;--short-l:55%;--long-h:225;--long-s:35%;--long-l:65%;--h:var(--focus-h);--s:var(--focus-s);--l:var(--focus-l);--primary:hsl(var(--h), var(--s), var(--l));--primary-light:hsl(var(--h), var(--s), calc(var(--l) + 15%));--primary-dark:hsl(var(--h), var(--s), calc(var(--l) - 20%));--bg-color:hsl(var(--h), 20%, 95%);--text-color:hsl(var(--h), 30%, 20%);--text-muted:hsl(var(--h), 15%, 45%);--glass-bg:#ffffff26;--glass-border:#ffffff4d;--glass-shadow:0 20px 50px #0000001a;--transition:all .5s cubic-bezier(.23, 1, .32, 1);--glow:0 0 20px hsla(var(--h), var(--s), var(--l), .5)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);min-height:100dvh;transition:var(--transition);justify-content:center;align-items:center;font-family:Outfit,sans-serif;display:flex;overflow:hidden auto}.bg-overlay{background:radial-gradient(circle at center, hsla(var(--h), var(--s), var(--l), .15) 0%, transparent 60%);z-index:-1;width:200%;height:200%;animation:10s ease-in-out infinite alternate pulseBg;position:fixed;top:-50%;left:-50%}@keyframes pulseBg{0%{transform:scale(1)}to{transform:scale(1.1)rotate(5deg)}}#app{width:100%;max-width:1200px;min-height:100dvh;padding:1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px));z-index:1;flex-direction:column;justify-content:center;align-items:center;margin:auto;display:flex;position:relative}.app-layout{flex-direction:column;justify-content:center;align-items:center;gap:2rem;width:100%;display:flex}.timer-section{flex-direction:column;justify-content:center;align-items:center;gap:2rem;width:100%;max-width:420px;padding-top:1.5rem;display:flex;position:relative}@media (width>=1024px){.app-layout{flex-direction:row;justify-content:center;align-items:flex-start;gap:4rem}}.header{text-align:center;flex-direction:column;align-items:center;margin-top:0;display:flex}.brand-logo{filter:drop-shadow(0 8px 16px #0000001a);width:64px;height:64px;margin-bottom:.5rem}.brand-title{letter-spacing:-1px;color:var(--text-color);font-size:2.2rem;font-weight:600}.brand-subtitle{color:var(--text-muted);text-transform:uppercase;letter-spacing:3px;margin-top:.2rem;font-size:.9rem}.top-actions{z-index:10;gap:.75rem;display:flex;position:absolute;top:0;right:0}.action-btn{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);cursor:pointer;color:var(--text-color);transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:.6rem;display:flex}.action-btn:hover{background:#ffffff4d;transform:scale(1.1)}.action-btn i{width:18px;height:18px}.timer-container{border-radius:50%;justify-content:center;align-items:center;width:clamp(210px,32vh,300px);height:clamp(210px,32vh,300px);display:flex;position:relative}.glass-circle{background:var(--glass-bg);-webkit-backdrop-filter:blur(25px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.timer-circle-svg{width:100%;height:100%;position:absolute;top:0;left:0;transform:rotate(-90deg)}.circle-bg{fill:none;stroke:hsla(var(--h), var(--s), var(--l), .05);stroke-width:4px}.circle-progress{fill:none;stroke:var(--primary);stroke-width:6px;stroke-linecap:round;stroke-dasharray:848.23;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear, stroke var(--transition)}.timer-display{text-align:center;z-index:2}.timer-time-wrapper{justify-content:center;align-items:center;display:flex;position:relative}.timer-time{letter-spacing:-2px;color:var(--text-color);pointer-events:none;font-size:clamp(3rem,10vh,4.5rem);font-weight:600}.timer-time-input{color:#0000;caret-color:var(--primary);letter-spacing:-2px;text-align:center;cursor:pointer;z-index:3;background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:clamp(3rem,10vh,4.5rem);font-weight:600;transition:color .3s;position:absolute;inset:0}.timer-time-input:focus{color:var(--text-color)}.timer-time-input:focus+.timer-time{opacity:0}.timer-hint{color:var(--text-muted);opacity:.6;margin-top:-.5rem;font-size:.75rem;transition:opacity .3s,visibility .3s}.timer-sessions{color:var(--primary);opacity:.8;letter-spacing:.5px;margin-top:.2rem;font-size:.7rem;font-weight:600}.main-controls{gap:2rem;display:flex}.control-group{flex-direction:column;align-items:center;gap:.2rem;display:flex}.glass-btn{background:var(--glass-bg);-webkit-backdrop-filter:blur(15px);border:1px solid var(--glass-border);color:var(--text-color);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;display:flex;box-shadow:0 4px 15px #0000000d}.btn-round{border-radius:50%;width:65px;height:65px}.glass-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-5px)scale(1.05);box-shadow:0 10px 25px #0000001a}.glass-btn:active{transform:translateY(0)scale(.95)}.glass-btn i{width:28px;height:28px}#startBtn{background:var(--primary);color:#fff;box-shadow:var(--glow);border-color:#0000}#startBtn:hover{background:var(--primary-light);box-shadow:0 10px 30px hsla(var(--h), var(--s), var(--l), .6)}.control-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-size:.75rem;font-weight:600}.mode-tabs{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1.5rem;margin-bottom:0;padding:.4rem;display:flex}.mode-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:1.2rem;flex:1;padding:.6rem 1rem;font-family:inherit;font-size:.85rem;font-weight:600}.mode-btn.active{color:var(--text-color);background:#fff;box-shadow:0 4px 12px #0000000d}.floating-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(30px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:1rem;width:100%;max-width:340px;padding:1rem 1.5rem}.task-box{flex-direction:column;gap:.4rem;display:flex}.task-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-size:.7rem;font-weight:600}.task-input-wrapper{align-items:center;gap:.8rem;display:flex}.task-input{color:var(--text-color);background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:1.1rem}.task-icon{width:18px;height:18px;color:var(--primary);opacity:.6;width:18px;height:18px;opacity:.6}.todo-section{border-top:1px solid hsla(var(--h), var(--s), var(--l), .15);flex-direction:column;gap:1.2rem;width:100%;max-width:420px;min-height:400px;max-height:600px;margin-top:1rem;padding-top:2rem;display:flex}@media (width>=1024px){.todo-section{border-left:1px solid hsla(var(--h), var(--s), var(--l), .15);border-top:none;min-width:380px;height:calc(100vh - 4rem);max-height:700px;margin-top:0;padding-top:0;padding-left:3rem;position:sticky;top:2rem}}.todo-header{justify-content:space-between;align-items:center;display:flex}.todo-header h2{color:var(--text-color);letter-spacing:-.5px;font-size:1.2rem;font-weight:600}.todo-count{color:var(--text-muted);background:var(--glass-bg);border-radius:1rem;padding:.2rem .6rem;font-size:.8rem;font-weight:600}.todo-input-wrapper{background:var(--glass-bg);border:1px solid var(--glass-border);transition:var(--transition);border-radius:.8rem;align-items:center;padding:.5rem .8rem;display:flex}.todo-input-wrapper:focus-within{border-color:var(--primary);box-shadow:0 0 10px hsla(var(--h), var(--s), var(--l), .2)}.todo-input{color:var(--text-color);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:.95rem}.todo-input::placeholder{color:var(--text-muted);opacity:.6}.todo-add-btn{color:var(--primary);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.3rem;display:flex}.todo-add-btn:hover{background:var(--primary-light);color:#fff}.todo-add-btn i{width:18px;height:18px}.todo-list{flex-direction:column;flex:1;gap:.5rem;margin:0;padding-right:.5rem;list-style:none;display:flex;overflow-y:auto}.todo-list::-webkit-scrollbar{width:6px}.todo-list::-webkit-scrollbar-track{background:0 0}.todo-list::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:10px}.todo-item{border-bottom:1px solid hsla(var(--h), var(--s), var(--l), .1);border-radius:.5rem;align-items:center;gap:.8rem;padding:.75rem .5rem;transition:background-color .2s,opacity .2s,transform .2s;animation:.18s cubic-bezier(.16,1,.3,1) forwards todoItemFadeIn;display:flex}.todo-list:has(.dragging) .todo-item{transition:none!important;animation:none!important}.todo-item:last-child{border-bottom:none}@keyframes todoItemFadeIn{0%{opacity:0;transform:translateY(4px)scale(.99)}to{opacity:var(--todo-opacity,1);transform:translateY(0)scale(1)}}.todo-item.completed{--todo-opacity:.55}.todo-drag-handle{color:var(--text-muted);opacity:.35;cursor:grab;transition:var(--transition);flex-shrink:0;justify-content:center;align-items:center;padding:.2rem .1rem;display:flex}.todo-drag-handle i{width:16px;height:16px}.todo-item:hover .todo-drag-handle{opacity:.7}.todo-drag-handle:hover{color:var(--primary);opacity:1!important}.todo-drag-handle:active{cursor:grabbing}.todo-item.dragging{opacity:.4;background:var(--glass-bg);border:1px dashed var(--glass-border);box-shadow:var(--glass-shadow);transform:scale(.98)}.todo-checkbox{border:2px solid var(--text-muted);cursor:pointer;width:20px;height:20px;transition:var(--transition);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.todo-checkbox i{color:#fff;opacity:0;width:12px;height:12px;transition:opacity .2s}.todo-item.completed .todo-checkbox{background:var(--primary);border-color:var(--primary)}.todo-item.completed .todo-checkbox i{opacity:1}.todo-text{color:var(--text-color);word-break:break-word;flex:1;font-size:.95rem;transition:opacity .3s,color .3s}.todo-text-inner{display:inline-block;position:relative}.todo-text-inner:after{content:"";background:var(--text-color);opacity:.6;width:0;height:1.5px;transition:width .35s cubic-bezier(.16,1,.3,1);position:absolute;top:55%;left:0}.todo-item.completed .todo-text{opacity:.55}.todo-item.completed .todo-text-inner:after{width:100%}.todo-delete-btn{color:var(--text-muted);cursor:pointer;opacity:0;transition:var(--transition);background:0 0;border:none;justify-content:center;align-items:center;padding:.3rem;display:flex}.todo-item:hover .todo-delete-btn{opacity:.7}.todo-delete-btn:hover{color:#ff4d4f;opacity:1!important}.todo-delete-btn i{width:16px;height:16px}.todo-empty{text-align:center;color:var(--text-muted);opacity:.7;padding:2rem 0;font-size:.9rem}body.break-short{--h:var(--short-h);--s:var(--short-s);--l:var(--short-l)}body.break-long{--h:var(--long-h);--s:var(--long-s);--l:var(--long-l)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#app>*{animation:.8s cubic-bezier(.23,1,.32,1) forwards slideUp}.header{animation-delay:.1s}.timer-section{animation-delay:.2s}.mode-tabs{animation-delay:.3s}.task-manager{animation-delay:.4s}.modal-overlay{-webkit-backdrop-filter:blur(12px);z-index:1000;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-content{color:#1a1a1a;background:#fffffff2;border:1px solid #ffffff80;border-radius:2rem;width:90%;max-width:380px;padding:2rem;transition:transform .5s cubic-bezier(.23,1,.32,1);transform:translateY(30px)scale(.9);box-shadow:0 30px 60px #0000004d}body.break-short .modal-content,body.break-long .modal-content{background:#fffffffa}.modal-overlay.active .modal-content{transform:translateY(0)scale(1)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.2rem;display:flex}.modal-header h2{color:#000;letter-spacing:-.5px;font-size:1.5rem;font-weight:700}.modal-close{color:#666;cursor:pointer;transition:var(--transition);background:#0000000d;border:none;border-radius:50%;padding:.5rem;display:flex}.modal-close:hover{color:#000;background:#0000001a}.modal-body{color:#444;margin-bottom:2rem;font-size:1.05rem;line-height:1.6}.modal-footer{justify-content:flex-end;gap:1rem;display:flex}.modal-btn{cursor:pointer;transition:var(--transition);border:none;border-radius:1.2rem;padding:.8rem 1.6rem;font-family:inherit;font-size:.95rem;font-weight:700}.modal-btn.secondary{color:#333;background:#f0f0f0}.modal-btn.secondary:hover{background:#e5e5e5;transform:translateY(-2px)}.modal-btn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 20px hsla(var(--h), var(--s), var(--l), .3)}.modal-btn.primary:hover{background:var(--primary-light);box-shadow:0 15px 30px hsla(var(--h), var(--s), var(--l), .4);transform:translateY(-2px)}.timer-time-input:disabled{cursor:not-allowed;pointer-events:none}.timer-time-wrapper:has(.timer-time-input:disabled)+.timer-hint{opacity:0;visibility:hidden}.timer-time-input:disabled~.timer-time{opacity:.5}@media (height<=850px){#app{padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom,0px))}.brand-logo{width:clamp(28px,7vh,56px);height:clamp(28px,7vh,56px);margin-bottom:.1rem}.brand-title{font-size:clamp(1.2rem,3.5vh,2rem)}.brand-subtitle{letter-spacing:2px;font-size:.7rem}.btn-round{width:clamp(44px,7vh,60px);height:clamp(44px,7vh,60px)}.glass-btn i{width:clamp(18px,3.5vh,26px);height:clamp(18px,3.5vh,26px)}.floating-glass{max-width:280px;padding:.5rem 1rem}.task-label{letter-spacing:1px;font-size:.65rem}.task-input{font-size:1rem}.mode-tabs{margin-bottom:0;padding:.25rem}.mode-btn{padding:.4rem 1rem;font-size:.75rem}.control-label{font-size:.65rem}}@media (height<=600px){.header{margin-top:0}.brand-logo{width:24px;height:24px}.brand-title{font-size:1.1rem}.brand-subtitle{display:none}.timer-section{gap:.3rem}.timer-container{width:clamp(170px,42vh,200px);height:clamp(170px,42vh,200px)}.timer-time{font-size:clamp(2.5rem,8vh,3.5rem)}}@media (width<=1023px){#app{padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px))}.app-layout{gap:1.25rem}.timer-section{gap:1.25rem;max-width:380px;padding-top:.5rem}.brand-logo{width:44px;height:44px;margin-bottom:.25rem}.brand-title{letter-spacing:-.5px;font-size:1.8rem;font-weight:600}.brand-subtitle{letter-spacing:2px;font-size:.8rem}.timer-container{width:clamp(180px,24vh,230px);height:clamp(180px,24vh,230px)}.timer-time,.timer-time-input{font-size:clamp(2.4rem,8vh,3.4rem)}.timer-hint{margin-top:-.25rem;font-size:.7rem}.timer-sessions{margin-top:.1rem;font-size:.65rem}.btn-round{width:54px;height:54px}.glass-btn i{width:22px;height:22px}.control-label{letter-spacing:.5px;font-size:.65rem}.floating-glass{border-radius:.85rem;max-width:300px;padding:.65rem 1.25rem}.task-label{letter-spacing:1px;font-size:.65rem}.task-input{font-size:.95rem}.task-icon{width:16px;height:16px}.mode-tabs{border-radius:1.25rem;padding:.3rem}.mode-btn{border-radius:1rem;padding:.45rem .85rem;font-size:.75rem}.todo-section{border-top:1px dashed hsla(var(--h), var(--s), var(--l), .2);gap:1rem;margin-top:.5rem;padding-top:1.5rem}}