.app{max-width:760px;margin:2rem auto;padding:1.5rem;background:#fff;border:1px solid #e7e7e9;border-radius:16px}.header h1{margin:0;color:#1f2937}.subtitle{margin:.35rem 0 0;color:#6b7280}.stats{display:flex;gap:.75rem;margin:1.25rem 0}.stats p{margin:0;padding:.45rem .8rem;background:#f3f6ff;border:1px solid #d9e2ff;border-radius:999px;color:#1e3a8a}.task-form{display:flex;gap:.75rem;margin:.75rem 0}.task-form input{flex:1;padding:.72rem;border:1px solid #d1d5db;border-radius:8px}.task-form button{min-width:96px;background:#2563eb;color:#fff;border-color:#2563eb}.task-form button:hover{background:#1d4ed8}.task-form button:disabled{background:#93c5fd;border-color:#93c5fd;cursor:not-allowed}.filters{display:flex;gap:.5rem;margin:.4rem 0 1rem}.filter{padding:.45rem .75rem;border-radius:999px;border:1px solid #d1d5db;background:#fff;color:#374151}.filter.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}.task-list{list-style:none;padding:0;margin:0;display:grid;gap:.65rem;max-height:500px;overflow-y:auto}.task{border:1px solid #e5e7eb;border-radius:8px;padding:.75rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;background:#fff}.task-main{display:flex;align-items:center;gap:.65rem;flex:1}.task-main input[type=checkbox]{width:18px;height:18px;accent-color:#22c55e}.task-title{color:#111827;line-height:1.35}.task.completed{background:#f8fafc}.task.completed .task-title{text-decoration:line-through;color:#6b7280}.task-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}.task-actions small{color:#6b7280;width:100%;text-align:right}.action{padding:.35rem .55rem;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151}.action.save{background:#16a34a;border-color:#16a34a;color:#fff}.action.save:hover{background:#15803d}.action.danger{background:#ef4444;border-color:#ef4444;color:#fff}.action.danger:hover{background:#dc2626}.edit-input{width:100%;max-width:320px;padding:.42rem .5rem;border:1px solid #93c5fd;border-radius:6px}.loading{color:#4b5563;margin:1rem 0}.empty-state{border:1px dashed #cbd5e1;border-radius:8px;padding:1rem;color:#64748b;background:#f8fafc}.error{color:#b91c1c;margin:.35rem 0 .65rem}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#eef2ff,#f8fafc 45%,#f8fafc);color:#111827}button{border:1px solid #d1d5db;border-radius:8px;padding:.7rem 1rem;background:#fff;font-family:inherit;cursor:pointer}button:hover{background:#f3f4f6}