.todo-page{color:#172033;width:min(720px,100% - 32px);margin:48px auto}.todo-page *{box-sizing:border-box}.todo-page h1{margin:0 0 8px;font-size:32px}.todo-summary{color:#5b6475;margin:0 0 24px}.todo-add-form{gap:8px;margin-bottom:18px;display:flex}.todo-add-form input{min-width:0;height:44px;font:inherit;border:1px solid #cdd5e1;border-radius:8px;flex:1;padding:0 14px}.todo-page button{color:#fff;height:44px;font:inherit;cursor:pointer;background:#2563eb;border:0;border-radius:8px;padding:0 16px;font-weight:700}.todo-page button.secondary{color:#172033;background:#eef2f7}.todo-page button.danger{color:#991b1b;background:#fee2e2}.todo-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.todo-item{background:#fff;border:1px solid #e2e8f0;border-radius:8px;grid-template-columns:1fr auto auto;align-items:center;gap:8px;min-height:56px;padding:10px 12px;display:grid}.todo-title{overflow-wrap:anywhere}.todo-title.completed{color:#8a94a6;text-decoration:line-through}.todo-empty{color:#5b6475;text-align:center;background:#fff;border:1px dashed #cdd5e1;border-radius:8px;padding:24px}.todo-error{color:#b91c1c;min-height:20px;margin:0 0 12px;font-size:14px}@media (width<=540px){.todo-page{margin:28px auto}.todo-add-form{flex-direction:column}.todo-item{grid-template-columns:1fr}}