.auth-left__bg {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    filter: saturate(1.08) contrast(1.02);
}

.auth-left-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.2) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--app-secondary-rgb), 0.14) 1px, transparent 1px),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--app-primary) 74%, rgba(3, 8, 18, 0.86)) 0%,
            rgba(6, 15, 28, 0.8) 56%,
            color-mix(in srgb, var(--app-secondary) 42%, rgba(3, 8, 18, 0.92)) 100%
        );
    background-size: 34px 34px, 34px 34px, auto;
    z-index: 1;
}

.auth-left-overlay--warn {
    background:
        linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--app-accent-rgb), 0.16) 1px, transparent 1px),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--app-primary) 72%, rgba(3, 8, 18, 0.86)) 0%,
            rgba(6, 15, 28, 0.82) 55%,
            color-mix(in srgb, var(--app-accent) 42%, rgba(3, 8, 18, 0.9)) 100%
        );
    background-size: 34px 34px, 34px 34px, auto;
}

.auth-left-overlay--danger {
    background:
        linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.16) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--app-danger) 22%, transparent) 1px, transparent 1px),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--app-primary) 68%, rgba(3, 8, 18, 0.88)) 0%,
            rgba(6, 15, 28, 0.84) 55%,
            color-mix(in srgb, var(--app-danger) 38%, rgba(3, 8, 18, 0.92)) 100%
        );
    background-size: 34px 34px, 34px 34px, auto;
}

.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 760px;
}

.auth-brand-lockup__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 7px;
}

.auth-brand-lockup__copy h5,
.auth-brand-lockup__copy p {
    margin: 0;
    color: #ffffff;
}

.auth-brand-lockup__copy h5 {
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: 0;
}

.auth-brand-lockup__copy p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    line-height: 1.45;
}

.auth-left__quote {
    border-color: rgba(255, 255, 255, 0.34) !important;
}

.auth-left__quote h4 {
    letter-spacing: 0;
}

.auth-rail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.64);
}

.auth-rail-footer small {
    color: inherit;
}

.auth-right {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--app-bg) 42%, #ffffff) 0%, #ffffff 100%);
    border-left-color: color-mix(in srgb, var(--app-line) 78%, var(--app-primary) 22%);
}

.auth-panel {
    width: 100%;
    max-width: 520px;
}

.auth-panel__inner {
    padding: 64px 28px;
}

.auth-title {
    color: var(--app-text) !important;
    letter-spacing: 0 !important;
}

.auth-subtitle,
.auth-terms,
.auth-meta,
.auth-hint,
.auth-backlink {
    color: var(--app-muted);
}

.auth-field label,
.auth-switch,
.auth-info__text,
.lock-row__label,
.lock-panel__label {
    color: var(--app-text);
}

.auth-input,
.otp-box {
    background: var(--app-surface);
    border-color: color-mix(in srgb, var(--app-line) 78%, var(--app-primary) 22%);
    color: var(--app-text);
}

.auth-input:focus,
.otp-box:focus {
    border-color: color-mix(in srgb, var(--app-primary) 78%, #111827);
    box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), 0.12);
}

.auth-brand-dot {
    background: linear-gradient(135deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 62%, var(--app-secondary) 38%)) !important;
    box-shadow: 0 0 0 0.45rem rgba(var(--app-primary-rgb), 0.1);
}

.auth-brand-dot--warn {
    background: var(--app-accent) !important;
    box-shadow: 0 0 0 0.45rem rgba(var(--app-accent-rgb), 0.13);
}

.auth-brand-dot--danger {
    background: var(--app-danger) !important;
    box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--app-danger) 16%, transparent);
}

.auth-button,
.auth-button--dark {
    background: linear-gradient(135deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 64%, var(--app-secondary) 36%)) !important;
    color: #ffffff !important;
}

.auth-button:hover,
.auth-button--dark:hover {
    box-shadow: 0 16px 30px rgba(var(--app-primary-rgb), 0.24);
}

.auth-button--outline {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--app-line) 70%, var(--app-primary) 30%) !important;
    color: var(--app-primary) !important;
}

.auth-link,
.auth-backlink {
    color: var(--app-primary) !important;
}

.auth-alert {
    border-color: transparent;
}

.auth-alert--success {
    background: color-mix(in srgb, var(--app-success) 12%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--app-success) 30%, #ffffff) !important;
    color: color-mix(in srgb, var(--app-success) 72%, #0f172a) !important;
}

.auth-alert--danger {
    background: color-mix(in srgb, var(--app-danger) 10%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--app-danger) 28%, #ffffff) !important;
    color: color-mix(in srgb, var(--app-danger) 74%, #0f172a) !important;
}

.auth-alert__icon {
    background: var(--app-success);
    color: #ffffff;
}

.auth-alert--danger .auth-alert__icon {
    background: var(--app-danger);
}

.auth-mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.auth-mobile-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--app-bg) 68%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--app-line) 78%, var(--app-primary) 22%);
    margin-bottom: 4px;
}

.auth-mobile-brand__logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.auth-mobile-brand__logo--light {
    display: none;
}

.auth-mobile-brand h5 {
    color: var(--app-text);
    letter-spacing: 0;
}

.auth-mobile-brand p {
    max-width: 32rem;
    color: var(--app-muted) !important;
    line-height: 1.45;
}

html[data-bs-theme="dark"] body.auth-layout,
body.dark-version.auth-layout {
    background:
        linear-gradient(90deg, rgba(var(--app-secondary-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--app-accent-rgb), 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #081420 0%, #0b1826 54%, #07121d 100%) !important;
    background-size: 42px 42px, 42px 42px, auto !important;
}

html[data-bs-theme="dark"] .auth-right,
body.dark-version .auth-right {
    background: linear-gradient(180deg, #102033 0%, #0c1a2a 100%) !important;
    border-left-color: #22384d !important;
}

html[data-bs-theme="dark"] .auth-panel__inner,
body.dark-version .auth-panel__inner {
    background: rgba(12, 26, 42, 0.78);
    border: 1px solid #22384d;
    border-radius: 18px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
}

html[data-bs-theme="dark"] .auth-title,
html[data-bs-theme="dark"] .auth-field label,
html[data-bs-theme="dark"] .auth-switch,
html[data-bs-theme="dark"] .auth-mobile-brand h5,
body.dark-version .auth-title,
body.dark-version .auth-field label,
body.dark-version .auth-switch,
body.dark-version .auth-mobile-brand h5 {
    color: #f4f8fd !important;
}

html[data-bs-theme="dark"] .auth-subtitle,
html[data-bs-theme="dark"] .auth-terms,
html[data-bs-theme="dark"] .auth-meta,
html[data-bs-theme="dark"] .auth-hint,
html[data-bs-theme="dark"] .auth-mobile-brand p,
body.dark-version .auth-subtitle,
body.dark-version .auth-terms,
body.dark-version .auth-meta,
body.dark-version .auth-hint,
body.dark-version .auth-mobile-brand p {
    color: #9fb0c6 !important;
}

html[data-bs-theme="dark"] .auth-input,
html[data-bs-theme="dark"] .otp-box,
body.dark-version .auth-input,
body.dark-version .otp-box {
    background: #101d2d !important;
    border-color: #2a4058 !important;
    color: #f8fbff !important;
}

html[data-bs-theme="dark"] .auth-mobile-brand__mark,
body.dark-version .auth-mobile-brand__mark {
    background: #101d2d;
    border-color: #2a4058;
}

html[data-bs-theme="dark"] .auth-mobile-brand__logo--dark,
body.dark-version .auth-mobile-brand__logo--dark {
    display: none;
}

html[data-bs-theme="dark"] .auth-mobile-brand__logo--light,
body.dark-version .auth-mobile-brand__logo--light {
    display: block;
}

html[data-bs-theme="dark"] .auth-button--outline,
body.dark-version .auth-button--outline {
    border-color: #2a4058 !important;
    color: #f4f8fd !important;
}

html[data-bs-theme="dark"] .auth-alert--success,
body.dark-version .auth-alert--success {
    background: rgba(22, 138, 91, 0.2) !important;
    border-color: rgba(22, 138, 91, 0.34) !important;
    color: #d1fae5 !important;
}

html[data-bs-theme="dark"] .auth-alert--danger,
body.dark-version .auth-alert--danger {
    background: rgba(180, 35, 24, 0.2) !important;
    border-color: rgba(180, 35, 24, 0.34) !important;
    color: #fee2e2 !important;
}

@media (max-width: 991.98px) {
    .auth-right {
        min-height: 100vh;
        border-left: 0;
    }

    .auth-panel__inner {
        padding: 40px 24px;
    }

    html[data-bs-theme="dark"] .auth-right,
    body.dark-version .auth-right {
        background: transparent !important;
    }
}

@media (max-width: 575.98px) {
    .auth-panel__inner {
        padding: 32px 18px;
    }

    .auth-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}