:root{--bg:#f5f5f7;--card-bg:#fff;--text:#1f2023;--text-muted:#6b6b70;--border:#e2e2e6;--accent:#4f46e5;--accent-hover:#4338ca;--danger:#e5484d;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);min-height:100vh;margin:0}.app{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;max-width:480px;margin:60px auto;padding:32px;box-shadow:0 4px 16px #0000000f}.app h1{text-align:center;margin:0 0 24px;font-size:28px}.todo-form{gap:8px;margin-bottom:20px;display:flex}.todo-form input{border:1px solid var(--border);border-radius:8px;flex:1;padding:10px 12px;font-size:15px}.todo-form input:focus{outline:2px solid var(--accent);outline-offset:1px}.todo-form button{color:#fff;background:var(--accent);cursor:pointer;border:none;border-radius:8px;padding:10px 18px;font-size:15px}.todo-form button:hover{background:var(--accent-hover)}.todo-list{margin:0;padding:0;list-style:none}.todo-item{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.todo-item:last-child{border-bottom:none}.todo-label{cursor:pointer;flex:1;align-items:center;gap:10px;display:flex}.todo-label input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--accent)}.todo-text{word-break:break-word;font-size:15px}.todo-text.completed{color:var(--text-muted);text-decoration:line-through}.delete-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:16px;line-height:1}.delete-btn:hover{color:var(--danger);background:#e5484d1a}.empty-state{text-align:center;color:var(--text-muted);margin:24px 0;font-size:14px}.todo-count{text-align:center;color:var(--text-muted);margin:20px 0 0;font-size:13px}