/* =====================================================================================================================
   Customer (client banking) portal: a cleaner, more modern feel. Look only: no markup, wording, behaviour or COLOUR is changed.

   Every colour here is one the portal already uses (its sage / olive palette, the currency accents, the dark theme): the colours come from
   the portal's own variables or are repeated from its own rules. What changes is the shape and the finish:
     - depth: soft layered shadows and hairline borders instead of flat boxes;
     - shape: larger, consistent corner radii; taller buttons and fields with a clear focus ring; segmented tabs and filters;
     - rhythm: more air around cards, rows and sections; tidier type (heading weight and spacing, aligned figures);
     - the menu: an icon in front of every item, in the item's own text colour;
     - the Accounts page: bigger balances, account details as tidy copy fields; quick actions as icon tiles.
   The window itself (the open canvas: the menu on the soft background, the page as one rounded panel) is app-shell.css.

   Loaded after app-shell.css and before customer-mobile.css (which stays last). Dark mode (the portal-dark class on #mainApp) works through
   the same variables, so nothing here sets a light-only colour on a surface.
   ===================================================================================================================== */

/* ── tokens: the portal's own colours under shorter names ─────────────────────────────────────────────────── */
/* (a variable that points at another is worked out where it is declared, so the ones that follow the dark theme are declared on #mainApp,
   the element that carries the portal-dark class) */
#mainApp {
  --rf-line: var(--border-color, #e8ede5);
  --rf-soft: var(--bg-muted, #fafbf8);
  --rf-edge: #d9dfd2;                         /* the firmer border the portal already uses on its menus and empty states */
}
#mainApp.portal-dark { --rf-edge: #535a4a; }
body {
  --rf-tint: #eef2e8;                         /* the pale green behind the portal's icons */
  --rf-ring: rgba(72, 78, 30, .18);           /* the portal's focus colour */
  --rf-sh-1: 0 1px 2px rgba(40, 46, 18, .05), 0 0 0 1px rgba(40, 46, 18, .015);
  --rf-sh-2: 0 1px 2px rgba(40, 46, 18, .05), 0 10px 26px -14px rgba(40, 46, 18, .2);
  --rf-sh-3: 0 2px 4px rgba(40, 46, 18, .06), 0 22px 44px -18px rgba(40, 46, 18, .3);
  --rf-ease: cubic-bezier(.2, .7, .2, 1);
}
#mainApp.portal-dark {
  --rf-tint: #414737;
  --rf-ring: rgba(140, 169, 125, .3);
  --rf-sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --rf-sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6);
  --rf-sh-3: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -18px rgba(0, 0, 0, .7);
}

/* figures line up in columns wherever money is shown */
#mainApp .cp-bal-card .amt, #mainApp .cp-tx-amt, #mainApp .cp-tx-balance strong, #mainApp #cpPortfolioTotal, #mainApp .tf-sum-v,
#mainApp .cp-data-cell.amount, #mainApp .cp-info-tile strong, #mainApp .cp-profit-metric strong, #mainApp .cp-review-field dd,
#mainApp .bk-table td.num, #mainApp .bk-stat strong { font-variant-numeric: tabular-nums; }

/* ── the top bar ──────────────────────────────────────────────────────────────────────────────────────────── */
#mainApp .topbar-breadcrumb { gap: 10px; }
#mainApp .topbar-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--brand-glow-subtle); }
#mainApp .topbar-step-pill { letter-spacing: .08em; font-size: 10.5px; }
#mainApp .topbar-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
#mainApp .btn-hdr-action, #mainApp .portal-theme-toggle {
  height: 38px; border-radius: 12px; box-shadow: var(--rf-sh-1);
  transition: border-color .18s var(--rf-ease), box-shadow .18s var(--rf-ease), transform .18s var(--rf-ease), background .18s var(--rf-ease);
}
#mainApp .btn-hdr-action:hover, #mainApp .portal-theme-toggle:hover { box-shadow: var(--rf-sh-2); transform: translateY(-1px); }

/* ── the menu ─────────────────────────────────────────────────────────────────────────────────────────────── */
#mainApp .sidebar-brand-header { padding: 20px 20px 14px; border-bottom: 0; }
#mainApp .sidebar-logo-mark { border-radius: 12px !important; box-shadow: var(--rf-sh-1) !important; }
#mainApp .sidebar-brand-text .brand-name { font-size: 15px; letter-spacing: -.02em; }

#mainApp .sidebar-company-card { margin: 10px 14px 8px; padding: 16px; border-radius: 18px; box-shadow: var(--rf-sh-2); }
#mainApp .scc-identity { margin-bottom: 12px; }
#mainApp .scc-company-name { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
#mainApp .scc-meta-row { gap: 6px; margin-top: 6px; }
#mainApp .scc-crn, #mainApp .scc-cuid { font-family: var(--font); font-size: 10px; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; line-height: 1.25; }
#mainApp .scc-prog-container { padding-top: 12px; }
#mainApp .scc-prog-header { margin-bottom: 4px; letter-spacing: .02em; }
#mainApp #cpPortfolioTotal { font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.15; }

#mainApp .cp-nav-group-label { padding: 18px 24px 7px; font-size: 10px; letter-spacing: .12em; }
#mainApp .cp-nav-item {
  position: relative; gap: 12px; margin: 0 12px 3px; padding: 11px 14px; border-radius: 13px; font-size: 13.5px;
  transition: background .18s var(--rf-ease), color .18s var(--rf-ease), box-shadow .18s var(--rf-ease);
}
#mainApp .cp-nav-item::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor; opacity: .6; transition: opacity .18s var(--rf-ease);
  -webkit-mask: var(--rf-nav-icon) center / contain no-repeat; mask: var(--rf-nav-icon) center / contain no-repeat;
}
#mainApp .cp-nav-item:hover::before, #mainApp .cp-nav-item.active::before { opacity: 1; }
#mainApp .cp-nav-item:hover { box-shadow: var(--rf-sh-1); }
#mainApp .cp-nav-item.active { box-shadow: var(--rf-sh-2); }
#mainApp .cp-nav-item.active::after {      /* a short bar in the brand colour marks the open page */
  content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 18px; border-radius: 4px; background: var(--brand-primary); transform: translateY(-50%);
}
#mainApp.portal-dark .cp-nav-item.active::after { background: #8ca97d; }
#mainApp .cp-ft-chev { font-size: 15px; }
#mainApp .btn-hdr-signout { height: 42px; border-radius: 13px; }

#mainApp .cp-nav-item[data-view="dashboard"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="transfer"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="bulk-transfers"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4.5' cy='6' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='18' r='1.2'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="deposits"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6M5 10v8M19 10v8M9.5 10v8M14.5 10v8M3 20.5h18'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="beneficiaries"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 4.7a3.5 3.5 0 0 1 0 6.6M18 14.4c2 .8 3.5 2.5 3.5 5.6'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="approvals"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="requests"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
#mainApp .cp-nav-item[data-view="settings"] { --rf-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }

/* ── page headings and section titles ─────────────────────────────────────────────────────────────────────── */
#mainApp .cp-section-head { margin: 22px 0 12px; }
#mainApp .cp-section-head h2 { font-size: 17px; font-weight: 750; letter-spacing: -.015em; }
#mainApp .cp-accounts-head { margin: 0 0 12px; }
#mainApp .cp-accounts-heading-copy h2 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
#mainApp .cp-accounts-heading-copy p, #mainApp .cp-activity-copy p { font-size: 12.5px; }
#mainApp .cp-product-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
#mainApp .cp-product-head p { font-size: 13px; }
#mainApp .cp-product-badge, #mainApp .cp-account-count, #mainApp .cp-balance-privacy { box-shadow: var(--rf-sh-1); }
#mainApp .cp-balance-privacy, #mainApp .cp-account-count { display: inline-flex; align-items: center; padding: 9px 14px; font-size: 11.5px; line-height: 1.2; }

/* ── cards ────────────────────────────────────────────────────────────────────────────────────────────────── */
#mainApp .cp-card { border-radius: 20px; padding: 24px; box-shadow: var(--rf-sh-2); }
#mainApp .cp-workspace-card { padding: 24px; }
#mainApp .cp-grid-2 { gap: 24px; }
#mainApp .cp-workspace-grid { gap: 22px; }
#mainApp .cp-ft-head { margin-bottom: 16px; padding-bottom: 16px; }
#mainApp .cp-ft-head b { font-size: 17px; letter-spacing: -.015em; }
#mainApp .cp-ft-head span.s { font-size: 12.5px; }
#mainApp .cp-ft-ic { width: 44px; height: 44px; border-radius: 14px; }
#mainApp .cp-ft-change { padding: 8px 14px; border-radius: 12px; box-shadow: var(--rf-sh-1); transition: border-color .18s var(--rf-ease), box-shadow .18s var(--rf-ease), transform .18s var(--rf-ease); }
#mainApp .cp-ft-change:hover { box-shadow: var(--rf-sh-2); transform: translateY(-1px); }

/* ── the Accounts page: balance cards ─────────────────────────────────────────────────────────────────────── */
#mainApp .cp-accounts-grid { gap: 16px; padding: 4px 4px 26px; margin-bottom: -16px; }   /* room under the tiles for their shadow, which the scrolling row would otherwise cut off in a hard line */
#mainApp:not(.portal-dark) .cp-accounts-carousel { --account-carousel-fade: #ffffff; }   /* the edge fade matches the white page it sits on */
/* compact tiles: the balance and the account details take as little height as they can, so the rest of the page shows without scrolling */
#mainApp .cp-bal-card { container-type: inline-size; border-radius: 20px; padding: 14px 18px 14px; box-shadow: var(--rf-sh-2); }
#mainApp .cp-bal-card::before { width: 4px; }
#mainApp .cp-bal-card:hover { box-shadow: var(--rf-sh-3); transform: translateY(-2px); }
#mainApp .cp-bal-card.is-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-accent, #7b836b) 18%, transparent), var(--rf-sh-3); }
#mainApp .cp-currency-mark { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
#mainApp .cp-bal-card .lbl { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
#mainApp .cp-bal-card .account-type { margin-top: 2px; font-size: 11px; }
#mainApp .cp-bal-card .tag { padding: 3px 10px; font-size: 10.5px; }
#mainApp .cp-balance-label { margin-top: 10px; font-size: 10px; letter-spacing: .08em; }
#mainApp .cp-bal-card .amt { margin: 1px 0 10px; font-size: clamp(24px, 2vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
#mainApp .cp-amount-code { margin-left: 7px; font-size: 11.5px; letter-spacing: .06em; }
/* account number, IBAN and SWIFT sit straight on the tile (no box around each), under one hairline that separates them from the balance */
#mainApp .cp-account-details { margin: 0; padding-top: 10px; row-gap: 10px; column-gap: 22px; border-top: 1px solid var(--rf-line); }
#mainApp .cp-account-detail { padding: 0; border: 0; background: transparent; }
#mainApp .cp-account-detail-label { margin-bottom: 2px; font-size: 9px; letter-spacing: .08em; }
#mainApp .cp-account-detail-value { font-size: 11.5px; letter-spacing: .01em; }
#mainApp .cp-copy-detail { width: 24px; height: 24px; border-radius: 8px; }
/* a wide tile shows number, IBAN and SWIFT in one row instead of two */
@container (min-width: 480px) {
  #mainApp .cp-account-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr); grid-template-areas: 'number iban swift'; }
}
#mainApp .cp-account-nav { margin-top: 2px; gap: 12px; }
#mainApp .cp-account-nav-btn { width: 30px; height: 30px; border-radius: 10px; box-shadow: var(--rf-sh-1); }
#mainApp .cp-account-dot { width: 8px; height: 8px; }
#mainApp .cp-account-dot.is-active { width: 28px; }
#mainApp .cp-account-empty { border-radius: 20px; }

/* ── quick actions: icon tiles ────────────────────────────────────────────────────────────────────────────── */
#mainApp .cp-qa-grid { gap: 12px; }
#mainApp .cp-qa {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-align: left; border-radius: 16px; box-shadow: var(--rf-sh-1);
  transition: border-color .2s var(--rf-ease), box-shadow .2s var(--rf-ease), transform .2s var(--rf-ease);
}
#mainApp .cp-qa::before {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 12px; background-color: var(--rf-tint); background-repeat: no-repeat; background-position: center; background-size: 18px;
}
#mainApp .cp-qa::after {
  content: ""; flex: none; margin-left: auto; width: 16px; height: 16px; opacity: .4; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--rf-ease), opacity .2s var(--rf-ease);
}
#mainApp .cp-qa:hover { box-shadow: var(--rf-sh-2); transform: translateY(-2px); }
#mainApp .cp-qa:hover::after { opacity: .8; transform: translateX(3px); }
#mainApp .cp-qa .lb { font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; text-align: left; }
/* the tile icons are drawn in the portal's brand olive */
#mainApp .cp-qa-grid .cp-qa:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333715' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E"); }
#mainApp .cp-qa-grid .cp-qa:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333715' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.8'/%3E%3Cpath d='M3 20c0-3.8 3.1-6.2 7-6.2M18 13.5v6.5M14.8 16.8h6.4'/%3E%3C/svg%3E"); }
#mainApp .cp-qa-grid .cp-qa:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333715' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 4.7a3.5 3.5 0 0 1 0 6.6M18 14.4c2 .8 3.5 2.5 3.5 5.6'/%3E%3C/svg%3E"); }
#mainApp .cp-qa-grid .cp-qa:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333715' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8-7.5 9.5-4.3-1.5-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
/* dark theme: the same four icons, drawn in the dark theme's own light green */
#mainApp.portal-dark .cp-qa-grid .cp-qa:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ca97d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E"); }
#mainApp.portal-dark .cp-qa-grid .cp-qa:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ca97d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.8'/%3E%3Cpath d='M3 20c0-3.8 3.1-6.2 7-6.2M18 13.5v6.5M14.8 16.8h6.4'/%3E%3C/svg%3E"); }
#mainApp.portal-dark .cp-qa-grid .cp-qa:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ca97d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 4.7a3.5 3.5 0 0 1 0 6.6M18 14.4c2 .8 3.5 2.5 3.5 5.6'/%3E%3C/svg%3E"); }
#mainApp.portal-dark .cp-qa-grid .cp-qa:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ca97d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8-7.5 9.5-4.3-1.5-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }

/* ── account activity ─────────────────────────────────────────────────────────────────────────────────────── */
#mainApp .cp-filter-group { padding: 4px; box-shadow: var(--rf-sh-1); }
#mainApp .cp-filter-btn { padding: 8px 14px; font-size: 11.5px; transition: background .18s var(--rf-ease), color .18s var(--rf-ease), box-shadow .18s var(--rf-ease); }
#mainApp .cp-filter-btn.is-active { box-shadow: 0 6px 12px -6px rgba(40, 46, 18, .6); }
#mainApp #cpRecentTx.cp-card { padding: 8px 12px; border-radius: 22px; }
#mainApp .cp-tx-row { gap: 14px; padding: 10px 12px; border-bottom: 0; border-radius: 14px; transition: background .16s var(--rf-ease); }
#mainApp .cp-tx-row + .cp-tx-row { box-shadow: 0 -1px 0 var(--rf-line); }
#mainApp .cp-tx-row:hover { background: var(--bg-hover, #f0f3ee); box-shadow: none; }
#mainApp .cp-tx-row:hover + .cp-tx-row { box-shadow: none; }
/* a row opens to its details: the open row and its details are one soft block, so there is no box inside a box */
#mainApp .cp-tx-item { border-radius: 14px; transition: background .16s var(--rf-ease); }
#mainApp .cp-tx-item + .cp-tx-item { box-shadow: 0 -1px 0 var(--rf-line); }
#mainApp .cp-tx-item:has(> .cp-tx-row:hover), #mainApp .cp-tx-item:has(> .cp-tx-row:hover) + .cp-tx-item, #mainApp .cp-tx-item.is-open, #mainApp .cp-tx-item.is-open + .cp-tx-item { box-shadow: none; }
#mainApp .cp-tx-item.is-open { background: var(--bg-hover, #f0f3ee); }
#mainApp .cp-tx-item.is-open > .cp-tx-row:hover { background: transparent; }
#mainApp .cp-tx-row[data-tx-id] { cursor: pointer; }
#mainApp .cp-tx-row[data-tx-id]:focus-visible { outline: 2px solid var(--brand-primary, #484e1e); outline-offset: -2px; }
#mainApp .cp-tx-chev { flex: none; width: 18px; height: 18px; color: #7b836f; opacity: .7; transition: transform .2s var(--rf-ease), opacity .2s var(--rf-ease); }
#mainApp .cp-tx-row:hover .cp-tx-chev, #mainApp .cp-tx-item.is-open .cp-tx-chev { opacity: 1; }
#mainApp .cp-tx-item.is-open .cp-tx-chev { transform: rotate(180deg); }
#mainApp .cp-tx-detail { margin: 0 12px; padding: 14px 2px 18px; border-top: 1px solid var(--rf-line); animation: rf-open .2s var(--rf-ease); }
@keyframes rf-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #mainApp .cp-tx-detail { animation: none; } #mainApp .cp-tx-chev, #mainApp .cp-tx-item { transition: none; } }
/* the details share one set of columns (From, To, Remarks / the amounts / the facts line up), and fit the width the panel has */
#mainApp .cp-tx-detail { container-type: inline-size; }
#mainApp .cp-txd-parties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; }
#mainApp .cp-txd-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rf-line); }
#mainApp .cp-txd-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rf-line); }
#mainApp .cp-txd-item { min-width: 0; margin: 0; }
#mainApp .cp-txd-item.is-wide { grid-column: 1 / -1; }
@container (min-width: 600px) {
  #mainApp .cp-txd-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mainApp .cp-txd-parties .cp-txd-block:nth-child(3) { grid-column: 1 / -1; }
  #mainApp .cp-txd-figures, #mainApp .cp-txd-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
  #mainApp .cp-txd-parties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #mainApp .cp-txd-parties .cp-txd-block:nth-child(3) { grid-column: span 2; }
}
/* the copy button sits right after its value, not at the far edge of the column */
#mainApp .cp-account-detail-line .cp-copy-detail, #mainApp .cp-txd-line .cp-copy-detail, #mainApp .cp-txd-item .cp-copy-detail { margin-left: 0; }
#mainApp .cp-txd-item dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; color: #363b21; font-size: 12.5px; font-weight: 600; }
#mainApp .cp-txd-label, #mainApp .cp-txd-item dt { margin-bottom: 4px; color: #7b836f; font-size: 9.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
#mainApp .cp-txd-block { min-width: 0; }
#mainApp .cp-txd-name { color: #363b21; font-size: 14px; font-weight: 700; letter-spacing: -.005em; overflow-wrap: anywhere; }
#mainApp .cp-txd-name.is-empty, #mainApp .cp-txd-remarks.is-empty { color: #69715e; font-weight: 500; }
#mainApp .cp-txd-remarks { color: #363b21; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#mainApp .cp-txd-line { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; }
#mainApp .cp-txd-mono { min-width: 0; color: #363b21; font: 650 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; user-select: text; }
#mainApp .cp-txd-sub { margin-top: 3px; color: #69715e; font-size: 12px; overflow-wrap: anywhere; }
#mainApp .cp-txd-val { color: #363b21; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
#mainApp .cp-txd-fig.is-total .cp-txd-val { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
#mainApp .cp-txd-fig.is-total.out .cp-txd-val { color: #8e4b1b; }
#mainApp .cp-txd-fig.is-total.in .cp-txd-val { color: #13875d; }
#mainApp .cp-txd-status.is-ok { color: #13875d; font-weight: 750; }
@media (min-width: 701px) {
  #mainApp .cp-tx-detail { margin-left: 64px; }  /* lines up under the name, past the icon */
}
#mainApp.portal-dark .cp-tx-chev, #mainApp.portal-dark .cp-txd-label, #mainApp.portal-dark .cp-txd-item dt { color: #9ca590; }
#mainApp.portal-dark .cp-txd-name, #mainApp.portal-dark .cp-txd-remarks, #mainApp.portal-dark .cp-txd-mono, #mainApp.portal-dark .cp-txd-val, #mainApp.portal-dark .cp-txd-item dd { color: #e8ede5; }
#mainApp.portal-dark .cp-txd-name.is-empty, #mainApp.portal-dark .cp-txd-remarks.is-empty, #mainApp.portal-dark .cp-txd-sub { color: #aeb7a3; }
#mainApp.portal-dark .cp-txd-fig.is-total.out .cp-txd-val { color: #efa66f; }
#mainApp.portal-dark .cp-txd-fig.is-total.in .cp-txd-val, #mainApp.portal-dark .cp-txd-status.is-ok { color: #6fcf97; }
#mainApp .cp-tx-ic { width: 38px; height: 38px; border-radius: 13px; }
#mainApp .cp-tx-ic svg { width: 17px; height: 17px; }
#mainApp .cp-tx-name { font-size: 14px; letter-spacing: -.005em; }
#mainApp .cp-tx-meta { margin-top: 2px; font-size: 12px; }
#mainApp .cp-tx-amt { font-size: 15px; letter-spacing: -.01em; }
#mainApp .cp-tx-empty { padding: 46px 16px; }
/* dark theme: figures the portal's dark rules left in their light-theme dark ink, shown in the dark theme's own light tones */
#mainApp.portal-dark .cp-tx-balance strong, #mainApp.portal-dark .cp-tx-balance { color: #e8ede5; }
#mainApp.portal-dark .cp-tx-meta { color: #aeb7a3; }
#mainApp.portal-dark .cp-tx-amt.out { color: #efa66f; }
#mainApp.portal-dark .cp-tx-amt.in { color: #6fcf97; }
#mainApp.portal-dark .scc-crn { color: #a8bd95; }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────────────────────── */
body .btn { border-radius: 13px; font-weight: 650; letter-spacing: -.005em; }
body .btn-primary, body .btn-success, body .btn-pill-sweep, body .btn-login {
  border-radius: 13px !important; min-height: 48px; padding: 12px 24px;
  box-shadow: 0 10px 20px -12px rgba(40, 46, 18, .85);
  transition: transform .18s var(--rf-ease), box-shadow .18s var(--rf-ease), background .18s var(--rf-ease) !important;
}
body .btn-primary:hover, body .btn-success:hover, body .btn-pill-sweep:hover, body .btn-login:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 24px -12px rgba(40, 46, 18, .9); }
body .btn-primary:active, body .btn-success:active { transform: translateY(1px) !important; box-shadow: 0 4px 8px -4px rgba(40, 46, 18, .7); }
body .btn-primary:focus-visible, body .btn-ghost:focus-visible, body .btn-outline:focus-visible, body .btn-danger:focus-visible { outline: 3px solid var(--rf-ring); outline-offset: 2px; }
body .btn-ghost, body .btn-outline { border-radius: 13px !important; min-height: 44px; box-shadow: var(--rf-sh-1); }
body .btn-ghost:hover, body .btn-outline:hover { transform: translateY(-1px) !important; box-shadow: var(--rf-sh-2); }
body .btn-danger { border-radius: 13px; }
body .btn-sm { min-height: 38px; padding: 8px 16px; }
#mainApp .tf-cta, #mainApp .btn-primary[style*="width:100%"] { min-height: 52px; font-size: 14.5px; }

/* ── forms ────────────────────────────────────────────────────────────────────────────────────────────────── */
/* one rhythm for every field: the same label gap, the same height, the same 16px between fields and 20px between columns */
body .field-group { margin-bottom: 16px; }
body .field-group label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 650; line-height: 1.3; letter-spacing: .005em; }
body .field-group input, body .field-group select, body .field-group textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 15px; border-radius: 13px !important; font-size: 15px; font-weight: 500; line-height: 22px;
  border-color: var(--rf-edge, #d9dfd2) !important;
  box-shadow: 0 1px 2px rgba(40, 46, 18, .05) !important;
  transition: border-color .16s var(--rf-ease), box-shadow .16s var(--rf-ease), background-color .16s var(--rf-ease) !important;
}
body .field-group textarea { min-height: 76px; }
body .field-group input:focus, body .field-group select:focus, body .field-group textarea:focus { box-shadow: 0 0 0 4px var(--rf-ring) !important; outline: none; }
body .field-group select { padding-right: 40px; cursor: pointer; }
body .field-hint { margin-top: 6px; font-size: 12px; line-height: 1.45; }
#mainApp .field-row2, #mainApp .tf-row { gap: 0 20px; align-items: start; }
#mainApp .tf-row .field-group { margin-bottom: 16px; }
/* a status line under a field keeps its place (so nothing jumps when a message appears) but no longer leaves a bigger gap than the other fields */
#mainApp .cp-bn-status { min-height: 14px; margin-top: 2px; font-size: 12px; line-height: 14px; }
#mainApp .field-group:has(> .cp-bn-status) { margin-bottom: 0; }   /* 2px + 14px of status line = the same 16px as every other field */
#mainApp .cp-bn-verify { margin: 2px 0 16px; padding: 12px 14px; border-radius: 14px; line-height: 1.5; }
#mainApp .cp-card > .field-group:last-of-type, #mainApp .cp-card > .cp-bn-f:last-of-type { margin-bottom: 16px; }
/* a note that sits right above a field gets a little room, instead of touching its label */
#mainApp .mc-note-text + .field-group, #mainApp .mc-note-text + .field-row2 { margin-top: 14px; }
#mainApp .cp-amt-wrap .curr { top: 50%; transform: translateY(-50%); left: 18px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
#mainApp .cp-amt-wrap input { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em; }

/* dark theme: labels, hints and step numbers that were left in light-theme ink, in the dark theme's own tones */
#mainApp.portal-dark .field-group label { color: #c8cebf !important; }
#mainApp.portal-dark .tf-choice { background: #212414; border-color: #535a4a; }
#mainApp.portal-dark .tf-choice.is-on { background: #333715; border-color: #8ca97d; box-shadow: 0 0 0 1px #8ca97d inset; }
#mainApp.portal-dark .tf-payee, #mainApp.portal-dark .cp-custom-tenure { background: #212414; border-color: #535a4a; }
#mainApp.portal-dark .field-hint, #mainApp.portal-dark .tf-counter, #mainApp.portal-dark .mc-note-text { color: #9ca590; }
#mainApp.portal-dark .cp-soft-note, #mainApp.portal-dark .cp-bn-verify, #mainApp.portal-dark #cpBnSideN, #mainApp.portal-dark .cp-badge-pending { color: #a8bd95 !important; }
#mainApp.portal-dark .tf-step, #mainApp.portal-dark .cp-step-label i { background: #414737; color: #a8bd95; }

/* ── the transfer form ────────────────────────────────────────────────────────────────────────────────────── */
#mainApp #cp-transfer .tf-section { padding: 16px 0 2px; }
#mainApp #cp-transfer .cp-ft-head + .tf-section { padding-top: 0; border-top: 0; }   /* the first section follows the header directly, no extra gap */
#mainApp .tf-section-title { gap: 12px; margin-bottom: 12px; font-size: 14px; letter-spacing: -.005em; }#mainApp .tf-step { width: 26px; height: 26px; font-size: 12.5px; }
#mainApp .tf-choices { gap: 12px; }
#mainApp .tf-choice { padding: 15px 17px; border-radius: 16px; box-shadow: var(--rf-sh-1); transition: border-color .16s var(--rf-ease), box-shadow .16s var(--rf-ease), background .16s var(--rf-ease), transform .16s var(--rf-ease); }
#mainApp .tf-choice:hover { box-shadow: var(--rf-sh-2); transform: translateY(-1px); }
#mainApp .tf-choice-title { font-size: 14.5px; }
#mainApp .tf-payee { padding: 16px 18px; border-radius: 16px; }
#mainApp .tf-payee-avatar { width: 40px; height: 40px; border-radius: 13px; }
#mainApp .tf-side { top: 4px; gap: 18px; }
#mainApp .tf-summary-title, #mainApp .cp-card h3 { font-size: 15.5px; letter-spacing: -.01em; }
#mainApp .tf-sum-row { padding: 11px 0; }
#mainApp .tf-sum-status, #mainApp .tf-sum-note, #mainApp .tf-sum-warn { border-radius: 14px; padding: 12px 14px; }
#mainApp .tf-foot { font-size: 12.5px; }
#mainApp .mc-note-text { line-height: 1.6; }

/* ── choose-an-option screens and the hover menus ─────────────────────────────────────────────────────────── */
#mainApp .cp-ft-empty, #mainApp .cp-bn-empty { padding: 84px 24px; border-style: solid; border-radius: 24px; box-shadow: var(--rf-sh-2); }
#mainApp .cp-ft-empty .cp-ft-ic, #mainApp .cp-bn-empty .cp-ft-ic { width: 68px; height: 68px; margin-bottom: 18px; border-radius: 22px; }
#mainApp .cp-ft-empty .cp-ft-ic svg, #mainApp .cp-bn-empty .cp-ft-ic svg { width: 30px; height: 30px; }
#mainApp .cp-ft-empty h2, #mainApp .cp-bn-empty h2 { font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
#mainApp .cp-ft-empty p, #mainApp .cp-bn-empty p { font-size: 14px; line-height: 1.6; }
#mainApp .cp-open-menu-btn { box-shadow: 0 10px 20px -12px rgba(40, 46, 18, .85); }
#mainApp .cp-bn-none { border-style: solid; border-radius: 20px; }

.cp-fly { border-radius: 20px; padding: 12px; box-shadow: 0 2px 4px rgba(40, 46, 18, .06), 0 26px 56px -18px rgba(40, 46, 18, .4); }
.cp-fly-opt { border-radius: 14px; min-height: 64px; }
.cp-fly-opt .cp-ft-ic { width: 42px; height: 42px; border-radius: 13px; }

/* ── lists: beneficiaries, deposits, requests, approvals ──────────────────────────────────────────────────── */
#mainApp .cp-ben-card { padding: 16px 18px; margin-bottom: 12px; border-radius: 18px; box-shadow: var(--rf-sh-1); transition: box-shadow .18s var(--rf-ease), transform .18s var(--rf-ease); }
#mainApp .cp-ben-card:hover { box-shadow: var(--rf-sh-2); transform: translateY(-1px); }
#mainApp .cp-ben-avatar { width: 46px; height: 46px; border-radius: 15px; }
#mainApp .cp-ben-name { font-size: 14.5px; }
#mainApp .cp-badge { padding: 4px 10px; font-size: 10.5px; }
#mainApp .cp-icon-btn { width: 38px; height: 38px; border-radius: 12px; box-shadow: var(--rf-sh-1); transition: border-color .16s var(--rf-ease), box-shadow .16s var(--rf-ease), transform .16s var(--rf-ease); }
#mainApp .cp-icon-btn:hover { box-shadow: var(--rf-sh-2); transform: translateY(-1px); }
#mainApp .cp-search-bar { gap: 12px; margin-bottom: 20px; }
#mainApp .cp-search-bar .field-group { margin-bottom: 0; }

#mainApp .cp-data-list, #mainApp .bk-scroll { border-radius: 18px; box-shadow: var(--rf-sh-2); }
#mainApp .cp-data-row { padding: 16px 20px; transition: background .14s var(--rf-ease); }
#mainApp .cp-data-row:not(.is-head):hover { background: var(--bg-hover, #f0f3ee); }
#mainApp .cp-data-row.is-head { padding-block: 12px; font-size: 10px; letter-spacing: .08em; }
#mainApp .cp-data-primary b { font-size: 13.5px; }
#mainApp .cp-list-section-head h3 { font-size: 17px; letter-spacing: -.015em; }
#mainApp .cp-status-pill, #mainApp .bk-badge, #mainApp .mc-status { padding: 5px 11px; font-size: 10.5px; letter-spacing: .01em; }

#mainApp .mc-row { padding: 18px 10px; margin: 0 -10px; border-radius: 14px; border-top: 0; box-shadow: 0 -1px 0 var(--rf-line); transition: background .14s var(--rf-ease); }
#mainApp .mc-row:first-child { box-shadow: none; }
#mainApp .mc-row:hover { background: var(--bg-hover, #f0f3ee); box-shadow: none; }
#mainApp .mc-row:hover + .mc-row { box-shadow: none; }
#mainApp .mc-head { margin-bottom: 18px; }
#mainApp .mc-h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
#mainApp .mc-title { font-size: 14.5px; }
#mainApp .mc-filter select { border-radius: 12px; padding: 10px 14px; box-shadow: var(--rf-sh-1); }
#mainApp .mc-pager { padding-top: 18px; }
#mainApp .mc-pager-nav .btn { border-radius: 12px; }

/* ── deposits ─────────────────────────────────────────────────────────────────────────────────────────────── */
#mainApp .cp-step-label { gap: 10px; margin-bottom: 12px; font-size: 13px; letter-spacing: -.005em; }
#mainApp .cp-step-label i { width: 26px; height: 26px; font-size: 12px; }
#mainApp .cp-deposit-step { padding-top: 22px; margin-top: 22px; }
#mainApp .cp-tenure-grid { gap: 10px; }
#mainApp .cp-tenure-btn { padding: 15px 10px; border-radius: 16px; box-shadow: var(--rf-sh-1); transition: border-color .16s var(--rf-ease), box-shadow .16s var(--rf-ease), transform .16s var(--rf-ease), background .16s var(--rf-ease); }
#mainApp .cp-tenure-btn strong { font-size: 13.5px; }
#mainApp .cp-tenure-btn span { font-size: 11px; }
#mainApp .cp-tenure-btn:hover { box-shadow: var(--rf-sh-2); transform: translateY(-1px); }
#mainApp .cp-custom-tenure { border-radius: 16px; }
#mainApp .cp-profit-panel { border-radius: 18px; box-shadow: var(--rf-sh-1); }
#mainApp .cp-profit-metric { padding: 18px; }
#mainApp .cp-profit-metric strong { font-size: 17px; letter-spacing: -.015em; }
#mainApp .cp-profit-metric span, #mainApp .cp-info-tile span, #mainApp .cp-review-field dt { font-size: 10px; letter-spacing: .08em; }
#mainApp .cp-info-tile { padding: 16px 18px; border-radius: 16px; }
#mainApp .cp-info-tile strong { font-size: 14.5px; }
#mainApp .cp-soft-note { padding: 14px 16px; border-radius: 16px; font-size: 12px; line-height: 1.55; }
#mainApp .cp-review-readonly { border-radius: 18px; }
#mainApp .cp-review-field { padding: 18px 20px; }
#mainApp .cp-review-field dd { font-size: 14.5px; letter-spacing: -.01em; }
#mainApp .cp-upload-zone { border-radius: 20px; }
#mainApp .cp-upload-icon { width: 48px; height: 48px; border-radius: 16px; }

/* ── bulk transfers ───────────────────────────────────────────────────────────────────────────────────────── */
#mainApp .bk-stat { padding: 15px 16px; border-radius: 16px; box-shadow: var(--rf-sh-1); }
#mainApp .bk-stat strong { font-size: 17px; letter-spacing: -.015em; }
#mainApp .bk-debit-panel { border-radius: 18px; }
#mainApp .bk-table th { padding: 12px 14px; font-size: 10px; letter-spacing: .08em; }
#mainApp .bk-table td { padding: 13px 14px; }
#mainApp .bk-chip { min-height: 38px; padding: 8px 14px; box-shadow: var(--rf-sh-1); transition: border-color .16s var(--rf-ease), background .16s var(--rf-ease); }
#mainApp .bk-banner { padding: 15px 18px; border-radius: 16px; }
#mainApp .bk-stepper li i { width: 32px; height: 32px; }
#mainApp .bk-stepper li::before { top: 15px; height: 3px; border-radius: 3px; }

/* ── settings: tabs as a segmented control ────────────────────────────────────────────────────────────────── */
#mainApp .cp-settings-nav { display: inline-flex; gap: 4px; margin-bottom: 24px; padding: 5px; border: 1px solid var(--rf-line); border-radius: 16px; background: var(--bg-card, #fff); box-shadow: var(--rf-sh-1); }
#mainApp .cp-settings-tab { padding: 10px 20px; border: 0; border-radius: 12px; font-size: 13px; transition: background .16s var(--rf-ease), color .16s var(--rf-ease), box-shadow .16s var(--rf-ease); }
#mainApp .cp-settings-tab:hover { background: var(--bg-hover, #f0f3ee); }
#mainApp .cp-settings-tab.active { border: 0; background: var(--brand-glow-subtle); box-shadow: var(--rf-sh-1); }
#mainApp .cp-pref-row { padding: 18px 0; }
#mainApp .cp-pref-name { font-size: 14px; }
#mainApp .cp-pref-desc { font-size: 12.5px; }
#mainApp .cp-switch, #mainApp .mc-switch { width: 46px; height: 26px; }
#mainApp .cp-switch::after, #mainApp .mc-switch::after { width: 20px; height: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
#mainApp .cp-switch.on::after, #mainApp .mc-switch.on::after { left: 23px; }
#mainApp .cp-device-row { padding: 16px 0; }

/* ── dialogs ──────────────────────────────────────────────────────────────────────────────────────────────── */
.modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-box { border-radius: 24px !important; box-shadow: 0 4px 8px rgba(40, 46, 18, .08), 0 40px 80px -24px rgba(40, 46, 18, .5) !important; }
.mc-phone-dialog { border-radius: 24px; }
.mc-phone-dialog button { border-radius: 14px; }

/* ── scrolling and motion ─────────────────────────────────────────────────────────────────────────────────── */
#mainApp .portal-main-column::-webkit-scrollbar { width: 10px; }
#mainApp .portal-main-column::-webkit-scrollbar-thumb { background: rgba(72, 78, 30, .24); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
#mainApp .portal-main-column::-webkit-scrollbar-thumb:hover { background: rgba(72, 78, 30, .4); background-clip: padding-box; }
#mainApp .cp-view.active { animation: rf-rise .32s var(--rf-ease) both; }
@keyframes rf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #mainApp .cp-view.active { animation: none; }
  #mainApp .cp-bal-card, #mainApp .cp-qa, #mainApp .cp-ben-card, #mainApp .tf-choice, #mainApp .cp-tenure-btn { transition: none; }
}

/* ── wide screens: the page uses the whole panel, with a modest even margin ────────────────────────────────── */
@media screen and (min-width: 981px) {
  #mainApp .portal-topbar { height: 58px; }
  #mainApp .portal-content-body { padding: 22px 32px 32px; }}
/* bulk history: Search and Clear sit at the right edge of the four-column filters, not in the middle (the portal's own rule makes it two columns at 1000px and below) */
@media screen and (min-width: 1001px) {
  #mainApp .bk-filter-actions { grid-column: 3 / -1; }
}
/* the account tiles: two exactly equal tiles per view (the carousel pages in twos), so their outer edges line up with the quick actions and the
   activity card below, instead of 46% tiles with the next one cut off at the edge */
@media screen and (min-width: 1101px) {
  /* the row reaches 22px past the page edges so the tiles' shadows are not cut off; the tiles themselves stay on the page edges */
  #mainApp .cp-accounts-grid { padding-inline: 22px; margin-inline: -22px; scroll-padding-inline: 22px; }
  #mainApp .cp-bal-card { flex: 0 0 calc((100% - 16px) / 2); }
  #mainApp .cp-accounts-carousel::before, #mainApp .cp-accounts-carousel::after { display: none; }   /* nothing peeks out any more, so no edge fade */
}
/* medium desktop screens: the four quick actions in two rows of two, so no label wraps */
@media screen and (min-width: 981px) and (max-width: 1300px) {
  #mainApp .cp-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── phones and small tablets: shape and depth only (customer-mobile.css, loaded after this, keeps the layout) ── */
@media (max-width: 700px) {
  #mainApp .cp-qa { flex-direction: column; justify-content: center; gap: 10px; padding: 16px 10px; text-align: center; }
  #mainApp .cp-qa::after { display: none; }
  #mainApp .cp-qa .lb { text-align: center; }
  #mainApp .cp-card { padding: 18px; border-radius: 18px; }
  #mainApp .cp-bal-card { padding: 18px 18px 16px; border-radius: 20px; }
  #mainApp .cp-settings-nav { display: flex; overflow-x: auto; }
}

/* Older activity is read a page at a time */
#mainApp .cp-tx-more { display: block; margin: 14px auto 4px; padding: 10px 26px; border: 1px solid var(--rf-line); border-radius: 999px; background: var(--bg-card, #fff); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
#mainApp .cp-tx-more:disabled { opacity: .6; cursor: default; }