/* =============================================================================
   CredLeads — application stylesheet
   Visual language: Stripe Dashboard / Stripe Apps
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens — Stripe palette, type, radius, spacing
   -------------------------------------------------------------------------- */
:root {
  /* Stripe palette */
  --stripe-indigo:        #635bff;
  --stripe-indigo-hover:  #5851db;
  --stripe-indigo-press:  #4d44b5;
  --stripe-indigo-50:     #efeefe;
  --stripe-indigo-100:    #e0deff;
  --stripe-indigo-200:    #c4bffe;

  --stripe-navy:          #0a2540;   /* primary text — Stripe signature */
  --stripe-slate-700:     #2a3547;
  --stripe-slate-600:     #425466;   /* secondary text */
  --stripe-slate-500:     #697386;   /* tertiary text */
  --stripe-slate-400:     #8b9095;
  --stripe-slate-300:     #adbdcc;   /* placeholder */

  --stripe-page-bg:       #f6f9fc;   /* signature light blue-gray */
  --stripe-surface:       #ffffff;
  --stripe-surface-hover: #f7fafc;
  --stripe-surface-press: #eef2f7;

  --stripe-border:        #e3e8ee;
  --stripe-border-subtle: #eaeef3;
  --stripe-border-strong: #cdd5df;

  --stripe-success-text:  #0e6245;
  --stripe-success-bg:    #d7f7c2;
  --stripe-success-border:#9bcfa0;
  --stripe-success-strong:#3a9a4d;

  --stripe-danger-text:   #b3072d;
  --stripe-danger-bg:     #ffe7f2;
  --stripe-danger-border: #f8b4c8;
  --stripe-danger-strong: #df1b41;

  --stripe-warning-text:  #8a4f00;
  --stripe-warning-bg:    #fcefc7;
  --stripe-warning-border:#f5cf78;
  --stripe-warning-strong:#bb6e00;

  --stripe-info-text:     #2c4a8a;
  --stripe-info-bg:       #e6ebff;
  --stripe-info-border:   #b8c2e8;

  /* Semantic mappings */
  --c-bg-default:         var(--stripe-surface);
  --c-bg-page:            var(--stripe-page-bg);
  --c-bg-subtle:          var(--stripe-page-bg);
  --c-bg-strong:          var(--stripe-surface-hover);
  --c-bg-stronger:        var(--stripe-surface-press);

  --c-text:               var(--stripe-navy);
  --c-text-subtle:        var(--stripe-slate-600);
  --c-text-subtlest:      var(--stripe-slate-500);
  --c-text-disabled:      var(--stripe-slate-400);
  --c-text-inverse:       #ffffff;
  --c-text-link:          var(--stripe-indigo);
  --c-text-link-hover:    var(--stripe-indigo-hover);

  --c-border:             var(--stripe-border);
  --c-border-subtle:      var(--stripe-border-subtle);
  --c-border-strong:      var(--stripe-border-strong);
  --c-border-input:       var(--stripe-border);
  --c-border-focus:       var(--stripe-indigo);

  /* Stripe-style elevation — soft shadows tinted with their signature rgba(50,50,93) */
  --shadow-xs: 0 0.0714rem 0.1429rem rgba(50, 50, 93, 0.08);
  --shadow-sm: 0 0.0714rem 0.2143rem rgba(50, 50, 93, 0.10), 0 0.0714rem 0.1429rem rgba(0, 0, 0, 0.04);
  --shadow-md: 0 0.2857rem 0.4286rem -0.0714rem rgba(50, 50, 93, 0.10), 0 0.1429rem 0.2857rem -0.0714rem rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 0.7143rem 1.4286rem -0.2143rem rgba(50, 50, 93, 0.12), 0 0.2857rem 0.4286rem -0.1429rem rgba(0, 0, 0, 0.05);
  --shadow-button: 0 0.0714rem 0.0714rem rgba(0, 0, 0, 0.10), 0 0 0 0.0714rem rgba(50, 50, 93, 0.10);
  --shadow-button-primary: 0 0.0714rem 0.0714rem rgba(0, 0, 0, 0.05), 0 0 0 0.0714rem rgba(50, 50, 93, 0.12);
  --ring-focus: 0 0 0 0.2143rem rgba(99, 91, 255, 0.30);

  /* Radii */
  --radius-base:  0.2857rem;
  --radius-md:    0.4286rem;
  --radius-lg:    0.5714rem;
  --radius-xl:    0.8571rem;
  --radius-pill:  9999px;

  /* Spacing scale (Stripe density — 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64) */
  --s-1:  0.1429rem;
  --s-2:  0.2857rem;
  --s-3:  0.5714rem;
  --s-4:  0.8571rem;
  --s-5:  1.1429rem;
  --s-6:  1.7143rem;
  --s-7:  2.2857rem;
  --s-8:  3.4286rem;
  --s-9:  4.5714rem;

  --sidebar-w: 17.1429rem;
  --topbar-h: 4rem;
}

/* Dark theme — Stripe also has a dark mode in the Dashboard */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg-default:        #1a1f2c;
    --c-bg-page:           #131722;
    --c-bg-subtle:         #131722;
    --c-bg-strong:         #232a3b;
    --c-bg-stronger:       #2c3447;

    --c-text:              #f6f9fc;
    --c-text-subtle:       #adbdcc;
    --c-text-subtlest:     #8b9095;
    --c-text-disabled:     #5b6573;
    --c-text-link:         #8b85ff;
    --c-text-link-hover:   #a39dff;

    --c-border:            #2c3447;
    --c-border-subtle:     #232a3b;
    --c-border-strong:     #3d4863;
    --c-border-input:      #2c3447;

    --stripe-success-bg:   #103820;
    --stripe-success-text: #6dde8e;
    --stripe-success-border:#1f5a35;

    --stripe-danger-bg:    #3d1320;
    --stripe-danger-text:  #ff8aa8;
    --stripe-danger-border:#74203a;

    --stripe-warning-bg:   #3a2900;
    --stripe-warning-text: #f0c060;
    --stripe-warning-border:#5e4400;

    --stripe-info-bg:      #1a2547;
    --stripe-info-text:    #a4b3ff;
    --stripe-info-border:  #2e3d6e;

    --stripe-indigo-50:    #1f2546;
  }
}

/* -----------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html {
  font-size: 16px;
  font-family: "Sohne", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: 1rem;
  line-height: 1.4286rem;
  color: var(--c-text);
  background-color: var(--c-bg-page);
  letter-spacing: -0.005em;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--c-text-link); text-decoration: none; }
a:hover { color: var(--c-text-link-hover); text-decoration: underline; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

[hidden] { display: none !important; }
.hidden { display: none !important; }
.overflow-hidden { overflow: hidden; }

/* -----------------------------------------------------------------------------
   3. Typography helpers — Stripe scale (tighter than ADS/Pajamas)
   -------------------------------------------------------------------------- */
.h-xxlarge { font-size: 2.2857rem; line-height: 2.8571rem; font-weight: 600; letter-spacing: -0.02em; color: var(--c-text); }
.h-xlarge  { font-size: 1.7143rem; line-height: 2.2857rem; font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); }
.h-large   { font-size: 1.4286rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-text); }
.h-medium  { font-size: 1.1429rem; line-height: 1.7143rem; font-weight: 600; letter-spacing: -0.005em; color: var(--c-text); }
.h-small   { font-size: 1rem; line-height: 1.4286rem; font-weight: 600; color: var(--c-text); }
.h-xsmall  { font-size: 0.9286rem; line-height: 1.1429rem; font-weight: 600; color: var(--c-text); }
.h-xxsmall {
  font-size: 0.7857rem; line-height: 1.1429rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-text-subtlest);
}

.body-lg { font-size: 1.1429rem; line-height: 1.7143rem; }
.body-md { font-size: 1rem; line-height: 1.4286rem; }
.body-sm { font-size: 0.9286rem; line-height: 1.2857rem; }

.text-default  { color: var(--c-text); }
.text-subtle   { color: var(--c-text-subtle); }
.text-subtlest { color: var(--c-text-subtlest); }
.text-disabled { color: var(--c-text-disabled); }
.text-link     { color: var(--c-text-link); }
.text-success  { color: var(--stripe-success-text); }
.text-danger   { color: var(--stripe-danger-text); }
.text-warning  { color: var(--stripe-warning-text); }

.tabular-nums  { font-variant-numeric: tabular-nums; }
.font-mono     { font-family: "Sohne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase     { text-transform: uppercase; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }

.sr-only {
  position: absolute; width: 0.0714rem; height: 0.0714rem; padding: 0; margin: -0.0714rem;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
   4. App shell — Stripe Dashboard pattern (top bar + sidebar + main)
   -------------------------------------------------------------------------- */
.app {
  width: 100%;
  max-width: 102.8571rem;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg-page);
  box-shadow: var(--shadow-md);
}

/* Top bar — white, subtle bottom border */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-6);
  background-color: var(--c-bg-default);
  border-bottom: 0.0714rem solid var(--c-border);
}

.brand-link {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  margin-left: calc(var(--s-3) * -1);
  border-radius: var(--radius-base);
  color: var(--c-text);
  text-decoration: none;
}
.brand-link:hover { background-color: var(--c-bg-strong); text-decoration: none; }
.brand-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--stripe-indigo) 0%, #8b85ff 100%);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.brand-tile svg { width: 1.1429rem; height: 1.1429rem; }
.brand-text {
  font-size: 1.0714rem; line-height: 1.4286rem; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

/* User cluster on the right of the top bar */
.user-info { display: flex; align-items: center; gap: var(--s-4); }
.user-info__details {
  display: none;
  flex-direction: column; align-items: flex-end;
  line-height: 1.2;
}
.user-info__name { font-size: 0.9286rem; font-weight: 500; color: var(--c-text); }
.user-info__role { font-size: 0.8571rem; color: var(--c-text-subtle); }
@media (min-width: 45.7143rem) { .user-info__details { display: flex; } }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--stripe-indigo) 0%, #8b85ff 100%);
  color: #ffffff;
  font-size: 0.8571rem;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar--lg { width: 2.2857rem; height: 2.2857rem; font-size: 0.9286rem; }
.avatar--bank {
  width: 2.2857rem; height: 2.2857rem;
  background: var(--c-bg-default);
  border: 0.0714rem solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--radius-md);
  position: relative;
  font-size: 0.8571rem;
}
.avatar--bank img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  background-color: var(--c-bg-default);
  object-fit: contain;
  padding: 0.2857rem;
}

/* Below-bar layout — sidebar + main content. Stacks vertically on mobile. */
.app-body { display: flex; flex: 1; min-height: 0; flex-direction: column; }
@media (min-width: 45.7143rem) { .app-body { flex-direction: row; } }

/* Mobile: horizontal scrollable nav strip under the top bar.
   Desktop: vertical sidebar with indigo left-bar accent on active. */
.side-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-shrink: 0;
  padding: var(--s-2) var(--s-3);
  background-color: var(--c-bg-default);
  border-bottom: 0.0714rem solid var(--c-border);
  overflow-x: auto;
}
@media (min-width: 45.7143rem) {
  .side-nav {
    flex-direction: column;
    width: var(--sidebar-w);
    padding: var(--s-5) 0;
    border-right: 0.0714rem solid var(--c-border);
    border-bottom: none;
    overflow-x: visible;
  }
}

.side-nav__heading { display: none; }
@media (min-width: 45.7143rem) {
  .side-nav__heading {
    display: block;
    padding: 0 var(--s-6);
    margin-bottom: var(--s-3);
    font-size: 0.7857rem; line-height: 1.1429rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--c-text-subtlest);
  }
}

.side-nav__list {
  display: flex; flex-direction: row; gap: var(--s-2);
  padding: 0;
}
@media (min-width: 45.7143rem) {
  .side-nav__list {
    flex-direction: column; gap: 0.0714rem;
    padding: 0 var(--s-3);
  }
}

.side-nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  font-size: 0.9286rem; line-height: 1.4286rem; font-weight: 500;
  color: var(--c-text-subtle);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 100ms ease, color 100ms ease;
}
.side-nav__item:hover {
  background-color: var(--c-bg-strong);
  color: var(--c-text);
  text-decoration: none;
}
.side-nav__item--nested {
  margin-left: var(--s-4);
  font-size: 0.8571rem;
  font-weight: 400;
}

.schedule-list {
  display: flex; flex-direction: column;
}
.schedule-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-border);
}
.schedule-row:first-child { border-top: 0; }
.schedule-row__main {
  display: flex; align-items: center; gap: var(--s-3);
  min-width: 0;
}
.schedule-row__text { min-width: 0; }
.schedule-row__title {
  font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.schedule-row__meta {
  font-size: 0.8571rem; color: var(--c-text-subtle);
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: 0.1429rem;
}
.schedule-row__actions { gap: var(--s-2); }
.side-nav__item[aria-current="page"] {
  background-color: var(--stripe-indigo-50);
  color: var(--stripe-indigo);
  font-weight: 600;
}
.side-nav__item[aria-current="page"]::before { display: none; }
@media (min-width: 45.7143rem) {
  .side-nav__item[aria-current="page"]::before {
    display: block;
    content: "";
    position: absolute;
    left: -0.8571rem;
    top: 0.4286rem; bottom: 0.4286rem;
    width: 0.2143rem;
    background-color: var(--stripe-indigo);
    border-top-right-radius: 0.2143rem;
    border-bottom-right-radius: 0.2143rem;
  }
}
.side-nav__icon { width: 1.1429rem; height: 1.1429rem; flex-shrink: 0; }

/* Main canvas */
.app-main {
  flex: 1;
  min-width: 0;
  background-color: var(--c-bg-page);
}
.app-content {
  padding: var(--s-6);
}
@media (min-width: 45.7143rem) {
  .app-content { padding: var(--s-7); }
}

/* -----------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.stack-100 { gap: var(--s-3); }
.stack-150 { gap: var(--s-4); }
.stack-200 { gap: var(--s-5); }
.stack-250 { gap: var(--s-5); }
.stack-300 { gap: var(--s-6); }
.stack-400 { gap: var(--s-7); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row--start { align-items: flex-start; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row > .row__spacer { flex: 1; }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 54.8571rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 45.7143rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.defaults-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
@media (min-width: 45.7143rem) {
  .defaults-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .defaults-row__money { flex: 0 0 12rem; }
}

/* -----------------------------------------------------------------------------
   6. Cards / surfaces — Stripe cards: white, soft shadow, 8px corners
   -------------------------------------------------------------------------- */
.box {
  background-color: var(--c-bg-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.box--flat {
  box-shadow: none;
  border: 0.0714rem solid var(--c-border);
}

.box__header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 0.0714rem solid var(--c-border-subtle);
}
.box__header-title {
  font-size: 1.1429rem; line-height: 1.4286rem; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-text);
}
.box__body { padding: var(--s-6); }

/* -----------------------------------------------------------------------------
   7. Buttons — Stripe button variants
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 2.2857rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 1rem; line-height: 1.1429rem; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  white-space: nowrap;
  user-select: none;
}
.button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-button), var(--ring-focus);
}
.button[disabled], .button[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.55;
}
.button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.button:active { transform: translateY(0.0714rem); }

/* Primary / "confirm" — indigo gradient with subtle shine */
.button--primary,
.button--primary {
  background: linear-gradient(180deg, #7d76ff 0%, var(--stripe-indigo) 100%);
  color: var(--c-text-inverse);
  box-shadow: var(--shadow-button-primary), 0 0.0714rem 0 0 rgba(255, 255, 255, 0.20) inset;
}
.button--primary:hover,
.button--primary:hover {
  background: linear-gradient(180deg, #8a83ff 0%, var(--stripe-indigo-hover) 100%);
  color: var(--c-text-inverse);
  text-decoration: none;
}
.button--primary:active,
.button--primary:active {
  background: var(--stripe-indigo-press);
}

/* Default / secondary — white with neutral shadow ring */
.button--secondary {
  background: var(--c-bg-default);
  color: var(--c-text);
  box-shadow: var(--shadow-button);
}
.button--secondary:hover  { background: var(--c-bg-strong); color: var(--c-text); text-decoration: none; }
.button--secondary:active { background: var(--c-bg-stronger); }

/* Subtle / tertiary — ghost */
.button--tertiary {
  background: transparent;
  color: var(--c-text-subtle);
}
.button--tertiary:hover  { background: var(--c-bg-strong); color: var(--c-text); text-decoration: none; }
.button--tertiary:active { background: var(--c-bg-stronger); }

/* Danger filled */
.button--destructive {
  background: var(--stripe-danger-strong);
  color: var(--c-text-inverse);
  box-shadow: var(--shadow-button-primary);
}
.button--destructive:hover { background: var(--stripe-danger-text); color: var(--c-text-inverse); text-decoration: none; }

.button--destructive-tertiary {
  background: transparent;
  color: var(--stripe-danger-strong);
}
.button--destructive-tertiary:hover { background: var(--stripe-danger-bg); color: var(--stripe-danger-text); text-decoration: none; }

/* Success-subtle export button */
.button--success-subtle {
  background: var(--stripe-success-bg);
  color: var(--stripe-success-text);
}
.button--success-subtle:hover { filter: brightness(0.98); color: var(--stripe-success-text); text-decoration: none; }

.button--large   { height: 2.5714rem; padding: 0 var(--s-5); font-size: 1.0714rem; }
.button--compact { height: 1.7143rem; padding: 0 var(--s-3); font-size: 0.8571rem; }
.button--full    { width: 100%; }

/* Filter / pressed toggle */
.button--filter[aria-pressed="true"] {
  background: var(--stripe-indigo-50);
  color: var(--stripe-indigo);
  box-shadow: 0 0 0 0.0714rem var(--stripe-indigo) inset;
}

.boolean-tag__on { display: none; }
[aria-pressed="true"] .boolean-tag__on  { display: inline; }
[aria-pressed="true"] .boolean-tag__off { display: none; }

/* Icon button */
.button-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2857rem; height: 2.2857rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--c-text-subtle);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.button-icon:hover  { background-color: var(--c-bg-strong); color: var(--c-text); }
.button-icon:active { background-color: var(--c-bg-stronger); }
.button-icon:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.button-icon svg { width: 1.1429rem; height: 1.1429rem; }
.button-icon--destructive:hover { background-color: var(--stripe-danger-bg); color: var(--stripe-danger-strong); }

/* -----------------------------------------------------------------------------
   8. Status — Stripe Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.2857rem;
  height: 1.4286rem; padding: 0 var(--s-3);
  border-radius: var(--radius-base);
  font-size: 0.8571rem; line-height: 1.1429rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge--neutral { background: var(--c-bg-strong);     color: var(--c-text-subtle); }
.badge--positive { background: var(--stripe-success-bg); color: var(--stripe-success-text); }
.badge--critical  { background: var(--stripe-danger-bg);  color: var(--stripe-danger-text); }
.badge--urgent { background: var(--stripe-warning-bg); color: var(--stripe-warning-text); }
.badge--info    { background: var(--stripe-info-bg);    color: var(--stripe-info-text); }
.badge--tier   { background: var(--stripe-indigo-50);  color: var(--stripe-indigo); }

.chip {
  display: inline-flex; align-items: center; gap: 0.2857rem;
  height: 1.5714rem; padding: 0 var(--s-3);
  border-radius: var(--radius-base);
  background-color: var(--c-bg-strong);
  color: var(--c-text);
  font-size: 0.8571rem; line-height: 1.1429rem;
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   9. Forms — Stripe TextField / Select
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
  font-size: 0.9286rem; line-height: 1.1429rem; font-weight: 500;
  color: var(--c-text);
}
.field__hint { font-size: 0.8571rem; line-height: 1.1429rem; color: var(--c-text-subtle); margin-top: var(--s-2); }
.field__required { color: var(--stripe-danger-strong); margin-left: 0.1429rem; }

.text-field {
  display: block;
  width: 100%;
  height: 2.2857rem;
  padding: 0 var(--s-3);
  background-color: var(--c-bg-default);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 1rem; line-height: 1.4286rem;
  color: var(--c-text);
  box-shadow: var(--shadow-button);
  transition: box-shadow 120ms ease;
}
.text-field:hover {
  box-shadow: 0 0 0 0.0714rem var(--c-border-strong), var(--shadow-xs);
}
.text-field:focus, .input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.0714rem var(--stripe-indigo), var(--ring-focus);
}
.text-field::placeholder { color: var(--stripe-slate-300); }

.field-loading {
  display: flex; align-items: center; gap: var(--s-3);
  height: 2.2857rem; padding: 0 var(--s-3);
  background-color: var(--c-bg-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-button);
  font-size: 0.9286rem;
  color: var(--c-text-subtle);
}

.file-input {
  display: block; width: 100%; cursor: pointer;
  font-size: 1rem; color: var(--c-text-subtle);
}
.file-input::file-selector-button {
  margin-right: var(--s-4);
  height: 2.2857rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--c-bg-default);
  color: var(--c-text);
  font-size: 0.9286rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background-color 120ms ease;
}
.file-input:hover::file-selector-button { background: var(--c-bg-strong); }

/* Autocomplete dropdown */
.autocomplete-menu {
  position: fixed; z-index: 50;
  overflow: auto;
  border-radius: var(--radius-md);
  background-color: var(--c-bg-default);
  box-shadow: var(--shadow-lg), 0 0 0 0.0714rem var(--c-border);
}
.autocomplete-menu li {
  padding: var(--s-3) var(--s-4);
  font-size: 1rem;
  color: var(--c-text);
  cursor: pointer;
}
.autocomplete-menu li:hover,
.autocomplete-menu li[aria-selected="true"] {
  background-color: var(--stripe-indigo-50);
  color: var(--stripe-indigo);
}

/* -----------------------------------------------------------------------------
  10. Banner / section message
   -------------------------------------------------------------------------- */
.banner {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  background-color: var(--c-bg-default);
  box-shadow: var(--shadow-button);
  font-size: 1rem; line-height: 1.4286rem;
  color: var(--c-text);
  border-left: 0.2143rem solid var(--c-border-strong);
}
.banner--success {
  background-color: var(--stripe-success-bg);
  color: var(--stripe-success-text);
  border-left-color: var(--stripe-success-strong);
  box-shadow: 0 0 0 0.0714rem var(--stripe-success-border);
}
.banner--critical {
  background-color: var(--stripe-danger-bg);
  color: var(--stripe-danger-text);
  border-left-color: var(--stripe-danger-strong);
  box-shadow: 0 0 0 0.0714rem var(--stripe-danger-border);
}
.banner--urgent {
  background-color: var(--stripe-warning-bg);
  color: var(--stripe-warning-text);
  border-left-color: var(--stripe-warning-strong);
  box-shadow: 0 0 0 0.0714rem var(--stripe-warning-border);
}
.banner--info {
  background-color: var(--stripe-info-bg);
  color: var(--stripe-info-text);
  border-left-color: var(--stripe-indigo);
  box-shadow: 0 0 0 0.0714rem var(--stripe-info-border);
}

/* -----------------------------------------------------------------------------
  11. Progress
   -------------------------------------------------------------------------- */
.progress {
  position: relative; width: 100%;
  height: 0.4286rem;
  background-color: var(--c-bg-stronger);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--stripe-indigo) 0%, #8b85ff 100%);
  border-radius: var(--radius-pill);
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress--success .progress__bar { background: linear-gradient(90deg, var(--stripe-success-strong) 0%, #5fbf72 100%); }
.progress--slim    { height: 0.2857rem; }

/* -----------------------------------------------------------------------------
  12. Modal / FocusView
   -------------------------------------------------------------------------- */
.focus-view-overlay {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex;
  align-items: center; justify-content: center;
  padding: var(--s-5);
  background-color: rgba(10, 37, 64, 0.50);
  backdrop-filter: blur(0.1429rem);
}
.focus-view {
  position: relative;
  display: flex; flex-direction: column;
  max-height: 90vh; width: 100%; max-width: 51.4286rem;
  background-color: var(--c-bg-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.focus-view--wide { max-width: 73.1429rem; }
.focus-view--narrow { max-width: 40rem; }
.focus-view__header {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 0.0714rem solid var(--c-border-subtle);
}
.focus-view__title {
  font-size: 1.2857rem; line-height: 1.7143rem; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.focus-view__subtitle {
  margin-top: 0.1429rem;
  font-family: "Sohne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8571rem; line-height: 1.1429rem;
  color: var(--c-text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.focus-view__body { overflow: auto; padding: var(--s-6); }
.focus-view__body--flush { padding: 0; }
.focus-view__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-top: 0.0714rem solid var(--c-border-subtle);
  background-color: var(--c-bg-page);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* -----------------------------------------------------------------------------
  13. Auth / SignInView
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  background-color: var(--c-bg-page);
  background-image:
    radial-gradient(at 20% 0%, rgba(99, 91, 255, 0.06) 0%, transparent 50%),
    radial-gradient(at 80% 100%, rgba(99, 91, 255, 0.04) 0%, transparent 50%);
}
.auth__panel { width: 100%; max-width: 27.4286rem; }
.auth__brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: var(--s-6);
}
.auth__brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.1429rem; height: 3.1429rem;
  margin-bottom: var(--s-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--stripe-indigo) 0%, #8b85ff 100%);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}
.auth__brand-mark svg { width: 1.5714rem; height: 1.5714rem; }
.auth__title { font-size: 1.7143rem; line-height: 2.2857rem; font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); }
.auth__subtitle { margin-top: var(--s-2); font-size: 1rem; color: var(--c-text-subtle); }
.auth__card {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
}

.auth-banner {
  position: fixed;
  top: var(--s-5);
  left: var(--s-5); right: var(--s-5);
  z-index: 50;
  margin: 0 auto;
  max-width: 27.4286rem;
}

/* -----------------------------------------------------------------------------
  14. Page header
   -------------------------------------------------------------------------- */
.page-header { display: flex; flex-direction: column; gap: var(--s-2); }
.page-header__title { font-size: 1.7143rem; line-height: 2.2857rem; font-weight: 600; letter-spacing: -0.015em; color: var(--c-text); }
.page-header__subtitle { font-size: 1rem; line-height: 1.4286rem; color: var(--c-text-subtle); }
.page-header__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5);
}

.back-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.9286rem; line-height: 1.1429rem; font-weight: 500;
  color: var(--c-text-link);
  margin-bottom: var(--s-2);
}
.back-link:hover { color: var(--c-text-link-hover); text-decoration: underline; }
.back-link svg { width: 0.8571rem; height: 0.8571rem; }

/* -----------------------------------------------------------------------------
  15. Stat cards
   -------------------------------------------------------------------------- */
.stat-card {
  background-color: var(--c-bg-default);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-sm);
}
.stat-card--brand   { box-shadow: var(--shadow-sm), inset 0.2143rem 0 0 var(--stripe-indigo); padding-left: calc(var(--s-6) + 0.2143rem); }
.stat-card--success { box-shadow: var(--shadow-sm), inset 0.2143rem 0 0 var(--stripe-success-strong); padding-left: calc(var(--s-6) + 0.2143rem); }
.stat-card__label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.9286rem; line-height: 1.1429rem; font-weight: 500;
  color: var(--c-text-subtle);
}
.stat-card__label svg { width: 1rem; height: 1rem; }
.stat-card__value {
  margin-top: var(--s-3);
  font-size: 2rem; line-height: 2.5714rem; font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

/* -----------------------------------------------------------------------------
  16. Empty state
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-9) var(--s-6);
  text-align: center;
  background-color: var(--c-bg-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.1429rem; height: 3.1429rem;
  margin-bottom: var(--s-4);
  border-radius: var(--radius-lg);
  background: var(--stripe-indigo-50);
  color: var(--stripe-indigo);
}
.empty-state__icon svg { width: 1.5714rem; height: 1.5714rem; }
.empty-state__text { font-size: 1rem; color: var(--c-text); }

/* -----------------------------------------------------------------------------
  17. Upload form
   -------------------------------------------------------------------------- */
.upload-form { padding: var(--s-6); }
.upload-form__title { margin-bottom: var(--s-4); font-size: 1.1429rem; line-height: 1.7143rem; font-weight: 600; letter-spacing: -0.005em; }
.upload-form__row { display: flex; flex-direction: column; gap: var(--s-4); }
.upload-form__field { flex: 1; }
.upload-form__progress { margin-top: var(--s-5); }
.upload-form__progress-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-2);
  font-size: 0.8571rem; color: var(--c-text-subtle);
}
@media (min-width: 45.7143rem) {
  .upload-form__row { flex-direction: row; align-items: flex-end; }
}

/* -----------------------------------------------------------------------------
  18. Upload box list
   -------------------------------------------------------------------------- */
.upload-card { transition: box-shadow 150ms ease; }
.upload-card:hover { box-shadow: var(--shadow-md); }
.upload-card__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
}
.upload-card__main { min-width: 0; flex: 1; }
.upload-card__title {
  display: inline-block; max-width: 100%;
  font-size: 1rem; line-height: 1.4286rem; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-card__title:hover { color: var(--stripe-indigo); text-decoration: none; }
.upload-card__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  font-size: 0.8571rem; color: var(--c-text-subtle);
}
.upload-card__meta-sep[aria-hidden="true"] { color: var(--c-text-disabled); }
.upload-card__sidebar {
  display: flex; align-items: flex-start; gap: var(--s-4);
  flex-shrink: 0;
}
.upload-card__metric { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.upload-card__metric-label {
  font-size: 0.7857rem; line-height: 1.1429rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-text-subtlest);
}
.upload-card__delete { margin-top: var(--s-2); }
.upload-card__progress {
  padding: var(--s-4) var(--s-5);
  background-color: var(--c-bg-page);
  border-top: 0.0714rem solid var(--c-border-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.upload-card__progress-counts {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-2);
  font-size: 0.8571rem; color: var(--c-text-subtle);
}
.upload-card__count-group { display: inline-flex; align-items: center; gap: var(--s-4); }
.count-pill { display: inline-flex; align-items: center; gap: 0.2857rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.count-pill svg { width: 1rem; height: 1rem; }
.count-pill--success { color: var(--stripe-success-text); }
.count-pill--danger  { color: var(--stripe-danger-text); }
.count-pill--brand   { color: var(--stripe-indigo); }

/* -----------------------------------------------------------------------------
  19. Detail card
   -------------------------------------------------------------------------- */
.detail-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-6);
  padding: var(--s-6);
}
@media (min-width: 54.8571rem) {
  .detail-list { grid-template-columns: repeat(3, 1fr); }
}
.detail-list__term {
  font-size: 0.7857rem; line-height: 1.1429rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-text-subtlest);
}
.detail-list__definition { margin-top: var(--s-2); font-size: 1rem; color: var(--c-text); }

/* -----------------------------------------------------------------------------
  20. Tables
   -------------------------------------------------------------------------- */
/* DetailPageTable — Stripe Apps tabular module pattern.
   Structure:
     .detail-page-table          (wrapper card)
       .detail-page-table__header  (title + actions)
       .detail-page-table__body    (scrollable region)
         table.detail-page-table__table
   Cell type modifiers go on td/th: --id, --currency, --status, --date, --actions, --num. */
.detail-page-table {
  background-color: var(--c-bg-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.detail-page-table__header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 0.0714rem solid var(--c-border-subtle);
}
.detail-page-table__title {
  font-size: 1.1429rem; line-height: 1.4286rem; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-text);
  margin: 0;
}
.detail-page-table__title-meta {
  margin-left: var(--s-3);
  font-size: 0.8571rem; font-weight: 500;
  color: var(--c-text-subtle);
}
.detail-page-table__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
}
.detail-page-table__body {
  overflow: auto;
}
.detail-page-table__footer {
  padding: var(--s-4) var(--s-6);
  border-top: 0.0714rem solid var(--c-border-subtle);
}
.detail-page-table__empty {
  padding: var(--s-9) var(--s-6);
  text-align: center;
  color: var(--c-text-subtle);
  font-size: 1rem;
}

/* Inner table */
.detail-page-table__table { width: 100%; font-size: 1rem; }
.detail-page-table__table thead {
  position: sticky; top: 0;
  background-color: var(--c-bg-page);
  border-bottom: 0.0714rem solid var(--c-border);
}
.detail-page-table__table th {
  text-align: left;
  padding: var(--s-3) var(--s-5);
  font-size: 0.7857rem; line-height: 1.1429rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-text-subtlest);
  white-space: nowrap;
}
.detail-page-table__table td {
  padding: var(--s-4) var(--s-5);
  color: var(--c-text);
}
.detail-page-table__table tbody tr {
  border-top: 0.0714rem solid var(--c-border-subtle);
  transition: background-color 100ms ease;
}
.detail-page-table__table tbody tr:hover {
  background-color: var(--c-bg-page);
}

/* Cell type modifiers (StatusTableCell / IdTableCell / CurrencyTableCell / DateTableCell / TextTableCell / LinkTableCell) */
.detail-page-table__cell--id {
  font-family: "Sohne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8571rem;
  color: var(--c-text-link);
}
.detail-page-table__cell--id-pending {
  font-family: "Sohne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8571rem;
  color: var(--c-text-subtle);
}
.detail-page-table__cell--currency,
.detail-page-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.detail-page-table__cell--date {
  color: var(--c-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.detail-page-table__cell--status {
  white-space: nowrap;
}
.detail-page-table__cell--actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.detail-page-table__cell--link {
  color: var(--c-text-link);
}
.detail-page-table__cell--link:hover {
  text-decoration: underline;
}

/* Whole-row alignment */
.detail-page-table__table--right th,
.detail-page-table__table--right td { text-align: right; }

/* Pending state (loading skeleton-like) */
.detail-page-table--pending .detail-page-table__body { opacity: 0.6; pointer-events: none; }

/* Classification table */
.classification-table {
  table-layout: fixed;
  width: 100%;
}
.classification-table th, .classification-table td {
  padding: var(--s-3) var(--s-6);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classification-table th:nth-child(1), .classification-table td:nth-child(1) { width: 28%; }
.classification-table th:nth-child(2), .classification-table td:nth-child(2) { width: 30%; }
.classification-table th:nth-child(3), .classification-table td:nth-child(3) { width: 42%; }
.classification-table .classification-table__type { font-weight: 500; color: var(--c-text); }
.classification-table .classification-table__column { color: var(--c-text-subtle); }
.classification-table__mapped {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.classification-table__mapped > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.classification-table__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1429rem;
  height: 1.1429rem;
  border-radius: var(--radius-base);
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--c-text-subtlest);
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
}
.classification-table__remove:hover {
  background-color: var(--stripe-danger-bg);
  color: var(--stripe-danger-strong);
}
.classification-table__remove svg { width: 0.8571rem; height: 0.8571rem; }
.classification-table .classification-table__example {
  color: var(--c-text-subtle);
  font-variant-numeric: tabular-nums;
  font-family: "Sohne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8571rem;
}
.classification-table__example-empty { color: var(--c-text-disabled); }
.classification-table .classification-table__placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--c-text-link);
  font-size: 0.9286rem;
  font-weight: 500;
  cursor: pointer;
}
.classification-table .classification-table__placeholder:hover { color: var(--c-text-link-hover); text-decoration: underline; }
.classification-table .classification-table__placeholder svg {
  width: 0.8571rem; height: 0.8571rem;
  flex-shrink: 0;
}
.classification-table select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Lead simulations table */
/* Higher specificity than the .detail-page-table__table tbody tr:hover default */
.detail-page-table__table tbody tr.sim-row--highlight,
tr.sim-row--highlight {
  background-color: var(--stripe-success-bg);
}
.detail-page-table__table tbody tr.sim-row--highlight:hover,
tr.sim-row--highlight:hover {
  background-color: var(--stripe-success-bg);
  filter: brightness(0.97);
}
.sim-row--highlight td:first-child {
  border-left: 0.2143rem solid var(--stripe-success-strong);
  font-weight: 600;
  color: var(--stripe-success-text);
}
.sim-row__index { display: inline-flex; align-items: center; gap: 0.2857rem; font-variant-numeric: tabular-nums; }
.sim-row__doc--default { color: var(--c-text); }
.sim-row__doc--highlight { color: var(--c-text); font-weight: 600; }
.sim-row__sim-id {
  font-family: "Sohne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8571rem; color: var(--stripe-indigo);
}
.sim-row__sim-id:hover { text-decoration: underline; }
.sim-row__sim-id--highlight { color: var(--stripe-success-text); font-weight: 600; }
.sim-row__sim-id--pending { color: var(--c-text-subtle); text-decoration: none; }
.sim-row__errors { font-size: 0.8571rem; color: var(--stripe-danger-text); }
.sim-row__errors li + li { margin-top: 0.1429rem; }

/* -----------------------------------------------------------------------------
  21. Processing panel
   -------------------------------------------------------------------------- */
.processing-panel__meta { font-size: 0.8571rem; color: var(--c-text-subtle); }
.processing-panel__meta strong { color: var(--c-text); font-weight: 500; }
.processing-panel__counts {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.8571rem; color: var(--c-text-subtle);
}
.processing-panel__progress { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-6); }
.processing-panel__timing {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding-top: var(--s-2);
  font-size: 0.8571rem; color: var(--c-text-subtle);
}

.simulations-table__exports { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.simulations-table__exports-label { display: none; }
@media (min-width: 45.7143rem) { .simulations-table__exports-label { display: inline; } }

/* -----------------------------------------------------------------------------
  22. Lead simulation modal
   -------------------------------------------------------------------------- */
.lead-section { display: flex; flex-direction: column; gap: var(--s-6); }
.lead-section__heading {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: 0.7857rem; line-height: 1.1429rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-text-subtlest);
}
.lead-section__heading--success { color: var(--stripe-success-text); }

.dl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4) var(--s-5);
  font-size: 1rem;
}
.dl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dl-grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 45.7143rem) { .dl-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.dl-grid dt { font-size: 0.8571rem; color: var(--c-text-subtle); }
.dl-grid dd { margin-top: 0.1429rem; font-weight: 500; color: var(--c-text); }

.bank-card { display: flex; flex-direction: column; }
.bank-card__heading {
  display: flex; align-items: center; gap: var(--s-4);
  min-width: 0; flex: 1;
}
.bank-card__header {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 0.0714rem solid var(--c-border-subtle);
  background-color: var(--c-bg-page);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.bank-card__main { min-width: 0; flex: 1; }
.bank-card__title {
  font-size: 1rem; line-height: 1.4286rem; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-card__count { font-size: 0.8571rem; color: var(--c-text-subtle); }

.pre-approved-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3);
}

/* -----------------------------------------------------------------------------
  23. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
}
.pagination__gap { padding: 0 var(--s-3); font-size: 0.8571rem; color: var(--c-text-subtle); }
.pagination__disabled { pointer-events: none; opacity: 0.5; }

/* -----------------------------------------------------------------------------
  24. Spinner
   -------------------------------------------------------------------------- */
.spinner {
  width: 1rem; height: 1rem;
  animation: spin 1s linear infinite;
  color: var(--c-text-subtle);
}
.spinner circle { opacity: 0.25; }
.spinner path { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }