/* ===========================================
   АЛЕРТЫ (СООБЩЕНИЯ)
   =========================================== */

/* Базовый стиль алерта (ошибка или успех) */
.login-alert {
    /* Внутренние отступы */
    padding: 12px 14px;
    /* Отступ снизу */
    margin-bottom: 18px;
    /* Размер шрифта */
    font-size: 15px;
    /* Минимальное скругление */
    border-radius: 2px;
    /* По умолчанию скрыт */
    display: none;
    /* Для бегущей полоски */
    position: relative;
    /* Скрываем полоску за пределами */
    overflow: hidden;
}

/* Алерт ошибки — красная тема */
.login-alert.error {
    /* Красноватый полупрозрачный фон */
    background: rgba(255, 0, 60, 0.08);
    /* Красная рамка */
    border: 1px solid rgba(255, 0, 60, 0.4);
    /* Красный текст */
    color: var(--neon-red);
}

/* Алерт успеха — зелёная тема */
.login-alert.success {
    /* Зеленоватый полупрозрачный фон */
    background: rgba(0, 255, 136, 0.08);
    /* Зелёная рамка */
    border: 1px solid rgba(0, 255, 136, 0.4);
    /* Зелёный текст */
    color: var(--neon-green);
}

/* Бегущая полоска внизу алерта */
.login-alert::after {
    /* Пустой контент */
    content: '';
    /* Внизу алерта */
    position: absolute;
    bottom: 0;
    left: 0;
    /* Тонкая линия */
    height: 2px;
    /* На всю ширину */
    width: 100%;
    /* Анимация пробега */
    animation: alertLine 2s linear infinite;
}

/* Красная бегущая полоска для ошибки */
.login-alert.error::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--neon-red),
        transparent
    );
}

/* Зелёная бегущая полоска для успеха */
.login-alert.success::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--neon-green),
        transparent
    );
}

/* Анимация бегущей полоски слева направо */
@keyframes alertLine {
    /* Начало — за левым краем */
    0% { transform: translateX(-100%); }
    /* Конец — за правым краем */
    100% { transform: translateX(100%); }
}

/* Класс для показа алерта */
.login-alert.visible {
    /* Отображаем */
    display: block;
    /* Анимация появления */
    animation: alertAppear 0.5s ease-out;
}

/* Анимация плавного появления алерта */
@keyframes alertAppear {
    /* Начало — выше, прозрачный */
    0% { opacity: 0; transform: translateY(-10px); }
    /* Конец — на месте, видимый */
    100% { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   ЗАГРУЗЧИК (СПИННЕР)
   =========================================== */

/* Контейнер загрузчика */
.login-loader {
    /* По умолчанию скрыт */
    display: none;
    /* Центрирование содержимого */
    text-align: center;
    /* Отступы */
    padding: 15px;
    /* Приглушённый цвет текста */
    color: var(--text-dim);
    /* Размер шрифта */
    font-size: 15px;
}

/* Видимый загрузчик */
.login-loader.visible {
    display: block;
}

/* Вращающийся круг-спиннер */
.cyber-spinner {
    /* Размер круга */
    width: 35px;
    height: 35px;
    /* Центрирование и отступ снизу */
    margin: 0 auto 10px;
    /* Рамка круга — большая часть прозрачная */
    border: 2px solid rgba(0, 255, 136, 0.1);
    /* Верхняя часть — яркая (создаёт эффект вращения) */
    border-top: 2px solid var(--neon-green);
    /* Круглая форма */
    border-radius: 50%;
    /* Бесконечное вращение */
    animation: spin 0.8s linear infinite;
    /* Свечение вокруг спиннера */
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

/* Анимация вращения на 360 градусов */
@keyframes spin {
    to { transform: rotate(360deg); }
}