/* ===========================================================================
   Fintology app design system  (port of design-app.md / layout-app.md)

   Single source of truth for /app, onboarding and auth UI. Templates link this
   and use semantic classes + tokens only - NEVER hardcode colors. Theme is
   token-driven: :root = light, [data-theme="dark"] = dark (the default, set
   pre-paint by an inline snippet). White-label tenants override --primary
   inline from their brand color; everything else derives from tokens.
   =========================================================================== */

/* ---- fonts (self-hosted) ------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2"); }
/* Typed e-signatures (Contract Center). Dancing Script, SIL Open Font License 1.1 -
   self-hosted, same as every other face here. The signed PDF renders the .ttf
   sibling through WeasyPrint, so what the client sees on screen is what is burned
   into the document. */
@font-face { font-family: "Signature"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/dancing-script-600.woff2") format("woff2"); }

/* ---- tokens -------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --fg: #171c24;
  --card: #ffffff;
  --card-fg: #171c24;
  --muted: #f0f1f3;
  --muted-fg: #5f6672;
  --secondary: #f2f3f5;
  --secondary-fg: #2a2f37;
  --border: #dcdfe4;
  --input-border: #e0e3e8;
  --hover: #eef0f2;
  --primary: #5EE695;          /* mint accent (marketing brand — www.fintology.ai) */
  --primary-fg: #07140c;       /* dark text on mint */
  /* soft + ring derive from --primary so a white-label tenant's brand color
     (injected as --primary in the base templates) re-skins these too */
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --ring: color-mix(in srgb, var(--primary) 40%, transparent);
  /* brand SECONDARY — tenant override (Domain.secondary_color); defaults to primary
     so single-color themes stay solid. Used for gradients / the second accent. */
  --brand2: var(--primary);
  --success: #1f9d4d; --success-soft: #e7f6ec;
  --warning: #b07a00; --warning-soft: #fff5e0;
  --danger: #c0271d;  --danger-soft: #fdeceb;
  --info: #2563c9;    --info-soft: #e8f0fd;
  --radius: 14px;
  --shadow-sm: 0 2px 6px -1px rgba(15,20,30,.08);
  --shadow-md: 0 10px 30px -10px rgba(15,20,30,.18);
  --shadow-float: 0 18px 44px -16px rgba(15,20,30,.22), 0 6px 16px -8px rgba(15,20,30,.10);
}
[data-theme="dark"] {
  --bg: #0b0e13;
  --fg: #fafafa;
  --card: #12161d;
  --card-fg: #fafafa;
  --muted: #161b22;
  --muted-fg: #9aa1ad;
  --secondary: #1c222b;
  --secondary-fg: #e9eaec;
  --border: #262d37;
  --input-border: #2a313c;
  --hover: #1f2630;
  --primary: #5EE695;
  --primary-fg: #07140c;
  --primary-soft: color-mix(in srgb, var(--primary) 16%, transparent);
  --ring: color-mix(in srgb, var(--primary) 45%, transparent);
  --success: #36c172; --success-soft: rgba(54,193,114,.14);
  --warning: #e0a738; --warning-soft: rgba(224,167,56,.14);
  --danger: #ef5d52;  --danger-soft: rgba(239,93,82,.14);
  --info: #5b9bf0;    --info-soft: rgba(91,155,240,.14);
  --shadow-sm: 0 2px 6px -1px rgba(0,0,0,.4);
  --shadow-md: 0 14px 40px -12px rgba(0,0,0,.6);
  --shadow-float: 0 24px 56px -18px rgba(0,0,0,.7), 0 8px 20px -10px rgba(0,0,0,.45);
}

/* ---- F2 compat aliases --------------------------------------------------- */
/* Old self-contained admin pages reference --neutral-*/--mint; map them to the
   theme-aware tokens so they go dark/gold + toggle with no body-CSS changes.
   (Resolved at use-time, so one definition covers both themes.) */
:root {
  --white: #ffffff; --neutral-50: #ffffff; --neutral-100: #f0f1f3; --neutral-200: #dcdfe4;
  --neutral-300: #e0e3e8; --neutral-400: #5f6672; --neutral-500: #5f6672; --neutral-600: #5f6672;
  --neutral-700: #171c24; --neutral-900: #171c24;
  --mint: #5EE695; --mint-hover: #3FD97E; --mint-700: #1f9d57;
}
[data-theme="dark"] {
  --white: #12161d; --neutral-50: #0b0e13; --neutral-100: #161b22; --neutral-200: #262d37;
  --neutral-300: #2a313c; --neutral-400: #9aa1ad; --neutral-500: #9aa1ad; --neutral-600: #9aa1ad;
  --neutral-700: #fafafa; --neutral-900: #fafafa;
  --mint: #5EE695; --mint-hover: #3FD97E; --mint-700: #1f9d57;
}

/* ---- admin signup/onboarding surface: marketing-aligned LIGHT + MINT --------
   The admin registration flow (admin_login/register/otp + B2B onboarding) is set
   to data-theme="light" data-surface="admin" so it mirrors the www.fintology.ai
   marketing site (white canvas + mint #5EE695) per design.md's Landing spec.
   Retargets the accent gold -> mint, scoped to this surface only, so the rest of
   the app (dashboards) keeps its dark/gold system. PRODUCT-OWNER DIRECTED — this
   intentionally diverges from design.md §0 ("app = dark/gold"); flagged for V/Saad.
   Higher specificity (html[data-surface]) + theme-agnostic so mint holds in both
   light and (toggled) dark. */
html[data-surface="admin"] {
  --primary: #5EE695; --primary-fg: #07140c;
  --primary-soft: rgba(94,230,149,0.16); --ring: rgba(94,230,149,0.40);
  --mint: #5EE695; --mint-hover: #3FD97E; --mint-700: #1f9d57;
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100%;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s, color .2s;
}
a { color: var(--fg); text-decoration: none; }
.num, .mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-fg); }

h1 { font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.subtitle { color: var(--muted-fg); font-size: 1rem; line-height: 1.5; margin: .6rem 0 1.6rem; }
.subtitle strong, .muted strong { color: var(--fg); }

/* ---- top bar / shells ---------------------------------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.wordmark { font-weight: 600; font-size: 1.35rem; letter-spacing: -.03em; color: var(--fg);
  display: flex; align-items: center; gap: .5rem; }
.wordmark img { max-height: 60px; display: block; }
.topbar-right { display: flex; align-items: center; gap: 1rem; font-size: .92rem; color: var(--muted-fg); }
.topbar-right a { color: var(--fg); font-weight: 600; }
.topbar-right a:hover { text-decoration: underline; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Shared fine-print footer (admin + consumer flows) — copyright left, legal right */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  flex-wrap: wrap; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.1rem 2rem 1.4rem;
  font-size: .76rem; color: var(--muted-fg); }
.site-footer .sf-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer a { color: var(--muted-fg); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
@media (max-width: 520px) { .site-footer { justify-content: center; text-align: center; } }
.center-stage { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding: 1.5rem 1.25rem 4rem; }
.progress { color: var(--muted-fg); font-size: .9rem; font-weight: 500; margin: 0 0 1.1rem; text-align: center; }
.progress b { color: var(--fg); font-weight: 600; }

/* ---- card ---------------------------------------------------------------- */
.card { width: 100%; max-width: 448px; background: var(--card); color: var(--card-fg);
  border: 1px solid var(--border); border-radius: 20px; padding: 2.4rem 2.2rem;
  box-shadow: var(--shadow-sm); }
.card.wide { max-width: 600px; }
.card.narrow { max-width: 400px; }
.card .card-head { text-align: center; margin-bottom: 1.6rem; }
html[data-surface="admin"] .card { background: var(--card); box-shadow: var(--shadow-float); }
html[data-surface="admin"] body { background: #e3e6ec; }  /* soft grey so white cards pop */
/* admin-flow text inputs: white fill + a visible border (OTP cells keep their grey) */
html[data-surface="admin"] input:not(.otp-cell):not([type=checkbox]):not([type=radio]),
html[data-surface="admin"] select, html[data-surface="admin"] textarea { background: var(--bg); border-color: var(--border); }
html[data-surface="admin"] input:not(.otp-cell):not([type=checkbox]):not([type=radio]):focus,
html[data-surface="admin"] select:focus, html[data-surface="admin"] textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

/* ---- panels (dashboard) -------------------------------------------------- */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.4rem 1.5rem; }
.panel h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-fg); font-weight: 600; margin: 0 0 1rem; }

/* ---- forms --------------------------------------------------------------- */
.field, .group { margin-bottom: 1.1rem; }
label, .label { display: block; font-size: .9rem; font-weight: 600; color: var(--fg); margin: .9rem 0 .45rem; }
.card-head + label, .card-head ~ form label:first-of-type { margin-top: 0; }
form > button[type=submit], form > .btn { margin-top: 1.3rem; }
.opt { color: var(--muted-fg); font-weight: 400; }
.help { color: var(--muted-fg); font-size: .82rem; margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
input[type=number], input[type=url], select, textarea {
  width: 100%; padding: .8rem 1rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--input-border); border-radius: 12px;
  font-family: inherit; font-size: .98rem; transition: border-color .15s, box-shadow .15s; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0f131a; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; }
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-fg); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox], input[type=radio] { width: auto; margin: 0; accent-color: var(--primary); }
.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; margin: .55rem 0; }

/* ---- buttons ------------------------------------------------------------- */
.btn, button[type=submit], .btn-primary {
  width: 100%; padding: .9rem 1.1rem; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--primary); color: var(--primary-fg); font-family: inherit; font-weight: 600;
  font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: filter .15s, background-color .15s; }
.btn:hover, button[type=submit]:hover, .btn-primary:hover { filter: brightness(1.05); }
.btn:disabled, button[type=submit]:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn-outline { background: transparent; color: var(--fg); border: 1px solid var(--border); width: auto; padding: .6rem 1rem; }
.btn-outline:hover { background: var(--hover); filter: none; }
.btn-ghost { background: transparent; color: var(--fg); width: auto; padding: .55rem .8rem; }
.btn-ghost:hover { background: var(--hover); filter: none; }
.btn-sm { width: auto; padding: .5rem .85rem; font-size: .85rem; }

/* ---- links / alerts ------------------------------------------------------ */
.links { text-align: center; margin-top: 1.4rem; font-size: .92rem; color: var(--muted-fg); line-height: 1.9; }
.links a, .muted a { color: var(--fg); font-weight: 600; }
.links a:hover, .muted a:hover { text-decoration: underline; }
.alert, .error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger);
  padding: .7rem .85rem; border-radius: 12px; font-size: .9rem; margin-bottom: 1.1rem; }
.notice, .dev-hint { background: var(--primary-soft); border: 1px solid var(--primary); color: var(--fg);
  padding: .7rem .85rem; border-radius: 12px; font-size: .88rem; margin-bottom: 1.1rem; }
.errorlist, .field-error { color: var(--danger); font-size: .82rem; margin: .35rem 0 0; padding: 0; list-style: none; }

/* ---- pills / tags -------------------------------------------------------- */
.pill, .tag { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; border: 1px solid transparent; }
.pill.ok, .tag.ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.pill.warn, .tag.warn { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.pill.bad, .tag.bad { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.pill.muted, .tag.muted { background: var(--muted); color: var(--muted-fg); border-color: var(--border); }

/* ---- tables -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--border); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-fg); font-weight: 600; }
td.num, th.num { text-align: right; }
tr:hover td { background: var(--hover); }

/* ---- sidebar shell (dashboard) ------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; }
.sidebar .brand { padding: 1.4rem 1.3rem; font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em;
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.sidebar .brand img { max-height: 28px; }
.nav { flex: 1; padding: .75rem .6rem; }
.nav a { display: block; padding: .6rem .75rem; margin: .1rem 0; border-radius: 10px;
  color: var(--muted-fg); font-size: .92rem; font-weight: 500; }
.nav a:hover { background: var(--hover); color: var(--fg); }
.nav a.active { background: var(--primary-soft); color: var(--fg); font-weight: 600; }
.sidebar .foot { padding: 1rem 1.1rem; border-top: 1px solid var(--border); font-size: .82rem; }
.sidebar .foot .who { color: var(--muted-fg); margin-bottom: .6rem; word-break: break-all; }
.sidebar .foot form button { width: 100%; background: transparent; color: var(--muted-fg);
  border: 1px solid var(--border); border-radius: 10px; padding: .55rem; font-weight: 600;
  font-size: .85rem; cursor: pointer; font-family: inherit; }
.sidebar .foot form button:hover { background: var(--hover); color: var(--fg); filter: none; }
.sidebar .foot .row-between { display: flex; align-items: center; gap: .6rem; }
.main { margin-left: 248px; flex: 1; padding: 2rem 2.4rem; max-width: 1120px; }
.main h1 { font-size: 1.6rem; margin: 0 0 1.5rem; }

/* ---- theme toggle -------------------------------------------------------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); cursor: pointer; padding: 0; }
.theme-toggle:hover { background: var(--hover); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }

/* ---- auth helpers (admin login / register) ------------------------------- */
.center-stage.mid { justify-content: center; }       /* vertically-centered auth */
.pw { position: relative; }
.pw input { padding-right: 2.8rem; }
.pw-eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted-fg); cursor: pointer; padding: .35rem;
  line-height: 0; display: inline-flex; align-items: center; }
.pw-eye:hover { color: var(--fg); }
.pw-eye svg { width: 20px; height: 20px; display: block; }
.divider { display: flex; align-items: center; gap: .9rem; color: var(--muted-fg);
  font-size: .75rem; letter-spacing: .12em; margin: 1.3rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google { background: var(--card); color: var(--fg); border: 1px solid var(--border);
  position: relative; cursor: not-allowed; }
.btn-google:hover { filter: none; background: var(--card); }
.btn-google .g { width: 18px; height: 18px; }
.btn-google .soon { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  font-size: .62rem; font-weight: 600; color: var(--muted-fg); background: var(--muted);
  padding: .15rem .45rem; border-radius: 999px; }

/* ---- compact auth pages (admin sign-in chrome) --------------------------- */
html[data-page="auth"] .card { padding: 1.9rem 2rem; border-radius: 16px; }
html[data-page="auth"] .card-head { margin-bottom: 1.1rem; }
html[data-page="auth"] h1 { font-size: 1.55rem; }
html[data-page="auth"] .subtitle { margin: .35rem 0 1.3rem; font-size: .92rem; }
html[data-page="auth"] .field { margin-bottom: .7rem; }
html[data-page="auth"] input { padding-block: .68rem; border-radius: 10px; font-size: .95rem; }
html[data-page="auth"] form > button[type=submit] { margin-top: .9rem; padding: .8rem; font-size: .95rem; }
html[data-page="auth"] .divider { margin: 1rem 0; }
html[data-page="auth"] .btn-google { padding: .75rem; }
html[data-page="auth"] .links { margin-top: 1rem; }

/* ---- segmented OTP input (email / phone verify) -------------------------- */
.otp { display: flex; gap: .5rem; justify-content: center; }
.otp .otp-cell { width: 100%; min-width: 0; max-width: 3.1rem; aspect-ratio: 1 / 1;
  text-align: center; padding: 0; color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 1.4rem; font-weight: 600;
  background: var(--muted); border: 1px solid var(--input-border); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background-color .15s; }
.otp .otp-cell:focus { outline: none; border-color: var(--primary); background: var(--bg);
  box-shadow: 0 0 0 3px var(--ring); }
@media (max-width: 420px) { .otp { gap: .4rem; } .otp-cell { font-size: 1.2rem; } }

/* ---- icon badge + plan summary (onboarding) ----------------------------- */
.icon-badge { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1rem;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; }
.icon-badge svg { width: 26px; height: 26px; }
.plan-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 10px;
  padding: .4rem .85rem; margin-bottom: 1rem; }
html[data-surface="admin"] .plan-summary { background: #d9f6e4; border-color: #8fe0ad; }
.plan-summary .ps-label { font-size: .72rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .05em; }
.plan-summary .ps-name { font-weight: 600; color: var(--fg); font-size: .95rem; }
.plan-summary .ps-meta { font-size: .82rem; color: var(--muted-fg); white-space: nowrap; }

/* ---- button loading spinner --------------------------------------------- */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading > * { visibility: hidden; }
.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.28); border-top-color: var(--primary-fg);
  animation: btn-spin .6s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- back button (registration / onboarding topbar) --------------------- */
.back-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); cursor: pointer; padding: 0; }
.back-btn:hover { background: var(--hover); }
.card-back { margin-top: 1.5rem; }
.back-btn svg { width: 18px; height: 18px; }

/* ---- compact onboarding pages (f2_base) --------------------------------- */
html[data-page="onboarding"] .center-stage { justify-content: center; padding-top: 1rem; padding-bottom: 3rem; }
html[data-page="onboarding"] .progress { margin-bottom: .85rem; }
html[data-page="onboarding"] .card { padding: 1.8rem 1.9rem; border-radius: 16px; }
html[data-page="onboarding"] .card-head { margin-bottom: 1.1rem; }
html[data-page="onboarding"] h1 { font-size: 1.5rem; }
html[data-page="onboarding"] .subtitle { margin: .35rem 0 1.2rem; font-size: .92rem; }
html[data-page="onboarding"] .icon-badge { width: 48px; height: 48px; margin-bottom: .8rem; }
html[data-page="onboarding"] .icon-badge svg { width: 22px; height: 22px; }
html[data-page="onboarding"] .plan-summary { padding: .75rem .9rem; margin-bottom: 1rem; }
html[data-page="onboarding"] .group, html[data-page="onboarding"] .field { margin-bottom: .8rem; }
html[data-page="onboarding"] label, html[data-page="onboarding"] .label { font-size: .88rem; margin: 0 0 .35rem; }
html[data-page="onboarding"] input:not(.otp-cell):not([type=checkbox]):not([type=radio]), html[data-page="onboarding"] select, html[data-page="onboarding"] textarea { padding-block: .62rem; border-radius: 10px; font-size: .95rem; }
html[data-page="onboarding"] form > button[type=submit], html[data-page="onboarding"] .btn { padding: .8rem; font-size: .95rem; }
html[data-page="onboarding"] .card-back { margin-top: 1.2rem; }

/* ---- EULA / agreement document (onboarding) ----------------------------- */
.eula-doc { border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  max-height: 42vh; overflow-y: auto; padding: 1.1rem 1.2rem; text-align: left; }
.eula-title { text-align: center; margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.eula-title h2 { font-size: 1rem; font-weight: 700; color: var(--fg); margin: 0 0 .25rem; }
.eula-title span { font-size: .8rem; font-weight: 600; color: var(--mint-700); }
.eula-doc p { font-size: .85rem; color: var(--muted-fg); line-height: 1.55; margin: 0 0 .7rem; }
.eula-sec { margin-bottom: .8rem; }
.eula-sec h4 { font-size: .85rem; font-weight: 600; color: var(--fg); margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.eula-sec h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: 0 0 6px; }
.eula-sec p { padding-left: .95rem; margin: 0; }
.eula-poa { background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 10px; padding: .8rem .9rem; margin: .9rem 0; }
.eula-poa h3 { font-size: .85rem; font-weight: 700; color: var(--fg); margin: 0 0 .5rem; }
.eula-poa h5 { font-size: .82rem; font-weight: 600; color: var(--fg); margin: .5rem 0 .1rem; }
.eula-poa p { margin: 0; }
.eula-box { background: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; margin-top: .8rem; }
.eula-box p { margin: 0 0 .15rem; font-size: .8rem; }
.eula-fine { text-align: center; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.eula-fine .warn { font-size: .78rem; font-weight: 600; color: var(--fg); margin: 0 0 .3rem; }
.eula-fine .copy { font-size: .7rem; font-style: italic; color: var(--muted-fg); margin: 0; }
.eula-scrolldown { display: block; margin: .8rem auto 0; width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--primary); color: var(--primary-fg); }
.eula-scrolldown svg { width: 18px; height: 18px; }
.eula-check { display: flex; align-items: flex-start; gap: .6rem; margin: 1.2rem 0 .5rem; font-size: .85rem; color: var(--muted-fg); line-height: 1.5; cursor: pointer; }
.eula-check input { margin: .15rem 0 0; accent-color: var(--primary); width: auto; flex: 0 0 auto; }
.eula-note { color: var(--warning); font-size: .82rem; margin: 0 0 .9rem; }

/* ---- connect website options (onboarding domain step) ------------------- */
.connect-why { display: flex; gap: .8rem; align-items: flex-start; background: var(--primary-soft);
  border: 1px solid var(--primary); border-radius: 12px; padding: .7rem .85rem; margin-bottom: .7rem; }
.connect-why .cw-icon { flex: 0 0 auto; color: var(--mint-700); margin-top: .1rem; }
.connect-why .cw-icon svg { width: 20px; height: 20px; }
.connect-why h3 { font-size: .9rem; font-weight: 600; color: var(--fg); margin: 0; }
.connect-why p { font-size: .82rem; color: var(--muted-fg); margin: .2rem 0 0; line-height: 1.45; }
.connect-form { margin: 0 0 .5rem; }
.connect-form .connect-option { display: flex; align-items: flex-start; justify-content: flex-start; gap: .7rem;
  width: 100%; text-align: left; padding: .72rem .95rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); font: inherit; font-weight: 400; cursor: pointer;
  transition: border-color .15s, background-color .15s; }
.connect-form .connect-option:hover { border-color: var(--primary); background: var(--card); filter: none;
  box-shadow: 0 0 0 1px var(--primary); }
.connect-form .connect-option.recommended { border-color: var(--info); background: var(--info-soft); }
.connect-form .connect-option.recommended:hover { border-color: var(--info); background: var(--info-soft); }
.connect-option.recommended .co-icon { background: var(--info-soft); color: var(--info); }
.connect-option .co-icon.muted { background: var(--muted); color: var(--muted-fg); }
.connect-title { color: var(--mint-700); }
.connect-form .connect-option.is-loading { color: transparent; }
.connect-option .co-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--mint-700); }
.connect-option .co-icon svg { width: 18px; height: 18px; }
.connect-option .co-body { flex: 1; min-width: 0; }
.connect-option .co-title { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.connect-option .co-desc, .connect-option .co-warn { display: block; }
.connect-option .co-desc { font-size: .82rem; color: var(--muted-fg); margin-top: .1rem; line-height: 1.4; }
.connect-option .co-arrow { flex: 0 0 auto; color: var(--muted-fg); margin-top: .2rem; }
.connect-option .co-arrow svg { width: 18px; height: 18px; }
.co-badge { font-size: .66rem; font-weight: 600; background: var(--info-soft); color: var(--info); padding: .12rem .5rem; border-radius: 999px; }
.co-warn { font-size: .76rem; color: var(--warning); margin-top: .3rem; }

/* ===========================================================================
   Dashboard components (consumer /app) - tokenized so pages carry no colors
   =========================================================================== */
.page-head, .head, .top, .bill-head { display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1.25rem; }
.cards, .scores { display: flex; flex-wrap: wrap; gap: 1rem; }
.sub { color: var(--muted-fg); margin: -.6rem 0 1.6rem; }
a.back { color: var(--primary); font-size: .85rem; }

/* score cards */
.score-card { flex: 1; min-width: 160px; text-align: center; }
.score-card .bureau { font-size: .8rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .04em; }
.score-card .num { font-size: 2.6rem; font-weight: 700; color: var(--primary); line-height: 1.1; margin: .35rem 0;
  font-family: "JetBrains Mono", ui-monospace, monospace; }
.score-card .num.empty { color: var(--muted-fg); opacity: .5; }
.score { text-align: center; padding: .8rem 1.2rem; border: 1px solid var(--border); border-radius: 12px; }
.score .b { font-size: .72rem; text-transform: uppercase; color: var(--muted-fg); }
.score .n { font-size: 1.6rem; font-weight: 700; color: var(--primary); font-family: "JetBrains Mono", ui-monospace, monospace; }

/* key-value + meta */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: .5rem 1rem; font-size: .9rem; }
.kv dt { color: var(--muted-fg); } .kv dd { margin: 0; }
.meta { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--fg); font-size: .92rem; margin-top: .4rem; }
.meta .k { color: var(--muted-fg); font-size: .78rem; display: block; }

/* notes / walls / empty */
.note { font-size: .84rem; color: var(--warning); background: var(--warning-soft);
  border: 1px solid var(--warning); padding: .6rem .8rem; border-radius: 10px; }
.empty-state, .wall { color: var(--muted-fg); }
.wall { text-align: center; padding: 2.5rem 1.5rem; max-width: 480px; margin: 0 auto; }
.soon { text-align: center; color: var(--muted-fg); padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: 12px; }

/* status badges (application + subscription) */
.badge { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; text-transform: capitalize; border: 1px solid transparent; }
.badge.sequencing { background: var(--info-soft); color: var(--info); }
.badge.ongoing { background: var(--warning-soft); color: var(--warning); }
.badge.completed, .badge.active, .badge.trialing { background: var(--success-soft); color: var(--success); }
.badge.past_due, .badge.canceled { background: var(--danger-soft); color: var(--danger); }

/* pull-type pills (application detail) */
.pull { display: inline-flex; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.pull.soft, .pull.income_based { background: var(--success-soft); color: var(--success); }
.pull.hard { background: var(--danger-soft); color: var(--danger); }
.pull.hard_first_pull_only, .pull.hard_if_approved { background: var(--warning-soft); color: var(--warning); }
.tag.bad { background: var(--danger-soft); color: var(--danger); }
.round h2 { font-size: .95rem; margin: 0 0 .8rem; }
.round h2 .num { color: var(--primary); }

/* err alias of alert */
.err { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger);
  padding: .6rem .8rem; border-radius: 10px; margin-bottom: 1rem; font-size: .88rem; }

/* secondary buttons / row actions */
.add-btn, button.primary, .cta, .subscribe, .manage-btn { background: var(--primary); color: var(--primary-fg);
  border: 0; border-radius: 10px; padding: .55rem 1.1rem; font-size: .88rem; cursor: pointer; font-weight: 600;
  display: inline-block; width: auto; }
.add-btn:hover, button.primary:hover, .cta:hover, .subscribe:hover, .manage-btn:hover { filter: brightness(1.05); }
button.primary:disabled, .plan .disabled { background: var(--muted); color: var(--muted-fg); cursor: not-allowed; filter: none; }
.view, .edit, .act a, .act button { display: inline-block; width: auto; font-size: .84rem;
  border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: .35rem .8rem;
  color: var(--fg); cursor: pointer; margin-left: .3rem; }
.act form { display: inline; }
.view:hover, .edit:hover { background: var(--hover); }
.act .del { color: var(--danger); border-color: var(--danger); }
.actions { margin-top: 1.4rem; display: flex; gap: .6rem; }
.actions button { width: auto; padding: .6rem 1.2rem; }
.actions a { padding: .6rem 1.2rem; border: 1px solid var(--border); border-radius: 8px; color: var(--fg); }
input[type=file] { width: 100%; padding: .5rem; border: 1px solid var(--input-border); border-radius: 12px; background: var(--bg); color: var(--fg); }

/* feature lists / mono */
.feat { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .9rem; color: var(--fg); }
.feat li { padding: .2rem 0; } .feat li::before { content: "\2022  "; color: var(--primary); }
.card-line { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* billing plans */
.notice.ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.notice.err { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; }
.toggle a { padding: .45rem 1.1rem; font-size: .86rem; color: var(--muted-fg); background: var(--card); }
.toggle a.on { background: var(--primary); color: var(--primary-fg); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; max-width: 840px; }
.plan { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--primary); box-shadow: var(--shadow-md); }
.plan h3 { margin: 0; font-size: 1.1rem; }
.plan .price { font-size: 1.9rem; font-weight: 700; margin: .6rem 0 .1rem; }
.plan .price span { font-size: .85rem; font-weight: 400; color: var(--muted-fg); }
.plan ul { list-style: none; padding: 0; margin: 1rem 0 1.25rem; font-size: .88rem; color: var(--fg); flex: 1; }
.plan li { padding: .25rem 0; } .plan li::before { content: "\2713  "; color: var(--success); font-weight: 700; }
.plan button, .plan .btn { width: 100%; padding: .65rem; border: 0; border-radius: 8px; font-size: .92rem; cursor: pointer; }
.plan .subscribe { width: 100%; }
.plan .current { background: var(--success-soft); color: var(--success); text-align: center; font-weight: 600; border-radius: 8px; padding: .65rem; }
.plan .soon { text-align: center; font-size: .76rem; color: var(--muted-fg); margin-top: .5rem; padding: 0; border: 0; }

/* ---- responsive ---------------------------------------------------------- */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) {
  .sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav { display: flex; flex-wrap: wrap; }
  .main { margin-left: 0; padding: 1.5rem 1.25rem; }
}
@media (max-width: 560px) {
  .card { padding: 2rem 1.5rem; }
  .row { grid-template-columns: 1fr; }
  .topbar { padding: 1.1rem 1.25rem; }
}

/* ==========================================================================
   Consumer auth shell (.cauth) — LIGHT mode, white glass card, brand-tinted
   wash/grid/accent bar. Accents read var(--primary) (the tenant's brand color),
   so a single token re-skins the whole login/register/forgot flow. Rules are
   scoped under .cauth to win over app.css's global input/button styles.
   ========================================================================== */
.cauth { min-height: 100vh; position: relative; overflow-x: hidden;
  background: #fff; color: #0f172a;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.cauth-wash { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(at 18% -5%, color-mix(in srgb, var(--primary) 13%, transparent) 0%, transparent 55%),
    radial-gradient(at 85% 105%, color-mix(in srgb, var(--brand2) 11%, transparent) 0%, transparent 55%); }
.cauth-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .04;
  background-image: linear-gradient(var(--primary) 1px, transparent 1px),
                    linear-gradient(90deg, var(--primary) 1px, transparent 1px);
  background-size: 60px 60px; }
.cauth-head { position: relative; z-index: 1; padding: 1.5rem; }
.cauth-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.cauth-logo { width: 38px; height: 38px; border-radius: 10px; background: var(--primary);
  color: var(--primary-fg); display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.cauth-logo-img { height: 38px; max-width: 170px; object-fit: contain; }
.cauth-word { font-weight: 600; font-size: 1.15rem; color: #0f172a; letter-spacing: -.02em; }
.cauth-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; min-height: calc(100vh - 90px); }
.cw-wide .cauth-card-wrap { max-width: 760px; }
/* applicant wizard step indicator */
.cw-steps { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap;
  width: 100%; max-width: 760px; margin: 0 auto 1.6rem; }
.cw-step { display: flex; align-items: center; gap: .5rem; }
.cw-step-num { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: .9rem; font-weight: 700; background: #e2e8f0; color: #94a3b8; transition: all .2s; }
.cw-step-num svg { width: 16px; height: 16px; }
.cw-step.done .cw-step-num { background: var(--primary); color: var(--primary-fg); }
.cw-step.current .cw-step-num { background: var(--primary); color: var(--primary-fg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent); }
.cw-step-lbl { font-size: .82rem; font-weight: 500; color: #94a3b8; line-height: 1.12; max-width: 84px; }
.cw-step.done .cw-step-lbl, .cw-step.current .cw-step-lbl { color: #0f172a; }
.cw-step-bar { width: 30px; height: 2px; background: #e2e8f0; flex: 0 0 auto; }
.cw-step-bar.done { background: color-mix(in srgb, var(--primary) 55%, transparent); }
/* wizard: centered heading + stacked section cards + actions */
.cw-head { text-align: center; margin-bottom: 1.4rem; }
.cw-head h1 { font-size: 2rem; font-weight: 700; color: #0f172a; margin: 0 0 .35rem; letter-spacing: -.02em; }
.cw-head p { color: #64748b; margin: 0; font-size: .95rem; }
.cw-card { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 1.5rem; box-shadow: 0 14px 40px -20px rgba(15,23,42,.14); margin-bottom: 1.1rem; }
.cw-card h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #475569; margin: 0 0 1.1rem; }
.cw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cw-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
/* radio-method rows (co-applicant). Scoped under .cauth to beat the global
   `.cauth form label { display:block }` rule that would stack the row. */
.cauth .cw-radio { display: flex; align-items: center; gap: .75rem; padding: .95rem 1.1rem; border: 1px solid #e2e8f0;
  border-radius: 12px; background: #fff; cursor: pointer; margin: 0 0 .75rem; font-weight: 400; transition: border-color .15s, background .15s; }
.cauth .cw-radio:last-child { margin-bottom: 0; }
.cw-radio:hover { border-color: #cbd5e1; }
.cw-radio.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, #fff); }
.cw-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cw-radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; flex: 0 0 auto;
  display: grid; place-items: center; transition: border-color .15s; }
.cw-radio.sel .cw-radio-dot { border-color: var(--primary); }
.cw-radio.sel .cw-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.cw-radio-ico { width: 18px; height: 18px; color: #475569; flex: 0 0 auto; }
.cw-radio-lbl { font-size: .95rem; color: #0f172a; font-weight: 500; }
/* optional speed-up feature card (ID scan / bank link) */
.cw-feature { display: flex; gap: 1rem; align-items: flex-start; }
.cw-feature-ico { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); display: grid; place-items: center; }
.cw-feature-ico svg { width: 22px; height: 22px; }
.cw-feature-body { flex: 1; min-width: 0; }
.cw-feature-h { display: flex; align-items: center; gap: .4rem; font-size: .98rem; font-weight: 700; color: #0f172a; }
.cw-feature-shield { width: 15px; height: 15px; color: var(--primary); }
.cw-feature-desc { color: #64748b; font-size: .85rem; line-height: 1.5; margin: .35rem 0 .8rem; }
.cw-feature-btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, #e2e8f0);
  background: #fff; color: var(--primary); border-radius: 10px; padding: .5rem .9rem; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.cw-feature-btn:hover { background: color-mix(in srgb, var(--primary) 6%, #fff); }
.cw-feature-btn svg { width: 15px; height: 15px; }
.cw-feature-opt { color: #94a3b8; font-size: .72rem; font-style: italic; margin: .55rem 0 0; }
@media (max-width: 560px) { .cw-grid3 { grid-template-columns: 1fr; } }
.cw-actions { display: flex; gap: .7rem; margin-top: .4rem; }
.cw-actions .cw-back { flex: 0 0 auto; width: auto; background: #fff; border: 1px solid #e2e8f0; color: #475569;
  height: 48px; padding: 0 1.2rem; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; }
.cw-actions .cw-back:hover { background: #f8fafc; border-color: #cbd5e1; }
.cw-actions .cw-back svg { width: 16px; height: 16px; }
/* scoped under .cauth to beat the global `.cauth form button[type=submit]` margin */
.cauth .cw-actions .cauth-cta, .cauth .cw-actions button[type=submit] { flex: 1; margin-top: 0; }
/* size + align icons inside wizard submit buttons (e.g. the EULA "Submit Application" check) */
.cauth form button[type=submit] svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cauth form button[type=submit]:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
/* "Coming soon" badge on a wizard action button */
.cw-actions .cw-has-badge { position: relative; overflow: visible; }
.cw-badge { position: absolute; top: -8px; right: -6px; background: #0f172a; color: #fff;
  font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .4rem; border-radius: 999px; box-shadow: 0 2px 6px -1px rgba(15,23,42,.35);
  pointer-events: none; white-space: nowrap; }
/* secondary "Upload report" button + its reveal panel + free-report link */
.cauth .cw-upload-btn { width: 100%; height: 48px; margin-top: .8rem; border: 1px solid #e2e8f0;
  background: #fff; color: #334155; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.cauth .cw-upload-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.cauth .cw-upload-btn.open { border-color: var(--primary); color: #0f172a; }
.cauth .cw-upload-btn svg { width: 18px; height: 18px; }
.cauth .cw-upload-panel { margin-top: .8rem; padding: 1rem; border: 1px solid #e2e8f0;
  border-radius: 12px; background: #f8fafc; }
.cauth .cw-upload-panel[hidden] { display: none; }
.cauth .cw-upload-panel label { display: block; }
/* clean custom file input (upload popup) */
.cr-file-lbl { font-size: .8rem; font-weight: 600; color: #475569; margin: 0 0 .4rem; }
.cauth .cr-file { display: block; position: relative; cursor: pointer; }
.cauth .cr-file input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  cursor: pointer; margin: 0; }
.cauth .cr-file input[type=file]:disabled { cursor: not-allowed; }
.cr-file-box { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1px dashed #cbd5e1;
  border-radius: 12px; background: #f8fafc; transition: border-color .15s, background .15s; }
.cr-file:hover .cr-file-box { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, #f8fafc); }
.cr-file-ico { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid #e2e8f0;
  color: #64748b; display: grid; place-items: center; flex: 0 0 auto; }
.cr-file-ico svg { width: 17px; height: 17px; }
.cr-file-name { flex: 1; min-width: 0; font-size: .85rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-file-btn { flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, #e2e8f0); border-radius: 8px; padding: .3rem .7rem; background: #fff; }
.cr-file-check { display: none; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: #16a34a; color: #fff; place-items: center; }
.cr-file-check svg { width: 14px; height: 14px; }
.cr-file.has-file .cr-file-box { border-style: solid; border-color: #16a34a; background: #f0fdf4; }
.cr-file.has-file .cr-file-ico { border-color: #bbf7d0; color: #16a34a; }
.cr-file.has-file .cr-file-name { color: #0f172a; font-weight: 600; }
.cr-file.has-file .cr-file-btn { display: none; }
.cr-file.has-file .cr-file-check { display: grid; }
/* disabled "coming soon" action button — clean muted twin of the gold CTA */
.cauth .cw-actions button[disabled] { flex: 1; height: 48px; border: 0; border-radius: 10px;
  background: #eef2f6; color: #9aa6b6; font: inherit; font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  box-shadow: none; filter: none; cursor: not-allowed; }
/* upload popup */
.cw-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.cw-modal[hidden] { display: none; }
.cw-modal-card { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 16px;
  padding: 1.6rem; box-shadow: 0 30px 70px -20px rgba(15,23,42,.4); max-height: 90vh; overflow: auto; }
.cw-modal-x { position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px; border: 0; background: transparent;
  color: #94a3b8; cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
.cw-modal-x:hover { background: #f1f5f9; color: #475569; }
.cw-modal-x svg { width: 18px; height: 18px; }
.cw-modal-h { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0 0 .35rem; }
.cw-modal-sub { color: #64748b; font-size: .85rem; line-height: 1.5; margin: 0 0 1.1rem; }
.cw-modal-sub strong { color: #334155; }
.cw-seg { display: flex; gap: .3rem; background: #f1f5f9; border-radius: 10px; padding: .25rem; margin-bottom: 1.1rem; }
.cw-seg-btn { flex: 1; border: 0; background: transparent; color: #64748b; font: inherit; font-weight: 600;
  font-size: .82rem; padding: .5rem; border-radius: 8px; cursor: pointer; }
.cw-seg-btn.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.cw-file-lbl { display: block; font-size: .8rem; font-weight: 500; color: #475569; margin-bottom: .9rem; }
.cw-file-lbl input[type=file] { display: block; margin-top: .35rem; }
.cw-modal-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px;
  padding: .55rem .8rem; font-size: .82rem; margin: 0 0 .8rem; }
.cw-modal-err[hidden] { display: none; }
.cw-free { text-align: center; margin: .9rem 0 0; font-size: .82rem; }
.cw-free a { color: var(--primary); font-weight: 500; text-decoration: none; display: inline-flex;
  align-items: center; gap: .25rem; }
.cw-free a:hover { text-decoration: underline; }
.cw-free a svg { width: 13px; height: 13px; }
/* pill multi-select (income sources etc.) */
.cw-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.cw-pill { font-size: .8rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid #e2e8f0;
  background: #fff; color: #64748b; cursor: pointer; font: inherit; }
.cw-pill.sel { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary); color: #0f172a; }
/* required asterisk, inline hints, and the SMS-verified phone indicator */
.cw-req { color: #e11d48; }
.cw-hint { color: #94a3b8; font-size: .78rem; font-weight: 400; }
.cw-req { color: #f87171; font-weight: 700; }
.cw-verified { display: flex; align-items: center; gap: .35rem; margin: .4rem 0 0;
  color: #16a34a; font-size: .82rem; font-weight: 600; }
.cw-verified svg { width: 15px; height: 15px; }
/* Info-icon field tooltip: hover on desktop, tap-to-toggle (.open, set by the step
   template's JS) on touch. Anchored above the icon; right-column grid fields
   right-align the bubble so it can't overflow the viewport. */
.cw-tip { position: relative; display: inline-flex; align-items: center; background: none;
  border: 0; padding: 0; margin-left: .15rem; cursor: pointer; color: #94a3b8;
  vertical-align: middle; }
.cw-tip svg { width: 14px; height: 14px; }
.cw-tip:hover { color: #64748b; }
.cw-tip::after { content: attr(data-tip); position: absolute; bottom: 135%; left: 50%;
  transform: translateX(-50%); background: #1e293b; color: #fff; padding: .5rem .65rem;
  border-radius: 8px; font-size: .75rem; font-weight: 400; line-height: 1.45;
  width: max-content; max-width: min(250px, 74vw); text-align: left; opacity: 0;
  pointer-events: none; transition: opacity .12s ease; z-index: 40;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18); }
.cw-tip:hover::after, .cw-tip:focus-visible::after, .cw-tip.open::after { opacity: 1; }
.cw-grid2 > .cauth-field:nth-child(2) .cw-tip::after,
.cw-grid3 > .cauth-field:last-child .cw-tip::after { left: auto; right: -4px; transform: none; }
@media (max-width: 640px) { .cw-step-lbl { display: none; } .cw-step-bar { width: 14px; } .cw-grid2 { grid-template-columns: 1fr; } .cw-grid3 { grid-template-columns: 1fr; }
  /* single-column below 640px: fields sit at the left again, so re-center bubbles */
  .cw-grid2 > .cauth-field:nth-child(2) .cw-tip::after,
  .cw-grid3 > .cauth-field:last-child .cw-tip::after { left: 50%; right: auto; transform: translateX(-50%); } }
.cauth-card-wrap { width: 100%; max-width: 440px; animation: cauth-in .5s ease both; }
@keyframes cauth-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cauth-card { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid #e2e8f0; border-radius: 18px; padding: 1.7rem 1.8rem;
  box-shadow: 0 20px 60px -20px rgba(15,23,42,.16); }
.cauth-card-h { text-align: center; margin-bottom: 1.2rem; }
.cauth-card-h h1 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 0 0 .3rem; letter-spacing: -.02em; line-height: 1.15; }
.cauth-card-h p { color: #64748b; margin: 0; font-size: .9rem; }
/* .cauth-hero - the larger header treatment on the consumer register page (Tori,
   2026-07-22). Deliberately opt-in via a body class: the sign-in page keeps the
   standard 1.5rem header. The heading is sized so it breaks after "Your" by itself
   rather than being forced with a <br>, which would still break at that word on a
   narrow phone where it reads badly. */
/* Card + field rhythm measured off Tori's mockup (2026-07-22). The card's 18px
   corner radius appears at 36px in her image, which pins it as a 2x screenshot, so
   these are read off it rather than guessed: ~38px card padding, ~42px inputs, and
   roughly double the current gap between fields. Scoped to .cauth-hero so the
   sign-in page keeps the tighter existing rhythm. */
.cauth-hero .cauth-card { padding: 2.6rem 2.3rem; }
.cauth-hero .cauth-field { margin-bottom: 1.35rem; }
.cauth-hero .cauth-field > label { font-size: .8rem; color: #64748b; margin-bottom: .5rem; }
.cauth-hero .cauth-input { height: 42px; }
/* Heading/subtext block, measured off the 2x mockup (Tori, 2026-07-22): 34px heavy
   heading on ~1.05 leading so the two lines sit close, 17px subtext, and a wide gap
   before the first field so the header reads as its own block rather than as part of
   the form. Weight 800 (not the shell's 700) is what gives it the density she marked. */
.cauth-hero .cauth-card-h { margin-bottom: 2.5rem; }
.cauth-hero .cauth-card-h h1 { font-size: 2.15rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -.025em; margin-bottom: .5rem; }
.cauth-hero .cauth-card-h p { font-size: 1.05rem; line-height: 1.2; color: #64748b; }
.cauth-foot { text-align: center; margin-top: 1.1rem; font-size: .9rem; color: #64748b; }
.cauth-foot a { color: var(--primary); text-decoration: none; font-weight: 500; }
.cauth-foot a:hover { text-decoration: underline; }
.cauth-foot .stack > * { display: block; margin-top: .5rem; }
.cauth-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--primary), var(--brand2), transparent); opacity: .5; }
/* form bits (scoped to beat app.css global input/button rules) */
.cauth .cauth-field { margin-bottom: .85rem; }
.cauth .cauth-field > label { display: block; font-size: .78rem; color: #475569; margin-bottom: .35rem; font-weight: 500; }
.cauth .cauth-input { width: 100%; height: 44px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 0 .9rem; font: inherit; font-size: .95rem; color: #0f172a; box-shadow: none; }
.cauth .cauth-input::placeholder { color: #94a3b8; }
.cauth .cauth-input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.cauth .cauth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cauth .cauth-pw { position: relative; }
/* display:block kills the inline-block descender gap, so the wrapper's height equals
   the input's and the eye's translateY(-50%) centering is exact. */
.cauth .cauth-pw .cauth-input { padding-right: 2.8rem; display: block; }
.cauth .cauth-eye { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: #94a3b8; cursor: pointer; padding: 0; display: flex; width: auto; }
.cauth .cauth-eye:hover { color: #475569; }
.cauth .cauth-eye svg { width: 18px; height: 18px; }
.cauth .cauth-cta { width: 100%; height: 48px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--brand2)); color: var(--primary-fg); font: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--primary) 50%, transparent);
  transition: filter .15s, box-shadow .25s; }
.cauth .cauth-cta:hover { filter: brightness(1.04);
  box-shadow: 0 15px 40px -10px color-mix(in srgb, var(--primary) 60%, transparent); }
.cauth .cauth-cta svg { width: 16px; height: 16px; }
.cauth .cauth-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; color: #475569; margin: .55rem 0; line-height: 1.45; }
.cauth .cauth-check input { margin-top: .12rem; accent-color: var(--primary); width: 15px; height: 15px; flex: 0 0 auto; }
.cauth .cauth-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px;
  padding: .6rem .85rem; font-size: .85rem; margin-bottom: 1rem; }
.cauth .cauth-ferr { color: #b91c1c; font-size: .78rem; margin: .3rem 0 0; }
.cauth .cauth-hint { color: #64748b; font-size: .78rem; margin: .3rem 0 0; }
.cauth .cauth-note { background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); border-radius: 12px;
  padding: .8rem 1rem; font-size: .85rem; color: #475569; margin-top: 1.3rem; text-align: center; }
.cauth .cauth-success { text-align: center; }

/* Google sign-in: the "or" divider + the button, shared by consumer sign-in/sign-up.
   Google's branding terms require their button keep a light surface and their own
   mark, so this one control deliberately does NOT take the tenant's --primary the way
   .cauth-cta does - a white-label repaint must not recolour someone else's logo. */
.cauth .cauth-or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0 .9rem;
  color: #94a3b8; font-size: .78rem; }
.cauth .cauth-or::before, .cauth .cauth-or::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.cauth .cauth-google { display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .72rem 1rem; border: 1px solid #dadce0; border-radius: 10px;
  background: #fff; color: #3c4043; font-size: .92rem; font-weight: 600;
  text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.cauth .cauth-google:hover { background: #f8fafc; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cauth .cauth-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cauth .gsign-as { margin-top: 0; margin-bottom: 1.1rem; display: flex; align-items: center;
  justify-content: center; gap: .5rem; }
.cauth .gsign-as .gsign-g { width: 16px; height: 16px; flex: 0 0 auto; }
.cauth .cauth-success-ico { width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
  display: grid; place-items: center; margin: 0 auto 1.1rem; }
.cauth .cauth-success-ico svg { width: 32px; height: 32px; }
.cauth .cauth-linkbtn { border: 0; background: transparent; color: var(--primary); font: inherit;
  font-weight: 500; cursor: pointer; padding: 0; text-decoration: underline; }

/* --- wizard step content: auto-style Django-rendered forms inside the light card
   so the apply flow (pre-approval / personal / business / credit / phone / eula /
   co-applicant) inherits the look without per-field markup. --- */
.cauth form label { display: block; font-size: .82rem; color: #475569; font-weight: 500; margin: 0 0 .35rem; }
.cauth form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.cauth form select, .cauth form textarea {
  width: 100%; height: 44px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 0 .9rem; font: inherit; font-size: .95rem; color: #0f172a; margin-bottom: 1rem; box-shadow: none; }
.cauth form textarea { height: auto; min-height: 90px; padding: .7rem .9rem; line-height: 1.5; }
.cauth form input:not([type=checkbox]):not([type=radio]):focus, .cauth form select:focus, .cauth form textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.cauth form input[type=checkbox], .cauth form input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; flex: 0 0 auto; }
.cauth form input[type=file] { font-size: .85rem; color: #475569; margin-bottom: 1rem; }
.cauth form label[style*="flex"] { font-weight: 400; color: #475569; font-size: .85rem; line-height: 1.45; margin: .6rem 0; }
.cauth form button[type=submit] { width: 100%; height: 48px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--brand2)); color: var(--primary-fg); font: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; margin-top: .5rem;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--primary) 50%, transparent); transition: filter .15s, box-shadow .25s; }
.cauth form button[type=submit]:hover { filter: brightness(1.04); }
.cauth form button[type=submit]:disabled { opacity: .65; cursor: default; box-shadow: none; }
/* Secondary "outline" button under a primary CTA (e.g. Resend code) — brand-outlined,
   no gradient/glow. Beats the filled `.cauth form button[type=submit]` above. Tori 2026-07-23. */
.cauth form button[type=submit].cauth-resend { height: 46px; margin-top: .9rem; background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--primary) 40%, #dbe3ea); color: var(--primary);
  font-weight: 600; text-decoration: none; box-shadow: none; transition: border-color .15s, background .15s; }
.cauth form button[type=submit].cauth-resend:hover { filter: none; border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #fff); }
.cauth .error { color: #b91c1c; font-size: .8rem; margin: -.6rem 0 1rem; }
.cauth .err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: .6rem .85rem; font-size: .85rem; margin-bottom: 1rem; }
.cauth details { margin-top: 1.2rem; }
.cauth details summary { color: var(--primary); cursor: pointer; font-size: .85rem; }
.cauth .panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; }
.cauth .panel input[type=text] { margin-bottom: 0; }
.cauth table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cauth table th { text-align: left; color: #64748b; font-weight: 600; font-size: .76rem; padding: .3rem 0; }
.cauth table td { padding: .45rem 0; border-top: 1px solid #eef2f6; color: #0f172a; }
/* small inline actions (resend / revoke in the co-applicant table) override the full-width submit */
.cauth table button[type=submit] { width: auto; height: auto; background: transparent; color: var(--primary);
  font: inherit; font-size: .8rem; font-weight: 600; border: 0; cursor: pointer; padding: .2rem .4rem;
  margin: 0; box-shadow: none; }
.cauth table button.del { color: #b91c1c; }
.cauth .cauth-eula { max-height: 240px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: .9rem; font-size: .8rem; color: #475569; line-height: 1.6; margin-bottom: .7rem; background: #f8fafc; }
.cauth .cauth-scores { display: flex; gap: .6rem; flex-wrap: wrap; }
.cauth .cauth-score { flex: 1; min-width: 92px; text-align: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: .8rem .6rem; background: #f8fafc; }
.cauth .cauth-score .lbl { color: #64748b; font-size: .78rem; }
.cauth .cauth-score .num { font-size: 1.7rem; font-weight: 700; color: var(--primary); margin-top: .15rem; }
@media (max-width: 480px) {
  .cauth-card { padding: 1.6rem; }
  .cauth .cauth-row2 { grid-template-columns: 1fr; }
  /* Consumer onboarding wizard — phone tuning (mobile-only; desktop rules untouched). */
  /* Reclaim horizontal space eaten by shell/card padding on small screens. */
  .cauth-main { padding: 1rem .8rem; }
  .cauth-head { padding: 1.1rem 1rem; }
  .cw-card { padding: 1.15rem; }
  /* iOS Safari auto-zooms on focus for any input < 16px — bump to 16px so the page
     doesn't jump/scale (the #1 "looks broken on mobile" cause here). */
  .cauth .cauth-input,
  .cauth form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
  .cauth form select, .cauth form textarea { font-size: 16px; }
  /* Compact step indicator so 6+ steps fit cleanly instead of wrapping awkwardly. */
  .cw-steps { gap: .25rem; margin-bottom: 1.2rem; }
  .cw-step-num { width: 30px; height: 30px; font-size: .8rem; }
  .cw-step-num svg { width: 13px; height: 13px; }
  .cw-step-bar { width: 12px; }
  /* Scale down oversized wizard headings for narrow viewports. */
  .cauth-card-h h1, .cw-head h1 { font-size: 1.55rem; }
  /* Needed explicitly: .cauth-hero .cauth-card-h h1 outranks the rule above, so
     without this the 2.15rem desktop heading would survive on a phone. */
  .cauth-hero .cauth-card-h h1 { font-size: 1.7rem; }
  .cauth-hero .cauth-card-h p { font-size: .95rem; }
  .cauth-hero .cauth-card-h { margin-bottom: 1.6rem; }
  /* Reclaim the roomier desktop padding/rhythm on a phone, where it wastes the
     screen and pushes the submit button below the fold. */
  .cauth-hero .cauth-card { padding: 1.6rem 1.4rem; }
  .cauth-hero .cauth-field { margin-bottom: 1rem; }
}

/* ==========================================================================
   Credit-check RESULTS (onboarding review) — light theme, real report data.
   ========================================================================== */
.cr-score-card { text-align: center; }
.cr-eyebrow { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin: 0 0 .2rem; }
.cr-gauge { position: relative; width: 240px; max-width: 80%; margin: 0 auto; }
.cr-gauge-svg { width: 100%; display: block; }
.cr-gauge-arc { transition: stroke-dasharray 1s ease; }
.cr-gauge-arc.cr-exc { stroke: #047857; } .cr-gauge-arc.cr-good { stroke: #16a34a; }
.cr-gauge-arc.cr-fair { stroke: #d97706; } .cr-gauge-arc.cr-poor { stroke: #dc2626; }
.cr-gauge-arc.cr-na { stroke: #94a3b8; }
.cr-gauge-num { position: absolute; left: 0; right: 0; bottom: 8%; font-size: 2.6rem; font-weight: 800; color: #0f172a; }
.cr-rating { font-weight: 700; font-size: .95rem; margin: .1rem 0 1.1rem; }
.cr-rating.cr-exc, .cr-rating.cr-good { color: #16a34a; }
.cr-rating.cr-fair { color: #d97706; } .cr-rating.cr-poor { color: #dc2626; } .cr-rating.cr-na { color: #94a3b8; }
.cr-bureaus { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.cr-bureau { border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; padding: .55rem 1rem; cursor: pointer; text-align: center; font: inherit; min-width: 92px; }
.cr-bureau.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, #fff); }
.cr-bureau-score { display: block; font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.cr-bureau-name { display: block; font-size: .72rem; color: #64748b; margin-top: .1rem; }
.cr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.1rem; }
.cr-tile { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: .9rem .6rem; text-align: center; }
.cr-tile-num { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.cr-tile-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-top: .15rem; font-weight: 600; }
.cr-cat-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.cr-cat-ico { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); display: grid; place-items: center; flex: 0 0 auto; }
.cr-cat-ico svg { width: 16px; height: 16px; }
.cr-cat-meta { margin-left: auto; font-size: .78rem; color: #64748b; }
.cr-rows { display: flex; flex-direction: column; gap: .5rem; }
.cr-acct { border: 1px solid #e8edf3; border-radius: 12px; overflow: hidden; background: #fbfcfe; }
.cr-acct-head { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.cr-acct-id { flex: 1; min-width: 0; }
.cr-acct-name { margin: 0; font-weight: 600; color: #0f172a; font-size: .9rem; }
.cr-acct-sub { margin: .1rem 0 0; color: #94a3b8; font-size: .76rem; }
.cr-acct-bal { text-align: right; }
.cr-acct-amt { margin: 0; font-weight: 700; color: #0f172a; font-size: .9rem; }
.cr-status { margin: .1rem 0 0; font-size: .74rem; font-weight: 600; }
.cr-status.cr-cur { color: #16a34a; } .cr-status.cr-paid { color: #2563eb; } .cr-status.cr-neg { color: #dc2626; }
.cr-chev { width: 16px; height: 16px; color: #94a3b8; transition: transform .2s; flex: 0 0 auto; }
.cr-acct-head.open .cr-chev { transform: rotate(180deg); }
.cr-acct-detail { padding: 0 .9rem .9rem; border-top: 1px solid #eef2f6; }
.cr-acct-detail[hidden] { display: none; }
.cr-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding-top: .8rem; }
.cr-detail-grid > div span { display: block; font-size: .7rem; color: #94a3b8; }
.cr-detail-grid > div b { font-size: .82rem; color: #0f172a; font-weight: 600; }
.cr-acct-bureaus { margin: .7rem 0 0; font-size: .74rem; color: #64748b; }
.cr-health { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.cr-health-stat { text-align: center; }
.cr-health-num { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.cr-health-num.cr-pos { color: #16a34a; }
.cr-debt-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 1.1rem 0 .8rem; background: #eef2f6; }
.cr-debt-seg { height: 100%; }
.cr-seg1 { background: #16a34a; } .cr-seg2 { background: #3b82f6; } .cr-seg3 { background: #a855f7; } .cr-seg4 { background: #f59e0b; }
.cr-debt-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.cr-legend-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #64748b; }
.cr-legend-item b { color: #0f172a; }
.cr-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
@media (max-width: 560px) {
  .cr-tiles { grid-template-columns: repeat(2, 1fr); }
  .cr-detail-grid { grid-template-columns: 1fr 1fr; }
  /* Action row: Back + Continue share the top line; the PDF link drops to its own
     full-width line instead of shoving Continue off the viewport. */
  .cw-actions { flex-wrap: wrap; }
  .cw-actions .cdash-download { order: 3; flex: 1 1 100%; justify-content: center; }
  /* Category header: let the "N active · $X balance" meta wrap under the title. */
  .cr-cat-head { flex-wrap: wrap; }
  /* Credit Health: three side-by-side stats can't shrink below their number widths
     on a phone, so stack them instead of letting the card overflow the viewport. */
  .cr-health { grid-template-columns: 1fr; gap: .9rem; }
}

/* EULA / Agreement card with scroll-to-bottom gate */
.cr-agree { background: rgba(255,255,255,.92); border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 14px 40px -20px rgba(15,23,42,.14); overflow: hidden; margin-bottom: 1.1rem; }
.cr-agree-head { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid #eef2f6; }
.cr-agree-ico { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 20%, #fff); }
.cr-agree-ico svg { width: 20px; height: 20px; }
.cr-agree-title { font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.cr-agree-sub { font-size: .8rem; color: #64748b; margin-top: .1rem; }
.cr-agree-scroll { position: relative; max-height: 44vh; overflow-y: auto; background: #fff; padding: 1.4rem; }
.cr-agree-doc { font-size: .82rem; color: #374151; line-height: 1.6; }
.cr-doc-h { text-align: center; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #e5e7eb; }
.cr-doc-h h3 { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.cr-doc-tag { font-size: .8rem; font-weight: 600; color: var(--primary); margin: .25rem 0 0; }
.cr-agree-doc section { margin-bottom: .9rem; }
.cr-agree-doc h4 { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: #111827; margin: 0 0 .25rem; }
.cr-agree-doc section p { margin: 0; padding-left: .9rem; color: #4b5563; }
.cr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; }
.cr-poa { background: color-mix(in srgb, var(--primary) 7%, #fff); border: 1px solid color-mix(in srgb, var(--primary) 18%, #fff);
  border-radius: 10px; padding: .9rem 1rem; margin: 1rem 0; }
.cr-poa h4 svg { width: 15px; height: 15px; color: var(--primary); }
.cr-poa > div { margin-top: .5rem; }
.cr-poa strong { display: block; color: #111827; font-size: .82rem; }
.cr-poa p { margin: .1rem 0 0; color: #4b5563; }
.cr-contact { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px; padding: .9rem 1rem; margin-top: 1.2rem; }
.cr-contact h4 { font-size: .82rem; font-weight: 700; color: #111827; margin: 0 0 .4rem; }
.cr-contact p { margin: 0; color: #4b5563; }
.cr-contact-name { font-weight: 600; color: #111827 !important; }
.cr-doc-foot { text-align: center; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid #e5e7eb; }
.cr-foot-bold { font-size: .78rem; font-weight: 700; color: #111827; margin: 0 0 .4rem; }
.cr-foot-fine { font-size: .68rem; font-style: italic; color: #9ca3af; margin: 0; }
.cr-agree-chevron { position: sticky; bottom: .4rem; left: 50%; transform: translateX(-50%); display: flex;
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-fg);
  align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--primary) 60%, transparent);
  animation: cr-bounce 1.2s infinite; }
.cr-agree-chevron svg { width: 16px; height: 16px; }
@keyframes cr-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.cr-agree-foot { padding: 1.2rem 1.4rem; border-top: 1px solid #eef2f6; background: #fff; }
.cr-agree-warn { color: #d97706; font-size: .8rem; margin: .2rem 0 .9rem; }
.cr-agree-foot .cw-actions { margin-top: 0; }
.cr-agree-foot button[type=submit]:disabled { background: #eef2f6; color: #9aa6b6; box-shadow: none; cursor: not-allowed; }

/* "Reading your report" loading overlay (shown during the upload parse) */
.cr-loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem; text-align: center;
  background: rgba(255,255,255,.94); backdrop-filter: blur(4px); }
.cr-loading[hidden] { display: none; }
.cr-loading-ring { width: 76px; height: 76px; position: relative; }
.cr-loading-ring svg { width: 100%; height: 100%; }
.cr-loading-ring .cr-spin { transform-origin: center; animation: cr-spin 1s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-loading h2 { font-size: 1.25rem; color: #0f172a; margin: 0; font-weight: 700; }
.cr-loading p { color: #64748b; margin: .25rem 0 0; font-size: .9rem; }
.cr-loading-steps { display: flex; gap: .5rem; margin-top: .4rem; }
.cr-loading-steps span { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 30%, #e2e8f0);
  animation: cr-pulse 1.2s ease-in-out infinite; }
.cr-loading-steps span:nth-child(2) { animation-delay: .2s; }
.cr-loading-steps span:nth-child(3) { animation-delay: .4s; }
@keyframes cr-pulse { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); background: var(--primary); } }

/* ============================================================================
   Consumer portal — left-sidebar shell (.pdash) + dashboard (.cdash). Light,
   tenant-branded via --primary. Semantic status colors are fixed.
   ============================================================================ */
.pdash { background: #f6f7f8; color: var(--card-fg); }
.pdash-shell { display: flex; min-height: 100vh; }
#pdash-side-toggle { position: absolute; }

.pdash-side {
  width: 258px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.pdash-brand { display: flex; align-items: center; height: 60px; padding: 0 1.25rem;
  font-weight: 700; font-size: 1.05rem; color: var(--card-fg); text-decoration: none;
  border-bottom: 1px solid var(--border); }
.pdash-brand img { height: 46px; max-width: 200px; object-fit: contain; }
.pdash-nav { flex: 1; overflow-y: auto; padding: .85rem .7rem; }
.pdash-group { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-fg); padding: .9rem .6rem .4rem; }
.pdash-group:first-child { padding-top: .2rem; }
/* Staging-only demo wipe (V, 2026-07-15): sits directly above Sign Out and must read as
   destructive, never as a CTA. It's a <button type=submit>, so it matches the global
   `.btn, button[type=submit]` primary-button rule - every property that rule sets is
   overridden here explicitly rather than relying on selector order. Not rendered in prod. */
.pdash-demo-wipe { margin: 0; }
.pdash-demo-wipe button.pdash-link { width: 100%; margin: 0; padding: .56rem .55rem;
  background: transparent; color: #e5534b; border: 0; border-radius: 9px;
  font: inherit; font-size: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.pdash-demo-wipe button.pdash-link:hover { background: #e5534b18; color: #e5534b;
  filter: none; }
.pdash-demo-wipe .pdash-link-label { font-size: .82rem; }
.pdash-link { display: flex; align-items: center; gap: .6rem; padding: .56rem .55rem; border-radius: 9px;
  color: #444a54; font-size: .89rem; font-weight: 500; text-decoration: none; position: relative; }
.pdash-link:hover { background: #f2f3f5; }
.pdash-link.active { background: var(--primary-soft); color: var(--card-fg); font-weight: 600; }
.pdash-link.active .pdash-ico-wrap { color: var(--card-fg); }
.pdash-ico-wrap { display: inline-flex; color: #6b7280; }
.pdash-ico-wrap svg { width: 18px; height: 18px; }
/* red unread count riding the Messenger nav icon (Tori 2026-07-22) */
.pdash-link { position: relative; }
.pdash-nav-badge { position: absolute; top: .12rem; left: 1.15rem; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .6rem;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--card, #fff); z-index: 1; }
.pdash-link-label { flex: 1; white-space: nowrap; }
.pdash-link.soon { color: #9aa1ab; cursor: default; }
.pdash-soon { font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: #fef3c7; color: #b45309; border: 1px solid #fde68a; border-radius: 5px; padding: .12rem .3rem; }
.pdash-side-foot { padding: .7rem; border-top: 1px solid var(--border); }

.pdash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdash-top { height: 60px; display: flex; align-items: center; gap: .85rem; padding: 0 1.4rem;
  background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.pdash-title { font-size: 1.15rem; font-weight: 700; margin: 0; flex: 1; }
.pdash-burger { display: none; cursor: pointer; color: #4b5563; }
.pdash-burger svg { width: 22px; height: 22px; }
.pdash-top-right { display: flex; align-items: center; gap: .3rem; }
.pdash-ico { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 9px; color: #5b626d; cursor: pointer; }
.pdash-ico:hover { background: #f2f3f5; }
.pdash-ico svg { width: 19px; height: 19px; }
html[data-theme="light"] .pdash-ico .ic-sun, html[data-theme="dark"] .pdash-ico .ic-moon { display: none; }
.pdash-menu { position: relative; }
.pdash-menu > summary { list-style: none; }
.pdash-menu > summary::-webkit-details-marker { display: none; }
.pdash-menu-pop { position: absolute; right: 0; top: 46px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); min-width: 210px; padding: .4rem; z-index: 40; }
.pdash-menu-pop .hd { font-size: .76rem; color: var(--muted-fg); padding: .5rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; word-break: break-all; }
.pdash-menu-pop a { display: block; padding: .5rem .6rem; border-radius: 8px; color: var(--card-fg); text-decoration: none; font-size: .88rem; }
.pdash-menu-pop a:hover { background: #f2f3f5; }
.pdash-menu-pop a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.pdash-menu-pop a.sep { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .55rem; border-radius: 0 0 8px 8px; }
.pdash-content { padding: 1.6rem; max-width: 1320px; width: 100%; margin: 0 auto; }
.pdash-scrim { display: none; }

/* DESKTOP: the burger collapses the sidebar (Tori's 2026-07-22 screenshot - it was
   mobile-only before, so there was no way to reclaim the 258px on a laptop).
   Scoped to min-width so it can't fight the mobile drawer below, where the SAME
   checkbox means the opposite (checked = drawer open). Same control, correct default
   per breakpoint: on desktop the menu starts open, on mobile it starts closed. */
@media (min-width: 921px) {
  .pdash-burger { display: inline-flex; }
  .pdash-side { transition: width .18s ease; }
  #pdash-side-toggle:checked ~ .pdash-shell .pdash-side {
    width: 0; overflow: hidden; border-right: 0; }
}

@media (max-width: 920px) {
  .pdash-side { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  #pdash-side-toggle:checked ~ .pdash-shell .pdash-side { transform: translateX(0); }
  #pdash-side-toggle:checked ~ .pdash-shell .pdash-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; }
  .pdash-burger { display: inline-flex; }
}

/* ── dashboard content ─────────────────────────────────────── */
.muted-s { color: var(--muted-fg); font-size: .8rem; }
.cdash-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.3rem; margin-bottom: 1.1rem; }
.cdash-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 .15rem; }
.cdash-sub { color: var(--muted-fg); font-size: .85rem; margin: .1rem 0 1rem; }
.cdash-btn { display: inline-block; background: var(--primary); color: var(--primary-fg); font-weight: 600;
  padding: .6rem 1.2rem; border-radius: 9px; text-decoration: none; font-size: .9rem; }

.cdash-empty { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 3rem 1.5rem; text-align: center; }
.cdash-empty-ico { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; color: var(--primary); }
.cdash-empty-ico svg { width: 26px; height: 26px; }
.cdash-empty h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.cdash-empty p { color: var(--muted-fg); margin: 0 0 1.2rem; }

/* KPI strip */
.cdash-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.1rem; }
.cdash-kpi { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.15rem;
  display: flex; flex-direction: column; gap: .15rem; }
.cdash-kpi .k-t { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); }
.cdash-kpi .k-v { font-size: 1.7rem; font-weight: 700; margin-top: .2rem; }
.cdash-kpi .k-s { font-size: .76rem; color: var(--muted-fg); }

/* overview + side (renders ABOVE the KPI strip since 2026-07-21) */
.cdash-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; align-items: start; }
.cdash-overview { margin-bottom: 0; }
.cdash-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--border); margin: .9rem 0 1rem; }
.cdash-tab { background: none; border: none; cursor: pointer; padding: 0 0 .65rem; font-size: .9rem; font-weight: 600;
  color: var(--muted-fg); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: .45rem; }
.cdash-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cdash-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cdash-blogo { height: 20px; width: auto; max-width: 130px; object-fit: contain; display: inline-block; }
/* Experian + TransUnion wordmarks have smaller text than the bold EQUIFAX one,
   so give them more height to read at the same visual weight. */
.cdash-blogo.blogo-equifax { height: 16px; }
.cdash-blogo.blogo-experian { height: 22px; }
.cdash-blogo.blogo-transunion { height: 26px; }
.bd-experian { background: #1d4f91; } .bd-equifax { background: #9b1b30; } .bd-transunion { background: #00a4bd; }
.cdash-panel.hidden { display: none; }
.cdash-score-row { display: flex; justify-content: space-between; align-items: flex-start; }
.cdash-score { font-size: 3.1rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cdash-score-sub { color: var(--muted-fg); font-size: .8rem; margin-top: .4rem; }
.cdash-score-right { text-align: right; display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.cdash-fico { font-size: .74rem; color: var(--muted-fg); }
.cdash-rating { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: .25rem .55rem; border-radius: 999px; border: 1px solid; }
.cdash-rdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.r-exc, .r-exceptional, .r-good { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.r-fair { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.r-poor { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.r-na { color: var(--muted-fg); background: var(--muted); border-color: var(--border); }
.cdash-score-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.cdash-delta { font-size: .76rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; }
.cdash-delta.up { color: #15803d; background: #dcfce7; } .cdash-delta.down { color: #b91c1c; background: #fee2e2; }
.cdash-refresh { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600;
  color: var(--card-fg); border: 1px solid var(--border); border-radius: 8px; padding: .42rem .8rem; text-decoration: none; }
.cdash-refresh:hover { border-color: var(--primary); color: var(--primary); }
.cdash-refresh svg { width: 15px; height: 15px; }

.cdash-chart { margin-top: 1.3rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.cdash-chart-h { font-size: .92rem; font-weight: 700; margin-bottom: .6rem; }
.cdash-svg { width: 100%; height: 210px; overflow: visible; }
.cdash-legend { display: flex; justify-content: center; gap: 1.6rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.cdash-leg { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted-fg); }
.cdash-leg b { color: var(--card-fg); }
.cdash-chart-note { text-align: center; color: var(--muted-fg); font-size: .78rem; margin: .7rem 0 0; }

.cdash-side { display: flex; flex-direction: column; gap: 1rem; }
.cdash-metric { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .1rem; }
.cdash-metric .m-t { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); }
.cdash-metric .m-v { font-size: 1.55rem; font-weight: 700; }
.cdash-metric .m-s { font-size: .76rem; color: var(--muted-fg); }
.cdash-alerts { margin-bottom: 0; }
.cdash-alerts .m-t { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); }
.cdash-alert-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .7rem; }
.cdash-alert { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; }
.a-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }
.a-warn { background: #f59e0b; } .a-info { background: #3b82f6; } .a-ok { background: #16a34a; }

/* debt summary */
.cdash-debt { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.cdash-donut { width: 150px; height: 150px; flex-shrink: 0; }
.cdash-donut .d-cap { font-size: 8px; fill: var(--muted-fg); font-weight: 600; letter-spacing: .04em; }
.cdash-donut .d-tot { font-size: 15px; fill: var(--card-fg); font-weight: 800; }
.cdash-debt-list { flex: 1; min-width: 260px; }
.cdash-debt-row { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.cdash-debt-row:last-child { border-bottom: none; }
.cdash-sq { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cdash-debt-row .d-label { flex: 1; font-size: .88rem; font-weight: 500; }
.cdash-debt-row .d-amt { font-weight: 700; font-size: .9rem; }

/* accounts */
.cdash-accounts-head { margin: 1.6rem 0 1rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.cdash-accounts-head h2 { margin: 0; font-size: 1.15rem; }
.cdash-download { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .5rem .8rem; border: 1px solid var(--border, #2a3340); border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--primary, #fab505); text-decoration: none; white-space: nowrap; }
.cdash-download:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cdash-download svg { width: 16px; height: 16px; }
.cdash-acct-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.cdash-acct-h h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.cdash-usage { margin: .8rem 0 1rem; }
.u-pct { font-size: 1.5rem; font-weight: 800; } .u-pct span { font-size: .85rem; font-weight: 400; color: var(--muted-fg); }
.u-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted-fg); margin: .4rem 0 .35rem; }
.u-bar { height: 9px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.u-fill { height: 100%; background: #16a34a; border-radius: 999px; } .u-fill.hot { background: #dc2626; }
.cdash-acct { border-top: 1px solid var(--border); padding: .25rem 0; }
.cdash-acct summary { list-style: none; cursor: pointer; padding: .7rem 0 .2rem; }
.cdash-acct summary::-webkit-details-marker { display: none; }
.cdash-acct summary > .a-name { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; }
.cdash-acct summary { display: flex; justify-content: space-between; align-items: center; }
.a-right { display: flex; align-items: center; gap: .5rem; }
/* per-row identifiers so same-lender accounts don't read as duplicates */
.a-tail { color: var(--muted-fg); font-weight: 600; font-size: .78rem; letter-spacing: .04em; }
.a-bal { font-weight: 600; font-size: .82rem; color: var(--card-fg); }
.a-chev { width: 18px; height: 18px; color: var(--muted-fg); transition: transform .15s; }
.cdash-acct[open] .a-chev { transform: rotate(180deg); }
.cdash-chip { font-size: .6rem; font-weight: 800; text-transform: uppercase; padding: .12rem .4rem; border-radius: 5px; }
.cdash-chip.closed { color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; }
.a-quick { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted-fg); padding: .1rem 0 .6rem; }
.a-quick b { color: var(--card-fg); }
.a-detail { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; background: #f7f8f9; border-radius: 10px; padding: .9rem 1rem; margin-bottom: .5rem; }
.a-detail > div { display: flex; flex-direction: column; }
.a-detail span { font-size: .72rem; color: var(--muted-fg); } .a-detail b { font-size: .86rem; }
.s-cur { color: #15803d; } .s-paid { color: var(--muted-fg); } .s-neg { color: #b91c1c; }

/* score ingredients */
.cdash-factor { border-top: 1px solid var(--border); padding: .55rem 0; }
.cdash-factor:first-of-type { border-top: none; }
.cdash-factor summary { list-style: none; cursor: pointer; }
.cdash-factor summary::-webkit-details-marker { display: none; }
.f-head { display: flex; justify-content: space-between; align-items: center; }
.f-label { font-size: .9rem; font-weight: 600; }
.f-right { display: flex; align-items: center; gap: .6rem; }
.f-bar { height: 6px; background: var(--muted); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.f-fill { height: 100%; border-radius: 999px; }
.f-fill.s-exceptional, .f-fill.s-good { background: #16a34a; } .f-fill.s-fair { background: #d97706; } .f-fill.s-poor { background: #dc2626; }
.f-body { padding: .9rem 0 .4rem; }
.f-status p { margin: .35rem 0 0; font-size: .88rem; }
.f-tips { margin-top: .9rem; }
.f-tip { display: flex; align-items: flex-start; gap: .5rem; font-size: .83rem; color: #4b5563; margin-top: .45rem; }
.f-tip svg { width: 15px; height: 15px; color: #16a34a; flex-shrink: 0; margin-top: .1rem; }

@media (max-width: 980px) {
  .cdash-kpis { grid-template-columns: repeat(2, 1fr); }
  .cdash-row { grid-template-columns: 1fr; }
}
/* phone pass: tighter cards, smaller score, tabs/legend that fit the viewport */
@media (max-width: 640px) {
  .cdash-card { padding: 1rem 1.05rem; }
  .cdash-kpis { gap: .7rem; }
  .cdash-kpi { padding: .85rem .9rem; }
  .cdash-kpi .k-v { font-size: 1.4rem; }
  .cdash-tabs { gap: .6rem; justify-content: space-between; }
  .cdash-tab { padding-bottom: .5rem; }
  .cdash-blogo { max-width: 96px; }
  .cdash-blogo.blogo-transunion { height: 26px; }
  .cdash-score { font-size: 2.5rem; }
  .cdash-svg { height: 150px; }
  .cdash-legend { gap: .7rem 1rem; flex-wrap: wrap; }
  .cdash-score-foot { gap: .5rem; }
  .cdash-refresh { margin-left: 0; }
}


/* ============================================================================
   One-time access-fee / unlock page — compact, in the .cauth registration style.
   ============================================================================ */
.cauth .cfee-card { text-align: left; }
.cauth .cfee-card + .cfee-card { margin-top: 1rem; }
.cfee-shield { width: 38px; height: 38px; margin: 0 auto .6rem; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cfee-shield svg { width: 20px; height: 20px; }
.cauth .cfee-card .cauth-card-h { text-align: center; margin-bottom: .6rem; }
.cfee-price { text-align: center; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: .2rem 0 .9rem; color: #0f172a; }
.cfee-price span { font-size: .8rem; font-weight: 500; color: var(--muted-fg); margin-left: .3rem; }

.cfee-incl { background: #f4f6f8; border: 1px solid #eef0f3; border-radius: 12px; padding: .7rem .9rem; margin-bottom: .9rem; }
.cfee-incl-h { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: .35rem; }
.cfee-incl-item { display: flex; align-items: center; gap: .6rem; padding: .28rem 0; font-size: .88rem; font-weight: 600; color: #1f2733; }
.cfee-incl-ic { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cfee-incl-ic svg { width: 13px; height: 13px; }

.cfee-btn { width: 100%; margin-top: .9rem; padding: .75rem 1rem; border: none; border-radius: 10px;
  background: var(--primary); color: var(--primary-fg); font-size: .92rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.cfee-btn svg { width: 16px; height: 16px; }
/* crisp disabled state: solid muted gray, not a washed-out tint of the brand color */
.cfee-btn:disabled { background: #e9eef3; color: #97a3b2; opacity: 1; cursor: not-allowed; }
.cfee-btn:not(:disabled):hover { filter: brightness(.96); }

.cfee-pay-h { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; font-weight: 700; margin-bottom: 1rem; }
.cfee-pay-h svg { width: 19px; height: 19px; color: var(--primary); }
.cauth .cfee-pay label { font-size: .82rem; font-weight: 600; color: #475569; }
.cfee-cardno { position: relative; display: block; }
.cfee-cardno svg { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted-fg); pointer-events: none; }
.cfee-cardno input { padding-right: 2.3rem; }
.cfee-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; }
.cfee-secure { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted-fg); font-size: .76rem; margin: .9rem 0 0; }
.cfee-secure svg { width: 14px; height: 14px; color: #16a34a; }

/* widget info icon + hover/focus tooltip (credit-overview spec §1) */
.cdash-info { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0; border: none; background: none; color: #9aa3af; cursor: help;
  vertical-align: middle; margin-left: .15rem; }
.cdash-info svg { width: 15px; height: 15px; }
.cdash-info:hover { color: var(--card-fg); }
.cdash-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: 230px; max-width: 70vw; background: #fff; border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: .55rem .7rem; font-size: .73rem; font-weight: 400;
  line-height: 1.45; color: var(--card-fg); text-align: left; text-transform: none; letter-spacing: normal;
  white-space: normal; opacity: 0; visibility: hidden; transition: opacity .14s; z-index: 60; pointer-events: none; }
.cdash-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff; }
.cdash-info:hover .cdash-tip, .cdash-info:focus .cdash-tip, .cdash-info:focus-visible .cdash-tip { opacity: 1; visibility: visible; }
.cdash-next { font-size: .72rem; color: var(--muted-fg); margin-top: .15rem; }

/* ============================================================================
   Applications list page (.apps-*) — Business/Personal tabs, month-grouped rows.
   ============================================================================ */
.apps-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1rem; flex-wrap: wrap; }
.apps-head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.apps-head-right { display: flex; align-items: center; gap: .8rem; }
.apps-new { display: inline-flex; align-items: center; gap: .45rem; background: var(--primary); color: var(--primary-fg);
  border: none; border-radius: 9px; padding: .5rem .9rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.apps-new:hover { filter: brightness(.96); }
.apps-new svg { width: 15px; height: 15px; }
.apps-refresh { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted-fg); }
.apps-refresh b { color: var(--card-fg); } .apps-refresh svg { width: 15px; height: 15px; }

.apps-tabs { display: inline-flex; gap: .25rem; background: #eef0f2; border: 1px solid var(--border); border-radius: 10px; padding: .25rem; margin-bottom: 1rem; }
.apps-tab { display: inline-flex; align-items: center; gap: .45rem; background: none; border: none; border-radius: 7px;
  padding: .42rem .9rem; font-size: .85rem; font-weight: 600; color: var(--muted-fg); cursor: pointer; }
.apps-tab svg { width: 15px; height: 15px; }
.apps-tab.active { background: #fff; color: var(--card-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.apps-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 800; }

.apps-card { padding: 0; overflow: hidden; }
.apps-table { width: 100%; }
.apps-trow { display: grid; grid-template-columns: 2fr 1.4fr .8fr .9fr; align-items: center; gap: 1rem;
  padding: 1rem 1.3rem; border-top: 1px solid var(--border); }
.apps-table.no-biz .apps-trow { grid-template-columns: 2fr .8fr .9fr; }
.apps-thead { border-top: none; background: #f4f6f8; padding-top: .7rem; padding-bottom: .7rem; }
.apps-thead span { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); }
.apps-month { background: #fafbfc; border-top: 1px solid var(--border); padding: .5rem 1.3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--muted-fg); }
.apps-app { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.apps-view { background: var(--primary); color: var(--primary-fg); text-decoration: none; font-size: .78rem; font-weight: 700;
  padding: .42rem .8rem; border-radius: 8px; white-space: nowrap; }
.apps-view:hover { filter: brightness(.96); }
.apps-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--muted-fg); }
.apps-new-badge { background: #16a34a; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .03em; padding: .12rem .4rem; border-radius: 5px; }
.apps-biz { display: flex; flex-direction: column; line-height: 1.3; }
.apps-biz b { font-size: .88rem; } .apps-biz em { font-style: normal; font-size: .74rem; color: var(--muted-fg); }
.apps-date { font-size: .86rem; }
.apps-status { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .28rem .6rem; border-radius: 999px; border: 1px solid; }
.s-complete { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.s-pending { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.s-ongoing { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.apps-none { padding: 2.4rem 1.3rem; text-align: center; color: var(--muted-fg); border-top: 1px solid var(--border); }
.apps-foot { font-size: .78rem; color: var(--muted-fg); margin: .7rem 0 1.4rem; }

/* New application modal */
.apps-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.apps-modal[hidden] { display: none; }
.apps-modal-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
/* Compacted 2026-07-22 (Tori: "more compact modal, slimmer buttons"). Every value
   below is a reduction of the previous one - no layout or copy changed, just density. */
.apps-modal-card { position: relative; background: #fff; border-radius: 14px; width: 100%; max-width: 400px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.apps-modal-head { display: flex; align-items: center; justify-content: space-between; }
.apps-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.apps-modal-x { background: none; border: none; color: var(--muted-fg); cursor: pointer; padding: .2rem; }
.apps-modal-x svg { width: 18px; height: 18px; }
.apps-opt { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .75rem; margin-top: .65rem; }
.apps-opt-h { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .85rem; margin-bottom: .5rem; }
.apps-opt-h svg { width: 15px; height: 15px; color: var(--primary); }
.apps-opt select { width: 100%; margin-bottom: .55rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #f7f8f9; font-size: .84rem; }
/* Slimmer action buttons inside the modal (the global .btn rule is chunky for a dialog). */
.apps-modal-card .cfee-btn, .apps-modal-card button[type=submit], .apps-modal-card .btn {
  height: 32px; padding: 0 .8rem; font-size: .82rem; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 0; }
.apps-opt .cfee-btn { margin-top: 0; }
.apps-decline { background: none; border: none; padding: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: underline; cursor: pointer; }

@media (max-width: 760px) {
  .apps-trow, .apps-table.no-biz .apps-trow { grid-template-columns: 1fr; gap: .4rem; }
  .apps-thead { display: none; }
}

/* ============================================================================
   Application detail — waves experience (.aw-*). Demo on staging; the real
   engine view reuses .apps-* + .cdash-card. Brand --primary for active/selected.
   ============================================================================ */
.aw-back { display: inline-flex; align-items: center; gap: .4rem; color: #4b5563; text-decoration: none; font-size: .88rem; font-weight: 600; margin-bottom: 1rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.aw-back:hover { border-color: var(--primary); color: var(--primary); }
.aw-back svg { width: 16px; height: 16px; }
.aw-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.aw-ref { margin: 0; font-size: 1.2rem; font-weight: 800; }
.aw-howbtn { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: .4rem .7rem; cursor: pointer; color: var(--card-fg); }
.aw-howbtn svg { width: 15px; height: 15px; }
.aw-howpop { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.12); padding: 1rem 1.1rem; max-width: 360px; margin-bottom: 1rem; }
.aw-howpop h4 { margin: 0 0 .4rem; font-size: .92rem; } .aw-howpop p { margin: 0; font-size: .82rem; color: var(--muted-fg); line-height: 1.5; }
.aw-summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.aw-badge { font-size: .76rem; font-weight: 700; padding: .28rem .6rem; border-radius: 999px; border: 1px solid; }

/* Awaiting-co-applicant screen (Tori's design). Shown while this application's co-applicant
   hasn't finished - routing is gated anyway (assert_coapplicant_ready), so this states it
   plainly instead of offering controls that would be refused. Lives inside #aw-live, which
   polls every 7s while coapp_awaiting, so their progress appears without a refresh. */
.aw-head-actions { margin-left: auto; display: flex; gap: .5rem; }
.aw-viewcoapp { display: inline-flex; align-items: center; gap: .4rem; width: auto;
  padding: .42rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  color: var(--fg); font-family: inherit; }
.aw-viewcoapp:hover { background: var(--hover); filter: none; }
.aw-viewcoapp svg { width: 15px; height: 15px; }

.aw-awaiting { text-align: center; padding: 2rem 1.2rem; margin-bottom: 1.2rem;
  border: 1px solid rgba(250,181,5,.35); border-radius: 12px; background: rgba(250,181,5,.06); }
.aw-awaiting h3 { margin: .9rem 0 .4rem; font-size: 1.05rem; font-weight: 800; }
.aw-awaiting p { margin: 0 auto; max-width: 46ch; font-size: .88rem; color: var(--muted-fg); }
.aw-awaiting-spin { width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(250,181,5,.25); border-top-color: #fab505;
  animation: btn-spin .9s linear infinite; }
.aw-awaiting form { margin: 1.1rem 0 0; }
.aw-awaiting button.aw-awaiting-skip { width: auto; margin: 0; padding: .55rem 1.1rem;
  font-size: .84rem; font-weight: 600; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  font-family: inherit; box-shadow: none; }
.aw-awaiting button.aw-awaiting-skip:hover { background: var(--hover); filter: none; }
.b-app { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.b-dec { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.b-proc { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.b-amt { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.aw-coview { display: inline-flex; align-items: center; gap: .4rem; background: var(--primary); color: var(--primary-fg); border: none; border-radius: 8px; padding: .42rem .8rem; font-size: .8rem; font-weight: 700; cursor: pointer; }
.aw-coview svg { width: 15px; height: 15px; }

/* stepper */
.aw-stepper { display: flex; align-items: stretch; gap: 0; margin-bottom: 1rem; }
.aw-step { flex: 1; display: flex; align-items: center; gap: .65rem; border: 2px solid var(--border); border-radius: 13px; padding: .8rem .9rem; background: #fff; }
.aw-step.selecting, .aw-step.processing { border-color: var(--primary); background: var(--primary-soft); }
.aw-step.results { border-color: #bbf7d0; background: #f0fdf4; cursor: pointer; }
.aw-step.locked { border-color: var(--border); background: #f6f7f8; opacity: .6; }
.aw-step-dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; background: var(--muted); color: var(--muted-fg); }
.aw-step.selecting .aw-step-dot, .aw-step.processing .aw-step-dot { background: var(--primary); color: var(--primary-fg); }
.aw-step.results .aw-step-dot { background: #16a34a; color: #fff; }
.aw-step-dot svg { width: 15px; height: 15px; }
.aw-step-t { min-width: 0; line-height: 1.25; } .aw-step-t b { font-size: .88rem; display: block; } .aw-step-t span { font-size: .72rem; color: var(--muted-fg); }
.aw-step.results .aw-step-t b { color: #15803d; }
.aw-step-chev { width: 16px; height: 16px; margin-left: auto; color: #16a34a; transition: transform .15s; flex-shrink: 0; }
.aw-step-chev.open { transform: rotate(180deg); }
.aw-conn { width: 22px; height: 2px; background: var(--border); align-self: center; flex-shrink: 0; }
.aw-conn.on { background: #4ade80; }

/* active wave */
.aw-wave { border: 2px solid var(--primary); border-radius: 14px; overflow: hidden; margin-bottom: .9rem; background: #fff; }
/* processing = the spec's blue "applying live" palette (was amber), 2026-07-22 */
.aw-wave.processing { border-color: #bfdbfe; } .aw-wave.results { border-color: #bbf7d0; }
.aw-wave-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; background: var(--primary-soft); }
.aw-wave-head.processing { background: rgba(239,246,255,.6); } .aw-wave-head.results { background: #f0fdf4; }
.aw-wave-num { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--primary); color: var(--primary-fg); }
.aw-wave-head.processing .aw-wave-num { background: #2563eb; color: #fff; } .aw-wave-head.results .aw-wave-num { background: #16a34a; color: #fff; }
.aw-wave-num svg { width: 17px; height: 17px; }
.aw-wave-head h3 { margin: 0; font-size: 1rem; font-weight: 700; } .aw-wave-head p { margin: .1rem 0 0; font-size: .76rem; color: var(--muted-fg); }
.aw-wave-tag { font-size: .76rem; font-weight: 400; color: var(--muted-fg); }
.aw-wave-tag.processing { color: #1d4ed8; } .aw-wave-tag.results { color: #15803d; }

/* selecting */
.aw-sel-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; background: #f0f7ff; border-top: 1px solid var(--border); }
.aw-sel-top b { font-size: .9rem; } .aw-sel-top p { margin: .15rem 0 0; font-size: .76rem; color: var(--muted-fg); }
.aw-selall { background: none; border: none; color: var(--primary); font-size: .8rem; font-weight: 700; cursor: pointer; }
.aw-lrow { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.2rem; border-top: 1px solid var(--border); cursor: pointer; }
.aw-lrow.on { background: #f0fdf4; } .aw-lrow:hover { background: #f9fafb; } .aw-lrow.on:hover { background: #ecfdf3; }
.aw-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd0d8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.aw-check.on { background: var(--primary); border-color: var(--primary); }
.aw-check svg { width: 13px; height: 13px; }
.aw-lname { flex: 1; font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.aw-lbadges { display: flex; gap: .5rem; flex-shrink: 0; }
.aw-viewlender { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 999px; padding: .12rem .5rem; text-decoration: none; }
.aw-viewlender svg { width: 11px; height: 11px; }
.aw-pull { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .18rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.aw-pull.soft { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; } .aw-pull.hard { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.aw-cat { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .18rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.cat-prime { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; } .cat-near { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.cat-mca { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; } .cat-rbf { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
.cat-bnpl { color: #0891b2; background: #ecfeff; border-color: #a5f3fc; } .cat-sba { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
.aw-sel-foot { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; background: #f7f8f9; border-top: 1px solid var(--border); }
.aw-sel-foot span { font-size: .78rem; color: var(--muted-fg); }
.aw-apply { display: inline-flex; align-items: center; gap: .45rem; background: var(--primary); color: var(--primary-fg); border: none; border-radius: 9px; padding: .6rem 1rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.aw-apply:disabled { opacity: .5; cursor: not-allowed; } .aw-apply svg { width: 15px; height: 15px; }

/* processing console */
.aw-proc { padding: 1.4rem 1.2rem; }
.aw-proc-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.aw-proc-head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem .8rem; }
.aw-bot { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aw-bot svg { width: 19px; height: 19px; }
.aw-bot-t { font-size: .64rem; font-weight: 800; letter-spacing: .07em; color: var(--muted-fg); }
.aw-bot-l { font-size: .92rem; font-weight: 700; }
.aw-proc-pct { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--primary); }
.aw-proc-bar { height: 3px; background: var(--muted); } .aw-proc-bar div { height: 100%; background: var(--primary); transition: width .4s; }
.aw-proc-lines { padding: 1rem; display: flex; flex-direction: column; gap: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.aw-ln { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: #4b5563; }
.aw-ln.active { color: var(--card-fg); }
.aw-ln-ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: .1rem; } .aw-ln-ic.done { color: #16a34a; }
.aw-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--primary-soft); border-top-color: var(--primary); animation: aw-spin .7s linear infinite; flex-shrink: 0; margin-top: .1rem; display: inline-block; }
.aw-spin.big { width: 30px; height: 30px; border-width: 3px; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-upnext { padding: .7rem 1rem; border-top: 1px solid var(--border); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--muted-fg); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.aw-chip { font-family: inherit; font-size: .72rem; font-weight: 600; letter-spacing: 0; background: var(--muted); color: var(--card-fg); border-radius: 999px; padding: .15rem .6rem; }

/* results table */
.aw-results { }
.aw-rrow { display: grid; grid-template-columns: 1.5fr 90px 70px 100px 120px minmax(120px,1fr) 50px; gap: .8rem; align-items: center; padding: .85rem 1.2rem; border-top: 1px solid var(--border); }
.aw-login { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: .74rem; }
.aw-login-u, .aw-login-p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-login-p { color: var(--muted-fg); }
.aw-rhead { background: var(--primary); color: var(--primary-fg); }
.aw-rhead span { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.aw-rl { display: flex; align-items: center; gap: .6rem; font-size: .86rem; min-width: 0; }
.aw-rdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.d-app { background: #16a34a; } .d-dec { background: #dc2626; } .d-con { background: #f59e0b; }
.aw-amt { font-size: .86rem; font-weight: 600; color: #9aa1ad; } .aw-amt.has { color: #15803d; }
.aw-out { font-size: .66rem; font-weight: 800; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; border: 1px solid; width: fit-content; }
.o-app { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; } .o-dec { color: #b91c1c; background: #fef2f2; border-color: #fecaca; } .o-con { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
.aw-proof { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #cbd0d8; overflow: hidden; }
.aw-proof.has { padding: 0; cursor: zoom-in; }
.aw-proof.has:hover { border-color: var(--primary); }
.aw-proof img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-proof svg { width: 15px; height: 15px; }
.aw-skip { padding: .7rem 1.2rem; background: #f7f8f9; border-top: 1px solid var(--border); font-size: .76rem; color: var(--muted-fg); }

/* completed collapsed + locked */
.aw-done { border: 1px solid #bbf7d0; border-radius: 12px; overflow: hidden; margin-bottom: .9rem; background: #fff; }
.aw-done-sum { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; background: none; border: none; cursor: pointer; text-align: left; }
.aw-done-sum:hover { background: #f0fdf4; }
.aw-done-chk { width: 17px; height: 17px; color: #16a34a; flex-shrink: 0; } .aw-done-sum b { font-size: .88rem; }
.aw-dash { color: var(--muted-fg); } .aw-done-app { font-size: .78rem; font-weight: 600; color: #15803d; } .aw-done-dec { font-size: .78rem; font-weight: 600; color: #dc2626; }
.aw-done-sum .aw-step-chev { color: var(--muted-fg); }
.aw-locked { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--border); border-radius: 12px; background: #f6f7f8; padding: .85rem 1.1rem; opacity: .6; margin-bottom: .9rem; }
.aw-lock-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted-fg); flex-shrink: 0; }
.aw-lock-ic svg { width: 14px; height: 14px; }
.aw-locked b { font-size: .86rem; display: block; } .aw-locked span { font-size: .72rem; color: var(--muted-fg); }

/* blocking + awaiting */
.aw-block { border: 1px solid #fed7aa; background: #fff7ed; border-radius: 14px; padding: 1.8rem; text-align: center; }
.aw-block-h { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.aw-block-h svg { width: 20px; height: 20px; color: #ea580c; }
.aw-block p { color: #57534e; font-size: .9rem; max-width: 460px; margin: 0 auto 1.2rem; }
.aw-block-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.aw-await { border: 1px solid #fde68a; background: #fffbeb; border-radius: 14px; padding: 2rem; text-align: center; }
.aw-await h3 { margin: .8rem 0 .3rem; } .aw-await p { color: #57534e; font-size: .88rem; max-width: 440px; margin: 0 auto 1rem; }
.aw-btn-ghost { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: .6rem 1rem; font-size: .85rem; font-weight: 600; color: #374151; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.aw-btn-ghost.sm { padding: .45rem .8rem; font-size: .8rem; } .aw-btn-ghost svg { width: 15px; height: 15px; }
.aw-btn-warn { background: #ea580c; color: #fff; border: none; border-radius: 9px; padding: .6rem 1rem; font-size: .85rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.aw-btn-warn svg { width: 15px; height: 15px; }

/* dialogs */
.aw-ov { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.aw-ov-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); }
.aw-dialog { position: relative; background: #fff; border-radius: 16px; max-width: 460px; width: 100%; padding: 1.4rem 1.5rem 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.aw-dlg-h { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; margin-bottom: .7rem; }
.aw-dlg-h svg { width: 20px; height: 20px; color: var(--primary); }
.aw-dialog p { font-size: .88rem; color: #4b5563; line-height: 1.55; margin: 0 0 1.2rem; }
.aw-dlg-btns { display: flex; gap: .7rem; justify-content: flex-end; }
.aw-btn-primary { display: inline-flex; align-items: center; gap: .4rem; background: var(--primary); color: var(--primary-fg); border: none; border-radius: 9px; padding: .6rem 1rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.aw-btn-primary svg { width: 15px; height: 15px; }
.aw-dlg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.aw-dlg-h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; } .aw-dlg-h2 svg { width: 19px; height: 19px; color: #4b5563; }
.aw-x { background: none; border: none; color: var(--muted-fg); cursor: pointer; } .aw-x svg { width: 19px; height: 19px; }
.aw-co-name { margin: 0; font-size: 1.05rem; } .aw-co-rel { margin: .15rem 0 1rem; font-size: .78rem; color: var(--muted-fg); }
.aw-co-contact { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.aw-co-contact div { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: #4b5563; } .aw-co-contact svg { width: 15px; height: 15px; }
.aw-co-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); margin: 0 0 .7rem; }
.aw-tracker { display: flex; align-items: flex-start; margin-bottom: 1.2rem; }
.aw-tr-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 64px; flex-shrink: 0; }
.aw-tr-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; background: #e5e7eb; color: #9ca3af; }
.aw-tr-dot.on { background: #16a34a; color: #fff; } .aw-tr-dot.cur { box-shadow: 0 0 0 3px #bbf7d0; }
.aw-tr-step span { font-size: .62rem; text-align: center; line-height: 1.2; color: var(--muted-fg); }
.aw-tr-conn { height: 2px; flex: 1; background: #e5e7eb; margin-top: 13px; } .aw-tr-conn.on { background: #16a34a; }

@media (max-width: 860px) {
  .aw-stepper { flex-direction: column; } .aw-conn { display: none; }
  .aw-rrow { grid-template-columns: 1fr; gap: .35rem; } .aw-rhead { display: none; }
  .aw-summary { margin-left: 0; }
}

/* ============================================================================
   Messenger (.msgr-*) — secure contact card + tabbed SMS/Email inbox.
   ============================================================================ */
.msgr { max-width: 900px; }
.msgr-contact .cdash-h { margin-bottom: .15rem; }
.msgr-cred { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--muted); border-radius: 10px; padding: .8rem .9rem; margin-bottom: .7rem; }
.msgr-cred:last-child { margin-bottom: 0; }
.msgr-cred-l { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.msgr-cred-l svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }
.msgr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-copy { background: none; border: none; color: var(--muted-fg); cursor: pointer; padding: .35rem; border-radius: 7px; flex-shrink: 0; }
.msgr-copy:hover { background: rgba(0,0,0,.05); color: var(--card-fg); }
.msgr-copy svg { width: 16px; height: 16px; }

.msgr-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.msgr-head .cdash-h { margin: 0; }
.msgr-back { background: none; border: none; color: var(--card-fg); cursor: pointer; padding: .3rem; border-radius: 7px; display: inline-flex; }
.msgr-back:hover { background: var(--muted); } .msgr-back svg { width: 18px; height: 18px; }

.msgr-tabs { display: inline-flex; gap: .25rem; background: #eef0f2; border: 1px solid var(--border); border-radius: 10px; padding: .25rem; margin-bottom: 1rem; }
.msgr-tab { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; border-radius: 7px; padding: .45rem 1rem; font-size: .85rem; font-weight: 600; color: var(--muted-fg); cursor: pointer; }
.msgr-tab svg { width: 15px; height: 15px; }
.msgr-tab.active { background: #fff; color: var(--card-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Broker Controls MIXED mode: 3-way specialist / lender-email / lender-sms switcher. */
.msgr-modebar { display: inline-flex; gap: .25rem; background: #eef0f2; border: 1px solid var(--border); border-radius: 10px; padding: .25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.msgr-mode { text-decoration: none; border-radius: 7px; padding: .45rem .9rem; font-size: .85rem; font-weight: 600; color: var(--muted-fg); }
.msgr-mode.active { background: #fff; color: var(--card-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.msgr-mode:hover:not(.active) { color: var(--fg); }
.msgr-ub { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .66rem; font-weight: 800; }

.msgr-list { display: flex; flex-direction: column; gap: .25rem; }
.msgr-row { display: flex; align-items: center; gap: .8rem; padding: .8rem .85rem; border-radius: 11px; cursor: pointer; }
.msgr-row:hover { background: #f2f3f5; }
.msgr-row.unread { background: #f0fdf4; border: 1px solid #bbf7d0; }
.msgr-row.unread:hover { background: #ecfdf3; }
.msgr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.msgr-row-main { flex: 1; min-width: 0; }
.msgr-row-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.msgr-row-name { font-size: .9rem; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-row.unread .msgr-row-name { font-weight: 700; }
.msgr-row-time { font-size: .68rem; color: var(--muted-fg); flex-shrink: 0; }
.msgr-row-prev { font-size: .8rem; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .15rem; }
.msgr-row.unread .msgr-row-prev { color: #374151; }
.msgr-rb { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 800; flex-shrink: 0; }

/* detail */
.msgr-scroll { display: flex; flex-direction: column; gap: .8rem; max-height: 440px; overflow-y: auto; padding-right: .3rem; }
.msgr-brow { display: flex; justify-content: flex-start; }
.msgr-brow.me { justify-content: flex-end; }
.msgr-bubble { max-width: 85%; border-radius: 13px; padding: .8rem .9rem; border: 1px solid transparent; }
.b-user { background: var(--primary); color: var(--primary-fg); }
.b-bank { background: #fffbeb; border-color: #fde68a; }
.b-lender { background: var(--muted); }
.b-system { background: #f6f7f8; border-color: var(--border); }
.b-missed { background: #fef2f2; border-color: #fecaca; }
.b-voice { background: #fff7ed; border-color: #fed7aa; }
.msgr-b-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.msgr-ic-miss { width: 14px; height: 14px; color: #dc2626; } .msgr-ic-voice { width: 14px; height: 14px; color: #ea580c; }
.msgr-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .4rem; border-radius: 5px; border: 1px solid; }
.msgr-badge.b-user { background: color-mix(in srgb, var(--primary-fg) 18%, transparent); color: var(--primary-fg); border-color: color-mix(in srgb, var(--primary-fg) 30%, transparent); }
.msgr-badge.b-bank { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.msgr-badge.b-lender { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.msgr-badge.b-system { background: var(--muted); color: var(--muted-fg); border-color: var(--border); }
.msgr-badge.b-missed { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.msgr-badge.b-voice { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.msgr-b-time { font-size: .66rem; opacity: .7; }
.b-user .msgr-b-time { color: var(--primary-fg); opacity: .75; }
.msgr-subj { font-size: .76rem; font-weight: 700; margin: 0 0 .3rem; opacity: .85; }
.msgr-text { font-size: .88rem; margin: 0; white-space: pre-wrap; line-height: 1.5; }
.msgr-miss-t { font-size: .88rem; font-weight: 600; color: #b91c1c; margin: 0 0 .35rem; }
.msgr-from { font-size: .74rem; color: var(--muted-fg); margin: 0; }
.msgr-vm-h { font-size: .66rem; font-weight: 700; color: #c2410c; margin-bottom: .35rem; }
.msgr-vm-dur { color: var(--muted-fg); font-weight: 500; }
.msgr-vm-t { font-size: .88rem; font-style: italic; margin: 0 0 .5rem; line-height: 1.5; }
.msgr-vm-foot { display: flex; align-items: center; gap: .7rem; }
.msgr-callback { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); border-radius: 7px; padding: .3rem .6rem; font-size: .74rem; font-weight: 600; cursor: pointer; margin-top: .4rem; }
.msgr-callback:hover { background: var(--primary); color: var(--primary-fg); } .msgr-callback svg { width: 12px; height: 12px; }
.msgr-atts { margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.msgr-att { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: .25rem .5rem; cursor: pointer; width: fit-content; }
.b-user .msgr-att { background: color-mix(in srgb, var(--primary-fg) 12%, transparent); border-color: transparent; color: var(--primary-fg); }
.msgr-att svg { width: 12px; height: 12px; flex-shrink: 0; }

.msgr-composer { border-top: 1px solid var(--border); padding-top: .9rem; margin-top: .9rem; }
.msgr-subj-in { width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 9px; font-size: .85rem; margin-bottom: .5rem; background: #fff; }
.msgr-comp-row { display: flex; align-items: flex-end; gap: .6rem; }
.msgr-comp-l { flex: 1; }
.msgr-ta { width: 100%; min-height: 60px; resize: none; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 9px; font-size: .88rem; font-family: inherit; background: #fff; }
.msgr-comp-tools { display: flex; align-items: center; gap: .8rem; margin-top: .35rem; }
.msgr-tool { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--muted-fg); cursor: pointer; }
.msgr-tool svg { width: 13px; height: 13px; }
.msgr-hint { font-size: .66rem; color: var(--muted-fg); margin-left: auto; }
.msgr-send { width: 42px; height: 60px; flex-shrink: 0; background: var(--primary); color: var(--primary-fg); border: none; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.msgr-send svg { width: 17px; height: 17px; }

.msgr-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; font-size: .85rem; font-weight: 500; padding: .65rem 1.1rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 200; }

/* ============================================================================
   Billing & Invoices (.bill-*) — current plan, tier cards, payment, invoices.
   ============================================================================ */
.bill { max-width: 1000px; }
.bill .cdash-h { display: flex; align-items: center; gap: .5rem; }
.bill-h-ic { width: 17px; height: 17px; color: var(--primary); }
.cauth-note { color: var(--card-fg); background: var(--primary-soft); border-radius: 9px; padding: .7rem .9rem; font-size: .86rem; }

.bill-current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--muted); border-radius: 11px; padding: 1rem 1.1rem; margin-top: .5rem; }
.bill-cur-name { font-size: .95rem; font-weight: 700; margin: 0 0 .15rem; }
.bill-active { background: var(--primary); color: var(--primary-fg); font-size: .76rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }

.bill-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .7rem; }
.bill-plan { position: relative; border: 2px solid var(--border); border-radius: 14px; padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; }
.bill-plan:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.bill-plan.active { border-color: var(--primary); background: var(--primary-soft); }
.bill-pop { position: absolute; top: -11px; left: 16px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; font-size: .68rem; font-weight: 700; }
.bill-check { position: absolute; top: 12px; right: 12px; color: var(--primary); } .bill-check svg { width: 19px; height: 19px; }
.bill-plan-name { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.bill-plan-sub { margin: .15rem 0 1.1rem; font-size: .76rem; color: var(--muted-fg); }
.bill-feats { flex: 1; display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.1rem; }
.bill-feat { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.bill-feat .cdash-info { color: #b8bec8; }
.bill-plan-foot { margin-top: auto; }
.bill-price { display: flex; align-items: baseline; gap: .1rem; margin-bottom: .8rem; }
.bill-price .c { font-size: .8rem; color: var(--muted-fg); }
.bill-price b { font-size: 1.7rem; font-weight: 800; }
.bill-price .per { font-size: .76rem; color: var(--muted-fg); margin-left: .25rem; }
.bill-btn { width: 100%; padding: .55rem 1rem; border-radius: 9px; font-size: .85rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--card-fg); }
.bill-btn:hover { border-color: var(--primary); color: var(--primary); }
.bill-btn.solid { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.bill-btn.solid:hover { filter: brightness(.96); color: var(--primary-fg); }
.bill-btn.soon { background: color-mix(in srgb, var(--primary) 45%, #fff); color: #fff; border: none; cursor: not-allowed; opacity: .9; }
.bill-cur-lbl { text-align: center; font-size: .8rem; font-weight: 600; color: var(--primary); margin: 0; }

.bill-pay { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--muted); border-radius: 11px; padding: 1rem 1.1rem; margin-top: .5rem; }
.bill-pay-l { display: flex; align-items: center; gap: .8rem; }
.bill-visa { width: 40px; height: 27px; border-radius: 5px; background: linear-gradient(90deg, #1d4ed8, #1e3a8a); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; }
.bill-pay-num { font-size: .9rem; font-weight: 600; margin: 0; }
.bill-update { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: .42rem .9rem; font-size: .82rem; font-weight: 600; color: var(--card-fg); text-decoration: none; }
.bill-update:hover { border-color: var(--primary); color: var(--primary); }

.bill-inv { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.bill-inv:last-child { border-bottom: none; }
.bill-inv-desc { font-size: .9rem; font-weight: 600; margin: 0 0 .15rem; }
.bill-inv-r { display: flex; align-items: center; gap: .9rem; }
.bill-inv-amt { font-size: .9rem; font-weight: 700; }
.bill-paid { background: var(--primary); color: var(--primary-fg); font-size: .72rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; }
.bill-dl { color: var(--muted-fg); display: inline-flex; padding: .25rem; border-radius: 6px; }
.bill-dl:hover { background: var(--muted); color: var(--card-fg); } .bill-dl svg { width: 17px; height: 17px; }

@media (max-width: 820px) { .bill-plans { grid-template-columns: 1fr; } }

/* ============================================================================
   Settings forms (.set-*) — Personal Details + Business Details.
   ============================================================================ */
.setf { max-width: 880px; }
.setf .cdash-h { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.set-h-ic { width: 18px; height: 18px; color: var(--primary); }

.set-banner { display: flex; align-items: flex-start; gap: .8rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.set-banner-ic { width: 18px; height: 18px; color: #2563eb; flex-shrink: 0; margin-top: .1rem; }
.set-banner-t { flex: 1; } .set-banner-t .b1 { margin: 0; font-size: .88rem; font-weight: 600; color: #1e3a8a; }
.set-banner-t .b2 { margin: .25rem 0 0; font-size: .78rem; color: #2563eb; }
.set-banner-x { background: none; border: none; color: #1e40af; font-size: .82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }

.set-grid { display: grid; gap: .8rem; margin-bottom: .8rem; }
.set-grid.g2 { grid-template-columns: 1fr 1fr; } .set-grid.g3 { grid-template-columns: 1fr 1fr 1fr; }
.set-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.set-grid .set-field { margin-bottom: 0; }
.set-lbl { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: #374151; }
.set-lock { width: 12px; height: 12px; color: var(--muted-fg); flex-shrink: 0; }
.set-input { width: 100%; padding: .56rem .75rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: .88rem; color: var(--card-fg); font-weight: 400; }
.set-list-intro { margin: 0 0 1rem; }
.set-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.set-input:disabled { background: var(--muted); color: var(--muted-fg); cursor: not-allowed; }

/* business list */
.set-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.set-add { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 8px; padding: .4rem .7rem; }
.set-add:hover { background: var(--primary-soft); } .set-add svg { width: 14px; height: 14px; }
.set-bizrow { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: .8rem; }
.set-bizrow:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.set-bizrow-l { flex: 1; display: block; padding: 1rem 1.1rem; text-decoration: none; color: inherit; min-width: 0; }
.set-biz-name { font-size: .95rem; font-weight: 700; margin: 0 0 .15rem; }
.set-bizrow-r { display: flex; align-items: center; gap: .3rem; padding-right: 1rem; }
.set-del { background: none; border: none; color: #dc2626; cursor: pointer; padding: .45rem; border-radius: 8px; display: inline-flex; }
.set-del:hover { background: #fef2f2; } .set-del svg { width: 17px; height: 17px; }
.set-chev { color: var(--muted-fg); display: inline-flex; padding: .3rem; } .set-chev svg { width: 18px; height: 18px; }

.set-allback { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted-fg); text-decoration: none; font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.set-allback:hover { color: var(--card-fg); } .set-allback svg { width: 16px; height: 16px; }

/* delete modal */
.set-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.set-modal[hidden] { display: none; }
.set-modal-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); }
.set-modal-card { position: relative; background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 1.4rem 1.5rem 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.set-modal-card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.set-modal-card p { margin: 0 0 1.3rem; line-height: 1.5; }
.set-modal-btns { display: flex; gap: .7rem; justify-content: flex-end; }
.set-del-confirm { background: #dc2626; color: #fff; border: none; border-radius: 9px; padding: .6rem 1rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.set-del-confirm:hover { background: #b91c1c; }

@media (max-width: 720px) { .set-grid.g2, .set-grid.g3 { grid-template-columns: 1fr; } }

/* Consumer dashboard content — phone gaps (mobile-only; desktop rules untouched). */
@media (max-width: 560px) {
  /* Co-applicants table: stack each row into a card so long emails + the action buttons
     never overflow the viewport (used in onboarding + the dashboard co-applicants page).
     !important overrides the cell's inline text-align/nowrap. */
  .ca-table thead { display: none; }
  .ca-table, .ca-table tbody, .ca-table tr, .ca-table td { display: block; width: 100%; }
  .ca-table tr { border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; margin-bottom: .55rem; }
  .ca-table td { padding: .15rem 0; text-align: left !important; white-space: normal !important; word-break: break-word; }
  .ca-table td.act { margin-top: .45rem; }
  /* Application detail — "select lenders" rows: let the pull/category/view badges wrap
     under the lender name instead of overrunning the row. */
  .aw-lrow { flex-wrap: wrap; }
  .aw-lbadges { flex-wrap: wrap; }
  /* Co-applicant status dialog: shrink the stepper so it fits inside the modal. */
  .aw-tr-step { width: 46px; }
  .aw-tr-step span { font-size: .56rem; }
}

/* ============================================================================
   Account Settings (.acct-*) — linked banks, password, notifications, 2FA.
   ============================================================================ */
.acct .cdash-card { margin-bottom: 1.1rem; }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.acct .acct-head .cdash-h { margin-bottom: 0; }
.acct-link-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--card-fg); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: .42rem .8rem; cursor: pointer; }
.acct-link-btn:hover { border-color: var(--primary); color: var(--primary); } .acct-link-btn svg { width: 14px; height: 14px; }

.acct-warn { display: flex; align-items: flex-start; gap: .6rem; border-radius: 10px; padding: .8rem .9rem; margin-bottom: .9rem; font-size: .82rem; line-height: 1.45; }
.acct-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .1rem; }
.acct-warn.red { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.acct-warn.amber { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; margin-top: .9rem; margin-bottom: 0; }

.acct-bank { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: 11px; padding: .8rem .9rem; margin-bottom: .7rem; background: #fafbfc; }
.acct-bank:last-child { margin-bottom: 0; }
.acct-bank.broken { border-color: #fecaca; background: #fef2f2; }
.acct-bank-l { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.acct-bank-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acct-bank-ic.broken { background: #fee2e2; color: #dc2626; } .acct-bank-ic svg { width: 17px; height: 17px; }
.acct-bank-top { display: flex; align-items: center; gap: .5rem; }
.acct-bank-top b { font-size: .9rem; } .acct-last4 { font-size: .76rem; color: var(--muted-fg); }
.acct-chip { font-size: .62rem; font-weight: 800; text-transform: uppercase; padding: .12rem .4rem; border-radius: 5px; background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.acct-sm-btn { font-size: .8rem; font-weight: 600; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: .42rem .8rem; cursor: pointer; color: var(--card-fg); white-space: nowrap; }
.acct-sm-btn:hover { border-color: var(--primary); color: var(--primary); }
.acct-sm-btn.ghost { border-color: transparent; background: none; color: var(--muted-fg); }
.acct-sm-btn.ghost:hover { background: var(--muted); color: var(--card-fg); }

.acct-soon { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #8a6d1a; background: #fdf6e3; border: 1px solid #f0e3bd; padding: .1rem .5rem; border-radius: 999px; vertical-align: middle; margin-left: .4rem; }
.acct-link-btn[disabled] { opacity: .5; cursor: not-allowed; }
.acct-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.acct-toggle:last-of-type { border-bottom: none; }
.acct-toggle.no-border { border-bottom: none; padding-bottom: 0; }
.acct-toggle p { margin: 0; font-size: .9rem; font-weight: 600; }
input.acct-switch { appearance: none; -webkit-appearance: none; width: 40px; height: 23px; border-radius: 999px; background: #cbd0d8; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
input.acct-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
input.acct-switch:checked { background: var(--primary); }
input.acct-switch:checked::after { transform: translateX(17px); }

.acct-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .3rem; }
.acct-legal a { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 500; color: var(--primary); text-decoration: none; }
.acct-legal a:hover { text-decoration: underline; }
.acct-legal a svg { width: 15px; height: 15px; } .acct-legal a .ext { width: 12px; height: 12px; }

.acct-danger { border-color: #fecaca; }
.cdash-h.danger { color: #dc2626; } .cdash-h.danger .set-h-ic { color: #dc2626; }
.acct-del-btn { background: #dc2626; color: #fff; border: none; border-radius: 9px; padding: .55rem 1rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.acct-del-btn:hover { background: #b91c1c; }

/* Account Settings submit buttons must beat the global button[type=submit]
   (full-width/primary) — scope under .acct to win on specificity. */
.acct .acct-sm-btn { width: auto; padding: .42rem .9rem; font-size: .8rem; font-weight: 600;
  background: #fff; color: var(--card-fg); border: 1px solid var(--border); border-radius: 8px; }
.acct .acct-sm-btn:hover { border-color: var(--primary); color: var(--primary); filter: none; }
.acct .acct-sm-btn.ghost { background: none; border-color: transparent; color: var(--muted-fg); }
.acct .acct-sm-btn.ghost:hover { background: var(--muted); color: var(--card-fg); }
.acct .acct-del-btn { width: auto; padding: .55rem 1rem; font-size: .85rem; font-weight: 700;
  background: #dc2626; color: #fff; border: none; border-radius: 9px; }
.acct .acct-del-btn:hover { background: #b91c1c; filter: none; }


/* ==========================================================================
   Pre-approval outcome popup (Tori's spec, 2026-07-22). Rendered from
   auth_shell's {% block overlays %}, which sits OUTSIDE .cauth-card-wrap - that
   wrapper's entry animation creates a transform context, and a position:fixed
   child of a transformed ancestor is trapped inside it instead of covering the
   viewport. The green is semantic (success), not the tenant brand.
   ========================================================================== */
.pqm-backdrop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center;
  justify-content: center; padding: 1rem; background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow-y: auto; }
.pqm { background: #fff; border-radius: 18px; width: 100%; max-width: 28rem; padding: 1.6rem 1.5rem;
  box-shadow: 0 24px 70px -18px rgba(15,23,42,.35); text-align: center;
  animation: pqm-in .22s ease both; margin: auto; }
@keyframes pqm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.pqm-icon { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto .6rem; }
.pqm-icon svg { width: 32px; height: 32px; }
.pqm-icon.ok { background: rgba(16,185,129,.15); color: #10b981; }
.pqm-icon.no { background: rgba(239,68,68,.15); color: #ef4444; }
.pqm-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0 0 .5rem;
  letter-spacing: -.01em; line-height: 1.25; }
.pqm-desc { color: #64748b; font-size: .88rem; line-height: 1.55; margin: 0; }
.pqm-sub { margin-top: 1rem; }
.pqm-sub-h { font-size: .88rem; font-weight: 600; color: #0f172a; margin: 0; }
.pqm-sub-p { font-size: .78rem; color: #64748b; margin: .25rem 0 0; }
.pqm-sub-p b { color: #0f172a; }
.pqm-sub-p b.ok { color: #059669; }
.pqm-consent { margin-top: 1rem; border: 1px solid #e2e8f0; background: #f8fafc;
  border-radius: 12px; padding: .9rem; text-align: left; }
.pqm-check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  font-size: .75rem; color: #64748b; line-height: 1.55; }
.pqm-check input { margin-top: .15rem; width: 15px; height: 15px; accent-color: #10b981; flex: 0 0 auto; }
.pqm-check b { color: #0f172a; font-weight: 600; }
.pqm-more { border: 0; background: none; padding: 0; margin-left: .3rem; cursor: pointer;
  color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; }
.pqm-extra .blk { display: block; margin-top: .5rem; }
.pqm-extra a { color: var(--primary); }
.pqm-cta { margin-top: 1rem; width: 100%; display: flex; align-items: center; justify-content: center;
  gap: .5rem; border: 0; border-radius: 12px; padding: .8rem 1rem; font: inherit; font-size: .95rem;
  font-weight: 600; cursor: pointer; background: #10b981; color: #fff; text-decoration: none; }
.pqm-cta:hover:not(:disabled) { background: #059669; }
.pqm-cta:disabled { opacity: .5; cursor: not-allowed; }
.pqm-cta svg { width: 17px; height: 17px; }
.pqm-cta.ghost { background: #fff; color: #475569; border: 1px solid #cbd5e1; }
.pqm-cta.ghost:hover { background: #f8fafc; }

/* ── The admin toggle switch, defined once ──────────────────────────────────
   Four panes had grown their own copy of this control - .dw-sw (Dashboard
   Widgets), .lm-sw (Lender Messenger), .cc-sw (Collections), .si-sw (Subscriber
   Income) - and they had drifted into two different sizes and two different "on"
   colours. V, 2026-08-03: "the toggle size is not as others".

       Collections / Subscriber Income   44x24, knob 20, on = #16a34a
       Widgets / Lender Messenger        40x22, knob 18, on = var(--ad-primary)

   Standardised on the larger 44x24: it is the bigger tap target, and the two
   money panes already used it. The hardcoded green is gone with it - a fixed
   brand colour inside a white-label portal is the same bug as the tour card's
   emerald, and here it meant a broker's own toggles disagreed with each other
   about what "on" looks like.

   The four class names are kept rather than replaced by one: renaming them
   means touching four templates and the JS that flips `.on` in three of them,
   for no gain the user can see. What matters is that there is now ONE place the
   geometry and the colour are decided. New panes: use .ad-sw. */
.ad-sw, .dw-sw, .lm-wrap .lm-sw, .cc-wrap .cc-sw, .si-wrap .si-sw {
  position: relative; width: 44px; min-width: 44px; height: 24px;
  border-radius: 999px; border: none; background: #d1d5db;
  cursor: pointer; flex: none; padding: 0;
}
.ad-sw::after, .dw-sw::after, .lm-wrap .lm-sw::after,
.cc-wrap .cc-sw::after, .si-wrap .si-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.ad-sw.on, .dw-sw.on, .lm-wrap .lm-sw.on, .cc-wrap .cc-sw.on, .si-wrap .si-sw.on {
  background: var(--ad-primary, #16a34a);
}
.ad-sw.on::after, .dw-sw.on::after, .lm-wrap .lm-sw.on::after,
.cc-wrap .cc-sw.on::after, .si-wrap .si-sw.on::after { transform: translateX(20px); }