*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.container{width:100%;max-width:700px;margin:70px auto;background:#fff;padding:35px;border-radius:15px;box-shadow:0 8px 20px #0000001a}h1{text-align:center;margin-bottom:25px;color:#222}.form{display:flex;gap:10px;margin-bottom:25px}.input{flex:1;padding:10px 15px;border-radius:8px;border:1px solid #ccc;font-size:16px;outline:none}.input:focus{border-color:#007bff}.btn{background:#007bff;border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;transition:.3s ease}.btn:hover{background:#0056b3}.todos{display:flex;flex-direction:column;gap:10px}.todo-item{display:flex;justify-content:space-between;align-items:center;background:#f5f5f5;padding:10px 15px;border-radius:8px;transition:.3s}.todo-item:hover{background:#e9ecef}.todo-text{cursor:pointer;flex:1;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.todo-text.done{text-decoration:line-through;color:#888}.buttons{display:flex;gap:8px}.edit,.delete{border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:14px;transition:.3s}.edit{background:#ffce54}.edit:hover{background:#f6bb42}.delete{background:#ec5454;color:#fff}.delete:hover{background:#de1515}.empty{text-align:center;color:#888;margin-top:35px;font-style:italic}@media(max-width:480px){.container{padding:16px}.form{flex-direction:column}.btn{width:100%}}