:root {
    color-scheme: light;
    --auth-bg: #f3f5f8;
    --auth-panel: #ffffff;
    --auth-ink: #101828;
    --auth-muted: #667085;
    --auth-line: #dfe4ec;
    --auth-soft: #f8fafc;
    --auth-primary: #2368f0;
    --auth-primary-dark: #164fc6;
    --auth-danger: #c9364f;
    --auth-danger-soft: #fff1f3;
    --auth-brand-bg: #07111f;
    --auth-brand-surface: #0b1b30;
    --auth-brand-text: #f5f8ff;
    --auth-brand-muted: #aab8ca;
    --auth-focus: rgba(35, 104, 240, 0.22);
    --auth-shadow: 0 32px 80px rgba(15, 23, 42, 0.12);
    --auth-radius-lg: 28px;
    --auth-radius-md: 16px;
    --auth-radius-sm: 12px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--auth-bg);
}

body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: var(--auth-ink);
    background: var(--auth-bg);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr);
    min-height: 100vh;
    min-height: 100svh;
}

.auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 100%;
    overflow: hidden;
    color: var(--auth-brand-text);
    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(57, 128, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--auth-brand-surface),
            var(--auth-brand-bg) 66%
        );
    isolation: isolate;
}

.auth-brand-panel::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 56px 56px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85),
            transparent
        );
    content: "";
}

.brand-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(12px);
    pointer-events: none;
}

.brand-glow-one {
    top: -120px;
    right: -90px;
    width: 330px;
    height: 330px;
    background: rgba(35, 104, 240, 0.2);
}

.brand-glow-two {
    bottom: -170px;
    left: -110px;
    width: 380px;
    height: 380px;
    background: rgba(33, 208, 186, 0.1);
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    min-height: 100%;
    padding: clamp(38px, 5vw, 76px);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 13px;
    color: #ffffff;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.17),
            rgba(255, 255, 255, 0.06)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 16px 36px rgba(0, 0, 0, 0.22);
    font-size: 21px;
    font-weight: 800;
}

.brand-name {
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -0.04em;
}

.auth-brand-copy {
    max-width: 620px;
    margin-top: auto;
    padding-top: 90px;
}

.auth-eyebrow,
.auth-kicker,
.account-eyebrow {
    margin: 0 0 16px;
    color: #79a9ff;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-brand-copy h1 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(40px, 4.4vw, 68px);
    font-weight: 660;
    letter-spacing: -0.055em;
    line-height: 1.01;
}

.auth-brand-description {
    max-width: 570px;
    margin: 28px 0 0;
    color: var(--auth-brand-muted);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.72;
}

.auth-feature-list {
    display: grid;
    gap: 18px;
    max-width: 610px;
    margin-top: 52px;
}

.auth-feature {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.feature-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    color: #8db5ff;
    background: rgba(255, 255, 255, 0.055);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.auth-feature div {
    display: grid;
    gap: 4px;
}

.auth-feature strong {
    font-size: 14px;
    font-weight: 680;
}

.auth-feature div span {
    color: var(--auth-brand-muted);
    font-size: 13px;
    line-height: 1.45;
}

.auth-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 64px;
    color: #8fa0b7;
    font-size: 12px;
}

.security-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #44d7b6;
    box-shadow: 0 0 0 6px rgba(68, 215, 182, 0.1);
}

.auth-form-panel {
    display: grid;
    min-height: 100%;
    place-items: center;
    padding: clamp(24px, 5vw, 84px);
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(35, 104, 240, 0.07),
            transparent 30%
        ),
        var(--auth-bg);
}

.auth-form-wrap {
    width: min(100%, 520px);
}

.mobile-brand {
    display: none;
}

.auth-card {
    width: 100%;
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid rgba(208, 215, 226, 0.8);
    border-radius: var(--auth-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--auth-shadow);
    backdrop-filter: blur(20px);
}

.auth-card-header {
    margin-bottom: 34px;
}

.auth-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--auth-primary);
}

.auth-card-header h2 {
    margin: 0;
    color: var(--auth-ink);
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 690;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.auth-card-header p {
    margin: 15px 0 0;
    color: var(--auth-muted);
    font-size: 15px;
    line-height: 1.65;
}

.auth-alert {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 13px;
    margin-bottom: 24px;
    padding: 15px;
    border: 1px solid #ffc7d0;
    border-radius: var(--auth-radius-sm);
    color: #8f1d33;
    background: var(--auth-danger-soft);
}

.auth-alert-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: var(--auth-danger);
    font-weight: 800;
}

.auth-alert div {
    display: grid;
    gap: 4px;
}

.auth-alert strong {
    font-size: 14px;
}

.auth-alert div span {
    font-size: 13px;
    line-height: 1.45;
}

.auth-form {
    display: grid;
    gap: 23px;
}

.form-field {
    display: grid;
    gap: 9px;
}

.form-field label {
    color: #263348;
    font-size: 13px;
    font-weight: 680;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.form-label-row a {
    color: var(--auth-primary);
    font-size: 12px;
    font-weight: 680;
    text-decoration: none;
}

.form-label-row a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.input-leading-icon {
    position: absolute;
    left: 16px;
    z-index: 1;
    color: #98a2b3;
    font-size: 13px;
    font-weight: 760;
    pointer-events: none;
}

.input-shell input {
    width: 100%;
    min-height: 54px;
    padding: 0 78px 0 45px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-sm);
    outline: none;
    color: var(--auth-ink);
    background: #ffffff;
    font-size: 15px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.input-shell input:hover {
    border-color: #b7c1cf;
}

.input-shell input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 4px var(--auth-focus);
}

.input-shell input:-webkit-autofill {
    -webkit-text-fill-color: var(--auth-ink);
    box-shadow: 0 0 0 1000px #ffffff inset;
}

.form-field small {
    color: #8490a2;
    font-size: 11px;
    line-height: 1.45;
}

.password-toggle {
    position: absolute;
    right: 8px;
    z-index: 2;
    min-width: 58px;
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    color: #526074;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.password-toggle:hover {
    color: var(--auth-primary);
    background: #f1f5fb;
}

.password-toggle:focus-visible,
.auth-submit:focus-visible,
.logout-button:focus-visible,
.brand-lockup:focus-visible,
.account-brand:focus-visible {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.auth-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-top: 3px;
    overflow: hidden;
    border: 0;
    border-radius: var(--auth-radius-sm);
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #2b76ff,
            var(--auth-primary-dark)
        );
    box-shadow:
        0 15px 28px rgba(35, 104, 240, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    cursor: pointer;
    font-size: 14px;
    font-weight: 720;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 18px 34px rgba(35, 104, 240, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.auth-submit:active {
    transform: translateY(0);
}

.auth-submit:disabled {
    cursor: wait;
    opacity: 0.78;
}

.button-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: auth-spin 700ms linear infinite;
}

.auth-submit.is-loading [data-submit-label] {
    display: none;
}

.auth-submit.is-loading .button-spinner {
    display: block;
}

.auth-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #edf0f4;
    color: #8a95a5;
    font-size: 11px;
}

.auth-card-footer p {
    margin: 0;
}

.auth-copyright {
    margin: 22px 0 0;
    color: #8995a6;
    font-size: 11px;
    text-align: center;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1080px) {
    .auth-shell {
        grid-template-columns: minmax(360px, 0.85fr) minmax(480px, 1.15fr);
    }

    .auth-brand-copy h1 {
        font-size: clamp(38px, 4.8vw, 54px);
    }

    .auth-feature-list {
        margin-top: 38px;
    }
}

@media (max-width: 880px) {
    .auth-shell {
        display: block;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100vh;
        min-height: 100svh;
        padding: 32px 20px;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 24px;
        color: var(--auth-ink);
        font-size: 21px;
        font-weight: 760;
        letter-spacing: -0.04em;
    }

    .mobile-brand-mark {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 12px;
        color: #ffffff;
        background:
            linear-gradient(
                145deg,
                #2f7aff,
                #164fc6
            );
        box-shadow: 0 10px 24px rgba(35, 104, 240, 0.24);
        font-size: 17px;
    }

    .auth-card {
        padding: clamp(28px, 7vw, 46px);
    }
}

@media (max-width: 520px) {
    .auth-form-panel {
        align-items: start;
        padding: 24px 14px;
    }

    .auth-card {
        border-radius: 21px;
        box-shadow: 0 20px 52px rgba(15, 23, 42, 0.1);
    }

    .auth-card-header {
        margin-bottom: 28px;
    }

    .auth-card-header h2 {
        font-size: 28px;
    }

    .auth-card-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   Invitation acceptance
   ========================================================= */

.invitation-success,
.invitation-account-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #b8ead8;
    border-radius: var(--auth-radius-sm);
    background: #effcf7;
}

.invitation-success-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #ffffff;
    background: #168b69;
    font-weight: 800;
}

.invitation-success strong,
.invitation-success span,
.invitation-account-note strong,
.invitation-account-note span {
    display: block;
}

.invitation-success strong,
.invitation-account-note strong {
    color: var(--auth-ink);
    font-size: 14px;
}

.invitation-success span,
.invitation-account-note span {
    margin-top: 4px;
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.5;
}

.invitation-account-note {
    grid-template-columns: 1fr;
    border-color: #cddcf7;
    background: #f4f7fd;
}

.invitation-login-link {
    text-decoration: none;
}

.invitation-secondary-link {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-sm);
    color: var(--auth-primary);
    background: #ffffff;
    font-size: 13px;
    font-weight: 720;
    text-decoration: none;
}

.invitation-secondary-link:hover {
    border-color: var(--auth-primary);
}
/* =========================================================
   P-07 — Secure remote KYC submission
   ========================================================= */

.remote-kyc-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top left,
            rgba(44, 120, 110, 0.16),
            transparent 34rem
        ),
        #08110f;
    color: #eef8f5;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.remote-kyc-shell {
    width: min(960px, calc(100% - 32px));
    margin: 0 auto;
    padding: 30px 0 56px;
}

.remote-kyc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.remote-kyc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.remote-kyc-brand > div {
    display: grid;
    gap: 2px;
}

.remote-kyc-brand strong {
    font-size: 0.98rem;
}

.remote-kyc-brand span:last-child {
    color: rgba(238, 248, 245, 0.6);
    font-size: 0.78rem;
}

.remote-kyc-brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(130, 220, 200, 0.28);
    border-radius: 13px;
    background: rgba(108, 204, 180, 0.1);
    font-weight: 800;
}

.remote-kyc-secure-chip,
.remote-kyc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(130, 220, 200, 0.26);
    border-radius: 999px;
    background: rgba(108, 204, 180, 0.08);
    font-size: 0.76rem;
    font-weight: 700;
}

.remote-kyc-hero,
.remote-kyc-card,
.remote-kyc-security,
.remote-kyc-completion {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    background: rgba(14, 27, 24, 0.88);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
}

.remote-kyc-hero {
    padding: clamp(24px, 5vw, 42px);
    margin-bottom: 18px;
}

.remote-kyc-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #7dd7c1;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.remote-kyc-hero h1,
.remote-kyc-card h2,
.remote-kyc-security h2,
.remote-kyc-completion h1 {
    margin: 0;
    line-height: 1.08;
}

.remote-kyc-hero h1 {
    max-width: 720px;
    font-size: clamp(2rem, 5vw, 3.7rem);
}

.remote-kyc-hero > p,
.remote-kyc-card > p,
.remote-kyc-security > p,
.remote-kyc-completion > p {
    color: rgba(238, 248, 245, 0.68);
    line-height: 1.7;
}

.remote-kyc-identity-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.remote-kyc-identity-grid > div {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.remote-kyc-identity-grid span,
.remote-kyc-identity-grid strong {
    display: block;
}

.remote-kyc-identity-grid span {
    margin-bottom: 4px;
    color: rgba(238, 248, 245, 0.5);
    font-size: 0.72rem;
}

.remote-kyc-alert {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

.remote-kyc-alert p {
    margin: 0;
}

.remote-kyc-alert p + p {
    margin-top: 6px;
}

.remote-kyc-alert.is-success {
    border-color: rgba(70, 200, 150, 0.32);
    background: rgba(70, 200, 150, 0.08);
}

.remote-kyc-alert.is-error {
    border-color: rgba(235, 105, 105, 0.35);
    background: rgba(235, 105, 105, 0.08);
}

.remote-kyc-card,
.remote-kyc-security {
    margin-top: 18px;
    padding: clamp(20px, 4vw, 30px);
}

.remote-kyc-requirements {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.remote-kyc-requirements article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}

.remote-kyc-requirements article > div {
    min-width: 0;
}

.remote-kyc-requirements strong,
.remote-kyc-requirements small {
    display: block;
}

.remote-kyc-requirements small {
    margin-top: 4px;
    color: rgba(238, 248, 245, 0.5);
    line-height: 1.45;
}

.remote-kyc-status.is-ready {
    border-color: rgba(70, 200, 150, 0.36);
}

.remote-kyc-status.is-missing {
    border-color: rgba(235, 175, 70, 0.38);
}

.remote-kyc-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 22px 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    line-height: 1.55;
}

.remote-kyc-consent input {
    margin-top: 4px;
}

.remote-kyc-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.remote-kyc-form-grid label,
.remote-kyc-file-field {
    display: grid;
    gap: 7px;
}

.remote-kyc-form-grid label > span,
.remote-kyc-file-field > span {
    font-size: 0.78rem;
    font-weight: 700;
}

.remote-kyc-form-grid input,
.remote-kyc-form-grid select,
.remote-kyc-file-field input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    background: #0b1815;
    color: #eef8f5;
}

.remote-kyc-file-field {
    margin-top: 14px;
}

.remote-kyc-file-field small,
.remote-kyc-complete-card > small {
    color: rgba(238, 248, 245, 0.5);
    line-height: 1.5;
}

.remote-kyc-primary,
.remote-kyc-delete {
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.remote-kyc-primary {
    min-height: 46px;
    margin-top: 18px;
    padding: 10px 18px;
    background: #70d6bd;
    color: #07110f;
}

.remote-kyc-primary:disabled {
    cursor: not-allowed;
    opacity: 0.44;
}

.remote-kyc-delete {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(235, 105, 105, 0.28);
    background: rgba(235, 105, 105, 0.08);
    color: #ffd8d8;
}

.remote-kyc-staged-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.remote-kyc-staged-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.remote-kyc-staged-list strong,
.remote-kyc-staged-list span,
.remote-kyc-staged-list small {
    display: block;
}

.remote-kyc-staged-list span,
.remote-kyc-staged-list small {
    margin-top: 4px;
    color: rgba(238, 248, 245, 0.53);
}

.remote-kyc-empty,
.remote-kyc-next {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.remote-kyc-empty span {
    color: rgba(238, 248, 245, 0.55);
}

.remote-kyc-complete-card.is-ready {
    border-color: rgba(70, 200, 150, 0.28);
}

.remote-kyc-complete-card.is-locked {
    opacity: 0.9;
}

.remote-kyc-missing-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
}

.remote-kyc-missing-list span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(235, 175, 70, 0.1);
    font-size: 0.74rem;
}

.remote-kyc-security > div {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.remote-kyc-security > div span {
    padding-left: 18px;
    color: rgba(238, 248, 245, 0.62);
    line-height: 1.5;
}

[dir="rtl"] .remote-kyc-security > div span {
    padding-left: 0;
    padding-right: 18px;
}

.remote-kyc-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(238, 248, 245, 0.5);
    font-size: 0.76rem;
}

.remote-kyc-shell.is-complete {
    display: grid;
    min-height: 100vh;
    align-items: center;
}

.remote-kyc-completion {
    width: min(650px, 100%);
    box-sizing: border-box;
    margin: auto;
    padding: clamp(28px, 6vw, 50px);
    text-align: center;
}

.remote-kyc-completion-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 1px solid rgba(112, 214, 189, 0.36);
    border-radius: 18px;
    background: rgba(112, 214, 189, 0.1);
    font-size: 1.7rem;
    font-weight: 900;
}

.remote-kyc-completion .remote-kyc-identity-grid {
    text-align: start;
}

.remote-kyc-next {
    margin-top: 20px;
    text-align: start;
}

.remote-kyc-next p {
    margin: 0;
    color: rgba(238, 248, 245, 0.58);
    line-height: 1.6;
}

.remote-kyc-completion.is-unavailable
.remote-kyc-completion-icon {
    border-color: rgba(235, 175, 70, 0.34);
    background: rgba(235, 175, 70, 0.08);
}

@media (max-width: 700px) {
    .remote-kyc-shell {
        width: min(100% - 20px, 960px);
        padding-top: 18px;
    }

    .remote-kyc-header {
        align-items: flex-start;
    }

    .remote-kyc-secure-chip {
        display: none;
    }

    .remote-kyc-identity-grid,
    .remote-kyc-form-grid {
        grid-template-columns: 1fr;
    }

    .remote-kyc-requirements article,
    .remote-kyc-staged-list article {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .remote-kyc-requirements article,
    .remote-kyc-staged-list article {
        display: grid;
    }

    .remote-kyc-delete {
        width: 100%;
    }

    .remote-kyc-primary {
        width: 100%;
    }

    .remote-kyc-footer {
        display: grid;
    }
}
/* ==========================================================
   P-03 — Persistent sign-in preference
   ========================================================== */

.remember-me-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.remember-me-option {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.remember-me-option input {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.remember-me-row small {
    margin: 0;
}