*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#eef2ff;color:#172033}button,input{font:inherit}.page{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:32px 16px}.card{width:min(720px,100%);background:#fff;border-radius:28px;padding:32px;box-shadow:0 24px 80px #312e8129}.header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.eyebrow{margin:0 0 8px;color:#4f46e5;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}h1{margin:0;font-size:clamp(2rem,6vw,3.25rem);line-height:1}.subtitle{margin:14px 0 0;color:#667085;max-width:560px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.stats div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:18px}.stats strong{display:block;font-size:1.8rem}.stats span{color:#667085;font-size:.9rem}.task-form{display:flex;gap:12px;margin-bottom:16px}.task-form input{flex:1;border:1px solid #d0d5dd;border-radius:14px;padding:14px 16px;outline:none}.task-form input:focus{border-color:#4f46e5;box-shadow:0 0 0 4px #4f46e51f}.task-form button,.delete{border:0;border-radius:14px;cursor:pointer;font-weight:700}.task-form button{background:#4f46e5;color:#fff;padding:14px 20px}.task-form button:disabled{background:#98a2b3;cursor:not-allowed}.error{background:#fef2f2;color:#b42318;border:1px solid #fecaca;padding:12px 14px;border-radius:14px}.task-list{display:grid;gap:12px;margin-top:20px}.empty{text-align:center;color:#667085;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:18px;padding:28px}.task-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1px solid #e5e7eb;border-radius:18px;padding:14px;background:#fff}.check{width:34px;height:34px;border-radius:50%;border:2px solid #4f46e5;color:#fff;background:#fff;cursor:pointer;font-weight:800}.check.done{background:#4f46e5}.task-content h2{margin:0 0 4px;font-size:1rem}.task-content p{margin:0;color:#667085;font-size:.85rem}.completed{color:#98a2b3;text-decoration:line-through}.delete{color:#b42318;background:#fee4e2;padding:10px 12px}@media(max-width:640px){.card{padding:24px}.stats{grid-template-columns:1fr}.task-form{flex-direction:column}.task-item{grid-template-columns:auto 1fr}.delete{grid-column:1 / -1}}