:root{--ink:#1a2b24;--muted:#5d6f67;--accent:#1f6f5b;--accent-soft:#e3efea;--danger:#b3372f;--surface:#fff;--line:#dfe7e2}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:linear-gradient(#f2f7f4 0%,#e9f1ec 100%);margin:0;font-family:system-ui,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6}.app{max-width:560px;margin:48px auto;padding:0 16px}.app>h1{letter-spacing:.5px;margin:0 0 20px;font-size:28px}.app>h1:after{content:"";background:var(--accent);border-radius:2px;width:40px;height:3px;margin-top:6px;display:block}.board{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 6px 24px #1a2b240f}.composer{gap:8px;display:flex}.composer input{border:1px solid var(--line);font:inherit;color:inherit;border-radius:8px;flex:1;padding:10px 12px}.composer input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;border-radius:8px;padding:8px 14px;transition:background .15s,border-color .15s}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}.composer button{background:var(--accent);border-color:var(--accent);color:#fff}.composer button:hover:not(:disabled){background:#17604e}.toolbar{justify-content:space-between;align-items:center;margin:16px 0 4px;display:flex}.filters{gap:4px;display:flex}.filters button{color:var(--muted);border-radius:999px;padding:4px 12px;font-size:14px}.filters button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.remaining{color:var(--muted);font-size:14px}.list{margin:8px 0 0;padding:0}.item{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:8px;padding:10px 4px;list-style:none;display:flex}.item label{cursor:pointer;align-items:center;gap:10px;min-width:0;display:flex}.item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}.item span{overflow-wrap:anywhere}.item.done span{color:var(--muted);text-decoration:line-through}.item .remove{color:var(--muted);border:none;flex-shrink:0;font-size:14px}.item .remove:hover{color:var(--danger);border:none}.empty{color:var(--muted);text-align:center;margin:0;padding:28px 0}.app-footer{text-align:right;margin-top:12px}.app-footer button{color:var(--muted);font-size:14px}@media (width<=480px){.app{margin:24px auto}.composer{flex-direction:column}.toolbar{flex-direction:column;gap:8px}}