body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  color: #222;
  transition: 0.4s;
}
body.dark { background: linear-gradient(135deg, #232526, #414345); color: #fff; }
.input-area { margin: 20px; }
input, button { padding: 8px; border: none; border-radius: 6px; font-size: 15px; }
button { margin: 5px; cursor: pointer; color: #fff; transition: 0.3s; }
#addTask { background: #007bff; }
.done { background: #28a745; }
.del { background: #ff4757; }
#themeBtn { background: #6f42c1; }
button:hover { box-shadow: 0 0 10px rgba(0,0,0,0.2); transform: scale(1.05); }
ul { list-style: none; padding: 0; width: 270px; margin: 20px auto; }
li { background: #fff; margin: 6px 0; padding: 10px; border-radius: 8px;
     display: flex; justify-content: space-between; align-items: center; }
li.doneTask { text-decoration: line-through; color: rgb(9, 9, 9); }
body.dark li { background: #2c2c2c; }