* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; justify-content: center;
  padding: 40px 16px; background: #f1f3f6;
  font-family: system-ui, -apple-system, sans-serif;
}
.card {
  width: 100%; max-width: 440px; height: fit-content;
  background: #fff; padding: 24px; border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
h1 { margin: 0 0 16px; font-size: 1.5rem; }
.add { display: flex; gap: 8px; margin-bottom: 16px; }
.add input {
  flex: 1; padding: 10px 12px; font-size: 1rem;
  border: 1px solid #d0d5dd; border-radius: 8px;
}
.add button {
  padding: 10px 16px; border: 0; border-radius: 8px;
  background: #4f46e5; color: #fff; font-size: 1rem; cursor: pointer;
}
.add button:hover { background: #4338ca; }
ul { list-style: none; margin: 0; padding: 0; }
li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #eee;
}
li span { flex: 1; word-break: break-word; cursor: pointer; }
li.done span { text-decoration: line-through; color: #98a2b3; }
li button {
  border: 0; background: none; color: #d92d20;
  font-size: 1.2rem; cursor: pointer;
}
.empty { text-align: center; color: #98a2b3; }