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

/* Reference-style onboarding layout. This keeps the existing XClient color tokens
   and class names so the Razor markup remains reusable across pages. */
body {
    background: var(--navy);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 48% at 18% 0%, rgba(37,99,235,.08), transparent 62%),
        radial-gradient(ellipse 64% 44% at 82% 100%, rgba(59,130,246,.06), transparent 62%),
        repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px);
    z-index: 0;
}

.topbar,
.page-header,
.mobile-steps,
.page-body,
.loader-overlay {
    position: relative;
    z-index: 1;
}

.topbar {
    background: linear-gradient(135deg, rgba(10,42,108,.95) 0%, rgba(20,58,138,.95) 50%, rgba(29,78,216,.95) 100%);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 2px 20px rgba(10,42,108,.45);
    backdrop-filter: blur(16px);
}

.page-header {
    background: transparent;
    padding: 30px 52px 18px;
}

.page-header-inner {
    max-width: 1180px;
}

.page-title {
    font-size: 32px;
}

.page-body {
    max-width: 1180px;
    margin: 0 auto 48px;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
}

.step-rail {
    background: rgba(15,32,64,.78);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 48px rgba(0,0,0,.22);
    padding: 16px;
    top: 82px;
    backdrop-filter: blur(16px);
}

.step-rail-head {
    border-bottom-color: rgba(255,255,255,.08);
}

.step-rail-label,
.step-num,
.step-desc {
    color: rgba(255,255,255,.46);
}

.step-name {
    color: rgba(255,255,255,.78);
}

.step-item {
    padding: 11px 14px;
}

.step-item.is-active {
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(59,130,246,.08));
    border-color: rgba(37,99,235,.26);
}

.step-item.is-active .step-name,
.step-item.is-active .step-desc {
    color: var(--green4);
}

.main-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.card-stripe {
    display: none;
}

.panel-hdr {
    padding: 8px 0 26px 20px;
    border-bottom: 0;
    position: relative;
}

.panel-hdr::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 24px;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(to bottom, var(--green), transparent);
}

.panel-icon {
    border-radius: 50%;
    background: var(--green);
    color: var(--navy);
    box-shadow: 0 8px 22px rgba(37,99,235,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.panel-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--navy);
}

.panel-title-text {
    color: #fff;
    font-size: 28px;
    letter-spacing: 0;
}

.panel-sub {
    color: rgba(255,255,255,.52);
    font-size: 13px;
}

.panel-body {
    padding: 0;
}

.field-grid,
.field-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.field-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-divider {
    margin: 6px 0 2px;
}

.section-divider-label {
    background: rgba(37,99,235,.12);
    border-color: rgba(37,99,235,.22);
    color: var(--green4);
}

.section-divider-line {
    background: rgba(255,255,255,.08);
}

.field-label {
    color: rgba(255,255,255,.52);
    text-transform: uppercase;
    letter-spacing: .8px;
}

input,
select,
textarea {
    color: #fff;
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.12);
    border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus {
    background: rgba(37,99,235,.07);
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

select option {
    background: var(--navy2);
    color: #fff;
}

input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: var(--green);
    background: rgba(37,99,235,.11);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--red);
    background: rgba(220,38,38,.1);
}

.client-stage-panel,
.array-entry,
.review-card,
.api-result {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 26px 30px;
    backdrop-filter: blur(10px);
}

.client-stage-panel {
    display: none;
}

.client-stage-panel.is-on {
    display: block;
    animation: onboardingSlide .28s ease;
}

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

.array-entry {
    margin-bottom: 16px;
}

.array-entry-label {
    background: rgba(37,99,235,.12);
    border-color: rgba(37,99,235,.22);
    color: var(--green4);
}

.review-card {
    background: linear-gradient(135deg, rgba(15,32,64,.9), rgba(22,45,90,.74));
}

.checkbox-row {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    padding: 12px 14px;
}

.checkbox-row label {
    color: rgba(255,255,255,.78);
}

.array-add-btn {
    width: auto;
    padding: 12px 20px;
    border-radius: 12px;
    background: rgba(37,99,235,.05);
    color: var(--green4);
}

.array-remove-btn {
    border-radius: 9px;
}

.card-footer,
.form-nav {
    margin-top: 26px;
    padding: 22px 0 0;
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.08);
}

.form-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.client-stage-one-nav {
    display: none;
}

.client-stage-one-nav.is-on {
    display: flex;
}

.btn {
    border-radius: 12px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--green), var(--teal));
    color: var(--navy);
    box-shadow: 0 8px 22px rgba(37,99,235,.28);
}

.btn-secondary {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.58);
}

.info-box {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 22px;
}

.info-box.info {
    background: rgba(37,99,235,.08);
    border: 1px solid rgba(37,99,235,.2);
    color: var(--green4);
}

.validation-toast {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1000;
    max-width: 360px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(220,38,38,.96);
    color: white;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 18px 48px rgba(0,0,0,.32);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.validation-toast.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .page-header {
        padding: 24px 20px 8px;
    }

    .page-body {
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    .step-rail {
        display: none;
    }

    .mobile-steps {
        display: flex;
        background: transparent;
    }

    .field-grid,
    .field-grid.cols-2,
    .field-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .col-span-2,
    .col-span-3 {
        grid-column: 1;
    }
}

:root {
    --navy: #0a2a6c;
    --navy2: #143a8a;
    --navy3: #1d4ed8;
    --green: #3b82f6;
    --green2: #2563eb;
    --green3: #22C87A;
    --green4: #bfdbfe;
    --teal: #3b82f6;
    --teal2: #1d4ed8;
    --gold: #F0B429;
    --greenn: #22C87A;
    --slate: #64748b;
    --slate2: #94a3b8;
    --line: #e2e8f0;
    --line2: #cbd5e1;
    --bg: #f1f5f9;
    --card: #ffffff;
    --red: #dc2626;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 4px 24px rgba(10,22,40,.09);
    --shadow-lg: 0 12px 48px rgba(10,22,40,.14);
    --font: 'Poppins',sans-serif;
}

        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--navy);
            font-size: 14px;
            min-height: 100dvh;
            overflow-x: hidden
        }
        /* TOPBAR */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            height: 60px;
            background:
                linear-gradient(135deg, #0a2a6c 0%, #143a8a 50%, #1d4ed8 100%);
            background-image:
                linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
                linear-gradient(135deg, #0a2a6c 0%, #143a8a 50%, #1d4ed8 100%);
            background-size: 40px 40px, 40px 40px, 100% 100%;
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 16px;
            box-shadow: 0 2px 20px rgba(10,42,108,.45)
        }

        .topbar-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            object-fit: contain;
        }

        .logo-mark {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: linear-gradient(135deg,var(--green),var(--teal));
            display: grid;
            place-items: center;
            box-shadow: 0 4px 12px rgba(37,99,235,.35)
        }

        .logo-text {
            font-size: 18px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -.3px
        }

            

        .topbar-spacer {
            flex: 1
        }

        .topbar-badge {
            background: rgba(37,99,235,.15);
            border: 1px solid rgba(37,99,235,.3);
            color: var(--green4);
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            letter-spacing: .5px;
            white-space: nowrap
        }

        .topbar-user {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--navy2);
            border: 2px solid rgba(255,255,255,.15);
            display: grid;
            place-items: center;
            color: var(--slate2);
            font-size: 13px;
            flex-shrink: 0;
            text-decoration: none
        }
        /* PAGE HEADER */
        .page-header {
            background: var(--navy);
            padding: 28px 24px 60px
        }

        .page-header-inner {
            max-width: 1100px;
            margin: 0 auto
        }

        .page-eyebrow {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--green4);
            margin-bottom: 8px
        }

        .page-title {
            font-size: 26px;
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 6px
        }

        .page-subtitle {
            color: rgba(255,255,255,.5);
            font-size: 13px
        }
        /* BODY LAYOUT */
        #createAnchor {
            display: block
        }

        .page-body {
            max-width: 1100px;
            margin: -40px auto 40px;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 20px;
            align-items: start
        }
        /* STEP RAIL (LEFT) */
        .step-rail {
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 8px;
            position: sticky;
            top: 76px;
            overflow: hidden
        }

        .step-rail-head {
            padding: 12px 12px 14px;
            border-bottom: 1px solid var(--line);
            margin-bottom: 6px
        }

        .step-rail-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

        .step-rail-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--slate2);
            margin-bottom: 4px
        }

        .step-rail-percent {
            font-size: 11px;
            font-weight: 700;
            color: var(--green4);
        }

        .step-rail-progress-track {
            height: 3px;
            background: var(--line);
            border-radius: 99px;
            overflow: hidden
        }

        .step-rail-progress-fill {
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg,var(--green),var(--teal));
            transition: width .4s ease
        }

        .step-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            background: transparent;
            width: 100%;
            text-align: left;
            cursor: default
        }

            .step-item.is-active {
                background: rgba(54, 179, 126, 0.08);
                border-color: rgba(54, 179, 126, 0.25)
            }

        .step-dot {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid var(--line2);
            display: grid;
            place-items: center;
            background: white;
            transition: all .2s
        }

        .step-dot-inner {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--line2);
            transition: background .2s
        }

        .step-done-icon {
            display: none;
            color: white;
            font-size: 13px;
            font-weight: 700;
            position: relative;
        }

        .step-item.is-done .step-dot {
            background: rgb(54, 179, 126);
            border-color: rgb(54, 179, 126)
        }

        .step-item.is-done .step-dot-inner {
            display: none
        }

        .step-item.is-done .step-done-icon {
            display: block
        }

        .step-item.is-active .step-dot {
            border-color: rgb(54, 179, 126);
            background: rgb(54, 179, 126)
        }

        .step-item.is-active .step-dot-inner {
            background: white
        }

        .step-item.is-active .step-name {
            color: rgb(54, 179, 126);
            font-weight: 700
        }

        .step-meta {
            flex: 1;
            min-width: 0
        }

        .step-num {
            font-size: 10px;
            color: var(--slate2);
            font-weight: 500
        }

        .step-name {
            font-size: 12px;
            font-weight: 600;
            color: var(--navy);
            line-height: 1.3
        }

        .step-desc {
            font-size: 10.5px;
            color: var(--slate2);
            margin-top: 2px;
            line-height: 1.4;
            display: none
        }

        .step-item.is-active .step-desc {
            display: block;
            color: var(--teal2)
        }
        /* MOBILE PILLS */
        .mobile-steps {
            display: none;
            padding: 14px 20px 0;
            gap: 6px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none
        }

            .mobile-steps::-webkit-scrollbar {
                display: none
            }

        .mobile-pill {
            flex-shrink: 0;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            border: 1.5px solid var(--line2);
            background: white;
            color: var(--slate);
            white-space: nowrap
        }

            .mobile-pill.is-active {
                background: var(--green);
                border-color: var(--green);
                color: white
            }

            .mobile-pill.is-done {
                background: var(--green3);
                border-color: var(--green4);
                color: var(--green2)
            }
        /* MAIN CARD */
        .main-card {
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden
        }

        .card-stripe {
            /* height: 4px;
            background: linear-gradient(90deg,var(--navy),var(--navy3),var(--green),var(--teal)) */
        }

        .panel-hdr {
            padding: 20px 24px 16px;
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            gap: 14px
        }

        .panel-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            background: linear-gradient(135deg,var(--navy),var(--navy3));
            color: var(--green4);
            font-size: 16px;
            font-weight: 800;
            box-shadow: 0 4px 12px rgba(10,22,40,.2)
        }

        .panel-title-text {
            font-size: 16px;
            font-weight: 700;
            color: var(--navy)
        }

        .panel-sub {
            font-size: 12px;
            color: var(--slate);
            margin-top: 1px
        }
        /* FORM BODY */
        .panel-body {
            padding: 24px
        }
        /* FIELDS */
        .field-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 16px 18px
        }

            .field-grid.cols-2 {
                grid-template-columns: repeat(2,1fr)
            }

        .col-span-2 {
            grid-column: span 2
        }

        .col-span-3 {
            grid-column: 1/-1
        }

        .section-divider {
            grid-column: 1/-1;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 8px 0 4px
        }

        .section-divider-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--green2);
            white-space: nowrap;
            background: #eff6ff;
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid rgba(37,99,235,.25)
        }

        .section-divider-line {
            flex: 1;
            height: 1px;
            background: var(--line)
        }

        .field-wrap {
            display: flex;
            flex-direction: column
        }

        .field-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--slate);
            margin-bottom: 5px;
            letter-spacing: .2px
        }

            .field-label .req {
                color: var(--red);
                margin-left: 2px
            }

        input, select, textarea {
            width: 100%;
            border: 1.5px solid var(--line2);
            border-radius: var(--radius-sm);
            min-height: 40px;
            padding: 9px 12px;
            font-family: var(--font);
            font-size: 13px;
            color: var(--navy);
            background: #fafdff;
            outline: none;
            transition: border-color .18s,box-shadow .18s;
            appearance: none;
            -webkit-appearance: none
        }

        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px
        }

            input:focus, select:focus, textarea:focus {
                border-color: var(--green);
                background: white;
                box-shadow: 0 0 0 3px rgba(37,99,235,.12)
            }

        input:disabled, select:disabled, textarea:disabled, button:disabled {
            cursor: not-allowed;
            opacity: .8;
            background: #f4f7fb;
        }

        .card.is-disabled {
            opacity: .88;
        }

        #jointHolderSection.is-disabled {
            opacity: .9;
        }

        textarea {
            min-height: 80px;
            resize: vertical
        }
        /* Checkbox fix - must NOT inherit input styles */
        input[type=checkbox] {
            width: 18px;
            height: 18px;
            min-height: 18px;
            max-height: 18px;
            padding: 0;
            border: 2px solid var(--line2);
            border-radius: 4px;
            background: #fafdff;
            accent-color: var(--green);
            cursor: pointer;
            flex-shrink: 0;
            appearance: auto;
            -webkit-appearance: checkbox
        }

            input[type=checkbox]:focus {
                box-shadow: 0 0 0 3px rgba(37,99,235,.2);
                border-color: var(--green)
            }

            input[type=checkbox]:checked {
                background: var(--green);
                border-color: var(--green)
            }

        .checkbox-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            cursor: pointer
        }

            .checkbox-row label {
                font-size: 13px;
                color: var(--navy);
                cursor: pointer;
                font-weight: 500;
                margin: 0;
                user-select: none
            }
        /* ARRAY ENTRIES */
        .array-entry {
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 16px;
            margin-bottom: 14px;
            background: #fafbfd
        }

        .array-entry-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px
        }

        .array-entry-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--green2);
            background: #eff6ff;
            border: 1px solid rgba(37,99,235,.2);
            padding: 3px 10px;
            border-radius: 20px
        }

        .array-remove-btn {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: var(--radius-sm);
            color: var(--red);
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            cursor: pointer;
            transition: all .15s;
            font-family: var(--font)
        }

            .array-remove-btn:hover {
                background: #fee2e2
            }

        .array-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 10px;
            border: 1.5px dashed rgba(37,99,235,.4);
            border-radius: var(--radius-sm);
            background: #eff6ff;
            color: var(--green2);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all .18s;
            font-family: var(--font);
            margin-top: 4px
        }

            .array-add-btn:hover {
                background: #dbeafe;
                border-color: var(--green)
            }
        /* REVIEW CARD */
        .review-card {
            background: linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
            border-radius: var(--radius);
            padding: 20px;
            color: white;
            margin-bottom: 20px
        }

            .review-card h3 {
                font-size: 17px;
                font-weight: 800;
                margin-bottom: 14px;
                color: var(--green4)
            }

        .review-grid {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 10px
        }

        .review-item label {
            display: block;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: rgba(255,255,255,.45);
            margin-bottom: 2px
        }

        .review-item span {
            font-size: 13px;
            font-weight: 600;
            color: white
        }
        /* ALERTS */
        .api-result {
            margin: 0 24px 12px;
            padding: 12px 14px;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 600;
            display: none
        }

            .api-result.is-ok {
                display: block;
                background: var(--green3);
                border: 1px solid var(--green4);
                color: var(--green2)
            }

            .api-result.is-error {
                display: block;
                background: #fef2f2;
                border: 1px solid #fecaca;
                color: var(--red)
            }
        /* CARD FOOTER */
        .card-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--line);
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            border-radius: var(--radius-sm);
            padding: 10px 20px;
            font-family: var(--font);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all .18s;
            min-height: 40px
        }

        .btn-secondary {
            background: white;
            border: 1.5px solid var(--line2);
            color: var(--slate)
        }

            .btn-secondary:hover {
                border-color: var(--slate2);
                color: var(--navy)
            }

        .btn-primary {
            background: linear-gradient(135deg,var(--navy),var(--navy3));
            color: white;
            min-width: 130px;
            box-shadow: 0 4px 14px rgba(10,22,40,.25)
        }

            .btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 20px rgba(10,22,40,.3)
            }

        .btn-submit {
            background: linear-gradient(135deg,var(--green2),var(--teal2)) !important
        }
        /* LOADER */
        .loader-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(10,22,40,.6);
            backdrop-filter: blur(6px);
            align-items: center;
            justify-content: center
        }

            .loader-overlay.is-visible {
                display: flex
            }

        .loader-card {
            background: white;
            border-radius: 20px;
            padding: 36px 40px;
            text-align: center;
            box-shadow: 0 24px 80px rgba(10,22,40,.3);
            max-width: 340px;
            width: 90%;
            animation: popIn .3s ease
        }

        @@keyframes popIn {
            from {
                transform: scale(.92);
                opacity: 0
            }

            to {
                transform: scale(1);
                opacity: 1
            }
        }

        .loader-icon-wrap {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg,#eff6ff,#dbeafe);
            border: 2px solid rgba(37,99,235,.2);
            margin: 0 auto 18px;
            display: grid;
            place-items: center;
            position: relative
        }

        .loader-ring {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: var(--green);
            animation: spin .9s linear infinite
        }

        .loader-emoji {
            font-size: 26px;
            line-height: 1
        }

        .loader-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 8px
        }

        .loader-message {
            font-size: 13px;
            color: var(--slate);
            line-height: 1.6
        }

        .loader-progress {
            margin-top: 20px;
            height: 3px;
            background: var(--line);
            border-radius: 99px;
            overflow: hidden
        }

        .loader-progress-fill {
            height: 100%;
            background: linear-gradient(90deg,var(--green),var(--teal));
            border-radius: 99px;
            animation: loadFill 1.4s ease-in-out infinite;
            width: 0%
        }

        @@keyframes loadFill {
            0% {
                width: 0%;
                margin-left: 0
            }

            50% {
                width: 70%;
                margin-left: 0
            }

            100% {
                width: 0%;
                margin-left: 100%
            }
        }

        @@keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }
        /* RESPONSIVE */
        @@media(max-width:900px) {
            .page-body {
                grid-template-columns: 1fr
            }

            .step-rail {
                display: none
            }

            .mobile-steps {
                display: flex
            }

            .page-header {
                padding: 20px 20px 50px
            }

            .page-title {
                font-size: 20px
            }

            .field-grid {
                grid-template-columns: repeat(2,1fr)
            }
        }

        @@media(max-width:600px) {
            .topbar {
                padding: 0 14px
            }

            .topbar-badge {
                display: none
            }

            .page-body {
                padding: 0 12px;
                margin-top: -36px
            }

            .panel-body {
                padding: 16px
            }

            .card-footer {
                padding: 12px 16px
            }

            .api-result {
                margin: 0 14px 10px
            }

            .field-grid, .field-grid.cols-2 {
                grid-template-columns: 1fr
            }

            .col-span-2, .col-span-3 {
                grid-column: span 1
            }

            .review-grid {
                grid-template-columns: 1fr
            }

            .panel-hdr {
                padding: 16px 16px 12px
            }

            .page-header {
                padding: 16px 16px 46px
            }

            input[type=checkbox] {
                width: 20px;
                height: 20px
            }
        }

/* Final onboarding overrides: keep after extracted legacy CSS. */
body { background: var(--navy); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 48% at 18% 0%, rgba(37,99,235,.08), transparent 62%), radial-gradient(ellipse 64% 44% at 82% 100%, rgba(59,130,246,.06), transparent 62%), repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px); z-index:0; }
.topbar,.page-header,.mobile-steps,.page-body,.loader-overlay{position:relative;z-index:1}
.topbar{background:rgba(10,22,40,.92);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;backdrop-filter:blur(16px)}
.page-header{background:transparent;padding:30px 52px 18px}.page-header-inner{max-width:1180px}.page-title{font-size:32px}.page-body{max-width:1180px;margin:0 auto 48px;grid-template-columns:300px minmax(0,1fr);gap:28px}.step-rail{background:rgba(15,32,64,.78);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 48px rgba(0,0,0,.22);padding:16px;top:82px;backdrop-filter:blur(16px)}.step-rail-head{border-bottom-color:rgba(255,255,255,.08)}.step-rail-label,.step-num,.step-desc{color:rgba(255,255,255,.46)}.step-name{color:rgba(255,255,255,.78)}.step-item{padding:11px 14px}.step-item.is-active{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(59,130,246,.08));border-color:rgba(37,99,235,.26)}.step-item.is-active .step-name,.step-item.is-active .step-desc{color:var(--green4)}.main-card{background:transparent;border-radius:0;box-shadow:none;overflow:visible}.card-stripe{display:none}.panel-hdr{padding:8px 0 26px 20px;border-bottom:0;position:relative}.panel-hdr::before{content:"";position:absolute;left:0;top:10px;bottom:24px;width:3px;border-radius:99px;background:linear-gradient(to bottom,var(--green),transparent)}.panel-icon{border-radius:50%;background:var(--green);color:var(--navy);box-shadow:0 8px 22px rgba(37,99,235,.35)}.panel-title-text{color:#fff;font-size:28px;letter-spacing:0}.panel-sub{color:rgba(255,255,255,.52);font-size:13px}.panel-body{padding:0}.field-grid,.field-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}.section-divider{margin:6px 0 2px}.section-divider-label{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.22);color:var(--green4)}.section-divider-line{background:rgba(255,255,255,.08)}.field-label{color:rgba(255,255,255,.52);text-transform:uppercase;letter-spacing:.8px}input,select,textarea{color:#fff;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);border-radius:12px}input:focus,select:focus,textarea:focus{background:rgba(37,99,235,.07);border-color:var(--green);box-shadow:0 0 0 3px rgba(37,99,235,.12)}select option{background:var(--navy2);color:#fff}input.is-valid,select.is-valid,textarea.is-valid{border-color:var(--green);background:rgba(37,99,235,.11)}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:var(--red);background:rgba(220,38,38,.1)}.client-stage-panel,.array-entry,.review-card,.api-result{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px 30px;backdrop-filter:blur(10px)}.client-stage-panel{display:none}.client-stage-panel.is-on{display:block;animation:onboardingSlide .28s ease}@keyframes onboardingSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.array-entry{margin-bottom:16px}.array-entry-label{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.22);color:var(--green4)}.review-card{background:linear-gradient(135deg,rgba(15,32,64,.9),rgba(22,45,90,.74))}.checkbox-row{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);padding:12px 14px}.checkbox-row label{color:rgba(255,255,255,.78)}.array-add-btn{width:auto;padding:12px 20px;border-radius:12px;background:rgba(37,99,235,.05);color:var(--green4)}.array-remove-btn{border-radius:9px}.card-footer,.form-nav{margin-top:26px;padding:22px 0 0;background:transparent;border-top:1px solid rgba(255,255,255,.08)}.form-nav{display:flex;align-items:center;justify-content:space-between}.client-stage-one-nav{display:none}.client-stage-one-nav.is-on{display:flex}.btn{border-radius:12px}.btn-primary{background:linear-gradient(135deg,var(--green),var(--teal));color:var(--navy);box-shadow:0 8px 22px rgba(37,99,235,.28)}.btn-secondary{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.58)}.info-box{display:flex;gap:12px;padding:14px 18px;border-radius:12px;font-size:12.5px;line-height:1.55;margin-bottom:22px}.info-box.info{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);color:#7588bf}.validation-toast{position:fixed;right:28px;bottom:28px;z-index:1000;max-width:360px;padding:14px 18px;border-radius:12px;background:rgba(220,38,38,.96);color:white;font-size:13px;font-weight:600;box-shadow:0 18px 48px rgba(0,0,0,.32);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.validation-toast.show{opacity:1;transform:translateY(0)}
@media (max-width:900px){.page-header{padding:24px 20px 8px}.page-body{grid-template-columns:1fr;margin-top:0}.step-rail{display:none}.mobile-steps{display:flex;background:transparent}.field-grid,.field-grid.cols-2{grid-template-columns:1fr}.col-span-2,.col-span-3{grid-column:1}}

/* Theme reset: preserve the original XClient light color palette. */
body {
    background: var(--bg);
    color: var(--navy);
}

body::before {
    display: none;
}

.topbar {
    background: var(--navy);
    border-bottom: 0;
    box-shadow: 0 2px 20px rgba(10,22,40,.3);
    backdrop-filter: none;
}

.page-header {
    position: relative;
    background: linear-gradient(140deg, #003580 0%, #005eb8 55%, #1a8fff 100%);
    padding: 28px 24px 60px;
}
.page-header::before{
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.03"><path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/></g></g></svg>');
    pointer-events: none;
}
.page-title {
    color: #fff;
}

.page-subtitle {
    color: rgba(255,255,255,.5);
}

.page-body {
    margin: -40px auto 40px;
}

.step-rail {
    background: var(--card);
    border: 0;
    box-shadow: var(--shadow);
    backdrop-filter: none;
    top: 76px;
}

.step-rail-head {
    border-bottom-color: var(--line);
}

.step-rail-label,
.step-num,
.step-desc {
    color: #4b525c;
}

.step-name {
    color: var(--navy);
}

.step-item.is-active {
    background: #eff6ff;
    border-color: rgba(37,99,235,.25);
}

.step-item.is-active .step-name {
    color: rgb(54, 179, 126);
}

.step-item.is-active .step-desc {
    color: var(--teal2);
}

.main-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-stripe {
    display: block;
}

.panel-hdr {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
}

.panel-hdr::before {
    display: none;
}

.panel-icon {
    border-radius: 10px;
    background:var(--navy3);
    color: var(--green4);
}

.panel-title-text {
    color: var(--navy);
    font-size: 16px;
}

.panel-sub {
    color: var(--slate);
}

.panel-body {
    padding: 24px;
}

.field-label {
    color: var(--slate);
    text-transform: none;
    letter-spacing: .2px;
}

input,
select,
textarea {
    color: var(--navy);
    background: #fafdff;
    border-color: var(--line2);
}

input:focus,
select:focus,
textarea:focus {
    background: white;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

select option {
    background: white;
    color: var(--navy);
}

.client-stage-panel,
.array-entry,
.api-result {
    background: #fafbfd;
    border-color: var(--line);
    backdrop-filter: none;
}

.client-stage-panel {
    background: var(--card);
}

.review-card {
    background: linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
    border: 0;
}

.section-divider-line {
    background: var(--line);
}

.checkbox-row {
    background: transparent;
    border-color: transparent;
}

.checkbox-row label {
    color: var(--navy);
}

.card-footer,
.form-nav {
    background: #f8fafc;
    border-top-color: var(--line);
}

.form-nav {
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -26px;
    padding: 16px 30px;
}

.btn-primary {
    background: linear-gradient(135deg,var(--navy),var(--navy3));
    color: white;
    box-shadow: 0 4px 12px rgba(10,22,40,.18);
}

.btn-secondary {
    background: white;
    border-color: var(--line2);
    color: var(--slate);
}

.info-box.info {
    background: #deedff;
    border-color: rgba(37,99,235,.25);
    color:#818ba7;
}

@media (max-width: 900px) {
    .page-header {
        padding: 16px 16px 46px;
    }

    .page-body {
        margin-top: -36px;
    }
}

/* Reference-style grouped form cards, still using the original light theme. */
.field-grid.grouped {
    display: block;
}

.form-section-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fafbfd;
    padding: 18px 20px 20px;
    margin-bottom: 16px;
}

.form-section-card:last-child {
    margin-bottom: 0;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--slate);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.form-section-title::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,.22);
    box-shadow: inset 0 0 0 6px rgba(37,99,235,.08);
    flex: 0 0 auto;
}

.form-section-card .field-grid {
    display: grid;
}

.field-help {
    margin-top: 5px;
    font-size: 11px;
    color: var(--slate2);
}

.field-help.is-error {
    color: var(--red);
}

.fhint {
    display: block;
    margin-top: 5px;
    color: var(--slate2);
    font-size: 11px;
}

.client-hidden {
    display: none !important;
}

.array-entry {
    border-radius: var(--radius);
}

/* Direct reference-form components, adapted to the original XClient palette. */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(10,22,40,.05);
}

.card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--slate);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title-icon {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,.22);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green2);
}

.card-title-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
}

.stat-num {
    font-size: 24px;
    font-weight: 600;
    color: var(--navy3);
}
.stat-num-gold {
    font-size: 24px;
    font-weight: 600;
    color: var(--gold);
}
.stat-num-green {
    font-size: 24px;
    font-weight: 600;
    color: var(--greenn);
}
.stat-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--slate2);
    margin-top: 4px;
}

.otp-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.otp-row input {
    flex: 1;
}

.btn-otp {
    padding: 0 16px;
    background: #eff6ff;
    color: var(--green2);
    border: 1px solid rgba(37,99,235,.3);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
}

.btn-otp:hover {
    background: var(--green);
    color: white;
}

.form-section-card {
    padding: 24px 28px;
    margin-bottom: 18px;
}

.form-section-title::before {
    display: none;
}

.array-entry {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 8px 24px rgba(10,22,40,.05);
}

.array-entry-header {
    margin-bottom: 20px;
}

.array-entry-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--green2);
    font-size: 13px;
}

.array-entry-label::before {
    content: "";
    width: 22px;
    height: 22px;
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,.3);
    border-radius: 50%;
}

.array-add-btn {
    display: inline-flex;
    width: auto;
    border-radius: 12px;
}

.badge,
.vbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.badge-auto {
    background: #eff6ff;
    color: var(--green2);
}

.badge-cond {
    background: #fffbeb;
    color: #b45309;
}

.badge-ro {
    background: #f1f5f9;
    color: var(--slate);
}

.vbadge {
    background: rgba(54, 179, 126, 0.1);
    color: rgb(54, 179, 126);
    border: 1px solid rgb(54, 179, 126);
}

.pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill {
    padding: 8px 18px;
    border: 1px solid var(--line2);
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: all .18s;
    background: white;
    color: var(--slate);
    font-family: var(--font);
}

.pill:hover {
    border-color: var(--green);
    color: var(--green2);
}

.pill.sel {
    background: var(--green);
    border-color: var(--green);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(37,99,235,.25);
}

.gender-field,
.soa-row {
    margin-top: 20px;
}

#guardianCard.client-hidden {
    display: none;
}

.declaration-grid {
    gap: 10px;
}

.declaration-fields {
    margin-top: 14px;
}

.fatca-check {
    margin-bottom: 14px;
}

.calendar-picker {
    position: relative;
}

.main-card {
    overflow: visible;
}

.calendar-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.calendar-input-row input {
    flex: 1;
    cursor: pointer;
}

.calendar-trigger {
    width: 42px;
    min-height: 36px;
    border: 1.5px solid var(--line2);
    border-radius: var(--radius-sm);
    background: #eff6ff;
    color: var(--green2);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.calendar-trigger svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
    width: min(340px, calc(100vw - 44px));
    padding: 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(10,22,40,.18);
}

.calendar-picker.is-open .calendar-popover {
    display: block;
}

.calendar-head {
    display: grid;
    grid-template-columns: 34px 1fr 1fr 34px;
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-head select {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.calendar-nav {
    min-height: 34px;
    border: 1px solid var(--line2);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--navy);
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-weekdays {
    margin-bottom: 6px;
    color: var(--slate2);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.calendar-day {
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    font-family: var(--font);
    font-weight: 600;
}

.calendar-day:hover {
    background: #eff6ff;
    color: var(--green2);
}

.calendar-day.is-selected {
    background: var(--green);
    color: white;
}

.calendar-day:disabled {
    color: var(--line2);
    cursor: not-allowed;
}

.calendar-day.is-empty {
    min-height: 34px;
}

/* Compact density pass for all onboarding stages. */
.page-body {
    gap: 20px;
}

.panel-hdr {
    padding: 16px 20px 12px;
}

.panel-body {
    padding: 18px;
}

.card,
.form-section-card,
.client-stage-panel,
.array-entry,
.api-result {
    padding: 18px 20px;
    margin-bottom: 12px;
}

.card-title,
.form-section-title {
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.field-grid,
.field-grid.cols-2,
.field-grid.cols-3 {
    gap: 12px 14px;
}

.field-label {
    margin-bottom: 4px;
    text-transform: uppercase;
}

.field-wrap label,
.checkbox-row label,
.chk-label,
.card label,
.array-entry label,
.client-stage-panel label {
    text-transform: uppercase;
}

input,
select,
textarea {
    min-height: 36px;
    padding: 8px 10px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M2 2.5L7 7.5L12 2.5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 10px;
}

select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M2 2.5L7 7.5L12 2.5' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Final select background fix: keep the chevron from tiling after focus/valid states. */
select,
select:focus,
select.is-valid,
select.is-invalid {
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 10px !important;
}

select {
    background-color: #fafdff !important;
}

select:focus {
    background-color: white !important;
}

select.is-valid {
    background-color: rgba(37,99,235,.11) !important;
}

select.is-invalid {
    background-color: #fafdff !important;
}

.ifsc-input-shell {
    position: relative;
}

.ifsc-input-shell input {
    padding-right: 38px;
}

.ifsc-status-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ifsc-status-icon.is-valid {
    background: rgba(5,150,105,.1);
    color: var(--green);
}

.ifsc-status-icon.is-valid::before {
    content: "\2713";
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.ifsc-status-icon.is-invalid {
    background: rgba(220,38,38,.1);
    color: var(--red);
}

.ifsc-status-icon.is-invalid::before {
    content: "\00d7";
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.ifsc-status-icon.is-pending::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgba(37,99,235,.2);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin .75s linear infinite;
}

.nominee-guardian-panel {
    display: contents;
}

.nominee-address-panel {
    grid-column: 1 / -1;
}

.same-as-above-row {
    margin: 12px 0 4px;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    background-color: var(--card) !important;
    border-color: rgba(220,38,38,.62);
    box-shadow: inset 0 -1px 0 rgba(220,38,38,.18);
}

input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    background-color: var(--card) !important;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(220,38,38,.09);
}

.field-help.is-error {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: 7px;
    color: #b91c1c;
    font-weight: 500;
    line-height: 1.35;
    animation: validationMessageIn .24s ease-out;
}

.field-help.is-error::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(220,38,38,.1);
    animation: validationMarkerPulse 1.4s ease-out 1;
}

@keyframes validationMessageIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes validationMarkerPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220,38,38,.24);
    }

    100% {
        box-shadow: 0 0 0 6px rgba(220,38,38,.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-help.is-error,
    .field-help.is-error::before {
        animation: none;
    }
}

.checkbox-row {
    padding: 8px 10px;
}

.form-nav,
.card-footer {
    margin-top: 18px;
    padding: 14px 18px;
}

.client-stage-one-nav {
    padding: 14px 18px;
}

.step-item {
    padding: 8px 10px;
}

.step-dot {
    width: 24px;
    height: 24px;
}

.array-entry-header {
    margin-bottom: 14px;
}

.review-card {
    padding: 16px 18px;
    margin-bottom: 14px;
}

.stat-row {
    gap: 10px;
    margin-bottom: 12px;
}

.stat-card {
    padding: 12px 14px;
}

.info-box {
    padding: 10px 12px;
    margin-bottom: 14px;
}

.gender-field,
.soa-row {
    margin-top: 14px;
}

.btn {
    min-height: 36px;
    padding: 8px 16px;
}

.array-add-btn {
    padding: 9px 14px;
    color: var(--green2);
    border-color: var(--green2);
    background: #eff6ff;
    font-weight: 700;
}

/* Loader polish: fixed full-screen overlay and CSS-only icon. */
.loader-overlay,
.topbar.loader-overlay,
.page-header.loader-overlay,
.mobile-steps.loader-overlay,
.page-body.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.loader-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10,22,40,.58);
    backdrop-filter: blur(4px);
}

.loader-overlay.is-visible {
    display: flex;
}

.loader-card {
    width: min(340px, calc(100vw - 40px));
    background: white;
    border-radius: 18px;
    padding: 34px 38px;
    text-align: center;
    box-shadow: 0 28px 90px rgba(10,22,40,.32);
    border: 1px solid rgba(255,255,255,.72);
    animation: loaderPop .22s ease-out;
}

.loader-icon-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg,#eff6ff,#dbeafe);
    border: 2px solid rgba(37,99,235,.18);
    display: grid;
    place-items: center;
}

.loader-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid rgba(37,99,235,.16);
    border-top-color: var(--green);
    animation: spin .9s linear infinite;
}

.loader-symbol {
    position: relative;
    width: 26px;
    height: 30px;
}

.loader-symbol::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 5px;
    width: 4px;
    height: 20px;
    border-radius: 99px;
    background: var(--navy);
}

.loader-symbol::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-left: 4px solid var(--navy);
    border-top: 4px solid var(--navy);
    transform: rotate(45deg);
    border-radius: 2px;
}

.loader-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

.loader-message {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
}

.loader-progress {
    margin-top: 20px;
    height: 3px;
    background: var(--line);
    border-radius: 99px;
    overflow: hidden;
}

.loader-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg,var(--green),var(--teal));
    animation: loadFill 1.4s ease-in-out infinite;
}

@keyframes loaderPop {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
    .stat-row {
        grid-template-columns: 1fr;
    }

    .otp-row {
        flex-direction: column;
    }
}

/* Mobile onboarding: compact branded header with clear stage progress. */
.mobile-progress-card {
    display: none;
}

@media (max-width: 900px) {
    .topbar {
        height: 56px;
        padding: 0 16px;
        gap: 12px;
        background: linear-gradient(135deg, #082d68 0%, #0d428f 100%);
        box-shadow: 0 2px 14px rgba(8,45,104,.24);
    }

    .topbar-logo,
    .topbar-logo img {
        width: 42px;
        height: 42px;
    }

    .logo-text {
        font-size: 17px;
    }

    .topbar-user {
        width: 32px;
        height: 32px;
    }

    .page-header {
        padding: 18px 18px 20px;
        background: linear-gradient(135deg, #07418f 0%, #0878dc 100%);
    }

    .page-header::before {
        opacity: .7;
    }

    .page-eyebrow {
        margin-bottom: 5px;
        font-size: 9px;
        letter-spacing: 1.25px;
    }

    .page-title {
        max-width: 560px;
        margin-bottom: 5px;
        font-size: 25px;
        line-height: 1.14;
    }

    .page-subtitle {
        max-width: 620px;
        font-size: 12px;
        line-height: 1.55;
    }

    .mobile-progress-card {
        position: relative;
        z-index: 4;
        display: block;
        margin: 12px 14px 8px;
        padding: 13px 14px 12px;
        border: 1px solid #dce7f5;
        border-radius: 14px;
        background: white;
        box-shadow: 0 8px 22px rgba(15,45,85,.15);
    }

    .mobile-progress-top,
    .mobile-progress-current {
        display: flex;
        align-items: center;
    }

    .mobile-progress-top {
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-progress-eyebrow {
        color: #64748b;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
    }

    .mobile-progress-stage {
        margin-top: 2px;
        color: var(--navy);
        font-size: 14px;
        font-weight: 800;
    }

    .mobile-progress-percent {
        color: var(--green2);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -.7px;
    }

    .mobile-progress-track {
        height: 6px;
        margin-top: 10px;
        overflow: hidden;
        border-radius: 99px;
        background: #e8eef7;
    }

    .mobile-progress-fill {
        height: 100%;
        min-width: 4px;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green2), #44a8ff);
        transition: width .25s ease;
    }

    .mobile-progress-current {
        gap: 7px;
        margin-top: 9px;
        color: var(--navy);
        font-size: 12px;
        font-weight: 700;
    }

    .mobile-progress-current small {
        margin-left: auto;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 500;
    }

    .mobile-progress-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    }

    .mobile-steps {
        padding: 4px 14px 6px;
    }

    .page-body {
        margin-top: 0;
        padding: 0 14px 24px;
    }

    .panel-hdr {
        margin-bottom: 8px;
        padding: 14px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: white;
        box-shadow: 0 7px 20px rgba(15,45,85,.07);
    }

    .panel-hdr::before {
        display: none;
    }

    .panel-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .panel-title-text {
        color: var(--navy);
        font-size: 18px;
    }

    .panel-sub {
        color: var(--slate);
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    body {
        padding-top: 210px;
    }

    .topbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 60;
        height: 52px;
        padding: 0 12px;
        gap: 8px;
    }

    .topbar > .topbar-logo {
        width: auto;
        height: auto;
        gap: 8px;
    }

    .topbar > .topbar-logo img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .logo-text {
        font-size: 16px;
    }

    .topbar-badge {
        display: none;
    }

    .topbar-user {
        width: 30px;
        height: 30px;
    }

    .page-header {
        position: fixed;
        top: 52px;
        right: 0;
        left: 0;
        z-index: 50;
        height: 86px;
        padding: 12px 14px 20px;
    }

    .page-title {
        font-size: 21px;
    }

    .page-subtitle {
        font-size: 11px;
    }

    .mobile-progress-card {
        position: fixed;
        top: 130px;
        right: 10px;
        left: 10px;
        z-index: 55;
        margin: 0;
        padding: 11px 12px 10px;
        border-radius: 13px;
    }

    .mobile-progress-current {
        display: none;
    }

    .mobile-steps {
        display: none;
    }

    .page-body {
        padding: 8px 10px 92px;
    }

    .panel-hdr {
        margin-bottom: 7px;
        padding: 12px;
    }

    .panel-icon {
        width: 38px;
        height: 38px;
    }

    .panel-title-text {
        font-size: 17px;
    }

    .panel-body {
        padding: 0;
    }

    .stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .stat-card {
        padding: 10px 5px;
        border-radius: 11px;
    }

    .stat-num,
    .stat-num-gold,
    .stat-num-green {
        font-size: 18px;
    }

    .stat-lbl {
        font-size: 8px;
        letter-spacing: .65px;
    }

    .info-box {
        display: block;
        padding: 10px;
    }

    .info-box span:first-child {
        display: block;
        margin-bottom: 4px;
        font-weight: 700;
    }

    .otp-row {
        gap: 8px;
    }

    .otp-row .btn-otp {
        min-height: 34px;
        padding: 7px 14px;
    }

    .field-wrap:has(.otp-row) + .field-wrap {
        margin-top: 12px;
    }

    .card,
    .form-section-card,
    .client-stage-panel,
    .array-entry,
    .api-result {
        padding: 14px 12px;
        border-radius: 13px;
    }

    .form-nav {
        position: fixed;
        right: 10px;
        bottom: 8px;
        left: 10px;
        z-index: 12;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        max-width: 580px;
        margin: 0 auto;
        padding: 10px 11px;
        border: 1px solid #e2e8f0;
        border-radius: 13px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 10px 24px rgba(15,45,85,.12);
        backdrop-filter: blur(12px);
    }

    .form-nav > span:first-child:empty {
        display: none;
    }

    .form-nav > span {
        text-align: left;
    }

    .form-nav .btn {
        min-width: 0;
        padding: 9px 11px;
        font-size: 12px;
        white-space: nowrap;
    }

    .card-footer {
        position: fixed;
        right: 10px;
        bottom: 8px;
        left: 10px;
        z-index: 12;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        max-width: 580px;
        margin: 0 auto;
        padding: 10px;
        border: 1px solid #e2e8f0;
        border-radius: 13px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 10px 24px rgba(15,45,85,.12);
        backdrop-filter: blur(12px);
    }

    .card-footer > span {
        text-align: center;
    }

    .card-footer .btn {
        min-width: 0;
        padding: 9px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .client-stage-one-nav {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .client-stage-one-nav.is-on {
        display: grid;
    }
}