:root{color-scheme:light;--bg: #f7f4ea;--panel: #fffdf7;--ink: #1f1d19;--muted: #6d675c;--line: #d8cfbd;--accent: #0f766e;--accent-2: #115e59;--danger: #b42318}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 10%,#efe7d3 0%,transparent 45%),radial-gradient(circle at 90% 20%,#d7efe8 0%,transparent 40%),var(--bg);color:var(--ink);font-family:IBM Plex Sans,Avenir Next,sans-serif}#root{min-height:100vh;display:grid;place-items:center;padding:24px}.todo-shell{width:min(760px,100%);background:color-mix(in srgb,var(--panel) 92%,white);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px #1f1d1914;overflow:hidden}.todo-header{padding:20px 20px 12px;border-bottom:1px solid var(--line)}.todo-header h1{margin:0;font-size:clamp(1.4rem,1.2rem + 1vw,2rem);letter-spacing:-.03em}.todo-header p{margin:6px 0 0;color:var(--muted)}.todo-controls{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 20px}.todo-controls input{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;font-size:.98rem}button{border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);padding:10px 12px;cursor:pointer;font-weight:600}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-2)}button.danger{color:var(--danger)}.todo-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:0 20px 14px}.filter-group{display:flex;gap:8px;align-items:center}.filter-group button[data-active=true]{border-color:var(--accent);color:var(--accent);background:#e6f7f4}.todo-list{list-style:none;margin:0;padding:0 20px 20px;display:grid;gap:10px}.todo-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}.todo-item.done .todo-text{color:var(--muted);text-decoration:line-through}.todo-text-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.todo-item-actions{display:flex;gap:8px}.empty-state{margin:0 20px 20px;padding:20px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center}@media(max-width:640px){.todo-controls{grid-template-columns:1fr}.todo-toolbar{align-items:stretch}.todo-item{grid-template-columns:auto 1fr}.todo-item-actions{grid-column:1 / -1;justify-content:flex-end}}