*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}.app.light{--bg:#f4f6f8;--card:#fff;--text:#111;--border:#ddd;--primary:#4f46e5}.app.dark{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--border:#334155;--primary:#38bdf8}.app{background:var(--bg);color:var(--text);min-height:100vh;transition:all .3s}.container{max-width:800px;margin:auto;padding:20px}.header{text-align:center;border-bottom:1px solid var(--border);background:var(--card);padding:20px;font-size:24px;font-weight:700}form{gap:10px;margin-bottom:20px;display:flex}input,select{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:6px;outline:none;padding:10px}button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:10px 14px;transition:all .2s}button:hover{opacity:.85}.top-bar{gap:10px;margin-bottom:15px;display:flex}.todo{background:var(--card);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:12px;display:flex}.todo.completed{opacity:.6;text-decoration:line-through}.stats{background:var(--card);border:1px solid var(--border);border-radius:8px;justify-content:space-between;margin-bottom:15px;padding:10px;display:flex}.filter button{border:1px solid var(--border);color:var(--text);background:0 0}.filter button.active{background:var(--primary);color:#fff}