/* ── Admin MPA — page-specific styles ─────────────────────────────────────── */

/* ── Staff list (admin/staff.html) ── */
.add-staff-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px 12px;
  align-items: end;
  margin-bottom: 32px;
}
.add-staff-field {
  display: flex;
  flex-direction: column;
}
.add-staff-field--action { align-self: end; }
@media (max-width: 640px) {
  .add-staff-form { grid-template-columns: 1fr 1fr; }
  .add-staff-field:nth-child(1) { grid-column: span 2; }
  .add-staff-field:nth-child(2) { grid-column: span 2; }
  .add-staff-field--action { grid-column: span 2; }
}
.add-staff-btn {
  padding: 10px 18px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: var(--black);
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 150ms;
  white-space: nowrap;
}
.add-staff-btn:active { opacity: 0.8; }

.staff-list { display: flex; flex-direction: column; gap: 2px; }
.staff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms;
  text-decoration: none;
  color: inherit;
}
.staff-row:hover { background: var(--surface2); }
.staff-row__info { flex: 1; }
.staff-row__name { font: 600 0.9rem/1 var(--f-body); }
.staff-row__role {
  font: 500 0.72rem/1 var(--f-body);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}
.staff-row__role--manager { color: var(--accent); }
.staff-row__role--admin   { color: var(--accent-2); }
.staff-row__arrow { color: var(--muted); opacity: 0.45; flex-shrink: 0; }

/* ── Staff detail (admin/staff_detail.html) ── */
.page-header { margin-bottom: 32px; }
.page-title {
  font: 600 1.6rem/1 var(--f-disp);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-subtitle {
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.page-subtitle--manager { color: var(--accent); }
.page-subtitle--admin   { color: var(--accent-2); }

.input-row { display: flex; gap: 8px; align-items: center; }

.pin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.pin-row__field { display: flex; flex-direction: column; }
@media (max-width: 400px) { .pin-row { grid-template-columns: 1fr; } }
.pin-submit {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: var(--black);
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 150ms;
}
.pin-submit:active { opacity: 0.8; }

.pin-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pin-status--set   { color: oklch(0.72 0.14 145); }
.pin-status--unset { color: var(--muted); }

/* ── Multi-card tabs (admin/member_detail.html) ── */
.admin-card-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.admin-card-tab {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--dim2);
  background: transparent;
  color: var(--muted);
  font: 600 0.75rem/1 var(--f-body);
  letter-spacing: 0.04em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: background 120ms, color 120ms, border-color 120ms;
  cursor: pointer;
}
.admin-card-tab:hover {
  background: var(--dim);
  color: var(--white);
}
.admin-card-tab--active {
  background: var(--surface2);
  border-color: oklch(0.64 0.048 204 / 0.30);
  color: var(--white);
}
.admin-card-tab__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Member detail (admin/member_detail.html) ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  margin-bottom: 20px;
  font: 500 0.8rem/1 var(--f-body);
  color: var(--muted);
  transition: color 120ms;
}
.back-link:hover { color: var(--white); }

.info-card {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 12px;
}
.info-card--edit { padding: 20px 24px; }
.info-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.info-card__name {
  font: 600 1.4rem/1 var(--f-disp);
  letter-spacing: 0.03em;
}
.btn-info-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--dim2);
  border-radius: 7px;
  color: var(--muted);
  font: 500 0.72rem/1 var(--f-body);
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 120ms, color 120ms;
  min-height: 32px;
}
.btn-info-edit:hover { border-color: var(--accent); color: var(--accent); }
.sec-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sec-label__opt {
  font: 400 0.65rem/1 var(--f-body);
  text-transform: none;
  letter-spacing: 0;
  color: oklch(0.72 0.009 75 / 0.50);
}
.info-card__edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.info-row { display: flex; flex-direction: column; gap: 8px; }
.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 0.82rem/1 var(--f-body);
  color: var(--muted);
}
.info-item svg { flex-shrink: 0; color: oklch(0.72 0.009 75 / 0.6); }
.info-item span { color: var(--white); }

.stamp-card {
  background: var(--surface2);
  border: 1px solid oklch(0.64 0.048 204 / 0.18);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 20px oklch(0 0 0 / 0.40);
}

/* ── Shared scan card components (mirrors staff.css) ── */
.scan-stamp-card {
  background: var(--surface2);
  border: 1px solid oklch(0.64 0.048 204 / 0.18);
  border-radius: 16px;
  padding: 16px 18px 18px;
  margin-bottom: 10px;
  box-shadow: 0 2px 16px oklch(0 0 0 / 0.38);
}
.pending-reward-banner {
  background: oklch(0.64 0.048 204 / 0.09);
  border: 1px solid oklch(0.64 0.048 204 / 0.30);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pending-reward-banner__header { display: flex; align-items: center; gap: 10px; }
.pending-reward-banner__icon { color: var(--accent); flex-shrink: 0; }
.pending-reward-banner__title { font: 600 0.88rem/1.2 var(--f-body); color: var(--accent); flex: 1; }
.pending-reward-banner--mega { background: oklch(0.72 0.055 72 / 0.08); border-color: var(--accent-2); }
.pending-reward-banner--mega .pending-reward-banner__icon,
.pending-reward-banner--mega .pending-reward-banner__title { color: var(--accent-2); }
.pending-reward-banner__sub { font: 400 0.72rem/1 var(--f-body); color: var(--muted); margin-left: 28px; }
.pending-reward-banner__expiry { font: 400 0.72rem/1 var(--f-body); color: var(--muted); margin-left: 28px; }
.pending-reward-banner__desc {
  font: 400 0.78rem/1.5 var(--f-body);
  color: var(--white);
  margin-left: 28px;
  padding-top: 6px;
  border-top: 1px solid oklch(0.64 0.048 204 / 0.15);
}
.scan-stamp-card--mega {
  border-color: var(--accent-2);
  box-shadow: 0 2px 16px oklch(0 0 0 / 0.38), 0 0 0 1px oklch(0.72 0.055 72 / 0.20);
}

/* Mega reward progress badge */
.mega-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  padding: 9px 2px 2px;
  margin-bottom: 10px;
}
.mega-badge__icon { color: var(--muted); flex-shrink: 0; opacity: 0.7; }
.mega-badge__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-badge__sep { opacity: 0.4; }
.mega-badge__progress { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mega-badge--on { color: var(--accent-2); }
.mega-badge--on .mega-badge__icon { color: var(--accent-2); opacity: 1; }

.stamp-summary { display: flex; align-items: baseline; gap: 6px; }
.stamp-summary__count { font: 600 2.5rem/1 var(--f-disp); letter-spacing: -0.01em; }
.stamp-summary__of { font: 400 1.1rem/1 var(--f-disp); color: var(--muted); }
.stamp-summary__label { font: 500 0.75rem/1 var(--f-body); color: var(--muted); margin-left: 2px; }
.stamp-actions { display: flex; flex-direction: column; gap: 10px; }
.stamp-row { display: flex; gap: 10px; }
.sr-confirm {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; border-radius: 10px;
  background: oklch(0.64 0.048 204 / 0.10); border: 1px solid oklch(0.64 0.048 204 / 0.28);
  color: var(--accent); font: 600 0.85rem/1 var(--f-body); letter-spacing: 0.02em;
}
.sr-confirm--reward { background: oklch(0.64 0.048 204 / 0.12); border-color: oklch(0.64 0.048 204 / 0.35); color: var(--accent); }
.sr-confirm--mega-reward { background: oklch(0.72 0.055 72 / 0.10); border-color: var(--accent-2); color: var(--accent-2); }
@keyframes stamp-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.alert-banner { border-radius: 10px; padding: 12px 14px; font: 500 0.82rem/1.45 var(--f-body); }
.alert-banner--spaced { margin-top: 12px; }
.alert-banner--critical { background: var(--alert-bg); border: 1px solid var(--alert-bd); color: var(--alert-tx); margin-bottom: 10px; }
.alert-banner--mega { background: oklch(0.72 0.055 72 / 0.10); border: 1px solid var(--accent-2); color: var(--accent-2); margin-bottom: 10px; }
.alert-banner__title { font: 600 0.82rem/1 var(--f-body); margin-bottom: 4px; }
.correction-section {
  border-top: 1px solid var(--dim);
  padding-top: 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.correction-label {
  font: 600 0.62rem/1 var(--f-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
#correction-add-row[hidden] { display: none !important; }
.admin-tx-list { display: flex; flex-direction: column; gap: 0; }
.tx-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dim); }
.tx-row:last-child { border-bottom: none; }
.tx-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tx-icon--earned   { background: oklch(0.64 0.048 204 / 0.15); color: var(--accent); }
.tx-icon--redeem   { background: oklch(0.64 0.048 204 / 0.08); color: var(--accent); }
.tx-icon--referral { background: oklch(0.72 0.055 72 / 0.12); color: var(--accent-2); }
.tx-icon--welcome  { background: oklch(0.64 0.048 204 / 0.10); color: var(--accent); }
.tx-info { flex: 1; min-width: 0; }
.tx-title { font: 500 0.88rem/1.2 var(--f-body); }
.tx-sub { font: 400 0.72rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }
.tx-delta { font: 600 1rem/1 var(--f-disp); letter-spacing: 0.02em; flex-shrink: 0; }
.tx-delta--earned   { color: var(--accent); }
.tx-delta--redeem   { color: var(--muted); }
.tx-delta--referral { color: var(--accent-2); }
.danger-section { border-top: 1px solid var(--dim); padding-top: 16px; margin-top: 4px; }
.card-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.card-tab {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent-bd);
  background: oklch(0.97 0.010 75 / 0.04);
  color: var(--muted);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.card-tab:hover { background: oklch(0.64 0.048 204 / 0.06); border-color: var(--accent); color: var(--white); }
.card-tab--active { background: oklch(0.64 0.048 204 / 0.12); border-color: var(--accent); color: var(--white); }
.card-tab:active { opacity: 0.75; }
.card-tab__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* Shared btn system (mirrors staff.css) */
.btn {
  flex: 1;
  min-height: 52px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 0.85rem/1 var(--f-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 120ms;
}
.btn:active { opacity: 0.8; }
.btn--primary { background: var(--accent); color: oklch(0.97 0.005 204); }
.btn--secondary { background: color-mix(in oklch, var(--white) 5%, transparent); border: 1px solid color-mix(in oklch, var(--white) 40%, transparent); color: var(--white); }
.btn--full { width: 100%; }
.btn--outline { background: transparent; border: 1px solid var(--dim2); color: var(--muted); }
.btn--danger-action { background: transparent; border: 1px solid var(--alert-bd); color: var(--alert-tx); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn__count { font: 600 1.2rem/1 var(--f-disp); letter-spacing: 0; }

/* ── Admin nav ── */
html[data-ui-surface="ops"],
html[data-ui-surface="ops"] body {
  min-height: 100svh;
}
.topbar.no-print {
  gap: 14px;
  padding-top: env(safe-area-inset-top);
  min-height: calc(72px + env(safe-area-inset-top));
}
.header__nav { display: flex; align-items: center; gap: 4px; }
.header__nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  min-height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.header__nav-link:hover { background: var(--dim); color: var(--white); }
.header__nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.header__nav-link {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.header__nav-form { display: flex; }
.topbar__actions--admin {
  gap: 10px;
}

/* Nav submenu ("Setări") */
.nav-sub { position: relative; }
.nav-sub__trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
}
.nav-sub__state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}
.nav-sub__trigger svg { transition: transform 150ms ease-out; flex-shrink: 0; }
.nav-sub--open .nav-sub__trigger svg { transform: rotate(180deg); }
.nav-sub__dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 10px;
  padding: 4px;
  min-width: 148px;
  z-index: 200;
  box-shadow: 0 8px 24px -4px oklch(0 0 0 / 0.45);
}
.nav-sub--open .nav-sub__dropdown { display: flex; }
.nav-sub__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 7px;
  transition: background 100ms, color 100ms;
  white-space: nowrap;
}
.nav-sub__item:hover { background: var(--dim); color: var(--white); }
.nav-sub__item--active { background: var(--dim); color: var(--white); }
.nav-sub__item--button {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.nav-sub__form {
  display: block;
  width: 100%;
}
.nav-sub__item-copy {
  min-width: 0;
}
.nav-sub__item--toggle .appearance-control {
  margin-left: auto;
}
.nav-sub--account .nav-sub__dropdown {
  min-width: 188px;
}
.header__nav-link--account {
  min-width: 0;
  max-width: 15rem;
  gap: 8px;
}
.header__nav-link--account .staff-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header__nav-link--account .nav-sub__state-dot {
  margin-left: auto;
}

/* Nav container — pushed to the right */
.nav-hamburger {
  display: flex;
  align-items: center;
  position: relative;
}
.nav-toggle-btn   { display: none; }

/* ── Mobile hamburger (≤780px) ── */
@media (max-width: 780px) {
  .nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--muted);
    border: 1px solid var(--dim2);
    background: none;
    transition: background 120ms, color 120ms;
    flex-shrink: 0;
  }
  .nav-toggle-btn:hover { background: var(--dim); color: var(--white); }
  .nav-toggle-btn[aria-expanded="true"] { background: var(--dim); color: var(--white); }

  .nav-hamburger .header__nav[hidden] { display: none !important; }
  .nav-hamburger .header__nav:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface2);
    border: 1px solid var(--dim2);
    border-radius: 12px;
    padding: 6px;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 32px));
    z-index: 200;
    box-shadow: 0 8px 24px -4px oklch(0 0 0 / 0.45);
  }
  .nav-hamburger .header__nav .header__nav-link {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .header__nav-form { display: block; width: 100%; }
  .nav-sub { width: 100%; }
  .nav-sub__trigger { width: 100%; }
  .nav-sub__dropdown {
    position: static;
    background: none;
    border: none;
    border-top: 1px solid var(--dim);
    border-radius: 0;
    padding: 2px 0 0;
    min-width: 0;
    box-shadow: none;
    margin-top: 2px;
  }
  .nav-sub__item {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 7px;
    width: 100%;
  }
}

/* ── Dashboard / member list ── */
.member-count {
  font: 500 0.72rem/1 var(--f-body);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.search-wrap--spaced { margin-bottom: 10px; }
.member-list-empty {
  color: var(--muted);
  text-align: center;
  padding: 40px 0;
  font: 400 0.9rem/1.5 var(--f-body);
}
.staff-list-empty {
  color: var(--muted);
  padding: 24px 0;
  font: 400 0.9rem/1.5 var(--f-body);
}
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 24px;
}
@media (min-width: 540px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.member-list { display: flex; flex-direction: column; gap: 2px; }
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms var(--ease-out);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.member-row:hover  { background: var(--surface2); }
.member-row:active { background: var(--surface3); }
.member-row--ready {
  background: oklch(0.64 0.048 204 / 0.06);
  border-color: oklch(0.64 0.048 204 / 0.22);
}
.member-row--ready:hover { background: oklch(0.64 0.048 204 / 0.10); }

.member-info { flex: 1; min-width: 0; }
.member-name {
  font: 600 0.9rem/1 var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-meta { font: 400 0.72rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }
.member-last {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  display: none;
}
@media (min-width: 560px) { .member-last { display: block; } }
.member-arrow { color: var(--muted); flex-shrink: 0; opacity: 0.45; }

.mini-stamps { display: flex; gap: 2px; flex-shrink: 0; align-items: center; }
.ms {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 600px) { .mini-stamps { gap: 3px; } .ms { width: 20px; height: 20px; } }
.ms--earned { background: var(--accent); border: 1px solid var(--accent); }
.ms--empty  { background: transparent; border: 1px solid oklch(0.97 0.010 75 / 0.12); }
.ms--reward { background: transparent; border: 1px dashed oklch(0.97 0.010 75 / 0.18); border-radius: 4px; margin-left: 3px; }
.ms--reward-ready { background: oklch(0.64 0.048 204 / 0.15); border: 1px dashed var(--accent); border-radius: 4px; margin-left: 3px; }

.card-chip {
  font: 600 0.68rem/1 var(--f-body);
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--dim);
  border: 1px solid var(--dim2);
  border-radius: 5px;
  padding: 4px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.member-row--ready .card-chip {
  color: var(--accent);
  background: oklch(0.64 0.048 204 / 0.10);
  border-color: oklch(0.64 0.048 204 / 0.22);
}

.reward-badge {
  font: 600 0.65rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: oklch(0.64 0.048 204 / 0.12);
  border: 1px solid oklch(0.64 0.048 204 / 0.28);
  border-radius: 4px;
  padding: 3px 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

.header__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
a.header__identity {
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: opacity 120ms;
}
a.header__identity:hover { opacity: 0.72; }
.header__wordmark {
  font: 600 1.2rem/1 var(--f-disp);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header__subtitle {
  font: 500 0.75rem/1 var(--f-body);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__nav-link--active { background: var(--dim); color: var(--white); }

/* ── Brand settings (admin/brand.html) ── */
.brand-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font: 500 0.8rem/1.35 var(--f-body);
  margin-bottom: 4px;
}
.brand-notice svg { flex-shrink: 0; }
.brand-notice--ok {
  background: oklch(0.62 0.14 145 / 0.10);
  color: oklch(0.72 0.14 145);
  border: 1px solid oklch(0.62 0.14 145 / 0.22);
}
.brand-notice--warn {
  background: oklch(0.65 0.15 70 / 0.10);
  color: oklch(0.78 0.15 70);
  border: 1px solid oklch(0.65 0.15 70 / 0.30);
}
.brand-notice--err {
  background: oklch(0.62 0.19 28 / 0.10);
  color: oklch(0.78 0.16 28);
  border: 1px solid oklch(0.62 0.19 28 / 0.30);
}
.brand-notice--section { margin-bottom: 16px; }
.brand-form { display: flex; flex-direction: column; gap: 18px; }
.brand-form--spaced { margin-top: 12px; }
.brand-field { display: flex; flex-direction: column; gap: 6px; }
.brand-field--spaced { margin-top: 12px; }
.brand-label {
  font: 600 11px/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-label--inline { margin: 0; }
.brand-hint {
  font: 400 0.72rem/1.4 var(--f-body);
  color: oklch(0.50 0.006 75);
}
.brand-hint--section { margin-bottom: 14px; }
.brand-hint--compact { margin-bottom: 12px; }
.brand-hint--alert { margin-top: 4px; }
.brand-help-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 8px;
  padding: 14px;
  margin: 0 0 16px;
}
.brand-help-strip__item {
  display: flex;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
}
.brand-help-strip__item svg {
  flex: 0 0 auto;
  color: var(--accent);
  margin-top: 2px;
}
.brand-help-strip__item strong {
  display: block;
  color: var(--white);
  font: 600 0.82rem/1.25 var(--f-body);
  margin-bottom: 3px;
}
.brand-help-strip__item span {
  display: block;
  font: 400 0.76rem/1.45 var(--f-body);
  color: var(--muted);
}
.brand-help-strip__link,
.brand-context-help a {
  color: var(--accent);
  text-decoration: none;
  font: 600 0.76rem/1.2 var(--f-body);
}
.brand-help-strip__link {
  align-self: center;
  white-space: nowrap;
  padding: 8px 10px;
  border: 1px solid var(--accent-bd);
  border-radius: 6px;
}
.brand-help-strip__link:hover,
.brand-help-strip__link:focus-visible,
.brand-context-help a:hover,
.brand-context-help a:focus-visible {
  color: var(--white);
  border-color: var(--accent);
  outline: none;
}
.brand-context-help {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--dim);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.brand-context-help span {
  color: var(--muted);
  font: 400 0.78rem/1.45 var(--f-body);
  max-width: 72ch;
}
.brand-context-help a {
  flex: 0 0 auto;
  margin-top: 1px;
}
@media (max-width: 760px) {
  .brand-help-strip { grid-template-columns: 1fr; }
  .brand-help-strip__link { justify-self: start; }
}
@media (max-width: 560px) {
  .brand-context-help { flex-direction: column; gap: 8px; }
}
.brand-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
@media (max-width: 520px) { .brand-row { grid-template-columns: 1fr; } }
.brand-color-row { display: flex; gap: 8px; align-items: center; }
.brand-color-picker {
  width: 44px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--dim2);
  border-radius: 7px;
  background: var(--surface2);
  cursor: pointer;
  flex-shrink: 0;
}
.brand-color-text { flex: 1; }
.brand-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--dim2);
  flex-shrink: 0;
}
/* brand-actions after brand-fields: gap already handled by brand-form flex gap;
   when it follows a brand-field sibling the rule below adds a bit more air. */
.brand-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.brand-field + .brand-actions,
.brand-section .brand-field + .brand-actions { margin-top: 4px; }
.brand-section + .brand-section { border-top: 1px solid var(--dim); padding-top: 20px; margin-top: 8px; }
/* Vertical rhythm between consecutive form fields within a section */
.brand-section .brand-field + .brand-field { margin-top: 12px; }
.brand-form-footer { border-top: 1px solid var(--dim); padding-top: 16px; margin-top: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.brand-form-footer--section { margin-top: 16px; }
.brand-form-footer--actions { flex-wrap: wrap; gap: 10px; }
.brand-card-spaced { margin-top: 12px; }
.brand-section-label { margin-bottom: 16px; }
.brand-section-label--tight { margin-bottom: 4px; }
.brand-field-input--compact { max-width: 280px; }
.brand-link { color: var(--accent); }

/* ── Logo layout controls (admin/brand.html) ── */
.logo-width-custom { margin-right: 8px; vertical-align: middle; accent-color: var(--accent); }
.logo-width-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; max-width: 380px; }
.logo-width-range { flex: 1; accent-color: var(--accent); cursor: pointer; }
.logo-width-range:disabled { opacity: 0.4; cursor: not-allowed; }
.logo-width-out {
  min-width: 44px;
  text-align: right;
  font: 600 0.85rem/1 var(--f-body);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.logo-align-group { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.logo-align-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  cursor: pointer;
  font: 500 0.82rem/1 var(--f-body);
  background: var(--surface2);
  transition: border-color 120ms, box-shadow 120ms;
}
.logo-align-opt input { accent-color: var(--accent); margin: 0; }
.logo-align-opt:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px oklch(0.64 0.048 204 / 0.25);
}
.brand-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 520px) { .brand-logos { grid-template-columns: 1fr; } }
.brand-logo-slot { display: flex; flex-direction: column; gap: 10px; }
.brand-logo-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 600 12px/1.3 var(--f-body);
  color: var(--white);
}
.brand-logo-sub {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
}
.brand-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border-radius: 8px;
  border: 1px solid var(--dim2);
}
.brand-logo-preview--theme { background: var(--black); }
/* Wallet logo: fixed dark background — wallet passes always have dark cards */
.brand-logo-preview--wallet { background: oklch(0.09 0.008 204); }
/* Google Wallet preview: white outer "chip" with a brand-accent-coloured circle.
   The image is masked to the circle so the tenant sees Google's actual rendering. */
.brand-logo-preview--google-wallet {
  background: #ffffff;
  position: relative;
}
.brand-logo-preview--google-wallet .brand-logo-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent, oklch(0.09 0.008 204));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-logo-preview--google-wallet .brand-logo-circle img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
/* Favicon: split light/dark so you can judge visibility in both browser themes */
.brand-logo-preview--favicon { height: 64px; background: linear-gradient(to right, #f0f0f0 50%, #1a1a1e 50%); }
.brand-logo-img { max-height: 48px; max-width: 100%; object-fit: contain; }
.brand-logo-img--topbar { max-height: 30px; }
.brand-logo-img--favicon { height: 48px; width: 48px; object-fit: contain; }
.brand-logo-optional { font-weight: 400; color: var(--muted); font-size: 0.78em; }

/* ── Language tabs for tenant-authored translatable inputs ─────────────────── */
.i18n-field { display: flex; flex-direction: column; gap: 6px; }
.i18n-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.i18n-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--dim2); border-radius: 6px; }
.i18n-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 2px 8px; min-height: 22px;
  font: 600 0.65rem/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border-radius: 4px;
  transition: background 120ms, color 120ms;
}
.i18n-tab:hover { color: var(--white); }
.i18n-tab.is-active { background: var(--accent, oklch(0.55 0.05 200)); color: var(--white); }
.i18n-tab[aria-selected="true"] { background: var(--accent, oklch(0.55 0.05 200)); color: var(--white); }
.i18n-panel[hidden] { display: none; }
.brand-logo-slot--compact { max-width: 200px; }
.brand-upload-form { display: flex; gap: 8px; align-items: center; }
.brand-upload-label { position: relative; flex: 1; }
.brand-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.brand-upload-btn {
  display: block;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 7px;
  padding: 9px 12px;
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.brand-upload-label:hover .brand-upload-btn { border-color: var(--accent); color: var(--white); }
.field-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent-bd);
  text-decoration: none;
}
.field-btn--ghost:hover {
  background: var(--accent);
  color: oklch(0.97 0.005 204);
  border-color: var(--accent);
  opacity: 1;
}
.brand-domain-notice { margin-bottom: 12px; }

/* ── Theme preset tiles (admin/brand.html) ── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.theme-grid__sep {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--dim2);
  margin: 6px 0;
}

.theme-tile {
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid var(--dim2);
  background: var(--surface2);
  overflow: hidden;
  transition: border-color 150ms;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.theme-tile:hover { border-color: oklch(0.97 0.010 75 / 0.30); }
.theme-tile:has(.theme-tile__radio:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px oklch(0.64 0.048 204 / 0.25);
}
.theme-tile:has(.theme-tile__radio:checked) .theme-tile__preview::after {
  content: '';
  position: absolute;
  top: 5px; right: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.theme-tile__preview { position: relative; }

.theme-tile__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.theme-tile__preview {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.theme-tile__mini {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding: 6px 7px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.theme-tile__line {
  height: 3px;
  border-radius: 2px;
  opacity: 0.55;
  flex-shrink: 0;
}

.theme-tile__stamps {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  flex-shrink: 0;
}
.theme-tile__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  flex-shrink: 0;
}
.theme-tile__dot--on {
  border-color: transparent;
}

.theme-tile__cta {
  height: 7px;
  border-radius: 3px;
  width: 52%;
  margin-top: auto;
  flex-shrink: 0;
}

.theme-tile__footer {
  padding: 7px 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.theme-tile__name {
  font: 600 0.68rem/1.2 var(--f-body);
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-tile__badge {
  font: 500 0.58rem/1 var(--f-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.theme-tile__badge--dark  { color: var(--muted); }
.theme-tile__badge--light { color: var(--accent-2); }
.custom-panel {
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.custom-panel[hidden] { display: none; }
.custom-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.custom-color-input {
  width: 40px;
  height: 32px;
  padding: 2px;
  border: none;
  border-radius: 6px;
  background: var(--surface3);
  cursor: pointer;
  flex-shrink: 0;
}
.custom-mode-toggle {
  display: flex;
  background: var(--surface3);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.custom-mode-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.custom-mode-btn {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.custom-mode-radio:checked + .custom-mode-btn { background: var(--accent); color: #fff; }
.custom-tokens {
  border-top: 1px solid var(--dim);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.custom-tokens .custom-panel__row { gap: 12px; }
.custom-start-from {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--white);
  background: var(--surface3);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  cursor: pointer;
}

/* ── Promotion form (admin/promotion_form.html) ── */
.form-row { margin-bottom: 14px; }
.form-label {
  display: block;
  font: 500 0.75rem/1 var(--f-body);
  letter-spacing: 0.01em;
  color: oklch(0.72 0.012 75);
  margin-bottom: 6px;
}
.form-label__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.form-hint {
  font: 400 0.72rem/1.4 var(--f-body);
  color: var(--muted);
  margin-top: 5px;
}
.form-hint--section { margin-bottom: 14px; }
.form-hint--compact { margin-bottom: 4px; }
.form-hint--offset { margin-top: 8px; }
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check__label { font: 500 0.86rem/1 var(--f-body); }
.form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px) {
  .form-2col { grid-template-columns: 1fr; }
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--dim);
}
.form-cancel {
  font: 500 0.8rem/1 var(--f-body);
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms;
}
.form-cancel:hover { color: var(--white); }
.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: oklch(0.55 0.18 25 / 0.12);
  border: 1px solid oklch(0.55 0.18 25 / 0.3);
  border-radius: 8px;
  font: 500 0.8rem/1.4 var(--f-body);
  color: oklch(0.75 0.14 25);
  margin-bottom: 20px;
}
.mega-fields--inactive {
  opacity: 0.42;
  pointer-events: none;
}
.field-input--compact { max-width: 120px; }
.cardbg-preview-wrap {
  margin-top: 12px;
  max-width: 360px;
}
.cardbg-color-input {
  width: 56px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
/* Card-config method blocks (swatch / gradient / advanced) with active-source highlight */
.cardcfg-method {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 140ms, background 140ms;
}
.cardcfg-method--active {
  border-color: oklch(0.64 0.048 204 / 0.45);
  background: oklch(0.64 0.048 204 / 0.06);
}
.cardcfg-method__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cardcfg-method__label {
  font: 600 0.7rem/1 var(--f-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.cardcfg-method__badge {
  font: 600 0.58rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: oklch(0.64 0.048 204 / 0.16);
  padding: 3px 7px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 140ms;
}
.cardcfg-method--active .cardcfg-method__badge { opacity: 1; }
details.adv-css.cardcfg-method { margin-top: 14px; }
details.adv-css.cardcfg-method .adv-css__summary { display: flex; align-items: center; gap: 8px; }
.cardcfg-accent { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.cardcfg-accent .form-check { margin-bottom: 0; }
.grad-builder { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.grad-stop { display: flex; flex-direction: column; gap: 4px; }
.grad-stop__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.grad-angle { min-width: 130px; }
.adv-css { margin-top: 12px; }
.adv-css__summary { cursor: pointer; font-size: 0.8rem; opacity: 0.8; margin-bottom: 8px; }
.promo-form-swatches { margin-top: 10px; }
.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.swatch-grid--compact { gap: 5px; }
.bg-swatch {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid oklch(0.97 0.010 75 / 0.15);
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
  flex-shrink: 0;
}
.bg-swatch:hover {
  border-color: var(--accent);
  transform: scale(1.08);
}
.bg-swatch--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  transform: scale(1.08);
}

/* ── Stamp icon picker (admin/brand.html) ── */
.stamp-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stamp-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.stamp-icon-tile__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.stamp-icon-tile__circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid transparent;
  transition: border-color 120ms, box-shadow 120ms;
}
.stamp-icon-tile__radio:checked + .stamp-icon-tile__circle {
  border-color: var(--white);
  box-shadow: 0 0 0 2px var(--accent);
}
.stamp-icon-tile__img {
  width: 52%;
  height: 52%;
  object-fit: contain;
}
.stamp-icon-tile__name {
  font: 500 0.64rem/1 var(--f-body);
  color: var(--muted);
  text-align: center;
}
.brand-stamp-preview {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-stamp-img {
  width: 55%;
  height: 55%;
  object-fit: contain;
}
.stamp-upload-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--dim);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stamp-upload-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stamp-upload-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stamp-upload-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}

.hidden { display: none !important; }

/* ── Security & Accounts shared styles ────────────────────────────────────── */
.sec-section { margin-top: 20px; }
.sec-section--separated { margin-top: 32px; }
.section-header--spaced { margin-top: 14px; }
.sec-card {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 20px;
  margin-top: 8px;
}
.sec-card + .sec-card { margin-top: 10px; }
.sec-card--flush { padding: 0; }
.sec-label {
  font: 600 0.72rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 14px;
}
.sec-desc {
  font: 400 0.82rem/1.55 var(--f-body);
  color: var(--muted);
  margin-bottom: 16px;
}
.sec-desc--compact { margin-bottom: 14px; }
.admin-page-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 14px;
  margin-bottom: 22px;
}
.admin-page-head .section-title { flex: none; }
.admin-page-sub {
  margin: 4px 0 0;
  max-width: 70ch;
  font: 400 0.85rem/1.5 var(--f-body);
  color: var(--muted);
}
.sec-section--spaced { margin-top: 24px; }
.sec-form-row { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.sec-form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
}
.sec-field { display: flex; flex-direction: column; }
.sec-field__label {
  display: block;
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.sec-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  font: 400 0.88rem/1 var(--f-body);
  color: var(--white);
  box-sizing: border-box;
  outline: none;
  transition: border-color 150ms;
}
.sec-input:focus { border-color: var(--accent); }
/* Accessibility — keyboard focus ring on form inputs. The input primitives set
   `outline: none` in their base rule, which (equal specificity, later source order)
   also suppresses the global :focus-visible ring from base.css. Re-assert a visible
   ring for keyboard focus only; mouse :focus keeps the subtler border-color shift.
   WCAG 2.4.7 (Focus Visible) / 1.4.11 (Non-text Contrast). */
.sec-input:focus-visible,
.sec-select:focus-visible,
.gate__input:focus-visible,
.acc-pw-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input[type="date"].sec-input { color-scheme: light; }
.field__phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.field__phone-group:focus-within { border-color: var(--accent); }
.field__phone-dial {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--dim2);
  flex-shrink: 0;
}
.field__dial-select {
  background: transparent;
  border: none;
  color: var(--white);
  font: 400 0.88rem/1 var(--f-body);
  padding: 9px 28px 9px 10px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.field__dial-arrow {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  opacity: 0.6;
}
.field__input--phone {
  background: transparent;
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  color: var(--white);
  font: 400 0.88rem/1 var(--f-body);
  outline: none;
}
.sec-select {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  font: 400 0.88rem/1 var(--f-body);
  color: var(--white);
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
}
.sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font: 600 0.82rem/1 var(--f-body);
  cursor: pointer;
  transition: opacity 120ms;
  width: fit-content;
  margin-top: 4px;
  min-height: 44px;
}
.sec-btn:hover { opacity: 0.85; }
.sec-btn--primary { background: var(--accent); color: oklch(0.97 0.005 204); }
.sec-btn--danger  {
  background: var(--danger-bg);
  color: var(--danger-tx);
  border: 1px solid var(--danger-bd);
}
.sec-btn--danger:hover { background: oklch(from var(--danger-bg) l c h / 0.25); }
.sec-btn--touch { min-height: 44px; }
.sec-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font: 500 0.82rem/1.4 var(--f-body);
  margin-bottom: 14px;
}
.sec-notice--ok  { background: oklch(0.72 0.14 165 / 0.1); color: oklch(0.72 0.14 165); border: 1px solid oklch(0.72 0.14 165 / 0.2); }
.sec-notice--err { background: oklch(0.62 0.15 25 / 0.1); color: oklch(0.72 0.12 25); border: 1px solid oklch(0.62 0.15 25 / 0.2); }

/* ── Admin help center ────────────────────────────────────────────────────── */
.help-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Sidebar */
.help-sidebar {
  position: sticky;
  top: 82px;
}
.help-sidebar__home {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font: 500 0.78rem/1 var(--f-body);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--dim2);
  margin-bottom: 8px;
}
.help-sidebar__home:hover { color: var(--white); }
.help-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.help-sidebar__link {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font: 500 0.83rem/1.3 var(--f-body);
  padding: 7px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
}
.help-sidebar__link:hover,
.help-sidebar__link:focus-visible {
  color: var(--white);
  background: var(--surface2);
  outline: none;
}
.help-sidebar__link--active {
  color: var(--white);
  font-weight: 600;
  background: var(--accent-bd, oklch(0.64 0.048 204 / 0.08));
  border-left-color: var(--accent);
}

/* Content area */
.help-content {
  min-width: 0;
}

/* Card grid (index page) */
.help-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.help-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.help-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.06);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .help-card { transition: none; }
  .help-card:hover { transform: none; }
}
.help-card__title {
  margin: 0 0 6px;
  color: var(--white);
  font: 600 0.95rem/1.2 var(--f-body);
}
.help-card__sub {
  margin: 0;
  flex: 1;
  color: var(--muted);
  font: 400 0.82rem/1.5 var(--f-body);
}
.help-card__cta {
  display: block;
  margin-top: 14px;
  color: var(--accent);
  font: 500 0.78rem/1 var(--f-body);
}

/* Article page layout */
.help-content--article {
  max-width: 680px;
}
.help-back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  text-decoration: none;
  font: 500 0.80rem/1 var(--f-body);
}
.help-back:hover { color: var(--white); }

/* Article wrapper */
.help-article {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 24px;
}
.help-article__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.help-article__head h1 {
  margin: 0;
  color: var(--white);
  font: 700 1.4rem/1.15 var(--f-body);
  flex: 1;
}
.help-article__summary {
  margin: 6px 0 20px;
  color: var(--muted);
  font: 400 0.88rem/1.6 var(--f-body);
}
.help-article__intro {
  margin: 0 0 14px;
  color: var(--muted);
  font: 400 0.88rem/1.6 var(--f-body);
}
.help-article__h {
  margin: 24px 0 12px;
  color: var(--white);
  font: 600 0.82rem/1.2 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.help-article__note {
  flex: 0 0 auto;
  max-width: 200px;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  padding: 8px 10px;
  font: 500 0.76rem/1.35 var(--f-body);
}

/* Steps list */
.help-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: help-step;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.help-step {
  counter-increment: help-step;
  padding-left: 36px;
  position: relative;
}
.help-step::before {
  content: counter(help-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  color: var(--muted);
  font: 600 0.72rem/22px var(--f-body);
  text-align: center;
}
.help-step__heading {
  color: var(--white);
  font: 600 0.88rem/1.3 var(--f-body);
  margin-bottom: 4px;
}
.help-step__body {
  margin: 0 0 8px;
  color: var(--muted);
  font: 400 0.84rem/1.55 var(--f-body);
}

/* Callout boxes */
.help-callout {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--dim2);
  background: var(--surface2);
  font: 400 0.82rem/1.5 var(--f-body);
  color: var(--muted);
}
.help-callout--seen {
  background: oklch(0.64 0.048 204 / 0.07);
  border-color: oklch(0.64 0.048 204 / 0.22);
  color: var(--white);
}
.help-callout--warn {
  background: var(--danger-bg);
  border-color: oklch(from var(--danger) l c h / 0.30);
  color: var(--danger-tx);
}
.help-callout__label {
  display: inline;
  font: 600 0.70rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 5px;
}
.help-callout--seen .help-callout__label { color: var(--accent); }
.help-callout--warn .help-callout__label { color: var(--danger-tx); }

/* Options / troubleshooting list */
.help-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font: 400 0.84rem/1.6 var(--f-body);
}
.help-list li + li { margin-top: 6px; }

/* Launch checklist */
.help-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.help-checklist__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--surface2);
  border: 1px solid var(--dim);
}
.help-checklist__item a {
  color: var(--white);
  text-decoration: none;
  font: 600 0.86rem/1.2 var(--f-body);
}
.help-checklist__item a:hover { color: var(--accent); }
.help-checklist__sub {
  color: var(--muted);
  font: 400 0.78rem/1.35 var(--f-body);
}
.help-checklist__item--done {
  opacity: 0.55;
}
.help-checklist__item--done a {
  text-decoration: line-through;
  color: var(--muted);
}
.help-checklist__item--done::before {
  content: "✓";
  float: right;
  color: oklch(0.72 0.14 165);
  font: 600 0.82rem/1 var(--f-body);
}

/* Responsive */
@media (max-width: 820px) {
  .help-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .help-sidebar {
    position: static;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .help-sidebar__home {
    display: inline-block;
    padding: 0 12px 0 0;
    border-bottom: none;
    border-right: 1px solid var(--dim2);
    margin-bottom: 0;
    margin-right: 4px;
    vertical-align: middle;
  }
  .help-sidebar__nav {
    display: inline-flex;
    flex-direction: row;
    gap: 2px;
    vertical-align: middle;
  }
  .help-sidebar__link {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    padding: 6px 10px;
  }
  .help-sidebar__link--active {
    border-bottom-color: var(--accent);
    border-left-color: transparent;
  }
  .help-content--article {
    max-width: none;
  }
}
@media (max-width: 620px) {
  .help-article { padding: 18px; }
  .help-article__head { flex-direction: column; }
  .help-article__note { max-width: none; }
}

/* ── Appearance page ──────────────────────────────────────────────────────── */
.appearance-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.appearance-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--dim);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--panel) 90%, white 10%), var(--panel));
}
.appearance-option input {
  margin-top: 3px;
  accent-color: var(--accent);
}
.appearance-option__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.appearance-option__copy strong {
  font: 600 0.92rem/1 var(--f-body);
  color: var(--white);
}
.appearance-option__copy small {
  font: 400 0.8rem/1.45 var(--f-body);
  color: var(--muted);
}
.appearance-form__actions {
  margin-top: 6px;
}
.appearance-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.appearance-preview-card {
  border-radius: 18px;
  padding: 16px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 190px;
}
.appearance-preview-card--light {
  background: linear-gradient(180deg, #fbfdfd, #eef4f4);
  border-color: oklch(0.24 0.016 196 / 0.10);
  color: #183233;
}
.appearance-preview-card--dark {
  background: linear-gradient(180deg, #20252d, #171b20);
  border-color: oklch(0.95 0.004 240 / 0.10);
  color: #eef2f7;
}
.appearance-preview-card__chrome,
.appearance-preview-card__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.appearance-preview-card__pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 10%, transparent);
  font: 600 0.68rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.appearance-preview-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ea7a6;
  box-shadow: 0 0 0 6px color-mix(in oklch, #2ea7a6 15%, transparent);
}
.appearance-preview-card__hero strong,
.appearance-preview-card__kpi span {
  display: block;
  font: 600 1.05rem/1 var(--f-disp);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.appearance-preview-card__hero small,
.appearance-preview-card__kpi small {
  display: block;
  margin-top: 6px;
  font: 500 0.76rem/1.45 var(--f-body);
  opacity: 0.72;
}
.appearance-preview-card__kpi {
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in oklch, currentColor 8%, transparent);
  text-align: right;
}
.appearance-preview-card__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 10px;
  flex: 1;
}
.appearance-preview-card__bars span {
  display: block;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, #2ea7a6, color-mix(in oklch, #2ea7a6 40%, transparent));
}
.appearance-preview-card__bars span:nth-child(1) { height: 36%; }
.appearance-preview-card__bars span:nth-child(2) { height: 74%; }
.appearance-preview-card__bars span:nth-child(3) { height: 52%; }
.appearance-preview-card__bars span:nth-child(4) { height: 88%; }

/* Lock status chip (security page) */
.lock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 0.78rem/1 var(--f-body);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.lock-status--ok   { background: oklch(0.72 0.14 165 / 0.1); color: oklch(0.72 0.14 165); }
.lock-status--warn { background: oklch(0.82 0.12 70 / 0.12); color: oklch(0.82 0.12 70); }

/* ── Accounts page ─────────────────────────────────────────────────────────── */

/* Role badges */
.acc-role {
  display: inline-block;
  font: 600 0.68rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
}
.acc-role--owner { background: oklch(0.64 0.048 204 / 0.15); color: oklch(0.64 0.048 204); }
.acc-role--admin { background: oklch(0.72 0.009 75 / 0.12); color: var(--muted); }

/* "you" badge */
.acc-you {
  font: 500 0.66rem/1 var(--f-body);
  color: oklch(0.64 0.048 204);
  letter-spacing: 0.04em;
}

/* Status dot */
.acc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.acc-dot--active   { background: oklch(0.72 0.14 165); }
.acc-dot--inactive { background: var(--dim2); }

/* Account list */
.acc-list { display: flex; flex-direction: column; }
.acc-item { border-top: 1px solid var(--dim); }
.acc-item:first-child { border-top: none; }
.acc-item__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.acc-item__info { flex: 1; min-width: 0; }
.acc-item__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 0.88rem/1 var(--f-body);
  color: var(--white);
}
.acc-item__email {
  font: 400 0.78rem/1 var(--f-body);
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-item__badges { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Kebab menu */
.acc-menu { position: relative; flex-shrink: 0; }
.acc-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.acc-menu__btn:hover { background: var(--surface2); border-color: var(--dim); color: var(--white); }
.acc-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  min-width: 168px;
  z-index: 50;
  overflow: hidden;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
}
.acc-menu__dropdown[hidden] { display: none; }
.acc-menu__item {
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  font: 400 0.84rem/1 var(--f-body);
  color: var(--white);
  cursor: pointer;
  display: block;
  transition: background 100ms;
}
.acc-menu__item:hover { background: var(--dim); }
.acc-menu__item--danger { color: oklch(0.72 0.12 25); }
.acc-menu__item--danger:hover { background: oklch(0.62 0.15 25 / 0.12); color: oklch(0.82 0.12 25); }

/* Inline edit / password panels */
.acc-edit-panel {
  border-top: 1px solid var(--dim);
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 0 0 11px 11px;
}
.acc-edit-panel[hidden] { display: none; }
.acc-pw-panel {
  border-top: 1px solid var(--dim);
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 0 0 11px 11px;
}
.acc-pw-panel[hidden] { display: none; }
.acc-panel-grid { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.acc-panel-field { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.acc-panel-field--role { flex: 0 0 130px; }
.acc-panel-label {
  font: 600 0.68rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.acc-panel-actions { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 1px; }
.acc-menu__form,
.acc-menu__slot { display: contents; }

/* Button size and ghost modifiers */
.sec-btn--sm { padding: 7px 13px; font-size: 0.78rem; margin-top: 0; }
.sec-btn--ghost {
  background: transparent;
  border: 1px solid var(--dim2);
  color: var(--muted);
}
.sec-btn--ghost:hover { opacity: 1; color: var(--white); border-color: var(--dim2); }
.admin-section-header { margin-top: 14px; }

/* Add account form */
.acc-add-form { display: flex; flex-direction: column; gap: 12px; }
.acc-add-row { display: flex; gap: 10px; }
.acc-add-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.acc-add-field--narrow { flex: 0 0 140px; }
.acc-add-label {
  font: 600 0.68rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
@media (max-width: 520px) {
  .acc-add-row { flex-direction: column; }
  .acc-add-field--narrow { flex: none; }
}

/* ── Shared dashboard / detail components ──────────────────────────────────── */

/* KPI colour modifiers (shared between dashboard and promotion detail) */
/* Chart card */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 18px 16px 14px;
  min-width: 0;
}
.chart-card__title {
  font: 600 0.72rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 14px;
}
.chart-wrap { position: relative; height: 140px; overflow: hidden; width: 100%; }
.chart-wrap canvas { display: block; }

/* ── Alert banner: success variant ───────────────────────────────────────── */
.alert-banner--success {
  background: oklch(0.42 0.06 204 / 0.15);
  border: 1px solid oklch(0.64 0.048 204 / 0.35);
  color: oklch(0.80 0.04 204);
}

/* ── Member merge ─────────────────────────────────────────────────────────── */
.merge-section {
  border-top: 1px solid var(--dim);
  padding-top: 16px;
  margin-top: 4px;
}
.btn-history-admin {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--dim2);
  color: var(--muted);
  font: 500 0.80rem/1 var(--f-body);
  padding: 10px 14px;
  border-radius: 8px;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  transition: border-color 120ms, color 120ms;
  min-height: 44px;
  margin-top: 4px;
}
.btn-history-admin:hover { border-color: var(--accent); color: var(--accent); }

.page > .page-title { font: 600 1.1rem/1 var(--f-disp); letter-spacing: 0.03em; margin-bottom: 16px; }
.admin-tx-empty { font: 400 0.84rem/1 var(--f-body); color: var(--muted); padding: 16px 0; }
.btn-load-more-admin {
  display: block;
  text-align: center;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--muted);
  font: 500 0.80rem/1 var(--f-body);
  text-decoration: none;
  transition: border-color 120ms, color 120ms;
}
.btn-load-more-admin:hover { border-color: var(--accent); color: var(--accent); }

.btn-merge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--dim2);
  color: var(--muted);
  font: 500 0.80rem/1 var(--f-body);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: border-color 120ms, color 120ms;
  min-height: 44px;
}
.btn-merge:hover { border-color: var(--accent); color: var(--accent); }

.merge-section--open { display: flex; flex-direction: column; gap: 10px; }

.merge-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.merge-panel__title {
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.merge-section .btn-cancel {
  background: transparent;
  border: none;
  color: var(--muted);
  font: 500 0.78rem/1 var(--f-body);
  cursor: pointer;
  padding: 4px 0;
}
.merge-section .btn-cancel:hover { color: var(--white); }

.merge-search-input { width: 100%; }

.merge-results { margin-top: 2px; }
.merge-results ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
ul.merge-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.merge-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
  min-height: 44px;
  justify-content: center;
}
.merge-result:hover { background: var(--dim); border-color: var(--dim); }
.merge-result__name { font: 500 0.84rem/1.2 var(--f-body); color: var(--white); }
.merge-result__sub  { font: 400 0.74rem/1 var(--f-body); color: var(--muted); }
.merge-empty { font: 400 0.80rem/1 var(--f-body); color: var(--muted); text-align: center; padding: 12px 0; }

.merge-preview {
  border: 1px solid var(--dim);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.merge-preview__who { display: flex; flex-direction: column; gap: 3px; }
.merge-preview__label {
  font: 600 0.62rem/1 var(--f-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.merge-preview__name { font: 600 0.90rem/1.2 var(--f-body); color: var(--white); }
.merge-preview__detail { font: 400 0.78rem/1 var(--f-body); color: var(--muted); }
.merge-preview__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--dim);
  padding-top: 8px;
}
.merge-preview__key { font: 400 0.78rem/1 var(--f-body); color: var(--muted); }
.merge-preview__val { font: 600 0.82rem/1 var(--f-body); color: var(--white); }
.merge-preview__cards { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--dim); padding-top: 8px; }
.merge-preview__card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.merge-preview__promo { font: 400 0.78rem/1 var(--f-body); color: var(--muted); }
.merge-preview__stamps { font: 600 0.78rem/1 var(--f-body); color: var(--white); }
.merge-preview__note {
  font: 400 0.74rem/1.4 var(--f-body);
  color: var(--muted);
  border-top: 1px solid var(--dim);
  padding-top: 8px;
  margin: 0;
}
.merge-preview__actions { margin-top: 2px; }
.acc-pw-input:focus { border-color: var(--accent); }

/* ── Billing (admin/billing.html) ── */

.bill-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  font: 600 0.88rem/1.3 var(--f-body);
  border: 1px solid transparent;
}
.bill-status--active { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-tx); }
.bill-status--trial  { background: oklch(0.64 0.048 204 / 0.10); border-color: var(--accent-bd); color: var(--accent-deep); }
.bill-status--warn   { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
.bill-status--err    { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-tx); }
.bill-status--mute   { background: var(--surface2); color: var(--muted); }

.bill-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.bill-plans[hidden] { display: none; }
@media (max-width: 600px) { .bill-plans { grid-template-columns: 1fr; } }

.bill-plan {
  border: 1px solid var(--dim2);
  border-radius: 10px; padding: 18px;
  position: relative;
  display: flex; flex-direction: column;
  transition: border-color 150ms var(--ease-out);
}
.bill-plan:hover { border-color: var(--muted); }
.bill-plan--featured { border-color: var(--accent); background: oklch(0.64 0.048 204 / 0.09); }
.bill-plan__badge {
  position: absolute; top: -10px; right: 18px;
  background: var(--accent); color: oklch(0.97 0.005 204);
  font: 700 0.68rem/1.2 var(--f-body); letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 4px; text-transform: uppercase;
}
.bill-plan__label {
  font: 700 0.70rem/1 var(--f-body); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px; margin-bottom: 10px;
}
.bill-plan__price { font: 800 1.75rem/1.1 var(--f-body); color: var(--white); margin-bottom: 4px; }
.bill-plan__period { font-size: 0.84rem; font-weight: 400; color: var(--muted); }
.bill-plan__detail { font: 400 0.78rem/1.45 var(--f-body); color: var(--muted); margin-bottom: 16px; flex: 1; }
.bill-plan__btn {
  display: block; text-align: center; min-height: 44px;
  padding: 10px 12px; border-radius: 7px;
  border: 1px solid var(--dim2); background: var(--surface2); color: var(--white);
  font: 700 0.82rem/1 var(--f-body); letter-spacing: 0.05em;
  text-decoration: none; transition: opacity 150ms;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
}
.bill-plan__btn:hover { opacity: 0.8; }
.bill-plan__btn--accent { background: var(--accent); color: oklch(0.97 0.005 204); border-color: var(--accent); }

/* ── Checkout confirmation panel ─────────────────────────────────────────── */
.bill-confirm { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--dim2); }
.bill-confirm[hidden] { display: none; }
.bill-confirm__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.bill-confirm__name {
  font: 700 0.70rem/1 var(--f-body); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.bill-confirm__total { font: 800 1.75rem/1.1 var(--f-body); color: var(--white); }
.bill-confirm__period { font-size: 0.84rem; font-weight: 400; color: var(--muted); }
.bill-confirm__note { font: 400 0.82rem/1.5 var(--f-body); color: var(--muted); margin-bottom: 6px; }
.bill-confirm__terms { font: 400 0.82rem/1.5 var(--f-body); color: var(--muted); margin-bottom: 14px; }
.bill-confirm__trust {
  display: flex; align-items: center; gap: 7px; margin-top: 18px; margin-bottom: 4px;
  font: 400 0.80rem/1 var(--f-body); color: var(--muted);
}
.bill-confirm__trust-note {
  font: 400 0.76rem/1.5 var(--f-body); color: var(--muted);
  opacity: 0.7; margin-bottom: 0;
}
.bill-confirm__actions { display: flex; align-items: center; gap: 16px; }
@media (max-width: 600px) {
  .bill-confirm__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .bill-confirm__actions .bill-plan__btn { width: 100%; }
}
.bill-confirm__back {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 2px;
  font: 500 0.84rem/1 var(--f-body); color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.bill-confirm__back:hover { color: var(--white); }

.bill-viva-schemes { display: inline-block; border-radius: 5px; vertical-align: middle; flex-shrink: 0; }
.bill-trust {
  display: flex; align-items: center; gap: 7px; margin-top: 14px;
  font: 400 0.78rem/1 var(--f-body); color: var(--muted); opacity: 0.65;
}
@keyframes bill-fx-in  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bill-fx-out { to { opacity: 0; } }
.bill-fx-in  { animation: bill-fx-in  210ms ease-out both; }
.bill-fx-out { animation: bill-fx-out 140ms ease-in  both; pointer-events: none; }

.bill-active-details {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--dim2);
}
.bill-active-row { display: flex; flex-direction: column; gap: 3px; }
.bill-active-label { font: 400 0.75rem/1 var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bill-active-val { font: 600 0.92rem/1.2 var(--f-body); color: var(--white); }

.bill-breakdown {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--dim2);
  display: flex; flex-direction: column; gap: 0;
  font: 400 0.84rem/1.4 var(--f-body);
}
.bill-breakdown__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; gap: 24px;
}
.bill-breakdown__label { color: var(--muted); }
.bill-breakdown__val { color: var(--white); font-weight: 600; white-space: nowrap; }
.bill-breakdown__val--muted { color: var(--muted); font-weight: 400; }
.bill-breakdown__sep { border: none; border-top: 1px solid var(--dim2); margin: 4px 0; }
.bill-breakdown__row--total .bill-breakdown__label { color: var(--white); font-weight: 600; }
.bill-breakdown__row--total .bill-breakdown__val { font-size: 1rem; }
.bill-breakdown__row--discount .bill-breakdown__val { color: var(--success-tx); }

.bill-upgrade {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding: 14px 16px;
  background: oklch(0.64 0.048 204 / 0.08);
  border: 1px solid var(--accent-bd);
  border-radius: 8px;
}
.bill-upgrade__text { font: 400 0.85rem/1.5 var(--f-body); color: var(--muted); flex: 1; }
.bill-upgrade__text strong { color: var(--white); }
@media (max-width: 600px) { .bill-upgrade { flex-direction: column; align-items: flex-start; } }

.bill-details-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
@media (max-width: 600px) { .bill-details-grid { grid-template-columns: 1fr; } }
.bill-details-grid .field { display: flex; flex-direction: column; gap: 5px; }
.bill-details-grid label {
  font: 600 0.70rem/1 var(--f-body); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.bill-details-grid input {
  width: 100%; padding: 9px 11px; box-sizing: border-box; outline: none;
  background: var(--surface2); border: 1px solid var(--dim2);
  border-radius: 7px; font: 400 0.88rem/1 var(--f-body); color: var(--white);
  transition: border-color 150ms var(--ease-out);
}
.bill-details-grid input:focus { border-color: var(--accent); }
.bill-details-grid select {
  width: 100%; padding: 9px 11px; box-sizing: border-box; outline: none;
  background: var(--surface2); border: 1px solid var(--dim2);
  border-radius: 7px; font: 400 0.88rem/1 var(--f-body); color: var(--white);
  transition: border-color 150ms var(--ease-out); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.bill-details-grid select:focus { border-color: var(--accent); }

.bill-table-wrap { overflow-x: auto; }
.bill-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.bill-table th {
  padding: 10px 16px; text-align: left;
  font: 600 0.70rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--dim2);
}
.bill-table td { padding: 12px 16px; color: var(--white); border-bottom: 1px solid var(--dim); }
.bill-table tbody tr:last-child td { border-bottom: none; }
.bill-table__series { font-family: ui-monospace, monospace; font-size: 0.82rem; color: var(--muted); }
.bill-table__ref { display: block; font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

.bill-badge {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font: 600 0.68rem/1.2 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.bill-badge--ok   { background: var(--success-bg); color: var(--success-tx); border: 1px solid var(--success-bd); }
.bill-badge--mute { background: var(--surface2); color: var(--muted); }
.bill-table__pdf { width: 64px; text-align: right; }

.bill-page-header   { margin-top: 14px; }
.bill-first-section { margin-top: 24px; }
.bill-details-full  { grid-column: 1 / -1; }
.bill-save-wrap     { margin-top: 16px; }
.sec-card--flush    { padding: 0; }
.bill-pdf-link {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 0.78rem/1 var(--f-body); color: var(--accent-deep);
  text-decoration: none;
}
.bill-pdf-link:hover { opacity: 0.75; }
.bill-empty { padding: 20px 16px; color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ── Billing details summary ── */
.sec-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.sec-label-row .sec-label { margin-bottom: 0; }
.bill-edit-link { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: 0.02em; }
.bill-edit-link:hover { opacity: 0.75; }
.bill-summary { display: flex; flex-direction: column; gap: 8px; }
.bill-summary__row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: baseline; }
.bill-summary__row dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bill-summary__row dd { font-size: 0.875rem; color: var(--text); }
.bill-summary__empty { font-size: 0.875rem; color: var(--muted); }
.bill-summary__empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Billing cancel ── */
.bill-cancel-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.bill-cancel-btn { background: none; border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.bill-cancel-btn:hover { color: var(--danger-tx, oklch(62% 0.2 28)); }
.bill-cancel-pending { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); }
.bill-cancel-undo { background: none; border: none; color: var(--accent); font-size: 0.82rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.bill-cancel-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.bill-cancel-box[hidden] { display: none; }
.bill-cancel-box__text { font-size: 0.85rem; line-height: 1.5; color: var(--text2, var(--muted)); }
.bill-cancel-box__actions { display: flex; gap: 10px; align-items: center; }
.bill-cancel-box__confirm { background: oklch(40% 0.16 28); color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.bill-cancel-box__confirm:hover { opacity: 0.85; }
.bill-cancel-box__back { background: none; border: none; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.bill-cancel-box__back:hover { color: var(--text); }
.sec-notice--warn { background: oklch(22% 0.06 55); color: oklch(76% 0.14 55); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 500; }
.bill-cancel-inline { display: inline; }

/* ── Billing success page ── */
.bill-success {
  max-width: 440px;
  margin: 72px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.bill-success__icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: oklch(0.20 0.055 145);
  border: 1px solid oklch(0.32 0.07 145);
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.72 0.14 145);
}
.bill-success__title {
  font: 700 1.35rem/1.2 var(--f-body);
  color: var(--white);
  margin: 4px 0 0;
}
.bill-success__body {
  font: 400 0.88rem/1.65 var(--f-body);
  color: var(--muted);
  max-width: 360px;
}
.bill-success__btn {
  margin-top: 10px;
  display: inline-block;
  background: var(--accent);
  color: oklch(0.12 0.01 230);
  border-radius: 7px;
  padding: 10px 26px;
  font: 700 0.78rem/1 var(--f-body);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 150ms var(--ease-out);
}
.bill-success__btn:hover { opacity: 0.88; }

/* ── Setup fee upsell ── */
.setup-upsell__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ── Locations page ── */
.sec-section--spaced { margin-top: 24px; }
.loc-upgrade-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  background: oklch(0.28 0.06 50 / 0.3); border: 1px solid oklch(0.55 0.12 50 / 0.4);
  font: 400 0.84rem/1.4 var(--f-body); color: oklch(0.85 0.08 60);
}
.loc-upgrade-notice--spaced { margin-top: 16px; }
.loc-upgrade-link { color: oklch(0.85 0.08 60); font-weight: 600; text-decoration: underline; }
/* ── Export page ─────────────────────────────────────────────────────────── */
.export-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.export-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface2);
  border-radius: 10px;
  text-decoration: none;
  color: var(--white);
  transition: background 0.15s;
}
.export-item:hover { background: var(--surface3); }
.export-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-dim, oklch(0.64 0.048 204 / 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.export-item__body { flex: 1; min-width: 0; }
.export-item__title {
  font: 600 0.9rem/1.2 var(--f-body);
  color: var(--white);
}
.export-item__desc {
  font: 400 0.78rem/1.4 var(--f-body);
  color: var(--muted);
  margin-top: 2px;
}
.export-item__arrow { color: var(--muted); flex-shrink: 0; }

/* ── QR page ─────────────────────────────────────────────────────────────── */
.qr-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.qr-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 12px;
  padding: 28px 24px;
}
.qr-img {
  display: block;
  width: 220px;
  height: 220px;
  image-rendering: pixelated;
  border-radius: 6px;
}
.qr-url {
  font: 500 0.72rem/1.4 var(--f-body);
  color: var(--muted);
  font-family: monospace;
  word-break: break-all;
  text-align: center;
  max-width: 240px;
}
.qr-description { margin-bottom: 24px; }
.qr-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.qr-action-link,
.qr-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.qr-action-link { text-decoration: none; }
.qr-action-btn {
  background: transparent;
  border: 1px solid var(--dim2);
  color: var(--white);
}
.qr-hint-note { margin-top: 14px; }
@media (max-width: 560px) {
  .qr-layout { grid-template-columns: 1fr; }
  .qr-preview { order: -1; }
}
@media print {
  .no-print { display: none !important; }
  .print-sheet {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    gap: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  .print-sheet__logo { max-height: 60px; max-width: 220px; object-fit: contain; }
  .print-sheet__name { font-size: 22px; font-weight: 700; color: #111; margin: 0; }
  .print-sheet__qr { width: 260px; height: 260px; image-rendering: pixelated; }
  .print-sheet__caption { font-size: 14px; color: #444; text-align: center; max-width: 280px; line-height: 1.5; margin: 0; }
  .print-sheet__url { font-size: 11px; color: #888; font-family: monospace; margin: 0; }
  body { background: white !important; }
}
@media screen {
  .print-sheet { display: none; }
}

/* ── Promotions list ─────────────────────────────────────────────────────── */
.promo-list { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
/* Card chrome lives on the wrapper so the row is one visual unit, while
   the click target (.promo-row__hit) and the reorder buttons stay as
   non-nested interactive siblings (a11y). */
.promo-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  overflow: hidden;
  transition: background 120ms;
  animation: row-in 180ms ease-out both;
}
.promo-row:hover { background: var(--surface2); }
.promo-row__hit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.promo-row__main { flex: 1; min-width: 0; }
.promo-row__name {
  font: 600 0.92rem/1 var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-row__meta {
  font: 400 0.75rem/1 var(--f-body);
  color: var(--muted);
  margin-top: 4px;
}
.promo-row__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.promo-badge {
  font: 600 0.65rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.promo-badge--active {
  background: oklch(0.72 0.14 165 / 0.15);
  color: oklch(0.72 0.14 165);
}
.promo-badge--inactive {
  background: var(--surface2);
  color: var(--muted);
}
.promo-row__arrow { color: var(--muted); opacity: 0.4; }
.promo-order {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 12px 0;
  flex-shrink: 0;
  align-self: center;
}
.order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--dim);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.order-btn:hover { background: var(--surface2); color: var(--white); border-color: var(--dim2); }
.order-btn--phantom {
  pointer-events: none;
  visibility: hidden;
}
.promo-new-btn {
  font-size: 0.78rem;
  padding: 10px 18px;
  text-decoration: none;
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Detail-page header (shared by promotion-detail + member-detail) ───── */
.detail-back-wrap { margin-top: 14px; }
.detail-back-link {
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  text-decoration: none;
}
.detail-back-link:hover { color: var(--white); }
.detail-header {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.detail-header__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.detail-header__title {
  font: 600 1.6rem/1.1 var(--f-disp);
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}
.detail-header__meta {
  font: 400 0.8rem/1.5 var(--f-body);
  color: var(--muted);
  margin-top: 4px;
}
.status-badge {
  display: inline-block;
  font: 600 0.65rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
}
.status-badge--active {
  background: oklch(0.72 0.14 165 / 0.12);
  color: oklch(0.72 0.14 165);
}
.status-badge--inactive {
  background: oklch(0.97 0.01 75 / 0.07);
  color: var(--muted);
}
.status-badge--mega {
  background: oklch(0.72 0.12 70 / 0.15);
  color: oklch(0.82 0.12 70);
}
.promo-detail-page .kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
@media (min-width: 560px) {
  .promo-detail-page .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  .promo-detail-page .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.promo-detail-page .kpi-row.kpi-row--promo-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .promo-detail-page .kpi-row.kpi-row--promo-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  .promo-detail-page .kpi-row.kpi-row--promo-detail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.promo-detail-page .kpi {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.promo-detail-page .kpi__value {
  font: 600 1.7rem/1 var(--f-disp);
  color: var(--white);
}
.promo-detail-page .kpi__value--accent { color: var(--accent); }
.promo-detail-page .kpi__label {
  font: 400 0.68rem/1.3 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 5px;
}
.mega-box {
  margin-top: 10px;
  padding: 14px 16px;
  background: oklch(0.72 0.12 70 / 0.07);
  border: 1px solid oklch(0.72 0.12 70 / 0.18);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mega-box__icon { flex-shrink: 0; color: oklch(0.82 0.12 70); margin-top: 1px; }
.mega-box__body { flex: 1; }
.mega-box__title {
  font: 600 0.85rem/1 var(--f-body);
  color: oklch(0.82 0.12 70);
}
.mega-box__desc {
  font: 400 0.78rem/1.5 var(--f-body);
  color: var(--muted);
  margin-top: 4px;
}
.mega-box__count {
  font: 600 0.78rem/1 var(--f-body);
  color: oklch(0.82 0.12 70);
  margin-top: 6px;
}
.promo-detail-page .chart-card { margin-top: 10px; }
.promo-detail-page .kpi--gain .kpi__value { color: var(--success-tx); }
.promo-detail-page .kpi--loss .kpi__value { color: var(--danger-tx); }
.promo-detail-page .roi-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.promo-detail-page .roi-kpi-row .kpi__value { font-size: 1.3rem; }
.promo-detail-page .dash-section-hd { margin-top: 22px; }
.promo-detail-top-note {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
}
.promo-members { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.promo-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms;
  touch-action: manipulation;
}
.promo-member-row:hover { background: var(--surface2); }
.promo-member-row--ready { border-color: oklch(0.72 0.14 165 / 0.25); }
.promo-member-row__name {
  flex: 1;
  font: 500 0.88rem/1 var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-member-row__stamps {
  font: 600 0.85rem/1 var(--f-disp);
  color: var(--muted);
  flex-shrink: 0;
}
.promo-member-row__stamps--ready { color: oklch(0.72 0.14 165); }
.promo-member-row__arrow {
  color: var(--muted);
  flex-shrink: 0;
}
.reward-chip {
  font: 600 0.6rem/1 var(--f-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(0.72 0.14 165 / 0.12);
  color: oklch(0.72 0.14 165);
  flex-shrink: 0;
}
.seq-chip {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .detail-header { flex-direction: column; gap: 10px; }
  .detail-actions { align-self: flex-start; }
  .promo-member-row { min-height: 44px; }
}
.loc-saved-notice { margin-bottom: 16px; }
.loc-row--saved { background: oklch(0.60 0.09 197 / 0.07); }
.loc-locked-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; color: var(--muted);
}
.loc-locked-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.loc-locked-text span { font: 500 0.875rem/1 var(--f-body); color: var(--white); }
.loc-locked-text .loc-locked-sub { font: 400 0.78rem/1.5 var(--f-body); color: var(--muted); }
.loc-billing-info {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; margin-bottom: 10px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--dim2);
  font: 400 0.82rem/1.4 var(--f-body); color: var(--muted);
}
.loc-upgrade-notice--spaced { margin-top: 16px; }
.loc-row {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-bottom: 1px solid var(--dim);
  transition: background 100ms;
}
.loc-row:last-of-type { border-bottom: none; }
.loc-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.loc-edit-grid__full { grid-column: 1 / -1; }
.loc-edit-coords {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: flex-start;
}
.loc-coord-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 34px;
  font: 500 0.76rem/1 var(--f-body);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms, color 120ms;
}
.loc-coord-pick-btn:hover { border-color: var(--accent); color: var(--white); }
.loc-edit-staff {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--dim);
}
.loc-edit-staff__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.loc-pw-hint {
  font: 400 0.72rem/1.4 var(--f-body);
  color: var(--muted);
  opacity: 0.75;
  display: block;
  margin-top: 4px;
}
.loc-pw-hint strong { opacity: 1; color: oklch(0.85 0.08 50); }
/* ─────────────────────────────────────────────────────────────
 * Toggle (switch) — platform-wide on/off control.
 * Usage:
 *   <label class="sec-toggle">
 *     <input type="checkbox" name="enabled" value="on" checked>
 *     <span class="sec-toggle__track" aria-hidden="true"></span>
 *     <input type="hidden" class="sec-toggle__hidden" name="enabled" value="off">
 *     <span class="sec-toggle__label">On</span>
 *   </label>
 * The hidden input ensures the form submits a value even when the
 * checkbox is unchecked — pattern from /admin/locations.
 * ───────────────────────────────────────────────────────────── */
.sec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
}
.sec-toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sec-toggle__track {
  display: block;
  width: 34px;
  height: 19px;
  border-radius: 10px;
  background: var(--surface3);
  border: 1.5px solid var(--dim2);
  flex-shrink: 0;
  position: relative;
  transition: background 150ms, border-color 150ms;
}
.sec-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: oklch(0.65 0.01 190);
  transition: transform 150ms, background 150ms;
}
.sec-toggle input[type=checkbox]:checked ~ .sec-toggle__track {
  background: oklch(0.60 0.09 197 / 0.14);
  border-color: var(--accent);
}
.sec-toggle input[type=checkbox]:checked ~ .sec-toggle__track::after {
  transform: translateX(15px);
  background: var(--accent);
}
.sec-toggle input[type=checkbox]:focus-visible ~ .sec-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sec-toggle input[type=hidden] { display: none; }
.sec-toggle__label { font: 400 0.78rem/1 var(--f-body); color: var(--muted); order: -1; }
.sec-toggle input[type=checkbox]:checked ~ .sec-toggle__label { color: var(--accent-deep); font-weight: 500; }
/* Two-state label: child spans flip via :checked. */
.sec-toggle__label .sec-toggle__on { display: none; }
.sec-toggle__label .sec-toggle__off { display: inline; }
.sec-toggle input[type=checkbox]:checked ~ .sec-toggle__label .sec-toggle__on { display: inline; }
.sec-toggle input[type=checkbox]:checked ~ .sec-toggle__label .sec-toggle__off { display: none; }
/* Transient post-save flash badge — appears next to Save button for ~2s
 * when an inline-save form completes. Matches sec-notice color tokens. */
.sec-save-flash {
  font: 500 0.78rem/1 var(--f-body);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.sec-save-flash--ok {
  background: oklch(0.60 0.09 197 / 0.14);
  color: var(--accent-deep);
  border: 1px solid var(--accent);
}
.sec-save-flash--err {
  background: oklch(0.65 0.13 25 / 0.10);
  color: oklch(0.45 0.13 25);
  border: 1px solid oklch(0.65 0.13 25 / 0.45);
}
.loc-delete-form { padding: 10px 20px 14px; border-top: 1px solid var(--dim); }
.loc-locked-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(0.60 0.09 197 / 0.08);
  border: 1px solid oklch(0.60 0.09 197 / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}
.loc-add-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.loc-add-form__row--coords {
  grid-template-columns: 1fr 1fr auto;
  margin-top: 12px;
}
.loc-add-form__field { display: flex; flex-direction: column; gap: 6px; }
.loc-add-form__field--map-btn { justify-content: flex-end; }
.loc-add-form__input {
  height: 44px;
  padding: 0 12px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--white);
  font: 400 0.875rem/1 var(--f-body);
  outline: none;
}
.loc-add-form__input:focus { border-color: var(--accent); }
.loc-add-form__submit { margin-top: 16px; }
.loc-map-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--white);
  font: 500 0.8rem/1 var(--f-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms, color 120ms;
}
.loc-map-open-btn:hover { border-color: var(--accent); color: var(--accent); }
.loc-map-container {
  margin-top: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--dim2);
}
.loc-map { width: 100%; height: 320px; }
.loc-map--modal { height: 380px; }
.loc-map__hint {
  font: 400 0.75rem/1.4 var(--f-body);
  color: var(--muted);
  padding: 8px 0 0;
}
.loc-map__hint--modal { padding: 8px 16px 0; }
.loc-map-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.loc-map-modal[hidden] { display: none; }
.loc-map-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.05 0.01 230 / 0.75);
}
.loc-map-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.loc-map-modal__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dim);
}
.loc-map-modal__title { font: 600 0.9rem/1 var(--f-body); color: var(--white); }
.loc-map-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.loc-map-modal__close:hover { background: var(--surface2); color: var(--white); }
.loc-map-modal__foot {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--dim);
}
.loc-roi-note { margin-top: 20px; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
}
.kpi-row--spaced { margin-top: 16px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.kpi__value {
  font: 600 1.9rem/1 var(--f-disp);
  letter-spacing: -0.01em;
  color: var(--white);
}
.kpi__label {
  margin-top: 6px;
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.kpi__delta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font: 500 0.72rem/1 var(--f-body);
}
.kpi__delta--up   { color: oklch(0.72 0.14 165); }
.kpi__delta--down { color: var(--danger-tx); }
.kpi__delta--flat { color: var(--muted); }
/* Reserve a delta slot on every tile so rows with mixed comparison data
   still align across columns. Tiles without a .kpi__delta render an
   invisible placeholder via the empty :where rule below. */
.kpi { min-height: 88px; display: flex; flex-direction: column; }
.kpi__label { margin-bottom: auto; }

/* Primary variant — the lead metric in a detail KPI row. Same width,
   bigger number, optional caption line under the label. */
.kpi--primary { position: relative; }
.kpi--primary::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  border-radius: 12px 12px 0 0;
}
.kpi--primary .kpi__value { font: 600 2.3rem/1 var(--f-disp); }

/* Progress variant — adds a horizontal completion bar under the value.
   Width is driven by --kpi-progress (set via inline style from the
   template's dynamic percentage value). */
.kpi--progress .kpi__bar {
  margin-top: 10px;
  height: 4px;
  background: var(--dim);
  border-radius: 2px;
  overflow: hidden;
}
.kpi--progress .kpi__bar-fill {
  height: 100%;
  width: var(--kpi-progress, 0%);
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left;
  transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .kpi--progress .kpi__bar-fill { transition: none; }
}
.pending-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: oklch(0.82 0.12 70 / 0.08);
  border: 1px solid oklch(0.82 0.12 70 / 0.2);
  border-radius: 10px;
  font: 500 0.85rem/1.4 var(--f-body);
  color: oklch(0.82 0.12 70);
}
.pending-alert--spaced { margin-top: 16px; }
.pending-alert svg { flex-shrink: 0; }
.pending-alert__cta {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pending-alert__cta:hover { opacity: 0.8; }
.dash-onboarding {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
}
.dash-onboarding__title {
  margin-bottom: 14px;
  font: 700 0.78rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-onboarding__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-onboarding__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--dim);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.dash-onboarding__step:hover {
  background: oklch(0.97 0.01 75 / 0.05);
  border-color: var(--dim2);
}
.dash-onboarding__step--done { opacity: 0.5; }
.dash-onboarding__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--dim);
  color: var(--muted);
}
.dash-onboarding__icon--done {
  background: oklch(0.72 0.14 165 / 0.15);
  color: oklch(0.72 0.14 165);
}
.dash-onboarding__body { min-width: 0; }
.dash-onboarding__step-title {
  font: 600 0.88rem/1.2 var(--f-body);
  color: var(--white);
}
.dash-onboarding__step-sub {
  margin-top: 2px;
  font: 400 0.75rem/1.3 var(--f-body);
  color: var(--muted);
}
.dash-onboarding__arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
}
.dash-onboarding__group { margin-bottom: 18px; }
.dash-onboarding__group:last-child { margin-bottom: 0; }
.dash-onboarding__group--polish {
  padding-top: 14px;
  border-top: 1px solid var(--dim);
  opacity: 0.85;
}
.dash-onboarding__title--sub {
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.8;
}
.dash-onboarding--live {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.dash-onboarding__live-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: oklch(0.72 0.14 165 / 0.15);
  color: oklch(0.72 0.14 165);
}
.dash-onboarding__live-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 0.82rem/1.3 var(--f-body);
  color: var(--muted);
}
.dash-onboarding__live-body strong {
  font-weight: 700;
  color: var(--white);
}
.dash-section-hd { margin-top: 4px; }
.dash-section-hd--roi { margin-top: 18px; }
.dash-section-hd--section { margin-top: 24px; }
.dash-roi {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.dash-roi--spaced { margin-top: 8px; }
.dash-roi__net {
  font: 700 2rem/1 var(--f-disp);
  letter-spacing: -0.02em;
}
.dash-roi__net--gain { color: var(--success-tx); }
.dash-roi__net--loss { color: var(--danger-tx); }
.dash-roi__net-lbl {
  margin-top: 5px;
  font: 400 0.68rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.dash-roi__secondaries {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dim);
}
.dash-roi__stat { flex: 1; min-width: 0; }
.dash-roi__val {
  font: 600 0.95rem/1 var(--f-disp);
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-roi__val--accent { color: var(--accent); }
.dash-roi__lbl {
  margin-top: 4px;
  font: 400 0.65rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-roi__div {
  width: 1px;
  height: 28px;
  margin: 0 14px;
  background: var(--dim2);
  flex-shrink: 0;
}
.charts-section-hd {
  display: flex;
  gap: 4px;
  margin-top: 18px;
}
.charts-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  touch-action: manipulation;
}
.charts-tab:hover { background: var(--dim); color: var(--white); }
.charts-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.charts-tab--active { background: var(--dim); color: var(--white); }
.charts-hidden { display: none !important; }
.charts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.charts-row--spaced { margin-top: 6px; }
@media (min-width: 640px) {
  .charts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.health-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.health-row--spaced { margin-top: 10px; }
.health-card {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  padding: 14px 14px 12px;
  text-align: center;
}
.health-card__value {
  font: 600 1.5rem/1 var(--f-disp);
  color: var(--accent);
}
.health-card__label {
  margin-top: 6px;
  font: 400 0.68rem/1.3 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.promo-summaries,
.top-members {
  display: flex;
  flex-direction: column;
}
.promo-summaries { gap: 8px; }
.top-members { gap: 4px; }
.promo-summaries--spaced,
.top-members--spaced { margin-top: 10px; }
.promo-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 120ms;
  cursor: pointer;
  touch-action: manipulation;
}
.promo-summary:hover { background: var(--surface2); }
.promo-summary__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.promo-summary__name {
  flex: 1;
  min-width: 0;
  font: 600 0.92rem/1.25 var(--f-body);
  color: var(--white);
}
.promo-summary__info,
.promo-summary__stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 5px;
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
}
.promo-summary__stats {
  padding-top: 8px;
  border-top: 1px solid var(--dim);
}
.promo-summary__sep { color: var(--dim2); }
.promo-summary__stat-val {
  font: 600 0.92rem/1 var(--f-disp);
  color: var(--white);
}
.promo-summary__warn-val {
  font: 600 0.92rem/1 var(--f-disp);
  color: oklch(0.82 0.12 70);
}
.promo-summary__roi {
  margin-left: auto;
  font: 600 0.82rem/1 var(--f-disp);
}
.promo-summary__roi--gain { color: var(--success-tx); }
.promo-summary__roi--loss { color: var(--danger-tx); }
.promo-summary__badge {
  padding: 3px 8px;
  border-radius: 4px;
  font: 600 0.6rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.promo-summary__badge--active {
  background: oklch(0.72 0.14 165 / 0.12);
  color: oklch(0.72 0.14 165);
}
.promo-summary__badge--inactive {
  background: oklch(0.97 0.01 75 / 0.06);
  color: var(--muted);
}
.promo-summary__badge--mega {
  background: oklch(0.72 0.12 70 / 0.15);
  color: oklch(0.82 0.12 70);
}
.promo-summary__badges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.top-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
  transition: background 120ms;
  touch-action: manipulation;
}
.top-member-row:hover { background: var(--surface2); }
.top-member-row__rank {
  width: 18px;
  flex-shrink: 0;
  font: 600 0.8rem/1 var(--f-disp);
  color: var(--muted);
}
.top-member-row__name {
  flex: 1;
  font: 500 0.88rem/1 var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-member-row__stamps {
  flex-shrink: 0;
  font: 600 0.88rem/1 var(--f-disp);
  color: var(--accent);
}
.dash-footer-link {
  margin-top: 20px;
  padding-bottom: 4px;
}
.dash-footer-link__anchor {
  font: 500 0.8rem/1 var(--f-body);
  color: var(--accent);
  text-decoration: none;
}
.dash-footer-link__anchor:hover { opacity: 0.8; }

@media (max-width: 600px) {
  .loc-add-form__row { grid-template-columns: 1fr; }
  .loc-add-form__row--coords { grid-template-columns: 1fr; }
  .loc-add-form__field--map-btn { grid-column: span 1; }
  .loc-edit-grid { grid-template-columns: 1fr; }
  .loc-edit-coords { grid-template-columns: 1fr 1fr; }
  .loc-edit-coords__btn-field { grid-column: span 2; }
  .loc-edit-coords__btn-field .loc-coord-pick-btn { width: 100%; justify-content: center; }
  .loc-locked-card { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .kpi__delta { flex-wrap: wrap; line-height: 1.5; }
  .dash-roi__net { font-size: 1.6rem; }
  .dash-roi__div { margin: 0 10px; }
  .dash-roi__val { font-size: 0.85rem; }
  .health-row { grid-template-columns: 1fr; gap: 6px; }
  .health-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    text-align: left;
  }
  .health-card__value { min-width: 60px; font-size: 1.6rem; flex-shrink: 0; }
  .health-card__label {
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.82rem;
    line-height: 1.4;
  }
}

/* ──────────────────────────────────────────────────────────────
   Location-aware admin: dashboard tiles, scope banner, stamp picker
   ────────────────────────────────────────────────────────────── */

.dash-section-hd--with-action {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dash-section-hd__action {
  font: 500 0.75rem/1 var(--f-body);
  color: var(--accent);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-section-hd__action:hover,
.dash-section-hd__action:focus-visible { color: var(--text); }
.dash-section-hd__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.kpi-row--locations { grid-template-columns: 1fr; }
@media (min-width: 640px) { .kpi-row--locations { grid-template-columns: repeat(2, 1fr); } }

a.kpi--location {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.kpi--location:hover { border-color: var(--accent); }
a.kpi--location:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kpi__name {
  font: 600 1rem/1.2 var(--f-disp);
  color: var(--white);
  margin-bottom: 12px;
}
.kpi__lead {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kpi__lead-num {
  font: 600 2rem/1 var(--f-disp);
  color: var(--white);
  letter-spacing: -0.01em;
}
.kpi__lead-delta {
  font: 500 0.75rem/1 var(--f-body);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.kpi__lead-delta--up   { color: oklch(0.72 0.14 165); }
.kpi__lead-delta--down { color: var(--danger-tx); }
.kpi__lead-lbl {
  margin-top: 4px;
  font: 400 0.7rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.kpi__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.kpi__stat { font: 500 0.8rem/1 var(--f-body); color: var(--text); }
.kpi__stat-sep { color: var(--dim2); font-size: 0.7rem; }

.stamp-location {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.stamp-location__label {
  font: 500 0.72rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.stamp-location__select {
  height: 44px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 500 0.9rem/1 var(--f-body);
  cursor: pointer;
}
.stamp-location__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.scope-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: oklch(0.64 0.048 204 / 0.08);
  border: 1px solid oklch(0.64 0.048 204 / 0.25);
  border-radius: 8px;
  font: 500 0.78rem/1.2 var(--f-body);
  color: var(--text);
}
.scope-banner__lbl {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}
.scope-banner__locs { color: var(--white); }

/* ── Impersonation banner ─────────────────────────────────────────────────── */
.imp-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 16px;
  background: oklch(0.78 0.13 70 / 0.16);
  border-bottom: 1px solid oklch(0.78 0.13 70 / 0.4);
  font: 600 0.8rem/1.2 var(--f-body);
  color: var(--text);
}
.imp-banner__lbl {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  color: var(--muted);
}
.imp-banner__who { font-weight: 700; }
.imp-banner__exit { margin-left: auto; }
.imp-banner__btn {
  appearance: none;
  border: 1px solid var(--dim2);
  background: var(--surface2);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 12px;
  font: 600 0.74rem/1 var(--f-body);
  cursor: pointer;
}
.imp-banner__btn:hover { background: var(--dim); }

.referred-list {
  margin: 4px 0 0;
  padding: 0 0 0 12px;
  list-style: disc;
}
.referred-list li {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.6;
}

.history__scope-note {
  margin: 8px 0 16px;
  font-size: 0.82rem;
}

.detail-meta__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--dim2);
  font: 400 0.85rem/1.4 var(--f-body);
}
.detail-meta__row--stack {
  flex-direction: column;
  align-items: flex-start;
}
.detail-meta__lbl {
  font: 500 0.72rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}
.detail-meta__val { color: var(--text); }

/* wallet status badges */
.wallet-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font: 500 0.75rem/1 var(--f-body);
  border: 1px solid var(--dim2);
  color: var(--muted);
  background: transparent;
}
.wallet-badge--active {
  border-color: oklch(0.72 0.14 165 / 0.4);
  color: oklch(0.52 0.12 165);
  background: oklch(0.72 0.14 165 / 0.08);
}
.wallet-badge--sm {
  padding: 2px 6px;
  font-size: 0.7rem;
}
.wallet-badge__icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.loc-detail__address {
  font: 400 0.85rem/1.4 var(--f-body);
  color: var(--muted);
  margin-top: 4px;
}

/* ── QR cards grid ── */
.qr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 560px) { .qr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .qr-grid { grid-template-columns: repeat(3, 1fr); } }

.qr-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.qr-card--general {
  border-color: var(--accent);
}
.qr-card--online {
  border-color: var(--dim2);
  opacity: 0.75;
}
.qr-card__label {
  font: 600 0.82rem/1 var(--f-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qr-card--general .qr-card__label { color: var(--accent); }
.qr-card__preview { display: flex; justify-content: center; }
.qr-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .dash-section-hd__action,
  a.kpi--location { transition: none; }
}

/* ── SA billing mode card ──────────────────────────────────────────────────── */

.sa-mode-card .card__body { gap: 10px; }

.sa-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sa-mode-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sa-mode-dot--live  { background: var(--ok, oklch(62% 0.14 145)); }
.sa-mode-dot--test  { background: oklch(72% 0.16 85); }

.sa-mode-label { font-size: 13px; font-weight: 600; }

.sa-mode-seg {
  display: flex;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--dim2, oklch(30% 0.01 240));
}

.sa-mode-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: background 120ms ease-out, color 120ms ease-out;
  min-height: 32px;
}
.sa-mode-btn + .sa-mode-btn { border-left: 1px solid var(--dim2, oklch(30% 0.01 240)); }
.sa-mode-btn--active {
  background: var(--accent, oklch(62% 0.14 195));
  color: oklch(98% 0.003 240);
  cursor: default;
}
.sa-mode-btn:not(.sa-mode-btn--active):hover { background: var(--dim2, oklch(20% 0.01 240)); }
.sa-mode-btn:focus-visible { outline: 2px solid var(--accent, oklch(62% 0.14 195)); outline-offset: -2px; }

.sa-mode-desc { font-size: 12px; color: var(--mute, oklch(55% 0.008 240)); line-height: 1.5; }

.sa-mode-status-row { display: flex; gap: 8px; flex-wrap: wrap; }

.sa-mode-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.sa-mode-tag--ok   { color: var(--ok, oklch(62% 0.14 145)); }
.sa-mode-tag--warn { color: oklch(72% 0.16 85); }
.sa-mode-tag--err  { color: var(--danger, oklch(58% 0.18 28)); }

/* ── SA setup guide (collapsible how-to inside tenant cards) ── */
.sa-guide { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dim); }
.sa-guide__summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); user-select: none;
}
.sa-guide__summary::-webkit-details-marker { display: none; }
.sa-guide__summary::before { content: "▶"; font-size: 0.6rem; transition: transform 0.15s; }
details.sa-guide[open] .sa-guide__summary::before { transform: rotate(90deg); }
.sa-guide__body { margin-top: 12px; }
.sa-guide__body ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.sa-guide__body li { font-size: 0.82rem; line-height: 1.55; color: var(--text); }
.sa-guide__body li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.sa-guide__body code { font-size: 0.78rem; background: var(--surface2); border-radius: 4px; padding: 1px 5px; }
.sa-guide__note { margin-top: 10px; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.sa-guide__note strong { color: var(--text); }

/* ── Broadcasts page (admin/broadcasts.html) ── */
.bc-channel-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bc-channel-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--dim2); border-radius: 8px; cursor: pointer; font-size: 0.85rem; }
.bc-channel-chip input { accent-color: var(--accent); }
.bc-target-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.bc-target-row .sec-select { flex: 1; min-width: 160px; }
.bc-target-row .bc-extra--value { width: 80px; }
.bc-msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 640px) { .bc-msg-grid { grid-template-columns: 1fr; } }
.bc-count-preview { font-size: 0.82rem; color: var(--muted); min-height: 1.2em; }
.bc-custom-section { margin-bottom: 14px; }
.bc-search-results { border: 1px solid var(--dim2); border-radius: 8px; margin-top: 4px;
  max-height: 200px; overflow-y: auto; background: var(--surface); }
.bc-result-item { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; }
.bc-result-item:hover { background: var(--dim2); }
.bc-result-email { color: var(--muted); font-size: 0.8rem; }
.bc-result-empty { padding: 8px 12px; font-size: 0.85rem; color: var(--muted); }
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 20px; background: var(--dim2); font-size: 0.8rem; }
.bc-chip--channel { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.75rem; }
.bc-chip__remove { background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1rem; line-height: 1; color: var(--muted); }
.bc-history-row { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 12px; border-bottom: 1px solid var(--dim); }
.bc-history-row:last-child { border-bottom: none; }
.bc-history-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.bc-history-msg { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-history-channels { display: flex; gap: 4px; flex-wrap: wrap; }
.bc-history-info { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); flex-shrink: 0; }
.bc-history-count::before { content: "·"; margin-right: 4px; }
.bc-status { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 20px; }
.bc-status--done    { background: var(--success-bg); color: var(--success-tx); }
.bc-status--sending { background: var(--warn-bg);    color: var(--warn-tx); }
.bc-status--failed  { background: var(--danger-bg);  color: var(--danger-tx); }
.bc-status--pending { background: var(--dim2);       color: var(--muted); }

/* ── Broadcasts: push bubble feed ──────────────────────────────── */
.bc-feed { display: flex; flex-direction: column; gap: 10px; }
.bc-date-sep {
  text-align: center; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 4px 0;
}
.bc-bubble-wrap { display: flex; flex-direction: column; gap: 3px; }
.bc-bubble {
  background: oklch(0.18 0.04 150); border: 1px solid oklch(0.35 0.08 150);
  border-radius: 10px;
  padding: 10px 14px;
}
.bc-bubble__text { font-size: 13px; line-height: 1.45; margin-bottom: 6px; color: var(--white); }
.bc-bubble__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10px; color: oklch(0.75 0.12 150);
}
.bc-bubble__time { font-size: 10px; color: var(--muted); padding-right: 2px; }
.bc-char-hint { font-size: 10px; color: var(--muted); text-align: right; margin-top: -8px; margin-bottom: 10px; }

/* ── Email broadcast history list ──────────────────────────────── */
.em-hist-list { display: flex; flex-direction: column; gap: 6px; }
.em-hist-row {
  background: var(--surface); border: 1px solid var(--dim2);
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; transition: background 0.1s;
}
.em-hist-row:hover { background: var(--surface2); }
.em-hist-row__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.em-hist-subject { font-size: 13px; font-weight: 600; color: var(--white); }
.em-hist-date { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* Mobile: 16px form text so iOS Safari doesn't zoom in on focus (sub-16px inputs).
   At end of file so it wins over the .sec-input / .sec-select base font
   declarations regardless of where they appear above. */
@media (max-width: 640px) {
  .sec-input, .sec-select { font-size: 16px; }
}
.em-hist-preview { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-hist-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.em-hist-body {
  font-size: 12px; color: var(--fg); line-height: 1.6;
  white-space: pre-wrap; border-top: 1px solid var(--dim2);
  margin-top: 8px; padding-top: 10px;
}

/* ── Broadcast recipient list (inline expand) ───────────────────── */
.bc-recipients { margin-top: 10px; border-top: 1px solid var(--dim2); padding-top: 8px; }
.bc-recipient-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.bc-recipient-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--fg);
  padding: 3px 0;
}
.bc-recipient-item a { color: var(--fg); text-decoration: none; }
.bc-recipient-item a:hover { text-decoration: underline; }
.bc-recipient-phone { color: var(--muted); font-size: 10px; }
.bc-recipient-wallet {
  margin-left: auto; font-size: 9px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.bc-recipient-wallet + .bc-recipient-wallet { margin-left: 4px; }
.bc-recipient-wallet--apple { background: var(--dim2); color: var(--fg); }
.bc-recipient-wallet--google { background: rgba(66, 133, 244, 0.15); color: #4285f4; }
.bc-recipients-more { font-size: 10px; color: var(--muted); margin-top: 4px; font-style: italic; }
.bc-recipients-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 10px; color: var(--accent);
  padding: 0; margin-top: 4px; text-decoration: underline;
}

/* Same classes reused for email history rows */
.em-recipients { margin-top: 8px; border-top: 1px solid var(--dim2); padding-top: 8px; }
.em-recipient-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.em-recipient-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--fg);
  padding: 3px 0;
}
.em-recipient-item a { color: var(--fg); text-decoration: none; }
.em-recipient-item a:hover { text-decoration: underline; }
.em-recipient-phone { color: var(--muted); font-size: 10px; }
.em-recipients-more { font-size: 10px; color: var(--muted); margin-top: 4px; font-style: italic; }

/* ── Promotion danger zone ──────────────────────────────────────────── */
.promo-danger { margin-top: 28px; }
.promo-danger__title { color: var(--danger, #c0392b); }
.promo-danger .sec-card { border: 1px solid var(--danger, #c0392b); }

/* ── Activity feed ─────────────────────────────────────────────────────────── */
.act-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 16px; }
.act-filters__group { display: inline-flex; gap: 6px; }
.act-filters__loc { max-width: 220px; }
.act-card { padding: 0; }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--dim2); }
.act-row:last-child { border-bottom: none; }
.act-row__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--muted); }
.act-row--visit .act-row__dot { background: oklch(0.62 0.16 250); }
.act-row--reward_earned .act-row__dot { background: oklch(0.75 0.14 75); }
.act-row--reward_claimed .act-row__dot { background: oklch(0.72 0.14 165); }
.act-row--signup .act-row__dot { background: oklch(0.62 0.18 295); }
.act-row--bonus_welcome .act-row__dot,
.act-row--bonus_continuity .act-row__dot,
.act-row--bonus_referral .act-row__dot { background: oklch(0.70 0.12 200); }
.act-row--stamps_expired .act-row__dot { background: oklch(0.68 0.16 28); }
.act-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-row__member { font-weight: 600; text-decoration: none; color: inherit; }
.act-row__member:hover { text-decoration: underline; }
.act-row__what { font-size: 0.9rem; }
.act-row__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; background: var(--dim2); }
.act-row__meta { font-size: 0.75rem; color: var(--muted); }
.act-loadmore { margin: 12px 16px; }
.act-empty { padding: 12px 16px; color: var(--muted); }
.act-empty--page { padding: 28px 16px; text-align: center; }
.act-newpill { width: 100%; margin: 0 0 12px; }

/* ── Customer profile panel ────────────────────────────────────────────────── */
.profile-head { margin: 0 0 8px; }
.profile-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.profile-badge--new      { background: color-mix(in oklch, var(--profile-new) 16%, transparent); color: var(--profile-new); }
.profile-badge--regular  { background: var(--dim2); color: var(--muted); }
.profile-badge--vip      { background: color-mix(in oklch, var(--profile-vip) 16%, transparent); color: var(--profile-vip); }
.profile-badge--lapsed   { background: color-mix(in oklch, var(--profile-lapsed) 16%, transparent); color: var(--profile-lapsed); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; }
.profile-stat { display: flex; flex-direction: column; gap: 2px; }
.profile-stat__lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.profile-stat__val { font-size: 0.95rem; font-weight: 600; }
.profile-stat__sub { font-size: 0.78rem; font-weight: 400; color: var(--muted); }

/* ── Insights: regulars vs one-timers ─────────────────────────────────────── */
.insights-h1 { font: 700 1.5rem var(--f-disp), sans-serif; margin: 0 0 2px; }
.insights-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 18px; }
.freq-lede { color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin: 0 0 14px; max-width: 72ch; }
.freq-take { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  background: color-mix(in oklch, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
  border-radius: 10px; padding: 12px 14px; font-size: 0.92rem; line-height: 1.5; }
.freq-take + .freq-take { margin-top: 8px; }
.freq-take__ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent); margin-top: 1px; }
.freq-bands { margin-top: 18px; display: grid; gap: 12px; }
.freq-band { display: grid; grid-template-columns: 130px 104px 1fr 96px; gap: 12px; align-items: center; }
.freq-band__lbl b { display: block; font-size: 0.88rem; }
.freq-band__lbl span { font-size: 0.72rem; color: var(--muted); }
.freq-band__count { font-size: 0.84rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.freq-band__bar { position: relative; background: var(--dim2); border-radius: 8px; height: 28px; overflow: hidden; }
.freq-band__fill { position: absolute; inset: 0 auto 0 0; min-width: 3px; border-radius: 8px;
  background: color-mix(in oklch, var(--accent) 55%, transparent); }
.freq-band__share { font-size: 0.78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.freq-foot { margin-top: 16px; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.freq-howcounted { margin-top: 10px; font-size: 0.75rem; color: var(--muted); }
.freq-empty { color: var(--muted); font-size: 0.9rem; line-height: 1.55; padding: 8px 0; }
@media (max-width: 560px) {
  .freq-band { grid-template-columns: 1fr auto; row-gap: 6px; column-gap: 8px; }
  .freq-band__lbl { grid-column: 1; grid-row: 1; }
  .freq-band__count { grid-column: 2; grid-row: 1; }
  .freq-band__bar { grid-column: 1 / -1; }
  .freq-band__share { grid-column: 1 / -1; text-align: left; }
}

/* ── Billing: promoted white-glove setup card ───────────────────────────── */
.sec-card--accent {
  border-color: var(--accent);
  box-shadow: 0 2px 14px color-mix(in oklch, var(--accent) 18%, transparent);
}
.bill-setup-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 14px;
}
.bill-setup-price__label { color: var(--muted); font-size: 0.85rem; }
.bill-setup-price__val { font-size: 1.3rem; font-weight: 700; }
.bill-setup-price__note { color: var(--muted); font-size: 0.85rem; }

/* ── Dashboard "Try it yourself" sandbox card (admin/dashboard.html) ─────── */
.sandbox-card__stamps { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.sandbox-card__slot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--dim2); background: transparent;
}
.sandbox-card__slot--filled { background: var(--accent); border-color: var(--accent); }
.sandbox-card__progress { font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }
.sandbox-card__reward { margin-bottom: 12px; }
.sandbox-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── ROI report (admin/roi.html) ──────────────────────────────────────────── */
.roi-sub {
  margin: 4px 0 0;
  font: 400 0.85rem/1.5 var(--f-body);
  color: var(--muted);
}

/* Hero */
.roi-hero {
  margin-top: 24px;
  padding: 32px 28px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--accent-bd);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.roi-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.64 0.048 204 / 0.09) 0%, transparent 70%);
  pointer-events: none;
}
.roi-hero__badge {
  display: inline-block;
  font: 600 0.68rem/1 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: oklch(0.64 0.048 204 / 0.12);
  border: 1px solid oklch(0.64 0.048 204 / 0.25);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 18px;
  position: relative;
}
.roi-hero__multiple {
  font: 800 4.5rem/1 var(--f-body);
  color: var(--accent);
  letter-spacing: -.03em;
  margin-bottom: 14px;
  position: relative;
}
.roi-hero__tagline {
  font: 400 0.9rem/1.6 var(--f-body);
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.roi-hero__tagline strong { color: var(--white); font-weight: 600; }

/* KPI cards */
.roi-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 600px) { .roi-kpis { grid-template-columns: 1fr; } }
.roi-kpi {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  padding: 18px 16px;
}
.roi-kpi__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  margin-bottom: 12px;
}
.roi-kpi--revenue .roi-kpi__icon { background: oklch(0.64 0.048 204 / 0.12); color: var(--accent); }
.roi-kpi--cost    .roi-kpi__icon { background: oklch(0.72 0.055 72 / 0.12);  color: var(--accent-2); }
.roi-kpi--net     .roi-kpi__icon { background: var(--success-bg); color: var(--success-tx); }
.roi-kpi--loss    .roi-kpi__icon { background: var(--danger-bg);  color: var(--danger-tx); }
.roi-kpi__val {
  font: 700 1.55rem/1 var(--f-body);
  color: var(--white);
  letter-spacing: -.01em;
  margin-bottom: 5px;
}
.roi-kpi--revenue .roi-kpi__val { color: var(--accent); }
.roi-kpi--net     .roi-kpi__val { color: var(--success-tx); }
.roi-kpi--loss    .roi-kpi__val { color: var(--danger-tx); }
.roi-kpi__lbl {
  font: 600 0.7rem/1 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.roi-kpi__sub { font: 400 0.74rem/1 var(--f-body); color: var(--dim2); }

/* Visits note */
.roi-visits-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: oklch(0.97 0.01 240);
  border: 1px solid oklch(0.85 0.04 240);
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 0.8rem;
  color: oklch(0.35 0.07 250);
  line-height: 1.5;
  margin-top: 16px;
  margin-bottom: 24px;
}
.roi-visits-note svg { flex-shrink: 0; margin-top: 2px; color: oklch(0.5 0.1 250); }

/* Visits column tooltip icon */
.roi-th-info {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dim2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 14px;
  cursor: help;
  margin-left: 3px;
  vertical-align: middle;
}

/* Monthly chart */
.roi-chart-wrap {
  position: relative;
  height: 220px;
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  padding: 18px 18px 14px;
}
.roi-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.roi-chart-title {
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.roi-chart-legend { display: flex; gap: 14px; }
.roi-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 0.73rem/1 var(--f-body);
  color: var(--muted);
}
.roi-legend::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
}
.roi-legend--rev::before  { background: oklch(0.64 0.048 204 / 0.85); }
.roi-legend--cost::before { background: oklch(0.72 0.055 72 / 0.75); }

/* Per-promo table */
.roi-promos { margin-top: 24px; }
.roi-promos__title {
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.roi-table-wrap { overflow-x: auto; }
.roi-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.83rem/1 var(--f-body);
}
.roi-table th {
  padding: 8px 12px;
  text-align: left;
  font: 600 0.69rem/1 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--dim);
  white-space: nowrap;
}
.roi-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--dim);
  color: var(--white);
}
.roi-table tbody tr:last-child td { border-bottom: none; }
.roi-table__num { text-align: right; }
.roi-table__name { font-weight: 500; margin-bottom: 2px; }
.roi-table__inactive { font: 400 0.7rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }
.roi-table__mega { font: 400 0.72rem/1 var(--f-body); color: var(--muted); }
.roi-table__rev { color: var(--accent); }
.roi-table__gain { color: var(--success-tx); }
.roi-table__loss { color: var(--danger-tx); }
.roi-table__na { color: var(--dim2); }
.roi-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font: 700 0.75rem/1 var(--f-body);
}
.roi-badge--good { background: var(--success-bg); color: var(--success-tx); }
.roi-badge--ok   { background: oklch(0.72 0.055 72 / 0.12); color: var(--accent-2); }
.roi-badge--bad  { background: var(--danger-bg); color: var(--danger-tx); }

/* Empty state */
.roi-empty {
  margin: 40px auto;
  max-width: 440px;
  text-align: center;
  padding: 40px 28px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 14px;
}
.roi-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 16px;
  background: oklch(0.64 0.048 204 / 0.10);
  color: var(--accent);
  margin-bottom: 18px;
}
.roi-empty__title { font: 600 1.05rem/1 var(--f-body); color: var(--white); margin-bottom: 10px; }
.roi-empty__desc  { font: 400 0.84rem/1.6 var(--f-body); color: var(--muted); margin-bottom: 22px; }
.roi-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  font: 500 0.82rem/1 var(--f-body);
  color: var(--white);
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.roi-empty__cta:hover { background: var(--surface3, var(--surface2)); border-color: var(--accent); color: var(--accent); }

/* Currency form */
.roi-currency-form { margin-top: 10px; }
.roi-currency-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.roi-form__label {
  font: 600 0.75rem/1 var(--f-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.roi-form__select {
  height: 38px;
  padding: 0 10px;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  color: var(--white);
  font: 400 0.875rem/1 var(--f-body);
  cursor: pointer;
  outline: none;
}
.roi-form__select:focus { border-color: var(--accent); }

/* Note */
.roi-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 32px;
  font: 400 0.78rem/1.5 var(--f-body);
  color: var(--muted);
}
.roi-note svg { flex-shrink: 0; margin-top: 2px; }