/* ============================================================================
   Golt demo-v3 — Merchant portal design refresh.

   ONE design — B · Brand Panel, the direction the client picked:
   gold brand panel, warm paper workspace, elevated cards. Gold is the locked
   brand gold; because gold is a light surface, everything sitting on it is
   ink (#1B2130), never white.

   Tokens live in the html[data-v="panel"] block; structure follows below.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Client-specified gold. Its hue (45.4) matches the approved tint ramp, so
     the tints and the deep step pair with it directly.
     --gold-deep is for graphics sitting ON a gold tint (icon chips, avatars,
     folder icons); text on white uses --link. */
  --gold:#D4AE38; --gold-deep:#8A6A12; --gold-tint:#F6EFD9; --gold-tint2:#FCF8EC;
  /* Action/link text. Gold itself is 1.4:1 on white and darkening its hue
     goes olive, so text is ink and gold stays a fill colour. */
  --link:#1B2130;
  --ink:#1B2130; --slate:#3A4354; --muted:#6B7686;
  --line:#E4E7EC; --line2:#D5DAE2; --surface:#FFF;
  --success:#1E7A46; --error:#C0392B; --warning:#B7791F; --info:#2C6FA6;

  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Plus Jakarta Sans',var(--sans);

  /* Aliases kept so every inline style copied from demo-v2 still resolves. */
  --accent:var(--gold); --accent-deep:var(--gold-deep);
  --accent-tint:var(--gold-tint); --accent-tint2:var(--gold-tint2);
  --accent-contrast:var(--ink); --paper:#FAF8F3; --r:14px;
}

/* -- tokens: B · Brand Panel ---------------------------------------------- */
html[data-v="panel"]{
  --canvas:#FAF8F3; --appgap:0px; --appr:0px; --appsh:none;
  /* True Gold, not bronze. Gold is a LIGHT surface — white on it is 2.2:1, so
     everything that sits on gold is ink, and the lockup is knocked to black. */
  --sidebg:var(--gold);
  --sidefg:rgba(27,33,48,.74); --sidefg-strong:#1B2130;
  --sideline:rgba(27,33,48,.16); --sidehover:rgba(255,255,255,.34);
  --side-on-bg:#FFF; --side-on-fg:#1B2130; --sidecard:rgba(255,255,255,.34);
  --sidegrp:rgba(27,33,48,.58); --sidelogo:brightness(0);
  --contentbg:#FAF8F3; --topbg:#FAF8F3; --topline:rgba(27,33,48,.08);
  --searchbg:#FFF; --searchbd:var(--line);
  --cardbg:#FFF; --cardbd:transparent; --cardr:16px;
  --cardsh:0 1px 3px rgba(27,33,48,.07),0 10px 28px rgba(27,33,48,.06);
  --thbg:#FFF; --rowhover:var(--gold-tint2); --kpibg:#FFF;
}

/* ------------------------------------------------------------------ base -- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Console palette (client, 9/15): a white workspace, with the cards on it a
   shade of grey so each block of content reads as its own. Both consoles, so
   the merchant portal and the admin console match; the applicant flow and the
   sign-in screens keep their own grounds. */
html[data-app="portal"],html[data-app="admin"]{
  --canvas:#FFF; --contentbg:#FFF; --topbg:#FFF; --paper:#FFF;
  --cardbg:#F4F4F1; --cardbd:#E8E7E2; --kpibg:#F4F4F1;
  --thbg:transparent; --rowhover:#ECEBE6;
}
/* Tables and toolbars sit INSIDE those grey cards, so their own white grounds
   would undo the effect; the inputs stay white, which is what makes them read
   as fields. */
html[data-app="portal"] .twrap,html[data-app="admin"] .twrap{background:transparent;box-shadow:none}

body{font-family:var(--sans);color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

h2.q{font-family:var(--display);font-weight:800;font-size:27px;line-height:1.2;
  letter-spacing:-.4px;margin:0 0 8px}
p.sub{font-size:14.5px;line-height:1.55;color:var(--slate);margin:0 0 22px}
.eyebrow{font-size:11.5px;font-weight:800;color:var(--link);letter-spacing:.7px;
  margin:0 0 10px;text-transform:uppercase}
.note{font-size:12px;color:var(--muted);margin-top:12px}
.disc{font-size:11px;line-height:1.5;color:var(--muted);margin-top:26px;
  border-top:1px solid var(--line);padding-top:12px}

/* --------------------------------------------------------------- controls -- */
.f{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin:0 0 6px}
.fld{width:100%;height:44px;border:1px solid var(--line2);border-radius:10px;
  background:var(--surface);padding:0 13px;font:14.5px var(--sans);color:var(--ink);outline:none;
  transition:border-color .12s,box-shadow .12s}
.fld::placeholder{color:#9AA2AF}
.fld:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)}
.fld[maxlength="1"]{flex:1 1 0;min-width:0;max-width:54px;padding:0;height:56px;
  text-align:center;font-size:21px;font-weight:700}
textarea.fld{height:auto;padding:11px 13px;line-height:1.5}
select.fld{cursor:pointer}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mb{margin-bottom:15px}

.btn{font:700 14.5px var(--sans);border-radius:10px;cursor:pointer;border:none;
  padding:0 20px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none;white-space:nowrap;transition:filter .12s,background .12s,box-shadow .12s}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-primary{background:var(--gold);color:var(--ink);
  box-shadow:0 1px 2px color-mix(in srgb,var(--gold) 34%,transparent)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface);color:var(--slate);border:1px solid var(--line2)}
.btn-ghost:hover{background:#F7F8FA;border-color:#BFC6D1}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{filter:brightness(1.15)}

.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--slate);
  line-height:1.5;margin-bottom:12px}
.check input{margin-top:2px;width:17px;height:17px;accent-color:var(--gold)}
.opt{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line2);
  border-radius:11px;background:var(--surface);font-size:14.5px;font-weight:500;width:100%;
  margin-bottom:11px;cursor:pointer;text-align:left}
.opt .ic{width:36px;height:36px;border-radius:10px;background:var(--gold-tint);
  display:flex;align-items:center;justify-content:center;color:var(--gold-deep);flex:none}

/* Status pills — soft tint + a leading dot (reads as data, not as a badge). */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:4px 9px;
  font-size:11.5px;font-weight:700;letter-spacing:.1px;line-height:1.35;white-space:nowrap;
  background:color-mix(in srgb,var(--muted) 11%,transparent);color:var(--slate)}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.pill.bad{background:color-mix(in srgb,var(--error) 11%,transparent);color:var(--error)}
.pill.warn{background:color-mix(in srgb,var(--warning) 13%,transparent);color:var(--warning)}
.pill.info{background:color-mix(in srgb,var(--info) 11%,transparent);color:var(--info)}

/* The lender's mark, in the Lender column of the applications and financials
   lists.

   A fixed box rather than a bare img: the two lender logos are 5.9:1 and 3.6:1,
   so left to themselves they set their own widths and the column goes ragged.
   Sized so the TGUC lockup, the wider of the two, is still readable; the Avvance
   mark then fits the slot on height with room to spare.

   Height is explicit, not max-height -- the Avvance file carries a viewBox and no
   intrinsic size, and renders 0x0 against max-height alone. */
.lmark{display:inline-flex;align-items:center;width:84px;height:20px}
.lmark img{width:100%;height:100%;object-fit:contain;object-position:left center}
.lmark em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.2px;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tgl{display:inline-flex;width:44px;height:25px;border-radius:999px;padding:3px;cursor:pointer;
  background:var(--line2);transition:background .15s;position:relative}
.tgl.on{background:var(--gold);justify-content:flex-end}
/* Admin merchant page: lender programs activated for this merchant */
.lpgroup{padding:12px 0 4px;border-top:1px solid var(--line)}
.ch + .lpgroup{border-top:0;padding-top:2px}
.lpl{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;margin-bottom:4px}
.lprow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.lprow .pn{font-weight:600;font-size:13.5px}
.lprow .ps{font-size:12px;color:var(--muted);margin-top:2px}
.lpl a{color:inherit}
/* The lender's name on the left, its on / disabled toggle on the right. */
.lpl{justify-content:space-between}
.lpname{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* A disabled lender's account ID and programs: shown, greyed, not changeable. */
.lpoff{opacity:.45;pointer-events:none;user-select:none}
.lpsub{margin:8px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.lpid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:12.5px}
.lpacct-links{display:flex;gap:14px;white-space:nowrap}
.lpacct-form{display:grid;grid-template-columns:minmax(0,440px) auto;gap:12px;align-items:end;padding:6px 0 10px}
.lpacct-actions{display:flex;gap:8px}
@media (max-width:760px){.lpacct-form{grid-template-columns:1fr}}
.feeform{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* An input with its unit inside, on the right: "3.5  %". */
.fldu{position:relative;width:180px;max-width:100%}
.fldu .fld{padding-right:34px}
.fldu>span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
.tgl i{width:19px;height:19px;background:#fff;border-radius:50%;display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tgl[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(3px);background:var(--ink);color:#fff;
  font:600 11.5px/1.5 var(--sans);padding:7px 12px;border-radius:8px;white-space:pre-line;
  text-align:left;min-width:max-content;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;z-index:60}
.tgl[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------------------------------------------------------- surface -- */
.card{background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr);
  box-shadow:var(--cardsh);padding:22px}
/* Card with a titled header strip — the main fix for "empty / boxed": every
   panel now says what it is instead of floating as an unlabelled rectangle. */
.card>.ch{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;
  flex-wrap:wrap;margin:-22px -22px 18px;padding:15px 22px;border-bottom:1px solid var(--line)}
.card>.ch h3{font-family:var(--display);font-weight:800;font-size:15px;margin:0}
/* The subtitle is supporting text: it sits right on one line, and drops to its
   own line in a narrow card rather than forcing the title to wrap. */
/* The note beside a card title. demo-v3 only ever used a short caption here
   ("Where this application sits right now"), so it was right-aligned and pushed
   over with margin-left:auto. Two thirds of ours are full sentences, and a
   sentence right-aligned across the whole card reads as a mistake.

   The row already wraps, so a long note gets its own line — it just needs to be
   left-aligned there, and to claim a full line rather than a cramped column
   beside the heading. min-width forces the wrap before it gets squeezed;
   space-between on the parent still parks a SHORT note at the right end, where
   alignment is invisible because it is one line. */
.card>.ch p{margin:0;font-size:12.5px;color:var(--muted);text-align:left;max-width:70ch;min-width:min(100%,38ch)}

/* ------------------------------------------------------------------ shell -- */
.shell{display:flex;align-items:stretch;min-height:calc(100dvh - 2*var(--appgap));
  margin:var(--appgap);border-radius:var(--appr);box-shadow:var(--appsh);
  background:var(--contentbg)}

.side{width:256px;flex:none;background:var(--sidebg);border-right:1px solid var(--sideline);
  padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:var(--appgap);
  height:calc(100dvh - 2*var(--appgap));overflow-y:auto;
  border-radius:var(--appr) 0 0 var(--appr)}
.side .brand{display:flex;align-items:center;gap:9px;padding:2px 8px 0;margin-bottom:20px}
.side .lk{height:25px;width:auto;filter:var(--sidelogo)}
.side .tag{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--sidefg);
  background:var(--sidecard);border:1px solid var(--sideline);border-radius:5px;
  padding:3px 6px;margin:0}

/* Primary action, pinned above the nav (samples all lead with one). */
.ngrp{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--sidegrp);margin:20px 10px 7px}
.side nav a{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--sidefg);margin-bottom:2px;transition:background .12s,color .12s}
.side nav a:hover{background:var(--sidehover);color:var(--sidefg-strong)}
.side nav a.on{background:var(--side-on-bg);color:var(--side-on-fg);font-weight:700}
.side nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.side nav a.on svg{opacity:1}
.side nav a .cnt{margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:5px;
  background:var(--sidecard);border:1px solid var(--sideline);color:inherit;opacity:.9}
.side nav a.on .cnt{background:color-mix(in srgb,currentColor 14%,transparent);border-color:transparent}

.sideact{display:flex;flex-direction:column;gap:7px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--sideline)}
.sideact a{display:flex;align-items:center;gap:9px;height:38px;padding:0 11px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--sidefg)}
.sideact a:hover{background:var(--sidehover);color:var(--sidefg-strong)}
.sideact svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}

/* The merchant's own logo in the account chip, where initials would be. Logos
   are made for white (CR-1), so the chip stays white whatever sits behind it. */
.uchip .wlogo{flex:none;display:flex;align-items:center;justify-content:center;
  height:32px;min-width:32px;padding:3px 5px;border-radius:9px;background:#FFF;
  border:1px solid var(--line)}
.uchip .wlogo img{display:block;height:22px;width:auto;max-width:64px;object-fit:contain}
.av{width:32px;height:32px;border-radius:9px;background:var(--gold-tint);color:var(--gold-deep);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;
  letter-spacing:.3px}

/* --------------------------------------------------------------- work area -- */
.content{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--contentbg);
  border-radius:0 var(--appr) var(--appr) 0}
/* Fills the content area: no centred column, no width cap. Paragraphs keep
   their own reading width (.ph p, .card > .ch p), so only tables, cards and
   grids take the extra room. */
.content .inner{max-width:none;width:100%;margin:0;padding:26px 28px 40px}
/* Was opt-in extra width, back when the column was capped at 1220. Every page
   is full width now, so this is a no-op kept for the layouts that pass it. */
.content .inner-wide{max-width:none}

/* Top bar: search + quick actions + account. */
.tbarx{position:sticky;top:var(--appgap);z-index:30;display:flex;align-items:center;gap:14px;
  padding:12px 28px;background:var(--topbg);border-bottom:1px solid var(--topline);
  border-radius:0 var(--appr) 0 0;backdrop-filter:saturate(1.4) blur(6px)}
.srch{flex:1;max-width:430px;display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;
  border-radius:9px;background:var(--searchbg);border:1px solid var(--searchbd)}
.srch svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.srch input{border:0;background:none;outline:none;font:14px var(--sans);color:var(--ink);width:100%}
.srch input::placeholder{color:#98A0AD}
.srch kbd{font:700 10.5px var(--sans);color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:5px;padding:2px 5px;flex:none}
.tacts{margin-left:auto;display:flex;align-items:center;gap:8px}
.ibtn{width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:none;
  color:var(--slate);cursor:pointer;display:flex;align-items:center;justify-content:center;
  position:relative;transition:background .12s}
.ibtn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ibtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ibtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--error);border:1.5px solid var(--topbg)}
.umenu{position:relative;margin-left:4px}
.uchip{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;
  text-align:left;transition:border-color .12s,background .12s}
.uchip:hover{border-color:#C3C9D4;background:#FAFBFC}
.umenu.open .uchip{border-color:var(--gold);background:var(--gold-tint2)}
.uchip .nm{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.uchip .nm span{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
.uchip .cav{width:14px;height:14px;flex:none;stroke:var(--muted);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.umenu.open .uchip .cav{transform:rotate(180deg)}
.umenu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:212px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:6px;display:none;z-index:60;
  box-shadow:0 10px 40px rgba(27,33,48,.18)}
.umenu.open .umenu-pop{display:block}
.umenu-pop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--slate)}
.umenu-pop a:hover{background:#F5F6F9;color:var(--ink)}
.umenu-pop a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.umenu-pop hr{border:0;border-top:1px solid var(--line);margin:5px 2px}
.umenu-pop a.out{color:var(--error)}
.umenu-pop a.out:hover{background:color-mix(in srgb,var(--error) 8%,transparent);color:var(--error)}

/* Page header + breadcrumbs. */
.crumbs{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);
  margin-bottom:11px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--slate)}
.crumbs .sep{opacity:.45}
.crumbs b{color:var(--slate);font-weight:700}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
  margin-bottom:20px}
.ph h1{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.4px;margin:0}
.ph p{margin:5px 0 0;font-size:13.5px;color:var(--slate);max-width:62ch}
/* The trailing div of a page header is its action group — always a wrapping row,
   never a stack of full-width bars. */
/* The ACTION GROUP — the second child. `:last-child` alone also matches a header
   that has only its text block, turning the heading and its description into a
   side-by-side row; `:not(:first-child)` makes the rule mean what it says. */
.ph>div:last-child:not(:first-child){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ph>div:last-child:empty{display:none}

/* Stat strip. */
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:20px}
.kpi{background:var(--kpibg);border:1px solid var(--cardbd);border-radius:var(--cardr);
  box-shadow:var(--cardsh);padding:15px 17px}
.kpi .l{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted)}
.kpi .l .ic{width:26px;height:26px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.kpi .l .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.kpi .v{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.5px;margin:9px 0 0}
.kpi .s{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px}
.kpi .d{font-weight:700}.kpi .d.up{color:var(--success)}.kpi .d.down{color:var(--error)}

/* Financing performance: the kpi card's look, with a comparison line and the
   other two periods beneath. Three across, two on a tablet, one on a phone. */
.perf-periods{display:flex;flex-wrap:wrap;gap:6px 20px;margin:-6px 0 16px;font-size:12.5px;color:var(--muted)}
.perf-periods b{color:var(--ink);font-weight:700;margin-right:5px}
.perf{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
.pcard{background:var(--kpibg);border:1px solid var(--cardbd);border-radius:var(--cardr);
  box-shadow:var(--cardsh);padding:16px 18px;display:flex;flex-direction:column}
.pcard .l{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted)}
.pcard .l .ic{width:26px;height:26px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.pcard .l .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pcard .when{margin-top:14px;font-size:11px;font-weight:600;color:var(--muted)}
.pcard .v{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.6px;line-height:1.1;
  margin-top:2px;font-variant-numeric:tabular-nums}
.pcard .chg{align-self:flex-start;margin-top:8px;padding:3px 9px;border-radius:999px;font-size:12px;
  font-weight:700;background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted)}
.pcard .chg.up{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.pcard .chg.down{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
.pcard .cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--line)}
.pcard .cmp dt{font-size:11px;font-weight:600;color:var(--muted)}
.pcard .cmp dd{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.perf.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.perf.five{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Last month and the year to date stack, rather than sitting in two columns, so
   a narrow tile still has the width to keep the change chip on the same line as
   the figure it describes. */
.perf.five .pcard .v{font-size:25px}
.perf.five .pcard .cmp{grid-template-columns:1fr;gap:6px}
.perf.five .pcard .cmp dd{font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.perf.five .pcard .cmp dd .chg{margin:0;padding:2px 7px;font-size:10.5px}
@media (max-width:1360px){ .perf.five{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .perf.five{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* One filter above a whole page, rather than a control tucked into the header:
   it scopes every section below it, so it reads as a bar of its own. */
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;
  background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr)}
.fbar .f{margin:0;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted)}
.fbar .fld{height:40px;min-width:240px;flex:0 1 320px}
.fclear{display:inline-flex;align-items:center;gap:6px;margin-left:auto;background:none;border:0;
  padding:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;color:var(--gold-deep)}
.fclear svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fclear:hover{text-decoration:underline}

/* The running record along the bottom: four figures on one strip, deliberately
   flatter than the month's cards so they read as a footnote, not a headline. */
.ptot{margin-top:18px}
.ptrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.ptile{display:flex;align-items:center;gap:11px;padding:4px 0}
.ptile + .ptile{border-left:1px solid var(--line);padding-left:16px}
.ptile .ic{width:32px;height:32px;flex:none;border-radius:10px;background:var(--gold-tint);
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center}
.ptile .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ptile em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
.ptile b{display:block;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.5px;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
@media (max-width:900px){
  .ptrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptile + .ptile{border-left:0;padding-left:0}
}

/* Performance (client, 9/17): the funnel as four chevrons, each a step of the
   journey, with the share that got through standing in the gap between them.
   The client's own colors: blue, amber, green, gold. */
.fnl{padding:6px 6px 0;overflow:hidden}
.fnlrow{display:flex;align-items:stretch}
.fstep{flex:1 1 0;min-width:0;padding:16px 26px 18px 34px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
/* Keyed to the step, not the position: the gaps are siblings too. */
.fstep.s1{padding-left:18px;border-radius:12px 0 0 12px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.fstep.s4{padding-right:18px;border-radius:0 12px 12px 0;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22px 50%)}
/* Golt's colours, the same ramp as the Dashboard pipeline: the gold deepens
   as an application gets further along. */
.fstep.s1{background:#F6EBC8}
.fstep.s2{background:#F0DFAA}
.fstep.s3{background:#E8D08B}
.fstep.s4{background:#DFC069}
/* The icon sits above the name, in a chip tinted to its own step. */
.fstep .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center}
.fstep .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* White chips on the gold, so each icon reads at any depth of the ramp. */
.fstep .ic{background:#fff;color:var(--gold-deep);box-shadow:0 1px 2px rgba(27,33,48,.08)}
/* Two lines' worth whether the name needs them or not, so every figure below
   sits on the same line across the four steps. */
.fstep .l{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--slate);line-height:1.3;
  min-height:2.6em;display:flex;align-items:flex-end}
.fstep .v{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.8px;line-height:1.1;
  margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink)}
/* The gap between two chevrons, where the conversion stands. */
.fconv{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1.3;padding:0 4px}
.fconv b{font-size:13.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.fconv span{font-size:10.5px;font-weight:600;color:var(--muted);margin-top:2px}
/* Under each chevron: last month, its move, and the year so far. */
.fnlfoot{display:flex;padding:12px 0 14px}
/* Two lines, as the client's design has it: last month with its change on one,
   the year to date under it. Left to wrap on their own, the chip landed on a
   different line in each column. */
.fnlfoot>div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px;
  padding:0 14px;border-left:1px solid var(--line)}
.fnlfoot .fr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fnlfoot>div:first-child{border-left:0}
.fnlfoot .fgap{flex:0 0 84px;border-left:0;padding:0}
.fnlfoot .fl{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.fnlfoot .fl b{font-size:13.5px;font-weight:800;color:var(--ink);margin-left:5px;
  font-variant-numeric:tabular-nums}
.fnlfoot .chg{padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;
  background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted)}
.fnlfoot .chg.up{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.fnlfoot .chg.down{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
/* Narrow: the chevrons stack, and each conversion sits above the step it
   describes rather than beside it. */
@media (max-width:900px){
  .fnlrow{flex-wrap:wrap}
  .fstep,.fstep.s1,.fstep.s4{flex:1 1 100%;clip-path:none;border-radius:12px;padding:14px 18px;
    margin-bottom:6px}
  .fconv{flex:1 1 100%;flex-direction:row;gap:6px;justify-content:flex-start;padding:2px 18px 6px}
  .fnlfoot{flex-direction:column;gap:10px}
  .fnlfoot>div{border-left:0;padding:0 18px}
  .fnlfoot .fgap{display:none}
}

/* Settled volume through the month: a running total in its own panel, drawn
   over a 0-100 box so it scales with the card. Green, as the client's design
   has it; the day markers are HTML, which that stretched box would oval. */
.volpanel{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-top:8px}
.vchead{font-size:13.5px;font-weight:800;letter-spacing:-.1px;padding:14px 16px 0}
.vcbody{display:flex;gap:16px;align-items:stretch;padding:12px 16px 16px}
.vchart{flex:1;min-width:0}
.vcplot{display:flex;gap:10px;align-items:stretch}
.vcaxis{display:flex;flex-direction:column;justify-content:space-between;flex:none;
  font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;
  text-align:right;min-width:46px;padding:2px 0}
.vcarea{position:relative;flex:1;min-width:0;height:180px}
.vcarea svg{width:100%;height:100%;display:block;overflow:visible}
.vcarea svg line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.vcarea svg polygon{fill:rgba(31,146,84,.12);stroke:none}
.vcarea svg polyline{fill:none;stroke:#1F9254;stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.vcdot{position:absolute;width:7px;height:7px;margin:0 0 -3.5px -3.5px;border-radius:50%;
  background:#1F9254;box-shadow:0 0 0 2px var(--surface)}
.vcdays{position:relative;height:16px;margin:8px 0 0 56px}
.vcdays span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;font-weight:600;color:var(--muted)}
.vcdays span:first-child{transform:none}
.vcdays span:last-child{transform:translateX(-100%)}
/* This month's figure beside the line it draws. */
.vcsum{flex:0 0 168px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding-left:18px;border-left:1px solid var(--line);text-align:left}
.vcsum b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.6px;
  line-height:1.1;font-variant-numeric:tabular-nums}
.vcsum .w{font-size:11.5px;font-weight:600;color:var(--muted)}
.vcsum .chg{align-self:flex-start;margin-top:4px;padding:3px 9px;border-radius:999px;font-size:12px;
  font-weight:700;background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted)}
.vcsum .chg.up{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.vcsum .chg.down{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
@media (max-width:760px){
  .vcbody{flex-direction:column}
  .vcsum{flex:none;border-left:0;border-top:1px solid var(--line);padding:14px 0 0}
}
.lsec{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.2px;margin:4px 0 10px}
/* Lender Performance: a row per measure, a column per lender */
.cmpt th:not(:first-child),.cmpt td:not(:first-child){text-align:right}
.cmpt th a{color:inherit}
.cmpt td{vertical-align:top}
.cmpt .mlab{display:inline-flex;align-items:center;gap:9px;font-weight:600;white-space:nowrap}
.cmpt .mlab .ic{width:26px;height:26px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.cmpt .mlab .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmpt .val{display:block;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.cmpt .chg{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted);white-space:nowrap}
.cmpt .chg.up{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.cmpt .chg.down{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
@media (max-width:1100px){.perf,.perf.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.perf,.perf.four{grid-template-columns:1fr}}
/* Panel puts a gold rule on the stat tiles (inset, so the rounded corners stay clean). */
html[data-v="panel"] .kpi{box-shadow:inset 0 3px 0 var(--gold),var(--cardsh)}

/* ---------------------------------------------------- form page + rail ---- */
/* A form is narrow by nature. Rather than strand one card in an empty page,
   pair it with a rail that carries the context the form needs. */
.wizgrid{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:20px;align-items:start}
.wizcard{padding:24px}
.wizrail{display:grid;gap:16px;position:sticky;top:calc(var(--appgap) + 74px)}
.wizrail .card{padding:18px}
.wizrail .card>.ch{margin:-18px -18px 14px;padding:13px 18px}
.wnote p{font-size:13px;line-height:1.6;color:var(--slate);margin:0 0 11px}
.wnote p:last-child{margin-bottom:0}
.wnote .wcall{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
.krow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.krow:last-child{border-bottom:0;padding-bottom:0}
.krow span{color:var(--muted)}
.krow b{text-align:right;font-weight:700}

/* Wizard step rail — reads as progress, and says what each step will ask. */
.wsteps ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wsteps li{display:flex;gap:11px;align-items:flex-start;padding:8px 9px;border-radius:9px;
  transition:background .12s}
.wsteps li i{width:22px;height:22px;flex:none;border-radius:50%;background:var(--line);
  color:var(--muted);font:800 11px/22px var(--sans);text-align:center;font-style:normal}
.wsteps li span{font-size:12.5px;color:var(--muted);line-height:1.45;min-width:0}
.wsteps li span b{display:block;font-size:13px;color:var(--slate);font-weight:600}
.wsteps li.on{background:var(--gold-tint)}
.wsteps li.on i{background:var(--gold);color:var(--ink)}
.wsteps li.on span b{color:var(--ink);font-weight:700}
.wsteps li.done i{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.wsteps li.done i::before{content:'\2713'}
.wsteps li.done i{font-size:0}
.wsteps li.done i::before{font-size:12px}

/* Section tabs under the page header. */
/* The row's line is an inset shadow, not a border: the active tab's underline
   used to reach it with margin-bottom:-1px, and with overflow-x:auto that 1px
   overflowed and Windows drew a scrollbar a few pixels tall -- just its arrows.
   The row still scrolls sideways on a narrow screen, without a visible bar. */
.tabs{display:flex;gap:2px;box-shadow:inset 0 -1px 0 var(--line);margin:0 0 16px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:9px 13px;font-size:13.5px;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--slate)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--gold)}

/* ------------------------------------------------------------------ table -- */
/* A titled section INSIDE a card -- the Team block in Settings. Not .ch: that
   is a card's own header strip, with negative margins that pull it to the card
   edges, and a second one inside a card sat flush against everything around it.
   This is a plain header with room to breathe. */
.sechead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:0 0 18px}
.sechead h3{font-family:var(--display);font-weight:800;font-size:15px;margin:0;letter-spacing:-.2px}
.sechead p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:60ch}
.sechead .btn{flex:none;height:38px;font-size:13.5px}
.tbar.mt{margin-top:2px}
.tbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.tbar .fld{height:38px;font-size:13.5px;border-radius:9px;padding:0 11px}
.tbar input.fld{flex:0 1 320px;min-width:180px}
.tbar select.fld{flex:0 0 auto;width:auto;min-width:0;padding-right:8px}
.tbar .sortby{margin-left:auto}
.tbar .drange{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.tbar input.fld.datef{flex:0 0 auto;width:auto;min-width:0}
.tbar .sp{margin-left:auto}
.twrap{background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr);
  box-shadow:var(--cardsh);overflow-x:auto;max-width:100%}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
.t th{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:12px 16px;background:var(--thbg);border-bottom:1px solid var(--line)}
.t td{padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.t tbody tr:last-child td{border-bottom:0}
.t tbody tr{transition:background .1s}
.t tbody tr:hover{background:var(--rowhover)}
.t b{font-weight:600}
/* Two-line identity cell with initials — fills the table's dead space. */
.idc{display:flex;align-items:center;gap:10px}
.idc .av{width:30px;height:30px;border-radius:8px;font-size:11px}
.idc .tx b{display:block;font-weight:700;font-size:13.5px}
.idc .tx span{display:block;color:var(--muted);font-size:11.5px}

/* --------------------------------------------------------------- overlays -- */
.ov{display:none;position:fixed;inset:0;background:rgba(27,33,48,.5);z-index:100;
  align-items:center;justify-content:center;padding:20px}
.ov.open{display:flex}
.mdl{background:var(--surface);border-radius:16px;padding:24px;width:100%;max-width:460px;
  max-height:88dvh;overflow-y:auto;box-shadow:0 20px 60px rgba(27,33,48,.3)}
.mdl h3{font-family:var(--display);font-weight:800;font-size:18px;margin:0 0 6px;overflow-wrap:anywhere}
.mdl p.s{font-size:13.5px;color:var(--slate);margin:0 0 18px}
.mdl .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw;
  box-shadow:0 8px 30px rgba(0,0,0,.28)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------------------------- auth -- */
/* One markup, two sign-in compositions — the same idea as the portal shells.
   A is a direct rebuild of the reference login; B takes the same ingredients
   (brand block, white form, accent) into its own arrangement so the sign-in
   matches the portal it opens.

     A ink     diagonal ink panel, gold field, card floating across the seam
     B panel   bronze brand band, card overlapping it on warm paper

   Field styling (.a2*) is shared by both. */
.auth{position:relative;min-height:100dvh;display:flex}
.auth-panel{display:flex;flex-direction:column;justify-content:center}
/* Wrapper so the lockup and the tagline share one box: the box is centred in
   the panel, and both sit flush to its left edge — the logo therefore starts
   exactly where the line below it starts. */
.auth-brand{width:100%;display:flex;flex-direction:column}
html[data-v="panel"] .auth-brand{align-items:center}
.auth-lock{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.auth-lock img{height:clamp(38px,5vw,62px);width:auto;flex:none}
.auth-lock span{font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(26px,3.6vw,44px);letter-spacing:-1px;line-height:1;white-space:nowrap}
.auth-tag{margin:clamp(12px,1.8vw,22px) 0 0;color:rgba(255,255,255,.9);
  font-size:clamp(14px,1.6vw,19px);line-height:1.4;font-weight:400}
.auth-card{position:relative;z-index:2;width:100%;max-width:392px;background:#fff;
  border-radius:4px;padding:30px 28px;box-shadow:0 10px 44px rgba(27,33,48,.20)}
/* The lockup links out to the marketing site; the anchor must not add a
   baseline gap under the image or change its size. */
.auth-lock a,.auth-mini a{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.auth-mini{display:none;align-items:center;gap:10px;margin-bottom:24px}
.auth-mini img{height:30px}
.auth-card h1{font-family:var(--display);font-weight:800;font-size:21px;margin:0 0 4px}
/* A heading with no sub-line under it carries its own bottom gap. */
.auth-card h1.solo{margin-bottom:26px}
.auth-card .sub{font-size:13px;color:var(--muted);margin:0 0 22px;line-height:1.5}

/* -- sign-in: gold band, card overlapping it on warm paper ---------------- */
html[data-v="panel"] .auth{flex-direction:column;align-items:center;justify-content:flex-start;
  background:var(--paper);padding:0 0 56px}
/* Band is full-bleed (no side gutters) and deep enough that the paper below
   the overlapping card reads as balance rather than leftover space. */
html[data-v="panel"] .auth-panel{width:100%;min-height:40vh;align-items:center;text-align:center;
  background:var(--gold);
  padding:clamp(44px,6vw,68px) 24px clamp(96px,11vw,132px);margin-bottom:0}
html[data-v="panel"] .auth-lock{justify-content:center}
html[data-v="panel"] .auth-lock img{filter:brightness(0)}
html[data-v="panel"] .auth-tag{color:rgba(27,33,48,.8);max-width:46ch}
html[data-v="panel"] .auth-card{max-width:424px;width:calc(100% - 40px);border-radius:16px;padding:32px 30px;
  margin-top:clamp(-90px,-8vw,-60px);
  box-shadow:0 2px 8px rgba(27,33,48,.07),0 22px 54px rgba(27,33,48,.16)}
html[data-v="panel"] .a2btn{border-radius:8px;height:46px}
html[data-v="panel"] .a2f input,
html[data-v="panel"] .a2code input{border-radius:8px;height:42px}
html[data-v="panel"] .a2pw input{border-radius:8px 0 0 8px;background:#FBF9F4}
html[data-v="panel"] .a2pw button{border-radius:0 8px 8px 0;width:46px}

.a2f{margin-bottom:19px}
.a2f>label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.a2f input{width:100%;height:38px;border:1px solid #CFD4DC;border-radius:3px;
  padding:0 12px;font:14px var(--sans);color:var(--ink);outline:none;background:#fff}
.a2f input::placeholder{color:#A3AAB6}
.a2f input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 32%,transparent)}
/* Password sits in a segmented control with the reveal button, as per reference. */
.a2pw{display:flex}
.a2pw input{border-radius:3px 0 0 3px;border-right:0;background:#EDF0FB}
.a2pw input:focus{background:#fff}
.a2pw button{width:42px;flex:none;border:1px solid #CFD4DC;border-radius:0 3px 3px 0;
  background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0}
.a2pw button:hover{background:#F5F6F9}
.a2pw button svg{width:19px;height:19px;fill:currentColor}

.a2row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px}
.a2row label{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);
  font-weight:500;cursor:pointer}
.a2row label input{width:17px;height:17px;margin:0;accent-color:var(--gold)}
.a2row a{font-size:13px;font-weight:500;color:var(--link)}
.a2row a:hover{text-decoration:underline}

.a2btn{width:100%;height:44px;border:0;border-radius:3px;background:var(--gold);
  color:var(--ink);font:700 16.5px var(--sans);cursor:pointer;display:flex;
  align-items:center;justify-content:center;text-decoration:none;transition:filter .12s}
.a2btn:hover{filter:brightness(1.06)}

.a2or{display:flex;align-items:center;gap:16px;margin:26px 0;color:var(--muted);font-size:13px}
.a2or::before,.a2or::after{content:'';height:1px;background:#D8DCE3;flex:1}
.a2sso{display:block;text-align:center;font-size:13px;font-weight:500;
  color:var(--link);margin-bottom:4px}
.a2sso:hover{text-decoration:underline}
.a2note{text-align:center;font-size:11.5px;color:var(--muted);margin:20px 0 0;line-height:1.55}
/* The tick above "You're all set" in the post-signup dialog. */
.okmark{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--gold-tint);color:var(--gold-deep);margin:0 0 12px}
.okmark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* Said once, at the top of the sign-in card: an account just created, or a
   session just revoked. Loud enough to answer "did that work?". */
.a2flash{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;font-weight:600;
  border-radius:10px;padding:11px 13px;margin:0 0 18px}
.a2flash.ok{background:var(--gold-tint2);border:1px solid var(--gold);color:var(--ink)}
.a2flash.bad{background:#FDF1F0;border:1px solid #E7B4AE;color:#8C2F22}
.a2flash svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Verification-code boxes reuse the card, sized to the same rhythm. */
.a2code{display:flex;gap:8px;margin-bottom:20px}
.a2code input{flex:1 1 0;min-width:0;height:50px;border:1px solid #CFD4DC;border-radius:3px;
  text-align:center;font:700 20px var(--sans);color:var(--ink);outline:none;background:#fff;padding:0}
.a2code input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 32%,transparent)}

.ver{position:absolute;right:clamp(16px,2vw,26px);bottom:18px;z-index:4;
  font:800 11.5px var(--sans);letter-spacing:.7px;color:rgba(27,33,48,.62)}

/* -- auth responsive ------------------------------------------------------ --
   Only A has to change shape: its diagonal panel needs width to read, so below
   900px it collapses to a centred card on the gold field with the lockup above.
   B, C and D are already single-column, so they only need tighter spacing. */
@media(max-width:900px){
  html[data-v="panel"] .auth{padding:0 0 44px}
  html[data-v="panel"] .auth-panel{padding:64px 22px 96px}
  .auth-card{max-width:400px}
}
@media(max-width:520px){
  html[data-v="panel"] .auth{padding:0 0 calc(56px + env(safe-area-inset-bottom))}
  html[data-v="panel"] .auth-panel{padding:52px 18px 88px}
  html[data-v="panel"] .auth-card{padding:24px 20px}
  .auth-panel{margin-bottom:24px}
  .a2code input{height:46px;font-size:18px}
  .ver{bottom:auto;top:26px;right:16px}
  html[data-v="panel"] .ver{color:rgba(27,33,48,.6)}
}

/* Centred pages that are not the split auth layout (2FA fallback, redirects). */
.center-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.center-card{width:100%;max-width:520px}

/* ---------------------------------------------------------- misc from v2 -- */
/* Start an application: the form with a progress rail beside it. A stepper says
   which step you are on; the rail says how many are left, what each one wants,
   and what happens after the last -- which is what a merchant sitting with an
   applicant actually asks. */
.assist{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
/* The form takes the width the page has rather than a fixed 680: at this size
   the paired fields (first/last, city/state) read as pairs instead of stacking
   into a narrow column, which is what made it look cramped beside the rail. */
.assist>.card{padding:26px 30px 28px}
.assist-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:20px}
.assist-rail .card{padding:22px 22px 24px}
.assist-rail h3{font-size:16.5px;font-weight:800;margin:0 0 14px;color:var(--ink);letter-spacing:-.2px}
.prog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.prog li{display:flex;gap:12px;align-items:flex-start;padding:9px 11px;border-radius:11px}
.prog li.now{background:var(--gold-tint)}
.prog .n{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800;background:#E7E9EE;color:var(--muted)}
.prog li.now .n{background:var(--gold);color:var(--ink)}
.prog li.done .n{background:var(--gold-tint2);color:var(--gold-deep)}
.prog b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.prog li b+span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.prog li.done b{color:var(--slate)}
.nextcard p{font-size:14px;line-height:1.55;color:var(--slate);margin:0 0 12px}
.nextcard p:last-child{margin-bottom:0}
.nextcard hr{border:none;border-top:1px solid var(--line);margin:16px 0 12px}
/* Below this the two columns will not both fit; the rail goes under the form,
   where the form's own step chip is still carrying the progress. */
@media(max-width:1080px){
  .assist{grid-template-columns:minmax(0,1fr)}
  .assist-rail{position:static}
}
/* Lenders: a list of marks, and the drawer behind each one. Taken from the
   prototype, then stripped -- the card carries a logo and a name because the
   only decision on this page is which programs to present, and that is in the
   drawer. */
.lcard{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:14px 16px}
.lcard+.lcard{margin-top:10px}
.lbrand{display:flex;align-items:center;gap:16px;min-width:0}
/* Always white: a bank's mark is drawn for white, and the page tint is not it. */
.llogo{flex:none;width:150px;height:52px;background:#fff;border:1px solid var(--line);
  border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 12px}
.llogo img{max-height:38px;max-width:126px;object-fit:contain}
.llogo span{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:-.2px;
  text-align:center;line-height:1.15;color:var(--ink)}
.lname{font-size:15px;font-weight:800;letter-spacing:-.2px}
.lctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none}
.btn.xs{height:38px;padding:0 16px;font-size:13.5px;border-radius:10px}

/* Dashboard (client, 9/17): this month at a glance, in the Golt palette. Five
   figures, the pipeline, where the applications stand and what just happened,
   then the money and the approval rate. */
.dhead{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.dtiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.dtile{background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr);
  box-shadow:var(--cardsh);padding:16px 18px;display:flex;flex-direction:column}
.dtile .l{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--slate)}
.dtile .l .ic{width:28px;height:28px;border-radius:9px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.dtile .l .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dtile .v{font-family:var(--display);font-weight:800;font-size:29px;letter-spacing:-.7px;line-height:1.1;
  margin-top:10px;font-variant-numeric:tabular-nums}
.dtile .chg{align-self:flex-start;margin-top:8px;padding:3px 9px;border-radius:999px;font-size:12px;
  font-weight:700;background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted)}
.dtile .chg.up{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.dtile .chg.down{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
.dtile .w{font-size:11px;font-weight:600;color:var(--muted);margin-top:6px}
@media (max-width:1150px){.dtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.dtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The pipeline: the same four steps as Performance, in one bar. */
.dsec{margin-bottom:18px}
/* The padding is the band the conversion figures hang in, below the chevrons. */
.dpipe{display:flex;align-items:stretch;margin-top:12px;padding-bottom:46px}
.dstep{flex:1 1 0;min-width:0;padding:16px 22px 16px 34px;margin-left:-22px;text-align:center;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
.dstep.s1{margin-left:0;padding-left:22px;border-radius:12px 0 0 12px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.dstep.s4{padding-right:22px;border-radius:0 12px 12px 0;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22px 50%)}
/* Golt's own colours, as the client asked for this page: the gold deepens as
   an application gets further along, rather than the example's blue and green. */
.dstep.s1{background:#F6EBC8}
.dstep.s2{background:#F0DFAA}
.dstep.s3{background:#E8D08B}
.dstep.s4{background:#DFC069}
.dstep b{display:block;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.dstep span{display:block;font-size:11.5px;font-weight:600;color:var(--slate);margin-top:2px}
/* The conversion figures sit under the SEAM between the two steps they compare,
   as the client's design has them, rather than under a step's middle. Each is a
   zero-width item in the same flex row, dropped in between two steps, so it
   lands on the chevron's point however wide the steps end up. */
.dconv{flex:0 0 0;width:0;position:relative}
.dconv>div{position:absolute;top:100%;left:0;transform:translateX(-50%);margin-top:12px;
  text-align:center;line-height:1.3;white-space:nowrap}
.dconv b{display:block;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--ink)}
.dconv span{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
@media (max-width:900px){
  .dpipe{flex-direction:column;padding-bottom:0}
  .dstep,.dstep.s1,.dstep.s4{clip-path:none;margin-left:0;border-radius:12px;margin-bottom:6px;
    padding:12px 18px;text-align:left}
  .dconv{display:none}
}

/* Two cards side by side, twice. */
.dsplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
/* Admin dashboard: three cards across, the six-month table taking the width it
   needs and the two round charts sharing what is left. They stretch to the same
   height so the row reads as one band rather than three cards at three
   different heights. */
.dtrio{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,0.95fr) minmax(0,1.6fr);
  gap:18px;margin-bottom:18px;align-items:stretch}
/* Each card lays its own content out from the top, so matching the tallest
   card's height leaves space underneath rather than stretching a donut. */
.dtrio>.card{display:flex;flex-direction:column}
.dtrio>.card>.ch{flex:none}
/* A smaller wheel in these narrow columns: at 170px the legend beside it had so
   little room that "Loan agreement presented" broke across two lines. The chart
   reads the same at 132px and every label now fits on one. */
.dtrio .ddonut svg{width:120px;height:120px}
.dtrio .ddial svg{width:112px;height:112px}
.dtrio .ddonut{gap:16px;margin-top:12px}
/* The change sits beside the dial, as the client's design has it, rather than
   dropping underneath it. */
.dtrio .ddial{gap:12px;margin-top:12px;flex-wrap:nowrap;align-items:center}
.dtrio .dside{min-width:0;flex:1}
.dtrio .dside .chg{white-space:nowrap}
/* 196px is the longest status ("Loan agreement presented", 153px) plus its dot
   and count. Below that the legend drops under the wheel rather than squeezing
   a label onto two lines. */
.dtrio .dlegend{min-width:196px}
.dtrio .dlegend li{gap:8px;font-size:12px;padding:5px 0}
.dtrio .dlegend li b{min-width:18px;font-size:12.5px}
.dtrio .dlegend li .pc{font-size:10.5px;padding-left:6px}
/* Six columns of figures in a third of the row: the table only fits if its
   cells are as tight as the numbers in them. Tight enough that the table asks
   for no more width than it needs, leaving the two charts room to breathe. */
.dtrio .t.sm th,.dtrio .t.sm td{padding:7px 5px;font-size:11px}
.dtrio .t.sm th{font-size:9px;letter-spacing:.2px}
.dtrio .t.sm td:first-child,.dtrio .t.sm th:first-child{padding-left:2px}
.dtrio .t.sm td:last-child,.dtrio .t.sm th:last-child{padding-right:2px}
.dtrio .card>.ch p{font-size:11.5px}
/* The industry average sits on the card's foot rather than floating wherever
   the dial above it happens to end, so the matched height reads as deliberate. */
.dtrio .dind{margin-top:auto}
.dtrio .ddial{flex:none}
/* The change keeps its own line so a long figure never wraps mid-chip; the year
   so far sits in a footer opposite the caption. */
.dtile .dfoot{display:flex;align-items:baseline;justify-content:space-between;gap:4px 8px;
  margin-top:6px;flex-wrap:wrap}
.dtile .dfoot .w{white-space:nowrap}
.dtile .dfoot .w{margin-top:0}
.dtile .yt{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.dtile .yt b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
/* The share each status holds, pushed to the end of its legend row. */
.dlegend li .pc{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* "View all" in a card header, sitting with the heading rather than under it. */
/* A quiet text action: "Edit", "Add ID", "View all". Styled on the class
   itself, not only inside a card header — the same button appears in table
   rows and toolbars, and there it was falling back to browser button chrome. */
.chlink{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--gold-deep);
  white-space:nowrap;text-align:left}
.chlink:hover{text-decoration:underline}
.ch .chlink{margin-left:auto}
/* A rank chip for the two leaderboards. */
.rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:7px;background:var(--gold-tint);color:var(--gold-deep);font-size:11.5px;
  font-weight:800;font-variant-numeric:tabular-nums}
/* Denser rows, for the tables that share a row with other cards. Figures never
   wrap: a column of money is unreadable broken across two lines. */
.t.sm th,.t.sm td{padding:9px 8px;font-size:12.5px;white-space:nowrap}
.t.sm th{font-size:10px;letter-spacing:.3px}
.t.sm td:nth-child(2){white-space:normal}
/* Six columns of figures need real width. Below it the table takes the whole
   row and the two charts share the one above, rather than every column being
   squeezed until the money is cut off. */
@media (max-width:1400px){
  .dtrio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dtrio>.card:last-child{grid-column:1 / -1}
}
@media (max-width:820px){
  .dtrio,.dtrio>.card:last-child{grid-template-columns:minmax(0,1fr);grid-column:auto}
}
@media (max-width:1000px){.dsplit{grid-template-columns:1fr}}

/* The status wheel and its legend. */
.ddonut{display:flex;align-items:center;gap:22px;margin-top:14px;flex-wrap:wrap}
.ddonut svg{width:170px;height:170px;flex:none;transform:rotate(-90deg)}
.ddonut circle{fill:none;stroke-width:5}
.ddonut circle.ring{stroke:var(--line)}
.ddonut text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;fill:var(--ink)}
.ddonut text.n{font:800 7px var(--display);font-variant-numeric:tabular-nums}
.ddonut text.t{font:600 2.8px var(--sans);fill:var(--muted)}
.dlegend{list-style:none;margin:0;padding:0;flex:1;min-width:150px}
.dlegend li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate);
  padding:5px 0}
.dlegend li i{width:9px;height:9px;border-radius:50%;flex:none}
.dlegend li b{font-size:13px;font-weight:800;color:var(--ink);min-width:20px;
  font-variant-numeric:tabular-nums}
.dlegend li.none{color:var(--muted)}

/* What just happened. */
.dact{list-style:none;margin:12px 0 0;padding:0}
.dact li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);
  font-size:12.5px}
.dact li:first-child{border-top:0}
.dact li.none{color:var(--muted);justify-content:flex-start}
.dact .ic{width:28px;height:28px;border-radius:9px;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.dact .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dact .what{font-weight:600;color:var(--ink);flex:1;min-width:0}
.dact .who{color:var(--muted);white-space:nowrap}
.dact .amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:72px;
  text-align:right}
.dact .when{color:var(--muted);white-space:nowrap;min-width:48px;text-align:right}

/* Three bars against a money axis, and the dial beside them. The plot box is
   exactly the axis range — the ticks, the grid lines and the bar heights are
   all a percentage of the same 190px, so a bar meets the line it should. The
   padding above the plot is where each bar's figure sits, so a bar at the top
   of the scale still has room for its own label. */
.dchart{display:flex;gap:10px;margin-top:14px;padding-top:24px}
.daxis{position:relative;flex:none;width:46px;height:190px}
.daxis span{position:absolute;right:0;transform:translateY(-50%);font-size:10.5px;font-weight:600;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dplot{position:relative;flex:1;min-width:0}
.dgrid{position:absolute;left:0;right:0;top:0;height:190px}
.dgrid i{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.dbars{position:relative;display:flex;align-items:flex-end;gap:18px;height:190px;padding:0 6px}
.dbar{flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;height:100%}
.dbar .col{position:relative;display:block;width:100%;max-width:96px;border-radius:8px 8px 0 0}
.dbar b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;
  font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlabs{display:flex;gap:18px;padding:9px 6px 0}
.dlabs span{flex:1 1 0;min-width:0;font-size:11.5px;font-weight:600;color:var(--muted);
  text-align:center}
.ddial{display:flex;align-items:center;gap:20px;margin-top:14px;flex-wrap:wrap}
.ddial svg{width:170px;height:170px;flex:none;transform:rotate(-90deg)}
.ddial circle{fill:none;stroke-width:5}
.ddial circle.ring{stroke:var(--line)}
.ddial text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;fill:var(--ink)}
.ddial text.n{font:800 6.5px var(--display);font-variant-numeric:tabular-nums}
.ddial text.t{font:600 2.8px var(--sans);fill:var(--muted)}
.dside{flex:1;min-width:160px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.dside .chg{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted)}
.dside .chg.up{background:color-mix(in srgb,var(--success) 11%,transparent);color:var(--success)}
.dside .chg.down{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}
.dside .w{font-size:11.5px;font-weight:600;color:var(--muted)}
/* The market figure under the dial: theirs, not ours, so it is labelled and
   sits apart from the merchant's own rate. */
.dind{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);width:100%}
.dind .l{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.dind .ii{width:14px;height:14px;border-radius:50%;background:var(--line2);color:var(--surface);
  font:800 9px var(--sans);display:flex;align-items:center;justify-content:center;cursor:help}
.dind b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.dind .bar{flex:1 1 120px;height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.dind .bar i{display:block;height:100%;border-radius:999px;background:var(--gold)}

/* Programs (client, 9/17): a card per lending partner carrying what its
   programs publish, and the panel behind "View programs" where the merchant
   decides what their applicants see. Gold for the partner, quiet greys around
   it, and one tinted chip per stat so three figures read as three things. */
.pgrid{display:flex;flex-direction:column;gap:14px}
.pgcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(27,33,48,.04);overflow:hidden;transition:border-color .14s,box-shadow .14s}
.pgcard:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(27,33,48,.07)}
.pgtop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 18px}
.pgbrand{display:flex;align-items:center;gap:14px;min-width:0}
/* Always white: a bank's mark is drawn for white, and the page tint is not it. */
.pglogo{flex:none;width:76px;height:52px;background:#fff;border:1px solid var(--line);
  border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 8px}
.pglogo img{max-height:36px;max-width:60px;object-fit:contain}
.pglogo.pgtext{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:-.2px;
  text-align:center;line-height:1.15;color:var(--ink);padding:0 6px}
.pgname{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.pgname b{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.pgbtn{height:40px;padding:0 16px;font-size:13.5px;border-radius:10px;flex:none;
  display:inline-flex;align-items:center;gap:8px}
.pgbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.pgstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  padding:0 18px 16px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.pgstat{display:flex;align-items:center;gap:10px;min-width:0;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);padding:10px 12px}
.pgstat>span:last-child{display:flex;flex-direction:column;min-width:0}
.pgstat em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--muted)}
.pgstat b{font-size:13.5px;font-weight:800;letter-spacing:-.1px;white-space:nowrap}
.pgstat .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center}
.pgstat .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pgstat .ic.gold{background:var(--gold-tint);color:var(--gold-deep)}
.pgstat .ic.blue{background:#EAF0FB;color:#2B5BA8}
.pgstat .ic.green{background:#E7F4EC;color:#1F7A4C}
@media (max-width:720px){.pgstats{grid-template-columns:1fr}}

/* The panel's own rows: the program, its figures, and the one switch. */
.pgclose{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--slate);cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.pgclose:hover{border-color:var(--line2);color:var(--ink)}
.pgclose svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pgrow{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:14px 14px 4px;margin-bottom:12px}
.pgrow.on{border-color:var(--gold);background:var(--gold-tint2)}
.pgrhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pgrhead b{font-size:14px;font-weight:800;letter-spacing:-.1px}
.pgstats.sm{padding:0 0 14px;border-top:0;padding-top:0;margin-top:0;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.pgstats.sm .pgstat{padding:8px 9px;gap:8px;background:var(--surface)}
/* The panel is narrow: a figure wraps here rather than being cut off. */
.pgstats.sm .pgstat b{font-size:12px;white-space:normal;overflow-wrap:anywhere}
.pgstats.sm .pgstat em{font-size:10px}
.pgstats.sm .ic{width:26px;height:26px;border-radius:8px}
.pgnote{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;padding:11px 13px;
  border-radius:10px;background:var(--gold-tint2);border:1px solid var(--gold-tint);
  font-size:12.5px;line-height:1.5;color:var(--slate)}
.pgnote svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:var(--gold-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* A centred dialog, sharing the drawer's scrim. */
.modal{position:fixed;inset:0;z-index:91;display:flex;align-items:center;justify-content:center;
  padding:18px;pointer-events:none}
.modal>.card{pointer-events:auto}

/* The drawer. A side panel rather than a page: what it holds is a short list of
   switches, and a whole route for that made it feel further away than it is. */
.drawer-scrim{position:fixed;inset:0;z-index:90;background:rgba(15,20,30,.45)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(500px,100%);
  background:var(--cardbg,#fff);border-left:1px solid var(--cardbd);box-shadow:-18px 0 46px rgba(0,0,0,.16);
  display:flex;flex-direction:column;animation:drawer-in .18s ease}
@keyframes drawer-in{from{transform:translateX(14px);opacity:.6}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-body{padding:16px 20px 24px;overflow-y:auto;flex:1}
.drawer-body .pblock:first-child{margin-top:0}

/* One program, and the offers under it */
.pblock{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px;background:var(--surface)}
.pblock.dim{opacity:.55}
.phead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;
  background:var(--paper);border-bottom:1px solid var(--line)}
.phead .pn{font-size:14px;font-weight:700}
.phead .pc{font-size:11.5px;color:var(--muted);margin-top:2px;font-family:ui-monospace,Menlo,monospace}
.orow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line)}
.orow:last-child{border-bottom:0}
.orow .ot{font-size:13.5px;font-weight:600}
.orow .od{font-size:12px;color:var(--muted);margin-top:2px}
.orow.offo .ot,.orow.offo .od{opacity:.5}
.oinfo{flex:1;min-width:170px}
/* Cards whose header notes are all SHORT captions rather than sentences.
   .card>.ch p is text-align:left inside min-width:38ch, so a 210px caption sits
   in a 300px block and leaves 90px of slack -- the note looks parked at random
   instead of at the card's edge.

   Opt-in per page, not global: two thirds of our notes are full sentences, and
   a sentence right-aligned across a card reads as a mistake. */
.chright .card>.ch p{text-align:right}

.g2{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.g12{display:grid;gap:18px;grid-template-columns:1fr 2fr}
.g4{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);max-width:880px}
.g2>*,.g12>*,.g4>*{min-width:0}
.tiers{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:16px}
.tier{background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr);
  box-shadow:var(--cardsh);padding:16px}
.tier p{font-size:13px;font-weight:800;margin:0 0 12px}
.tier .e{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:#FAFBFC;
  border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;margin-bottom:8px}
.tier .e span{color:var(--muted);cursor:grab}
/* The row's three parts. .e and .tier are the page's original design, still in
   this file; these add the ordinal, the amount band and the controls that the
   table version had and the card version still needs. */
/* One line: grip, ordinal, name -- the row from this page's original design.
   The amount band lived here briefly and pushed the row to two lines; it is on
   the Lenders page, which is where a lender's limits belong. */
.tier .e{display:flex;align-items:center;gap:8px;cursor:default}
.tier .e.off{opacity:.55}
.tier .egrip{flex:none;display:grid;place-items:center;width:12px;cursor:grab;color:var(--muted)}
.tier .egrip svg{width:10px;height:16px;fill:currentColor}
.tier .e.is-dragging{opacity:.4;border-style:dashed}
.tier .e.is-dragging .egrip{cursor:grabbing}
.tier .eno{flex:none;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.tier .ewho{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier .emeta{flex:none;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
/* Hidden until the row is hovered, so the resting state is the original design. */
.tier .eoff{flex:none;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;line-height:1;opacity:0}
.tier .e:hover .eoff,.tier .eoff:focus-visible{opacity:1}
.tier .eoff:hover{background:var(--line);color:var(--ink)}
.crange{display:inline-flex;gap:5px;flex-wrap:wrap;max-width:230px}
.crange span{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;
  border:1px solid var(--line);white-space:nowrap}
.crange span.on{background:var(--gold-tint);color:var(--gold-deep);
  border-color:color-mix(in srgb,var(--gold) 38%,transparent)}
.crange span.off{color:var(--muted);opacity:.45}
.svcchip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line2);background:var(--surface);font-size:13px;font-weight:600;
  color:var(--slate);cursor:pointer;user-select:none;transition:.12s}
.svcchip:hover{border-color:#BFC6D1}
.svcchip.on{background:var(--gold-tint);border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  color:var(--gold-deep)}
.svcchip.on::before{content:'✓ '}
.invrow{display:grid;grid-template-columns:1fr 1fr minmax(150px,.7fr);gap:14px;margin-top:14px}
.invrow label.f{margin-bottom:6px}
.invacts{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.invacts .btn{height:42px;font-size:14px;padding:0 18px}
.lnk{display:inline-flex;align-items:center;gap:8px}
.lnk a.u{font-weight:600;color:var(--link)}
.lnk a.u:hover{text-decoration:underline}
.icpy{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);
  cursor:pointer;transition:.12s}
.icpy:hover{color:var(--ink);border-color:#C3C9D4;background:#F7F8FA}
.icpy.done{color:var(--success);border-color:var(--success)}
.icpy svg{width:13px;height:13px;display:block}
.logo-slot{height:46px;display:flex;align-items:center}
.logo-slot img{max-height:46px;max-width:230px;object-fit:contain}
.homelink{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--muted)}
.homelink::before{content:'\2190'}
.homelink:hover{color:var(--slate)}

/* ------------------------------------------------------------ doc vault --- */
.vault{max-width:1100px}
.vbc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:15px;font-weight:700}
.vbc a{display:inline-flex;align-items:center;gap:6px;color:var(--slate)}
.vbc a:last-child{color:var(--ink)}
.vbc a:hover{color:var(--link)}
.vbc .vsep{color:var(--muted);font-weight:600}
.vbc svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.vtbl th.th-sort{cursor:pointer;user-select:none}
.vtbl th.th-sort:hover{color:var(--ink)}
.vtbl .ic{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;vertical-align:middle;margin-right:10px;flex:none}
.vtbl .ic.fold{background:var(--gold-tint);color:var(--gold-deep)}
.vtbl .ic.doc{background:color-mix(in srgb,#C0392B 12%,transparent);color:#C0392B}
.vtbl .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.vtbl a.nm{font-weight:600;color:var(--ink)}
.vtbl a.nm:hover{color:var(--link);text-decoration:underline}
.vtbl .vsz{font-size:11px;color:var(--muted);margin-left:9px;font-family:ui-monospace,Menlo,monospace}
.vtbl td .ncell{display:inline-flex;align-items:center}
.vnew{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:1px 6px;
  border-radius:5px;background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);
  margin-left:9px;vertical-align:middle}
.vacts{white-space:nowrap}
.vbtn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:8px;
  font-size:12px;font-weight:700;border:1px solid var(--line2);background:var(--surface);
  color:var(--slate);cursor:pointer;margin-right:6px}
.vbtn:hover{background:#F7F8FA;border-color:#BFC6D1}
.vbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;display:block}
.vbtn.sq{padding:0;width:32px;justify-content:center;color:var(--gold-deep)}
.vbtn.sq:hover{background:var(--gold-tint);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.vbtn.del{color:var(--error);border-color:color-mix(in srgb,var(--error) 28%,transparent)}
.vbtn.del:hover{background:color-mix(in srgb,var(--error) 8%,transparent)}
.fico{display:inline-flex;gap:4px;margin-left:12px}
.fico .vbtn.sq{height:28px;width:28px;margin-right:0}
.vgrip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:26px;
  margin-right:4px;color:var(--muted);cursor:grab;border-radius:6px;flex:none}
.vgrip:hover{color:var(--slate);background:#F4F5F7}
.vgrip:active{cursor:grabbing}
.vgrip svg{width:15px;height:15px;fill:currentColor;stroke:none;pointer-events:none}
.vtbl tbody tr.drop-hi>td{background:var(--gold-tint);box-shadow:inset 0 0 0 1.5px var(--gold)}
.vbc a.drop-hi{background:var(--gold-tint);border-radius:7px;box-shadow:0 0 0 1.5px var(--gold)}
.vdz{margin-top:14px;border:1.5px dashed var(--line2);border-radius:12px;background:#FAFBFC;
  padding:16px 18px;display:flex;align-items:center;gap:14px;color:var(--slate);font-size:13.5px;
  line-height:1.5;transition:border-color .15s,background .15s}
.vdz.drop-hi{border-color:var(--gold);background:var(--gold-tint)}
.vdz b{color:var(--ink)}
.vdz .dzic{width:40px;height:40px;border-radius:11px;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.vdz .dzic svg{width:20px;height:20px;stroke:var(--gold-deep);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.vdz-browse{color:var(--link);font-weight:700;cursor:pointer;text-decoration:underline}
.vempty{border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center;
  font-size:13px;color:var(--muted)}

/* --------------------------------------------------------- offer / result -- */
.offer{border:1px solid var(--cardbd);border-radius:var(--cardr);padding:20px;margin-bottom:14px;
  background:var(--cardbg);box-shadow:var(--cardsh)}
.offer.best{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--cardsh)}
.offer .tag{display:inline-block;background:var(--gold-tint);color:var(--gold-deep);font-size:11.5px;
  font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.offer .pm{font-family:var(--display);font-weight:800;font-size:32px}
.offer .pm small{font-size:15px;color:var(--muted)}
.offer .meta{display:flex;gap:22px;margin:12px 0 16px;font-size:13.5px;color:var(--slate)}
.offer .meta b{display:block;color:var(--ink);font-size:16px}
.seal{width:72px;height:72px;border-radius:50%;background:var(--success);display:flex;
  align-items:center;justify-content:center;margin:0 auto 22px;color:#fff;font-size:32px}
.spin{width:54px;height:54px;border:5px solid var(--gold-tint);border-top-color:var(--gold);
  border-radius:50%;margin:0 auto 24px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.center{text-align:center;padding:36px 0}

/* ------------------------------------------------------------ responsive -- */
.mtop{display:none}
.scrim{display:none}
/* The burger lives in the top bar and only appears once the rail collapses, so
   small screens get ONE bar rather than a logo strip stacked on a search strip. */
.tbburger{display:none;width:38px;height:38px;flex:none;border:1px solid var(--line2);
  border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;
  align-items:center;justify-content:center;padding:0}
.tbburger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* Laptop: give the workspace back the pixels the rail was taking. */
@media(max-width:1180px){
  .side{width:226px}
  .content .inner{padding:22px 22px 36px}
  .tbarx{padding:11px 22px}
}
@media(max-width:1024px){
  .srch{max-width:none}
  .uchip .nm{display:none}
  .uchip{padding:4px}
}
/* Stat tiles read as a 2-up grid well before they'd squeeze to a lonely orphan. */
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* The rail drops under the form before it gets too narrow to read. */
@media(max-width:1000px){
  .wizgrid{grid-template-columns:1fr}
  .wizrail{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .g2,.g12,.g4{grid-template-columns:1fr}
  .wizrail{grid-template-columns:1fr}
  .shell{display:block;margin:0;border-radius:0;box-shadow:none;min-height:100dvh}
  .content{border-radius:0}
  .side{position:fixed;top:0;left:0;height:100dvh;z-index:50;width:min(84vw,300px);
    transform:translateX(-105%);transition:transform .25s ease;border-radius:0;
    box-shadow:0 10px 40px rgba(27,33,48,.25);
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
    background:var(--sidedrawer,var(--sidebg))}
  body.nav-open .side{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(27,33,48,.45);z-index:45}
  .tbburger{display:flex}
  .tbarx{position:sticky;top:0;padding:9px 14px;gap:10px;border-radius:0;
    background:var(--topbg);border-bottom:1px solid var(--line)}
  .tbarx .ibtn.help{display:none}
  .content .inner{padding:18px 14px 34px}
  .ph{gap:12px}
  .ph h1{font-size:23px}
  .card{padding:18px}
  .card>.ch{margin:-18px -18px 16px;padding:14px 18px}
  .ov{padding:14px}.mdl{padding:20px}
  .mdl .acts .btn{flex:1 1 auto}
  .tgl[data-tip]::after,.tgl[data-tip]:hover::after{display:none}
  .content,body{overflow-x:hidden}
}

@media(max-width:640px){
  .kpi{padding:13px 14px}
  .kpi .l{font-size:10px;gap:7px}
  .kpi .l .ic{width:23px;height:23px;border-radius:7px}
  .kpi .l .ic svg{width:12px;height:12px}
  .kpi .v{font-size:22px;margin-top:7px}
  .kpi .s{font-size:11.5px}
  .tabs{gap:0;margin-left:-14px;margin-right:-14px;padding:0 14px}
  .tabs a{padding:9px 11px;font-size:13px}
  .vtbl td,.vtbl th{padding-left:10px;padding-right:10px;white-space:nowrap}
  .vbc{font-size:13.5px}
  .srch kbd{display:none}
}

@media(max-width:560px){
  .row{grid-template-columns:1fr}
  h2.q{font-size:23px}
  .ph h1{font-size:21px}
  .ph p{font-size:13px}
  .invrow{grid-template-columns:1fr}
  .tbar input.fld{flex:1 1 100%;max-width:none}
  .tbar .sp{margin-left:0}
  /* The applicant wizard's footer really is a stacked pair of full-width actions. */
  #foot{gap:10px;flex-direction:column-reverse}
  #foot .btn{width:100%;flex:none}
  [style*="justify-content:space-between"][style*="padding:12px 16px"]{flex-wrap:wrap;gap:2px 12px}
  [style*="justify-content:space-between"][style*="padding:12px 16px"]>b{text-align:left!important;
    overflow-wrap:anywhere;min-width:0}
}
/* Stay 2-up even on a phone — four stacked tiles would push the table a whole
   screen down, which is what made the stat strip feel like filler. */
@media(max-width:420px){
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .content .inner{padding:16px 12px 30px}
  .tabs{margin-left:-12px;margin-right:-12px;padding:0 12px}
  .kpi{padding:12px}
  .kpi .l .ic{display:none}
  .kpi .v{font-size:20px}
}

/* ------------------------------------------------- logo colour preview ---- */
/* Swaps the lockup between black and white wherever it appears, so the two
   variations can be judged in context rather than on swatches. Gold is not an
   option here — it would be invisible on the gold surfaces this affects.
   Placed last so it overrides the per-surface filters set further up. */
html[data-logo="black"] .side .lk,
html[data-logo="black"] .auth-lock img,
html[data-logo="black"] .auth-mini img{filter:brightness(0)}
html[data-logo="white"] .side .lk,
html[data-logo="white"] .auth-lock img{filter:brightness(0) invert(1)}

/* The mini lockup is the exception: it sits INSIDE .auth-card, which is #fff,
   so following the white switch would make it invisible. It is only shown on
   narrow screens, where it is the only lockup on the page — losing it would
   leave the sign-in card unbranded. Always ink, whatever the switch says. */
html[data-logo="white"] .auth-mini img{filter:brightness(0)}

.lsw{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;align-items:center;gap:9px;
  height:44px;padding:0 10px 0 15px;border-radius:999px;background:var(--ink);
  box-shadow:0 6px 22px rgba(27,33,48,.30);font:700 12.5px var(--sans);color:#fff}
.lsw .lb{opacity:.66;font-weight:600;white-space:nowrap}
.lsw .sw{display:flex;gap:5px}
.lsw button{width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid transparent;background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:border-color .12s,transform .12s}
.lsw button:hover{transform:scale(1.08)}
.lsw button.on{border-color:#fff}
@media(max-width:560px){
  .lsw{right:14px;bottom:14px;padding:0 8px 0 12px;font-size:11.5px}
  .lsw .lb{display:none}
}
@media print{.lsw{display:none}}

/* ============================================================================
   Carried from the v2 stylesheet.

   The portal and admin screens were built against platform.css. Everything
   structural moves to the v3 vocabulary, but these are page-level details with
   no v3 equivalent — a stacked table on a phone, the service library rows, the
   inline field error. Lifted verbatim so the screens that already read
   correctly do not shift while the shell changes around them.
   ========================================================================= */
/* Stacked tables on a phone. A wide table on a 375px screen either overflows or
   shrinks its text to nothing, so `.t.stack` turns each row into a card and uses
   the cell's data-label as its heading.

   This lived inline in one ported page, which meant every table that copied the
   markup got the data-label attributes and none of the behaviour. Defined once
   here so `class="t stack"` means the same thing everywhere it appears. */
@media(max-width:640px){.twrap:has(.t.stack){border:0;overflow:visible;background:transparent}
.t.stack tbody tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--surface);overflow:hidden}
.t.stack tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 14px;border:0;border-bottom:1px solid var(--line);white-space:normal;text-align:right;font-size:13.5px}
.t.stack tbody td::before{content:attr(data-label);font-weight:700;color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.4px;text-align:left;flex:none;align-self:center}
.t.stack tbody td[data-label=""]::before{display:none}
}
/* NOTE: the block above is the mobile table-stacking media query, and it was
   left UNCLOSED — so every rule from here to the end of the file was trapped
   inside @media(max-width:640px) and simply did not exist on a desktop. The
   rules below carry their own breakpoints now; keep them that way. */

/* Cards of very uneven height (a 7-row summary next to 9 offers, a single routing
   attempt next to a long audit trail). A fixed two-column grid pairs them by
   position, so one side always ends in dead space. Column flow lets the browser
   balance them into two roughly equal columns instead. */
.cardflow{column-count:2;column-gap:20px}
/* Restored with the base rules above. .cardflow is a multi-COLUMN layout, so
   without break-inside:avoid a card is free to split across the column
   boundary — half its content at the bottom of the left column and the rest at
   the top of the right — and without the margin the cards touch. That is the
   admin application page "fully broken" and the profile page with no space
   between its cards: one missing rule, two pages. */
.cardflow>*{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 20px}
@media(max-width:860px){.cardflow{column-count:1}}
.field-err{color:var(--error);font-size:12px;line-height:1.35;margin:5px 0 0;font-weight:600}
/* Required-field marker (red *) + inline validation errors. */
.f .req{color:var(--error);font-weight:800;margin-left:2px}
.logo-text{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.3px}
/* The standardised logo slot: always WHITE, never the page tint, because white
   is what the applicant screens use and a mark that disappears there has to
   disappear here too. Fixed height with object-fit:contain, so a wide wordmark
   and a square badge both sit correctly and neither is stretched. */
.logoslot{height:74px;min-width:min(100%,260px);padding:0 18px;background:#fff;
  border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.logoslot img{max-height:52px;max-width:220px;object-fit:contain}
.svc-lib{max-width:760px}
/* Services library (admin CRUD) — ported from demo-v2/admin/services.html */
.svc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.svc-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* The BASE rule, restored. The port kept the narrow-screen override below and
   dropped what it was overriding, so every service row lost its display:flex
   and the name, Edit and toggle stacked into three lines. */
.svc-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:14px;padding:11px 14px;gap:12px}
.svc-row:last-child{border-bottom:0}
@media(max-width:560px){.svc-row{padding:10px 12px;gap:8px}}
.svc-name{font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.svc-actions{display:inline-flex;align-items:center;gap:14px;flex:none}
/* Edit was rendering as plain body text next to the toggle. */
.svc-actions a{font-size:12.5px;font-weight:700;color:var(--accent-deep,var(--gold-deep));cursor:pointer}
@media(max-width:560px){.svc-actions{gap:10px}}

@media(max-width:640px){
  .twrap:has(.t.stack){border:0;overflow:visible;background:transparent}
  .t.stack thead{display:none}
  .t.stack tbody tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--surface);overflow:hidden}
  .t.stack tbody tr:last-child{margin-bottom:0}
  .t.stack tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 14px;border:0;border-bottom:1px solid var(--line);white-space:normal;text-align:right;font-size:13.5px}
  .t.stack tbody td:last-child{border-bottom:0}
  .t.stack tbody td::before{content:attr(data-label);font-weight:700;color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.4px;text-align:left;flex:none;align-self:center}
  .t.stack tbody td[data-label=""]{justify-content:flex-end}
  .t.stack tbody td[data-label=""]::before{display:none}
}

/* Console pagination (resources/views/vendor/pagination/v3.blade.php). */
.pgr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pgr-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--slate);font:600 13px/1 var(--sans);cursor:pointer;white-space:nowrap}
.pgr-btn:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink)}
.pgr-btn.is-off{opacity:.45;cursor:default}
.pgr-btn.is-off:hover{border-color:var(--line);color:var(--slate)}
.pgr-at{font-size:12.5px;color:var(--muted);font-weight:600}
.pgr-of{font-weight:400}
@media(max-width:520px){.pgr{justify-content:center}.pgr-at{order:-1;width:100%;text-align:center}}

/* Step row for the admin "correct details" wizard. The panel carries the whole
   credit application (~30 fields), which is a wall in one column -- so it is cut
   into the sections the applicant met, in the same order.

   Every step is a BUTTON, not a breadcrumb: an operator is nearly always here to
   fix one field named in a decline notice, so each section is one click away
   rather than six Nexts. Wraps to a second line on a narrow panel. */
.wiz{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.wizstep{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--surface);color:var(--slate);
  font:600 12.5px var(--sans);cursor:pointer;white-space:nowrap}
.wizstep:hover{border-color:#BFC6D1;background:#F7F8FA}
.wizstep .n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--line);color:var(--slate);font-size:11px;font-weight:700}
.wizstep.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.wizstep.on .n{background:rgba(27,33,48,.16);color:var(--ink)}

/* URL + copy button. The field is readonly and selects on focus so the whole
   link is grabbed in one go; it must not wrap, because a URL broken across two
   lines gets misread when someone reads it down the phone. */
.copyrow{display:flex;gap:8px;align-items:stretch;margin-top:14px}
.copyrow .fld{flex:1;min-width:0;font-size:13.5px;background:#F7F8FA;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.copyrow .btn{flex:none;height:52px}
@media(max-width:560px){.copyrow{flex-wrap:wrap}.copyrow .btn{width:100%}}

/* The applicant's link, sitting across the top of an application page. One row,
   not a card: it is a thing you copy and send, not a section to read. Collapses
   to stacked full-width parts on a narrow screen, where a URL, a Copy and an
   Email button will not share a line. */
.applink{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
  background:var(--gold-tint2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.applink-label{font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap;flex:none}
.applink .copyrow{min-width:min(100%,280px)}
/* 44px, matching .fld: the row is a field with buttons beside it, and a taller
   button next to a shorter input reads as two rows that failed to line up.
   Wins over .copyrow .btn's 52px on source order, so Copy matches too. */
.applink .btn{flex:none;height:44px}
/* Channel tickboxes beside a send button. Used on the applicant-link row and in
   the assisted form's footer, so the two read the same way. */
.sendch{display:flex;align-items:center;gap:14px;flex:none}
.sendch .check{margin:0;white-space:nowrap;font-weight:600}
@media(max-width:560px){.sendch{width:100%}}
/* Channel tickboxes and the one Send button, kept on the button's own line so
   the row still reads as copy-this / send-it rather than a form. */
/* Copy sits INSIDE the field, not beside it. The link is one object -- the
   thing you copy -- and a button parked next to the box read as a third
   control competing with Send. Absolutely placed rather than floated so the
   input keeps its own height and the row stays one line.

   The input carries right padding equal to the button's width plus its inset,
   so a long URL ellipsises BEFORE it reaches the button instead of sliding
   underneath it. */
/* Sized to the link, not to the row. The resume URL is a fixed shape --
   host + /resume/ + a 32-char token -- so a field stretched across the whole
   width was mostly empty space, and the send controls got pushed to the far
   side of the screen away from the thing they act on. */
.applink .copyrow{position:relative;flex:0 1 auto;width:min(100%,600px)}
.applink .copyrow .fld{padding-right:104px;background:var(--cardbg)}
/* The end SEGMENT of the field, not something floating on it. Pinned hard to
   top, right and bottom and taking the field's full radius, so the gold runs
   to the outer edge. An earlier 1px inset left a hairline of white field
   showing around the curve -- invisible at size, obvious zoomed in. */
.applink .copyrow .btn{position:absolute;right:0;top:0;bottom:0;
  height:auto;padding:0 14px;font-size:12.5px;border-radius:0 10px 10px 0;z-index:1;
  /* width:auto beats the <=560px rule that stretches a copyrow button to 100%
     -- stretched, an absolute button would cover the URL it sits on top of.
     min-width holds the box steady when the label becomes "Copied". */
  width:auto;min-width:86px;
  /* .btn-primary carries a soft gold box-shadow that reads as an outline once
     the button sits ON a field rather than on the page. Flat here. */
  box-shadow:none}
/* Pushed to the right edge of the row. Now that the field is sized to the link
   rather than stretching, the leftover space has to go SOMEWHERE -- parked
   between the field and the controls, it reads as one deliberate gap instead
   of the send group drifting loose in the middle. */
.applink-send{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.applink-send .check{margin:0;white-space:nowrap;font-weight:600}
@media(max-width:760px){
  .applink{align-items:stretch}
  .applink .copyrow{flex-basis:100%}
  .applink>.btn{width:100%}
  .applink-send{flex-wrap:wrap;width:100%}
  .applink-send .btn{width:100%}
}

/* ---------------------------------------------------------------- lenders --
   Admin Lenders (client, 9/21): the list of partners, and one partner's own
   page. Configuration only — performance lives on Lender Performance. */

/* A lender in a table row: its mark, then its name. */
.lnd{display:inline-flex;align-items:center;gap:10px;min-width:0}
.lndlogo{width:30px;height:30px;flex:none;border-radius:8px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lndlogo img{max-width:100%;max-height:100%;object-fit:contain}
.lndlogo.txt{font-size:10.5px;font-weight:800;color:var(--slate);background:var(--kpibg)}
.lndacts{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.lndacts a{display:inline-flex;align-items:center;gap:5px;color:var(--gold-deep)}
.lndacts a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lndt td{vertical-align:middle}

/* Search and Add, sitting with the card's heading rather than under it. The
   caption normally reserves a wide block, which pushes anything beside it onto
   its own line; in this row it sits under its own heading instead. */
.ch.chrow{align-items:center;flex-wrap:nowrap}
.ch.chrow>div:first-child{min-width:0}
.ch.chrow>div:first-child p{min-width:0;margin-top:3px}
.chacts{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;flex-wrap:nowrap}
.srch.sm{height:40px;min-width:150px;flex:0 1 230px}
.chacts .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:7px}

/* The Add lender form, opened by the button above it. */
.addrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px 14px;
  align-items:end;margin-top:14px;padding:14px;border-radius:12px;background:var(--kpibg);
  border:1px solid var(--line)}
.addrow .f{margin:0 0 5px}
.addacts{display:flex;gap:8px}
@media (max-width:760px){ .addrow{grid-template-columns:minmax(0,1fr)} }

/* One lender's header: who it is, and whether Golt offers it at all. */
.lhead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:18px}
.lbrand{display:flex;align-items:center;gap:16px;min-width:0}
.llogo{width:62px;height:62px;flex:none;border-radius:14px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.llogo img{max-width:82%;max-height:82%;object-fit:contain}
.llogo.txt{font-family:var(--display);font-size:15px;font-weight:800;color:var(--slate);background:var(--kpibg)}
.lbrand h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:25px}
.lbrand p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.lswitch{flex:none;min-width:240px;padding:12px 14px;border-radius:12px;background:var(--kpibg);
  border:1px solid var(--line)}
.lsrow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.lsrow b{font-size:12.5px}
.lsnow{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--ink)}
.lswitch .w{display:block;margin-top:3px;font-size:11px;color:var(--muted);max-width:30ch}

/* The four things worth knowing at a glance, on the strip pattern the totals
   row already uses. */
.lstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;
  padding:14px 16px;background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr)}
@media (max-width:900px){ .lstats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* A label/value list, for details that are read far more often than edited. */
.kvl{margin:14px 0 0;display:grid;gap:0}
.kvl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.kvl>div:last-child{border-bottom:0;padding-bottom:0}
.kvl dt{flex:none;font-size:12px;font-weight:600;color:var(--muted)}
.kvl dd{margin:0;font-size:13px;font-weight:600;color:var(--ink);text-align:right;
  word-break:break-word;min-width:0}
.kvl dd .w{font-size:11px;font-weight:600;color:var(--muted)}

/* The connection test's answer. */
.connres{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:11px 13px;border-radius:11px;
  font-size:13px;font-weight:600;line-height:1.45}
.connres svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.connres.ok{background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success)}
.connres.bad{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error)}

/* The logo, on the light surface a logo is drawn for. */
.lgbox{margin-top:14px;height:110px;border-radius:12px;border:1px dashed var(--line2);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:14px}
.lgbox img{max-width:70%;max-height:100%;object-fit:contain}
.lgbox .none{font-size:12.5px;font-weight:600;color:var(--muted)}

/* Edit sits with the heading; it is a button, so it needs the link's look. */


/* ------------------------------------------------------ lender performance --
   Eight figures for whoever is selected, then every lender side by side. */
.lpgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.lptile{background:var(--cardbg);border:1px solid var(--cardbd);border-radius:var(--cardr);padding:15px 16px}
.lptile .l{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--slate)}
.lptile .l .ic{width:28px;height:28px;flex:none;border-radius:9px;background:var(--gold-tint);
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center}
.lptile .l .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lptile .v{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.6px;line-height:1.15;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-top:8px}
/* This month, last month and the year, in three columns under the headline. */
.lpcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--line)}
.lpcols dt{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.lpcols dd{margin:3px 0 0;font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.lpcols dd.chg{margin-top:4px;font-size:10.5px;font-weight:700;padding:0;background:none}
.lpcols dd.chg.up{color:var(--success)}
.lpcols dd.chg.down{color:var(--error)}
.lpcols dd.chg.flat,.lpcols dd.chg.none{color:var(--muted)}
@media (max-width:1240px){ .lpgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .lpgrid{grid-template-columns:minmax(0,1fr)} }

/* The breakdown: the selected lender's row stands out, and the platform's own
   total closes the table. */
.lndt .chg{display:block;margin-top:2px;font-size:10px;font-weight:700;background:none;padding:0}
.lndt .chg.up{color:var(--success)}
.lndt .chg.down{color:var(--error)}
.lndt .chg.flat,.lndt .chg.none{color:var(--muted)}
.lndt tr.lpon td{background:var(--gold-tint)}
.lndt .chev{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lndt a:hover .chev{stroke:var(--gold-deep)}
.lptot td{background:var(--kpibg);border-top:2px solid var(--line2);font-weight:800}
.lptot .lndlogo.txt{background:var(--gold-tint);color:var(--gold-deep)}

/* The role matrix on Users: what each role may actually do. */
.rmx td:first-child{min-width:180px}
.rmx .rmxwhat{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);font-weight:500;
  max-width:44ch}
.rmx td:not(:first-child),.rmx th:not(:first-child){text-align:center;white-space:nowrap}

/* ---------------------------------------------------------- merchants --
   The list, and one merchant's single page. */
.mfbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mfbar .srch.sm{flex:1 1 260px;max-width:340px}
.mfcount{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.mcont b{display:block;font-size:12.5px;color:var(--ink)}
.mcont span{display:block;font-size:11.5px;color:var(--muted)}

/* The header links under a merchant's name: website and the applicant link. */
.mlinks{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px}
.mlinks a,.mlink{display:inline-flex;align-items:center;gap:6px;color:var(--slate)}
.mlinks a{color:var(--gold-deep)}
.mlinks svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mlink b{font-weight:700;color:var(--ink)}
.mlink button{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;
  font-weight:700;color:var(--gold-deep)}
.mlink button:hover{text-decoration:underline}
.mheadacts{display:flex;gap:10px;flex-wrap:wrap;flex:none;margin-left:auto}

/* Details, contacts, status: three columns that stack when there is no room. */
/* Details, contacts, status. The three columns stretch to the same height so
   the row ends on one line rather than three ragged edges; the contacts column
   stacks its two cards from the top inside that height. */
.mgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr);gap:18px;
  align-items:stretch}
.mgrid>.card{display:flex;flex-direction:column}
.mgrid>.card>.ch{flex:none}
@media (max-width:1240px){ .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .mgrid{grid-template-columns:minmax(0,1fr)} }
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* One lender, with its programs underneath. */
.mlend{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface)}
.mlend.on{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.mlhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 14px;background:var(--kpibg);border-bottom:1px solid var(--line)}
.mlacct{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto}
.mlacct .f{margin:0}
.mlacct .fld{height:36px;width:230px;font-size:13px}
.mlacct .btn{height:36px;font-size:13px}
.mlabel{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.mlend .t{margin:0}
.mlend .twrap{border:0;border-radius:0}
.svcgrp .cat{font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);margin:14px 0 8px}
.svcgrp .cat:first-child{margin-top:0}
.svcgrp .chips{display:flex;gap:8px;flex-wrap:wrap}
/* A long sign-in address must not push the controls off the card. */
.mmail{max-width:190px;overflow:hidden;text-overflow:ellipsis}
/* Documents and Users sit side by side where there is room for both tables,
   and stack below that rather than clipping their controls. */
.mdocs{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}
@media (min-width:1500px){ .mdocs{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* File pickers. The native control is a bare "Choose File" button and a grey
   "no file chosen", which reads as broken next to everything else here. */
.fld[type="file"]{display:flex;align-items:center;padding:0 0 0 4px;font-size:13px;color:var(--muted);
  cursor:pointer}
.fld[type="file"]::file-selector-button{margin:0 12px 0 0;height:100%;padding:0 14px;border:0;
  border-right:1px solid var(--line);border-radius:10px 0 0 10px;background:var(--kpibg);
  color:var(--slate);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fld[type="file"]:hover::file-selector-button{background:var(--gold-tint);color:var(--gold-deep)}

/* Change logo and Remove sit side by side, the same width as each other. */
.uprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.uprow .btn,.uprow .lgpick{flex:1 1 0;min-width:112px;height:42px;display:inline-flex;
  align-items:center;justify-content:center;gap:7px}
/* The file control itself is hidden: the label IS the button, so there is no
   stray "Choose File / no file chosen" next to it. Still a real input, so the
   keyboard and screen readers reach it. */
.lgpick{position:relative;cursor:pointer;overflow:hidden}
.lgpick input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:0}
.lgpick.is-busy{opacity:.7;pointer-events:none}
.lgpick:focus-within{outline:2px solid var(--gold-deep);outline-offset:2px}

/* Merchant profile, to the client's 9/21 design. */

/* Header actions carry an icon, and the destructive one reads as destructive. */
.mheadacts .btn{display:inline-flex;align-items:center;gap:7px;height:40px}
.mheadacts svg,.uprow .btn svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost.danger{color:var(--error);border-color:color-mix(in srgb,var(--error) 30%,var(--line2))}
.btn-ghost.danger:hover{background:color-mix(in srgb,var(--error) 7%,transparent)}
/* A merchant with history cannot be deleted; the control says so instead of
   disappearing, so nobody hunts for a button that was never there. */
.mnodel{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:11px;
  border:1px dashed var(--line2);font-size:13.5px;font-weight:600;color:var(--muted);cursor:help}
.mnodel svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* The logo sits under the status in the same card. */
.mlogo{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Shorter than the standalone card's: this one shares a card with the status
   above it, and an empty box that tall reads as a hole in the page. */
.mlogo .lgbox{margin-top:10px;height:84px;padding:10px}
.mlogo .uprow{margin-top:10px}

/* One lender's row: a caret, then the lender, then its account and switch. */
.mlcar{flex:none;background:none;border:0;padding:0;margin-right:2px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:var(--muted)}
.mlcar:hover{background:var(--line);color:var(--ink)}
.mlcar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .15s}

/* A program's switch with what it currently means beside it. */
.mstat{display:inline-flex;align-items:center;gap:9px}
.mstat em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.mstat em.yes{color:var(--success)}
.mstat em.no{color:var(--warning)}