/* Базовые переменные и сброс */
        * {
            margin: 0; /* Убираем отступы по умолчанию */
            padding: 0; /* Убираем внутренние отступы по умолчанию */
            box-sizing: border-box; /* Паддинги и бордеры не увеличивают ширину элемента */
        }

        :root {
            /* Определение цветовой палитры в неоновом стиле */
            --neon-blue: #00f3ff;      /* Яркий голубой неон для основных акцентов */
            --neon-pink: #ff00ff;       /* Яркий розовый неон для контраста */
            --neon-green: #00ff9d;      /* Яркий зеленый неон для дополнительных акцентов */
            --neon-purple: #aa66ff;      /* Фиолетовый неон */
            --neon-cyan: #00b4ff;        /* Голубой неон */
            --dark-bg: #0a0818;           /* Основной темный фон страницы */
            --darker-bg: #070612;         /* Еще более темный фон для контраста */
            --nav-height: 80px;            /* Фиксированная высота навигационной панели */
            --text-light: rgba(255, 255, 255, 0.92); /* Полупрозрачный белый для текста */
            --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавная анимация с нелинейным ускорением */
        }

        body {
            background: #0a0818;          /* Темный фон для всей страницы */
            color: #fff;                  /* Белый цвет текста по умолчанию */
            min-height: 100vh;             /* Минимальная высота на весь экран */
            font-family: 'Segoe UI', sans-serif; /* Основной шрифт */
            padding-top: var(--nav-height); /* Отступ сверху, чтобы контент не скрывался под фиксированной шапкой */
        }

        /* Навигация */
        .navbar {
            display: flex;                 /* Используем flexbox для расположения элементов */
            align-items: center;           /* Выравниваем элементы по вертикали по центру */
            justify-content: space-between; /* Распределяем элементы: лого слева, меню справа */
            padding: 0 40px;                /* Внутренние отступы слева и справа */
            height: var(--nav-height);      /* Фиксированная высота из переменной */
            background: rgba(13, 10, 31, 0.95); /* Полупрозрачный темно-синий фон */
            box-shadow: 0 5px 30px rgba(0, 243, 255, 0.15); /* Неоновая тень снизу */
            position: fixed;                /* Фиксированное позиционирование - всегда видна сверху */
            width: 100%;                    /* Растягиваем на всю ширину */
            top: 0;                         /* Прижимаем к верхнему краю */
            z-index: 1000;                  /* Высокий z-index, чтобы быть поверх всего контента */
            backdrop-filter: blur(15px);     /* Размытие фона за панелью (эффект матового стекла) */
            border-bottom: 1px solid rgba(0, 243, 255, 0.1); /* Тонкая нижняя граница с неоновым оттенком */
        }

        .logo {
            display: flex;                 /* Flex для расположения картинки и текста в ряд */
            align-items: center;           /* Выравниваем по центру вертикали */
            gap: 12px;                      /* Расстояние между картинкой и текстом */
            text-decoration: none;          /* Убираем подчеркивание ссылки */
            transition: var(--transition);  /* Плавные изменения при наведении */
        }

        .logo:hover {
            transform: translateY(-2px);    /* Легкий подъем вверх при наведении */
        }

        .logo-img {
            height: 45px;                   /* Фиксированная высота изображения */
            width: auto;                     /* Ширина автоматически пропорционально высоте */
            filter: drop-shadow(0 0 15px var(--neon-blue)); /* Неоновое свечение вокруг логотипа */
            transition: var(--transition);  /* Плавность изменения свечения */
        }

        .logo:hover .logo-img {
            filter: drop-shadow(0 0 20px var(--neon-blue)); /* Усиление свечения при наведении */
        }

        .logo-text {
            text-shadow: 0 0 15px var(--neon-blue); /* Тень для создания эффекта свечения */
            color: var(--neon-blue);          /* Цвет текста */
            font-size: 2rem;                  /* Размер шрифта 32px  */
            font-weight: 300;                  /* Тонкое начертание */
            letter-spacing: 3px;               /* Увеличенный межбуквенный интервал */
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan)); /* Градиент для текста */
            -webkit-background-clip: text;     /* Обрезаем фон по контуру текста (для WebKit браузеров) */
            -webkit-text-fill-color: transparent; /* Делаем текст прозрачным, виден только фон */
            background-clip: text;              /* Стандартное свойство для обрезки фона по тексту */
            font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
            -ms-user-select: none; 
            -moz-user-select: none; 
            -webkit-user-select: none; 
            user-select: none;

        }

        /* Бургер-меню */
        .hamburger {
            width: 45px;                     /* Ширина кнопки */
            height: 35px;                    /* Высота кнопки */
            background: none;                 /* Прозрачный фон */
            border: none;                     /* Убираем границу */
            cursor: pointer;                  /* Курсор-указатель при наведении */
            position: relative;                /* Для абсолютного позиционирования полосок */
            display: none;                     /* Скрыт на десктопе, показываем только на мобильных */
            justify-content: center;           /* Центрируем содержимое по горизонтали */
            align-items: center;               /* Центрируем содержимое по вертикали */
            z-index: 1001;                      /* Выше, чем навигация, чтобы быть поверх */
            padding: 0;                         /* Убираем внутренние отступы */
            transition: var(--transition);      /* Плавность анимации */
        }

        .hamburger span {
            position: absolute;              /* Абсолютное позиционирование внутри кнопки */
            height: 3px;                      /* Толщина полоски */
            width: 100%;                      /* Ширина полоски на всю ширину кнопки */
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); /* Градиент для полоски */
            border-radius: 3px;               /* Скругленные края */
            transition: var(--transition);    /* Плавность анимации */
            box-shadow: 0 0 10px rgba(0, 243, 255, 0.8); /* Неоновое свечение */
        }

        .hamburger span:nth-child(1) { top: 0; transform-origin: left center; }     /* Верхняя полоска, точка трансформации слева */
        .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }    /* Средняя полоска, выравнивание по центру */
        .hamburger span:nth-child(3) { bottom: 0; transform-origin: left center; }  /* Нижняя полоска, точка трансформации слева */

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(2px, -3px); /* Поворот верхней полоски для формирования крестика */
            width: 110%;                                    /* Увеличение ширины */
            background: var(--neon-pink);                   /* Изменение цвета на розовый */
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.9);   /* Усиленное свечение */
        }

        .hamburger.active span:nth-child(2) { 
            opacity: 0;                                      /* Прячем среднюю полоску */
            transform: translateX(-15px);                    /* Сдвигаем влево с анимацией */
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(2px, 3px);  /* Поворот нижней полоски для формирования крестика */
            width: 110%;                                    /* Увеличение ширины */
            background: var(--neon-blue);                    /* Изменение цвета на голубой */
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.9);   /* Усиленное свечение */
        }

        .hamburger:hover span { 
            box-shadow: 0 0 15px rgba(0, 243, 255, 1);      /* Усиление свечения при наведении */
        }
        .hamburger:hover span:nth-child(1) { transform: translateY(-3px); } /* Сдвиг верхней полоски вверх */
        .hamburger:hover span:nth-child(3) { transform: translateY(3px); }  /* Сдвиг нижней полоски вниз */

        /* Навигационные ссылки */
        .nav-links {
            display: flex;                 /* Flex-контейнер для ссылок */
            gap: 2rem;                       /* Расстояние между пунктами меню */
            list-style: none;                /* Убираем маркеры списка */
            margin: 0;                       /* Убираем внешние отступы */
            padding: 0;                       /* Убираем внутренние отступы */
            flex: 1;                          /* Занимаем все доступное пространство */
            justify-content: flex-end;        /* Прижимаем ссылки к правому краю */
            align-items: center;              /* Выравниваем по вертикали по центру */
        }

        .nav-item {
            position: relative;              /* Для позиционирования выпадающего меню */
        }

        .nav-item a {
            color: var(--text-light);        /* Цвет текста из переменной */
            text-decoration: none;            /* Убираем подчеркивание */
            font-size: 1.1rem;                /* Размер шрифта */
            font-weight: 600;                  /* Полужирное начертание */
            display: flex;                     /* Flex для иконки и текста в одной строке */
            align-items: center;               /* Выравнивание по вертикали */
            gap: 10px;                         /* Расстояние между иконкой и текстом */
            padding: 12px 20px;                /* Внутренние отступы для увеличения области клика */
            border-radius: 12px;               /* Скругленные углы */
            transition: var(--transition);      /* Плавность анимаций */
            position: relative;                 /* Для позиционирования псевдоэлементов */
            overflow: hidden;                    /* Скрываем выходящие за пределы элементы (для анимации блика) */
        }

        .nav-item a::before {
            content: '';                        /* Обязательное свойство для псевдоэлемента */
            position: absolute;                  /* Абсолютное позиционирование внутри ссылки */
            top: 0;                              /* Прижимаем к верхнему краю */
            left: -100%;                         /* Прячем слева за пределами элемента */
            width: 100%;                         /* Ширина равна ширине ссылки */
            height: 100%;                        /* Высота равна высоте ссылки */
            background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.1), transparent); /* Полупрозрачный блик */
            transition: left 0.6s ease;          /* Плавное перемещение слева направо */
        }

        .nav-item a:hover::before {
            left: 100%;                          /* При наведении блик пробегает по всей ссылке */
        }

        .nav-item a::after {
            content: '';                        /* Псевдоэлемент для подчеркивания */
            position: absolute;                  /* Абсолютное позиционирование */
            bottom: 0;                            /* Прижимаем к нижнему краю */
            left: 50%;                            /* Начинаем от центра */
            width: 0;                             /* Начальная ширина 0 */
            height: 2px;                          /* Толщина подчеркивания */
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); /* Градиентное подчеркивание */
            transition: all 0.3s ease;            /* Плавное расширение */
            transform: translateX(-50%);           /* Сдвигаем влево на половину ширины для центрирования */
        }

        .nav-item a:hover::after {
            width: 80%;                           /* При наведении расширяем до 80% ширины ссылки */
        }

        .nav-item a:hover { 
            color: var(--neon-blue);              /* Меняем цвет текста на неоново-голубой */
            text-shadow: 0 0 10px var(--neon-blue); /* Добавляем свечение тексту */
            background: rgba(0, 243, 255, 0.05);   /* Легкий полупрозрачный фон */
        }

        /* Выпадающие меню */
        .dropdown-menu {
            position: absolute;                  /* Абсолютное позиционирование относительно .nav-item */
            top: calc(100% + 15px);               /* Чуть ниже родительского элемента (100% высота + 15px) */
            left: 0;                               /* Выравнивание по левому краю */
            background: rgba(20, 15, 45, 0.95);    /* Полупрозрачный темно-синий фон */
            list-style: none;                      /* Убираем маркеры списка */
            padding: 1rem 0;                       /* Внутренние отступы сверху и снизу */
            min-width: 250px;                      /* Минимальная ширина меню */
            display: none;                          /* По умолчанию скрыто */
            flex-direction: column;                 /* Элементы располагаются вертикально */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); /* Глубокая тень для объема */
            border-radius: 15px;                    /* Скругленные углы */
            z-index: 999;                           /* Чуть ниже основной навигации */
            backdrop-filter: blur(20px);             /* Сильное размытие фона (эффект стекла) */
            border: 1px solid rgba(0, 243, 255, 0.2); /* Тонкая неоновая граница */
            opacity: 0;                              /* Начальная прозрачность 0 для анимации */
            transform: translateY(20px) scale(0.95); /* Начальное смещение и масштаб для анимации */
            transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Пружинистая анимация появления */
        }

        .dropdown-menu::before {
            content: '';                           /* Псевдоэлемент для стрелочки */
            position: absolute;                     /* Абсолютное позиционирование */
            top: -10px;                              /* Поднимаем над меню */
            left: 25px;                              /* Отступ слева */
            width: 0;                                /* Ширина 0 - формируем треугольник */
            height: 0;                               /* Высота 0 - формируем треугольник */
            border-left: 12px solid transparent;     /* Левая прозрачная граница треугольника */
            border-right: 12px solid transparent;    /* Правая прозрачная граница треугольника */
            border-bottom: 12px solid rgba(20, 15, 45, 0.95); /* Нижняя цветная граница - сам треугольник */
        }

        .dropdown-menu li a {
            padding: 12px 25px;                     /* Внутренние отступы для пунктов меню */
            color: #ccc;                             /* Светло-серый цвет текста */
            transition: all 0.3s ease;               /* Плавные изменения при наведении */
            font-size: 1rem;                          /* Размер шрифта */
            border-radius: 0;                         /* Убираем скругление (прямоугольные) */
            position: relative;                        /* Для возможных псевдоэлементов */
        }

        .dropdown-menu li a:hover {
            color: var(--neon-blue);                  /* Меняем цвет на неоново-голубой */
            background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent); /* Градиентный фон */
            padding-left: 30px;                        /* Увеличиваем отступ слева (эффект движения) */
            transform: translateX(5px);                 /* Сдвигаем вправо */
        }

        .dropdown-menu li a::after {
            display: none;                           /* Убираем подчеркивание у элементов дропдауна */
        }

        .dropdown.open .dropdown-menu {
            display: flex;                           /* Показываем меню */
            opacity: 1;                              /* Полная непрозрачность */
            transform: translateY(0) scale(1);       /* Возвращаем в исходное положение (убираем трансформацию) */
        }

        /* Кнопка авторизации */
        .auth-btn {
            background: linear-gradient(135deg, #ff00cc, #00eaff); /* Диагональный градиент от розового к голубому */
            color: white;                            /* Белый текст */
            padding: 12px 28px;                       /* Внутренние отступы */
            border-radius: 25px;                      /* Сильно скругленные углы (овальная кнопка) */
            text-decoration: none;                    /* Убираем подчеркивание */
            font-weight: 700;                         /* Жирный шрифт */
            transition: var(--transition);             /* Плавные изменения */
            border: none;                              /* Убираем границу */
            cursor: pointer;                           /* Курсор-указатель */
            box-shadow: 0 5px 20px rgba(0, 234, 255, 0.4); /* Неоновое свечение */
            position: relative;                         /* Для псевдоэлемента с бликом */
            overflow: hidden;                           /* Скрываем выходящий за границы блик */
            display: flex;                              /* Flex для иконки и текста */
            align-items: center;                        /* Выравнивание по центру вертикали */
            gap: 8px;                                   /* Расстояние между иконкой и текстом */
            letter-spacing: 0.5px;                      /* Межбуквенный интервал */
        }

        .auth-btn::before {
            content: '';                              /* Псевдоэлемент для блика */
            position: absolute;                        /* Абсолютное позиционирование */
            top: 0;                                    /* Прижимаем к верху */
            left: -100%;                               /* Прячем слева */
            width: 100%;                               /* Ширина как у кнопки */
            height: 100%;                              /* Высота как у кнопки */
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Полупрозрачный белый блик */
            transition: left 0.6s ease;                /* Плавное перемещение */
        }

        .auth-btn:hover::before {
            left: 100%;                                /* При наведении блик пробегает по кнопке */
        }

        .auth-btn:hover {
            transform: translateY(-3px);               /* Поднимаем кнопку вверх */
            box-shadow: 0 8px 25px rgba(0, 234, 255, 0.6); /* Усиливаем свечение */
            background: linear-gradient(135deg, #00eaff, #ff00cc); /* Инвертируем градиент */
        }

        .auth-btn:active {
            transform: translateY(-1px);               /* При нажатии чуть опускаем для эффекта нажатия */
        }

        /* Модальные окна */
        .modal {
            display: none;                            /* По умолчанию скрыты */
            position: fixed;                           /* Фиксированное позиционирование на весь экран */
            top: 0;                                    /* Прижимаем к верху */
            left: 0;                                   /* Прижимаем к левому краю */
            width: 100%;                               /* На всю ширину */
            height: 100%;                              /* На всю высоту */
            background-color: rgba(0, 0, 0, 0.8);       /* Полупрозрачный черный фон */
            z-index: 2000;                              /* Очень высокий z-index, чтобы быть поверх всего */
            backdrop-filter: blur(10px);                 /* Размытие фона за модальным окном */
            animation: fadeIn 0.3s ease;                /* Анимация появления (плавное проявление) */
        }

        @keyframes fadeIn {
            from { opacity: 0; }                        /* Начало анимации - полностью прозрачный */
            to { opacity: 1; }                          /* Конец анимации - полностью видимый */
        }

        .modal-content {
            position: absolute;                         /* Абсолютное позиционирование внутри модального окна */
            top: 50%;                                   /* Сдвигаем на 50% сверху */
            left: 50%;                                  /* Сдвигаем на 50% слева */
            transform: translate(-50%, -50%);           /* Смещаем на половину своей ширины и высоты для точного центрирования */
            background: linear-gradient(135deg, rgba(20, 15, 45, 0.95), rgba(30, 20, 60, 0.95)); /* Градиентный фон */
            padding: 3rem;                              /* Внутренние отступы 48px (3rem) */
            border-radius: 20px;                         /* Скругленные углы */
            width: 90%;                                  /* Ширина 90% от родителя */
            max-width: 450px;                            /* Максимальная ширина 450px */
            box-shadow: 0 20px 60px rgba(0, 243, 255, 0.3); /* Неоновая тень */
            backdrop-filter: blur(20px);                  /* Размытие фона внутри окна */
            animation: slideUp 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Пружинистая анимация появления */
            position: relative;                           /* Для позиционирования псевдоэлементов */
            border: 2px solid transparent;                /* Прозрачная граница для места под неоновую рамку */
        }

        /* Неоновая рамка для модального окна авторизации */
        #auth-modal .modal-content::before,
        #register-modal .modal-content::before {
            content: '';                                 /* Псевдоэлемент для рамки */
            position: absolute;                           /* Абсолютное позиционирование */
            top: -2px;                                   /* Выходим за границы на 2px */
            left: -2px;                                  /* Выходим за границы на 2px */
            right: -2px;                                 /* Выходим за границы на 2px */
            bottom: -2px;                                /* Выходим за границы на 2px */
            border-radius: 22px;                          /* Скругление чуть больше, чем у .modal-content */
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)); /* Градиентная рамка */
            z-index: -1;                                   /* Помещаем под содержимое */
        }

        /* Для окна регистрации меняем направление градиента */
        #register-modal .modal-content::before {
            background: linear-gradient(135deg, var(--neon-pink), var(--neon-blue));
        }

        /* Внутренний фон модального окна (поверх рамки) */
        #auth-modal .modal-content::after,
        #register-modal .modal-content::after {
            content: '';                                 /* Псевдоэлемент для фона */
            position: absolute;                           /* Абсолютное позиционирование */
            top: 0;                                      /* Внутри границ */
            left: 0;                                     /* Внутри границ */
            right: 0;                                    /* Внутри границ */
            bottom: 0;                                   /* Внутри границ */
            border-radius: 20px;                          /* Скругление как у .modal-content */
            background: linear-gradient(135deg, rgba(20, 15, 45, 0.95), rgba(30, 20, 60, 0.95)); /* Тот же градиент, что и у контента */
            z-index: -1;                                   /* Помещаем под содержимое, но над рамкой */
        }

        @keyframes slideUp {
            from { 
                opacity: 0;                                /* Начало анимации - прозрачный */
                transform: translate(-50%, -40%);          /* Начальная позиция - чуть выше центра */
            }
            to { 
                opacity: 1;                                /* Конец анимации - полностью видимый */
                transform: translate(-50%, -50%);          /* Конечная позиция - точно по центру */
            }
        }

        /* Кнопка закрытия модального окна (крестик) */
        .modal-close {
            position: absolute;                           /* Абсолютное позиционирование внутри модального окна */
            top: 20px;                                    /* Отступ сверху 20px */
            right: 20px;                                  /* Отступ справа 20px */
            background: rgba(0, 243, 255, 0.1);            /* Полупрозрачный неоновый фон */
            border: 1px solid rgba(0, 243, 255, 0.3);      /* Тонкая неоновая граница */
            color: var(--neon-blue);                       /* Цвет иконки */
            cursor: pointer;                                /* Курсор-указатель */
            transition: var(--transition);                  /* Плавные изменения */
            width: 40px;                                    /* Ширина кнопки 40px */
            height: 40px;                                   /* Высота кнопки 40px */
            border-radius: 50%;                              /* Круглая кнопка */
            display: flex;                                   /* Flex для центрирования крестика */
            align-items: center;                             /* Центрирование по вертикали */
            justify-content: center;                         /* Центрирование по горизонтали */
            z-index: 1;                                      /* Небольшой z-index, но выше фона */
        }

        .modal-close .close-icon {
            position: relative;                            /* Для позиционирования псевдоэлементов */
            width: 20px;                                   /* Ширина контейнера иконки */
            height: 20px;                                  /* Высота контейнера иконки */
            display: flex;                                  /* Flex для центрирования */
            align-items: center;                            /* Центрирование по вертикали */
            justify-content: center;                        /* Центрирование по горизонтали */
        }

        /* Формируем крестик из двух полосок */
        .modal-close .close-icon::before,
        .modal-close .close-icon::after {
            content: '';                                   /* Псевдоэлементы */
            position: absolute;                             /* Абсолютное позиционирование внутри .close-icon */
            width: 20px;                                    /* Длина полоски */
            height: 2px;                                    /* Толщина полоски */
            background-color: var(--neon-blue);             /* Цвет полоски */
            border-radius: 1px;                              /* Немного скругляем концы */
            transition: var(--transition);                   /* Плавное изменение цвета */
        }

        .modal-close .close-icon::before {
            transform: rotate(45deg);                       /* Поворачиваем на 45 градусов (одна полоска крестика) */
        }

        .modal-close .close-icon::after {
            transform: rotate(-45deg);                      /* Поворачиваем на -45 градусов (вторая полоска крестика) */
        }

        .modal-close:hover {
            transform: scale(1.1);                           /* Увеличиваем кнопку при наведении */
            background: rgba(255, 0, 255, 0.1);              /* Меняем фон на розоватый */
            border-color: rgba(255, 0, 255, 0.5);            /* Меняем цвет границы на розовый */
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);     /* Розовое свечение */
        }

        .modal-close:hover .close-icon::before,
        .modal-close:hover .close-icon::after {
            background-color: var(--neon-pink);              /* Меняем цвет полосок на розовый при наведении */
        }

        /* Стили для форм */
        .form-group {
            margin-bottom: 1.5rem;                           /* Отступ снизу между группами полей */
            position: relative;                               /* Для позиционирования кнопки показа пароля */
        }

        .form-group label {
            display: block;                                  /* Блочный элемент на всю ширину */
            margin-bottom: 0.8rem;                           /* Отступ снизу от метки до поля */
            color: var(--neon-blue);                          /* Неоново-голубой цвет */
            font-weight: 600;                                 /* Полужирный */
            font-size: 1rem;                                  /* Размер шрифта */
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);     /* Легкое свечение */
        }

        /* Обертка для поля с паролем (нужна для позиционирования кнопки глазика) */
        .password-wrapper {
            position: relative;                               /* Для абсолютного позиционирования кнопки */
        }

        .password-wrapper input,
        .form-group input {
            width: 100%;                                      /* На всю ширину родителя */
            padding: 15px 50px 15px 20px;                     /* Отступы: сверху 15px, справа 50px (для кнопки), снизу 15px, слева 20px */
            background: rgba(0, 0, 0, 0.3);                   /* Полупрозрачный черный фон */
            border: 2px solid rgba(0, 243, 255, 0.2);         /* Неоновая граница с прозрачностью */
            border-radius: 12px;                              /* Скругленные углы */
            color: white;                                      /* Белый текст */
            font-size: 1rem;                                   /* Размер шрифта */
            transition: var(--transition);                     /* Плавные изменения при фокусе */
            backdrop-filter: blur(10px);                        /* Легкое размытие фона */
        }

        .form-group input {
            padding: 15px 20px;                               /* Обычное поле без кнопки - равномерные отступы */
        }

        /* Кнопка показа/скрытия пароля (глазик) */
        .password-toggle {
            position: absolute;                               /* Абсолютное позиционирование внутри .password-wrapper */
            right: 15px;                                      /* Отступ справа 15px */
            top: 50%;                                         /* Центрирование по вертикали */
            transform: translateY(-50%);                      /* Сдвиг вверх на половину своей высоты для точного центрирования */
            background: transparent;                           /* Прозрачный фон */
            border: none;                                      /* Убираем границу */
            color: rgba(255, 255, 255, 0.5);                   /* Полупрозрачный белый цвет иконки */
            cursor: pointer;                                   /* Курсор-указатель */
            transition: var(--transition);                     /* Плавные изменения */
            width: 25px;                                       /* Ширина кнопки */
            height: 25px;                                      /* Высота кнопки */
            display: flex;                                     /* Flex для центрирования иконки */
            align-items: center;                               /* Центрирование по вертикали */
            justify-content: center;                           /* Центрирование по горизонтали */
            z-index: 10;                                       /* Выше поля ввода */
        }

        .password-toggle:hover {
            color: var(--neon-blue);                           /* При наведении становимся неоново-голубыми */
            transform: translateY(-50%) scale(1.1);            /* Увеличиваемся и остаемся по центру */
        }

        .form-group input:focus {
            outline: none;                                     /* Убираем стандартную обводку браузера */
            border-color: var(--neon-blue);                    /* Меняем цвет границы на ярко-голубой */
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);       /* Усиливаем свечение */
            background: rgba(0, 0, 0, 0.5);                    /* Немного затемняем фон при фокусе */
        }

        .form-group input::placeholder {
            color: rgba(255, 255, 255, 0.4);                   /* Полупрозрачный текст плейсхолдера */
        }

        /* Кнопка отправки формы */
        .submit-btn {
            width: 100%;                                       /* На всю ширину родителя */
            padding: 16px;                                      /* Внутренние отступы */
            background: linear-gradient(135deg, #ff00cc, #00eaff); /* Диагональный градиент */
            color: white;                                       /* Белый текст */
            border: none;                                       /* Убираем границу */
            border-radius: 12px;                                /* Скругленные углы */
            font-size: 1.1rem;                                   /* Размер шрифта */
            font-weight: 700;                                    /* Жирный шрифт */
            cursor: pointer;                                     /* Курсор-указатель */
            transition: var(--transition);                       /* Плавные изменения */
            box-shadow: 0 5px 20px rgba(0, 234, 255, 0.4);       /* Неоновое свечение */
            position: relative;                                   /* Для псевдоэлемента с бликом */
            overflow: hidden;                                     /* Скрываем выходящий блик */
        }

        .submit-btn::before {
            content: '';                                        /* Псевдоэлемент для блика */
            position: absolute;                                  /* Абсолютное позиционирование */
            top: 0;                                              /* Прижимаем к верху */
            left: -100%;                                         /* Прячем слева */
            width: 100%;                                         /* Ширина как у кнопки */
            height: 100%;                                        /* Высота как у кнопки */
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Полупрозрачный белый блик */
            transition: left 0.6s ease;                          /* Плавное перемещение */
        }

        .submit-btn:hover::before {
            left: 100%;                                          /* При наведении блик пробегает по кнопке */
        }

        .submit-btn:hover {
            transform: translateY(-3px);                         /* Поднимаем кнопку вверх */
            box-shadow: 0 8px 25px rgba(0, 234, 255, 0.6);       /* Усиливаем свечение */
        }

        /* Переключатель между модальными окнами */
        .modal-switch {
            text-align: center;                                  /* Текст по центру */
            margin-top: 2rem;                                    /* Отступ сверху */
            padding-top: 1.5rem;                                 /* Внутренний отступ сверху */
            border-top: 1px solid rgba(0, 243, 255, 0.2);        /* Разделительная линия сверху */
        }

        .modal-switch a {
            color: var(--neon-blue);                             /* Неоново-голубой цвет ссылки */
            text-decoration: none;                               /* Убираем подчеркивание */
            transition: var(--transition);                       /* Плавные изменения */
            font-weight: 600;                                    /* Полужирный */
            position: relative;                                   /* Для псевдоэлемента с подчеркиванием */
        }

        .modal-switch a::after {
            content: '';                                         /* Псевдоэлемент для подчеркивания */
            position: absolute;                                   /* Абсолютное позиционирование */
            bottom: -2px;                                         /* Чуть ниже текста */
            left: 0;                                             /* Начинаем слева */
            width: 0;                                            /* Начальная ширина 0 */
            height: 2px;                                         /* Толщина подчеркивания */
            background: var(--neon-pink);                         /* Розовое подчеркивание */
            transition: width 0.3s ease;                         /* Плавное расширение */
        }

        .modal-switch a:hover {
            color: var(--neon-pink);                             /* При наведении текст становится розовым */
            text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);         /* Добавляем розовое свечение */
        }

        .modal-switch a:hover::after {
            width: 100%;                                         /* Подчеркивание расширяется на всю ширину */
        }

        /* Адаптивность */
        @media (max-width: 992px) {
            .navbar {
                padding: 0 20px;                                 /* Уменьшаем боковые отступы на планшетах */
            }
            
            .hamburger { 
                display: flex;                                   /* Показываем бургер-меню на мобильных устройствах */
            }
            
            .nav-links {
                position: fixed;                                 /* Фиксированное позиционирование на весь экран */
                top: var(--nav-height);                          /* Сразу под навигацией */
                left: 0;                                          /* Прижимаем к левому краю */
                width: 100%;                                      /* На всю ширину */
                height: calc(100vh - var(--nav-height));         /* Высота на весь оставшийся экран */
                background: rgba(7, 6, 18, 0.98);                 /* Почти черный фон */
                flex-direction: column;                           /* Элементы в колонку */
                align-items: center;                              /* Центрируем по горизонтали */
                justify-content: flex-start;                      /* Начинаем сверху */
                gap: 1.5rem;                                      /* Расстояние между пунктами */
                padding: 3rem 2rem;                               /* Внутренние отступы */
                transform: translateX(-100%);                     /* Прячем за левый край экрана */
                transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Пружинистая анимация выезжания */
                backdrop-filter: blur(20px);                      /* Размытие фона */
                border-top: 1px solid rgba(0, 243, 255, 0.1);     /* Тонкая граница сверху */
            }
            
            .nav-links.active { 
                transform: translateX(0);                         /* Показываем меню, убирая трансформацию */
            }
            
            /* Дропдауны на мобильных становятся статичными */
            .dropdown-menu {
                position: static;                                 /* Убираем абсолютное позиционирование */
                box-shadow: none;                                 /* Убираем тень */
                background: rgba(10, 8, 25, 0.8);                 /* Немного другой фон */
                border: 1px solid rgba(0, 243, 255, 0.1);         /* Тонкая граница */
                margin-top: 15px;                                 /* Отступ сверху */
                padding-left: 0;                                   /* Убираем внутренний отступ слева */
                display: none;                                     /* По умолчанию скрыты */
                width: 100%;                                       /* На всю ширину родителя */
                max-width: 250px;                                  /* Максимальная ширина */
            }
            
            .dropdown-menu::before { 
                display: none;                                    /* Убираем стрелочку на мобильных */
            }
            
            .dropdown.open .dropdown-menu { 
                display: flex;                                    /* Показываем меню при открытом дропдауне */
            }
            
            .nav-item a {
                font-size: 1.2rem;                                /* Увеличиваем шрифт для лучшей читаемости на мобильных */
                padding: 15px 25px;                               /* Увеличиваем область клика */
            }
        }

        @media (max-width: 768px) {
            .logo-text {
                font-size: 1.6rem;                                /* Уменьшаем размер логотипа на планшетах */
            }
            
            .logo-img {
                height: 35px;                                      /* Уменьшаем изображение логотипа */
            }
            
            .modal-content {
                padding: 2rem;                                     /* Уменьшаем внутренние отступы модального окна */
            }
        }

        @media (max-width: 480px) {
            .navbar {
                padding: 0 15px;                                   /* Еще уменьшаем боковые отступы */
            }
            
            .logo-text {
                font-size: 1.4rem;                                 /* Уменьшаем логотип для маленьких экранов */
            }
            
            .auth-btn {
                padding: 10px 20px;                                /* Уменьшаем кнопку авторизации */
                font-size: 0.9rem;                                 /* Уменьшаем шрифт кнопки */
            }
            
            .modal-content {
                padding: 1.5rem;                                   /* Уменьшаем отступы в модальном окне */
                width: 95%;                                         /* Увеличиваем ширину до 95% */
            }
        }