:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #888888);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f0f0f0);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, system-ui, sans-serif;
  background: var(--bg); color: var(--text);
}
#app { padding: 12px; }
.card {
  background: var(--secondary-bg); border-radius: 10px; padding: 12px;
  margin-bottom: 10px; cursor: pointer;
}
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card .meta { color: var(--hint); font-size: 13px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: var(--button); color: var(--button-text); }
.pill.garbage { background: #cc4444; }
button.action {
  display: block; width: 100%; padding: 10px; margin-top: 8px;
  border: none; border-radius: 8px; background: var(--button);
  color: var(--button-text); font-size: 15px;
}
button.action.secondary { background: transparent; color: var(--button);
  border: 1px solid var(--button); }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--hint);
  background: var(--bg); color: var(--text);
}
.lead-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lead-row input[type="text"] { flex: 1; min-width: 0; }
/* The checkbox inherits width:100% from `.field input` above, which would eat
   the whole flex row and collapse the name/company inputs to min-content.
   Pin it to its natural size so the text inputs get the remaining space. */
.lead-row input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.empty { color: var(--hint); text-align: center; margin-top: 40px; }