*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #F4F3FF;--surface: #FFFFFF;--purple: #7C3AED;--purple-lt:#EDE9FE;--purple-dk:#5B21B6;--green: #059669;--green-lt: #D1FAE5;--amber: #D97706;--amber-lt: #FEF3C7;--red: #DC2626;--red-lt: #FEE2E2;--text: #1E1B4B;--muted: #6B7280;--border: #E5E7EB;--sans: "Inter", sans-serif;--mono: "JetBrains Mono", monospace;--radius: 12px;--shadow: 0 4px 24px rgba(124,58,237,.08)}html,body{min-height:100vh}body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--purple);padding:24px 5%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.logo{display:flex;align-items:center;gap:14px}.logo-icon{font-size:36px}.logo h1{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.5px}.logo p{font-size:12px;color:#ffffffa6;font-family:var(--mono);margin-top:2px}.header-stats{display:flex;gap:12px}.stat{background:#ffffff1f;border-radius:10px;padding:8px 16px;text-align:center;min-width:60px}.stat span{display:block;font-size:20px;font-weight:700;color:#fff}.stat{font-size:11px;color:#ffffffb3}.stat.green span{color:#6ee7b7}.stat.amber span{color:#fcd34d}.main{max-width:680px;width:100%;margin:32px auto;padding:0 5% 60px}.input-card{display:flex;gap:10px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);transition:border-color .2s}.input-card:focus-within{border-color:var(--purple)}.todo-input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:15px;color:var(--text);background:transparent;padding:6px 10px}.todo-input::placeholder{color:#9ca3af}.btn-add{background:var(--purple);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}.btn-add:hover{background:var(--purple-dk)}.error-bar{margin-top:12px;background:var(--red-lt);color:var(--red);border-radius:8px;padding:10px 16px;font-size:13px;font-weight:500}.filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:20px 0 14px}.filter-tabs{display:flex;gap:6px}.tab{padding:7px 14px;border-radius:99px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.tab:hover{border-color:var(--purple);color:var(--purple)}.tab.active{background:var(--purple-lt);color:var(--purple);border-color:var(--purple);font-weight:600}.btn-clear{background:none;border:1.5px solid var(--border);border-radius:8px;padding:7px 13px;font-size:12px;color:var(--muted);cursor:pointer;transition:all .2s}.btn-clear:hover{border-color:var(--red);color:var(--red);background:var(--red-lt)}.todo-list{display:flex;flex-direction:column;gap:8px}.todo-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;transition:all .2s;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.todo-item:hover{border-color:#c4b5fd;box-shadow:0 2px 12px #7c3aed0f}.todo-item.done{background:#fafafa}.checkbox{width:22px;height:22px;flex-shrink:0;border-radius:6px;border:2px solid var(--border);background:#fff;cursor:pointer;font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s}.checkbox.checked{background:var(--green);border-color:var(--green)}.checkbox:hover{border-color:var(--purple)}.todo-title{flex:1;font-size:15px;color:var(--text);cursor:pointer}.done .todo-title{text-decoration:line-through;color:#9ca3af}.edit-input{flex:1;font-size:15px;font-family:var(--sans);border:none;border-bottom:2px solid var(--purple);outline:none;background:transparent;color:var(--text);padding:2px 4px}.todo-date{font-family:var(--mono);font-size:11px;color:#c4b5fd;white-space:nowrap}.actions{display:flex;gap:4px}.btn-edit,.btn-del{background:none;border:none;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s}.todo-item:hover .btn-edit,.todo-item:hover .btn-del{opacity:1}.btn-edit:hover{background:var(--purple-lt)}.btn-del:hover{background:var(--red-lt)}.empty{text-align:center;padding:56px 20px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}.empty-icon{font-size:48px}.empty p{font-size:15px}.spinner{width:36px;height:36px;border:3px solid var(--purple-lt);border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hint{text-align:center;margin-top:20px;font-size:12px;color:#c4b5fd}@media (max-width: 480px){.header{padding:18px 5%}.logo h1{font-size:18px}.header-stats{gap:8px}.stat{padding:6px 12px}.filter-row{flex-direction:column;align-items:flex-start}.todo-date{display:none}.btn-edit,.btn-del{opacity:1}}