.wwx-theme.wwx-public-shell {
    min-height: 100vh;
    margin: 0;
    color: var(--wwx-text-primary);
    background:
        linear-gradient(rgba(238, 245, 242, 0.68), rgba(230, 239, 235, 0.82)),
        var(--wwx-app-bg-image);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.wwx-theme.wwx-public-shell.wwx-color-dark {
    background:
        linear-gradient(rgba(5, 18, 14, 0.72), rgba(5, 18, 14, 0.86)),
        var(--wwx-app-bg-image);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.wwx-theme .wwx-public-main {
    width: min(calc(100% - (2 * var(--wwx-space-4))), 72rem);
    min-height: calc(100vh - 4rem);
    padding-block: var(--wwx-space-5) var(--wwx-space-8);
    margin-inline: auto;
}

.wwx-theme .wwx-public-surface,
.wwx-theme .focusDiv,
.wwx-theme .content-wrapperForm {
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-glass);
    border: 1px solid var(--wwx-border-subtle);
    border-radius: var(--wwx-radius-lg);
    box-shadow: var(--wwx-shadow-md);
    backdrop-filter: blur(18px);
}

.wwx-theme .wwx-public-footer {
    position: static;
    width: 100%;
    color: var(--wwx-text-secondary);
    background: transparent;
    border-color: var(--wwx-border-subtle) !important;
}

.wwx-theme .wwx-public-background {
    position: fixed;
    inset: -50%;
    z-index: -1;
    width: 200%;
    height: 250%;
    opacity: 0.08;
    transform: rotate(-35deg);
}

.wwx-theme .bckgrd {
    position: relative;
    z-index: 0;
    min-height: calc(100vh - 8rem);
}

.wwx-theme .bckgrd::before {
    display: none;
}

.wwx-theme .wwx-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 8rem);
    padding: var(--wwx-space-4);
}

.wwx-theme .wwx-login-card {
    width: min(100%, 28rem);
    padding: clamp(var(--wwx-space-5), 4vw, var(--wwx-space-6));
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-glass);
    border: 1px solid var(--wwx-border-subtle);
    border-radius: var(--wwx-radius-lg);
    box-shadow: var(--wwx-shadow-md);
    backdrop-filter: blur(24px);
}

.wwx-theme .wwx-login-card .divLogo img {
    width: 5.5rem;
    height: auto;
    margin-bottom: var(--wwx-space-3);
    filter: drop-shadow(0 0.35rem 0.6rem rgba(0, 0, 0, 0.16));
}

.wwx-theme .wwx-login-eyebrow {
    margin-bottom: var(--wwx-space-1);
    color: var(--wwx-color-forest-600);
    font-size: var(--wwx-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wwx-theme.wwx-color-dark .wwx-login-eyebrow {
    color: var(--wwx-color-forest-300);
}

.wwx-theme .login-title {
    margin-bottom: var(--wwx-space-1);
    color: var(--wwx-text-primary);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.wwx-theme .wwx-login-subtitle {
    margin: 0;
    color: var(--wwx-text-secondary);
}

.wwx-theme .wwx-login-card .password-toggle {
    position: absolute;
    top: 50%;
    right: var(--wwx-space-4);
    z-index: 5;
    color: var(--wwx-text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
}

.wwx-theme .wwx-login-card .password-toggle:hover,
.wwx-theme .wwx-login-card .hover-primary:hover {
    color: var(--wwx-link-hover-color) !important;
}

.wwx-theme .wwx-login-card .btn-login {
    min-height: 3rem;
    color: var(--wwx-color-white);
    font-size: var(--wwx-font-size-lg);
    font-weight: 700;
    background: var(--wwx-color-forest-600);
    border-color: var(--wwx-color-forest-500);
    border-radius: var(--wwx-radius-sm);
}

.wwx-theme .wwx-login-card .btn-login:hover {
    color: var(--wwx-color-white);
    background: var(--wwx-color-forest-700);
    border-color: var(--wwx-color-forest-600);
    box-shadow: var(--wwx-shadow-focus);
}

.wwx-theme .wwx-login-card .version-footer {
    margin-top: var(--wwx-space-5);
    padding-top: var(--wwx-space-4);
    color: var(--wwx-text-secondary);
    font-size: var(--wwx-font-size-xs);
    text-align: center;
    border-top: 1px solid var(--wwx-border-subtle);
}

@media (max-width: 575.98px) {
    .wwx-theme .wwx-public-main {
        width: 100%;
        padding: var(--wwx-space-3);
    }
}