* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: #fafafa; color: #222; }
main { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
h1 { margin: 0 0 0.25rem; }
.hint { color: #666; margin-top: 0; }
form { display: flex; gap: 0.5rem; margin: 1rem 0; }
input, button { font: inherit; padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; }
input { flex: 1; }
button { background: #1f6feb; color: white; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
li { background: white; border: 1px solid #eee; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
li.done span.title { text-decoration: line-through; color: #888; }
li span.title { flex: 1; }
li button { padding: 0.2rem 0.5rem; font-size: 0.85rem; background: transparent; color: #555; border: 1px solid #ccc; }
li button.del { color: #c33; border-color: #c33; }
footer { color: #999; font-size: 0.85rem; text-align: center; margin-top: 2rem; }