.manage-auth.loginbg {
    --manage-auth-text: #202020;
    --manage-auth-text-secondary: #646464;
    --manage-auth-border: #dedede;
    --manage-auth-border-strong: #b8b8b8;
    --manage-auth-brand: #c8102e;
    --manage-auth-brand-hover: #9e1027;
    --manage-auth-accent: #f69b38;
    --manage-auth-focus: rgba(200, 16, 46, 0.2);
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 6vw, 112px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #f8f3ef;
    background-image: var(
        --manage-login-background-image,
        url("/img/background/login-concepts/konfx-manage-login-3d-01.png")
    ) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--manage-auth-text);
    font-family: var(--ff-primary, "Segoe UI", sans-serif);
}

.manage-auth.loginbg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 26%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.06) 74%,
        rgba(255, 255, 255, 0.02) 100%
    );
}

.manage-auth.loginbg > * {
    position: relative;
    z-index: 1;
}

.manage-auth .manage-auth__layout-row {
    width: 100%;
    margin: 0;
    padding: 0;
}

.manage-auth .manage-auth__main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.manage-auth,
.manage-auth input,
.manage-auth select,
.manage-auth button,
.manage-auth label {
    font-family: var(--ff-primary, "Segoe UI", sans-serif);
}

.manage-auth .manage-auth-card.custom-card-lg {
    width: min(100%, 440px);
    min-height: 480px;
    display: flex;
    margin: 0;
    padding: clamp(32px, 3vw, 48px) !important;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
        0 30px 80px rgba(78, 50, 31, 0.28),
        0 8px 24px rgba(78, 50, 31, 0.18) !important;
    color: var(--manage-auth-text);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.manage-auth .manage-auth-card__body {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.manage-auth .manage-auth-card__logo {
    margin-bottom: 28px;
    padding: 0;
}

.manage-auth .auth-theme-logo,
html[data-theme="dark"] .manage-auth .auth-theme-logo {
    background-image: var(--auth-logo-light);
}

.manage-auth .manage-auth-card__header {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 0;
}

.manage-auth .manage-auth-card__title {
    margin: 0;
    color: var(--manage-auth-text) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.manage-auth .manage-auth-card__subtitle {
    max-width: 285px;
    margin: 0;
    color: var(--manage-auth-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.manage-auth .manage-auth-card__feedback {
    min-height: 50px;
    display: grid;
    align-items: center;
    margin: 4px 0;
}

.manage-auth .manage-auth-card__feedback .invalid-feedback {
    color: #b42318;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

.manage-auth .manage-auth-card__content {
    width: 100%;
}

.manage-auth input.form-control.input-floating,
.manage-auth input.form-control.form-digit,
.manage-auth .country-phone-input input.form-control,
.manage-auth .country-phone-input select.form-select {
    min-height: 52px;
    box-sizing: border-box;
    border: 1px solid var(--manage-auth-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--manage-auth-text) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5;
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.manage-auth input.form-control.input-floating,
.manage-auth .country-phone-input input.form-control,
.manage-auth .country-phone-input select.form-select {
    padding: 12px 16px !important;
}

.manage-auth .form-floating > .form-control.input-floating {
    height: 52px;
    min-height: 52px;
}

.manage-auth .form-floating label {
    --floating-label-x: 16px;
    background-color: #ffffff;
    color: var(--manage-auth-text-secondary);
}

.manage-auth input.form-control.input-floating:hover,
.manage-auth input.form-control.form-digit:hover,
.manage-auth .country-phone-input input.form-control:hover,
.manage-auth .country-phone-input select.form-select:hover {
    border-color: var(--manage-auth-border-strong) !important;
}

.manage-auth input.form-control.input-floating:focus,
.manage-auth input.form-control.form-digit:focus,
.manage-auth .country-phone-input input.form-control:focus,
.manage-auth .country-phone-input select.form-select:focus {
    border-color: var(--manage-auth-brand) !important;
    box-shadow: 0 0 0 4px var(--manage-auth-focus) !important;
    outline: none;
}

.manage-auth .btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1;
    transition:
        filter 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease;
}

.manage-auth .btn-primary {
    border-color: var(--manage-auth-brand) !important;
    background: linear-gradient(
        135deg,
        var(--manage-auth-brand) 0%,
        #df3d43 58%,
        var(--manage-auth-accent) 100%
    ) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.manage-auth .btn-primary:hover:not(:disabled) {
    filter: brightness(0.96) saturate(1.06);
}

.manage-auth .btn-primary:focus-visible,
.manage-auth .auth-back-button:focus-visible,
.manage-auth .auth-provider-button:focus-visible,
.manage-auth a.link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--manage-auth-focus) !important;
}

.manage-auth .btn-primary:active:not(:disabled) {
    filter: brightness(0.91);
}

.manage-auth .btn:disabled,
.manage-auth .btn.disabled {
    cursor: not-allowed;
    filter: grayscale(0.12);
    opacity: 0.58;
}

.manage-auth .auth-back-button {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--manage-auth-brand) !important;
}

.manage-auth .auth-back-button:hover:not(:disabled) {
    border-color: rgba(200, 16, 46, 0.08) !important;
    background: rgba(200, 16, 46, 0.08) !important;
    color: var(--manage-auth-brand-hover) !important;
}

.manage-auth .auth-provider-button {
    border: 1px solid var(--manage-auth-border) !important;
    background: #ffffff !important;
    color: var(--manage-auth-text) !important;
}

.manage-auth .auth-provider-button:hover:not(:disabled) {
    border-color: var(--manage-auth-border-strong) !important;
    background: #f7f7f7 !important;
}

.manage-auth a.link {
    color: var(--manage-auth-brand) !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.manage-auth a.link:hover {
    color: var(--manage-auth-brand-hover) !important;
    text-decoration: underline !important;
}

.manage-auth-code-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.manage-auth input.form-control.form-digit {
    width: 100%;
    min-width: 0;
    padding: 12px 4px !important;
    text-align: center;
}

.manage-auth .auth-resend-row {
    color: var(--manage-auth-text-secondary);
    white-space: normal;
}

.manage-auth .subtitle-md,
.manage-auth hr {
    color: var(--manage-auth-text-secondary);
}

.manage-auth img[alt="MFA QR Code"] {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .manage-auth.loginbg {
        align-items: flex-start;
        padding: 24px 16px;
        background-position: center;
    }

    .manage-auth.loginbg::before {
        background: rgba(255, 255, 255, 0.28);
    }

    .manage-auth .manage-auth-card.custom-card-lg {
        width: min(100%, 440px);
        min-height: 0;
        padding: 32px 24px !important;
        background: rgba(255, 255, 255, 0.96) !important;
    }
}

@media (max-width: 359.98px) {
    .manage-auth.loginbg {
        padding-inline: 12px;
    }

    .manage-auth .manage-auth-card.custom-card-lg {
        padding-inline: 20px !important;
    }

    .manage-auth-code-row {
        gap: 6px;
    }
}

@media (min-width: 768px) and (max-height: 640px) {
    .manage-auth.loginbg {
        align-items: flex-start;
        padding-block: 24px;
    }
}

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