:root {
  color-scheme: light dark;
  --border: #d0d0d0;
  --bg-hover: #f4f4f4;
}
body { font-family: system-ui, sans-serif; margin: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
.who { opacity: 0.7; font-size: 0.9rem; }
.container { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; max-width: 420px; }
.stack label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
button, input[type=submit] {
  padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border);
  cursor: pointer; font-size: 0.95rem;
}
.primary { background: #2b6cb0; color: white; border-color: #2b6cb0; }
.secondary { background: transparent; }
.hint { opacity: 0.75; font-size: 0.9rem; }
.hint.warning { color: #b7791f; opacity: 1; }
.flashes { list-style: none; padding: 0; }
.flash { padding: 0.6rem 0.9rem; border-radius: 6px; margin-bottom: 0.75rem; }
.flash-success { background: #e6ffed; border: 1px solid #34d058; }
.flash-danger { background: #ffeef0; border: 1px solid #d73a49; }
.flash-warning { background: #fff8e6; border: 1px solid #dbab09; }
.flash-info { background: #eef6ff; border: 1px solid #2b6cb0; }
.candidate-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.candidate {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem;
}
.candidate-info strong { font-size: 1.05rem; }
.candidate .meta { font-size: 0.85rem; opacity: 0.75; margin-top: 0.25rem; }
.score { font-size: 0.8rem; opacity: 0.7; margin-left: 0.5rem; }
.qbo-id { font-family: monospace; font-size: 0.75rem; }
.none-option { margin-top: 1.25rem; font-size: 0.9rem; }
#new-customer { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.app-grid { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.app-tile {
  border: 1px solid var(--border); border-radius: 8px;
}
.app-tile a {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.9rem 1rem; text-decoration: none; color: inherit;
}
.app-tile a:hover { background: var(--bg-hover); }
.app-tile strong { font-size: 1.05rem; }
.app-tile .meta { font-size: 0.85rem; opacity: 0.75; }
/* Same visual spec as the floating link on tracker/pay (nginx sub_filter)
   and the 2 WordPress estimator pages -- kept identical across all 5 apps
   on purpose, see base.html. */
.apps-home-link {
  position: fixed; bottom: 14px; right: 14px;
  background: #2b6cb0; color: #fff; padding: 8px 14px; border-radius: 6px;
  text-decoration: none; font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); z-index: 2147483647;
}