html,body,:root{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#f5f7fa,#e4ebf5);color:#1f2933}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#111827;color:#f9fafb;padding:16px 20px;box-shadow:0 2px 8px #0f172a66}.header-inner{max-width:960px;margin:0 auto}.app-title{margin:0;font-size:1.6rem;letter-spacing:.03em}.app-subtitle{margin:4px 0 0;font-size:.9rem;color:#9ca3af}.main{flex:1;display:flex;justify-content:center;padding:16px}.card{background-color:#fff;border-radius:16px;box-shadow:0 18px 45px #0f172a40;padding:20px 18px 24px;width:100%;max-width:960px;box-sizing:border-box}.todo-card{display:flex;flex-direction:column;gap:20px}.list-of-todos{display:flex;flex-direction:column;gap:10px}.list-of-todos h2{margin:0 0 4px;font-size:1.1rem}.todo{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background-color:#f3f4f6}.todo .todo-text{flex:1;background-color:transparent;padding:4px 0;word-break:break-word}.completed>.todo-text{text-decoration:line-through;color:#9b1c1c}.todo-form{border-radius:12px;border:1px solid #e5e7eb;padding:14px 12px 12px;background-color:#f9fafb}.todo-form h2{margin:0 0 6px;font-size:1.05rem}input,button{font-family:inherit}.todo-form input{width:100%;box-sizing:border-box;margin:0 0 8px;padding:8px 10px;border-radius:8px;border:1px solid #d1d5db;font-size:.95rem}.todo-form input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px #2563eb26}.todo-form button{width:100%;padding:8px 10px;border-radius:8px;border:none;background-color:#2563eb;color:#f9fafb;font-weight:500;cursor:pointer;transition:background-color .15s ease,transform .05s ease}.todo-form button:hover{background-color:#1d4ed8}.todo-form button:active{transform:translateY(1px)}.todo button{padding:4px 8px;border-radius:6px;border:none;font-size:.8rem;cursor:pointer;transition:background-color .15s ease,transform .05s ease}.todo button:active{transform:translateY(1px)}.todo button:not(.todo-delete){background-color:#10b981;color:#ecfdf5}.todo button:not(.todo-delete):hover{background-color:#059669}.todo-delete{background-color:#dc2626;color:#fef2f2}.todo-delete:hover{background-color:#b91c1c}.todo-error{color:#b91c1c;margin-top:4px;font-size:.8rem}.todo-stats{margin-top:4px;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;font-size:.85rem;color:#4b5563}.todo-stats span{background-color:#f3f4f6;padding:4px 8px;border-radius:999px}@media (min-width: 640px){.todo-card{flex-direction:row;align-items:flex-start}.list-of-todos{flex:2}.todo-form{flex:1;margin-left:16px}.todo-form button{width:auto;padding-inline:16px}}@media (min-width: 960px){.card{padding-inline:28px}}