*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Hillgate brand darks — from the palette */
  --navy-900: #0E1D35;
  --navy-800: #15253F;
  --navy-700: #1E3352;
  --navy-600: #2B3D5B;

  /* Card darks */
  --card-bg:      #0F1D30;   /* near-black navy for cards */
  --card-border:  rgba(255,255,255,0.07);
  --card-border-active: rgba(255,255,255,0.13);

  /* Buy glow: Hillgate teal-green */
  --glow-buy:  #00C875;
  /* Sell glow: red */
  --glow-sell: #F04438;

  /* Page */
  --page-bg:  #F4F6FA;
  --surface:  #FFFFFF;
  --s2:       #F8F9FC;
  --border:   #E3E7EE;
  --border-f: #EEF1F6;

  /* Text — on page (light) */
  --text:   #0D1117;
  --text2:  #3D4A5C;
  --text3:  #6B7585;
  --text4:  #9AA5B4;

  /* Text — on dark cards (white family) */
  --on-dark:      #FFFFFF;
  --on-dark-2:    rgba(255,255,255,0.65);
  --on-dark-3:    rgba(255,255,255,0.38);
  --on-dark-dim:  rgba(255,255,255,0.18);  /* empty state placeholder */

  /* labels on dark */
  --buy-lbl:  #2ECC8A;
  --sell-lbl: #F97066;

  /* chip colours (C-5 palette split — semantically distinct hues so
     users don't have to read the label).
       settled / final → green
       pending         → amber  (needs attention / awaiting action)
       processing      → blue   (actively in motion)  — was orange
       scheduled       → grey   (future-dated, not yet active) — new
       failed          → red */
  --c-set-bg: #ECFDF5; --c-set-bdr: #A7F3D0; --c-set-txt: #065F46;
  --c-pen-bg: #FFFBEB; --c-pen-bdr: #FDE68A; --c-pen-txt: #92400E;
  --c-pro-bg: #EFF6FF; --c-pro-bdr: #BFDBFE; --c-pro-txt: #1E40AF;
  --c-sch-bg: #F3F4F6; --c-sch-bdr: #D1D5DB; --c-sch-txt: #4B5563;

  --font: 'Inter', -apple-system, sans-serif;
  --num:  'Inter', -apple-system, sans-serif;

  /* Type scale (Track C, C-1) — canonical sizes + weights for the
     design system. Existing rules that pin numeric font-size values
     should migrate to these tokens as they're touched. */
  --text-xs:   11px;   /* micro labels, badges, captions */
  --text-sm:   12px;   /* secondary text, table meta */
  --text-base: 14px;   /* body baseline (was 13px — C-1 bump) */
  --text-md:   16px;   /* section titles */
  --text-lg:   18px;   /* sub-section heading */
  --text-xl:   22px;   /* page titles across all surfaces */
  --text-2xl:  30px;   /* hero figures only, not page titles */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --r: 8px;
  --r-sm: 4px;
  --r-pill: 999px;
}

/* ── DARK THEME ─────────────────────────────────────────── */
[data-theme="dark"] {
  --page-bg:  #0D1117;
  --surface:  #161B22;
  --s2:       #1C2330;
  --border:   #2A3444;
  --border-f: #1F2937;

  --text:   #E6EDF3;
  --text2:  #B0BEC5;
  --text3:  #6E7F94;
  --text4:  #4A5568;

  --navy-900: #E6EDF3;

  /* cards get slightly lighter than page in dark mode */
  --card-bg:     #0D1B2A;
  --card-border: rgba(255,255,255,0.06);
  --card-border-active: rgba(255,255,255,0.12);

  /* chips — desaturated but still semantic; C-5 keeps the same hue
     story as light (green/amber/blue/grey/red). */
  --c-set-bg: #0D2818; --c-set-bdr: #1A5C38; --c-set-txt: #4ADE80;
  --c-pen-bg: #2A1F00; --c-pen-bdr: #78470A; --c-pen-txt: #FBBF24;
  --c-pro-bg: #0D1F3C; --c-pro-bdr: #1E3A6E; --c-pro-txt: #60A5FA;
  --c-sch-bg: #1F2937; --c-sch-bdr: #374151; --c-sch-txt: #9CA3AF;
}

/* Dark mode sidebar & surface tweaks */
[data-theme="dark"] .sidebar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .s-item.active { background: #1C2330; color: var(--text); }
[data-theme="dark"] .s-item.active::before { background: #5B9EFF; }
[data-theme="dark"] .s-item:hover { background: #1A2332; }
[data-theme="dark"] .page-hdr { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .tbl-wrap { border-color: var(--border); }
[data-theme="dark"] table thead th { background: var(--s2); color: var(--text3); border-color: var(--border); }
[data-theme="dark"] table tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); }
[data-theme="dark"] table tbody tr:hover { background: var(--s2); }
[data-theme="dark"] table tbody tr:hover td { background: transparent; }
[data-theme="dark"] table tbody td { border-color: var(--border); }
[data-theme="dark"] .hist-top { border-color: var(--border); }
[data-theme="dark"] .search-box { background: var(--s2); border-color: var(--border); }
[data-theme="dark"] .search-box input { color: var(--text); }
[data-theme="dark"] .ico-btn { border-color: var(--border); color: var(--text3); }
[data-theme="dark"] .ico-btn:hover { background: var(--s2); }
[data-theme="dark"] .tab-btn { color: var(--text3); }
[data-theme="dark"] .tab-btn.on { color: var(--text); border-color: var(--text); }
[data-theme="dark"] .pair-item { background: var(--s2); border-color: var(--border); }
[data-theme="dark"] .pair-item:hover { background: var(--border); }
[data-theme="dark"] .add-pair { border-color: var(--border); color: var(--text3); }
[data-theme="dark"] .settle-btn { background: var(--s2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .settle-link { color: #C9D1D9; text-decoration-color: rgba(201,209,217,0.35); }
[data-theme="dark"] .settle-link:hover { color: #E6EDF3; text-decoration-color: #E6EDF3; }
[data-theme="dark"] .sdrop { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .sdrop-opt { color: var(--text2); }
[data-theme="dark"] .sdrop-opt:hover, [data-theme="dark"] .sdrop-opt.on { background: var(--s2); }
[data-theme="dark"] .drop-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .drop-item { color: var(--text2); }
[data-theme="dark"] .drop-item:hover, [data-theme="dark"] .drop-item.on { background: var(--s2); }
[data-theme="dark"] .drop-grp-lbl { color: var(--text4); }
[data-theme="dark"] .drop-search { border-color: var(--border); }
[data-theme="dark"] .drop-search input { background: transparent; color: var(--text); }
[data-theme="dark"] .slide-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .sp-hdr { border-color: var(--border); }
[data-theme="dark"] .sp-row { border-color: var(--border); }
[data-theme="dark"] .sp-section { background: var(--s2); border-color: var(--border); }
[data-theme="dark"] .cta:disabled { background: #1C2330; color: #4A5568; }
[data-theme="dark"] .cta:not(:disabled) { background: var(--navy-600); }
[data-theme="dark"] .cta:hover:not(:disabled) { background: var(--navy-700); }

/* Toggle animation */
.tog-track { transition: background 200ms; }
.tog-thumb { transition: left 200ms; }
[data-theme="dark"] .tog-track { background: #5B9EFF; }
[data-theme="dark"] .tog-thumb { left: 14px; }

html, body {
  height: 100%; background: var(--page-bg);
  font-family: var(--font); color: var(--text);
  /* C-1: baseline bumped from 13px → 14px (--text-base). Dense
     surfaces (chips, table meta, captions) pin themselves smaller
     via the --text-xs / --text-sm tokens. */
  font-size: var(--text-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ─────────────────────────────────────────── */
/* F-1: app width bounds.
   - Below --app-min-width the document scrolls horizontally as a
     whole (institutional product — no mobile/tablet target).
   - Above --content-max the content stays centered with ambient bg
     filling the remaining viewport (F-3 can switch this to left-
     aligned by changing the margin rule on .page-body). */
:root {
  --app-min-width: 1024px;
  --content-max:   1184px;
}
/* Below --app-min-width the page scrolls horizontally as a whole.
   Default browser overflow on html lets the viewport-level scrollbar
   appear; .shell itself still clips its own children (sidebar + main
   columns) so they don't break out vertically. */
.shell { display: flex; height: 100vh; overflow: hidden; min-width: var(--app-min-width); }
.sidebar { width: 230px; min-width: 230px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
/* F-1: vertical scroll lives on .main so the scrollbar sits at the
   right edge of the viewport. If it were on .page-body (which is
   centred via max-width + margin: auto), the scrollbar would sit
   1184px in from the left of .main, leaving an awkward gap to the
   actual right edge. */
.main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-width: 0; }

/* ── SIDEBAR ─────────────────────────────────────────── */
.s-logo { padding: 22px 20px 22px; border-bottom: 1px solid var(--border-f); display: flex; justify-content: center; align-items: center; gap: 8px; position: relative; }
.logo-img { width: 100px; height: auto; display: block; }

/* F-2: collapse button sits in the logo row, anchored right when
   expanded and centred when collapsed. */
.s-collapse-btn {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm, 4px);
  color: var(--text4); cursor: pointer;
  transition: color 65ms ease-out, background 65ms ease-out, border-color 65ms ease-out, transform 200ms ease-out;
}
.s-collapse-btn:hover { color: var(--text); background: var(--s2); border-color: var(--border); }
.sidebar.is-collapsed .s-collapse-btn { position: static; transform: rotate(180deg); }
.sidebar.is-collapsed .s-collapse-btn:hover { transform: rotate(180deg); }
[data-theme="dark"] .logo-img { filter: invert(1); }
.s-nav { padding: 8px 0; flex: 1; }
.s-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 14px; font-weight: 400; color: var(--text3); cursor: pointer; position: relative; transition: background 55ms, color 55ms; user-select: none; text-decoration: none; }
.s-item:hover { background: var(--s2); color: var(--text2); }
.s-item.active { color: var(--navy-900); font-weight: 600; background: #F0F2F6; }
.s-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2.5px; background: var(--navy-900); border-radius: 0 2px 2px 0; }
.s-ico { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.5; }
.s-item.active .s-ico, .s-item:hover .s-ico { opacity: 0.85; }
.s-badge { margin-left: auto; background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; line-height: 1.4; }
.s-foot { border-top: 1px solid var(--border); padding: 14px 20px; }
.s-av { width: 32px; height: 32px; border-radius: 5px; background: var(--navy-900); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
[data-theme="dark"] .s-av { background: var(--navy-600); }
.s-uname { font-size: 13px; font-weight: 600; color: var(--text); }
.s-uorg { font-size: 12px; color: var(--text3); }
.s-urole { color: var(--text4); margin-left: 2px; font-size: 11px; }
.s-chev { width: 13px; height: 13px; margin-left: auto; color: var(--text4); flex-shrink: 0; transition: transform 150ms, color 65ms; }
.s-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 8px; margin: -6px -8px; border-radius: var(--r); transition: background 65ms; position: relative; }
.s-user:hover { background: var(--s2); }
.s-user:hover .s-chev { color: var(--text2); }
.s-user.open .s-chev { transform: rotate(180deg); }

/* Account selector dropdown */
.s-acct-menu {
  position: absolute; bottom: calc(100% + 8px); left: -8px; right: -8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 60; padding: 6px 0;
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity 120ms, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.s-acct-menu.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.s-acct-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; transition: background 55ms; font-size: 13px;
}
.s-acct-opt:hover { background: var(--s2); }
.s-acct-opt.active { background: #EEF2F8; }
.s-acct-av {
  width: 28px; height: 28px; border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; color: #fff;
}
.s-acct-name { font-weight: 600; color: var(--text); }
.s-acct-role { font-size: 11px; color: var(--text4); }
.s-acct-check { margin-left: auto; color: var(--navy-900); }
.s-acct-divider { height: 1px; background: var(--border-f); margin: 4px 12px; }
.s-acct-action {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: 12px; color: var(--text3); cursor: pointer; transition: background 55ms;
}
.s-acct-action:hover { background: var(--s2); color: var(--text2); }
[data-theme="dark"] .s-acct-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .s-acct-opt.active { background: var(--s2); }
[data-theme="dark"] .s-acct-check { color: #5B9EFF; }
.s-tog { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-f); font-size: 12px; color: var(--text3); cursor: pointer; }
.tog-track { width: 28px; height: 16px; background: var(--border); border-radius: 8px; position: relative; flex-shrink: 0; }
.tog-thumb { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.s-utc { font-size: 11px; color: var(--text4); margin-top: 7px; font-family: var(--num); }

/* F-2: collapsed-rail mode. Sidebar shrinks to 60px; labels, user
   meta, dark-mode label, and UTC clock are hidden. Nav remains
   accessible — items become icon-only with tooltips via the title
   attribute on each .s-item. */
/* Only animate width during a user-initiated toggle. Without this
   gate, restoring the persisted-collapsed state on a new page would
   animate the sidebar from 230 → 60 every navigation. */
.sidebar.is-transitioning { transition: width 200ms ease-out, min-width 200ms ease-out; }
.sidebar.is-collapsed { width: 60px; min-width: 60px; }
.sidebar.is-collapsed .s-logo { padding: 18px 8px; }
.sidebar.is-collapsed .logo-img { display: none; }
.sidebar.is-collapsed .s-item { justify-content: center; padding: 9px 0; }
.sidebar.is-collapsed .s-item-label,
.sidebar.is-collapsed .s-badge,
.sidebar.is-collapsed .s-user-meta,
.sidebar.is-collapsed .s-chev,
.sidebar.is-collapsed .s-tog-label,
.sidebar.is-collapsed .s-utc { display: none; }
.sidebar.is-collapsed .s-foot { padding: 12px 8px; }
.sidebar.is-collapsed .s-user { justify-content: center; padding: 6px; margin: 0; }
.sidebar.is-collapsed .s-tog { justify-content: center; padding-top: 12px; margin-top: 12px; }
/* When collapsed, pop the account menu out to the right of the rail
   at a fixed width so the entity name / role text doesn't wrap. */
.sidebar.is-collapsed .s-acct-menu { left: calc(100% + 8px); right: auto; bottom: 0; width: 260px; }

/* ── PAGE ────────────────────────────────────────────── */
.page-hdr { background: var(--surface); border-bottom: 1px solid var(--border); padding: 18px 48px 0; flex-shrink: 0; }
.page-hdr-inner { width: 100%; max-width: 800px; padding: 0 48px; }
.page-title { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; padding-bottom: 14px; }
.page-body { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 36px 48px; display: flex; flex-direction: column; gap: 24px; }

/* ── TRADE TOP META ─────────────────────────────────── */
.trade-top-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; padding: 0; width: 100%;
}
.pmeta-lbl { font-size: 14px; color: var(--text4); font-weight: 400; }
.pmeta-val { font-size: 14px; color: var(--text); font-weight: 700; }
.pmeta-val--click {
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--text4); text-underline-offset: 3px;
  cursor: pointer; transition: color 65ms, text-decoration-color 65ms;
}
.pmeta-val--click:hover { color: var(--navy-900); text-decoration-color: var(--navy-900); }
.settle-area { display: flex; align-items: baseline; gap: 3px; }
.settle-lbl { font-size: 14px; color: var(--text4); font-weight: 400; }
.settle-link {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: none; border: none; padding: 0;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--text); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--border);
  transition: color 65ms, text-decoration-color 65ms;
}
.settle-link:hover { color: var(--navy-900); text-decoration-color: var(--navy-900); }
.settle-link svg { color: currentColor; flex-shrink: 0; position: relative; top: 1px; }

/* ── Trading Credit Popup ──────────────────────────── */
.tc-overlay {
  position: fixed; inset: 0; background: rgba(10,20,40,0.25);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity 180ms;
}
.tc-overlay.on { opacity: 1; pointer-events: all; }
.tc-popup {
  position: fixed; z-index: 201; background: var(--surface); border-radius: var(--r);
  padding: 20px; max-width: 440px; width: 92%;
  top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(6px);
  opacity: 0; pointer-events: none;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.tc-popup.on { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) translateY(0); }
.tc-hdr {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.tc-close {
  background: none; border: none; padding: 4px; cursor: pointer; color: var(--text3);
  border-radius: var(--r); transition: background 65ms, color 65ms;
}
.tc-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.tc-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: -0.1px; margin: 0;
}
.tc-body {
  font-size: 13px; line-height: 1.65; color: var(--text2); margin-bottom: 16px;
}
.tc-body strong { color: var(--text); font-weight: 600; }
.tc-actions { display: flex; justify-content: flex-end; }
.tc-got-it {
  background: var(--navy-900); color: #fff; border: none; border-radius: var(--r);
  padding: 8px 20px; font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 65ms, transform 65ms;
  letter-spacing: 0.2px;
}
.tc-got-it:hover { background: var(--navy-800); }
.tc-got-it:active { transform: scale(0.97); }

/* ── Inline Trade Execution ──────────────────────────── */
.tex-inline {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 56px 32px 48px;
  animation: texFadeIn 300ms ease both;
  min-height: 340px;
}
@keyframes texFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* === Loading spinners (C-17 uniform idiom) =========================
   Two canonical sizes — never hand-roll an inline SVG with
   style="animation:spin …" again; use one of these.

   `.hg-spinner` — inline 14px (or font-size scaled). Goes next to
   text in a button label, status row, or hint line ("Verifying…",
   "Fetching quote…"). Renders via hgSpinnerSvg() so the SVG markup
   is the same everywhere.

   `.hg-spinner-lg` (alias `.tex-spinner` for legacy) — 72px ring
   used as the focal point of a card / panel taking over the page
   for a working state (FX trade execution Processing Trade).
*/
.hg-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  animation: spin 0.8s linear infinite;
  color: currentColor;
  flex-shrink: 0;
}

.hg-spinner-lg,
.tex-spinner {
  width: 72px; height: 72px; margin-bottom: 28px; position: relative;
}
.hg-spinner-lg-track,
.tex-spinner-track {
  fill: none; stroke: var(--border); stroke-width: 3;
}
.hg-spinner-lg-arc,
.tex-spinner-arc {
  fill: none; stroke: #059669; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 180; stroke-dashoffset: 60;
  transform-origin: center; animation: texSpin 1s linear infinite;
}
@keyframes texSpin { to { transform: rotate(360deg); } }
.hg-spinner-lg-check,
.tex-spinner-check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}

.tex-heading { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; margin-bottom: 6px; }
.tex-sub { font-size: 14px; color: var(--text3); margin-bottom: 32px; }

/* Confirmed view staggered entrance */
.tex-confirmed .tex-done-icon { animation: texFadeIn 300ms ease both; }
.tex-confirmed .tex-heading { animation: texFadeIn 300ms ease 200ms both; }
.tex-confirmed .tex-sub { animation: texFadeIn 250ms ease 300ms both; }
.tex-confirmed .tm-summary { animation: texFadeIn 300ms ease 400ms both; }
.tex-confirmed .tm-meta { animation: texFadeIn 300ms ease 500ms both; }
.tex-confirmed .tm-actions { animation: texFadeIn 250ms ease 600ms both; }

/* Processing — step rows */
.tex-steps { display: flex; flex-direction: column; gap: 0; text-align: left; }
.tm-step-row { display: flex; align-items: flex-start; gap: 14px; }
.tm-step-ic-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tm-step-ic {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 150ms;
}
.tm-step-ic.done { border: none; animation: stepPop 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes stepPop { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
.tm-step-line { width: 1px; height: 28px; background: var(--border); transition: background 300ms; }
.tm-step-ic.done + .tm-step-line { background: #059669; }
.tm-step-lbl { font-size: 14px; color: var(--text3); padding-top: 2px; transition: color 150ms; line-height: 1.4; padding-bottom: 28px; }
.tm-step-lbl.active { color: var(--text); font-weight: 600; }
.tm-step-lbl.done { color: #059669; font-weight: 500; }
.tm-step-lbl.done::after { content: ' \2713'; }

/* Confirmed — done icon with draw animation */
.tex-done-icon {
  width: 72px; height: 72px; margin-bottom: 24px;
}
.tex-done-icon circle {
  stroke-dasharray: 201; stroke-dashoffset: 201;
  animation: texDrawCircle 500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.tex-done-icon path {
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: texDrawCheck 350ms cubic-bezier(0.65, 0, 0.35, 1) 350ms forwards;
}
@keyframes texDrawCircle { to { stroke-dashoffset: 0; } }
@keyframes texDrawCheck { to { stroke-dashoffset: 0; } }

/* Confirmed — summary band */
.tm-summary {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 16px; width: 100%; max-width: 520px;
}
.tm-summary-arrow { color: var(--text4); display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.tm-summary-side { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tm-summary-side--right { align-items: flex-end; }
.tm-summary-lbl { font-size: 11px; font-weight: 600; color: var(--text4); text-transform: uppercase; letter-spacing: 0.4px; }
.tm-summary-lbl--buy { color: var(--buy-lbl, #2ECC8A); }
.tm-summary-lbl--sell { color: var(--sell-lbl, #F97066); }
.tm-summary-ccy { display: flex; align-items: center; gap: 8px; }
.tm-summary-ccy--right { flex-direction: row-reverse; }
.tm-summary-code { font-size: 14px; font-weight: 700; color: var(--navy-900); }
.tm-summary-amt { font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--num); letter-spacing: -0.5px; }
.tm-summary-amt--right { text-align: right; }
.tm-summary-acct { font-size: 12px; color: var(--text3); }
.tm-summary-acct--right { text-align: right; }

/* Confirmed — meta table */
.tm-meta { background: #fff; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 20px; overflow: hidden; width: 100%; max-width: 520px; }
.tm-meta-row { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border); }
.tm-meta-row:last-child { border-bottom: none; }
.tm-meta-l { font-size: 13px; color: var(--text3); }
.tm-meta-r { font-size: 13px; color: var(--text); font-weight: 600; }
.tm-meta-mono { font-family: var(--num); color: var(--text2); }

/* Confirmed — action buttons */
.tm-actions { display: flex; gap: 10px; max-width: 520px; width: 100%; }
.tm-btn-outline {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 20px; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: border-color 65ms, color 65ms;
}
.tm-btn-outline:hover { border-color: var(--navy-800); color: var(--text); }
.tm-btn-primary {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--navy-900); border: none; border-radius: var(--r);
  padding: 12px 20px; font-family: var(--font); font-size: 13px; font-weight: 600; color: #fff;
  cursor: pointer; transition: background 65ms, transform 65ms;
}
.tm-btn-primary:hover { background: var(--navy-800); }
.tm-btn-primary:active { transform: scale(0.98); }

[data-theme="dark"] .tm-summary { background: var(--card-bg); }
[data-theme="dark"] .tm-summary-code { color: #E6EDF3; }
[data-theme="dark"] .tm-summary-amt { color: #E6EDF3; }
[data-theme="dark"] .tm-meta { background: var(--card-bg); }
[data-theme="dark"] .tm-btn-primary { background: #2B3D5B; }
[data-theme="dark"] .tm-btn-primary:hover { background: #047857; }

/* ── TRADE AREA ──────────────────────────────────────── */
.trade-area { display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0 auto; width: 100%; }
.trade-cols-row { display: flex; gap: 20px; align-items: flex-start; }
.trade-panel { flex: 1; min-width: 0; width: 620px; max-width: 620px; }

/* ── DARK CARD ───────────────────────────────────────── */
/* Both cards: dark navy with separate atmospheric glow per card */
.ccard {
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  overflow: hidden;
  position: relative;
  transition: border-color 80ms;
}
.ccard:focus-within { border-color: var(--card-border-active); }

/* Atmospheric glow — radial blur at bottom of each card */
.ccard::before {
  content: '';
  position: absolute;
  bottom: -30px; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 80px;
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 300ms;
}
.ccard:focus-within::before { opacity: 0.65; }
.ccard.buy::before  { background: var(--glow-buy);  }
.ccard.sell::before { background: var(--glow-sell); }

/* alerts suppress glow bottom when shown */
.ccard.exceeded::before        { opacity: 0.15; }
.ccard.warned::before          { opacity: 0.15; }
.ccard.credit-exceeded::before { opacity: 0.15; }

.ccard-body {
  display: flex; align-items: flex-start;
  padding: 26px 30px;
  position: relative; min-height: 160px; overflow: visible;
  gap: 20px;
}

/* YOU BUY / YOU SELL label */
.cc-label {
  position: absolute; top: 20px; left: 30px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 2;
}
.buy  .cc-label { color: var(--buy-lbl);  }
.sell .cc-label { color: var(--sell-lbl); }
.sell.exceeded .cc-label, .sell.warned .cc-label { color: var(--sell-lbl); }
.buy.credit-exceeded .cc-label { color: rgba(255,255,255,0.5); }

/* ACCOUNT SIDE — LEFT of card */
.acct-col { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; margin-top: 24px; }
.acct-col .acct-bal { font-size: 12px; color: rgba(255,255,255,0.55); font-family: var(--num); padding-left: 2px; }
.acct-side {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 13px 16px 13px 13px;
  transition: background 65ms, border-color 65ms, transform 80ms;
  user-select: none;
}
.acct-side:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.acct-side:active { transform: scale(0.97); }
.acct-side:hover .ccy-chev { color: rgba(255,255,255,0.7); }

.acct-info { display: flex; flex-direction: column; gap: 1px; }
.acct-code-row { display: flex; align-items: center; gap: 4px; }

/* AMOUNT ZONE — RIGHT of card, text right-aligned */
.amt-zone { flex: 1; min-width: 0; margin-top: 24px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; }

/* Hero amount — Inter, big, white, tabular */
.amt-display {
  font-family: var(--num); font-size: 46px; font-weight: 700;
  letter-spacing: -2px; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
/* integer: white. decimal: subordinate */
.amt-int { color: var(--on-dark); }
.amt-int.dim { color: var(--on-dark-dim); font-weight: 400; }
.amt-int.err { color: #FF6B6B; }
.amt-dec { font-weight: 400; color: var(--on-dark-3); font-size: 46px; }
.amt-dec.dim { color: var(--on-dark-dim); }
.amt-dec.err { color: rgba(255,107,107,0.55); }

.amt-abbr { font-family: var(--num); font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.38); letter-spacing: -0.2px; }
.amt-sub-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; justify-content: flex-end; }
.amt-inline-alert { font-size: 12px; font-weight: 500; display: none; align-items: center; gap: 4px; }
.amt-inline-alert.visible { display: flex; }
.amt-inline-alert.err  { color: #FF6B6B; }
.amt-inline-alert.warn { color: #FCD34D; }

/* Amount input row — input + currency code side by side */
.amt-input-row { display: flex; align-items: baseline; gap: 6px; width: 100%; }

/* Amount input — transparent, right-aligned */
.amt-input {
  font-family: var(--num); font-size: 46px; font-weight: 700;
  letter-spacing: -2px; color: var(--on-dark);
  background: transparent; border: none; outline: none;
  flex: 1; min-width: 0; line-height: 1;
  padding: 0; margin: 0;
  text-align: right;
  caret-color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.amt-input::placeholder { color: var(--on-dark-dim); font-weight: 400; letter-spacing: -2px; font-size: 46px; }
.buy .amt-input { caret-color: var(--glow-buy); }
.sell .amt-input { caret-color: var(--glow-sell); }

/* Currency denomination next to amount */
.amt-ccy {
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--on-dark-3); letter-spacing: 0.5px;
  flex-shrink: 0; white-space: nowrap;
  text-transform: uppercase;
}

/* CURRENCY FLAG + CODE — in card */
.ccy-flag { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15); }
.ccy-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccy-code { font-size: 18px; font-weight: 700; color: var(--on-dark); letter-spacing: -0.1px; }
.ccy-chev { color: var(--on-dark-3); width: 11px; height: 11px; flex-shrink: 0; }

/* Account name + balance — left-aligned inside card */
.acct-name { font-size: 12px; color: rgba(255,255,255,0.72); }
.acct-bal  { font-size: 12px; color: rgba(255,255,255,0.55); font-family: var(--num); }

/* ── INLINE ALERT — on dark ─────────────────────────── */
.cc-alert {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 16px; border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11px; line-height: 1.45;
  background: rgba(0,0,0,0.25);
}
.cc-alert.warn { color: #FCD34D; }
.cc-alert.err  { color: #FF6B6B; }

/* ── SWAP ────────────────────────────────────────────── */
.swap-row { display: flex; justify-content: center; margin: -16px 0; position: relative; z-index: 5; }
.swap-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text3);
  transition: border-color 65ms, color 65ms, box-shadow 65ms, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.swap-btn:hover { border-color: var(--navy-800); color: var(--navy-900); }

/* (settle-btn replaced by settle-link in top meta section) */

/* ── RATE ROW (below cards) ─────────────────────────── */
.rate-row { margin-top: 14px; padding: 0 2px; min-height: 32px; text-align: center; }
.rate-line { font-size: 17px; color: var(--text2); font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; transition: color 80ms; white-space: nowrap; }
.rate-line:hover { color: var(--text); }
.rate-line strong { color: var(--text); font-weight: 700; font-size: 18px; }
.rate-hint { font-size: 13px; color: var(--text4); }
.rate-warn { font-size: 13px; color: #D97706; font-weight: 500; }

/* Rate ETA — only visible during live quote */
.rate-eta { font-size: 12px; color: var(--text3); margin-top: 4px; }
.rate-eta strong { color: var(--text2); font-weight: 600; }

/* ── CTA ─────────────────────────────────────────────── */
.cta {
  width: 100%; margin-top: 16px; padding: 16px 24px;
  background: var(--navy-900); color: #fff;
  border: none; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 15px; font-weight: 700;
  letter-spacing: 0.3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background 150ms ease, box-shadow 150ms, transform 80ms var(--ease-out-quart);
  position: relative; overflow: hidden;
}
.cta:hover:not(:disabled) { background: var(--navy-700); }
.cta:active:not(:disabled) { transform: scale(0.985) translateY(1px); }
.cta:disabled { background: #D0D6E0; color: #8A96A6; cursor: not-allowed; }

/* Text label sits above ::after overlay */
.cta-label { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; }

/* Timer animation: progress bar inside button */
.cta::after {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  background: rgba(255,255,255,0.10);
  width: var(--timer-pct, 0%);
  transition: width 250ms linear, background 600ms ease;
  pointer-events: none; z-index: 0;
}
.cta.timing::after       { width: var(--timer-pct, 100%); }
.cta.timing.amber::after { background: rgba(251,191,36,0.32); }
.cta.timing.red::after   { background: rgba(248,113,113,0.40); }

/* Timer seconds display in button */
.cta-seconds { font-family: var(--num); font-size: 12px; font-weight: 600; opacity: 0.6; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.3); }

/* ── SAVED PAIRS (left of trade panel) ────────────── */
.saved-panel { width: 170px; flex-shrink: 0; padding-top: 0; }
.saved-ttl { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text4); margin-bottom: 8px; }
.pair-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; margin-bottom: 6px; transition: border-color 65ms, background 65ms, transform 80ms; }
.pair-item:hover { border-color: var(--text3); background: var(--s2); }
.pair-item:active { transform: scale(0.97); }
.pair-item.active { border-color: var(--navy-800); background: #EEF2F8; }
[data-theme="dark"] .pair-item.active { border-color: #5B9EFF; background: var(--s2); }
.pair-info { min-width: 0; flex: 1; }
.pair-flags { display: flex; flex-shrink: 0; }
.pair-flags .ccy-flag-sm { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
.pair-flags .ccy-flag-sm:nth-child(2) { margin-left: -5px; }
.pair-flags .ccy-flag-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-main { font-size: var(--text-base); font-weight: 700; color: var(--text); display: block; }   /* C-1: 13 → base — FX saved-pair main */
.pair-sub  { font-size: 12px; color: var(--text4); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* C-1: 11 → 12 */
.pair-remove { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border: none; background: none; cursor: pointer; color: var(--text4); border-radius: 3px; padding: 0; opacity: 0; transition: opacity 100ms, background 65ms, color 65ms; }
.pair-item:hover .pair-remove { opacity: 1; }
.pair-remove:hover { background: rgba(0,0,0,0.06); color: var(--text2); }
.pair-remove:active { background: rgba(0,0,0,0.1); }
[data-theme="dark"] .pair-remove:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.add-pair { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--r); font-size: 12px; color: var(--text4); cursor: pointer; background: transparent; width: 100%; font-family: var(--font); transition: border-color 65ms, color 65ms; }
.add-pair:hover { border-color: var(--text3); color: var(--text2); }

/* ── HISTORY ─────────────────────────────────────────── */
.hist-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.hist-ttl { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.hist-ctrl { display: flex; align-items: center; gap: 7px; }
.tbl-toolbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; row-gap: 8px; }
/* When the toolbar's seg-tabs + search + filter buttons don't fit on
   one row, the right-side action group wraps to a second row instead
   of pushing the wrapper into horizontal scroll. The "push to right"
   spacer (style="margin-left:auto") still works inside a wrapping
   flex container because the auto-margin keeps the group anchored
   to the row's right edge until it wraps. */
.tbl-toolbar > .seg-tabs { flex-shrink: 0; }
[data-theme="dark"] .tbl-toolbar { background: var(--s2); border-color: var(--border); }
.search-box { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 10px; background: var(--surface); transition: border-color 65ms; }
.search-box:focus-within { border-color: var(--text3); }
.search-box input { border: none; outline: none; background: transparent; font-family: var(--font); font-size: 12px; color: var(--text); width: 200px; }
.search-box input::placeholder { color: var(--text4); }
.ico-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text3); transition: border-color 65ms, color 65ms; }
.ico-btn:hover { border-color: var(--text3); color: var(--text2); }

.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tab { padding: 8px 0; margin-right: 20px; margin-bottom: -1px; font-size: 13px; font-weight: 400; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; transition: color 65ms; }
.tab.on { color: var(--navy-900); font-weight: 700; border-bottom-color: var(--navy-900); }
.tab:hover:not(.on) { color: var(--text2); }
.tab-ct { font-family: var(--num); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; background: var(--s2); border: 1px solid var(--border); color: var(--text2); }
.tab.on .tab-ct { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* ── TABLE ───────────────────────────────────────────── */
.tbl-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 11px; box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04); }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); text-align: left; border-bottom: 1px solid var(--border); background: var(--s2); white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--border-f); cursor: pointer; transition: background 80ms, box-shadow 80ms; }
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: #FAFBFD; }
tbody tr:hover { background: #EDF0F6; }
td { padding: 13px 14px; vertical-align: middle; font-size: 14px; }
.td-ccy { display: flex; align-items: center; gap: 7px; }
/* DECIMAL SUBORDINATION IN TABLE — same treatment as cards */
.td-amt {
  font-family: var(--num); font-size: 14px; font-weight: 700;
  color: var(--text); display: flex; align-items: baseline; gap: 0;
}
.td-amt-dec { font-weight: 400; color: var(--text4); }
.td-acct { font-size: 13px; color: var(--text3); margin-top: 1px; }                            /* C-1: 12 → 13 (secondary table data) */
.td-rate { font-family: var(--num); font-size: var(--text-base); color: var(--text2); white-space: nowrap; }     /* C-1: 13 → base */
.td-date { font-size: var(--text-base); color: var(--text2); white-space: nowrap; }            /* C-1: 13 → base (primary table data) */
.td-arr { color: var(--text4); transition: color 55ms; }
tbody tr:hover .td-arr { color: var(--text2); }

/* Rebook link for pending rows */
.rebook-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  color: var(--navy-800); background: none; border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 8px; cursor: pointer;
  margin-left: 8px; transition: background 65ms, border-color 65ms, color 65ms;
  white-space: nowrap; vertical-align: middle;
}
.rebook-link:hover { background: var(--s2); border-color: var(--text4); color: var(--navy-900); }

/* ── CHIPS ───────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; position: relative; cursor: default; }

/* ── TOOLTIP ─────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff;
  font-size: 11px; font-weight: 400; line-height: 1.4;
  padding: 5px 9px; border-radius: var(--r);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 120ms ease;
  z-index: 200; letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-family: var(--font);
  text-transform: none;
}
[data-tooltip]:hover::after { opacity: 1; }
.settle-link[data-tooltip]::after { left: auto; right: 0; transform: none; }
@media (hover: none) { [data-tooltip]::after { display: none; } }
/* Tooltips need to win against sidebars, sticky chrome and modal overlays.
   Bumped from 200 → 9999 after E-9 review found instr-card tooltips were
   covered by neighbouring elements. */
[data-tooltip]::after { z-index: 9999; }
.chip::before { display: none; }
.chip-settled    { background: var(--c-set-bg); border-color: var(--c-set-bdr); color: var(--c-set-txt); }
.chip-pending    { background: var(--c-pen-bg); border-color: var(--c-pen-bdr); color: var(--c-pen-txt); }
.chip-process,
.chip-processing { background: var(--c-pro-bg); border-color: var(--c-pro-bdr); color: var(--c-pro-txt); }
.chip-scheduled  { background: var(--c-sch-bg); border-color: var(--c-sch-bdr); color: var(--c-sch-txt); }
.chip-final      { background: var(--c-set-bg); border-color: var(--c-set-bdr); color: var(--c-set-txt); }

/* ── SLIDE PANEL ─────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(10,20,40,0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 180ms; }
.overlay.on { opacity: 1; pointer-events: all; }
.slide { position: fixed; right: 0; top: 0; bottom: 0; width: 390px; background: var(--surface); border-left: 1px solid var(--border); z-index: 101; overflow: hidden; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 210ms cubic-bezier(0.16,1,0.3,1); }
.slide.on { transform: translateX(0); }
.slide-hdr { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.slide-hdr-l { display: flex; align-items: center; gap: 9px; }
.slide-ttl { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.close-btn { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--r); background: transparent; cursor: pointer; color: var(--text3); display: flex; align-items: center; justify-content: center; transition: border-color 65ms, color 65ms; }
.close-btn:hover { border-color: var(--text3); color: var(--text); }
.slide-body { padding: 18px 20px; flex: 1; overflow-y: auto; }

.trade-sect { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 13px; }
.ts-hdr { padding: 7px 12px; background: var(--s2); border-bottom: 1px solid var(--border); font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.ts-hdr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ts-body { padding: 11px 12px; }
.ts-row { display: flex; align-items: center; justify-content: space-between; }
.ts-ccy { display: flex; align-items: center; gap: 8px; }
.ts-code { font-size: 14px; font-weight: 700; color: var(--text); }
.ts-acct { font-size: 11px; color: var(--text3); margin-top: 1px; }
.ts-amt { font-family: var(--num); font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; display: flex; align-items: baseline; }
.ts-amt-dec { font-weight: 400; color: var(--text4); }
.ts-cur { font-size: 12px; color: var(--text3); margin-left: 5px; font-weight: 500; }

.detail-box { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 13px; }
.det-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border-f); font-size: 12px; }
.det-row:last-child { border-bottom: none; }
.det-l { color: var(--text3); }
.det-r { color: var(--text); font-weight: 500; }
.det-r.mono { font-family: var(--num); }
.by-box { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.by-hdr { padding: 7px 12px; background: var(--s2); border-bottom: 1px solid var(--border); font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); }
.by-row { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12px; }
.by-l { color: var(--text3); } .by-r { color: var(--text); font-weight: 500; }

/* ── SLIDE PANEL: Notification Banners ───────────────── */
.sp-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  font-size: 12.5px; line-height: 1.6; margin-bottom: 16px;
}
.sp-banner--info {
  background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF;
}
.sp-banner--warn {
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
}
.sp-banner-ico { flex-shrink: 0; margin-top: 2px; }
.sp-banner-txt { flex: 1; }
.sp-banner-txt strong { font-weight: 700; }
[data-theme="dark"] .sp-banner--info { background: #0C1929; border-color: #1E3A5F; color: #93C5FD; }
[data-theme="dark"] .sp-banner--info strong { color: #BFDBFE; }
[data-theme="dark"] .sp-banner--warn { background: #1C1508; border-color: #78470A; color: #FCD34D; }
[data-theme="dark"] .sp-banner--warn strong { color: #FDE68A; }

/* ── SLIDE PANEL: Meta box ───────────────────────────── */
.sp-meta-box {
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: 16px;
}
.sp-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--border-f); font-size: var(--text-base);   /* C-1: 12 → base — trade-panel meta */
}
.sp-meta-row:last-child { border-bottom: none; }
.sp-meta-l { color: var(--text3); }
.sp-meta-r { color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.sp-meta-mono { font-family: var(--num); font-size: 13px; letter-spacing: -0.2px; }   /* C-1: 11.5 → 13 */

/* Copy button next to trade ID */
.sp-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: none; border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; color: var(--text3);
  transition: border-color 65ms, color 65ms; padding: 0; font-size: 10px;
}
.sp-copy-btn:hover { border-color: var(--text3); color: var(--text); }

/* Avatar circle for "Placed by" */
.sp-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy-900); color: #fff;
  font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .sp-avatar { background: #3B4E6B; color: #E6EDF3; }

/* ── SLIDE PANEL: Exchange rate row ──────────────────── */
.sp-rate-row {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 0; margin: -6px 0 6px; font-size: 12px;
  color: var(--text3); font-family: var(--num);
}

/* ── SLIDE PANEL: Action buttons ─────────────────────── */
.sp-actions {
  display: flex; gap: 10px; margin-top: 18px; margin-bottom: 18px;
}
.sp-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--r);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 65ms, border-color 65ms;
  white-space: nowrap;
}
.sp-btn--outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.sp-btn--outline:hover { background: var(--s2); border-color: var(--text3); }
.sp-btn--green {
  background: #059669; color: #fff; border: 1px solid #059669;
}
.sp-btn--green:hover { background: #047857; border-color: #047857; }
[data-theme="dark"] .sp-btn--outline { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .sp-btn--outline:hover { background: var(--s2); border-color: var(--text3); }

/* ── SLIDE PANEL: Rebook section ─────────────────────── */
.sp-rebook {
  border-top: 1px solid var(--border); padding-top: 16px; margin-top: 6px;
}
.sp-rebook-q {
  font-size: 12.5px; color: var(--text2); margin-bottom: 10px; line-height: 1.5;
}
.sp-rebook-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 14px; border-radius: var(--r);
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 65ms, border-color 65ms;
}
.sp-rebook-btn:hover { background: var(--s2); border-color: var(--text3); }

/* ── SLIDE PANEL: Rebook Trade View ──────────────────── */
.rb-desc {
  font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 20px;
}
.rb-section-label {
  font-size: 11px; font-weight: 700; color: var(--text3); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 8px;
}
.rb-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color 120ms, background 120ms, box-shadow 120ms;
  margin-bottom: 6px; position: relative;
}
.rb-card:hover { border-color: var(--text4); background: var(--s2); }
.rb-card.selected {
  border-color: var(--navy-800); background: rgba(15, 23, 42, 0.03);
  box-shadow: 0 0 0 1px var(--navy-800);
}
.rb-card-info { flex: 1; min-width: 0; }
.rb-card-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.rb-card-acct { font-size: 12px; color: var(--text3); margin-top: 2px; }
.rb-card-check {
  position: absolute; right: 12px; bottom: 12px;
  width: 20px; height: 20px; display: none; align-items: center; justify-content: center;
  color: var(--navy-800); flex-shrink: 0;
}
.rb-card.selected .rb-card-check { display: flex; }
.rb-section { margin-bottom: 18px; }
.rb-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 16px; border-radius: var(--r);
  background: #065F46; color: #fff; border: none;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 120ms; margin-top: 8px;
}
.rb-submit:hover { background: #047857; }

/* Dark mode overrides for rebook view */
[data-theme="dark"] .rb-card { border-color: var(--border); background: var(--surface); }
[data-theme="dark"] .rb-card:hover { border-color: var(--text4); background: var(--s2); }
[data-theme="dark"] .rb-card.selected {
  border-color: #60A5FA; background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 0 0 1px #60A5FA;
}
[data-theme="dark"] .rb-card-check { color: #60A5FA; }
[data-theme="dark"] .rb-submit { background: #059669; }
[data-theme="dark"] .rb-submit:hover { background: #10B981; }

/* ── DROPDOWNS ───────────────────────────────────────── */
.drop-bg { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.drop-bg.on { pointer-events: auto; }
.drop-menu { position: fixed; width: 300px; max-height: min(480px, calc(100vh - 120px)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); z-index: 51; overflow-y: auto; overflow-x: hidden; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 120ms, transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }
.drop-menu.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.drop-search { padding: 8px; border-bottom: 1px solid var(--border-f); }
.drop-search input { width: 100%; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 10px; font-family: var(--font); font-size: 12px; outline: none; transition: border-color 65ms; }
.drop-search input:focus { border-color: var(--text3); }
.drop-grp { padding: 6px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); }
.drop-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; transition: background 55ms; }
.drop-item:hover { background: var(--s2); }
.drop-item.on { background: #EEF2F8; }
.di-name  { font-size: var(--text-base); font-weight: 600; color: var(--text); }   /* C-1: 13 → base — account dropdown item name */
.di-bal   { font-size: 12px; color: var(--text3); font-family: var(--num); }
.di-acct  { font-size: 12px; color: var(--text4); }   /* C-1: 11 → 12 — dropdown sub-line */
.di-warn  { font-size: 11px; color: #F59E0B; }

.sdrop-menu { position: fixed; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); z-index: 51; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 120ms, transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }
.sdrop-menu.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sdrop-opt { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-f); transition: background 55ms; }
.sdrop-opt:last-child { border-bottom: none; }
.sdrop-opt:hover { background: var(--s2); }
.sdrop-opt.on { background: #EEF2F8; }
.sopt-t { font-family: var(--num); font-size: 13px; font-weight: 700; color: var(--navy-800); }
.sopt-date { font-size: 13px; color: var(--text2); font-family: var(--num); text-align: right; }

svg { display: block; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── DELIGHT: Card glow breathing during live quote ──── */
@keyframes glow-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.65; }
}
.ccard.quoting::before { animation: glow-breathe 3s ease-in-out infinite; }

/* ── DELIGHT: Table row hover accent ─────────────────── */
tbody td:first-child { transition: box-shadow 100ms; }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--navy-800); }
[data-theme="dark"] tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 #5B9EFF; }

/* ── DELIGHT: CTA success state ──────────────────────── */
.cta.success { background: #059669; }
@keyframes draw-check {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}
.cta.success .check-draw path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw-check 350ms cubic-bezier(0.65, 0, 0.35, 1) 80ms forwards;
}

/* ── PORTFOLIO SETTINGS DROPDOWN ───────────────────── */
.pf-popup {
  position: fixed; z-index: 51; background: var(--surface); border-radius: 12px;
  padding: 0; width: 300px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  transition: opacity 120ms, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.pf-popup.on { opacity: 1; pointer-events: all; transform: translateY(0); }
.pf-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.pf-hdr-ttl { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.1px; }
.pf-body { padding: 16px 20px 20px; }
.pf-section-lbl {
  font-size: 12px; font-weight: 700; color: var(--text2); letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.pf-divider { height: 1px; background: var(--border); margin: 16px 0; }
.pf-select-wrap { position: relative; }
.pf-select {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  cursor: pointer; font-family: var(--font); transition: border-color 65ms;
}
.pf-select:hover { border-color: var(--text3); }
.pf-drop-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10); z-index: 10;
  max-height: 240px; overflow-y: auto;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 120ms, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.pf-drop-menu.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pf-drop-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text);
  transition: background 55ms;
}
.pf-drop-opt:hover { background: var(--s2); }
.pf-drop-opt.on { background: #EEF2F8; }
.pf-order-list { display: flex; flex-direction: column; gap: 0; }
.pf-order-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border-f);
}
.pf-order-row:last-child { border-bottom: none; }
.pf-arrow {
  width: 28px; height: 28px; border: none; background: none;
  cursor: pointer; color: var(--text3); display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: background 65ms, color 65ms;
}
.pf-arrow:hover:not(:disabled) { background: var(--s2); color: var(--text); }
.pf-arrow:disabled { color: var(--border); cursor: default; }
.pf-gear {
  background: none; border: none; padding: 2px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.7);
  transition: color 65ms; flex-shrink: 0;
}
.pf-gear:hover { color: rgba(255,255,255,0.95); }
.ac-count {
  font-size: 11px; font-weight: 700; color: var(--text3); background: var(--s2);
  border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px;
  line-height: 1.4; display: inline-flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .ac-count { background: var(--s2); border-color: var(--border); color: var(--text3); }
[data-theme="dark"] .pf-popup { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pf-hdr { border-color: var(--border); }
[data-theme="dark"] .pf-select { background: var(--s2); border-color: var(--border); }
[data-theme="dark"] .pf-drop-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pf-drop-opt.on { background: var(--s2); }
[data-theme="dark"] .pf-drop-opt:hover { background: var(--s2); }
[data-theme="dark"] .pf-arrow:hover:not(:disabled) { background: var(--s2); }

/* ── DASHBOARD ──────────────────────────────────────── */
.dash-hdr { display: flex; justify-content: space-between; align-items: flex-start; }
/* C-1: page-title.
   Main pages (Dashboard / Payments / FX / Accounts / Beneficiaries /
   Settings / etc.) use --text-2xl. Sub-detail pages (account-detail,
   beneficiary-detail) keep their inline style="font-size:22px" to
   feel more restrained inside an entity view — that's the original
   institutional treatment we want to preserve. */
.dash-title { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.2px; line-height: 1.2; font-family: var(--num); }
.dash-sub { font-size: var(--text-base); color: var(--text3); margin-top: 6px; font-weight: var(--fw-medium); }
.dash-actions { display: flex; gap: 12px; }
.btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--navy-900); color: #F9FAFB; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: var(--r); border: none; cursor: pointer; font-family: var(--font); white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.btn-primary:hover { background: var(--navy-800); }
.btn-primary:disabled { background: #D0D6E0; color: #8A96A6; cursor: not-allowed; }
.btn-outline { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text2); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--border); cursor: pointer; font-family: var(--font); white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.btn-outline:hover { background: var(--s2); border-color: var(--text4); color: var(--text); }
[data-theme="dark"] .btn-primary { background: var(--navy-600); color: #E8EDF5; }
[data-theme="dark"] .btn-primary:hover { background: var(--navy-700); }
[data-theme="dark"] .btn-outline { border-color: var(--border); color: var(--text2); background: var(--surface); }

/* Section headers */
.sect-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sect-hdr-l { display: flex; align-items: center; gap: 12px; }
.sect-ttl { font-size: 20px; font-weight: 700; letter-spacing: -0.1px; font-family: var(--num); }
.sect-links { display: flex; gap: 16px; }
.see-all { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.see-all:hover { color: #374667; }
.scroll-arrows { display: flex; gap: 8px; }
.arr-btn { background: none; border: none; cursor: pointer; color: var(--text3); padding: 0; }
.arr-btn:hover { color: var(--text); }

/* Account cards */
.acct-cards { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.acct-cards::-webkit-scrollbar { display: none; }
.acct-card { width: 204px; min-width: 204px; height: 194px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.acct-card-dark { background: #111A3B; border-color: transparent; width: auto; min-width: 240px; flex-shrink: 0; }
.acct-card-dark .ac-amt-light { white-space: nowrap; }
.ac-top { display: flex; flex-direction: column; gap: 12px; }
.ac-flag { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.ac-flag img { width: 100%; height: 100%; object-fit: cover; }
.ac-label { font-size: 14px; font-weight: 600; color: #4B5563; }
.ac-label-light { font-size: 14px; font-weight: 600; color: #E0EAF7; }
.ac-amt { font-size: 30px; font-weight: 500; color: #1F2937; font-family: var(--num); letter-spacing: -0.2px; }
.ac-amt-light { font-size: 30px; font-weight: 500; color: #F3F7FC; font-family: var(--num); letter-spacing: -0.2px; }
[data-theme="dark"] .acct-card:not(.acct-card-dark) { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ac-label { color: var(--text3); }
[data-theme="dark"] .ac-amt { color: var(--text); }

/* Activity tabs */
.act-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.act-tab { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: #6A7EA3; background: none; border: none; padding: 0 4px 12px; cursor: pointer; font-family: var(--font); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.act-tab.on { color: #374667; border-bottom-color: #374667; }
.act-tab:hover { color: #374667; }
[data-theme="dark"] .act-tab { color: var(--text4); }
[data-theme="dark"] .act-tab.on { color: var(--text); border-bottom-color: var(--text); }

/* Pill tabs (filter chips) */
.pill-tabs { display: flex; gap: 6px; align-items: center; }
.pill-tab { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text3); background: none; border: 1px solid transparent; border-radius: 20px; padding: 6px 14px; cursor: pointer; font-family: var(--font); transition: color 100ms, border-color 100ms, background 100ms; }
.pill-tab:hover { color: var(--text2); background: var(--s2); }
.pill-tab.on { border-color: var(--text); color: var(--text); background: var(--surface); }
[data-theme="dark"] .pill-tab { color: var(--text4); }
[data-theme="dark"] .pill-tab:hover { color: var(--text2); background: var(--s2); }
[data-theme="dark"] .pill-tab.on { border-color: var(--text3); color: var(--text); background: var(--s2); }

/* Segment tabs (segmented control with shared track) */
.seg-tabs { display: flex; gap: 4px; align-items: center; background: var(--s2); border-radius: 6px; padding: 3px; }
.seg-tab { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text3); background: transparent; border: none; border-radius: var(--r); padding: 6px 14px; cursor: pointer; font-family: var(--font); white-space: nowrap; transition: color 65ms, background 65ms, box-shadow 65ms; }
.seg-tab:hover { color: var(--text2); }
.seg-tab.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-theme="dark"] .seg-tabs { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .seg-tab { color: var(--text4); }
[data-theme="dark"] .seg-tab:hover { color: var(--text2); }
[data-theme="dark"] .seg-tab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* Search box — compact variant to sit with filter buttons */
.search-box-sm { border-radius: var(--r); padding: 7px 12px; }
.search-box-sm input { width: 140px; font-size: 13px; }

/* Activity table — inherits generic table styles (padding, borders, hover) */
/* F-1: the wrapper keeps overflow: hidden so its rounded border,
   toolbar, and pagination stay in place. The table itself sits
   inside a .tbl-scroll div that handles horizontal overflow when
   columns hit their min-widths — keeps the real <table> layout
   intact so thead/tbody columns stay aligned. Popovers escape
   the wrapper via the existing :has(.filter-btn-icon) override. */
.act-tbl-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 8px; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.tbl-scroll { overflow-x: auto; overflow-y: hidden; }
.tbl-scroll > table { width: 100%; }
.td-ico { width: 36px; padding-left: 14px !important; }
.td-name { min-width: 200px; }
.td-amt-cell { text-align: right; white-space: nowrap; min-width: 110px; }
.td-amt-cell .td-amt { min-width: 0; }
.td-date { min-width: 110px; }
.td-status { white-space: nowrap; min-width: 100px; }
.td-chev { width: 26px; text-align: right; padding-right: 14px !important; color: var(--text4); }

/* Direction icons */
.dir-ico { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dir-sent { background: #F9EAEA; border: 1px solid #FFCFCF; color: #2B3139; }
.dir-recv { background: #ECFFE5; border: 1px solid #CDF7BE; color: #2B3139; }
.dir-fx { background: #FDF8D5; border: 1px solid #F0E599; color: #2B3139; }
[data-theme="dark"] .dir-sent { background: #3B1515; border-color: #5C2020; color: #BFC5CC; }
[data-theme="dark"] .dir-recv { background: #0D2818; border-color: #1A4C2E; color: #BFC5CC; }
[data-theme="dark"] .dir-fx { background: #2A2000; border-color: #4A3A0A; color: #BFC5CC; }

/* Activity name/detail */
.act-name { display: flex; flex-direction: column; }
.act-n { font-size: var(--text-base); font-weight: 500; color: var(--text); }                  /* C-1: was 14, route to base */
.act-d { font-size: 13px; color: var(--text3); display: flex; align-items: center; gap: 4px; margin-top: 1px; }   /* C-1: 12 → 13 (sub-line one step up) */
.act-flag-sm { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.act-fx-pair { display: flex; align-items: center; gap: 4px; font-weight: 600; color: #1B274A; }
.act-fx-flag { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
[data-theme="dark"] .act-fx-pair { color: var(--text); }

/* Activity row layout with circle icon */
.act-row-left { display: flex; align-items: center; gap: 12px; }
/* Avatar / flag-circle size tiers (C-16 unification).
   sm: small inline glyphs. md: every row-level avatar across the app
   (activity, payments, FX, accounts, beneficiaries, team rows). lg:
   feature surfaces (most-used cards, success / detail headers). */
:root { --av-sm: 24px; --av-md: 32px; --av-lg: 52px; }
.act-circle { position: relative; width: var(--av-md); height: var(--av-md); border-radius: 50%; overflow: visible; flex-shrink: 0; }
.act-circle img { width: var(--av-md); height: var(--av-md); border-radius: 50%; object-fit: cover; }
.act-circle-eu { display: flex; align-items: center; justify-content: center; width: var(--av-md); height: var(--av-md); border-radius: 50%; background: #003399; font-size: 13px; color: #FFD700; font-weight: 700; }
.act-circle-usdc { display: flex; align-items: center; justify-content: center; width: var(--av-md); height: var(--av-md); border-radius: 50%; background: #2775CA; font-size: 12px; color: #fff; font-weight: 700; }
.act-circle-poly { display: flex; align-items: center; justify-content: center; width: var(--av-md); height: var(--av-md); border-radius: 50%; background: #8247E5; }
.act-circle-badge { position: absolute; bottom: -1px; right: -1px; width: 13px; height: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff; }
.act-badge-sent { background: #B91C1C; }
.act-badge-recv { background: #059669; }
[data-theme="dark"] .act-circle-badge { box-shadow: 0 0 0 2px var(--surface); }
.act-d-gate { color: #059669 !important; font-weight: 500; }
.act-d-poly { color: #7C3AED !important; font-weight: 500; }
[data-theme="dark"] .act-d-gate { color: #34D399 !important; }
[data-theme="dark"] .act-d-poly { color: #A78BFA !important; }

/* Airier activity rows */
.act-tbl-wrap.pay-tbl-wrap .act-tbl td { padding-top: 14px; padding-bottom: 14px; }

/* Processing chip — colours come from the --c-pro-* tokens above
   (canonical blue per C-5). Old hard-coded orange override removed. */

/* Amount + currency pill */
.act-amt-val { font-weight: 600; color: var(--text); }
.ccy-pill-sm { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid #9CA3AF; border-radius: 36px; font-size: 12px; color: #6B7280; font-weight: 400; margin-left: 4px; }
[data-theme="dark"] .ccy-pill-sm { border-color: var(--text4); color: var(--text3); }

/* Status badges */
.badge { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 6px; border-radius: 2px; font-size: 12px; font-weight: 500; }
.badge-green { background: #DCFCE7; border: 1px solid #6EE7B7; color: #166534; }
.badge-orange { background: #FFEDD5; border: 1px solid #FDBA74; color: #EA580C; }
.badge-red { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
[data-theme="dark"] .badge-green { background: #0D2818; border-color: #1A5C38; color: #4ADE80; }
[data-theme="dark"] .badge-orange { background: #2A1F00; border-color: #78470A; color: #FBBF24; }
[data-theme="dark"] .badge-red { background: #3B1515; border-color: #7F1D1D; color: #FCA5A5; }

/* Beneficiaries */
.ben-tbl-hdr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); background: var(--s2); border-bottom: 1px solid var(--border); }
[data-theme="dark"] .ben-tbl-hdr { background: var(--s2); border-color: var(--border); color: var(--text4); }
.ben-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.04); margin-top: 8px; }
.ben-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-f); cursor: pointer; transition: background 55ms; }
.ben-row:last-child { border-bottom: none; }

.ben-row:hover { background: #F2F5F9; }
.ben-av { width: var(--av-md); height: var(--av-md); border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #6B7280; flex-shrink: 0; }
.ben-row:nth-child(5n+1) .ben-av { background: #D1FAE5; color: #065F46; }
.ben-row:nth-child(5n+2) .ben-av { background: #DBEAFE; color: #1E40AF; }
.ben-row:nth-child(5n+3) .ben-av { background: #FCE7F3; color: #9D174D; }
.ben-row:nth-child(5n+4) .ben-av { background: #FEF3C7; color: #92400E; }
.ben-row:nth-child(5n+5) .ben-av { background: #EDE9FE; color: #5B21B6; }
.ben-info { flex: 1; min-width: 0; }
.ben-name { font-size: var(--text-base); font-weight: 500; color: var(--text); }
.ben-iban { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.ben-internal { font-size: 13px; font-weight: 500; color: #059669; margin-left: 4px; }
.ben-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* HIDDEN 2026-05-25: Recent Beneficiaries section on the Dashboard temporarily removed per client request — these dashboard-only rules are unused while the section is hidden. Restore by uncommenting the two lines below. Restored together with: dashboard.html (HIDDEN-wrapped section), js/dashboard.js (renderBeneficiaries() call), and the .dash-ben-gate block below. */
/*
.ben-send { font-size: var(--text-base); font-weight: 500; color: var(--text3); background: none; border: 1px solid var(--border); border-radius: var(--r); padding: 4px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: var(--font); }
.ben-send:hover { background: var(--s2); color: var(--text); }
*/
.ben-chev { color: var(--border); }
/* HIDDEN 2026-05-25: Recent Beneficiaries section on the Dashboard temporarily removed per client request — these dashboard-only rules are unused while the section is hidden. Restore by uncommenting the two lines below. Restored together with: dashboard.html, js/dashboard.js, and the .ben-send block above. */
/*
.dash-ben-gate { font-size: 10px; font-weight: 600; color: #6366F1; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 3px; padding: 1px 6px; margin-left: 4px; letter-spacing: 0.3px; }
[data-theme="dark"] .dash-ben-gate { background: #2E1065; border-color: #4C1D95; color: #A78BFA; }
*/
.ben-ccy-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text2); background: var(--s2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px 3px 6px; white-space: nowrap; }
.ben-count-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text3); background: var(--s2); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; height: 18px; margin-left: 4px; vertical-align: middle; }
[data-theme="dark"] .ben-ccy-chip { background: var(--s2); border-color: var(--border); color: var(--text2); }
[data-theme="dark"] .ben-count-badge { background: var(--s2); border-color: var(--border); color: var(--text4); }

[data-theme="dark"] .ben-row:hover { background: var(--s2); }
[data-theme="dark"] .ben-row { border-bottom-color: var(--border); }
[data-theme="dark"] .ben-av { background: var(--border); color: var(--text3); }
[data-theme="dark"] .ben-row:nth-child(5n+1) .ben-av { background: #064E3B; color: #6EE7B7; }
[data-theme="dark"] .ben-row:nth-child(5n+2) .ben-av { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark"] .ben-row:nth-child(5n+3) .ben-av { background: #4C1D3A; color: #F9A8D4; }
[data-theme="dark"] .ben-row:nth-child(5n+4) .ben-av { background: #451A03; color: #FCD34D; }
[data-theme="dark"] .ben-row:nth-child(5n+5) .ben-av { background: #2E1065; color: #C4B5FD; }

/* ── PAYMENTS ──────────────────────────────────────── */
.pay-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pay-toolbar .act-tabs { margin-bottom: 0; }
.pay-filters { display: flex; align-items: center; gap: 8px; }
.filter-btn { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 7px 12px; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.filter-btn:hover { background: var(--s2); color: var(--text); }
[data-theme="dark"] .filter-btn { background: var(--surface); border-color: var(--border); color: var(--text3); }
[data-theme="dark"] .filter-btn:hover { background: var(--s2); color: var(--text); }
.pay-tbl-wrap { background: var(--surface); }

/* ── ACCOUNTS PAGE ─────────────────────────────────── */
.accts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.acct-card-lg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(16,24,40,0.05); transition: box-shadow 0.15s; cursor: pointer; }
.acct-card-lg:hover { border-color: var(--text4); }
.acct-card-lg.acct-card-dark { background: #111A3B; border-color: transparent; }
.acct-card-lg.acct-card-dark:hover { border-color: rgba(255,255,255,0.15); }
.acct-card-lg .ac-top { display: flex; flex-direction: column; gap: 10px; }
.acct-card-lg .ac-bottom { display: flex; align-items: baseline; gap: 8px; }
.ac-ccy-tag { font-size: 12px; font-weight: 500; color: #6B7280; background: #F3F4F6; border-radius: 2px; padding: 2px 6px; }
.acct-card-dark .ac-ccy-tag { background: #283558; color: #E0EAF7; }
[data-theme="dark"] .acct-card-lg:not(.acct-card-dark) { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ac-ccy-tag { background: var(--border); color: var(--text3); }
.ac-actions { display: flex; gap: 6px; margin-top: auto; }
.ac-act-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text2); background: var(--s2); border: none; border-radius: var(--r); padding: 5px 12px; cursor: pointer; font-family: var(--font); transition: background 65ms, color 65ms; }
.ac-act-btn:hover { background: var(--border); color: var(--text); }
.ac-act-btn-primary { background: #111A3B; color: #fff; }
.ac-act-btn-primary:hover { background: #1E3352; color: #fff; }
.acct-card-dark .ac-act-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: none; }
.acct-card-dark .ac-act-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.acct-card-dark .ac-act-btn-primary { background: rgba(255,255,255,0.18); color: #fff; }
[data-theme="dark"] .ac-act-btn { background: var(--s2); color: var(--text3); border: none; }
[data-theme="dark"] .ac-act-btn:hover { background: var(--border); color: var(--text); }
[data-theme="dark"] .ac-act-btn-primary { background: #E0EAF7; color: #111A3B; }
[data-theme="dark"] .ac-act-btn-primary:hover { background: #fff; }

/* ── REVIEW PAGE ───────────────────────────────────── */
/* HIDDEN 2026-05-18: Review temporarily removed per client request. Restore by uncommenting the .review-count block below. */
/*
.review-count { display: inline-flex; align-items: center; justify-content: center; background: #111A3B; color: #F9FAFB; font-size: 13px; font-weight: 600; border-radius: 20px; min-width: 28px; height: 28px; padding: 0 8px; font-family: var(--num); }
[data-theme="dark"] .review-count { background: #E0EAF7; color: #111A3B; }
*/

/* ── PAYMENT ENHANCEMENTS ─────────────────────────────── */

/* Color-coded amounts */
.amt-negative { color: #DC2626 !important; }
.amt-positive { color: #059669 !important; }
[data-theme="dark"] .amt-negative { color: #FCA5A5 !important; }
[data-theme="dark"] .amt-positive { color: #6EE7B7 !important; }

/* Movement labels */
.movement-lbl { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 2px; display: inline-flex; align-items: center; }
.movement-sent { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.movement-recv { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
[data-theme="dark"] .movement-sent { background: #3B1515; color: #FCA5A5; border-color: #7F1D1D; }
[data-theme="dark"] .movement-recv { background: #0D2818; color: #6EE7B7; border-color: #1A5C38; }

/* Movement column */
.td-movement { white-space: nowrap; }

/* HIDDEN 2026-05-18: GATE Network temporarily removed per client request. .gate-tag is only used by js/gate.js. Restore by uncommenting the .gate-tag block below. */
/* GATE Network tag */
/*
.gate-tag { font-size: 10px; font-weight: 600; color: #7C3AED; background: #EDE9FE; border: 1px solid #C4B5FD; border-radius: var(--r-pill); padding: 1px 5px; margin-left: 5px; display: inline-flex; align-items: center; vertical-align: middle; letter-spacing: 0.1px; }
[data-theme="dark"] .gate-tag { background: #2E1065; color: #C4B5FD; border-color: #5B21B6; }
*/

/* Under review tab badge */
.tab-badge-red { background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; line-height: 1.4; margin-left: 4px; }

/* Pagination bar */
.pagination-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 12px; color: var(--text4); border-top: 1px solid var(--border); }
.pag-left, .pag-right { display: flex; align-items: center; gap: 6px; }
.pag-select { border: 1px solid var(--border); border-radius: 2px; padding: 3px 6px; font-size: 12px; font-family: var(--font); background: var(--surface); color: var(--text); cursor: pointer; outline: none; }
[data-theme="dark"] .pag-select { background: var(--surface); border-color: var(--border); color: var(--text); }
.pag-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text4); cursor: pointer; font-family: var(--font); transition: border-color 65ms, color 65ms; }
.pag-arrow:hover { border-color: var(--text4); color: var(--text2); }
[data-theme="dark"] .pag-arrow { background: var(--surface); border-color: var(--border); color: var(--text4); }
[data-theme="dark"] .pag-arrow:hover { border-color: var(--text3); color: var(--text2); }

/* ── PAYMENT SLIDE PANEL ──────────────────────────────── */

/* Review warning bar */
.panel-warn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: var(--r); font-size: 12px; font-weight: 500; color: #92400E; margin-bottom: 14px; }
[data-theme="dark"] .panel-warn { background: #2A1F00; border-color: #78470A; color: #FBBF24; }

/* Panel sections */
.panel-section { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.ps-hdr { padding: 7px 12px; background: var(--s2); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); }    /* C-1: 9.5 → 11 — slide-panel section header */
.ps-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border-f); font-size: var(--text-base); }    /* C-1: 12 → base (slide-panel detail rows) */
.ps-row:last-child { border-bottom: none; }
.ps-l { color: var(--text3); }
.ps-r { color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.ps-copy { cursor: pointer; transition: color 65ms; }
.ps-copy:hover { color: var(--navy-800); }
.ps-copy svg { opacity: 0.4; transition: opacity 65ms; }
.ps-copy:hover svg { opacity: 0.8; }

/* Method badge */
.method-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 2px; background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; letter-spacing: 0.3px; }
[data-theme="dark"] .method-badge { background: #0D1F3C; color: #60A5FA; border-color: #1E3A6E; }

/* Panel amount */
.panel-amount { padding: 14px 12px; font-family: var(--num); font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.panel-ccy { font-size: 14px; font-weight: 500; color: var(--text3); }

/* Panel actions (approve/reject for review items) */
.panel-actions { display: flex; gap: 8px; margin-top: 4px; }
.panel-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: none; border-radius: var(--r); font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: opacity 65ms, background 65ms; }
.panel-btn:hover { opacity: 0.9; }
.panel-btn-approve { background: #059669; color: #fff; }
.panel-btn-reject { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
[data-theme="dark"] .panel-btn-approve { background: #047857; }
[data-theme="dark"] .panel-btn-reject { background: #3B1515; color: #FCA5A5; border-color: #7F1D1D; }

/* Failed chip */
.chip-failed { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
[data-theme="dark"] .chip-failed { background: #3B1515; border-color: #7F1D1D; color: #FCA5A5; }

/* ── SEND PAYMENT WIZARD ──────────────────────────────── */

/* Stepper */
.wiz-stepper { display: flex; align-items: center; gap: 0; max-width: 520px; margin: 0 auto; }
.wiz-step { display: flex; align-items: center; gap: 8px; padding: 6px 0; white-space: nowrap; }
.wiz-num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--num); font-size: 11px; font-weight: 700; color: var(--text4); transition: all 150ms; }
.wiz-lbl { font-size: 13px; font-weight: 500; color: var(--text4); transition: color 150ms; }
.wiz-step.active .wiz-num { background: #111A3B; border-color: #111A3B; color: #fff; }
.wiz-step.active .wiz-lbl { color: var(--text); font-weight: 600; }
.wiz-step.done .wiz-num { background: #059669; border-color: #059669; color: #fff; }
.wiz-step.done .wiz-lbl { color: var(--text2); }
.wiz-line { flex: 1; height: 2px; background: var(--border); margin: 0 8px; transition: background 150ms; }
.wiz-line.done { background: #059669; }
[data-theme="dark"] .wiz-step.active .wiz-num { background: #E0EAF7; border-color: #E0EAF7; color: #111A3B; }

/* Wizard panel */
.wiz-content { max-width: 560px; margin: 0 auto; width: 100%; }
.wiz-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; }
.wiz-panel-hdr { font-size: 16px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.2px; }

/* Beneficiary search */
.wiz-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--r); padding: 9px 12px; background: var(--s2); margin-bottom: 12px; transition: border-color 65ms; }
.wiz-search:focus-within { border-color: var(--text3); }
.wiz-search input { border: none; outline: none; background: transparent; font-family: var(--font); font-size: 13px; color: var(--text); flex: 1; }
.wiz-search input::placeholder { color: var(--text4); }
[data-theme="dark"] .wiz-search { background: var(--s2); border-color: var(--border); }
[data-theme="dark"] .wiz-search input { color: var(--text); }

/* Beneficiary list in wizard — match the global table row treatment so
   alternating zebra + row borders read the same as activity / payments
   tables, even though this is a div-list rather than a real <tr>. */
.wiz-ben-list { max-height: 360px; overflow-y: auto; }
.wiz-ben-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 0; cursor: pointer; transition: background 80ms, box-shadow 80ms; position: relative; border-bottom: 1px solid var(--border-f); }
.wiz-ben-row:last-child { border-bottom: none; }
.wiz-ben-row:nth-child(even) { background: #FAFBFD; }
.wiz-ben-row:hover { background: #EDF0F6; }
.wiz-ben-row.selected { background: #ECFDF5; border-color: #A7F3D0; box-shadow: inset 2px 0 0 #059669; }
[data-theme="dark"] .wiz-ben-row { border-bottom-color: var(--border-f); }
[data-theme="dark"] .wiz-ben-row:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
[data-theme="dark"] .wiz-ben-row:hover { background: var(--s2); }
[data-theme="dark"] .wiz-ben-row.selected { background: #0D2818; border-color: #1A5C38; }
.wiz-ben-info { flex: 1; min-width: 0; }
.wiz-ben-name { font-size: 13px; font-weight: 500; color: var(--text); }
.wiz-ben-iban { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.wiz-ben-check { display: none; flex-shrink: 0; }
.wiz-ben-row.selected .wiz-ben-check { display: block; }
.wiz-empty { text-align: center; padding: 24px; font-size: 13px; color: var(--text4); }

/* Selected beneficiary box */
.wiz-sel-ben { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 16px; }
.wiz-sel-ben .wiz-ben-name { font-weight: 600; }
.wiz-change-btn { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text3); background: none; border: 1px solid var(--border); border-radius: var(--r); padding: 4px 10px; cursor: pointer; font-family: var(--font); }
.wiz-change-btn:hover { background: var(--surface); color: var(--text); }

/* Wizard form */
.wiz-form { display: flex; flex-direction: column; gap: 16px; }
.wiz-field { display: flex; flex-direction: column; gap: 6px; }
.wiz-label { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: 0.3px; text-transform: uppercase; }
.wiz-select, .wiz-text-input { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; font-family: var(--font); font-size: var(--text-base); color: var(--text); background: var(--surface); outline: none; transition: border-color 65ms; width: 100%; }
.wiz-select:focus, .wiz-text-input:focus { border-color: var(--text3); }
[data-theme="dark"] .wiz-select, [data-theme="dark"] .wiz-text-input { background: var(--s2); border-color: var(--border); color: var(--text); }

/* Amount row */
.wiz-amt-row { display: flex; gap: 8px; }
.wiz-amt-input { flex: 1; border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; font-family: var(--num); font-size: 18px; font-weight: 600; color: var(--text); background: var(--surface); outline: none; transition: border-color 65ms; letter-spacing: -0.5px; }
.wiz-amt-input:focus { border-color: var(--text3); }
.wiz-amt-input::placeholder { color: var(--text4); font-weight: 400; }
[data-theme="dark"] .wiz-amt-input { background: var(--s2); border-color: var(--border); color: var(--text); }
.wiz-ccy-select { width: 80px; border: 1px solid var(--border); border-radius: var(--r); padding: 10px 8px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); outline: none; cursor: pointer; }
[data-theme="dark"] .wiz-ccy-select { background: var(--s2); border-color: var(--border); color: var(--text); }

/* Method picker */
.wiz-method-row { display: flex; gap: 8px; }
.wiz-method { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; font-family: var(--font); text-align: left; transition: border-color 65ms, background 65ms; }
.wiz-method:hover { background: var(--s2); }
.wiz-method.on { border-color: #111A3B; background: #F0F2F6; }
[data-theme="dark"] .wiz-method.on { border-color: #5B9EFF; background: var(--s2); }
.wiz-method-name { font-size: 13px; font-weight: 600; color: var(--text); }
.wiz-method-sub { font-size: 11px; color: var(--text3); }

/* Button row */
.wiz-btn-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* Review card — reuse panel-section styles from payments panel */
.wiz-review-card { display: flex; flex-direction: column; gap: 12px; }

/* Success state */
.wiz-success { text-align: center; padding: 24px 16px; }
.wiz-success-icon { margin: 0 auto 16px; width: 56px; height: 56px; border-radius: 50%; background: #ECFDF5; border: 1px solid #A7F3D0; display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .wiz-success-icon { background: #0D2818; border-color: #1A5C38; }
.wiz-success-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.3px; }
.wiz-success-sub { font-size: 14px; color: var(--text3); margin-bottom: 12px; }
.wiz-success-ref { font-family: var(--num); font-size: 13px; font-weight: 600; color: var(--text2); background: var(--s2); padding: 6px 14px; border-radius: var(--r); display: inline-block; margin-bottom: 20px; }
.wiz-success-actions { display: flex; gap: 12px; justify-content: center; }

/* ── GATE NETWORK PAGE ────────────────────────────────── */
/* HIDDEN 2026-05-18: GATE Network temporarily removed per client request. Restore by removing the four block-comment wrappers below (one per subsection). */

/* GATE info banner */
/*
.gate-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: linear-gradient(135deg, #E8EDF5, #F0F3FA); border: 1px solid #B4C2D6; border-radius: var(--r); }
[data-theme="dark"] .gate-banner { background: linear-gradient(135deg, #0E1D35, #15253F); border-color: #2B3D5B; }
.gate-banner-icon { width: 40px; height: 40px; border-radius: var(--r); background: #fff; border: 1px solid #B4C2D6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-theme="dark"] .gate-banner-icon { background: #15253F; border-color: #2B3D5B; }
.gate-banner-text { flex: 1; }
.gate-banner-title { font-size: 14px; font-weight: 700; color: var(--navy-900); }
[data-theme="dark"] .gate-banner-title { color: #B4C2D6; }
.gate-banner-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
[data-theme="dark"] .gate-banner-sub { color: #7B8CA0; }
.gate-banner-stats { display: flex; gap: 20px; flex-shrink: 0; }
.gate-stat { display: flex; flex-direction: column; align-items: center; }
.gate-stat-val { font-family: var(--num); font-size: 18px; font-weight: 700; color: var(--navy-900); }
[data-theme="dark"] .gate-stat-val { color: #B4C2D6; }
.gate-stat-lbl { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
[data-theme="dark"] .gate-stat-lbl { color: #7B8CA0; }
*/

/* GATE tabs */
/*
.gate-tabs { margin-bottom: 0; }
*/

/* GATE directory grid */
/*
.gate-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gate-dir-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; transition: box-shadow 0.15s; }
.gate-dir-card:hover { border-color: var(--text4); }
.gate-dir-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gate-dir-flag { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,0,0,0.08); }
.gate-dir-name { font-size: 13px; font-weight: 600; color: var(--text); }
.gate-dir-country { font-size: 11px; color: var(--text3); }
.gate-dir-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); padding-top: 10px; border-top: 1px solid var(--border); }
.gate-dir-meta strong { color: var(--text); font-weight: 600; }
*/

/* GATE fee box in send tab */
/*
.gate-fee-box { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.gate-fee-row { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 12px; color: var(--text3); border-bottom: 1px solid var(--border-f); }
.gate-fee-row:last-child { border-bottom: none; }
.gate-fee-val { font-weight: 600; color: var(--text); }
.gate-fee-free { color: #059669; }
*/

/* ── VIEW TOGGLE (Accounts grid/list) ─────────────────── */
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.view-btn { width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: none; cursor: pointer; color: var(--text4); transition: background 65ms, color 65ms; }
.view-btn:not(:last-child) { border-right: 1px solid var(--border); }
.view-btn:hover { background: var(--s2); color: var(--text3); }
.view-btn.on { background: var(--s2); color: var(--text); }
[data-theme="dark"] .view-toggle { border-color: var(--border); }

/* Accounts list view */
.accts-list { /* replaces grid className when in list mode */ }

/* ── TABLE HEADER UTILITIES ───────────────────────────── */
.th-ico { width: 36px; padding-left: 14px !important; }
.th-amt { text-align: right !important; }
.th-chev { width: 26px; padding-right: 14px !important; }

/* ── BENEFICIARY PANEL ────────────────────────────────── */
.ben-panel-top { text-align: center; padding: 8px 0 18px; }
.ben-av-lg { width: var(--av-lg); height: var(--av-lg); font-size: 16px; margin: 0 auto 10px; }
.ben-panel-name { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.ben-panel-contact { font-size: 13px; color: var(--text3); margin-top: 2px; }
.ben-acct-list { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ben-acct-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text2); background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: 5px 10px; }
.ben-extra-accts { font-size: 10px; font-weight: 600; color: var(--text3); background: var(--s2); border: 1px solid var(--border); border-radius: 2px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }

/* ── BENEFICIARY DETAIL PAGE ──────────────────────────── */
.bend-section { margin-bottom: 28px; }
.bend-section-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; margin-bottom: 12px; }
.bend-instructions { display: flex; gap: 12px; flex-wrap: wrap; }
.bend-instr-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; width: 220px; cursor: default; }
.bend-instr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bend-instr-edit { background: none; border: 1px solid var(--border); border-radius: var(--r); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text3); transition: background 65ms; }
.bend-instr-edit:hover { background: var(--s2); color: var(--text); }
.bend-instr-label { font-size: var(--text-base); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }    /* C-1: 13 → base */
.bend-instr-iban { font-size: var(--text-sm); color: var(--text3); margin-top: 2px; font-family: var(--num); }    /* C-1: 11 → 12 (sub-line one step up) */
.bend-instr-add { border-style: dashed; border-color: var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background 65ms; }
.bend-instr-add:hover { background: var(--s2); }
.bend-instr-add-label { font-size: 12px; color: var(--text4); text-align: center; }

.bend-details-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: visible; }
.bend-detail-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border-f); }
.bend-detail-row-last { border-bottom: none; }
.bend-detail-label { font-size: var(--text-base); color: var(--text3); display: flex; align-items: center; gap: 4px; }    /* C-1: 13 → base */
.bend-detail-value { font-size: var(--text-base); color: var(--text); display: flex; align-items: center; gap: 6px; }     /* C-1: 13 → base */
.bend-detail-action { background: none; border: none; color: var(--text4); cursor: pointer; padding: 2px; display: flex; align-items: center; }
.bend-detail-action:hover { color: var(--text2); }
.bend-detail-action-btn { font-size: 12px; font-weight: 500; font-family: var(--font); color: var(--text3); background: none; border: 1px solid var(--border); border-radius: var(--r); padding: 3px 10px; cursor: pointer; transition: background 65ms; }
.bend-detail-action-btn:hover { background: var(--s2); color: var(--text); }
.bend-info-ico { color: var(--text4); display: inline-flex; align-items: center; cursor: help; }
.bend-toggle { position: relative; display: inline-flex; cursor: pointer; }
.bend-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bend-toggle-track { width: 32px; height: 18px; background: var(--border); border-radius: 9px; transition: background 0.15s; position: relative; }
.bend-toggle input:checked + .bend-toggle-track { background: #059669; }
.bend-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.bend-toggle input:checked + .bend-toggle-track .bend-toggle-thumb { transform: translateX(14px); }

[data-theme="dark"] .bend-instr-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .bend-instr-edit { border-color: var(--border); color: var(--text4); }
[data-theme="dark"] .bend-details-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .bend-detail-action-btn { border-color: var(--border); color: var(--text4); }
[data-theme="dark"] .bend-toggle-track { background: var(--border); }

/* ── PANEL LINK BUTTONS ───────────────────────────────── */
.panel-link-actions { display: flex; gap: 8px; margin-top: 4px; }
.panel-link-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; transition: background 65ms, border-color 65ms; }
.panel-link-btn:hover { background: var(--s2); border-color: var(--text4); color: var(--text); }
[data-theme="dark"] .panel-link-btn { background: var(--surface); border-color: var(--border); color: var(--text3); }
[data-theme="dark"] .panel-link-btn:hover { background: var(--s2); color: var(--text); }

/* ── TABLE DARK MODE ───────────────────────────────── */
[data-theme="dark"] thead th { color: var(--text4); }
[data-theme="dark"] tbody tr:hover { background: var(--s2); }
[data-theme="dark"] tbody tr { border-bottom-color: var(--border); }

/* ── PROCESSING BADGE ───────────────────────────────── */
.badge-blue { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
[data-theme="dark"] .badge-blue { background: #0D1F3C; border-color: #1E3A6E; color: #60A5FA; }

/* ── SCHEDULED PAYMENTS ─────────────────────────────── */
.sched-section { margin-top: 32px; }
.sched-section .sect-hdr { margin-bottom: 14px; }
.sched-tbl-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.04); margin-top: 0; }
.sched-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text2); }
.sched-badge svg { color: var(--text4); }

/* ── ANIMATION SYSTEM ─────────────────────────────────
   Polished, institutional motion: purposeful, subtle, 60fps.
   GPU-accelerated (transform + opacity only).
   ──────────────────────────────────────────────────── */

/* Timing variables */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Page Load Stagger ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-body > * {
  animation: fadeSlideUp 450ms var(--ease-out-quart) both;
}
.page-body > *:nth-child(1) { animation-delay: 0ms; }
.page-body > *:nth-child(2) { animation-delay: 50ms; }
.page-body > *:nth-child(3) { animation-delay: 100ms; }
.page-body > *:nth-child(4) { animation-delay: 150ms; }
.page-body > *:nth-child(5) { animation-delay: 200ms; }
.page-body > *:nth-child(6) { animation-delay: 250ms; }

/* ── Card Hover Lift ── */
.acct-card,
.acct-card-lg {
  transition: transform 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
}
.acct-card:hover,
.acct-card-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,24,40,0.08);
}
[data-theme="dark"] .acct-card:hover,


.gate-dir-card {
  transition: transform 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
}
.gate-dir-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,24,40,0.08);
}
[data-theme="dark"] .gate-dir-card:hover { border-color: var(--text3); }

/* ── Button Micro-interactions ── */
.btn-primary,
.btn-outline {
  transition: transform 100ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart), background 150ms, border-color 150ms, color 150ms;
}
.btn-primary:hover {
  background: var(--navy-800);
}
.btn-primary:active,
.btn-outline:active {
  transform: scale(0.97);
}

.panel-btn {
  transition: transform 100ms var(--ease-out-quart), opacity 65ms, background 65ms;
}
.panel-btn:active {
  transform: scale(0.97);
}

.filter-btn:active,
.ico-btn:active,
.ben-send:active,
.ac-act-btn:active,
.panel-link-btn:active,
.wiz-change-btn:active {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out-quart);
}

/* ── Tab Underline Transition ── */
.act-tab {
  transition: color 100ms, border-color 150ms var(--ease-out-quart);
}

/* ── Slide Panel Polish ──
   Slightly slower entrance for premium feel; exit is 75% of enter */
.slide {
  transition: transform 280ms var(--ease-out-expo);
}

/* ── Account Detail Page ────────────────────────────────── */
.acct-det-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.acct-det-hdr-l { display: flex; align-items: flex-start; gap: 14px; }
/* G-7: subpage h1s align to one size (22px) regardless of inline overrides
   that some older pages used to set this. Margin reset so the back button
   visually top-aligns with the heading. */
.acct-det-hdr-l h1.dash-title { font-size: 22px; margin-bottom: 0; line-height: 1.25; }
.acct-det-hdr-r { display: flex; align-items: center; gap: 8px; }

.acct-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  cursor: pointer; color: var(--text3);
  transition: border-color 65ms, color 65ms;
}
.acct-back-btn:hover { border-color: var(--text4); color: var(--text2); }

.acct-ghost-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; font-family: var(--font);
  transition: border-color 65ms, color 65ms, background 65ms;
}
.acct-ghost-btn:hover { background: var(--s2); color: var(--text); }

.acct-outline-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; font-family: var(--font);
  transition: border-color 65ms, color 65ms, background 65ms;
}
.acct-outline-btn:hover { background: var(--s2); color: var(--text); }
[data-theme="dark"] .acct-ghost-btn,
[data-theme="dark"] .acct-outline-btn { color: var(--text2); }

.acct-det-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  margin-bottom: 24px;
  align-items: start;
}

/* Balance Card */
.acct-bal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 20px; display: flex; flex-direction: column;
  min-height: 220px;
}
.acct-bal-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text4); margin-bottom: 8px;
}
.acct-bal-amt {
  font-size: 28px; font-weight: 700; font-family: var(--num);
  letter-spacing: -0.8px; color: var(--text); line-height: 1.15;
}
.acct-bal-divider { height: 1px; background: var(--border); margin: 14px -20px; }
.acct-bal-meta { padding: 0 0 4px; }
.acct-stmt-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--text3);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font);
  transition: color 65ms;
  margin-top: auto;
}
.acct-stmt-btn:hover { color: var(--text2); }

/* Info Card */
.acct-info-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.acct-info-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.acct-info-top-title { font-size: var(--text-base); font-weight: 600; color: var(--text); }    /* C-1: 13 → base */
.acct-copy-all-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: var(--text3);
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  padding: 4px 10px; cursor: pointer; font-family: var(--font);
  transition: border-color 65ms, color 65ms;
}
.acct-copy-all-btn:hover { border-color: var(--text4); color: var(--text2); }

.acct-info-section-hdr {
  padding: 7px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text3); background: var(--s2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.acct-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border-f);
}
.acct-info-row:last-child { border-bottom: none; }
.acct-info-lbl { font-size: var(--text-base); color: var(--text2); }    /* C-1: 13 → base (primary detail-row label) */
.acct-info-val {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-base); color: var(--text); font-family: var(--num);   /* C-1: 13 → base */
}
.acct-copy-ic {
  display: flex; align-items: center; justify-content: center;
  color: var(--text4); cursor: pointer; background: none; border: none;
  padding: 2px; border-radius: 3px;
  transition: color 65ms, background 65ms;
}
.acct-copy-ic:hover { color: var(--text2); background: var(--s2); }

/* Activity Section */
.acct-activity-wrap { }
.acct-activity-wrap .sect-hdr { display: flex; justify-content: space-between; align-items: center; }

/* chip-fail for account-detail activity */
.chip-fail { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; }
[data-theme="dark"] .chip-fail { background: #2D0A0A; border-color: #7F1D1D; color: #F87171; }

/* dir-fx icon */
.dir-fx { background: #EDE9FE; color: #6D28D9; }
[data-theme="dark"] .dir-fx { background: #2E1065; color: #A78BFA; }

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

/* === Add Beneficiary panel — network detection (Track B, B-14) === */
.addben-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.addben-field { display: flex; flex-direction: column; gap: 6px; }
.addben-label { font-size: 11px; font-weight: 500; color: var(--text3); letter-spacing: 0.1px; text-transform: uppercase; }
.addben-input {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  padding: 9px 11px;
  outline: none;
  transition: border-color 65ms ease-out, box-shadow 65ms ease-out;
}
.addben-input:focus {
  border-color: var(--navy-600, #2B3D5B);
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
}
.addben-network-msg[hidden] { display: none; }
.addben-network-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: #047857;
  background: rgba(0, 200, 117, 0.08);
  border: 1px solid rgba(0, 200, 117, 0.22);
  border-radius: var(--r-sm, 4px);
}
.addben-network-msg svg { color: #00C875; flex-shrink: 0; }
.addben-network-msg strong { font-weight: 600; }
[data-theme="dark"] .addben-network-msg {
  color: #4ADE80;
  background: rgba(0, 200, 117, 0.10);
  border-color: rgba(0, 200, 117, 0.28);
}

/* === Account detail — icon-only Settings (Track B, B-33) === */
.acct-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text3);
  cursor: pointer; font-family: var(--font); padding: 0;
  transition: border-color 65ms ease-out, color 65ms ease-out, background 65ms ease-out;
}
.acct-icon-btn:hover { background: var(--s2); color: var(--text); border-color: var(--text4); }
.acct-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10); border-color: var(--navy-600, #2B3D5B); }
[data-theme="dark"] .acct-icon-btn { color: var(--text3); }

/* === Account detail — alias edit + overflow menu (Track B, B-34) === */
.acct-title-row { display: flex; align-items: center; gap: 8px; }
.acct-alias-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: none; border: none; border-radius: var(--r-sm, 4px);
  color: var(--text4);
  cursor: pointer; padding: 0;
  opacity: 0;
  transition: opacity 65ms ease-out, color 65ms ease-out, background 65ms ease-out;
}
.acct-title-row:hover .acct-alias-edit,
.acct-alias-edit:focus-visible { opacity: 1; }
.acct-alias-edit:hover { color: var(--text2); background: var(--s2); }
.acct-alias-edit:focus-visible { outline: none; color: var(--text2); box-shadow: 0 0 0 2px rgba(43, 61, 91, 0.15); }

.acct-alias-input {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--navy-600, #2B3D5B);
  border-radius: var(--r-sm, 4px);
  padding: 2px 8px;
  margin: -3px 0;
  outline: none;
  min-width: 200px;
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
}

.acct-overflow-wrap { position: relative; display: inline-flex; }
.acct-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  box-shadow: 0 8px 24px rgba(10, 20, 40, 0.10), 0 2px 6px rgba(10, 20, 40, 0.06);
  padding: 5px;
  z-index: 50;
}
.acct-overflow-menu[hidden] { display: none; }
.acct-overflow-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-sm, 4px);
  padding: 8px 10px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out;
}
.acct-overflow-item:hover { background: var(--s2); }
.acct-overflow-item.is-danger { color: #B42318; }
.acct-overflow-item.is-danger:hover { background: rgba(240, 68, 56, 0.08); }
.acct-overflow-item.is-danger svg { color: #B42318; }
[data-theme="dark"] .acct-overflow-item.is-danger { color: #F97066; }
[data-theme="dark"] .acct-overflow-item.is-danger svg { color: #F97066; }

/* === Close Account confirmation modal (Track B, A.5 — Accounts) === */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 20, 40, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(10, 20, 40, 0.20), 0 4px 12px rgba(10, 20, 40, 0.08);
  font-family: var(--font, 'Inter', sans-serif);
}
.modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  margin-bottom: 14px;
}
.modal-icon.is-danger { background: rgba(240, 68, 56, 0.10); color: #B42318; }
[data-theme="dark"] .modal-icon.is-danger { background: rgba(240, 68, 56, 0.14); color: #F97066; }
.modal-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text);
  margin: 0 0 6px;
}
.modal-body {
  font-size: var(--text-base); line-height: 1.5;
  color: var(--text2);
  margin: 0 0 20px;
}
.modal-body strong { color: var(--text); font-weight: 600; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: var(--text-base); font-weight: 500;
  border-radius: var(--r, 8px);
  cursor: pointer;
  text-decoration: none;
  transition: background 65ms ease-out, border-color 65ms ease-out, color 65ms ease-out;
}
.modal-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18); }
.modal-btn-secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.modal-btn-secondary:hover { background: var(--s2); border-color: var(--text4); }
.modal-btn-danger {
  background: #B42318; color: #fff; border: 1px solid #B42318;
}
.modal-btn-danger:hover { background: #962014; border-color: #962014; }
.modal-btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25); }

/* === Payment rails chips (Track B, B-36) === */
.rail-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font, 'Inter', sans-serif);
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--text3);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  white-space: nowrap;
}
.rail-chips-md .rail-chip { font-size: 11px; padding: 3px 7px; }
.rail-chips-sm .rail-chip { font-size: 10px; padding: 2px 6px; }

[data-theme="dark"] .rail-chip { color: var(--text3); background: var(--s2); border-color: var(--border); }

/* Inline dot-separated rails (accounts cards) — restrained muted text */
.rail-inline {
  font-size: 11px;
  font-weight: 500;
  color: var(--text4);
  letter-spacing: 0.1px;
  margin-top: 4px;
}
.acct-card-dark .rail-inline { color: rgba(255,255,255,0.55); }

/* Account-detail info card — rails section uses the same row structure as other sections */
.acct-info-row-rails { padding: 10px 16px; }
.acct-info-row-rails .rail-chips { gap: 6px; }

/* Beneficiary instruction cards — rails sit under the IBAN */
.bend-instr-card .rail-chips { margin-top: 8px; }

/* === Account cards — two-row action layout (Track B, B-35 follow-up) === */
/* Primary "Send from {name}" spans full width on row 1; secondary "Buy {CCY}"
   and tertiary "Details / View all" share row 2. Avoids 2-3 line wrapping
   on long account names while keeping the context-specific labels. */
.acct-card-lg .ac-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.acct-card-lg .ac-actions .ac-act-btn {
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
}
.acct-card-lg .ac-actions .ac-act-btn-primary {
  grid-column: 1 / -1;
}

/* === Account-card states + masked IBAN (Track B, B-38) === */
/* No persistent "selected" state — just hover / focus / pressed. */
.acct-card-lg {
  transition: box-shadow 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out, background 65ms ease-out;
}
.acct-card-lg:hover {
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
  transform: translateY(-1px);
}
.acct-card-lg:focus-visible {
  outline: none;
  border-color: var(--navy-600, #2B3D5B);
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.15);
}
.acct-card-lg:active {
  transform: translateY(0);
  background: var(--s2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition-duration: 40ms;
}
[data-theme="dark"] .acct-card-lg:active { background: var(--border); }
[data-theme="dark"] .acct-card-lg:focus-visible { border-color: #6B7585; box-shadow: 0 0 0 3px rgba(107, 117, 133, 0.25); }

@media (prefers-reduced-motion: reduce) {
  .acct-card-lg:hover, .acct-card-lg:active { transform: none; }
}

.ac-iban-masked {
  font-family: var(--num, 'Inter', sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text3);
  margin-top: -4px;
}
.acct-card-dark .ac-iban-masked { color: rgba(255,255,255,0.55); }

/* === Statements section (Track B, B-37) === */
.stmt-sect {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
}
.stmt-sect-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.stmt-sect-hdr-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stmt-sect-ttl { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.stmt-sect-sub { font-size: 12px; font-weight: 500; color: var(--text3); }
.stmt-sect-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 12px; font-weight: 500; color: var(--text2);
  cursor: pointer;
  transition: color 65ms ease-out;
}
.stmt-sect-link:hover { color: var(--text); }
.stmt-list { list-style: none; margin: 0; padding: 0; }
.stmt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-f, var(--border));
  transition: background 65ms ease-out;
}
.stmt-row:last-child { border-bottom: none; }
.stmt-row:hover { background: var(--s2); }
.stmt-row-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--r-sm, 4px);
  background: var(--s2);
  color: var(--text2);
}
.stmt-row:hover .stmt-row-ic { background: var(--surface); color: var(--text); }
.stmt-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stmt-row-ttl { font-size: var(--text-base); font-weight: 600; color: var(--text); letter-spacing: -0.1px; }    /* C-1: 13 → base */
.stmt-row-meta { font-size: var(--text-sm); font-weight: 500; color: var(--text3); }    /* C-1: 11 → 12 (sub-line one step up) */
.stmt-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.stmt-dl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 5px 9px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 11px; font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: border-color 65ms ease-out, color 65ms ease-out, background 65ms ease-out;
}
.stmt-dl-btn:hover { border-color: var(--navy-600, #2B3D5B); color: var(--text); background: var(--surface); }
.stmt-dl-btn:focus-visible { outline: none; border-color: var(--navy-600, #2B3D5B); box-shadow: 0 0 0 2px rgba(43, 61, 91, 0.15); }
[data-theme="dark"] .stmt-row-ic { background: var(--s2); color: var(--text2); }

/* === Empty states (Track B, A.2 — shared) === */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 56px 24px 60px;
  max-width: 420px;
  margin: 0 auto;
}
.empty-state-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--s2);
  color: var(--text3);
  margin-bottom: 16px;
}
.empty-state-ttl {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.empty-state-body {
  font-size: 13px; font-weight: 400;
  color: var(--text3);
  line-height: 1.55;
  margin-bottom: 18px;
}
.empty-state-action {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: #fff;
  background: var(--navy-900, #0E1D35);
  border: 1px solid var(--navy-900, #0E1D35);
  border-radius: var(--r, 8px);
  cursor: pointer;
  transition: background 65ms ease-out;
}
.empty-state-action:hover { background: var(--navy-700, #1E3352); border-color: var(--navy-700, #1E3352); }
.empty-state-action:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18); }

[data-theme="dark"] .empty-state-ic { background: var(--s2); color: var(--text2); }
[data-theme="dark"] .empty-state-action { background: #E0EAF7; color: #111A3B; border-color: #E0EAF7; }
[data-theme="dark"] .empty-state-action:hover { background: #fff; border-color: #fff; }

/* Accounts list empty-state container — keep the rest of the page chrome around it */
.accts-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
}

/* Activity table empty-state — let the empty-state breathe inside the cell */
.act-empty-cell,
.ben-empty-cell { padding: 0 !important; border: none !important; }
.act-empty-cell .empty-state,
.ben-empty-cell .empty-state { padding: 44px 24px 48px; }

/* === Dashboard CTAs v2 (Track A — B-23) === */
/* Stronger visual weight on Send / Convert in the dashboard header (REQ-031). */
.dash-cta { font-size: 14px; font-weight: 600; padding: 11px 20px; gap: 8px; letter-spacing: 0.1px; border-radius: var(--r); }
.dash-cta-primary { box-shadow: 0 1px 0 rgba(14, 29, 53, 0.18), 0 4px 12px -6px rgba(14, 29, 53, 0.45); }
.dash-cta-primary:hover { box-shadow: 0 1px 0 rgba(14, 29, 53, 0.22), 0 6px 16px -6px rgba(14, 29, 53, 0.55); }
.dash-cta-outline { border-width: 1.5px; color: var(--text); }
.dash-cta-outline:hover { border-color: var(--navy-800); }
[data-theme="dark"] .dash-cta-primary { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .dash-cta-outline { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .dash-cta { transition: none; }
}

/* === Add Account carousel card (Track A — B-24) === */
/* Trailing card on the dashboard accounts carousel for creating a new account (REQ-034). */
.acct-card-add {
  background: transparent;
  border: 1px dashed var(--text4);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text3);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out-quart), color 120ms, background 120ms;
}
.acct-card-add:hover { border-color: var(--navy-700); color: var(--text); background: var(--surface); }
.acct-card-add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18); border-color: var(--navy-800); color: var(--text); }
.ac-add-ic {
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s2, #EEF1F6);
  color: var(--text2);
  transition: background 120ms, color 120ms;
}
.acct-card-add:hover .ac-add-ic { background: var(--navy-700); color: #fff; }
.ac-add-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1px; }
[data-theme="dark"] .acct-card-add { border-color: var(--text3); color: var(--text3); }
[data-theme="dark"] .acct-card-add:hover { background: var(--surface); color: var(--text); border-color: var(--text2); }
[data-theme="dark"] .ac-add-ic { background: rgba(255,255,255,0.06); color: var(--text2); }
[data-theme="dark"] .acct-card-add:hover .ac-add-ic { background: #E0EAF7; color: #111A3B; }
@media (prefers-reduced-motion: reduce) {
  .acct-card-add, .ac-add-ic { transition: none; }
}

/* === Settings shell (Track B, REQ-164) ============================= */
/* Three-tab page (Profile / Security / Users). Tab content panels are
   toggled via [hidden]; URL syncs via ?tab=<id> for deep-linking. */

.settings-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
}
.settings-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--text3);
  background: none; border: none; border-radius: var(--r-sm, 4px);
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
.settings-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(43, 61, 91, 0.18);
}
.settings-tab svg { color: var(--text4); }
.settings-tab.on svg { color: var(--text2); }

.settings-panels { display: flex; flex-direction: column; gap: 16px; }
.settings-panel { display: flex; flex-direction: column; gap: 16px; }
.settings-panel[hidden] { display: none; }

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.settings-card-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
}
.settings-card-ttl {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.2px;
  margin: 0 0 4px;
}
.settings-card-sub {
  font-size: 13px; font-weight: 500;
  color: var(--text3);
  margin: 0;
  line-height: 1.5;
}

/* F-3: card fills the page-body width on wide displays so Settings /
   Company match the rest of the app. The form itself caps at a
   readable line length inside the card so individual inputs don't
   stretch unreadably wide (Linear / Stripe pattern). Lists (users,
   audit log) and section headers above the form fill the card
   naturally. */
.settings-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 640px;
}
.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text4);
}
.settings-input {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: var(--text-base);    /* C-1: 13 → base */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  padding: 9px 12px;
  outline: none;
  transition: border-color 65ms ease-out, box-shadow 65ms ease-out;
}
.settings-input:focus {
  border-color: var(--navy-600, #2B3D5B);
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
}
.settings-input::placeholder { color: var(--text4); font-style: italic; }
.settings-input[type="password"] { font-family: var(--num, var(--font)); letter-spacing: 0.05em; }

.settings-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.settings-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: var(--text-base); font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--r, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 65ms ease-out, border-color 65ms ease-out, color 65ms ease-out;
}
.settings-btn-primary {
  background: var(--navy-900, #0E1D35);
  color: #fff;
  border-color: var(--navy-900, #0E1D35);
}
.settings-btn-primary:hover { background: var(--navy-700, #1E3352); border-color: var(--navy-700, #1E3352); }
.settings-btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.settings-btn-secondary:hover { background: var(--s2); border-color: var(--text4); }
.settings-btn-danger {
  background: var(--surface);
  color: #B42318;
  border-color: rgba(180, 35, 24, 0.30);
}
.settings-btn-danger:hover { background: rgba(180, 35, 24, 0.06); border-color: #B42318; }
.settings-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18); }
.settings-btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.20); }

.settings-card-danger .settings-card-hdr { align-items: center; }

[data-theme="dark"] .settings-btn-primary { background: #E0EAF7; color: #111A3B; border-color: #E0EAF7; }
[data-theme="dark"] .settings-btn-primary:hover { background: #fff; border-color: #fff; }

/* 2FA card */
.settings-2fa-status { display: flex; align-items: center; gap: 10px; }
.settings-2fa-meta {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 14px 16px;
  background: var(--s2);
  border-radius: var(--r-sm, 4px);
}
.settings-2fa-meta > div { display: flex; flex-direction: column; gap: 2px; }
.settings-meta-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text4); }
.settings-meta-val { font-size: var(--text-base); font-weight: 500; color: var(--text2); }

/* Users list */
.settings-users-list { list-style: none; margin: 0; padding: 0; }
.settings-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-f, var(--border));
}
.settings-user-row:last-child { border-bottom: none; }
.settings-user-av {
  width: var(--av-md); height: var(--av-md); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.settings-user-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.settings-user-name { font-size: var(--text-base); font-weight: 600; color: var(--text); }
.settings-user-meta { font-size: 13px; color: var(--text3); }
.settings-user-role {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 999px;
  flex-shrink: 0;
}
.settings-user-role.role-owner  { background: rgba(43, 61, 91, 0.08); color: var(--navy-900, #0E1D35); }
.settings-user-role.role-admin  { background: rgba(43, 61, 91, 0.08); color: var(--navy-700, #1E3352); }
.settings-user-role.role-member { background: var(--s2); color: var(--text2); }
.settings-user-lock { display: inline-flex; align-items: center; color: var(--text4); }
.settings-user-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm, 4px);
  color: var(--text3);
  cursor: pointer;
  transition: background 65ms ease-out, border-color 65ms ease-out, color 65ms ease-out;
}
.settings-user-more:hover:not(:disabled) { background: var(--s2); color: var(--text); border-color: var(--text4); }
.settings-user-more:disabled { opacity: 0.4; cursor: not-allowed; }
[data-theme="dark"] .settings-user-role.role-owner,
[data-theme="dark"] .settings-user-role.role-admin { background: rgba(224, 234, 247, 0.12); color: #E0EAF7; }

/* === Phone country-code selector (Track B, B-40) ==================== */
/* Composite control: country trigger button on the left, number input on
   the right, sharing a single border so they read as one field. */

.settings-phone {
  position: relative;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  transition: border-color 65ms ease-out, box-shadow 65ms ease-out;
}
.settings-phone:focus-within {
  border-color: var(--navy-600, #2B3D5B);
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
}
.settings-phone-cc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 10px 9px 12px;
  background: none; border: none;
  border-right: 1px solid var(--border);
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 65ms ease-out;
  border-top-left-radius: var(--r, 8px);
  border-bottom-left-radius: var(--r, 8px);
}
.settings-phone-cc:hover { background: var(--s2); }
.settings-phone-cc:focus-visible { outline: none; background: var(--s2); }
.settings-phone-flag {
  width: 20px; height: 14px; object-fit: cover; border-radius: 2px;
  flex-shrink: 0;
}
.settings-phone-dial { font-variant-numeric: tabular-nums; letter-spacing: 0.1px; }
.settings-phone-chev { color: var(--text4); transition: transform 65ms ease-out; }
.settings-phone-cc[aria-expanded="true"] .settings-phone-chev { transform: rotate(180deg); color: var(--text2); }

.settings-phone-num {
  flex: 1;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  padding: 9px 12px;
  border-radius: var(--r, 8px);
}
.settings-phone-num::placeholder { color: var(--text4); font-style: italic; }

/* Dropdown panel */
.settings-phone-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  box-shadow: 0 12px 32px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.06);
  z-index: 60;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.settings-phone-menu[hidden] { display: none; }

.settings-phone-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text4);
}
.settings-phone-search {
  flex: 1;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--text);
  background: none; border: none; outline: none;
  padding: 0;
}
.settings-phone-search::placeholder { color: var(--text4); }

.settings-phone-list {
  list-style: none; margin: 0; padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}
.settings-phone-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 65ms ease-out;
}
.settings-phone-opt.on { background: var(--s2); }
.settings-phone-opt-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.settings-phone-opt-name { flex: 1; min-width: 0; }
.settings-phone-opt-dial { font-variant-numeric: tabular-nums; color: var(--text3); font-size: 13px; }

.settings-phone-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
}

[data-theme="dark"] .settings-phone-cc:hover,
[data-theme="dark"] .settings-phone-opt.on { background: var(--s2); }

/* === Settings form validation (Track B, A.4) ======================= */
.settings-req { color: #B42318; margin-left: 2px; font-weight: 600; }
.settings-input.is-invalid {
  border-color: #B42318;
  background: rgba(180, 35, 24, 0.03);
}
.settings-input.is-invalid:focus {
  border-color: #B42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}
.settings-err[hidden] { display: none; }
.settings-err {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: #B42318;
  margin-top: -2px;
}
.settings-err::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.4'><circle cx='6' cy='6' r='4.5'/><path d='M6 3.5v3'/><circle cx='6' cy='8.5' r='.5' fill='white'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.4'><circle cx='6' cy='6' r='4.5'/><path d='M6 3.5v3'/><circle cx='6' cy='8.5' r='.5' fill='white'/></svg>") center / contain no-repeat;
}
.settings-hint {
  font-size: 12px; font-weight: 500;
  color: var(--text4);
  margin-top: -2px;
}
.settings-field:has(.settings-input.is-invalid) .settings-hint { display: none; }

/* Add User modal form layout — extend the existing .modal-card pattern */
.modal-card-form { max-width: 460px; padding: 22px 22px 18px; text-align: left; }
.modal-form-hdr { margin-bottom: 18px; }
.modal-form-hdr .modal-title { margin-bottom: 4px; }
.modal-card-form .modal-actions {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 14px;
}

/* === Settings user-row overflow menu (Track B, A.5) =============== */
.settings-user-more-wrap { position: relative; display: inline-flex; }
.settings-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  box-shadow: 0 8px 24px rgba(10, 20, 40, 0.10), 0 2px 6px rgba(10, 20, 40, 0.06);
  padding: 5px;
  z-index: 50;
}
.settings-user-menu[hidden] { display: none; }
.settings-user-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-sm, 4px);
  padding: 8px 10px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out;
}
.settings-user-menu-item:hover { background: var(--s2); }
.settings-user-menu-item.is-danger { color: #B42318; }
.settings-user-menu-item.is-danger:hover { background: rgba(240, 68, 56, 0.08); }
.settings-user-menu-item.is-danger svg { color: #B42318; }
[data-theme="dark"] .settings-user-menu-item.is-danger { color: #F97066; }
[data-theme="dark"] .settings-user-menu-item.is-danger svg { color: #F97066; }

/* === Role gating + demo role switcher (Track B, A.6) ============== */
/* When a control is gated for the current role, .is-locked adds:
   - reduced opacity
   - not-allowed cursor
   - small lock icon overlay (top-right corner)
   - removes hover affordance and pointer events */
.is-locked {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: saturate(0.7);
}
.is-locked::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background-color: var(--text3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='6' height='5' rx='1'/><path d='M4.5 5.5V4a1.5 1.5 0 0 1 3 0v1.5'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.bend-instr-card.is-locked::after,
.is-locked.empty-state-action::after { top: 6px; right: 6px; width: 16px; height: 16px; background-size: 11px 11px; }

[data-theme="dark"] .is-locked::after { background-color: var(--text2); box-shadow: 0 0 0 2px var(--surface); }

/* Demo role switcher inside the existing user menu (sidebar bottom-left). */
.s-role-switch {
  padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.s-role-switch-lbl {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text4);
}
.s-role-switch-segs {
  display: inline-flex;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.s-role-switch-seg {
  flex: 1;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 11px; font-weight: 500;
  color: var(--text3);
  background: none; border: none; border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out;
}
.s-role-switch-seg:hover { color: var(--text); }
.s-role-switch-seg.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
[data-theme="dark"] .s-role-switch-seg.on { background: var(--border); color: var(--text); }

/* === Payment detail panel actions for Failed / Processing (Track A — B-29) === */
/* Context-aware action buttons in the slide-out for non-final, non-review statuses (REQ-056). */
.panel-btn-retry { background: var(--navy-900); color: #F9FAFB; }
.panel-btn-retry:hover { background: var(--navy-800); opacity: 1; }
.panel-btn-neutral { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.panel-btn-neutral:hover { background: var(--s2, #EEF1F6); border-color: var(--text4); opacity: 1; }
.panel-btn-cancel { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.panel-btn-cancel:hover { background: #FEE2E2; opacity: 1; }
[data-theme="dark"] .panel-btn-retry { background: var(--navy-600); color: #E8EDF5; }
[data-theme="dark"] .panel-btn-retry:hover { background: var(--navy-700); }
[data-theme="dark"] .panel-btn-neutral { background: var(--surface); color: var(--text2); border-color: var(--border); }
[data-theme="dark"] .panel-btn-neutral:hover { background: var(--s2); color: var(--text); }
[data-theme="dark"] .panel-btn-cancel { background: #3B1515; color: #FCA5A5; border-color: #7F1D1D; }
[data-theme="dark"] .panel-btn-cancel:hover { background: #4B1818; }
/* === Multi-entity (Track B, A.7) =================================== */
/* Switching lives in the bottom-left user menu (see js/entity.js).
   No per-page chip — would duplicate the switcher and add no info beyond
   what the always-visible trigger already shows. */

/* === Auth pages (Track B, A.1) ===================================== */
/* Two-column shell shared by forgot-password, 2fa-setup, book-call. */

.auth-body { margin: 0; font-family: var(--font, 'Inter', sans-serif); background: var(--surface, #fff); color: var(--text); }
.auth-shell { display: flex; min-height: 100vh; }
.auth-form-col { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--surface, #fff); }
.auth-form-inner { width: 100%; max-width: 380px; }
.auth-form-wide { max-width: 560px; }
.auth-logo { margin-bottom: 32px; }
.auth-logo img { height: 28px; display: block; }
.auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--text3);
  text-decoration: none;
  margin-bottom: 22px;
  transition: color 65ms ease-out;
}
.auth-back:hover { color: var(--text); }

.auth-title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--text); margin: 0 0 8px; }
.auth-sub { font-size: var(--text-base); line-height: 1.55; color: var(--text3); margin: 0 0 22px; }
.auth-sub strong { color: var(--text); font-weight: 600; }

.auth-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }

.auth-primary-btn,
.auth-secondary-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 11px 16px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  border-radius: var(--r, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 65ms ease-out, border-color 65ms ease-out, color 65ms ease-out;
}
.auth-primary-btn { background: var(--navy-900, #0E1D35); color: #fff; border-color: var(--navy-900, #0E1D35); }
.auth-primary-btn:hover:not(:disabled) { background: var(--navy-700, #1E3352); border-color: var(--navy-700, #1E3352); }
.auth-primary-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.20); }
.auth-primary-btn:disabled {
  background: var(--s2);
  color: var(--text4);
  border-color: var(--border);
  cursor: not-allowed;
}
.auth-secondary-btn { background: var(--surface); color: var(--text); border-color: var(--border); }
.auth-secondary-btn:hover { background: var(--s2); border-color: var(--text4); }
.auth-secondary-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-help { font-size: 13px; color: var(--text3); margin: 14px 0 0; }
.auth-help a { color: var(--navy-700, #1E3352); font-weight: 500; text-decoration: none; }
.auth-help a:hover { text-decoration: underline; }

.auth-foot { font-size: 10px; line-height: 1.6; color: var(--text4); margin: 48px 0 0; }

.auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; margin-bottom: 16px; }
.auth-icon.is-success { background: rgba(0, 200, 117, 0.10); color: #047857; }
.auth-icon.is-warning { background: rgba(245, 158, 11, 0.12); color: #B45309; }

.auth-steps { list-style: decimal inside; font-size: var(--text-base); line-height: 1.7; color: var(--text2); padding-left: 0; margin: 0 0 22px; }
.auth-steps li { padding-left: 6px; }

/* Brand panel (right) */
.auth-brand-col { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: var(--navy-900, #0E1D35); overflow: hidden; }
.auth-brand-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,200,117,0.12), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(46,125,247,0.10), transparent 55%);
}
.auth-brand-content {
  position: relative; z-index: 1;
  max-width: 340px;
  text-align: center;
  padding: 32px;
  color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.auth-brand-content > svg { display: block; }
.auth-brand-title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; margin: 22px 0 12px; }
.auth-brand-sub { font-size: var(--text-base); line-height: 1.6; color: rgba(255,255,255,0.55); margin: 0; }

/* 2FA setup specifics */
/* Pair = QR + code stacked together, centred in the column */
.auth-2fa-pair {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.auth-2fa-meta { margin-bottom: 4px; }
.auth-2fa-qr { width: 168px; height: 168px; border-radius: var(--r, 8px); background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 10px; }
.auth-qr-svg { width: 148px; height: 148px; color: #0D1117; display: block; }
[data-theme="dark"] .auth-2fa-qr { background: #fff; }
.auth-2fa-label { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text4); margin-bottom: 6px; }
.auth-2fa-secret {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--num, monospace);
  font-size: 12px; letter-spacing: 0.5px;
  color: var(--text2);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 7px 12px;
}
.auth-2fa-secret code { color: var(--text); letter-spacing: 0.6px; }
.auth-2fa-secret code { color: var(--text); }
.auth-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: none; border: none; color: var(--text3); cursor: pointer; }
.auth-copy-btn:hover { color: var(--text); }
.auth-2fa-help { font-size: 12px; color: var(--text3); margin: -2px 0 10px; }
.auth-recovery-grid { list-style: none; margin: 0 0 12px; padding: 10px; background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm, 4px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 14px; }
.auth-recovery-grid li { font-family: var(--num, monospace); font-size: 13px; color: var(--text); letter-spacing: 0.5px; }
.auth-2fa-actions { display: flex; gap: 8px; }
.auth-2fa-actions .auth-primary-btn,
.auth-2fa-actions .auth-secondary-btn { width: auto; flex: 1; }
.auth-otp-input { font-family: var(--num, monospace); font-size: 22px; letter-spacing: 12px; text-align: center; }

/* Book-a-call calendar */
.auth-cal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.auth-cal-label { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text4); margin-bottom: 8px; }
.auth-cal-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.auth-cal-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.auth-cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 8px 11px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 65ms ease-out, background 65ms ease-out;
  min-width: 56px;
}
.auth-cal-day:hover { border-color: var(--text4); }
.auth-cal-day.on { border-color: var(--navy-600, #2B3D5B); background: var(--s2); }
.auth-cal-dow { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text4); }
.auth-cal-date { font-size: 18px; font-weight: 700; color: var(--text); }
.auth-cal-mon { font-size: 11px; color: var(--text3); }
.auth-cal-time {
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 65ms ease-out, background 65ms ease-out;
}
.auth-cal-time:hover { border-color: var(--text4); }
.auth-cal-time.on { background: var(--navy-900, #0E1D35); color: #fff; border-color: var(--navy-900, #0E1D35); }

/* Session-timeout modal uses the existing .modal-* classes; add the
   warning icon variant. */
.modal-icon.is-warning { background: rgba(245, 158, 11, 0.12); color: #B45309; }
[data-theme="dark"] .modal-icon.is-warning { background: rgba(245, 158, 11, 0.16); color: #FBBF24; }

[data-theme="dark"] .auth-body { background: var(--surface); color: var(--text); }
[data-theme="dark"] .auth-form-col { background: var(--surface); }

/* === Add Beneficiary validation + CoP (Track B, A.4) =============== */
.addben-form { gap: 14px; }
.addben-input.is-invalid {
  border-color: #B42318;
  background: rgba(180, 35, 24, 0.03);
}
.addben-input.is-invalid:focus {
  border-color: #B42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}
.addben-err[hidden] { display: none; }
.addben-err {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: #B42318;
  margin-top: 2px;
}

/* CoP pill + message block */
.addben-cop {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 4px);
  background: var(--s2);
  border: 1px solid var(--border);
}
.addben-cop[hidden] { display: none; }
.addben-cop-row { display: flex; align-items: flex-start; gap: 8px; }
.addben-cop-pill {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  padding: 2px 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 999px;
  white-space: nowrap;
}
.addben-cop-pill.is-ok   { background: rgba(0, 200, 117, 0.12);   color: #047857; }
.addben-cop-pill.is-warn { background: rgba(245, 158, 11, 0.14);  color: #B45309; }
.addben-cop-pill.is-bad  { background: rgba(240, 68, 56, 0.10);   color: #B42318; }
.addben-cop-pill.is-info { background: rgba(43, 61, 91, 0.10);    color: var(--text2); }
.addben-cop-msg { font-size: 13px; line-height: 1.45; color: var(--text2); }

.addben-cop-confirm {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm, 4px);
  background: rgba(240, 68, 56, 0.05);
  border: 1px solid rgba(240, 68, 56, 0.20);
  font-size: 12px; color: var(--text);
  cursor: pointer;
}
.addben-cop-confirm[hidden] { display: none; }
.addben-cop-confirm input { margin-top: 2px; cursor: pointer; flex-shrink: 0; }

/* Disabled Continue button (so it doesn't look active when blocked) */
.panel-btn:disabled {
  background: var(--s2) !important;
  color: var(--text4) !important;
  border-color: var(--border) !important;
  cursor: not-allowed;
}

[data-theme="dark"] .addben-cop { background: var(--s2); }
[data-theme="dark"] .addben-cop-pill.is-ok   { color: #4ADE80; }
[data-theme="dark"] .addben-cop-pill.is-warn { color: #FBBF24; }
[data-theme="dark"] .addben-cop-pill.is-bad  { color: #F97066; }


/* === Add Beneficiary page (Track B, B-13) ========================== */
/* Page-level wizard built on the existing .wiz-* classes (mirrors send.html).
   These selectors cover the bits unique to this page: the currency grid in
   step 2, the summary block + method-tabs sizing in step 3, and the
   network-detection banner (re-used from B-14). */

.ab-ccy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.ab-ccy-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  cursor: pointer;
  font-family: var(--font, 'Inter', sans-serif);
  transition: border-color 65ms ease-out, transform 65ms ease-out, box-shadow 65ms ease-out;
}
.ab-ccy-card:hover {
  border-color: var(--navy-600, #2B3D5B);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
  transform: translateY(-1px);
}
.ab-ccy-card:focus-visible { outline: none; border-color: var(--navy-600, #2B3D5B); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.12); }
.ab-ccy-flag { width: 32px; height: 22px; object-fit: cover; border-radius: 2px; }
.ab-ccy-code { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.2px; }
.ab-ccy-label { font-size: 11px; color: var(--text3); }
[data-theme="dark"] .ab-ccy-card { background: var(--s2); }

.ab-summary {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
}
.ab-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.ab-summary-lbl { color: var(--text3); }
.ab-summary-val { color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.ab-summary-tag {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text3);
  border: 1px solid var(--border);
}

/* Method-tab strip: reuse .seg-tabs/.seg-tab but allow wrapping for
   currencies with 4 methods (USD: ACH/FedNow/Fedwire/SWIFT). */
.ab-method-tabs { flex-wrap: wrap; }

/* Invalid input red treatment for wiz-text-input (the wizard form
   uses .wiz-text-input, not .addben-input). */
.wiz-text-input.is-invalid {
  border-color: #B42318;
  background: rgba(180, 35, 24, 0.03);
}
.wiz-text-input.is-invalid:focus {
  border-color: #B42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

/* wiz-method (used as the type toggle in step 1) — slightly tighter for
   the two-card row. */
.wiz-method-row [data-set-type].wiz-method { padding: 14px 14px; }

/* === Icon-only toolbar filter button (Track A — B-31 follow-up) === */
/* Compact square variant of .filter-btn — used in toolbars where labels would overflow.
   Keeps the same vertical padding as the base .filter-btn so heights match.
   Pair with aria-label + data-tooltip for accessibility. */
.filter-btn-icon {
  padding: 0;
  justify-content: center;
  gap: 0;
  width: 32px;
  align-self: stretch;
  flex-shrink: 0;
}
/* Let icon-button tooltips escape the table wrap's overflow:hidden clip.
   Scoped via :has() so only the wrap containing icon buttons opts out. */
.act-tbl-wrap:has(.filter-btn-icon),
.sched-tbl-wrap:has(.filter-btn-icon),
.tbl-wrap:has(.filter-btn-icon) { overflow: visible; }
.act-tbl-wrap:has(.filter-btn-icon) > .tbl-toolbar:first-child,
.sched-tbl-wrap:has(.filter-btn-icon) > .tbl-toolbar:first-child,
.tbl-wrap:has(.filter-btn-icon) > .tbl-toolbar:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* === Postcode autofill on address field (Track B, B-15) ============ */
.ab-addr-sugg {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  box-shadow: 0 8px 24px rgba(10, 20, 40, 0.10), 0 2px 6px rgba(10, 20, 40, 0.06);
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
}
.ab-addr-sugg[hidden] { display: none; }
.ab-addr-sugg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
  transition: background 65ms ease-out;
}
.ab-addr-sugg-row svg { color: var(--text4); flex-shrink: 0; }
.ab-addr-sugg-row.on,
.ab-addr-sugg-row:hover { background: var(--s2); }
.ab-addr-sugg-row.on svg { color: var(--text2); }

/* === Existing-beneficiary detection (Track B, B-16) ================ */
.ab-name-sugg-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy-700, #1E3352);
  color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.ab-name-sugg-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ab-name-sugg-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ab-name-sugg-meta { font-size: 12px; color: var(--text3); }
.ab-name-sugg-link {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.ab-addr-sugg-row.on .ab-name-sugg-link {
  background: var(--surface);
  color: var(--navy-700, #1E3352);
  border-color: var(--navy-600, #2B3D5B);
}

.ab-linked-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: rgba(0, 200, 117, 0.06);
  border: 1px solid rgba(0, 200, 117, 0.25);
  border-radius: var(--r-sm, 4px);
  font-size: 12px;
  color: var(--text);
}
.ab-linked-banner[hidden] { display: none; }
.ab-linked-banner svg { color: #047857; flex-shrink: 0; }
.ab-linked-banner strong { font-weight: 600; }
[data-theme="dark"] .ab-linked-banner {
  background: rgba(0, 200, 117, 0.08);
  border-color: rgba(0, 200, 117, 0.30);
}
[data-theme="dark"] .ab-linked-banner svg { color: #4ADE80; }

/* === Always-require-2FA toggle (Track B, B-18) ===================== */
.bend-2fa-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  margin-right: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.bend-2fa-chip.on {
  background: rgba(0, 200, 117, 0.12);
  color: #047857;
  border-color: rgba(0, 200, 117, 0.30);
}
.bend-2fa-chip.off {
  background: var(--s2);
  color: var(--text3);
  border-color: var(--border);
}
.bend-2fa-chip svg { flex-shrink: 0; }
[data-theme="dark"] .bend-2fa-chip.on  { color: #4ADE80; }

/* Larger toggle with inline ON/OFF labels */
.bend-toggle-lg .bend-toggle-track {
  width: 56px; height: 26px; border-radius: 13px;
  background: var(--text4);
  display: flex; align-items: center;
  transition: background 100ms ease-out;
  position: relative;
}
.bend-toggle-lg input:checked + .bend-toggle-track {
  background: #059669;
}
.bend-toggle-lg .bend-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  z-index: 2;
}
.bend-toggle-lg input:checked + .bend-toggle-track .bend-toggle-thumb {
  transform: translateX(30px);
}
.bend-toggle-on,
.bend-toggle-off {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  pointer-events: none;
  z-index: 1;
}
.bend-toggle-on  { left: 8px;  opacity: 0; transition: opacity 100ms; }
.bend-toggle-off { right: 7px; opacity: 1; transition: opacity 100ms; }
.bend-toggle-lg input:checked + .bend-toggle-track .bend-toggle-on  { opacity: 1; }
.bend-toggle-lg input:checked + .bend-toggle-track .bend-toggle-off { opacity: 0; }
.bend-toggle-lg input:focus-visible + .bend-toggle-track {
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18);
}

/* === External reference: display + edit states (Track B, B-19) ===== */
.bend-extref-value {
  font-family: var(--num, var(--font));
  font-size: var(--text-base);    /* C-1: 13 → base — right-side detail-row text */
  color: var(--text);
  letter-spacing: 0.1px;
}
.bend-extref-input {
  font-family: var(--font, 'Inter', sans-serif);
  font-size: var(--text-base);    /* C-1: 13 → base */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--navy-600, #2B3D5B);
  border-radius: var(--r-sm, 4px);
  padding: 5px 10px;
  outline: none;
  min-width: 220px;
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
  margin-right: 6px;
}
.bend-detail-action-add {
  color: var(--navy-700, #1E3352);
  font-weight: 500;
}
.bend-detail-action-save {
  background: var(--navy-900, #0E1D35) !important;
  color: #fff !important;
  border-color: var(--navy-900, #0E1D35) !important;
  margin-right: 4px;
}
[data-theme="dark"] .bend-detail-action-save {
  background: #E0EAF7 !important;
  color: #111A3B !important;
  border-color: #E0EAF7 !important;
}

/* === Instruction card overflow + inactive state (Track B, B-20) ==== */
.bend-instr-more-wrap { position: relative; display: inline-flex; }
.bend-instr-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  color: var(--text3);
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out, border-color 65ms ease-out;
}
.bend-instr-more:hover { background: var(--s2); color: var(--text); border-color: var(--text4); }
.bend-instr-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  box-shadow: 0 8px 24px rgba(10, 20, 40, 0.10), 0 2px 6px rgba(10, 20, 40, 0.06);
  padding: 5px;
  z-index: 50;
}
.bend-instr-menu[hidden] { display: none; }
.bend-instr-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-sm, 4px);
  padding: 8px 10px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out;
}
.bend-instr-menu-item:hover { background: var(--s2); }
.bend-instr-menu-item.is-danger { color: #B42318; }
.bend-instr-menu-item.is-danger:hover { background: rgba(240, 68, 56, 0.08); }
.bend-instr-menu-item.is-danger svg { color: #B42318; }
[data-theme="dark"] .bend-instr-menu-item.is-danger { color: #F97066; }
[data-theme="dark"] .bend-instr-menu-item.is-danger svg { color: #F97066; }

/* Inactive instruction card — visible but greyed out (per REQ-132).
   Note: avoid `opacity:` here — it would create a new stacking context
   that traps the tooltip ::after on the Inactive badge inside the card,
   letting later siblings (e.g. the "Add new instruction" card) paint
   over it. Greying is done with explicit colors instead. */
.bend-instr-card.is-inactive {
  background: var(--s2);
}
.bend-instr-card.is-inactive .bend-instr-top > img,
.bend-instr-card.is-inactive .bend-instr-top > span:first-child { filter: saturate(0.6); opacity: 0.7; }
.bend-instr-card.is-inactive .bend-instr-label,
.bend-instr-card.is-inactive .bend-instr-iban { color: var(--text3); }
.bend-instr-card.is-inactive .bend-instr-iban-lock { color: var(--text4); }
.bend-instr-card.is-inactive .rail-chip { background: var(--surface); color: var(--text4); }
.bend-instr-inactive-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* Right side of the card top row — keeps the badge + ⋯ menu together */
.bend-instr-top-r { display: inline-flex; align-items: center; gap: 6px; }

/* The Add card is an <a> now — keep the dashed-tile look */
.bend-instr-add { text-decoration: none; color: inherit; }

/* === Per-instruction Send button (Track B, B-21) =================== */
/* Sits at the bottom of each active instruction card. Replaces the
   generic beneficiary-level Send button per REQ-155 — a beneficiary
   can have multiple instructions in different currencies. */
.bend-instr-card { display: flex; flex-direction: column; }
/* Pad the rail-chip area so 1-row vs 2-row chip lists don't change the
   card's total height — keeps Send buttons aligned across the grid. */
.bend-instr-card .rail-chips { min-height: 48px; align-content: flex-start; }
.bend-instr-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: auto;
  padding: 8px 12px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 12px; font-weight: 500;
  color: #fff;
  background: var(--navy-900, #0E1D35);
  border: 1px solid var(--navy-900, #0E1D35);
  border-radius: var(--r-sm, 4px);
  text-decoration: none;
  cursor: pointer;
  transition: background 65ms ease-out, border-color 65ms ease-out;
}
.bend-instr-send:hover { background: var(--navy-700, #1E3352); border-color: var(--navy-700, #1E3352); }
.bend-instr-send:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.20); }
[data-theme="dark"] .bend-instr-send { background: #E0EAF7; color: #111A3B; border-color: #E0EAF7; }
[data-theme="dark"] .bend-instr-send:hover { background: #fff; border-color: #fff; }

/* === CoP per-state designs (Track B, B-1 / D-59) =================== */
.cop-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border-radius: var(--r, 8px);
  border: 1px solid var(--border);
  background: var(--surface);
}
.cop-card[hidden] { display: none; }
.cop-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cop-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cop-card-hdr { display: flex; align-items: center; gap: 8px; }
.cop-card-ttl {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.1px;
}
.cop-card-msg {
  margin: 0;
  font-size: 12px; line-height: 1.5;
  color: var(--text2);
}
.cop-card-explainer {
  margin: 6px 0 0;
  padding: 10px 12px;
  font-size: 11px; line-height: 1.55;
  color: var(--text3);
  background: var(--s2);
  border-radius: var(--r-sm, 4px);
  border-left: 2px solid var(--border);
}
.cop-card-explainer[hidden] { display: none; }
.cop-card-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: none; border: none; padding: 0;
  color: var(--text4);
  cursor: pointer;
  border-radius: 50%;
  transition: color 65ms ease-out, background 65ms ease-out;
}
.cop-card-info svg { width: 13px; height: 13px; }
.cop-card-info:hover { color: var(--text2); background: var(--s2); }
.cop-card-info[aria-expanded="true"] { color: var(--text); background: var(--s2); }

.cop-card-confirm {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 4px);
  background: rgba(240, 68, 56, 0.06);
  border: 1px solid rgba(240, 68, 56, 0.25);
  font-size: 12px; color: var(--text);
  cursor: pointer;
}
.cop-card-confirm[hidden] { display: none; }
.cop-card-confirm input { margin-top: 2px; cursor: pointer; flex-shrink: 0; }

/* Per-state tones */
.cop-card.is-ok {
  background: rgba(0, 200, 117, 0.04);
  border-color: rgba(0, 200, 117, 0.25);
}
.cop-card.is-ok .cop-card-icon { background: rgba(0, 200, 117, 0.14); color: #047857; }
.cop-card.is-ok .cop-card-ttl  { color: #047857; }

.cop-card.is-warn {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.30);
}
.cop-card.is-warn .cop-card-icon { background: rgba(245, 158, 11, 0.18); color: #B45309; }
.cop-card.is-warn .cop-card-ttl  { color: #B45309; }

.cop-card.is-bad {
  background: rgba(240, 68, 56, 0.04);
  border-color: rgba(240, 68, 56, 0.30);
}
.cop-card.is-bad .cop-card-icon { background: rgba(240, 68, 56, 0.14); color: #B42318; }
.cop-card.is-bad .cop-card-ttl  { color: #B42318; }

.cop-card.is-info {
  background: var(--surface);
  border-color: var(--border);
}
.cop-card.is-info .cop-card-icon { background: var(--s2); color: var(--text2); }
.cop-card.is-info .cop-card-ttl  { color: var(--text); }

[data-theme="dark"] .cop-card.is-ok   .cop-card-ttl { color: #4ADE80; }
[data-theme="dark"] .cop-card.is-warn .cop-card-ttl { color: #FBBF24; }
[data-theme="dark"] .cop-card.is-bad  .cop-card-ttl { color: #F97066; }

/* === Dashboard accounts carousel empty state (Track A — A.2) === */
/* Inline empty-state card that occupies the carousel when no currency accounts exist. */
.acct-card-empty {
  width: 420px;
  min-width: 420px;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.acct-card-empty .empty-state { padding: 0 24px 28px; margin: 0; max-width: none; }
.acct-card-empty .empty-state-action { margin-top: 4px; }

/* === Initial-load skeletons (Track A — A.3) === */
/* Quiet shimmer placeholders shown while a widget is loading. Restrained tone:
   slow horizontal sweep, no scale/opacity bounce. Reduced-motion users get a flat block. */
.skeleton {
  background: linear-gradient(90deg, var(--s2, #EEF1F6) 0%, #F6F8FB 50%, var(--s2, #EEF1F6) 100%);
  background-size: 200% 100%;
  animation: hg-skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--r-sm, 4px);
  display: block;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1E2530 0%, #2A323F 50%, #1E2530 100%);
  background-size: 200% 100%;
}
@keyframes hg-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
.skeleton-line     { height: 12px; width: 100%; }
.skeleton-line-sm  { height: 10px; }
.skeleton-line-lg  { height: 22px; margin-top: auto; }
.skeleton-circle   { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; }
.skeleton-chip     { width: 76px; height: 20px; border-radius: 999px; }
.skeleton-card     { cursor: default; }
.skeleton-card .ac-top { gap: 10px; }
.skeleton-row td   { vertical-align: middle; }
.skeleton-row      { cursor: default; }

/* === FX tolerance / rejection screen (Track A — B-3 / D-53) === */
/* Inline state after the loading sequence when the market moved past tolerance.
   Mirrors .tex-confirmed structure with an amber warning instead of a green tick. */
.tex-rejected .tex-warn-icon { animation: texFadeIn 300ms ease both; margin-bottom: 18px; display: inline-flex; }
.tex-rejected .tex-heading   { animation: texFadeIn 300ms ease 200ms both; color: var(--text); }
.tex-rejected .tex-sub       { animation: texFadeIn 250ms ease 300ms both; max-width: 460px; margin-left: auto; margin-right: auto; }
.tex-rejected .tm-summary    { animation: texFadeIn 300ms ease 400ms both; opacity: 0.72; }
.tex-rejected .tex-help      { animation: texFadeIn 300ms ease 500ms both; font-size: 12px; color: var(--text3); margin: 8px 0 20px; }
.tex-rejected .tm-actions    { animation: texFadeIn 250ms ease 600ms both; }
.tm-summary-attempted .tm-summary-lbl { color: var(--text4); }
@media (prefers-reduced-motion: reduce) {
  .tex-rejected .tex-warn-icon,
  .tex-rejected .tex-heading,
  .tex-rejected .tex-sub,
  .tex-rejected .tm-summary,
  .tex-rejected .tex-help,
  .tex-rejected .tm-actions { animation: none; }
}

/* === Send wizard — beneficiary list sort + pagination (Track A — B-5) === */
/* Toolbar above the list hosts the sort select; pagination bar follows the list. */
.wiz-ben-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 4px 2px 8px;
}
.wiz-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3);
}
.wiz-sort-lbl { letter-spacing: 0.2px; text-transform: uppercase; font-weight: 500; }
.wiz-sort select {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 24px 4px 8px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236B7585' stroke-width='1.5'><path d='M2.5 4l2.5 2.5L7.5 4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 65ms;
}
.wiz-sort select:hover { border-color: var(--text3); }
.wiz-sort select:focus-visible { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.14); }
[data-theme="dark"] .wiz-sort select { background: var(--s2); color: var(--text); border-color: var(--border); }
.wiz-ben-pagination {
  margin-top: 10px;
  padding: 8px 2px 0;
  border-top: 1px solid var(--border);
}
/* Pagination handles overflow now — let the page fit without an inner scrollbar. */
.wiz-panel .wiz-ben-list { max-height: none; overflow: visible; }

/* === Send wizard — hero amount field (Track A — B-6 / REQ-076) === */
/* Big, focused amount input on Step 2. Auto thousands separator is handled in JS. */
.wiz-amt-hero {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 18px 16px;
  transition: border-color 65ms, background 65ms, box-shadow 65ms;
}
.wiz-amt-hero:focus-within {
  border-color: var(--navy-800);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
}
.wiz-amt-hero-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--num, 'Inter', sans-serif);
  font-feature-settings: 'tnum';
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
  padding: 0;
  line-height: 1.1;
}
.wiz-amt-hero-input::placeholder { color: var(--text4); font-weight: 600; }
.wiz-amt-hero-ccy {
  align-self: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.4px;
  padding: 8px 28px 8px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236B7585' stroke-width='1.5'><path d='M2.5 4l2.5 2.5L7.5 4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 65ms, color 65ms;
}
.wiz-amt-hero-ccy:hover { border-color: var(--text3); }
.wiz-amt-hero-ccy:focus-visible { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.14); }
/* Locked currency on Step 2 — set by the beneficiary / source account upstream. */
.wiz-amt-hero-ccy[disabled] {
  cursor: default;
  color: var(--text2);
  background-color: transparent;
  background-image: none;
  padding-right: 12px;
  opacity: 1;
}
.wiz-amt-hero-ccy[disabled]:hover { border-color: var(--border); }
[data-theme="dark"] .wiz-amt-hero-ccy[disabled] { background-color: transparent; color: var(--text2); }
[data-theme="dark"] .wiz-amt-hero { background: var(--s2); border-color: var(--border); }
[data-theme="dark"] .wiz-amt-hero:focus-within { background: var(--surface); }
[data-theme="dark"] .wiz-amt-hero-ccy { background: var(--surface); color: var(--text); }
@media (max-width: 540px) {
  .wiz-amt-hero-input { font-size: 30px; }
}

/* === Send wizard — debit/credit color cues on Step 2 (Track A — B-7 / REQ-076) === */
/* Small institutional tone chips next to the source-account label and beneficiary chip,
   making the money-flow direction obvious without raising the visual volume. */
.wiz-tone-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.6;
}
.wiz-tone-chip-debit  { background: #FEF2F2; border-color: #FECACA; color: #B42318; }
.wiz-tone-chip-credit { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
[data-theme="dark"] .wiz-tone-chip-debit  { background: rgba(240, 68, 56, 0.10); border-color: rgba(240, 68, 56, 0.35); color: #FCA5A5; }
[data-theme="dark"] .wiz-tone-chip-credit { background: rgba(5, 150, 105, 0.12);  border-color: rgba(5, 150, 105, 0.40);  color: #6EE7B7; }

/* Beneficiary chip on Step 2 — credit pill sits inline with the name. */
.wiz-sel-ben-text { flex: 1; min-width: 0; }
.wiz-sel-ben-name-row { display: flex; align-items: center; gap: 8px; }
.wiz-sel-ben-name-row .wiz-ben-name { font-weight: 600; }
.wiz-sel-ben-name-row .wiz-tone-chip { margin-left: 0; }

/* Subtle tinted left accents on the controls themselves to reinforce the chip semantics. */
.wiz-field:has(.wiz-tone-chip-debit) .wiz-select {
  border-left: 2px solid #FECACA;
  padding-left: 10px;
}
.wiz-selected-ben .wiz-sel-ben {
  border-left: 2px solid #A7F3D0;
  padding-left: 12px;
}
[data-theme="dark"] .wiz-field:has(.wiz-tone-chip-debit) .wiz-select { border-left-color: rgba(240, 68, 56, 0.40); }
[data-theme="dark"] .wiz-selected-ben .wiz-sel-ben { border-left-color: rgba(5, 150, 105, 0.40); }

/* === Send wizard — editable credit account on Step 2 (Track A — B-8 / REQ-076) === */
/* When the selected beneficiary has multiple payment instructions, surface a small
   selector inside the beneficiary chip so the user can swap the credit account
   without going back to Step 1. */
.wiz-ben-instr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.wiz-ben-instr-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text3);
}
.wiz-ben-instr-select {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 26px 4px 8px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236B7585' stroke-width='1.5'><path d='M2.5 4l2.5 2.5L7.5 4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 65ms;
}
.wiz-ben-instr-select:hover { border-color: var(--text3); }
.wiz-ben-instr-select:focus-visible { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.14); }
[data-theme="dark"] .wiz-ben-instr-select { background: var(--s2); color: var(--text); border-color: var(--border); }

/* === Send wizard — notification email chip input (Track A — B-9 / REQ-077) === */
.wiz-label-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text4);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.wiz-chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: text;
  transition: border-color 65ms, box-shadow 65ms;
}
.wiz-chip-input:focus-within {
  border-color: var(--navy-800);
  box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10);
}
.wiz-chip-input.is-invalid { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10); }
.wiz-chip-list { display: contents; }
.wiz-chip-input-field {
  flex: 1;
  min-width: 160px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  padding: 4px 2px;
}
.wiz-chip-input-field::placeholder { color: var(--text4); }
.wiz-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  line-height: 1.4;
  max-width: 100%;
}
.wiz-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.wiz-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: background 65ms, color 65ms;
}
.wiz-chip-remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--text); }
.wiz-chip-remove:focus-visible { outline: none; background: rgba(43, 61, 91, 0.14); color: var(--text); }
.wiz-chip-error {
  min-height: 16px;
  margin-top: 4px;
  font-size: 11.5px;
  color: #B42318;
  font-weight: 500;
}
[data-theme="dark"] .wiz-chip { background: var(--s2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .wiz-chip-remove { color: var(--text2); }
[data-theme="dark"] .wiz-chip-remove:hover { background: rgba(255,255,255,0.08); color: var(--text); }
[data-theme="dark"] .wiz-chip-input.is-invalid { border-color: #FCA5A5; box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12); }
[data-theme="dark"] .wiz-chip-error { color: #FCA5A5; }

/* === Send wizard — Add Recipient CTA on Step 1 (Track A — B-11 / REQ-073) === */
/* Surfaces the "+ Add recipient" affordance next to the search bar AND inside
   the empty state so users never get stuck when the person they want isn't on
   the list yet. */
.wiz-search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.wiz-search-row .wiz-search { flex: 1; margin-bottom: 0; }
.wiz-add-recipient {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #fff;
  background: var(--navy-900, #0E1D35);
  border: 1px solid var(--navy-900, #0E1D35);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 65ms, border-color 65ms;
}
.wiz-add-recipient:hover { background: var(--navy-700, #1E3352); border-color: var(--navy-700, #1E3352); }
.wiz-add-recipient:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18); }
[data-theme="dark"] .wiz-add-recipient { background: #E0EAF7; color: #111A3B; border-color: #E0EAF7; }
[data-theme="dark"] .wiz-add-recipient:hover { background: #fff; border-color: #fff; }

/* Step 1 empty state — adapted to host title + body + CTA. */
.wiz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 24px 40px;
}
.wiz-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}
.wiz-empty-body {
  font-size: 12.5px;
  color: var(--text3);
  text-align: center;
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.wiz-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--navy-900, #0E1D35);
  border: 1px solid var(--navy-900, #0E1D35);
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
  transition: background 65ms, border-color 65ms;
}
.wiz-empty-cta:hover { background: var(--navy-700, #1E3352); border-color: var(--navy-700, #1E3352); }
.wiz-empty-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.18); }
[data-theme="dark"] .wiz-empty-cta { background: #E0EAF7; color: #111A3B; border-color: #E0EAF7; }
[data-theme="dark"] .wiz-empty-cta:hover { background: #fff; border-color: #fff; }

/* === Send wizard — Schedule toggle, no reflow (Track A — B-12 / REQ-071) === */
/* The two panes ("Send now" hint and "Schedule for later" fields) live in the
   same single-cell grid, so swapping is opacity + visibility only. The slot is
   pinned to the height of the taller pane (`later`) so no neighbour shifts. */
.wiz-schedule-toggle {
  display: inline-flex;
  align-items: stretch;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px;
  gap: 3px;
}
.wiz-schedule-opt {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text3);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 65ms ease-out, color 65ms ease-out;
}
.wiz-schedule-opt:hover { color: var(--text); }
.wiz-schedule-opt.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
[data-theme="dark"] .wiz-schedule-opt.on { background: var(--border); color: var(--text); }

.wiz-schedule-slot {
  display: grid;
  margin-top: 10px;
}
.wiz-schedule-pane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
.wiz-schedule-pane.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wiz-schedule-pane-now {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text3);
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  align-self: center;
}
.wiz-schedule-hint-ic { flex-shrink: 0; color: var(--text3); }
.wiz-schedule-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wiz-schedule-col { display: flex; flex-direction: column; gap: 6px; }
.wiz-label-sm {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text3);
}
@media (prefers-reduced-motion: reduce) {
  .wiz-schedule-pane { transition: none; }
}
@media (max-width: 540px) {
  .wiz-schedule-fields { grid-template-columns: 1fr; }
}

/* === Send wizard — field + form validation pass (Track A — A.4) === */
.wiz-field-error {
  min-height: 16px;
  margin-top: 4px;
  font-size: 11.5px;
  color: #B42318;
  font-weight: 500;
}
[data-theme="dark"] .wiz-field-error { color: #FCA5A5; }
.wiz-amt-hero.is-invalid {
  border-color: #B42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}
[data-theme="dark"] .wiz-amt-hero.is-invalid {
  border-color: #FCA5A5;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}
.wiz-text-input.is-invalid,
.wiz-select.is-invalid {
  border-color: #B42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}
[data-theme="dark"] .wiz-text-input.is-invalid,
[data-theme="dark"] .wiz-select.is-invalid {
  border-color: #FCA5A5;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}

/* === Approve Payment 2FA / SCA step (Track E, E-1) === */
.modal-icon.is-shield { background: rgba(5, 150, 105, 0.10); color: #047857; }
[data-theme="dark"] .modal-icon.is-shield { background: rgba(0, 200, 117, 0.14); color: #34D399; }
.modal-btn-primary {
  background: #059669; color: #fff; border: 1px solid #059669;
}
.modal-btn-primary:hover { background: #047857; border-color: #047857; }
.modal-btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25); }
.approve2fa-bnf {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r, 8px);
  padding: 12px 14px;
  margin: 0 0 18px;
}
.approve2fa-amt {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.approve2fa-amt-l { font-size: 12px; color: var(--text3); }
.approve2fa-form .settings-field { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.app-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 300;
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 360px; padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 20, 40, 0.14), 0 2px 6px rgba(10, 20, 40, 0.08);
  font-family: var(--font, 'Inter', sans-serif);
  opacity: 0; transform: translateY(8px);
  transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.app-toast.on { opacity: 1; transform: translateY(0); }
.app-toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: rgba(0, 200, 117, 0.12); color: #047857;
}
[data-theme="dark"] .app-toast-icon { background: rgba(0, 200, 117, 0.16); color: #34D399; }
.app-toast.is-danger .app-toast-icon { background: rgba(240, 68, 56, 0.12); color: #B42318; }
[data-theme="dark"] .app-toast.is-danger .app-toast-icon { background: rgba(240, 68, 56, 0.16); color: #F97066; }
.app-toast-title { font-size: 13px; font-weight: 600; color: var(--text); }
.app-toast-body { font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: opacity 120ms ease-out; transform: none; }
  .app-toast.on { transform: none; }
}
.approve2fa-form .settings-hint { margin-top: 0; text-align: center; }
.approve2fa-form .modal-actions { margin-top: 18px; }

/* === Send wizard — Step 1 tabs, most-used, currency dropdown (Track E, E-15) === */
/* Match the table segmented tabs (.seg-tabs/.seg-tab): 6px container, 8px tabs. */
.wiz-ben-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 3px;
  background: var(--s2);
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 12px;
}
.wiz-ben-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  background: transparent;
  border: none;
  border-radius: var(--r);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 65ms, background 65ms, box-shadow 65ms;
}
.wiz-ben-tab:hover { color: var(--text2); }
.wiz-ben-tab.on {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .wiz-ben-tabs { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .wiz-ben-tab { color: var(--text4); }
[data-theme="dark"] .wiz-ben-tab:hover { color: var(--text2); }
[data-theme="dark"] .wiz-ben-tab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* Tabs (left) + currency dropdown (right) share one line. */
.wiz-ben-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.wiz-ben-tabs-row .wiz-ben-tabs { margin-bottom: 0; }

/* Sort sits on its own line, right-aligned and intentionally low-key. */
.wiz-ben-toolbar { justify-content: flex-end; margin: 0 2px 6px; }
.wiz-ben-toolbar .wiz-sort { font-size: 11px; color: var(--text4); }
.wiz-ben-toolbar .wiz-sort-lbl { font-size: 10px; }
.wiz-ben-toolbar .wiz-sort select {
  font-size: 11.5px;
  color: var(--text3);
  padding: 3px 22px 3px 7px;
  border-color: var(--border);
}

/* Searchable currency dropdown */
.wiz-ccy { position: relative; }
.wiz-ccy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 65ms;
}
.wiz-ccy-btn:hover { border-color: var(--text3); }
.wiz-ccy-btn svg:first-child { color: var(--text3); }
.wiz-ccy.open .wiz-ccy-btn { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.14); }
.wiz-ccy-btn-label { font-weight: 500; }
.wiz-ccy-chev { color: var(--text3); transition: transform 120ms ease-out; }
.wiz-ccy.open .wiz-ccy-chev { transform: rotate(180deg); }
[data-theme="dark"] .wiz-ccy-btn { background: var(--s2); color: var(--text); border-color: var(--border); }

.wiz-ccy-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(13, 17, 23, 0.14);
  padding: 6px;
}
[data-theme="dark"] .wiz-ccy-pop { background: var(--s2); border-color: var(--border); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
.wiz-ccy-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  margin-bottom: 6px;
  color: var(--text3);
}
.wiz-ccy-search:focus-within { border-color: var(--text3); }
.wiz-ccy-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.wiz-ccy-search input::placeholder { color: var(--text4); }
.wiz-ccy-list { max-height: 220px; overflow-y: auto; }
.wiz-ccy-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 7px 9px;
  cursor: pointer;
  text-align: left;
  transition: background 55ms;
}
.wiz-ccy-opt:hover { background: var(--s2); }
.wiz-ccy-opt.on { font-weight: 600; }
[data-theme="dark"] .wiz-ccy-opt:hover { background: var(--navy-800, #15253F); }
.wiz-ccy-empty { font-size: 12.5px; color: var(--text4); padding: 8px 9px; }

/* Most-used recipients — quick-link cards using the payments-table avatar
   pattern (flag avatar left, name + IBAN right), 3 per row. */
.wiz-mostused { margin: 2px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.wiz-mostused-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text4);
  margin-bottom: 8px;
}
.wiz-mostused-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.wiz-mu-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  text-align: left;
  font-family: var(--font);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  cursor: pointer;
  transition: border-color 65ms, background 65ms;
}
.wiz-mu-card:hover { border-color: var(--text3); background: var(--s2); }
.wiz-mu-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-mu-sub { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wiz-mu-flag {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.wiz-mu-iban { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-mu-lastused { font-size: 11px; color: var(--text4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .wiz-mu-card { background: var(--s2); border-color: var(--border); }
/* In dark mode the card default is already --s2, so hover needs a distinct
   elevated tone (matches the currency-option hover). */
[data-theme="dark"] .wiz-mu-card:hover { background: var(--navy-800); border-color: var(--text3); }

/* Per-row currency / GATE / account tags */
.wiz-ben-ccy {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  flex-shrink: 0;
}
.wiz-ben-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: var(--r-sm);
  padding: 2px 7px;
  flex-shrink: 0;
}
.wiz-ben-tag-gate { color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; }
.wiz-ben-tag-own  { color: var(--text3); background: var(--s2); border: 1px solid var(--border); font-weight: 600; letter-spacing: 0; }
[data-theme="dark"] .wiz-ben-tag-gate { color: #6EE7B7; background: rgba(5, 150, 105, 0.12); border-color: rgba(5, 150, 105, 0.40); }
.wiz-ben-row.selected .wiz-ben-check { margin-left: 0; }
/* List rows reuse the payments-table beneficiary pattern (flag avatar + name/IBAN). */
.wiz-ben-row .act-row-left { flex: 1; min-width: 0; }
.wiz-ben-row .act-name { min-width: 0; }
.wiz-ben-row .act-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-ben-row .act-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Internal-transfer tone chip on Step 2 */
.wiz-tone-chip-internal { background: #EEF2FF; border-color: #C7D2FE; color: #4338CA; }
[data-theme="dark"] .wiz-tone-chip-internal { background: rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.40); color: #A5B4FC; }

/* Center and widen the wizard column. */
.wiz-content { max-width: 760px; margin-left: auto; margin-right: auto; }

/* "Last used" date label. In list rows it sits right-aligned where the GATE/
   currency tag used to be; in most-used cards it stacks under the IBAN. */
.wiz-ben-lastused { font-size: 11px; color: var(--text4); white-space: nowrap; }
.wiz-ben-row .wiz-ben-lastused { flex-shrink: 0; margin-left: auto; text-align: right; }
.wiz-mu-card .wiz-ben-lastused { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }

/* More breathing room between search → most-used → tabs/list. */
.wiz-search-row { margin-bottom: 24px; }
.wiz-mostused { margin: 0 0 24px; padding-bottom: 24px; }
.wiz-ben-tabs-row { margin-bottom: 18px; }

/* Currency dropdown + sort icon grouped on the right of the tabs row. */
.wiz-ben-actions { display: flex; align-items: center; gap: 8px; }
.wiz-sortmenu { position: relative; display: inline-flex; }
.wiz-sort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 65ms, color 65ms;
}
.wiz-sort-icon:hover { border-color: var(--text3); color: var(--text); }
.wiz-sortmenu.open .wiz-sort-icon { border-color: var(--navy-800); color: var(--text); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.14); }
[data-theme="dark"] .wiz-sort-icon { background: var(--s2); border-color: var(--border); }
/* Sort menu reuses the currency popover styling (theme-aware), right-aligned
   under the icon. */
.wiz-sort-pop { left: auto; right: 0; width: 150px; }

/* Currency flags in the dropdown button and option rows. */
.wiz-ccy-btn-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text3); }
.wiz-ccy-flag {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.wiz-ccy-btn.chosen .wiz-ccy-btn-label { font-weight: 600; }
.wiz-ccy-opt-main { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.wiz-ccy-opt-main .wiz-ccy-flag { width: 20px; height: 20px; }
.wiz-ccy-opt-globe { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--text3); }
.wiz-ccy-opt-globe svg { width: 20px; height: 20px; }
.wiz-ccy-opt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wiz-ccy-opt-code { font-size: 14px; flex-shrink: 0; }
.wiz-ccy-opt-name { color: var(--text3); font-weight: 400; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === Beneficiary detail tooltips (E-9, Track B) === */
/* Multiline tooltip variant — for explanatory copy that needs wrapping.
   Uses the same dark navy/white treatment as the base [data-tooltip] rule
   but lifts the nowrap constraint and gives a sensible max width. Pairs
   with the ⓘ icons on Beneficiary Detail rows and locked instruction
   fields (B-20 IBAN immutability). */
[data-tooltip-multi]::after {
  content: attr(data-tooltip-multi);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff;
  font-size: 11px; font-weight: 400; line-height: 1.4;
  padding: 6px 10px; border-radius: var(--r);
  white-space: normal; pointer-events: none;
  opacity: 0; transition: opacity 120ms ease;
  z-index: 9999; letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-family: var(--font);
  text-transform: none;
  width: max-content;
  max-width: 240px;
  text-align: center;
}
[data-tooltip-multi] { position: relative; }
[data-tooltip-multi]:hover::after,
[data-tooltip-multi]:focus-visible::after { opacity: 1; }
@media (hover: none) { [data-tooltip-multi]::after { display: none; } }

/* The ⓘ icon already in markup — make it focusable + give it a hit
   area so the tooltip works for keyboard users too. */
.bend-info-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--text4);
  cursor: help;
  border-radius: 50%;
  vertical-align: -2px;
  margin-left: 5px;
}
.bend-info-ico svg { width: 13px; height: 13px; display: block; }
.bend-info-ico:hover,
.bend-info-ico:focus-visible { color: var(--text2); outline: none; }

/* Inactive badge gets an explainer tooltip too — anchor positioning so
   the bubble sits centred over the small pill. */
.bend-instr-inactive-badge[data-tooltip-multi] { cursor: help; }

/* IBAN row on an instruction card behaves like a locked field — small
   lock cue + tooltip explains the B-20 rule. */
.bend-instr-iban-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px;
  color: var(--text4);
  margin-left: 6px;
  vertical-align: -1px;
  cursor: help;
}
.bend-instr-iban-lock:hover { color: var(--text3); }

/* E-10 — inline copy feedback on the address copy button. Keeps
   spacing stable by swapping the icon (clipboard ↔ check) inside the
   same fixed-size button; success state uses the CTA green. */
.bend-detail-action.bend-field-copy { transition: color 120ms ease; }
.bend-detail-action.bend-field-copy.is-copied { color: #059669; }
.bend-field-copy-ic { display: block; }
.bend-field-copy-ic.is-check { color: #059669; }

/* E-13 — chip editor for the Email-for-notification row.
   Reuses the B-9 .wiz-chip-input / .wiz-chip / .wiz-chip-remove
   primitives. Layout puts the chip box on a row of its own with
   Save/Cancel beneath it so a longer list of chips doesn't squeeze
   the buttons off-screen.  The detail row already uses flex
   space-between — we let the editor block claim a sensible max width
   without breaking the label/value alignment. */
.bend-detail-row:has(.bend-chip-edit) { align-items: flex-start; }
.bend-detail-row:has(.bend-chip-edit) .bend-detail-label { padding-top: 8px; }
.bend-chip-edit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 460px;
}
.bend-chip-input-host { min-height: 40px; }
.bend-chip-input-field { font-size: 13px; }
.bend-chip-err {
  min-height: 16px;
  font-size: 11.5px;
  color: #B42318;
  line-height: 1.3;
}
.bend-chip-err:empty { display: none; }
.bend-chip-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Keep the row's label (text + ⓘ icon) intact when the value side
   grows. Without this, a long value squeezes the label flex item,
   "Email for notification" wraps to two lines, and the ⓘ — which is
   a separate flex child — gets vertically centred between the lines,
   appearing far to the right of the label text. */
.bend-detail-label { flex-shrink: 0; white-space: nowrap; }
.bend-detail-value { min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
.bend-detail-value .bend-extref-value {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* When the value wraps to multiple lines, anchor the label to the top
   so "Email for notification ⓘ" reads against the first line of the
   value rather than the visual middle. Single-line rows look the same. */
.bend-detail-row { align-items: flex-start; }
.bend-detail-label { padding-top: 1px; }

/* === Add Beneficiary — method-tab hint (E-14 / REQ-145, Track B) === */
/* Hint sits under the tabs explaining one-method-per-instruction.
   Lets users freely tab between methods to compare requirements,
   confident their input is preserved. */
.ab-method-tab-row {
  margin: 18px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab-method-tab-row .ab-method-tabs { margin: 0; }
.ab-method-tab-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.45;
}
.ab-method-tab-hint svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text4);
}

/* === Dashboard — Latest activity table controls (Track D, D-1) === */
/* Lightweight popovers for the date-range, multi-filter, and download
   controls. Namespaced .tbl-pop so other Track D pages (Payments,
   Account activity, Beneficiary history) can promote this pattern
   later without name clashes. */
.tbl-pop-wrap {
  position: relative;
  display: inline-flex;
  align-self: stretch;
}
.tbl-pop-wrap > .filter-btn { align-self: stretch; }
.tbl-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 9999;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(13, 17, 23, 0.10);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tbl-pop[hidden] { display: none; }
.tbl-pop-wide { min-width: 460px; }
.tbl-pop-ttl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text3);
}
.tbl-pop-row { display: flex; flex-direction: column; gap: 4px; }
.tbl-pop-row label {
  font-size: 11.5px;
  color: var(--text3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tbl-pop-row input[type="date"] {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
}
.tbl-pop-row input[type="date"]:focus { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.10); }
.tbl-pop-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* 2-column variant for popovers with only two filter dimensions
   (e.g. Accounts: Currency + Balance). Pairs with a narrower
   min-width so the popover doesn't overflow into the sidebar. */
.tbl-pop-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tbl-pop-medium { min-width: 320px; }
.tbl-pop-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbl-pop-col label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.tbl-pop-col input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.tbl-pop-col input[type="checkbox"]:checked {
  background: var(--navy-900);
  border-color: var(--navy-900);
}
.tbl-pop-col input[type="checkbox"]:checked::after {
  content: '';
  width: 8px; height: 4px;
  border: 2px solid #fff;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.tbl-pop-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-f);
}
.tbl-pop-clear,
.tbl-pop-apply {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
}
.tbl-pop-clear:hover { background: var(--s2); }
.tbl-pop-apply {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.tbl-pop-apply:hover { background: var(--navy-800); }

/* When a filter / date is active, mark the trigger button so it's
   clear something's narrowing the table. */
.filter-btn.is-active {
  background: var(--s2);
  border-color: var(--navy-800);
  color: var(--text);
}

/* === Payment detail — transaction summary flow (Track E, E-2) === */
.pay-flow {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 18px;
}
.pf-party {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--s2);
}
.pf-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-info {
  min-width: 0;
}
.pf-role {
  font-size: 11px;       /* C-1: 10 → 11 — micro label, still uppercase */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text4);
  margin-bottom: 1px;
}
.pf-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-iban {
  font-size: 13px;       /* C-1: 12 → 13 — IBAN sub-line in flow */
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-connector {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 6px 0;
  padding-left: 50px;
}
.pf-connector::before {
  content: '';
  position: absolute;
  left: 18px;
  top: -10px;
  bottom: -10px;
  width: 2px;
  background: var(--border);
}
.pf-amount {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* neutral pill — direction shown via text colour only */
.pf-amount.pf-in  { color: #059669; }
.pf-amount.pf-out { color: #B91C1C; }
[data-theme="dark"] .pf-amount.pf-in  { color: #4ADE80; }
[data-theme="dark"] .pf-amount.pf-out { color: #FCA5A5; }
.pf-amount-dec {
  font-weight: 600;
  opacity: 0.55;
}
.pf-ccy {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
}
/* breathing room before the action buttons */
.slide-body .panel-actions {
  margin-top: 20px;
}

/* === FX page — left-align trade area with the page heading (Track E, E-3) === */
/* Was centred (margin: 0 auto); align its left edge with the Convert h1 + History. */
.trade-area {
  margin-left: 0;
  margin-right: auto;
}

/* === FX page — align saved pairs with trade form, widen gap (Track E, E-3) === */
/* The "Saved pairs" label is shorter than the Trading-Credit meta row, so the
   first pair box sat ~8px above the "You buy" card. Push the pairs list down to
   align the first box with the buy card; add breathing room between columns. */
.trade-cols-row { gap: 36px; }
/* padding-top nudges the (smaller) label text down so its baseline/bottom lines up
   with the 14px Trading-Credit / For-Settlement row; the reduced margin-bottom keeps
   the pairs list — and thus the first box's top alignment — unchanged. */
.saved-ttl { padding-top: 4px; margin-bottom: 12px; }

/* === Convert — rebook flow: review + success steps (Track A, E-18) === */
.rb-success { text-align: center; padding: 32px 8px 12px; margin-bottom: 26px; }
.rb-success-ico { display: flex; justify-content: center; line-height: 0; margin-bottom: 22px; }
.rb-success-ttl { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 12px; }
.rb-success-sub { font-size: 12.5px; color: var(--text3); line-height: 1.6; margin: 0 auto; max-width: 290px; }
.rb-current-tag {
  position: absolute; top: 12px; right: 12px;
  display: inline-block; padding: 1px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text3); background: var(--s2);
  border: 1px solid var(--border-f); border-radius: var(--r-pill);
}
.sp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* === Accounts — Add New Account flow (Track B, E-5) === */
/* Panel footer pinned below the scrollable body */
.slide-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.slide-foot .btn-primary, .slide-foot .btn-outline { font-size: 13px; }

.ac-form-intro {
  font-size: 12.5px; color: var(--text3); line-height: 1.55;
  margin: 0 0 18px;
}
.ac-field { margin-bottom: 18px; }
.ac-field-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text2);
  margin-bottom: 7px;
}
.ac-field-opt { font-weight: 400; color: var(--text4); }
.ac-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.ac-input::placeholder { color: var(--text4); }
.ac-input:focus { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(43, 61, 91, 0.14); }
[data-theme="dark"] .ac-input { background: var(--s2); border-color: var(--border); }
.ac-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.ac-field-hint { font-size: 11.5px; color: var(--text4); margin-top: 6px; }

/* Account-holder (read-only) display */
.ac-holder {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--s2); color: var(--text); font-size: 13px; font-weight: 600;
}
[data-theme="dark"] .ac-holder { background: var(--navy-800, #15253F); border-color: var(--border); }

/* Full-width currency picker inside the add-account panel */
.wiz-ccy--full, .wiz-ccy--full .wiz-ccy-btn { width: 100%; box-sizing: border-box; }
.wiz-ccy--full .wiz-ccy-btn { justify-content: flex-start; padding: 10px 12px; font-size: 13px; }
.wiz-ccy--full .wiz-ccy-btn-label { flex: 1; text-align: left; }
.wiz-ccy--full .wiz-ccy-pop { width: 100%; }

/* Right-aligned account count in the currency option rows */
.wiz-ccy-opt { justify-content: space-between; }
.wiz-ccy-opt-r { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wiz-ccy-opt-count { font-size: 11.5px; color: var(--text4); font-weight: 500; white-space: nowrap; }
.ac-char-count { font-size: 11px; color: var(--text4); margin-top: 6px; text-align: right; }
.ac-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 9px 11px;
  background: var(--s2); border: 1px solid var(--border-f); border-radius: var(--r);
  font-size: 11.5px; color: var(--text2); line-height: 1.5;
}
.ac-notice svg { flex-shrink: 0; color: var(--text3); margin-top: 1px; }

/* Optimistic pending placeholder — card + list row */
.acct-card-pending { cursor: default; opacity: 0.92; }
.acct-card-pending .ac-label { color: var(--text2); }
.ac-amt-pending { color: var(--text4); }
.ac-pending-row {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--text3);    /* C-1: 11.5 → 13 */
}
.ac-pending-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #F59E0B;
  animation: acPendingPulse 1.6s ease-in-out infinite;
}
.ac-pending-note {
  margin-top: 8px; font-size: 13px; font-weight: 600; color: #B45309;    /* C-1: 11 → 13 */
}
[data-theme="dark"] .ac-pending-note { color: #FBBF24; }
.act-row-pending { cursor: default; }
.act-row-pending .act-n { color: var(--text2); }
.act-row-pending .act-d { color: #B45309; }
[data-theme="dark"] .act-row-pending .act-d { color: #FBBF24; }
@keyframes acPendingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-pending-dot { animation: none; }
}

/* === Accounts list toolbar (Track B, D-6) === */
.accts-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  /* The fadeSlideUp entrance animation on .page-body > * sets
     transform: translateY(0) at fill-mode: both, which makes the
     toolbar form its own stacking context permanently. Without an
     explicit z-index here, the popover would be locked inside that
     local context and the next-sibling .accts-grid (also animated,
     so also a stacking context, but later in DOM order) would paint
     over it — hiding the popover behind the cards. */
  position: relative;
  z-index: 2;
}
.accts-toolbar[hidden] { display: none; }
.accts-toolbar .acctsToolbar-search { flex: 1; max-width: 320px; }
.accts-toolbar .acctsToolbar-search input { width: 100%; }

/* === Accounts — account count + navigable card (Track B, E-16) === */
.acct-card-lg .ac-top-txt { display: flex; flex-direction: column; gap: 3px; }
.ac-acct-count { font-size: 13px; font-weight: 500; color: var(--text4); }   /* C-1: 12 → 13 — card subtitle */
[data-theme="dark"] .ac-acct-count { color: var(--text3); }
.ac-card-nav { position: relative; cursor: pointer; }
.ac-card-chev {
  position: absolute; top: 18px; right: 18px;
  display: inline-flex; color: var(--text4);
  opacity: 0; transform: translateX(-3px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  pointer-events: none;
}
.ac-card-nav:hover .ac-card-chev,
.ac-card-nav:focus-visible .ac-card-chev { opacity: 1; transform: translateX(0); }
[data-theme="dark"] .ac-card-chev { color: var(--text3); }
@media (prefers-reduced-motion: reduce) {
  .ac-card-chev { transition: none; }
}

/* === Accounts — parallel Buy/Send card actions (Track B, E-16) === */
/* Both action buttons share one row (Buy left, Send right); the primary
   no longer spans full-width on its own line. */
.acct-card-lg .ac-actions { grid-template-columns: 1fr 1fr; }
.acct-card-lg .ac-actions .ac-act-btn-primary { grid-column: auto; }

/* === Date input standardisation (Track C, C-4) ===========
   Decision: standardise on the native <input type="date">. Every date
   surface in the app (Track D toolbar popovers, Send Payment Schedule
   wizard) uses native — the older custom calendar popover referenced
   in C-4 was retired when Track D rewired the decorative toolbar
   buttons.

   Why native:
   - Accessibility comes for free (keyboard, screen-reader, locale).
   - Mobile gets the OS-native picker, which is the right call for a
     prototype that may demo on touch.
   - Less surface area to maintain — no custom popover component to
     reinvent, no risk of drift between two date inputs.

   This rule normalises the calendar-picker glyph color so it reads in
   both light and dark themes regardless of the user's OS browser
   chrome. color-scheme tells UA to render the picker indicator and
   embedded controls (the dropdown calendar) in the matching theme.

   Future date inputs should opt into the existing surfaces:
   - .tbl-pop-row input[type="date"] for popover contexts
   - .wiz-text-input + type="date" for in-wizard contexts
   Anything else needs a design-system check.
*/
input[type="date"] { color-scheme: light; }
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
/* Make the picker indicator pick up the surrounding text color so it
   doesn't stay browser-black against a navy chip or dark-mode panel. */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 0.9; }

/* === Currency icon system (Track C, C-7) =================
   Canonical entry point: ccyIcon(ccy, opts) in js/format-ccy-icon.js.
   Two shapes, one rule:
     - Fiat → flag image (.ccy-icon-flag) — EUR included, no
       custom blue-and-stars treatment.
     - Stablecoin → coloured disc with peg symbol (.ccy-icon-coin)
       for the USDC / USDT / EURC family.
   Sizing is set inline by the helper via the `size` opt so callers
   in different surface densities (40px in tables, 20px in chips)
   reuse the same component.
*/
.ccy-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; }
.ccy-icon-flag { border-radius: 50%; object-fit: cover; }
.ccy-icon-coin {
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: -0.5px;
  line-height: 1;
}
.ccy-icon-unknown {
  border-radius: 50%;
  background: var(--s2);
  color: var(--text3);
  font-weight: 700;
  font-family: var(--font);
}

/* === C-9: unified wizard stepper — green check on completed steps (Track C) === */
/* Canonical stepper: numbered circle (upcoming/active) → green circle with a
   white check once complete. Applies to every .wiz-stepper instance (Add
   Beneficiary, Send Payment) so the single component reads identically. */
.wiz-step.done .wiz-num { color: transparent; font-size: 0; position: relative; }
.wiz-step.done .wiz-num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.8'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .wiz-num { transition: none; }
}

/* === C-11: invited-user pending status pill (Track C) === */
.settings-user-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(217, 119, 6, 0.10);
  color: #B45309;
}
.settings-user-status svg { flex-shrink: 0; }
[data-theme="dark"] .settings-user-status {
  background: rgba(217, 119, 6, 0.18);
  color: #F2B66D;
}

/* Tab bar aligns to the same body width as the settings cards (720px),
   so its right edge lines up with the content below instead of stretching. */
.settings-tabs { max-width: 720px; }

/* Side-panel forms are narrow (~390px): stack paired fields vertically and
   let every control fill the panel so nothing overflows the edge. */
.slide .settings-row { grid-template-columns: 1fr; }
.slide .settings-field { min-width: 0; }
.slide .settings-input { width: 100%; }

/* Custom chevron for selects in the side panel, with real right padding so
   the arrow isn't flush against the panel edge. */
.slide select.settings-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236B7585' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
[data-theme="dark"] .slide select.settings-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239AA5B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
}

/* === Required-field asterisk for wizard labels (C-22) ============== */
.wiz-req { color: #B42318; margin-left: 2px; font-weight: 600; font-size: 13px; }

/* === Validation success state — mirror of error styles (C-24) ====== */
/* Pairs with .wiz-field-error / .settings-err / .addben-err: same
   below-input position, same shape, swap red+exclaim for green+check. */
.wiz-field-ok {
  min-height: 16px;
  margin-top: 4px;
  font-size: 11.5px;
  color: #047857;
  font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.wiz-field-ok::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='4.5'/><path d='M3.8 6.2l1.7 1.6 3.0-3.4'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='4.5'/><path d='M3.8 6.2l1.7 1.6 3.0-3.4'/></svg>") center / contain no-repeat;
}
[data-theme="dark"] .wiz-field-ok { color: #6EE7B7; }

.settings-ok[hidden] { display: none; }
.settings-ok {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: #047857;
  margin-top: -2px;
}
.settings-ok::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='4.5'/><path d='M3.8 6.2l1.7 1.6 3.0-3.4'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='4.5'/><path d='M3.8 6.2l1.7 1.6 3.0-3.4'/></svg>") center / contain no-repeat;
}
[data-theme="dark"] .settings-ok { color: #6EE7B7; }

.addben-ok[hidden] { display: none; }
.addben-ok {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: #047857;
  margin-top: 2px;
}
[data-theme="dark"] .addben-ok { color: #6EE7B7; }

/* .is-valid mirrors .is-invalid — green confirmation border. */
.settings-input.is-valid,
.wiz-text-input.is-valid,
.wiz-select.is-valid {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.10);
}
.wiz-amt-hero.is-valid {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.10);
}
[data-theme="dark"] .settings-input.is-valid,
[data-theme="dark"] .wiz-text-input.is-valid,
[data-theme="dark"] .wiz-select.is-valid,
[data-theme="dark"] .wiz-amt-hero.is-valid {
  border-color: #6EE7B7;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.14);
}

/* === Company page placeholders (G-2 Phase 1) ====================== */
.settings-empty-note {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--s2);
  border: 1px dashed var(--border);
  color: var(--text3);
  font-size: 13px;
  line-height: 1.5;
}
[data-theme="dark"] .settings-empty-note { background: var(--s2); border-color: var(--border); color: var(--text3); }
/* === Uniform copy feedback (Track C, C-14) ================================= */
/* One copy idiom: the trigger's icon swaps to a checkmark for ~1.4s — an inline,
 * quiet confirmation with no tooltip. The check + any swapped label render in
 * CTA green. */
.cp-check { color: #059669; }
.is-copied { color: #059669; }
.is-copied .cp-lbl,
.is-copied .pb-lbl { color: #059669; }

/* === Approval thresholds (G-2 Phase 3) ============================ */
/* Row layout mirrors .settings-user-row — divider rows, no boxed card,
   ⋯ overflow menu for actions (re-uses .settings-user-more / -menu). */
.thr-list, .thr-audit { list-style: none; margin: 0; padding: 0; }
.thr-empty {
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--s2);
  border: 1px dashed var(--border);
  color: var(--text3);
  font-size: 13px;
  line-height: 1.5;
}
.thr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-f, var(--border));
}
.thr-row:last-child { border-bottom: none; }
.thr-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.thr-row-amount { font-size: var(--text-base); font-weight: 600; color: var(--text); letter-spacing: -0.1px; font-feature-settings: 'tnum'; }
.thr-row-meta { font-size: 13px; color: var(--text3); }

.thr-audit-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.thr-audit-row:last-child { border-bottom: none; }
.thr-audit-when { color: var(--text4); font-size: 12px; font-feature-settings: 'tnum'; }
.thr-audit-what { color: var(--text2); line-height: 1.5; }
.thr-audit-what strong { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .thr-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .thr-row-actions { justify-content: flex-end; }
  .thr-audit-row { grid-template-columns: 1fr; gap: 2px; }
}

/* === 2FA off-state note (G-4) ===================================== */
.settings-2fa-off-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--r);
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.30);
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
}
[data-theme="dark"] .settings-2fa-off-note {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--text2);
}