*{box-sizing:border-box;width:auto;margin:0;padding:0}body{flex-direction:column;align-items:center;min-height:100vh;font-family:Josefin Sans,sans-serif;font-size:12px;line-height:1.4;transition:background-color .3s;display:flex;position:relative}:root{--primary-blue:#3a7cfd;--check-gradient:linear-gradient(135deg, #5df 0%, #c058f3 100%);--transition-speed:.3s}.dark-theme{--body-bg:#171823;--card-bg:#25273c;--text-main:#c8cae4;--text-hover:#e4e5f1;--text-muted:#5b5e7e;--text-completed:#4d5067;--border-color:#393a4b;--shadow:#0006 0px 35px 50px -15px;--bg-image-desktop:url(/assets/bg-desktop-dark-DzAvO98h.jpg)}.light-theme{--body-bg:#fafafa;--card-bg:#fff;--text-main:#494c6b;--text-hover:#393a4b;--text-muted:#9495a5;--text-completed:#d1d2da;--border-color:#e3e4f1;--shadow:#c2c3d680 0px 35px 50px -15px;--bg-image-desktop:url(/assets/bg-desktop-light-BIdKokTn.jpg)}body{background-color:var(--body-bg);color:var(--text-main)}.header-bg{background-image:var(--bg-image-desktop);z-index:1;background-position:50%;background-size:cover;width:100%;height:300px;transition:background-image .3s;position:absolute;top:0;left:0}.container{z-index:1;width:100%;max-width:540px;padding:70px 24px 40px;position:relative}.app-header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.logo{color:#fff;letter-spacing:15px;font-size:2.5rem;font-weight:700;line-height:1}#theme-toggle{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:5px;transition:transform .2s;display:flex}#theme-toggle:hover{transform:rotate(15deg)scale(1.1)}.hidden{display:none!important}.input-section,.todo-item{background-color:var(--card-bg);width:100%;transition:background-color var(--transition-speed);border-radius:5px;align-items:center;padding:20px 24px;display:flex}.input-section{box-shadow:var(--shadow);margin-bottom:24px}.new-todo-form{align-items:center;width:100%;display:flex}#new-todo-input{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;margin-left:24px;font-family:inherit;font-size:18px}#new-todo-input::placeholder{color:var(--text-muted)}.checkbox-container{cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}.checkbox-circle-static{border:1px solid var(--border-color);width:24px;height:24px;transition:border-color var(--transition-speed);border-radius:50%}.todo-checkbox{opacity:0;cursor:pointer;width:24px;height:24px;position:absolute}.checkbox-circle{border:1px solid var(--border-color);width:24px;height:24px;transition:border-color var(--transition-speed), background var(--transition-speed);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.checkbox-container:hover .todo-checkbox:not(:checked)+.checkbox-circle{background:linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--check-gradient) border-box;border:1px solid #0000}.todo-checkbox:checked+.checkbox-circle{background:var(--check-gradient);border:none}.checkbox-circle svg{opacity:0;transition:opacity .15s}.todo-checkbox:checked+.checkbox-circle svg{opacity:1}.todo-card{background-color:var(--card-bg);box-shadow:var(--shadow);transition:background-color var(--transition-speed), box-shadow var(--transition-speed);border-radius:5px;margin-bottom:24px;overflow:hidden}.todo-list{flex-direction:column;display:flex}.todo-item{border-bottom:1px solid var(--border-color);cursor:grab;transition:background-color var(--transition-speed), border-color var(--transition-speed);border-radius:0;animation:.3s ease-out fadeIn;position:relative}.todo-item:active{cursor:grabbing}.todo-item.dragging{opacity:.4;border:2px dashed var(--primary-blue);background-color:#3a7cfd0d}.todo-item.drag-over{border-top:2px solid var(--primary-blue)}.todo-text{color:var(--text-main);transition:color var(--transition-speed);word-break:break-all;-webkit-user-select:none;user-select:none;flex:1;margin-left:24px;font-size:16px}.todo-item.completed .todo-text{color:var(--text-completed);text-decoration:line-through}.delete-btn{cursor:pointer;opacity:0;background:0 0;border:none;justify-content:center;align-items:center;padding:5px;transition:opacity .2s,transform .2s;display:flex}.todo-item:hover .delete-btn{opacity:3}.delete-btn:hover{transform:scale(1.2)}.delete-btn svg path{fill:var(--text-muted);transition:fill var(--transition-speed)}.delete-btn:hover svg path{fill:#812099}.list-footer{color:var(--text-muted);background-color:var(--card-bg);transition:background-color var(--transition-speed);justify-content:space-between;align-items:center;padding:20px 24px;font-size:14px;display:flex}.action-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition-speed);background:0 0;border:none;font-family:inherit;font-size:14px}.action-btn:hover{color:var(--text-hover)}.filters{gap:18px;display:flex}.filter-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition-speed);background:0 0;border:none;font-family:inherit;font-size:14px;font-weight:700}.filter-btn:hover{color:var(--text-hover)}.filter-btn.active{color:var(--primary-blue)}.mobile-filters-card{background-color:var(--card-bg);box-shadow:var(--shadow);transition:background-color var(--transition-speed), box-shadow var(--transition-speed);border-radius:5px;justify-content:center;margin-bottom:24px;padding:20px;display:flex}.desktop-only{display:flex}.mobile-only{display:none}.drag-hint{text-align:center;color:var(--text-muted);-webkit-user-select:none;user-select:none;margin-top:40px;font-size:14px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=576px){.header-bg{height:200px}.container{padding:48px 24px 30px}.logo{letter-spacing:10px;font-size:1.8rem}.input-section,.todo-item{padding:16px 20px;font-size:15px}#new-todo-input,.todo-text{margin-left:16px;font-size:15px}.checkbox-circle-static,.checkbox-circle,.todo-checkbox{width:20px;height:20px}.checkbox-circle svg{width:9px;height:9px}.desktop-only{display:none}.mobile-only{display:flex}.todo-item .delete-btn{opacity:1}}