/* Site Assistant — shared portal design system
 * Brand: Converso Tech logo — indigo primary + orange nodes on cool off-white. */
:root {
  --bg: #fbfaf9;
  --bg-elevated: #fff;
  --surface: #fff;
  --surface-2: #f5f4f2;
  --surface-3: #eeedea;
  --border: #e2e3ea;
  --border-strong: #c8cad6;
  --text: #1a1b33;
  --text-secondary: #4a4c63;
  --muted: #6b6d85;
  --accent: #2e3190;
  --accent-hover: #252880;
  --accent-soft: rgba(46, 49, 144, 0.1);
  --accent-ring: rgba(46, 49, 144, 0.2);
  /* Logo node / CTA spark — highlight only; not body text on white (contrast ~2.7:1) */
  --accent-warm: #e1873b;
  --accent-warm-soft: rgba(225, 135, 59, 0.14);
  --accent-pink: #e1873b; /* alias kept for pages that still reference the old token name */
  --on-accent: #fff;
  --teal: #1a6b4a;
  --teal-soft: rgba(26, 107, 74, 0.11);
  --ok: #1a6b4a;
  --ok-soft: rgba(26, 107, 74, 0.11);
  --warn: #8a5a10;
  --warn-soft: rgba(138, 90, 16, 0.12);
  --err: #a8321f;
  --err-soft: rgba(168, 50, 31, 0.1);
  --high: #a8321f;
  --med: #8a5a10;
  --low: #6b6d85;
  --shadow-sm: 0 1px 2px rgba(26, 27, 51, 0.05);
  --shadow: 0 4px 16px rgba(26, 27, 51, 0.07);
  --shadow-lg: 0 20px 40px rgba(26, 27, 51, 0.1);
  --radius: 12px;
  --radius-lg: 14px;
  /* Body: Public Sans preferred; Plus Jakarta Sans / DM Sans as system fallbacks.
     Display: Fraunces (editorial weight) as preferred; Georgia as serif fallback.
     Pages that want the preferred stacks should load:
       <link rel="stylesheet" href="https://fonts.bunny.net/css?family=fraunces:300,700|public-sans:400,600,700">
     or equivalent. portal.css works without it — fallbacks kick in. */
  --font: "Public Sans", "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  /* The canvas sets headings, the brand and its big figures in Fraunces and everything else
     in Public Sans. That pairing is most of why the mockups read as designed and a page in
     one sans throughout does not — so it is a token, not a per-page choice. */
  --font-display: Fraunces, "Iowan Old Style", Georgia, serif;
  /* Type on the accent bar: a tint of the ground rather than pure white, so it sits on the
     accent instead of glaring off it. */
  /* Ink on the accent bar. Derived from `--on-accent`, which the server chooses by measuring
     contrast against the accent, so a merchant whose brand colour is pale gets dark type on
     their bar instead of white type nobody can read. Was a fixed near-white, which was correct
     only for the default indigo. */
  --nav-ink: var(--on-accent);
  --display: Fraunces, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --nav-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--accent); }
button, input, textarea, select { font-family: inherit; }

/* The canvas sets every heading in the display face. Doing it here rather than per page is
   what stops one screen drifting back to the body sans and reading as a different product.
   Controls and small labels stay in Public Sans — a serif on a button is costume, not
   design. */
h1, h2, h3, .sa-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
h1 { font-size: 1.95rem; }
.hidden { display: none !important; }

/* —— Shell / nav —— */
.sa-shell { min-height: 100vh; display: flex; flex-direction: column; }
.sa-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Three zones: logo left, primary tabs centred, Sign out right — so clicking a tab never
     shoves the actions into the brand column (that is what "Setup & gaps" used to do when
     it was a page-local header action). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0 1.5rem;
  min-height: var(--nav-h);
  /* Filled, not translucent. The canvas puts every screen under a solid accent bar with
     light type on it; a white bar with dark links is the single biggest reason the built
     pages read as a different product from the mockups. */
  background: var(--accent);
  color: var(--nav-ink);
  border-bottom: 0;
}
.sa-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
  /* One line. "ConversoTech · Superadmin" wrapped on a phone and made the accent bar twice
     as tall, which pushed the page's own heading out of the first screenful. */
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
  /* The wordmark sits on the accent bar, so it takes the bar's ink like everything else on
     it. Hard-coded white left the business name unreadable on a pale brand colour while the
     links beside it had already adapted. */
  color: var(--nav-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.sa-nav-brand [data-nav-name] {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px) {
  /* On the narrowest screens the tabs are what the operator needs; the wordmark gives way
     to them rather than the other way round — and it gives way completely. A 9rem cap only
     capped it: flex still shrank the span below that, so at 375px the bar read "TT T",
     a monogram tile followed by the first letter of the business name, beside a right-hand
     account block already printing the same name. The tile carries the identity here. */
  .sa-nav-brand [data-nav-name] { display: none; }
}
.sa-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  /* Indigo tile, logo-aligned: solid accent base with an orange spark at the top-right
     corner, echoing the node accent from the Converso Tech logo. Not teal. */
  background:
    radial-gradient(circle at 80% 18%, rgba(225, 135, 59, 0.55) 0%, transparent 55%),
    var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 4px 12px var(--accent-ring);
  overflow: hidden;
  flex-shrink: 0;
}
.sa-mark.sa-mark-logo {
  background: #fff;
  padding: 0;
  box-shadow: none;
}
.sa-mark.sa-mark-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sa-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.25rem;
  /* Scroll, do not wrap. Wrapping turned the accent bar into two ragged rows on a phone and
     pushed the page's own content down behind it. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
}
.sa-nav-links::-webkit-scrollbar { height: 0; }
.sa-nav-links a { white-space: nowrap; }
.sa-nav-links a {
  text-decoration: none;
  color: color-mix(in srgb, var(--nav-ink) 78%, transparent);
  font-size: 0.845rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.sa-nav-links a:hover { color: var(--nav-ink); background: color-mix(in srgb, var(--nav-ink) 14%, transparent); }
.sa-nav-links a.active { color: var(--nav-ink); background: color-mix(in srgb, var(--nav-ink) 20%, transparent); }
.sa-nav-links a.cta {
  /* The warm node from the logo, which is the one place the canvas spends a second colour:
     one call to action per screen, never a row of them. */
  background: var(--accent-warm);
  color: #fff;
  margin-left: 0.35rem;
  box-shadow: 0 2px 8px rgba(225, 135, 59, 0.4);
}
.sa-nav-links a.cta:hover { background: #d0762c; color: #fff; }

/* `sa-nav-accent` was the opt-in for this treatment on the public funnel pages while the
   portal kept a white bar. The portal now wears it everywhere, as the canvas does, so the
   class is a no-op kept for the pages that still name it. */
.sa-nav.sa-nav-accent {
  background: var(--accent);
  backdrop-filter: none;
  border-bottom-color: color-mix(in srgb, var(--accent) 72%, #000);
}
.sa-nav.sa-nav-accent .sa-nav-brand { color: var(--nav-ink); }
.sa-nav.sa-nav-accent .sa-nav-links a {
  color: color-mix(in srgb, var(--nav-ink) 78%, transparent);
}
.sa-nav.sa-nav-accent .sa-nav-links a:hover {
  color: var(--nav-ink);
  background: color-mix(in srgb, var(--nav-ink) 14%, transparent);
}
.sa-nav.sa-nav-accent .sa-nav-links a.active {
  color: var(--nav-ink);
  background: color-mix(in srgb, var(--nav-ink) 20%, transparent);
}
.sa-nav.sa-nav-accent .sa-nav-links a.cta {
  background: var(--accent-warm);
  color: #fff;
  box-shadow: 0 2px 8px rgba(225, 135, 59, 0.4);
}
.sa-nav.sa-nav-accent .sa-nav-links a.cta:hover {
  background: color-mix(in srgb, var(--accent-warm) 84%, #000);
  color: #fff;
}
/* These two were the opt-in versions of what the base rules now do. */

/* .sa-nav-brand-inverse — the wordmark on the accent bar, in the bar's own ink. */
.sa-nav-brand-inverse { color: var(--nav-ink) !important; }

.sa-nav-session {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.55rem;
  margin-left: 0;
  padding-left: 0.65rem;
  /* On the accent bar, not on a white one — a light-mode border here is invisible. */
  border-left: 1px solid color-mix(in srgb, var(--nav-ink) 28%, transparent);
}
.sa-nav-user {
  font-size: 0.78rem;
  font-weight: 600;
  /* Was --text-secondary: a dark grey, on a dark bar. The signed-in identity was there and
     unreadable, which is the one thing on that bar a person checks. */
  color: color-mix(in srgb, var(--nav-ink) 84%, transparent);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* `.sa-nav .` deliberately: `.sa-btn-secondary` is a single class too and sits later in
   this file, so a bare `.sa-nav-signout` lost to it and the button rendered near-black on
   the indigo bar — measured contrast 1.57. Scoping to the bar out-ranks it. */
.sa-nav .sa-nav-signout {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  /* A secondary button drawn for a light surface reads as a grey smudge on the accent bar.
     Outlined in the bar's own ink instead, which is what the canvas does with it. */
  background: color-mix(in srgb, var(--nav-ink) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-ink) 32%, transparent);
  color: var(--nav-ink);
}
.sa-nav .sa-nav-signout:hover {
  background: color-mix(in srgb, var(--nav-ink) 24%, transparent);
  border-color: color-mix(in srgb, var(--nav-ink) 46%, transparent);
  color: var(--nav-ink);
}

.sa-impersonation-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 1.25rem;
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  font-size: 0.88rem;
  line-height: 1.45;
}
.sa-impersonation-banner strong { color: var(--text); }
.sa-impersonation-banner .sa-btn { flex-shrink: 0; }

.sa-owner-hint {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.sa-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3.5rem;
}
.sa-main.wide { max-width: 1200px; }
.sa-main.narrow { max-width: 720px; }

.sa-page-header {
  margin-bottom: 1.75rem;
}
.sa-page-header .eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.sa-page-header h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.sa-page-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 54ch;
}

/* —— Cards & surfaces —— */
.sa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
}
.sa-card h2 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--text);
}
.sa-card h2 .count {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.8rem;
}

.sa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.sa-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sa-stat:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.sa-stat .label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}
.sa-stat .value {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 0.25rem;
  color: var(--text);
}
.sa-stat .sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* —— Buttons —— */
.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sa-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.sa-btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 14px var(--accent-ring);
}
.sa-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.sa-btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.sa-btn-secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.sa-btn-danger {
  background: var(--err-soft);
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 20%, transparent);
}
.sa-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--err) 14%, transparent);
}
.sa-btn-block { width: 100%; }

/* —— Forms —— */
.sa-field { margin-bottom: 1.1rem; }
.sa-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.sa-field .opt { font-weight: 500; color: var(--muted); }
.sa-field input,
.sa-field textarea,
.sa-field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sa-field input:focus,
.sa-field textarea:focus,
.sa-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* —— Password reveal (password-reveal.js) ——
   The eye sits inside the field at the trailing edge, and the input gets the padding to
   keep the last character clear of it. A password manager's own overlay lands in the same
   corner, so the button is kept narrow and the padding is generous enough that the two
   read as two controls rather than one smudge. */
.sa-reveal {
  position: relative;
  display: block;
  width: 100%;
}
.sa-reveal > input {
  width: 100%;
  padding-right: 2.6rem;
}
.sa-reveal-btn {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.sa-reveal-btn:hover { color: var(--text-secondary); background: var(--surface-2); }
.sa-reveal-btn[aria-pressed="true"] { color: var(--accent); }
.sa-reveal-btn svg { display: block; }
.sa-field .hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* —— Tables —— */
.sa-table-wrap { overflow-x: auto; }
table.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.sa-table th {
  text-align: left;
  padding: 0.65rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.sa-table td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table tbody tr:hover td { background: var(--accent-soft); }

.sa-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: capitalize;
}
.sa-badge.ready { background: var(--ok-soft); color: var(--ok); }
.sa-badge.indexing,
.sa-badge.pending { background: var(--accent-soft); color: var(--accent); }
.sa-badge.failed { background: var(--err-soft); color: var(--err); }
.sa-badge.warn { background: var(--warn-soft); color: var(--warn); }

.sa-muted { color: var(--muted); }
.sa-link {
  color: var(--accent);
  font-weight: 650;
  font-size: 0.82rem;
  text-decoration: none;
}
.sa-link:hover { text-decoration: underline; }

.sa-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.sa-empty a { font-weight: 650; }

.sa-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sa-spin 0.7s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }

.sa-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem;
  color: var(--muted);
}

.sa-footer {
  margin-top: auto;
  padding: 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* —— Split layout helpers (landing / public funnel) ——
   .sa-split       — two-column grid; collapses to single column below 840 px
   .sa-split-pitch — left copy column; constrained width for readable measure
   .sa-split-form  — right card column; raised surface for a sign-up or action form */
.sa-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
  align-items: center;
}
.sa-split-pitch { max-width: 46ch; }
.sa-split-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
@media (max-width: 840px) {
  .sa-split { grid-template-columns: 1fr; gap: 2rem; }
  .sa-split-pitch { max-width: none; }
}

@media (max-width: 640px) {
  .sa-nav { padding: 0 0.85rem; }
  .sa-nav-links a { padding: 0.4rem 0.55rem; font-size: 0.8rem; }
  .sa-main { padding: 1.25rem 0.9rem 3rem; }
}

/* —— Searchable combobox ——
   Shared single-select replacement for a native <select> when the option list is long
   enough to want type-ahead search. onboard.html's Category field is its only consumer;
   leads.html's filter rail uses plain search inputs (.mgi-rail-search) over its option
   buttons, so there is no combobox on that page to switch. */
.sa-combo { position: relative; }
.sa-combo-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sa-combo-trigger:hover { border-color: var(--border-strong); }
.sa-combo-trigger:focus-visible,
.sa-combo-trigger.open {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.sa-combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-combo-value.placeholder { color: var(--muted); }
/* The caret is the only thing telling a merchant this is a control rather than a filled
   field. A 0.7rem muted glyph read as weaker than the native select it replaced — which was
   the complaint that started this — so it carries real weight. */
.sa-combo-caret { color: var(--text-secondary); font-size: 0.85rem; line-height: 1; transition: transform 0.15s, color 0.15s; flex-shrink: 0; }
.sa-combo-trigger:hover .sa-combo-caret { color: var(--text); }
/* A chosen value reads as chosen, not as placeholder text that happens to differ. */
.sa-combo-value:not(.placeholder) { font-weight: 600; color: var(--text); }
.sa-combo-trigger.open .sa-combo-caret { transform: rotate(180deg); }
.sa-combo-popup {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}
.sa-combo-popup[hidden] { display: none; }
.sa-combo-search {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.sa-combo-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.sa-combo-options { overflow-y: auto; }
.sa-combo-option {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.sa-combo-option:hover,
.sa-combo-option.active { background: var(--accent-soft); color: var(--accent); }
.sa-combo-option[aria-selected="true"] { font-weight: 700; }
.sa-combo-option[aria-selected="true"]::after { content: "✓"; float: right; }
.sa-combo-empty { padding: 0.5rem 0.65rem; font-size: 0.82rem; color: var(--muted); margin: 0; }