*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui;height:100vh;overflow:hidden;background:#eef1f7;color:#111827}body.dark{background:#0f172a;color:#e5e7eb}.app{height:100vh;max-width:520px;margin:auto;display:flex;flex-direction:column;padding:24px;background:#fff;border-radius:22px;box-shadow:0 20px 60px #0000001f}body.dark .app{background:#111827;box-shadow:0 20px 60px #0009}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}h1{margin:0;font-size:22px;font-weight:600}.input-wrapper{display:flex;gap:10px;margin-bottom:16px}input{flex:1;padding:12px;border-radius:12px;border:none;background:#f1f5f9}body.dark input{background:#1f2937;color:#e5e7eb}button{border:none;padding:10px 14px;border-radius:10px;cursor:pointer}.input-wrapper button{background:#2563eb;color:#fff}.filter-wrapper{display:flex;gap:10px;margin-bottom:10px}.filter-wrapper button{background:#e2e8f0}.filter-wrapper button.active{background:#2563eb;color:#fff;font-weight:500}body.dark .filter-wrapper button.active{background:#3b82f6;color:#fff}body.dark .filter-wrapper button{background:#1f2937;color:#e5e7eb}.task-counter{font-size:14px;opacity:.7;margin-bottom:10px}.task-list{flex:1;overflow-y:auto;padding-right:6px}.todo-item{display:flex;align-items:center;gap:10px;background:#f8fafc;padding:14px;border-radius:14px;margin-bottom:10px}body.dark .todo-item{background:#1f2937}.todo-item.completed span{text-decoration:line-through;opacity:.6}.drag-handle{cursor:grab;opacity:.5}.buttons{margin-left:auto;display:flex;gap:6px}.icon-btn{padding:7px;border-radius:8px;color:#fff}.done{background:#22c55e}.delete{background:#ef4444}.edit{background:#3b82f6}.save{background:#f59e0b}.footer{margin-top:10px}.clear-btn{width:100%;background:#ef4444;color:#fff;padding:12px}