body { font-family: system-ui, sans-serif; padding: 20px; }
.app { max-width: 520px; margin: 0 auto; }
.row { display: flex; gap: 8px; align-items: center; }
input[type="text"] { flex: 1; padding: 8px; }
button { padding: 8px 12px; }
.todo { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
.todo.done .title { text-decoration: line-through; opacity: 0.6; }
.filters { display: flex; gap: 8px; margin: 12px 0; }
.pill { padding: 6px 10px; border: 1px solid #ddd; border-radius: 999px; cursor: pointer; user-select: none; }
.pill.active { border-color: #000; }
small { opacity: 0.7; }