:root{--bg:#f5f5f5;--surface:#fff;--text:#1a1a1a;--muted:#666;--border:#ccc;--accent:#4f46e5;--accent-hover:#4338ca;--accent-light:#7682e5;--danger:#ef4444;--shadow:0 1px 3px #00000012}@media (prefers-color-scheme:dark){:root{--bg:#111;--surface:#1e1e1e;--text:#e8e8e8;--muted:#888;--border:#2e2e2e;--accent:#818cf8;--accent-hover:#6366f1;--shadow:none}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;justify-content:center;align-items:flex-start;min-height:100vh;padding:3rem 1rem;font-family:system-ui,-apple-system,sans-serif;display:flex}a{color:inherit;text-decoration:none}.container{width:100%;max-width:520px}.title{margin-bottom:.25rem;font-size:2rem;font-weight:700}.subtitle{color:var(--muted);margin-bottom:1.5rem;font-size:.9rem}.add-form{gap:.5rem;margin-bottom:1.5rem;display:flex}.add-input{border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;outline:none;flex:1;padding:.6rem .9rem;font-size:1rem;transition:border-color .15s}.add-input:focus{border-color:var(--accent)}.add-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:.6rem 1.2rem;font-size:1rem;transition:background .15s}.add-btn:hover{background:var(--accent-hover)}.todo-list{flex-direction:column;gap:.5rem;list-style:none;display:flex}.todo-item{background:var(--surface);box-shadow:var(--shadow);border:1px solid #0000;border-radius:10px;align-items:center;gap:.75rem;padding:.75rem 1rem;transition:opacity .15s;display:flex}@media (prefers-color-scheme:dark){.todo-item{border-color:var(--border)}}.todo-item.done{opacity:.5}.todo-check-form{display:contents}.check-btn{cursor:pointer;color:var(--accent);text-align:center;background:0 0;border:none;min-width:1.5rem;padding:0;font-size:1.1rem}.todo-text{flex:1;font-size:1rem}.todo-item.done .todo-text{text-decoration:line-through}.delete-btn{cursor:pointer;color:var(--border);background:0 0;border:none;padding:0;font-size:.9rem;transition:color .15s}.delete-btn:hover{color:var(--danger)}.empty{text-align:center;color:var(--muted);padding:2rem 0;font-size:.95rem}