@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── First National Bank — Vibrant Design System ── */
:root {
    /* ── Electric Cyber Cyan & Sapphire Azure Design Tokens (Default) ── */
    --brand-primary: #00d2ff;
    --brand-secondary: #0ea5e9;
    --brand-tertiary: #38bdf8;
    --brand-primary-strong: #00172e;
    --brand-secondary-strong: #002b52;
    --brand-tertiary-strong: #03497d;
    --brand-glow: rgba(0, 210, 255, 0.45);
    --brand-glow-subtle: rgba(0, 210, 255, 0.18);
    --pill-glow: rgba(0, 210, 255, 0.35);
    --page-bg: #020712;
    --section-bg: #030d1e;
    --surface-glass: rgba(2, 13, 30, 0.85);
    --surface-glass-card: rgba(255, 255, 255, 0.04);
    --border-glass: rgba(255, 255, 255, 0.12);
    --border-glass-glow: rgba(0, 210, 255, 0.55);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 150ms;
    --duration-medium: 300ms;
    --duration-slow: 600ms;

    --bg-body: #020712;
    --bg-app: #030d1e;
    --bg-header: rgba(3, 13, 30, 0.92);
    --bg-stepper: #041228;
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-hover: rgba(0, 210, 255, 0.08);
    --bg-muted: #041022;
    --bg-input: rgba(255, 255, 255, 0.04);
    --text-primary: #f8fafc;
    --text-secondary: rgba(255, 255, 255, 0.88);
    --text-muted: rgba(255, 255, 255, 0.62);
    --text-light: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-input: rgba(255, 255, 255, 0.14);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --transition: 0.25s cubic-bezier(0.2, 0, 0, 1);
    --spring: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Outfit', -apple-system, sans-serif;
    
    /* Vibrant Live Banking Accent Palette */
    --primary: #00d2ff;
    --primary-dark: #0284c7;
    --primary-light: #38bdf8;
    --primary-bg: rgba(0, 210, 255, 0.15);
    --primary-grad: linear-gradient(16.7deg, #00d2ff 9.6%, #0284c7 36.3%, #00172e 92.5%);
    
    --success: #10b981;
    --success-dark: #059669;
    --success-light: #34d399;
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-grad: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    
    --cyan: #06b6d4;
    --cyan-dark: #0891b2;
    --cyan-bg: rgba(6, 182, 212, 0.15);
    --cyan-grad: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #38bdf8 100%);
    
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --warning-grad: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --danger-grad: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    
    --purple: #a855f7;
    --purple-bg: rgba(168, 85, 247, 0.15);
    --purple-grad: linear-gradient(135deg, #7e22ce 0%, #a855f7 100%);
    
    --rose: #f43f5e;
    --rose-grad: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
    
    --toast-success: #10b981;
    --toast-error: #ef4444;
    --toast-warning: #f59e0b;
    --toast-info: #06b6d4;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM LUXURY PALETTES (LOCAL PREVIEW)
   ══════════════════════════════════════════════════════════════ */

/* Theme 1: Electric Cyan / Azure Sapphire (Current Default) */
:root,
html[data-theme="cyan"],
body[data-theme="cyan"],
[data-theme="cyan"] {
    --brand-primary: #00d2ff !important;
    --brand-secondary: #0ea5e9 !important;
    --brand-tertiary: #38bdf8 !important;
    --brand-primary-strong: #00172e !important;
    --brand-secondary-strong: #002b52 !important;
    --brand-tertiary-strong: #03497d !important;
    --brand-glow: rgba(0, 210, 255, 0.45) !important;
    --brand-glow-subtle: rgba(0, 210, 255, 0.18) !important;
    --pill-glow: rgba(0, 210, 255, 0.35) !important;
    --border-glass-glow: rgba(0, 210, 255, 0.55) !important;
    --primary: #00d2ff !important;
    --primary-dark: #0284c7 !important;
    --primary-light: #38bdf8 !important;
    --primary-bg: rgba(0, 210, 255, 0.15) !important;
    --primary-grad: linear-gradient(16.7deg, #00d2ff 9.6%, #0284c7 36.3%, #00172e 92.5%) !important;
}

/* Theme 2: Imperial Vault Gold (Gringotts Goblin Vault & Swiss Private Reserve) */
html[data-theme="gold"],
body[data-theme="gold"],
[data-theme="gold"] {
    --brand-primary: #fbbf24 !important;
    --brand-secondary: #f59e0b !important;
    --brand-tertiary: #fde047 !important;
    --brand-primary-strong: #241400 !important;
    --brand-secondary-strong: #451a03 !important;
    --brand-tertiary-strong: #78350f !important;
    --brand-glow: rgba(251, 191, 36, 0.55) !important;
    --brand-glow-subtle: rgba(251, 191, 36, 0.22) !important;
    --pill-glow: rgba(251, 191, 36, 0.42) !important;
    --border-glass-glow: rgba(251, 191, 36, 0.65) !important;
    --primary: #fbbf24 !important;
    --primary-dark: #d97706 !important;
    --primary-light: #fde047 !important;
    --primary-bg: rgba(251, 191, 36, 0.18) !important;
    --primary-grad: linear-gradient(16.7deg, #fbbf24 9.6%, #d97706 36.3%, #241400 92.5%) !important;
}

/* Theme 3: Royal Amethyst / Hyper-Fintech Violet (Modern Monzo / Revolut Metal) */
html[data-theme="purple"],
body[data-theme="purple"],
[data-theme="purple"] {
    --brand-primary: #c084fc !important;
    --brand-secondary: #a855f7 !important;
    --brand-tertiary: #e879f9 !important;
    --brand-primary-strong: #19052b !important;
    --brand-secondary-strong: #2e1065 !important;
    --brand-tertiary-strong: #581c87 !important;
    --brand-glow: rgba(192, 132, 252, 0.55) !important;
    --brand-glow-subtle: rgba(192, 132, 252, 0.22) !important;
    --pill-glow: rgba(192, 132, 252, 0.42) !important;
    --border-glass-glow: rgba(192, 132, 252, 0.65) !important;
    --primary: #c084fc !important;
    --primary-dark: #7e22ce !important;
    --primary-light: #e879f9 !important;
    --primary-bg: rgba(168, 85, 247, 0.18) !important;
    --primary-grad: linear-gradient(16.7deg, #c084fc 9.6%, #7e22ce 36.3%, #19052b 92.5%) !important;
}

/* Theme 4: Luminescent Cyber Mint / Neo Emerald (Terminal Green / High-Tech Crypto) */
html[data-theme="mint"],
body[data-theme="mint"],
[data-theme="mint"] {
    --brand-primary: #00f2a9 !important;
    --brand-secondary: #10b981 !important;
    --brand-tertiary: #6ee7b7 !important;
    --brand-primary-strong: #012217 !important;
    --brand-secondary-strong: #064e3b !important;
    --brand-tertiary-strong: #047857 !important;
    --brand-glow: rgba(0, 242, 169, 0.55) !important;
    --brand-glow-subtle: rgba(0, 242, 169, 0.22) !important;
    --pill-glow: rgba(0, 242, 169, 0.42) !important;
    --border-glass-glow: rgba(0, 242, 169, 0.65) !important;
    --primary: #00f2a9 !important;
    --primary-dark: #059669 !important;
    --primary-light: #6ee7b7 !important;
    --primary-bg: rgba(0, 242, 169, 0.18) !important;
    --primary-grad: linear-gradient(16.7deg, #00f2a9 9.6%, #059669 36.3%, #012217 92.5%) !important;
}

/* Theme 5: Luminous Rose / Velvet Crimson (Cartier / Luxury Private Wealth) */
html[data-theme="rose"],
body[data-theme="rose"],
[data-theme="rose"] {
    --brand-primary: #fb7185 !important;
    --brand-secondary: #f43f5e !important;
    --brand-tertiary: #fda4af !important;
    --brand-primary-strong: #2b0610 !important;
    --brand-secondary-strong: #4c0519 !important;
    --brand-tertiary-strong: #881337 !important;
    --brand-glow: rgba(251, 113, 133, 0.55) !important;
    --brand-glow-subtle: rgba(251, 113, 133, 0.22) !important;
    --pill-glow: rgba(251, 113, 133, 0.42) !important;
    --border-glass-glow: rgba(251, 113, 133, 0.65) !important;
    --primary: #fb7185 !important;
    --primary-dark: #e11d48 !important;
    --primary-light: #fda4af !important;
    --primary-bg: rgba(251, 113, 133, 0.18) !important;
    --primary-grad: linear-gradient(16.7deg, #fb7185 9.6%, #e11d48 36.3%, #2b0610 92.5%) !important;
}


        .dark {
            --bg-body: #0b1120;
            --bg-app: #111827;
            --bg-header: #030712;
            --bg-stepper: #0f172a;
            --bg-card: #1e293b;
            --bg-hover: #1e3a5f;
            --bg-muted: #0f172a;
            --bg-input: #1e293b;
            --text-primary: #f1f5f9;
            --text-secondary: #e2e8f0;
            --text-muted: #94a3b8;
            --text-light: #64748b;
            --border-color: #334155;
            --border-input: #475569;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
            --primary-bg: #1e3a5f;
            --success-bg: #082f49;
            --warning-bg: #78350f;
            --danger-bg: #7f1d1d;
            --purple-bg: #2e1065;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: var(--font);
            background: var(--page-bg, #010507);
            color: var(--text-secondary);
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            overflow-x: hidden;
            transition: background var(--transition), color var(--transition);
        }

        .app-wrap {
            position: relative;
            width: 100%;
            max-width: 100% !important;
            margin: 0;
            background: rgba(2, 11, 14, 0.96);
            border: none;
            border-radius: 0;
            box-shadow: none;
            min-height: 100vh;
            overflow: hidden;
            transition: background var(--transition), box-shadow var(--transition);
        }

        /* Ambient Aurora mesh inside main app */
        .app-aurora-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .app-glow {
            position: absolute;
            border-radius: 50%;
            mix-blend-mode: screen;
            pointer-events: none;
        }

        .app-glow-1 {
            width: 700px;
            height: 700px;
            top: -120px;
            right: 5%;
            background: radial-gradient(50% 50% at 50% 50%, rgba(0, 210, 255, 0.16) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 75%);
            filter: blur(80px);
            animation: auroraDrift1 22s ease-in-out infinite alternate;
        }

        .app-glow-2 {
            width: 800px;
            height: 800px;
            top: 550px;
            left: -150px;
            background: radial-gradient(50% 50% at 50% 50%, rgba(2, 132, 199, 0.15) 0%, rgba(0, 23, 46, 0.2) 50%, transparent 75%);
            filter: blur(95px);
            animation: auroraDrift2 26s ease-in-out infinite alternate;
        }

        /* ── UNIVERSAL DIALOGUE & CARD MOVING BEAM / BREATHING GLOW (mal.ai style) ── */
        @keyframes dialogueBeamSweep {
            0% {
                transform: translateX(-120%);
                opacity: 0;
            }
            15% {
                opacity: 1;
            }
            85% {
                opacity: 1;
            }
            100% {
                transform: translateX(380%);
                opacity: 0;
            }
        }

        @keyframes dialogueGlowBreath {
            0%, 100% {
                box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(0, 210, 255, 0.08);
                border-color: rgba(255, 255, 255, 0.12);
            }
            50% {
                box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 38px rgba(0, 210, 255, 0.22);
                border-color: rgba(0, 210, 255, 0.38);
            }
        }

        /* Moving beam on cards, heroes, tabbed wraps, and modals */
        .sub-wrap,
        .welcome-hero,
        .ubo-card,
        .doc-preview-box,
        .audit-modal-box,
        .mailbox-panel {
            position: relative;
            overflow: hidden;
            animation: dialogueGlowBreath 6s ease-in-out infinite;
            transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
        }

        .sub-wrap::after,
        .welcome-hero::after,
        .ubo-card::after,
        .doc-preview-box::after,
        .audit-modal-box::after,
        .mailbox-panel::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 38%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.4) 20%, #00d2ff 50%, #ffffff 75%, #0ea5e9 90%, transparent 100%);
            box-shadow: 0 0 14px #00d2ff, 0 0 28px rgba(0, 210, 255, 0.85);
            animation: dialogueBeamSweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            pointer-events: none;
            z-index: 10;
        }

        .upload-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 45%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.4) 20%, #00d2ff 50%, #ffffff 75%, #0ea5e9 90%, transparent 100%);
            box-shadow: 0 0 12px #00d2ff;
            animation: dialogueBeamSweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            pointer-events: none;
            z-index: 5;
        }

        #uc-1::after { animation-delay: 0s; }
        #uc-2::after { animation-delay: 1.1s; }
        #uc-3::after { animation-delay: 2.2s; }
        #uc-4::after { animation-delay: 3.3s; }

        .hdr {
            background: rgba(2, 11, 14, 0.92);
            color: #ffffff;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
            position: sticky;
            top: 0;
            z-index: 200;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
            gap: 16px;
            white-space: nowrap;
        }

        .hdr-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .hdr-brand .logo-mark {
            width: 58px;
            height: 30px;
            background: #eef2f6;
            border: 1.5px solid rgba(56, 130, 220, 0.6);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 0 8px rgba(56, 130, 220, 0.5), 0 0 18px rgba(30, 80, 160, 0.3);
        }

        .hdr-brand .logo-mark img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hdr-brand .brand-name {
            font-weight: 800;
            font-size: 15px;
            letter-spacing: -0.3px;
            color: #ffffff;
            display: block;
            line-height: 1.2;
            white-space: nowrap;
            background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hdr-brand .brand-sub {
            display: block;
            color: rgba(255, 255, 255, 0.5);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        /* ── Unified Central Cockpit Capsule ── */
        .hdr-cockpit-capsule {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(0, 210, 255, 0.22);
            border-radius: 999px;
            height: 38px;
            padding: 0 16px;
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            transition: all 0.3s var(--ease-out);
            flex-shrink: 0;
        }

        .hdr-cockpit-capsule:hover {
            border-color: rgba(0, 210, 255, 0.45);
            background: rgba(255, 255, 255, 0.07);
            box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
        }

        .capsule-step-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }

        .capsule-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--brand-primary, #00d2ff);
            box-shadow: 0 0 10px var(--brand-primary, #00d2ff);
            display: inline-block;
            animation: pulseGlow 2s infinite;
        }

        .capsule-step {
            font-size: 11px;
            font-weight: 700;
            color: #38bdf8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .capsule-sep {
            color: rgba(255, 255, 255, 0.25);
            font-size: 11px;
        }

        .capsule-title {
            font-size: 12px;
            font-weight: 600;
            color: #f1f5f9;
            letter-spacing: 0.1px;
        }

        .capsule-company-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #cbd5e1;
        }

        .capsule-divider {
            color: rgba(255, 255, 255, 0.2);
            font-size: 12px;
            font-weight: 300;
            margin: 0 2px;
        }

        .tag-icon {
            font-size: 13px;
        }

        .tag-name {
            font-weight: 700;
            color: #ffffff;
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tag-crn {
            font-size: 11px;
            color: #38bdf8;
            font-family: monospace;
            font-weight: 600;
            background: rgba(0, 210, 255, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .tag-cuid {
            font-size: 10px;
            color: #f59e0b;
            font-family: monospace;
            font-weight: 700;
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            padding: 1px 6px;
            border-radius: 4px;
        }

        /* ── Header Action Buttons ── */
        .hdr-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            margin-left: auto;
        }

        .btn-hdr-action {
            height: 36px;
            padding: 0 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            white-space: nowrap;
            width: auto !important;
            max-width: max-content;
            flex-shrink: 0;
            line-height: 1;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            text-decoration: none;
            border: 1px solid transparent;
            outline: none;
            box-sizing: border-box;
        }

        .btn-hdr-action:hover {
            transform: translateY(-1px);
        }

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

        .btn-hdr-action .hdr-btn-icon {
            font-size: 13px;
            display: inline-flex;
            align-items: center;
        }

        .btn-hdr-audit {
            background: rgba(0, 210, 255, 0.08);
            border-color: rgba(0, 210, 255, 0.28);
            color: #38bdf8;
        }

        .btn-hdr-audit:hover {
            background: rgba(0, 210, 255, 0.18);
            border-color: rgba(0, 210, 255, 0.55);
            color: #ffffff;
            box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
        }

        .btn-hdr-save {
            background: rgba(99, 102, 241, 0.12);
            border-color: rgba(99, 102, 241, 0.35);
            color: #c7d2fe !important;
            width: auto !important;
            height: 36px !important;
        }

        .btn-hdr-save:hover {
            background: rgba(99, 102, 241, 0.25);
            border-color: rgba(99, 102, 241, 0.6);
            color: #ffffff !important;
            box-shadow: 0 0 16px rgba(99, 102, 241, 0.25);
        }

        .btn-hdr-rm {
            background: rgba(245, 158, 11, 0.1);
            border-color: rgba(245, 158, 11, 0.3);
            color: #fbbf24;
            text-decoration: none;
        }

        .btn-hdr-rm:hover {
            background: rgba(245, 158, 11, 0.22);
            border-color: rgba(245, 158, 11, 0.55);
            color: #ffffff;
            box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
        }

        .btn-hdr-rework {
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.25);
            color: #fca5a5;
        }

        .btn-hdr-rework:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.5);
            color: #ffffff;
        }

        .btn-hdr-rework.active {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(239, 68, 68, 0.6);
            color: #f87171;
        }

        .btn-hdr-signout {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.35);
            color: #fca5a5 !important;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0 14px;
            height: 36px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
        }

        .btn-hdr-signout:hover {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(239, 68, 68, 0.65);
            color: #ffffff !important;
            box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
            transform: translateY(-1px);
        }

        /* ══════════════════════════════════════════════════════════════
           EXECUTIVE LEFT-SIDEBAR DUAL-COLUMN ARCHITECTURE
           ══════════════════════════════════════════════════════════════ */
        .portal-app-shell {
            display: flex;
            min-height: 100vh;
            background: #02070a;
            position: relative;
            width: 100%;
        }

        /* ── Left Sidebar Navigation Hub ── */
        .portal-sidebar {
            width: 260px;
            min-width: 260px;
            max-width: 260px;
            height: 100vh;
            position: sticky;
            top: 0;
            display: flex;
            flex-direction: column;
            background: rgba(3, 13, 17, 0.96);
            border-right: 1px solid rgba(0, 210, 255, 0.14);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
            z-index: 100;
            overflow: hidden;
            flex-shrink: 0;
        }

        /* Sidebar Brand */
        .sidebar-brand-header {
            padding: 18px 20px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            flex-shrink: 0;
        }

        .sidebar-logo-mark {
            width: 76px;
            height: 40px;
            background: #eef2f6;
            border: 1.5px solid rgba(56, 130, 220, 0.6);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(56, 130, 220, 0.55), 0 0 22px rgba(30, 80, 160, 0.3);
            flex-shrink: 0;
        }

        .sidebar-logo-mark .sidebar-logo-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .sidebar-brand-text .brand-name {
            font-weight: 800;
            font-size: 14px;
            letter-spacing: -0.3px;
            color: #ffffff;
            display: block;
            line-height: 1.2;
            white-space: nowrap;
        }

        .sidebar-brand-text .brand-sub {
            display: block;
            color: rgba(255, 255, 255, 0.5);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        /* Active Company Identity & Progress Card */
        .sidebar-company-card {
            margin: 12px 14px 6px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 210, 255, 0.18);
            border-radius: 12px;
            padding: 12px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            flex-shrink: 0;
        }

        .scc-identity {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .scc-icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .scc-details {
            min-width: 0;
            flex: 1;
        }

        .scc-company-name {
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .scc-meta-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 3px;
            flex-wrap: wrap;
        }

        .scc-crn {
            font-size: 10px;
            color: #38bdf8;
            font-family: monospace;
            font-weight: 700;
            background: rgba(0, 210, 255, 0.12);
            padding: 1px 5px;
            border-radius: 4px;
        }

        .scc-cuid {
            font-size: 10px;
            color: #f59e0b;
            font-family: monospace;
            font-weight: 700;
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.28);
            padding: 1px 5px;
            border-radius: 4px;
        }

        .scc-prog-container {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding-top: 8px;
        }

        .scc-prog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 5px;
        }

        .scc-prog-val {
            color: #38bdf8;
            font-weight: 700;
            font-family: monospace;
        }

        .scc-prog-track {
            height: 5px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            overflow: hidden;
        }

        .scc-prog-fill {
            height: 100%;
            background: linear-gradient(90deg, #0284c7 0%, #00d2ff 100%);
            border-radius: 999px;
            box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
            transition: width 0.4s ease;
        }

        .scc-prog-hint {
            margin-top: 5px;
            font-size: 10.5px;
        }

        /* Vertical Sequential Stepper */
        .sidebar-stepper {
            flex: 1;
            padding: 8px 12px 28px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            overflow-y: auto;
            scrollbar-width: thin;
        }

        .sidebar-step {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 9px 12px;
            border-radius: 12px;
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            position: relative;
            text-decoration: none;
            width: 100%;
            box-sizing: border-box;
            white-space: normal;
        }

        .sidebar-step:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
            transform: translateX(3px);
        }

        .sidebar-step.active {
            background: rgba(0, 210, 255, 0.12);
            border-color: rgba(0, 210, 255, 0.45);
            box-shadow: 0 0 20px rgba(0, 210, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .sidebar-step.done {
            background: rgba(14, 165, 233, 0.03);
        }

        .sidebar-step.rework-disabled {
            opacity: 0.35;
            cursor: not-allowed;
            pointer-events: none;
        }

        .step-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            width: 24px;
        }

        .step-node .snum {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.25s ease;
        }

        .sidebar-step.active .snum {
            background: var(--brand-primary, #00d2ff);
            color: #00172e;
            border-color: #00d2ff;
            box-shadow: 0 0 14px rgba(0, 210, 255, 0.7);
            transform: scale(1.06);
        }

        .sidebar-step.done .snum {
            background: var(--brand-secondary-strong, #002b52);
            color: #38bdf8;
            border-color: rgba(0, 210, 255, 0.4);
        }

        .step-line-down {
            width: 2px;
            height: 24px;
            background: rgba(255, 255, 255, 0.09);
            margin: 4px 0 -4px;
            transition: background 0.3s ease;
        }

        .sidebar-step.done .step-line-down {
            background: linear-gradient(180deg, rgba(0, 210, 255, 0.6) 0%, rgba(0, 210, 255, 0.2) 100%);
        }

        .step-body {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .step-body .step-label {
            font-size: 12.5px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.75);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }

        .sidebar-step.active .step-body .step-label {
            color: #ffffff;
            font-weight: 700;
        }

        .sidebar-step.done .step-body .step-label {
            color: #e2e8f0;
        }

        .step-body .stime {
            font-size: 10.5px;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 175px;
        }

        .sidebar-step.active .stime {
            color: #38bdf8;
            font-weight: 500;
        }

        /* Sidebar Permanent Footer with Logout */
        .sidebar-footer {
            padding: 14px 14px 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(2, 9, 12, 0.98);
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-shrink: 0;
        }

        .sidebar-footer-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 10px;
            font-size: 12.5px;
            font-weight: 600;
            font-family: var(--font);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            text-decoration: none;
            border: 1px solid transparent;
            width: 100%;
            box-sizing: border-box;
            justify-content: flex-start;
        }

        .sidebar-rm-btn {
            background: rgba(245, 158, 11, 0.08);
            border-color: rgba(245, 158, 11, 0.25);
            color: #fbbf24;
        }

        .sidebar-rm-btn:hover {
            background: rgba(245, 158, 11, 0.2);
            border-color: rgba(245, 158, 11, 0.5);
            color: #ffffff;
        }

        .sidebar-logout-btn {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.32);
            color: #fca5a5;
            font-weight: 700;
        }

        .sidebar-logout-btn:hover {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(239, 68, 68, 0.65);
            color: #ffffff;
            box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
            transform: translateY(-1px);
        }

        .sidebar-footer-btn .sfb-icon {
            font-size: 14px;
        }

        /* ── Main Right Column ── */
        .portal-main-column {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: #02070a;
        }

        /* Slim Executive Topbar */
        .portal-topbar {
            height: 56px;
            padding: 0 28px;
            background: rgba(2, 9, 12, 0.88);
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 90;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            gap: 16px;
            flex-shrink: 0;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .btn-sidebar-hamburger {
            display: none;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            flex-direction: column;
            gap: 3px;
        }

        .btn-sidebar-hamburger .hamburger-bar {
            width: 16px;
            height: 2px;
            background: #fff;
            border-radius: 2px;
        }

        .topbar-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .topbar-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--brand-primary, #00d2ff);
            box-shadow: 0 0 8px #00d2ff;
            flex-shrink: 0;
            animation: pulseGlow 2s infinite;
        }

        .topbar-step-pill {
            color: #38bdf8;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 11px;
        }

        .topbar-sep {
            color: rgba(255, 255, 255, 0.3);
            font-size: 11px;
        }

        .topbar-title {
            color: #ffffff;
            font-weight: 600;
            font-size: 13px;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            margin-left: auto;
        }

        /* Screens Content Body */
        .portal-content-body {
            flex: 1;
            padding: 18px 36px 36px;
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
            margin: 0;
        }

        /* Mobile Drawer & Off-canvas */
        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(4px);
            z-index: 290;
        }

        @media (max-width: 980px) {
            .portal-sidebar {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
                z-index: 300;
            }

            .portal-sidebar.drawer-open {
                transform: translateX(0);
                box-shadow: 8px 0 40px rgba(0, 0, 0, 0.85);
            }

            .sidebar-backdrop.active {
                display: block;
            }

            .btn-sidebar-hamburger {
                display: flex;
            }

            .portal-topbar {
                padding: 0 16px;
            }

            .portal-content-body {
                padding: 16px 16px 60px;
            }
        }

        .save-hint {
            color: var(--brand-primary, #00d2ff);
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 600;
        }

        .rework-banner {
            display: none;
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.35);
            border-radius: 12px;
            padding: 16px 24px;
            margin: 12px 32px 0;
            color: #fef08a;
            align-items: flex-start;
            gap: 12px;
            backdrop-filter: blur(8px);
        }

        .rework-banner.active {
            display: flex;
        }

        .rework-banner .rb-icon {
            font-size: 24px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .rework-banner .rb-content {
            flex: 1;
            min-width: 0;
        }

        .rework-banner .rb-title {
            font-weight: 700;
            font-size: 16px;
            display: block;
        }

        .rework-banner .rb-desc {
            margin: 4px 0 0;
            font-size: 14px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.85);
        }

        .rework-banner .rb-action {
            font-size: 13px;
            color: #fbbf24;
            margin-top: 6px;
            font-weight: 600;
        }

        .rework-banner .rb-close-btn {
            background: rgba(245, 158, 11, 0.18);
            border: 1px solid rgba(245, 158, 11, 0.45);
            border-radius: 999px;
            color: #fef08a;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            margin-left: 12px;
            align-self: flex-start;
            flex-shrink: 0;
            white-space: nowrap;
            font-family: var(--font);
            outline: none;
        }

        .rework-banner .rb-close-btn:hover {
            background: rgba(239, 68, 68, 0.28);
            border-color: rgba(239, 68, 68, 0.6);
            color: #ffffff;
            box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
            transform: translateY(-1px);
        }

        .rework-banner .rb-close-x {
            font-size: 16px;
            line-height: 1;
            font-weight: 800;
        }

        /* ── DIRECTIONAL SCREEN NAVIGATION (mal.ai MOTION) ── */
        .screen {
            display: none;
            opacity: 0;
            transform: scale(0.985);
            transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
        }

        .screen.active {
            display: block;
            opacity: 1;
            transform: scale(1);
            animation: screenFadeIn 0.45s var(--ease-out) forwards;
        }

        .screen.slide-from-right {
            display: block;
            animation: slideFromRight 0.45s var(--ease-out) forwards;
        }

        .screen.slide-from-left {
            display: block;
            animation: slideFromLeft 0.45s var(--ease-out) forwards;
        }

        @keyframes screenFadeIn {
            from { opacity: 0; transform: translateY(12px) scale(0.985); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes slideFromRight {
            from { opacity: 0; transform: translateX(36px) scale(0.985); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }

        @keyframes slideFromLeft {
            from { opacity: 0; transform: translateX(-36px) scale(0.985); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }

        .screen-body {
            padding: 4px 0 24px;
            transition: padding 0.3s;
        }

        .welcome-hero {
            background: linear-gradient(135deg, #07192a 0%, #03121f 100%);
            border: 1px solid rgba(0, 210, 255, 0.2);
            border-radius: var(--radius-lg);
            padding: 20px 28px;
            color: #fff;
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .hero-split {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            text-align: left;
            position: relative;
            z-index: 2;
        }

        .hero-split .hero-left {
            flex: 1.3;
            min-width: 0;
        }

        .hero-split .hero-right {
            flex: 0.9;
            min-width: 300px;
        }

        .hero-tip-box {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 210, 255, 0.22);
            border-radius: 12px;
            padding: 14px 18px;
            backdrop-filter: blur(8px);
        }

        @media (max-width: 980px) {
            .hero-split {
                flex-direction: column;
                text-align: center;
            }
            .hero-split .hero-right {
                width: 100%;
                min-width: 0;
            }
        }

        .welcome-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 70% 50%, rgba(79, 70, 229, 0.20), transparent 60%);
            animation: breathe 4s ease-in-out infinite;
        }

        @keyframes breathe {
            0%,
            100% {
                transform: scale(1);
                opacity: 0.6;
            }
            50% {
                transform: scale(1.1);
                opacity: 1;
            }
        }

        .welcome-hero h1 {
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 10px;
            position: relative;
        }

        .welcome-hero p {
            color: #94a3b8;
            font-size: 15px;
            margin: 0;
            position: relative;
        }

        .time-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid rgba(14, 165, 233, 0.25);
            color: var(--success);
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 20px;
            position: relative;
        }

        .particle-container {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: floatUp linear infinite;
        }

        @keyframes floatUp {
            0% {
                transform: translateY(100%) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100%) scale(1);
                opacity: 0;
            }
        }

        .section-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 6px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color var(--transition);
        }

        .section-sub {
            color: var(--text-muted);
            font-size: 14px;
            margin: 0 0 28px;
            transition: color var(--transition);
        }

        .g2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px 20px;
        }

        .g3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px 20px;
        }

        .g4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px 20px;
        }

        .span2 {
            grid-column: span 2;
        }

        .span3 {
            grid-column: span 3;
        }

        .span4 {
            grid-column: span 4;
        }

        .toggles-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 16px 0;
            padding: 14px 18px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
        }

        @media (max-width: 1280px) {
            .g4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .g4, .g3, .g2, .toggles-row {
                grid-template-columns: 1fr;
            }
            .span2, .span3, .span4 {
                grid-column: span 1;
            }
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .field label {
            font-size: 13px;
            font-weight: 700;
            color: #cbd5e1 !important;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color var(--transition);
        }

        .field input,
        .field select,
        .field textarea {
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            color: #ffffff !important;
            background: rgba(3, 16, 36, 0.75) !important;
            backdrop-filter: blur(8px);
            transition: all var(--spring);
            font-family: var(--font);
            width: 100%;
            caret-color: var(--brand-primary, #00d2ff) !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--brand-primary, #00d2ff) !important;
            background: rgba(4, 24, 52, 0.88) !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.25), 0 0 20px rgba(0, 210, 255, 0.15) !important;
            transform: scale(1.005);
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: #64748b !important;
            font-weight: 400;
        }

        .field select option {
            background: #0f172a;
            color: #ffffff;
        }

        .field input.auto-filled {
            background: rgba(16, 185, 129, 0.15) !important;
            border-color: #10b981 !important;
            color: #34d399 !important;
            font-weight: 600;
        }

        body.light .field label {
            color: #1e293b !important;
        }

        body.light .field input,
        body.light .field select,
        body.light .field textarea {
            color: #0f172a !important;
            background: #ffffff !important;
            border: 1.5px solid #cbd5e1 !important;
            caret-color: #4f46e5 !important;
        }

        body.light .field input:focus,
        body.light .field select:focus,
        body.light .field textarea:focus {
            background: #ffffff !important;
            border-color: #4f46e5 !important;
            color: #0f172a !important;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important;
        }

        body.light .field select option {
            background: #ffffff;
            color: #0f172a;
        }

        body.light .field input.auto-filled {
            background: #ecfdf5 !important;
            border-color: #10b981 !important;
            color: #065f46 !important;
        }

        .field .help {
            font-size: 12px;
            color: var(--text-light);
            font-style: italic;
            transition: color var(--transition);
        }

        .auto-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: var(--success-dark);
            font-weight: 700;
            font-style: normal;
            background: var(--success-bg);
            border-radius: 4px;
            padding: 2px 6px;
            width: fit-content;
        }

        .auto-badge.badge-expired {
            background: rgba(239, 68, 68, 0.2) !important;
            color: #fca5a5 !important;
            border: 1px solid rgba(239, 68, 68, 0.5) !important;
            font-weight: 700 !important;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
            animation: pulseExpired 2s infinite ease-in-out;
        }

        .date-expired {
            border: 1.5px solid #ef4444 !important;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
            background: rgba(239, 68, 68, 0.08) !important;
            color: #fca5a5 !important;
        }

        .date-expired:focus {
            outline: none !important;
            border-color: #f87171 !important;
            box-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
        }

        @keyframes pulseExpired {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.82; transform: scale(0.98); }
        }

        .tog-group {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tog-btn {
            padding: 10px 24px;
            border: 1.5px solid var(--border-input);
            background: var(--bg-input);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-muted);
            transition: all var(--spring);
            font-weight: 600;
            font-family: var(--font);
        }

        .tog-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: var(--primary-bg);
            transform: translateY(-1px);
        }

        .tog-btn.on {
            border-color: var(--success-dark);
            color: #fff;
            background: linear-gradient(135deg, var(--success), var(--success-dark));
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
        }

        .tog-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
            display: block;
            transition: color var(--transition);
        }

        .banner {
            border-radius: var(--radius-md);
            padding: 10px 16px;
            font-size: 13px;
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-left: 4px solid;
            line-height: 1.5;
            transition: background var(--transition), color var(--transition);
        }

        .banner-info {
            background: var(--primary-bg);
            color: var(--primary-dark);
            border-color: var(--primary);
        }

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

        .banner-warn {
            background: var(--warning-bg);
            color: #9c5c00;
            border-color: var(--warning);
        }

        .banner strong {
            font-weight: 600;
        }

        .upload-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }

        @media (max-width: 1200px) {
            .upload-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .upload-grid {
                grid-template-columns: 1fr;
            }
        }

        .upload-card {
            border: 1.5px dashed rgba(0, 210, 255, 0.35);
            border-radius: var(--radius-lg);
            padding: 18px 14px;
            background: linear-gradient(135deg, rgba(3, 18, 42, 0.75), rgba(2, 13, 30, 0.88));
            text-align: center;
            transition: all var(--spring);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .upload-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent, rgba(0, 210, 255, 0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s;
            pointer-events: none;
        }

        .upload-card:hover::before {
            transform: translateX(100%);
        }

        .upload-card:hover {
            border-color: var(--brand-primary, #00d2ff);
            background: linear-gradient(135deg, rgba(4, 28, 62, 0.9), rgba(3, 18, 42, 0.95));
            transform: translateY(-4px) scale(1.015);
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 210, 255, 0.25);
        }

        .upload-card.uploaded {
            border-style: solid;
            border-color: var(--brand-primary, #00d2ff);
            background: linear-gradient(135deg, rgba(0, 38, 75, 0.45) 0%, rgba(2, 13, 30, 0.95) 100%);
            box-shadow: 0 8px 24px rgba(0, 210, 255, 0.2);
        }

        .upload-card .uc-icon {
            font-size: 32px;
            margin-bottom: 12px;
            transition: transform var(--spring);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: rgba(99, 102, 241, 0.15);
            border: 1px solid rgba(99, 102, 241, 0.3);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        }

        #uc-1 .uc-icon { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.4); color: #34d399; }
        #uc-2 .uc-icon { background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.4); color: #38bdf8; }
        #uc-3 .uc-icon { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; }
        #uc-4 .uc-icon { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.4); color: #c084fc; }

        .upload-card:hover .uc-icon {
            transform: scale(1.12) rotate(-6deg);
        }

        /* --- Thumbnail Preview for Base64 Uploads --- */
        .uc-thumbnail-container {
            display: none;
            margin: 12px auto;
            position: relative;
            max-width: 180px;
            max-height: 110px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            background: #000;
        }

        .upload-card.uploaded .uc-thumbnail-container {
            display: block;
        }

        .uc-thumbnail-img {
            width: 100%;
            height: 110px;
            object-fit: cover;
            display: block;
            transition: transform 0.3s;
        }

        .uc-thumbnail-container:hover .uc-thumbnail-img {
            transform: scale(1.05);
        }

        .uc-pdf-badge {
            padding: 18px 16px;
            text-align: center;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.85));
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 10px;
            color: #38bdf8;
            font-weight: 700;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
        }

        .uc-pdf-badge:hover {
            border-color: rgba(56, 189, 248, 0.6);
            box-shadow: 0 6px 20px rgba(56, 189, 248, 0.15);
            transform: translateY(-2px);
        }

        /* --- Document Action Buttons --- */
        .upload-card.uploaded {
            cursor: default;
        }

        .upload-card.uploaded input[type="file"] {
            display: none !important;
            pointer-events: none !important;
            z-index: -10 !important;
        }

        .uc-action-bar {
            display: none;
            gap: 8px;
            justify-content: center;
            margin-top: 14px;
            position: relative;
            z-index: 10;
            pointer-events: auto;
        }

        .upload-card.uploaded .uc-action-bar {
            display: flex;
        }

        .btn-uc-action {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f1f5f9;
            font-size: 11px;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .btn-uc-action:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
        }

        .btn-uc-preview {
            background: rgba(6, 182, 212, 0.2);
            border-color: rgba(6, 182, 212, 0.4);
            color: #38bdf8;
        }
        .btn-uc-preview:hover {
            background: rgba(6, 182, 212, 0.35);
        }

        .btn-uc-delete {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.3);
            color: #fca5a5;
        }
        .btn-uc-delete:hover {
            background: rgba(239, 68, 68, 0.3);
        }

        /* --- LABEL EDITING FIXES --- */
        .label-edit-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            position: relative;
            z-index: 10;
            pointer-events: auto;
            cursor: text;
            background: transparent !important;
        }

        .label-edit-icon {
            font-size: 14px;
            opacity: 0.5;
            transition: opacity var(--transition), transform var(--spring);
            color: var(--text-muted);
            pointer-events: none;
        }

        .upload-card:hover .label-edit-icon {
            opacity: 1;
            transform: scale(1.1);
        }

        .upload-card .doc-label-input {
            border: none;
            border-bottom: 1.5px dashed rgba(255, 255, 255, 0.35);
            background: transparent !important;
            font-size: 15px;
            font-weight: 700;
            color: #ffffff !important;
            text-align: center;
            width: 100%;
            max-width: 240px;
            padding: 4px 2px;
            border-radius: 0;
            transition: all var(--spring);
            font-family: var(--font);
            caret-color: #6366f1 !important;
        }

        body.light .upload-card .doc-label-input {
            color: #0f172a !important;
            border-bottom-color: rgba(15, 23, 42, 0.35);
        }

        .upload-card .doc-label-input:focus {
            outline: none;
            border-bottom-color: var(--primary);
            border-bottom-style: solid;
            background: transparent !important;
            box-shadow: none;
            transform: none;
        }

        .upload-card .doc-label-input::placeholder {
            color: var(--text-light);
            font-weight: 400;
        }

        .upload-card .file-status {
            font-size: 12px;
            font-weight: 600;
            color: var(--success-light);
            margin-top: 6px;
            min-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .db-status-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 12px;
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.35);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ------------------------------------------------- */

        .upload-card small {
            font-size: 12px;
            color: var(--text-muted);
            display: block;
        }

        .upload-card .opt-badge {
            display: inline-block;
            background: var(--border-color);
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 700;
            border-radius: 4px;
            padding: 2px 6px;
            margin-bottom: 10px;
        }

        .upload-card .extracts {
            margin-top: 10px;
            font-size: 11px;
            color: var(--text-light);
            font-style: italic;
        }

        .upload-card input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .upload-card.uploaded strong {
            color: var(--success-dark);
        }

        .upload-card.uploaded .uc-icon::after {
            content: " ✓";
            color: var(--success);
        }

        .sub-wrap {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 12px;
            width: 100%;
        }

        .sub-nav {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 10px;
            margin-bottom: 6px;
            overflow-x: auto;
            flex-shrink: 0;
            scrollbar-width: none;
        }
        .sub-nav::-webkit-scrollbar {
            display: none;
        }

        .sub-nav-item {
            padding: 9px 18px;
            margin-bottom: 0;
            cursor: pointer;
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.65);
            font-size: 13.5px;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 2px solid transparent;
            background: rgba(255, 255, 255, 0.03);
            transition: all var(--spring);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font);
            width: auto;
            white-space: nowrap;
            text-align: center;
        }

        .sub-nav-item:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            border-color: rgba(0, 210, 255, 0.3);
            transform: translateY(-1px);
        }

        .sub-nav-item.active {
            background: rgba(0, 210, 255, 0.14);
            color: #38bdf8;
            border-color: rgba(0, 210, 255, 0.5);
            border-bottom: 2px solid #00d2ff;
            box-shadow: 0 0 16px rgba(0, 210, 255, 0.2);
            font-weight: 700;
        }

        .sub-nav-item.done {
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.3);
        }

        .sub-nav-item .sni-check {
            color: #34d399;
            font-size: 13px;
            font-weight: 700;
        }

        .sub-content {
            width: 100%;
            min-width: 0;
        }

        .sub-pane {
            display: none;
        }

        .sub-pane.active {
            display: block;
            animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── Side-by-Side Horizontal Layouts for Forms ── */
        .tax-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
            align-items: stretch;
        }

        .tax-grid > .fatca-crs-card {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
        }

        .review-split {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 24px;
            align-items: start;
        }

        .review-col-right {
            position: sticky;
            top: 76px;
        }

        .review-col-right .declaration-box {
            margin-top: 0;
            margin-bottom: 16px;
        }

        @media (max-width: 1024px) {
            .role-category-card,
            .tax-grid,
            .review-split {
                grid-template-columns: 1fr;
            }
            .review-col-right {
                position: static;
            }
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ubo-cards {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 24px;
        }

        .ubo-card {
            border: 1.5px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            background: var(--bg-card);
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        .ubo-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--primary-light);
            transform: translateY(-2px);
        }

        .ubo-card-hdr {
            background: var(--bg-muted);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
            transition: background var(--transition), border-color var(--transition);
        }

        .ubo-card-hdr .ubo-n {
            font-weight: 700;
            font-size: 15px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color var(--transition);
        }

        .ubo-card-body {
            padding: 24px;
            background: var(--bg-card);
            transition: background var(--transition);
        }

        .ubo-remove {
            background: none;
            border: 1.5px solid #fecaca;
            color: var(--danger);
            border-radius: var(--radius-sm);
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--spring);
            font-family: var(--font);
        }

        .ubo-remove:hover {
            background: var(--danger-bg);
            border-color: #f87171;
            transform: scale(1.05);
        }

        .view-toggle {
            display: flex;
            background: var(--border-color);
            border-radius: var(--radius-md);
            padding: 4px;
            gap: 4px;
            width: fit-content;
            margin-bottom: 24px;
            transition: background var(--transition);
        }

        .vt-btn {
            padding: 8px 18px;
            border-radius: var(--radius-sm);
            border: none;
            background: none;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            transition: all var(--spring);
            font-family: var(--font);
        }

        .vt-btn.active {
            background: var(--bg-app);
            color: var(--primary);
            font-weight: 600;
            box-shadow: var(--shadow-sm);
            transform: scale(1.02);
            transition: background var(--transition), color var(--transition);
        }

        .visual-view {
            display: block;
        }

        .visual-view.hidden {
            display: none;
        }

        .list-view {
            display: none;
        }

        .list-view.active {
            display: block;
        }

        .structure-layout {
            display: flex;
            gap: 24px;
        }

        .entity-pool {
            width: 260px;
            flex-shrink: 0;
            background: var(--bg-muted);
            border: 1.5px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 20px;
            min-height: 420px;
            transition: background var(--transition), border-color var(--transition);
        }

        .entity-card {
            background: var(--bg-card);
            border: 1.5px solid var(--border-input);
            border-radius: var(--radius-md);
            padding: 14px;
            margin-bottom: 12px;
            cursor: grab;
            transition: all var(--spring);
            border-left: 4px solid var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .entity-card.corp {
            border-left-color: var(--purple);
        }

        .entity-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px) scale(1.02);
            border-color: var(--primary-light);
        }

        .entity-card:active {
            cursor: grabbing;
            transform: scale(0.95);
        }

        .entity-card .ec-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary);
            margin-bottom: 2px;
            transition: color var(--transition);
        }

        .entity-card .ec-type {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-top: 4px;
            font-weight: 500;
        }

        .chart-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
        }

        .level-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
            transition: color var(--transition);
        }

        .level-row {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 12px;
            width: 100%;
        }

        .drop-zone {
            position: relative;
            width: 260px;
            min-height: 120px;
            border: 2px dashed var(--text-light);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-light);
            transition: all var(--spring);
            padding: 14px;
            background: var(--bg-muted);
            flex-shrink: 0;
        }

        .dz-delete-box-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.35);
            color: #f87171;
            border-radius: 6px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 11px;
            font-weight: 700;
            transition: all 0.2s ease;
            z-index: 10;
        }

        .dz-delete-box-btn:hover {
            background: rgba(239, 68, 68, 0.4);
            color: #ffffff;
            transform: scale(1.1);
        }

        .dz-placeholder-text {
            pointer-events: none;
            color: var(--text-muted);
            font-size: 13px;
        }

        .drop-zone.drag-over {
            border-color: var(--success);
            background: var(--success-bg);
            color: var(--success-dark);
            border-style: solid;
            transform: scale(1.03);
        }

        .connector-line {
            width: 2px;
            height: 32px;
            background: var(--border-color);
            margin: 0 auto;
            transition: background var(--transition);
        }

        /* Direct Shareholding Percentage in Visual Builder */
        .dz-share-wrap {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(56, 189, 248, 0.35);
            border-radius: 8px;
            padding: 5px 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            width: 100%;
            box-sizing: border-box;
        }

        .dz-share-label {
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .dz-share-input {
            width: 52px;
            height: 26px;
            background: #020617;
            border: 1.5px solid #38bdf8;
            border-radius: 6px;
            color: #ffffff;
            font-weight: 700;
            font-size: 13px;
            text-align: center;
            outline: none;
            padding: 2px;
            transition: all 0.2s ease;
        }

        .dz-share-input:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
            background: #0b1329;
        }

        .dz-share-unit {
            font-size: 13px;
            font-weight: 700;
            color: #38bdf8;
        }

        /* Level 2 Locked Notice (Only Unlocks for Corporate Entities) */
        .lv2-lock-banner {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
            border: 1.5px dashed rgba(148, 163, 184, 0.35);
            border-radius: 12px;
            padding: 16px 20px;
            margin-top: 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            backdrop-filter: blur(8px);
            animation: fadeIn 0.4s ease;
        }

        .lv2-lock-banner .lock-icon {
            font-size: 26px;
            line-height: 1;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .lv2-lock-banner strong {
            display: block;
            font-size: 13.5px;
            font-weight: 700;
            color: #93c5fd;
            margin-bottom: 2px;
        }

        .lv2-lock-banner p {
            margin: 0;
            font-size: 12px;
            color: #94a3b8;
            line-height: 1.5;
        }

        /* Visual Builder Shareholding Status Bar */
        .vis-progress-container {
            margin-bottom: 18px;
            padding: 12px 16px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
        }

        .struct-enterprise {
            background: var(--bg-card);
            border: 1.5px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            transition: background var(--transition), border-color var(--transition);
        }

        .struct-row {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 16px;
            margin-bottom: 12px;
            align-items: end;
            animation: fadeUp 0.4s ease;
        }

        .struct-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .struct-actions .btn {
            padding: 10px 20px;
        }

        .struct-row .field {
            margin-bottom: 0;
        }

        /* ── Role Categories Stack & Contextual Guide Cards ── */
        .role-categories-stack {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 28px;
        }

        .role-category-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        .role-category-card:hover {
            border-color: rgba(0, 210, 255, 0.35);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
        }

        .role-category-header {
            padding: 22px 24px 18px;
            background: linear-gradient(180deg, rgba(14, 30, 52, 0.85) 0%, rgba(9, 20, 36, 0.95) 100%);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .rch-top-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
        }

        .rcg-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(0, 210, 255, 0.12);
            border: 1px solid rgba(0, 210, 255, 0.3);
            color: #38bdf8;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 8px;
            width: fit-content;
        }

        .rcg-title {
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            margin: 0 0 4px;
            letter-spacing: -0.2px;
        }

        .rcg-desc {
            font-size: 12.5px;
            color: var(--text-muted);
            line-height: 1.5;
            margin: 0;
            max-width: 840px;
        }

        .rcg-pills-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        @media (max-width: 860px) {
            .rcg-pills-row {
                grid-template-columns: 1fr;
            }
        }

        .rcg-pill {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 10px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }

        .rcg-pill:hover {
            background: rgba(0, 210, 255, 0.05);
            border-color: rgba(0, 210, 255, 0.25);
            transform: translateY(-1px);
        }

        .rcg-pill .rcg-icon {
            font-size: 20px;
            flex-shrink: 0;
        }

        .rcg-pill strong {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            color: #f1f5f9;
            margin-bottom: 2px;
        }

        .rcg-pill span {
            font-size: 11px;
            color: #94a3b8;
            line-height: 1.35;
            display: block;
        }

        .role-category-footer {
            background: rgba(15, 28, 48, 0.6);
            border-top: 1px solid var(--border-color);
            padding: 12px 24px;
            font-size: 12px;
            color: #e2e8f0;
            line-height: 1.45;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .rcg-tip-icon {
            font-size: 15px;
            flex-shrink: 0;
        }

        .table-responsive {
            width: 100%;
            overflow-x: auto;
        }

        table.rtable {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }

        table.rtable th {
            padding: 14px 16px;
            text-align: center;
            background: rgba(10, 20, 35, 0.7);
            font-weight: 700;
            font-size: 13px;
            color: var(--text-primary);
            border-bottom: 1.5px solid var(--border-color);
            transition: background var(--transition), color var(--transition), border-color var(--transition);
        }

        table.rtable th:first-child {
            text-align: left;
            padding-left: 24px;
        }

        table.rtable td {
            padding: 14px 16px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            font-size: 14px;
            color: var(--text-secondary);
            transition: border-color var(--transition), color var(--transition);
            vertical-align: middle;
        }

        table.rtable td:first-child {
            text-align: left;
            padding-left: 24px;
            font-weight: 600;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        table.rtable tr:last-child td {
            border-bottom: none;
        }

        table.rtable tr:hover td {
            background: rgba(0, 210, 255, 0.04);
        }

        table.rtable input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--primary);
            transition: transform var(--spring);
        }

        table.rtable input[type="checkbox"]:hover {
            transform: scale(1.2);
        }

        .role-desc {
            font-size: 11px;
            font-weight: 400;
            color: var(--text-light);
            display: block;
            margin-top: 4px;
            transition: color var(--transition);
        }

        /* ── Maker / Checker Verified Person Detail Card ── */
        .person-detail-card {
            background: linear-gradient(135deg, rgba(8, 28, 48, 0.95) 0%, rgba(3, 14, 26, 0.98) 100%);
            border: 1px solid rgba(0, 210, 255, 0.35);
            border-radius: 12px;
            padding: 14px 16px;
            margin-top: 10px;
            margin-bottom: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 0 16px rgba(0, 210, 255, 0.04);
            animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .pdc-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            gap: 8px;
            flex-wrap: wrap;
        }

        .pdc-avatar-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pdc-avatar {
            width: 34px;
            height: 34px;
            background: linear-gradient(135deg, #0284c7 0%, #00d2ff 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #ffffff;
            box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
            flex-shrink: 0;
        }

        .pdc-name {
            font-size: 13.5px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.2;
        }

        .pdc-role-tag {
            font-size: 11px;
            color: #38bdf8;
            font-weight: 600;
        }

        .pdc-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.35);
            color: #34d399;
            font-size: 10.5px;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
        }

        .pdc-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px 10px;
            margin-bottom: 10px;
        }

        @media (max-width: 900px) {
            .pdc-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .pdc-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .pdc-label {
            font-size: 10px;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
        }

        .pdc-val {
            font-size: 12px;
            color: #f1f5f9;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pdc-footer {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.03);
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            line-height: 1.4;
        }

        .pdc-ft-icon {
            color: #fbbf24;
            font-size: 12px;
            flex-shrink: 0;
        }

        .fatca-crs-card {
            background: var(--bg-card);
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            padding: 20px 24px;
            margin-bottom: 16px;
            transition: all var(--spring);
            box-shadow: var(--shadow-sm);
        }

        .fatca-crs-card:hover {
            border-color: var(--primary-light);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .fatca-crs-card .fq-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: color var(--transition);
        }

        .fq-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            white-space: nowrap;
            margin-left: auto;
            flex-shrink: 0;
            letter-spacing: 0.02em;
        }

        .fq-badge.fatca {
            background: #e0f2fe;
            color: #0369a1;
        }

        .fq-badge.crs {
            background: #fce7f3;
            color: #be185d;
        }

        .fq-badge.both {
            background: var(--purple-bg);
            color: var(--purple);
        }

        .conditional-block {
            display: none;
            animation: fadeUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            margin-top: 12px;
        }

        .conditional-block.active {
            display: block;
        }

        .extraction-loader {
            display: none;
            flex-direction: column;
            align-items: center;
            padding: 36px;
            background: var(--primary-bg);
            border-radius: var(--radius-lg);
            border: 1.5px solid var(--primary-light);
            margin: 20px 0;
            text-align: center;
            transition: background var(--transition), border-color var(--transition);
        }

        .extraction-loader .loader-spinner,
        #global-loader .loader-spinner {
            width: 60px;
            height: 60px;
            border: 6px solid #e2e8f0;
            border-top: 6px solid var(--primary);
            border-radius: 50%;
            margin-bottom: 20px;
            animation: simpleSpin 1s linear infinite;
        }

        @keyframes simpleSpin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .extracted-box {
            display: none;
            background: var(--bg-card);
            border: 2px solid var(--success);
            border-top: 6px solid var(--success);
            border-radius: var(--radius-lg);
            padding: 28px;
            margin: 20px 0;
            box-shadow: 0 8px 24px rgba(14, 165, 233, 0.10);
            transition: background var(--transition), border-color var(--transition);
        }

        .review-accordion {
            margin-bottom: 14px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg-card);
            box-shadow: var(--shadow-sm);
            transition: background var(--transition), border-color var(--transition);
        }

        .ra-hdr {
            padding: 18px 24px;
            background: var(--bg-muted);
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            transition: background var(--transition);
        }

        .ra-hdr:hover {
            background: var(--bg-hover);
        }

        .ra-hdr strong {
            font-size: 15px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 12px;
            transition: color var(--transition);
        }

        .ra-hdr .ra-check {
            color: var(--success);
            font-size: 18px;
            font-weight: 700;
        }

        .ra-edit {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
            cursor: pointer;
            padding: 6px 14px;
            border: 1.5px solid var(--primary-light);
            border-radius: var(--radius-md);
            background: var(--bg-app);
            transition: all var(--spring);
            font-family: var(--font);
        }

        .ra-edit:hover {
            background: var(--primary-bg);
            border-color: var(--primary);
            transform: scale(1.05);
        }

        .ra-body {
            display: none;
            padding: 24px;
            border-top: 1px solid var(--border-color);
            transition: border-color var(--transition);
        }

        .ra-body.open {
            display: block;
        }

        .rv-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 14px;
            transition: border-color var(--transition);
        }

        .rv-row:last-child {
            border-bottom: none;
        }

        .rv-row .rvl {
            color: var(--text-muted);
            font-weight: 500;
            transition: color var(--transition);
        }

        .rv-row .rvv {
            color: var(--text-primary);
            font-weight: 600;
            text-align: right;
            transition: color var(--transition);
        }

        .rv-row .ok {
            color: var(--success-dark);
        }

        .declaration-box {
            background: var(--bg-muted);
            border: 1.5px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            margin: 32px 0 0;
            transition: background var(--transition), border-color var(--transition);
        }

        .decl-check {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 16px;
        }

        .decl-check:last-child {
            margin-bottom: 0;
        }

        .decl-check input {
            margin-top: 3px;
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            flex-shrink: 0;
            cursor: pointer;
        }

        .decl-check label {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.6;
            font-weight: 500;
            cursor: pointer;
            transition: color var(--transition);
        }

        .decl-check a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
        }

        .decl-check a:hover {
            text-decoration: underline;
        }

        /* ══════════════════════════════════════════════════════════════
           EXECUTIVE ONBOARDING SUCCESS SCREEN (Mercury / Stripe Atlas Grade)
           ══════════════════════════════════════════════════════════════ */
        .success-wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding: 24px 20px 60px;
            box-sizing: border-box;
            width: 100%;
        }

        /* Ambient Celebratory Hero Card */
        .success-hero-card {
            background: linear-gradient(135deg, rgba(3, 20, 36, 0.88) 0%, rgba(2, 13, 26, 0.95) 100%);
            border: 1px solid rgba(0, 210, 255, 0.28);
            border-radius: 20px;
            padding: 32px 36px;
            margin-bottom: 28px;
            display: flex;
            align-items: center;
            gap: 28px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .success-hero-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -20%;
            width: 70%;
            height: 200%;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 65%);
            pointer-events: none;
        }

        .success-hero-card::after {
            content: '';
            position: absolute;
            top: -40%;
            right: -10%;
            width: 60%;
            height: 180%;
            background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, transparent 70%);
            pointer-events: none;
        }

        .success-anim-wrap {
            position: relative;
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .success-anim-glow {
            position: absolute;
            inset: -8px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, transparent 70%);
            border-radius: 50%;
            animation: pulseGlow 2.5s infinite ease-in-out;
        }

        .success-anim {
            width: 76px;
            height: 76px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 38px;
            color: #ffffff;
            font-weight: 900;
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.35);
            animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
        }

        @keyframes popIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        @keyframes pulseGlow {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.85; }
        }

        .success-hero-text {
            flex: 1;
            min-width: 0;
            position: relative;
            z-index: 1;
        }

        .success-hero-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.35);
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 11.5px;
            font-weight: 700;
            color: #6ee7b7;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
        }

        .live-pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 10px #10b981;
            animation: liveBlink 1.8s infinite;
        }

        @keyframes liveBlink {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        .success-hero-title {
            font-size: 26px;
            font-weight: 800;
            color: #ffffff;
            margin: 0 0 6px 0;
            letter-spacing: -0.4px;
            line-height: 1.2;
        }

        .success-hero-subtitle {
            font-size: 14px;
            color: #cbd5e1;
            margin: 0 0 16px 0;
            line-height: 1.5;
            max-width: 800px;
        }

        .success-ref-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 13px;
        }

        .srb-label {
            color: rgba(255, 255, 255, 0.65);
            font-weight: 500;
        }

        .srb-code {
            background: rgba(0, 210, 255, 0.14);
            border: 1px solid rgba(0, 210, 255, 0.4);
            color: #38bdf8;
            font-family: monospace;
            font-weight: 800;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 6px;
            letter-spacing: 0.04em;
        }

        .btn-copy-ref {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: #f1f5f9;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
        }

        .btn-copy-ref:hover {
            background: rgba(0, 210, 255, 0.2);
            border-color: rgba(0, 210, 255, 0.5);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .srb-sep {
            color: rgba(255, 255, 255, 0.25);
        }

        .srb-info {
            color: #94a3b8;
            font-size: 12.5px;
        }

        /* ── 2-Column Balanced Dashboard Grid ── */
        .success-dashboard-grid {
            display: grid;
            grid-template-columns: 1.35fr 0.85fr;
            gap: 24px;
            align-items: start;
        }

        .success-col-timeline,
        .success-col-sidebar {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Shared Card Containers */
        .success-section-card {
            background: rgba(10, 25, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 18px;
            padding: 24px 28px;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        }

        .ssc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .ssc-title-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ssc-icon {
            font-size: 22px;
        }

        .ssc-title {
            font-size: 17px;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
        }

        .ssc-sub {
            font-size: 12px;
            color: #94a3b8;
            margin: 2px 0 0 0;
        }

        .ssc-badge-live {
            background: rgba(0, 210, 255, 0.12);
            border: 1px solid rgba(0, 210, 255, 0.35);
            color: #38bdf8;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            letter-spacing: 0.03em;
        }

        /* Timeline Items */
        .timeline-container {
            position: relative;
            padding-left: 0;
        }

        .timeline-line {
            position: absolute;
            left: 24px;
            top: 40px;
            bottom: 40px;
            width: 2px;
            background: linear-gradient(180deg, #00d2ff 0%, #f59e0b 50%, #10b981 100%);
            z-index: 1;
        }

        .timeline-step {
            position: relative;
            padding-left: 68px;
            margin-bottom: 24px;
        }

        .timeline-step:last-child {
            margin-bottom: 0;
        }

        .timeline-icon {
            position: absolute;
            left: 0;
            top: 2px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            z-index: 2;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
        }

        .timeline-step-1 .timeline-icon {
            background: linear-gradient(135deg, #0284c7, #00d2ff);
            border: 3px solid #031424;
            color: #ffffff;
        }

        .timeline-step-2 .timeline-icon {
            background: linear-gradient(135deg, #d97706, #f59e0b);
            border: 3px solid #031424;
            color: #ffffff;
        }

        .timeline-step-3 .timeline-icon {
            background: linear-gradient(135deg, #059669, #10b981);
            border: 3px solid #031424;
            color: #ffffff;
        }

        .timeline-content {
            background: rgba(15, 23, 42, 0.85);
            border-radius: 14px;
            padding: 20px;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.25s ease;
        }

        .timeline-step-1 .timeline-content {
            border-color: rgba(0, 210, 255, 0.4);
            box-shadow: 0 0 24px rgba(0, 210, 255, 0.08);
        }

        .timeline-step-2 .timeline-content {
            border-color: rgba(245, 158, 11, 0.45);
            border-style: dashed;
            box-shadow: 0 0 24px rgba(245, 158, 11, 0.08);
        }

        .timeline-step-3 .timeline-content {
            border-color: rgba(16, 185, 129, 0.35);
        }

        .timeline-badge {
            position: absolute;
            top: -10px;
            left: 18px;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .timeline-step-1 .timeline-badge {
            background: rgba(0, 210, 255, 0.18);
            border: 1px solid #00d2ff;
            color: #38bdf8;
        }

        .timeline-step-2 .timeline-badge {
            background: rgba(245, 158, 11, 0.2);
            border: 1px solid #f59e0b;
            color: #fbbf24;
        }

        .timeline-step-3 .timeline-badge {
            background: rgba(16, 185, 129, 0.18);
            border: 1px solid #10b981;
            color: #6ee7b7;
        }

        .timeline-title {
            font-size: 15.5px;
            font-weight: 700;
            color: #ffffff;
            margin: 6px 0 4px;
        }

        .timeline-desc {
            font-size: 13px;
            color: #94a3b8;
            margin: 0 0 12px;
            line-height: 1.5;
        }

        .timeline-items {
            background: rgba(3, 10, 18, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 12.5px;
            color: #e2e8f0;
        }

        .timeline-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ti-check, .ti-green {
            color: #34d399;
            font-weight: 800;
            font-size: 14px;
        }

        .ti-amber {
            color: #fbbf24;
            font-weight: 700;
        }

        .docusign-action-box {
            margin: 14px 0 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(15, 23, 42, 0.8));
            border: 1.5px dashed rgba(245, 158, 11, 0.45);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        .ds-action-text strong {
            display: block;
            font-size: 13px;
            color: #fef08a;
        }

        .ds-action-text small {
            font-size: 11.5px;
            color: #cbd5e1;
        }

        .timeline-alert {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 12px;
            background: rgba(245, 158, 11, 0.12);
            border-left: 4px solid #f59e0b;
            color: #fef3c7;
            line-height: 1.5;
        }

        .timeline-alert.alert-final {
            background: rgba(16, 185, 129, 0.12);
            border-left-color: #10b981;
            color: #d1fae5;
        }

        /* ── Right Column Sidebar Cards ── */
        .success-side-card {
            background: rgba(10, 25, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 18px;
            padding: 22px;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        }

        /* RM Card */
        .rm-side-card {
            border-color: rgba(0, 210, 255, 0.25);
            background: linear-gradient(135deg, rgba(8, 28, 48, 0.8) 0%, rgba(3, 14, 26, 0.9) 100%);
        }

        .rm-card-header {
            margin-bottom: 14px;
        }

        .rm-card-badge {
            background: rgba(0, 210, 255, 0.12);
            border: 1px solid rgba(0, 210, 255, 0.3);
            color: #38bdf8;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .rm-card-body {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 16px;
        }

        .rm-avatar-wrapper {
            position: relative;
            flex-shrink: 0;
        }

        .rm-avatar {
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, #0284c7 0%, #00d2ff 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #ffffff;
            box-shadow: 0 0 16px rgba(0, 210, 255, 0.4);
        }

        .rm-online-dot {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            background: #10b981;
            border: 2px solid #031424;
            border-radius: 50%;
            box-shadow: 0 0 8px #10b981;
        }

        .rm-info {
            flex: 1;
            min-width: 0;
        }

        .rm-name {
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            margin: 0 0 2px;
        }

        .rm-title {
            font-size: 12px;
            color: #38bdf8;
            font-weight: 600;
            display: block;
            margin-bottom: 6px;
        }

        .rm-desc {
            font-size: 12px;
            color: #94a3b8;
            margin: 0;
            line-height: 1.4;
        }

        .rm-contacts-list {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .rm-contact-chip {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #f1f5f9;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
        }

        .rm-contact-chip:hover {
            background: rgba(0, 210, 255, 0.18);
            border-color: rgba(0, 210, 255, 0.45);
            color: #ffffff;
            transform: translateY(-1px);
        }

        /* Action Side Card */
        .side-card-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }

        .side-card-icon {
            font-size: 18px;
        }

        .side-card-title {
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
        }

        .side-card-desc {
            font-size: 12px;
            color: #94a3b8;
            margin: 0 0 14px;
            line-height: 1.4;
        }

        .side-actions-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .btn-side-action {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px 14px;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            width: 100%;
            box-sizing: border-box;
            font-family: var(--font);
        }

        .btn-side-action:hover {
            background: rgba(0, 210, 255, 0.14);
            border-color: rgba(0, 210, 255, 0.35);
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
        }

        .bsa-icon {
            font-size: 20px;
            flex-shrink: 0;
        }

        .bsa-text strong {
            display: block;
            font-size: 13px;
            color: #ffffff;
        }

        .bsa-text small {
            font-size: 11px;
            color: #94a3b8;
        }

        /* Forgotten / Additional Docs Compact Section */
        .forgotten-docs-side-card {
            border-color: rgba(245, 158, 11, 0.25);
        }

        .fd-side-hdr {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
        }

        .fd-side-icon {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .fd-compact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .fd-upload-card {
            border: 1.5px dashed rgba(245, 158, 11, 0.4);
            border-radius: 10px;
            padding: 12px 10px;
            background: rgba(15, 23, 42, 0.6);
            text-align: center;
            transition: all var(--spring);
            cursor: pointer;
            position: relative;
        }

        .fd-upload-card:hover {
            border-color: #fbbf24;
            background: rgba(30, 41, 59, 0.9);
            transform: translateY(-1px);
        }

        .fd-upload-card.uploaded {
            border-style: solid;
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.15);
        }

        .fd-upload-card .fdu-icon {
            font-size: 18px;
            margin-bottom: 4px;
        }

        .fd-upload-card strong {
            font-size: 11.5px;
            color: #ffffff;
            display: block;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fd-upload-card small {
            font-size: 10px;
            color: #94a3b8;
        }

        .fd-upload-card input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }

        .fd-upload-card.uploaded {
            cursor: default;
        }

        .fd-upload-card.uploaded input[type="file"] {
            display: none !important;
            pointer-events: none !important;
            z-index: -10 !important;
        }

        .fd-upload-card.uploaded strong {
            color: #6ee7b7;
        }

        .fd-upload-card.uploaded .fdu-icon::after {
            content: " ✓";
            font-size: 13px;
            color: #34d399;
            font-weight: 800;
        }

        /* ══════════════════════════════════════════════════════════════
           POST-SUBMISSION EXECUTIVE PORTAL MODE (7 STAGES REMOVED)
           ══════════════════════════════════════════════════════════════ */
        body.application-submitted .portal-sidebar,
        .portal-app-shell.application-submitted .portal-sidebar,
        #mainApp.application-submitted .portal-sidebar,
        .application-submitted aside.portal-sidebar {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            overflow: hidden !important;
        }

        body.application-submitted .portal-main-column,
        .portal-app-shell.application-submitted .portal-main-column,
        #mainApp.application-submitted .portal-main-column,
        .application-submitted .portal-main-column {
            width: 100% !important;
            max-width: 100% !important;
            flex: 1 1 100% !important;
            margin: 0 !important;
        }

        body.application-submitted .btn-sidebar-hamburger,
        .portal-app-shell.application-submitted .btn-sidebar-hamburger,
        .application-submitted .btn-sidebar-hamburger {
            display: none !important;
        }

        body.application-submitted .topbar-breadcrumb,
        .portal-app-shell.application-submitted .topbar-breadcrumb,
        .application-submitted .topbar-breadcrumb {
            display: none !important;
        }

        body.application-submitted .topbar-brand-submitted,
        .portal-app-shell.application-submitted .topbar-brand-submitted,
        .application-submitted .topbar-brand-submitted {
            display: inline-flex !important;
        }

        body.application-submitted .topbar-submitted-pill,
        .portal-app-shell.application-submitted .topbar-submitted-pill,
        .application-submitted .topbar-submitted-pill {
            display: inline-flex !important;
        }

        body.application-submitted .topbar-company-tag,
        .portal-app-shell.application-submitted .topbar-company-tag,
        .application-submitted .topbar-company-tag {
            display: inline-flex !important;
        }

        body.application-submitted .success-wrap {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--spring);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: var(--font);
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .btn-primary,
        .btn-success {
            position: relative;
            border-radius: 999px;
            background: linear-gradient(16.7deg, var(--brand-primary, #00d2ff) 9.6%, var(--brand-secondary-strong, #002b52) 36.3%, var(--brand-primary-strong, #00172e) 92.5%);
            border: 1px solid rgba(0, 210, 255, 0.55);
            color: #fff;
            box-shadow: inset 0 -8px 20px rgba(0, 210, 255, 0.32), 0 6px 20px rgba(0, 23, 46, 0.6);
            overflow: hidden;
            transition: all var(--duration-medium) var(--ease-out);
        }

        .btn-primary::before,
        .btn-success::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: -1px 0 auto;
            height: 60%;
            background: radial-gradient(60% 100% at 50% 0, rgba(255, 255, 255, 0.4), transparent 70%);
            mix-blend-mode: color-dodge;
            pointer-events: none;
        }

        .btn-primary::after,
        .btn-success::after {
            content: '';
            position: absolute;
            z-index: 1;
            top: -140%;
            left: 0;
            width: 60px;
            height: 380%;
            background: #ffffff;
            filter: blur(32px);
            mix-blend-mode: overlay;
            opacity: 0.85;
            pointer-events: none;
            animation: malPillSweep 4.5s linear infinite;
        }

        .btn-primary:hover,
        .btn-success:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 210, 255, 0.9);
            box-shadow: inset 0 -8px 20px #00d2ff, 0 10px 32px rgba(0, 210, 255, 0.45);
        }

        .btn-primary:active,
        .btn-success:active {
            transform: translateY(1px) scale(0.99);
        }

        .btn-ghost {
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            backdrop-filter: blur(8px);
            transition: all var(--duration-fast) var(--ease-standard);
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.22);
            color: #ffffff;
            transform: translateY(-2px);
        }

        .btn-outline {
            background: var(--bg-app);
            color: var(--primary);
            border: 1.5px solid var(--primary-light);
        }

        .btn-outline:hover {
            background: var(--primary-bg);
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .btn-sm {
            padding: 8px 16px;
            font-size: 13px;
        }

        .btn-danger {
            background: var(--bg-app);
            color: var(--danger);
            border: 1.5px solid #fca5a5;
            font-size: 13px;
            padding: 8px 16px;
        }

        .btn-danger:hover {
            background: var(--danger-bg);
            border-color: #f87171;
            transform: translateY(-2px);
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
            padding-top: 24px;
            border-top: 1px solid var(--border-color);
            transition: border-color var(--transition);
        }

        .autosave {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--bg-card);
            border: 1.5px solid var(--success);
            padding: 12px 20px;
            border-radius: var(--radius-md);
            font-size: 13px;
            font-weight: 600;
            color: var(--success-dark);
            box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 8px;
            transform: translateY(20px) scale(0.9);
        }

        .autosave.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.60);
            backdrop-filter: blur(4px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-out;
        }

        .modal-overlay.open {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-box {
            background: var(--bg-app);
            border-radius: var(--radius-xl);
            padding: 32px;
            width: 480px;
            max-width: 95vw;
            box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
            animation: popUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            transition: background var(--transition);
        }

        @keyframes popUp {
            from {
                transform: scale(0.95);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .modal-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 12px;
            transition: color var(--transition);
        }

        .modal-body {
            color: var(--text-muted);
            font-size: 14px;
            margin-bottom: 24px;
            line-height: 1.6;
            transition: color var(--transition);
        }

        .modal-body code {
            background: var(--primary-bg);
            color: var(--primary);
            padding: 10px 14px;
            border-radius: var(--radius-md);
            font-size: 13px;
            display: block;
            margin-top: 8px;
            word-break: break-all;
            font-weight: 600;
        }

        .modal-footer {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        @media (max-width: 860px) {
            .sub-wrap {
                flex-direction: column;
                gap: 20px;
            }
            .sub-nav {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
            }
            .sub-nav-item {
                flex: 1 1 auto;
                min-width: 120px;
                border-left: none;
                border-bottom: 3px solid transparent;
                justify-content: center;
            }
            .sub-nav-item.active {
                border-left: none;
                border-bottom-color: var(--primary);
            }
            .rm-card {
                flex-direction: column;
                text-align: center;
                gap: 16px;
            }
            .structure-layout {
                flex-direction: column;
            }
            .entity-pool {
                width: 100%;
                min-height: auto;
            }
            .drop-zone {
                width: 100%;
                min-height: 80px;
            }
            .struct-row {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .fd-upload-grid {
                grid-template-columns: 1fr;
            }
            .timeline-step {
                padding-left: 60px;
            }
            .timeline-icon {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
        }

        @media (max-width: 768px) {
            .screen-body {
                padding: 20px 16px;
            }
            .g2,
            .g3,
            .upload-grid {
                grid-template-columns: 1fr;
            }
            .span2, .span3, .span4 {
                grid-column: span 1;
            }

            * {
                -webkit-tap-highlight-color: transparent;
            }

            /* ── Stop Infinite Animations on Mobile to Prevent GPU Thrashing & Screen Flickering ── */
            .sub-wrap,
            .welcome-hero,
            .ubo-card,
            .doc-preview-box,
            .audit-modal-box,
            .mailbox-panel,
            .login-box,
            .logo-mark {
                animation: none !important;
            }

            .sub-wrap::after,
            .welcome-hero::after,
            .welcome-hero::before,
            .ubo-card::after,
            .doc-preview-box::after,
            .audit-modal-box::after,
            .mailbox-panel::after,
            .upload-card::after,
            .btn-pill-sweep::after,
            .btn-login::after,
            .btn-primary::after,
            .btn-success::after,
            .particle {
                animation: none !important;
                display: none !important;
            }

            /* Disable heavy blurred glow meshes on mobile (prevent TBDR tile invalidations) */
            .app-aurora-bg,
            .login-aurora-bg,
            .aurora-glow,
            .app-glow,
            .aurora-beam,
            .login-grid-sheen {
                display: none !important;
            }

            /* Disable 3D tilt & perspective on mobile to eliminate GPU texture flicker */
            .login-box,
            .upload-card,
            .welcome-hero,
            .sub-wrap,
            .ubo-card,
            .doc-preview-box,
            .audit-modal-box,
            .rm-card,
            .rm-metric-card,
            .rm-modal-card {
                transform: none !important;
                perspective: none !important;
                will-change: auto !important;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            /* Optimize blur to avoid mobile GPU buffer thrashing */
            .login-box,
            .hdr,
            .app-wrap,
            .audit-modal-box,
            .portal-sidebar,
            .portal-topbar {
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
            }

            /* ── Responsive Tables & Corporate Role Matrix ── */
            .table-responsive {
                width: 100% !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                margin-bottom: 12px !important;
            }
            table.rtable {
                min-width: 540px !important;
            }
            .role-category-footer {
                padding: 10px 14px !important;
                font-size: 11.5px !important;
            }

            /* ── Responsive Grids & Dashboards ── */
            .success-dashboard-grid {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
            .fd-compact-grid {
                grid-template-columns: 1fr !important;
            }
            .pdc-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
            }

            /* ── Login Box & Fluid OTP Inputs (Prevent Horizontal Overflow) ── */
            .login-box {
                padding: 28px 18px 24px !important;
                border-radius: 20px !important;
                max-width: 100% !important;
                width: 100% !important;
            }
            .login-header {
                margin-bottom: 20px !important;
            }
            .login-header h1 {
                font-size: 22px !important;
            }
            .otp-row {
                --otp-box-w: min(50px, 14vw);
                --otp-box-h: min(56px, 16vw);
                --otp-box-gap: 8px;
                gap: var(--otp-box-gap) !important;
                margin: 18px 0 !important;
                width: 100% !important;
                justify-content: center !important;
            }
            .otp-row input {
                width: var(--otp-box-w) !important;
                height: var(--otp-box-h) !important;
                font-size: 20px !important;
                border-radius: 12px !important;
            }

            .hdr {
                padding: 8px 14px;
                height: auto;
                min-height: 56px;
                flex-wrap: wrap;
                gap: 8px;
            }
            .hdr-brand {
                gap: 8px;
            }
            .hdr-brand .brand-name {
                font-size: 13px;
            }
            .hdr-brand .brand-sub {
                display: none;
            }
            .hdr-cockpit-capsule {
                height: 32px;
                padding: 0 10px;
                gap: 8px;
                max-width: 100%;
                overflow-x: auto;
            }
            .capsule-step-badge {
                font-size: 11px;
                gap: 6px;
            }
            .capsule-title {
                font-size: 11px;
            }
            .capsule-company-tag {
                font-size: 11px;
            }
            .tag-name {
                max-width: 110px;
            }
            .hdr-right {
                gap: 6px;
                flex-wrap: wrap;
            }
            .btn-hdr-action {
                height: 32px;
                padding: 0 10px;
                font-size: 11px;
                gap: 5px;
            }
            .btn-hdr-action .hdr-btn-icon {
                font-size: 12px;
            }
            .stepper-bar {
                padding: 0 12px;
            }
            .step-pill {
                padding: 12px 14px;
                font-size: 11px;
            }
            .step-pill .stime {
                display: none;
            }
            .overall-prog {
                padding: 8px 16px;
                font-size: 11px;
                flex-wrap: wrap;
            }
            .welcome-hero {
                padding: 24px 16px;
            }
            .welcome-hero h1 {
                font-size: 20px;
            }
            .welcome-hero .time-pill {
                font-size: 11px;
                padding: 4px 10px;
            }
            .welcome-hero>div>div {
                grid-template-columns: 1fr !important;
            }
            .upload-card {
                padding: 16px 14px;
            }
            .ubo-card-body {
                padding: 14px;
            }
            .success-wrap {
                padding: 24px 16px;
            }
            .rm-card {
                padding: 16px;
            }
            .nav-bar {
                flex-wrap: wrap;
                gap: 12px;
                justify-content: center;
            }
            .nav-bar .btn {
                flex: 1 1 auto;
                min-width: 120px;
            }
            .g2 .field.span2 {
                grid-column: span 1;
            }
            .fatca-crs-card .fq-label {
                flex-wrap: wrap;
            }
            .fq-badge {
                margin-left: 0;
            }
        }

        @media (max-width: 480px) {
            html, body {
                padding: 0 !important;
                margin: 0 !important;
                overflow-x: hidden !important;
                width: 100% !important;
            }
            .app-wrap {
                border-radius: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }
            .portal-app-shell {
                width: 100% !important;
                overflow-x: hidden !important;
            }
            .portal-main-area {
                width: 100% !important;
                min-width: 0 !important;
                overflow-x: hidden !important;
            }
            .portal-content-body {
                padding: 12px 10px 60px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .portal-topbar {
                padding: 0 10px !important;
                gap: 6px !important;
            }
            .topbar-title {
                display: none !important;
            }
            .hdr-right .hdr-step-label {
                font-size: 11px;
            }
            .theme-toggle .tt-label {
                display: none;
            }
            .step-pill {
                padding: 8px 10px;
                font-size: 10px;
                gap: 4px;
            }
            .step-pill .snum {
                width: 16px;
                height: 16px;
                font-size: 8px;
            }
            .modal-box {
                padding: 20px 16px;
            }
            .decl-check label {
                font-size: 13px;
            }
            .ubo-card-hdr {
                flex-wrap: wrap;
                gap: 8px;
            }
            .login-box {
                padding: 22px 14px 18px !important;
                border-radius: 16px !important;
            }
            .login-header h1 {
                font-size: 19px !important;
            }
            .login-header p {
                font-size: 12.5px !important;
            }
            .pdc-grid {
                grid-template-columns: 1fr !important;
                gap: 6px !important;
            }
            .person-detail-card {
                padding: 12px !important;
            }
            .role-hover-popover {
                width: calc(100vw - 20px) !important;
                max-width: calc(100vw - 20px) !important;
                padding: 12px 14px !important;
                left: 10px !important;
            }
            .rhp-title {
                font-size: 14px !important;
            }
            .rhp-summary {
                font-size: 11.5px !important;
            }
        }

        .divider {
            border: none;
            border-top: 1px solid var(--border-color);
            margin: 28px 0;
            transition: border-color var(--transition);
        }

        .tooltip-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .tt-icon {
            width: 18px;
            height: 18px;
            background: var(--border-color);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: var(--text-muted);
            cursor: help;
            margin-left: 6px;
            font-weight: 700;
            transition: all var(--spring);
        }

        .tt-icon:hover {
            background: var(--primary);
            color: #fff;
            transform: scale(1.1);
        }

        .tt-popup {
            display: none;
            position: absolute;
            bottom: 140%;
            left: 50%;
            transform: translateX(-50%);
            background: #0f172a;
            color: #fff;
            font-size: 12px;
            padding: 8px 14px;
            border-radius: var(--radius-md);
            white-space: nowrap;
            z-index: 50;
            font-weight: 500;
            font-style: normal;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
        }

        .tt-popup::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: #0f172a transparent transparent transparent;
        }

        .tt-icon:hover+.tt-popup,
        .tt-icon:focus+.tt-popup {
            display: block;
        }

        .pill-count {
            background: var(--primary-bg);
            border: 1px solid var(--primary-light);
            border-radius: 12px;
            padding: 3px 10px;
            font-size: 12px;
            color: var(--primary);
            font-weight: 700;
            margin-left: 10px;
            transition: background var(--transition), border-color var(--transition), color var(--transition);
        }

        .confetti {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 9999;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-muted);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-input);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-light);
        }

        :focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        /* Global Transition Loader */
        #global-loader {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(8px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: all 0.3s ease;
        }

        #global-loader.active {
            display: flex;
        }
        #global-loader .loader-spinner {
            width: 80px;
            height: 80px;
        }
        #global-loader p {
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.05em;
            margin-top: 15px;
        }

        /* ── mal.ai SIGNATURE KEYFRAMES & MOTION ── */
        @keyframes malPillSweep {
            0%, 15% { transform: translateX(-140%); opacity: 0; }
            18% { opacity: 0.85; }
            38% { transform: translateX(260%); opacity: 0.85; }
            42%, 100% { transform: translateX(260%); opacity: 0; }
        }

        @keyframes auroraDrift1 {
            0% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(40px, -30px) scale(1.1); }
            66% { transform: translate(-30px, 25px) scale(0.95); }
            100% { transform: translate(0, 0) scale(1); }
        }

        @keyframes auroraDrift2 {
            0% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(-50px, 35px) scale(0.92); }
            66% { transform: translate(35px, -40px) scale(1.08); }
            100% { transform: translate(0, 0) scale(1); }
        }

        @keyframes auroraPulse {
            0%, 100% { opacity: 0.35; filter: blur(70px); }
            50% { opacity: 0.65; filter: blur(85px); }
        }

        @keyframes cardGlowBreath {
            0%, 100% {
                box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85),
                            inset 0 1px 0 rgba(255, 255, 255, 0.16),
                            0 0 45px var(--brand-glow-subtle, rgba(0, 210, 255, 0.12));
            }
            50% {
                box-shadow: 0 36px 90px rgba(0, 0, 0, 0.9),
                            inset 0 1px 0 rgba(255, 255, 255, 0.22),
                            0 0 65px var(--brand-glow, rgba(0, 210, 255, 0.22));
            }
        }

        @keyframes logoPulse {
            0%, 100% {
                box-shadow:
                    0 0 0 1.5px rgba(56, 130, 220, 0.35),
                    0 0 16px rgba(56, 130, 220, 0.65),
                    0 0 35px rgba(30, 80, 180, 0.4),
                    0 0 65px rgba(20, 60, 150, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.95);
                transform: scale(1);
            }
            50% {
                box-shadow:
                    0 0 0 2.5px rgba(56, 150, 255, 0.65),
                    0 0 26px rgba(56, 150, 255, 0.9),
                    0 0 52px rgba(30, 100, 220, 0.65),
                    0 0 90px rgba(20, 80, 200, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 1);
                transform: scale(1.03);
            }
        }

        @keyframes digitPop {
            0% { transform: scale(0.92); }
            50% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }

        @keyframes formStepInRight {
            from { opacity: 0; transform: translateX(24px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes formStepOutLeft {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(-24px); }
        }

        @keyframes loginCardEnter {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ── Anti-Flicker: Keep loginOverlay invisible while rehydrating existing session ── */
        html.has-auth-token #loginOverlay:not(.force-show) {
            display: none !important;
        }

        /* ── LOGIN OVERLAY & AMBIENT AURORA (mal.ai VIBE) ── */
        #loginOverlay {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            min-height: 100dvh;
            z-index: 10000;
            background: var(--page-bg, #010507);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow: hidden;
            transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
        }

        #loginOverlay.hidden {
            opacity: 0;
            transform: scale(1.03);
            filter: blur(8px);
            pointer-events: none;
        }

        /* Ambient Aurora Mesh Container */
        .login-aurora-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .aurora-glow {
            position: absolute;
            border-radius: 50%;
            mix-blend-mode: screen;
            pointer-events: none;
        }

        .aurora-glow.glow-1 {
            width: 750px;
            height: 750px;
            top: -150px;
            left: 10%;
            background: radial-gradient(50% 50% at 50% 50%, var(--brand-glow, rgba(0, 210, 255, 0.28)) 0%, var(--brand-secondary, rgba(2, 132, 199, 0.16)) 45%, transparent 75%);
            filter: blur(65px);
            animation: auroraDrift1 18s ease-in-out infinite alternate, auroraPulse 8s ease-in-out infinite;
        }

        .aurora-glow.glow-2 {
            width: 900px;
            height: 900px;
            bottom: -200px;
            right: 5%;
            background: radial-gradient(50% 50% at 50% 50%, var(--brand-secondary, rgba(14, 165, 233, 0.24)) 0%, var(--brand-primary-strong, rgba(0, 23, 46, 0.25)) 48%, transparent 75%);
            filter: blur(80px);
            animation: auroraDrift2 22s ease-in-out infinite alternate, auroraPulse 10s ease-in-out infinite 3s;
        }

        .aurora-glow.glow-3 {
            width: 550px;
            height: 550px;
            top: 40%;
            left: 45%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, var(--brand-glow-subtle, rgba(56, 189, 248, 0.15)) 0%, transparent 65%);
            filter: blur(55px);
            animation: auroraPulse 6s ease-in-out infinite 1s;
        }

        .aurora-beam {
            position: absolute;
            width: 600px;
            height: 1800px;
            background: linear-gradient(180deg, var(--brand-glow-subtle, rgba(0, 210, 255, 0.08)) 0%, rgba(2, 132, 199, 0.04) 50%, transparent 100%);
            pointer-events: none;
            mix-blend-mode: plus-lighter;
        }

        .aurora-beam.beam-1 {
            top: -400px;
            left: 20%;
            transform: rotate(35deg);
            opacity: 0.6;
        }

        .aurora-beam.beam-2 {
            top: -200px;
            right: 15%;
            transform: rotate(-25deg);
            opacity: 0.5;
        }

        .login-grid-sheen {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
            background-size: 36px 36px;
            opacity: 0.35;
            mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 80%);
            -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 80%);
        }

        /* ── FROSTED GLASS COCKPIT LOGIN CARD ── */
        .login-box {
            position: relative;
            z-index: 10;
            background: rgba(2, 13, 30, 0.84);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius-xl, 28px);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85),
                        inset 0 1px 0 rgba(255, 255, 255, 0.16),
                        0 0 45px var(--brand-glow-subtle, rgba(0, 210, 255, 0.12));
            width: 100%;
            max-width: 470px;
            height: 615px;
            min-height: 615px;
            padding: 44px 38px 36px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            transform-style: preserve-3d;
            will-change: transform;
            transition: transform 0.12s ease-out;
            animation: cardGlowBreath 6s ease-in-out infinite;
        }

        .login-card-glare {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1.5px;
            background: linear-gradient(90deg, transparent, var(--brand-glow, rgba(0, 210, 255, 0.65)), rgba(255, 255, 255, 0.9), var(--brand-glow, rgba(0, 210, 255, 0.65)), transparent);
            pointer-events: none;
            z-index: 20;
            transition: background 0.08s ease-out, opacity 0.3s ease;
        }

        .login-header {
            text-align: center;
            margin-bottom: 28px;
            position: relative;
        }

        .login-header .logo-mark {
            width: 148px;
            height: 76px;
            background: #eef2f6;
            border: 1.5px solid rgba(56, 130, 220, 0.7);
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin-bottom: 16px;
            animation: logoPulse 4s ease-in-out infinite;
            box-shadow:
                0 0 0 1.5px rgba(56, 130, 220, 0.35),
                0 0 18px rgba(56, 130, 220, 0.75),
                0 0 40px rgba(30, 90, 200, 0.45),
                0 0 70px rgba(20, 70, 170, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
            overflow: hidden;
        }

        .login-header .logo-mark .brand-logo-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .m-lock-logo {
            width: 118px;
            height: 60px;
            background: #eef2f6;
            border: 1.5px solid rgba(56, 130, 220, 0.65);
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin-bottom: 14px;
            box-shadow:
                0 0 0 1.5px rgba(56, 130, 220, 0.35),
                0 0 16px rgba(56, 130, 220, 0.7),
                0 0 35px rgba(30, 80, 180, 0.4);
            overflow: hidden;
        }

        .m-lock-logo .m-lock-logo-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .login-header h1 {
            font-size: 25px;
            font-weight: 700;
            margin: 0 0 6px 0;
            line-height: 1.25;
            letter-spacing: -0.6px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffffff 55%, rgba(255, 255, 255, 0.65) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent !important;
        }

        .login-header p {
            color: rgba(255, 255, 255, 0.65);
            font-size: 14px;
            line-height: 1.4;
            letter-spacing: -0.2px;
            margin: 0;
        }

        .form-step {
            display: block;
            transition: opacity var(--duration-medium) var(--ease-standard), transform var(--duration-medium) var(--ease-out);
        }

        .form-step.hidden {
            display: none;
        }

        .form-step.step-enter-forward {
            animation: formStepInRight 0.35s var(--ease-out) forwards;
        }

        .form-step.step-exit-forward {
            animation: formStepOutLeft 0.3s var(--ease-out) forwards;
        }

        .field-group {
            margin-bottom: 20px;
        }

        .field-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.88) !important;
            margin: 0 0 8px 0;
            line-height: 1.3;
            letter-spacing: -0.2px;
        }

        .field-group input {
            width: 100%;
            height: 50px;
            padding: 14px 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 14px;
            font-size: 15px;
            font-weight: 500;
            line-height: 20px;
            box-sizing: border-box;
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.04) !important;
            transition: all var(--duration-fast) var(--ease-standard);
            font-family: var(--font);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
        }

        .field-group input::placeholder {
            color: rgba(255, 255, 255, 0.35) !important;
        }

        .field-group input:focus {
            outline: none;
            border-color: var(--brand-primary);
            background: rgba(255, 255, 255, 0.07) !important;
            box-shadow: 0 0 0 3px var(--brand-glow-subtle, rgba(0, 210, 255, 0.25)), 0 0 20px var(--brand-glow-subtle, rgba(0, 210, 255, 0.15));
            color: #ffffff !important;
        }

        .otp-stage-wrap {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            perspective: 1000px;
        }

        .otp-row {
            --otp-box-w: 60px;
            --otp-box-h: 66px;
            --otp-box-gap: 12px;
            --otp-shift-outer: calc((var(--otp-box-w) * 1.5) + (var(--otp-box-gap) * 1.5));
            --otp-shift-inner: calc((var(--otp-box-w) * 0.5) + (var(--otp-box-gap) * 0.5));
            display: flex;
            gap: var(--otp-box-gap);
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 0;
            width: 100%;
        }

        .otp-row input {
            width: var(--otp-box-w);
            height: var(--otp-box-h);
            text-align: center;
            font-size: 26px;
            font-weight: 800;
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            transition: transform 300ms ease-in-out,
                        opacity 300ms ease-in-out,
                        border-radius 300ms ease-in-out,
                        color 200ms ease-in-out,
                        border-color 250ms ease,
                        background 250ms ease,
                        box-shadow 250ms ease;
            font-family: monospace;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
            will-change: transform, opacity, border-radius;
            z-index: 2;
        }

        .otp-row input:focus {
            outline: none;
            border-color: var(--brand-primary);
            background: var(--brand-glow-subtle, rgba(0, 210, 255, 0.08)) !important;
            box-shadow: 0 0 0 3px var(--brand-glow, rgba(0, 210, 255, 0.3)), 0 0 24px var(--brand-glow-subtle, rgba(0, 210, 255, 0.25));
            color: #ffffff !important;
            transform: scale(1.02);
        }

        .otp-row input.pop-animate {
            animation: digitPop 0.25s var(--ease-out);
        }

        /* ── Stage 2: Convergence (Moving Closer) ── */
        .otp-row.converging input {
            color: transparent !important;
            caret-color: transparent !important;
            border-radius: 33px;
            border-color: var(--border-glass-glow, rgba(0, 210, 255, 0.5));
            background: var(--brand-glow-subtle, rgba(0, 210, 255, 0.12)) !important;
            box-shadow: 0 0 16px var(--brand-glow, rgba(0, 210, 255, 0.3));
            pointer-events: none;
        }

        .otp-row.converging input:nth-child(1) {
            transform: translateX(var(--otp-shift-outer)) scale(0.96);
        }
        .otp-row.converging input:nth-child(2) {
            transform: translateX(var(--otp-shift-inner)) scale(0.96);
        }
        .otp-row.converging input:nth-child(3) {
            transform: translateX(calc(-1 * var(--otp-shift-inner))) scale(0.96);
        }
        .otp-row.converging input:nth-child(4) {
            transform: translateX(calc(-1 * var(--otp-shift-outer))) scale(0.96);
        }

        /* ── Stage 3: Transformation & Infinite Linear Rotation (Loading State) ── */
        .otp-row.loading input,
        .otp-row.success-state input,
        .otp-row.error-state input {
            opacity: 0;
            pointer-events: none;
            color: transparent !important;
        }
        .otp-row.loading input:nth-child(1),
        .otp-row.success-state input:nth-child(1),
        .otp-row.error-state input:nth-child(1) {
            transform: translateX(var(--otp-shift-outer)) scale(0.8);
        }
        .otp-row.loading input:nth-child(2),
        .otp-row.success-state input:nth-child(2),
        .otp-row.error-state input:nth-child(2) {
            transform: translateX(var(--otp-shift-inner)) scale(0.8);
        }
        .otp-row.loading input:nth-child(3),
        .otp-row.success-state input:nth-child(3),
        .otp-row.error-state input:nth-child(3) {
            transform: translateX(calc(-1 * var(--otp-shift-inner))) scale(0.8);
        }
        .otp-row.loading input:nth-child(4),
        .otp-row.success-state input:nth-child(4),
        .otp-row.error-state input:nth-child(4) {
            transform: translateX(calc(-1 * var(--otp-shift-outer))) scale(0.8);
        }

        .otp-morph-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0.6);
            opacity: 0;
            pointer-events: none;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 250ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .otp-row.loading .otp-morph-indicator,
        .otp-row.success-state .otp-morph-indicator,
        .otp-row.error-state .otp-morph-indicator {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .otp-morph-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3.5px solid var(--brand-glow-subtle, rgba(0, 210, 255, 0.18));
            border-top-color: var(--brand-primary, #00d2ff);
            border-right-color: var(--brand-tertiary, #38bdf8);
            box-shadow: 0 0 20px var(--brand-glow, rgba(0, 210, 255, 0.45));
            animation: otpLinearSpin 0.75s linear infinite;
            will-change: transform;
            transition: border-color 300ms ease, box-shadow 300ms ease;
        }

        .otp-morph-badge {
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--brand-glow-subtle, rgba(0, 210, 255, 0.18)) 0%, rgba(10, 20, 42, 0.95) 100%);
            border: 1px solid var(--border-glass-glow, rgba(0, 210, 255, 0.3));
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 300ms ease;
            box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
        }

        .otp-morph-symbol {
            font-size: 26px;
            line-height: 1;
            font-weight: 900;
            display: inline-block;
            opacity: 0;
            transform: scale(0);
            transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease, color 200ms ease;
        }

        /* ── Stage 4: Success Transition (Entering the App) ── */
        .otp-row.success-state .otp-morph-ring {
            animation: none;
            border: 3.5px solid var(--brand-primary, #00d2ff) !important;
            border-color: var(--brand-primary, #00d2ff) !important;
            box-shadow: 0 0 35px var(--brand-glow, rgba(0, 210, 255, 0.85)), inset 0 0 15px var(--brand-glow-subtle, rgba(0, 210, 255, 0.4));
        }

        .otp-row.success-state .otp-morph-badge {
            background: radial-gradient(circle, var(--brand-glow-subtle, rgba(0, 210, 255, 0.35)) 0%, rgba(10, 20, 42, 0.95) 100%);
            border: 1.5px solid var(--border-glass-glow, rgba(0, 210, 255, 0.6));
            box-shadow: inset 0 0 15px var(--brand-glow-subtle, rgba(0, 210, 255, 0.4));
        }

        .otp-row.success-state .otp-morph-symbol {
            color: var(--brand-primary, #00d2ff);
            opacity: 1;
            transform: scale(1.15);
            text-shadow: 0 0 14px var(--brand-glow, rgba(0, 210, 255, 0.85));
            animation: checkmarkPop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* Subtle Success Pulse Halo */
        .otp-row.success-state .otp-morph-indicator::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 2px solid var(--brand-primary, rgba(0, 210, 255, 0.7));
            box-shadow: 0 0 25px var(--brand-glow, rgba(0, 210, 255, 0.5));
            opacity: 0;
            animation: successPulseRing 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            pointer-events: none;
        }

        @keyframes successPulseRing {
            0% { transform: scale(0.85); opacity: 0.9; }
            100% { transform: scale(1.45); opacity: 0; }
        }

        /* ── Pure Portal Entry Transition (No Green Square, Pure Silky Dissolve) ── */
        #loginOverlay {
            transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
                        backdrop-filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
                        -webkit-backdrop-filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        #loginOverlay.pure-transition-exit {
            opacity: 0 !important;
            pointer-events: none !important;
            backdrop-filter: blur(0px) !important;
            -webkit-backdrop-filter: blur(0px) !important;
        }

        #customerLoginCard.pure-transition-exit {
            transform: scale(1.05) translateY(-8px) !important;
            opacity: 0 !important;
            filter: blur(10px) !important;
            transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 380ms ease,
                        filter 380ms ease !important;
            pointer-events: none !important;
        }

        #mainApp.pure-transition-enter {
            animation: appPureReveal 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes appPureReveal {
            0% {
                opacity: 0.8;
                transform: scale(0.985);
                filter: blur(2px);
            }
            100% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0px);
            }
        }

        /* ── Stage 5: Error State (Red Stop, Shake, Split-out) ── */
        .otp-row.error-state .otp-morph-indicator {
            animation: otpShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }

        .otp-row.error-state .otp-morph-ring {
            animation-play-state: paused;
            border-color: rgba(239, 68, 68, 0.4);
            border-top-color: #ef4444;
            border-right-color: #f87171;
            box-shadow: 0 0 30px rgba(239, 68, 68, 0.7), inset 0 0 15px rgba(239, 68, 68, 0.3);
        }

        .otp-row.error-state .otp-morph-badge {
            background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, rgba(69, 10, 10, 0.95) 100%);
            border-color: #ef4444;
            box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.4);
        }

        .otp-row.error-state .otp-morph-symbol {
            color: #ef4444;
            opacity: 1;
            transform: scale(1.1);
            text-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
        }

        /* ── Keyframes for OTP Morphing & Transitions ── */
        @keyframes otpLinearSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes otpShake {
            0%, 100% { transform: translate(-50%, -50%) translateX(0); }
            15% { transform: translate(-50%, -50%) translateX(-14px); }
            30% { transform: translate(-50%, -50%) translateX(13px); }
            45% { transform: translate(-50%, -50%) translateX(-10px); }
            65% { transform: translate(-50%, -50%) translateX(7px); }
            85% { transform: translate(-50%, -50%) translateX(-3px); }
        }

        @keyframes checkmarkPop {
            0% { transform: scale(0); opacity: 0; }
            65% { transform: scale(1.35); opacity: 1; }
            100% { transform: scale(1.15); opacity: 1; }
        }

        /* ── mal.ai SIGNATURE PILL BUTTON WITH LIGHT SWEEP ── */
        .btn-pill-sweep,
        .btn-login {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 52px;
            padding: 0 24px;
            border-radius: 999px;
            border: 1px solid var(--border-glass-glow, rgba(0, 210, 255, 0.55));
            overflow: hidden;
            font-size: 15px;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: -0.2px;
            color: #ffffff;
            cursor: pointer;
            background: linear-gradient(16.7deg, var(--brand-primary) 9.6%, var(--brand-secondary-strong) 36.3%, var(--brand-primary-strong) 92.5%);
            box-shadow: inset 0 -8px 20px var(--pill-glow, rgba(0, 210, 255, 0.32)), 0 8px 24px var(--brand-primary-strong, rgba(0, 23, 46, 0.6));
            transition: transform var(--duration-fast) var(--ease-standard),
                        border-color var(--duration-medium) var(--ease-standard),
                        box-shadow var(--duration-medium) var(--ease-standard),
                        filter var(--duration-medium) var(--ease-standard);
            font-family: var(--font);
            text-decoration: none;
        }

        /* Top Sheen Arc */
        .btn-pill-sweep::before,
        .btn-login::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: -1px 0 auto;
            height: 60%;
            background: radial-gradient(60% 100% at 50% 0, rgba(255, 255, 255, 0.4), transparent 70%);
            mix-blend-mode: color-dodge;
            pointer-events: none;
        }

        /* Moving Luminous Sweep Bar */
        .btn-pill-sweep::after,
        .btn-login::after {
            content: "";
            position: absolute;
            z-index: 1;
            top: -140%;
            left: 0;
            width: 68px;
            height: 380%;
            background: #ffffff;
            filter: blur(36px);
            mix-blend-mode: overlay;
            opacity: 0.85;
            pointer-events: none;
            animation: malPillSweep 4.5s linear infinite;
            transition: opacity var(--duration-medium) var(--ease-standard);
        }

        .btn-pill-sweep:hover,
        .btn-login:hover {
            transform: translateY(-2px);
            border-color: var(--brand-primary, rgba(0, 210, 255, 0.9));
            box-shadow: inset 0 -8px 20px var(--brand-primary, #00d2ff), 0 12px 36px var(--brand-glow, rgba(0, 210, 255, 0.45));
        }

        .btn-pill-sweep:active,
        .btn-login:active {
            transform: translateY(1px) scale(0.99);
        }

        .btn-pill-sweep:disabled,
        .btn-login:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-pill-sweep:disabled::after,
        .btn-login:disabled::after {
            animation: none;
        }

        .btn-pill-sweep .btn-label {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .error-msg {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(153, 27, 27, 0.12));
            color: #fca5a5;
            padding: 14px 16px;
            border-radius: 10px;
            font-size: 13px;
            display: none;
            margin-bottom: 18px;
            border: 1px solid rgba(239, 68, 68, 0.4);
            box-shadow: 0 4px 18px rgba(239, 68, 68, 0.18);
            text-align: left;
            animation: fadeIn 0.25s ease-out;
        }

        .error-msg.show {
            display: block;
        }

        .login-alert-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .login-alert-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: #f87171;
            letter-spacing: 0.02em;
        }

        .login-alert-close {
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 18px;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
            transition: color 0.15s ease;
        }

        .login-alert-close:hover {
            color: #ffffff;
        }

        .login-alert-desc {
            margin: 0;
            font-size: 12px;
            line-height: 1.5;
            color: #e2e8f0;
            font-weight: 400;
        }

        .login-alert-desc code,
        .login-alert-desc strong {
            color: #ffffff;
            font-weight: 600;
        }

        .login-alert-desc code {
            background: rgba(0, 0, 0, 0.35);
            padding: 2px 5px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 11.5px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .login-alert-actions {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px dashed rgba(239, 68, 68, 0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .login-alert-link {
            color: #fbbf24;
            font-size: 11.5px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .login-alert-link:hover {
            color: #fef08a;
            text-decoration: underline;
        }

        .info-badge {
            background: rgba(99, 102, 241, 0.15);
            color: #e2e8f0;
            padding: 14px;
            border-radius: 8px;
            font-size: 13px;
            text-align: center;
            margin-bottom: 16px;
            border: 1px solid rgba(99, 102, 241, 0.35);
        }

        .info-badge strong {
            color: #ffffff;
            font-weight: 700;
        }

        .resend-text {
            text-align: center;
            font-size: 13px;
            color: #94a3b8;
            margin-top: 16px;
        }

        .resend-text a {
            color: #a5b4fc;
            text-decoration: none;
            font-weight: 700;
            cursor: pointer;
        }

        .resend-text a:hover {
            text-decoration: underline;
            color: #ffffff;
        }

        .footer-text {
            text-align: center;
            font-size: 12px;
            color: #64748b;
            margin-top: 24px;
            line-height: 1.5;
        }

        .footer-text a {
            color: #a5b4fc;
            text-decoration: none;
            font-weight: 500;
        }

        /* ══════════════════════════════════════════════════════════════
           INTERACTIVE LOCAL THEME SWITCHER BAR
           ══════════════════════════════════════════════════════════════ */
        .theme-preview-pill-bar {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10005;
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 6px 14px 6px 16px;
            border-radius: 999px;
            background: rgba(4, 13, 28, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.16);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transition: all 0.25s ease;
            font-family: var(--font, sans-serif);
        }

        .theme-preview-pill-bar:hover {
            border-color: rgba(255, 255, 255, 0.28);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75);
        }

        .theme-bar-title {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.85);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-right: 4px;
            white-space: nowrap;
            user-select: none;
        }

        .theme-swatch-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.82);
            font-size: 12px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 999px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            user-select: none;
            outline: none;
        }

        .theme-swatch-btn:hover {
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
            transform: translateY(-1px);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .theme-swatch-btn.active {
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
            border-color: var(--brand-primary, #00d2ff);
            box-shadow: 0 0 16px var(--brand-glow, rgba(0, 210, 255, 0.35)), inset 0 0 8px var(--brand-glow-subtle, rgba(0, 210, 255, 0.2));
        }

        .swatch-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
        }

        .swatch-name {
            line-height: 1;
        }

        .theme-test-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--brand-glow-subtle, rgba(0, 210, 255, 0.14));
            border: 1px solid var(--border-glass-glow, rgba(0, 210, 255, 0.5));
            color: var(--brand-primary, #00d2ff);
            font-size: 11.5px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 999px;
            cursor: pointer;
            margin-left: 6px;
            transition: all 0.2s ease;
        }

        .theme-test-btn:hover {
            background: var(--brand-primary, #00d2ff);
            color: #00172e;
            box-shadow: 0 0 16px var(--brand-glow, rgba(0, 210, 255, 0.5));
            transform: translateY(-1px);
        }

        @media (max-width: 820px) {
            .theme-preview-pill-bar {
                top: 10px;
                padding: 4px 8px;
                max-width: 96%;
                gap: 5px;
                overflow-x: auto;
            }
            .theme-bar-title {
                display: none;
            }
            .swatch-name {
                display: none;
            }
            .theme-swatch-btn {
                padding: 6px 8px;
            }
        }

        /* ── LIGHT MODE OVERRIDES FOR LOGIN OVERLAY ── */
        body.light #loginOverlay {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        }
        body.light .login-box {
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
        }
        body.light .login-header h1 {
            color: #0f172a !important;
        }
        body.light .login-header p {
            color: #64748b !important;
        }
        body.light .field-group label {
            color: #1e293b !important;
        }
        body.light .field-group input,
        body.light .otp-row input {
            color: #0f172a !important;
            background: #f8fafc !important;
            border: 1.5px solid #cbd5e1 !important;
            caret-color: #4f46e5 !important;
        }
        body.light .field-group input:focus,
        body.light .otp-row input:focus {
            background: #ffffff !important;
            border-color: #4f46e5 !important;
            color: #0f172a !important;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important;
        }
        body.light .field-group input::placeholder {
            color: #94a3b8 !important;
        }
        body.light .info-badge {
            background: #eef2ff !important;
            color: #3730a3 !important;
            border-color: #c7d2fe !important;
        }
        body.light .info-badge strong {
            color: #1e1b4b !important;
        }
        body.light .footer-text {
            color: #64748b !important;
        }

        @media (max-width: 480px) {
            .login-box {
                padding: 32px 20px;
            }
            .otp-row input {
                width: 48px;
                height: 52px;
                font-size: 20px;
            }
        }

        /* ── SLIDE-IN REWORK NOTIFICATION ── */
        #reworkNotification {
            position: fixed;
            top: 90px;
            right: 20px;
            z-index: 9998;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border: 1px solid #f59e0b;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            border-radius: var(--radius-lg);
            padding: 24px 28px;
            max-width: 420px;
            transform: translateX(120%);
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            color: var(--text-secondary);
            border-left: 6px solid #f59e0b;
        }

        #reworkNotification.slide-in {
            transform: translateX(0);
            opacity: 1;
        }

        #reworkNotification h4 {
            margin: 0 0 8px;
            color: #92400e;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #reworkNotification p {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: #78350f;
        }

        #reworkNotification .btn-close-notif {
            margin-top: 16px;
            background: #f59e0b;
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s;
        }

        #reworkNotification .btn-close-notif:hover {
            background: #d97706;
            transform: scale(1.05);
        }

        /* ── ENHANCED: Toast Notification System ── */
        #toastContainer {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 380px;
            width: 100%;
            pointer-events: none;
        }

        .toast {
            pointer-events: auto;
            padding: 14px 20px;
            border-radius: var(--radius-md);
            background: var(--bg-card);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            border-left: 6px solid var(--primary);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            transform-origin: top right;
            transition: all 0.3s ease;
            color: var(--text-secondary);
        }

        .toast.removing {
            animation: toastOut 0.3s ease forwards;
        }

        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(40px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes toastOut {
            from {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateX(40px) scale(0.9);
            }
        }

        .toast .toast-icon {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .toast .toast-content {
            flex: 1;
        }
        .toast .toast-title {
            font-weight: 700;
            font-size: 14px;
            display: block;
        }
        .toast .toast-message {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.5;
        }
        .toast .toast-close {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: var(--text-light);
            padding: 0 4px;
            transition: color var(--transition);
            font-family: var(--font);
            flex-shrink: 0;
            margin-top: -2px;
        }
        .toast .toast-close:hover {
            color: var(--text-primary);
        }

        .toast.toast-success {
            border-left-color: var(--toast-success);
        }
        .toast.toast-success .toast-title {
            color: var(--toast-success);
        }
        .toast.toast-error {
            border-left-color: var(--toast-error);
        }
        .toast.toast-error .toast-title {
            color: var(--toast-error);
        }
        .toast.toast-warning {
            border-left-color: var(--toast-warning);
        }
        .toast.toast-warning .toast-title {
            color: var(--toast-warning);
        }
        .toast.toast-info {
            border-left-color: var(--toast-info);
        }
        .toast.toast-info .toast-title {
            color: var(--toast-info);
        }

        /* ── ENHANCED: Network Status Badge ── */
        #networkStatus {
            position: fixed;
            bottom: 80px;
            right: 24px;
            z-index: 998;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: none;
            align-items: center;
            gap: 8px;
            background: var(--bg-card);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            transition: all 0.3s ease;
        }

        #networkStatus.online {
            border-color: var(--toast-success);
            color: var(--toast-success);
        }
        #networkStatus.offline {
            border-color: var(--toast-error);
            color: var(--toast-error);
        }

        /* ── ENHANCED: Print Styles ── */
        @media print {
            body {
                background: #fff !important;
                padding: 0 !important;
                color: #000 !important;
            }
            .app-wrap {
                box-shadow: none !important;
                border-radius: 0 !important;
                max-width: 100% !important;
            }
            .hdr,
            .stepper-bar,
            .overall-prog,
            .nav-bar,
            .theme-toggle,
            .btn-rework,
            .autosave,
            #reworkNotification,
            #toastContainer,
            #networkStatus,
            .confetti,
            #global-loader,
            #loginOverlay {
                display: none !important;
            }
            .screen {
                display: block !important;
                opacity: 1 !important;
                transform: none !important;
                animation: none !important;
                page-break-inside: avoid;
            }
            .screen-body {
                padding: 20px !important;
            }
            .welcome-hero {
                background: #0f172a !important;
                color: #fff !important;
                padding: 30px 20px !important;
            }
            .welcome-hero h1,
            .welcome-hero p,
            .time-pill {
                color: #fff !important;
            }
            .particle-container {
                display: none !important;
            }
            .upload-card,
            .ubo-card,
            .fatca-crs-card,
            .review-accordion,
            .role-category-card,
            .struct-enterprise {
                border-color: #ccc !important;
                box-shadow: none !important;
                break-inside: avoid;
            }
            .upload-card input[type="file"] {
                display: none !important;
            }
            .success-wrap {
                padding: 20px !important;
            }
            .success-anim {
                box-shadow: none !important;
            }
            .rm-card {
                background: #0f172a !important;
                color: #fff !important;
                box-shadow: none !important;
            }
            .rm-card h4,
            .rm-card p,
            .rm-card .rm-contact {
                color: #fff !important;
            }
            .forgotten-docs-section {
                background: #fafafa !important;
                border-color: #f59e0b !important;
                box-shadow: none !important;
            }
            .declaration-box {
                background: #fafafa !important;
                border-color: #ccc !important;
            }
            .review-accordion .ra-body {
                display: block !important;
            }
            .modal-overlay {
                display: none !important;
            }
            .fd-upload-card input[type="file"] {
                display: none !important;
            }
            .timeline-line {
                display: block !important;
            }
            .timeline-step .timeline-content {
                border-color: #ccc !important;
                background: #fafafa !important;
            }
            .timeline-step .timeline-badge {
                border-color: #ccc !important;
            }
            .dark {
                --bg-body: #fff !important;
                --bg-app: #fff !important;
                --text-primary: #000 !important;
                --text-secondary: #222 !important;
                --text-muted: #555 !important;
                --border-color: #ccc !important;
                --bg-muted: #f5f5f5 !important;
                --bg-card: #fff !important;
                --bg-input: #fff !important;
            }
        }

        .kbd-hint {
            font-size: 11px;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: var(--bg-muted);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            transition: all var(--transition);
            margin-top: 8px;
        }

        .kbd-hint kbd {
            background: var(--border-color);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            font-family: var(--font);
        }

        /* ── FLOATING REAL-TIME EMAIL SIMULATOR STYLES ── */
        #demoMailboxWidget {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 99999;
            font-family: var(--font, system-ui, sans-serif);
        }

        #demoMailboxBtn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 9999px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 15px rgba(2, 132, 199, 0.3);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(12px);
        }

        #demoMailboxBtn:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 14px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(2, 132, 199, 0.5);
            border-color: rgba(2, 132, 199, 0.6);
        }

        #demoMailboxBtn .mailbox-icon {
            font-size: 18px;
            line-height: 1;
        }

        #demoMailboxBtn .mailbox-title {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        #demoMailboxBtn .mailbox-badge {
            background: #0284c7;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 9999px;
            min-width: 18px;
            text-align: center;
            box-shadow: 0 0 10px rgba(2, 132, 199, 0.8);
            animation: pulseBadge 2s infinite;
        }

        @keyframes pulseBadge {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7); }
            70% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(2, 132, 199, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
        }

        /* Slide-in Incoming Email Alert */
        .email-alert-toast {
            position: fixed;
            bottom: 84px;
            right: 24px;
            width: 350px;
            max-width: calc(100vw - 48px);
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-left: 4px solid #0284c7;
            border-radius: 12px;
            box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.25);
            padding: 14px 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            z-index: 100000;
            animation: slideUpToast 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .dark .email-alert-toast {
            background: #1e293b;
            border-color: #334155;
            color: #f8fafc;
        }

        .email-alert-toast:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 42px -4px rgba(15, 23, 42, 0.35);
        }

        @keyframes slideUpToast {
            from { opacity: 0; transform: translateY(20px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .email-alert-toast .alert-icon {
            font-size: 24px;
            line-height: 1;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .email-alert-toast .alert-body {
            flex: 1;
            min-width: 0;
        }

        .email-alert-toast .alert-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        .email-alert-toast .alert-tag {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #0284c7;
        }

        .email-alert-toast .alert-time {
            font-size: 11px;
            color: #94a3b8;
        }

        .email-alert-toast .alert-subject {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dark .email-alert-toast .alert-subject {
            color: #f1f5f9;
        }

        .email-alert-toast .alert-sender {
            font-size: 11px;
            color: #64748b;
            margin-top: 2px;
        }

        .email-alert-toast .alert-snippet {
            font-size: 11px;
            color: #0284c7;
            font-weight: 600;
            margin-top: 6px;
        }

        .email-alert-toast .alert-close {
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
        }

        .email-alert-toast .alert-close:hover {
            color: #ef4444;
        }

        /* Expandable Mailbox Panel */
        .mailbox-panel {
            position: fixed;
            bottom: 84px;
            right: 24px;
            width: 440px;
            max-width: calc(100vw - 32px);
            height: 580px;
            max-height: calc(100vh - 110px);
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 16px;
            box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 100001;
            animation: slideUpPanel 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .dark .mailbox-panel {
            background: #0f172a;
            border-color: #334155;
            box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7);
        }

        @keyframes slideUpPanel {
            from { opacity: 0; transform: translateY(16px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .mb-panel-header {
            padding: 14px 18px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mb-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .mb-avatar {
            font-size: 22px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }

        .mb-header-title {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.2;
        }

        .mb-header-sub {
            font-size: 11px;
            color: #94a3b8;
            margin-top: 2px;
        }

        .mb-header-sub .status-live {
            color: #10b981;
            font-weight: 600;
        }

        .mb-header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-mb-action {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #cbd5e1;
            font-size: 11px;
            font-weight: 600;
            padding: 5px 9px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-mb-action:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.3);
        }

        .btn-mb-close {
            background: transparent;
            border: none;
            color: #cbd5e1;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
        }

        .btn-mb-close:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
        }

        .mb-panel-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #f8fafc;
        }

        .dark .mb-panel-body {
            background: #0f172a;
        }

        /* List View */
        .mb-list-view {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .mb-list-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            background: #f1f5f9;
            border-bottom: 1px solid #e2e8f0;
            font-size: 12px;
            font-weight: 600;
            color: #475569;
        }

        .dark .mb-list-toolbar {
            background: #1e293b;
            border-color: #334155;
            color: #94a3b8;
        }

        .mb-sync-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: #10b981;
            font-weight: 600;
        }

        .pulse-dot {
            width: 7px;
            height: 7px;
            background: #10b981;
            border-radius: 50%;
            box-shadow: 0 0 6px #10b981;
            animation: pulseDot 1.5s infinite;
        }

        @keyframes pulseDot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        .mb-email-items {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .mb-item {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .dark .mb-item {
            background: #1e293b;
            border-color: #334155;
        }

        .mb-item:hover {
            border-color: #0284c7;
            transform: translateX(3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .mb-item.unread {
            border-left: 4px solid #0284c7;
            background: #f0f9ff;
        }

        .dark .mb-item.unread {
            background: #1e293b;
            border-left-color: #0284c7;
        }

        .mb-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        .mb-item-from {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
        }

        .dark .mb-item-from {
            color: #f1f5f9;
        }

        .mb-item-time {
            font-size: 11px;
            color: #94a3b8;
        }

        .mb-item-subject {
            font-size: 13px;
            font-weight: 600;
            color: #334155;
            line-height: 1.3;
            margin-bottom: 4px;
        }

        .dark .mb-item-subject {
            color: #cbd5e1;
        }

        .mb-item-preview {
            font-size: 12px;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mb-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 24px;
            text-align: center;
        }

        .mb-empty-state .empty-icon {
            font-size: 44px;
            margin-bottom: 12px;
        }

        .mb-empty-state .empty-title {
            font-size: 15px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 6px;
        }

        .dark .mb-empty-state .empty-title {
            color: #f1f5f9;
        }

        .mb-empty-state .empty-desc {
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
            max-width: 280px;
        }

        /* Reader View */
        .mb-reader-view {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #ffffff;
        }

        .dark .mb-reader-view {
            background: #0f172a;
        }

        .mb-reader-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #f1f5f9;
            border-bottom: 1px solid #e2e8f0;
        }

        .dark .mb-reader-header {
            background: #1e293b;
            border-color: #334155;
        }

        .btn-mb-back {
            background: transparent;
            border: none;
            color: #0284c7;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .btn-mb-back:hover {
            background: rgba(2, 132, 199, 0.1);
        }

        .mb-reader-time {
            font-size: 11px;
            color: #94a3b8;
        }

        .mb-email-meta {
            padding: 12px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            font-size: 12px;
        }

        .dark .mb-email-meta {
            background: #1e293b;
            border-color: #334155;
        }

        .mb-email-meta .meta-row {
            margin-bottom: 4px;
            color: #64748b;
        }

        .dark .mb-email-meta .meta-row {
            color: #94a3b8;
        }

        .mb-email-meta .meta-row strong {
            color: #334155;
            margin-right: 6px;
        }

        .dark .mb-email-meta .meta-row strong {
            color: #cbd5e1;
        }

        .mb-reader-action-banner {
            padding: 10px 16px;
            background: #f0fdf4;
            border-bottom: 1px solid #bbf7d0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .dark .mb-reader-action-banner {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.3);
        }

        .btn-autofill-email-code {
            background: #0284c7;
            color: #ffffff;
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-autofill-email-code:hover {
            background: #0369a1;
            transform: translateY(-1px);
        }

        .mb-reader-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            background: #ffffff;
        }

        .dark .mb-reader-body {
            background: #0f172a;
            color: #f1f5f9;
        }

        /* ==========================================================================
           ── FIRST NATIONAL BANK LIVE BANKING SUITE: VIBRANT STYLING EXTENSIONS ──
           ========================================================================== */



        /* ── 3. Full-Screen Document Preview Modal ── */
        .doc-preview-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 10500;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 0.25s ease-out;
        }
        .doc-preview-modal-overlay.open {
            display: flex;
        }
        .doc-preview-box {
            background: rgba(15, 23, 42, 0.98);
            border: 1px solid rgba(0, 210, 255, 0.35);
            border-radius: var(--radius-xl, 16px);
            width: 100%;
            max-width: 960px;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 210, 255, 0.15);
        }
        .doc-preview-header {
            padding: 16px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: linear-gradient(90deg, rgba(15,23,42,1) 0%, rgba(30,41,59,0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .doc-preview-title {
            font-size: 16px;
            font-weight: 700;
            color: #f8fafc;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .doc-preview-content {
            flex: 1;
            overflow: auto;
            padding: 20px;
            text-align: center;
            background: #020d1e;
            min-height: 480px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .doc-preview-img-full {
            max-width: 100%;
            max-height: 72vh;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            object-fit: contain;
        }
        .doc-preview-pdf-embed {
            width: 100%;
            height: 70vh;
            border: none;
            border-radius: 8px;
            background: #0f172a;
        }
        .pdf-viewer-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 18px;
            background: rgba(15, 23, 42, 0.95);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            width: 100%;
            flex-wrap: wrap;
            gap: 10px;
        }
        .btn-pdf-nav, .btn-pdf-tool {
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .btn-pdf-nav:hover, .btn-pdf-tool:hover {
            background: rgba(56, 189, 248, 0.25);
            color: #ffffff;
            border-color: #38bdf8;
        }
        .btn-pdf-nav:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            border-color: rgba(255, 255, 255, 0.1);
            color: #94a3b8;
        }
        .pdf-canvas-wrapper {
            flex: 1;
            width: 100%;
            overflow: auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px 10px;
            background: #020d1e;
            min-height: 480px;
        }
        .doc-preview-pdf-canvas {
            background: #ffffff;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
            border-radius: 6px;
            max-width: 100%;
            display: block;
        }
        .doc-preview-footer {
            padding: 14px 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            background: #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        /* ── Pre-filled RM Locked Field Styles (Step 2 Non-editable) ── */
        .input-readonly-rm,
        input[readonly].input-readonly-rm,
        input.input-readonly-rm:focus {
            background-color: rgba(15, 23, 42, 0.75) !important;
            color: #94a3b8 !important;
            border-color: rgba(56, 189, 248, 0.25) !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
            outline: none !important;
            user-select: text;
        }

        .rm-locked-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 600;
            color: #38bdf8;
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 4px;
            padding: 2px 7px;
            margin-left: 8px;
            letter-spacing: 0.02em;
            vertical-align: middle;
        }


        /* ── Base64 Document Vault Thumbnails & Chips ── */
        .db-status-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(16, 185, 129, 0.18);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.35);
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            margin-top: 4px;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
        }

        .uc-thumbnail-container {
            width: 100%;
            margin: 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .uc-thumbnail-img {
            max-width: 100%;
            max-height: 120px;
            border-radius: 8px;
            border: 1px solid rgba(99, 102, 241, 0.4);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
            object-fit: contain;
        }

        .uc-pdf-badge {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.85));
            border: 1px solid rgba(56, 189, 248, 0.35);
            color: #38bdf8;
            border-radius: 10px;
            padding: 12px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            font-weight: 700;
            font-size: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
        }

        .uc-pdf-badge:hover {
            border-color: rgba(56, 189, 248, 0.6);
            box-shadow: 0 6px 20px rgba(56, 189, 248, 0.15);
            transform: translateY(-2px);
        }

        .uc-action-bar {
            display: flex;
            gap: 6px;
            margin-top: 10px;
            width: 100%;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 20;
            pointer-events: auto;
        }

        .btn-uc-action {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #f8fafc;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            z-index: 25;
            pointer-events: auto;
        }

        .btn-uc-action:hover {
            background: rgba(255, 255, 255, 0.18);
            transform: translateY(-1px);
        }

        .btn-uc-preview {
            background: rgba(6, 182, 212, 0.15);
            border-color: rgba(6, 182, 212, 0.35);
            color: #38bdf8;
        }

        .btn-uc-preview:hover {
            background: rgba(6, 182, 212, 0.3);
            color: #ffffff;
        }

        .btn-uc-delete {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.35);
            color: #f87171;
        }

        .btn-uc-delete:hover {
            background: rgba(239, 68, 68, 0.3);
            color: #ffffff;
        }

        /* ── Responsive Top Header & Action Controls ── */
        @media (max-width: 1200px) {
            .hdr {
                padding: 0 16px;
                gap: 12px;
            }
            .hdr-cockpit-capsule {
                padding: 0 12px;
                gap: 8px;
            }
            .tag-name {
                max-width: 120px;
            }
        }

        @media (max-width: 980px) {
            .hdr {
                height: auto;
                min-height: 64px;
                padding: 10px 16px;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .hdr-brand {
                order: 1;
            }
            .hdr-right {
                order: 2;
                margin-left: auto;
                gap: 6px;
            }
            .hdr-cockpit-capsule {
                order: 3;
                width: 100%;
                justify-content: center;
                margin-top: 4px;
            }
            .btn-hdr-action {
                height: 32px;
                padding: 0 10px;
                font-size: 11px;
            }
            .rework-banner {
                margin: 8px 16px 0;
                padding: 12px 16px;
            }
        }

        @media (max-width: 640px) {
            .hdr-right {
                flex-wrap: wrap;
                justify-content: flex-end;
            }
            .btn-hdr-action {
                height: 30px;
                padding: 0 8px;
                font-size: 11px;
                gap: 4px;
            }
            .btn-hdr-rework .tt-label {
                display: none;
            }
            .btn-hdr-rework::after {
                content: "Rework";
            }
        }

        /* ==========================================================================
           ROLE HOVER POPOVER TOOLTIP (Corporate Banking RBAC & Permissions)
           ========================================================================== */
        .role-hover-popover {
            position: fixed;
            z-index: 99999;
            pointer-events: none;
            max-width: 390px;
            width: calc(100vw - 32px);
            background: linear-gradient(145deg, rgba(13, 23, 42, 0.97) 0%, rgba(15, 30, 56, 0.98) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1.5px solid rgba(56, 189, 248, 0.35);
            border-radius: 12px;
            padding: 16px 18px;
            color: #f1f5f9;
            box-shadow: 0 16px 42px rgba(0, 0, 0, 0.75), 0 0 24px rgba(56, 189, 248, 0.18);
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: inherit;
        }

        .role-hover-popover.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .rhp-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .rhp-icon-box {
            width: 38px;
            height: 38px;
            border-radius: 9px;
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.28);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .rhp-category {
            font-size: 10.5px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
            color: #38bdf8;
            margin-bottom: 2px;
        }

        .rhp-title {
            font-size: 15px;
            font-weight: 700;
            color: #f8fafc;
            margin: 0;
            line-height: 1.25;
        }

        .rhp-summary {
            font-size: 12px;
            line-height: 1.5;
            color: #cbd5e1;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.03);
            padding: 8px 10px;
            border-radius: 6px;
            border-left: 3px solid #38bdf8;
        }

        .rhp-cap-heading {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #94a3b8;
            margin-bottom: 6px;
        }

        .rhp-cap-list {
            list-style: none;
            padding: 0;
            margin: 0 0 12px 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .rhp-cap-list li {
            font-size: 11.5px;
            line-height: 1.45;
            color: #e2e8f0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .rhp-cap-list li strong {
            color: #38bdf8;
        }

        .rhp-check {
            color: #34d399;
            font-weight: 800;
            font-size: 12px;
            line-height: 1.2;
            flex-shrink: 0;
        }

        .rhp-footer {
            display: flex;
            align-items: center;
            gap: 6px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 10.5px;
            color: #94a3b8;
        }

        .rhp-ft-icon {
            font-size: 12px;
        }

        /* Interactive hover indicators on pills and table headers */
        .rcg-pill[data-role] {
            cursor: pointer;
            position: relative;
            user-select: none;
        }

        .rcg-pill[data-role]:hover {
            background: rgba(56, 189, 248, 0.09);
            border-color: rgba(56, 189, 248, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(56, 189, 248, 0.14);
        }

        .rtable th[data-role] {
            cursor: pointer;
            position: relative;
            user-select: none;
            transition: background 0.2s, color 0.2s;
        }

        .rtable th[data-role]:hover {
            background: rgba(56, 189, 248, 0.12) !important;
            color: #38bdf8 !important;
        }

        .rtable th[data-role] .role-info-hint {
            font-size: 10px;
            margin-left: 4px;
            opacity: 0.65;
            vertical-align: middle;
            transition: opacity 0.2s, transform 0.2s;
            display: inline-block;
        }

        .rtable th[data-role]:hover .role-info-hint {
            opacity: 1;
            transform: scale(1.2);
        }

        .rcg-admin-hint:hover {
            background: rgba(56, 189, 248, 0.25) !important;
            border-color: #38bdf8 !important;
        }