@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..900&display=swap');

:root {
  --ink: #141619;
  --graphite: #2c2e3a;
  --navy: #4338ca;
  --navy-mid: #6d5bd0;
  --navy-deep: #2e2a6b;
  --blue: #6366f1;
  --mist: #b3b4bd;

  /* New brand palette: Primary navy / Secondary charcoal / Muted grey / off-white Background. */
  --primary: #4338ca;
  --secondary: #343a40;
  --muted: #ced4da;
  --background: #f8f9fa;

  --paper: #f2f2f4;
  --paper-deep: #e4e4e8;
  --card: #fffefa;
  --field: #ebe8e2;
  --field-strong: #dedbd5;
  --line: rgba(44, 46, 58, 0.11);
  --line-strong: rgba(44, 46, 58, 0.2);
  --text: var(--graphite);
  --text-muted: #777985;
  --text-faint: #a2a3aa;

  --accent-1: var(--navy);
  --accent-2: var(--blue);
  --accent-3: var(--graphite);
  /* Single canonical dark gradient — replaces the separate navy/blue and
     #6d5bd0/#2e2a6b families that used to be hardcoded independently in
     .auth-hero, .history-header, .pfm-header/.pfm-tabs and the request/history
     detail heroes. */
  --gradient: linear-gradient(160deg, var(--navy) 0%, var(--blue) 55%, var(--navy-deep) 100%);
  --gold: #c7cbd4;

  --success: #158463;
  --success-bg: rgba(21, 132, 99, 0.1);
  --success-border: rgba(21, 132, 99, 0.22);
  --warning: #9a6a10;
  --warning-bg: rgba(154, 106, 16, 0.11);
  --warning-border: rgba(154, 106, 16, 0.22);
  --warning-on-dark: #ffd873;
  --warning-on-dark-bg: #fff3c4;
  --warning-on-dark-border: rgba(255, 213, 79, 0.82);
  --success-on-dark: #064e3b;
  --success-on-dark-bg: #c7f7df;
  --success-on-dark-border: rgba(21, 132, 99, 0.34);
  --danger: #bd3552;
  --danger-bg: rgba(189, 53, 82, 0.1);
  --danger-border: rgba(189, 53, 82, 0.22);
  --danger-on-dark: #7f1d1d;
  --danger-on-dark-bg: #ffd9df;
  --danger-on-dark-border: rgba(189, 53, 82, 0.34);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-lg: 0 30px 80px -34px rgba(20, 22, 25, 0.42);
  --shadow-card: 0 22px 55px -36px rgba(20, 22, 25, 0.58), 0 1px 0 rgba(255, 255, 255, 0.78) inset;
  --shadow-focus: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: "Inter", "Aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--background);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.page-checkout {
  align-items: flex-start;
  padding-top: 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--graphite);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-mark {
  width: 34px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  flex-shrink: 0;
  position: relative;
}

.brand-mark::after {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  position: absolute;
  left: 6px;
  bottom: 4px;
}

.glass {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.auth-shell {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 0.96fr 1fr;
  overflow: hidden;
}

/* Login renders both the desktop two-panel .auth-shell and the phone-card
   .auth-m-page markup and lets CSS pick one, same pattern as .pfm-list /
   .pfm-table below — avoids a JS viewport check just to swap layouts.
   .auth-m-page has its own unconditional (non-media) desktop grid layout
   further down (the dark two-column "command center" look), so the
   toggle here has to out-specificity that with a compound selector —
   a plain `.auth-mobile-only { display: none }` loses to it in the
   cascade regardless of source order. */
.auth-m-page.auth-mobile-only { display: none; }

@media (max-width: 900px) {
  .page.auth-desktop-only { display: none; }
  .auth-m-page.auth-mobile-only { display: block; }
}

.auth-hero {
  position: relative;
  min-height: 500px;
  padding: 46px 42px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.12) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(135deg, #2e2a6b, #4338ca 48%, #1e1b4b);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

/* The admin "ops" watermark still rides on ::before (see .admin-hero::before
   below); the customer Sign In card uses the .brand-lockup element. */
.auth-hero::before {
  content: "";
  position: absolute;
  left: 26px;
  bottom: 160px;
  z-index: -1;
  color: #fff;
  opacity: 0.17;
  font-size: clamp(112px, 16vw, 188px);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.8;
}

/* Solid "payeso" wordmark, vertically centered in the panel. */
.auth-hero .brandmark {
  color: #fff;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 104px);
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-transform: lowercase;
}

/* Barcode flourish is customer-only clutter now — keep it for the admin door. */
.auth-hero:not(.admin-hero)::after { display: none; }

.auth-hero .brand,
.auth-hero h1 { color: #fff; }

.auth-hero .brand-mark {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.auth-hero h1 {
  max-width: 12ch;
  margin: 60px 0 16px;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.auth-hero p.lead {
  max-width: 32ch;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.65;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 650;
}

.feature-list .check {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.auth-hero .foot-note {
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-hero::after {
  content: "";
  position: absolute;
  top: 50px;
  right: 42px;
  width: 64px;
  height: 15px;
  background-image: repeating-linear-gradient(90deg,
    var(--gold) 0 2px, transparent 2px 5px,
    var(--gold) 5px 8px, transparent 8px 10px,
    rgba(199, 203, 212, 0.55) 10px 11px, transparent 11px 15px,
    var(--gold) 15px 18px, transparent 18px 21px,
    rgba(199, 203, 212, 0.55) 21px 23px, transparent 23px 27px);
  background-repeat: repeat-x;
  opacity: 0.85;
}

/* The desktop admin entrance remains distinct from the customer portal. */
.auth-hero.admin-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(135deg, #14161a, #2c2e3a 55%, #0b0c0e);
}

.auth-hero.admin-hero::before { content: "ops"; }

.auth-form {
  padding: 52px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-form h1 {
  margin-bottom: 22px;
  font-size: 32px;
  letter-spacing: -0.01em;
}

/* "Forgot password?" row between the password field and the submit button. */
.auth-form-aux {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 4px;
}

.forgot-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.forgot-link:hover { text-decoration: none; }

.password-field {
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.password-toggle:hover { color: var(--text-muted); }

.password-toggle .icon-off { display: none; }
.password-toggle.is-visible .icon-on { display: none; }
.password-toggle.is-visible .icon-off { display: block; }

h1, h2, h3 {
  margin: 0;
  color: var(--graphite);
  letter-spacing: 0;
}

h1 {
  font-size: 27px;
  line-height: 1.16;
  font-weight: 850;
}

h2 { font-size: 18px; }

p.subtitle {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

label {
  display: block;
  margin: 18px 0 7px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.required-mark {
  color: var(--danger);
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 7px;
}

.field-label-row label {
  margin: 0 !important;
}


.password-rules .rule.met .dot {
  background: var(--success);
  border-color: var(--success);
}

.password-rules .rule.met .dot svg {
  opacity: 1;
}

label:first-of-type:not(.method-tab):not(.bank-option):not(.wallet-option):not(.pm-method):not(.pm-bank):not(.pm-wallet):not(.pm-field) { margin-top: 22px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  color: var(--graphite);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.28);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input::placeholder {
  color: #9a9ba3;
  font-weight: 600;
  letter-spacing: 0;
}

input:focus {
  background: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}

.amount-label { margin-top: 0; }

.amount-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 16px;
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.28);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.amount-field:focus-within {
  background: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}

.amount-field.invalid {
  border-color: rgba(189, 53, 82, 0.5);
}

.amount-field.invalid:focus-within {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(189, 53, 82, 0.12);
}

.field-hint {
  margin: 7px 0 0;
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 700;
}

.pm-fee-breakdown {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.16));
}

.pm-fee-breakdown > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.16));
}

.pm-fee-breakdown > div > span:last-child {
  flex: none;
  color: var(--text, #111827);
  font-weight: 700;
  text-align: right;
}

.pm-fee-breakdown .pm-fee-breakdown-receivable {
  color: var(--text, #111827);
  font-weight: 700;
}

.pm-fee-breakdown .pm-fee-breakdown-total {
  padding-top: 11px;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #111827);
  border-top: none;
  border-bottom: none;
}

.amount-field-prefix {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.amount-field input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--graphite);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* The generic input:focus rule paints its own background/border/shadow on
   the <input> itself — here that's meant to live on .amount-field instead
   (via :focus-within above), so cancel it on the input to avoid a second,
   smaller glow nested inside the wrapper's own focus ring. */
.amount-field input[type="text"]:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

button.primary,
.google-btn {
  min-height: 44px;
  border-radius: 999px;
}

button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 26px;
  padding: 0 22px;
  color: #fff;
  background: var(--blue);
  border: 0;
  box-shadow: 0 18px 32px -20px rgba(99, 102, 241, 0.68);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

button.primary:hover {
  background: #081ca7;
  box-shadow: 0 22px 36px -20px rgba(99, 102, 241, 0.78);
  transform: translateY(-1px);
}

button.primary:active { transform: translateY(0); }

.submit-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.submit-bar button.primary { margin-top: 0; }

/* Validation/error feedback rendered directly under the Generate link button
   so it's visible right where the action is, not only in the page header. */
.submit-bar-error {
  flex: 1 0 100%;
  margin: 0;
}

button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 22px;
  color: var(--blue);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: background 0.12s ease;
}

button.secondary:hover {
  background: rgba(99, 102, 241, 0.06);
}

.pm-secure-bar:has(.js-generate-link) {
  background: var(--blue);
  border-color: transparent;
}

.pm-secure-bar .js-generate-link,
.js-generate-link {
  min-height: 48px;
  color: #fff;
  background: transparent;
  border-radius: 0;
}

.pm-secure-bar .js-generate-link:hover,
.js-generate-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: #25D366;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 18px 32px -20px rgba(37, 211, 102, 0.68);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.whatsapp-btn:hover {
  background: #1ebe57;
  box-shadow: 0 22px 36px -20px rgba(37, 211, 102, 0.78);
  transform: translateY(-1px);
}

.whatsapp-btn:active { transform: translateY(0); }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
  padding: 0 16px;
  color: var(--graphite);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.google-btn:hover {
  border-color: var(--line-strong);
  box-shadow: 0 14px 32px -26px rgba(20, 22, 25, 0.6);
  transform: translateY(-1px);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 12.5px;
}

.alert[hidden] { display: none; }

.alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.alert.danger {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.alert.success {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.alert.info {
  color: var(--text-muted);
  background: rgba(124, 111, 245, 0.08);
  border-color: rgba(124, 111, 245, 0.24);
}

/* Page-level banners sit directly between the header and the stat strip on the
   admin/workspace pages. The base .alert only carries a top margin (it's often
   stacked above a form field that owns its own spacing), which leaves these
   flush against the stat bar below. Give them symmetric rhythm: the top margin
   collapses with .admin-header's 16px, the bottom matches .admin-stats' 20px. */
.admin-main > .alert { margin: 16px 0 20px; }

.muted-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: color 0.15s ease;
}

.muted-link:hover { color: var(--blue); }

.topbar {
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 22px;
  counter-reset: pm-step;
}

.stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.stepper .step::before {
  counter-increment: pm-step;
  content: counter(pm-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: #fff;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stepper .step.active { color: var(--blue); }

.stepper .step.active::before {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.stepper .sep {
  flex: 0 0 auto;
  width: 44px;
  height: 1px;
  background: var(--line);
}

.checkout-shell {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 500px;
  column-gap: 0;
  align-items: center;
  justify-content: center;
}

.ticket-card {
  grid-column: 1;
  grid-row: 1;
  width: 368px;
  min-height: 260px;
  margin-top: 14px;
  padding: 28px 26px 24px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(44, 46, 58, 0.04) 0 1px, transparent 1px),
    #fffefa;
  background-size: 18px 18px, 100% 18px, auto;
  border: 1px solid rgba(44, 46, 58, 0.12);
  border-radius: 8px;
  box-shadow: 0 20px 40px -34px rgba(20, 22, 25, 0.5);
  position: relative;
  z-index: 1;
  overflow: visible;
  isolation: isolate;
}

.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ticket-card::before {
  left: 0;
  right: 0;
  top: -8px;
  height: 16px;
  z-index: 0;
  background:
    radial-gradient(circle at 8px 8px, transparent 7px, #fffefa 7.5px) 0 0 / 16px 16px repeat-x;
}

.ticket-card::after {
  left: 0;
  right: 0;
  bottom: -8px;
  height: 16px;
  z-index: 0;
  background:
    radial-gradient(circle at 8px 8px, transparent 7px, #fffefa 7.5px) 0 0 / 16px 16px repeat-x;
}

.ticket-head {
  min-height: auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
}

.ticket-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(44, 46, 58, 0.34) 0 8px, transparent 8px 14px);
}

.ticket-head::after {
  content: "RECEIPT";
  position: absolute;
  top: -1px;
  left: 0;
  color: var(--blue);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.ticket-top {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.ticket-chip {
  width: 40px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.32) 42% 58%, transparent 58%),
    rgba(255, 255, 255, 0.12);
}

.ticket-brand {
  color: var(--graphite);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticket-label {
  grid-column: 1;
  grid-row: 2;
  margin-top: 38px;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticket-payer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 30px;
}

.ticket-payer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ticket-payer-row .k {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticket-payer-row label.k {
  margin-top: 0 !important;
}

.ticket-payer-row .v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--graphite);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.ticket-payer-row .ticket-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
}

.ticket-payer-row .ticket-input::placeholder {
  color: var(--text-faint);
  font-weight: 500;
}

.ticket-payer-row .ticket-input:hover {
  border-bottom-color: rgba(44, 46, 58, 0.18);
}

.ticket-payer-row .ticket-input:focus {
  border-bottom-color: var(--blue);
  background: transparent;
  box-shadow: none;
}

.ticket-head-with-payer .ticket-label {
  grid-row: 3;
  margin-top: 16px;
}

.ticket-head-with-payer .ticket-amount {
  grid-row: 4;
}

.ticket-amount {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 2px;
  color: var(--ink);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-sub {
  max-width: 24ch;
  margin-top: 8px;
  color: rgba(27, 32, 37, 0.72);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.55;
}

.ticket-divider {
  height: 1px;
  margin: 22px 0 14px;
  border: 0;
  background: repeating-linear-gradient(90deg, rgba(44, 46, 58, 0.34) 0 8px, transparent 8px 14px);
}

.ticket-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 10px 0 0;
  background: transparent;
  border-top: 1px solid rgba(44, 46, 58, 0.08);
  border-radius: 0;
}

.ticket-line {
  min-width: 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 0;
  border-bottom: 0;
}

.ticket-line:last-child {
  border-bottom: 0;
}

.ticket-line .k {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticket-line .v {
  color: var(--graphite);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}

.ticket-line .money {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 4px;
}

.ticket-line .currency {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.ticket-line .amount {
  text-align: right;
}

.ticket-line.total {
  min-height: auto;
}

.ticket-line.total .v {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.ticket-line.total .currency {
  font-size: 11px;
}

.form-card {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  min-height: 540px;
  padding: 32px 36px 36px;
}

.page-checkout .form-card {
  background: rgba(255, 254, 250, 0.98);
  border: 1px solid rgba(44, 46, 58, 0.1);
  box-shadow: 0 18px 42px -36px rgba(20, 22, 25, 0.36);
}

.page-checkout .form-card h1 {
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

.page-checkout .form-card p.subtitle {
  max-width: 32ch;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.page-checkout .form-card form {
  margin-top: 14px;
}

.page-checkout .form-card label:first-of-type:not(.method-tab):not(.bank-option):not(.wallet-option),
.page-checkout .field-grid > div:first-child label {
  margin-top: 0;
}

.page-checkout .form-card label:not(.method-tab):not(.bank-option):not(.wallet-option) {
  margin: 10px 0 5px;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.page-checkout .form-card input[type="text"],
.page-checkout .form-card input[type="email"],
.page-checkout .form-card input[type="tel"],
.page-checkout .form-card input[type="password"] {
  height: 42px;
  color: var(--ink);
  background: rgba(179, 180, 189, 0.08);
  border: 1px solid rgba(46, 42, 107, 0.32);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0;
  box-shadow: none;
}

.page-checkout .form-card input[readonly] {
  color: var(--graphite);
  background: rgba(179, 180, 189, 0.1);
  border-color: transparent;
}

.page-checkout .form-card input:focus {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.38);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.page-checkout .form-card input[readonly]:focus {
  background: rgba(179, 180, 189, 0.1);
  border-color: transparent;
  box-shadow: none;
}

.page-checkout .amount-field {
  height: 44px;
  background: rgba(179, 180, 189, 0.08);
  border: 1px solid rgba(46, 42, 107, 0.32);
  border-radius: 6px;
}

.page-checkout .amount-field:focus-within {
  background: rgba(179, 180, 189, 0.08);
  border-color: rgba(46, 42, 107, 0.32);
  box-shadow: none;
}

.page-checkout .amount-field-prefix {
  color: var(--text-muted);
  font-size: 13px;
}

.page-checkout .amount-field input[type="text"] {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.page-checkout .amount-field input[type="text"]:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.icon-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
}

.form-top-row {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.method-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.method-tab {
  min-width: 0;
  margin: 0;
  padding: 10px 26px 10px 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: relative;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.method-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.method-tab-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.method-tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.15s ease;
}

.method-tab-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.method-tab-title {
  min-width: 0;
  overflow-wrap: break-word;
  white-space: normal;
  color: var(--graphite);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
}

.method-tab-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--line);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.method-tab:hover {
  border-color: rgba(99, 102, 241, 0.28);
  transform: translateY(-1px);
}

.method-tab:has(input:checked) {
  background: rgba(99, 102, 241, 0.04);
  border-color: var(--blue);
  box-shadow: 0 8px 18px -14px rgba(5, 10, 68, 0.4);
  color: var(--graphite);
  transform: translateY(-1px);
}

.method-tab:has(input:checked) .method-tab-icon {
  border-color: rgba(99, 102, 241, 0.3);
}

.method-tab:has(input:checked) .method-tab-check {
  opacity: 1;
  transform: scale(1);
  background: var(--blue);
  border-color: var(--blue);
}

.icon-btn {
  width: 38px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  color: var(--graphite);
  background: #fff;
  border-color: var(--line);
}

.logout-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.field-grid > div:first-child label { margin-top: 22px; }

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.bank-grid,
.wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.bank-option,
.wallet-option {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 11px;
  color: var(--graphite);
  background: #f6f7fb;
  border: 1px solid rgba(46, 42, 107, 0.24);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.bank-option:hover,
.wallet-option:not(.disabled):hover {
  background: #fff;
  border-color: rgba(46, 42, 107, 0.4);
  transform: translateY(-1px);
}

.bank-option input,
.wallet-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bank-option:has(input:checked),
.wallet-option:has(input:checked) {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.42);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 16px 32px -30px rgba(20, 22, 25, 0.7);
}

.bank-logo {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}

.bank-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bank-check {
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--blue);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bank-option:has(input:checked) .bank-check,
.wallet-option:has(input:checked) .bank-check {
  display: flex;
}

.method-panel { display: none; margin-top: 18px; }
.form-card:has(input[name="paymentMethod"][value="fpx"]:checked) .panel-fpx { display: block; }
.form-card:has(input[name="paymentMethod"][value="duitnow"]:checked) .panel-duitnow { display: block; }
.form-card:has(input[name="paymentMethod"][value="ewallet"]:checked) .panel-ewallet { display: block; }

.page-checkout .submit-bar {
  margin-top: 20px;
}

.brand-label, .ticket-brand { display: none; }
.ticket-brand-static { display: inline !important; }
.page:has(input[name="paymentMethod"][value="fpx"]:checked) .brand-label-fpx,
.page:has(input[name="paymentMethod"][value="fpx"]:checked) .ticket-brand-fpx { display: inline; }
.page:has(input[name="paymentMethod"][value="duitnow"]:checked) .brand-label-duitnow,
.page:has(input[name="paymentMethod"][value="duitnow"]:checked) .ticket-brand-duitnow { display: inline; }
.page:has(input[name="paymentMethod"][value="ewallet"]:checked) .brand-label-ewallet,
.page:has(input[name="paymentMethod"][value="ewallet"]:checked) .ticket-brand-ewallet { display: inline; }

.duitnow-box {
  --duitnow-pink: #e5155f;
  padding: 20px 22px;
  background: linear-gradient(165deg, rgba(229, 21, 95, 0.07), rgba(229, 21, 95, 0.015) 60%);
  border: 1px solid rgba(229, 21, 95, 0.18);
  border-radius: var(--radius-md);
}

.duitnow-box-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.duitnow-qr-mark {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(229, 21, 95, 0.2);
  border-radius: 50%;
  box-shadow: 0 10px 22px -14px rgba(229, 21, 95, 0.5);
  flex-shrink: 0;
}

.duitnow-qr-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duitnow-box h3 {
  font-size: 14px;
  color: var(--graphite);
}

.duitnow-box-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.duitnow-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 15px 0 0;
  border-top: 1px dashed rgba(229, 21, 95, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.duitnow-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.duitnow-steps .step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--duitnow-pink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-frame-card { min-height: auto; }

.secure-frame-shell {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}

.secure-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #f6f7fb;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.secure-frame {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}

@media (max-width: 520px) {
  .secure-frame { height: 480px; }
}

.checkout-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
}

.checkout-actions form { margin: 0; }

.checkout-actions .muted-link { margin-top: 0; }

.button-secondary-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-secondary-small:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.3);
}

.button-secondary-small:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button-danger-small {
  color: var(--danger);
  border-color: var(--danger-border);
}

.button-danger-small:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.wallet-option.disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.wallet-option .soon-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  margin-left: 0;
  padding: 2px 5px;
  color: var(--text-faint);
  background: #ebe8e2;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.result-card {
  width: min(100%, 460px);
  padding: 42px 40px;
  text-align: center;
}

.status-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 50%;
}

.status-icon.paid {
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
}

.status-icon.unpaid {
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
}

.status-icon.failed {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}

.detail-list {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: left;
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--graphite);
  font-size: 13px;
}

.detail-row .k { color: var(--text-muted); }

.detail-row .v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-align: right;
}

.request-list {
  gap: 4px;
}

.request-row {
  padding: 10px 4px;
  margin: 0 -4px;
  border-radius: 10px;
  text-decoration: none;
  flex-wrap: wrap;
  row-gap: 6px;
  transition: background-color 0.15s ease;
}

.request-row:hover,
.request-row:focus-visible {
  background: rgba(99, 102, 241, 0.05);
}

.request-row .k {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.request-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.unpaid {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.status-pill.paid {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.status-pill.failed {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.hint {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.page-history {
  align-items: flex-start;
  padding-top: 34px;
}

.back-nav {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px -22px rgba(20, 22, 25, 0.7);
  text-decoration: none;
  font-size: 23px;
  font-weight: 850;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.back-nav:hover,
.back-nav:focus-visible {
  color: var(--blue);
  border-color: rgba(99, 102, 241, 0.28);
  box-shadow: var(--shadow-focus);
  transform: translateY(-1px);
  outline: none;
}

.inline-back {
  position: absolute;
  top: 18px;
  left: 18px;
}

.empty-history {
  padding: 26px 22px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.empty-history h2 {
  font-size: 17px;
}

.empty-history p {
  max-width: 34ch;
  margin: 8px auto 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.page-detail {
  align-items: flex-start;
  padding: 0 16px 32px;
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.05), transparent 280px),
    var(--background);
}

.request-detail-shell {
  width: min(100%, 430px);
  position: relative;
}

.request-detail-shell > .back-nav {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  width: 34px;
  height: 34px;
  color: var(--cb-ink, #1b2025);
  background: rgba(27, 32, 37, 0.08);
  border-color: rgba(27, 32, 37, 0.14);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.request-detail-hero {
  position: relative;
  min-height: 238px;
  padding: 58px 22px 46px;
  color: #fff;
  background:
    radial-gradient(180px 120px at 82% 18%, rgba(179, 180, 189, 0.22), transparent 62%),
    var(--gradient);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 24px 44px -34px rgba(5, 10, 68, 0.82);
  overflow: hidden;
}

.request-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.38;
  pointer-events: none;
}

.request-detail-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.request-detail-hero .eyebrow {
  margin: 0 0 7px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.request-detail-hero h1 {
  color: #fff;
  font-size: 18px;
  line-height: 1.14;
}

.request-detail-hero .status-pill {
  position: absolute;
  top: -42px;
  right: 0;
  flex: 0 0 auto;
  font-size: 9px;
  padding: 4px 9px;
}

.request-detail-hero .status-pill.unpaid {
  color: var(--warning);
  background: var(--warning-on-dark-bg);
  border-color: var(--warning-on-dark-border);
}

.request-detail-hero .status-pill.paid {
  color: var(--success-on-dark);
  background: var(--success-on-dark-bg);
  border-color: var(--success-on-dark-border);
}

.request-detail-hero .status-pill.failed {
  color: var(--danger-on-dark);
  background: var(--danger-on-dark-bg);
  border-color: var(--danger-on-dark-border);
}

.request-amount {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  color: #fff;
  font-size: 38px;
  font-weight: 930;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.request-recipient {
  position: relative;
  z-index: 1;
  max-width: 28ch;
  margin: 8px auto 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 760;
  overflow-wrap: anywhere;
  text-align: center;
}

.detail-panel {
  margin-top: 10px;
  padding: 16px;
  background: var(--card);
  border: 1px solid rgba(44, 46, 58, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 34px -32px rgba(20, 22, 25, 0.46);
}

.request-detail-hero + .detail-panel {
  margin-top: -24px;
  position: relative;
  z-index: 3;
}

.link-panel {
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0)),
    var(--card);
}

.compact-title,
.detail-stack dt,
.link-panel label {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-stack {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding-top: 0;
  border-top: 0;
}

.detail-stack.compact {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.detail-stack div {
  display: grid;
  grid-template-columns: minmax(94px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(44, 46, 58, 0.08);
}

.detail-stack div:last-child {
  border-bottom: 0;
}

.detail-stack dd {
  min-width: 0;
  margin: 0;
  color: var(--graphite);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 760;
  overflow-wrap: anywhere;
  text-align: right;
}

.detail-stack dd .status-pill {
  justify-content: center;
}

/* Long identifiers (transaction/order IDs) get their own row layout —
   label on top, value below — instead of squeezing onto the shared
   label|value grid row, which wraps a UUID into a ragged, hard-to-read
   two-line mess at mobile widths. */
.detail-stack .id-row {
  display: block;
  min-height: 0;
  padding: 12px 0;
}

.detail-stack .id-row dt {
  margin-bottom: 8px;
}

.detail-stack .id-row dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.id-value {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.id-copy {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: rgba(44, 46, 58, 0.06);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.id-copy:hover,
.id-copy:focus-visible {
  color: var(--blue);
  background: rgba(99, 102, 241, 0.1);
  outline: none;
}

.id-copy.copied {
  color: var(--success);
  background: var(--success-bg);
}

.detail-stack .muted-value {
  color: var(--text-muted);
  font-family: var(--font);
}

.contact-panel .detail-stack dd {
  color: var(--graphite);
  font-size: 12px;
  font-weight: 760;
}

.compact-title {
  margin: 0;
}

.link-panel label {
  display: block;
  margin: 0 0 5px;
  font-size: 9px;
}

.share-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.share-head span {
  color: var(--graphite);
  font-size: 13px;
  font-weight: 900;
}

.share-head p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 650;
}

.share-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: rgba(179, 180, 189, 0.1);
  border: 1px solid rgba(44, 46, 58, 0.08);
  border-radius: 12px;
}

.share-link-box input {
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  color: var(--graphite);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 11.5px;
  font-weight: 750;
}

.copy-mini,
.whatsapp-mini {
  min-width: 48px;
  min-height: 32px;
  padding: 0 9px;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 850;
}

.whatsapp-mini {
  min-width: 40px;
  width: 38px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border-radius: 10px;
  text-decoration: none;
}

.whatsapp-mini svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.share-actions {
  display: grid;
  margin-top: 10px;
}

.whatsapp-share-small,
.copy-share-full {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 880;
  box-shadow: 0 14px 24px -18px rgba(37, 211, 102, 0.72);
}

.copy-share-full {
  width: 100%;
  color: #fff;
  background: var(--blue);
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 14px 26px -20px rgba(99, 102, 241, 0.68);
}

.copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
}

.copy-field input {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  color: var(--graphite);
  background: var(--field);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 750;
}

.copy-field button {
  min-width: 48px;
  min-height: 32px;
  padding: 0 9px;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 850;
}

@media (max-width: 900px) {
  .page { padding: 24px 16px; }
  .page-checkout { padding-top: 0; }
  .auth-shell {
    max-width: 460px;
    grid-template-columns: 1fr;
  }
  /* The full-height side panel doesn't fit a phone screen, but the branded
     gradient card itself still should — collapse it into a compact banner
     (row layout, no room-hungry watermark/decoration) that sits above the
     form instead of disappearing outright. */
  .auth-hero {
    min-height: auto;
    padding: 18px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .auth-hero::before,
  .auth-hero::after,
  .auth-hero .brandmark {
    display: none;
  }
  .auth-hero h1 {
    max-width: none;
    margin: 0;
    font-size: 18px;
  }
  .auth-hero p.lead {
    display: none;
  }
  .auth-hero .foot-note {
    flex-shrink: 0;
    font-size: 9px;
    white-space: nowrap;
  }
  .auth-form { padding: 28px 26px 36px; }
  /* iOS Safari zooms the whole page on focus of any input under 16px —
     the desktop pill inputs are 13px, so bump just the auth fields here. */
  .auth-form input[type="text"],
  .auth-form input[type="email"],
  .auth-form input[type="password"] {
    font-size: 16px;
  }
  /* The desktop type scale (10-13px caps/labels, tight tracking) reads fine
     at arm's length on a monitor but is cramped on a handheld phone —
     nudge the auth-form's small text up a step without changing the look. */
  .auth-form label {
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
  .auth-form .alert {
    font-size: 13px;
  }
  .auth-form button.primary,
  .auth-form .google-btn {
    font-size: 14px;
  }
  .auth-form .divider {
    font-size: 10px;
  }
  .auth-form .muted-link {
    font-size: 13.5px;
  }
  /* Shared 2FA/verification modal (login, register, payment-select all use
     it) gets the same bump since it's reached from this mobile flow too. */
  .modal-card h2 {
    font-size: 19px;
  }
  .modal-card .subtitle {
    font-size: 13px;
  }
  .modal-card label {
    font-size: 10.5px;
  }
  .modal-card button.primary,
  .modal-card button.secondary {
    font-size: 14px;
  }
  .stepper {
    display: grid;
    grid-template-columns: auto 28px auto 28px auto;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
  }
  /* Scoped away from .page-generate-link: this grid-template-columns (5
     tracks = exactly 3 steps + 2 separators) was sized for PaymentCheckout.jsx's
     plain 3-step stepper. PaymentSelect.jsx's "Generate payment link" stepper
     has 5 steps and lives inside its own .pm-card-header (see that rule's
     comment ~line 4098 for the matching header fix) - left unscoped, this
     would ALSO pin the stepper itself to the viewport top on scroll,
     independently of and in addition to the header overlap. */
  .page-checkout:not(.page-generate-link) .stepper {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100vw;
    min-height: 44px;
    margin: 0 calc(50% - 50vw) 10px;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid rgba(44, 46, 58, 0.08);
    box-shadow: 0 10px 22px -22px rgba(20, 22, 25, 0.4);
  }
  .stepper .step {
    font-size: 8.5px;
    letter-spacing: 0.03em;
    line-height: 1.1;
    white-space: nowrap;
    gap: 5px;
  }
  .stepper .step::before {
    width: 15px;
    height: 15px;
    font-size: 8px;
  }
  .page-checkout .stepper .step {
    color: var(--text-faint);
  }
  .page-checkout .stepper .step.active {
    color: var(--blue);
  }
  .stepper .sep {
    flex: 0 0 auto;
    width: 28px;
    max-width: none;
    min-width: 0;
  }
  .page-checkout .stepper .sep {
    background: var(--line);
  }
  .checkout-shell {
    max-width: 500px;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ticket-card {
    position: relative;
    top: auto;
    z-index: 1;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-height: auto;
    margin-top: 0;
    padding: 20px 18px 18px;
    border-radius: 8px;
    box-shadow: 0 14px 30px -26px rgba(20, 22, 25, 0.9);
  }
  .ticket-head {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 8px 14px;
    align-items: end;
    min-height: auto;
    width: 100%;
    transform: none;
    color: var(--ink);
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .ticket-head::before {
    top: auto;
    bottom: -16px;
    width: auto;
    height: 1px;
    border-radius: 0;
  }
  .ticket-top {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .ticket-label {
    grid-column: 1;
    grid-row: 2;
    margin-top: 24px;
  }
  .ticket-amount {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
    font-size: 29px;
  }
  .ticket-divider {
    margin: 16px 0 10px;
  }
  .ticket-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    overflow: hidden;
  }
  .ticket-line {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border-bottom: 0;
    border-right: 0;
  }
  .ticket-line:last-child { border-right: 0; }
  .ticket-line .v { text-align: left; }
  .ticket-line .money { grid-template-columns: auto auto; }
  .ticket-line.total {
    min-height: 58px;
  }
  .ticket-line.total .v {
    font-size: 15px;
  }
  .form-card {
    grid-column: 1;
    grid-row: 1;
    min-height: auto;
    margin-top: 0;
    padding: 22px 20px 26px;
    border-radius: var(--radius-lg);
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .page-checkout h1 {
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: 0;
  }
  .page-checkout p.subtitle {
    font-size: 13.5px;
    line-height: 1.5;
  }
  .page-checkout label {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  .page-checkout input[type="text"],
  .page-checkout input[type="email"],
  .page-checkout input[type="tel"],
  .page-checkout input[type="password"] {
    font-size: 15px;
    letter-spacing: 0;
  }
  .page-checkout .amount-field input[type="text"] {
    font-size: 18px;
  }
  .page-checkout .field-hint {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .page-checkout .method-tab-title {
    font-size: 14px;
    line-height: 1.25;
  }
  .page-checkout .section-title {
    margin-top: 14px;
    margin-bottom: 9px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  .page-checkout .bank-option,
  .page-checkout .wallet-option {
    font-size: 13.5px;
    line-height: 1.25;
  }
  .page-checkout .bank-option,
  .page-checkout .wallet-option {
    min-height: 54px;
    gap: 8px;
    padding: 9px 28px 9px 9px;
    font-size: 12px;
    line-height: 1.18;
  }
  .page-checkout .bank-option {
    padding-right: 9px;
  }
  .page-checkout .bank-option .bank-check {
    width: 16px;
    height: 16px;
  }
  .page-checkout .bank-option .bank-logo,
  .page-checkout .wallet-option .bank-logo {
    width: 30px;
    height: 30px;
    padding: 5px;
  }
  .page-checkout .wallet-option .soon-badge {
    top: 5px;
    right: 5px;
    padding: 2px 4px;
    font-size: 7px;
  }
  .page-checkout button.primary,
  .page-checkout button.secondary,
  .page-checkout .button-secondary-small,
  .page-checkout .whatsapp-btn {
    font-size: 15px;
  }
  .page-checkout .ticket-brand,
  .page-checkout .ticket-label,
  .page-checkout .ticket-line .k {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }
  .page-checkout .ticket-line .v {
    font-size: 12.5px;
  }
  .page-checkout .ticket-line.total .v {
    font-size: 15.5px;
  }
  .page-checkout .duitnow-box h3 {
    font-size: 16px;
    line-height: 1.25;
  }
  .page-checkout .duitnow-box-head p,
  .page-checkout .duitnow-steps li,
  .page-checkout .hint,
  .page-checkout .muted-link {
    font-size: 13.5px;
    line-height: 1.5;
  }
}

@media (max-width: 520px) {
  .page:not(:has(.auth-shell)) { align-items: flex-start; }
  .page-history {
    padding: 0 12px 28px;
  }
  .back-nav {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }
  .inline-back {
    top: 14px;
    left: 14px;
  }
  .page-detail {
    padding: 0 12px 28px;
  }
  .request-detail-shell {
    width: 100%;
  }
  .request-detail-hero {
    min-height: 230px;
    margin: 0 -12px;
    padding: 58px 20px 44px;
    border-radius: 0 0 24px 24px;
  }
  .request-detail-hero h1 {
    font-size: 18px;
  }
  .request-amount {
    font-size: 36px;
  }
  .detail-stack div {
    grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
    gap: 10px;
  }
  .detail-stack .transaction-id-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
  }
  .detail-stack dd {
    text-align: right;
  }
  .detail-stack .transaction-id-row dd {
    font-size: 10.5px;
    text-align: right;
  }
  .copy-field button {
    min-height: 34px;
  }
  .topbar { margin-top: 4px; }
  .page-checkout {
    padding-top: 0;
  }
  /* Scoped away from .page-generate-link - see the matching comment on the
     equivalent 900px rule above for why this duplicate declaration needs
     the same exclusion. */
  .page-checkout:not(.page-generate-link) .stepper {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100vw;
    min-height: 44px;
    margin: 0 calc(50% - 50vw) 10px;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid rgba(44, 46, 58, 0.08);
    box-shadow: 0 10px 22px -22px rgba(20, 22, 25, 0.4);
  }
  /* The three-item flex row (name / amount / status pill) has nowhere to
     shrink on a phone width, so the amount wraps mid-number instead — stack
     name above amount+pill instead of letting flex squeeze it. */
  .request-row .k {
    flex: 1 1 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .request-row-meta {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .stepper {
    display: grid;
    grid-template-columns: auto 28px auto 28px auto;
    gap: 8px;
    justify-content: center;
  }
  .stepper .step {
    font-size: 8.5px;
    letter-spacing: 0.03em;
    line-height: 1.1;
    white-space: nowrap;
    gap: 5px;
  }
  .stepper .step::before {
    width: 15px;
    height: 15px;
    font-size: 8px;
  }
  .page-checkout .stepper .step {
    color: var(--text-faint);
  }
  .page-checkout .stepper .step.active {
    color: var(--blue);
  }
  .stepper .sep {
    width: 28px;
    max-width: none;
    min-width: 0;
  }
  .page-checkout .stepper .sep {
    background: var(--line);
  }
  .ticket-card {
    position: relative;
    top: auto;
    z-index: 1;
    min-height: auto;
    grid-row: 2;
    padding: 18px 16px 16px;
    background:
      linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0 1px, transparent 1px),
      linear-gradient(0deg, rgba(44, 46, 58, 0.04) 0 1px, transparent 1px),
      #fffefa;
    background-size: 18px 18px, 100% 18px, auto;
    background-color: var(--card);
    box-shadow: 0 12px 26px -24px rgba(20, 22, 25, 0.9);
  }
  .ticket-head {
    min-height: auto;
    padding: 0;
  }
  .ticket-label {
    margin-top: 22px;
  }
  .ticket-amount {
    font-size: 27px;
    line-height: 1.1;
  }
  .ticket-divider {
    margin: 14px 0 9px;
  }
  .logout-btn {
    top: 16px;
    right: 16px;
  }
  .method-tabs {
    grid-template-columns: 1fr;
  }
  .method-tab {
    padding: 12px 40px 12px 12px;
  }
  .method-tab-title {
    white-space: normal;
  }
  .method-tab-check {
    top: 50%;
    right: 12px;
    transform: translateY(-50%) scale(0.7);
  }
  .method-tab:has(input:checked) .method-tab-check {
    transform: translateY(-50%) scale(1);
  }
  .result-card {
    padding: 34px 24px;
  }
  .submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-direction: column-reverse;
    margin: 16px -20px -26px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 254, 250, 0) 0%, var(--card) 28%);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .submit-bar button.primary {
    margin-top: 0;
    box-shadow: 0 12px 26px -14px rgba(99, 102, 241, 0.5);
  }
  .submit-bar button.secondary {
    padding: 0 14px;
  }
  .page-checkout h1 {
    font-size: 21px;
  }
  .page-checkout .secure-frame-bar {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Two-factor authentication: registration bind step + login step */

.totp-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 999px;
}

.auth-form .totp-icon {
  margin: 0 auto 18px;
}

.totp-form { margin-top: 22px; }

.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.otp-box {
  width: 46px !important;
  height: 54px !important;
  padding: 0 !important;
  flex: 0 0 auto;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.otp-boxes-error .otp-box {
  border-color: var(--danger) !important;
}

@media (max-width: 380px) {
  .otp-box {
    width: 40px !important;
    height: 48px !important;
    font-size: 19px !important;
  }
  .otp-boxes { gap: 7px; }
  .auth-form { padding: 28px 18px; }
  .auth-hero h1 { font-size: 16px; }
  .auth-hero .foot-note { font-size: 8.5px; }
  .modal-card { padding: 28px 22px; }
  .modal-card h2 { font-size: 17px; }
}

.qr-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.qr-frame img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  image-rendering: pixelated;
}

.manual-key-box {
  padding: 14px 16px;
  background: var(--field);
  border-radius: var(--radius-md);
  text-align: center;
}

.manual-key-box .k {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manual-key-box .v {
  margin-top: 8px;
  color: var(--graphite);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* Login page's in-page 2FA modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 10, 24, 0.5);
  backdrop-filter: blur(3px);
  animation: modal-fade-in 0.15s ease;
}

.modal-overlay[hidden] { display: none; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 34px 32px;
  text-align: center;
  animation: modal-pop-in 0.18s ease;
}

/* Dismiss control for modals that need one but shouldn't spend body space
   on a full "Cancel" row on a cramped phone screen: a text button at the
   bottom on desktop, a plain corner X on mobile — same toggle mechanism as
   .auth-desktop-only/.auth-mobile-only elsewhere, just scoped to these two
   classes instead of requiring the .page/.auth-m-page compound selector
   those rely on. */
.modal-close-x {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-close-x:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

@media (max-width: 900px) {
  .modal-card button.secondary.modal-cancel-btn { display: none; }
  .modal-close-x { display: inline-flex; }
}

/* Standalone auth pages that reuse the plain .modal-card popup look
   (ChangePassword.jsx, Login2fa.jsx, Login2faSetup.jsx — bookmark/refresh
   fallbacks for modals that normally live inline on the login page) need
   the same light background at every width. Plain .page has none of its
   own and would otherwise inherit body's dark mobile-only navy below,
   flipping dark exactly where the equivalent inline modal (dimmed over an
   already-light .auth-m-page) stays light. */
.page-auth-popup {
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.06) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.06) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(135deg, rgba(124, 111, 245, 0.16) 0%, rgba(99, 102, 241, 0.1) 55%, rgba(139, 92, 246, 0.16) 100%),
    #f3f1fb;
}

.modal-card .modal-icon {
  margin: 0 auto 16px;
}

.modal-card h2 {
  font-size: 20px;
  font-weight: 850;
}

.modal-card .subtitle { text-align: center; }

.modal-card .totp-form,
.modal-card .modal-body-left { text-align: left; }

.modal-card:has(.modal-body-left) { max-width: 440px; }

.modal-card button.secondary {
  margin-top: 10px;
  min-height: 40px;
}

/* 2FA setup panel: a two-column QR-left/code-right layout was tried here
   and reworked twice (overflowing OTP boxes at 600px, then an unbalanced
   dead gap once that was fixed at 680px) before landing on this simpler
   single centered column instead — QR front and center, the manual-entry
   code hidden behind a toggle link until asked for (matches the pattern
   GitHub/Google/Okta use for this exact screen). One column sidesteps the
   whole two-column balancing act, and needs no width/breakpoint special-
   casing — same layout at every viewport width. */
.totp-setup-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-card .totp-setup-stack,
.modal-card .totp-setup-stack .totp-form,
.modal-card .totp-setup-stack .auth-m-subtitle {
  text-align: center;
}

.authenticator-guide {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 33, 192, 0.14);
  border-radius: 12px;
  background: rgba(236, 239, 255, 0.68);
  color: var(--text);
  text-align: left;
}

.authenticator-guide h3 {
  margin: 0;
  color: var(--graphite);
  font-size: 14px;
  font-weight: 850;
}

.authenticator-guide ol {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.42;
}

.authenticator-guide strong { font-weight: 800; }

.authenticator-guide-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.totp-setup-stack .qr-frame img { max-width: 190px; }

/* Trims the modal's overall height: shorter subtitle copy (see
   TwoFactorSetupPanel.jsx) plus tighter gaps between the QR/toggle/OTP
   row/button than the shared defaults, since this panel doesn't need the
   extra breathing room those defaults were sized for elsewhere. */
.totp-setup-stack .qr-frame { margin: 14px 0 0; }
.totp-setup-stack .totp-form { margin-top: 16px; }

.manual-key-toggle {
  display: inline-block;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.totp-setup-stack .manual-key-box {
  margin-top: 14px;
  width: 100%;
}

.totp-setup-stack .otp-boxes { margin-top: 6px; }

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Mobile-style auth screens ("auth-m-" namespace)
   Login / Register / 2FA activate. Full-bleed dark
   navy page with a white card floating on top: all four corners rounded,
   inset from the screen edges, overlapping up into the dove header via a
   negative margin. The footer link sits directly on the plain dark
   background below the card — it isn't its own rounded band.
   ========================================================================== */

.auth-m-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--navy);
}

.auth-m-head {
  flex: 0 0 auto;
  padding: 44px 24px 60px;
  text-align: center;
  background: var(--navy);
}

.auth-m-dove {
  display: inline-flex;
}

.auth-m-card {
  flex: 1 0 auto;
  position: relative;
  z-index: 2;
  margin: -40px 18px 0;
  padding: 34px 26px 30px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 24px 50px -22px rgba(5, 10, 68, 0.45);
}

/* Desktop-only admin colours and form surface. The mobile treatment below
   deliberately uses the customer portal's responsive layout instead. */
.page.admin-login-page { background: #f3f1fb; }

.page.admin-login-page .auth-shell {
  background: #20222a;
  border-color: rgba(30, 27, 75, 0.22);
  box-shadow: 0 28px 72px rgba(41, 32, 92, 0.28), 0 8px 24px rgba(25, 24, 39, 0.16);
}

.page.admin-login-page .auth-form {
  color: #23252f;
  background: #fff;
}

.page.admin-login-page .admin-login-form label { color: #505462; }

.page.admin-login-page .admin-login-form input[type="text"],
.page.admin-login-page .admin-login-form input[type="password"],
.page.admin-login-page .admin-login-form input[type="text"]:focus,
.page.admin-login-page .admin-login-form input[type="password"]:focus {
  color: #23252f;
  background: #faf9ff;
  border-color: rgba(67, 56, 202, 0.24);
}

.page.admin-login-page .admin-login-form input:focus {
  border-color: rgba(129, 140, 248, 0.9);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

.page.admin-login-page .admin-login-form .password-toggle { color: #737785; }
.page.admin-login-page .admin-login-form .password-toggle:hover { color: #4338ca; }

.page.admin-login-page button.primary {
  background: #6366f1;
  box-shadow: 0 16px 30px -18px rgba(99, 102, 241, 0.72);
}

.page.admin-login-page button.primary:hover { background: #818cf8; }

.auth-m-card h1 {
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  text-align: center;
}

.auth-m-card p.auth-m-subtitle {
  max-width: 30ch;
  margin: 8px auto 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.auth-m-card form { margin-top: 24px; }

.auth-m-card label {
  margin: 18px 0 6px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-m-card label:first-of-type,
.auth-m-card .field-label-row {
  margin-top: 4px;
}

.auth-m-card input[type="text"],
.auth-m-card input[type="email"],
.auth-m-card input[type="password"],
.auth-m-card input[type="tel"] {
  height: 40px;
  padding: 0 2px;
  color: var(--graphite);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 650;
}

.auth-m-card input:focus {
  background: transparent;
  border-color: var(--navy);
  box-shadow: none;
}

.auth-m-card .password-field input {
  padding-right: 36px;
}

.auth-m-card .password-toggle {
  width: 36px;
  height: 40px;
}

button.auth-m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 30px;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 16px 28px -18px rgba(5, 10, 68, 0.6);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button.auth-m-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 34px -18px rgba(5, 10, 68, 0.7);
}

button.auth-m-btn:active { transform: translateY(0); }

button.auth-m-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-m-card .alert {
  margin-top: 0;
  margin-bottom: 18px;
}

.auth-m-foot {
  flex: 0 0 auto;
  padding: 24px 24px 8px;
  text-align: center;
}

.auth-m-foot .muted-link {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 650;
}

.auth-m-foot .muted-link:hover { color: #fff; }

.auth-m-foot .muted-link strong,
.auth-m-foot .muted-link .accent {
  color: #82b4ff;
  font-weight: 800;
}

.auth-m-card .otp-boxes { justify-content: center; margin-top: 6px; }

.auth-m-card .otp-box {
  background: var(--field);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--navy);
}

.auth-m-card .otp-box:focus {
  background: #fff;
  border-color: var(--navy);
  box-shadow: none;
}

.auth-m-card .otp-boxes-error .otp-box {
  border-color: var(--danger) !important;
}

@media (max-width: 380px) {
  .auth-m-card { padding: 30px 20px 50px; }
  .auth-m-head { padding: 36px 20px 60px; }
}

/* ==========================================================================
   Payment method page ("pm-" namespace)
   Scoped to payment-select.html / pay-select.html only. Mobile breakpoints
   for this namespace live at the bottom of the file, alongside the rest of
   the pm- rules.
   ========================================================================== */

.pm-page {
  width: 100%;
  max-width: 1120px;
}

.pm-shell {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.pm-summary {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--gradient);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
}

.pm-summary-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pm-summary-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 22px 26px 0;
}

.pm-brand-chip {
  display: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pm-brand-chip.pm-brand-static { display: inline; }

.pm-page:has(input[name="paymentMethod"][value="fpx"]:checked) .pm-brand-fpx,
.pm-page:has(input[name="paymentMethod"][value="duitnow"]:checked) .pm-brand-duitnow,
.pm-page:has(input[name="paymentMethod"][value="ewallet"]:checked) .pm-brand-ewallet {
  display: inline;
}

.pm-summary-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 26px 22px;
}

.pm-summary-section-title {
  margin: 0 0 14px;
  color: rgba(27, 32, 37, 0.55);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pm-summary-body .pm-summary-section-title:not(:first-child) {
  margin-top: 4px;
}

.pm-summary-footer {
  flex: 0 0 auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 26px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
  cursor: default;
  /* Blocks the label from toggling .pm-summary-toggle-input outside the
     mobile breakpoint, where the collapse behavior is re-enabled below. */
  pointer-events: none;
}

.pm-summary-chevron {
  display: none;
}

.pm-summary-actions {
  display: none;
}

.pm-summary-footer::before {
  content: "pay";
  position: absolute;
  right: 8px;
  bottom: 0;
  z-index: -1;
  color: var(--cb-ink);
  opacity: 0.06;
  font-size: 94px;
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.8;
  pointer-events: none;
}

.pm-summary-eyebrow {
  margin: 0 0 8px;
  color: rgba(27, 32, 37, 0.68);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pm-summary-amount {
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pm-payer-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 26px;
}

.pm-payer-row .pm-field,
.field-grid > div:first-child .pm-payer-row .pm-field {
  display: block;
  margin: 0 0 6px;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-payer-row .pm-static-value {
  display: block;
  padding: 11px 12px;
  color: var(--graphite);
  background: rgba(179, 180, 189, 0.1);
  border: 1px solid rgba(44, 46, 58, 0.08);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-payer-row input.pm-payer-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--graphite);
  background: #f6f7fb;
  border: 1px solid rgba(44, 46, 58, 0.1);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.pm-payer-row input.pm-payer-input::placeholder {
  color: #9a9ba3;
  font-weight: 600;
}

.pm-payer-row input.pm-payer-input:focus {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.38);
  box-shadow: var(--shadow-focus);
}

.pm-totals {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px;
  background: rgba(255, 254, 250, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 18px 36px -26px rgba(5, 8, 34, 0.65);
}

.pm-totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.pm-totals-row .v {
  color: var(--graphite);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pm-totals-row.total {
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--graphite);
  font-size: 13px;
  font-weight: 900;
}

.pm-totals-row.total .v {
  color: var(--navy-mid);
  font-size: 17px;
  font-weight: 950;
}

.pm-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pm-summary-footer-mobile-only .pm-summary-eyebrow,
.pm-summary-footer-mobile-only .pm-summary-amount {
  display: none;
}

/* The right "secure rail" panel is mobile-only now (fixed bottom pay bar);
   its desktop content moved into the left gateway-sidebar. */
@media (min-width: 901px) {
  .pm-summary {
    display: none;
  }
}

.pm-right-toolbar {
  justify-content: flex-end;
  margin-bottom: 4px;
}

.pm-right .pm-stepper {
  justify-content: flex-start;
  max-width: none;
  margin: 0 0 20px;
  gap: 10px;
}

.pm-right .pm-stepper .sep {
  width: auto;
}

.pm-right h1 {
  margin-top: 4px;
}

.pm-card {
  padding: 24px 28px 28px;
  margin-bottom: 18px;
}

.pm-card h2 {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 900;
}

.pm-methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 26px;
}

.pm-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pm-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pm-method-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-method-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-method-name {
  min-width: 0;
  color: var(--graphite);
  font-size: 13.5px;
  font-weight: 800;
  overflow-wrap: break-word;
}

.pm-method-check {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pm-method:hover {
  border-color: rgba(99, 102, 241, 0.28);
  transform: translateY(-1px);
}

.pm-method:has(input:checked) {
  border-color: var(--blue);
  background: rgba(99, 102, 241, 0.04);
  box-shadow: 0 10px 22px -18px rgba(5, 10, 68, 0.5);
  transform: translateY(-1px);
}

.pm-method:has(input:checked) .pm-method-check {
  opacity: 1;
  transform: scale(1);
  background: var(--blue);
  border-color: var(--blue);
}

.pm-amount-block {
  margin-bottom: 24px;
}

.pm-amount-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid rgba(44, 46, 58, 0.1);
  border-radius: 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.pm-amount-field:focus-within {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: var(--shadow-focus);
}

.pm-amount-field.invalid {
  border-color: rgba(189, 53, 82, 0.5);
}

.pm-amount-field.invalid:focus-within {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(189, 53, 82, 0.12);
}

.pm-amount-prefix {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.pm-amount-field input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pm-amount-field input[type="text"]:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.pm-method-panel { display: none; }
.pm-card:has(input[name="paymentMethod"][value="fpx"]:checked) .pm-panel-fpx { display: block; }
.pm-card:has(input[name="paymentMethod"][value="duitnow"]:checked) .pm-panel-duitnow { display: block; }
.pm-card:has(input[name="paymentMethod"][value="ewallet"]:checked) .pm-panel-ewallet { display: block; }

.pm-bank-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 14px;
}

.pm-bank-panel-title h3 {
  margin: 0 0 4px;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 900;
}

.pm-bank-panel-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.pm-bank-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  max-width: 100%;
  height: 38px;
  padding: 0 12px;
  color: var(--text-faint);
  background: #fff;
  border: 1px solid rgba(44, 46, 58, 0.12);
  border-radius: 999px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.pm-bank-search:focus-within {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: var(--shadow-focus);
}

.pm-bank-search svg { flex-shrink: 0; }

.pm-bank-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--graphite);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12.5px;
  font-weight: 700;
}

.pm-bank-search input::placeholder {
  color: #9a9ba3;
  font-weight: 600;
}

.pm-bank-empty {
  grid-column: 1 / -1;
  margin: 6px 0;
  padding: 16px;
  color: var(--text-muted);
  background: rgba(179, 180, 189, 0.1);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

.pm-bank-grid,
.pm-wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pm-bank-grid {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 46, 58, 0.24) transparent;
}

.pm-bank-grid::-webkit-scrollbar {
  width: 6px;
}

.pm-bank-grid::-webkit-scrollbar-track {
  background: transparent;
}

.pm-bank-grid::-webkit-scrollbar-thumb {
  background: rgba(44, 46, 58, 0.22);
  border-radius: 999px;
}

.pm-bank-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(44, 46, 58, 0.36);
}

.pm-bank,
.pm-wallet {
  position: relative;
  min-width: 0;
  min-height: 60px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--graphite);
  background: #f6f7fb;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.pm-bank input,
.pm-wallet input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pm-bank:hover,
.pm-wallet:not(.pm-disabled):hover {
  background: #fff;
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.pm-bank:has(input:checked),
.pm-wallet:has(input:checked) {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.42);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 16px 32px -30px rgba(20, 22, 25, 0.7);
}

.pm-bank-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-bank-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pm-bank-check,
.pm-wallet-check {
  margin-left: auto;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  display: none;
  align-items: center;
  justify-content: center;
}

.pm-bank:has(input:checked) .pm-bank-check,
.pm-wallet:has(input:checked) .pm-wallet-check {
  display: flex;
}

.pm-wallet.pm-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pm-wallet-soon {
  position: absolute;
  top: 6px;
  right: 7px;
  padding: 2px 6px;
  color: var(--text-faint);
  background: #ebe8e2;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* "Coming soon" rail in the agent link-generator method picker - the radio
   is disabled (greyed via .pm-method:has(input:disabled)); this badge names
   why it can't be picked. */
.pm-method-soon {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  color: var(--text-faint);
  background: #ebe8e2;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pm-duitnow {
  --duitnow-pink: #e5155f;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
  background: linear-gradient(165deg, rgba(229, 21, 95, 0.07), rgba(229, 21, 95, 0.015) 60%);
  border: 1px solid rgba(229, 21, 95, 0.18);
  border-radius: 16px;
}

.pm-duitnow-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-duitnow-mark {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(229, 21, 95, 0.2);
  border-radius: 50%;
  box-shadow: 0 10px 22px -14px rgba(229, 21, 95, 0.5);
}

.pm-duitnow-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-duitnow-head h3 {
  font-size: 15px;
  color: var(--graphite);
}

.pm-duitnow-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.pm-duitnow-steps {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(229, 21, 95, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-duitnow-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.pm-step-num {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--duitnow-pink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-summary-trust {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 26px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pm-summary-trust-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.pm-summary-trust-title {
  margin-bottom: 3px;
  color: var(--cb-ink, #1b2025);
  font-size: 12px;
  font-weight: 850;
}

.pm-summary-trust p {
  margin: 0;
  color: rgba(27, 32, 37, 0.68);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.pm-secure-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pm-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.pm-secure-note-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.08);
  color: var(--blue);
}

.pm-secure-note-title {
  margin-bottom: 3px;
  color: var(--graphite);
  font-size: 12.5px;
  font-weight: 850;
}

.pm-secure-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.pm-secure-bar .submit-bar {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
  width: 100%;
}

.pm-secure-caption {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 650;
  text-align: center;
}

@media (max-width: 900px) {
  .pm-shell { grid-template-columns: 1fr; gap: 16px; }
  /* Docked to the viewport bottom instead of sitting in the grid flow — taken
     out of flow entirely, so .pm-right below reserves clearance for it via
     padding-bottom and its own submit-bar drops its sticky behavior. */
  .pm-summary {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    width: 100%;
    margin: 0;
    max-height: 72vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 40px -24px rgba(5, 8, 34, 0.6);
  }
  /* Details / Payment method / Confirm progress rail reads fine on desktop's
     wider header but just adds clutter above the h1 on a phone-width card. */
  .pm-stepper { display: none; }
  .pm-summary-top { padding: 18px 20px 0; }
  .pm-summary-body { padding: 14px 20px 18px; }
  .pm-summary-footer {
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .pm-summary-amount { font-size: 27px; }

  /* Flat mobile redesign: the boxed .glass card look (background, border,
     shadow, radius) reads fine on desktop's two-column layout but is just
     visual weight on a single-column phone screen — collapse each pm-card
     into a plain section separated by a hairline instead of a floating card. */
  .pm-right .pm-card {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 20px 2px 22px;
    border-bottom: 1px solid var(--line);
  }
  .pm-right .pm-card:first-child {
    padding-top: 4px;
  }
  .pm-right .pm-card:last-of-type {
    border-bottom: 0;
    padding-bottom: 4px;
  }

  /* Header: icons tuck into the corner, title takes center stage, helper
     copy drops out — this page is the landing step after login, so there's
     no meaningful "back" destination to add a back-nav for. */
  /* Full-bleed: breaks out of .page's 16px gutter so the navy bar runs edge
     to edge with no paper-colored margin peeking around it, same trick the
     checkout stepper uses elsewhere.
     Scoped away from .page-generate-link: this was written for a plain,
     short single-line header shared by pay-select.html and the old
     payment-select.html, and pinning it (position: sticky) to the viewport
     top made sense at that height. PaymentSelect.jsx's "Generate payment
     link" header is now a title plus a 5-step stepper - once the page
     scrolls even slightly, sticking that much taller block to the top
     painted it directly over .mobile-paybar above it instead of just
     scrolling normally underneath. */
  .page-checkout:not(.page-generate-link) .pm-page .pm-card-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 20px 20px 22px 16px;
    border-radius: 0;
    color: #fff;
    background: linear-gradient(160deg, #4338ca 0%, #6366f1 55%, #2e2a6b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 22px -18px rgba(5, 8, 34, 0.55);
  }
  /* pay-select.html (opened from a shared link) has no icon toolbar - only
     payment-select.html's own login/history/logout row needs the clearance,
     but that page no longer uses this sticky header (see above). */
  .page-checkout:not(.page-generate-link) .pm-page .pm-card-header:has(.pm-right-toolbar) {
    padding-top: 44px;
  }
  .page-checkout:not(.page-generate-link) .pm-page .pm-right-toolbar {
    position: absolute;
    top: 12px;
    right: 20px;
    margin-bottom: 0;
  }
  .page-checkout:not(.page-generate-link) .pm-page .pm-card-header .icon-btn {
    color: rgba(255, 255, 255, 0.75);
  }
  .page-checkout:not(.page-generate-link) .pm-page .pm-card-header .icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  .pm-page h1 {
    text-align: left;
    font-size: 19px;
    color: #fff;
  }
  .pm-page p.subtitle {
    display: none;
  }
  .pm-page .alert {
    text-align: left;
  }
  .pm-methods,
  .pm-bank-grid,
  .pm-wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pm-bank-panel-head { flex-direction: column; align-items: stretch; }
  .pm-bank-search { width: 100%; }

  /* Payer details gets its own card back — everything else on the page
     stays flat/sectioned, but this one benefits from a clear boundary since
     it's the first thing filled in. Higher specificity than the general
     `.pm-right .pm-card` flattening above (adds the `form` ancestor), so it
     wins without needing to touch that rule. */
  .pm-right form .pm-card:first-of-type {
    margin-top: 20px;
    padding: 24px 20px 18px;
    background: var(--card);
    border: 1px solid rgba(44, 46, 58, 0.07);
    border-bottom: 1px solid rgba(44, 46, 58, 0.07);
    border-radius: 16px;
    box-shadow: 0 4px 20px -12px rgba(20, 22, 25, 0.12);
  }
  .pm-right form .pm-card:first-of-type h2 {
    margin-bottom: 22px;
  }

  /* Minimalist redesign: no fill inside the card — just a hairline under
     each field that lights up blue on focus, like a plain underline form.
     Generous vertical rhythm between rows carries the grouping instead of
     a filled input box. */
  .pm-payer-list {
    gap: 18px;
  }
  /* Name/Phone sit in a two-column .field-grid on desktop that collapses to
     one column here — its own row-gap was still 0 (a leftover from the
     desktop layout, where only the column-gap between them mattered), so
     Name-to-Phone had no spacing while Phone-to-Email got the full gap from
     .pm-payer-list above. Match it so every row is spaced the same. */
  .pm-payer-list .field-grid {
    gap: 18px;
  }
  .pm-payer-row {
    padding: 0 0 10px;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    transition: border-color 0.15s ease;
  }
  .pm-payer-row:focus-within {
    border-color: var(--blue);
    box-shadow: none;
  }
  /* Email is the last direct row (Name/Phone are nested one level down in
     .field-grid) — no divider needed below it, and no extra padding either
     so the card's own 18px bottom padding is the only space under it. */
  .pm-payer-list > .pm-payer-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .pm-payer-row .pm-field {
    margin: 0 0 5px;
  }
  .pm-payer-row input.pm-payer-input {
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .pm-payer-row input.pm-payer-input:focus {
    background: none;
    box-shadow: none;
  }
  .pm-payer-row .pm-static-value {
    padding: 0;
    min-height: auto;
    background: none;
    border: 0;
  }

  /* Clears the fixed summary bar's collapsed height (now including the
     docked action buttons) so the page's own content never ends up hidden
     underneath it. */
  .pm-right {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
  }
  /* The form's own submit-bar is replaced on mobile by .pm-summary-actions,
     docked into the fixed amount-due card instead of the page flow. */
  .pm-page .submit-bar {
    display: none;
  }
  .pm-summary-actions {
    display: flex;
    gap: 10px;
    padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .pm-summary-actions button.primary,
  .pm-summary-actions button.secondary {
    flex: 1 1 0;
    min-width: 0;
    height: 50px;
    margin-top: 0;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  /* Primary flips to a light pill on the dark card — a blue button on a
     navy/blue gradient card would barely register as the CTA. */
  .pm-summary-actions button.primary {
    color: var(--navy);
    background: #fff;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.4);
  }
  .pm-summary-actions button.primary:hover {
    background: #f2f1ec;
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.45);
  }
  .pm-summary-actions button.secondary {
    color: #fff;
    background: none;
    border: 0;
  }
  .pm-summary-actions button.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .pm-summary-actions button.secondary:active,
  .pm-summary-actions button.primary:active {
    transform: translateY(1px);
  }

  /* Collapsed (default-unchecked toggle): summary reads as just an amount-due
     bar. Checking the toggle (tap/keyboard) reveals the currency/fee/total
     breakdown above it. */
  .pm-summary-chevron {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }
  .pm-summary:has(.pm-summary-toggle-input:checked) .pm-summary-chevron {
    margin-top: -2px;
    transform: rotate(225deg);
  }
  .pm-summary:not(:has(.pm-summary-toggle-input:checked)) .pm-summary-top,
  .pm-summary:not(:has(.pm-summary-toggle-input:checked)) .pm-summary-body {
    display: none;
  }
  .pm-summary:not(:has(.pm-summary-toggle-input:checked)) .pm-summary-footer {
    border-top: 0;
  }
  .pm-summary-trust {
    display: none;
  }
  /* Buttons already surface via .pm-summary-actions on mobile — avoid
     showing the secure note with no CTA underneath it. */
  .pm-page .pm-secure-bar {
    display: none;
  }
}

@media (max-width: 520px) {
  .pm-shell { gap: 12px; }
  .pm-summary { border-radius: 16px 16px 0 0; }
  .pm-summary-top { padding: 16px 18px 0; }
  .pm-brand-chip { font-size: 9px; }
  .pm-summary-body { padding: 12px 18px 16px; }
  .pm-summary-section-title { font-size: 9px; margin-bottom: 10px; }
  .pm-totals { padding: 12px 14px; gap: 0; border-radius: 10px; }
  .pm-totals-row { padding: 6px 0; font-size: 11px; }
  .pm-totals-row:not(.total) {
    border-bottom: 1px dashed rgba(44, 46, 58, 0.16);
  }
  .pm-totals-row.total { margin-top: 2px; font-size: 12px; }
  .pm-totals-row.total .v { font-size: 15px; color: var(--blue); }
  .pm-summary-footer { padding: 16px 18px 20px; }
  .pm-summary-footer::before { font-size: 68px; right: 4px; }
  .pm-summary-eyebrow { font-size: 9px; }
  .pm-summary-amount { font-size: 27px; }

  .pm-right .pm-card { padding: 18px 2px 20px; }
  .pm-right .pm-card:first-child { padding-top: 12px; padding-bottom: 12px; }
  .pm-card h2 { font-size: 14px; margin-bottom: 16px; }

  .pm-payer-list { margin: 14px 0 20px; }
  .pm-payer-row .pm-field { font-size: 9px; }
  /* Text below 16px triggers iOS Safari's input-focus zoom, same fix already
     applied to the auth/checkout inputs — the row-card's own height/padding
     (set at the 900px breakpoint above) stays untouched here. */
  .pm-payer-row input.pm-payer-input {
    font-size: 14px;
  }
  .pm-payer-row .pm-static-value {
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .pm-methods { grid-template-columns: 1fr; gap: 10px; margin: 18px 0 20px; }
  .pm-methods-logo-only { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-upload-row { grid-template-columns: 1fr; }
  .pm-method {
    min-height: 62px;
    padding: 12px 16px;
    border-color: transparent;
    border-radius: 14px;
    box-shadow: 0 2px 10px -4px rgba(20, 22, 25, 0.12);
  }
  .pm-method:has(input:checked) {
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow: 0 4px 16px -6px rgba(99, 102, 241, 0.22);
  }
  .pm-method-name { font-size: 12px; }
  /* Persistent radio ring instead of desktop's hover-revealed checkmark
     badge — reads clearer as a selection control on a touch row. */
  .pm-method-check {
    position: static;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line-strong);
    background: #fff;
    opacity: 1;
    transform: none;
  }
  .pm-method-check svg { display: none; }
  .pm-method-check::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .pm-method:has(input:checked) .pm-method-check {
    background: #fff;
    border-color: var(--blue);
  }
  .pm-method:has(input:checked) .pm-method-check::after {
    opacity: 1;
    transform: scale(1);
  }

  .pm-amount-block { margin-bottom: 20px; }
  .pm-amount-field { height: 48px; padding: 0 14px; border-radius: 10px; }
  .pm-amount-field input[type="text"] { font-size: 18px; }
  .pm-amount-prefix { font-size: 13px; }

  .pm-bank-grid,
  .pm-wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm-bank-grid { max-height: 240px; }
  .pm-bank,
  .pm-wallet { min-height: 54px; padding: 8px 10px; font-size: 11.5px; }
  .pm-bank-logo { width: 28px; height: 28px; padding: 4px; }
  .pm-wallet-soon { font-size: 7px; padding: 2px 4px; }

  .pm-duitnow { padding: 18px 16px; gap: 14px; border-radius: 12px; }
  .pm-duitnow-head { gap: 12px; }
  .pm-duitnow-mark { width: 44px; height: 44px; }
  .pm-duitnow-head h3 { font-size: 14px; }
  .pm-duitnow-head p { font-size: 12px; }
  .pm-duitnow-steps { gap: 8px; padding-top: 14px; }
  .pm-duitnow-steps li { font-size: 12px; }
}

/* ---- Pay-for-me requests page: header + segmented tab bar, modeled on a
   reference app shell (solid color block, no gradient/pattern fill, pill
   tab row, card list with a status chip + chevron footer). The header uses
   the same deep-navy gradient as .pm-summary (the payment page's summary
   panel) instead of the flat brand blue, so this page reads as the same
   "summary card" family rather than a one-off color. ---- */
.pfm-page {
  width: min(100%, 480px);
  margin: 0 auto;
  padding-bottom: 28px;
}

/* Header + status tabs stick together as one unit while the card list
   scrolls beneath them — background matches the page so cards scrolling up
   don't show through the gap the tabs' negative margin leaves around their
   rounded corners. */
.pfm-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--background);
}

.pfm-header {
  padding: 18px 20px 28px;
  color: #fff;
  background: var(--gradient);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -28px rgba(18, 21, 60, 0.65);
}

.pfm-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pfm-back {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 19px;
  font-weight: 850;
  line-height: 1;
}

.pfm-header h1 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.pfm-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
}

.pfm-search svg {
  flex: 0 0 auto;
  color: rgba(27, 32, 37, 0.6);
}

.pfm-search input {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cb-ink, var(--graphite));
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12px;
  font-weight: 650;
}

.pfm-search input::placeholder {
  color: rgba(27, 32, 37, 0.5);
}

.pfm-tabs {
  display: flex;
  gap: 2px;
  margin: -18px 16px 18px;
  padding: 4px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 32px -22px rgba(20, 22, 25, 0.45);
  position: relative;
  z-index: 2;
}

.pfm-tabs button {
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 8px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.pfm-tabs button:hover {
  color: var(--graphite);
}

.pfm-tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 10px 18px -12px rgba(18, 21, 60, 0.65);
}

/* Secondary filter row (payment history only — pay-for-me has no method
   concept). Deliberately smaller/quieter than .pfm-tabs so status stays the
   visually dominant filter and method reads as a subordinate refinement:
   muted/secondary outline instead of the full navy gradient on selection. */
.pfm-method-filter {
  display: flex;
  gap: 6px;
  margin: 0 16px 18px;
  padding-bottom: 2px;
  overflow-x: auto;
}

.pfm-method-filter button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 12px;
  color: var(--secondary);
  background: var(--card);
  border: 1px solid var(--muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pfm-method-filter button:hover {
  border-color: var(--secondary);
}

.pfm-method-filter button[aria-selected="true"] {
  color: #fff;
  background: var(--secondary);
  border-color: var(--secondary);
}

.pfm-list {
  display: grid;
  gap: 12px;
  margin: 0 16px;
}

.pfm-card {
  display: block;
  padding: 16px;
  color: inherit;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 34px -28px rgba(20, 22, 25, 0.4);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.pfm-card:hover,
.pfm-card:focus-visible {
  box-shadow: 0 18px 38px -26px rgba(18, 21, 60, 0.45);
  transform: translateY(-1px);
  outline: none;
}

.pfm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pfm-card-top h2 {
  min-width: 0;
  color: var(--graphite);
  font-size: 15.5px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfm-card-amount {
  flex: 0 0 auto;
  color: var(--navy-mid);
  font-size: 15.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pfm-card-name {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfm-card-date {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 700;
}

/* Condensed stand-in for the old .payment-history-card's separate
   method/order-id/transaction-id chip row — one muted inline line instead
   of a boxed multi-chip layout, to match .pfm-card's compact shape. */
.pfm-card-meta {
  margin: 6px 0 0;
  color: var(--secondary);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfm-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pfm-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
}

/* Desktop-only full-detail table — replaces the card grid at 901px+ so the
   payer/reference/method/created fields that only the detail page shows on
   mobile are visible inline, without a click-through. Hidden by default;
   switched on inside the @media (min-width: 901px) block below. */
.pfm-table {
  display: none;
  margin: 0 16px;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 34px -28px rgba(20, 22, 25, 0.4);
}

.pfm-table-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(90px, 0.6fr) minmax(110px, 0.7fr) minmax(100px, 0.6fr);
  gap: 14px;
  align-items: center;
  min-height: 62px;
  padding: 0 20px;
  border-top: 1px solid var(--line);
}

.pfm-table-row:first-child {
  border-top: 0;
}

.pfm-table-head {
  min-height: 40px;
  color: var(--text-faint);
  border-top: 0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pfm-cell-payer,
.pfm-cell-reference {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.pfm-cell-payer strong,
.pfm-cell-reference strong {
  min-width: 0;
  overflow: hidden;
  color: var(--graphite);
  font-size: 13.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfm-cell-payer small,
.pfm-cell-reference small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfm-table-amount {
  justify-self: end;
  color: var(--navy-mid);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  /* Full-bleed on mobile: the header/tabs run edge-to-edge against the
     viewport instead of floating inset inside .page's default padding. */
  .page-requests-flush {
    padding: 0;
  }
  .pfm-page {
    width: 100%;
    padding: 0 0 24px;
  }
  .pfm-header {
    border: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .pfm-header h1 {
    font-size: 21px;
  }
}

/* ---- Desktop layout for payment history / pay-for-me requests (list +
   detail). Everything below only activates at 901px+, so the phone-shell
   layout above (including the 520px full-bleed block) is untouched — this
   is purely a wider "dashboard" presentation layered on top of it. ---- */
@media (min-width: 901px) {
  .pfm-page {
    width: min(100%, 1240px);
  }

  .pfm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 30px;
  }

  .pfm-header-top {
    margin-bottom: 0;
  }

  .pfm-header h1 {
    font-size: 22px;
  }

  .pfm-search {
    width: 320px;
    flex: 0 0 auto;
  }

  .pfm-tabs {
    display: inline-flex;
    width: auto;
    margin: -20px 30px 20px;
    box-shadow: 0 16px 32px -22px rgba(20, 22, 25, 0.35);
  }

  .pfm-tabs button {
    flex: 0 0 auto;
    padding: 0 22px;
  }

  .pfm-method-filter {
    margin: -6px 30px 22px;
  }

  /* The card grid is the mobile/tablet presentation and links through to the
     detail page; desktop shows every field inline via .pfm-table instead, so
     the cards are hidden here rather than reflowed into columns. */
  .pfm-list {
    display: none;
  }

  .pfm-table {
    display: block;
    margin: 0 30px;
  }
}

/* ---- Desktop layout for payment/request detail pages: the phone-width
   stacked hero + panels becomes a two-column dashboard, hero pinned on the
   left and details stacked on the right. Only active at 901px+. ---- */
@media (min-width: 901px) {
  .page-detail {
    padding: 40px 24px 56px;
  }

  .request-detail-shell {
    width: min(100%, 1120px);
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
  }

  .request-detail-shell > .back-nav {
    position: static;
    grid-column: 1 / -1;
    margin-bottom: 4px;
    backdrop-filter: none;
    color: var(--graphite);
    background: var(--card);
    border-color: rgba(44, 46, 58, 0.08);
  }

  .request-detail-hero {
    grid-column: 1;
    grid-row: 2 / span 4;
    align-self: start;
    position: sticky;
    top: 24px;
    border-radius: 24px;
  }

  .detail-panel {
    grid-column: 2;
    margin-top: 0;
  }

  .request-detail-hero + .detail-panel {
    margin-top: 0;
  }
}

/* ---- Cryptobank redesign layer ------------------------------------------------
   A contained visual pass over the existing React/Spring classes. It keeps the
   payment behavior untouched while giving desktop a command-center layout and
   mobile a separate, docked checkout experience. */
:root {
  --cb-void: #f6f7fb;
  --cb-panel: #e6eaf3;
  --cb-panel-2: #e6eaf3;
  --cb-ink: #1b2025;
  --cb-cream: #f6f7fb;
  --cb-cream-2: #e6eaf3;
  --cb-line: rgba(226, 230, 241, 0.14);
  --cb-line-dark: rgba(27, 32, 37, 0.12);
  --cb-cyan: #7c6ff5;
  --cb-jade: #a78bfa;
  --cb-amber: #6366f1;
  --cb-rose: #ec5f7a;
  --cb-muted: #8f9da5;
  --cb-soft: #dde3ee;
  --cb-shadow: 0 30px 90px -46px rgba(0, 0, 0, 0.82);
  --cb-shadow-soft: 0 24px 70px -50px rgba(9, 12, 16, 0.58);

  --ink: var(--cb-ink);
  --graphite: var(--cb-ink);
  --navy: #4338ca;
  --blue: var(--cb-cyan);
  --background: #e6eaf3;
  --card: var(--cb-cream);
  --field: #e6eaf3;
  --field-strong: #dde3ee;
  --line: var(--cb-line-dark);
  --line-strong: rgba(27, 32, 37, 0.22);
  --text: var(--cb-ink);
  --text-muted: #687179;
  --text-faint: #919995;
  --gradient: linear-gradient(142deg, #f6f7fb 0%, #eef1f7 48%, #dde3ee 100%);
  --success: #168463;
  --success-bg: rgba(21, 132, 99, 0.14);
  --success-border: rgba(21, 132, 99, 0.32);
  --warning: #9d6812;
  --danger: #ba3656;
  --danger-bg: rgba(236, 95, 122, 0.12);
  --danger-border: rgba(236, 95, 122, 0.3);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shadow-card: var(--cb-shadow-soft);
  --shadow-focus: 0 0 0 4px rgba(124, 111, 245, 0.18);
}

html {
  background: #f3f1fb;
}

body {
  font-family: "Inter", "Aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.06) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.06) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(135deg, rgba(124, 111, 245, 0.16) 0%, rgba(99, 102, 241, 0.1) 55%, rgba(139, 92, 246, 0.16) 100%),
    #f3f1fb;
}

body::selection {
  color: var(--cb-void);
  background: var(--cb-cyan);
}

h1,
h2,
h3,
.pm-summary-amount,
.ticket-amount,
.request-amount,
.pfm-card-amount {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hint,
.k,
dt,
label,
.section-title,
.compact-title,
.pm-field,
.pm-summary-section-title,
.ticket-label,
.pm-summary-eyebrow,
.status-pill,
.stepper .step,
.pfm-card-meta {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
  min-height: 100vh;
  padding: 42px 22px;
}

.glass,
.pm-card,
.form-card,
.result-card,
.detail-panel,
.pfm-card,
.modal-card {
  background: rgba(246, 247, 251, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-soft);
  backdrop-filter: blur(16px);
}

button.primary,
button.auth-m-btn,
.whatsapp-btn,
.copy-share-full {
  min-height: 48px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
  border: 0;
  border-radius: 6px;
  box-shadow: 0 18px 34px -22px rgba(124, 111, 245, 0.75);
  font-weight: 900;
  letter-spacing: 0;
}

button.primary:hover,
button.auth-m-btn:hover,
.whatsapp-btn:hover,
.copy-share-full:hover {
  background: linear-gradient(135deg, #8f83ee, #8f83ee);
  box-shadow: 0 22px 38px -22px rgba(124, 111, 245, 0.86);
}

button.secondary,
.google-btn,
.button-secondary-small,
.muted-link {
  border-radius: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
  background: #e6eaf3;
  border: 1px solid rgba(46, 42, 107, 0.32);
  border-radius: 6px;
  color: var(--cb-ink);
}

input:focus {
  background: #eef1f7;
  border-color: rgba(124, 111, 245, 0.72);
}

.alert {
  border-radius: 7px;
}

.status-pill {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-pill.paid,
.status-icon.paid {
  color: #0c4f3b;
  background: rgba(21, 132, 99, 0.2);
  border-color: rgba(21, 132, 99, 0.42);
}

.status-pill.unpaid,
.status-icon.unpaid {
  color: #7b530d;
  background: rgba(246, 191, 79, 0.2);
  border-color: rgba(246, 191, 79, 0.42);
}

.status-pill.failed,
.status-icon.failed {
  color: #8d1732;
  background: rgba(236, 95, 122, 0.16);
  border-color: rgba(236, 95, 122, 0.35);
}

.auth-m-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(360px, 520px);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 26px 34px;
  padding: 46px;
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.12) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(135deg, #2e2a6b, #4338ca 48%, #1e1b4b);
}

.auth-m-head {
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  min-height: 620px;
  padding: 34px;
  border: 1px solid rgba(124, 111, 245, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(160deg, rgba(124, 111, 245, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.035);
  box-shadow: var(--cb-shadow);
}

.auth-m-head::before {
  content: "PAYESO";
  color: var(--cb-soft);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.auth-m-head::after {
  content: none;
  display: none;
  max-width: 9ch;
  color: var(--cb-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 700;
  line-height: 0.88;
}

.auth-m-dove {
  width: 76px;
  height: 76px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(124, 111, 245, 0.36);
  border-radius: 8px;
  background: rgba(124, 111, 245, 0.1);
  box-shadow: inset 0 0 30px rgba(124, 111, 245, 0.14);
}

.auth-m-card {
  width: 100%;
  padding: 40px;
  background: var(--cb-cream);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--cb-shadow);
}

.auth-m-card h1 {
  font-size: 36px;
  letter-spacing: 0;
}

.auth-m-card p.auth-m-subtitle {
  color: #667078;
}

.auth-m-card label {
  color: #566069;
}

.auth-m-foot {
  grid-column: 2;
}

.auth-m-foot .muted-link {
  color: rgba(255, 255, 255, 0.72);
}

.auth-m-foot .accent {
  color: var(--cb-cyan);
}

.pm-page {
  width: min(100%, 1220px);
}

.pm-shell {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.pm-summary {
  position: sticky;
  top: 34px;
  min-height: 650px;
  overflow: hidden;
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.14) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.1) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(150deg, #f6f7fb 0%, #eef1f7 58%, #dde3ee 100%);
  border: 1px solid rgba(124, 111, 245, 0.22);
  border-radius: 8px;
  box-shadow: var(--cb-shadow);
}

.pm-summary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(var(--cb-cyan), var(--cb-jade), var(--cb-amber));
  box-shadow: 0 0 26px rgba(124, 111, 245, 0.8);
}

.pm-summary::after {
  content: "PAYESO";
  position: absolute;
  right: -28px;
  bottom: 112px;
  color: rgba(255, 255, 255, 0.08);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-90deg);
  transform-origin: center;
}

.pm-summary-top,
.pm-summary-body,
.pm-summary-footer,
.pm-summary-actions,
.pm-summary-trust {
  position: relative;
  z-index: 1;
}

.pm-brand-chip {
  color: #ffffff;
  background: var(--cb-cyan);
  border: 0;
}

.pm-totals {
  color: var(--cb-soft);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pm-totals-row {
  color: rgba(27, 32, 37, 0.72);
}

.pm-totals-row .v,
.pm-totals-row.total .v {
  color: var(--cb-ink);
}

.pm-summary-footer {
  color: var(--cb-ink);
  border-top-color: rgba(27, 32, 37, 0.12);
}

.pm-summary-amount {
  color: var(--cb-ink);
}

.pm-summary-trust {
  color: rgba(27, 32, 37, 0.72);
}

.pm-summary-trust-icon {
  color: var(--cb-cyan);
  background: rgba(124, 111, 245, 0.1);
  border-color: rgba(124, 111, 245, 0.24);
}

.pm-right {
  display: grid;
  gap: 16px;
}

.pm-right form {
  display: grid;
  gap: 16px;
}

.pm-card-header {
  position: relative;
  padding: 28px;
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(140deg, var(--cb-void), #eef1f7 62%, #dde3ee);
  border-color: rgba(124, 111, 245, 0.16);
}

.pm-card-header h1,
.pm-card-header p.subtitle {
  color: var(--cb-ink);
}

.pm-card-header p.subtitle {
  color: rgba(27, 32, 37, 0.68);
}

.pm-card {
  padding: 26px;
}

.pm-card h2 {
  color: var(--cb-ink);
  font-size: 18px;
}

.pm-stepper .step {
  color: rgba(27, 32, 37, 0.54);
}

.pm-stepper .step.active,
.stepper .step.active {
  color: var(--cb-cyan);
}

.stepper .step::before {
  color: var(--cb-cyan);
  background: rgba(124, 111, 245, 0.08);
  border-color: rgba(124, 111, 245, 0.36);
}

.stepper .step.active::before {
  color: #ffffff;
  background: var(--cb-cyan);
  border-color: var(--cb-cyan);
}

.pm-stepper .step.ready,
.stepper .step.ready {
  color: #dbe2fa;
  text-shadow: 0 0 14px rgba(124, 111, 245, 0.42);
}

.stepper .step.ready::before {
  color: #ffffff;
  background: linear-gradient(135deg, #7c6ff5, #7c6ff5);
  border-color: #7c6ff5;
  box-shadow: 0 0 0 4px rgba(124, 111, 245, 0.12), 0 0 18px rgba(124, 111, 245, 0.45);
}

.pm-payer-row,
.pm-amount-field,
.pm-bank-search,
.pm-method,
.pm-bank,
.pm-wallet,
.pm-duitnow {
  background: #e6eaf3;
  border: 1px solid rgba(46, 42, 107, 0.32);
  border-radius: 7px;
}

.pm-payer-row:focus-within,
.pm-amount-field:focus-within,
.pm-bank-search:focus-within {
  border-color: rgba(124, 111, 245, 0.7);
  box-shadow: var(--shadow-focus);
}

.pm-payer-row:focus-within {
  z-index: 60;
}

.pm-method {
  min-height: 76px;
}

.pm-method:hover,
.pm-bank:hover,
.pm-wallet:not(.pm-disabled):hover {
  border-color: rgba(124, 111, 245, 0.42);
  box-shadow: 0 16px 28px -24px rgba(9, 12, 16, 0.55);
}

.pm-method:has(input:checked),
.pm-bank:has(input:checked),
.pm-wallet:has(input:checked) {
  background: #f6f7fb;
  border-color: rgba(124, 111, 245, 0.72);
  box-shadow: inset 0 0 0 1px rgba(124, 111, 245, 0.22), 0 18px 35px -28px rgba(124, 111, 245, 0.9);
}

.pm-method-check,
.pm-bank-check,
.pm-wallet-check {
  background: var(--cb-cyan);
}

.pm-secure-bar {
  padding: 12px;
  background: rgba(16, 22, 27, 0.95);
  border: 1px solid rgba(124, 111, 245, 0.18);
  border-radius: 8px;
}

/* Fills the same .pm-secure-bar box the "Generate payment link" button sits
   in (see the conditional render in PaymentSelect.jsx) — the two are never
   shown at once, so there's only ever one box here, not two stacked cards. */
.pm-link-result {
  width: 100%;
}

.pm-link-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pm-link-result-title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.pm-link-result-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-link-result-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pm-link-result-row button.primary {
  flex: 0 0 auto;
  width: 58px;
  min-height: 34px;
  margin-top: 0;
  padding: 0 10px;
  font-size: 11.5px;
}

.pm-link-result .whatsapp-btn {
  min-height: 40px;
  margin-top: 4px;
  border-radius: 7px;
}

.neon-link-action {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 0 14px;
  color: #7c6ff5;
  background:
    linear-gradient(135deg, rgba(124, 111, 245, 0.14), rgba(124, 111, 245, 0.08));
  border: 1px solid rgba(124, 111, 245, 0.5);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(124, 111, 245, 0.1),
    0 0 18px rgba(124, 111, 245, 0.12);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.neon-link-action:hover,
.neon-link-action:focus-visible {
  transform: none;
  color: #7c6ff5;
  background:
    linear-gradient(135deg, rgba(124, 111, 245, 0.14), rgba(124, 111, 245, 0.08));
  border-color: rgba(124, 111, 245, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(124, 111, 245, 0.1),
    0 0 18px rgba(124, 111, 245, 0.12);
  outline: none;
}

.pm-link-result .whatsapp-btn:hover,
.pm-link-result .whatsapp-btn:focus-visible {
  transform: none;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
  box-shadow: 0 18px 34px -22px rgba(124, 111, 245, 0.75);
  outline: none;
}

.neon-link-action:active {
  transform: translateY(0);
}

.pm-link-result-note {
  margin: 7px 0 0;
  color: rgba(27, 32, 37, 0.68);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.pm-link-result-note span {
  display: block;
  margin: 0;
}

.pm-link-result-note span + span {
  margin-top: 3px;
}

.pm-secure-note,
.pm-secure-caption {
  color: rgba(27, 32, 37, 0.7);
}

.pm-secure-note-title {
  color: var(--cb-ink);
}

.pm-secure-note-icon {
  color: var(--cb-cyan);
  background: rgba(124, 111, 245, 0.11);
  border-color: rgba(124, 111, 245, 0.24);
}

.icon-btn,
.pfm-back,
.back-nav {
  border-radius: 6px;
}

.icon-btn {
  color: rgba(27, 32, 37, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.icon-btn:hover {
  color: var(--cb-cyan);
  background: rgba(124, 111, 245, 0.12);
}

.checkout-shell {
  grid-template-columns: 350px minmax(0, 680px);
  gap: 22px;
  align-items: start;
}

.ticket-card {
  width: 350px;
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.12) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(150deg, #f6f7fb, #eef1f7 60%, #dde3ee);
  border-color: rgba(124, 111, 245, 0.2);
  box-shadow: var(--cb-shadow);
}

.ticket-card::before,
.ticket-card::after {
  display: none;
}

.ticket-head::after {
  color: var(--cb-cyan);
}

.ticket-brand,
.ticket-label,
.ticket-line .k {
  color: rgba(27, 32, 37, 0.6);
}

.ticket-amount,
.ticket-line .v {
  color: var(--cb-ink);
}

.checkout-frame-card {
  padding: 28px;
}

.secure-frame-shell {
  border-color: rgba(124, 111, 245, 0.18);
  box-shadow: 0 22px 44px -34px rgba(9, 12, 16, 0.75);
}

.secure-frame-bar {
  color: var(--cb-cyan);
  background: #e6eaf3;
  border-bottom-color: rgba(124, 111, 245, 0.16);
}

.pfm-page {
  width: min(100%, 1240px);
}

.pfm-sticky {
  background: transparent;
}

.pfm-header {
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.13) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(142deg, #f6f7fb, #eef1f7 58%, #dde3ee);
  border-color: rgba(124, 111, 245, 0.18);
  border-radius: 8px;
}

.pfm-header h1 {
  color: var(--cb-ink);
}

.pfm-back {
  color: #ffffff;
  background: var(--cb-cyan);
}

.pfm-search {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(124, 111, 245, 0.18);
}

.pfm-tabs {
  background: rgba(246, 247, 251, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.pfm-tabs button[aria-selected="true"] {
  color: #ffffff;
  background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
}

.pfm-method-filter button[aria-selected="true"] {
  color: #ffffff;
  background: var(--cb-cyan);
  border-color: var(--cb-cyan);
}

.pfm-card {
  min-height: 174px;
  border: 1px solid rgba(27, 32, 37, 0.08);
}

.pfm-card:hover,
.pfm-card:focus-visible {
  border-color: rgba(124, 111, 245, 0.45);
  box-shadow: 0 22px 42px -34px rgba(124, 111, 245, 0.82), var(--cb-shadow-soft);
}

.pfm-card-amount {
  color: #1439a8;
}

.request-detail-shell {
  gap: 18px;
}

.request-detail-hero {
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.12) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(150deg, #f6f7fb, #eef1f7 60%, #dde3ee);
  border: 1px solid rgba(124, 111, 245, 0.18);
  border-radius: 8px;
  box-shadow: var(--cb-shadow);
}

.request-detail-hero h1,
.request-amount {
  color: var(--cb-ink);
}

.request-detail-hero .eyebrow,
.request-recipient {
  color: rgba(27, 32, 37, 0.66);
}

.detail-panel {
  border-color: rgba(27, 32, 37, 0.08);
}

.detail-stack > div,
.detail-row {
  border-color: rgba(27, 32, 37, 0.1);
}

.id-copy,
.whatsapp-mini {
  color: #ffffff;
  background: var(--cb-cyan);
}

.share-link-box {
  background: #e6eaf3;
  border-color: rgba(27, 32, 37, 0.1);
}

.result-card {
  width: min(100%, 480px);
  padding: 38px;
}

.status-icon {
  border: 1px solid currentColor;
  border-radius: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .status-icon.unpaid {
    animation: status-icon-pulse 1.8s ease-in-out infinite;
  }
}

@keyframes status-icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Receipt detail list: no boxed panel — it sits flush in the result card,
   opened by a hairline top divider, with each row separated by its own
   divider instead of a flex gap. */
.detail-list {
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(27, 32, 37, 0.09);
  border-radius: 0;
  background: transparent;
  gap: 0;
}

.detail-list .detail-row {
  padding: 11px 0;
}

.detail-list .detail-row + .detail-row {
  border-top: 1px solid rgba(27, 32, 37, 0.08);
}

.modal-overlay {
  background: rgba(9, 12, 16, 0.72);
  backdrop-filter: blur(12px);
}

.modal-card {
  border-color: rgba(124, 111, 245, 0.22);
}

@media (max-width: 900px) {
  body {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
      linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 34px 34px,
      var(--navy-deep);
  }

  .page {
    align-items: flex-start;
    padding: 16px;
  }

  .auth-m-page {
    display: block;
    padding: 0;
    background:
      linear-gradient(90deg, rgba(124, 111, 245, 0.12) 1px, transparent 1px) 0 0 / 36px 36px,
      linear-gradient(0deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 36px 36px,
      linear-gradient(180deg, #f6f7fb 0 32%, #eef1f7 32% 100%);
  }

  .auth-m-head {
    min-height: 214px;
    padding: 24px 20px 72px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-m-head::after {
    content: none;
    font-size: 44px;
  }

  .auth-m-dove {
    width: 62px;
    height: 62px;
  }

  .auth-m-card {
    width: auto;
    margin: -54px 16px 0;
    padding: 30px 20px 26px;
    border-radius: 8px;
  }

  .auth-m-card h1 {
    font-size: 29px;
  }

  .auth-m-foot {
    padding: 18px 16px 30px;
  }

  .auth-m-foot .muted-link {
    color: #556068;
  }

  .pm-page {
    width: 100%;
  }

  .pm-shell {
    display: block;
  }

  .pm-summary {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 80;
    min-height: 0;
    border-width: 1px 0 0;
    border-radius: 8px 8px 0 0;
  }

  .pm-summary::before {
    inset: 0 0 auto;
    width: auto;
    height: 4px;
  }

  .pm-summary::after,
  .pm-summary-trust {
    display: none;
  }

  .pm-summary-footer {
    padding: 16px 18px 14px;
  }

  .pm-summary-amount {
    font-size: 27px;
  }

  .pm-summary-actions {
    display: flex;
    gap: 10px;
    padding: 0 18px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .pm-summary-actions button.primary,
  .pm-summary-actions button.secondary {
    height: 48px;
    margin: 0;
    border-radius: 6px;
  }

  .pm-summary-actions button.secondary {
    color: var(--cb-ink);
    background: rgba(255, 255, 255, 0.08);
  }

  .pm-right {
    padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px));
  }

  /* Scoped away from .page-generate-link - see the matching comment on the
     .pm-page .pm-card-header rule above (~line 4098) for why: this is a
     second, near-duplicate declaration of the same legacy sticky/full-bleed
     header treatment, and left unscoped it would still pin PaymentSelect.jsx's
     much-taller "Generate payment link" header (title + 5-step stepper) to
     the viewport top on scroll, painting it over .mobile-paybar above it. */
  .page-checkout:not(.page-generate-link) .pm-page .pm-card-header {
    position: sticky;
    top: 0;
    width: 100vw;
    margin: -16px calc(50% - 50vw) 0;
    padding: 42px 18px 22px;
    border-width: 0 0 1px;
    border-radius: 0 0 8px 8px;
  }

  .page-checkout:not(.page-generate-link) .pm-page .pm-card-header:has(.pm-right-toolbar) {
    padding-top: 46px;
  }

  .pm-page h1 {
    font-size: 22px;
    text-align: left;
  }

  .pm-card,
  .pm-right .pm-card {
    padding: 20px;
    background: rgba(246, 247, 251, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 8px;
    box-shadow: 0 16px 40px -34px rgba(9, 12, 16, 0.48);
  }

  .pm-right form .pm-card:first-of-type {
    border-radius: 8px;
  }

  .pm-methods {
    grid-template-columns: 1fr;
  }

  .pm-bank-grid,
  .pm-wallet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-secure-bar,
  .pm-page .pm-secure-bar {
    display: none;
  }

  .pm-link-result-row {
    flex-direction: column;
  }

  .pm-link-result-row button.primary {
    width: 100%;
  }

  .checkout-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .checkout-shell,
  .ticket-card {
    width: 100%;
  }

  .ticket-card {
    min-height: auto;
    margin: 0;
  }

  .checkout-frame-card {
    padding: 20px;
  }

  .secure-frame {
    min-height: 540px;
  }

  .page-requests-flush {
    padding: 0;
  }

  .pfm-header {
    border-radius: 0 0 8px 8px;
    border-width: 0 0 1px;
  }

  .pfm-tabs {
    margin: -18px 14px 14px;
  }

  .pfm-list {
    margin: 0 14px 18px;
  }

  .pfm-card {
    min-height: 0;
  }

  .request-detail-shell {
    width: 100%;
    display: block;
  }

  .request-detail-hero,
  .detail-panel {
    margin-top: 14px;
    border-radius: 8px;
  }

  .result-card {
    padding: 30px 20px;
  }
}

@media (max-width: 520px) {
  .page {
    padding: 14px;
  }

  .auth-m-card input[type="text"],
  .auth-m-card input[type="email"],
  .auth-m-card input[type="password"],
  .auth-m-card input[type="tel"],
  .pm-payer-row input.pm-payer-input,
  .pm-bank-search input {
    font-size: 16px;
  }

  .pm-method {
    min-height: 66px;
  }

  .pm-bank,
  .pm-wallet {
    min-height: 58px;
  }

  .pm-summary-body {
    padding: 12px 18px 14px;
  }

  .pm-totals-row.total .v {
    color: var(--cb-ink);
  }

  .pfm-header {
    padding: 20px 16px 30px;
  }

  .pfm-search {
    width: 100%;
  }
}

/* ---- Checkout structural app shell ---------------------- */
.page-checkout {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 38px 38px,
    radial-gradient(900px 520px at 72% 4%, rgba(124, 111, 245, 0.28), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 52%, var(--navy-deep) 100%);
  overflow-x: hidden;
}

/* Generate-link page keeps the light operator theme instead of the dark
   navy checkout shell above — the purple identity moves onto the header
   bar itself (see .page-generate-link .pm-card-header below). */
.page-checkout.page-generate-link {
  background: var(--cb-cream, #f6f7fb);
}

/* Cards on this page sat on a cream/beige tint that read as a mismatched
   swatch against the navy page background above — retint them toward a
   cool blue-white so the whole shell reads as one palette. */
.page-checkout .pm-card-header {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(140deg, #eef1fb 0%, #dde4f7 55%, #cdd8f4 100%);
  border-color: rgba(124, 111, 245, 0.26);
}

.page-checkout .glass,
.page-checkout .pm-card,
.page-checkout .form-card,
.page-checkout .result-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(238, 241, 250, 0.94));
  border-color: rgba(124, 111, 245, 0.18);
}

.pm-page {
  width: min(100%, 2156px);
}

.pm-shell {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.gateway-sidebar,
.pm-right,
.pm-summary {
  min-width: 0;
}

.gateway-sidebar {
  position: sticky;
  top: 28px;
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  color: rgba(27, 32, 37, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(11, 17, 21, 0.88);
  border: 1px solid rgba(124, 111, 245, 0.18);
  border-radius: 10px;
  box-shadow: var(--cb-shadow);
}

.gateway-sidebar::after {
  content: "";
  height: 1px;
  margin-top: auto;
  background: linear-gradient(90deg, transparent, rgba(124, 111, 245, 0.8), transparent);
}

.gateway-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cb-ink);
  text-decoration: none;
}

.gateway-brand-mark,
.mobile-paybar-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
  border-radius: 10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 30px -20px rgba(124, 111, 245, 0.9);
}

.gateway-brand strong,
.mobile-paybar strong {
  display: block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.1;
}

.gateway-brand small,
.mobile-paybar span {
  display: block;
  margin-top: 3px;
  color: rgba(27, 32, 37, 0.58);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gateway-nav {
  display: grid;
  gap: 8px;
}

.gateway-nav a {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: rgba(27, 32, 37, 0.66);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.gateway-nav a:hover,
.gateway-nav a.active {
  color: #ffffff;
  background: var(--cb-cyan);
  border-color: var(--cb-cyan);
}

.gateway-ledger,
.gateway-request-card,
.gateway-mini-grid > div {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.gateway-ledger,
.gateway-request-card {
  padding: 14px;
}

.gateway-ledger span,
.gateway-request-card span,
.gateway-request-card small,
.gateway-mini-grid span,
.gateway-hero-metrics span {
  color: rgba(27, 32, 37, 0.56);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gateway-ledger strong,
.gateway-request-card strong,
.gateway-mini-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--cb-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gateway-ledger strong {
  color: var(--cb-jade);
  font-size: 30px;
}

.gateway-request-card strong {
  font-size: 20px;
  line-height: 1.04;
}

.gateway-summary {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.gateway-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: rgba(27, 32, 37, 0.56);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gateway-summary-row strong {
  color: var(--cb-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.gateway-summary-total {
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.gateway-summary-total strong {
  color: var(--cb-jade);
  font-size: 17px;
  font-weight: 950;
}

.gateway-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gateway-mini-grid > div {
  min-height: 82px;
  padding: 12px;
}

.gateway-mini-grid strong {
  font-size: 18px;
}

.pm-right {
  gap: 16px;
}

.pm-right .pm-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 901px) {
  .page-checkout {
    padding-top: 32px;
  }

  .page-checkout .pm-page {
    width: min(137.5vw, 2156px);
    zoom: 0.8;
  }
}

/* The single-column payment-link form (PaymentSelect.jsx, identified by its
   .pm-form-grid) no longer needs the wide two-column layout .pm-page was
   sized for above - it gets its own, wider, unzoomed width instead of the
   shared shrink-to-fit-more-columns treatment other .pm-page users still get. */
.pm-page:has(.pm-form-grid) {
  width: min(54vw, 760px);
}

@media (min-width: 901px) {
  .page-checkout .pm-page:has(.pm-form-grid) {
    width: min(46vw, 760px);
    zoom: 1;
  }
}

.pm-details-panel,
.pm-payment-panel {
  min-width: 0;
}

.pm-details-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
    #eef1f7;
  border-color: rgba(27, 32, 37, 0.78);
  box-shadow: 0 26px 58px -42px rgba(6, 13, 16, 0.52);
}

.pm-panel-section + .pm-panel-section {
  position: relative;
  margin-top: 18px;
  padding-top: 24px;
}

.pm-panel-section + .pm-panel-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(27, 32, 37, 0.08) 12%,
      rgba(124, 111, 245, 0.38) 50%,
      rgba(27, 32, 37, 0.08) 88%,
      transparent);
}

.pm-details-panel .pm-payer-list {
  margin-bottom: 0;
}

.pm-disburse-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 14px;
  color: var(--graphite);
  font-size: 12.5px;
  font-weight: 650;
}

.pm-disburse-note svg {
  flex: none;
  color: rgba(27, 32, 37, 0.55);
}

.pm-bankcheck {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* A/C holder name + the Check control used to sit in two separate
   field-grid cards, one of them just a blank label spacer over the button -
   folded into a single status card so the resolved name, a match/mismatch
   indicator and the verify action all read as one unit. */
.pm-bankverify-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  padding: 16px 18px;
  background: #eef1f7;
  border: 1px solid rgba(27, 32, 37, 0.09);
  border-radius: 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pm-bankverify-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--text-muted);
  background: rgba(27, 32, 37, 0.08);
  border-radius: 50%;
}

.pm-bankverify-icon svg {
  width: 26px;
  height: 26px;
}

.pm-bankverify-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pm-bankverify-copy .pm-field {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.09em;
}

.pm-bankverify-copy .pm-static-value {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--graphite);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.pm-bankverify-copy .pm-static-value.is-placeholder {
  color: var(--text-muted);
  font-weight: 600;
}

.pm-bankverify-row .pm-bankcheck {
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-top: 0;
  min-width: 0;
  max-width: 100%;
}

/* Already conveyed by the icon/copy/button state on this card - the extra
   confirmation line would just repeat "verified" a third time. */
.pm-bankverify-row .pm-bankcheck-result.is-match {
  display: none;
}

/* On a mismatch/error the message can be a full sentence - let it wrap and
   break long tokens instead of stretching the flex-none column past the
   card's right edge. */
.pm-bankverify-row .pm-bankcheck-result {
  font-size: 12px;
  text-align: right;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pm-bankverify-match {
  background: var(--success-bg);
  border-color: var(--success-border);
}

.pm-bankverify-match .pm-bankverify-icon {
  color: var(--success);
  background: rgba(21, 132, 99, 0.16);
}

.pm-bankverify-mismatch,
.pm-bankverify-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.pm-bankverify-mismatch .pm-bankverify-icon,
.pm-bankverify-error .pm-bankverify-icon {
  color: var(--danger);
  background: rgba(189, 53, 82, 0.22);
}

.pm-bankverify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.pm-bankverify .pm-static-value {
  flex: 1 1 150px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14.5px;
}

.pm-bankverify .pm-static-value.is-placeholder {
  color: var(--text-muted);
  font-weight: 600;
}

/* flex-basis 100% (not "none") deliberately gives this a definite, bounded
   width equal to the row instead of shrink-to-fit content sizing - with
   flex:none, an unconstrained-width box, the browser sizes it to its
   widest possible unwrapped line (icon + the full "Payer details match
   this bank account" sentence), which is wider than the card itself and
   spills past its right edge instead of wrapping. min-width:0 lets it then
   actually shrink below that content width so the sentence can wrap. */
.pm-bankverify .pm-bankcheck {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
}

.pm-bankcheck-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.pm-bankcheck-btn:hover:not(:disabled) {
  background: #081ca7;
  border-color: #081ca7;
}

.pm-bankcheck-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.pm-bankcheck-btn.is-match {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.pm-bankcheck-btn.is-match:disabled {
  opacity: 1;
}

.pm-bankcheck-result {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.pm-bankcheck-result svg {
  flex: none;
}

.pm-bankcheck-result.is-match {
  color: var(--success);
}

.pm-bankcheck-result.is-mismatch,
.pm-bankcheck-result.is-error {
  color: var(--danger);
}

.pm-payment-panel {
  position: sticky;
  top: 24px;
  overflow: hidden;
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, rgba(124, 111, 245, 0.055) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(124, 111, 245, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, rgba(246, 247, 251, 0.98), rgba(255, 255, 255, 0.98) 62%);
  border-color: rgba(124, 111, 245, 0.22);
  box-shadow: 0 28px 80px -52px rgba(124, 111, 245, 0.62);
}

.pm-payment-panel::after {
  content: "";
  position: absolute;
  right: -84px;
  bottom: -98px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(124, 111, 245, 0.18);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 34px rgba(124, 111, 245, 0.035),
    inset 0 0 0 82px rgba(124, 111, 245, 0.02);
  pointer-events: none;
}

.pm-payment-panel > * {
  position: relative;
  z-index: 1;
}

.pm-payment-panel h2 {
  color: var(--cb-ink);
}

.pm-card-header {
  min-height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 22px;
  overflow: hidden;
}

.pm-card-header .pm-right-toolbar {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  margin-bottom: 0;
}

/* PaymentSelect.jsx ("Generate payment link", the signed-in operator's own
   page — .page-generate-link is unique to it, PaySelect.jsx's near-identical
   payer-facing header stays on the customer purple theme) carries a medium
   purple identity while the page body behind it (.page-checkout.page-generate-link
   above) stays light — the purple lives on the header bar instead of the
   whole page. */
.page-generate-link .pm-card-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-deep) 100%);
  border-color: rgba(255, 255, 255, 0.14);
}

.page-generate-link .pm-card-header::after {
  display: none;
}

.page-generate-link .pm-header-copy h1 { color: #fff; }
.page-generate-link .pm-header-copy p { color: rgba(255, 255, 255, 0.66); }

.page-generate-link .pm-card-header .icon-btn {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.page-generate-link .pm-card-header .icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.page-generate-link .pm-card-header .stepper .step { color: rgba(255, 255, 255, 0.5); }
.page-generate-link .pm-card-header .stepper .step::before { border-color: rgba(255, 255, 255, 0.28); }
.page-generate-link .pm-card-header .stepper .step.active { color: #fff; }
.page-generate-link .pm-card-header .stepper .step.active::before {
  border-color: #fff;
  background: #fff;
  color: #14161a;
}
.page-generate-link .pm-card-header .stepper .sep { background: rgba(255, 255, 255, 0.18); }
.page-generate-link .pm-card-header .stepper .sep.active,
.page-generate-link .pm-card-header .stepper .sep.ready {
  background: #fff;
  box-shadow: none;
}

.pm-card-header::after {
  content: "";
  position: absolute;
  right: -86px;
  bottom: -126px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(124, 111, 245, 0.22);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 28px rgba(124, 111, 245, 0.03),
    inset 0 0 0 72px rgba(124, 111, 245, 0.025);
  pointer-events: none;
}

.pm-header-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
  padding-right: 58px;
  margin-top: 20px;
}

.pm-header-copy h1 {
  margin: 0;
  color: var(--cb-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

.pm-header-copy p {
  margin: 7px 0 14px;
  color: rgba(27, 32, 37, 0.66);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}

.page-generate-link .pm-card-header .alert {
  border: none;
}

.pm-card-header .pm-stepper {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  /* The step labels are kept to single words (see PaymentSelect.jsx) and
     the gap/sep below trimmed down specifically so this fits on one line
     at common laptop widths without needing to scroll to read the last
     step - this used to rely on overflow-x:auto as a safety net instead,
     which just traded an invisible clip for a hidden scrollbar. flex-wrap
     stays on as the fallback for anything narrower still: it drops to a
     second row rather than clipping or requiring a scroll. */
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 8px;
  max-width: 100%;
}

.pm-card-header .pm-stepper .sep {
  flex: 0 0 18px;
  min-width: 10px;
  height: 2px;
  background: rgba(124, 111, 245, 0.2);
  border-radius: 999px;
}

.pm-card-header .pm-stepper .step {
  gap: 6px;
  letter-spacing: 0.04em;
}

.pm-card-header .pm-stepper .sep.active {
  background: linear-gradient(90deg, var(--cb-cyan), var(--cb-jade));
  box-shadow: 0 0 14px rgba(124, 111, 245, 0.22);
}

.pm-card-header .pm-stepper .sep.ready {
  background: linear-gradient(90deg, var(--cb-cyan), #7c6ff5);
  box-shadow: 0 0 18px rgba(124, 111, 245, 0.34);
}

.gateway-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: rgba(27, 32, 37, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cb-jade);
  box-shadow: 0 0 0 5px rgba(124, 111, 245, 0.12), 0 0 18px rgba(124, 111, 245, 0.9);
}

.gateway-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 22px;
  align-items: end;
}

.gateway-hero h1 {
  max-width: 11ch;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.9;
}

.gateway-hero .subtitle {
  max-width: 48ch;
  margin-top: 16px;
  font-size: 14px;
}

.gateway-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gateway-hero-metrics > div {
  min-height: 84px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.gateway-hero-metrics strong {
  display: block;
  margin-top: 8px;
  color: var(--cb-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
}

.pm-card:not(.pm-card-header) {
  padding: 26px;
}

.pm-card h2 {
  margin-bottom: 18px;
  font-size: 21px;
}

.pm-payer-list {
  gap: 10px;
}

.pm-payer-row {
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 11px 14px;
  position: relative;
}

.pm-payer-row .pm-field {
  margin: 0 0 6px;
}

.pm-payer-row input.pm-payer-input,
.pm-payer-row select.pm-payer-input,
.pm-payer-row textarea.pm-payer-input {
  height: 27px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 15px;
  box-shadow: none;
}

.pm-payer-row textarea.pm-payer-input {
  height: 44px;
  line-height: 1.35;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  resize: none;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar {
  width: 13px;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-track {
  background: transparent;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-button:single-button {
  display: block;
  width: 13px;
  height: 13px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
  border-radius: 5px;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-button:single-button:hover {
  background-color: rgba(124, 111, 245, 0.12);
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: linear-gradient(45deg, transparent 50%, #3c5fd9 50%),
                    linear-gradient(135deg, #3c5fd9 50%, transparent 50%);
  background-position: 3px 6px, 7px 6px;
  background-size: 5px 5px, 5px 5px;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: linear-gradient(135deg, transparent 50%, #3c5fd9 50%),
                    linear-gradient(45deg, #3c5fd9 50%, transparent 50%);
  background-position: 3px 3px, 7px 3px;
  background-size: 5px 5px, 5px 5px;
}

.pm-payer-row textarea.pm-payer-input::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.pm-payer-row select.pm-payer-input {
  color: var(--graphite);
  cursor: pointer;
}

.pm-payer-row input.pm-payer-input:focus,
.pm-payer-row select.pm-payer-input:focus,
.pm-payer-row textarea.pm-payer-input:focus {
  background: transparent;
  outline: none;
  box-shadow: none;
}

.pm-payer-row input.pm-payer-input:disabled,
.pm-payer-row select.pm-payer-input:disabled,
.pm-payer-row textarea.pm-payer-input:disabled,
.bank-combobox.is-disabled .bank-combobox-input {
  color: #303733;
  -webkit-text-fill-color: #303733;
  opacity: 1;
  cursor: default;
}

.bank-combobox {
  position: relative;
  min-width: 0;
}

.bank-combobox-input {
  padding-right: 34px !important;
}

.bank-combobox-toggle {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #51605d;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transform: translateY(-50%);
  cursor: pointer;
}

.bank-combobox-toggle:hover {
  color: #14205e;
  background: rgba(124, 111, 245, 0.12);
}

.bank-combobox-toggle:disabled {
  color: rgba(81, 96, 93, 0.42);
  background: transparent;
  cursor: default;
}

.bank-combobox-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 9px);
  left: -14px;
  right: -14px;
  max-height: 302px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding: 6px;
  background: #ffffff;
  border: 1px solid rgba(124, 111, 245, 0.42);
  border-radius: 8px;
  box-shadow: 0 18px 38px -26px rgba(7, 16, 15, 0.6);
}

.bank-combobox-option {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  color: var(--graphite);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.bank-combobox-logo {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 4px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(44, 46, 58, 0.08);
  border-radius: 7px;
}

.bank-combobox-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bank-combobox-logo-fallback {
  color: #14205e;
  background: rgba(124, 111, 245, 0.18);
  border-color: rgba(124, 111, 245, 0.22);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.bank-combobox-copy {
  min-width: 0;
  display: flex;
  align-items: center;
}

.bank-combobox-name {
  min-width: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-combobox-option:hover,
.bank-combobox-option.active {
  color: #14205e;
  background: rgba(124, 111, 245, 0.14);
}

.bank-combobox-option.selected {
  grid-column: 1 / -1;
  color: #14205e;
  background: rgba(124, 111, 245, 0.18);
  border-color: rgba(124, 111, 245, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.bank-combobox-empty {
  grid-column: 1 / -1;
  padding: 10px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 700;
}

.pm-payer-row input.pm-payer-input:-webkit-autofill,
.pm-payer-row input.pm-payer-input:-webkit-autofill:hover,
.pm-payer-row input.pm-payer-input:-webkit-autofill:focus,
.pm-payer-row input.pm-payer-input:autofill {
  -webkit-text-fill-color: var(--graphite);
  caret-color: var(--graphite);
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out;
  border: 0;
}

.pm-panel-hint {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.pm-docs-section + .pm-docs-section {
  margin-top: 14px;
}

.pm-docs-subtitle {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pm-upload-grid {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
}

.pm-upload-row {
  display: grid;
  gap: 10px;
}

.pm-upload-row-identity {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pm-upload-row-proof {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pm-upload-row-all {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is min-width:auto and refuses
     to shrink below the row's max-content width, so a long chosen-file name
     blows the card past the panel's right edge instead of ellipsizing. */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* Compact single-line variant for the merged 5-document verification list -
   the stacked label/button/hint layout the default .pm-upload card uses
   reads fine for 2-3 cards side by side, but stretched to 5 stacked rows it
   ate a lot of vertical space, so this lays icon/label/button/limit out on
   one line instead. */
.pm-upload-row-all .pm-upload {
  align-items: center;
  padding: 8px 12px;
  /* grid items are min-width:auto by default - without this the card won't
     shrink below its content and the file pill overflows the panel. */
  min-width: 0;
}

.pm-upload-row-all .pm-upload-body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pm-upload-row-all .pm-upload-heading {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.pm-upload-row-all .pm-upload-label {
  min-width: 0;
}

.pm-upload-row-all .pm-upload-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pm-upload-row-all .pm-upload-file {
  flex: 0 1 290px;
  min-width: 0;
  max-width: 55%;
  margin: 0;
}

.pm-upload-row-all .pm-upload-trigger {
  flex: none;
  margin: 0;
}

.pm-upload-row-all .pm-upload-limit {
  flex: none;
  margin: 0;
}

/* Compact status row, not an image dropzone - uploads never render a
   thumbnail, so there's no need for the tall box the old design used to
   reserve for a preview. */
.pm-upload {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  background: rgba(179, 180, 189, 0.1);
  border: 1px solid rgba(44, 46, 58, 0.08);
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pm-upload.is-done {
  background: var(--success-bg);
  border-color: var(--success-border);
}

.pm-upload-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid rgba(44, 46, 58, 0.12);
  border-radius: 50%;
}

.pm-upload.is-done .pm-upload-icon {
  color: var(--success);
  background: #fff;
  border-color: var(--success-border);
}

.pm-upload-body {
  flex: 1;
  min-width: 0;
}

.pm-upload-heading {
  margin-bottom: 6px;
}

.pm-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

.pm-upload-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  cursor: help;
}

.pm-upload-info:hover,
.pm-upload-info:focus-visible {
  color: var(--blue);
  outline: none;
}

.pm-upload-info-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 14px 30px -10px rgba(6, 8, 12, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.pm-upload-info-tip.has-image {
  max-width: 400px;
}

.pm-upload-info-tip img {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.pm-upload-info-tip-caption {
  display: block;
}

.pm-upload-info-tip img + .pm-upload-info-tip-caption {
  margin-top: 10px;
}

.pm-upload-info-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}

.pm-upload-info:hover .pm-upload-info-tip,
.pm-upload-info:focus-visible .pm-upload-info-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pm-upload-hint {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.pm-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.pm-upload-trigger {
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pm-upload-trigger:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.pm-upload-trigger:disabled {
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(44, 46, 58, 0.18);
  cursor: default;
}

.pm-upload-remove:disabled {
  opacity: 0.45;
  cursor: default;
}

.pm-upload-limit {
  display: block;
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 9.5px;
  font-weight: 600;
}

.pm-upload-error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
}

.pm-upload-file {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 10px;
  background: #fff;
  border: 1px solid rgba(44, 46, 58, 0.12);
  border-radius: 999px;
}

.pm-upload-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--graphite);
  font-size: 11.5px;
  font-weight: 700;
}

.pm-upload-remove {
  flex: none;
  position: static;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(20, 22, 30, 0.72);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.pm-upload-remove:hover {
  background: rgba(20, 22, 30, 0.9);
}

.pm-amount-block {
  padding: 14px 18px 18px;
  background: #e6eaf3;
  border: 1px solid rgba(27, 32, 37, 0.1);
  border-radius: 8px;
}

.pm-payment-panel .pm-amount-block {
  background:
    radial-gradient(240px 120px at 18% 0%, rgba(124, 111, 245, 0.18), transparent 68%),
    rgba(255, 255, 255, 0.1);
  border-color: rgba(124, 111, 245, 0.3);
  box-shadow: 0 18px 42px -30px rgba(124, 111, 245, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.pm-payment-panel .pm-field {
  display: block;
  margin-bottom: 8px;
  color: rgba(27, 32, 37, 0.78);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.pm-amount-field {
  height: 62px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.55);
}

.pm-payment-panel .pm-amount-field {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(124, 111, 245, 0.52);
  box-shadow: inset 0 0 0 1px rgba(124, 111, 245, 0.08);
}

.pm-amount-prefix {
  color: #1439a8;
}

.pm-payment-panel .pm-amount-prefix {
  color: var(--cb-cyan);
  text-shadow: 0 0 14px rgba(124, 111, 245, 0.42);
}

.pm-amount-field input[type="text"] {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 30px;
}

.pm-payment-panel .pm-amount-field input[type="text"] {
  color: var(--cb-ink);
  -webkit-text-fill-color: var(--cb-ink);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

.pm-amount-field input[type="text"]:disabled {
  color: var(--graphite);
  -webkit-text-fill-color: var(--graphite);
  opacity: 1;
  cursor: default;
}

.pm-methods {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 20px;
}

.pm-payment-panel .pm-methods {
  grid-template-columns: 1fr;
  gap: 10px;
}

.pm-method {
  min-height: 88px;
  align-items: flex-start;
  padding: 13px;
  gap: 10px;
}

.pm-payment-panel .pm-method {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 22px;
  align-items: center;
  min-height: 72px;
  padding: 12px 14px;
  gap: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}

.pm-payment-panel .pm-method-name {
  color: var(--cb-ink);
}

.pm-payment-panel .pm-method-meta {
  color: rgba(27, 32, 37, 0.52);
}

/* PaymentSelect.jsx's payment-method row now lives inside the single
   .pm-details-panel section (the old separate .pm-payment-panel dark-glass
   panel was folded away in a layout redesign), so these are the icon-sizing
   rules that actually apply today - without them, GrabPayLater/SPayLater/
   Atome/Visa fall back to the generic 36px round .pm-method-icon (built for
   PaymentMethodPicker.jsx's small FPX/DuitNow/E-wallet svgs) with
   object-fit: cover, which zoom-crops these wordmark logos instead of
   showing them whole. */
.pm-details-panel .pm-method-icon {
  width: 88px;
  height: 46px;
  background: transparent;
  border-color: transparent;
  border-radius: 12px;
  padding: 0;
}

.pm-details-panel .pm-method-icon.is-wide {
  width: 88px;
  padding: 0;
}

.pm-details-panel .pm-method:has(input[value="grabpaylater"]) .pm-method-icon,
.pm-details-panel .pm-method:has(input[value="visa"]) .pm-method-icon {
  background: #fff;
  border-color: rgba(27, 32, 37, 0.14);
  padding: 5px;
}

.pm-details-panel .pm-method:has(input[value="spaylater"]) .pm-method-icon {
  background: #ff4b2b;
  border-color: transparent;
  padding: 0;
}

.pm-details-panel .pm-method:has(input[value="atome"]) .pm-method-icon {
  background: #eeff5c;
  border-color: transparent;
  padding: 0;
}

.pm-details-panel .pm-method-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pm-details-panel .pm-method-icon.has-multiple {
  gap: 5px;
}

.pm-details-panel .pm-method-icon.has-multiple img {
  width: calc((100% - 5px) / 2);
}

.pm-method:has(input:disabled) {
  cursor: default;
}

.pm-method:has(input:disabled):not(:has(input:checked)) {
  opacity: 0.58;
}

.pm-method-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

/* Logo-only payment method tiles - just the brand mark, name/meta text
   dropped since it kept wrapping to 2-3 lines once the form narrowed. The
   checkmark moves to a corner badge instead of being pushed to the end of
   a copy-less flex row. */
.pm-methods-logo-only .pm-method {
  justify-content: center;
  min-height: 66px;
  padding: 12px 10px;
}

.pm-methods-logo-only .pm-method-icon {
  margin: 0 auto;
}

.pm-methods-logo-only .pm-method-check {
  position: absolute;
  top: 8px;
  right: 8px;
  margin-left: 0;
  background: #fff;
}

.pm-method-name {
  font-size: 13px;
  line-height: 1.15;
}

.pm-method-meta {
  color: #69737a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.pm-payment-panel .pm-method-check {
  margin-left: 0;
  justify-self: end;
}

.pm-bank-panel-head {
  padding: 18px;
  background: #e6eaf3;
  border: 1px solid rgba(124, 111, 245, 0.16);
  border-radius: 8px;
}

.pm-bank-panel-title h3 {
  color: var(--cb-ink);
}

.pm-bank-panel-title p {
  color: rgba(27, 32, 37, 0.62);
}

.pm-bank-search {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 111, 245, 0.16);
}

.pm-bank-search,
.pm-bank-search input {
  color: var(--cb-ink);
}

.pm-bank-grid {
  max-height: 360px;
  padding-right: 6px;
}

.pm-bank,
.pm-wallet {
  min-height: 76px;
  padding: 12px;
}

.pm-summary {
  grid-column: 3;
  min-height: calc(100vh - 84px);
}

.pm-summary-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-vault-chip {
  flex: 1 1 100%;
  color: rgba(27, 32, 37, 0.64);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pm-card-number {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.86);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.pm-card-number span {
  min-height: 42px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
}

.pm-summary-amount {
  font-size: 46px;
}

.pm-summary-actions {
  gap: 10px;
  padding: 0 26px 22px;
}

.pm-summary-actions .secondary {
  min-height: 48px;
  color: rgba(27, 32, 37, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-paybar {
  display: none;
}

/* .pm-card-header already carries this page's own branding/title (see
   .page-generate-link .pm-card-header) - showing .mobile-paybar's "PP / New
   payment link / Bank rails ready" mini-header directly above it duplicated
   the same branding twice in a row instead of picking one. */
.page-generate-link .mobile-paybar {
  display: none !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .pm-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-upload-row-identity,
  .pm-upload-row-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gateway-hero {
    grid-template-columns: 1fr;
  }

  .gateway-hero h1 {
    font-size: 48px;
  }
}

@media (max-width: 900px) {
  .page-checkout {
    background:
      linear-gradient(180deg, #0b1417 0 158px, #eef1f7 158px 100%);
    min-height: 100svh;
    padding: 0 12px 96px;
    overflow-x: hidden;
  }

  .page-checkout .pm-page {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    zoom: 1;
  }

  .mobile-paybar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px 12px;
    color: var(--cb-ink);
  }

  .mobile-paybar-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
    border-radius: 9px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-paybar strong,
  .mobile-paybar span {
    display: block;
  }

  .mobile-paybar strong {
    color: var(--cb-ink);
    font-size: 14px;
    line-height: 1.1;
  }

  .mobile-paybar span {
    margin-top: 2px;
    color: rgba(27, 32, 37, 0.62);
    font-size: 11px;
    font-weight: 700;
  }

  .gateway-sidebar {
    display: none;
  }

  .pm-shell {
    display: block;
  }

  .pm-right {
    gap: 12px;
  }

  .pm-right .pm-form-grid {
    display: block;
  }

  .pm-payment-panel {
    position: relative;
    top: auto;
    margin-bottom: 0;
  }

  .bank-combobox-menu {
    left: -10px;
    right: -10px;
    max-height: min(332px, 54vh);
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px;
  }

  .bank-combobox-option {
    min-height: 46px;
    padding: 8px;
  }

  .bank-combobox-logo {
    width: 30px;
    height: 30px;
  }

  .bank-combobox-name {
    white-space: nowrap;
  }

  .pm-upload-row {
    grid-template-columns: 1fr;
  }

  .pm-card-header {
    min-height: 0;
    margin-top: 0;
    padding: 18px;
    border-radius: 12px;
    background:
      linear-gradient(90deg, rgba(124, 111, 245, 0.09) 1px, transparent 1px) 0 0 / 24px 24px,
      #ffffff;
    border-color: rgba(44, 46, 58, 0.08);
    box-shadow: 0 18px 40px -30px rgba(7, 16, 15, 0.35);
  }

  .pm-card-header .pm-right-toolbar {
    top: 14px;
    right: 14px;
  }

  .pm-card-header::after,
  .gateway-hero-metrics {
    display: none;
  }

  .pm-card-header .pm-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    row-gap: 6px;
    padding: 2px 1px 3px;
  }

  .pm-card-header .pm-stepper .sep {
    display: none;
  }

  .pm-card-header .pm-stepper .step {
    min-height: 28px;
    padding: 0 10px 0 6px;
    gap: 6px;
    color: #64706c;
    background: #eef1fb;
    border: 1px solid rgba(124, 111, 245, 0.18);
    border-radius: 999px;
    white-space: nowrap;
  }

  .pm-card-header .pm-stepper .step::before {
    width: 18px;
    height: 18px;
    border-color: rgba(124, 111, 245, 0.28);
    background: rgba(124, 111, 245, 0.1);
    color: var(--cb-cyan);
  }

  .pm-card-header .pm-stepper .step.active {
    color: #14205e;
    background: #dbe2fa;
    border-color: rgba(124, 111, 245, 0.4);
  }

  .pm-card-header .pm-stepper .step.active::before {
    color: #ffffff;
    background: var(--cb-cyan);
    border-color: var(--cb-cyan);
  }

  .pm-card-header .pm-stepper .step.ready {
    color: #14205e;
    background: linear-gradient(135deg, #dbe2fa, #aebdf2);
    border-color: rgba(124, 111, 245, 0.72);
    box-shadow: 0 0 0 3px rgba(124, 111, 245, 0.14);
    text-shadow: none;
  }

  .pm-card-header .pm-stepper .step.ready::before {
    background: #7c6ff5;
    border-color: #7c6ff5;
    box-shadow: none;
  }

  .gateway-kicker {
    margin-bottom: 18px;
  }

  .gateway-hero {
    display: block;
  }

  .gateway-hero h1 {
    max-width: none;
    font-size: 31px;
    line-height: 1;
  }

  .gateway-hero .subtitle {
    margin-top: 10px;
    font-size: 13px;
  }

  .pm-header-copy p {
    white-space: normal;
    margin-bottom: 13px;
    font-size: 12px;
    line-height: 1.45;
  }

  .page-checkout .pm-card-header .pm-header-copy h1 {
    color: #17201d;
    text-shadow: none;
  }

  .page-checkout .pm-card-header .pm-header-copy p {
    color: #5e6965;
  }

  .page-checkout .pm-card-header .icon-btn {
    color: #33413d;
    background: rgba(124, 111, 245, 0.1);
    border-color: rgba(124, 111, 245, 0.18);
  }

  .pm-card:not(.pm-card-header),
  .pm-card,
  .pm-right .pm-card {
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 16px 34px -30px rgba(7, 16, 15, 0.38);
  }

  .pm-card h2 {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1.1;
  }

  .pm-details-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
      #f6f7fb;
    border-color: rgba(44, 46, 58, 0.08);
  }

  .pm-panel-section + .pm-panel-section {
    margin-top: 16px;
    padding-top: 21px;
  }

  .pm-payer-list {
    gap: 10px;
    margin-top: 0;
  }

  .pm-payer-row {
    min-height: 68px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #e6eaf3;
    border: 1px solid rgba(46, 42, 107, 0.32);
  }

  .pm-payer-row .pm-field {
    color: #68706d;
    margin-bottom: 5px;
    font-size: 8.5px;
  }

  .pm-payer-row input.pm-payer-input,
  .pm-payer-row select.pm-payer-input,
  .pm-payer-row textarea.pm-payer-input,
  .bank-combobox-input {
    height: 34px;
    color: #17201d;
    -webkit-text-fill-color: #17201d;
    font-size: 14px;
  }

  .pm-payer-row textarea.pm-payer-input {
    height: 46px;
  }

  .pm-details-panel .field-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pm-amount-block {
    padding: 13px 14px 15px;
    border-radius: 10px;
    background: #eef1f7;
    border-color: rgba(124, 111, 245, 0.28);
  }

  .pm-payment-panel .pm-field {
    margin-bottom: 8px;
    color: #53615d;
    font-size: 11px;
  }

  .pm-amount-field {
    height: 56px;
  }

  .pm-amount-field input[type="text"] {
    font-size: 27px;
  }

  .pm-methods {
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 14px 0 16px;
  }

  .pm-method {
    min-height: 66px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 22px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .pm-payment-panel {
    background:
      linear-gradient(90deg, rgba(124, 111, 245, 0.08) 1px, transparent 1px) 0 0 / 26px 26px,
      #ffffff;
    border-color: rgba(124, 111, 245, 0.22);
  }

  .pm-payment-panel h2 {
    color: #17201d;
  }

  .pm-payment-panel .pm-amount-field {
    background: #ffffff;
    border-color: rgba(124, 111, 245, 0.45);
  }

  .pm-payment-panel .pm-amount-field input[type="text"] {
    color: #17201d;
    -webkit-text-fill-color: #17201d;
    text-shadow: none;
  }

  .pm-payment-panel .pm-method {
    grid-template-columns: 88px minmax(0, 1fr) 22px;
    min-height: 66px;
    padding: 10px 12px;
    background: #f6f7fb;
    border-color: rgba(44, 46, 58, 0.08);
  }

  .pm-payment-panel .pm-method:has(input:checked) {
    background: #dbe2fa;
    border-color: rgba(124, 111, 245, 0.62);
  }

  .pm-payment-panel .pm-method-name {
    color: #17201d;
  }

  .pm-payment-panel .pm-method-meta {
    color: #66736f;
  }

  .pm-details-panel .pm-method-icon,
  .pm-details-panel .pm-method-icon.is-wide {
    width: 76px;
    height: 40px;
    border-radius: 10px;
  }

  .pm-methods-logo-only {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-methods-logo-only .pm-method {
    display: flex;
    justify-content: center;
    padding: 12px 10px;
  }

  .pm-method-name {
    font-size: 13px;
  }

  .pm-method-meta {
    font-size: 10.5px;
  }

  .pm-upload-grid {
    gap: 4px;
    margin-top: 14px;
  }

  .pm-upload-row {
    gap: 10px;
  }

  .pm-upload {
    padding: 10px 11px;
    border-radius: 10px;
    background: #eef1f7;
    border-color: rgba(44, 46, 58, 0.08);
  }

  .pm-upload-label {
    font-size: 12.5px;
  }

  .pm-upload-hint {
    font-size: 10.5px;
  }

  .pm-bank-panel-head {
    padding: 14px;
    background: #e6eaf3;
  }

  .pm-bank-grid {
    max-height: 280px;
  }

  .pm-summary {
    min-height: 0;
  }

  .pm-summary-top,
  .pm-summary-body {
    display: none;
  }

  .pm-summary-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .pm-summary-footer-mobile-only .pm-summary-eyebrow,
  .pm-summary-footer-mobile-only .pm-summary-amount {
    display: block;
  }

  .pm-summary-eyebrow {
    grid-column: 1;
  }

  .pm-summary-amount {
    grid-column: 1;
    font-size: 28px;
  }

  .pm-summary-chevron {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .pm-secure-bar {
    position: sticky;
    bottom: 10px;
    z-index: 30;
    min-height: auto;
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(124, 111, 245, 0.22);
    border-radius: 14px;
    box-shadow: 0 18px 40px -24px rgba(7, 16, 15, 0.48);
    backdrop-filter: blur(10px);
  }

  .pm-secure-bar:has(.js-generate-link) {
    background: var(--blue);
    border-color: transparent;
  }

  .pm-secure-bar .submit-bar {
    margin-top: 0;
  }

  .submit-bar .secondary,
  .pm-secure-bar .submit-bar .secondary,
  .js-generate-link {
    width: 100%;
    min-height: 52px;
    border-radius: 0;
    color: #ffffff;
    background: transparent;
    border-color: transparent;
    font-size: 13px;
  }

  .pm-link-result {
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
  }

  .pm-link-result-row {
    gap: 6px;
  }

  .pm-link-result-row input,
  .pm-link-result .whatsapp-btn,
  .pm-link-result .neon-link-action {
    min-height: 46px;
  }

  .pm-link-result-row button.primary {
    width: 58px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 11.5px;
  }
}

.pm-payer-row:has(.pm-payer-input:disabled),
.pm-payer-row:has(.bank-combobox.is-disabled) {
  background: rgba(221, 227, 238, 0.72);
  border-color: rgba(44, 46, 58, 0.08);
}

.pm-payer-row:has(.pm-payer-input:disabled):hover,
.pm-payer-row:has(.bank-combobox.is-disabled):hover {
  background: rgba(221, 227, 238, 0.72);
  border-color: rgba(44, 46, 58, 0.08);
}

.pm-payer-row input.pm-payer-input:disabled,
.pm-payer-row select.pm-payer-input:disabled,
.pm-payer-row textarea.pm-payer-input:disabled,
.bank-combobox.is-disabled .bank-combobox-input {
  color: #5d6662;
  -webkit-text-fill-color: #5d6662;
  opacity: 1;
  cursor: default;
}

.pm-payer-row input.pm-payer-input:disabled:hover,
.pm-payer-row input.pm-payer-input:disabled:focus,
.pm-payer-row select.pm-payer-input:disabled:hover,
.pm-payer-row select.pm-payer-input:disabled:focus,
.pm-payer-row textarea.pm-payer-input:disabled:hover,
.pm-payer-row textarea.pm-payer-input:disabled:focus,
.bank-combobox.is-disabled .bank-combobox-input:hover,
.bank-combobox.is-disabled .bank-combobox-input:focus {
  color: #5d6662;
  -webkit-text-fill-color: #5d6662;
  background: transparent;
  box-shadow: none;
}

.pm-payer-row input.pm-payer-input:disabled:-webkit-autofill,
.pm-payer-row input.pm-payer-input:disabled:-webkit-autofill:hover,
.pm-payer-row input.pm-payer-input:disabled:-webkit-autofill:focus {
  -webkit-text-fill-color: #5d6662;
  box-shadow: 0 0 0 1000px transparent inset !important;
}

.pm-payer-row input.pm-payer-input:disabled::placeholder,
.pm-payer-row textarea.pm-payer-input:disabled::placeholder,
.bank-combobox.is-disabled .bank-combobox-input::placeholder {
  color: #7f8984;
  -webkit-text-fill-color: #7f8984;
  opacity: 1;
}

/* ==========================================================================
   Mobile step wizard - "Generate payment link" (PaymentSelect.jsx)
   Renders as its own DOM tree (MobilePaymentWizard) only when the page's
   own isMobile check is true, so none of this is reachable from the desktop
   layout above. Scoped to the same <=640px breakpoint here too, as a
   belt-and-suspenders guard against ever bleeding into desktop widths.
   ========================================================================== */
@media (max-width: 640px) {
  /* Safety net: .page-checkout's dark-to-cream gradient (further down, in
     the desktop/tablet responsive block) is sized for the old flat-mobile
     header. Any content rendered here without its own opaque background -
     e.g. the "Loading..." state, which renders before the wizard's topbar
     mounts - would otherwise sit on that gradient's dark top band and be
     unreadable (dark text on dark). Giving the page itself a solid
     background removes that failure mode regardless of which child is
     rendered. */
  /* App-shell: the wizard fills the viewport exactly and only .mw-body (the
     current step's fields) scrolls, and only when that step's own content is
     actually taller than the space left after the topbar/rail/bottombar -
     short steps like Payer details never scroll, instead of the page always
     being tall enough to scroll from the old fixed-bottombar + padding
     hack. */
  .page.page-checkout {
    padding: 0;
  }

  .page-checkout .pm-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--cb-cream);
  }

  .page-generate-link .pm-page {
    background: #e9ecef;
  }

  .mw-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 14px calc(20px + env(safe-area-inset-left, 0px));
    background: linear-gradient(135deg, #14161a, #2c2e3a 60%, #0b0c0e);
  }

  .mw-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
    border-radius: 8px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 13px;
  }

  .mw-topbar-copy strong {
    display: block;
    color: #fff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
  }

  .mw-topbar-copy small {
    display: block;
    margin-top: 2px;
    color: var(--cb-cyan);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mw-exit {
    margin-left: auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #dde3ee;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
  }

  .mw-rail-wrap {
    flex: 0 0 auto;
    padding: 12px calc(20px + env(safe-area-inset-right, 0px)) 14px calc(20px + env(safe-area-inset-left, 0px));
    background: linear-gradient(135deg, #14161a, #2c2e3a 60%, #0b0c0e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mw-step-line {
    margin: 0 0 9px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    color: #dde3ee;
  }

  .mw-step-line b {
    color: var(--cb-cyan);
    font-weight: 700;
  }

  .mw-step-line span {
    color: #dde3ee;
    font-weight: 600;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
  }

  .mw-rail {
    display: flex;
    gap: 5px;
  }

  .mw-rail i {
    flex: 1 1 0;
    height: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
  }

  .mw-rail i b {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cb-cyan), var(--cb-jade));
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .mw-rail i.done b {
    width: 100%;
  }

  .mw-rail i.current b {
    width: 100%;
    animation: mwRailPulse 1.6s ease-in-out infinite;
  }

  @keyframes mwRailPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  .mw-alert {
    flex: 0 0 auto;
    margin: 14px 18px 0;
  }

  /* Error shown right above the sticky bottom action bar, so a failed
     "Generate payment link" is visible next to the button that triggered it. */
  .mw-bottombar-error {
    margin: 0 18px 10px;
  }

  .mw-body {
    /* Fills whatever space is left in the flex column after the topbar/rail
       and bottombar, and is the only part of the wizard that scrolls - and
       only when this step's own content is taller than that space (min-height:
       0 is what lets a flex child shrink below its content size, which is
       what makes overflow-y: auto actually kick in instead of pushing the
       whole column taller than the viewport). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--cb-cream);
    padding: 18px 18px 20px;
  }

  .mw-title {
    margin: 2px 0 4px;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 20px;
  }

  .mw-sub {
    max-width: 34ch;
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .mw-disburse-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
  }

  .mw-disburse-note svg {
    flex: none;
    color: rgba(27, 32, 37, 0.45);
  }

  .mw-field {
    margin-bottom: 16px;
  }

  .mw-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .mw-field label em {
    margin-left: 3px;
    color: var(--cb-rose);
    font-style: normal;
  }

  /* Matches .pm-payer-row input.pm-payer-input's colors (the desktop field
     look) so a field reads the same whether it's reached from the desktop
     layout or this wizard. */
  .mw-input {
    width: 100%;
    padding: 13px 14px;
    color: var(--graphite);
    background: #f6f7fb;
    border: 1px solid rgba(46, 42, 107, 0.32);
    border-radius: 10px;
    font-family: inherit;
    /* 16px, not the visually-matched 14.5px, so focusing a field doesn't
       trigger iOS Safari's auto-zoom - same fix already applied to the
       auth-m-card and pm-payer-input fields. */
    font-size: 16px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }

  .mw-input::placeholder {
    color: #9a9ba3;
    font-size: 13px;
    font-weight: 600;
  }

  textarea.mw-input {
    min-height: 56px;
    line-height: 1.4;
    resize: none;
  }

  .mw-input:focus {
    background: #fff;
    border-color: var(--cb-cyan);
    box-shadow: 0 0 0 3px rgba(124, 111, 245, 0.16);
  }

  /* Without an explicit hint, mobile browsers sometimes guess the wrong
     saved value into a field (e.g. a saved email into the Name field) and
     paint it with their own autofill highlight - neutralize the highlight
     the same way the desktop field does, and rely on the field's own
     autoComplete attribute (set in PaymentSelect.jsx) to fix the wrong
     value getting suggested in the first place. */
  .mw-input:-webkit-autofill,
  .mw-input:-webkit-autofill:hover,
  .mw-input:-webkit-autofill:focus,
  .mw-input:autofill {
    -webkit-text-fill-color: var(--graphite);
    caret-color: var(--graphite);
    background-color: #f6f7fb !important;
    box-shadow: 0 0 0 1000px #f6f7fb inset !important;
    transition: background-color 9999s ease-out;
  }

  .mw-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .mw-bank-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(27, 32, 37, 0.13);
    border-radius: 14px;
  }

  .mw-bank-card .mw-field:last-child {
    margin-bottom: 0;
  }

  .mw-bank-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }

  .mw-bank-card-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--cb-jade);
    background: rgba(60, 179, 113, 0.12);
    border-radius: 10px;
  }

  .mw-bank-card-head strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
  }

  .mw-bank-card-head small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
  }

  .mw-bank-security-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 2px 0;
    color: var(--text-faint);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  .mw-bank-security-note svg {
    flex: none;
    color: var(--text-faint);
  }

  /* Mirrors .mw-input's look so the read-only account-holder-name value
     (populated by the Check call, not typed) reads the same as the other
     wizard fields instead of falling back to plain text. */
  .mw-field .pm-static-value {
    display: block;
    padding: 13px 14px;
    color: var(--graphite);
    background: #f6f7fb;
    border: 1px solid rgba(44, 46, 58, 0.1);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The Check button used to sit in its own field below a blank spacer
     label - folded into the same row as the resolved name, so the value
     reads as plain text on the row instead of a second nested input box. */
  .mw-bankverify.mw-bankverify .pm-static-value {
    flex: 1 1 130px;
    padding: 0;
    background: none;
    border: 0;
    white-space: normal;
  }

  .mw-bankverify-row {
    margin-top: 12px;
  }

  /* BankCombobox is a shared desktop widget - its own input only picks up
     .pm-payer-input's look inside a .pm-payer-row ancestor, which this
     wizard doesn't use, so it's restyled here to match the other mw-input
     fields instead of falling back to an unstyled browser input. */
  .mw-field .bank-combobox-input {
    width: 100%;
    height: auto !important;
    padding: 13px 34px 13px 14px !important;
    color: var(--graphite) !important;
    background: #f6f7fb !important;
    border: 1px solid rgba(44, 46, 58, 0.1) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .mw-field .bank-combobox-input:focus {
    border-color: var(--cb-cyan) !important;
    box-shadow: 0 0 0 3px rgba(124, 111, 245, 0.16) !important;
    outline: none;
  }

  .mw-field .bank-combobox-input::placeholder {
    font-size: 13px;
    font-weight: 600;
  }

  .mw-field .bank-combobox-toggle {
    right: 6px;
  }

  .mw-docs-section + .mw-docs-section {
    margin-top: 18px;
  }

  .mw-docs-subtitle {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .mw-docs-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Compact single-line row - icon/label/button on one line instead of the
     tall stacked card, so 5 rows don't eat the whole step. The always-visible
     hint paragraph is dropped in favor of a "See example" popup (see
     .pm-upload-example-*) so the row still fits on one line. */
  .mw-docs-grid .pm-upload {
    align-items: center;
    padding: 9px 11px;
  }

  .mw-docs-grid .pm-upload-body {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .mw-docs-grid .pm-upload-heading {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }

  .mw-docs-grid .pm-upload-label {
    min-width: 0;
  }

  .mw-docs-grid .pm-upload-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .mw-docs-grid .pm-upload-example-link {
    flex: none;
    margin: 0 0 0 6px;
  }

  /* Unlike .pm-upload-trigger (short, fixed "Choose photo" label), a chosen
     file's name is arbitrary length - a long one (e.g. a phone's default
     camera filename) needs to actually shrink so its own text-overflow:
     ellipsis (see .pm-upload-file-name) can kick in, instead of forcing the
     pill to its full content width and squeezing the label next to it down
     to almost nothing. */
  .mw-docs-grid .pm-upload-file {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 150px;
    margin: 0;
  }

  .mw-docs-grid .pm-upload-trigger {
    flex: none;
    margin: 0;
  }

  .mw-docs-grid .pm-upload-limit {
    display: none;
  }

  /* Icon-only rather than a "See example" text link - on this compact
     single-line row (icon/label/button all sharing one line, see
     .mw-docs-grid .pm-upload-body above) a text link next to the label
     was crowding the row and, at narrower widths, butting straight up
     against the label with no visible gap. A small picture-frame glyph
     says the same thing in a fraction of the width. */
  .pm-upload-example-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--blue);
    background: rgba(99, 102, 241, 0.1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .pm-upload-example-link:hover,
  .pm-upload-example-link:focus-visible {
    color: #fff;
    background: var(--blue);
    outline: none;
  }

  .pm-upload-example-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 12, 14, 0.55);
    z-index: 60;
  }

  .pm-upload-example-modal {
    position: relative;
    width: 100%;
    max-width: 260px;
    padding: 12px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px -12px rgba(6, 8, 12, 0.5);
  }

  .pm-upload-example-modal img {
    display: block;
    width: 100%;
    border-radius: 8px;
  }

  .pm-upload-example-caption {
    margin: 8px 2px 0;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  .pm-upload-example-close {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #fff;
    background: var(--ink);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(6, 8, 12, 0.3);
  }

  .mw-summary {
    overflow: hidden;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(27, 32, 37, 0.13);
    border-radius: 12px;
  }

  .mw-summary-group {
    padding: 13px 15px;
  }

  .mw-summary-group + .mw-summary-group {
    border-top: 1px solid rgba(27, 32, 37, 0.1);
  }

  .mw-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
  }

  .mw-summary-head span {
    color: var(--text-muted);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .mw-summary-head button {
    padding: 0;
    color: #1439a8;
    background: none;
    border: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .mw-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    font-size: 13px;
  }

  .mw-summary-row span {
    color: var(--text-faint);
  }

  .mw-summary-row b {
    color: var(--ink);
    font-weight: 500;
    text-align: right;
  }

  .mw-summary-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .mw-summary-docs span {
    padding: 4px 9px;
    color: var(--text-muted);
    background: rgba(27, 32, 37, 0.06);
    border: 1px solid rgba(27, 32, 37, 0.14);
    border-radius: 999px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
  }

  .mw-summary-docs span.ready {
    color: #168463;
    background: rgba(124, 111, 245, 0.18);
    border-color: rgba(124, 111, 245, 0.4);
  }

  /* Deliberately louder than a plain .mw-field: this is the one number that
     actually decides what gets collected, so it gets its own bordered card,
     an accent-colored label, and an explicit "required" callout instead of
     blending in with the rest of the review step. */
  .mw-amount-block {
    margin-bottom: 20px;
    padding: 14px 14px 16px;
    background: rgba(124, 111, 245, 0.08);
    border: 1.5px solid rgba(124, 111, 245, 0.35);
    border-radius: 14px;
  }

  .mw-amount-block label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mw-amount-block label em {
    color: #1439a8;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .mw-amount-field {
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 16px;
    background: #fff;
    border: 1px solid rgba(44, 46, 58, 0.14);
    border-radius: 12px;
  }

  .mw-amount-field:focus-within {
    border-color: var(--cb-cyan);
    box-shadow: 0 0 0 3px rgba(124, 111, 245, 0.22);
  }

  .mw-amount-field.invalid {
    border-color: var(--cb-rose);
  }

  .mw-amount-prefix {
    margin-right: 8px;
    color: var(--text-muted);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
  }

  .mw-amount-field input {
    flex: 1;
    padding: 8px 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 26px;
    font-weight: 600;
  }

  .mw-amount-field input::placeholder {
    font-size: 16px;
    font-weight: 500;
  }

  .mw-field-hint {
    margin: 8px 0 0;
    color: var(--cb-rose);
    font-size: 12px;
  }

  .mw-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mw-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1.5px solid rgba(27, 32, 37, 0.14);
    border-radius: 12px;
  }

  .mw-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .mw-method:has(input:checked) {
    background: rgba(124, 111, 245, 0.07);
    border-color: var(--cb-cyan);
  }

  .mw-method.is-coming-soon {
    opacity: 0.5;
    cursor: default;
  }

  .mw-method.is-coming-soon .mw-method-meta {
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  /* A single square box works for a plain letterfall (no icons), but the
     real logos are wordmarks (GrabPayLater/SPayLater) or a two-up card pair
     (Visa+Mastercard) - both need a wide rectangle, not a 1:1 square, or
     the artwork gets squeezed/cropped. Matches the desktop
     .pm-payment-panel .pm-method-icon treatment (wide box, per-brand plate
     color, has-multiple split) instead of the generic square this was
     using before. */
  .mw-method-icon {
    flex: 0 0 auto;
    width: 78px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    padding: 5px;
    color: var(--text-muted);
    background: #eef1f7;
    border: 1px solid rgba(27, 32, 37, 0.08);
    border-radius: 9px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 800;
  }

  .mw-method-icon.brand-grabpaylater,
  .mw-method-icon.brand-visa {
    background: #fff;
    border-color: rgba(27, 32, 37, 0.12);
  }

  .mw-method-icon.brand-spaylater {
    padding: 0;
    background: #ff4b2b;
    border-color: transparent;
  }

  .mw-method-icon.brand-atome {
    padding: 0;
    background: #eeff5c;
    border-color: transparent;
  }

  .mw-method-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .mw-method-icon.has-multiple img {
    width: calc((100% - 5px) / 2);
    max-width: none;
    height: auto;
  }

  .mw-method-name {
    display: block;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
  }

  .mw-method-meta {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 11.5px;
  }

  .mw-method-check {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 20px;
    height: 20px;
    color: transparent;
    border: 1.5px solid rgba(27, 32, 37, 0.22);
    border-radius: 50%;
  }

  .mw-method:has(input:checked) .mw-method-check {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
    border-color: transparent;
  }

  .mw-result-hero {
    padding: 6px 8px 20px;
    text-align: center;
  }

  .mw-result-ring {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
    border-radius: 50%;
  }

  .mw-result-hero h3 {
    margin: 0;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 19px;
  }

  .mw-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 6px 6px 14px;
    background: #ffffff;
    border: 1px solid rgba(27, 32, 37, 0.14);
    border-radius: 10px;
  }

  .mw-link-box input {
    flex: 1;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.5px;
  }

  .mw-link-box button {
    padding: 10px 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cb-cyan), var(--cb-jade));
    border: 0;
    border-radius: 7px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
  }

  .mw-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px;
    color: #fff;
    background: #2149c2;
    border: 0;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
  }

  .mw-again {
    display: block;
    width: 100%;
    padding: 8px;
    color: var(--text-muted);
    background: none;
    border: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: center;
  }

  .mw-open-payment {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 14px;
    color: #fff;
    background: #2149c2;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .mw-bottombar {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--cb-cream);
    border-top: 1px solid rgba(27, 32, 37, 0.08);
  }

  .mw-btn {
    flex: 1;
    padding: 15px;
    border: 0;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
  }

  .mw-btn-ghost {
    flex: 0 0 88px;
    color: var(--ink);
    background: rgba(27, 32, 37, 0.06);
  }

  .mw-btn-primary {
    color: #ffffff;
    background: var(--blue);
    box-shadow: 0 14px 30px -16px rgba(124, 111, 245, 0.7);
  }

  .mw-btn-primary:disabled {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Admin portal shell (/admin-4ehfs67txu, .../users, .../payments,
   .../requests) — shared chrome (topbar + section nav) around each admin
   page's own content. The dark charcoal topbar/nav continue the
   established operator identity so operators get a consistent
   "this is the ops area" signal after signing in, while the page body
   underneath remains a plain light dashboard rather than another branded
   hero card.
   ========================================================================== */

.admin-shell {
  display: flex;
  min-height: 100vh;
  background: var(--background);
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  width: 232px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(165deg, #14161a, #23252f 60%, #0b0c0e);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width 0.18s ease;
}

.admin-sidebar.collapsed { width: 76px; }

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 22px 22px 18px;
  color: #fff;
  background: none;
  border: none;
  font-size: 14.5px;
  font-weight: 900;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.admin-sidebar-brand:hover { background: rgba(255, 255, 255, 0.05); }

.admin-sidebar-brand .brand-mark {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.15s ease;
}

.admin-sidebar-brand:hover .brand-mark { background: rgba(255, 255, 255, 0.18); }

/* The agent workspace's primary action — generating a payment link — gets
   its own filled button above the nav list instead of sitting in it as a
   plain link, so it reads as the thing an agent is most likely here to do. */
.agent-generate-link-wrap {
  padding: 4px 12px 10px;
}

.agent-generate-link {
  display: flex;
  align-items: center;
  /* Left-aligned, not centered: the icon+label line up with the nav links'
     own icon+label column below (12px wrap padding + 12px link padding),
     rather than floating centered in the pill while everything under it
     hugs the left edge. */
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 14px 11px 12px;
  color: #fff;
  background: var(--blue);
  border-radius: 10px;
  box-shadow: 0 14px 26px -14px rgba(99, 102, 241, 0.7);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.agent-generate-link:hover {
  background: #4f52e0;
  box-shadow: 0 18px 32px -14px rgba(99, 102, 241, 0.82);
  transform: translateY(-1px);
}

.agent-generate-link:active { transform: translateY(0); }

.admin-sidebar.collapsed .agent-generate-link-wrap { padding: 4px 10px 10px; }
.admin-sidebar.collapsed .agent-generate-link { justify-content: center; padding: 11px; }
.admin-sidebar.collapsed .agent-generate-link span { display: none; }

.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 10px 12px;
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.admin-sidebar-link svg { flex-shrink: 0; opacity: 0.85; }

.admin-sidebar-link:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar-link.active {
  color: #fff;
  background: rgba(99, 102, 241, 0.16);
  border-left-color: var(--blue);
}

.admin-sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-session {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.admin-session-email {
  width: 100%;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-sidebar-footer .admin-topbar-signout {
  align-self: flex-start;
}

.admin-sidebar.collapsed .admin-sidebar-brand {
  justify-content: center;
  padding: 22px 0 18px;
}

.admin-sidebar.collapsed .admin-sidebar-link {
  justify-content: center;
  padding: 10px;
}

.admin-sidebar.collapsed .admin-sidebar-brand span:not(.brand-mark),
.admin-sidebar.collapsed .admin-sidebar-link span,
.admin-sidebar.collapsed .admin-topbar-signout span,
.admin-sidebar.collapsed .admin-session:not(.admin-session-trigger) {
  display: none;
}

/* .admin-session-trigger (the workspace account-menu button in
   AgentLayout) stays reachable when collapsed — unlike the plain
   admin-session display in AdminLayout, it's the only way to reach Log Out,
   so it collapses to an icon instead of disappearing. */
.admin-session-trigger {
  width: 100%;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.admin-session-trigger:hover { background: rgba(255, 255, 255, 0.05); }

.admin-session-avatar { display: none; }

.admin-sidebar.collapsed .admin-session-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.admin-sidebar.collapsed .admin-session-trigger .admin-topbar-badge,
.admin-sidebar.collapsed .admin-session-trigger .admin-session-email {
  display: none;
}

.admin-sidebar.collapsed .admin-session-trigger .admin-session-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.admin-sidebar.collapsed .admin-sidebar-footer {
  flex-direction: column;
  gap: 12px;
  padding: 16px 10px;
}

.admin-topbar-badge {
  padding: 4px 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-topbar-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-topbar-signout:hover { color: #fff; }

/* Workspace account menu (AgentLayout's AccountMenu) — opened from the
   sidebar footer. Same dimmed-backdrop-plus-card treatment as
   AdminTables.jsx's row-detail/verification-image modals, portalled to
   <body> for the same reason (position:fixed needs to escape any
   backdrop-filter ancestor to actually cover the viewport), but anchored
   near the bottom-left — where its trigger always sits, sidebar collapsed
   or not — instead of centered, since this is a small identity menu. */
.agent-account-menu-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

.agent-account-menu-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(320px, calc(100vw - 40px));
  padding: 20px;
  color: var(--text);
  background: #f6f7fb;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(9, 10, 14, 0.35);
}

.agent-account-menu-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.agent-account-menu-identity strong {
  font-size: 17px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.agent-account-menu-id {
  color: #61718d;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.agent-account-menu-divider {
  height: 1px;
  background: rgba(21, 48, 117, 0.1);
}

.agent-account-menu-signedin {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.agent-account-menu-signedin span {
  color: #61718d;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.agent-account-menu-signedin strong {
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.agent-account-menu-error {
  margin: 0;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 750;
}

.agent-account-menu-reset,
.agent-account-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.agent-account-menu-reset {
  color: #173282;
  background: #fff;
  border: 1px solid rgba(21, 48, 117, 0.16);
}

.agent-account-menu-reset:hover { background: #f0f3fb; }
.agent-account-menu-reset:disabled { color: #9aa5ba; cursor: not-allowed; }

.agent-account-menu-logout {
  color: #fff;
  background: #112c7a;
  border: 0;
}

.agent-account-menu-logout:hover { background: #0c2160; }

.admin-nav-tile {
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-nav-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(10, 33, 192, 0.3);
}

.admin-content {
  flex: 1;
  min-width: 0;
}

.admin-main {
  width: 100%;
  margin: 0 auto;
  padding: 26px 28px 40px;
  transition: width 0.18s ease;
}

.admin-header { margin-bottom: 16px; }

/* Sub-pages reached via a header action link (Export history, Payment/Payout
   summary) rather than the sidebar's own nav — there's no sidebar item to
   click back to the page that led here, so this stands in for it. Uses
   window.history.back() (see AdminLayout.jsx/AgentLayout.jsx), same pattern
   as Login.jsx's own back button, since these can be reached from more than
   one parent page and a fixed href can't cover both. */
.admin-header-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}

.admin-header-back:hover { color: var(--text); }

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

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-header h1 {
  font-size: 24px;
  font-weight: 900;
}

.admin-header p.subtitle { margin-top: 6px; }

.admin-mobile-row-detail { display: none; }

/* Confirmation popup after the Payments table's "Sync status" reconciliation
   call. It reuses the row-detail modal shell (.admin-mobile-row-detail-*, see
   the block much further down) so it reads as the same family of dialog —
   these rules only narrow the panel and add the footer action it has always
   carried. */
.admin-sync-modal-panel { max-width: 460px; }

.admin-sync-modal-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
}

.admin-sync-modal-foot button {
  min-height: 36px;
  padding: 0 20px;
  color: #fff;
  background: #112c7a;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s ease;
}

.admin-sync-modal-foot button:hover { background: #0d2262; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Users is a focused operational workspace: account provisioning stays in
   view while sign-in/support actions form one compact, adjacent health area.
   The grid only appears on AdminUsers, so these rules do not affect the
   financial/admin-detail pages that reuse the generic admin primitives. */
.users-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.users-create-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: 12px 28px;
  padding: 20px 24px;
  border-color: rgba(99, 102, 241, 0.22);
}

.users-create-card h2 { font-size: 19px; }

.users-card-head { min-width: 0; }

.users-card-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.users-create-card > .subtitle {
  margin-top: 7px;
  line-height: 1.55;
}

.users-create-card > .subtitle,
.users-create-card > .alert,
.users-create-card > .admin-key-stack,
.users-create-card > .primary { grid-column: 2; }

.users-provision-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 7px 14px;
  min-width: 0;
}

.users-provision-form label[for="email"] { grid-column: 1; grid-row: 1; }
.users-provision-form #email { grid-column: 1; grid-row: 2; }
.users-provision-form label[for="fullName"] { grid-column: 2; grid-row: 1; }
.users-provision-form #fullName { grid-column: 2; grid-row: 2; }

.users-provision-form .admin-checkbox-row { grid-column: 1; grid-row: 3; }
.users-provision-form .primary { grid-column: 2; grid-row: 3; justify-self: end; min-width: 160px; }

.users-create-card .admin-checkbox-row {
  padding: 12px;
  background: rgba(99, 102, 241, 0.055);
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: var(--radius-sm);
}

.users-create-card .admin-checkbox-row input { flex: 0 0 auto; }

.users-create-card .primary { width: 100%; margin-top: 20px; }
.users-provision-form .primary { width: auto; margin-top: 0; }

.users-action-cluster {
  grid-column: 1 / -1;
  padding: 16px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.users-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.users-group-head h2 { margin: 0; font-size: 17px; }

.users-group-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.users-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.users-action-card {
  display: grid;
  grid-template-columns: minmax(215px, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  column-gap: 26px;
  row-gap: 4px;
  min-width: 0;
  padding: 14px 18px;
}

.users-action-card h2 { margin: 0; font-size: 16px; }
.users-action-card .users-card-head { grid-column: 1; grid-row: 1; }

.users-action-card p.subtitle {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.users-compact-form {
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  gap: 6px;
  margin: 0;
}

.users-action-card .users-compact-form > label,
.users-action-card .users-compact-field > label,
.users-field-label {
  margin: 0 !important;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-inline-control {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.users-inline-control input {
  min-width: 0;
  flex: 1;
  width: auto;
  height: 36px;
  margin: 0;
}

.users-inline-control button {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding-inline: 14px;
  margin: 0 !important;
  white-space: nowrap;
}

.users-compact-form > .alert { margin: 2px 0; }
.users-compact-form > .primary {
  justify-self: end;
  width: auto;
  min-height: 36px;
  padding-inline: 16px;
  margin: 2px 0 0 !important;
}

.users-commission-form {
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  grid-template-columns: minmax(200px, 1.25fr) minmax(145px, 0.9fr) 104px auto;
  align-items: end;
  gap: 8px;
  margin: 0;
}

.users-action-card > .alert { grid-column: 1 / -1; grid-row: 3; }

.users-compact-field { min-width: 0; }
.users-action-card .users-compact-field > label,
.users-field-label { display: block; margin-bottom: 6px !important; }

.users-compact-field input,
.users-method-select-toggle,
.users-rate-input {
  width: 100%;
  height: 36px;
  margin: 0;
}

.users-commission-form > .primary {
  grid-column: auto;
  justify-self: end;
  width: auto;
  min-height: 36px;
  padding-inline: 16px;
  margin: 0 !important;
  white-space: nowrap;
}

.users-rate-input { position: relative; }
.users-rate-input input { padding: 0 28px 0 11px; }
.users-rate-input input::-webkit-outer-spin-button,
.users-rate-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.users-rate-input input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.users-rate-input span {
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
}

.users-method-select { position: relative; }
.users-commission-card { position: relative; }
.users-commission-card:has(.users-method-select.open) { z-index: 40; }

.users-method-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 0 11px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.users-method-select-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-method-select-toggle svg { flex-shrink: 0; color: var(--text-muted); transition: transform 0.15s ease; }
.users-method-select.open .users-method-select-toggle svg { transform: rotate(180deg); }
.users-method-select-toggle:hover { border-color: rgba(46, 42, 107, 0.32); }
.users-method-select.open .users-method-select-toggle {
  background: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}

.users-method-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  overflow: hidden;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.users-method-select-option {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.users-method-select-option svg { visibility: hidden; flex-shrink: 0; }
.users-method-select-option:hover { background: rgba(99, 102, 241, 0.06); }
.users-method-select-option.active { color: var(--blue); background: rgba(99, 102, 241, 0.08); font-weight: 800; }
.users-method-select-option.active svg { visibility: visible; }

.users-danger-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(215px, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 6px 26px;
  padding: 14px 18px;
  border-color: rgba(179, 38, 30, 0.25);
}

.users-danger-card h2 { margin: 0; font-size: 17px; }
.users-danger-card .users-card-head { grid-column: 1; grid-row: 1; }

.users-danger-card > .subtitle,
.users-danger-card > .alert,
.users-danger-form { grid-column: 2; }

.users-danger-card > .subtitle { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }

.users-danger-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 6px 10px;
}

.users-danger-form > label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-danger-form > input {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 36px;
  margin: 0;
}

.users-danger-controls {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}

.users-danger-controls .button-secondary-small { margin: 0; }

.users-health-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px 24px;
  min-height: 126px;
  padding: 18px 22px;
}

.users-health-card h2 { margin: 0; }

.users-health-card p.subtitle {
  max-width: 46ch;
  margin-top: 6px;
  line-height: 1.45;
}

.users-health-card form,
.users-health-card > input,
.users-health-card > div { min-width: 0; }

/* Each existing support action uses its native form; grid placement makes the
   action inputs and confirmation button read as a single scan-friendly row. */
.users-health-card form {
  display: contents;
}

.users-health-card form > label,
.users-health-card > label {
  grid-column: 1;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.users-health-card form > label + input,
.users-health-card > label + input {
  grid-column: 2;
  width: min(100%, 270px);
  height: 38px;
  margin: 0;
}

.users-health-card form > label + select,
.users-health-card > label + select {
  grid-column: 2;
  width: min(100%, 270px);
  height: 38px;
  margin: 0;
  padding: 0 36px 0 12px;
  color: var(--text);
  background-color: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.users-health-card form > button,
.users-health-card > div > button {
  align-self: center;
  justify-self: end;
  margin: 0 !important;
}

.users-health-card form > .secondary {
  grid-column: 2;
  justify-self: start;
}

.users-health-card form > .primary {
  grid-column: 2;
  width: auto;
  padding-inline: 16px;
}

.users-health-card form > .alert {
  grid-column: 1 / -1;
  margin: -3px 0 0;
}

.users-health-card form > label + input + .secondary + .alert + .primary,
.users-health-card form > label + input + .secondary + .primary { grid-column: 2; }

.users-health-card:not(.users-health-start) {
  min-height: 110px;
}

.users-health-card:not(.users-health-start) form > .primary {
  grid-column: 2;
  justify-self: end;
}

.users-health-card:not(.users-health-start) form > label + input {
  grid-column: 2;
}

.admin-commission-rates > div:first-child { color: var(--text); }
.admin-commission-rates strong { font-weight: 800; }

.users-health-danger {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 270px);
}

.users-health-danger > div[style] {
  grid-column: 2;
  justify-content: flex-end;
  margin-top: 0 !important;
}

.users-health-danger > p.subtitle { grid-column: 1 / -1; }

.users-directories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 26px;
}

/* Grid items default to min-width:auto, which refuses to shrink below the
   table's intrinsic width — so the Administrators/Users directory tables
   would push the whole page wider instead of scrolling inside their own
   .admin-table-scroll (the plain block-flow OrdersTable/PayoutTable pages
   don't hit this). min-width:0 lets the scroll container do its job. */
.users-directory-section {
  margin-top: 0;
  min-width: 0;
}

.users-directory-section .admin-section-head { align-items: flex-end; }

.users-directory-section .admin-section-head p {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.users-directory-section .admin-section-head .count {
  padding: 5px 9px;
  color: var(--blue);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 999px;
}

/* Role-specific directories are intentionally quiet: the section title
   supplies the role context, so the table can devote that space to useful
   account state instead of repeating a Role badge on every row. */
.users-directory-card {
  padding: 0;
  overflow: hidden;
}

.users-directory-card .admin-table-toolbar {
  border-radius: 0;
}

.admin-card { padding: 20px 22px; }

.admin-card h2 { font-size: 16px; }

.admin-card p.subtitle { max-width: 48ch; }

.admin-card label:first-of-type { margin-top: 22px; }

.admin-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0 !important;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.admin-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.admin-key-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.admin-card .primary { margin-top: 26px; }


/* Compact stat strip — one card, N segments divided by hairlines, instead
   of each stat being its own full-size padded card (see StatBar in
   AdminTables.jsx). Overrides .admin-card's own padding since each
   .admin-stat segment carries its own, tighter padding instead. */
.admin-stats {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 20px;
}

.admin-stat {
  flex: 1 1 130px;
  padding: 10px 18px;
  border-left: 1px solid var(--line);
}

.admin-stat:first-child { border-left: none; }

.admin-stat .k {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-stat .v {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.admin-stat .k.tone-good { color: #1c7a4d; }
.admin-stat .k.tone-bad { color: #b3261e; }
.admin-stat .k.tone-pending { color: #9a6b00; }

.admin-stat-sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
}

@media (max-width: 560px) {
  .admin-stats { flex-direction: column; }
  .admin-stat { border-left: none; border-top: 1px solid var(--line); }
  .admin-stat:first-child { border-top: none; }
}

.admin-section { margin-top: 22px; }

.admin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-section-head h2 {
  font-size: 17px;
  font-weight: 800;
}

.admin-section-head .count {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
}

/* No inner card around tables: strip the .glass fill/border/shadow so the
   table reads as part of the page. Structure comes from the internal rules
   (toolbar border-bottom, row borders, pagination border-top). */
.admin-table-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.admin-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.admin-mobile-filter-toggle { display: none; }

.admin-table-filter-controls { display: contents; }

.admin-table-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 170px;
  height: 36px;
  padding: 0 12px;
  color: var(--text-muted);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
}

.admin-table-search svg { flex-shrink: 0; }

.admin-table-search input[type="text"] {
  width: auto;
  flex: 1;
  height: auto;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.admin-table-search input[type="text"]:focus {
  background: transparent;
  box-shadow: none;
}

/* Keep the search field's placeholder and selected text in the admin
   palette. The global cyan selection colour was too harsh inside a quiet
   filter control. */
.admin-table-search input[type="text"]::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.admin-table-search input[type="text"]::selection {
  color: #271744;
  background: rgba(167, 139, 250, 0.28);
}

/* Custom dropdown (Select component) — replaces every native <select> used
   for a filter (Status/Payment Method/Agent/2FA/etc.) so the open menu is a
   styled card matching this design system, not the browser's own unstyled
   option list. */
.admin-select { position: relative; }

.admin-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  color: var(--text);
  background-color: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-select-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-select-toggle svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.admin-select.open .admin-select-toggle svg { transform: rotate(180deg); }

.admin-select-toggle:hover { border-color: rgba(46, 42, 107, 0.32); }

.admin-select.open .admin-select-toggle {
  background-color: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}

/* Portalled to <body> (see useFloatingMenu in AdminTables.jsx) rather than
   positioned relative to .admin-select, so a card that clips its own
   overflow (e.g. .users-directory-card, for its rounded corners) can't cut
   this off — position:fixed with top/left set inline from the trigger's
   own getBoundingClientRect() takes its place. */
.admin-select-menu {
  position: fixed;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 70;
}

.admin-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.admin-select-option:hover { background: rgba(99, 102, 241, 0.06); }

.admin-select-option.active {
  color: var(--blue);
  font-weight: 800;
  background: rgba(99, 102, 241, 0.08);
}

.admin-select-option-check {
  flex-shrink: 0;
  visibility: hidden;
}

.admin-select-option.active .admin-select-option-check { visibility: visible; }

.admin-table-toolbar-clear {
  height: 36px;
  padding: 0 10px;
  color: var(--blue);
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-table-toolbar-clear:hover { text-decoration: underline; }

.admin-table-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.admin-table-toolbar-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-table-subtext {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-filter-panel {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.admin-filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.admin-filter-field {
  display: flex;
  flex-direction: column;
  /* Fixed, non-flexing basis so every filter control in the panel is exactly
     the same width; flex-wrap drops them onto the next row as needed. */
  flex: 0 0 200px;
  gap: 6px;
  min-width: 0;
}

/* The date-range field packs two date inputs + the quick-range picker, each
   sized to the same 200px as a standalone field (see .admin-filter-daterange
   below), so it just hugs their combined width rather than a fixed cap. */
.admin-filter-field-wide { flex: 0 0 auto; min-width: 0; }

.admin-filter-field label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-filter-field input[type="text"],
.admin-filter-field input[type="date"] {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-filter-field input[type="text"]:focus,
.admin-filter-field input[type="date"]:focus {
  background: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}


.admin-filter-daterange {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-filter-daterange input[type="date"] { flex: 0 0 200px; width: 200px; min-width: 0; padding: 0 12px; }

.admin-filter-daterange span { color: var(--text-muted); font-size: 12px; }

.admin-filter-presets {
  flex: 0 0 200px;
}

.admin-filter-presets .admin-select-toggle { height: 36px; font-size: 12.5px; }

/* Scroll-shadow affordance: a subtle dark fade at whichever edge still has
   more columns to reveal. The trick is two pairs of gradients — an opaque
   "mask" pair attached to the scrolling content (background-attachment:
   local) sitting right at the content's start/end edges, over a shadow
   pair attached to the viewport (attachment: scroll) sitting at the
   container's edges. When scrolled all the way to one side, that side's
   content-attached mask lines up exactly over that side's shadow and
   hides it; scrolling away from an edge slides its mask clear, revealing
   the shadow underneath — so a shadow only ever shows on the side there's
   still something to scroll to. */
.admin-table-scroll {
  overflow-x: auto;
  background: var(--card);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 12px 20px;
  text-align: left;
  white-space: nowrap;
}

/* Amount/percent/count columns line up their digits on the right, same as
   the stat tiles above each table — everything else (names, ids, dates,
   status pills) stays left-aligned. */
.admin-table th.admin-td-numeric,
.admin-table td.admin-td-numeric {
  text-align: right;
}

.admin-th-sortable-inner.admin-td-numeric {
  justify-content: flex-end;
}

.admin-table th {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.admin-table td {
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.admin-table tbody tr:last-child td { border-bottom: 0; }

.admin-table tbody tr:hover td { background: rgba(99, 102, 241, 0.05); }

/* Empty spacer rows that pad a short page out to a full one (see
   TableFillerRows) — they hold the body height constant across pages but
   must not read as real data: no hover, no row separators. */
.admin-table-filler-row td {
  border-bottom-color: transparent;
}

.admin-table-filler-row:hover td { background: transparent; }

.admin-table th.admin-th-sortable {
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.admin-th-sortable-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 20px;
}

.admin-th-sortable:hover { color: var(--text); background: rgba(99, 102, 241, 0.06); }

.admin-sort-icon path {
  fill: rgba(119, 121, 133, 0.35);
  transition: fill 0.12s ease;
}

.admin-sort-icon path.active { fill: var(--blue); }

.admin-column-picker { position: relative; }

.admin-column-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-column-picker-toggle:hover { border-color: rgba(46, 42, 107, 0.32); }

/* Portalled to <body> (see useFloatingMenu in AdminTables.jsx) — see
   .admin-select-menu's comment above for why. */
.admin-column-picker-menu {
  position: fixed;
  width: 250px;
  max-height: 460px;
  overflow-y: auto;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 70;
}

.admin-column-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.admin-column-picker-head span {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-column-picker-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-column-picker-head button {
  color: var(--blue);
  background: none;
  border: none;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-column-picker-head button:hover { text-decoration: underline; }

.admin-column-picker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  margin: 2px 2px 6px;
  color: var(--text-muted);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
}

.admin-column-picker-search svg { flex-shrink: 0; }

.admin-column-picker-search input[type="text"] {
  width: auto;
  flex: 1;
  height: auto;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.admin-column-picker-search input[type="text"]:focus {
  background: transparent;
  box-shadow: none;
}

.admin-column-picker-empty {
  padding: 10px 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.admin-column-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.admin-column-picker-item:hover { background: rgba(99, 102, 241, 0.06); }

.admin-column-picker-item input { accent-color: var(--blue); }

.admin-column-picker-templates {
  margin-top: 6px;
  padding: 8px 6px 2px;
  border-top: 1px solid var(--line);
}

.admin-column-picker-templates-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-column-picker-template-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.admin-column-picker-template-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}

.admin-column-picker-template-row:hover { background: rgba(99, 102, 241, 0.06); }

.admin-column-picker-template-apply {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 6px;
  color: var(--text);
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.admin-column-picker-template-row:hover .admin-column-picker-template-apply { color: var(--blue); }

.admin-column-picker-template-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--text-faint);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.admin-column-picker-template-delete:hover { color: var(--danger); background: var(--danger-bg); }

.admin-column-picker-template-save {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-column-picker-template-save input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.admin-column-picker-template-save button {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-column-picker-template-save button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-pagination {
  display: flex;
  align-items: center;
  /* Page controls, rows-per-page, and the count all sit together on the
     right edge — one aligned group, consistent across every table, instead
     of a lone page control stranded on the far left when a table only has a
     page or two. */
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}

.admin-pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-pagination-arrow,
.admin-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.16);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-pagination-arrow:hover:not(:disabled),
.admin-pagination-page:hover:not(.active) {
  border-color: rgba(46, 42, 107, 0.32);
}

.admin-pagination-arrow:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-pagination-page.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.admin-pagination-ellipsis {
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.admin-pagination-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-pagination-rows {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-pagination-rows select {
  height: 28px;
  padding: 0 22px 0 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--text);
  background-color: var(--field);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23777985' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 5px;
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-pagination-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-table-empty {
  padding: 34px 20px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.admin-table td.admin-table-empty {
  padding: 34px 20px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  white-space: normal;
}

/* Overview financial summary --------------------------------------------- */
.financial-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
}

.admin-form-field {
  display: grid;
  gap: 6px;
  min-width: 160px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
}

.admin-form-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.financial-period .primary {
  align-self: flex-end;
}

.financial-period-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.financial-period p,
.financial-section-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.financial-period-options {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.financial-period-options button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.financial-period-options button:hover { color: var(--text); }

.financial-period-options button.active {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.24);
}

.financial-section { margin-top: 26px; }

.financial-section-head { align-items: flex-start; }

.financial-section-head h2 span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.financial-stats { margin-bottom: 12px; }
.financial-table-card { margin: 0; }

.financial-table th,
.financial-table td { white-space: nowrap; }

.financial-table td:nth-child(n + 3),
.financial-table th:nth-child(n + 3) { text-align: right; }

.financial-unavailable { color: var(--text-muted); }
.financial-net { color: #1c7a4d; font-weight: 800; }

/* Daily merchant / agent summaries on the payment and payout pages. */
.daily-summary-head { align-items: flex-start; }

.daily-summary-head p,
.daily-summary-note {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.daily-summary-switch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 3px;
  padding: 3px;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.daily-summary-switch button {
  min-height: 30px;
  padding: 0 11px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.daily-summary-switch button:hover { color: var(--text); }

.daily-summary-switch button.active {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.24);
}

.daily-summary-data-table th,
.daily-summary-data-table td { white-space: nowrap; }

.daily-summary-data-table th:nth-child(n + 4),
.daily-summary-data-table td:nth-child(n + 4) { text-align: right; }

.daily-summary-settlement { color: #1c7a4d; font-weight: 800; }

.daily-summary-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.daily-summary-pagination button {
  min-height: 29px;
  padding: 0 10px;
  color: var(--blue);
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
}

.daily-summary-pagination button:disabled,
.daily-summary-table .admin-column-picker-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-section-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 2px;
  color: var(--blue);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-section-link:hover { text-decoration: underline; }

.admin-filter-scope {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 720px;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.admin-filter-scope strong { color: var(--text); font-weight: 800; }

.admin-filter-scope-icon {
  display: inline-flex;
  flex: 0 0 15px;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--blue);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-pill + .admin-pill { margin-left: 6px; }

.admin-pill-neutral { color: var(--text-muted); background: rgba(119, 121, 133, 0.12); }
.admin-pill-good { color: #1c7a4d; background: rgba(28, 122, 77, 0.13); }
.admin-pill-bad { color: #b3261e; background: rgba(179, 38, 30, 0.11); }
.admin-pill-pending { color: #9a6b00; background: rgba(154, 107, 0, 0.13); }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }

  .admin-sidebar-toggle { display: none; }

  .admin-sidebar.collapsed { width: 100%; }

  .admin-sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
  }

  .admin-sidebar-brand { padding: 14px 16px; flex-shrink: 0; }

  .admin-sidebar-nav {
    flex-direction: row;
    flex: none;
    padding: 8px;
  }

  .admin-sidebar-link { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .admin-sidebar-link.active { border-left-color: transparent; border-bottom-color: var(--blue); }

  .admin-sidebar-footer {
    flex-shrink: 0;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 16px;
  }

  .admin-grid,
  .users-workspace { grid-template-columns: 1fr; }
  .users-create-card {
    grid-row: auto;
    grid-template-columns: 1fr;
  }
  .users-create-card > .subtitle,
  .users-create-card > .alert,
  .users-create-card > .admin-key-stack,
  .users-create-card > .primary { grid-column: 1; }
  .users-provision-form { grid-template-columns: 1fr; }
  .users-provision-form label[for="email"],
  .users-provision-form #email,
  .users-provision-form label[for="fullName"],
  .users-provision-form #fullName,
  .users-provision-form .primary { grid-column: 1; }
  .users-provision-form label[for="email"],
  .users-provision-form #email,
  .users-provision-form label[for="fullName"],
  .users-provision-form #fullName,
  .users-provision-form .admin-checkbox-row,
  .users-provision-form .primary { grid-row: auto; }
  .users-provision-form .primary { justify-self: stretch; }
  .users-group-head { align-items: flex-start; flex-direction: column; }
  .users-action-grid { grid-template-columns: 1fr; }
  .users-action-card { grid-template-columns: 1fr; gap: 8px; }
  .users-action-card .users-card-head,
  .users-action-card p.subtitle,
  .users-compact-form,
  .users-commission-form,
  .users-action-card > .alert { grid-column: 1; grid-row: auto; }
  .users-action-card p.subtitle { margin: 0; }
  .users-commission-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .users-commission-email { grid-column: 1 / -1; }
  .users-commission-form > .primary { grid-column: 1 / -1; }
  .users-danger-card { grid-template-columns: 1fr; }
  .users-danger-card > .subtitle,
  .users-danger-card > .alert,
  .users-danger-form { grid-column: 1; }
  .users-danger-form { grid-template-columns: minmax(0, 1fr) auto; }
  .users-health-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .users-health-card form > label,
  .users-health-card > label,
  .users-health-card form > label + input,
  .users-health-card > label + input,
  .users-health-card form > .secondary,
  .users-health-card form > .primary,
  .users-health-danger > div[style] { grid-column: 1; }
  .users-health-card form > label + input,
  .users-health-card > label + input,
  .users-health-card form > label + select,
  .users-health-card > label + select { width: 100%; }
  .users-health-card form > button,
  .users-health-card > div > button { justify-self: start; }
  .users-health-danger { grid-template-columns: 1fr; }
  .admin-main { padding: 28px 18px 48px; }
  .admin-table th,
  .admin-table td { padding: 10px 14px; font-size: 12px; }

  .admin-table-toolbar { padding: 12px 14px; }
  .admin-table-search { flex-basis: 100%; }
  .admin-table-toolbar-right { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }

  .admin-filter-panel { padding: 12px 14px; }
  .admin-filter-field { flex: 1 1 calc(50% - 8px); }
  .admin-filter-field-wide { flex: 1 1 100%; min-width: 0; }
  .admin-pagination { justify-content: center; }
  .admin-pagination-meta { flex-basis: 100%; justify-content: center; }

  .financial-period { align-items: flex-start; flex-direction: column; }
  .daily-summary-head { flex-direction: column; }
  .daily-summary-pagination { justify-content: center; }
  .admin-section-head { align-items: flex-start; }
  .admin-section-actions { align-items: flex-end; flex-direction: column; gap: 4px; }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .users-action-card { grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr); }
  .users-commission-form { grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.9fr) 72px; }
  .users-commission-form > .primary { grid-column: 1 / -1; }
  .users-danger-form { grid-template-columns: minmax(0, 1fr); }
  .users-danger-controls { grid-column: 1; grid-row: 3; }
}

@media (max-width: 520px) {
  .users-inline-control { align-items: stretch; flex-direction: column; }
  .users-inline-control button { width: 100%; }
  .users-commission-form { grid-template-columns: 1fr; }
  .users-commission-email,
  .users-commission-form > .primary { grid-column: 1; }
  .users-danger-form { grid-template-columns: 1fr; }
  .users-danger-controls { grid-column: 1; grid-row: 3; flex-wrap: wrap; white-space: normal; }
}

@media (max-width: 560px) {
  .admin-filter-daterange { flex-wrap: wrap; }
  .admin-filter-daterange input[type="date"] { flex: 1 1 calc(50% - 10px); width: auto; min-width: 0; }
  .admin-filter-presets { flex: 1 1 100%; }
}

/* Mobile admin navigation -------------------------------------------------
   The desktop sidebar previously became one wide, horizontally-scrollable
   row on a phone. The primary destinations were therefore easy to miss and
   account controls competed with them for the same narrow strip. Keep the
   account context in a compact sticky header and put every destination in a
   fixed, labelled bottom bar where it is reachable with a thumb. No routes
   or data behavior change here; these are the existing links in a clearer
   small-screen layout. */
@media (max-width: 900px) {
  .admin-shell {
    display: block;
    min-height: 100dvh;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .admin-sidebar,
  .admin-sidebar.collapsed {
    position: sticky;
    z-index: 30;
    top: 0;
    width: 100%;
    min-height: 58px;
    height: 58px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    background: linear-gradient(110deg, #14161a, #23252f 72%, #171820);
    box-shadow: 0 3px 14px rgba(9, 10, 14, 0.18);
  }

  .admin-sidebar-brand,
  .admin-sidebar.collapsed .admin-sidebar-brand {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    padding: 12px 16px;
    cursor: default;
  }

  .admin-sidebar-brand .brand-mark { flex: 0 0 auto; }

  .admin-sidebar.collapsed .admin-sidebar-brand span:not(.brand-mark),
  .admin-sidebar.collapsed .admin-sidebar-link span,
  .admin-sidebar.collapsed .admin-topbar-signout span {
    display: inline;
  }

  /* display:flex with each link at flex:1 (below) so the bar always divides
     evenly across however many links a given nav has (6 for admin, 7 for
     agent) — a hardcoded `repeat(5, ...)` grid here previously wrapped
     whichever links didn't fit into 5 columns onto a hidden second row that
     spilled out of this bar's fixed height (overflow: visible) and
     overlapped the page content underneath it. */
  .admin-sidebar-nav {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: flex;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    gap: 2px;
    overflow: visible;
    background: rgba(20, 22, 26, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -6px 20px rgba(9, 10, 14, 0.14);
    backdrop-filter: blur(12px);
  }

  .admin-sidebar-link,
  .admin-sidebar.collapsed .admin-sidebar-link {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px 3px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.64);
    border: 0;
    border-radius: 8px;
    text-align: center;
  }

  .admin-sidebar-link svg { width: 18px; height: 18px; }

  .admin-sidebar-link span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-sidebar-link:hover { background: rgba(255, 255, 255, 0.06); }

  .admin-sidebar-link.active {
    color: #fff;
    background: rgba(99, 102, 241, 0.24);
    border: 0;
    box-shadow: inset 0 -2px 0 var(--blue);
  }

  .admin-sidebar-footer,
  .admin-sidebar.collapsed .admin-sidebar-footer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 9px 14px 9px 8px;
    border: 0;
  }

  .admin-sidebar.collapsed .admin-session { display: flex; }
  .admin-session { gap: 0; }
  .admin-session-email { display: none; }
  .admin-topbar-badge { padding: 4px 7px; font-size: 9px; }
  .admin-sidebar-footer .admin-topbar-signout { align-self: center; }
  .admin-topbar-signout { min-height: 36px; padding: 0 2px; }

  .admin-main { padding: 22px 16px 30px; }
  .admin-header { margin-bottom: 18px; }
  .admin-header h1 { font-size: 23px; line-height: 1.15; }
  .admin-header p.subtitle { line-height: 1.5; }

  .admin-table-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .admin-table-toolbar-right {
    justify-content: space-between;
    gap: 8px;
  }

  .admin-section-head { gap: 8px; }
}

@media (max-width: 600px) {
  .admin-main { padding-inline: 14px; }
  .admin-card { padding: 16px; }
  .admin-table-card { padding: 0; }
  .admin-section { margin-top: 20px; }

  .admin-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
  }

  .admin-stat {
    min-width: 0;
    padding: 13px 14px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .admin-stat:first-child { border-top: 0; border-left: 0; }
  .admin-stat:nth-child(2) { border-top: 0; }
  .admin-stat:nth-child(odd) { border-left: 0; }
  .admin-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .admin-stat .v { font-size: 17px; overflow-wrap: anywhere; }

  .admin-section-head,
  .daily-summary-head {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-section-actions {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .daily-summary-switch,
  .financial-period-options { align-self: flex-start; }

  .admin-filter-field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .admin-filter-field input[type="text"],
  .admin-filter-field input[type="date"],
  .admin-select-toggle,
  .admin-table-search { height: 42px; }

  .admin-table-toolbar-clear { min-height: 42px; }
  .admin-pagination { padding: 12px 14px; }
  .admin-pagination-pages { max-width: 100%; overflow-x: auto; }
  .admin-pagination-meta { gap: 10px; }
}

@media (max-width: 380px) {
  .admin-sidebar-brand,
  .admin-sidebar.collapsed .admin-sidebar-brand { padding-left: 12px; padding-right: 8px; }
  .admin-sidebar-footer,
  .admin-sidebar.collapsed .admin-sidebar-footer { gap: 6px; padding-right: 10px; }
  .admin-topbar-signout span { display: none; }
  .admin-topbar-signout { width: 32px; justify-content: center; }
  .admin-sidebar-link span { font-size: 9px; }
}

/* Users workspace on compact screens -------------------------------------
   The account actions contain more controls than the data-oriented admin
   pages.  Keep their form fields and destructive actions comfortably
   tappable as the two-column desktop workspace collapses. */
@media (max-width: 900px) {
  .users-workspace {
    gap: 16px;
    margin-top: 16px;
  }

  .users-action-cluster { padding: 14px; }
  .users-action-grid { gap: 12px; }
}

@media (max-width: 600px) {
  .users-create-card,
  .users-action-card,
  .users-danger-card { padding: 16px; }

  .users-create-card { gap: 14px; }
  .users-provision-form { gap: 8px; }
  .users-action-cluster { padding: 12px; }

  .users-group-head { gap: 5px; }
  .users-group-head p { line-height: 1.45; }

  .users-directories {
    gap: 20px;
    margin-top: 20px;
  }

  .users-directory-section .admin-section-head .count {
    align-self: flex-start;
  }

  .users-directory-card .admin-table-toolbar {
    gap: 8px;
    padding: 12px 14px;
  }

  /* Search already takes a full row at this breakpoint. Keep the two
     directory filters evenly sized beneath it instead of allowing their
     label length to dictate the layout. */
  .users-directory-card .admin-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .users-danger-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .users-danger-controls .button-secondary-small {
    justify-content: center;
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 420px) {
  .users-create-card,
  .users-action-card,
  .users-danger-card { padding: 14px; }

  .users-directory-card .admin-select { flex-basis: 100%; }
}

/* ---- Solid surface theme --------------------------------
   Keep CSS Grid for responsive layout, but remove the decorative grid and
   gradient treatments from every page surface.  Flat fills make the product
   feel calmer and keep content as the visual focus. */
body,
.page-auth-popup {
  background: #f3f1fb;
}

.page-detail {
  background: var(--background);
}

.auth-hero {
  background: #4338ca;
}

.auth-m-page {
  background: #1e1b4b;
}

.auth-m-head {
  background: #2e2a6b;
}

.pm-summary,
.ticket-card,
.pfm-header,
.request-detail-hero {
  background: #ffffff;
}

.pm-card-header {
  background: #eef1f7;
}

.request-detail-hero::after {
  background: none;
}

.page-checkout {
  background: var(--navy-deep);
}

.page-checkout .pm-card-header {
  background: #dde4f7;
}

/* PaymentSelect uses white header copy and progress controls.  Keep its
   operator header dark after the global solid-surface overrides above; without
   this scope the text blends into the pale generic checkout header. */
.page-checkout.page-generate-link .pm-card-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-deep) 100%);
  border-color: rgba(255, 255, 255, 0.14);
}

.page-checkout.page-generate-link .pm-card-header .pm-header-copy h1 {
  color: #ffffff;
}

.page-checkout.page-generate-link .pm-card-header .pm-header-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.page-checkout .glass,
.page-checkout .pm-card,
.page-checkout .form-card,
.page-checkout .result-card,
.pm-payment-panel {
  background: #ffffff;
}

/* Lift authentication panels off the light-purple canvas.  Both customer
   Sign In and Ops use .auth-shell; the compact mobile sign-in uses
   .auth-m-card. */
.auth-shell {
  box-shadow:
    0 24px 56px rgba(63, 48, 138, 0.20),
    0 6px 18px rgba(63, 48, 138, 0.10);
}

.auth-m-card {
  box-shadow:
    0 22px 48px rgba(63, 48, 138, 0.22),
    0 4px 14px rgba(63, 48, 138, 0.10);
}

/* Keep the typed values on white rather than the inherited pale-blue field
   fill, including when the browser has restored/autofilled a credential. */
.auth-m-card input[type="text"],
.auth-m-card input[type="email"],
.auth-m-card input[type="password"],
.auth-m-card input[type="tel"],
.auth-m-card input:focus,
.auth-m-card input:-webkit-autofill,
.auth-m-card input:-webkit-autofill:hover,
.auth-m-card input:-webkit-autofill:focus {
  background: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: var(--cb-ink);
}

@media (max-width: 900px) {
  body {
    background: linear-gradient(155deg, #ffffff 0%, #f4f0ff 48%, #ddceff 100%);
  }

  .auth-m-page {
    position: relative;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(155deg, #ffffff 0%, #f4f0ff 48%, #ddceff 100%) !important;
  }

  .auth-m-head {
    position: absolute;
    inset: 0 0 auto;
    min-height: 0;
    height: 42%;
    padding: 50px 28px;
    background: transparent !important;
  }

  .auth-m-head::before {
    color: #4338ca;
  }

  .auth-m-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(100% - 48px), 480px);
    margin: 0;
    padding: 30px 24px;
    /* Include the card padding in its responsive width so it preserves the
       page inset instead of overflowing to the viewport edges on phones. */
    box-sizing: border-box;
    border-radius: 20px;
    transform: translate(-50%, -50%);
  }

  .page-checkout {
    background: #f3efff;
  }
}

/* Phone-size refinements for the payment-link wizard ---------------------
   The wizard is a viewport-height flow, so these rules deliberately target
   the very narrow and short phone cases that do not get exercised by the
   tablet layout above.  They also guard long customer-entered values from
   widening the page and hiding the bottom action. */
@media (max-width: 640px) {
  .page.page-checkout,
  .page-checkout .pm-page,
  .mw-body,
  .mw-step,
  .mw-topbar-copy,
  .mw-summary-row,
  .mw-method-copy {
    min-width: 0;
  }

  .page.page-checkout {
    overflow-x: clip;
  }

  .mw-topbar-copy strong,
  .mw-topbar-copy small,
  .mw-summary-row b,
  .mw-method-name,
  .mw-method-meta {
    overflow-wrap: anywhere;
  }

  .mw-summary-row b,
  .mw-method-copy {
    min-width: 0;
  }

  .mw-summary-row b {
    max-width: 65%;
  }

  .mw-field .bank-combobox-menu {
    left: 0;
    right: 0;
    max-width: 100%;
  }

  .mw-bottombar {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 420px) {
  .mw-row2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .mw-bank-card,
  .mw-body {
    padding-inline: 14px;
  }

  .mw-topbar,
  .mw-rail-wrap {
    padding-inline: calc(14px + env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-right, 0px));
  }

  .mw-bottombar {
    gap: 8px;
    padding-inline: 14px;
  }

  .mw-btn-ghost {
    flex-basis: 76px;
  }

  .mw-docs-grid .pm-upload-file {
    max-width: 112px;
  }
}

@media (max-width: 640px) and (max-height: 680px) {
  .mw-topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }

  .mw-rail-wrap {
    padding-top: 9px;
    padding-bottom: 10px;
  }

  .mw-step-line {
    margin-bottom: 7px;
  }

  .mw-body {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .mw-bottombar {
    padding-top: 9px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .mw-btn {
    padding-block: 12px;
  }
}

/* One concise limit beside the Verification heading is clearer than
   repeating the same constraint on every upload row. */
.upload-limit-note {
  display: inline-block;
  margin-left: 8px;
  color: #78817d;
  font-family: inherit;
  font-size: 0.58em;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  vertical-align: middle;
}

/* Keep the admin shell tied to the visual viewport on phones. This prevents
   a retained desktop width from clipping the sticky header or the fixed
   five-item navigation bar after a device rotation or a browser resize. */
@media (max-width: 900px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .admin-shell,
  .admin-content,
  .admin-main {
    width: 100%;
    min-width: 0;
  }

  .admin-sidebar-nav {
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
  }

  .admin-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 13px;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(67, 56, 202, 0.2);
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
  }

  .admin-table-filter-controls {
    display: none;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-table-filter-controls.is-open { display: flex; }

  .admin-table-filter-controls .admin-select,
  .admin-table-filter-controls .admin-table-toolbar-clear {
    flex: 1 1 100%;
  }

  .admin-table-filter-controls .admin-table-toolbar-clear {
    min-height: 38px;
    padding: 0 12px;
    text-align: left;
  }

  .admin-filter-panel-toggle {
    width: 100%;
    margin-bottom: 0;
  }

  .admin-filter-grid { display: none; }
  .admin-filter-grid.is-open { display: flex; margin-top: 12px; }

  /* User-management actions are forms first on a phone: stack every field
     and action on the same alignment grid instead of retaining desktop-size
     button groups or a two-column commission editor. */
  .users-action-card {
    padding: 18px;
    gap: 14px;
  }

  .users-compact-form,
  .users-commission-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .users-commission-email,
  .users-commission-form > .primary {
    grid-column: 1;
  }

  .users-inline-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .users-inline-control input,
  .users-inline-control button,
  .users-compact-form > .primary,
  .users-commission-form > .primary {
    width: 100%;
    min-height: 44px;
    justify-self: stretch;
  }

  .users-commission-form > .primary { padding-inline: 14px; }

  .users-danger-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .users-danger-controls .button-secondary-small {
    width: 100%;
    min-height: 42px;
  }

}

/* Double-clicking a table row opens it as a centered modal above the current
   page — the sidebar and everything else stay visible, dimmed, behind it —
   rather than the detail taking over the whole viewport. Clicking the dimmed
   backdrop (outside the panel) closes it, same as the close button/Escape. */
  .admin-table-detail-row { cursor: pointer; }

  /* Value + click-to-copy icon for the long machine ids in the row-detail
     modal (see CopyableValue). Right-aligned to sit with the other <dd>
     values; the id itself may wrap, the button never shrinks. */
  .admin-copy-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    max-width: 100%;
  }

  .admin-copy-value > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .admin-copy-btn {
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    color: #6b7a99;
    background: #f1f3f9;
    border: 1px solid #e2e5ee;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .admin-copy-btn:hover { color: #173282; background: #e7ebf6; border-color: #cfd6e6; }
  .admin-copy-btn svg { stroke: currentColor; }
  .admin-copy-btn.is-copied { color: #1a7f4b; background: #e6f4ec; border-color: #b9e2cc; }

  /* Dense in-cell variant: the id columns across the admin/agent tables carry
     a copy icon inline with the value. Left-aligned like the rest of the cell,
     smaller button, and quiet until the row is hovered/focused so a full table
     of ids doesn't read as a wall of buttons. Always shown on touch (no hover)
     and inside the row-detail modal (no table row to hover). */
  .admin-copy-value.is-compact {
    justify-content: flex-start;
    gap: 6px;
    vertical-align: middle;
  }

  .admin-copy-value.is-compact .admin-copy-btn {
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .admin-table tr:hover .admin-copy-value.is-compact .admin-copy-btn,
  .admin-table tr:focus-within .admin-copy-value.is-compact .admin-copy-btn,
  .admin-copy-value.is-compact .admin-copy-btn:focus-visible,
  .admin-copy-value.is-compact .admin-copy-btn.is-copied,
  .admin-mobile-row-detail .admin-copy-value.is-compact .admin-copy-btn {
    opacity: 1;
  }

  @media (hover: none) {
    .admin-copy-value.is-compact .admin-copy-btn { opacity: 1; }
  }

  .admin-mobile-row-detail {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    overflow-y: auto;
  }

  .admin-mobile-row-detail-panel {
    display: flex;
    flex-direction: column;
    width: min(94vw, 720px);
    max-height: min(88dvh, 860px);
    color: var(--text);
    background: #f7f8fb;
    box-shadow: 0 24px 70px rgba(9, 10, 14, 0.3);
    overflow: hidden;
  }

  /* Calmer than a full navy block: the brand colour stays, but as a slim
     flush bar (square bottom, no drop shadow) rather than a heavy floating
     pill, and the label drops from near-black weight to a quiet eyebrow. */
  .admin-mobile-row-detail-head {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: calc(9px + env(safe-area-inset-top)) 18px 9px;
    color: #fff;
    background: #112c7a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .admin-mobile-row-detail-close {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    transition: background 0.15s ease;
  }

  .admin-mobile-row-detail-close:hover { background: rgba(255, 255, 255, 0.2); }

  .admin-mobile-row-detail-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .admin-mobile-row-detail-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: min(100%, 620px);
    min-height: 0;
    /* Safety net, not the primary layout: the side-by-side sections at
       901px+ below are what keep a typical row's detail view fitting in
       one screen. This only kicks in for a row with enough optional
       fields populated at once (images + gateway fee + agent, etc.) that
       it still doesn't fit — without it that overflow would be silently
       clipped and unreachable, since the outer overlay is overflow:hidden. */
    overflow-y: auto;
    margin: 0 auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .admin-mobile-row-detail-kicker {
    margin: 0 0 12px;
    color: #7a8699;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .admin-mobile-row-detail-sections {
    display: grid;
    gap: 12px;
  }

  .admin-mobile-row-detail-section {
    margin: 0;
    background: #fff;
    border: 1px solid #e7e9f0;
    box-shadow: 0 1px 2px rgba(16, 40, 105, 0.04);
    overflow: hidden;
  }

  .admin-mobile-row-detail-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-height: 40px;
    padding: 10px 16px;
    color: #1f2a44;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border-bottom: 1px solid #eef0f5;
  }

  /* One muted glyph per section header — down from a bright blue chip on
     every single field row, which turned a plain key/value list into a
     column of noise. */
  .admin-mobile-row-detail-section-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #6b7a99;
    background: #f1f3f9;
    border-radius: 7px;
  }

  .admin-mobile-row-detail-section-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .admin-mobile-row-detail-list { margin: 0; }

  .admin-mobile-row-detail-list > div {
    display: grid;
    grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: start;
    min-height: 34px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f1f6;
  }

  .admin-mobile-row-detail-list > div:last-child { border-bottom: 0; }

  .admin-mobile-row-detail-list dt {
    color: #6b7688;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
  }

  .admin-mobile-row-detail-list dd {
    min-width: 0;
    margin: 0;
    color: #1f2a44;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .admin-view-images-link {
    min-height: 28px;
    padding: 0;
    color: #2147d8;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Same treatment as .admin-mobile-row-detail above: the outer element is
     a dimmed, click-to-close backdrop, and .admin-verification-gallery-panel
     is the actual centered card, so the sidebar/page stay visible behind
     it instead of this taking over the whole viewport. */
  .admin-verification-gallery {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    overflow-y: auto;
  }

  .admin-verification-gallery-panel {
    display: flex;
    flex-direction: column;
    width: min(94vw, 720px);
    max-height: min(90dvh, 900px);
    color: var(--text);
    background: #f7f8fb;
    box-shadow: 0 24px 70px rgba(9, 10, 14, 0.3);
    overflow: hidden;
  }

  .admin-verification-gallery-head {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: calc(9px + env(safe-area-inset-top)) 18px 9px;
    color: #fff;
    background: #112c7a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .admin-verification-gallery-body {
    width: min(100%, 640px);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    margin: 0 auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  /* Page arrows flank the image instead of a row of three equal-weight
     Previous / Download / Next buttons — Download is a distinct action and
     no longer competes with navigation for attention. */
  .admin-verification-gallery-stage {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .admin-verification-gallery-nav {
    display: inline-grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    color: #1f2a44;
    background: #fff;
    border: 1px solid #e2e5ee;
    box-shadow: 0 1px 3px rgba(16, 40, 105, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .admin-verification-gallery-nav:hover:not(:disabled) { background: #f1f3f9; border-color: #cfd4e2; }
  .admin-verification-gallery-nav svg { stroke: currentColor; }
  .admin-verification-gallery-nav:disabled { opacity: 0; pointer-events: none; }

  .admin-verification-gallery-image-wrap {
    display: grid;
    flex: 1;
    min-width: 0;
    min-height: min(60dvh, 470px);
    place-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid #e7e9f0;
    box-shadow: 0 1px 2px rgba(16, 40, 105, 0.04);
    overflow: hidden;
  }

  .admin-verification-gallery-image-wrap img {
    display: block;
    width: 100%;
    max-height: min(56dvh, 440px);
    object-fit: contain;
  }

  .admin-verification-gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
  }

  .admin-verification-gallery-caption {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  .admin-verification-gallery-caption strong {
    color: #1f2a44;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-verification-gallery-caption span {
    color: #7a8699;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .admin-verification-gallery-download {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    color: #173282;
    background: #fff;
    border: 1px solid #e2e5ee;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
  }

  .admin-verification-gallery-download:hover { background: #f1f3f9; }
  .admin-verification-gallery-download svg { stroke: currentColor; }

  .admin-verification-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 2px;
    overflow-x: auto;
  }

  .admin-verification-gallery-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 0;
    background: #fff;
    border: 1px solid #e2e5ee;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .admin-verification-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .admin-verification-gallery-thumb.active {
    border-color: #112c7a;
    box-shadow: 0 0 0 2px rgba(17, 44, 122, 0.22);
  }
@media (min-width: 901px) {
  .admin-mobile-row-detail-panel {
    width: min(92vw, 760px);
  }

  .admin-verification-gallery-panel {
    width: min(90vw, 820px);
  }

  .admin-mobile-row-detail-head,
  .admin-verification-gallery-head {
    min-height: 48px;
    padding: 8px clamp(20px, 3vw, 36px);
  }

  .admin-mobile-row-detail-body {
    flex: 1;
    width: min(100%, 760px);
    padding: 18px clamp(20px, 3vw, 32px) 24px;
  }

  .admin-verification-gallery-body {
    width: min(100%, 820px);
    padding: 22px 28px 32px;
  }

  /* Sections stack in one full-width column at every size. An earlier
     revision laid them side by side on desktop to save vertical space, but
     the two order sections are very unequal (3 payer fields vs ~11
     transaction fields), so side-by-side left one card ending far short of
     the other — a mismatch that read as broken. Stacked, every card is the
     same width and only as tall as its own content, and the panel is kept
     narrow enough that the key/value rows don't stretch. */
  .admin-mobile-row-detail-sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .admin-mobile-row-detail-list > div {
    grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.15fr);
    min-height: 32px;
    padding: 7px 16px;
  }

  .admin-verification-gallery-image-wrap {
    min-height: min(64dvh, 560px);
    padding: 16px;
  }

  .admin-verification-gallery-image-wrap img { max-height: min(60dvh, 520px); }
}

@media (max-width: 640px) {
  .mw-title .upload-limit-note {
    display: block;
    margin: 5px 0 0;
    font-size: 11px;
  }
}

/* ---- Shared corner scale -------------------------------------------------
   Keep the interface on one radius system: regular controls and nested
   surfaces use 16px, while the main, outer surfaces use 20px.  This final
   layer intentionally sits after the desktop and mobile variants above so
   the scale does not drift between breakpoints. */
:root {
  --radius: 20px;
  --radius-sm: 16px;
  --radius-md: 16px;
  --radius-lg: 16px;
}

body :is(
  button,
  select,
  [class*="alert"],
  :not(input):not(textarea)[class*="field"],
  :not(input):not(textarea)[class*="input"],
  [class*="button"],
  [class*="btn"],
  [class*="tab"],
  [class*="method"],
  [class*="bank"],
  [class*="wallet"],
  [class*="summary"],
  [class*="total"],
  [class*="box"],
  [class*="row"],
  [class*="list"],
  [class*="upload"],
  [class*="select"],
  :not(input):not(textarea)[class*="search"],
  [class*="filter"],
  [class*="pagination"],
  .brand-mark,
  .icon-btn,
  .back-nav,
  .copy-share-full,
  .copy-field,
  .duitnow-box,
  .empty-history,
  .id-copy,
  .manual-key-box,
  .qr-frame,
  .request-row,
  .share-link-box,
  .status-icon,
  .gateway-nav a
) {
  border-radius: 16px !important;
}

/* ==========================================================================
   Agent workspace
   A quieter, operational shell for day-to-day agents. It intentionally uses
   flat surfaces, restrained borders and short labels rather than turning the
   reporting area into another marketing screen.
   ========================================================================== */
.agent-shell {
  display: flex;
  min-height: 100vh;
  background: #f7f8fa;
}

.agent-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex: 0 0 246px;
  flex-direction: column;
  width: 246px;
  height: 100vh;
  padding: 20px 14px 14px;
  color: rgba(255,255,255,.72);
  background: #171923;
  border-right: 1px solid rgba(255,255,255,.06);
}

.agent-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 28px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
}

.agent-brand-mark,
.agent-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #5b58d6;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.agent-nav { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.agent-nav-label { margin: 24px 12px 7px; color: rgba(255,255,255,.36); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.agent-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 0 12px;
  color: rgba(255,255,255,.65);
  border: 1px solid transparent;
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: color .14s ease, background-color .14s ease;
}

.agent-nav-link svg { flex: 0 0 auto; opacity: .85; }
.agent-nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.agent-nav-link.active { color: #fff; background: rgba(111,108,239,.2); border-color: rgba(131,128,255,.24); }
.agent-nav-link.active svg { color: #a8a6ff; }

.agent-account {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 8px 3px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.agent-account-avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; color: #dfdeff; background: #34364a; border-radius: 50% !important; font-size: 11px; font-weight: 800; }
.agent-account-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.agent-account-copy strong { overflow: hidden; color: rgba(255,255,255,.87); font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.agent-account-copy small { color: rgba(255,255,255,.42); font-size: 10px; }
.agent-signout { color: rgba(255,255,255,.55); font-size: 16px; line-height: 1; text-decoration: none; transform: rotate(45deg); }
.agent-signout:hover { color: #fff; }

.agent-content { flex: 1; min-width: 0; padding: 30px 36px 52px; }
.agent-page-header { display: flex; align-items: flex-start; justify-content: space-between; max-width: 1240px; margin: 0 auto 30px; }
.agent-page-header h1 { color: #20222c; font-size: 25px; font-weight: 800; letter-spacing: -.035em; }
.agent-page-header p { margin: 7px 0 0; color: #787b87; font-size: 13px; }
.agent-header-date { padding-top: 6px; color: #9294a0; font-size: 11px; font-weight: 650; }
.agent-shell-bare .agent-content { padding: 0; }
.agent-shell-bare .page { min-height: 100vh; padding-top: 30px; }

.agent-overview,
.agent-settlement-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  min-height: 158px;
  margin: 0 auto 18px;
  padding: 28px 30px;
  color: #fff;
  background: #292b38;
  border-radius: 12px !important;
}
.agent-overview h2 { margin: 7px 0 5px; color: #fff; font-size: 32px; letter-spacing: -.05em; }
.agent-overview p, .agent-settlement-hero p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; }
.agent-eyebrow { color: #bdbbff; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.agent-overview-action,
.agent-button { display: inline-flex; align-items: center; gap: 22px; padding: 11px 14px; color: #fff; background: #5b58d6; border-radius: 7px !important; font-size: 12px; font-weight: 750; text-decoration: none; }
.agent-overview-action span { font-size: 17px; line-height: .6; }

.agent-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; margin: 0 auto 34px; background: #fff; border: 1px solid #e6e7eb; border-radius: 10px !important; }
.agent-stats > div { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 20px 22px; border-left: 1px solid #ececf0; }
.agent-stats > div:first-child { border-left: 0; }
.agent-stats span, .agent-summary-grid span { color: #858792; font-size: 11px; font-weight: 650; }
.agent-stats strong { overflow: hidden; color: #252733; font-size: 21px; font-weight: 750; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.agent-stats small, .agent-summary-grid small { color: #92949f; font-size: 11px; }

.agent-section { max-width: 1240px; margin: 34px auto 0; }
.agent-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.agent-section-head h2 { color: #272935; font-size: 16px; font-weight: 780; letter-spacing: -.02em; }
.agent-section-head p { margin: 5px 0 0; color: #858792; font-size: 12px; }
.agent-section-head a { color: #4d4bc4; font-size: 12px; font-weight: 750; text-decoration: none; }
.agent-count { color: #868894; font-size: 11px; font-weight: 650; }
.agent-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e5e6ea; border-radius: 10px !important; }
.agent-table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; }
.agent-table th { padding: 12px 18px; color: #92949e; background: #fbfbfc; border-bottom: 1px solid #e9eaee; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agent-table td { padding: 15px 18px; color: #565965; border-bottom: 1px solid #efeff2; font-size: 12px; }
.agent-table tr:last-child td { border-bottom: 0; }
.agent-table td strong { display: block; max-width: 180px; overflow: hidden; color: #333540; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.agent-table td small { display: block; max-width: 180px; margin-top: 3px; overflow: hidden; color: #9a9ca6; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.agent-table .right { text-align: right; }
.agent-reference { color: #777a86; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px !important; }
.agent-amount { color: #343640 !important; font-weight: 740; white-space: nowrap; }
.agent-status { display: inline-flex; padding: 4px 8px; border-radius: 999px !important; font-size: 9.5px; font-weight: 800; letter-spacing: .035em; text-transform: capitalize; white-space: nowrap; }
.agent-status.good { color: #16704f; background: #e9f6ef; }
.agent-status.pending { color: #966408; background: #fff5dc; }
.agent-status.bad { color: #ae3650; background: #fcecef; }
.agent-table-state, .agent-empty { padding: 42px 24px; color: #838590; background: #fff; border: 1px solid #e5e6ea; border-radius: 10px !important; font-size: 12px; text-align: center; }
.agent-empty h2 { margin: 12px 0 5px; color: #343641; font-size: 15px; }
.agent-empty p { max-width: 320px; margin: 0 auto 18px; line-height: 1.5; }
.agent-empty-mark { margin: 0 auto; }
.agent-alert { max-width: 1240px; margin: 0 auto 18px; padding: 12px 14px; color: #9b384e; background: #fff0f2; border: 1px solid #f3d4da; border-radius: 8px !important; font-size: 12px; }

.agent-summary-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; max-width: 1240px; margin: 0 auto; background: #fff; border: 1px solid #e5e6ea; border-radius: 10px !important; }
.agent-summary-grid > div { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 24px; border-left: 1px solid #ebecf0; }
.agent-summary-grid > div:first-child { border-left: 0; background: #f9f9fc; }
.agent-summary-grid strong { overflow: hidden; color: #282a35; font-size: 25px; font-weight: 760; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.agent-summary-main strong { color: #4b49bc; font-size: 30px; }
.agent-status-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.agent-status-breakdown > div { display: flex; align-items: center; gap: 8px; padding: 16px; background: #fff; border: 1px solid #e5e6ea; border-radius: 9px !important; }
.agent-status-breakdown strong { margin-left: auto; color: #343641; font-size: 17px; }
.agent-status-breakdown > div > span:last-child { color: #92949f; font-size: 10px; }

.agent-settlement-hero { background: #272936; }
.agent-settlement-hero > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.agent-settlement-hero strong { color: #fff; font-size: 30px; letter-spacing: -.045em; }
.agent-settlement-note { width: min(310px, 38%); padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.agent-settlement-note span { color: #dddfff; font-size: 11px; font-weight: 750; }
.agent-settlement-note p { margin-top: 6px; line-height: 1.55; }
.agent-mobile-header,
.agent-mobile-nav,
.agent-more-sheet { display: none; }

@media (max-width: 900px) {
  .agent-shell { display: block; min-height: 100dvh; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .agent-sidebar { display: none; }
  .agent-content { padding: 22px 16px 28px; }
  .agent-shell-bare .agent-content { padding: 0; }
  .agent-shell-bare .page { min-height: auto; padding: 22px 14px 90px; }
  .agent-mobile-header { display: flex; min-height: 52px; align-items: center; gap: 11px; margin: calc(-8px + env(safe-area-inset-top)) -2px 19px; }
  .agent-mobile-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #252733; font-size: 14px; font-weight: 830; letter-spacing: -.025em; text-decoration: none; }
  .agent-mobile-brand .agent-brand-mark { width: 29px; height: 29px; border-radius: 8px !important; font-size: 9px; }
  .agent-mobile-location { display: flex; min-width: 0; flex: 1; flex-direction: column; padding-left: 10px; border-left: 1px solid #dedfe5; line-height: 1.15; }
  .agent-mobile-location span { overflow: hidden; color: #92949f; font-size: 9px; font-weight: 750; letter-spacing: .075em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .agent-mobile-location strong { overflow: hidden; margin-top: 3px; color: #323440; font-size: 12px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
  .agent-mobile-menu-button { display: inline-grid; flex: 0 0 auto; width: 36px; height: 36px; place-content: center; gap: 4px; padding: 0; color: #5b58d6; background: #eeedff; border: 1px solid #dcdbfb; border-radius: 9px !important; cursor: pointer; }
  .agent-mobile-menu-button span { display: block; width: 15px; height: 1.5px; background: currentColor; border-radius: 99px !important; }
  .agent-mobile-menu-button:focus-visible { outline: 2px solid #4d4bc4; outline-offset: 2px; }
  .agent-page-header { margin-bottom: 22px; }
  .agent-page-header h1 { font-size: 23px; }
  .agent-header-date { display: none; }
  .agent-overview, .agent-settlement-hero { min-height: 0; margin-bottom: 12px; padding: 22px; }
  .agent-overview h2 { font-size: 28px; }
  .agent-overview-action { gap: 8px; padding: 10px 11px; font-size: 0; }
  .agent-overview-action span { font-size: 18px; }
  .agent-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 24px; }
  .agent-stats > div { padding: 16px; border-top: 1px solid #ececf0; }
  .agent-stats > div:nth-child(odd) { border-left: 0; }
  .agent-stats > div:nth-child(-n+2) { border-top: 0; }
  .agent-stats strong { font-size: 18px; }
  .agent-section { margin-top: 26px; }
  .agent-section-head { align-items: flex-start; }
  .agent-table-wrap { margin-inline: -1px; }
  .agent-summary-grid { grid-template-columns: 1fr 1fr; }
  .agent-summary-grid > div { padding: 18px; }
  .agent-summary-grid > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid #ebecf0; }
  .agent-summary-grid > div:nth-child(2) { border-left: 0; }
  .agent-summary-grid strong { font-size: 19px; }
  .agent-summary-main strong { font-size: 26px; }
  .agent-status-breakdown { grid-template-columns: 1fr; }
  .agent-settlement-note { display: none; }
  .agent-mobile-nav { position: fixed; z-index: 50; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(65px + env(safe-area-inset-bottom)); padding: 4px 4px calc(5px + env(safe-area-inset-bottom)); background: rgba(23,25,35,.98); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -6px 18px rgba(18,20,28,.14); }
  .agent-mobile-nav .agent-nav-link, .agent-mobile-more { display: flex; min-width: 0; min-height: 52px; align-items: center; justify-content: center; gap: 3px; padding: 3px 1px; color: rgba(255,255,255,.64); background: transparent; border: 0; border-radius: 7px !important; font: inherit; font-size: 9px; font-weight: 750; text-align: center; text-decoration: none; }
  .agent-mobile-nav .agent-nav-link { flex-direction: column; }
  .agent-mobile-nav .agent-nav-link svg { width: 18px; height: 18px; }
  .agent-mobile-nav .agent-nav-link.active, .agent-mobile-more.active { color: #fff; background: rgba(111,108,239,.22); border: 0; }
  .agent-mobile-more { flex-direction: column; cursor: pointer; }
  .agent-more-icon { height: 18px; font-size: 17px; line-height: 10px; letter-spacing: 1px; }
  .agent-more-sheet { position: fixed; z-index: 49; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); left: 8px; display: flex; flex-direction: column; padding: 8px; background: #242634; border: 1px solid rgba(255,255,255,.12); border-radius: 12px !important; box-shadow: 0 14px 42px rgba(11,12,18,.32); }
  .agent-more-sheet .agent-nav-link { color: rgba(255,255,255,.75); }
  .agent-more-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px 9px; color: rgba(255,255,255,.46); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .agent-more-sheet-head button { width: 26px; height: 26px; color: rgba(255,255,255,.7); background: transparent; border: 0; font-size: 21px; line-height: 1; }
  .agent-more-signout { padding: 12px; margin-top: 4px; color: #ffccd4; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; font-weight: 700; text-decoration: none; }
.agent-shell .mw-bottombar { bottom: calc(65px + env(safe-area-inset-bottom)); }
}

/* Agent reporting now uses the admin dashboard's table/filter primitives.
   This native select is the only additional control in the shared filter
   panel; keep it visually identical to the rest of the filter inputs. */
.workspace-filter-select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 12px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.workspace-filter-select:focus {
  background: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.workspace-reference {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  color: var(--text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

/* Primary surfaces are the outermost cards, sheets, and application panels. */
body :is(
  .auth-shell,
  .auth-m-card,
  .checkout-shell,
  .checkout-frame-card,
  .detail-panel,
  .form-card,
  .gateway-sidebar,
  .glass,
  .modal-card,
  .pfm-card,
  .pfm-header,
  .pfm-table,
  .pm-card,
  .pm-card-header,
  .pm-details-panel,
  .pm-payment-panel,
  .pm-summary,
  .request-detail-hero,
  .result-card,
  .secure-frame-shell,
  .ticket-card,
  .mw-summary,
  .pm-upload-example-modal,
  .admin-card,
  .admin-table-card,
  .admin-mobile-row-detail-list
) {
  border-radius: 20px !important;
}

/* Tables carry no "card" chrome at all — no border, radius, shadow, or fill.
   The toolbar's bottom rule, the row rules, and the pagination's top rule
   give all the structure needed; the table just sits on the page. Declared
   after the rounded-surface block above and at matching specificity so the
   border-radius override lands even against its !important. */
body .admin-table-card {
  border-radius: 0 !important;
}

/* Preserve elements whose shape communicates an icon, status, or selection. */
body :is(
  .feature-list .check,
  .method-tab-icon,
  .method-tab-check,
  .bank-check,
  .duitnow-qr-mark,
  .duitnow-steps .step-num,
  .modal-close-x,
  .pm-method-check,
  .pm-bank-check,
  .pm-wallet-check,
  .pm-duitnow-mark,
  .pm-step-num,
  .pm-summary-trust-icon,
  .pm-secure-note-icon,
  .pm-bankverify-icon,
  .pulse-dot,
  .pm-upload-icon,
  .pm-upload-remove,
  .pm-upload-example-link,
  .pm-upload-example-close,
  .mw-method-check,
  .mw-result-ring,
  .admin-filter-scope-icon,
  .admin-mobile-row-detail-close,
  .admin-verification-gallery-nav
) {
  border-radius: 50% !important;
}

/* The global corner-scale block above forces every [class*="row"] surface to
   16–20px and every <button> to 16px, and its :is() list resolves to (0,1,2)
   specificity (via args like `.gateway-nav a`). These modals want a quieter,
   tighter scale — flush header (top corners come from the panel's own
   overflow:hidden), a 14px panel, 12px section cards, small square-ish
   thumbnails — so each selector below is a two-class descendant that clears
   (0,1,2) rather than relying on source order alone. */
body .admin-mobile-row-detail .admin-mobile-row-detail-panel,
body .admin-verification-gallery .admin-verification-gallery-panel {
  border-radius: 14px !important;
}

body .admin-mobile-row-detail .admin-mobile-row-detail-head,
body .admin-verification-gallery .admin-verification-gallery-head {
  border-radius: 0 !important;
}

body .admin-mobile-row-detail-sections .admin-mobile-row-detail-section {
  border-radius: 12px !important;
}

body .admin-verification-gallery-body .admin-verification-gallery-thumb,
body .admin-verification-gallery-body .admin-verification-gallery-download {
  border-radius: 8px !important;
}

body .admin-copy-value .admin-copy-btn {
  border-radius: 7px !important;
}

body .admin-sync-modal-panel .admin-sync-modal-foot button {
  border-radius: 8px !important;
}

/* Multiline payer/address fields should read as supporting detail, not the
   main amount or account value. Keep their type smaller without changing
   the existing textarea sizing or behavior. */
textarea,
.pm-payer-row textarea.pm-payer-input,
textarea.mw-input {
  font: inherit;
  font-size: 13px;
}

input,
textarea {
  font-size: 13px !important;
}

/* Payment ledger ----------------------------------------------------------
   The payment history is an operator workspace, not one continuous form.
   Give filters, result actions, rows, and paging their own clear bands while
   keeping them inside one calm surface. The richer FilterPanel is shared by
   the other data-heavy admin screens, so its control layout is generic; the
   table chrome below is scoped to Payments to avoid surprising compact
   directories elsewhere. */
.admin-section-description {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

body .admin-payment-ledger.admin-table-card {
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(46, 42, 107, 0.12);
  border-radius: 0 !important;
  box-shadow: 0 14px 38px rgba(37, 35, 68, 0.07);
}

.admin-filter-panel {
  padding: 0;
  background: linear-gradient(180deg, rgba(249, 249, 253, 0.94), rgba(255, 255, 255, 0.98));
  border-bottom: 1px solid var(--line);
}

.admin-filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
}

.admin-filter-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.admin-filter-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
}

.admin-filter-active-count {
  padding: 3px 7px;
  color: #4338ca;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
}

.admin-filter-clear {
  min-height: 30px;
  padding: 0 8px;
  color: #4f46e5;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-filter-clear:hover { background: rgba(99, 102, 241, 0.08); }
.admin-filter-clear-mobile { display: none; }

.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: 0 20px 18px;
}

.admin-filter-field,
.admin-filter-field-wide {
  display: flex;
  grid-column: span 3;
  flex-direction: column;
  min-width: 0;
  gap: 7px;
}

.admin-filter-field-wide { grid-column: span 6; }

.admin-filter-field .admin-filter-label {
  color: #666a79;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.admin-filter-field.is-active .admin-filter-label { color: #4f46e5; }

.admin-filter-field input[type="text"],
.admin-filter-field input[type="date"],
.admin-filter-field .admin-select-toggle {
  height: 42px;
  color: var(--text);
  background-color: #fff;
  border-color: rgba(46, 42, 107, 0.16);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
}

.admin-filter-field input[type="text"] { padding-inline: 13px; }

.admin-filter-field input[type="text"]::placeholder {
  color: #9a9ca7;
  opacity: 1;
}

.admin-filter-field.is-active input[type="text"],
.admin-filter-field.is-active input[type="date"],
.admin-filter-field.is-active .admin-select-toggle {
  border-color: rgba(79, 70, 229, 0.42);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.07);
}

.admin-filter-daterange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(125px, 0.72fr);
  align-items: center;
  gap: 8px;
}

.admin-filter-field .admin-filter-date-input {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
}

.admin-filter-field .admin-filter-date-input > span {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 1;
  color: #8b8e99;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.admin-filter-daterange .admin-filter-date-input input[type="date"] {
  width: 100%;
  min-width: 0;
  padding: 13px 10px 0 12px;
}

.admin-filter-presets {
  width: 100%;
  min-width: 0;
  flex: none;
}

.admin-filter-presets .admin-select-toggle { height: 42px; }

.admin-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 59px;
  padding: 10px 20px;
  background: rgba(247, 247, 252, 0.72);
  border-top: 1px solid rgba(46, 42, 107, 0.08);
}

.admin-filter-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-column-picker-toggle {
  min-height: 36px;
  height: 36px;
  padding-inline: 11px;
  background: #fff;
  border-color: rgba(46, 42, 107, 0.16);
  border-radius: 9px;
}

.admin-export-button {
  color: #4338ca;
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(67, 56, 202, 0.18);
}

.admin-column-picker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 19px;
  padding-inline: 5px;
  color: var(--text-muted);
  background: rgba(46, 42, 107, 0.07);
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 850;
}

.admin-payment-ledger .admin-table-scroll {
  background: #fff;
  scrollbar-color: rgba(79, 70, 229, 0.32) rgba(46, 42, 107, 0.06);
  scrollbar-width: thin;
}

.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar { height: 9px; }
.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar-track { background: rgba(46, 42, 107, 0.05); }
.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(79, 70, 229, 0.28);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.admin-payment-ledger .admin-table {
  width: max-content;
  min-width: 100%;
  font-size: 12.5px;
}

.admin-payment-ledger .admin-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 13px;
  color: #747784;
  background: #f7f7fb;
  border-bottom-color: rgba(46, 42, 107, 0.12);
  font-size: 9.5px;
  letter-spacing: 0.075em;
}

.admin-payment-ledger .admin-th-sortable-inner { padding-block: 13px; }

.admin-payment-ledger .admin-table td {
  height: 58px;
  padding-block: 12px;
  background: #fff;
  border-bottom-color: rgba(46, 42, 107, 0.08);
}

.admin-payment-ledger .admin-table tbody tr:nth-child(even) td { background: #fcfcfe; }
.admin-payment-ledger .admin-table tbody tr:hover td { background: #f5f5ff; }

.admin-payment-ledger .admin-table th:first-child,
.admin-payment-ledger .admin-table td:first-child {
  position: sticky;
  left: 0;
  width: 54px;
  min-width: 54px;
  padding-inline: 16px 10px;
}

.admin-payment-ledger .admin-table th:first-child {
  z-index: 4;
  background: #f7f7fb;
}

.admin-payment-ledger .admin-table td:first-child {
  z-index: 1;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.admin-payment-ledger .admin-table td.admin-td-numeric {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.admin-payment-ledger .admin-pill {
  padding: 5px 9px;
  letter-spacing: 0.045em;
}

.admin-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  background: rgba(249, 249, 252, 0.82);
  border-top: 1px solid var(--line);
}

.admin-pagination-count {
  justify-self: start;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.admin-pagination-pages {
  justify-self: center;
  gap: 6px;
}

.admin-pagination-arrow,
.admin-pagination-page {
  min-width: 34px;
  height: 34px;
  padding-inline: 8px;
  background: #fff;
  border-color: rgba(46, 42, 107, 0.14);
  border-radius: 9px;
  font-size: 12px;
}

.admin-pagination-page.active {
  background: #5b55e7;
  border-color: #5b55e7;
  box-shadow: 0 5px 12px rgba(79, 70, 229, 0.22);
}

.admin-pagination-rows {
  justify-self: end;
  font-size: 11.5px;
}

.admin-pagination-rows select {
  height: 34px;
  min-width: 58px;
  padding-left: 10px;
  background-color: #fff;
  border-radius: 9px;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .admin-filter-field,
  .admin-filter-field-wide { grid-column: span 6; }

  .admin-filter-field-wide { grid-column: span 12; }
}

@media (max-width: 900px) {
  .admin-filter-panel { padding: 14px; }
  .admin-filter-panel-head { display: none; }

  .admin-filter-panel-toggle {
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
  }

  .admin-filter-panel-toggle svg { transition: transform 0.18s ease; }
  .admin-filter-panel-toggle svg.is-open { transform: rotate(180deg); }

  .admin-filter-grid { display: none; padding: 14px 0 2px; }
  .admin-filter-grid.is-open { display: grid; margin-top: 0; }

  .admin-filter-field,
  .admin-filter-field-wide { grid-column: span 6; }

  .admin-filter-field-wide { grid-column: span 12; }

  .admin-filter-actions {
    min-height: 0;
    margin-top: 12px;
    padding: 12px 0 0;
    background: transparent;
  }

  .admin-filter-clear-mobile { display: inline-flex; align-items: center; }

  .admin-pagination {
    grid-template-columns: 1fr 1fr;
  }

  .admin-pagination-count { grid-column: 1; grid-row: 1; }
  .admin-pagination-rows { grid-column: 2; grid-row: 1; }
  .admin-pagination-pages { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  body .admin-payment-ledger.admin-table-card { border-radius: 0 !important; }

  .admin-filter-field,
  .admin-filter-field-wide { grid-column: span 12; }

  .admin-filter-daterange { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .admin-filter-presets { grid-column: 1 / -1; }

  .admin-filter-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-filter-action-buttons {
    width: 100%;
    flex-wrap: wrap;
  }

  .admin-filter-action-buttons .admin-column-picker,
  .admin-filter-action-buttons .admin-column-picker-toggle { flex: 1; }

  .admin-filter-action-buttons .admin-column-picker-toggle { width: 100%; justify-content: center; }

  .admin-pagination {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .admin-pagination-count,
  .admin-pagination-rows,
  .admin-pagination-pages {
    grid-column: 1;
    justify-self: center;
  }

  .admin-pagination-count { grid-row: 1; }
  .admin-pagination-pages { grid-row: 2; }
  .admin-pagination-rows { grid-row: 3; }
}

/* ========================================================================== 
   Settings financial control centre
   The settings route is an operational console: a concise portfolio-level
   summary, a domain navigator, and distinct configuration surfaces. Scoped
   to .settings-page so the rest of the admin portal keeps its existing UI.
   ========================================================================== */
.settings-page {
  --settings-navy: #17213a;
  --settings-navy-soft: #233050;
  --settings-accent: #625bf6;
  --settings-accent-soft: #eeedff;
  --settings-green: #13a673;
  --settings-surface: #ffffff;
  --settings-canvas: #f5f7fb;
  --settings-border: #e1e6ef;
  --settings-border-strong: #cfd7e4;
  max-width: none;
}

.settings-page .settings-overview {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  margin: 0 0 24px;
  padding: 28px;
  gap: 26px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 92% 14%, rgba(113, 104, 255, 0.34), transparent 30%),
    radial-gradient(circle at 68% 120%, rgba(35, 190, 139, 0.12), transparent 38%),
    linear-gradient(135deg, #121a2f 0%, #1b2744 58%, #242f50 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 24px 54px -34px rgba(14, 24, 49, 0.72);
}

.settings-page .settings-overview::after {
  right: -94px;
  top: -138px;
  width: 320px;
  height: 320px;
  border-color: rgba(255, 255, 255, 0.08);
}

.settings-overview-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.settings-page .settings-overview-copy { max-width: 610px; }

.settings-page .settings-overview-kicker {
  margin: 0 0 9px;
  color: #9ca8c4;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.settings-page .settings-overview h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.settings-page .settings-overview p {
  margin-top: 9px;
  color: #b9c3d9;
  font-size: 12.5px;
  font-weight: 550;
}

.settings-audit-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  color: #f7f8ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 750;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.settings-audit-link:hover,
.settings-audit-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}

.settings-overview-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.settings-overview-metric {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  padding: 14px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-overview-metric:first-child { border-left: 0; }

.settings-overview-metric-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: #c6c3ff;
  background: rgba(113, 104, 255, 0.16);
  border: 1px solid rgba(154, 148, 255, 0.16);
  border-radius: 9px;
}

.settings-overview-metric > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settings-overview-metric small {
  color: #93a0bb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-overview-metric strong {
  overflow: hidden;
  color: #fff;
  font-size: 12.5px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page .settings-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.settings-page .settings-directory {
  position: sticky;
  top: 20px;
  padding: 16px 11px 11px;
  overflow: visible;
  background: var(--settings-surface);
  border: 1px solid var(--settings-border);
  border-radius: 14px;
  box-shadow: 0 16px 36px -30px rgba(25, 38, 69, 0.46);
}

.settings-page .settings-directory-head {
  display: grid;
  gap: 3px;
  padding: 0 8px 14px;
  color: var(--settings-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.settings-page .settings-directory-head b {
  display: block;
  width: auto;
  height: auto;
  color: #8a95a9;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
}

.settings-page .settings-jump { display: grid; gap: 14px; }
.settings-page .settings-nav-group { display: grid; gap: 3px; }

.settings-page .settings-nav-group > span {
  display: block;
  padding: 0 8px 4px;
  color: #9aa4b6;
  font-size: 8.5px;
  letter-spacing: 0.1em;
}

.settings-page .settings-jump a {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  color: #5e697c;
  background: transparent;
  border: 0;
  border-radius: 9px;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.settings-page .settings-jump a::before { display: none; }

.settings-page .settings-jump a:hover,
.settings-page .settings-jump a:focus-visible {
  color: var(--settings-navy);
  background: #f4f5ff;
  outline: none;
  transform: translateX(2px);
}

.settings-page .settings-jump-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #7771df;
  background: var(--settings-accent-soft);
  border: 0;
  border-radius: 8px;
}

.settings-page .settings-jump-copy { display: grid; gap: 2px; }

.settings-page .settings-jump-copy strong {
  color: inherit;
  font-size: 10.8px;
  font-weight: 760;
}

.settings-page .settings-jump-copy small {
  color: #9aa4b6;
  font-size: 8.8px;
  font-weight: 600;
}

.settings-jump-chevron { color: #b5bdca; }

.settings-page .settings-directory-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 8px 2px;
  padding: 12px 0 0;
  color: #8a95a9;
  border-top: 1px solid #edf0f5;
  font-size: 9.5px;
  font-weight: 600;
}

.settings-page .settings-directory-note svg { flex: 0 0 auto; margin-top: 1px; }
.settings-page .settings-sections { display: grid; min-width: 0; gap: 20px; }

.settings-page .settings-block {
  margin: 0;
  padding: 0;
  overflow: visible;
  background: var(--settings-surface);
  border: 1px solid var(--settings-border);
  border-radius: 15px;
  box-shadow: 0 18px 42px -36px rgba(25, 38, 69, 0.5);
  scroll-margin-top: 20px;
}

.settings-page .settings-block + .settings-block { padding-top: 0; }
.settings-page .settings-block:last-child { border-bottom: 1px solid var(--settings-border); }

.settings-page .settings-block:target {
  border-color: rgba(98, 91, 246, 0.48);
  box-shadow: 0 0 0 4px rgba(98, 91, 246, 0.08), 0 18px 42px -36px rgba(25, 38, 69, 0.5);
}

.settings-page .settings-block-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #edf0f5;
}

.settings-page .settings-block-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--settings-accent);
  background: var(--settings-accent-soft);
  border: 0;
  border-radius: 10px;
}

.settings-page .settings-block--danger .settings-block-icon {
  color: #b53650;
  background: #fff0f3;
}

.settings-page .settings-block-copy { flex: 1; }

.settings-page .settings-block-head .users-card-kicker {
  display: block;
  margin: 0 0 4px;
  color: #8d97a8;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.settings-page .settings-block-head h2 {
  color: var(--settings-navy);
  font-size: 16px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.settings-page .settings-block-head p {
  max-width: 76ch;
  margin-top: 5px;
  color: #6f7b8e;
  font-size: 11.2px;
  font-weight: 520;
  line-height: 1.55;
}

.settings-block-content { padding: 18px 22px 22px; }

.settings-page .settings-card,
.settings-page .settings-block-content > .admin-table-card {
  padding: 18px;
  background: var(--settings-canvas);
  border: 1px solid #e6eaf1;
  border-radius: 11px !important;
  box-shadow: none;
}

.settings-page .settings-card:focus-within {
  border-color: rgba(98, 91, 246, 0.36);
  box-shadow: 0 0 0 3px rgba(98, 91, 246, 0.06);
}

.settings-page .settings-card--danger {
  background: #fffafb;
  border-color: #f0d7dc;
}

.settings-page .settings-card-title {
  margin: 0 0 14px;
  color: var(--settings-navy);
  font-size: 12.5px;
  font-weight: 800;
}

.settings-page .settings-field > span,
.settings-page .settings-field > label {
  color: #657185;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.075em;
}

.settings-page .settings-card .settings-field input,
.settings-page .settings-card .settings-field select,
.settings-page .settings-card .settings-field .users-method-select-toggle {
  height: 42px;
  color: var(--settings-navy);
  background: #fff;
  border-color: var(--settings-border-strong);
  border-radius: 7px;
  font-size: 12px;
  box-shadow: 0 1px 1px rgba(23, 33, 58, 0.02);
}

.settings-page .settings-card .settings-field input:hover,
.settings-page .settings-card .settings-field select:hover,
.settings-page .settings-card .settings-field .users-method-select-toggle:hover { border-color: #aeb9ca; }

.settings-page .settings-card .settings-field input:focus,
.settings-page .settings-card .settings-field select:focus,
.settings-page .settings-card .settings-field .users-method-select-toggle:focus-visible {
  border-color: var(--settings-accent);
  box-shadow: 0 0 0 3px rgba(98, 91, 246, 0.11);
}

.settings-page .settings-grid { gap: 14px; }
.settings-page .settings-form { gap: 15px; }

.settings-page .settings-actions {
  gap: 9px;
  padding-top: 1px;
}

.settings-page .settings-actions .primary,
.settings-page .settings-actions button.primary,
.settings-page .settings-inline .primary,
.settings-page .settings-inline button.primary {
  min-height: 39px;
  padding: 0 15px;
  color: #fff;
  background: var(--settings-navy);
  border: 1px solid var(--settings-navy);
  border-radius: 7px;
  box-shadow: 0 7px 15px -10px rgba(23, 33, 58, 0.8);
  font-size: 11px;
  font-weight: 780;
}

.settings-page .settings-actions .primary:hover,
.settings-page .settings-actions button.primary:hover,
.settings-page .settings-inline .primary:hover,
.settings-page .settings-inline button.primary:hover { background: #0e162a; }

.settings-page .settings-actions .primary:disabled,
.settings-page .settings-inline .primary:disabled { box-shadow: none; opacity: 0.52; }

.settings-page .settings-actions .button-secondary-small,
.settings-page .settings-inline .button-secondary-small,
.settings-page .agent-bank-table-actions .button-secondary-small {
  min-height: 39px;
  margin: 0;
  padding-inline: 12px;
  color: #4e5a6d;
  background: #fff;
  border-color: var(--settings-border-strong);
  border-radius: 7px;
  font-size: 10.5px;
}

.settings-page .users-inline-control .secondary {
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  color: #4e5a6d;
  background: #fff;
  border: 1px solid var(--settings-border-strong);
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 750;
  white-space: nowrap;
}

.settings-page .users-inline-control .secondary:hover { border-color: #aeb9ca; background: #f8f9fc; }

.settings-page .button-danger-small {
  color: #ae304a !important;
  background: #fff8f9 !important;
  border-color: #edcbd2 !important;
}

.settings-page .admin-checkbox-row {
  min-height: 30px;
  gap: 10px;
  color: #39465a;
  font-size: 11.5px;
  font-weight: 680;
  cursor: pointer;
}

.settings-page .admin-checkbox-row input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #cbd3df;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.settings-page .admin-checkbox-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(23, 33, 58, 0.25);
  transition: transform 0.16s ease;
}

.settings-page .admin-checkbox-row input[type="checkbox"]:checked { background: var(--settings-accent); }
.settings-page .admin-checkbox-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.settings-page .admin-checkbox-row input[type="checkbox"]:focus-visible { outline: 3px solid rgba(98, 91, 246, 0.18); outline-offset: 2px; }
.settings-page .admin-checkbox-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }

.settings-page .settings-subsection {
  margin-top: 20px;
  padding-top: 19px;
  border-color: #e2e7ef;
}

.settings-page .settings-subsection > h3 {
  margin: 0 0 13px;
  color: var(--settings-navy);
  font-size: 12px;
  font-weight: 800;
}

.settings-page .settings-agent-picker {
  max-width: none;
  padding: 13px 14px;
  background: #efefff;
  border: 1px solid #dddcff;
  border-radius: 9px;
}

.settings-page .settings-agent-picker > label { color: #5e58b7; }
.settings-page .agent-bank-form { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.settings-page .agent-bank-form > .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.settings-page .agent-payout-subhead span {
  color: var(--settings-navy);
  font-size: 16px;
  font-weight: 850;
}

.settings-page .agent-payout-accrued-list {
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e8ef;
  border-radius: 8px;
}

.settings-page .agent-payout-accrued-list li {
  padding: 9px 11px;
  border-top: 1px solid #edf0f5;
  font-size: 11px;
}

.settings-page .agent-payout-accrued-list li:first-child { border-top: 0; }

.settings-page .settings-block-content > .admin-section-head {
  margin: 18px 2px 9px !important;
}

.settings-page .settings-block-content > .admin-section-head h2 {
  color: var(--settings-navy);
  font-size: 12px;
  font-weight: 800;
}

.settings-page .settings-block-content > .admin-table-card { padding: 0; overflow: hidden; border-radius: 0 !important; }
.settings-page .admin-table thead th { color: #788396; background: #f0f3f7; border-color: #e0e5ed; font-size: 8.5px; letter-spacing: 0.07em; }
.settings-page .admin-table tbody td { background: #fff; border-color: #edf0f4; font-size: 10.5px; }
.settings-page .admin-table tbody tr:hover td { background: #fafaff; }

.settings-page .alert {
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
}

.settings-page .settings-hint { color: #758195; font-size: 10.5px; }

.settings-page .manual-key-box {
  background: #fff;
  border-color: var(--settings-border);
  border-radius: 8px;
}

.settings-page .users-method-select-menu,
.settings-page .bank-combobox-menu { border-radius: 9px; box-shadow: 0 18px 38px -18px rgba(23, 33, 58, 0.36); }

.settings-page .settings-block--danger {
  border-color: #eccfd5;
  box-shadow: 0 18px 42px -36px rgba(135, 38, 60, 0.28);
}

@media (max-width: 980px) and (min-width: 901px) {
  .settings-page .settings-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 18px; }
  .settings-page .settings-jump a { grid-template-columns: 30px minmax(0, 1fr); }
  .settings-page .settings-jump-chevron { display: none; }
}

@media (max-width: 900px) {
  .settings-page .settings-overview { padding: 24px; }
  .settings-page .settings-layout { grid-template-columns: 1fr; gap: 18px; }

  .settings-page .settings-directory {
    position: static;
    padding: 9px;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--settings-border);
    border-radius: 12px;
  }

  .settings-page .settings-directory-head,
  .settings-page .settings-directory-note,
  .settings-page .settings-nav-group > span { display: none; }

  .settings-page .settings-jump,
  .settings-page .settings-nav-group { display: flex; gap: 4px; }
  .settings-page .settings-jump { width: max-content; min-width: 100%; }

  .settings-page .settings-jump a {
    grid-template-columns: 28px auto;
    flex: 0 0 auto;
    min-width: max-content;
    padding: 6px 9px 6px 6px;
    border: 0;
    border-radius: 8px;
  }

  .settings-page .settings-jump-icon { width: 28px; height: 28px; }
  .settings-page .settings-jump-copy small,
  .settings-page .settings-jump-chevron { display: none; }
  .settings-page .settings-jump a:hover,
  .settings-page .settings-jump a:focus-visible { transform: none; }
}

@media (max-width: 700px) {
  .settings-overview-metrics { grid-template-columns: 1fr; }
  .settings-overview-metric { border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 0; }
  .settings-overview-metric:first-child { border-top: 0; }
  .settings-page .settings-duo { grid-template-columns: 1fr; }
  .settings-page .settings-grid--duo,
  .settings-page .agent-bank-form > .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .settings-page .settings-overview { gap: 20px; padding: 21px 18px; border-radius: 14px; }
  .settings-overview-topline { display: grid; gap: 17px; }
  .settings-audit-link { width: max-content; }
  .settings-page .settings-block { border-radius: 12px; }
  .settings-page .settings-block-head { padding: 17px 16px 14px; }
  .settings-page .settings-block-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .settings-block-content { padding: 14px 15px 16px; }
  .settings-page .settings-card { padding: 15px; }
  .settings-page .settings-inline { align-items: stretch; flex-direction: column; }
  .settings-page .settings-inline .settings-field { flex-basis: auto; }
  .settings-page .settings-inline .primary,
  .settings-page .settings-inline .button-secondary-small,
  .settings-page .settings-actions .primary,
  .settings-page .settings-actions .button-secondary-small { width: 100%; }
}

/* iOS Safari zooms the whole page in when a focused input/textarea's
   font-size is under 16px. The 13px reset above is a deliberate desktop
   type-scale choice that must not reach phone widths — several fields
   (.mw-input, auth-m-card's inputs, pm-payer-input) already carry comments
   saying they need to stay at 16px specifically to dodge this, but being
   earlier in the cascade than the blanket rule above, silently lost that
   protection. One override here covers every input/textarea at once
   instead of relying on each field to out-position this rule. */
@media (max-width: 900px) {
  input,
  textarea {
    font-size: 16px !important;
  }
}

/* A placeholder represents the value a person will enter, so it should use
   the same type scale as the control instead of a smaller secondary size. */
input::placeholder,
textarea::placeholder {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* ---- Main sign-in cards --------------------------------------------------
   Scoped to Login.jsx and AdminLogin.jsx only. Modal cards (2FA, password
   changes, lockouts, and setup) deliberately do not use .login-page, so
   their layout and styling remain exactly as they are. */
.login-page {
  min-height: 100dvh;
  padding: 30px;
  background: #eeecff;
}

.login-page .auth-shell {
  width: min(100%, 576px);
  max-width: 576px;
  min-height: calc(100dvh - 60px);
  margin: 0;
  overflow: hidden;
  background: #f7f8fc;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px !important;
  box-shadow: none;
}

.login-page .auth-hero {
  min-height: 0;
  padding: clamp(52px, 10.5vw, 74px) clamp(28px, 8.5vw, 54px) 0;
  background: transparent;
}

.login-page .auth-hero h1 {
  color: #4338ca;
  font-size: clamp(36px, 8.7vw, 56px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.login-page .auth-form {
  display: block;
  padding: clamp(48px, 8vw, 60px) clamp(28px, 8.5vw, 54px) 54px;
}

.login-page .auth-form label,
.login-page .auth-m-card label {
  margin-bottom: 12px;
  color: #5e6572;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.login-page .auth-form form > .field-label-row,
.login-page .auth-m-card form > .field-label-row {
  margin-top: 26px !important;
}

.login-page .auth-form input[type="text"],
.login-page .auth-form input[type="email"],
.login-page .auth-form input[type="password"],
.login-page .auth-m-card input[type="text"],
.login-page .auth-m-card input[type="email"],
.login-page .auth-m-card input[type="password"] {
  height: clamp(58px, 13.9vw, 88px);
  padding: 0 clamp(20px, 4.5vw, 28px);
  color: #23252f;
  background: #fff;
  border: 0;
  border-radius: 16px !important;
  box-shadow: 0 2px 0 rgba(35, 37, 47, 0.2);
  font-size: 13px !important;
  font-weight: 650;
}

.login-page .auth-form .password-field input,
.login-page .auth-m-card .password-field input {
  padding-right: clamp(58px, 11vw, 72px);
}

.login-page .auth-form .password-toggle,
.login-page .auth-m-card .password-toggle {
  width: clamp(58px, 11vw, 72px);
  height: clamp(58px, 13.9vw, 88px);
  color: #788292;
}

.login-page .auth-form .primary,
.login-page .auth-m-card .auth-m-btn {
  min-height: clamp(64px, 15.8vw, 100px);
  margin-top: clamp(42px, 9.8vw, 62px);
  color: #fff;
  background: #6263f2;
  border-radius: 16px !important;
  box-shadow: 0 18px 34px rgba(74, 75, 191, 0.2);
  font-size: 18px;
  font-weight: 850;
}

.login-page .auth-form .primary:hover,
.login-page .auth-m-card .auth-m-btn:hover {
  background: #5557e9;
}

@media (max-width: 900px) {
  .auth-m-page.login-page {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100dvh;
    padding: 30px;
    background: #eeecff !important;
  }

  .auth-m-page.login-page .auth-m-head {
    display: none;
  }

  .auth-m-page.login-page .auth-m-card {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 576px);
    min-height: calc(100dvh - 60px);
    margin: 0;
    padding: clamp(52px, 10.5vw, 74px) clamp(28px, 8.5vw, 54px) 54px;
    background: #f7f8fc;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px !important;
    box-shadow: none;
    transform: none;
  }

  .auth-m-page.login-page .auth-m-card h1 {
    color: #4338ca;
    font-size: clamp(36px, 8.7vw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .auth-m-page.login-page .auth-m-card form {
    margin-top: clamp(48px, 8vw, 60px);
  }

}

@media (max-width: 390px) {
  .login-page,
  .auth-m-page.login-page {
    padding: 16px;
  }

  .login-page .auth-shell,
  .auth-m-page.login-page .auth-m-card {
    min-height: calc(100dvh - 32px);
  }
}

/* Shared customer/admin sign-in: a mobile-first, single-path treatment. The
   generated header artwork is decorative only; the back control, fields, and
   submit action remain native, accessible UI. */
.login-page {
  padding: 0;
  background: #fff;
}

.login-page .auth-shell {
  width: min(100%, 736px);
  max-width: 736px;
  min-height: 100dvh;
  background: #fff;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}

.login-page .auth-hero {
  height: 220px;
  padding: 43px;
  background: #625cf6 url('/images/login-header-bubbles.png') center / cover no-repeat;
  border-radius: 0 0 52% 52% / 0 0 14% 14%;
}

.login-back {
  display: inline-grid;
  width: 70px;
  height: 70px;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 16px !important;
  cursor: pointer;
}

.login-back:hover { background: rgba(255, 255, 255, 0.12); }

.login-page .auth-form {
  padding: 30px 43px 64px;
}

.login-intro h1 {
  margin: 0;
  color: #202330;
  font-size: 42px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.login-intro p {
  margin: 11px 0 0;
  color: #73757d;
  font-size: 22px;
  line-height: 1.35;
}

.login-page .auth-form form {
  margin-top: 92px;
}

.login-page .auth-form label,
.auth-m-page.login-page .auth-m-card label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.login-page .auth-form form > .field-label-row,
.auth-m-page.login-page .auth-m-card form > .field-label-row {
  margin-top: 44px !important;
}

.login-page .auth-form input[type="email"],
.login-page .auth-form input[type="text"],
.login-page .auth-form input[type="password"],
.auth-m-page.login-page .auth-m-card input[type="email"],
.auth-m-page.login-page .auth-m-card input[type="text"],
.auth-m-page.login-page .auth-m-card input[type="password"] {
  height: 84px;
  padding-inline: 28px;
  color: #23252f;
  background: #fff;
  border: 1.5px solid #dedee1;
  border-radius: 22px !important;
  box-shadow: none;
  font-size: 13px !important;
}

.login-page .auth-form .password-field input,
.auth-m-page.login-page .auth-m-card .password-field input {
  padding-right: 84px;
}

.login-page .auth-form .password-toggle,
.auth-m-page.login-page .auth-m-card .password-toggle {
  width: 84px;
  height: 84px;
  color: #9da0a3;
}

.login-page .auth-form .primary,
.auth-m-page.login-page .auth-m-card .auth-m-btn {
  min-height: 86px;
  margin-top: 62px;
  background: #625cf6;
  border-radius: 22px !important;
  box-shadow: none;
  font-size: 21px;
}

.login-page .auth-form .primary:hover,
.auth-m-page.login-page .auth-m-card .auth-m-btn:hover {
  background: #514be8;
}

@media (max-width: 900px) {
  .auth-m-page.login-page {
    display: block;
    min-height: 100dvh;
    padding: 0;
    background: #fff !important;
  }

  .auth-m-page.login-page .auth-m-head {
    position: relative;
    display: block;
    height: 220px;
    padding: 43px;
    background: #625cf6 url('/images/login-header-bubbles.png') center / cover no-repeat !important;
    border-radius: 0 0 52% 52% / 0 0 14% 14%;
  }

  .auth-m-page.login-page .auth-m-card {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 30px 43px 64px;
    background: #fff;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    transform: none;
  }

  .auth-m-page.login-page .auth-m-card h1 {
    color: #202330;
    font-size: 42px;
  }

  .auth-m-page.login-page .auth-m-card form {
    margin-top: 92px;
  }
}

@media (max-width: 480px) {
  .login-page .auth-hero,
  .auth-m-page.login-page .auth-m-head {
    height: 188px;
    padding: 28px 24px;
  }

  .login-back {
    width: 54px;
    height: 54px;
  }

  .login-page .auth-form,
  .auth-m-page.login-page .auth-m-card {
    padding: 28px 24px 48px;
  }

  .login-intro h1 { font-size: 34px; }
  .login-intro p { font-size: 18px; }
  .login-page .auth-form form,
  .auth-m-page.login-page .auth-m-card form { margin-top: 64px; }
  .login-page .auth-form input[type="email"],
  .login-page .auth-form input[type="text"],
  .login-page .auth-form input[type="password"],
  .auth-m-page.login-page .auth-m-card input[type="email"],
  .auth-m-page.login-page .auth-m-card input[type="text"],
  .auth-m-page.login-page .auth-m-card input[type="password"] { height: 62px; border-radius: 18px !important; }
  .login-page .auth-form .password-toggle,
  .auth-m-page.login-page .auth-m-card .password-toggle { width: 62px; height: 62px; }
  .login-page .auth-form .primary,
  .auth-m-page.login-page .auth-m-card .auth-m-btn { min-height: 66px; margin-top: 44px; border-radius: 18px !important; font-size: 18px; }
}

/* Mobile admin uses the same single-column structure as customer sign-in,
   while carrying through the desktop admin charcoal header and indigo action. */
@media (max-width: 900px) {
  .auth-m-page.login-page.admin-login-page {
    display: block;
    min-height: 100dvh;
    padding: 0;
    background: #fff !important;
  }

  .auth-m-page.login-page.admin-login-page .auth-m-head {
    position: relative;
    display: block;
    height: 220px;
    padding: 43px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 54px 54px,
      linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 54px 54px,
      linear-gradient(135deg, #14161a, #2c2e3a 55%, #0b0c0e) !important;
    border-radius: 0 0 52% 52% / 0 0 14% 14%;
  }

  .auth-m-page.login-page.admin-login-page .auth-m-card {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 30px 43px 64px;
    background: #fff;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    transform: none;
  }

  .auth-m-page.login-page.admin-login-page .auth-m-btn { background: #6366f1; }
  .auth-m-page.login-page.admin-login-page .auth-m-btn:hover { background: #818cf8; }
}

@media (max-width: 480px) {
  .auth-m-page.login-page.admin-login-page .auth-m-head { height: 188px; padding: 28px 24px; }
  .auth-m-page.login-page.admin-login-page .auth-m-card { padding: 28px 24px 48px; }
}

/* A mobile sign-in error belongs to the credentials it describes. Keep it
   directly above the first field instead of preserving the no-error form gap. */
@media (max-width: 900px) {
  .auth-m-page.login-page .auth-m-card {
    padding-top: 54px;
  }

  .auth-m-page.login-page .login-intro + .alert {
    margin-top: 24px;
  }

  .auth-m-page.login-page .auth-m-card:has(> .alert) form {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .auth-m-page.login-page .auth-m-card {
    padding-top: 48px;
  }
}

/* Keep the rounded outer text-field containers, but flatten their nested
   controls, the expanded bank menu, and each bank-name option. */
.page-generate-link .pm-payer-input,
.page-generate-link .bank-combobox-menu,
.page-generate-link .bank-combobox-option {
  border-radius: 0 !important;
}

/* FPX bank picker: square the option cards, and let long bank names
   (Bank Muamalat, Hong Leong Bank, Kuwait Finance House) wrap cleanly
   inside the card instead of spilling past the rounded corner. */
.pm-bank {
  border-radius: 0 !important;
}

.pm-bank-name {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* ---- Agent bank accounts (AdminUsers) + automatic agent payouts (AdminSettlement) ---- */
.agent-bank-form-actions,
.agent-payout-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* ---- "Agent earnings" merged card (AdminUsers) ----
   The card carries far more than the label-left / compact-form-right pattern
   .users-action-card assumes (one agent lookup, a commission form, an
   accounts table, and a verified add form), so opt it out of that grid and
   let its blocks stack in one column. */
.agent-earnings-card.users-action-card {
  display: block;
  padding: 16px 18px;
}

.agent-earnings-card .users-card-head {
  margin-bottom: 10px;
}

.agent-earnings-agent {
  max-width: 340px;
}

.agent-earnings-agent-select {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 32px 0 11px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.18);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.agent-earnings-agent-select:focus-visible {
  outline: none;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}

.agent-earnings-card > .subtitle {
  margin: 6px 0 0;
}

.agent-earnings-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.agent-earnings-block > h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

/* The commission form loses its email cell in the merged card — 3 controls
   left, and they should keep the tidy row on a wide card. */
.agent-earnings-card .agent-commission-form {
  grid-template-columns: minmax(160px, 1fr) 132px auto;
}

/* Verified add/edit form: two columns on a roomy card, one on a phone. The
   check result, the "set as primary" row, and the actions span full width. */
.agent-bank-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px 16px;
  margin-top: 14px;
}

.agent-bank-form > .alert,
.agent-bank-form > .admin-checkbox-row,
.agent-bank-form-actions {
  grid-column: 1 / -1;
}

.agent-bank-form-actions {
  justify-content: flex-end;
}

.agent-bank-table th:nth-child(4),
.agent-bank-table th:nth-child(5),
.agent-bank-table td:nth-child(4),
.agent-bank-table td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
}

.agent-bank-table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.agent-bank-table-actions .button-secondary-small {
  margin: 0;
}

.agent-bank-verified,
.agent-bank-unverified {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.agent-bank-verified {
  color: var(--green, #15803d);
}

.agent-bank-unverified {
  color: var(--amber, #b45309);
}

/* Directory-table "Agent payout" cell: switch above, primary-bank line below. */
.agent-payout-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.agent-payout-cell-bank {
  font-size: 11px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ---- Compact on/off switch (AdminSwitch) ---- */
.admin-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.admin-switch.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.admin-switch-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--line-strong, #c8c8d4);
  transition: background-color 0.15s ease;
}

.admin-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.admin-switch input:checked + .admin-switch-track {
  background: var(--blue);
}

.admin-switch input:checked + .admin-switch-track .admin-switch-thumb {
  transform: translateX(14px);
}

.admin-switch input:focus-visible + .admin-switch-track {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .agent-earnings-card .agent-commission-form,
  .agent-bank-form {
    grid-template-columns: 1fr;
  }
  .agent-bank-form-actions {
    justify-content: stretch;
  }
  .agent-bank-form-actions .primary {
    flex: 1;
  }
}

.agent-payout-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}

.agent-payout-accrued {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.agent-payout-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.agent-payout-subhead h3 {
  margin: 0;
  font-size: 13px;
}

.agent-payout-accrued-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-payout-accrued-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

/* ---- Bank picker dropdown on narrow screens ----
   The two-up option grid squeezed every bank name down to an ellipsis
   ("AmBank Berhad" -> "A…"). Below the tablet breakpoint: one readable
   column, and long names wrap over two lines instead of truncating. Placed
   last so it wins the cascade over the earlier max-width:900px block that
   set `white-space: nowrap`. */
@media (max-width: 900px) {
  .bank-combobox-menu {
    grid-template-columns: 1fr;
    left: -8px;
    right: -8px;
  }

  .bank-combobox-option {
    min-height: 44px;
    align-items: flex-start;
  }

  .bank-combobox-option.selected {
    grid-column: auto;
  }

  .bank-combobox-logo {
    margin-top: 1px;
  }

  .bank-combobox-copy {
    align-items: flex-start;
    padding-top: 2px;
  }

  .bank-combobox-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
}

/* ---- Bank picker on the generate-link page (PaymentSelect) ----
   Force a single full-width column at every width and line the panel up
   with the field edges: no negative left/right inset, no rounded corners.
   The earlier two-up grid squeezed every name to "A…" and the panel bled
   14px past the input on both sides. Placed last so it wins the cascade
   over the base rule and the max-width:900px block above. */
.page-generate-link .bank-combobox-menu {
  grid-template-columns: 1fr;
  left: 0;
  right: 0;
  border-radius: 0 !important;
}

.page-generate-link .bank-combobox-option,
.page-generate-link .bank-combobox-option.selected,
.page-generate-link .bank-combobox-option.active {
  grid-column: auto;
  border-radius: 0 !important;
}

.page-generate-link .bank-combobox-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* ===================================================================
   Admin › Settings  (frontend/src/AdminSettings.jsx)
   One consolidated configuration surface: fee schedule, automatic agent
   payouts, account provisioning, sign-in recovery, agent commission +
   bank accounts, account status. Built on the shared .admin-card /
   .alert / .primary primitives; this layer only owns page rhythm and a
   robust label-over-control form grid — deliberately no explicit
   grid-row placement like the retired .users-action-card had.
   =================================================================== */
.settings-page { width: 100%; }

.settings-overview {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 166px;
  margin-bottom: 24px;
  padding: 28px 30px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 78%, rgba(255, 255, 255, 0.09) 0 90px, transparent 91px),
    linear-gradient(135deg, #302c73 0%, #5147c7 58%, #6a6eee 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 24px 55px -34px rgba(35, 30, 105, 0.75);
}

.settings-overview::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -42px;
  top: -78px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.settings-overview-copy { max-width: 620px; }

.settings-overview-kicker {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.settings-overview h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: -0.035em;
}

.settings-overview p {
  max-width: 58ch;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.settings-overview-meta {
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 196px;
}

.settings-overview-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 7px 11px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 750;
  backdrop-filter: blur(8px);
}

.settings-overview-meta b { color: #fff; font-size: 14px; }

.settings-overview-meta i {
  width: 7px;
  height: 7px;
  background: #83f1c3;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(131, 241, 195, 0.1);
}

.settings-layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.settings-directory {
  position: sticky;
  top: 20px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(44, 46, 58, 0.09);
  border-radius: 14px;
  box-shadow: 0 18px 42px -36px rgba(44, 46, 58, 0.65);
  backdrop-filter: blur(12px);
}

.settings-directory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 10px;
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.settings-directory-head b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--blue);
  background: rgba(99, 102, 241, 0.1);
  border-radius: 7px;
  font-size: 10px;
}

.settings-jump {
  display: grid;
  gap: 3px;
}

.settings-jump a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 8px;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.settings-jump a:hover,
.settings-jump a:focus-visible {
  color: var(--text);
  background: #fff;
  border-color: rgba(99, 102, 241, 0.12);
  outline: none;
  transform: translateX(2px);
}

.settings-jump-icon,
.settings-block-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--blue);
  background: rgba(99, 102, 241, 0.09);
  border: 1px solid rgba(99, 102, 241, 0.1);
}

.settings-jump-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.settings-jump-copy { display: grid; gap: 2px; min-width: 0; }

.settings-jump-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 11.5px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-jump-copy small {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 9.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-jump-number {
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.settings-directory-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 9px 5px 2px;
  padding: 11px 9px 5px;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.45;
}

.settings-directory-note svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-muted); }

.settings-sections { min-width: 0; }

.settings-sections > .alert { margin: 0 0 18px; }

.settings-block {
  margin-top: 42px;
  scroll-margin-top: 20px;
}

.settings-block:first-of-type { margin-top: 0; }

.settings-block:target .settings-block-icon {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 8px 20px -10px rgba(67, 56, 202, 0.75);
}

.settings-block-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
  padding: 0 2px;
}

.settings-block-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.settings-block-copy { min-width: 0; }

.settings-block-head .users-card-kicker { margin-bottom: 4px; }

.settings-block-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-block-head h2 {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.settings-block-head p {
  margin-top: 5px;
  max-width: 70ch;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

.settings-status {
  padding: 3px 9px;
  color: var(--blue);
  background: rgba(99, 102, 241, 0.1);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.settings-card {
  padding: 23px 24px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(44, 46, 58, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 45px -38px rgba(44, 46, 58, 0.72);
}
.settings-card:has(.users-method-select.open) { position: relative; z-index: 40; }

.settings-card:focus-within {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 20px 48px -38px rgba(44, 46, 58, 0.72), 0 0 0 3px rgba(99, 102, 241, 0.035);
}

.settings-card > .alert { margin: 0 0 14px; }
.settings-card label:first-of-type { margin-top: 0; }

.settings-card-title {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 850;
}

.settings-form { display: grid; gap: 16px; }
.settings-form .admin-checkbox-row { margin: 0 !important; }
.settings-form > .alert { margin: 0; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 18px;
}

.settings-grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.settings-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.settings-field > span,
.settings-field > label {
  margin: 0;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.settings-field input,
.settings-field select {
  width: 100%;
  height: 44px;
  margin: 0;
}

.settings-field select {
  padding: 0 12px;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(46, 42, 107, 0.28);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.settings-field select:focus {
  outline: none;
  background: #f5f3ee;
  border-color: rgba(99, 102, 241, 0.44);
  box-shadow: var(--shadow-focus);
}

.settings-field .users-method-select-toggle { height: 44px; }

.settings-field .pm-static-value {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(44, 46, 58, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 750;
}

.settings-field .pm-static-value.is-placeholder {
  color: var(--text-muted);
  font-weight: 600;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.settings-actions .primary,
.settings-actions button.primary {
  width: auto;
  min-width: 168px;
  margin-top: 0;
}

.settings-actions .button-secondary-small { margin: 0; }

.settings-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.55;
}

.settings-hint b { color: var(--text); font-weight: 850; }

/* email field + one or two inline verb buttons (Unlock / Check status /
   Reset 2FA / Suspend). The field flexes, the buttons stay their own width
   and bottom-align with the input. */
.settings-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.settings-inline .settings-field { flex: 1 1 240px; }

.settings-inline .primary,
.settings-inline button.primary,
.settings-inline .button-secondary-small {
  width: auto;
  min-width: 132px;
  height: 42px;
  margin: 0;
}

.settings-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.settings-subsection {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.settings-subsection:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.settings-subsection > h3 {
  margin-bottom: 13px;
  font-size: 13px;
  font-weight: 850;
}

.settings-agent-picker {
  max-width: 460px;
  padding: 14px;
  background: rgba(99, 102, 241, 0.045);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 10px;
}

.settings-card--danger {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(189, 53, 82, 0.035));
  border-color: rgba(189, 53, 82, 0.24);
}
.settings-card--danger .settings-inline { max-width: 440px; }

/* AgentPayoutPanel + AgentBankAccounts keep their own established inner
   styles; only the wrappers move into the settings rhythm. */
.settings-card.agent-payout-card { display: block; }
.settings-card .agent-bank-form { margin-top: 4px; }

@media (max-width: 1040px) {
  .settings-layout { grid-template-columns: 194px minmax(0, 1fr); gap: 22px; }
  .settings-jump a { grid-template-columns: 32px minmax(0, 1fr); }
  .settings-jump-icon { width: 32px; height: 32px; }
  .settings-jump-number { display: none; }
}

@media (max-width: 900px) {
  .settings-overview { min-height: 0; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-directory { position: static; }
  .settings-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-jump a:hover,
  .settings-jump a:focus-visible { transform: translateY(-1px); }
  .settings-directory-note { display: none; }
}

@media (max-width: 820px) {
  .settings-duo { grid-template-columns: 1fr; }
  .settings-grid--duo { grid-template-columns: 1fr; }
  .settings-block { margin-top: 36px; }
}

@media (max-width: 680px) {
  .settings-overview { display: grid; gap: 20px; padding: 22px; border-radius: 14px; }
  .settings-overview-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .settings-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .settings-overview { padding: 20px; }
  .settings-overview-meta { grid-template-columns: 1fr; }
  .settings-directory { padding: 8px; }
  .settings-jump-copy strong { font-size: 12px; }
  .settings-jump-copy small { font-size: 10px; }
  .settings-block-head { gap: 10px; }
  .settings-block-icon { width: 36px; height: 36px; }
  .settings-card { padding: 17px; border-radius: 12px; }
  .settings-actions .primary,
  .settings-actions button.primary { width: 100%; min-width: 0; }
  .settings-inline .primary,
  .settings-inline button.primary,
  .settings-inline .button-secondary-small { width: 100%; }
}

@media (max-width: 360px) {
  .settings-jump { grid-template-columns: 1fr; }
}

/* Anchor styled as the small secondary pill (e.g. Users → "Account
   settings" header link) — kill the default underline. */
a.button-secondary-small { text-decoration: none; }

/* Minimal settings control panel -----------------------------------------
   Keep the administration surface quiet: one text-based section rail,
   restrained borders, and no decorative hero or icon tiles. The controls
   remain visually distinct without competing with the operator's data. */
.settings-page { max-width: 1080px; }

.settings-layout {
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 36px;
}

.settings-directory {
  padding: 0 0 0 14px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.settings-directory-head {
  justify-content: flex-start;
  padding: 1px 0 9px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.settings-directory-head b,
.settings-directory-note { display: none; }

.settings-jump { gap: 1px; }

.settings-jump a {
  display: block;
  padding: 7px 0;
  color: var(--text-muted);
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.14s ease;
}

.settings-jump a::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px 2px 0;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.45;
}

.settings-jump a:hover,
.settings-jump a:focus-visible {
  color: var(--text);
  background: transparent;
  border: 0;
  transform: none;
}

.settings-block {
  margin-top: 0;
  padding: 0 0 36px;
  border-bottom: 1px solid var(--line);
}

.settings-block + .settings-block { padding-top: 36px; }
.settings-block:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-block:target .settings-block-icon { box-shadow: none; }

.settings-block-head {
  display: block;
  margin-bottom: 16px;
  padding: 0;
}

.settings-block-icon { display: none; }
.settings-block-head .users-card-kicker { margin-bottom: 5px; color: var(--text-faint); font-size: 9px; }

.settings-block-head h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.settings-block-head p {
  max-width: 68ch;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.settings-card {
  padding: 20px;
  background: var(--card);
  border-color: var(--line);
  border-radius: 8px !important;
  box-shadow: none;
}

.settings-card:focus-within {
  border-color: rgba(99, 102, 241, 0.28);
  box-shadow: none;
}

.settings-card--danger {
  background: var(--card);
  border-color: rgba(189, 53, 82, 0.25);
}

.settings-field input,
.settings-field select,
.settings-field .users-method-select-toggle { height: 40px; }

.settings-field select,
.settings-field .pm-static-value { border-radius: 5px; }

.settings-grid { gap: 14px; }
.settings-form { gap: 14px; }

.settings-actions { gap: 8px; }

.settings-actions .primary,
.settings-actions button.primary {
  min-width: 0;
  min-height: 38px;
  padding-inline: 15px;
  border-radius: 5px;
}

.settings-actions .button-secondary-small,
.settings-inline .button-secondary-small {
  min-height: 38px;
  border-radius: 5px;
}

.settings-subsection {
  margin-top: 20px;
  padding-top: 18px;
}

.settings-agent-picker {
  max-width: 440px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; gap: 20px; }

  .settings-directory {
    padding: 0 0 10px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }

  .settings-directory-head { display: none; }

  .settings-jump {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 0;
  }

  .settings-jump a {
    flex: 0 0 auto;
    padding: 0 12px;
    border-right: 1px solid var(--line);
    font-size: 11px;
  }

  .settings-jump a:first-child { padding-left: 0; }
  .settings-jump a:last-child { border-right: 0; }
  .settings-jump a::before { display: none; }
}

@media (max-width: 560px) {
  .settings-block { padding-bottom: 30px; }
  .settings-block + .settings-block { padding-top: 30px; }
  .settings-card { padding: 16px; }
  .settings-block-head h2 { font-size: 16px; }
}

/* Fintech control centre refinement -------------------------------------
   Use the familiar configuration-console pattern: a labelled navigation
   panel, grouped control domains, white operational surfaces, and one
   decisive primary action. */
.settings-page { max-width: 1100px; }

.settings-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
}

.settings-control-bar > div { display: grid; gap: 2px; }

.settings-control-eyebrow,
.settings-nav-group > span {
  color: #7a8492;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.settings-control-bar strong {
  color: #202735;
  font-size: 13px;
  font-weight: 800;
}

.settings-control-bar a {
  padding: 7px 10px;
  color: #384456;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.settings-control-bar a:hover { color: #111827; background: #f7f8fa; }

.settings-layout {
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 24px;
}

.settings-directory {
  padding: 14px 10px 10px;
  background: #fff;
  border: 1px solid #dfe3ea;
  border-left: 1px solid #dfe3ea;
  border-radius: 10px;
  box-shadow: none;
}

.settings-directory-head {
  display: grid;
  gap: 3px;
  padding: 1px 7px 13px;
  color: #202735;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.settings-directory-head b {
  display: block;
  width: auto;
  height: auto;
  color: #7a8492;
  background: transparent;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
}

.settings-jump { display: grid; gap: 13px; }

.settings-nav-group { display: grid; gap: 2px; }
.settings-nav-group > span { padding: 0 7px 4px; }

.settings-jump a {
  position: relative;
  display: block;
  padding: 7px 8px 7px 12px;
  color: #536071;
  border: 0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
}

.settings-jump a::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  margin: 0;
  background: #64748b;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-50%);
}

.settings-jump a:hover,
.settings-jump a:focus-visible {
  color: #172033;
  background: #f2f5f8;
}

.settings-jump a:hover::before,
.settings-jump a:focus-visible::before { opacity: 1; }

.settings-directory-note {
  display: block;
  margin: 15px 7px 1px;
  padding: 11px 0 0;
  color: #7a8492;
  border-top: 1px solid #edf0f3;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.settings-block {
  padding-bottom: 30px;
  border-color: #dfe3ea;
}

.settings-block + .settings-block { padding-top: 30px; }

.settings-block-head { margin-bottom: 13px; }
.settings-block-head .users-card-kicker { color: #7a8492; }

.settings-block-head h2 {
  color: #202735;
  font-size: 18px;
  font-weight: 800;
}

.settings-block-head p { color: #657182; font-size: 12px; }

.settings-card {
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 10px !important;
}

.settings-card:focus-within { border-color: #9ba8ba; }

.settings-card .settings-field input,
.settings-card .settings-field select,
.settings-card .settings-field .users-method-select-toggle {
  color: #202735;
  background: #fff;
  border-color: #cfd7e2;
  border-radius: 6px;
}

.settings-card .settings-field input:focus,
.settings-card .settings-field select:focus,
.settings-card .settings-field .users-method-select-toggle:focus-visible {
  border-color: #59677a;
  box-shadow: 0 0 0 3px rgba(89, 103, 122, 0.12);
}

.settings-field > span,
.settings-field > label { color: #657182; }

.settings-actions .primary,
.settings-actions button.primary {
  color: #fff;
  background: #1f2937;
  border: 1px solid #1f2937;
  border-radius: 6px;
  box-shadow: none;
}

.settings-actions .primary:hover,
.settings-actions button.primary:hover { background: #111827; }

.settings-actions .button-secondary-small,
.settings-inline .button-secondary-small {
  color: #384456;
  background: #fff;
  border-color: #cfd7e2;
  border-radius: 6px;
}

.settings-card--danger { border-color: #e8c7ce; }

@media (max-width: 900px) {
  .settings-control-bar { margin-bottom: 14px; }
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }

  .settings-directory {
    padding: 0 0 10px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dfe3ea;
    border-radius: 0;
  }

  .settings-directory-head,
  .settings-directory-note,
  .settings-nav-group > span { display: none; }

  .settings-jump,
  .settings-nav-group {
    display: flex;
    gap: 0;
  }

  .settings-jump { width: max-content; min-width: 100%; }

  .settings-jump a {
    padding: 0 12px;
    border-right: 1px solid #dfe3ea;
    border-radius: 0;
    white-space: nowrap;
  }

  .settings-jump a::before { display: none; }
  .settings-nav-group:first-child a:first-of-type { padding-left: 0; }
  .settings-nav-group:last-child a:last-child { border-right: 0; }
}

@media (max-width: 560px) {
  .settings-control-bar { padding: 11px 12px; }
  .settings-control-bar a { padding: 6px 8px; font-size: 10px; }
}

/* ============================================================================
   TABLE REDESIGN — filter panel, ledger table, pagination
   Flat and compact, aligned to the rest of the admin (grey --field controls,
   hairline borders, small radius). One header bar carries the title, the live
   count, and Export / Columns / Clear; the field grid auto-flows to fill the
   row. Appended last so it wins over the earlier gradient/pill treatment
   without editing that (churny) region in place.
   ========================================================================== */

/* ---- Filter panel ---- */
.admin-filter-panel {
  padding: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.admin-filter-panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
}

.admin-filter-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-filter-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.admin-filter-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.admin-filter-clear {
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-filter-clear:hover { background: rgba(99, 102, 241, 0.08); }

.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: end;
  gap: 12px 14px;
  padding: 14px 20px 16px;
}

.admin-filter-field,
.admin-filter-field-wide {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
  grid-column: auto;
}

/* The Created-At range holds two date inputs + the preset picker, so it
   takes two of the auto-flow tracks. */
.admin-filter-field-wide { grid-column: span 2; }

.admin-filter-field .admin-filter-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-filter-field.is-active .admin-filter-label { color: var(--navy); }

.admin-filter-field input[type="text"],
.admin-filter-field input[type="date"],
.admin-filter-field .admin-select-toggle {
  height: 36px;
  color: var(--text);
  background-color: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}

.admin-filter-field input[type="text"] { padding-inline: 11px; }

.admin-filter-field input[type="text"]::placeholder { color: var(--text-faint); opacity: 1; }

.admin-filter-field input:focus,
.admin-filter-field .admin-select.open .admin-select-toggle {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: var(--shadow-focus);
}

.admin-filter-field.is-active input[type="text"],
.admin-filter-field.is-active input[type="date"],
.admin-filter-field.is-active .admin-select-toggle {
  border-color: rgba(99, 102, 241, 0.42);
  background-color: rgba(99, 102, 241, 0.05);
  box-shadow: none;
}

.admin-filter-daterange {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(108px, 0.85fr);
  align-items: center;
  gap: 7px;
}

.admin-filter-daterange input[type="date"] {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
}

.admin-filter-daterange-sep {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 700;
}

.admin-filter-presets { width: 100%; min-width: 0; flex: none; }
.admin-filter-presets .admin-select-toggle { height: 36px; font-size: 12px; }

.admin-export-button {
  height: 36px;
  color: var(--navy);
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(67, 56, 202, 0.2);
  border-radius: var(--radius-sm);
}

.admin-column-picker-toggle {
  height: 36px;
  min-height: 36px;
  padding-inline: 11px;
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.admin-column-picker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 17px;
  padding-inline: 5px;
  color: var(--text-muted);
  background: rgba(46, 42, 107, 0.08);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
}

/* ---- Ledger table (Payments' Payment history) ---- */
.admin-payment-ledger .admin-table-scroll {
  background: var(--card);
}

.admin-payment-ledger .admin-table { font-size: 12.5px; }

.admin-payment-ledger .admin-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 9px;
  color: var(--text-muted);
  background: #f4f4f8;
  border-bottom: 1px solid var(--line-strong);
  font-size: 9.5px;
  letter-spacing: 0.07em;
}

.admin-payment-ledger .admin-th-sortable-inner { padding-block: 9px; }

.admin-payment-ledger .admin-table td {
  height: 44px;
  padding-block: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

/* No zebra — row hairlines + a firm hover carry the scan. */
.admin-payment-ledger .admin-table tbody tr:nth-child(even) td { background: var(--card); }
.admin-payment-ledger .admin-table tbody tr:hover td { background: rgba(99, 102, 241, 0.06); }

.admin-payment-ledger .admin-table th:first-child,
.admin-payment-ledger .admin-table td:first-child {
  position: sticky;
  left: 0;
  width: 46px;
  min-width: 46px;
  padding-inline: 16px 8px;
}

.admin-payment-ledger .admin-table th:first-child { z-index: 4; background: #f4f4f8; }

.admin-payment-ledger .admin-table td:first-child {
  z-index: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.admin-payment-ledger .admin-table td.admin-td-numeric {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---- Pagination ---- */
.admin-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.admin-pagination-count {
  justify-self: start;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.admin-pagination-pages { justify-self: center; gap: 5px; }

.admin-pagination-arrow,
.admin-pagination-page {
  min-width: 30px;
  height: 30px;
  padding-inline: 7px;
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.admin-pagination-page.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: none;
}

.admin-pagination-rows { justify-self: end; font-size: 11.5px; }

.admin-pagination-rows select {
  height: 30px;
  min-width: 56px;
  padding-left: 10px;
  background-color: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ---- Responsive overrides for the redesign ---- */
@media (max-width: 1200px) and (min-width: 901px) {
  .admin-filter-field { grid-column: auto; }
  .admin-filter-field-wide { grid-column: span 2; }
}

@media (max-width: 900px) {
  .admin-filter-panel { padding: 0; }
  .admin-filter-panel-head { display: flex; padding: 11px 14px; }
  .admin-filter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 12px 14px 14px; }
  .admin-filter-grid.is-open { display: grid; }
  .admin-filter-field { grid-column: auto; }
  .admin-filter-field-wide { grid-column: 1 / -1; }
  .admin-pagination { grid-template-columns: 1fr 1fr; }
  .admin-pagination-count { grid-column: 1; grid-row: 1; justify-self: start; }
  .admin-pagination-rows { grid-column: 2; grid-row: 1; justify-self: end; }
  .admin-pagination-pages { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  body .admin-payment-ledger.admin-table-card { border-radius: 0 !important; }
  .admin-filter-panel-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .admin-filter-action-buttons { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .admin-filter-field,
  .admin-filter-field-wide { grid-column: 1 / -1; }
  .admin-filter-daterange { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .admin-filter-presets { grid-column: 1 / -1; }
  .admin-pagination { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .admin-pagination-count,
  .admin-pagination-rows,
  .admin-pagination-pages { grid-column: 1; justify-self: center; }
  .admin-pagination-count { grid-row: 1; }
  .admin-pagination-pages { grid-row: 2; }
  .admin-pagination-rows { grid-row: 3; }
}

/* ---- Super-search + collapsible filter grid (all viewports) ----
   One always-visible search box matches across a table's key text columns at
   once; every other filter (dropdowns, the Created-At range) lives behind the
   "Filters" toggle and only renders while it's open. */
.admin-filter-grid { display: none; }
.admin-filter-grid.is-open { display: grid; }

.admin-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 460px;
  height: 36px;
  padding: 0 10px;
  background-color: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.admin-filter-search:focus-within {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: var(--shadow-focus);
}

.admin-filter-search > svg {
  flex-shrink: 0;
  color: var(--text-faint);
}

/* The search box IS the field frame — the input inside carries no fill,
   border, or focus box of its own (cancels the global input / input:focus
   rules that would otherwise paint a second inset rectangle). */
.admin-filter-search input[type="text"],
.admin-filter-search input[type="text"]:focus {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.admin-filter-search input[type="text"]::placeholder { color: var(--text-faint); opacity: 1; }

.admin-filter-search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.admin-filter-search-clear:hover { color: var(--text); }

.admin-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-filter-toggle:hover { background: rgba(99, 102, 241, 0.06); }

.admin-filter-toggle.is-open {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.admin-filter-toggle.is-open .admin-filter-active-count {
  color: var(--blue);
  background: #fff;
}

/* Created-At range, pinned in the head ahead of the search box. */
.admin-filter-panel-head .admin-filter-head-field {
  flex: 0 1 auto;
  gap: 5px;
}

@media (min-width: 601px) {
  /* The date field carries a label and the search box doesn't, so bottom-align
     the head row: the two date inputs, the preset picker and the search bar all
     share one baseline, with "CREATED AT" sitting above. */
  .admin-filter-panel-head { align-items: flex-end; }
  .admin-filter-panel-head .admin-filter-head-field .admin-filter-daterange {
    grid-template-columns: 130px auto 130px 118px;
  }
}

@media (max-width: 600px) {
  .admin-filter-search { flex-basis: 100%; width: 100%; max-width: none; }
  .admin-filter-panel-head .admin-filter-head-field { width: 100%; }
}

/* ---- One card, not split zones ----
   The table card is a single white rounded surface wrapping filters + table
   + pagination. Internal areas share the one fill; only hairlines divide
   them. `overflow: hidden` clips the flush inner corners to the card radius. */
body .admin-table-card {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 0 !important;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 14px 30px -20px rgba(20, 20, 30, 0.16);
  overflow: hidden;
}

.admin-filter-panel,
.admin-filter-panel-head,
.admin-filter-grid,
.admin-pagination,
.admin-payment-ledger .admin-table-scroll,
.admin-payment-ledger .admin-table td {
  background: var(--card);
}

@media (max-width: 600px) {
  body .admin-table-card { border-radius: 0 !important; }
}

/* This route intentionally uses the full admin content width. Kept at the
   end of the cascade because older settings experiments above cap it. */
.settings-page { max-width: none; }

@media (max-width: 900px) {
  /* The desktop brand button declares width:100%. In the mobile flex header
     that width is added to the account controls and makes the whole admin
     workspace wider than the viewport. Let flex own the width instead. */
  .admin-sidebar-brand,
  .admin-sidebar.collapsed .admin-sidebar-brand { width: auto; }
}

/* Every admin table keeps a visible horizontal scrollbar along its bottom
   edge — macOS overlay scrollbars otherwise stay hidden until the user
   scrolls, which hid the fact that these wide tables scroll sideways.
   Neutral grey thumb/track, including on the payment-ledger tables that
   carry their own scoped scrollbar rules. */
.admin-table-scroll,
.admin-payment-ledger .admin-table-scroll {
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 103, 115, 0.5) rgba(100, 103, 115, 0.12);
}

.admin-table-scroll::-webkit-scrollbar,
.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar {
  height: 10px;
  -webkit-appearance: none;
}

.admin-table-scroll::-webkit-scrollbar-track,
.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar-track {
  background: rgba(100, 103, 115, 0.1);
}

.admin-table-scroll::-webkit-scrollbar-thumb,
.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 103, 115, 0.55);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.admin-table-scroll::-webkit-scrollbar-thumb:hover,
.admin-payment-ledger .admin-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 103, 115, 0.75);
  background-clip: padding-box;
}

/* ==========================================================================
   Filters popover (FilterPanel in AdminTables). One "Filters" button in the
   head opens a single floating card, dropped under the button's left edge,
   holding every non-date filter as a labelled dropdown. Reset clears just
   these fields; the head's "Clear all" still wipes search + date range too.
   The old .admin-filter-grid rules above are no longer rendered against.
   ========================================================================== */
.admin-filter-pop { display: inline-flex; }

.admin-filter-popover {
  position: fixed;
  z-index: 66;
  max-width: calc(100vw - 24px);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.admin-filter-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-filter-popover-reset {
  padding: 0;
  color: var(--blue);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
}

.admin-filter-popover-reset:hover { text-decoration: underline; }

.admin-filter-popover-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  max-height: min(420px, calc(100vh - 180px));
  overflow-y: auto;
}

.admin-filter-pop-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.admin-filter-pop-field .admin-filter-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-filter-pop-field.is-active .admin-filter-label { color: var(--navy); }

.admin-filter-pop-field input[type="text"] {
  height: 36px;
  padding: 0 11px;
  color: var(--text);
  background-color: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.admin-filter-pop-field .admin-select-toggle {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.admin-filter-popover-foot {
  display: flex;
  justify-content: flex-end;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
}

.admin-filter-popover-done {
  height: 32px;
  padding: 0 18px;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

/* Pagination footer: keep "Rows per page" (and its select) at the exact same
   type as the "Showing x–y of n" count on the other end. */
.admin-pagination-rows,
.admin-pagination-rows select {
  font-size: 11.5px;
  font-weight: 700;
}

/* ==========================================================================
   Toolbar buttons — Filters / Columns / Export share ONE purple-tinted look.
   (Columns previously used a grey --field fill and a grey count chip.)
   ========================================================================== */
.admin-filter-toggle,
.admin-column-picker-toggle,
.admin-export-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  padding: 0 13px;
  color: var(--navy);
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.admin-filter-toggle:hover,
.admin-column-picker-toggle:hover,
.admin-export-button:hover {
  background: rgba(99, 102, 241, 0.13);
  border-color: rgba(99, 102, 241, 0.45);
}

.admin-filter-toggle svg,
.admin-column-picker-toggle svg,
.admin-export-button svg { color: currentColor; }

/* Active/open state: solid indigo fill so it clearly reads as engaged. */
.admin-filter-toggle.is-open {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* Count chips inside the buttons, tuned to each background. */
.admin-column-picker-count {
  color: var(--navy);
  background: rgba(99, 102, 241, 0.16);
}

.admin-filter-active-count {
  color: #fff;
  background: var(--blue);
}

.admin-filter-toggle.is-open .admin-filter-active-count {
  color: var(--blue);
  background: #fff;
}