body { font-family: sans-serif; margin: 20px; }
.container { max-width: 500px; margin: auto; }
ul { list-style-type: none; padding: 0; }
li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.completed { text-decoration: line-through; color: gray; }
form { margin-top: 20px; }
input[type="text"] { padding: 10px; width: 70%; }
/* Base button styling */
button {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-left: 6px;
}

  button.add-btn {
  background-color: #4CAF50;
  color: white;
  border-color: #3e8e41;
}

button.save-btn {
  background-color: #2196F3;
  color: white;
  border-color: #0b7dda;
}
  button.cancel-btn {
  background-color: #ffcccc;
  color: #a10000;
  border-color: #ff9999;
}
  button.edit-btn {
  background-color: #e7f0ff;
  border-color: #8bb4ff;
}

  button.delete-btn {
  background-color: #ffe7e7;
  border-color: #ff8b8b;
}

  li button {
  flex-shrink: 0;
}