.login-scene {
    --login-scene-bg: url('/assets/images/auth/auth-background.webp?v=8');
    --login-scene-logo: url('/assets/brand/Ivervo/logo-outline.png?v=8');
    --login-scene-logo-size: 500px;
    --login-scene-overlay: .42;
    --login-scene-blur: 18px;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #ffffff;
    background: #050b18;
    isolation: isolate;
}

.login-scene::before,
.login-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.login-scene::before {
    background: var(--login-scene-bg) center center / cover no-repeat;
    filter: blur(var(--login-scene-blur));
    transform: scale(1.04);
}

.login-scene::after {
    z-index: -1;
    background: linear-gradient(90deg, rgba(4, 12, 31, var(--login-scene-overlay)), rgba(4, 12, 31, .22) 48%, rgba(4, 12, 31, var(--login-scene-overlay)));
    backdrop-filter: blur(var(--login-scene-blur));
    -webkit-backdrop-filter: blur(var(--login-scene-blur));
}

.login-language-switcher {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .72);
}

.login-language-switcher button {
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    font: inherit;
}

.login-language-switcher button:hover,
.login-language-switcher button.is-active {
    color: #ffffff;
    text-decoration: underline;
}

.login-scene__shell {
    width: min(1180px, calc(100% - 64px));
    min-height: 100vh;
    margin: auto;
    display: grid;
    grid-template-columns: 620px 430px;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

.login-scene__shell--left {
    grid-template-columns: 430px 620px;
}

.login-scene__shell--left .login-scene__card {
    order: -1;
}

.login-scene__shell--center {
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
    text-align: center;
}

.login-scene__shell--center .login-scene__brand-panel {
    align-items: center;
}

.login-scene__brand-panel {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.login-scene__logo {
    width: min(var(--login-scene-logo-size), 90vw);
    height: min(290px, calc(var(--login-scene-logo-size) * .46));
    margin: 0 auto 30px;
    transform: translateX(-40px);
    align-self: center;
    background: var(--login-scene-logo) center / contain no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

.login-scene__shell--center .login-scene__logo {
    transform: none;
}

.login-scene__brand-panel h1 {
    font-size: 64px;
    line-height: .95;
    letter-spacing: 0;
    margin: 0 0 26px;
    text-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

.login-scene__brand-panel p {
    font-size: 21px;
    line-height: 1.5;
    margin: 0;
    max-width: 580px;
    color: rgba(255, 255, 255, .9);
}

.login-scene__card {
    width: 430px;
    padding: 46px;
    background: rgba(7, 15, 36, .84);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-sizing: border-box;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.login-scene__card input,
.login-scene__card .auth-submit {
    width: 100%;
    box-sizing: border-box;
}

.auth-muted {
    color: #b8c7dc;
    font-size: 17px;
    line-height: 1.6;
}

.auth-form {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    color: #dbeafe;
    font-weight: 700;
}

.auth-form input {
    border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 14px;
    background: #111827;
    color: #fff;
    padding: 14px 16px;
    font-size: 15px;
}

.auth-submit {
    justify-content: center;
    margin-top: 6px;
}

.auth-switch {
    margin-top: 22px;
    color: #b8c7dc;
}

.auth-switch a {
    color: #38bdf8;
    font-weight: 800;
}

.auth-error {
    background: rgba(248, 113, 113, .12);
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fecaca;
    padding: 12px 14px;
    border-radius: 14px;
    margin: 18px 0;
}

@media (max-width: 1050px) {
    .login-scene__shell,
    .login-scene__shell--left,
    .login-scene__shell--center {
        grid-template-columns: 1fr;
        width: min(620px, calc(100% - 32px));
        padding: 30px 0;
    }

    .login-scene__brand-panel {
        text-align: center;
        align-items: center;
    }

    .login-scene__logo {
        width: min(var(--login-scene-logo-size), 90vw);
        height: 220px;
        transform: none;
    }

    .login-scene__brand-panel h1 {
        font-size: 52px;
    }

    .login-scene__card {
        width: 100%;
        order: 0;
    }
}