/* =========================================================================
   IslandPay customer — design system layer (loaded after style.css, customer portal only)
   Same identity as the Android app: navy for trust, teal for the one action, Inter, calm neutral surfaces.
   Every rule is scoped to body.cx so the operator, institution and merchant portals are untouched.
   CSP-safe: no inline styles anywhere; JS toggles classes and data attributes only.
   ========================================================================= */

@font-face { font-family: "Inter"; src: url("/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/Inter-SemiBold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }

/* ---------- 1. Tokens: light ---------- */
body.cx {
  /* brand */
  --ink: #0A2540;            /* navy: headings, hero, trust */
  --ink-2: #124A6E;          /* hero end tone */
  --primary: #0A6EBD;        /* sky blue: the one action colour (white text 5.3:1) */
  --primary-hover: #08589A;
  --primary-soft: #E1F0FC;
  --on-primary: #FFFFFF;
  /* neutrals */
  --bg: #F4F9FE; --surface: #FFFFFF; --surface-2: #EEF5FC; --elevated: #FFFFFF;
  --line: #DCE9F5; --line-strong: #B9D2E8;
  --text: #142532; --text-2: #3D4F5E; --text-3: #55687A; --disabled: #9AA9B2;
  /* status (text ≥ 4.5:1 on its soft fill) */
  --success: #0F6E56; --success-soft: #E6F4EE; --success-ink: #0B5241;
  --warning: #854F0B; --warning-soft: #FBF0DD; --warning-ink: #6B3B00;
  --error: #A32D2D;   --error-soft: #FCECEC;   --error-ink: #7A1A12;
  --info: #1D4E89;    --info-soft: #E9F1FB;
  /* hero: light blue in the light theme, navy in the dark theme */
  --hero-a: #CDEBFF; --hero-b: #9FD3F7; --on-hero: #0A2540; --hero-text-2: #1D4466; --hero-chip: #E8F5FE; --hero-chip-hover: #FFFFFF;
  /* type scale (px): 12 caption · 13 label · 15 body · 18 headline · 24 title · 36 display */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* shape & depth */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 24px;
  --shadow: 0 1px 2px rgba(10, 37, 64, .05);
  --shadow-md: 0 4px 16px rgba(10, 37, 64, .07), 0 1px 2px rgba(10, 37, 64, .05);
  --shadow-lg: 0 18px 48px rgba(10, 37, 64, .12), 0 2px 8px rgba(10, 37, 64, .06);
  --ring: 0 0 0 3px rgba(10, 110, 189, .30);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* ---------- 1b. Tokens: dark (system preference unless the user chose light; or an explicit dark choice) ---------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.cx {
    --ink: #F1F6F7; --ink-2: #1A5A80;
    --primary: #7CC4F5; --primary-hover: #A9D9F8; --primary-soft: #12324D; --on-primary: #04223A;
    --hero-a: #123553; --hero-b: #1A4F7A; --on-hero: #FFFFFF; --hero-text-2: #C9D8E2; --hero-chip: rgba(255, 255, 255, .12); --hero-chip-hover: rgba(255, 255, 255, .18);
    --bg: #0B1620; --surface: #122431; --surface-2: #182D3C; --elevated: #182D3C;
    --line: #243847; --line-strong: #3A5264;
    --text: #E8F0F2; --text-2: #C3D1D8; --text-3: #9FB2BC; --disabled: #5E7380;
    --success: #5DCAA5; --success-soft: #15382F; --success-ink: #9BE3CB;
    --warning: #F4C66A; --warning-soft: #3D321D; --warning-ink: #F5D294;
    --error: #FFB4AB;   --error-soft: #44201F;   --error-ink: #FFCFC9;
    --info: #A9C9F2;    --info-soft: #1A3049;
    --shadow: none; --shadow-md: 0 1px 0 rgba(255, 255, 255, .03); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
    --ring: 0 0 0 3px rgba(124, 196, 245, .35);
    color-scheme: dark;
  }
}
html[data-theme="dark"] body.cx {
  --ink: #F1F6F7; --ink-2: #1A5A80;
  --primary: #7CC4F5; --primary-hover: #A9D9F8; --primary-soft: #12324D; --on-primary: #04223A;
  --hero-a: #123553; --hero-b: #1A4F7A; --on-hero: #FFFFFF; --hero-text-2: #C9D8E2; --hero-chip: rgba(255, 255, 255, .12); --hero-chip-hover: rgba(255, 255, 255, .18);
  --bg: #0B1620; --surface: #122431; --surface-2: #182D3C; --elevated: #182D3C;
  --line: #243847; --line-strong: #3A5264;
  --text: #E8F0F2; --text-2: #C3D1D8; --text-3: #9FB2BC; --disabled: #5E7380;
  --success: #5DCAA5; --success-soft: #15382F; --success-ink: #9BE3CB;
  --warning: #F4C66A; --warning-soft: #3D321D; --warning-ink: #F5D294;
  --error: #FFB4AB;   --error-soft: #44201F;   --error-ink: #FFCFC9;
  --info: #A9C9F2;    --info-soft: #1A3049;
  --shadow: none; --shadow-md: 0 1px 0 rgba(255, 255, 255, .03); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px rgba(124, 196, 245, .35);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
html:has(body.cx) { background: var(--bg); }
body.cx { background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); font-feature-settings: "cv11" 1; }
body.cx h1, body.cx h2, body.cx h3 { color: var(--ink); letter-spacing: -.015em; }
body.cx h2 { font-size: 18px; line-height: 24px; font-weight: 650; margin: 0; }
body.cx a { color: var(--primary); }
body.cx :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
body.cx button, body.cx .btn { font-family: inherit; border-radius: var(--r); border-color: var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 80ms; }
body.cx button:hover { background: var(--surface-2); border-color: var(--line-strong); }
body.cx button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
body.cx button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
body.cx button.primary:disabled { background: var(--surface-2); border-color: var(--line); color: var(--disabled); opacity: 1; }
body.cx button.ghost { background: transparent; border-color: transparent; color: var(--primary); }
body.cx button.ghost:hover { background: var(--primary-soft); }
body.cx button.danger { color: var(--error); border-color: var(--line-strong); background: var(--surface); }
body.cx button.danger:hover { background: var(--error-soft); }
body.cx button.lg { min-height: 54px; border-radius: var(--r); font-size: 16px; }
body.cx button.busy::after { border-color: color-mix(in srgb, var(--on-primary) 45%, transparent); border-top-color: var(--on-primary); }
body.cx input, body.cx select, body.cx textarea { font-family: inherit; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); min-height: 52px; }
body.cx input::placeholder, body.cx textarea::placeholder { color: var(--text-3); }
body.cx input:focus, body.cx select:focus, body.cx textarea:focus { background: var(--surface); border-color: var(--primary); box-shadow: var(--ring); }
body.cx .note { color: var(--text-3); }
body.cx .muted { color: var(--text-3); }
body.cx .card { background: var(--surface); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
body.cx .kv { border-bottom-color: var(--line); }
body.cx .kv > span:first-child { color: var(--text-3); }
body.cx .toast { background: var(--ink); color: var(--bg); border-radius: var(--r); }
body.cx .toast.err { background: var(--error); color: var(--bg); }
body.cx .chip.c-good { background: var(--success-soft); color: var(--success); }
body.cx .chip.c-warn { background: var(--warning-soft); color: var(--warning); }
body.cx .chip.c-bad { background: var(--error-soft); color: var(--error); }
body.cx .chip.c-muted { background: var(--surface-2); color: var(--text-3); }
body.cx .chip.c-sky { background: var(--primary-soft); color: var(--primary); }
body.cx .skeleton { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; }
@media (prefers-reduced-motion: reduce) { body.cx *, body.cx *::before, body.cx *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ---------- 3. Page shell: header + stage (mobile, tablet, desktop) ---------- */
body.cx header.top { background: #0A2540; border-bottom: 0; padding: 10px 24px; box-shadow: none; }
body.cx header.top .sub { color: #C9D8E2; }
body.cx header.top .theme-btn { display: inline-flex; gap: 6px; align-items: center; }
body.cx header.top .theme-btn svg { width: 16px; height: 16px; }
body.cx .app-stage { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 32px; max-width: 1160px; padding: 28px 24px 48px; }
body.cx .device { margin: 0; border-radius: var(--r-xl); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); height: min(860px, calc(100vh - 120px)); min-height: 640px; }
body.cx .app { background: var(--bg); }
body.cx .side-panel .card { border-radius: var(--r-lg); }
body.cx .side-panel .card h2 { font-size: 15px; margin-bottom: 8px; }
body.cx .side-panel .card ul { padding-left: 18px; margin: 0; color: var(--text-2); font-size: 14px; }
body.cx .side-panel .card li { margin: 6px 0; }
body.cx .stage-banner { background: var(--surface); color: var(--text-2); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--r); font-size: 13px; padding: 10px 14px; margin-bottom: 16px; }
body.cx .behind li { color: var(--text-2); } body.cx .behind li.on { color: var(--ink); } body.cx .behind li.done { color: var(--success); }

/* Tablet: one centred column, the demo notes underneath */
@media (max-width: 1023px) {
  body.cx .app-stage { grid-template-columns: minmax(0, 480px); justify-content: center; padding: 24px 24px 40px; gap: 24px; }
  body.cx .device { height: min(880px, calc(100vh - 110px)); }
}
/* Phone: the app is the page */
@media (max-width: 640px) {
  body.cx .app-stage { grid-template-columns: 1fr; padding: 0; gap: 0; }
  body.cx .app-stage > .side-panel { padding: 16px; }
  body.cx .device { margin: 0; border: 0; border-radius: 0; box-shadow: none; height: 100vh; height: 100dvh; min-height: 0; }
  body.cx header.top { display: none; }
}

/* ---------- 4. App chrome ---------- */
body.cx .app-top { background: var(--bg); border-bottom: 0; padding: 12px 16px; min-height: 60px; }
body.cx .app-top .title { font-size: 17px; font-weight: 600; color: var(--ink); }
body.cx .app-top .back { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; font-size: 0; color: var(--ink); background: transparent; border: 0; }
body.cx .app-top .back::before { border-color: var(--ink); }
body.cx .app-top .back:hover { background: var(--surface-2); }
body.cx .app-top .t1 { color: var(--text-3); font-size: 13px; }
body.cx .app-top .t2 { color: var(--ink); font-size: 17px; font-weight: 650; }
body.cx .avatar { background: var(--primary-soft); color: var(--primary); }
body.cx .icon-btn { width: 44px; height: 44px; min-width: 44px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
body.cx .icon-btn .badge { background: var(--error); color: var(--surface); border: 2px solid var(--bg); }
body.cx .app-top .actions { display: flex; gap: 8px; }
body.cx .icon-btn svg { width: 20px; height: 20px; }
body.cx .app-body { padding: 4px 16px 24px; gap: 16px; background: var(--bg); }
body.cx .app-foot { background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px 16px; box-shadow: 0 -6px 18px rgba(10, 37, 64, .04); }
body.cx .bottomnav { background: var(--surface); border-top: 1px solid var(--line); }
body.cx .bottomnav button { color: var(--text-3); font-weight: 500; background: transparent; }
body.cx .bottomnav button svg { width: 22px; height: 22px; padding: 4px 14px; box-sizing: content-box; border-radius: 999px; }
body.cx .bottomnav button.on { color: var(--primary); font-weight: 600; }
body.cx .bottomnav button.on svg { background: var(--primary-soft); }
body.cx .bottomnav button.scan .disc { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px rgba(10, 110, 189, .30); border: 3px solid var(--surface); width: 54px; height: 54px; }
body.cx .bottomnav button.scan .disc svg { padding: 0; background: transparent; }
body.cx .section-h h2 { font-size: 17px; }
body.cx .section-h .ghost { font-size: 14px; min-height: 40px; }

/* ---------- 5. Components ---------- */
/* Action hero: no balance on the home screen, by design */
body.cx .cx-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 18px 20px 20px; color: var(--on-hero);
  background: linear-gradient(160deg, var(--hero-a) 0%, var(--hero-b) 100%); box-shadow: var(--shadow-md); }
body.cx .cx-hero::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; background: rgba(255, 255, 255, .14); pointer-events: none; }
body.cx .cx-hero .row1 { display: flex; align-items: center; gap: 6px; }
body.cx .cx-hero .pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--hero-chip); color: var(--on-hero); }
body.cx .cx-hero .num { margin-left: auto; font-size: 13px; color: var(--hero-text-2); font-variant-numeric: tabular-nums; }
body.cx .cx-hero h2 { color: var(--on-hero); font-size: 23px; line-height: 30px; font-weight: 650; margin-top: 16px; }
body.cx .cx-hero p { color: var(--hero-text-2); font-size: 14px; margin: 4px 0 0; }
body.cx .cx-hero .banks { margin-top: 16px; width: 100%; justify-content: flex-start; gap: 10px; min-height: 46px; border-radius: var(--r); border: 0; background: var(--hero-chip); color: var(--on-hero); font-weight: 500; font-size: 14px; position: relative; z-index: 1; }
body.cx .cx-hero .banks:hover { background: var(--hero-chip-hover); }
body.cx .cx-hero .banks svg { width: 18px; height: 18px; flex: none; }
body.cx .cx-hero .banks .chev { margin-left: auto; color: var(--hero-text-2); font-size: 20px; }

/* Quick actions: 4×2, compact, labelled */
body.cx .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 6px; box-shadow: var(--shadow); }
body.cx .quick button { background: transparent; border: 0; min-height: 76px; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text); border-radius: var(--r); padding: 4px 2px; }
body.cx .quick button:hover { background: var(--surface-2); }
body.cx .quick button .qi { width: 46px; height: 46px; border-radius: 15px; background: var(--primary-soft); color: var(--primary); }
body.cx .quick button.lead .qi { background: var(--primary); color: var(--on-primary); }
body.cx .quick button svg { width: 22px; height: 22px; }

/* Lists, rows, menus */
body.cx .list, body.cx .menu, body.cx .summary, body.cx .payee-card, body.cx .insight, body.cx .receipt, body.cx .myqr, body.cx .notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
body.cx .tx { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px; gap: 12px; }
body.cx .tx:hover { background: var(--surface-2); }
body.cx .tx .ava { background: var(--surface-2); color: var(--text-2); font-size: 13px; }
body.cx .tx .ava.in { background: var(--success-soft); color: var(--success); }
body.cx .tx .ava.m { background: var(--warning-soft); color: var(--warning); }
body.cx .tx .nm { color: var(--text); font-weight: 500; }
body.cx .tx .sb { color: var(--text-3); font-size: 12.5px; }
body.cx .tx .am { color: var(--text); font-weight: 600; }
body.cx .tx .am.in { color: var(--success); }
body.cx .tx .am.void { color: var(--text-3); }
body.cx .daygroup { color: var(--text-3); letter-spacing: .05em; font-size: 11.5px; }
body.cx .menu > * { border-bottom-color: var(--line); min-height: 56px; }
body.cx .menu button { background: var(--surface); color: var(--text); font-weight: 500; }
body.cx .menu button:hover { background: var(--surface-2); }
body.cx .menu .k { color: var(--text-3); } body.cx .menu .v { color: var(--text); }
body.cx .menu .sub { display: block; color: var(--text-3); font-size: 12.5px; font-weight: 400; }
body.cx .menu button.signout span:first-child { color: var(--error); }
body.cx .notice .nb b { color: var(--ink); }
body.cx .notice.sec .nico { background: var(--warning-soft); color: var(--warning); }
body.cx .notice.tier .nico { background: var(--info-soft); color: var(--info); }
body.cx .insight .ttl, body.cx .inout .lab { color: var(--text-3); }
body.cx .minibar { background: var(--surface-2); }
body.cx .minibar.out span { background: var(--primary); }
body.cx .contacts button { background: transparent; color: var(--text); font-weight: 500; }
body.cx .contacts .avatar { width: 52px; height: 52px; }
body.cx .filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.cx .search input { background: var(--surface); }

/* Payee + amount + review */
body.cx .payee-card .nm { color: var(--ink); font-weight: 600; }
body.cx .payee-card .ava { background: var(--primary-soft); color: var(--primary); }
body.cx .verified { color: var(--success); }
body.cx .verified::before { background: var(--success); color: var(--surface); }
body.cx .amount-entry input { color: var(--ink); font-weight: 650; }
body.cx .amount-entry .cur { color: var(--text-3); }
body.cx .amount-entry .avail { color: var(--text-3); }
body.cx .amount-entry .limit { color: var(--warning); }
body.cx .chips-row button { background: var(--surface); border-color: var(--line); color: var(--text); }
body.cx .summary .total { color: var(--ink); }
body.cx .sure { color: var(--text-2); } body.cx .sure b { color: var(--ink); }
body.cx .secure-line { color: var(--text-3); }

/* "Pay from" selector row and the account list */
body.cx .payfrom { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: left; justify-content: flex-start; box-shadow: var(--shadow); font-weight: 500; }
body.cx .payfrom:hover { border-color: var(--line-strong); background: var(--surface); }
body.cx .payfrom .lbl { display: block; font-size: 12px; color: var(--text-3); font-weight: 500; }
body.cx .payfrom .val { display: block; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
body.cx .payfrom .chg { margin-left: auto; color: var(--primary); font-size: 14px; font-weight: 600; }
body.cx .bank { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: #0B7368; }
body.cx .bank.b1 { background: #1D4E89; } body.cx .bank.b2 { background: #6B3FA0; } body.cx .bank.b3 { background: #9A4A12; }
body.cx .bank.b4 { background: #0F6E56; } body.cx .bank.b5 { background: #7A1A12; }
body.cx .bank.off { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--line); }
body.cx .acct { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); text-align: left; justify-content: flex-start; min-height: 76px; font-weight: 400; }
body.cx .acct:last-child { border-bottom: 0; }
body.cx .acct:hover:not(:disabled) { background: var(--surface-2); }
body.cx .acct:disabled { opacity: 1; cursor: default; }
body.cx .acct[aria-checked="true"] { background: var(--primary-soft); }
body.cx .acct .mid { flex: 1; min-width: 0; }
body.cx .acct .nm { display: block; color: var(--text); font-weight: 600; }
body.cx .acct.off .nm { color: var(--text-3); }
body.cx .acct .sb { display: block; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
body.cx .acct .tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
body.cx .acct .radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); position: relative; }
body.cx .acct[aria-checked="true"] .radio { border-color: var(--primary); background: var(--primary); }
body.cx .acct[aria-checked="true"] .radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--on-primary); }
body.cx .countcard { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
body.cx .countcard .ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
body.cx .countcard .ico svg { width: 22px; height: 22px; }
body.cx .countcard .lab { font-size: 13px; color: var(--text-3); }
body.cx .countcard .n { font-size: 26px; font-weight: 650; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
body.cx .countcard .n small { font-size: 13px; color: var(--text-3); font-weight: 500; margin-left: 6px; }
body.cx .srcnote { font-size: 12.5px; color: var(--text-3); margin: 0; }

/* PIN and one-time code */
body.cx .stepper { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
body.cx .pin-dots i { border-color: var(--line-strong); width: 14px; height: 14px; }
body.cx .pin-dots i.on { background: var(--ink); border-color: var(--ink); }
body.cx .otp-cells { display: flex; gap: 8px; justify-content: center; margin: 16px 0 4px; }
body.cx .otp-cells i { width: 44px; height: 54px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 22px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
body.cx .otp-cells i.cur { border: 2px solid var(--primary); }
body.cx .otp-cells i.on { border-color: var(--primary); }
body.cx .otp-cells.shake { animation: shake 360ms; }
body.cx .otp-meta { text-align: center; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
body.cx .otp-meta.expired, body.cx .otp-err { color: var(--error); }
body.cx .otp-err { text-align: center; font-size: 14px; min-height: 20px; }
body.cx .demo-code { display: flex; gap: 10px; align-items: flex-start; background: var(--info-soft); color: var(--info); border-radius: var(--r); padding: 12px 14px; font-size: 13px; }
body.cx .demo-code b { display: block; font-size: 15px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
body.cx .keypad button { background: transparent; color: var(--ink); font-weight: 500; font-size: 24px; min-height: 56px; border-radius: 999px; }
body.cx .keypad button:hover { background: var(--surface-2); }
body.cx .keypad button[data-key="clear"], body.cx .keypad button[data-otp="clear"] { font-size: 14px; color: var(--text-3); }

/* Results and receipts */
body.cx .res-icon.ok { background: var(--success-soft); color: var(--success); }
body.cx .res-icon.hold { background: var(--warning-soft); color: var(--warning); }
body.cx .res-icon.bad { background: var(--error-soft); color: var(--error); }
body.cx .result .ra, body.cx .receipt .hdr .ra { color: var(--ink); font-weight: 650; }
body.cx .result p { color: var(--text-2); }
body.cx .answer.safe { background: var(--success-soft); color: var(--success-ink); }
body.cx .answer.wait { background: var(--warning-soft); color: var(--warning-ink); }
body.cx .answer.no { background: var(--error-soft); color: var(--error-ink); }
body.cx .warnbox { background: var(--error-soft); color: var(--error-ink); border-color: transparent; }
body.cx .infobox { background: var(--info-soft); color: var(--info); border-color: transparent; }
body.cx .receipt .hdr { border-bottom-color: var(--line-strong); }
body.cx .spinner { border-color: var(--primary-soft); border-top-color: var(--primary); }
body.cx .steps-live li.on { color: var(--ink); } body.cx .steps-live li.done { color: var(--success); }
body.cx .scanner { background: #07111A; }
body.cx .codes { background: var(--surface); }
body.cx .myqr svg { background: #fff; border-radius: 12px; padding: 8px; }
body.cx .profile-h h2 { font-size: 20px; }
body.cx .seccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow); }
body.cx .seccard .t { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
body.cx .seccard p { margin: 6px 0 0; color: var(--text-3); font-size: 13.5px; }
body.cx .warn-t { color: var(--warning); margin-top: 4px; }
body.cx .acct .chg { margin-left: auto; color: var(--primary); font-weight: 600; font-size: 13px; white-space: nowrap; }
body.cx .summary .copy { min-height: 32px; font-weight: 600; color: var(--primary); }
body.cx #dots.busy { opacity: .5; }
body.cx .err-text { color: var(--error); }
body.cx .cx-hero h2 { margin: 14px 0 0; }
body.cx .cx-hero .banks { display: flex; align-items: center; text-align: left; padding: 10px 14px; }
body.cx .cx-hero .banks span:not(.chev) { flex: 1; }
body.cx .acct .sb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.cx .amount-entry input, body.cx .amount-entry input:focus { background: transparent; border: 0; box-shadow: none; min-height: 60px; }
body.cx .amount-entry .amt-field { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; border-bottom: 2px solid var(--line); padding: 0 8px 4px; }
body.cx .amount-entry .amt-field:focus-within { border-bottom-color: var(--primary); }
body.cx .amount-entry input:focus-visible { outline: none; }
body.cx .menu button { justify-content: space-between; text-align: left; }
body.cx .menu button > span:first-child { text-align: left; }
body.cx header.top h1 { color: #fff; font-size: 17px; }
body.cx header.top button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); min-height: 36px; }
body.cx header.top button:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .5); }
body.cx header.top #who { color: #C9D8E2; }
body.cx .loan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--text); }
body.cx .loan-card.overdue { border-color: color-mix(in srgb, var(--error) 35%, var(--line)); }
body.cx .loan-card .big-num { color: var(--ink); }
/* Navy surfaces stay navy in both themes (--ink turns light in dark mode) */
body.cx .balance-card { background: linear-gradient(160deg, var(--hero-a) 0%, var(--hero-b) 100%); color: var(--on-hero); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
body.cx .balance-card .lbl, body.cx .balance-card .meta, body.cx .balance-card .amt .cents { color: var(--hero-text-2); }
body.cx .balance-card .amt { color: var(--on-hero); }
body.cx .balance-card .minibar { background: color-mix(in srgb, var(--on-hero) 16%, transparent); }
body.cx .skip { background: #0A2540; color: #fff; }
body.cx .toast { color: var(--bg); }
body.cx .switch { min-height: 36px; border-radius: 999px; min-width: 64px; }
body.cx .switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }