*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background-color:#f8f9fa}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-top:20px}.title{text-align:center;font-size:2rem;font-weight:700;margin-bottom:1.8rem;color:#222}.todo-item{display:flex;justify-content:space-between;align-items:center;background-color:#fff;max-width:720px;margin-top:10px;border-radius:16px;padding:10px 18px;box-shadow:0 4px 20px #0000001a}.btn-group{display:flex;gap:8px;margin-left:auto;justify-content:flex-end}.btn-group .todo-btn{flex:1 1 0;text-align:center;max-width:85px}.todo-btn{border:none;border-radius:8px;min-width:80px;padding:6px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;color:#fff;box-shadow:0 1px #00000026;transform:translateY(0)}.todo-btn.done{background-color:#28a745}.todo-btn:active{transform:translateY(1px);box-shadow:0 2px #0003;filter:brightness(.95)}.todo-btn.done:hover{background-color:#218838;transform:scale(1.05)}.todo-btn.undo{background-color:#ffc107;color:#222}.todo-btn.undo:hover{background-color:#e0a800;transform:scale(1.05)}.todo-btn.delete{background-color:#dc3545;color:#fff}.todo-btn.delete:hover{background-color:#c82333;transform:translateY(1px);box-shadow:0 1px #0000001f}.todo-btn.delete:active{transform:translateY(1px);box-shadow:0 1px #0003;filter:brightness(.9)}.input-group{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;max-width:500px;width:100%}.input-group input{flex:1;padding:10px 14px;border:1px solid #ccc;border-radius:8px;font-size:15px;outline-color:#007bff;height:42px;box-sizing:border-box}.input-group button{background:#007bff;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:15px;cursor:pointer;transition:background .3s,transform .1s ease;height:42px;box-sizing:border-box}.input-group button:hover{background:#0056b3}