:root{color-scheme:light dark;--bg:#fafafa;--fg:#171717;--mu:#737373;--card:#fff;--bd:#e5e5e5;--ac:#4f46e5}
@media(prefers-color-scheme:dark){:root{--bg:#0a0a0a;--fg:#fafafa;--mu:#a3a3a3;--card:#171717;--bd:#2a2a2a;--ac:#818cf8}}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:grid;place-items:start center;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,sans-serif}
main{width:100%;max-width:640px;padding:48px 16px}
h1{font-size:2rem;margin:0 0 8px}
p{color:var(--mu)}
form{display:flex;gap:8px;margin:24px 0 16px}
input[type=text]{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--fg);font:inherit}
input[type=text]:focus{outline:2px solid var(--ac);outline-offset:1px}
button{padding:10px 16px;border:0;border-radius:8px;background:var(--ac);color:#fff;font:inherit;cursor:pointer}
button:hover{opacity:.9}
ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:1px solid var(--bd);border-radius:8px}
li span{flex:1;word-break:break-word}
li.done span{text-decoration:line-through;color:var(--mu)}
li input[type=checkbox]{width:18px;height:18px;accent-color:var(--ac)}
button.del{background:transparent;color:var(--mu);padding:0 8px;font-size:1.25rem;line-height:1.4}
button.del:hover{color:#dc2626}
.empty{text-align:center}
.err{color:#dc2626}