:root{color:#1f2328;--accent:#f6821f;--muted:#6b7280;--border:#e5e7eb;background:#f6f7f9;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}.app{max-width:560px;margin:64px auto;padding:0 16px}.app header h1{color:var(--accent);letter-spacing:-1px;margin:0;font-size:56px;font-weight:200}.subtitle{color:var(--muted);margin:4px 0 24px}.new-todo{gap:8px;margin-bottom:16px;display:flex}.new-todo input{border:1px solid var(--border);background:#fff;border-radius:8px;flex:1;padding:12px 14px;font-size:16px}.new-todo input:focus,.todo-item .edit:focus{outline:2px solid var(--accent);outline-offset:-1px}button{font:inherit;cursor:pointer;border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 14px}button:disabled{cursor:default;opacity:.5}.new-todo button{background:var(--accent);border-color:var(--accent);color:#fff}.todo-list{border:1px solid var(--border);background:#fff;border-radius:8px;margin:0;padding:0;list-style:none;overflow:hidden}.todo-list:empty{display:none}.todo-item{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:12px 14px;display:flex}.todo-item:last-child{border-bottom:none}.todo-item .toggle{width:18px;height:18px;accent-color:var(--accent)}.todo-item label{cursor:text;word-break:break-word;flex:1}.todo-item.completed label{color:var(--muted);text-decoration:line-through}.todo-item.pending{opacity:.6}.todo-item .edit{font:inherit;border:1px solid var(--border);border-radius:6px;flex:1;padding:4px 8px}.todo-item .destroy{color:var(--muted);visibility:hidden;background:0 0;border:none;padding:0 4px;font-size:20px;line-height:1}.todo-item:hover .destroy,.todo-item .destroy:focus{visibility:visible}.todo-item .destroy:hover{color:#dc2626}.footer{color:var(--muted);justify-content:space-between;align-items:center;margin-top:12px;font-size:14px;display:flex}.filters{gap:4px;display:flex}.filters button{background:0 0;border-color:#0000;padding:4px 10px}.filters button.selected{border-color:var(--accent);color:var(--accent)}.error{color:#dc2626}.loading{color:var(--muted)}.error button{margin-left:8px;padding:2px 8px;font-size:13px}.todo-item .error{white-space:nowrap;font-size:13px}
