/* ==========================================================================
   BcKash MFB — iBank Design System (theme.css)
   Ported from the Mobile app's design language, adapted for internet banking.
   Brand: Orange #ff7300 (primary/actions) · Teal #195644 (brand surfaces)
   Loaded FIRST, before page CSS. Stage 1 = tokens + components + auth.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --brand:      #ff7300;  --brand-600: #e66700;  --brand-700: #cc5b00;
    --brand-300:  #ff9a4d;  --brand-100: #ffe7d1;  --brand-50:  #fff4ea;
    /* Accent (teal) */
    --accent:     #195644;  --accent-700: #124035; --accent-600: #1f6a54;
    --accent-300: #4f9784;  --accent-100: #d7e7e1; --accent-50:  #eef5f2;

    /* Neutrals */
    --white: #ffffff;  --ink: #10241d;
    --gray-900:#111827; --gray-800:#1f2937; --gray-700:#374151; --gray-600:#4b5563;
    --gray-500:#6b7280; --gray-400:#9ca3af; --gray-300:#d1d5db; --gray-200:#e5e7eb;
    --gray-100:#f3f4f6; --gray-50:#f9fafb;

    /* Semantic */
    --success:#12805c; --success-bg:#e6f4ee;
    --danger:#dc2626;  --danger-bg:#fdeaea;
    --warning:#d97706; --warning-bg:#fef3e2;
    --info:#2563eb;    --info-bg:#e8f0fe;

    /* Surfaces */
    --bg:#f4f6f5; --surface:#ffffff; --surface-2:#f7f9f8;
    --border:#e6eae8; --hairline:rgba(16,36,29,0.08);

    /* Gradients */
    --grad-brand: linear-gradient(135deg,#1f6a54 0%,#195644 55%,#124035 100%);
    --grad-warm:  linear-gradient(135deg,#ff8a1f 0%,#ff7300 100%);

    /* Typography */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
    --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.125rem;
    --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

    /* Spacing (4pt) */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
    --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;

    /* Radii */
    --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

    /* Elevation */
    --shadow-sm:0 1px 2px rgba(16,36,29,.06);
    --shadow:0 4px 14px rgba(16,36,29,.08);
    --shadow-lg:0 12px 30px rgba(16,36,29,.12);
    --shadow-brand:0 10px 24px rgba(255,115,0,.28);
    --shadow-accent:0 12px 28px rgba(25,86,68,.30);

    --transition:.2s ease;

    /* Back-compat aliases (existing page CSS still resolves during migration) */
    --primary-color: var(--brand);
    --secondary-color: var(--accent);
    --primary-light: var(--brand-300);
    --secondary-light: var(--accent-600);
    --border-radius: var(--r-sm);
    --border-radius-lg: var(--r);

    /* Shell metrics (used from Stage 2) */
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 64px;
    --container: 1200px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body.bk {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bk img, .bk svg { display: block; max-width: 100%; }
.bk a { color: inherit; text-decoration: none; }
.bk button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.bk :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. BUTTONS  (also styles legacy .btn-primary / .btn-outline / .btn-ghost)
   -------------------------------------------------------------------------- */
.bk .btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    height: 48px; padding: 0 var(--sp-5);
    border-radius: var(--r);
    font-size: var(--fs-md); font-weight: var(--fw-semibold);
    line-height: 1; white-space: nowrap;
    transition: transform .08s ease, background var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.bk .btn:active { transform: scale(.985); }
.bk .btn:disabled, .bk .btn.is-loading { opacity: .6; pointer-events: none; }
.bk .btn--block, .bk .btn-block { display: flex; width: 100%; }
.bk .btn--sm, .bk .btn-sm { height: 38px; font-size: var(--fs-sm); border-radius: var(--r-sm); padding: 0 var(--sp-4); }

.bk .btn--primary, .bk .btn-primary { background: var(--brand); color: var(--white); box-shadow: var(--shadow-brand); }
.bk .btn--primary:hover, .bk .btn-primary:hover { background: var(--brand-600); }
.bk .btn--accent, .bk .btn-accent { background: var(--accent); color: var(--white); box-shadow: var(--shadow-accent); }
.bk .btn--accent:hover, .bk .btn-accent:hover { background: var(--accent-700); }
.bk .btn--outline, .bk .btn-outline { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.bk .btn--outline:hover, .bk .btn-outline:hover { background: var(--brand-50); }
.bk .btn--ghost, .bk .btn-ghost { background: var(--gray-100); color: var(--ink); }
.bk .btn--ghost:hover, .bk .btn-ghost:hover { background: var(--gray-200); }
.bk .btn--danger, .bk .btn-danger { background: var(--danger); color: var(--white); }

/* button spinner (legacy .btn-spinner / .spinner markup) */
.bk .btn .btn-spinner { display: none; }
.bk .btn.is-loading .btn-text { visibility: hidden; }
.bk .btn.is-loading .btn-spinner,
.bk .btn.is-loading::after {
    content: ""; position: absolute; display: block;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
    animation: bk-spin .7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   4. FORMS  (styles legacy .form-group / .form-label / .form-input / .form-error)
   -------------------------------------------------------------------------- */
.bk .form-group, .bk .field { margin-bottom: var(--sp-4); }
.bk .form-label, .bk .label {
    display: block; margin-bottom: var(--sp-2);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--gray-700);
}
.bk .form-input, .bk .input, .bk .form-select, .bk .select, .bk textarea {
    width: 100%; height: 50px; padding: 0 var(--sp-4);
    background: var(--surface);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r);
    font-size: var(--fs-md); color: var(--ink); font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none; appearance: none;
}
.bk textarea { height: auto; min-height: 104px; padding: var(--sp-3) var(--sp-4); resize: vertical; }
.bk .form-input::placeholder, .bk .input::placeholder, .bk textarea::placeholder { color: var(--gray-400); }
.bk .form-input:focus, .bk .input:focus, .bk .form-select:focus, .bk .select:focus, .bk textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50);
}
.bk .form-error { margin-top: 6px; font-size: var(--fs-sm); color: var(--danger); min-height: 0; }
.bk .form-group.has-error .form-input,
.bk .field.has-error .input { border-color: var(--danger); }
.bk .field-hint { margin-top: 6px; font-size: var(--fs-sm); color: var(--gray-500); }

/* password field + toggle */
.bk .password-input-group { position: relative; }
.bk .password-input-group .form-input { padding-right: 48px; }
.bk .password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center; color: var(--gray-500);
}
.bk .password-toggle:hover { background: var(--gray-100); }

/* checkbox row */
.bk .checkbox-group { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--gray-600); }
.bk .checkbox-group input { width: 16px; height: 16px; accent-color: var(--brand); }

/* --------------------------------------------------------------------------
   5. CARDS / BADGES / UTILITIES  (foundation for later stages)
   -------------------------------------------------------------------------- */
.bk .card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.bk .card--pad { padding: var(--sp-5); }
.bk .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.bk .badge--success { background: var(--success-bg); color: var(--success); }
.bk .badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.bk .badge--warning { background: var(--warning-bg); color: var(--warning); }
.bk .badge--info    { background: var(--info-bg);    color: var(--info); }

.bk .muted { color: var(--gray-500); }
.bk .text-center { text-align: center; }
.bk .link-action { color: var(--brand); font-weight: var(--fw-semibold); }
.bk .link-action:hover { color: var(--brand-600); }
.bk .hidden, .bk .d-none { display: none !important; }
.bk .text-sm { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   6. AUTH — split-screen sign in / sign up (branded, responsive)
   -------------------------------------------------------------------------- */
.auth-split {
    min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr;
    background: var(--bg);
}
/* Left: teal brand panel */
.auth-brandside {
    position: relative; overflow: hidden;
    background: var(--grad-brand); color: var(--white);
    padding: 56px 56px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brandside::after {
    content: ""; position: absolute; right: -120px; bottom: -120px;
    width: 360px; height: 360px; border-radius: 50%;
    background: rgba(255,115,0,.16);
}
.auth-brandside__logo { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; letter-spacing: .3px; }
.auth-brandside__logo img { height: 40px; width: auto; display: block; flex-shrink: 0; }
.auth-brandside__logo b { color: var(--brand-300); font-weight: 700; }
.auth-brandside__mid { position: relative; z-index: 1; }
.auth-brandside__headline { font-size: 34px; line-height: 1.2; font-weight: 700; margin: 0 0 14px; max-width: 15ch; }
.auth-brandside__sub { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 40ch; }
.auth-brandside__list { margin: 26px 0 0; padding: 0; }
.auth-brandside__list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; color: rgba(255,255,255,.9); }
.auth-brandside__list li::before {
    content: "✓"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.auth-brandside__foot { position: relative; z-index: 1; font-size: 13px; color: rgba(255,255,255,.7); }

/* Right: form panel */
.auth-formside { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-form-wrap { width: 100%; max-width: 400px; }
.auth-form-wrap .brand-mini { display: none; font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 24px; }
.auth-form-wrap .brand-mini img { height: 36px; width: auto; flex-shrink: 0; }
.auth-form-wrap .brand-mini b { color: var(--brand); }
.auth-title { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.auth-subtitle { font-size: var(--fs-md); color: var(--gray-500); margin: 0 0 28px; }
.auth-form .login-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.auth-link { color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.auth-link:hover { color: var(--brand-600); }
.auth-divider { position: relative; text-align: center; margin: 24px 0; }
.auth-divider::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--gray-200); }
.auth-divider span { position: relative; background: var(--bg); padding: 0 12px; color: var(--gray-400); font-size: var(--fs-sm); }
.auth-formside .btn { margin-top: 4px; }
.social-auth .social-btn { width: 100%; margin-bottom: 12px; }
.auth-footer { margin-top: 24px; text-align: center; font-size: var(--fs-sm); color: var(--gray-500); }
.auth-footer a { color: var(--brand); font-weight: var(--fw-semibold); }
.quick-login { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); text-align: center; }
.quick-login h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.quick-login p { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--gray-500); }

/* Auth background for form side (soft) */
.auth-formside { background: var(--bg); }

@media (max-width: 860px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-brandside { display: none; }
    .auth-form-wrap .brand-mini { display: flex; align-items: center; justify-content: center; gap: 10px; }
    .auth-title, .auth-subtitle { text-align: center; }
}

/* Auth extras (signup) */
.bk .form-hint { margin-top: 6px; font-size: var(--fs-sm); color: var(--gray-500); }
.bk .pin-input { letter-spacing: .35em; text-align: center; font-weight: 600; }
.security-notice {
    background: var(--accent-50); border: 1px solid var(--accent-100);
    border-radius: var(--r); padding: 16px 18px; margin-bottom: 24px;
}
.security-notice h3 { margin: 0 0 8px; font-size: var(--fs-md); color: var(--accent-700); }
.security-notice ul { margin: 0; padding-left: 18px; }
.security-notice li { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: 4px; list-style: disc; }
.strength-indicator { margin-top: 10px; }
.strength-bar { height: 6px; border-radius: var(--r-pill); background: var(--gray-200); overflow: hidden; }
.strength-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--danger); transition: width var(--transition), background var(--transition); }
.strength-text { margin-top: 6px; font-size: var(--fs-xs); color: var(--gray-500); }

/* --------------------------------------------------------------------------
   7. MODAL (shared overlay used by login lock, PIN, etc.)
   -------------------------------------------------------------------------- */
.bk .modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(16,36,29,.45); backdrop-filter: blur(2px);
}
.bk .modal {
    width: 100%; max-width: 420px; background: var(--surface);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.bk .modal-header { padding: var(--sp-5) var(--sp-5) 0; }
.bk .modal-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.bk .modal-body { padding: var(--sp-4) var(--sp-5); }
.bk .modal-footer { display: flex; gap: 12px; padding: 0 var(--sp-5) var(--sp-5); }
.bk .modal-footer .btn { flex: 1; }

/* --------------------------------------------------------------------------
   8. TOAST (BCKashUtils.showToast markup)
   -------------------------------------------------------------------------- */
.bk-toast-wrap, .toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 1100;
    display: flex; flex-direction: column; gap: 12px;
    pointer-events: none; max-width: calc(100vw - 40px);
}
.bk .toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 12px;
    min-width: 300px; max-width: 380px; padding: 14px 14px 14px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
    opacity: 0; transform: translateX(26px) scale(.98);
    transition: opacity .28s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
    animation: none;   /* override shared.css .toast slideIn so only this transition runs */
    margin: 0;
}
.bk .toast::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--gray-400);
}
.bk .toast--in { opacity: 1; transform: none; }
.bk .toast--out { opacity: 0; transform: translateX(26px) scale(.98); }
.bk .toast-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-100); color: var(--gray-500);
}
.bk .toast-body { flex: 1; min-width: 0; align-self: center; }
.bk .toast-message { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); font-weight: 500; word-break: break-word; }
.bk .toast-close {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-400); background: none;
    transition: background var(--transition), color var(--transition);
}
.bk .toast-close:hover { background: var(--gray-100); color: var(--gray-700); }

/* type variants — accent bar + colored icon badge (match toast-{type}, keep legacy .success) */
.bk .toast.toast-success::before, .bk .toast.success::before { background: var(--success); }
.bk .toast.toast-success .toast-icon, .bk .toast.success .toast-icon { background: var(--success-bg); color: var(--success); }
.bk .toast.toast-error::before, .bk .toast.error::before { background: var(--danger); }
.bk .toast.toast-error .toast-icon, .bk .toast.error .toast-icon { background: var(--danger-bg); color: var(--danger); }
.bk .toast.toast-warning::before, .bk .toast.warning::before { background: var(--warning); }
.bk .toast.toast-warning .toast-icon, .bk .toast.warning .toast-icon { background: var(--warning-bg); color: var(--warning); }
.bk .toast.toast-info::before, .bk .toast.info::before { background: var(--info); }
.bk .toast.toast-info .toast-icon, .bk .toast.info .toast-icon { background: var(--info-bg); color: var(--info); }

@media (max-width: 560px) {
    .bk-toast-wrap, .toast-container { left: 16px; right: 16px; top: 16px; }
    .bk .toast { min-width: 0; max-width: none; width: 100%; }
}

/* ==========================================================================
   STAGE 2 — APP SHELL (sidebar + topbar) + DASHBOARD
   Restyles the existing shell/page classes; `.bk` scope wins over shared.css.
   ========================================================================== */

/* ---- Layout ---- */
.bk .app-container { display: flex; min-height: 100vh; background: var(--bg); }

/* ---- Sidebar ---- */
.bk .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--border);
    transition: width var(--transition), transform var(--transition);
}
.bk .sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar-h); padding: 0 20px; flex-shrink: 0;
    border-bottom: 1px solid var(--hairline);
}
.bk .brand-logo {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none;          /* clear the shared.css gradient box */
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}
.bk .brand-logo img { width: 38px; height: 38px; object-fit: contain; display: block; background: none; }
.bk .sidebar.collapsed .brand-logo { margin: 0 auto; }
.bk .brand-text { font-size: var(--fs-lg); font-weight: 800; color: var(--accent); letter-spacing: -.01em; }

.bk .sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 0; }
.bk .nav-section { margin-bottom: 18px; }
.bk .nav-section-title {
    margin: 0; padding: 0 22px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-400);
}
.bk .nav-list { list-style: none; margin: 0; padding: 0; }
.bk .nav-item { margin: 0; }
.bk .nav-link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    margin: 2px 12px; padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--gray-600); font-size: var(--fs-base); font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.bk .nav-link:hover { background: var(--gray-50); color: var(--ink); }
.bk .nav-icon {
    width: 24px; height: 24px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--gray-500);
}
.bk .nav-link.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.bk .nav-link.active .nav-icon { color: var(--brand); }
.bk .nav-link.active::before {
    content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--brand);
}

/* ---- Sidebar user ---- */
.bk .sidebar-user { padding: 14px 16px; border-top: 1px solid var(--hairline); flex-shrink: 0; }
.bk .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px; border-radius: var(--r-sm); }
.bk .user-profile:hover { background: var(--gray-50); }
.bk .user-avatar {
    width: 40px; height: 40px; border-radius: var(--r-pill); flex-shrink: 0;
    background: var(--grad-brand); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.bk .user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.bk .user-role { font-size: var(--fs-xs); color: var(--gray-500); }

/* ---- Main + header ---- */
.bk .main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left var(--transition); }
.bk .app-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-h); padding: 0 24px;
    background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
}
.bk .header-left { display: flex; align-items: center; gap: 14px; }
.bk .header-right { display: flex; align-items: center; gap: 8px; }
.bk .sidebar-toggle {
    width: 40px; height: 40px; border-radius: var(--r-pill); font-size: 18px; color: var(--gray-600);
    display: flex; align-items: center; justify-content: center;
}
.bk .sidebar-toggle:hover { background: var(--gray-100); }
.bk .page-title { font-size: var(--fs-xl); font-weight: 700; color: var(--ink); margin: 0; }
.bk .notification-btn { position: relative; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--gray-100); }
.bk .notification-btn:hover { background: var(--gray-200); }
.bk .notification-badge {
    position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--r-pill);
}
.bk .header-right .btn-ghost { width: 42px; height: 42px; border-radius: var(--r-pill); padding: 0; }

.bk .content-area { padding: 24px; max-width: var(--container); margin: 0 auto; }

/* ---- Grid utilities ---- */
.bk .grid { display: grid; gap: 20px; }
.bk .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.bk .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bk .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Cards ---- */
.bk .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.bk .card-header { padding: 18px 20px 0; }
.bk .card-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin: 0; }
.bk .card-subtitle { font-size: var(--fs-sm); color: var(--gray-500); margin: 4px 0 0; }
.bk .card-body { padding: 18px 20px; }
.bk .card-body.p-0 { padding: 0; }

/* ---- Overview cards ---- */
.bk .overview-cards { margin-bottom: 20px; }
.bk .overview-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.bk .overview-card .card-icon {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
    background: var(--accent-50); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.bk .overview-card .card-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.bk .overview-card .card-label { font-size: var(--fs-sm); color: var(--gray-500); margin-top: 2px; }
.bk .card-change { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: var(--fs-xs); font-weight: 600; }
.bk .card-change.positive { color: var(--success); }
.bk .card-change.negative { color: var(--danger); }

/* ---- Balance hero (teal gradient, like Mobile) ---- */
.bk .balance-card {
    position: relative; overflow: hidden;
    background: var(--grad-brand); color: #fff;
    border-radius: var(--r-xl); padding: 26px; margin-bottom: 20px;
    box-shadow: var(--shadow-accent);
}
.bk .balance-card::after {
    content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px;
    border-radius: 50%; background: rgba(255,115,0,.16);
}
.bk .balance-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.bk .account-label { font-size: var(--fs-sm); color: rgba(255,255,255,.8); }
.bk .account-number { font-size: var(--fs-sm); color: rgba(255,255,255,.7); margin-top: 2px; }
.bk .balance-actions { display: flex; gap: 8px; }
.bk .balance-action-btn { width: 36px; height: 36px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; }
.bk .balance-action-btn:hover { background: rgba(255,255,255,.26); }
.bk .balance-amount { position: relative; z-index: 1; margin: 20px 0 6px; font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.bk .balance-amount .currency { font-size: 24px; font-weight: 700; opacity: .85; margin-right: 4px; }
.bk .balance-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.bk .last-updated { font-size: var(--fs-xs); color: rgba(255,255,255,.7); }
.bk .balance-footer .btn { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.bk .balance-footer .btn:hover { background: rgba(255,255,255,.26); }

/* ---- Quick actions ---- */
.bk .actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bk .action-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 16px; border: 1px solid var(--border); border-radius: var(--r);
    transition: border-color var(--transition), transform .08s ease, box-shadow var(--transition);
}
.bk .action-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.bk .action-card:active { transform: scale(.99); }
.bk .action-icon {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: 6px;
    background: var(--brand-50); color: var(--brand);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.bk .action-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.bk .action-subtitle { font-size: var(--fs-xs); color: var(--gray-500); }

/* ---- Transactions list ---- */
.bk .transactions-header, .bk .notifications-header { display: flex; align-items: center; justify-content: space-between; }
.bk .transactions-title, .bk .notifications-title { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.bk .view-all-link { font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
.bk .mark-all-read { font-size: var(--fs-sm); font-weight: 600; color: var(--brand); background: none; }
.bk .transaction-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.bk .transaction-item:last-child { border-bottom: none; }
.bk .transaction-icon { width: 40px; height: 40px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bk .transaction-icon.credit { background: var(--success-bg); color: var(--success); }
.bk .transaction-icon.debit { background: var(--danger-bg); color: var(--danger); }
.bk .transaction-details { flex: 1; min-width: 0; }
.bk .transaction-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.bk .transaction-subtitle { font-size: var(--fs-xs); color: var(--gray-500); }
.bk .transaction-amount { font-weight: 700; font-size: var(--fs-base); }
.bk .transaction-amount.credit { color: var(--success); }
.bk .transaction-amount.debit { color: var(--ink); }

/* ---- Notifications ---- */
.bk .notification-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.bk .notification-item:last-child { border-bottom: none; }
.bk .notification-item.unread { background: var(--brand-50); }
.bk .notification-icon { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk .notification-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.bk .notification-message { font-size: var(--fs-xs); color: var(--gray-600); margin-top: 2px; }
.bk .notification-time { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

/* ---- Account switcher ---- */
.bk .account-switcher { margin: 20px 0; }
.bk .switcher-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk .switcher-title { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.bk .add-account-btn { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bk .account-tabs { display: flex; gap: 12px; flex-wrap: wrap; }
.bk .account-tab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1.5px solid var(--border); border-radius: var(--r); background: var(--surface); }
.bk .account-tab.active { border-color: var(--brand); background: var(--brand-50); }
.bk .account-tab .tab-icon { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.bk .account-tab .tab-label { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.bk .account-tab .tab-balance { font-weight: 700; color: var(--accent); font-size: var(--fs-sm); }

/* ---- Services grid ---- */
.bk .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bk .service-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--r); transition: border-color var(--transition), box-shadow var(--transition); }
.bk .service-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.bk .service-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bk .service-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.bk .service-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin: 0; }
.bk .service-description { font-size: var(--fs-sm); color: var(--gray-500); margin: 0; }

/* --------------------------------------------------------------------------
   9. RESPONSIVE — shell → drawer, grids collapse
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .bk .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .bk .grid-cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .bk .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .bk .sidebar.mobile-open { transform: translateX(0); }
    .bk .main-content, .bk .main-content.expanded { margin-left: 0; }
    /* backdrop (sidebar + main-content are siblings) */
    .bk .sidebar.mobile-open + .main-content::before {
        content: ""; position: fixed; inset: 0; z-index: 999; background: rgba(16,36,29,.45);
    }
    .bk .content-area { padding: 16px; }
    .bk .grid-cols-4, .bk .grid-cols-2 { grid-template-columns: 1fr; }
    .bk .actions-grid, .bk .services-grid { grid-template-columns: 1fr; }
    .bk .balance-amount { font-size: 32px; }
    .bk .page-title { font-size: var(--fs-lg); }
}
/* Collapsed (desktop mini) — hide labels */
.bk .sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.bk .sidebar.collapsed .brand-text,
.bk .sidebar.collapsed .nav-text,
.bk .sidebar.collapsed .nav-section-title,
.bk .sidebar.collapsed .user-info { display: none; }
.bk .sidebar.collapsed .nav-link { justify-content: center; margin: 2px 8px; }
.bk .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0; }
.bk .sidebar.collapsed .user-profile { justify-content: center; }
.bk .main-content.expanded { margin-left: var(--sidebar-w-collapsed); }

/* ==========================================================================
   STAGE 3 — TRANSFER · AIRTIME · BILLS
   ========================================================================== */

/* ---- spacing utilities ---- */
.bk .mb-2 { margin-bottom: 8px; } .bk .mb-3 { margin-bottom: 12px; }
.bk .mb-4 { margin-bottom: 16px; } .bk .mb-6 { margin-bottom: 24px; }
.bk .mt-2 { margin-top: 8px; } .bk .mt-4 { margin-top: 16px; }

/* ---- content page header (title + subtitle inside content-area) ---- */
.bk .page-header { margin-bottom: 22px; }
.bk .page-header .page-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.bk .page-subtitle { font-size: var(--fs-base); color: var(--gray-500); margin: 4px 0 0; }

/* ---- selectable option cards (transfer type / service type) ---- */
.bk .transfer-types, .bk .service-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bk .transfer-type, .bk .service-type {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px; border: 1.5px solid var(--border); border-radius: var(--r);
    cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.bk .transfer-type:hover, .bk .service-type:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.bk .transfer-type.active, .bk .service-type.active { border-color: var(--brand); background: var(--brand-50); }
.bk .type-icon, .bk .service-icon {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
    background: var(--accent-50); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.bk .transfer-type.active .type-icon, .bk .service-type.active .service-icon { background: var(--brand-100); color: var(--brand-700); }
.bk .type-content h4, .bk .service-content h4 { margin: 0 0 3px; font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.bk .type-content p, .bk .service-content p { margin: 0; font-size: var(--fs-sm); color: var(--gray-500); }
.bk .type-fee {
    display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: var(--r-pill);
    background: var(--success-bg); color: var(--success); font-size: var(--fs-xs); font-weight: 600;
}

/* ---- amount input with currency ---- */
.bk .amount-input-group { position: relative; }
.bk .amount-input-group .currency-symbol {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--gray-500); font-weight: 600; font-size: var(--fs-md); pointer-events: none;
}
.bk .amount-input-group .form-input { padding-left: 34px; font-weight: 600; }

/* ---- account-name lookup result ---- */
.bk .recipient-info .info-card {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 10px; padding: 12px 14px;
    background: var(--success-bg); border: 1px solid var(--accent-100); border-radius: var(--r-sm);
}
.bk .recipient-info .info-card strong { color: var(--accent-700); font-size: var(--fs-base); }
.bk .recipient-info .info-card span { color: var(--gray-600); font-size: var(--fs-sm); }

/* ---- recipients / contacts / recent lists ---- */
.bk .recipients-list, .bk .bills-list { display: flex; flex-direction: column; }
.bk .recipient-item, .bk .contact-item, .bk .purchase-item, .bk .bill-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.bk .recipient-item:last-child, .bk .contact-item:last-child,
.bk .purchase-item:last-child, .bk .bill-item:last-child { border-bottom: none; }
.bk .recipient-avatar, .bk .contact-avatar, .bk .purchase-icon, .bk .bill-icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-pill);
    background: var(--accent-50); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.bk .recipient-info, .bk .recipient-details, .bk .contact-details, .bk .purchase-details, .bk .bill-info, .bk .bill-details { flex: 1; min-width: 0; }
.bk .recipient-name, .bk .contact-name, .bk .purchase-number, .bk .bill-name { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.bk .contact-number, .bk .contact-network, .bk .purchase-date, .bk .bill-date { font-size: var(--fs-xs); color: var(--gray-500); }
.bk .purchase-amount, .bk .bill-amount { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.bk .purchase-action, .bk .bill-action { color: var(--brand); font-weight: 600; font-size: var(--fs-sm); }

/* ---- network picker (airtime/data) ---- */
.bk .network-option {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 10px; border: 1.5px solid var(--border); border-radius: var(--r);
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
    text-align: center;
}
.bk .network-option:hover { border-color: var(--brand-300); }
.bk .network-option.active { border-color: var(--brand); background: var(--brand-50); }
.bk .network-logo {
    width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border);
    font-weight: 800; font-size: 12px; color: #111827; letter-spacing: -.3px;
}
.bk .network-logo img { width: 100%; height: 100%; object-fit: cover; }
/* legacy text-badge fallback colours (if any page still uses them) */
.bk .network-logo.mtn { background: #ffcc00; color: #111827; }
.bk .network-logo.airtel { background: #e40000; color: #fff; }
.bk .network-logo.glo { background: #00a651; color: #fff; }
.bk .network-logo.nmobile { background: #006e51; color: #fff; }
.bk .network-name { font-size: var(--fs-xs); font-weight: 600; color: var(--gray-600); }

/* ---- amount preset chips ---- */
.bk .amount-option {
    padding: 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
    text-align: center; font-weight: 700; color: var(--ink); cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.bk .amount-option:hover { border-color: var(--brand-300); }
.bk .amount-option.active { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

/* ---- bill categories ---- */
.bk .bill-category {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 20px 14px; border: 1.5px solid var(--border); border-radius: var(--r);
    cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.bk .bill-category:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.bk .bill-category.active { border-color: var(--brand); background: var(--brand-50); }
.bk .category-icon {
    width: 52px; height: 52px; border-radius: 14px; margin-bottom: 4px;
    background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.bk .category-name { font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.bk .category-description { font-size: var(--fs-xs); color: var(--gray-500); }

/* ---- summaries (transfer / payment / airtime) ---- */
.bk .transfer-summary, .bk .payment-summary, .bk .pin-summary, .bk .purchase-summary {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r); padding: 16px 18px; margin-top: 8px;
}
.bk .transfer-summary h4, .bk .payment-summary h4, .bk .pin-summary h4, .bk .purchase-summary h4 { margin: 0 0 10px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.bk .summary-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: var(--fs-sm); color: var(--gray-600); border-bottom: 1px solid var(--hairline); }
.bk .summary-item span:last-child { font-weight: 600; color: var(--ink); }
.bk .summary-item.total { margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--border); border-bottom: none; font-size: var(--fs-md); }
.bk .summary-item.total span { font-weight: 800; color: var(--accent); }

/* ---- empty state ---- */
.bk .empty-state { text-align: center; padding: 32px 16px; color: var(--gray-500); }
.bk .empty-icon { font-size: 34px; margin-bottom: 8px; opacity: .7; }

/* ---- modal close button (× used by airtime/pin modals) ---- */
.bk .modal-header { display: flex; align-items: center; justify-content: space-between; }
.bk .modal-close { width: 34px; height: 34px; border-radius: var(--r-pill); font-size: 20px; color: var(--gray-500); display: flex; align-items: center; justify-content: center; }
.bk .modal-close:hover { background: var(--gray-100); }

/* ---- option grid wrappers ---- */
.bk .network-selection { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bk .amount-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bk .bill-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bk .contacts-grid, .bk .purchase-list { display: flex; flex-direction: column; }
.bk .custom-amount-group { margin-top: 12px; }

@media (max-width: 768px) {
    .bk .transfer-types, .bk .service-types { grid-template-columns: 1fr; }
    .bk .network-selection, .bk .bill-categories, .bk .amount-options { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   STAGE 4 — ACCOUNTS · CARDS · TRANSACTIONS · STATEMENT
   ========================================================================== */
.bk .mt-6 { margin-top: 24px; }
.bk .text-danger { color: var(--danger); }
.bk .btn-secondary { background: var(--gray-100); color: var(--ink); }
.bk .btn-secondary:hover { background: var(--gray-200); }

/* ---- Debit/credit card face ---- */
.bk .cards-container { display: flex; flex-wrap: wrap; gap: 20px; }
.bk .bank-card {
    position: relative; overflow: hidden;
    width: 100%; max-width: 360px; aspect-ratio: 1.586 / 1; min-height: 200px;
    border-radius: 18px; padding: 22px; color: #fff;
    background: var(--grad-brand); box-shadow: var(--shadow-accent);
    display: flex; flex-direction: column; justify-content: space-between;
}
.bk .bank-card.credit { background: linear-gradient(135deg, #ff8a1f 0%, #cc5b00 100%); box-shadow: var(--shadow-brand); }
.bk .bank-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); }
.bk .card-header-section { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.bk .card-header-section .card-type { font-size: 13px; font-weight: 600; opacity: .9; }
.bk .card-network { font-weight: 800; letter-spacing: 1.5px; }
.bk .card-chip { position: relative; z-index: 1; font-size: 26px; opacity: .9; }
.bk .card-number { position: relative; z-index: 1; font-size: 19px; letter-spacing: 2px; font-weight: 600; }
.bk .card-footer { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; }
.bk .card-footer .card-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; opacity: .72; }
.bk .card-footer .card-value { font-size: 14px; font-weight: 600; }
.bk .card-placeholder {
    width: 100%; max-width: 360px; aspect-ratio: 1.586 / 1; min-height: 200px;
    border: 2px dashed var(--gray-300); border-radius: 18px;
    display: flex; align-items: center; justify-content: center; background: var(--surface-2);
}
.bk .placeholder-content { text-align: center; color: var(--gray-500); }
.bk .placeholder-icon { font-size: 34px; color: var(--gray-400); margin-bottom: 6px; }

/* card request options + actions + stats + quick actions */
.bk .card-type-option {
    display: flex; gap: 12px; align-items: flex-start; padding: 16px;
    border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.bk .card-type-option:hover { border-color: var(--brand-300); }
.bk .card-type-option.active { border-color: var(--brand); background: var(--brand-50); }
.bk .option-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.bk .option-fee { display: inline-block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--gray-500); }
.bk .card-action-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px;
    border: 1px solid var(--border); border-radius: var(--r); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-700);
    transition: border-color var(--transition), background var(--transition);
}
.bk .card-action-btn:hover { border-color: var(--brand-300); background: var(--brand-50); }
.bk .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bk .quick-action { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r); text-align: center; transition: border-color var(--transition), box-shadow var(--transition); }
.bk .quick-action:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.bk .stat-item { padding: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.bk .stat-value { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); }
.bk .stat-label { font-size: var(--fs-sm); color: var(--gray-500); }
.bk .stat-trend { font-size: var(--fs-xs); font-weight: 600; margin-top: 4px; }
.bk .stat-trend.positive { color: var(--success); }
.bk .stat-trend.negative { color: var(--danger); }

/* ---- Accounts ---- */
.bk .account-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bk .account-icon { width: 50px; height: 50px; border-radius: 14px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.bk .account-holder { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.bk .account-type, .bk .account-bank { font-size: var(--fs-sm); color: var(--gray-500); }
.bk .account-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }
.bk .account-status.active, .bk .account-status.verified, .bk .account-status.primary { background: var(--success-bg); color: var(--success); }
.bk .account-status.pending { background: var(--warning-bg); color: var(--warning); }
.bk .balance-label { font-size: var(--fs-sm); color: var(--gray-500); }
.bk .balance-amount { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.bk .detail-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.bk .detail-item:last-child { border-bottom: none; }
.bk .detail-item span:first-child { color: var(--gray-500); }
.bk .detail-item span:last-child { font-weight: 600; color: var(--ink); }
.bk .account-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.bk .accounts-list { display: flex; flex-direction: column; }
.bk .account-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.bk .account-item:last-child { border-bottom: none; }
.bk .bank-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.bk .account-info, .bk .bank-details { flex: 1; min-width: 0; }
.bk .bank-name { font-weight: 600; color: var(--ink); }
.bk .account-number { font-size: var(--fs-sm); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.bk .account-verification { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); margin-top: 8px; }
.bk .verification-icon { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; }
.bk .verification-text { font-weight: 600; color: var(--ink); }
.bk .verification-details { font-size: var(--fs-sm); color: var(--gray-500); }
.bk .verification-result.verified .verification-icon { background: var(--success-bg); color: var(--success); }

/* ---- Transactions: top summary stat cards (direct child of card-body) ---- */
.bk .card-body > .summary-item { display: flex; align-items: center; gap: 12px; padding: 0; border: none; }
.bk .summary-icon { width: 44px; height: 44px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--gray-100); color: var(--gray-600); }
.bk .summary-icon.credit { background: var(--success-bg); color: var(--success); }
.bk .summary-icon.debit { background: var(--danger-bg); color: var(--danger); }
.bk .summary-label { font-size: var(--fs-sm); color: var(--gray-500); }
.bk .summary-amount { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }

/* ---- Transactions: list + filters + detail rows ---- */
.bk .transactions-list { display: flex; flex-direction: column; }
.bk .transaction-ref { font-size: 11px; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.bk .transaction-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.bk .transaction-more { color: var(--gray-400); font-size: 18px; padding: 4px; border-radius: var(--r-pill); }
.bk .transaction-more:hover { background: var(--gray-100); }
.bk .transaction-icon.transfer { background: var(--accent-50); color: var(--accent); }
.bk .transaction-icon.bills { background: var(--info-bg); color: var(--info); }
.bk .transaction-icon.airtime { background: var(--brand-50); color: var(--brand); }
.bk .filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.bk .filter-group { flex: 1; min-width: 150px; }
.bk .search-group { display: flex; gap: 8px; }
.bk .search-group .form-input { flex: 1; }
.bk .search-btn { flex-shrink: 0; height: 50px; }
.bk .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bk .transaction-details-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 6px 16px; }
.bk .detail-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.bk .detail-row:last-child { border-bottom: none; }
.bk .detail-row span:first-child, .bk .detail-row .detail-label { color: var(--gray-500); }
.bk .detail-row span:last-child, .bk .detail-row .detail-value { font-weight: 600; color: var(--ink); }

/* ---- Statement ---- */
.bk .form-grid, .bk .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bk .custom-date-range, .bk .email-delivery { margin-top: 8px; }
.bk .form-actions { display: flex; gap: 12px; margin-top: 8px; }
.bk .statement-details { display: flex; flex-direction: column; gap: 4px; }
.bk .info-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.bk .info-item:last-child { border-bottom: none; }
.bk .info-icon { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk .info-content { flex: 1; }
.bk .statements-list { display: flex; flex-direction: column; }
.bk .statement-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.bk .statement-item:last-child { border-bottom: none; }
.bk .statement-info { flex: 1; min-width: 0; }
.bk .statement-title { font-weight: 600; color: var(--ink); }
.bk .statement-period { font-size: var(--fs-sm); color: var(--gray-500); margin-right: 10px; }
.bk .statement-format { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-xs); font-weight: 700; }
.bk .statement-actions { display: flex; gap: 8px; }
.bk .success-icon { width: 64px; height: 64px; border-radius: var(--r-pill); background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 14px; }
.bk .success-content { text-align: center; }

@media (max-width: 768px) {
    .bk .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .bk .account-actions { grid-template-columns: 1fr; }
    .bk .form-grid, .bk .info-grid { grid-template-columns: 1fr; }
    .bk .filters-row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   STAGE 5 — PROFILE · SETTINGS · SUPPORT
   ========================================================================== */

/* ---- shared row lists (setting / security / verification / session / info) ---- */
.bk .setting-item, .bk .security-item, .bk .verification-item, .bk .session-item {
    display: flex; align-items: center; gap: 14px; padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
}
.bk .setting-item:last-child, .bk .security-item:last-child,
.bk .verification-item:last-child, .bk .session-item:last-child { border-bottom: none; }
.bk .setting-info, .bk .security-content, .bk .verification-content, .bk .session-details { flex: 1; min-width: 0; }
.bk .setting-info h4, .bk .security-title, .bk .session-device { margin: 0 0 2px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.bk .setting-info p, .bk .verification-content, .bk .session-location, .bk .session-time { font-size: var(--fs-sm); color: var(--gray-500); margin: 0; }
.bk .security-icon, .bk .session-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.bk .verification-date { font-size: var(--fs-xs); color: var(--gray-500); }
.bk .security-status { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--gray-100); color: var(--gray-600); }
.bk .security-status.success, .bk .security-status.completed { background: var(--success-bg); color: var(--success); }
.bk .security-status.warning { background: var(--warning-bg); color: var(--warning); }
.bk .session-badge { padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--gray-100); color: var(--gray-600); }
.bk .session-badge.current { background: var(--success-bg); color: var(--success); }

/* ---- badges (profile) ---- */
.bk .badge.verified, .bk .badge.success, .bk .badge.completed { background: var(--success-bg); color: var(--success); }
.bk .badge.warning, .bk .badge.pending { background: var(--warning-bg); color: var(--warning); }
.bk .badge.tier { background: var(--accent-50); color: var(--accent); }

/* ---- profile ---- */
.bk .profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.bk .profile-name { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.bk .profile-phone { font-size: var(--fs-sm); color: var(--gray-500); }
.bk .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bk .security-items, .bk .verification-items { display: flex; flex-direction: column; }
.bk .verification-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; }
.bk .verification-title { margin: 0 0 2px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.bk .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bk .action-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); text-align: left; font-weight: 600; color: var(--ink); transition: border-color var(--transition), background var(--transition); }
.bk .action-btn:hover { border-color: var(--brand-300); background: var(--brand-50); }
.bk .upload-icon { font-size: 28px; color: var(--gray-400); }
.bk .upload-hint { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 4px; }

/* ---- warning banner (profile/settings) ---- */
.bk .warning-message { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--warning-bg); border: 1px solid #f3d7a3; border-radius: var(--r); color: #8a5a00; font-size: var(--fs-sm); }
.bk .warning-icon { flex-shrink: 0; font-size: 18px; }

/* ---- settings: tabs + panels + toggle + sessions ---- */
.bk .settings-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
.bk .settings-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--gray-500); font-weight: 600; font-size: var(--fs-sm); border-bottom: 2px solid transparent; white-space: nowrap; }
.bk .settings-tab:hover { color: var(--ink); }
.bk .settings-tab.active { color: var(--brand-700); border-bottom-color: var(--brand); }
.bk .settings-panel { display: none; }
.bk .settings-panel.active { display: block; }
.bk .toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.bk .toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk .toggle-slider { position: absolute; inset: 0; cursor: pointer; background: var(--gray-300); border-radius: var(--r-pill); transition: background var(--transition); }
.bk .toggle-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--transition); }
.bk .toggle-switch input:checked + .toggle-slider { background: var(--brand); }
.bk .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.bk .sessions-list { display: flex; flex-direction: column; }
.bk .btn-warning { background: var(--warning); color: #fff; }
.bk .btn-danger { background: var(--danger); color: #fff; }

/* ---- support: FAQ accordion ---- */
.bk .faq-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bk .faq-category { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.bk .faq-category:hover { border-color: var(--brand-300); }
.bk .faq-category.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.bk .faq-list { display: flex; flex-direction: column; gap: 10px; }
.bk .faq-item { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color var(--transition); }
.bk .faq-item.active { border-color: var(--brand-300); }
.bk .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: var(--fs-base); }
.bk .faq-toggle { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform var(--transition); }
.bk .faq-item.active .faq-toggle { transform: rotate(45deg); }
.bk .faq-answer { max-height: 0; overflow: hidden; padding: 0 18px; color: var(--gray-600); font-size: var(--fs-sm); line-height: 1.6; transition: max-height var(--transition), padding var(--transition); }
.bk .faq-item.active .faq-answer { max-height: 500px; padding: 0 18px 16px; }

/* ---- support: help options / info / radios / chat ---- */
.bk .quick-help-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bk .help-option { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.bk .help-option:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.bk .help-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.bk .help-content { flex: 1; min-width: 0; }
.bk .help-status { font-size: var(--fs-xs); font-weight: 600; color: var(--success); }
.bk .info-hours { font-size: var(--fs-xs); color: var(--gray-500); }
.bk .support-info { display: flex; flex-direction: column; }
.bk .status-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--gray-600); }
.bk .status-indicator .online, .bk .status-indicator.online::before { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.bk .search-group .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.bk .form-textarea { width: 100%; min-height: 110px; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--gray-200); border-radius: var(--r); font-family: inherit; font-size: var(--fs-md); color: var(--ink); resize: vertical; }
.bk .form-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.bk .radio-group { display: flex; flex-direction: column; gap: 10px; }
.bk .radio-option { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-sm); color: var(--gray-700); }
.bk .radio-option input { position: absolute; opacity: 0; }
.bk .radio-custom { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--gray-300); border-radius: 50%; position: relative; transition: border-color var(--transition); }
.bk .radio-option input:checked + .radio-custom { border-color: var(--brand); }
.bk .radio-option input:checked + .radio-custom::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
.bk .message { display: flex; gap: 10px; margin-bottom: 14px; }
.bk .message-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.bk .message-content { flex: 1; min-width: 0; }
.bk .message-text { display: inline-block; padding: 10px 14px; background: var(--gray-100); border-radius: var(--r); font-size: var(--fs-sm); color: var(--ink); }
.bk .message.sent { flex-direction: row-reverse; }
.bk .message.sent .message-text { background: var(--brand-50); color: var(--brand-700); }
.bk .message-time { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
.bk .chat-status { font-size: var(--fs-xs); color: var(--success); font-weight: 600; }

@media (max-width: 768px) {
    .bk .profile-stats { grid-template-columns: 1fr; }
    .bk .form-row { grid-template-columns: 1fr; }
    .bk .quick-help-options { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STAGE 6 — POLISH / QA
   ========================================================================== */

/* SVG chrome icons inherit color + size */
.bk .nav-icon svg,
.bk .sidebar-toggle svg,
.bk .notification-btn svg,
.bk .header-right .btn svg { width: 20px; height: 20px; }
.bk .nav-link.active .nav-icon svg { stroke-width: 2.3; }

/* Dedupe: hide the small sticky-topbar title when a page already shows a
   large content .page-header (transfer/bills/airtime/accounts/cards/... ). */
.bk .main-content:has(.page-header) .app-header .page-title { display: none; }

/* Focus visibility (keyboard) */
.bk .btn:focus-visible,
.bk .nav-link:focus-visible,
.bk .settings-tab:focus-visible,
.bk .toggle-slider:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Subtle scrollbars in scroll regions */
.bk .sidebar-nav::-webkit-scrollbar,
.bk .settings-nav::-webkit-scrollbar { width: 6px; height: 6px; }
.bk .sidebar-nav::-webkit-scrollbar-thumb,
.bk .settings-nav::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
.bk .sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* Link hover consistency */
.bk .view-all-link:hover, .bk .mark-all-read:hover,
.bk .auth-link:hover, .bk .link-action:hover { text-decoration: underline; }

/* Card hover lift (dashboard/services already; make consistent app-wide) */
.bk .action-card, .bk .service-card, .bk .help-option,
.bk .bill-category, .bk .transfer-type, .bk .service-type, .bk .network-option { will-change: transform; }

/* Smooth in-page anchor + reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    .bk *, .bk *::before, .bk *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   DASHBOARD DECLUTTER — greeting + full-width quick actions
   ========================================================================== */
.bk .dash-greeting { margin-bottom: 20px; }
.bk .dash-greeting__hi { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.02em; }
.bk .dash-greeting__sub { font-size: var(--fs-base); color: var(--gray-500); margin: 4px 0 0; }
.bk .actions-grid--row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .bk .actions-grid--row { grid-template-columns: repeat(2, 1fr); } }

/* ---- dashboard wiring polish ---- */
.bk .tx-state { padding: 28px 16px; font-size: var(--fs-sm); }
.bk .balance-amount .amount-hidden { font-size: 40px; font-weight: 800; letter-spacing: 3px; }
.bk .balance-card .refresh-btn { border-color: rgba(255,255,255,.4); color: #fff; }
.bk .balance-card .refresh-btn:hover { background: rgba(255,255,255,.16); }

/* ---- balance card refinements ---- */
.bk .balance-card .account-label { font-size: var(--fs-md); font-weight: 600; color: #fff; }
.bk .balance-card .account-number { font-size: var(--fs-sm); color: rgba(255,255,255,.85); letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.bk .balance-action-btn { background: rgba(255,255,255,.14); }
.bk .balance-action-btn:hover { background: rgba(255,255,255,.26); }
.bk .balance-action-btn svg { width: 18px; height: 18px; }
.bk .balance-card .refresh-btn { display: inline-flex; align-items: center; gap: 6px; }
.bk .balance-card .refresh-btn svg { width: 16px; height: 16px; }

/* ---- balance card: readable white amount + caption + depth (fixes dark-on-dark) ---- */
.bk .balance-card .balance-amount { color: #fff; margin: 4px 0 10px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.bk .balance-card .balance-amount .currency { color: rgba(255,255,255,.9); }
.bk .balance-card .balance-amount .amount-hidden { color: #fff; }
.bk .balance-caption {
    position: relative; z-index: 1; margin-top: 20px;
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em;
    font-weight: 700; color: rgba(255,255,255,.72);
}
/* Softer, layered decoration for depth */
.bk .balance-card::after {
    right: -70px; top: -90px; width: 260px; height: 260px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,115,0,.12) 55%, transparent 72%);
}
.bk .balance-card::before {
    content: ""; position: absolute; left: -60px; bottom: -100px; width: 220px; height: 220px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); z-index: 0;
}
.bk .balance-card .balance-footer { margin-top: 18px; }

/* ---- dashboard quick actions — premium centered cards ---- */
.bk .actions-grid--row { gap: 16px; }
.bk .actions-grid--row .action-card {
    flex-direction: column; align-items: center; text-align: center; gap: 3px;
    padding: 22px 14px; border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface);
    transition: transform .12s ease, box-shadow var(--transition), border-color var(--transition);
}
.bk .actions-grid--row .action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.bk .actions-grid--row .action-icon {
    width: 54px; height: 54px; border-radius: 16px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-sm);
}
.bk .actions-grid--row .action-icon svg { width: 24px; height: 24px; }
.bk .actions-grid--row .action-card:nth-child(1) .action-icon { background: linear-gradient(135deg,#1f6a54,#124035); }
.bk .actions-grid--row .action-card:nth-child(2) .action-icon { background: linear-gradient(135deg,#ff8a1f,#ff7300); }
.bk .actions-grid--row .action-card:nth-child(3) .action-icon { background: linear-gradient(135deg,#16a34a,#0f7a52); }
.bk .actions-grid--row .action-card:nth-child(4) .action-icon { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.bk .actions-grid--row .action-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.bk .actions-grid--row .action-subtitle { font-size: var(--fs-xs); color: var(--gray-500); }

/* ---- auth: OTP boxes + password requirements (forgot / reset / signup) ---- */
.bk .otp-inputs { display: flex; gap: 8px; justify-content: space-between; margin: 6px 0 4px; }
.bk .otp-input {
    width: 100%; height: 56px; text-align: center; font-size: 20px; font-weight: 700;
    border: 1.5px solid var(--border); border-radius: var(--r); background: var(--white);
    color: var(--ink); transition: border-color var(--transition), box-shadow var(--transition);
}
.bk .otp-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.bk .otp-input.filled { border-color: var(--accent); background: var(--accent-50); }
.bk .password-requirements { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.bk .password-requirements .req { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--gray-500); }
.bk .password-requirements .req::before { content: '○'; font-size: 11px; }
.bk .password-requirements .req.met { color: var(--success); }
.bk .password-requirements .req.met::before { content: '✓'; }
.bk .verification-info { background: var(--gray-100); border-radius: var(--r); padding: 14px 16px; margin: 4px 0 18px; text-align: center; }
.bk .verification-info .label { font-size: var(--fs-xs); color: var(--gray-500); display: block; margin-bottom: 4px; }
.bk .verification-info .email { font-weight: 700; color: var(--accent); }

/* ============ Create Account (chooser / personal / corporate) ============ */
.bk .mt-3 { margin-top: 16px; }
.bk .flex { display: flex; }
.bk .gap-3 { gap: 12px; }

/* Chooser cards */
.bk .choice-card {
    display: flex; align-items: center; gap: 16px;
    padding: 18px; margin-bottom: 14px;
    border: 1.5px solid var(--border); border-radius: var(--r);
    background: var(--white); cursor: pointer; text-decoration: none; color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.bk .choice-card:hover { border-color: var(--brand); box-shadow: var(--shadow, 0 6px 18px rgba(16,36,29,.08)); transform: translateY(-1px); }
.bk .choice-card__icon {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--accent)); color: var(--white);
}
.bk .choice-card__text { flex: 1; min-width: 0; }
.bk .choice-card__text h3 { font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.bk .choice-card__text p { font-size: var(--fs-sm); color: var(--gray-500); margin: 0; line-height: 1.4; }
.bk .choice-card__chev { flex-shrink: 0; font-size: 22px; color: var(--gray-400); }

/* Step progress + step sections (personal wizard) */
.bk .signup-steps { display: flex; gap: 8px; margin: 0 0 22px; }
.bk .signup-steps__dot { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--gray-200); transition: background var(--transition); }
.bk .signup-steps__dot.is-active { background: var(--brand); }
.bk .signup-step { display: none; }
.bk .signup-step.is-active { display: block; animation: stepIn .25s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Existing-account confirm card + notice */
.bk .confirm-card { background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.bk .confirm-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: var(--fs-sm); margin: 0; }
.bk .confirm-card__row span { color: var(--gray-500); }
.bk .confirm-card__row strong { color: var(--ink); text-align: right; word-break: break-word; }
.bk .notice { border-radius: var(--r); padding: 16px; margin: 12px 0; }
.bk .notice--info { background: var(--accent-50); border: 1px solid var(--accent-100); }
.bk .notice p { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--ink); }

/* Corporate KYC */
.bk .group-title { font-size: var(--fs-base); font-weight: 700; color: var(--accent); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.bk .group-title:first-of-type { margin-top: 8px; }
.bk .person-row, .bk .doc-row { border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 12px; background: var(--gray-50); }
.bk .person-row__head, .bk .doc-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk .person-row__label { font-size: var(--fs-sm); font-weight: 700; color: var(--gray-700); }
.bk .person-row__remove { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--gray-200); color: var(--gray-600); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.bk .person-row__remove:hover { background: var(--danger); color: var(--white); }
.bk .doc-file-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--r); background: var(--white); cursor: pointer; font-size: var(--fs-sm); color: var(--gray-700); width: 100%; justify-content: center; }
.bk .doc-file-btn:hover { border-color: var(--brand); color: var(--brand); }
.bk .doc-status { font-size: var(--fs-xs); margin-top: 6px; color: var(--gray-500); }
.bk .doc-status--ok { color: var(--success); }
.bk .doc-status--err { color: var(--danger); }
.bk .doc-hint { font-size: var(--fs-sm); color: var(--gray-500); margin: 0 0 12px; line-height: 1.5; }

/* Checkbox lines */
.bk .checkline { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--gray-700); margin: 10px 0; cursor: pointer; }
.bk .checkline input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand); }
.bk .signature-input { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 18px; }

/* ---- Accounts page: switchable account list + active chip ---- */
.bk .account-item { width: 100%; text-align: left; background: none; cursor: pointer; }
.bk .account-item:hover { background: var(--surface-2, var(--gray-50)); }
.bk .account-item.is-active { cursor: default; }
.bk .account-item.is-active .bank-logo { background: var(--brand); color: #fff; }
.bk .account-item__right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.bk .account-item__bal { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bk .switch-link { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }
.bk .account-item:hover .switch-link { text-decoration: underline; }
.bk .account-chip { align-self: flex-start; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); color: #fff; font-size: var(--fs-xs); font-weight: 700; }

/* ---- Transactions page: filter tabs, date filter, date groups ---- */
.bk .tx-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--gray-100); border-radius: var(--r-pill); margin-bottom: 16px; }
.bk .tx-tab { padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); background: none; transition: background var(--transition), color var(--transition); }
.bk .tx-tab.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(16,36,29,.1); }
.bk .tx-filter { padding: 16px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--gray-50); }
.bk .tx-filter__actions { display: flex; gap: 8px; margin-top: 4px; }
.bk .date-group + .date-group { margin-top: 4px; }
.bk .date-header { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); padding: 14px 0 4px; }

/* Transactions: clickable rows open the receipt */
.bk .transaction-item.is-clickable { cursor: pointer; transition: background var(--transition); }
.bk .transaction-item.is-clickable:hover { background: var(--gray-50); }

/* ==========================================================================
   MOTION — subtle, professional entrance + modal transitions.
   Bank-grade: soft, quick, no bounce. Fully disabled for users with
   prefers-reduced-motion via the guard above.
   ========================================================================== */
@keyframes bkRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bkFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkPopIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* In-app page content rises in with a soft stagger */
.bk .content-area > * { animation: bkRise .5s cubic-bezier(.16, 1, .3, 1) both; }
.bk .content-area > *:nth-child(1) { animation-delay: .03s; }
.bk .content-area > *:nth-child(2) { animation-delay: .09s; }
.bk .content-area > *:nth-child(3) { animation-delay: .15s; }
.bk .content-area > *:nth-child(4) { animation-delay: .21s; }
.bk .content-area > *:nth-child(5) { animation-delay: .27s; }
.bk .content-area > *:nth-child(n+6) { animation-delay: .32s; }

/* Auth + receipt pages */
.bk .auth-form-wrap { animation: bkRise .55s cubic-bezier(.16, 1, .3, 1) both; }
.bk .auth-brandside { animation: bkFadeIn .6s ease both; }
.bk .receipt-shell { animation: bkRise .5s cubic-bezier(.16, 1, .3, 1) both; }

/* Modals fade the backdrop + pop the card */
.bk .modal-overlay:not(.hidden) { animation: bkFadeIn .18s ease both; }
.bk .modal-overlay:not(.hidden) .modal { animation: bkPopIn .3s cubic-bezier(.16, 1, .3, 1) both; }

/* Gentle lift on switchable rows (they already have a colour hover) */
.bk .account-item, .bk .beneficiary-item { transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.bk .account-item:not(.is-active):hover, .bk .beneficiary-item:hover { transform: translateY(-1px); }