:root{--bg-color:#0f172a;--surface-color:#1e293b;--text-main:#f1f5f9;--text-muted:#94a3b8;--electric-purple:#a855f7;--purple-hover:#c084fc;--danger:#ef4444;--border-radius:12px;--shadow:0 10px 25px -5px #0000004d, 0 8px 10px -6px #0000004d}html,body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{min-width:230px;max-width:550px;margin:0 auto;padding:40px 20px}.todoapp{background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow);border:1px solid #ffffff0d;margin-top:100px;position:relative;overflow:hidden}.todoapp h1{text-align:center;width:100%;color:var(--electric-purple);text-transform:uppercase;letter-spacing:-2px;margin:0;font-size:60px;font-weight:800;position:absolute;top:-100px}.new-todo{color:var(--text-main);box-sizing:border-box;background:#ffffff08;border:none;border-bottom:1px solid #ffffff1a;outline:none;width:100%;padding:20px 20px 20px 60px;font-size:18px;transition:background .3s}.new-todo:focus{background:#ffffff0d}.main{z-index:2;position:relative}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{border-bottom:1px solid #ffffff0d;font-size:18px;transition:background .2s;position:relative}.todo-list li:hover{background:#ffffff05}.todo-list li label{word-break:break-all;color:var(--text-main);padding:15px 15px 15px 60px;line-height:1.2;transition:color .4s;display:block}.todo-list li.completed label{color:var(--text-muted);opacity:.6;text-decoration:line-through}.todo-list li .toggle{text-align:center;border:2px solid var(--electric-purple);cursor:pointer;appearance:none;border-radius:50%;width:40px;height:40px;margin:auto 0 auto 10px;transition:all .2s;position:absolute;top:0;bottom:0}.todo-list li .toggle:checked{background-color:var(--electric-purple);border-color:var(--electric-purple)}.todo-list li .toggle:checked:after{content:"✔";color:#fff;text-align:center;font-size:14px;line-height:38px;display:block}.todo-list li .destroy{width:40px;height:40px;color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;margin:auto 0;font-size:20px;transition:all .2s;position:absolute;top:0;bottom:0;right:15px}.todo-list li:hover .destroy{opacity:1}.todo-list li .destroy:hover{color:var(--danger)}.todo-list li .destroy:after{content:"✕"}.footer{color:var(--text-muted);border-top:1px solid #ffffff1a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:15px 20px;font-size:14px;display:flex}.filters{gap:5px;margin:0;padding:0;list-style:none;display:flex}.filters li a{color:var(--text-muted);border:1px solid #0000;border-radius:20px;padding:4px 12px;text-decoration:none;transition:all .2s}.filters li a:hover{color:var(--electric-purple)}.filters li a.selected{background:var(--electric-purple);color:#fff}.clear-completed{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:13px}.clear-completed:hover{color:var(--electric-purple);text-decoration:underline}.info{color:var(--text-muted);text-align:center;margin-top:50px;font-size:12px}.info a{color:var(--electric-purple);text-decoration:none}.toggle-all,.hidden{display:none}