/* Общие стили */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #f7f9fc; /* Очень светлый лавандовый */
    color: #555555; /* Мягкий темно-серый текст */
    line-height: 1.7;
    margin: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 30px;
    box-sizing: border-box;
    background: linear-gradient(45deg, #a8b8db, #b8c6db, #c6b8db, #dbb8c6); /* Пастельный градиент */
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    position: relative; /* Для позиционирования плавающих элементов */
    overflow: hidden; /* Чтобы призраки не вылезали за контейнер */
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.auth-form {
    max-width: 550px; /* Чуть шире */
    width: 100%;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08); /* Легкая тень */
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    animation: fadeIn 0.8s ease-in-out;
    padding: 45px; /* Больше отступы */
    position: relative; /* Для z-index плавающих элементов */
    z-index: 1; /* Чтобы форма была над призраками */
}

.auth-form:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
}

.auth-form h1 {
    text-align: center;
    padding: 35px;
    background: linear-gradient(45deg, #7986cb, #9fa8da); /* Приглушенный фиолетовый градиент */
    color: #fff;
    font-size: 2.5em;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    animation: slideInDown 0.8s ease-in-out;
    font-weight: 700;
    margin-bottom: 40px; /* Больше отступ */
    animation: glow 3s ease-in-out infinite alternate; /* Анимация свечения */
    text-shadow: 0 0 15px rgba(121, 134, 203, 0.7); /* Мягкое свечение */
}

@keyframes glow {
    from {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 15px rgba(121, 134, 203, 0.7);
    }
    to {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px rgba(121, 134, 203, 0.5);
    }
}

.form-group {
    margin-bottom: 35px; /* Больше отступ */
    animation: slideInLeft 0.6s ease-in-out;
}

.form-group label {
    color: #777777; /* Светло-серый цвет */
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 18px; /* Больше отступ */
    border: 2px solid #d6dce2; /* Очень светло-серый цвет */
    border-radius: 12px;
    font-size: 1.1em;
    color: #555555;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #f9f9fb; /* Очень светлый серый */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.05);
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    border-color: #7986cb; /* Приглушенный фиолетовый */
    box-shadow: 0 0 8px rgba(121, 134, 203, 0.3);
    outline: none;
}

.form-group {
    margin-bottom: 35px;
    animation: slideInLeft 0.6s ease-in-out;
}

.form-group label {
    color: #777777;
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 18px;
    border: 2px solid #d6dce2;
    border-radius: 12px;
    font-size: 1.1em;
    color: #555555;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #f9f9fb;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.05);
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    border-color: #7986cb;
    box-shadow: 0 0 8px rgba(121, 134, 203, 0.3);
    outline: none;
}

.btn-container {
    justify-content: space-between; /* Распределяем пространство между элементами */
    align-items: stretch; /* Выравниваем элементы по вертикали */
}

.btn {
    padding: 17px 37px;
    margin: 20px 0; /* Уменьшаем вертикальный отступ */
    background: linear-gradient(45deg, #7986cb, #9fa8da);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.3em;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: block; /* Делаем ссылку блочным элементом */
}

.btn:hover {
    background: linear-gradient(45deg, #5c6bc0, #7986cb);
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}
.btn-secondary {
    background: linear-gradient(45deg, #90a4ae, #b0bec5);
}

.btn-secondary:hover {
    background: linear-gradient(45deg, #78909c, #90a4ae);
}

.login-link {
    display: block;
    text-align: center;
    margin-top: 30px; /* Больше отступ */
    color: #7986cb;
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.login-link:hover {
    color: #5c6bc0; /* Более темный фиолетовый */
}

.error-message {
    color: #e57373; /* Мягкий красный */
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: 600;
    animation: shake 0.5s ease-in-out;
}

.info-message {
    color: #7986cb; /* Приглушенный фиолетовый */
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: 600;
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-60px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-40px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* Floating Ghosts */
.floating-ghost {
    position: absolute;
    width: 50px;
    height: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 50 60" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M25 0C11.1929 0 0 11.1929 0 25V55C0 57.7614 2.23858 60 5 60H45C47.7614 60 50 57.7614 50 55V25C50 11.1929 38.8071 0 25 0ZM10 35C7.23858 35 5 32.7614 5 30C5 27.2386 7.23858 25 10 25C12.7614 25 15 27.2386 15 30C15 32.7614 12.7614 35 10 35ZM40 35C37.2386 35 35 32.7614 35 30C35 27.2386 37.2386 25 40 25C42.7614 25 45 27.2386 45 30C45 32.7614 42.7614 35 40 35ZM7.5 45H17.5C17.5 41.3139 14.5694 38.3833 10.8833 38.3833C7.19717 38.3833 4.26667 41.3139 4.26667 45H7.5ZM32.5 45H42.5C42.5 41.3139 39.5694 38.3833 35.8833 38.3833C32.1972 38.3833 29.2667 41.3139 29.2667 45H32.5Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
    position: absolute; /*  Важно для правильного позиционирования */
    animation: floatGhostAcross 20s linear infinite;
}

@keyframes floatGhostAcross {
    0% {
        left: -10%; /* Начинаем за пределами экрана слева */
        transform: translateY(0);
    }
    100% {
        left: 110%; /*  Заканчиваем за пределами экрана справа */
        transform: translateY(0);
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .auth-form {
        padding: 35px;
    }

    .auth-form h1 {
        font-size: 2.2em;
        padding: 30px;
    }

    .form-group label {
        font-size: 1.1em;
    }

    .form-group input[type="text"],
    .form-group input[type="password"] {
        padding: 16px;
    }

    .btn {
        padding: 15px 33px;
        font-size: 1.2em;
    }
}