.auth-shell{
    width:100%;
}

.auth-card{
    position:relative;
    overflow:visible;
    width:100%;
    max-width:392px;
    padding:28px 22px;
}

.auth-card-top{
    display:flex;
    justify-content:flex-end;
    margin-bottom:8px;
}

.auth-lang-switch .lang-trigger{
    background:rgba(255,255,255,.84);
}

.auth-lang-switch .lang-menu{
    top:calc(100% + 10px);
}

.auth-brand{
    gap:6px;
    margin-bottom:20px;
}

.auth-brand::before{
    content:"";
    position:absolute;
    top:6px;
    width:225px;
    height:225px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 20%, rgba(143,168,181,.22) 46%, rgba(143,168,181,0) 72%),
        radial-gradient(circle at 50% 62%, rgba(111,136,148,.18) 0%, rgba(111,136,148,0) 68%);
    filter:blur(10px);
    opacity:.9;
    z-index:-2;
    animation:login-logo-aura 8.5s ease-in-out infinite;
}

.auth-brand-logo{
    width:166px;
    height:166px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 16px 30px rgba(73,96,108,.14));
    animation:
        login-logo-intro 1.1s cubic-bezier(.19,1,.22,1) both,
        login-logo-idle 7.8s cubic-bezier(.22,.61,.36,1) 1.1s infinite;
    transform-origin:center;
    will-change:transform,filter;
}

.auth-field + .auth-field{
    margin-top:14px;
}

.auth-submit{
    width:100%;
    margin-top:16px;
}

.auth-card .hv-control-input:-webkit-autofill{
    animation-name:login-autofill-detect;
    animation-duration:.01s;
}

.auth-card .hv-control-input:autofill{
    animation-name:login-autofill-detect;
    animation-duration:.01s;
}

@keyframes login-logo-intro{
    0%{
        opacity:0;
        transform:translate3d(0,18px,0) scale(.9) rotate(-6deg);
        filter:drop-shadow(0 6px 14px rgba(73,96,108,.08));
    }
    62%{
        opacity:1;
        transform:translate3d(0,-10px,0) scale(1.08) rotate(1.5deg);
        filter:drop-shadow(0 24px 36px rgba(73,96,108,.18));
    }
    100%{
        opacity:1;
        transform:translate3d(0,0,0) scale(1) rotate(0deg);
        filter:drop-shadow(0 16px 30px rgba(73,96,108,.14));
    }
}

@keyframes login-autofill-detect{
    from{
        opacity:1;
    }
    to{
        opacity:1;
    }
}

@keyframes login-logo-idle{
    0%,100%{
        transform:translate3d(0,0,0) scale(1) rotate(0deg);
        filter:drop-shadow(0 16px 30px rgba(73,96,108,.14));
    }
    22%{
        transform:translate3d(-1px,-9px,0) scale(1.028) rotate(-1.2deg);
        filter:drop-shadow(0 20px 34px rgba(73,96,108,.18));
    }
    50%{
        transform:translate3d(0,-14px,0) scale(1.055) rotate(.5deg);
        filter:drop-shadow(0 24px 38px rgba(73,96,108,.22));
    }
    76%{
        transform:translate3d(2px,-8px,0) scale(1.022) rotate(1.3deg);
        filter:drop-shadow(0 19px 32px rgba(73,96,108,.17));
    }
}

@keyframes login-logo-aura{
    0%,100%{
        transform:scale(1) translateY(0);
        opacity:.78;
    }
    50%{
        transform:scale(1.08) translateY(-6px);
        opacity:1;
    }
}

@media (prefers-reduced-motion: reduce){
    .auth-brand::before{
        animation:none;
    }

    .auth-brand-logo{
        animation:none;
        filter:drop-shadow(0 12px 22px rgba(73,96,108,.12));
    }
}

@media (max-width: 575.98px){
    .auth-card{
        max-width:360px;
        padding:24px 18px;
    }

    .auth-card-top{
        margin-bottom:6px;
    }

    .auth-brand{
        margin-bottom:16px;
    }

    .auth-brand::before{
        width:179px;
        height:179px;
    }

    .auth-brand-logo{
        width:124px;
        height:124px;
    }
}

@media (max-width: 430px){
    .auth-card{
        padding:22px 16px;
    }

    .auth-card-top{
        margin-bottom:4px;
    }

    .auth-brand::before{
        width:156px;
        height:156px;
    }

    .auth-brand-logo{
        width:106px;
        height:106px;
    }
}