.login-page-skeleton {
    display: none;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f8fbfd;
}

body.login-skeleton-active .login-page-skeleton {
    display: flex;
}

body.login-skeleton-active .login-page-content {
    display: none;
}

.login-skeleton-shell {
    width: 100%;
    max-width: 560px;
    display: flex;
    justify-content: center;
}

.login-skeleton-content {
    width: 100%;
    max-width: 470px;
}

.login-skeleton-logo {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    border-radius: 18px;
    background: #e8eef2;
}

.login-skeleton-card {
    background: #fff;
    border-radius: 0;
    box-shadow: 0px 4px 60px 0px rgba(190, 190, 190, 0.27);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid #e8ebed;
}

.login-skeleton-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-skeleton-footer {
    position: relative;
    overflow: hidden;
    width: 320px;
    max-width: 100%;
    height: 14px;
    margin: 50px auto 0;
    border-radius: 999px;
    background: #e8eef2;
}

.login-skeleton-block,
.login-skeleton-line,
.login-skeleton-circle,
.login-skeleton-logo,
.login-skeleton-footer {
    position: relative;
    overflow: hidden;
    background: #e8eef2;
}

.login-skeleton-block::after,
.login-skeleton-line::after,
.login-skeleton-circle::after,
.login-skeleton-logo::after,
.login-skeleton-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
    animation: login-skeleton-shimmer 1.4s infinite;
}

.login-skeleton-circle {
    width: 92px;
    height: 92px;
    border-radius: 50%;
}

.login-skeleton-line {
    height: 14px;
    border-radius: 999px;
}

.login-skeleton-line.title {
    width: 54%;
    height: 24px;
}

.login-skeleton-line.subtitle {
    width: 100%;
    height: 15px;
}

.login-skeleton-line.short {
    width: 34%;
    height: 16px;
}

.login-skeleton-line.label {
    width: 78px;
    height: 14px;
}

.login-skeleton-line.input {
    width: 100%;
    height: 40px;
    border-radius: 5px;
}

.login-skeleton-line.button {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: #cfdbe2;
    margin-top: 5px;
}

.login-skeleton-block.hero {
    height: 180px;
    border-radius: 18px;
}

@keyframes login-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 860px) {
    .login-page-skeleton {
        padding: 16px;
    }

    .login-skeleton-card {
        padding: 28px 24px;
    }
}