:root {
    --kyc-blue: #003da5;
    --kyc-blue-dark: #002e7a;
    --kyc-red: #dc1c2e;
    --kyc-black: #111827;
    --kyc-text: #344054;
    --kyc-muted: #667085;
    --kyc-border: #e5e7eb;
    --kyc-bg: #f7f5f0;
    --kyc-surface: #ffffff;
    --kyc-soft: #f9fafb;
    --kyc-blue-soft: #eef4ff;
    --kyc-red-soft: #fff1f2;
    --kyc-green: #16835b;
    --kyc-green-soft: #ecfdf3;
    --kyc-shadow: 0 18px 45px rgba(15, 23, 42, .10);
    --kyc-shadow-soft: 0 8px 22px rgba(15, 23, 42, .06);
    --kyc-radius-lg: 28px;
    --kyc-radius-md: 18px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body.kyc-portal-body {
    background: var(--kyc-bg);
    color: var(--kyc-text);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100%;
}

.kyc-portal-page {
    background: radial-gradient(circle at top left, rgba(0, 61, 165, .08), transparent 34%), radial-gradient(circle at top right, rgba(220, 28, 46, .07), transparent 28%), var(--kyc-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.kyc-portal-topbar {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(229, 231, 235, .9);
    backdrop-filter: blur(14px);
    min-height: 72px;
}

.kyc-portal-topbar-inner {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1180px;
    min-height: 72px;
    padding: 0 28px;
}

.kyc-portal-brand {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.kyc-portal-logo {
    display: block;
    height: auto;
    width: 118px;
}

.kyc-portal-brand-divider {
    background: var(--kyc-border);
    height: 34px;
    width: 1px;
}

.kyc-portal-system-name {
    color: var(--kyc-black);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
}

.kyc-portal-system-name > span {
    color: var(--kyc-muted);
    display: block;
    font-size: .76rem;
    font-weight: 700;
    margin-top: 2px;
}

.kyc-portal-secure {
    align-items: center;
    background: #fff;
    border: 1px solid var(--kyc-border);
    border-radius: 999px;
    color: var(--kyc-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 800;
    gap: 8px;
    padding: 8px 12px;
    white-space: nowrap;
}

.kyc-portal-secure-dot,
.kyc-panel-kicker > span {
    background: var(--kyc-blue);
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(0, 61, 165, .1);
    height: 8px;
    width: 8px;
}

.kyc-portal-main {
    flex: 1;
    padding: 28px 22px 22px;
}

.kyc-portal-shell {
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
}

.kyc-portal-progress {
    align-items: center;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(229, 231, 235, .9);
    border-radius: 18px;
    box-shadow: var(--kyc-shadow-soft);
    display: flex;
    justify-content: center;
    margin: 0 auto 18px;
    max-width: 760px;
    padding: 13px 18px;
}

.kyc-progress-step {
    align-items: center;
    color: #98a2b3;
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
}

.kyc-progress-number {
    align-items: center;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 50%;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 900;
    height: 29px;
    justify-content: center;
    width: 29px;
}

.kyc-progress-copy {
    line-height: 1.1;
}

.kyc-progress-copy strong,
.kyc-progress-copy small {
    display: block;
}

.kyc-progress-copy strong {
    color: inherit;
    font-size: .78rem;
    font-weight: 900;
}

.kyc-progress-copy small {
    font-size: .67rem;
    margin-top: 3px;
}

.kyc-progress-line {
    background: #d0d5dd;
    height: 1px;
    margin: 0 15px;
    max-width: 80px;
    width: 7vw;
}

.kyc-progress-step.is-active {
    color: var(--kyc-blue);
}

.kyc-progress-step.is-active .kyc-progress-number {
    background: var(--kyc-blue);
    border-color: var(--kyc-blue);
    box-shadow: 0 0 0 5px rgba(0, 61, 165, .09);
    color: #fff;
}

.kyc-progress-step.is-complete {
    color: var(--kyc-green);
}

.kyc-progress-step.is-complete .kyc-progress-number {
    background: var(--kyc-green-soft);
    border-color: rgba(22, 131, 91, .28);
    font-size: 0;
}

.kyc-progress-step.is-complete .kyc-progress-number::before {
    content: "\2713";
    font-size: .8rem;
}

.kyc-progress-line.is-complete {
    background: rgba(22, 131, 91, .42);
}

.kyc-access-card,
.kyc-portal-card,
.kyc-status-card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(229, 231, 235, .92);
    border-radius: var(--kyc-radius-lg);
    box-shadow: var(--kyc-shadow);
    overflow: hidden;
    position: relative;
}

.kyc-access-card::before,
.kyc-portal-card::before,
.kyc-status-card::before {
    background: linear-gradient(90deg, var(--kyc-blue) 0%, var(--kyc-blue) 58%, var(--kyc-red) 58%, var(--kyc-red) 100%);
    content: "";
    height: 7px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.kyc-access-card {
    margin: 0 auto;
    max-width: 660px;
    min-height: 0;
}

.kyc-access-intro {
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(247, 249, 255, .98));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 48px;
    position: relative;
}

.kyc-access-intro::before {
    background: linear-gradient(90deg, rgba(0, 61, 165, .05) 0 1px, transparent 1px 42px), linear-gradient(180deg, rgba(0, 61, 165, .04) 0 1px, transparent 1px 42px);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.kyc-access-intro::after {
    background: radial-gradient(circle, rgba(0, 61, 165, .15), rgba(0, 61, 165, .03) 58%, transparent 70%);
    border-radius: 50%;
    bottom: -170px;
    content: "";
    height: 430px;
    pointer-events: none;
    position: absolute;
    right: -145px;
    width: 430px;
}

.kyc-access-intro > * {
    position: relative;
    z-index: 1;
}

.kyc-brand-kicker,
.kyc-panel-kicker {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 900;
    gap: 8px;
    letter-spacing: .01em;
    width: fit-content;
}

.kyc-brand-kicker {
    background: var(--kyc-blue-soft);
    border: 1px solid rgba(0, 61, 165, .12);
    color: var(--kyc-blue-dark);
    padding: 8px 12px;
}

.kyc-brand-stripes {
    background: #fff;
    border: 1px solid rgba(0, 61, 165, .14);
    border-radius: 999px;
    display: inline-flex;
    height: 10px;
    overflow: hidden;
    width: 22px;
}

.kyc-brand-stripes i:first-child {
    background: var(--kyc-blue);
    width: 55%;
}

.kyc-brand-stripes i:last-child {
    background: var(--kyc-red);
    width: 45%;
}

.kyc-access-intro h1 {
    color: var(--kyc-black);
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.02;
    margin: 25px 0 14px;
    max-width: 470px;
}

.kyc-access-intro > div > p {
    color: var(--kyc-muted);
    font-size: .98rem;
    line-height: 1.65;
    margin: 0;
    max-width: 500px;
}

.kyc-request-summary {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--kyc-border);
    border-radius: var(--kyc-radius-md);
    box-shadow: var(--kyc-shadow-soft);
    display: grid;
    gap: 4px;
    padding: 17px 18px;
}

.kyc-request-summary span,
.kyc-request-summary small {
    color: var(--kyc-muted);
    font-size: .75rem;
    font-weight: 700;
}

.kyc-request-summary strong {
    color: var(--kyc-black);
    font-size: 1rem;
    font-weight: 900;
}

.kyc-trust-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.kyc-trust-list span {
    align-items: center;
    color: var(--kyc-muted);
    display: flex;
    font-size: .77rem;
    font-weight: 700;
    gap: 9px;
}

.kyc-trust-list i {
    background: var(--kyc-blue);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 61, 165, .08);
    height: 7px;
    width: 7px;
}

.kyc-access-panel {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 54px 48px;
}

.kyc-access-panel-compact {
    justify-content: flex-start;
    padding: 36px 42px 34px;
}

.kyc-access-panel .kyc-access-heading h2 {
    margin-top: 0;
}

.kyc-access-heading .kyc-panel-description {
    margin-bottom: 17px;
}

.kyc-panel-kicker {
    background: var(--kyc-soft);
    border: 1px solid var(--kyc-border);
    color: var(--kyc-muted);
    padding: 8px 12px;
}

.kyc-access-panel h2,
.kyc-status-card h1 {
    color: var(--kyc-black);
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -.035em;
    margin: 17px 0 7px;
}

.kyc-panel-description {
    color: var(--kyc-muted);
    font-size: .98rem;
    line-height: 1.55;
    margin: 0 0 22px;
}

.kyc-email-note,
.kyc-portal-note,
.kyc-portal-warning {
    align-items: center;
    border-radius: 15px;
    display: flex;
    gap: 12px;
    line-height: 1.45;
    padding: 13px 15px;
}

.kyc-email-note,
.kyc-portal-note {
    background: var(--kyc-blue-soft);
    border: 1px solid rgba(0, 61, 165, .12);
    color: var(--kyc-text);
}

.kyc-email-note {
    font-size: .92rem;
    margin-bottom: 22px;
}

.kyc-access-panel-compact .kyc-email-note {
    margin-bottom: 14px;
}

.kyc-email-icon {
    align-items: center;
    background: #fff;
    border-radius: 11px;
    color: var(--kyc-blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.kyc-access-flow {
    background: var(--kyc-soft);
    border: 1px solid var(--kyc-border);
    border-radius: 17px;
    padding: 16px;
}

.kyc-otp-request-row {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
}

.kyc-otp-request-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.kyc-otp-request-copy strong {
    color: var(--kyc-black);
    font-size: .94rem;
    font-weight: 900;
}

.kyc-otp-request-copy span {
    color: var(--kyc-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.kyc-otp-request-form,
.kyc-otp-request-form .btn {
    width: 100%;
}

.kyc-otp-request-form .btn {
    font-size: .84rem;
    min-height: 48px;
    padding-left: .8rem;
    padding-right: .8rem;
}

.kyc-access-flow .kyc-otp-throttle {
    grid-template-columns: minmax(0, 1fr);
    margin: 12px 0 0;
    padding: 10px 12px;
}

.kyc-access-flow .kyc-otp-throttle.is-initial {
    display: none;
}

.kyc-otp-entry {
    border-top: 1px solid var(--kyc-border);
    margin-top: 15px;
    padding-top: 15px;
}

.kyc-code-validity {
    color: var(--kyc-muted);
    font-size: .75rem;
    line-height: 1.4;
    margin: 7px 0 13px;
}

.kyc-access-action {
    background: var(--kyc-soft);
    border: 1px solid var(--kyc-border);
    border-radius: 16px;
    display: grid;
    gap: 9px;
    padding: 15px;
}

.kyc-action-heading {
    align-items: center;
    color: var(--kyc-black);
    display: flex;
    font-size: .98rem;
    gap: 9px;
}

.kyc-action-heading > span {
    align-items: center;
    background: var(--kyc-blue-soft);
    border-radius: 9px;
    color: var(--kyc-blue);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.kyc-action-help {
    color: var(--kyc-muted);
    font-size: .86rem;
    line-height: 1.45;
    margin: 0 0 2px 43px;
}

.kyc-otp-throttle {
    align-items: center;
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: 13px;
    color: #7a2e0e;
    display: grid;
    gap: 11px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 3px 0;
    padding: 12px 13px;
}

.kyc-otp-throttle.is-ready {
    background: var(--kyc-green-soft);
    border-color: rgba(22, 131, 91, .22);
    color: #087044;
}

.kyc-otp-throttle.is-blocked {
    background: var(--kyc-red-soft);
    border-color: rgba(220, 28, 46, .22);
    color: #9f1239;
}

.kyc-otp-throttle-icon {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    position: relative;
    width: 38px;
}

.kyc-otp-throttle-icon::before {
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
    height: 19px;
    width: 19px;
}

.kyc-otp-throttle-icon::after {
    background: currentColor;
    content: "";
    height: 6px;
    left: 18px;
    position: absolute;
    top: 12px;
    width: 2px;
}

.kyc-otp-throttle-icon > span::after {
    background: currentColor;
    content: "";
    height: 2px;
    left: 18px;
    position: absolute;
    top: 18px;
    width: 6px;
}

.kyc-otp-throttle-copy {
    display: grid;
    gap: 2px;
    line-height: 1.35;
    min-width: 0;
}

.kyc-otp-throttle-copy strong {
    color: currentColor;
    font-size: .83rem;
}

.kyc-otp-throttle-copy > span {
    color: var(--kyc-muted);
    font-size: .75rem;
}

.kyc-otp-countdown {
    align-items: center;
    background: #fff;
    border: 1px solid currentColor;
    border-radius: 10px;
    color: currentColor;
    display: grid;
    gap: 2px;
    min-width: 136px;
    padding: 7px 10px;
    text-align: center;
}

.kyc-otp-countdown > span {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
}

.kyc-otp-countdown > strong {
    font-size: 1.04rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    line-height: 1.2;
}

.kyc-otp-throttle.is-ready .kyc-otp-countdown {
    display: none;
}

.kyc-otp-validity-note {
    background: #eef4ff;
    border-left: 4px solid var(--kyc-blue);
    border-radius: 11px;
    color: #173a7a;
    display: grid;
    font-size: .79rem;
    gap: 2px;
    line-height: 1.45;
    padding: 11px 13px;
}

.kyc-otp-validity-note strong {
    color: var(--kyc-blue-dark);
}

.kyc-action-divider {
    align-items: center;
    color: #98a2b3;
    display: flex;
    font-size: .69rem;
    font-weight: 800;
    gap: 10px;
    margin: 15px 0;
    text-transform: uppercase;
}

.kyc-action-divider::before,
.kyc-action-divider::after {
    background: var(--kyc-border);
    content: "";
    flex: 1;
    height: 1px;
}

.kyc-privacy-caption,
.kyc-status-caption {
    color: var(--kyc-muted);
    font-size: .76rem;
    line-height: 1.5;
    margin: 18px 0 0;
    text-align: center;
}

.kyc-privacy-caption strong {
    color: var(--kyc-black);
}

.kyc-access-action .btn {
    font-size: .96rem;
    min-height: 54px;
}

.form-label {
    color: var(--kyc-black);
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 7px;
}

.form-control,
.form-select {
    border: 1px solid #d0d5dd;
    border-radius: 13px;
    color: var(--kyc-text);
    min-height: 48px;
    padding: .7rem .85rem;
}

textarea.form-control {
    min-height: 92px;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(0, 61, 165, .75);
    box-shadow: 0 0 0 4px rgba(0, 61, 165, .1);
}

.kyc-otp-input {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .42em;
    min-height: 54px;
    text-align: center;
}

.btn {
    border-radius: 13px;
    font-size: .88rem;
    font-weight: 900;
    min-height: 48px;
    padding: .7rem 1.15rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-primary {
    background: var(--kyc-blue);
    border-color: var(--kyc-blue);
    box-shadow: 0 12px 24px rgba(0, 61, 165, .21);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--kyc-blue-dark);
    border-color: var(--kyc-blue-dark);
    box-shadow: 0 15px 28px rgba(0, 61, 165, .27);
    transform: translateY(-1px);
}

.btn-outline-primary,
.kyc-btn-secondary {
    background: #fff;
    border: 1px solid rgba(0, 61, 165, .35);
    color: var(--kyc-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.kyc-btn-secondary:hover,
.kyc-btn-secondary:focus {
    background: var(--kyc-blue-soft);
    border-color: var(--kyc-blue);
    color: var(--kyc-blue-dark);
}

.kyc-access-action .btn:disabled,
.kyc-access-action .btn:disabled:hover,
.kyc-access-action .btn:disabled:focus,
.kyc-otp-request-form .btn:disabled,
.kyc-otp-request-form .btn:disabled:hover,
.kyc-otp-request-form .btn:disabled:focus {
    background: #eef1f6;
    border-color: #d0d5dd;
    box-shadow: none;
    color: #667085;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

.alert {
    border-radius: 15px;
    font-size: .86rem;
    line-height: 1.45;
    padding: 13px 15px;
}

.alert-danger {
    background: var(--kyc-red-soft);
    border: 1px solid rgba(220, 28, 46, .2);
    color: #9f1239;
}

.alert-success {
    background: var(--kyc-green-soft);
    border: 1px solid rgba(22, 131, 91, .2);
    color: #087044;
}

.alert-warning {
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #7a2e0e;
}

.validation-summary-valid {
    display: none;
}

.kyc-portal-card {
    background: var(--kyc-soft);
}

.kyc-portal-header {
    background: linear-gradient(145deg, #fff, #fbfcff);
    border-bottom: 1px solid var(--kyc-border);
    padding: 36px 40px 30px;
    position: relative;
}

.kyc-portal-header h1 {
    color: var(--kyc-black);
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.08;
    margin: 18px 0 8px;
}

.kyc-portal-header > p {
    color: var(--kyc-muted);
    line-height: 1.55;
    margin: 0;
}

.kyc-request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.kyc-request-meta > span {
    background: #fff;
    border: 1px solid var(--kyc-border);
    border-radius: 999px;
    color: var(--kyc-muted);
    font-size: .76rem;
    font-weight: 700;
    padding: 8px 12px;
}

.kyc-request-meta strong {
    color: var(--kyc-black);
    margin-left: 3px;
}

.kyc-portal-content {
    padding: 28px;
}

.kyc-portal-content form {
    counter-reset: kyc-section;
}

.kyc-portal-section {
    background: #fff;
    border: 1px solid var(--kyc-border);
    border-radius: 20px;
    box-shadow: var(--kyc-shadow-soft);
    counter-increment: kyc-section;
    margin-top: 18px;
    padding: 24px;
}

.kyc-portal-section:first-of-type {
    margin-top: 0;
}

.kyc-portal-section h2 {
    align-items: center;
    color: var(--kyc-black);
    display: flex;
    font-size: 1.02rem;
    font-weight: 900;
    gap: 11px;
    margin: 0 0 20px;
}

.kyc-portal-section h2::before {
    align-items: center;
    background: var(--kyc-blue-soft);
    border-radius: 11px;
    color: var(--kyc-blue);
    content: counter(kyc-section);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .75rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.kyc-portal-warning {
    background: #fff7e8;
    border: 1px solid #fed7aa;
    border-left: 4px solid #d97706;
}

.kyc-owner-card {
    background: var(--kyc-soft);
    border: 1px solid var(--kyc-border);
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 17px;
}

.form-control[type="file"] {
    background: var(--kyc-soft);
    padding: .48rem;
}

.form-control[type="file"]::file-selector-button {
    background: var(--kyc-blue-soft);
    border: 0;
    border-radius: 9px;
    color: var(--kyc-blue-dark);
    font-size: .76rem;
    font-weight: 900;
    margin-right: 10px;
    padding: .55rem .7rem;
}

.kyc-declaration-consent {
    align-items: flex-start;
    background: var(--kyc-blue-soft);
    border: 2px solid rgba(0, 61, 165, .28);
    border-radius: 15px;
    display: flex;
    gap: 12px;
    padding: 16px;
}

.kyc-declaration-consent .form-check-input {
    flex: 0 0 auto;
    height: 1.35rem;
    margin: .1rem 0 0;
    width: 1.35rem;
}

.kyc-declaration-consent .form-check-label {
    color: var(--kyc-black);
    cursor: pointer;
    font-size: .95rem;
    font-weight: 850;
    line-height: 1.45;
}

.kyc-signature-wrap {
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    overflow: hidden;
}

#signatureCanvas {
    background-image: linear-gradient(transparent calc(100% - 42px), rgba(0, 61, 165, .14) calc(100% - 42px), rgba(0, 61, 165, .14) calc(100% - 41px), transparent calc(100% - 41px));
    display: block;
    height: 190px;
    touch-action: none;
    width: 100%;
}

.kyc-signature-actions {
    background: var(--kyc-soft);
    border-top: 1px solid var(--kyc-border);
    padding: 10px 12px;
}

.kyc-form-actions {
    background: #fff;
    border: 1px solid var(--kyc-border);
    border-radius: 18px;
    box-shadow: var(--kyc-shadow-soft);
    padding: 14px;
}

.kyc-status-card {
    margin: 42px auto 0;
    max-width: 650px;
    padding: 54px 48px 46px;
    text-align: center;
}

.kyc-status-card .kyc-panel-kicker {
    margin: 0 auto;
}

.kyc-status-icon {
    align-items: center;
    background: var(--kyc-green-soft);
    border: 1px solid rgba(22, 131, 91, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 9px rgba(22, 131, 91, .07);
    color: var(--kyc-green);
    display: flex;
    font-size: 1.5rem;
    font-weight: 900;
    height: 64px;
    justify-content: center;
    margin: 5px auto 25px;
    width: 64px;
}

.kyc-status-unavailable .kyc-status-icon {
    background: #fffaeb;
    border-color: #fedf89;
    box-shadow: 0 0 0 9px rgba(247, 144, 9, .08);
    color: #b54708;
}

.kyc-status-lead {
    color: var(--kyc-muted);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 520px;
}

.kyc-status-summary {
    background: var(--kyc-soft);
    border: 1px solid var(--kyc-border);
    border-radius: 16px;
    display: grid;
    gap: 4px;
    margin: 24px auto 0;
    max-width: 380px;
    padding: 15px;
}

.kyc-status-summary span {
    color: var(--kyc-muted);
    font-size: .73rem;
    font-weight: 700;
}

.kyc-status-summary strong {
    color: var(--kyc-black);
    font-size: .95rem;
}

.kyc-status-unavailable .alert {
    margin-top: 24px;
    text-align: left;
}

.kyc-portal-footer {
    align-items: flex-start;
    color: var(--kyc-muted);
    display: flex;
    font-size: .76rem;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    line-height: 1.4;
    padding: 20px 12px 0;
    text-align: center;
}

.kyc-portal-footer-content {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.kyc-portal-policy-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: center;
}

.kyc-portal-policy-links a {
    color: var(--kyc-blue-dark);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(0, 61, 165, .3);
    text-underline-offset: 3px;
}

.kyc-portal-policy-links a:hover,
.kyc-portal-policy-links a:focus {
    color: var(--kyc-blue);
    text-decoration-color: currentColor;
}

.kyc-portal-footer-mark {
    background: linear-gradient(90deg, var(--kyc-blue) 0 58%, var(--kyc-red) 58% 100%);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 5px;
    margin-top: 5px;
    width: 42px;
}

@media (max-width: 991.98px) {
    .kyc-access-panel {
        padding: 40px;
    }
}

@media (max-width: 767.98px) {
    .kyc-portal-topbar,
    .kyc-portal-topbar-inner {
        min-height: 64px;
    }

    .kyc-portal-topbar-inner {
        padding: 0 18px;
    }

    .kyc-portal-logo {
        width: 106px;
    }

    .kyc-portal-brand-divider,
    .kyc-portal-system-name {
        display: none;
    }

    .kyc-portal-main {
        padding: 18px 14px 16px;
    }

    .kyc-progress-copy small {
        display: none;
    }

    .kyc-progress-line {
        margin: 0 9px;
    }

    .kyc-portal-header {
        padding: 31px 24px 24px;
    }

    .kyc-portal-content {
        padding: 18px;
    }

    .kyc-portal-section {
        padding: 20px;
    }
}

@media (max-width: 575.98px) {
    .kyc-portal-secure {
        font-size: 0;
        gap: 0;
        padding: 11px;
    }

    .kyc-portal-progress {
        border-radius: 15px;
        justify-content: space-between;
        padding: 11px 12px;
    }

    .kyc-progress-step {
        gap: 6px;
    }

    .kyc-progress-copy strong {
        font-size: .7rem;
    }

    .kyc-progress-number {
        height: 26px;
        width: 26px;
    }

    .kyc-progress-line {
        flex: 1;
        margin: 0 6px;
        width: auto;
    }

    .kyc-access-card,
    .kyc-portal-card,
    .kyc-status-card {
        border-radius: 22px;
    }

    .kyc-access-intro,
    .kyc-access-panel {
        padding: 30px 22px;
    }

    .kyc-access-panel-compact {
        padding: 28px 18px 24px;
    }

    .kyc-otp-request-row {
        align-items: stretch;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kyc-otp-request-copy {
        text-align: center;
    }

    .kyc-access-intro h1 {
        font-size: 2rem;
    }

    .kyc-otp-throttle {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .kyc-access-flow .kyc-otp-throttle {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kyc-otp-countdown {
        grid-column: 1 / -1;
        width: 100%;
    }

    .kyc-access-panel h2,
    .kyc-status-card h1 {
        font-size: 1.65rem;
    }

    .kyc-portal-content {
        padding: 12px;
    }

    .kyc-portal-section {
        border-radius: 17px;
        padding: 18px 15px;
    }

    .kyc-request-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .kyc-request-meta > span {
        border-radius: 12px;
    }

    .kyc-status-card {
        margin-top: 22px;
        padding: 44px 22px 34px;
    }

    .kyc-portal-footer {
        align-items: flex-start;
        padding-left: 2px;
        padding-right: 2px;
    }

    .kyc-portal-policy-links {
        gap: 6px 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.kyc-autosave-status {
    align-items: center;
    background: #f6f8fc;
    border: 1px solid #dfe4ee;
    border-radius: 14px;
    color: #344054;
    display: flex;
    gap: 12px;
    padding: 13px 16px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kyc-autosave-status strong,
.kyc-autosave-status small {
    display: block;
}

.kyc-autosave-status small {
    color: inherit;
    margin-top: 2px;
}

.kyc-autosave-indicator {
    background: #2f49b5;
    border: 4px solid #e6ebff;
    border-radius: 50%;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.kyc-autosave-status[data-state="saving"] .kyc-autosave-indicator {
    animation: kyc-autosave-pulse 1s ease-in-out infinite;
}

.kyc-autosave-status[data-state="saved"] {
    background: #eef9f1;
    border-color: #b9dfc3;
    color: #17603a;
}

.kyc-autosave-status[data-state="saved"] .kyc-autosave-indicator {
    background: #26834f;
    border-color: #d7f0df;
}

.kyc-autosave-status[data-state="warning"] {
    background: #fff8e7;
    border-color: #efd28a;
    color: #714c00;
}

.kyc-autosave-status[data-state="warning"] .kyc-autosave-indicator {
    background: #c18400;
    border-color: #ffebbb;
}

.kyc-autosave-status[data-state="error"],
.kyc-autosave-status[data-state="expired"] {
    background: #fff1f2;
    border-color: #f0b9be;
    color: #9f1d2b;
}

.kyc-autosave-status[data-state="error"] .kyc-autosave-indicator,
.kyc-autosave-status[data-state="expired"] .kyc-autosave-indicator {
    background: #c8333b;
    border-color: #f9dadd;
}

.kyc-session-expired-overlay[hidden] {
    display: none !important;
}

.kyc-session-expired-overlay {
    align-items: center;
    background: rgba(9, 18, 45, .72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 10050;
}

.kyc-session-expired-dialog {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(6, 15, 42, .28);
    color: #182033;
    max-width: 560px;
    padding: 34px;
    text-align: center;
    width: 100%;
}

.kyc-session-expired-dialog h2 {
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-weight: 800;
    margin: 10px 0 14px;
}

.kyc-session-expired-dialog p {
    color: #596579;
}

.kyc-session-expired-dialog .btn {
    margin-top: 8px;
    min-height: 50px;
    padding-left: 24px;
    padding-right: 24px;
}

.kyc-session-expired-icon {
    align-items: center;
    background: #eef2ff;
    border-radius: 50%;
    display: inline-flex;
    font-size: 1.5rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

body.kyc-session-locked {
    overflow: hidden;
}

@keyframes kyc-autosave-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.84); }
}

@media (max-width: 575.98px) {
    .kyc-session-expired-overlay { padding: 14px; }
    .kyc-session-expired-dialog { border-radius: 18px; padding: 26px 20px; }
}