:root {
  font-family: system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}
body {
  margin: 0;
  background: #111827;
  color: #f9fafb;
}
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
.card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.row {
  display: flex;
  gap: 8px;
}
.space-between { justify-content: space-between; }
input, select, button {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #4b5563;
  margin: 6px 0;
}
button {
  cursor: pointer;
  background: #2563eb;
  color: white;
}
button.ghost {
  width: auto;
  background: transparent;
  border: 1px solid #6b7280;
}
.chips, .tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip, .tile {
  width: auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #6b7280;
  background: #111827;
}
.tile {
  border-radius: 10px;
}
.selected {
  border-color: #60a5fa;
  background: #1d4ed8;
}
.hidden { display: none; }
.hint { color: #9ca3af; }
.error { color: #fca5a5; min-height: 20px; }
.invalid { border-color: #ef4444 !important; }
ul { padding-left: 20px; }