body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff; /* Белый фон */
    margin: 0;
}

.login-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    transition: opacity 0.3s ease; /* Плавное исчезновение формы */
}

.login-container.hidden {
    opacity: 0; /* Скрываем форму */
    pointer-events: none; /* Убираем взаимодействие */
}

#error {
    display: none;
}

/* Стили для анимации загрузки */
.loading-overlay {
    display: none; /* Скрыт по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Полностью прозрачный фон */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Поверх всего */
}

.loading-overlay.active {
    display: flex; /* Показываем при добавлении класса active */
}

.gif-animation {
    width: 150px; /* Размер вашей анимации */
    height: 150px;
    transform: translateY(-100px); /* Изначально выше видимой области */
    opacity: 0; /* Невидима в начале */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Плавное движение и появление */
}

.loading-overlay.active .gif-animation {
    transform: translateY(0); /* Опускается в центр */
    opacity: 1; /* Становится видимой */
}