/* ── Self-hosted UI fonts (rebrand 2026-06-22) ───────────────────────────────────
     IBM Plex Sans (UI) + IBM Plex Mono (numerics/IDs/amounts/pills), latin subset.
     Self-hosted same-origin .woff2 (served at /public/fonts/*) so the strict CSP needs
     no widening for an external font CDN. */
  @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/public/fonts/ibm-plex-sans-400.woff2") format("woff2");}
  @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/public/fonts/ibm-plex-sans-500.woff2") format("woff2");}
  @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/public/fonts/ibm-plex-sans-600.woff2") format("woff2");}
  @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/public/fonts/ibm-plex-sans-700.woff2") format("woff2");}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/public/fonts/ibm-plex-mono-400.woff2") format("woff2");}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/public/fonts/ibm-plex-mono-500.woff2") format("woff2");}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/public/fonts/ibm-plex-mono-600.woff2") format("woff2");}

  :root {
    /* ── MODERN-INSTITUTIONAL NAVY identity (2026-06-22 rebrand) ───────────────────
       Deep-navy ink on a cool off-white canvas; white cards; crisper 8px radius and a
       faint lift. PRIMARY = deep navy for primary actions; ACCENT = one restrained
       indigo used SPARINGLY (links / focus / active / high-value CTA); DANGER = red for
       destructive + error only. Token NAMES unchanged from charcoal-minimal, so every
       component re-skins automatically. */
    --font:"IBM Plex Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;   /* rebrand: UI typeface */
    --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;        /* rebrand: numerics/IDs/pills */
    --bg:#f6f7f9; --card:#ffffff; --line:#e6e8ee; --fg:#131a2b; --muted:#616b80;
    --primary:#18233f; --primary-hover:#222e4d; --primary-soft:#eef1f6;
    --accent:#5247d6; --accent-hover:#463bc4; --accent-soft:#edecfb; --accent-ink:#4035a8;
    --danger:#c0322b; --danger-hover:#a32a24; --danger-soft:#fbece9;
    --sidebar-1:#0e1730; --sidebar-2:#0a1024; --sidebar-fg:#9aa4be; --sidebar-active:rgba(255,255,255,.07);
    --ok:#15803d; --ok-soft:#e6f3ea; --warn:#b45309; --warn-soft:#f9efe1; --err:#c0322b;
    --radius:8px; --radius-sm:6px;   /* rebrand: crisper 8px radius — applied app-wide */
    /* Faint card lift; cards still lean on the hairline border. */
    --shadow:0 1px 2px rgba(16,24,40,.05);

    /* ── GUI REFRESH foundation (2026-06-19) — the backbone every screen builds on ──────────────
       Stripe-dashboard DNA: a STRICT spacing scale (4/8/12/16/24/32/48) so everything aligns to one
       grid; a deliberate TYPE scale (large bold titles → muted small labels); a moderate radius
       (~10px, not chunky). Colours unchanged — charcoal + the ONE restrained blue accent. Defining
       these is inert; screens opt in (home first, the rest after owner sign-off). */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;
    --ts-xs:12px; --ts-sm:13px; --ts-base:14px; --ts-lg:18px; --ts-xl:22px; --ts-2xl:28px; --ts-3xl:34px;
    --fw-med:550; --fw-semi:650; --fw-bold:750;
    --radius-gui:8px;                  /* rebrand: crisper card radius (was 10px) */
    --hairline:1px solid var(--line);  /* the one canonical card/divider border */
  }
  @keyframes bc-spin { to { transform: rotate(360deg); } }
  .spinner { display:inline-block; width:13px; height:13px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:bc-spin .65s linear infinite; vertical-align:middle; margin-right:5px; opacity:.75; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.55 var(--font);
         background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
  h1 { font-size:20px; margin:0; font-weight:650; letter-spacing:-.01em; }
  h2 { font-size:16px; margin:0 0 4px; font-weight:650; letter-spacing:-.01em; }
  h3 { font-size:14px; margin:0 0 4px; font-weight:650; }

  /* ── Login screen ── */
  .login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
                background:var(--bg); }
  .login-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
                border-radius:14px; box-shadow:0 10px 40px rgba(16,23,40,.10); padding:32px; }
  .login-brand { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .login-brand .mark { width:30px; height:30px; border-radius:8px; background:var(--primary);
                       display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; }
  .login-sub { color:var(--muted); margin:0 0 22px; font-size:13px; }

  /* ── App shell ── */
  .app { display:flex; min-height:100vh; }
  .sidebar { width:240px; flex-shrink:0; background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2)); color:var(--sidebar-fg);
             display:flex; flex-direction:column; padding:16px 14px;
             /* Stay put while the main content scrolls; the company header + footer stay pinned and only the
                nav scrolls when it overflows (so the brand/logo is always visible). */
             position:sticky; top:0; height:100vh; align-self:flex-start; overflow:hidden; }
  /* Company switcher (top of sidebar) */
  .sidebar .company { flex-shrink:0; display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:16px; border-radius:12px;
                      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); color:#fff; }
  .sidebar .company .avatar { width:34px; height:34px; border-radius:9px; flex-shrink:0; background:#162143; border:1px solid rgba(255,255,255,.16);
                      display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:15px; }
  .sidebar .company .cname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:650; }
  /* The nav is the one scrollable region — it flexes to fill the space between the pinned company header and
     footer, and scrolls (thin, subtle) when groups expand past the viewport. */
  .nav { display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
  .nav::-webkit-scrollbar { width:8px; }
  .nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
  .nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); background-clip:padding-box; }
  .nav { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
  /* Sidebar tools area — Manual Conversion lives here (out of the main nav), visually muted. */
  .side-tools { margin-top:6px; padding-top:8px; border-top:1px solid var(--line); }
  .side-tools .tool { opacity:.7; font-size:12.5px; }
  .side-tools .tool:hover, .side-tools .tool.active { opacity:1; }
  .nav button { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; color:var(--sidebar-fg); border:0; cursor:pointer;
                font:inherit; font-weight:550; font-size:13.5px; padding:9px 11px; border-radius:10px; margin:0; position:relative; transition:background .12s, color .12s; }
  .nav button svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; opacity:.78; }
  /* Inline button/control icon (replaces functional emoji like ↻ ⬇); aria-hidden in markup so the text label is the accessible name. */
  .icon { display:inline-block; width:15px; height:15px; vertical-align:-0.17em; margin-right:6px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
  .nav button > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav button:hover { background:rgba(255,255,255,.06); color:#fff; }
  .nav button:hover svg { opacity:1; }
  .nav button { border-radius:10px; }
  .nav button.active { background:var(--sidebar-active); color:#fff; font-weight:650; }
  .nav button.active svg { opacity:1; color:#fff; }
  .nav button.active::before { content:""; position:absolute; left:-14px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
  .nav .nav-group .caret { flex:none; transition:transform .15s; font-size:11px; opacity:.7; }
  .nav .nav-group.open .caret { transform:rotate(180deg); }
  /* Animated accordion: collapse via max-height/opacity (no display:none) so expand/collapse
     glides instead of snapping. */
  .nav-sub { display:flex; flex-direction:column; gap:3px; margin:0 0 0 13px;
             padding-left:10px; border-left:1px solid rgba(255,255,255,.10);
             max-height:0; opacity:0; overflow:hidden;
             transition:max-height .24s ease, opacity .18s ease, margin .24s ease; }
  .nav-sub.open { max-height:320px; opacity:1; margin:3px 0 3px 13px; }
  .nav-sub button { font-size:13px; padding:8px 11px; }
  .nav-sub button svg { width:16px; height:16px; }
  /* Sidebar footer */
  .side-foot { flex-shrink:0; margin-top:8px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); }
  .side-foot .brand { display:flex; align-items:center; gap:9px; padding:0 8px; color:#fff; font-weight:700; font-size:13.5px; letter-spacing:-.01em; }
  /* SB-UI-12: glow uses the --accent rgb (37,99,235) + tagline uses the --muted token — was a leftover
     hard-coded #2F6BF2 / #7e8bab that didn't track the design tokens. */
  .side-foot .brand .mark { width:26px; height:26px; border-radius:8px; background:var(--primary);
                            display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; box-shadow:0 2px 8px rgba(37,99,235,.45); }
  .side-foot .tagline { color:var(--muted); font-size:11px; padding:8px 8px 0; }
  /* Rebrand: footer system-status row — a green dot with a soft halo + mono label. */
  .side-foot .sys-status { display:flex; align-items:center; gap:8px; padding:12px 8px 0; margin-top:10px;
    border-top:1px solid rgba(255,255,255,.06); color:#7e889f; font:500 11px var(--font-mono); }
  .side-foot .sys-status .sys-dot { width:7px; height:7px; border-radius:50%; flex:none; background:#1d9a53;
    box-shadow:0 0 0 3px rgba(29,154,83,.18); }
  /* Rebrand: nav group HEADERS read as section labels — mono uppercase, muted; the leading icon + chevron stay. */
  .nav .nav-top { margin-bottom:2px; }
  .nav .nav-group > span:not(.caret) { font:600 11px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:#7e889f; }
  .nav .nav-group:hover > span:not(.caret) { color:#aab3c9; }
  .nav .nav-group svg { opacity:.5; }
  /* Rebrand: <a> tool link inside a nav-sub styled exactly like the sibling buttons (API documentation). */
  .nav-sub a.nav-link { display:flex; align-items:center; gap:11px; width:100%; padding:8px 11px; font-size:13px;
    text-decoration:none; color:var(--sidebar-fg); border-radius:10px; transition:background .12s, color .12s; }
  .nav-sub a.nav-link svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; opacity:.78; }
  .nav-sub a.nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
  .nav-sub a.nav-link:hover svg { opacity:1; }
  /* Rebrand: live pending-approvals badge — accent pill, mono numerals. Hidden until a count is set. */
  /* `flex:0 0 auto` (with specificity to beat `.nav button > span { flex:1 }`) so the badge keeps its size
     and the "Approvals" label no longer gets squeezed into an ellipsis. */
  .nav button > span.nav-badge { flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent);
    color:#fff; font:600 10.5px var(--font-mono); display:inline-flex; align-items:center; justify-content:center; overflow:visible; }
  .nav button > span.nav-badge.hidden { display:none; }   /* must out-specify the badge's display:inline-flex above */
  /* Footer utility links under the brand — Manual conversion + API documentation (not primary nav items).
     Works for both <button> (SPA view) and <a> (API documentation opens /docs in a new tab). */
  .foot-tools { margin-top:10px; }
  .foot-tools .foot-link { display:flex; align-items:center; width:auto; margin:0; padding:5px 8px; gap:7px; font:inherit;
    font-size:11.5px; font-weight:500; text-align:left; text-decoration:none; background:transparent; border:0; cursor:pointer;
    color:var(--sidebar-fg); opacity:.55; border-radius:6px; transition:background .12s, color .12s, opacity .12s; }
  .foot-tools .foot-link svg { width:13px; height:13px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.85;
    stroke-linecap:round; stroke-linejoin:round; opacity:1; }
  .foot-tools .foot-link > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .foot-tools .foot-link:hover { opacity:1; background:transparent; color:#fff; }
  .foot-tools .foot-link.active { background:transparent; opacity:1; color:#fff; font-weight:500; }
  .foot-tools .foot-link.active::before { display:none; }
  .main { flex:1; min-width:0; display:flex; flex-direction:column; }
  /* Pilot TEST/SANDBOX banner — an amber caution strip (not the red error palette): unmissable, full-width,
     sticky so it stays in view on scroll, but thin so it isn't obtrusive. */
  .sandbox-banner { display:flex; align-items:center; gap:9px; padding:7px 18px; font-size:13px; font-weight:550;
    color:#92400e; background:#fef3c7; border-bottom:1px solid #f59e0b; position:sticky; top:0; z-index:20; }
  .sandbox-banner strong { font-weight:750; }
  .sandbox-dot { width:8px; height:8px; border-radius:50%; background:#d97706; flex-shrink:0; box-shadow:0 0 0 3px rgba(217,119,6,.2); }
  /* Demo/scenario control on a demo-channel connection — amber sandbox accent so it can't be mistaken for real setup. */
  .bk-demo-panel { border-color:#f59e0b; background:#fffbeb; }
  .bk-demo-panel h3 { display:flex; align-items:center; gap:8px; }
  .topbar { position:relative; height:62px; background:var(--card); border-bottom:1px solid var(--line);
            display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
  .topbar-left { display:flex; align-items:baseline; gap:12px; }
  .page-title { margin:0; font-size:18px; font-weight:var(--fw-semi); letter-spacing:-.01em; color:var(--fg); }
  .topbar-date { font-size:12.5px; color:var(--muted); }   /* rebrand: date beside the page title */
  .topbar-sub { font-size:13px; color:var(--muted); font-weight:500; }  /* bank-detail header: channel onboarding label */
  .topbar-company { display:none; }
  .topbar-right { display:flex; align-items:center; gap:12px; font-size:13px; }
  .btn-primary-sm { width:auto; margin:0; padding:9px 16px; border-radius:10px; background:var(--primary); color:#fff;
                    font-weight:650; font-size:13px; box-shadow:0 2px 10px rgba(30,58,95,.28); }
  .btn-primary-sm:hover { background:var(--primary-hover); }
  .who { color:var(--fg); font-weight:600; }
  .menu-wrap { position:relative; }
  .menu { display:none; position:absolute; right:0; top:120%; z-index:30; background:#fff; border:1px solid var(--line);
          border-radius:10px; box-shadow:0 10px 30px rgba(16,23,40,.12); padding:6px; min-width:170px; }
  .menu.open { display:block; }
  .menu button { width:100%; margin:0; text-align:left; background:#fff; color:var(--fg); font-weight:500; padding:9px 11px; border-radius:7px; }
  .menu button:hover { background:var(--accent-soft); color:var(--accent); }
  .who .role { color:var(--muted); font-weight:500; margin-left:6px; }
  /* Rebrand topbar user-chip: round initials avatar + name/role stack + caret (opens the settings menu). */
  .user-chip { display:flex; align-items:center; gap:10px; cursor:pointer; background:transparent; border:0; margin:0; padding:4px 6px; border-radius:10px; transition:background .12s; }
  .user-chip:hover { background:var(--primary-soft); }
  .user-avatar { width:32px; height:32px; border-radius:50%; flex:none; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font:600 12px var(--font); letter-spacing:.02em; }
  .user-id { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; font-size:13px; font-weight:600; color:var(--fg); }
  .user-id .role { color:var(--muted); font:11px var(--font-mono); font-weight:400; margin:0; text-transform:none; }
  .user-caret { color:#b5bcc9; flex:none; }
  .menu-div { height:1px; background:var(--line); margin:5px 4px; }
  /* Left-align the content next to the sidebar (was margin-inline:auto, which floated it to the centre of a
     wide screen and left a big gap beside the menu). Matches the design's tight menu-to-content spacing. */
  .content { padding:28px; max-width:1180px; width:100%; margin-inline:0; }

  /* ── Cards + typography (GUI refresh: generous padding + ONE hairline + no heavy shadow — the card is the
        primary grouping; chrome leans on the hairline, not a shadow) ── */
  .card { background:var(--card); border:var(--hairline); border-radius:var(--radius);
          box-shadow:none; padding:var(--sp-6); }
  .feat { font-size:var(--ts-sm); color:var(--muted); margin:var(--sp-1) 0 var(--sp-4); }
  .hint { color:var(--muted); font-size:12.5px; margin-top:8px; }
  code { background:var(--primary-soft); color:var(--fg); padding:1px 6px; border-radius:5px; font-size:12.5px; }

  /* ── Forms ── */
  label { display:block; font-weight:600; margin:16px 0 6px; font-size:13px; }
  label:first-child { margin-top:0; }
  /* Style inputs by EXCLUSION, not by an allowlist of types — so email/tel/url/date/search and
     any future input type are styled automatically. An allowlist silently misses new types, which
     is exactly how the login email field ended up an unstyled square. Only non-text controls opt out. */
  select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]) {
         width:100%; padding:11px 14px; background:#f6f6f7; color:var(--fg);
         border:1.5px solid transparent; border-radius:var(--radius); font:inherit; font-size:var(--ts-base); outline:none;
         transition:background .15s, border-color .15s, box-shadow .15s; }
  select:hover, input:hover, textarea:hover { background-color:#f1f3f8; }
  select:focus, input:focus, textarea:focus { background-color:#fff; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
  /* Invalid field — red border + ring; pair with a `.field-err` message below the input. */
  select[aria-invalid="true"], input[aria-invalid="true"], textarea[aria-invalid="true"], .input-error {
    border-color:var(--danger); background:#fff; }
  select[aria-invalid="true"]:focus, input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus, .input-error:focus {
    box-shadow:0 0 0 4px var(--danger-soft); }
  .field-err { color:var(--danger); font-size:12px; font-weight:500; margin-top:5px; }
  /* Dropdown chevron drawn with CSS gradients (NOT a data: URL) so it survives the hardened
     CSP `img-src 'self'` — a data-URI background-image would be blocked. */
  select { appearance:none; -webkit-appearance:none; padding-right:36px;
    background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:calc(100% - 18px) calc(50% - 1px), calc(100% - 13px) calc(50% - 1px);
    background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
  textarea { font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; }
  /* Design-system checkbox + brand-tinted radios (used app-wide). CSP-safe (pure CSS). */
  input[type=radio] { accent-color:var(--primary); cursor:pointer; }
  input[type=checkbox] { appearance:none; -webkit-appearance:none; width:18px; height:18px; flex-shrink:0; margin:0; vertical-align:middle;
    border:1.5px solid var(--line); border-radius:5px; background:#fff; cursor:pointer; position:relative; transition:background .12s, border-color .12s; }
  input[type=checkbox]:hover { border-color:var(--primary); }
  input[type=checkbox]:checked { background:var(--primary); border-color:var(--primary); }
  input[type=checkbox]:checked::after { content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
  input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  input[type=checkbox]:disabled { opacity:.5; cursor:not-allowed; }
  /* Equal-width template chooser (3 cards, never an oversized lone card) */
  .tmpl-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; align-items:stretch; }
  .tmpl-grid .bank-card { display:flex; flex-direction:column; height:100%; }
  /* Reset the global <label> margin (these cards are labels) so all three align —
     otherwise label:first-child zeroes only the first card's top margin. Radio sits
     in the corner (out of the text flow) for a clean, equal-sized card. */
  .tmpl-card { position:relative; padding-right:36px; margin:0; }
  .tmpl-card .tmpl-radio { position:absolute; top:14px; right:14px; margin:0; width:16px; height:16px; }
  /* "Recommended" ribbon on the suggested model card */
  .tmpl-badge { display:inline-block; align-self:flex-start; margin-bottom:6px; padding:2px 8px; border-radius:999px;
         font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
         color:var(--accent-ink); background:var(--accent-soft); }
  .tmpl-card.selected .tmpl-badge { background:#fff; }
  /* User look-up picker (replaces typing user IDs) */
  .user-picker { display:flex; flex-direction:column; gap:2px; max-height:190px; overflow:auto;
         border:1.5px solid var(--line); border-radius:12px; padding:6px; background:#fff; }
  .upick { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; margin:0; font-weight:400; cursor:pointer; }
  .upick:hover { background:var(--accent-soft); }
  /* Selected approver row reads like the reference's selected list item (tint + navy left bar). */
  .upick:has(input:checked) { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--primary); }
  .upick input { margin:0; }
  .upick .meta { color:var(--muted); font-size:12px; }
  .check { display:flex; align-items:center; gap:8px; margin-top:14px; font-weight:400; font-size:13px; }
  /* (The global input width:100% rule already excludes checkbox/radio, so the custom
     18px box must NOT be overridden back to width:auto here — that collapsed it to a line.) */
  .row { display:flex; gap:12px; }
  .row > div { flex:1; }

  /* ── Buttons ──
     Default = an inline, content-width primary button (modern platforms size buttons to
     their label, not the container). Full-width is opt-in: the narrow auth cards keep it,
     and `.btn-block` is available where a stretched button is genuinely wanted. The form
     action rows (.actions) lay primary+secondary buttons out as a left-aligned group. */
  button { margin-top:18px; width:auto; padding:10px 18px; border:0; border-radius:10px; cursor:pointer;
           display:inline-flex; align-items:center; justify-content:center; gap:7px; vertical-align:middle;
           background:var(--primary); color:#fff; font:inherit; font-weight:600; font-size:13.5px;
           transition:background .15s ease, transform .08s ease, box-shadow .15s ease; }
  button:hover { background:var(--primary-hover); }
  button:active { transform:translateY(1px); }
  button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  button:disabled { opacity:.55; cursor:default; }
  button:disabled:active { transform:none; }
  button.secondary { background:#fff; color:var(--primary); border:1px solid var(--line);font-weight:600; }
  button.secondary:hover { background:var(--primary-soft); border-color:#dcdcdc; }
  /* Destructive actions read as red (filled or outline). */
  button.danger { background:var(--danger); color:#fff; }
  button.danger:hover { background:var(--danger-hover); }
  button.danger-outline { background:#fff; color:var(--danger); border:1px solid #f3c0c2; }
  button.danger-outline:hover { background:var(--danger-soft); }
  button.small { margin-top:10px; padding:7px 13px; font-size:12.5px; }
  button.btn-block, .btn-block { width:100%; }
  /* Auth cards (login / set-password) keep a full-width primary CTA — it reads right in a
     narrow centred card. Ghost/small buttons inside them stay content-width. */
  /* …including the primary CTA inside the auth <form> wrappers (R3-U7) — match both depths. */
  .login-card > button:not(.small):not(.btn-ghost),
  .login-card > form > button:not(.small):not(.btn-ghost) { width:100%; }
  /* Left-aligned action row for form submits (primary + secondary together). */
  .actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
  .actions button, .actions a.btn { margin-top:0; }
  /* Anchor styled as a button (e.g. "Open in mail client") — button.* rules only match <button>,
     so an <a class="btn secondary small"> needs its own chrome to match the buttons beside it. */
  a.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box;
    text-decoration:none; border-radius:10px; cursor:pointer; font:inherit; font-weight:600; font-size:13.5px; line-height:1;
    padding:10px 18px; background:var(--primary); color:#fff; transition:background .12s; }
  a.btn:hover { background:var(--primary-hover); }
  a.btn.secondary { background:#fff; color:var(--primary); border:1px solid var(--line);}
  a.btn.secondary:hover { background:var(--primary-soft); border-color:#dcdcdc; }
  a.btn.small { padding:7px 13px; font-size:12.5px; }
  .btn-ghost { width:auto; margin:0; padding:7px 13px; background:#fff; color:var(--fg);
               border:1px solid var(--line); font-size:12.5px; font-weight:600; }
  .btn-ghost:hover { background:var(--bg); }
  /* Keyboard focus rings on the navigation/menu/link/tab controls that previously had none. */
  .nav button:focus-visible, .nav-sub button:focus-visible, .side-tools button:focus-visible,
  .menu button:focus-visible, .tab:focus-visible, .tabs .tab:focus-visible, a.btn:focus-visible,
  .company:focus-visible, .bk-pin:focus-visible, .wiz-dot:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px; }
  .nav button:focus-visible { outline-color:rgba(255,255,255,.6); }

  /* Respect reduced-motion: neutralise spinners, pulses, slides, and transitions. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  /* ── Messages ── */
  .msg { margin-top:16px; padding:11px 13px; border-radius:8px; display:none; white-space:pre-wrap; font-size:13px; }
  .msg.ok  { background:#ecfdf3; border:1px solid #abefc6; color:#067647; display:block; }
  .msg.err { background:#fef3f2; border:1px solid #fecdca; color:#b42318; display:block; }
  .msg.warn{ background:#fffaeb; border:1px solid #fedf89; color:#b54708; display:block; }

  pre { max-height:320px; overflow:auto; background:#0f1728; color:#d7def0; border:1px solid var(--line);
        border-radius:8px; padding:13px; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:14px;
        white-space:pre-wrap; word-break:break-all; }

  /* ── Sub-tabs (within views) — GUI refresh: a thin underline on the active tab (Stripe style), not boxed. ── */
  .tab { background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0;
         padding:var(--sp-2) var(--sp-3); cursor:pointer; font:inherit; font-size:var(--ts-sm); font-weight:var(--fw-med); margin:0; width:auto; transition:color .12s, border-color .12s; }
  .tab:hover { color:var(--fg); }
  .tab.active { color:var(--fg); border-bottom-color:var(--fg); background:none; }

  .view { display:none; }
  .view.active { display:block; }

  /* ── Setup steps ── */
  .step { border:1px solid var(--line); border-radius:10px; padding:15px; margin-top:12px; background:#fff; }
  .step.done { border-color:#abefc6; background:#fcfefd; }
  .step .state { float:right; font-size:12px; color:var(--muted); font-weight:600; }
  .step.done .state { color:var(--ok); }

  /* ── Pills ── */
  /* Subtle status indicators: one neutral pill + a small colored status dot (keeps the
     semantics, drops the loud colored fills). */
  /* rebrand: per-state soft-tint background + ink text + a 6px dot, set in IBM Plex Mono.
     The app's pill classes (file/h2h/good/bad/info/warn) map onto the lifecycle palette. */
  .pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
          font:600 11px var(--font-mono); letter-spacing:.02em; white-space:nowrap;
          background:#eef0f4; color:#4a5470; }
  .pill::before { content:""; width:6px; height:6px; border-radius:50%; flex:none; background:#6b7590; }
  /* Imported / neutral → slate */
  .pill.file { background:#eef0f4; color:#4a5470; }
  .pill.file::before { background:#6b7590; }
  /* Converted → indigo accent */
  .pill.info { background:#edecfb; color:#4035a8; }
  .pill.info::before { background:#5247d6; }
  /* Sent / in-delivery (host-to-host) → blue */
  .pill.h2h { background:#e7eefe; color:#1f4fb0; }
  .pill.h2h::before { background:#2f6ae0; }
  /* Executed / success → green */
  .pill.good { background:#e6f3ea; color:#15703c; }
  .pill.good::before { background:#1d9a53; }
  /* Rejected / error → red */
  .pill.bad { background:#fbece9; color:#b3322b; }
  .pill.bad::before { background:#d24a3f; }
  /* Warning → amber */
  .pill.warn { background:var(--warn-soft); color:var(--warn); }
  .pill.warn::before { background:var(--warn); }
  /* Lifecycle pills (rebrand dashboard): one class per payment stage, exact handoff palette. */
  .pill.lc-imported  { background:#eef0f4; color:#4a5470; } .pill.lc-imported::before  { background:#6b7590; }
  .pill.lc-converted { background:var(--accent-soft); color:var(--accent-ink); } .pill.lc-converted::before { background:var(--accent); }
  .pill.lc-sent      { background:#e7eefe; color:#1f4fb0; } .pill.lc-sent::before      { background:#2f6ae0; }
  .pill.lc-validated { background:#e2f2f1; color:#0d6b6e; } .pill.lc-validated::before { background:#119a9e; }
  .pill.lc-executed  { background:#e6f3ea; color:#15703c; } .pill.lc-executed::before  { background:#1d9a53; }
  .pill.lc-rejected  { background:#fbece9; color:#b3322b; } .pill.lc-rejected::before  { background:#d24a3f; }
  .pill.lc-partial   { background:var(--warn-soft); color:var(--warn); } .pill.lc-partial::before   { background:var(--warn); }

  /* ── Rebrand Home dashboard (2026-06-22): KPI row · pipeline · recent/approvals/connections · cash ── */
  .mono { font-family:var(--font-mono); }
  .ml-auto { margin-left:auto; }
  .hm-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .hm-card-head-l { display:flex; align-items:baseline; gap:12px; }
  .hm-card-head h2 { margin:0; font-size:14px; font-weight:var(--fw-semi); letter-spacing:-.01em; color:var(--fg); }
  .hm-card-meta { font-size:12px; color:var(--muted); }
  .hint.pad { padding:18px; }

  .hm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
  .kpi { background:var(--card); border:var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); padding:17px 18px; display:flex; flex-direction:column; gap:9px; }
  .kpi-label { font:500 10.5px var(--font-mono); letter-spacing:.1em; color:var(--muted); }
  .kpi-val { font-size:29px; font-weight:var(--fw-semi); letter-spacing:-.02em; color:var(--fg); line-height:1; }
  .kpi-sub { font-size:12px; color:var(--muted); }
  .kpi-strong { color:var(--fg); font-weight:500; }
  .kpi-warn { color:var(--warn); }
  .kpi-dim { color:var(--muted); opacity:.8; }
  .kpi-delta { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--muted); }
  .kpi-delta.up { color:var(--ok); } .kpi-delta.down { color:var(--danger); }

  .hm-pipe-card { margin-bottom:18px; }
  .hm-pipe { display:flex; align-items:stretch; gap:0; }
  .pipe-stage { flex:1; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
  .pipe-n { font-size:23px; font-weight:var(--fw-semi); color:var(--fg); }
  .pipe-arrow { flex:none; width:30px; display:flex; align-items:center; justify-content:center; color:#cbd0db; font-size:14px; padding-top:6px; }
  .hm-pipe-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .pipe-rej-n { font-size:13px; font-weight:var(--fw-semi); color:var(--fg); }
  .hm-pipe-note { font-size:12.5px; color:var(--muted); }

  .hm-dash-2col { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; margin-bottom:18px; }
  .hm-dash-col { display:flex; flex-direction:column; gap:16px; }

  .hm-rp-card { padding:0; overflow:hidden; }
  .hm-rp-card .hm-card-head { padding:16px 18px 14px; margin:0; border-bottom:1px solid var(--line); }
  .rp-table { width:100%; border-collapse:collapse; font-size:13px; }
  .rp-table th { padding:9px 14px; font:500 10.5px var(--font-mono); letter-spacing:.08em; color:var(--muted); background:#fafbfc; border-bottom:1px solid var(--line); text-align:left; }
  .rp-table th.ta-r { text-align:right; }
  .rp-table td { padding:12px 14px; border-bottom:1px solid #f1f2f5; vertical-align:middle; }
  .rp-table tbody tr:last-child td { border-bottom:0; }
  .rp-table tbody tr[data-go] { cursor:pointer; }
  .rp-table tbody tr[data-go]:hover { background:#fafbff; }
  .rp-ref { color:var(--accent-ink); font-weight:500; font-size:12.5px; }
  .rp-cp { font-weight:500; color:var(--fg); }
  .rp-bank { font-size:11.5px; color:var(--muted); }
  .rp-amt { text-align:right; font-weight:500; color:var(--fg); }

  .appr-count { background:var(--accent-soft); color:var(--accent-ink); font:600 11px var(--font-mono); padding:1px 8px; border-radius:999px; }
  .appr-item { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .appr-meta { min-width:0; }
  .appr-name { font-size:12.5px; font-weight:500; color:var(--fg); }
  .appr-sub { font-size:11.5px; color:var(--muted); }
  .appr-div { height:1px; background:#f1f2f5; margin:11px 0; }
  .appr-btn { flex:none; height:28px; padding:0 12px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:var(--radius-sm); font:600 12px var(--font); cursor:pointer; }
  .appr-btn:hover:not(:disabled) { background:var(--accent-hover); }
  .appr-btn:disabled { opacity:.6; cursor:default; }
  .appr-all { display:inline-block; margin-top:14px; }

  .conn-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; }
  .conn-row + .conn-row { border-top:1px solid #f4f5f8; }
  .conn-name { font-size:13px; color:var(--fg); }
  .conn-status { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; }
  .conn-status.is-ok { color:var(--ok); } .conn-status.is-warn { color:var(--warn); }
  .conn-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

  .hm-cash-card .cash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .cash-tile { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; display:flex; flex-direction:column; gap:8px; }
  .cash-tile:hover { border-color:#dadfe8; }
  .cash-ccy { display:flex; align-items:baseline; gap:6px; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted); }
  .cash-sym { font-size:14px; color:var(--fg); font-weight:600; }
  .cash-amt { font-size:19px; font-weight:var(--fw-semi); letter-spacing:-.02em; color:var(--fg); }
  .cash-sub { font-size:11px; color:var(--muted); }
  /* Indicative blended total (FX base currency) — right side of the cash-overview head. */
  .hm-card-head-r { text-align:right; }
  .cash-total { display:inline-flex; align-items:baseline; gap:4px; font-size:18px; font-weight:var(--fw-semi); letter-spacing:-.02em; color:var(--fg); }
  .cash-total .cash-sym { font-size:14px; }
  .cash-total-sub { font-size:10.5px; color:var(--muted); margin-top:1px; }

  @media (max-width:880px) {
    .hm-kpis { grid-template-columns:repeat(2,1fr); }
    .hm-dash-2col { grid-template-columns:1fr; }
    .hm-pipe { flex-wrap:wrap; gap:10px; } .pipe-arrow { display:none; } .pipe-stage { flex:1 1 40%; }
  }

  /* ── Drag & drop ── */
  .dropzone { border:2px dashed #d3d7df; border-radius:10px; padding:24px 18px; text-align:center;
              color:var(--muted); cursor:pointer; transition:border-color .12s, background .12s; font-size:13px; }
  .dropzone:hover { border-color:var(--accent); color:var(--accent); }
  .dropzone.drag { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
  .dropzone .dz-file { color:var(--fg); font-weight:600; margin-top:8px; font-size:13px; }

  /* ── Table ── */
  /* Borderless "data-floating" tables (XTendLink reference): no vertical lines, only
     ultra-subtle row hairlines, airy padding, calm non-uppercase headers, neutral hover. */
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--muted);
       font-size:12px; font-weight:600; }
  td { padding:14px 14px; border-bottom:1px solid var(--line); }
  tbody tr { transition:background .12s ease; }
  tbody tr:hover { background:#f8f8f9; }
  /* Currency as a soft neutral pill (reference's EUR badge). */
  .ccy-pill { display:inline-block; padding:2px 9px; border-radius:6px; background:var(--primary-soft);
              color:var(--fg); font-size:11.5px; font-weight:600; letter-spacing:.01em; }
  tr:last-child td { border-bottom:0; }

  /* ── Empty states — centered, calm, with a soft glyph instead of a left-hugging line ── */
  .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
                 padding:40px 24px; color:var(--muted); }
  /* GUI refresh: a NEUTRAL empty-state icon (calm/restrained — blue is reserved for links/active/CTA/focus). */
  .empty-state .es-ico { width:46px; height:46px; border-radius:12px; background:var(--primary-soft); color:var(--muted);
                 display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .empty-state .es-ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .empty-state .es-title { font-weight:650; color:var(--fg); font-size:14px; margin-bottom:3px; }
  .empty-state .es-sub { font-size:12.5px; max-width:320px; line-height:1.5; }
  /* ── Approvals queue — amounts read like money: weighted, dark, tabular, never wrapping ── */
  .ap-amt { font-weight:600; color:var(--fg); white-space:nowrap; }
  /* ── Supported Banks ── */
  .bank-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
  .bank-card { position:relative; border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; background:#fff; transition:border-color .12s, box-shadow .12s; }
  .bank-card:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .bank-card.selected { border-color:var(--accent); background:var(--accent-soft); }
  .bk-pin { position:absolute; top:7px; right:7px; width:18px; height:18px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:5px; background:#fff; cursor:pointer; font-size:11px; line-height:1; padding:0;
    color:transparent; opacity:0; transition:opacity .12s, color .12s, background .12s, border-color .12s; }
  .bank-card:hover .bk-pin, .bk-pin:focus-visible { opacity:1; color:var(--muted); }
  .bk-pin:hover { border-color:var(--accent); color:var(--accent); }
  .bk-pin.on { opacity:1; background:var(--accent); border-color:var(--accent); color:#fff; }
  .bank-card h4 { margin:0 0 3px; font-size:14px; }
  .bank-card .meta { color:var(--muted); font-size:12px; }
  .chan-badge { display:inline-block; font-size:11px; padding:1px 8px; border-radius:20px; border:1px solid var(--line); margin-top:8px; margin-right:4px; }
  .chan-badge.ws { background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
  .chan-badge.sftp { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
  .chan-badge.ebics { background:#fef3c7; color:#92400e; border-color:#fde68a; }
  .chan-badge.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
  .chan-badge.live { background:#ecfdf3; color:#067647; border-color:#abefc6; font-weight:650; }
  .chan-badge.danger { background:var(--danger-soft); color:var(--danger); border-color:#f3c0c2; font-weight:650; }
  /* F4: approval policy "revision required" (deactivated approver dropped quorum) — amber warn strip. */
  .ap-revision-banner { padding:11px 14px; background:var(--warn-soft); border:1px solid #f1e3c6; border-radius:var(--radius-sm); font-size:12.5px; color:#8a5a12; line-height:1.5; }
  .field-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; align-items:start; }
  /* EBICS "Enter details" — a fixed 2×2 grid (design), not the auto-fit single row. */
  .eb-fields-2col { grid-template-columns:1fr 1fr; gap:16px; }
  /* SFTP/EBICS wizard card intro head ("Set up … connection"). */
  .bk-wiz-head { margin-bottom:16px; } .bk-wiz-head .feat { max-width:680px; }
  /* The stepper sits on a tinted band bordered top + bottom inside the wizard card (design). */
  .bk-wizard bc-stepper { display:block; margin:0 0 20px; padding:18px 22px; background:#fafbfc; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  /* SFTP "Bank's reply" — Host / Port / SFTP username row, then Upload / Download row (design). */
  .sftp-srv-row1 { display:grid; grid-template-columns:2fr 0.7fr 1.4fr; gap:14px; }
  .sftp-srv-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
  .sftp-srv-row1 > div, .sftp-srv-row2 > div { display:flex; flex-direction:column; }
  /* ── SFTP wizard: Upload filename pattern + Test connection (design handoff 2026-06-29) ──────────────────────
     Exact tokens/colors/spacing/typography from the handoff. Accent uses the app's theme tokens (--accent /
     --accent-soft) so the Navy/Violet/Teal re-skin still applies; fixed neutrals/success/error are literal per
     the spec. Fonts are the app's already-loaded IBM Plex Sans (--font) / IBM Plex Mono (--font-mono). */
  .sftp-fn { margin-top:16px; }
  .sftp-fn-label { display:block; font:600 12px var(--font); color:#3f485c; margin-bottom:6px; }
  .sftp-fn-help { margin:0 0 8px; font:12px/1.5 var(--font); color:#616b80; }
  .sftp-fn-input { width:100%; height:36px; padding:0 11px; border:1px solid #e6e8ee; border-radius:6px;
    background:#fff; font:12.5px var(--font-mono); color:#131a2b; box-sizing:border-box; outline:none; }
  .sftp-fn-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .sftp-fn-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
  .sftp-fn-chip { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 10px;
    border:1px solid #e0e3ea; background:#f6f7f9; border-radius:999px; cursor:pointer; }
  .sftp-fn--test .sftp-fn-chip { background:#fff; }
  .sftp-fn-chip:hover { border-color:var(--accent); background:var(--accent-soft); }
  .sftp-fn-chip-plus { width:10px; height:10px; stroke:var(--accent); stroke-width:2.6; fill:none; flex:none; }
  .sftp-fn-chip-label { font:600 11.5px var(--font); color:#39414f; }
  .sftp-fn-chip-tok { font:10.5px var(--font-mono); color:#8a93a6; }
  .sftp-fn-hint { margin-top:7px; font:10.5px var(--font); color:#9aa1b0; }
  .sftp-fn-hint-mono { color:#6b7488; }
  .sftp-fn-preview { display:flex; align-items:center; gap:10px; margin-top:11px; padding:9px 12px;
    background:#fafbfc; border:1px solid #eef0f3; border-radius:6px; }
  .sftp-fn--test .sftp-fn-preview { background:#fff; }
  .sftp-fn-preview-tag { font:600 10px var(--font-mono); letter-spacing:.07em; color:#8a93a6; flex:none; }
  .sftp-fn-preview-val { font:12.5px var(--font-mono); color:#131a2b; word-break:break-all; }
  .sftp-test-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
  .sftp-test-row--test { margin-top:14px; }
  .sftp-test-btn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
    border:1px solid #e6e8ee; background:#fff; color:#131a2b; border-radius:6px; font:600 13px var(--font); cursor:pointer; }
  .sftp-test-btn:hover { background:#f6f7f9; border-color:#dadfe8; }
  .sftp-test-btn[disabled] { cursor:default; opacity:.85; }
  .sftp-test-ico { width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; }
  .sftp-test-btn.is-testing .sftp-test-ico { animation:sftp-pulse 1s ease-in-out infinite; }
  @keyframes sftp-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
  .sftp-test-pill { display:inline-flex; align-items:center; gap:7px; font:600 12.5px var(--font);
    border-radius:999px; padding:6px 13px; }
  .sftp-test-pill--ok { color:#15703c; background:#eef8f1; }
  .sftp-test-pill--fail { color:#b3261e; background:#fcf0ef; }
  /* SFTP Approvals — read-only governance card; Hand-off accent bullets. */
  .bk-gov-card { border:1px solid var(--line); border-radius:8px; padding:14px 16px; background:#fafbfc; }
  .bk-gov-card .op-cellsub { margin-bottom:0; }
  .bk-gov-link { font-size:13px; font-weight:500; color:var(--accent); text-decoration:none; }
  .bk-gov-link:hover { text-decoration:underline; }
  .wiz-bullets li::marker { color:var(--accent); }
  /* Test-payment cards are non-interactive (every type is sent) — no pointer affordance. */
  .bk-tp-cards-ro .bk-tp-card { cursor:default; }
  /* Operator console — KPI strip (design §Operator). */
  .ops-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 18px; }
  .ops-kpis:empty { display:none; }
  .ops-kpi { border:var(--hairline); border-radius:var(--radius); padding:14px 16px; background:var(--card); }
  .ops-kpi-label { font-size:10.5px; letter-spacing:.09em; color:var(--muted); text-transform:uppercase; }
  .ops-kpi-val { font-size:24px; font-weight:600; letter-spacing:-.01em; color:var(--fg); margin-top:8px; font-variant-numeric:tabular-nums; }
  .ops-kpi-sub { font-size:12px; color:var(--muted); margin-top:4px; }
  .ops-kpi-sub.ops-kpi-ok { color:#15703c; }
  .ops-kpi-sub.ops-kpi-warn { color:var(--warn); }
  .ops-kpi-sub.ops-kpi-bad { color:var(--danger); }
  @media (max-width:760px){ .ops-kpis { grid-template-columns:repeat(2,1fr); } }
  /* Operator platform roster (design §Operator) */
  .ops-roster-cap { font-size:10.5px; letter-spacing:.09em; color:var(--muted); margin:0 0 8px; }
  .ops-roster { border:var(--hairline); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; background:var(--card); }
  .ops-roster-row { display:grid; grid-template-columns:1.6fr .9fr .9fr .9fr 24px; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--line); }
  .ops-roster-row:first-child { border-top:none; }
  .ops-roster-head { background:#fafbfc; color:var(--muted); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding-top:10px; padding-bottom:10px; }
  .ops-roster-head .num, .ops-roster-row .num { text-align:right; }
  .ops-roster-row:not(.ops-roster-head) { cursor:default; }
  .ops-roster-row:not(.ops-roster-head):hover { background:#fafbff; }
  .ops-roster-name { display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:500; color:var(--fg); min-width:0; }
  .ops-roster-av { width:30px; height:30px; border-radius:7px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; flex:none; }
  .ops-roster-row .num.mono { font-variant-numeric:tabular-nums; color:var(--fg); }
  .ops-roster-chev { color:#c2c7d2; font-size:18px; text-align:center; }
  /* Operator console — job-queue stat tiles. */
  .stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .stat { border:1px solid var(--line); border-radius:10px; padding:14px; background:#fff; text-align:center; }
  .stat-num { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--fg); font-variant-numeric:tabular-nums; }
  .stat-label { font-size:12px; color:var(--muted); margin-top:2px; text-transform:capitalize; }
  /* Each field is a flex column; reserve a consistent label height so 1- and 2-line labels align
     their inputs, with helper text below the input. */
  .field-grid > div { display:flex; flex-direction:column; }
  .field-grid > div > label { min-height:32px; display:flex; align-items:flex-end; margin:0 0 4px; line-height:1.3; }
  .full-width-field { grid-column: 1 / -1; }
  /* CTA buttons inside a field-grid card shouldn't stretch to the column width (the flex
     column would otherwise full-width them); keep them content-width + left-aligned. */
  .field-grid > div > button { align-self:flex-start; }
  /* Bank-detail: flatten the nested section cards into divider-separated sections (less chrome). */
  #bk-detail > .step { border:0; border-radius:0; background:transparent; padding:20px 0; margin-top:0; border-top:1px solid var(--line); }
  #bk-detail > .step:first-of-type { border-top:0; padding-top:4px; }
  /* WS "Setup Bank Channel" instructions — neutral gray, not the lavender tint (design: Bank Setup.dc.html). */
  .req-box { background:#f6f7f9; border:1px solid #eef0f3; border-radius:6px; padding:11px 13px; font-size:13px; color:#616b80; line-height:1.5; margin:6px 0 14px; }
  /* WS credential form — a single vertical column of full-width fields (NOT a multi-column grid). */
  .bk-ws-fields { display:flex; flex-direction:column; gap:18px; margin:6px 0 18px; }
  .bk-ws-fields > div { display:flex; flex-direction:column; }
  .bk-ws-fields > div > label { margin:0 0 6px; font-size:12px; font-weight:600; color:#3f485c; min-height:0; }
  /* Match-and-exceed the global `input:not([type=checkbox])…` (0,3,1) specificity so the white/bordered field wins. */
  .bk-ws-fields input:not([type=checkbox]):not([type=radio]):not([type=range]) { width:100%; height:36px; padding:0 11px; background:#fff; border:1px solid #e6e8ee; border-radius:6px; font-size:13px; color:var(--fg); }
  .bk-ws-fields input:not([type=checkbox]):not([type=radio]):not([type=range]):focus { background:#fff; border-color:#5247d6; box-shadow:0 0 0 3px #edecfb; }
  .bk-ws-fields > div > .hint { margin-top:4px; font-size:11px; color:#8a93a6; }
  .bk-ws-activate { background:#18233f; height:40px; padding:0 20px; border-radius:6px; color:#fff; font-size:13px; font-weight:600; }
  .bk-ws-activate:hover { background:#222e4d; }
  .tip { position:relative; display:inline-flex; align-items:center; cursor:help; color:var(--accent); font-size:12px; margin-left:6px; }
  .tip .tip-mark { border:1px solid var(--accent); border-radius:50%; width:15px; height:15px; line-height:14px; text-align:center; font-size:11px; }
  .tip .tip-body { display:none; position:absolute; z-index:20; left:0; top:150%; width:300px; background:#111827; color:#f9fafb; font-size:12px; line-height:1.45; padding:10px 12px; border-radius:8px; font-weight:400; box-shadow:0 6px 20px rgba(0,0,0,.25); }
  .tip:hover .tip-body, .tip:focus .tip-body { display:block; }
  /* ── Host-to-host setup wizard (SFTP) ── */
  .bk-wizard { margin-top:6px; }
  /* The wizard progress bar is now the <bc-stepper> Lit component (see the .bcs-* block near the end
     of this file); the former .wiz-steps/.wiz-step/.wiz-dot/.wiz-line bar was removed with that swap. */
  .wiz-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
  .wiz-phase { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); }
  .wiz-count { font-size:12px; color:var(--muted); }
  .wiz-screen { border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 18px 20px; background:#fff; }
  .wiz-title { font-size:16px; margin:0 0 6px; }
  .wiz-intro { color:var(--fg); font-size:13.5px; line-height:1.55; margin:0 0 12px; }
  .wiz-bullets { margin:0 0 4px; padding-left:18px; color:#46506a; font-size:13px; line-height:1.7; }
  .wiz-bullets li { margin:2px 0; }
  /* Step widgets sit flush inside a wizard screen (no nested card chrome) … */
  .wiz-screen .step { border:0; padding:0; margin-top:16px; background:transparent; }
  .wiz-screen .step:first-of-type { margin-top:6px; }
  .wiz-screen .step > h3 { margin-bottom:6px; }
  /* … except the action steps (activate / test payment), kept as subtle sub-cards. */
  .wiz-screen .step.sel, .wiz-screen .step.sel-soft { border:1px solid var(--line); border-radius:10px; padding:14px; background:#fbfcfe; }
  .wiz-screen .step.sel { border-color:#c7d2fe; }
  .wiz-nav { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:20px; }
  /* ── SFTP wizard "Go live" prerequisite checklist (design §Go live) ── */
  .bk-golive-box { border:1px solid var(--accent-soft); background:#fbfbff; border-radius:var(--radius-sm); padding:16px 18px; margin-top:4px; }
  .bk-golive-h { font-size:14px; font-weight:600; color:var(--fg); }
  .bk-gl-list { display:flex; flex-direction:column; gap:7px; margin:10px 0 14px; }
  .bk-gl-item { display:flex; align-items:center; gap:9px; font-size:12.5px; color:#8a93a6; }
  .bk-gl-item svg { flex:none; }
  .bk-gl-item.ok { color:#15703c; }
  .bk-golive-act { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
  .bk-live-badge { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#15703c; }
  /* ── SFTP wizard Overview: two-phase orientation cards + caution note ── */
  .bk-ov-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
  .bk-ov-card { border:var(--hairline); border-radius:var(--radius-sm); padding:16px; }
  .bk-ov-phase { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--accent-ink); }
  .bk-ov-h { font-size:13.5px; font-weight:600; color:var(--fg); margin-top:8px; }
  .bk-ov-p { margin:6px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; }
  .bk-ov-info { margin-top:16px; display:flex; align-items:flex-start; gap:10px; padding:13px 15px; background:var(--bg); border:var(--hairline); border-radius:var(--radius-sm); }
  .bk-ov-info svg { flex:none; margin-top:1px; }
  .bk-ov-info span { font-size:12.5px; color:#4a5470; line-height:1.5; }
  @media (max-width:560px){ .bk-ov-cards { grid-template-columns:1fr; } }
  /* ── EBICS wizard Overview: the three subscriber-key chips ── */
  .bk-ov-keys { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
  .eb-key { display:flex; flex-direction:column; gap:2px; padding:8px 14px; border:var(--hairline); border-radius:var(--radius-sm); background:#fff; }
  .eb-key-code { font-size:13px; font-weight:600; color:var(--accent-ink); }
  .eb-key-role { font-size:11px; color:var(--muted); }
  /* ── SFTP wizard Test-payment suite (design §Test payment) ── */
  .bk-tp-reqbox { border:1px solid #f1e3c6; background:#fdfaf3; border-radius:var(--radius-sm); padding:14px 16px; margin:14px 0 16px; }
  .bk-tp-reqh { font-size:13px; font-weight:600; color:#8a5a12; margin-bottom:10px; }
  .bk-tp-reqlist { display:flex; flex-direction:column; gap:8px; }
  .bk-tp-req { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:12.5px; color:#5a4410; line-height:1.45; }
  .bk-tp-box { flex:none; width:18px; height:18px; border-radius:5px; border:1.5px solid #cfd4de; background:#fff;
        display:flex; align-items:center; justify-content:center; margin-top:1px; }
  .bk-tp-req.ack .bk-tp-box { border-color:#d98a1a; background:#d98a1a; }
  .bk-tp-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 16px; }
  .bk-tp-card { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1.5px solid var(--line);
        background:#fff; border-radius:var(--radius-sm); cursor:pointer; }
  .bk-tp-card.sel { border-color:var(--accent); background:var(--accent-soft); }
  .bk-tp-card.sel .bk-tp-box { border-color:var(--accent); background:var(--accent); }
  .bk-tp-card-l { flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--fg); }
  .bk-tp-card-a { font-size:12px; font-weight:600; color:#4a5470; }
  .bk-tp-send { display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:4px; }
  .bk-tp-hint { font-size:12px; color:var(--muted); }
  .bk-tp-track { margin-top:22px; padding-top:18px; border-top:var(--hairline); }
  .bk-tp-track-h { font-size:14px; font-weight:600; color:var(--fg); margin-bottom:4px; }
  .bk-tp-rows { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .bk-tp-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border:var(--hairline); border-radius:var(--radius-sm); }
  .bk-tp-row-l { flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--fg); }
  .bk-tp-row-a { font-size:12px; color:var(--muted); }
  .bk-tp-stat { font-family:var(--font-mono); font-size:11px; font-weight:600; border-radius:999px; padding:3px 10px;
        min-width:84px; text-align:center; }
  .bk-tp-stat.accp { color:#15703c; background:#e6f3ea; }
  .bk-tp-stat.acsp { color:var(--accent-ink); background:var(--accent-soft); }
  .bk-tp-stat.rjct { color:#b3261e; background:#fcf0ef; }
  .bk-tp-acts { flex:none; display:flex; gap:6px; }
  .bk-tp-v, .bk-tp-f { height:30px; padding:0 11px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
  .bk-tp-v { border:1px solid #cfe8d7; background:#eef8f1; color:#15703c; }
  .bk-tp-f { border:1px solid #f3d2cf; background:#fcf0ef; color:#b3261e; }
  .bk-tp-ok { margin-top:16px; display:flex; align-items:center; gap:10px; padding:13px 15px; background:#eef8f1;
        border:1px solid #cfe8d7; border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:#15703c; }
  @media (max-width:560px){ .bk-tp-cards { grid-template-columns:1fr; } }
  /* ── EBICS wizard: request-agreement template box ── */
  .eb-req-box { margin-top:12px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
  .eb-req-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--line); background:#f6f6f7; }
  /* Light background so the dark --fg text is readable — the global `pre` rule is a dark code
     block (navy bg / light text); this message box reads better as dark-on-light. */
  .eb-req-pre { margin:0; padding:14px 14px; font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; color:var(--fg); background:#fff; font-family:var(--font-mono); overflow:auto; max-height:260px; }
  .eb-copy-msg { margin-top:0; padding:4px 10px; }
  /* Locked sub-step (e.g. INI+HIA before the connection check passes) */
  .eb-locked { opacity:.45; pointer-events:none; }
  /* ── EBICS wizard: subscriber-type choice cards ── */
  .eb-choice-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; align-items:stretch; }
  @media (max-width:560px) { .eb-choice-cards { grid-template-columns:1fr; } }
  /* height:100% makes both cards fill the (equal) grid-row height regardless of differing copy. */
  /* .eb-card is a <button> — reset the global primary-button color/margin/font/centering so the card reads as a card. */
  .eb-card { display:flex; align-items:flex-start; justify-content:flex-start; text-align:left; gap:10px; height:100%; width:100%; margin:0; box-sizing:border-box; border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; cursor:pointer; background:#fff; color:var(--fg); font:inherit; transition:border-color .12s, background .12s; }
  .eb-card input[type="radio"] { flex:none; margin-top:3px; accent-color:var(--accent); }
  .eb-card.sel { border-color:var(--accent); background:#eef2ff; }
  .eb-card-body { flex:1; min-width:0; }
  .eb-card-title { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:4px; }
  .eb-badge-rec { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:var(--accent); color:#fff; padding:1px 7px; border-radius:20px; line-height:18px; }
  .eb-badge-soon { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:var(--muted); color:#fff; padding:1px 7px; border-radius:20px; line-height:18px; }
  .eb-card-desc { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0; }
  .eb-card-warn { font-size:12px; color:var(--warn); font-weight:600; margin:5px 0 0; }
  /* ── EBICS wizard: per-user letter list ── */
  .eb-user-letters { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .eb-user-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
  .eb-user-name { flex:1; min-width:120px; font-size:13px; font-weight:500; }
  .eb-user-name .meta { font-weight:400; color:var(--muted); }
  .eb-letter-action { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
  /* ── EBICS wizard: activation status tracker ── */
  .eb-status-tracker { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fffaeb; color:#92400e; font-size:13px; margin-top:12px; }
  .eb-status-dot { width:10px; height:10px; border-radius:50%; background:var(--warn); flex:none; animation:eb-pulse 1.6s ease-in-out infinite; }
  @keyframes eb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
  /* PGP key summary (bank's key on file) */
  .keyinfo { background:#f6f6f7; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:13px; }
  .keyinfo .ki-head { font-weight:650; color:#067647; }
  .keyinfo .ki-uid { color:var(--fg); font-weight:500; margin-left:6px; }
  .keyinfo .ki-meta { display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:6px; color:var(--muted); font-size:12px; align-items:center; }
  .keyinfo .ki-meta code { font-size:12px; }
  .keyinfo .ki-meta .ki-bad { color:var(--err); font-weight:650; }
  .keyinfo .ki-meta .ki-warn { color:var(--warn); font-weight:650; }
  /* Toast notifications */
  .toasts { position:fixed; top:16px; right:16px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
  .toast { background:#111827; color:#f9fafb; padding:11px 14px; border-radius:10px; font-size:13px;
           box-shadow:0 10px 30px rgba(0,0,0,.22); opacity:0; transform:translateX(24px); transition:opacity .2s, transform .2s; max-width:360px; white-space:pre-wrap; }
  .toast.show { opacity:1; transform:none; }
  .toast.ok { border-left:3px solid #34d399; }
  .toast.err { border-left:3px solid #f87171; }
  .toast.info { border-left:3px solid #60a5fa; }
  /* Activity feed */
  .feed-item { display:flex; gap:18px; padding:14px 2px; border-bottom:1px solid var(--line); font-size:13px; align-items:baseline; }
  .feed-item:hover { background:#f8f8f9; }
  .feed-item .ftime { color:var(--muted); font-size:12px; white-space:nowrap; min-width:150px; font-variant-numeric:tabular-nums; }
  .feed-item .ftype { font-weight:600; min-width:180px; color:var(--fg); display:flex; align-items:center; gap:8px; }
  .feed-item .fmsg { color:var(--muted); }
  /* §5.6 activity log: category dot, date dividers, verify-audit-trail control, retention note. */
  .fcat-dot { width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
  .feed-divider { margin:18px 0 6px; padding-bottom:6px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.06em; color:var(--muted); }
  .al-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .al-toolbar .bc-toolbar { margin:0; flex:1; }
  .al-retention { margin:6px 0 12px; font-size:12px; }
  .al-tamper { display:inline-flex; align-items:center; gap:6px; font:600 10.5px var(--font-mono); color:#15703c; background:#e6f3ea; padding:3px 9px; border-radius:999px; }
  .bc-verify { height:34px; padding:0 14px; border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--radius-sm); font:600 12.5px var(--font); cursor:pointer; }
  .bc-verify:hover:not(:disabled) { background:#e3e0fa; }
  .bc-verify:disabled { opacity:.7; cursor:default; }
  .bc-verify-result { display:inline-flex; align-items:center; gap:7px; font:600 12.5px var(--font-mono); }
  .bc-verify-result.is-ok { color:var(--ok); }
  .bc-verify-result.is-bad { color:var(--danger); }
  /* ── Home onboarding checklist (the legacy hm-top/score-ring/ms-list dashboard widgets were removed in the
        2026-06 rebrand; the live home view uses .hm-kpis / .onboard-* below). ── */
  .checklist { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .ck { display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
  .ck:hover { border-color:var(--accent); }
  .ck.done { background:#fcfefd; border-color:#abefc6; }
  .ck .mark { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:#f0f1f4; color:var(--muted); }
  .ck.done .mark { background:var(--ok); color:#fff; }
  .ck .ck-main { flex:1; min-width:0; }
  .ck .ck-label { font-weight:600; font-size:13.5px; }
  .ck .ck-detail { color:var(--muted); font-size:12px; }
  .ck .ck-go { color:var(--accent); font-size:12px; font-weight:600; white-space:nowrap; }
  /* .stat — the operator job-queue stat cards (ops.js renderJobs: .stat-grid > .stat > .stat-num/.stat-label). */
  .stat { border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff; box-shadow:var(--shadow); transition:border-color .12s, box-shadow .12s; }
  .stat:hover { border-color:#cdd8ee; box-shadow:0 4px 14px rgba(20,30,60,.07); }
  .bar { height:8px; border-radius:6px; background:#eef1f6; overflow:hidden; margin-top:6px; }
  .bar > span { display:block; height:100%; background:var(--primary); }

  /* Pilot: guided onboarding wizard (Home setup card). */
  .onboard-progress { font-size:12.5px; font-weight:650; color:var(--accent-ink); white-space:nowrap; }
  .onboard-bar { margin:12px 0 4px; }
  .onboard-bar > .bar-fill { display:block; height:100%; background:var(--accent); transition:width .25s; }
  .onboard-steps { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .onboard-step { display:flex; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; }
  .onboard-step.onboard-current { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .onboard-step.onboard-upcoming { opacity:.6; }
  .onboard-marker { flex-shrink:0; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700; background:#eef1f6; color:var(--muted); }
  .onboard-step.onboard-done .onboard-marker { background:var(--ok); color:#fff; }
  .onboard-step.onboard-current .onboard-marker { background:var(--accent); color:#fff; }
  .onboard-main { flex:1; min-width:0; }
  .onboard-label { font-weight:650; font-size:13.5px; }
  .onboard-desc { color:var(--muted); font-size:12.5px; margin-top:2px; }
  .onboard-actions { margin-top:9px; }

  /* ── Lit components (light DOM; styled here so there's one CSS source and no
        JS-injected <style>). Host tags are block-level with a small top margin. ── */
  bc-journal-list, bc-accounts-table, bc-activity-log { display:block; margin-top:6px; }
  /* Table/list search box (used by all data components). */
  .bc-toolbar { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
  .bc-search { flex:1; max-width:340px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; font-size:13px; background:#fff; color:var(--fg); }
  .bc-search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .bc-search-count { font-size:12px; color:var(--muted); }
  .bc-toolbar .bc-filter { width:auto; min-width:150px; margin:0; padding:8px 30px 8px 12px; font-size:13px; }   /* §5.2 status filter */
  /* Approval-policy editor sections */
  .ap-section { border:var(--hairline); border-radius:var(--radius); padding:var(--sp-4) var(--sp-6); margin-top:var(--sp-4); background:var(--card); }
  .ap-section > h4 { margin:0 0 10px; font-size:11.5px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .ap-summary { background:var(--primary-soft); border-radius:9px; padding:12px 14px; font-size:13px; color:var(--fg); line-height:1.5; }
  /* Separation-of-duties reassurance note — green callout reads as a positive control */
  /* §Approval Policy list cards: approver summary + APPLIES TO bank chips */
  .ap-policy-card { display:block; }
  .ap-approver-line { color:var(--muted); }
  .ap-applies { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
  .ap-applies-label { font-size:10px; letter-spacing:.08em; color:var(--muted); margin-right:4px; }
  .ap-bank-chip { font-size:11px; font-weight:600; color:var(--fg); background:#f4f5f7; border:var(--hairline); border-radius:5px; padding:2px 9px; }
  .ap-applies-fallback { font-size:12px; color:var(--muted); }
  .ap-sod { display:flex; align-items:flex-start; gap:8px; margin:0; padding:9px 11px; border-radius:8px;
        background:#e9f7ef; border:1px solid #bfe6cd; color:#1d6b3f; font-size:12px; line-height:1.45; }
  .ap-sod-ico { flex:none; width:16px; height:16px; border-radius:50%; background:#28a565; color:#fff;
        font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
  bc-accounts-table { overflow-x:auto; }
  bc-activity-log { margin-top:10px; }
  .bcjl { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .bcjl-head, .bcjl-row { display:grid; gap:12px; align-items:center; padding:10px 14px; box-sizing:border-box; }
  /* lit-virtualizer absolutely-positions rows and shrinks them to content; force full width
     so the row's fr columns line up with the (full-width) header. */
  .bcjl-row { width:100%; }
  /* per-variant column templates (set via class, not inline style, for CSP) */
  .bcjl-cols-statements { grid-template-columns:1.1fr 1fr 1fr .8fr .5fr 1.2fr .8fr 1.1fr; }
  .bcjl-cols-payments { grid-template-columns:1.1fr 1fr .9fr 1.2fr 1.1fr; }
  .bcjl-head { background:#f6f6f7; border-bottom:1px solid var(--line); color:var(--muted);
               font-size:11.5px; font-weight:650; text-transform:uppercase; letter-spacing:.03em; position:sticky; top:0; z-index:1; }
  .bcjl-body { display:block; height:62vh; }
  .bcjl-row { border-bottom:1px solid var(--line); font-size:13px; }
  .bcjl-row.click { cursor:pointer; }
  .bcjl-row:hover { background:#f8f8f9; }
  .bcjl-row .mono { font-family:var(--font-mono); font-weight:600; }
  .bcjl-row .num { text-align:right; font-variant-numeric:tabular-nums; }
  .bcjl-row .dim, .bcjl-foot.dim { color:var(--muted); font-size:12.5px; }
  /* §B Payments table footer: shown-count + per-currency subtotals (never blended). */
  .bcjl-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 2px; border-top:1px solid var(--line); }
  .bcjl-summary-count { font-size:12px; color:var(--muted); }
  .bcjl-subtotals { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
  .bcjl-sub-label { font-size:10.5px; letter-spacing:.08em; color:#aab0bd; }
  .bcjl-sub { font-size:12px; font-weight:600; color:var(--fg); padding:3px 9px; background:#f4f5f7; border-radius:6px; }
  .bcjl-foot { padding:10px 14px; font-size:12.5px; color:var(--muted); }
  .bcjl-foot.err { color:var(--err); }
  .bc-acct { width:100%; border-collapse:collapse; }
  .bc-acct th { text-align:left; padding:8px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:650; }
  .bc-acct td { padding:8px; font-size:13px; border-bottom:1px solid var(--line); }
  .bc-acct td.mono { font-family:var(--font-mono); font-size:12px; }
  .bc-acct td.num { font-variant-numeric:tabular-nums; }
  .bc-acct td.dim { color:var(--muted); font-size:12px; }
  /* §Users: avatar + YOU tag + role pills */
  .us-name { display:inline-flex; align-items:center; gap:10px; }
  .us-avatar { width:28px; height:28px; border-radius:50%; background:var(--primary-soft); color:var(--primary);
        display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex:none; }
  .us-you { font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--accent-ink); background:var(--accent-soft);
        border-radius:4px; padding:1px 5px; margin-left:6px; }
  .us-role { display:inline-block; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; margin-right:4px; }
  .us-role-admin { color:var(--accent-ink); background:var(--accent-soft); }
  .us-role-approver { color:#1f4fb0; background:#e7eefe; }
  .us-role-viewer { color:#4a5470; background:#eef0f4; }
  .us-role-operator { color:#0d6b6e; background:#e2f2f1; }
  .us-name-txt { font-weight:500; }
  /* §Users: company-wide 2FA policy banner (amber, lock icon) — shown only when the company forces 2FA. */
  .us-policy-banner { display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; padding:12px 14px;
        background:var(--warn-soft); border:1px solid #f1e3c6; border-radius:var(--radius-sm);
        font-size:12.5px; color:#8a5a12; line-height:1.5; }
  .us-policy-banner svg { width:16px; height:16px; flex:none; margin-top:1px; fill:none; stroke:#b45309; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  /* §Users: per-row ⋮ action menu. The trigger is a quiet icon button; the dropdown reuses the global .menu. */
  .us-table-grid { min-width:760px; }
  .us-act-cell { text-align:right; width:48px; }
  .us-act-btn { width:28px; height:28px; padding:0; margin:0; background:transparent; border:1px solid transparent;
        border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; color:#9aa1b0; cursor:pointer; }
  .us-act-btn:hover { background:#f1f2f5; color:#5b6478; border-color:var(--line); }
  .us-act-btn svg { width:16px; height:16px; fill:currentColor; }
  .us-act .menu { min-width:160px; }
  /* §Users: invite block reads as a footer panel (tinted, separated from the table). */
  .us-invite-foot { margin-top:18px; padding:22px 22px 4px; background:#fafbfc; border-top:var(--hairline);
        border-radius:0 0 var(--radius) var(--radius); margin-left:calc(-1 * var(--sp-6)); margin-right:calc(-1 * var(--sp-6)); margin-bottom:calc(-1 * var(--sp-6)); padding-left:var(--sp-6); padding-right:var(--sp-6); padding-bottom:var(--sp-6); }
  /* The action menu must escape the table box on desktop (no clipping); narrow screens fall back to h-scroll. */
  #us-table { overflow:visible; }
  @media (max-width:820px){ #us-table { overflow-x:auto; } }
  .bc-acct-foot { padding:10px 2px 2px; font-size:11.5px; color:var(--muted); }
  .bc-acct-msg { padding:10px 2px; font-size:12.5px; color:var(--muted); }
  .bc-acct-msg.err { color:var(--err); }

  /* ── Utility classes — replace former inline style="…" attributes so the CSP can
        drop 'unsafe-inline' from style-src. Dynamic values (progress-bar width, the
        go-live gauge) are set via el.style in JS (CSSOM is CSP-exempt). ── */
  /* ── Workspace admin layout: left sidebar + switchable content sections ──────────
        Defined BEFORE .hidden so that — like .login-wrap — the .hidden class (later in source)
        wins when the screen carries both classes initially; renderWorkspace reveals it via
        style.display='flex' (CSSOM, CSP-exempt). Reuses the app sidebar's dark tokens. */
  .ws-layout { display:flex; height:100%; min-height:100dvh; background:var(--bg); }
  .ws-sidebar { width:200px; flex-shrink:0; background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2)); color:var(--sidebar-fg); display:flex; flex-direction:column; padding:16px 0; }
  .ws-brand { display:flex; align-items:center; gap:9px; padding:0 16px 12px; color:#fff; font-weight:650; font-size:14px; }
  .ws-brand .mark { width:26px; height:26px; border-radius:8px; flex-shrink:0; background:var(--primary); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
  .ws-who-mini { padding:0 16px 12px; font-size:12px; color:var(--sidebar-fg); border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:8px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .ws-nav { list-style:none; margin:0; padding:0; }
  .ws-nav li { margin:0; }
  .ws-nav-btn { display:block; width:100%; text-align:left; background:none; border:none; color:var(--sidebar-fg); font-size:13px; padding:9px 16px; cursor:pointer; transition:background .1s, color .1s; }
  .ws-nav-btn:hover { background:rgba(255,255,255,.06); color:#e5e5ea; }
  .ws-nav-btn.active { background:var(--sidebar-active); color:#fff; font-weight:600; }
  .ws-content { flex:1; overflow-y:auto; padding:28px 32px; }
  .ws-section--hidden { display:none; }
  .ws-section-title { font-size:16px; font-weight:700; color:var(--fg); margin:0 0 18px; }
  .ws-card { background:var(--card); border:var(--hairline); border-radius:var(--radius); padding:var(--sp-6); margin-bottom:var(--sp-6); }
  .ws-search { width:100%; max-width:340px; height:34px; padding:0 12px; margin-bottom:12px; border:var(--hairline); border-radius:var(--radius-sm); font:inherit; font-size:13px; background:#fff; color:var(--fg); }
  .ws-search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .ws-role-pill { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; color:var(--accent-ink); background:var(--accent-soft); }
  .ws-apikey-reveal { background:#fefce8; border-color:#fef08a; margin-top:12px; }
  .ws-apikey-value { display:block; font-family:monospace; font-size:13px; word-break:break-all; background:#f0fdf4; padding:10px; border-radius:6px; margin:8px 0; color:#166534; }
  .ws-sidebar-foot { margin-top:auto; padding:12px 16px 4px; border-top:1px solid rgba(255,255,255,.08); }
  .ws-docs-link { display:flex; align-items:center; gap:8px; color:var(--sidebar-fg); font-size:12px; text-decoration:none; padding:7px 0; opacity:.75; transition:opacity .15s; }
  .ws-docs-link:hover { opacity:1; color:#e5e5ea; }
  .ws-docs-link svg { width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

  /* ══ Workspace (Platform Admin) console — high-fidelity redesign (overrides the base ws-* above) ══════════ */
  .ws-sidebar { width:248px; padding:0; }
  .ws-brand-block { padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
  .ws-brand { gap:11px; padding:0; }
  .ws-brand .mark { width:34px; height:34px; border-radius:9px; background:#162143; border:1px solid rgba(255,255,255,.16); font-weight:600; font-size:15px; }
  .ws-brand-name { color:#fff; font-weight:600; font-size:15px; letter-spacing:-.01em; }
  .ws-who-mini { padding:0; border:none; margin:13px 0 0; font-size:12px; color:#7e889f; line-height:1.55; }
  .ws-signout { width:auto; margin:13px 0 0; background:#fff; color:#131a2b; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
  .ws-signout:hover { background:#eef0f3; }
  .ws-nav { flex:1; padding:12px; display:flex; flex-direction:column; gap:3px; }
  /* Left-aligned dashboard nav rows matching the shared `.nav button` spec (icon → label, active item
     highlighted with the indigo left bar). The global `button` rule sets justify-content:center +
     margin-top, so override both here. Kept on `.ws-nav-btn` (not the shared `.nav`/`.sidebar` classes)
     to avoid colliding with the company app's global `.sidebar > nav.nav` router/roving-tabindex wiring. */
  .ws-nav-btn { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:11px;
        width:100%; text-align:left; margin:0; padding:9px 11px; border:0; border-radius:10px;
        background:transparent; color:var(--sidebar-fg); font-size:13.5px; font-weight:500; }
  .ws-nav-btn:hover { background:transparent; color:#7e889f; } /* text-only hover: slightly darker, no fill */
  .ws-nav-btn.active { background:var(--sidebar-active); color:#fff; font-weight:650; }
  .ws-nav-btn.active::before { content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px;
        border-radius:0 3px 3px 0; background:var(--accent); }
  .ws-nav-ico { display:flex; width:18px; justify-content:center; flex:none; }
  .ws-nav-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ws-sidebar-foot { margin-top:auto; padding:14px 18px 16px; border-top:1px solid rgba(255,255,255,.07); }
  .ws-status-line { display:flex; align-items:center; gap:9px; margin-top:10px; font-size:11.5px; color:#7e889f; }
  .ws-status-dot { width:7px; height:7px; border-radius:50%; background:#3fbf6b; flex:none; box-shadow:0 0 0 3px rgba(63,191,107,.18); }

  /* Content: a fixed console header bar + a scrolling, centered main column. */
  .ws-content { flex:1; min-width:0; display:flex; flex-direction:column; overflow-y:auto; padding:0; }
  .ws-console-head { flex:none; position:sticky; top:0; z-index:5; height:62px; background:#fff; border-bottom:var(--hairline);
        display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
  .ws-console-head h1 { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:0; }
  .ws-console-pill { font-size:11.5px; color:#8a93a6; background:#f4f5f7; border:var(--hairline); border-radius:6px; padding:5px 10px; }
  .ws-flash { max-width:1036px; width:100%; margin:14px auto -8px; }
  .ws-section { max-width:1036px; width:100%; margin:0 auto; padding:28px; }

  /* Panels (cards) */
  .ws-panel { background:var(--card); border:var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .ws-panel-pad { padding:24px; }
  .ws-panel-head { padding:22px 24px 18px; border-bottom:1px solid #eef0f3; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .ws-panel-title { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:0; }
  .ws-panel-sub { font-size:13px; color:var(--muted); margin:5px 0 0; max-width:560px; line-height:1.5; text-wrap:pretty; }
  .ws-panel-pad .ws-panel-sub { margin-bottom:18px; }
  .ws-panel-foot { padding:14px 24px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eef0f3; font-size:12px; color:#8a93a6; }

  /* Console buttons */
  .ws-btn-dark { width:auto; margin:0; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm);
        padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 1px 2px rgba(16,24,40,.12); }
  .ws-btn-dark:hover { background:var(--primary-hover); }
  .ws-btn-ico { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ws-btn-acc { width:auto; margin:0; flex:none; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:0 18px; height:40px; font-size:13px; font-weight:600; cursor:pointer; }
  .ws-btn-acc:hover { background:var(--accent-hover); }

  /* Companies — inline add row, search, fixed-column table, footer */
  .ws-add-row { padding:16px 24px; background:#fafbff; border-bottom:1px solid #eef0f3; display:flex; align-items:center; gap:10px; }
  .ws-add-row.hidden { display:none; }
  .ws-add-name { flex:1; min-width:0; }
  .ws-search-wrap { position:relative; padding:14px 24px; border-bottom:1px solid #eef0f3; }
  .ws-search-ico { position:absolute; left:36px; top:50%; transform:translateY(-50%); width:16px; height:16px; fill:none; stroke:#9aa1b0; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
  .ws-search2 { width:100%; height:38px; padding:0 12px 0 34px; }
  .ws-co-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
  .ws-co-table th { text-align:left; padding:10px 24px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; color:#8a93a6; background:#fafbfc; border-bottom:1px solid #eef0f3; text-transform:uppercase; }
  .ws-co-table th:nth-child(1){ width:30%; } .ws-co-table th:nth-child(2),.ws-co-table th:nth-child(3){ width:12%; } .ws-co-table th:nth-child(4){ width:16%; } .ws-co-table th:nth-child(5){ width:18%; } .ws-co-table th:nth-child(6){ width:12%; }
  .ws-co-table td { padding:13px 24px; border-bottom:1px solid #f1f2f5; vertical-align:middle; }
  .ws-co-table tbody tr:hover { background:#fafbff; }
  .ws-co-table tbody tr:last-child td { border-bottom:0; }
  .ws-co-table td.num, .ws-co-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
  .ws-co-name { font-weight:600; color:var(--fg); }
  .ws-co-id { font-size:11.5px; color:#8a93a6; margin-top:2px; }
  .ws-co-created { font-size:11.5px; color:#8a93a6; }
  .ws-status-pill { font-size:10.5px; }
  .ws-co-act { text-align:right; width:52px; }
  .ws-row-act { width:28px; height:28px; padding:0; margin:0; background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; color:#9aa1b0; cursor:pointer; }
  .ws-row-act:hover { background:#f1f2f5; color:#5b6478; border-color:var(--line); }
  .ws-row-act svg { width:16px; height:16px; fill:currentColor; }
  .ws-co-act .menu { min-width:170px; }

  /* Admin users — avatar rows */
  .ws-admin-rows { border:1px solid #eef0f3; border-radius:var(--radius-sm); overflow:hidden; }
  .ws-admin-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid #f1f2f5; }
  .ws-admin-row:last-child { border-bottom:0; }
  .ws-admin-av { width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex:none; }
  .ws-admin-id { flex:1; min-width:0; }
  .ws-admin-name { font-size:13.5px; font-weight:600; color:var(--fg); }
  .ws-admin-email { font-size:12px; color:#8a93a6; }
  .ws-admin-role { flex:none; font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:20px; background:#eef0f6; color:#5b6478; }
  .ws-admin-role.is-owner { background:var(--accent-soft); color:var(--accent-ink); }
  .ws-admin-add { margin-top:16px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .ws-admin-fields { display:flex; gap:10px; width:100%; }
  .ws-admin-fields input { flex:1; min-width:0; }

  /* Platform Settings — selectable radio cards */
  .ws-radio-cards { display:flex; flex-direction:column; gap:12px; }
  .ws-radio-card { display:flex; align-items:flex-start; gap:12px; padding:14px 15px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; margin:0; }
  .ws-radio-card:has(.ws-radio-input:checked) { border-color:var(--accent); background:var(--accent-soft); }
  .ws-radio-card:has(.ws-radio-input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
  .ws-radio-input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
  .ws-radio-dot { width:20px; height:20px; border-radius:50%; border:2px solid #cdd2dc; flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; }
  .ws-radio-card:has(.ws-radio-input:checked) .ws-radio-dot { border-color:var(--accent); }
  .ws-radio-card:has(.ws-radio-input:checked) .ws-radio-dot::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); }
  .ws-radio-title { font-size:13.5px; font-weight:600; color:var(--fg); }
  .ws-radio-rec { font-size:12.5px; color:#15703c; font-weight:600; }
  .ws-radio-desc { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
  .ws-warn-banner { margin-top:16px; display:flex; align-items:flex-start; gap:10px; padding:13px 15px; background:var(--warn-soft); border:1px solid #f1e3c6; border-radius:var(--radius-sm); font-size:12.5px; color:#8a5a12; line-height:1.5; }
  .ws-warn-banner svg { width:17px; height:17px; flex:none; margin-top:1px; fill:none; stroke:#b08018; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ws-ext-field { margin-top:18px; }
  .ws-ext-field label { display:block; font-size:12.5px; font-weight:600; color:var(--fg); margin-bottom:7px; }
  .ws-floor { align-items:flex-start; margin-top:18px; max-width:600px; }
  .ws-appr-actions { margin-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .ws-appr-actions .msg { margin:0; }

  /* API Keys — description, dark one-time reveal, key rows */
  .ws-code { font-family:var(--font-mono); font-size:12px; background:#eef0f3; padding:2px 6px; border-radius:4px; color:var(--fg); }
  .ws-key-reveal { background:#0e1730; border-radius:var(--radius); padding:18px 20px; color:#fff; margin-bottom:18px; }
  .ws-key-reveal.hidden { display:none; }
  .ws-key-reveal-head { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#9fe6bd; }
  .ws-key-reveal-head svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ws-key-reveal-sub { font-size:12px; color:#9aa4be; margin:6px 0 12px; }
  .ws-key-reveal-row { display:flex; align-items:center; gap:10px; }
  .ws-key-code { flex:1; min-width:0; font-family:var(--font-mono); font-size:13px; background:#162143; border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:11px 13px; color:#e8ebf2; overflow:auto; white-space:nowrap; }
  .ws-key-copy { width:auto; margin:0; flex:none; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:11px 14px; font-size:13px; font-weight:600; cursor:pointer; }
  .ws-key-copy:hover { background:rgba(255,255,255,.08); }
  .ws-key-done { width:auto; margin:0; flex:none; background:#fff; color:#131a2b; border:none; border-radius:6px; padding:11px 16px; font-size:13px; font-weight:600; cursor:pointer; }
  .ws-key-row { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid #f1f2f5; }
  .ws-key-ico { width:34px; height:34px; border-radius:8px; background:#eef0f6; color:#5b6478; display:flex; align-items:center; justify-content:center; flex:none; }
  .ws-key-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ws-key-meta { flex:1; min-width:0; }
  .ws-key-name { font-size:13.5px; font-weight:600; color:var(--fg); }
  .ws-key-sub { font-size:12px; color:#8a93a6; margin-top:2px; }
  .ws-key-revoke { width:auto; margin:0; flex:none; background:#fff; color:#c0322b; border:1px solid #f0d4d1; border-radius:var(--radius-sm); padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; }
  .ws-key-revoke:hover { background:#fcf0ef; }
  .ws-key-gen-row { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .ws-key-gen-row input { width:100%; min-width:0; }
  /* Redesign: heading now lives inside the padded card; the key list reads as a bordered box,
     then a full-width label input with the Generate button stacked below (matches the design). */
  #ws-apikey-list { border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin:16px 0; }
  #ws-apikey-list .ws-key-row:last-child { border-bottom:0; }
  .ws-key-empty { padding:18px 20px; font-size:13px; color:#8a93a6; }

  /* ══ Operator Panel — leveled drill-down (platform → company), mounted in Workspace → Operator Logs ════════ */
  #op-panel { max-width:1120px; }
  .op-crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:11px; font-size:13px; }
  .op-crumb { white-space:nowrap; }
  .op-link { color:var(--muted); cursor:pointer; font-weight:500; }
  .op-link:hover { color:var(--fg); }
  .op-active { color:var(--fg); font-weight:600; }
  .op-sep { color:#c2c8d4; }
  .op-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
  .op-title { margin:0; font-size:21px; font-weight:600; letter-spacing:-.01em; color:var(--fg); display:flex; align-items:center; gap:11px; }
  .op-badge { font-size:11px; font-weight:500; padding:3px 10px; border-radius:8px; background:#eef0f6; color:#5b6478; }
  .op-sub { margin:8px 0 0; font-size:13.5px; color:#5b6478; max-width:780px; line-height:1.55; }
  .op-tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap; }
  .op-tabs .tab { padding:9px 14px 11px; margin-bottom:-1px; font-size:13.5px; }
  .op-tabs .tab.active { border-bottom-color:var(--accent); color:var(--fg); }
  .op-view { min-height:60px; }
  .op-banner { background:var(--card); border:var(--hairline); border-radius:10px; padding:13px 16px; font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
  .op-banner-acc { border-left:3px solid var(--accent); }
  .op-search-wrap { position:relative; margin-bottom:14px; max-width:340px; }
  .op-search-wrap .ws-search-ico { left:12px; }
  .op-search-wrap .ws-search2 { height:38px; }
  /* Operator tables: card-framed, generous rows. */
  .op-tbl { width:100%; border-collapse:collapse; font-size:13px; background:var(--card); border:var(--hairline); border-radius:12px; overflow:hidden; }
  .op-tbl th { text-align:left; padding:11px 18px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; color:#8a93a6; background:#f8f9fb; border-bottom:1px solid var(--line); text-transform:uppercase; }
  .op-tbl td { padding:13px 18px; border-top:1px solid #eef0f4; vertical-align:middle; }
  .op-tbl th.num, .op-tbl td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .op-row { cursor:pointer; }
  .op-row:hover { background:#f7f8fa; }
  .op-co { display:flex; align-items:center; gap:12px; min-width:0; }
  .op-co-av { width:34px; height:34px; border-radius:8px; background:#eef0f6; color:#5b6478; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex:none; }
  .op-co-id { min-width:0; }
  .op-co-name { font-size:14px; font-weight:600; color:var(--fg); }
  .op-co-banks { font-size:11.5px; color:#8a93a6; margin-top:2px; }
  .op-chev { color:#c2c8d4; font-size:18px; text-align:right; }
  .op-bank { display:flex; align-items:center; gap:11px; min-width:0; }
  .op-bank-av { width:30px; height:30px; border-radius:7px; background:#eef0f6; color:#5b6478; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; flex:none; }

  hr { border:0; border-top:1px solid var(--line); margin:20px 0; }
  .hidden { display:none; }
  /* Visually hidden but available to screen readers (a11y labels for radio/checkbox groups). */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .block { display:block; }
  /* .row is defined once above (display:flex; gap:12px); this duplicate was a redundant no-op. */
  .col { display:flex; flex-direction:column; }
  .wrap { flex-wrap:wrap; }
  .between { justify-content:space-between; }
  .items-center { align-items:center; }
  .items-start { align-items:flex-start; }
  .items-end { align-items:flex-end; }
  .flex1 { flex:1; }
  .gap-6 { gap:6px; } .gap-8 { gap:8px; } .gap-10 { gap:10px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; }
  .m0 { margin:0; }
  .mb4 { margin:0 0 4px; } .mb6 { margin:0 0 6px; } .mb8 { margin:0 0 8px; }
  .ml6 { margin:0 0 0 6px; }
  .mt3 { margin:3px 0 0; }
  .my8 { margin:8px 0; }
  .m-10-0-6 { margin:10px 0 6px; }
  .m-6-0-14 { margin:6px 0 14px; }
  .mt-3 { margin-top:3px; } .mt-6 { margin-top:6px; } .mt-8 { margin-top:8px; }
  .mt-10 { margin-top:10px; } .mt-12 { margin-top:12px; } .mt-14 { margin-top:14px; } .mt-16 { margin-top:16px; } .mt-20 { margin-top:20px; }
  .mb-4 { margin-bottom:4px; } .mb-6 { margin-bottom:6px; } .mb-12 { margin-bottom:12px; } .mb-14 { margin-bottom:14px; } .mb-18 { margin-bottom:18px; }
  .mr-6 { margin-right:6px; }
  .pt-4 { padding-top:4px; }
  .scroll-x { overflow-x:auto; }
  .w-auto { width:auto; }
  .mw-360 { max-width:360px; }
  .nowrap { white-space:nowrap; }
  .fs-12 { font-size:12px; }
  .fs-13 { font-size:13px; }
  .min-w-0 { min-width:0; }
  .text-danger { color:var(--danger); }
  /* Webhooks panel */
  .wh-list { display:flex; flex-direction:column; gap:8px; }
  .wh-url { overflow-wrap:anywhere; word-break:break-all; }
  /* Endpoint cards (design §Webhooks) */
  .wh-cards { display:flex; flex-direction:column; gap:10px; }
  .wh-card { border:var(--hairline); border-radius:var(--radius); padding:15px 17px; background:var(--card); }
  .wh-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .wh-card-name { display:flex; align-items:center; gap:9px; min-width:0; font-size:14px; font-weight:600; color:var(--fg); overflow-wrap:anywhere; }
  .wh-name-dot { width:8px; height:8px; border-radius:50%; flex:none; }
  .wh-status { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-family:var(--font-mono); font-size:11px; font-weight:600; white-space:nowrap; flex:none; }
  .wh-status-dot { width:6px; height:6px; border-radius:50%; }
  .wh-st-active { color:#15703c; } .wh-status.wh-st-active { background:var(--ok-soft); } .wh-st-active.wh-name-dot, .wh-st-active .wh-status-dot { background:#1d9a53; }
  .wh-st-failing { color:#b3322b; } .wh-status.wh-st-failing { background:var(--danger-soft); } .wh-st-failing.wh-name-dot, .wh-st-failing .wh-status-dot { background:#d24a3f; }
  .wh-st-paused { color:#4a5470; } .wh-status.wh-st-paused { background:#eef0f4; } .wh-st-paused.wh-name-dot, .wh-st-paused .wh-status-dot { background:#6b7590; }
  .wh-card-url { font-size:12px; color:#5b6478; margin-top:7px; word-break:break-all; }
  .wh-card-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
  .wh-chip { font-size:11px; font-weight:500; color:#4a5470; background:#f4f5f7; border-radius:5px; padding:2px 8px; }
  .wh-chip-filter { color:var(--accent-ink); background:var(--accent-soft); }
  .wh-card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:11px; font-size:12px; color:#8a93a6; }
  .wh-code { font-size:11px; font-weight:600; padding:2px 7px; border-radius:5px; }
  .wh-code-ok { color:#15703c; background:var(--ok-soft); }
  .wh-code-bad { color:#b3322b; background:var(--danger-soft); }
  .wh-card-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
  .wh-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 12px; }
  .wh-section-label { font-size:10.5px; letter-spacing:.09em; color:var(--muted); }
  .wh-form-wrap { margin-top:18px; padding-top:18px; border-top:var(--hairline); }
  .wh-event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 14px; margin-top:8px; }
  .wh-events { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0; }
  .wh-events legend { font-size:13px; font-weight:650; padding:0 4px; }
  .wh-filters-summary { cursor:pointer; }
  .wh-secret { border:1px solid #fedf89; background:#fffaeb; border-radius:10px; padding:16px; }
  /* Recent-deliveries panel (toggled per endpoint) */
  .wh-deliveries { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
  .wh-del-table { width:100%; border-collapse:collapse; font-size:12.5px; }
  .wh-del-table th { text-align:left; padding:5px 8px; color:var(--muted); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--line); }
  .wh-del-table td { padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .wh-del-table tr.wh-del-err td { border-bottom:1px solid var(--line); padding-top:0; }
  .tnum { font-variant-numeric:tabular-nums; }
  .text-muted { color:var(--muted); }
  .pointer { cursor:pointer; }
  .btn-danger { background:var(--danger); }
  .btn-danger:hover { background:var(--danger-hover); }
  .sel { border-color:var(--accent); }
  .sel-soft { border-color:#c7d2fe; }
  .demo-hint { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
  /* Workspace (platform) admin screen */
  .ws-card { max-width:840px; text-align:left; } /* wider to fit the operator-analytics tables */
  .ws-card h3 { margin:22px 0 4px; font-size:15px; }
  .ws-table { width:100%; border-collapse:collapse; margin:6px 0; }
  .ws-table td { padding:9px 8px; border-bottom:1px solid var(--line); font-size:14px; }
  .ws-table td:last-child { text-align:right; }

  /* ── Home dashboard (session-B) — compact cash-position tiles (one per currency). ───────── */
  .ccy-tiles { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
  .ccy-tile { flex:1 1 140px; min-width:128px; border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--card); }
  .ccy-tile-ccy { font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
  .ccy-tile-amt { font-size:19px; font-weight:700; color:var(--fg); letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-top:4px; }
  .ccy-tile-sub { font-size:11.5px; color:var(--muted); margin-top:3px; }

  /* ════ GUI REFRESH — design system, now GLOBAL (owner approved the home preview → rolled out app-wide).
         These come late in the file so they refine the older rules by source order. Visual only. ═══════ */
  /* Deliberate in-content page header (home + any screen that opts in): large bold title + muted subtitle. */
  .hm-head { margin:var(--sp-2) 0 var(--sp-6); }
  .hm-title { font-size:var(--ts-2xl); font-weight:var(--fw-bold); letter-spacing:-.02em; color:var(--fg); }
  .hm-subtitle { font-size:var(--ts-sm); color:var(--muted); margin-top:var(--sp-1); }
  /* Metric tiles — the Stripe pattern: a BIG tabular number over a MUTED label. */
  .ccy-tiles { gap:var(--sp-4); margin-top:var(--sp-4); }
  .ccy-tile { border:var(--hairline); border-radius:var(--radius); padding:var(--sp-4) var(--sp-6); }
  .ccy-tile-ccy { font-size:var(--ts-xs); font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:.04em; }
  .ccy-tile-amt { font-size:var(--ts-2xl); font-weight:var(--fw-bold); letter-spacing:-.02em; margin-top:var(--sp-1); }
  .ccy-tile-sub { font-size:var(--ts-xs); margin-top:var(--sp-1); }
  /* Operator stat cards: calmer — airy padding, hairline border, no shadow. */
  .stat { padding:var(--sp-6); border:var(--hairline); border-radius:var(--radius); box-shadow:none; }
  .stat:hover { border-color:#d7d7dc; box-shadow:none; }
  /* Card section headers ride the type scale app-wide. */
  .card > h2, .card > .row > h2 { font-size:var(--ts-lg); font-weight:var(--fw-semi); letter-spacing:-.01em; }

  /* ── In-app modal dialog (replaces native confirm/prompt/alert) ──────────────── */
  #modal-root { position:fixed; inset:0; z-index:80; display:none; }
  #modal-root.open { display:block; }
  .modal-backdrop { position:fixed; inset:0; background:rgba(18,18,20,.45); opacity:0; transition:opacity .18s ease; }
  #modal-root.open .modal-backdrop { opacity:1; }
  .modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-46%); width:min(420px,92vw); background:var(--card);
    border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.22); padding:24px; opacity:0;
    transition:opacity .18s ease, transform .2s cubic-bezier(.32,.72,0,1); }
  #modal-root.open .modal { opacity:1; transform:translate(-50%,-50%); }
  .modal-title { margin:0 0 8px; font-size:16px; }
  .modal-body { margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }
  .modal-input { margin-top:14px; }
  .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
  .modal-actions button { margin:0; }
  .modal.modal--wide { width:min(560px,94vw); }
  /* Statement import modal (§5.3) */
  .si-label { display:block; margin:14px 0 5px; font-size:12.5px; font-weight:600; color:var(--fg); }
  .si-input { width:100%; height:36px; padding:0 11px; border:var(--hairline); border-radius:var(--radius-sm); font:inherit; font-size:13px; background:#fff; color:var(--fg); }
  .si-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .si-preview { max-height:220px; overflow:auto; margin-top:12px; font-size:11.5px; }

  /* ── Two-factor authentication (enrollment panel, code dialog, login step-up) ── */
  .tfa-mlabel { display:block; margin:14px 0 4px; font-size:13px; font-weight:600; }
  .tfa-code-input { letter-spacing:.18em; font-variant-numeric:tabular-nums; font-size:16px; }
  .tfa-modal-err { margin-top:12px; }
  .tfa-link { width:auto; margin:10px 0 0; padding:0; background:none; color:var(--accent); font-size:12.5px; font-weight:600; }
  .tfa-link:hover { background:none; color:var(--accent-hover); text-decoration:underline; }
  .tfa-status { margin:2px 0 0; }
  .tfa-steps { margin:6px 0 0; padding-left:20px; }
  .tfa-steps > li { margin-bottom:18px; line-height:1.55; }
  .tfa-qr { margin:12px 0; display:flex; }
  .tfa-qr-canvas { width:200px; height:200px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px; image-rendering:pixelated; }
  .tfa-manual { margin-top:6px; }
  .tfa-manual summary { cursor:pointer; color:var(--accent); font-size:12.5px; font-weight:600; }
  .tfa-secret { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
  .tfa-secret code { font-size:14px; letter-spacing:.06em; word-break:break-all; }
  .tfa-code-field { display:flex; flex-direction:column; }
  .tfa-code-field label { margin:0 0 4px; font-size:13px; font-weight:600; }
  .tfa-code-field input { margin:0; }
  .tfa-backup-block { margin-top:16px; padding:16px; border:1px solid #abefc6; border-radius:10px; background:#fcfefd; }
  .tfa-backup-list { list-style:none; margin:10px 0 14px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
  .tfa-backup-list li { font-family:var(--font-mono); font-size:14px; letter-spacing:.04em;
    background:var(--primary-soft); border-radius:6px; padding:6px 10px; text-align:center; }

  /* ── Account statement-history drawer: dense table (# | from | to | opening | closing | download) ── */
  .stmt-ok { color:var(--ok); font-size:12.5px; margin-bottom:6px; }
  .stmt-table { width:100%; border-collapse:collapse; font-size:13px; }
  .stmt-table th { text-align:left; padding:6px 10px; border-bottom:2px solid var(--line); color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .stmt-table td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .stmt-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .stmt-table tr:last-child td { border-bottom:none; }
  .stmt-gap-row td { background:#fffaeb; color:#92400e; font-size:12px; padding:5px 10px; border-left:3px solid #f59e0b; }
  .stmt-gap-icon { margin-right:6px; }

  /* ── Slice-3: ONE consistent table style ─────────────────────────────────────────
        `.bc-table` is the canonical class for any new table; the existing real <table>s
        (accounts `.bc-acct`, statement `.stmt-table`, workspace `.ws-table`) are grouped onto the
        SAME shell so headers, zebra/hover, and right-aligned numeric columns match everywhere. Numbers
        use the `.num` cell class (right-aligned + tabular figures, grouped via the shared `fmtMoney`).
        The virtualized journal list (`.bcjl-*`, a CSS grid) already matches this header/hover/num style. */
  .bc-table, table.bc-acct, .ws-table, .stmt-table { width:100%; border-collapse:collapse; font-size:13px; }
  .bc-table th, .bc-acct th, .ws-table th, .stmt-table th {
    text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); color:var(--muted);
    font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .bc-table td, .bc-acct td, .ws-table td, .stmt-table td {
    padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
  /* numeric columns: right-aligned + tabular figures so digits line up (fixes the accounts balances) */
  .bc-table td.num, .bc-acct td.num, .ws-table td.num, .stmt-table td.num,
  .bc-table th.num, .bc-acct th.num, .ws-table th.num, .stmt-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
  /* zebra THEN hover (hover must win — same specificity, so it comes later in source) */
  .bc-table tbody tr:nth-child(even), .bc-acct tbody tr:nth-child(even), .stmt-table tbody tr:nth-child(even) { background:rgba(20,20,28,.018); }
  .bc-table tbody tr:hover, .bc-acct tbody tr:hover, .stmt-table tbody tr:hover { background:#f4f4f6; }
  /* shared empty / loading row */
  .bc-table-empty, .bc-table .bc-table-empty td { color:var(--muted); text-align:center; padding:18px 10px; font-size:12.5px; }

  /* ── Payment journal slide-in drawer (session-B) ─────────────────────────────── */
  /* Generalized reusable drawer (.bc-*) — the payment drawer (.pm-*) shares these rules. */
  /* Slice-2: ONE shared slide-in drawer SHELL (`.bc-drawer*`) for every right-side drawer (payment /
     notifications / accounts). Open/close mechanics live in the dom.js primitive (R3-U9); these are the
     shared visual shell. `.bc-drawer--wide` is the only per-drawer variant — the statement table + the
     notifications feed get a touch more room than the 480px default. Payment-only structures inside the
     drawer (the lifecycle stepper / payment-lines) keep their `pm-*` content classes. */
  .bc-backdrop { position:fixed; inset:0; background:rgba(18,18,20,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60; }
  .bc-backdrop.open { opacity:1; pointer-events:auto; }
  .bc-drawer { position:fixed; top:0; right:0; bottom:0; width:min(480px,94vw); background:var(--card); box-shadow:-8px 0 40px rgba(0,0,0,.16);
    transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,0,1); z-index:61; display:flex; flex-direction:column; }
  .bc-drawer.open { transform:translateX(0); }
  .bc-drawer--wide { min-width:min(520px,94vw); } /* statement table / notifications feed: more room than the 480px default */
  .bc-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
  .bc-drawer-head h3 { margin:0; font-size:16px; }
  .bc-drawer-sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
  .bc-drawer-x { background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--muted);
    width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0;
    transition:background .15s ease, color .15s ease; }
  .bc-drawer-x:hover { background:var(--primary-soft); color:var(--fg); }
  .pm-drawer-stepper { padding:14px 16px; }
  .bc-drawer-actions { padding:0 16px 14px; border-bottom:1px solid var(--line); }
  .bc-drawer-body { flex:1 1 auto; min-height:0; overflow:auto; padding:8px 16px 16px; }
  .pm-drawer-lines-head { padding:10px 16px; font-weight:650; font-size:13px; color:var(--muted); border-bottom:1px solid var(--line); }
  .pm-lines { flex:1 1 auto; min-height:0; overflow:auto; display:block; }
  .pm-line { display:flex; flex-direction:column; gap:7px; padding:10px 16px; border-bottom:1px solid var(--line); }
  .pm-line-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .pm-line-main { display:flex; flex-direction:column; min-width:0; }
  .pm-line-sub { font-size:11.5px; color:var(--muted); }
  /* Multi-currency journal: CURRENCY BREAKDOWN box in the drawer header. */
  .pm-ccy-breakdown { margin:0 16px 12px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
  .pm-ccy-label { font-size:10px; letter-spacing:.1em; color:var(--muted); margin-bottom:6px; }
  .pm-ccy-row { display:flex; flex-wrap:wrap; gap:6px 14px; }
  .pm-ccy-item { font-size:12.5px; font-weight:600; color:var(--fg); }
  .pm-mc-banner { margin:0 16px 10px; }
  /* §5.2 batch drawer: header, partial-accept banner, line filter, status chips, per-line reason, subtotals. */
  .pm-batch-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 8px; }
  .pm-batch-label { font-size:10.5px; letter-spacing:.1em; color:var(--muted); }
  .pm-batch-count { font-size:13px; font-weight:600; color:var(--fg); }
  .pm-batch-banner { margin:0 16px 10px; }
  .pm-line-filter { width:calc(100% - 32px); margin:0 16px 10px; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:12.5px; background:#fff; color:var(--fg); }
  .pm-line-filter:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .pm-chips { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 8px; }
  .pm-chip { height:28px; padding:0 11px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font:600 11px var(--font-mono); cursor:pointer; }
  .pm-chip:hover { border-color:#dadfe8; }
  .pm-chip.is-active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
  .pm-batch-summary { padding:0 16px 8px; font-size:12px; }
  .pm-line-reason { display:flex; align-items:flex-start; gap:8px; padding:7px 10px; border-radius:var(--radius-sm); background:var(--danger-soft); font-size:12px; color:#9a2820; }
  .reason-code { flex:none; padding:1px 6px; border-radius:4px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:600; }
  .pm-subtotals { padding:12px 16px 16px; border-top:1px solid var(--line); }
  .pm-subtotals-label { font-size:10.5px; letter-spacing:.08em; color:#aab0bd; margin-bottom:8px; }
  .pm-subtotal-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; font-size:13px; }
  /* §5.3 statement drawer: kicker/subtitle, balance grid, entry rows. */
  .bc-drawer-kicker { font-size:10.5px; letter-spacing:.1em; color:var(--muted); }
  .bc-drawer-sub { font-size:12px; color:var(--muted); margin-top:2px; }
  .st-balances { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); margin:0 16px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
  .st-bal { display:flex; flex-direction:column; gap:4px; padding:11px 13px; background:var(--card); }
  .st-bal-label { font-size:10px; letter-spacing:.08em; color:var(--muted); }
  .st-bal-amt { font-size:14px; font-weight:600; color:var(--fg); }
  .st-entry { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
  .st-entry-main { display:flex; flex-direction:column; min-width:0; }
  .st-entry-sub { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
  .st-entry-right { display:flex; align-items:center; gap:10px; flex:none; }
  .st-entry-amt { font-size:13px; font-weight:600; }
  .st-entry-amt.is-debit { color:var(--danger); }
  .st-entry-amt.is-credit { color:var(--ok); }
  /* §5.4 approvals grouped by funding account: policy banner, group header + funds check, rows. */
  .ap-policy-banner { padding:11px 14px; margin:0 0 14px; background:var(--accent-soft); border:1px solid #dcd9f7; border-radius:var(--radius-sm); font-size:13px; color:var(--fg); }
  .ap-policy-banner .ck-go { background:none; border:0; padding:0 0 0 4px; cursor:pointer; color:var(--accent-ink); font-weight:600; }
  .ap-policy-banner .ck-go:hover { text-decoration:underline; }
  .ap-group { background:var(--card); border:var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
  .ap-group-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; background:#fafbfc; border-bottom:1px solid var(--line); }
  .ap-group-acct { display:flex; align-items:baseline; gap:10px; min-width:0; }
  .ap-group-iban { font-size:12px; color:var(--muted); }
  .ap-group-bal { display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:13px; }
  .ap-group-bal-top { display:flex; align-items:center; gap:8px; }
  .ap-group-bal-lbl { font-size:10px; letter-spacing:.06em; color:var(--muted); }
  .ap-group-asof { font-size:11px; color:var(--muted); }
  .ap-group-pend { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
  .ap-funds { font:600 11px var(--font-mono); padding:2px 9px; border-radius:999px; }
  .ap-funds.is-over { background:var(--danger-soft); color:var(--danger); }
  .ap-funds.is-ok { background:var(--ok-soft); color:var(--ok); }
  .ap-funds.is-unknown { background:#eef0f4; color:var(--muted); }
  .ap-row { display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line); }
  .ap-row:last-child { border-bottom:0; }
  .ap-row-main { display:flex; flex-direction:column; min-width:0; }
  .ap-row-sub { font-size:11.5px; color:var(--muted); }
  .ap-row-amt { font-size:13px; font-weight:600; color:var(--fg); }
  .ap-row-prog { font-size:12px; color:var(--muted); }
  .ap-block { font-size:12px; }
  .ap-row.pointer { cursor:pointer; } .ap-row.pointer:hover { background:#fafbff; }
  /* §5.4 approval detail drawer sections */
  .ap-dr-sect { padding:14px 16px; border-bottom:1px solid var(--line); }
  .ap-dr-label { font-size:10.5px; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
  .ap-dr-acct { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
  .ap-dr-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; border-top:1px solid #f4f5f8; }
  .ap-dr-line:first-of-type { border-top:0; }
  /* Bank setup (Principle 1): read-only "governed by <policy>" line with a link out to Approval Policy. */
  .bk-policy-line { display:flex; align-items:center; gap:14px; padding:14px 18px; margin:14px 0; background:#fafbfc; border:1px solid var(--line); border-radius:var(--radius); }
  .bk-policy-ico { width:32px; height:32px; flex:none; border-radius:var(--radius-sm); background:#eef0f4; color:#4a5470; display:flex; align-items:center; justify-content:center; }
  .bk-policy-text { flex:1; min-width:0; }
  .bk-policy-sub { font-size:13px; color:var(--muted); }
  .bk-policy-name { font-size:14px; font-weight:600; color:var(--fg); }
  /* Bank header: name + mono pill tags (country · pain · channel). Channel colored per type. */
  .bk-bank-name { font-size:22px; font-weight:var(--fw-semi); letter-spacing:-.01em; }
  .bk-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
  .bk-pill { font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:5px; color:#4a5470; background:#f4f5f7; }
  .bk-pill-sftp { color:#0d6b6e; background:#e2f2f1; }
  .bk-pill-ebics { color:#7a3ca8; background:#f1e9fb; }
  .bk-pill-ws { color:var(--accent-ink); background:var(--accent-soft); }
  .bk-pill-live { color:#15703c; background:#e6f3ea; }
  .bk-count { font-size:11px; font-weight:600; color:var(--muted); background:var(--primary-soft); padding:2px 9px; border-radius:999px; }
  /* §F Bank detail DRAWER — right slide-out overview before entering setup. */
  .bk-drawer-backdrop { position:fixed; inset:0; background:rgba(10,16,30,.38); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:40; }
  .bk-drawer-backdrop.open { opacity:1; pointer-events:auto; }
  .bk-drawer { position:fixed; top:0; right:0; bottom:0; width:460px; max-width:92vw; background:#fff;
        box-shadow:-12px 0 40px rgba(10,16,30,.16); transform:translateX(100%);
        transition:transform .32s cubic-bezier(.4,0,.2,1); z-index:50; display:flex; flex-direction:column; }
  .bk-drawer.open { transform:translateX(0); }
  .bk-dr-head { flex:none; padding:20px 24px 18px; border-bottom:var(--hairline); }
  .bk-dr-headrow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .bk-dr-name { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--fg); }
  .bk-dr-key { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:4px; }
  .bk-dr-x { flex:none; width:32px; height:32px; border:var(--hairline); background:#fff; border-radius:var(--radius);
        display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; }
  .bk-dr-x:hover { background:var(--bg); }
  .bk-dr-pills { display:flex; align-items:center; gap:7px; margin-top:13px; flex-wrap:wrap; }
  .bk-dr-pill-setup { color:var(--accent-ink); background:var(--accent-soft); display:inline-flex; align-items:center; gap:5px; }
  .bk-dr-body { flex:1; overflow:auto; padding:20px 24px 24px; }
  .bk-dr-cap { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:#8a93a6; }
  .bk-dr-cap.mt { margin-top:24px; }
  .bk-dr-note { font-size:12px; color:#8a93a6; margin:4px 0 0; }
  .bk-dr-table { margin-top:12px; border:var(--hairline); border-radius:var(--radius); overflow:hidden; }
  .bk-dr-tr { display:flex; justify-content:space-between; gap:12px; padding:10px 13px; border-bottom:1px solid #f1f2f5; }
  .bk-dr-tr:last-child { border-bottom:none; }
  .bk-dr-tr .k { font-size:12.5px; color:var(--muted); }
  .bk-dr-tr .v { font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--fg); }
  .bk-dr-chan { margin-top:10px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius); border:1px solid; }
  .bk-dr-chan-body { flex:1; min-width:0; }
  .bk-dr-chan--idle { border-color:#eef0f3; background:#f6f7f9; }
  .bk-dr-chan--idle .bk-dr-dot { background:#aab0bd; }
  .bk-dr-chan--test { border-color:#f1e3c6; background:#fdf6ec; }
  .bk-dr-chan--test .bk-dr-dot { background:#d98a1a; }
  .bk-dr-chan--live { border-color:#cfe7d8; background:#e6f3ea; }
  .bk-dr-chan--live .bk-dr-dot { background:#1d9a53; }
  .bk-dr-dot { width:8px; height:8px; border-radius:50%; flex:none; }
  .bk-dr-chan-t { font-size:13px; font-weight:600; color:var(--fg); }
  .bk-dr-chan-s { font-family:var(--font-mono); font-size:11.5px; color:#8a93a6; margin-top:1px; }
  .bk-dr-foot { flex:none; border-top:var(--hairline); padding:16px 24px; }
  .bk-dr-actions { display:flex; gap:10px; }
  .bk-dr-foot button { height:42px; border-radius:var(--radius); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
  .bk-dr-grow { flex:1; border:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .bk-dr-primary { background:var(--accent); color:#fff; }
  .bk-dr-primary:hover { background:var(--accent-ink); }
  .bk-dr-navy { background:var(--primary); color:#fff; }
  .bk-dr-navy:hover { background:#222e4d; }
  .bk-dr-ghost { flex:none; padding:0 16px; border:var(--hairline); background:#fff; color:var(--fg); }
  .bk-dr-ghost:hover { background:var(--bg); }
  .bk-dr-remove { flex:none; padding:0 15px; border:1px solid #e6cfcb; background:#fff; color:#b3322b; }
  .bk-dr-remove:hover { background:#fdf1ef; }
  .bk-dr-danger { flex:1; border:none; background:#c0322b; color:#fff; }
  .bk-dr-danger:hover { background:#a32a24; }
  .bk-dr-confirm { display:flex; align-items:flex-start; gap:9px; padding:0 0 12px; }
  .bk-dr-confirm svg { flex:none; margin-top:1px; }
  .bk-dr-confirm-t { font-size:13.5px; font-weight:600; color:var(--fg); }
  .bk-dr-confirm-b { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; }
  /* §F Supported Banks filters: country dropdown + channel chips. */
  .bk-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .bk-filter-sel { width:auto; min-width:150px; margin:0; height:38px; padding:0 30px 0 12px; font-size:13px; }
  .bk-chips { display:flex; flex-wrap:wrap; gap:7px; }
  .bk-chip { height:30px; padding:0 13px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font:600 12.5px var(--font); cursor:pointer; }
  .bk-chip .mono { opacity:.7; font-size:10.5px; }
  .bk-chip:hover { border-color:#dadfe8; }
  .bk-chip.is-active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
  /* Direct screen Advanced settings: collapsible (chevron rotates) + "Payment message format" radio cards. */
  .bk-advanced { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
  .bk-adv-toggle { display:flex; align-items:center; gap:8px; background:none; border:0; padding:0; cursor:pointer; font:600 13px var(--font); color:var(--fg); width:auto; }
  .bk-adv-chev { transition:transform .15s; color:var(--muted); }
  .bk-adv-toggle.open .bk-adv-chev { transform:rotate(180deg); }
  .bk-adv-body { margin-top:12px; }
  .bk-adv-h { font-size:12px; font-weight:600; color:#3f485c; margin-bottom:8px; }
  .bk-adv-opts { display:flex; flex-direction:column; gap:8px; max-width:420px; }
  .bk-adv-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; font-size:13px; }
  .bk-adv-opt input { accent-color:var(--accent); }
  .bk-adv-opt.is-sel, .bk-adv-opt:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
  .pm-steps { list-style:none; margin:0; padding:0; }
  .pm-step { display:flex; gap:10px; padding:6px 0; }
  .pm-step-dot { width:20px; flex-shrink:0; text-align:center; font-weight:700; }
  .pm-step-label { font-weight:600; }
  .pm-step-sub { font-size:12px; color:var(--muted); }
  .pm-step-done .pm-step-dot { color:var(--ok); }
  .pm-step-current .pm-step-dot, .pm-step-current .pm-step-label { color:var(--accent); }
  .pm-step-upcoming .pm-step-label, .pm-step-upcoming .pm-step-dot { color:var(--muted); }
  .pm-step-rejected .pm-step-dot, .pm-step-rejected .pm-step-label { color:var(--danger); }

  /* ── B. Notifications drawer (session-B pt2) ─────────────────────────────────── */
  .notif-bell { font-size:16px; padding:4px 8px; position:relative; }
  /* Slice-4: unread-count badge on the bell. Hidden when zero; the count is decorative (the button's
     aria-label carries the accessible "(N unread)"). */
  .notif-badge { position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
    background:var(--danger); color:#fff; border-radius:9px; font-size:10px; font-weight:700; line-height:16px;
    text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--card); pointer-events:none; }
  /* Slice-4: ONE shared loading placeholder (spinner + label), centered + muted, for lists/drawers/cards. */
  .bc-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:24px 12px; color:var(--muted); font-size:13px; }
  .bc-drawer-actions.notif-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:10px; }
  .notif-tabs { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .notif-tab { height:30px; padding:0 12px; border:none; background:#fff; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; border-right:1px solid var(--line); }
  .notif-tab:last-child { border-right:none; }
  .notif-tab.is-active { background:var(--primary-soft); color:var(--primary); }
  .notif-card { border:1px solid var(--line); border-left:3px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff; }
  .notif-card.notif-bad { border-left-color:var(--danger); }
  .notif-card.notif-warn { border-left-color:var(--warn); }
  /* Info is the common case — keep its bar neutral so warnings/errors actually stand out. */
  .notif-card.notif-info { border-left-color:var(--line); }
  .notif-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
  .notif-msg { font-size:13px; color:var(--fg); line-height:1.4; }
  /* (.pill.warn / .pill.info colours are handled by the dot in the unified .pill rule above) */

  /* ── C. Tables — roomier rows + clearer header treatment ─────────────────────── */
  .bcjl-head, .bcjl-row { padding:14px 16px; }
  .bcjl-head { text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; }
  .bc-acct th { text-transform:none; letter-spacing:0; font-size:12px; color:var(--muted); font-weight:600; padding:12px 14px; }
  .bc-acct td { padding:14px; }
  .bc-acct td.mono { font-weight:600; color:var(--fg); }   /* primary identifier (IBAN) emphasis */
  /* Sortable header buttons (caret shows direction; reset the global button chrome). */
  .th-sort { background:none; border:0; margin:0; padding:0; font:inherit; font-weight:600; color:var(--muted);
             cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:color .15s ease; }
  .th-sort:hover { color:var(--fg); }
  .th-sort:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .th-caret { font-size:9px; color:var(--fg); }
  .bc-acct tbody tr:hover { background:#f8f8f9; }

  /* ── D. Forms / cards — section headers, required asterisk, tabs ──────────────── */
  .card .sect { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
  .req-star { color:var(--danger); margin-left:2px; }
  .tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 14px; }
  .tabs .tab { background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; font-weight:600; font-size:13px; color:var(--muted); cursor:pointer; border-radius:0; width:auto; }
  .tabs .tab.active { color:var(--fg); border-bottom-color:var(--fg); }

  /* Platform-admin company context bar — a deliberately distinct dark strip signalling the admin is acting
     WITHIN a company (an elevated/impersonation context), so it reads differently from the normal --accent UI. */
  .pa-context-bar {
    display:none; /* hidden by default; renderSignedIn shows it via el.style.display='flex' (CSSOM, no inline HTML style= — CSP) */
    align-items:center; justify-content:space-between; gap:12px;
    padding:6px 20px; background:#1e3a5f; color:#bfdbfe; font-size:12px;
    border-bottom:1px solid #1d4ed8; flex-shrink:0;
    /* PA-UX bug 2: a slim STICKY strip — stays pinned to the top so the "← Back to workspace" exit is always
       reachable when scrolled down in the company app, and the transition reads cleanly (app starts at the top
       under the bar, not below the prior scroll). z-index keeps it above the app's sticky topbar. */
    position:sticky; top:0; z-index:60;
  }
  .pa-context-bar strong { color:#fff; }

/* ════════════════════════════════════════════════════════════════════════════════
   PLATFORM-ADMIN REDESIGN — refreshed look for the Workspace console + Operator panel.
   All values come from tokens, so a re-skin (value-swap) re-themes these too. No inline
   styles (CSP-safe). Shared atoms .op-crumbs/.op-head/.op-badge/.op-tabs/.hm-kpis/.kpi
   already exist above and are reused unchanged.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── shared atoms (operator panel + console) ─────────────────────────────────── */
.op-idcell { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.op-av { width:36px; height:36px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
         font-weight:var(--fw-semi); font-size:15px; background:var(--accent-soft); color:var(--accent-ink); }
.op-cellsub { font:11.5px var(--font-mono); color:var(--muted); margin-top:2px; }
.kpi-bad { color:var(--danger); }
.kpi-ok  { color:var(--ok); }

/* ── operator panel additions ────────────────────────────────────────────────── */
.op-tabcount { margin-left:6px; background:var(--danger-soft); color:var(--danger); font:600 10px var(--font-mono); padding:1px 6px; border-radius:999px; }
.rp-table td.ta-r, .rp-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.op-banner.bad { border-left:3px solid var(--danger); }
.op-banner.accent { border-left:3px solid var(--accent); }
.op-empty { background:var(--card); border:var(--hairline); border-radius:12px; padding:48px; text-align:center; }
.op-empty b { display:block; font-size:15px; color:var(--fg); }
.op-empty span { font-size:13px; color:var(--muted); }

/* Each operator-panel table reads as a bordered card (built on the existing .card). The Workspace
   console sections already ship this look via the .ws-panel / .ws-radio-card / .ws-key-reveal classes
   above, so the redesign only needed the operator panel re-skinned — no console class churn. */
.pa-tablecard { padding:0; overflow:hidden; }

/* ════════════════════════════════════════════════════════════════════════════════
   <bc-stepper> — bank-integration wizard stepper (Lit component, src/web/index.ts).
   Token-based; a value-swap re-skins it. Replaces the older .wiz-steps/.wiz-dot bar:
   single connector segments that stop short of each circle (the "line ran into the
   circle" fix) and no active-dot glow.
   ════════════════════════════════════════════════════════════════════════════════ */
bc-stepper { display:block; margin:6px 0 24px; }
.bcs { display:flex; align-items:flex-start; }
.bcs-item { flex:1 1 0; display:flex; align-items:flex-start; min-width:0; }
.bcs-item:last-child { flex:0 0 auto; }      /* last column hugs its circle so spacing reads evenly */
.bcs-step { flex:none; width:64px; display:flex; flex-direction:column; align-items:center; gap:7px;
            background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; }
.bcs-dot { width:30px; height:30px; border-radius:50%; flex:none;
           display:flex; align-items:center; justify-content:center;
           font:600 12.5px var(--font-mono); background:#fff; color:var(--muted); border:1.5px solid #d3d8e2; }
.bcs-dot.done, .bcs-dot.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.bcs-label { font-size:11px; font-weight:500; color:#9aa1b0; text-align:center; line-height:1.25; }
.bcs-label.done { color:#4a5470; }
.bcs-label.active { color:var(--fg); font-weight:var(--fw-semi); }
.bcs-conn { flex:1; height:1.5px; margin:14px 7px 0; min-width:8px; background:#e1e4ea; }
.bcs-conn.done { background:var(--primary); }
.bcs-step:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

/* SFTP "Bank's reply" — section labels separating the PRODUCTION SERVER and TEST CHANNEL field groups. */
.sftp-srv-label { font:600 10.5px var(--font-mono); letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }

/* ── Settings · Active sessions (ASVS 7.5.2) ───────────────────────────────────────────────────────────── */
.sess-list { list-style:none; margin:0; padding:0; }
.sess-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border, #e6e8ee); }
.sess-row:first-child { border-top:0; }
.sess-meta { min-width:0; }
.sess-when { display:flex; align-items:center; gap:8px; }
.sess-pill { font-size:10.5px; }
.sess-sub { margin-top:2px; }
/* ── System Admin console (slice 3a) — dark global console; reuses --accent/--accent-soft/--accent-ink ── */
#system-screen { position:fixed; inset:0; background:#f5f6fa; overflow:auto; z-index:50; }
#system-screen.hidden { display:none; }
.sys-loading, .sys-loading-sm { padding:40px; color:#616b80; font:14px var(--font); }
.sys-loading-sm { padding:14px 0; }
.sys-shell { display:flex; min-height:100vh; }
.sys-sidebar { width:252px; flex:none; background:linear-gradient(180deg,#0e1730 0%,#0a1024 100%); color:#9aa4be; display:flex; flex-direction:column; }
.sys-side-head { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.sys-logo { width:34px; height:34px; border-radius:9px; background:#162143; border:1px solid rgba(255,255,255,.16); color:#fff; font:600 15px var(--font); display:flex; align-items:center; justify-content:center; }
.sys-side-title { color:#fff; font:600 15px var(--font); }
.sys-pill-global { display:inline-block; font:9.5px var(--font-mono); letter-spacing:.1em; color:#aeb6cb; background:rgba(82,71,214,.22); border:1px solid rgba(124,114,232,.35); border-radius:5px; padding:2px 6px; margin-top:3px; }
.sys-signout { grid-column:1/-1; background:#fff; color:#131a2b; border:0; border-radius:8px; padding:8px 16px; font:600 13px var(--font); cursor:pointer; margin-top:4px; }
.sys-signout:hover { background:#eef0f3; }
.sys-ident { padding:10px 18px; font:12px var(--font-mono); color:#7e889f; line-height:1.5; }
.sys-ident span { color:#5e667e; }
/* Nav matches the product's main sidebar (.nav button): full-width, left-aligned flex rows with the active
   accent as a thin ::before bar flush at the rail edge (not an inset border that shifts the label). `flex:1`
   so the footer status line is pushed to the bottom of the rail. */
.sys-nav { display:flex; flex-direction:column; gap:3px; padding:12px; flex:1 1 auto; min-height:0; overflow-y:auto; }
.sys-nav-item { position:relative; display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:0; color:#9aa4be; padding:9px 12px; font:500 13.5px var(--font); border-radius:10px; cursor:pointer; }
.sys-nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.sys-nav-item.active { background:rgba(255,255,255,.07); color:#fff; }
.sys-nav-item.active::before { content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.sys-nav-item:disabled { opacity:.5; cursor:not-allowed; }
.sys-side-foot { margin-top:auto; border-top:1px solid rgba(255,255,255,.07); padding:14px 18px; font:11.5px var(--font-mono); color:#7e889f; display:flex; align-items:center; gap:8px; }
.sys-dot { width:7px; height:7px; border-radius:50%; background:#3fbf6b; box-shadow:0 0 0 3px rgba(63,191,107,.18); }
.sys-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.sys-header { height:62px; background:#fff; border-bottom:1px solid #e6e8ee; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.sys-header h1 { font:600 18px var(--font); letter-spacing:-.01em; color:#131a2b; margin:0; }
.sys-pill-console { font:11.5px var(--font-mono); letter-spacing:.04em; color:var(--accent-ink); background:var(--accent-soft); border:1px solid #ddd9f6; border-radius:6px; padding:5px 11px; }
.sys-content { max-width:1160px; width:100%; margin:0 auto; padding:28px; }
.sys-card { background:#fff; border:1px solid #e6e8ee; border-radius:8px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.sys-card-head { display:flex; justify-content:space-between; gap:16px; padding:22px 24px 18px; border-bottom:1px solid #eef0f3; }
.sys-card-title { font:600 18px var(--font); color:#131a2b; }
.sys-card-sub { font:13px var(--font); color:#616b80; max-width:620px; margin-top:4px; line-height:1.5; }
.sys-card-foot { display:flex; justify-content:space-between; padding:14px 24px; font:12px var(--font-mono); color:#8a93a6; }
.sys-newform { background:#fafbff; padding:18px 24px; border-bottom:1px solid #eef0f3; }
.sys-newform.hidden, .sys-detail.hidden { display:none; }
.sys-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sys-form-foot { display:flex; align-items:center; gap:12px; margin-top:14px; }
.sys-hint-inline { color:#8a93a6; font-size:12px; }
.sys-search { padding:14px 24px; border-bottom:1px solid #eef0f3; }
.sys-label { display:block; font:600 12px var(--font); color:#3f485c; margin-bottom:6px; }
.sys-input { width:100%; height:40px; border:1px solid #e6e8ee; border-radius:6px; background:#fff; padding:0 11px; font:13.5px var(--font); box-sizing:border-box; }
.sys-input.mono { font-family:var(--font-mono); }
.sys-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.sys-trow { display:grid; grid-template-columns:2fr 1fr .8fr .9fr 1fr 22px; gap:8px; align-items:center; padding:14px 24px; }
.sys-thead { background:#fafbfc; font:10.5px var(--font-mono); text-transform:uppercase; color:#8a93a6; padding:9px 24px; }
.sys-trow .num { text-align:right; font-variant-numeric:tabular-nums; }
.sys-prow { border-bottom:1px solid #f1f2f5; cursor:pointer; }
.sys-prow:hover { background:#fafbff; }
.sys-pcell { display:flex; align-items:center; gap:11px; }
.sys-avatar { width:36px; height:36px; border-radius:9px; flex:none; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font:600 15px var(--font); }
.sys-pcell b { font:600 14px var(--font); color:#131a2b; }
.sys-pid { color:#8a93a6; font-size:11px; }
.sys-psub { color:#5b6478; font-size:12px; }
.sys-region { color:#5b6478; font-size:12.5px; }
.sys-muted { color:#aab2c0; }
.sys-chev { color:#8a93a6; }
.sys-empty, .sys-empty-sm { padding:24px; color:#8a93a6; font:13px var(--font); text-align:center; }
.sys-empty-sm { padding:10px; text-align:left; }
.sys-status { font:600 10.5px var(--font-mono); border-radius:20px; padding:3px 9px; }
.sys-st-live { background:#e7f5ec; color:#127a4b; }
.sys-st-onb { background:#fdf3e3; color:#9a6a00; }
.sys-st-susp { background:#fbe9df; color:#b4471f; }
.sys-st-arch { background:#eef0f6; color:#8a93a6; }
.sys-detail { background:#fcfcfe; padding:4px 24px 22px 72px; border-bottom:1px solid #f1f2f5; }
.sys-meta { font:12px var(--font-mono); color:#8a93a6; padding:10px 0; }
.sys-meta b { color:#39414f; }
.sys-sub-h { font:11px var(--font-mono); text-transform:uppercase; color:#8a93a6; margin:6px 0; }
.sys-admins { max-width:560px; background:#fff; border:1px solid #eef0f3; border-radius:6px; }
.sys-admin { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid #f3f4f7; }
.sys-admin:last-child { border-bottom:0; }
.sys-a-avatar { width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font:600 11px var(--font); }
.sys-a-id b { font:600 13px var(--font); color:#131a2b; } .sys-a-id .mono { color:#8a93a6; font-size:11.5px; }
.sys-a-remove { background:transparent; border:0; color:#c0322b; font:600 12px var(--font); cursor:pointer; }
.sys-addadmin { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; max-width:560px; margin-top:10px; }
.sys-actions { display:flex; gap:10px; margin-top:16px; }
.sys-btn-dark { background:#16223f; color:#fff; border:0; border-radius:6px; padding:10px 16px; font:600 13px var(--font); cursor:pointer; }
.sys-btn-dark:hover { background:#1e2c4f; }
.sys-btn-acc { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:10px 16px; font:600 13px var(--font); cursor:pointer; }
.sys-btn-acc:hover { background:var(--accent-hover); }
.sys-btn-outline { background:#fff; border:1px solid #d6dae2; color:#39414f; border-radius:6px; padding:9px 14px; font:600 12.5px var(--font); cursor:pointer; }
.sys-btn-soft { background:#eef0f6; color:#39414f; border:0; border-radius:6px; padding:9px 14px; font:600 12.5px var(--font); cursor:pointer; }
.sys-btn-danger { background:#fff; color:#c0322b; border:1px solid #f0d4d1; border-radius:6px; padding:9px 14px; font:600 12.5px var(--font); cursor:pointer; }
.sys-btn-full { width:100%; margin-top:14px; }
.sys-login { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.sys-login-card { width:380px; max-width:100%; background:#fff; border:1px solid #e6e8ee; border-radius:12px; box-shadow:0 4px 24px rgba(16,24,40,.08); padding:28px; }
.sys-login-brand { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.sys-login-title { color:#131a2b; font:600 15px var(--font); }
.sys-login-h { font:600 16px var(--font); color:#131a2b; margin:0 0 16px; }
.sys-hint { font:12.5px var(--font); color:#616b80; margin-bottom:12px; line-height:1.5; }

/* ── System console · slice 3b sections (Operator Logs / Exceptions / System API / Audit) ───────────────── */
.sys-btn-link { background:transparent; border:0; color:var(--accent-ink); font:600 12.5px var(--font); cursor:pointer; padding:0; margin-left:auto; }
.sys-btn-link:hover { text-decoration:underline; }
.sys-code { font:12.5px var(--font-mono); background:#f4f5f7; border:1px solid #e6e8ee; border-radius:4px; padding:1px 5px; color:#39414f; }
.sys-pad { padding:22px 24px; }
.sys-section-head { margin-bottom:18px; }
.sys-h2 { font:600 18px var(--font); letter-spacing:-.01em; color:#131a2b; margin:0 0 4px; }
.sys-sub { font:13px var(--font); color:#616b80; line-height:1.5; margin:0; max-width:760px; }

/* KPI strip (shared) */
.sys-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.sys-kpi { background:#fff; border:1px solid #e6e8ee; border-radius:10px; padding:15px 16px; }
.sys-kpi-label { font:10.5px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:#8a93a6; }
.sys-kpi-val { font:600 24px var(--font); color:#131a2b; margin:4px 0 2px; }
.sys-kpi-sub { font:12px var(--font); color:#8a93a6; }
.sys-kpi-sub.sys-kpi-ok { color:#127a4b; }
.sys-kpi-sub.sys-kpi-bad { color:#c0322b; }
.sys-kpi-sub.sys-kpi-warn { color:#9a6a00; }

/* Breadcrumb */
.sys-crumbs { display:flex; align-items:center; gap:8px; margin-bottom:14px; font:13px var(--font); }
.sys-crumb-link { color:var(--accent-ink); cursor:pointer; }
.sys-crumb-link:hover { text-decoration:underline; }
.sys-crumb-active { color:#131a2b; font-weight:600; }
.sys-crumb-sep { color:#aab2c0; }
.sys-note { font:12px var(--font-mono); color:#8a93a6; margin-top:12px; line-height:1.5; }

/* Operator Logs roster rows */
.sys-oprow { display:grid; grid-template-columns:2fr 1fr .8fr 1fr .8fr; gap:8px; align-items:center; padding:14px 24px; }
.sys-ttrow { display:grid; grid-template-columns:2fr 1fr 22px; gap:8px; align-items:center; padding:12px 24px; }
.sys-badge-issue { font:600 10px var(--font-mono); background:#fbe6e4; color:#c0322b; border-radius:8px; padding:2px 7px; }

/* Key Registry (slice v1) — built on the documented console tokens. The table is its own column grid; the
   expiry "red" pill reuses the documented error color; everything else reuses sys-* classes. */
.sys-grid-full { grid-column:1 / -1; }
.sys-kr-row { display:grid; grid-template-columns:1.4fr 1fr 1.4fr 1.3fr .8fr .8fr 22px; gap:8px; align-items:center; padding:14px 24px; }
.sys-kr-prow { border-bottom:1px solid #f1f2f5; cursor:pointer; }
.sys-kr-prow:hover { background:#fafbff; }
.sys-kr-row .num { text-align:right; font-variant-numeric:tabular-nums; }
.sys-kr-fp { color:#5b6478; font-size:12px; }
.sys-kr-exp { background:#fbe6e4; color:#c0322b; }          /* red: ≤7 days or expired (documented error token) */
.sys-kr-armored { min-height:120px; resize:vertical; padding:10px 12px; line-height:1.4; }
.sys-kr-usage { display:flex; flex-direction:column; gap:10px; }
.sys-kr-usecompany { background:#fff; border:1px solid #eef0f3; border-radius:6px; padding:10px 12px; }
.sys-kr-useco-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sys-kr-usecount { font:600 10.5px var(--font-mono); background:#edecfb; color:#4035a8; border-radius:20px; padding:3px 9px; }
.sys-kr-useconns { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sys-kr-conn { font-size:11.5px; color:#5b6478; background:#f6f7f9; border-radius:5px; padding:2px 7px; }
.sys-kr-move { margin-top:14px; }
.sys-kr-movecard { background:#fafbff; border:1px solid #e6e8ee; border-radius:8px; padding:16px 18px; }
.sys-kr-move-h { font:600 14px var(--font); color:#131a2b; margin-bottom:6px; }
.sys-kr-warn { font:12.5px var(--font); color:#9a6a00; background:#fdf3e3; border-radius:6px; padding:9px 11px; line-height:1.45; margin:0 0 12px; }
.sys-kr-preview { margin-top:12px; }
.sys-kr-prev-row { display:grid; grid-template-columns:1.4fr 1fr 1.6fr; gap:8px; font-size:11.5px; padding:5px 0; border-top:1px solid #eef0f3; }
/* v2 — scheduled valid-from cutover */
.sys-kr-schedbadge { font:600 10px var(--font-mono); background:#edecfb; color:#4035a8; border-radius:8px; padding:2px 7px; }
.sys-kr-vf { margin:0 0 12px; }
.sys-kr-vf .sys-input { max-width:220px; }
.sys-kr-scheds { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.sys-kr-sched { display:flex; align-items:center; gap:14px; font-size:12px; color:#5b6478; background:#f6f7f9; border-radius:6px; padding:6px 10px; }

/* Exceptions filters + feed */
.sys-filters { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.sys-input-sm { height:38px; width:auto; min-width:180px; flex:0 1 auto; }
.sys-filters .sys-input-sm:last-child { flex:1 1 240px; }
.sys-feed { overflow:hidden; }
.sys-feed-row { display:grid; grid-template-columns:84px 56px 1fr auto; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid #eef0f4; }
.sys-feed-row:first-child { border-top:0; }
.sys-feed-row:hover { background:#fafbff; }
.sys-feed-time { font-size:11.5px; color:#8a93a6; line-height:1.4; }
.sys-sev { font:600 11px var(--font-mono); border-radius:7px; min-width:48px; text-align:center; padding:3px 6px; }
.sys-sev-err { background:#fbe6e4; color:#c0322b; }
.sys-sev-warn { background:#fcf2db; color:#9a6a00; }
.sys-feed-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sys-feed-msg { font:13.5px var(--font); color:#1f2738; }
.sys-feed-meta { font-size:11.5px; color:#8a93a6; }
.sys-feed-empty, .sys-feed .sys-feed-empty { display:flex; flex-direction:column; gap:4px; padding:34px; text-align:center; }
.sys-feed-empty b { color:#39414f; font:600 14px var(--font); }
.sys-feed-empty span { color:#8a93a6; font:13px var(--font); }

/* System API keys + reference */
.sys-keyrow { display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:13px 24px; border-top:1px solid #f1f2f5; }
.sys-key-ico { width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:16px; }
.sys-key-id b { font:600 13.5px var(--font); color:#131a2b; }
.sys-key-mask { color:#8a93a6; font-size:11.5px; }
.sys-keygen { display:flex; gap:10px; padding:16px 24px; border-top:1px solid #eef0f3; }
.sys-keygen .sys-input { flex:1; }
.sys-reveal { background:#0e1730; border-radius:10px; padding:20px 22px; margin-bottom:18px; color:#cfd6e6; }
.sys-reveal-h { font:600 15px var(--font); color:#fff; }
.sys-reveal-sub { font:12.5px var(--font); color:#9aa4be; margin:4px 0 12px; }
.sys-reveal-key { background:#070b18; border:1px solid #1d2742; border-radius:6px; padding:12px 14px; font-size:13px; color:#aee9c6; word-break:break-all; margin-bottom:14px; }
.sys-endpoints { display:grid; gap:18px; margin-top:14px; }
.sys-endpoint-h { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8a93a6; margin-bottom:8px; }
.sys-endpoint-row { display:grid; grid-template-columns:66px auto 1fr; gap:12px; align-items:center; padding:7px 0; border-top:1px solid #f4f5f7; }
.sys-endpoint-path { font-size:12.5px; color:#39414f; }
.sys-endpoint-desc { font:12.5px var(--font); color:#616b80; }
.sys-method { font:600 11px var(--font-mono); text-align:center; border-radius:6px; padding:3px 0; }
.sys-m-get { background:#e6effb; color:#2c5fb0; }
.sys-m-post { background:#e7f5ec; color:#127a4b; }
.sys-m-patch { background:#fcf2db; color:#9a6a00; }
.sys-m-delete { background:#fbe6e4; color:#c0322b; }
.sys-example { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.sys-codepanel { background:#0e1730; border-radius:8px; overflow:hidden; }
.sys-code-h { color:#9aa4be; font-size:10.5px; letter-spacing:.08em; padding:10px 14px 0; }
.sys-codeblock { color:#cfd6e6; font-size:12px; line-height:1.5; padding:10px 14px 14px; margin:0; white-space:pre-wrap; word-break:break-word; }

/* Audit log */
.sys-tamper { font:600 10.5px var(--font-mono); background:#e7f5ec; color:#127a4b; border-radius:7px; padding:3px 8px; margin-left:8px; vertical-align:middle; }
.sys-audit-table { display:block; }
.sys-audit-row { display:grid; grid-template-columns:150px 200px 180px 1fr; gap:12px; align-items:start; padding:12px 24px; border-top:1px solid #f1f2f5; }
.sys-audit-row.sys-thead { background:#fafbfc; font:10.5px var(--font-mono); text-transform:uppercase; color:#8a93a6; padding:9px 24px; align-items:center; }
.sys-audit-when { font-size:11.5px; color:#8a93a6; line-height:1.4; } .sys-audit-when b { color:#39414f; }
.sys-audit-actor { font-size:12px; color:#5b6478; word-break:break-all; }
.sys-audit-detail { font:13px var(--font); color:#1f2738; }
.sys-cat { font:600 11px var(--font-mono); border-radius:7px; padding:2px 8px; }
.sys-cat-platform { background:#edecfb; color:#4035a8; }
.sys-cat-apikey { background:#e0f1f5; color:#0c5f76; }
.sys-cat-admin { background:#eef0f6; color:#5b6478; }
.sys-cat-imp { background:#fcf2db; color:#9a6a00; }
.sys-cat-auth { background:#eef0f6; color:#5b6478; }
.sys-pending { display:flex; flex-direction:column; gap:6px; text-align:left; }
.sys-pending b { color:#39414f; font:600 14px var(--font); }
.sys-pending span { color:#8a93a6; font:13px var(--font); line-height:1.55; }