/* ==========================================================================
   ██████  ██    ██ ███████ ████████ ███████  ██████  ███    ███ 
   ██   ██ ██    ██ ██         ██    ██      ██    ██ ████  ████ 
   ██████  ██    ██ ███████    ██    █████   ██    ██ ██ ████ ██ 
   ██   ██ ██    ██      ██    ██    ██      ██    ██ ██  ██  ██ 
   ██████   ██████  ███████    ██    ███████  ██████  ██      ██ 
   ==========================================================================
   КИБЕРПАНК-СТИЛИ ДЛЯ JOOMLA — ПОЛНАЯ СИСТЕМА ОФОРМЛЕНИЯ
   Версия: 2.0 (Оптимизированная)
   Совместимость: Joomla 3.x / 4.x / 5.x
   ========================================================================== */

/* ================================================================
   БЛОК 0: СИСТЕМНЫЕ ПЕРЕМЕННЫЕ (ЕДИНАЯ ЦВЕТОВАЯ СХЕМА)
   ================================================================ */
:root {
    /* 🔹 Основные цвета фона */
    --bg-black: #050505;          /* Абсолютно чёрный — база */
    --bg-dark-blue: #0f172a;      /* Тёмно-синий — для панелей */
    --bg-form: #070a12;           /* Сверхтёмный — для форм и модалок */
    
    /* 🔹 Текст и акценты */
    --text-gray: #cbd5e1;         /* Светло-серый — основной текст */
    --text-slate: #64748b;        /* Приглушённый серый — второстепенный */
    --text-muted: #475569;        /* Почти невидимый — технический */
    
    /* 🔹 Неоновые цвета (главные) */
    --neon-blue: #00F5FF;         /* Голубой неон — акценты, рамки, заголовки */
    --neon-green: #00ff66;        /* Зелёный неон — активные элементы, подменю */
    --neon-red: #ff1111;          /* Красный неон — ошибки, предупреждения */
    --neon-orange: #ff8800;       /* Оранжевый неон — особые акценты */
    
    /* 🔹 Дополнительно */
    --cyber-ice: #A3F1FF;         /* Ледяной голубой — для особых заголовков */
}

/* ================================================================
   БЛОК 1: АДАПТИВНЫЙ РАЗМЕР ШРИФТА (ДЛЯ ВСЕХ ЭКРАНОВ)
   ================================================================ */

/* 1.1. Ультра-широкие мониторы (от 1441px) — базовый шрифт 16px */
@media (min-width: 1441px) {
    html { font-size: 16px !important; }
}

/* 1.2. Стандартные ноутбуки (до 1440px) — шрифт 15px */
@media (max-width: 1440px) {
    html { font-size: 15px !important; }
}

/* 1.3. Планшеты и мелкие ноутбуки (до 1200px) — шрифт 14px */
@media (max-width: 1199.98px) {
    html { font-size: 14px !important; }
}

/* ================================================================
   БЛОК 2: СКРЫТИЕ ТЕХНИЧЕСКИХ ЭЛЕМЕНТОВ JOOMLA
   ================================================================ */

/* 2.1. Прячем первые два пункта в меню доступности Joomla (они технические) */
._access-menu ul._access-scrollbar > li:nth-child(1),
._access-menu ul._access-scrollbar > li:nth-child(2) {
    display: none !important;
}

/* 2.2. Прячем кнопку-тоггл (стрелку) в меню Joomla */
.mod-menu__toggle-sub {
    display: none !important;
}

/* 2.3. Прячем все иконки-стрелки в меню */
.icon-chevron-down,
.icon-chevron-right,
.icon-chevron-left,
.fa-chevron-down,
.fa-chevron-right,
.fa-chevron-left {
    display: none !important;
}

/* ================================================================
   БЛОК 3: ЛИПКАЯ БОКОВАЯ ПАНЕЛЬ (STICKY SIDEBAR)
   ================================================================ */

/* 3.1. Боковая панель прилипает при скролле на 70px от верха */
.sidebar.sticky-sidebar {
    position: sticky;
    top: 70px;
    z-index: 1000;
}

/* 3.2. На планшетах и телефонах отключаем липкость (чтобы не мешала) */
@media (max-width: 1199.98px) {
    .sidebar.sticky-sidebar {
        position: inherit;  /* Возвращаем обычное поведение */
    }
}

/* ================================================================
   БЛОК 4: ГЛАВНОЕ МЕНЮ — КОНТЕЙНЕР (НЕОНОВАЯ ПАНЕЛЬ)
   ================================================================ */

/* 4.1. Основная панель меню — горизонтальный flex-контейнер */
body .moduletable ul.mod-menu,
body .moduletable ul.nav.menu,
body .moduletable ul.nav,
html ul.mod-menu,
html ul.nav {
    display: flex !important;               /* Горизонтальный ряд */
    flex-direction: row !important;         /* Строка */
    flex-wrap: wrap !important;             /* Перенос на новую строку, если не влезают */
    align-items: center !important;         /* Вертикальное выравнивание по центру */
    justify-content: flex-start !important; /* Выравнивание по левому краю */
    gap: 6px !important;                   /* Расстояние между кнопками */
    
    /* Оформление панели */
    list-style: none !important;            /* Убираем маркеры списка */
    list-style-type: none !important;
    padding: 20px 24px !important;          /* Внутренние отступы (высота панели) */
    margin: 0 0 25px 0 !important;          /* Внешний отступ снизу */
    min-height: 70px !important;            /* Минимальная высота панели */
    box-sizing: border-box !important;
    
    /* Киберпанк-оформление */
    background-color: #0f172a !important;   /* Тёмно-синий фон */
    border: 1px solid var(--neon-blue) !important; /* Голубая рамка */
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.2) !important; /* Свечение рамки */
    animation: neonBorderPulse 3s infinite ease-in-out !important; /* Пульсация */
}

/* ================================================================
   БЛОК 5: ГЛАВНОЕ МЕНЮ — ЭЛЕМЕНТЫ СПИСКА (ОЧИСТКА)
   ================================================================ */

/* 5.1. Каждый пункт меню — без маркеров и отступов */
body .moduletable ul li,
html ul.mod-menu li,
html ul.nav li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
    position: relative !important; /* Нужно для позиционирования подменю */
}

/* 5.2. Убираем псевдо-элементы (точки, маркеры) перед пунктами */
body .moduletable ul li::before,
html ul.mod-menu li::before {
    content: none !important;
}

/* ================================================================
   БЛОК 6: ГЛАВНОЕ МЕНЮ — КНОПКИ (НЕОНОВЫЕ ССЫЛКИ)
   ================================================================ */

/* 6.1. Кнопки меню в состоянии покоя */
body .moduletable ul li a,
html ul.mod-menu li a,
html ul.nav li a {
    display: inline-block !important;
    background: transparent !important;     /* Прозрачный фон */
    
    /* Шрифт */
    font-family: monospace !important;
    font-size: 17px !important;            /* Размер шрифта */
    font-weight: bold !important;
    text-transform: uppercase !important;   /* ВСЕ ЗАГЛАВНЫЕ */
    letter-spacing: 1px !important;
    text-decoration: none !important;
    
    /* Отступы внутри кнопки */
    padding: 4px 10px !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    
    /* Неоновое оформление */
    border: 1px solid var(--neon-blue) !important;
    color: var(--neon-blue) !important;
    text-shadow: 0 0 3px rgba(0, 245, 255, 0.4) !important; /* Свечение текста */
    box-shadow: 0 0 6px rgba(0, 245, 255, 0.25),
                inset 0 0 4px rgba(0, 245, 255, 0.15) !important; /* Свечение рамки */
    
    /* Анимации */
    animation: neonBorderPulse 3s infinite ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
}

/* 6.2. Кнопки при наведении мыши (HOVER) — максимальный неон */
body .moduletable ul li a:hover,
html ul.mod-menu li a:hover,
html ul.nav li a:hover {
    background: transparent !important;
    color: var(--neon-blue) !important;
    border-color: var(--neon-blue) !important;
    
    /* Усиленное свечение текста */
    text-shadow: 0 0 6px var(--neon-blue),
                 0 0 14px var(--neon-blue) !important;
    
    /* Усиленное свечение рамки */
    box-shadow: 0 0 6px var(--neon-blue),
                0 0 18px var(--neon-blue),
                inset 0 0 8px rgba(0, 245, 255, 0.2) !important;
    
    animation-play-state: paused !important; /* Останавливаем пульсацию при наведении */
}

/* ================================================================
   БЛОК 7: АКТИВНЫЙ ПУНКТ МЕНЮ (ТЕКУЩАЯ СТРАНИЦА)
   ================================================================ */

/* 7.1. Активная кнопка — зелёный неон */
body .moduletable ul li.active a,
body .moduletable ul li.current a,
html ul.mod-menu li.active a,
html ul.nav.menu li.current a,
html ul.nav.menu li.active a,
html ul.nav li.active a,
html ul.nav li.current a {
    border-color: var(--neon-green) !important; /* Зелёная рамка */
    color: var(--neon-green) !important;        /* Зелёный текст */
    text-shadow: 0 0 5px var(--neon-green) !important;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.4),
                inset 0 0 4px rgba(0, 255, 102, 0.2) !important;
    animation: none !important; /* Фиксируем цвет, убираем пульсацию */
}

/* 7.2. Активная кнопка при наведении — зелёный неон максимальной яркости */
body .moduletable ul li.active a:hover,
body .moduletable ul li.current a:hover,
html ul.mod-menu li.active a:hover,
html ul.nav.menu li.current a:hover,
html ul.nav.menu li.active a:hover,
html ul.nav li.active a:hover,
html ul.nav li.current a:hover {
    color: var(--neon-green) !important;
    border-color: var(--neon-green) !important;
    text-shadow: 0 0 6px var(--neon-green),
                 0 0 14px var(--neon-green) !important;
    box-shadow: 0 0 6px var(--neon-green),
                0 0 18px var(--neon-green),
                inset 0 0 8px rgba(0, 255, 102, 0.3) !important;
}

/* ================================================================
   БЛОК 8: ГЛАВНОЕ МЕНЮ — СТРЕЛКИ ВЫПАДАЮЩИХ СПИСКОВ
   ================================================================ */

/* 8.1. Отодвигаем стрелки-треугольники вправо от текста */
body .moduletable ul li a span,
body .moduletable ul li a i,
body .moduletable ul li a .caret,
html ul.mod-menu li a .caret,
html ul.nav li a::after,
.dropdown-toggle::after {
    margin-left: 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    right: 0 !important;
}

/* 8.2. Добавляем отступ справа для пунктов с подменю */
body .moduletable ul li.parent > a,
body .moduletable ul li.dropdown > a,
html ul.mod-menu li.parent > a,
html ul.nav li.dropdown > a {
    padding-right: 28px !important;
}

/* ================================================================
   БЛОК 9: ВЫПАДАЮЩЕЕ ПОДМЕНЮ (DROPDOWN) — КОНТЕЙНЕР
   ================================================================ */

/* 9.1. Контейнер подменю — тёмный фон, зелёная рамка */
body .moduletable ul li ul,
body .moduletable ul li .nav-child,
body .moduletable ul li .submenu,
body .moduletable ul li .dropdown-menu,
html ul.mod-menu li ul,
html ul.nav li .dropdown-menu,
.dropdown-menu {
    background-color: #070a12 !important;      /* Сверхтёмный фон */
    background-image: none !important;
    border: 1px solid var(--neon-green) !important; /* Зелёная рамка */
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 255, 102, 0.3) !important; /* Зелёное свечение */
    filter: none !important;
    
    /* Размеры и отступы */
    min-width: 260px !important;
    max-width: 400px !important;
    padding: 8px 12px !important;
    margin-top: 0px !important;
    
    /* Позиционирование */
    top: 100% !important;
    position: absolute !important;
    z-index: 9999 !important;
}

/* 9.2. Невидимый зазор под кнопкой — подменю не закрывается при движении мыши */
body .moduletable ul li.parent,
html ul.mod-menu li.parent {
    padding-bottom: 5px !important;
}

/* ================================================================
   БЛОК 10: ВЫПАДАЮЩЕЕ ПОДМЕНЮ — ССЫЛКИ
   ================================================================ */

/* 10.1. Ссылки внутри подменю (состояние покоя) */
body .moduletable ul li ul li a,
body .moduletable ul li .nav-child li a,
body .moduletable ul li .submenu li a,
body .moduletable ul li .dropdown-menu li a,
html ul.mod-menu li ul li a,
html ul.nav li .dropdown-menu li a,
.dropdown-menu li a {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--neon-green) !important;
    
    /* Отступы внутри пункта */
    padding: 8px 16px !important;
    display: block !important;
    
    /* Шрифт */
    font-family: monospace !important;
    font-size: 15px !important;          /* Увеличенный шрифт */
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-align: center !important;       /* Текст по центру */
    white-space: nowrap !important;      /* В одну строку */
    
    /* Свечение */
    text-shadow: 0 0 2px rgba(0, 255, 102, 0.3) !important;
    box-shadow: none !important;
    animation: none !important;
}

/* 10.2. Ссылки внутри подменю при наведении (HOVER) */
body .moduletable ul li ul li a:hover,
body .moduletable ul li .nav-child li a:hover,
body .moduletable ul li .submenu li a:hover,
body .moduletable ul li .dropdown-menu li a:hover,
html ul.mod-menu li ul li a:hover,
html ul.nav li .dropdown-menu li a:hover,
.dropdown-menu li a:hover {
    color: var(--neon-blue) !important;   /* Меняем на голубой */
    background: rgba(0, 245, 255, 0.08) !important;
    background-color: rgba(0, 245, 255, 0.08) !important;
    text-shadow: 0 0 6px var(--neon-blue),
                 0 0 14px var(--neon-blue) !important;
    border: 1px solid var(--neon-blue) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.3) !important;
}

/* ================================================================
   БЛОК 11: ВЫПАДАЮЩЕЕ ПОДМЕНЮ — ЯЧЕЙКИ (МИНИ-КНОПКИ)
   ================================================================ */

/* 11.1. Каждый пункт подменю как отдельная мини-кнопка */
html body .moduletable ul li ul li,
html body .moduletable ul li .nav-child li,
.dropdown-menu li,
ul.mod-menu li ul li {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    
    /* Оформление ячейки */
    border: 1px solid rgba(0, 255, 102, 0.25) !important;
    border-radius: 4px !important;
    background: rgba(7, 10, 18, 0.6) !important;
    text-align: center !important;
    box-shadow: 0 0 6px rgba(0, 255, 102, 0.2),
                inset 0 0 4px rgba(0, 255, 102, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
}

/* 11.2. Ячейка подменю при наведении — усиление свечения */
html body .moduletable ul li ul li:hover,
html body .moduletable ul li .nav-child li:hover,
.dropdown-menu li:hover,
ul.mod-menu li ul li:hover {
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.6),
                inset 0 0 6px rgba(0, 255, 102, 0.3) !important;
}

/* ================================================================
   БЛОК 12: МОБИЛЬНАЯ АДАПТАЦИЯ ГЛАВНОГО МЕНЮ
   ================================================================ */

/* 12.1. На экранах до 768px меню становится вертикальным */
@media (max-width: 768px) {
    body .moduletable ul.mod-menu,
    html ul.mod-menu,
    html ul.nav {
        flex-direction: column !important; /* Вертикальная стопка */
        align-items: stretch !important;   /* Растягиваем на всю ширину */
        padding: 10px !important;
    }
    
    body .moduletable ul li a,
    html ul.mod-menu li a,
    html ul.nav li a {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 12.2. Принудительное скрытие подменю на телефонах */
    body .moduletable ul li ul,
    body .moduletable ul li .nav-child,
    body .moduletable ul li .submenu,
    body .moduletable ul li .dropdown-menu,
    html ul.mod-menu li ul,
    html ul.nav li .dropdown-menu,
    .dropdown-menu {
        display: none !important;
    }
    
    /* 12.3. Подменю открывается по клику (если есть класс .open) */
    body .moduletable ul li.open > ul,
    body .moduletable ul li.open > .nav-child,
    body .moduletable ul li.open > .submenu,
    body .moduletable ul li.open > .dropdown-menu,
    html ul.mod-menu li.open > ul,
    html ul.nav li.open > .dropdown-menu {
        display: block !important;
    }
}

/* ================================================================
   БЛОК 13: КНОПКА "НАВЕРХ" (НЕОНОВЫЙ TO TOP)
   ================================================================ */

/* 13.1. Кнопка "Наверх" — появляется с неоновой вспышкой */
#toTop {
    display: none;  /* Скрыта по умолчанию, включается через JS */
    position: fixed !important;
    bottom: 40px !important;
    right: 40px !important;
    z-index: 9999 !important;
    
    /* Размеры */
    width: 62px !important;
    height: 62px !important;
    line-height: 62px !important;
    border-radius: 6px !important;
    text-align: center !important;
    
    /* Оформление */
    background: transparent !important;
    background-color: #0a0e1a !important;
    border: 1px solid rgba(0, 245, 255, 0.25) !important;
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.05) !important;
    
    /* Шрифт */
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 26px !important;
    font-weight: bold !important;
    color: rgba(0, 245, 255, 0.5) !important;
    text-shadow: 0 0 4px rgba(0, 245, 255, 0.1) !important;
    cursor: pointer !important;
    
    /* Анимация появления */
    animation: neonFlashThenFade 1.8s ease-out forwards !important;
    transition: border-color 0.5s ease,
                box-shadow 0.5s ease,
                color 0.5s ease,
                text-shadow 0.5s ease !important;
}

/* 13.2. Кнопка "Наверх" при наведении — максимальный неон */
#toTop:hover {
    border-color: rgba(0, 245, 255, 0.95) !important;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.6),
                0 0 60px rgba(0, 245, 255, 0.3),
                0 0 100px rgba(0, 245, 255, 0.12) !important;
    color: rgba(0, 245, 255, 1) !important;
    text-shadow: 0 0 12px rgba(0, 245, 255, 0.8),
                 0 0 30px rgba(0, 245, 255, 0.3) !important;
    background-color: rgba(0, 245, 255, 0.06) !important;
    transform: none !important;
}

/* ================================================================
   БЛОК 14: СКРЫТИЕ ЗАГОЛОВКОВ НА СТРАНИЦАХ КНИГ
   ================================================================ */

/* 14.1. Прячем заголовки, которые выводятся из параметров меню Joomla */
.cyber-novel-container .page-header,
.cyber-novel-container .component-title,
.cyber-novel-container .item-title,
.cyber-novel-container h1,
.cyber-novel-container .content-title,
body .page-header,
body .component-title,
body .item-title,
body .content-title,
body h1.contentheading,
body .page-header h1,
body .page-header h2 {
    display: none !important;
}

/* 14.2. Прячем заголовки в хлебных крошках */
.cyber-novel-container .breadcrumbs-header,
.cyber-novel-container .breadcrumb-title {
    display: none !important;
}

/* ================================================================
   БЛОК 15: КИБЕРПАНК-ФОРМЫ (РЕГИСТРАЦИЯ, АВТОРИЗАЦИЯ)
   ================================================================ */

/* 15.1. Основной контейнер формы */
#member-registration,
#login-form,
.com-users-registration .registration,
.com-users-login .login {
    background: var(--bg-form) !important;
    padding: 30px 35px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.08) !important;
    max-width: 600px !important;
    margin: 20px auto !important;
    animation: neonBorderPulse 4s infinite ease-in-out !important;
}

/* 15.2. Заголовки форм */
#member-registration h1,
#member-registration .page-header,
#login-form h1,
#login-form .page-header,
.com-users-registration .page-header,
.com-users-login .page-header {
    font-family: Garamond, "Bookman Old Style", serif !important;
    font-size: 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    text-align: center !important;
    color: var(--neon-blue) !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.95),
                 0 0 15px rgba(0, 245, 255, 0.5) !important;
    border-bottom: 1px dashed rgba(0, 245, 255, 0.2) !important;
    padding-bottom: 20px !important;
    margin-bottom: 25px !important;
}

/* 15.3. Мигающий курсор после заголовка */
#member-registration h1::after,
#login-form h1::after,
.com-users-registration .page-header::after,
.com-users-login .page-header::after {
    content: " |" !important;
    animation: cursorBlink 1s infinite steps(2, start) !important;
}

/* 15.4. Группы полей ввода */
#member-registration .control-group,
#login-form .control-group,
.com-users-registration .control-group,
.com-users-login .control-group {
    margin-bottom: 22px !important;
    width: 100% !important;
}

/* 15.5. Подписи к полям (LABELS) */
#member-registration .control-label,
#login-form .control-label,
.com-users-registration .control-label,
.com-users-login .control-label {
    display: block !important;
    font-family: monospace !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: var(--neon-blue) !important;
    margin-bottom: 8px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.8) !important;
    text-align: left !important;
}

/* 15.6. Поля ввода */
#member-registration .form-control,
#login-form .form-control,
.com-users-registration .form-control,
.com-users-login .form-control,
#member-registration input[type="text"],
#member-registration input[type="email"],
#member-registration input[type="password"],
#login-form input[type="text"],
#login-form input[type="password"],
.com-users-registration input[type="text"],
.com-users-registration input[type="email"],
.com-users-registration input[type="password"],
.com-users-login input[type="text"],
.com-users-login input[type="password"] {
    background: var(--bg-black) !important;
    background-color: var(--bg-black) !important;
    color: var(--neon-green) !important;
    border: 1px solid var(--neon-blue) !important;
    border-radius: 4px !important;
    outline: none !important;
    box-shadow: 0 0 6px rgba(0, 245, 255, 0.2) !important;
    padding: 12px 15px !important;
    font-family: monospace !important;
    font-size: 14px !important;
    font-weight: bold !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-shadow: 0 0 4px rgba(0, 255, 102, 0.5) !important;
    transition: all 0.25s ease-in-out !important;
    animation: neonBorderPulse 4s infinite ease-in-out !important;
}

/* 15.7. Фокус на полях — останавливаем пульсацию */
#member-registration .form-control:focus,
#login-form .form-control:focus,
.com-users-registration .form-control:focus,
.com-users-login .form-control:focus,
#member-registration input[type="text"]:focus,
#member-registration input[type="email"]:focus,
#member-registration input[type="password"]:focus,
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus,
.com-users-registration input[type="text"]:focus,
.com-users-registration input[type="email"]:focus,
.com-users-registration input[type="password"]:focus,
.com-users-login input[type="text"]:focus,
.com-users-login input[type="password"]:focus {
    animation-play-state: paused !important;
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 6px var(--neon-blue),
                0 0 16px var(--neon-blue) !important;
}

/* 15.8. Плейсхолдеры */
#member-registration .form-control::placeholder,
#login-form .form-control::placeholder,
.com-users-registration .form-control::placeholder,
.com-users-login .form-control::placeholder {
    color: var(--text-slate) !important;
    opacity: 0.4 !important;
}

/* 15.9. Борьба с автозаполнением браузера */
#member-registration input:-webkit-autofill,
#login-form input:-webkit-autofill,
.com-users-registration input:-webkit-autofill,
.com-users-login input:-webkit-autofill,
#member-registration input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:hover,
.com-users-registration input:-webkit-autofill:hover,
.com-users-login input:-webkit-autofill:hover,
#member-registration input:-webkit-autofill:focus,
#login-form input:-webkit-autofill:focus,
.com-users-registration input:-webkit-autofill:focus,
.com-users-login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-black) inset !important;
    -webkit-text-fill-color: var(--neon-green) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* 15.10. Кнопки отправки */
#member-registration .btn,
#login-form .btn,
.com-users-registration .btn,
.com-users-login .btn,
#member-registration button[type="submit"],
#login-form button[type="submit"],
.com-users-registration button[type="submit"],
.com-users-login button[type="submit"] {
    background: transparent !important;
    cursor: pointer !important;
    text-align: center !important;
    padding: 15px 30px !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border: 1px solid rgba(0, 255, 102, 0.45) !important;
    color: var(--neon-green) !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.15) !important;
    text-shadow: 0 0 5px rgba(0, 255, 102, 0.5) !important;
    transition: all 0.4s ease-in-out !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* 15.11. Кнопки отправки при наведении */
#member-registration .btn:hover,
#login-form .btn:hover,
.com-users-registration .btn:hover,
.com-users-login .btn:hover,
#member-registration button[type="submit"]:hover,
#login-form button[type="submit"]:hover,
.com-users-registration button[type="submit"]:hover,
.com-users-login button[type="submit"]:hover {
    color: var(--neon-blue) !important;
    border-color: var(--neon-blue) !important;
    background-color: rgba(0, 245, 255, 0.08) !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.95),
                 0 0 12px rgba(0, 245, 255, 0.5) !important;
    box-shadow: 0 0 25px rgba(0, 245, 255, 0.55) !important;
}

/* 15.12. Дополнительные ссылки (Забыли пароль? Регистрация) */
#login-form ul,
.com-users-login ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    text-align: center !important;
}

#login-form ul li,
.com-users-login ul li {
    display: inline-block !important;
    margin: 0 10px !important;
}

#login-form ul li a,
.com-users-login ul li a {
    font-family: monospace !important;
    font-size: 12px !important;
    color: var(--neon-blue) !important;
    text-decoration: none !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid transparent !important;
}

#login-form ul li a:hover,
.com-users-login ul li a:hover {
    color: var(--neon-green) !important;
    border-bottom-color: var(--neon-green) !important;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.5) !important;
}

/* 15.13. Сообщения об ошибках */
#member-registration .alert,
#login-form .alert,
.com-users-registration .alert,
.com-users-login .alert,
#system-message-container .alert {
    background: rgba(255, 17, 17, 0.1) !important;
    border: 1px solid var(--neon-red) !important;
    border-radius: 4px !important;
    color: var(--neon-red) !important;
    font-family: monospace !important;
    font-size: 13px !important;
    padding: 15px 20px !important;
    text-shadow: 0 0 5px rgba(255, 17, 17, 0.3) !important;
    box-shadow: 0 0 20px rgba(255, 17, 17, 0.1) !important;
}

/* 15.14. Сообщения об успехе */
#member-registration .alert-success,
.com-users-registration .alert-success {
    background: rgba(0, 255, 102, 0.1) !important;
    border: 1px solid var(--neon-green) !important;
    color: var(--neon-green) !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.1) !important;
}

/* 15.15. Чекбоксы */
#login-form .checkbox,
.com-users-login .checkbox,
#member-registration .checkbox,
.com-users-registration .checkbox {
    font-family: monospace !important;
    font-size: 13px !important;
    color: var(--text-gray) !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

#login-form .checkbox input[type="checkbox"],
.com-users-login .checkbox input[type="checkbox"],
#member-registration .checkbox input[type="checkbox"],
.com-users-registration .checkbox input[type="checkbox"] {
    accent-color: var(--neon-blue) !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
}

/* 15.16. Мобильная адаптация форм */
@media (max-width: 768px) {
    #member-registration,
    #login-form,
    .com-users-registration .registration,
    .com-users-login .login {
        padding: 20px !important;
        margin: 15px !important;
    }
    
    #member-registration h1,
    #login-form h1,
    .com-users-registration .page-header,
    .com-users-login .page-header {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
    }
    
    #member-registration .form-control,
    #login-form .form-control,
    .com-users-registration .form-control,
    .com-users-login .form-control {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
    
    #member-registration .btn,
    #login-form .btn,
    .com-users-registration .btn,
    .com-users-login .btn {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }
}

@media (max-width: 480px) {
    #member-registration,
    #login-form,
    .com-users-registration .registration,
    .com-users-login .login {
        padding: 15px !important;
        margin: 10px !important;
    }
    
    #member-registration h1,
    #login-form h1,
    .com-users-registration .page-header,
    .com-users-login .page-header {
        font-size: 1.2rem !important;
    }
    
    #login-form ul li,
    .com-users-login ul li {
        display: block !important;
        margin: 5px 0 !important;
    }
}

/* ================================================================
   БЛОК 16: КИБЕРПАНК-МОДАЛЬНОЕ ОКНО АВТОРИЗАЦИИ
   ================================================================ */

/* 16.1. Фон модального окна (затемнение) */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.fade {
    background: rgba(5, 5, 5, 0.92) !important;
    background-color: rgba(5, 5, 5, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 16.2. Контейнер модального окна */
.modal {
    background: transparent !important;
}

.modal-dialog {
    margin: 30px auto !important;
    max-width: 500px !important;
}

/* 16.3. Содержимое модального окна */
.modal-content {
    background: #070a12 !important;
    background-color: #070a12 !important;
    background-image: none !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 40px rgba(0, 245, 255, 0.15),
                0 0 80px rgba(0, 245, 255, 0.05),
                inset 0 0 40px rgba(0, 245, 255, 0.02) !important;
    padding: 0 !important;
    color: #cbd5e1 !important;
}

/* 16.4. Заголовок модального окна */
.modal-header {
    border-bottom: 1px dashed rgba(0, 245, 255, 0.2) !important;
    padding: 20px 25px !important;
    background: transparent !important;
    background-color: transparent !important;
}

.modal-header .modal-title {
    font-family: Garamond, "Bookman Old Style", serif !important;
    font-size: 1.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    color: var(--neon-blue) !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.95),
                 0 0 15px rgba(0, 245, 255, 0.5) !important;
}

.modal-header .modal-title::after {
    content: " |" !important;
    animation: cursorBlink 1s infinite steps(2, start) !important;
}

/* 16.5. Кнопка закрытия (X) */
.modal-header .close,
.modal-header button.close {
    color: #ff1111 !important;
    opacity: 0.6 !important;
    text-shadow: 0 0 10px rgba(255, 17, 17, 0.3) !important;
    font-size: 28px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 0 10px !important;
    line-height: 1 !important;
}

.modal-header .close:hover,
.modal-header button.close:hover {
    opacity: 1 !important;
    text-shadow: 0 0 20px rgba(255, 17, 17, 0.8) !important;
    transform: rotate(90deg) scale(1.1) !important;
}

/* 16.6. Тело модального окна */
.modal-body {
    padding: 25px 30px 20px 30px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

/* 16.7. Форма внутри модального окна */
.modal-body #login-form,
.modal-body .login-form,
.modal-body .form-vertical,
.modal-body form {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* 16.8. Подписи в модалке */
.modal-body .control-group,
.modal-body .form-group {
    margin-bottom: 20px !important;
    width: 100% !important;
    background: transparent !important;
}

.modal-body .control-label,
.modal-body label {
    display: block !important;
    font-family: monospace !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: var(--neon-blue) !important;
    margin-bottom: 8px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.8) !important;
    text-align: left !important;
    background: transparent !important;
}

/* 16.9. Поля ввода в модалке */
.modal-body .form-control,
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body input[type="number"],
.modal-body input[type="search"],
.modal-body textarea {
    background: #050505 !important;
    background-color: #050505 !important;
    background-image: none !important;
    color: var(--neon-green) !important;
    -webkit-text-fill-color: var(--neon-green) !important;
    border: 1px solid var(--neon-blue) !important;
    border-radius: 4px !important;
    outline: none !important;
    box-shadow: 0 0 6px rgba(0, 245, 255, 0.2) !important;
    padding: 12px 15px !important;
    font-family: monospace !important;
    font-size: 14px !important;
    font-weight: bold !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.8),
                 0 0 16px rgba(0, 255, 102, 0.4) !important;
    transition: all 0.25s ease-in-out !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 16.10. Фокус на полях в модалке */
.modal-body .form-control:focus,
.modal-body input[type="text"]:focus,
.modal-body input[type="password"]:focus,
.modal-body input[type="email"]:focus {
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 6px var(--neon-blue),
                0 0 16px var(--neon-blue),
                inset 0 0 20px rgba(0, 245, 255, 0.05) !important;
    color: var(--neon-green) !important;
    -webkit-text-fill-color: var(--neon-green) !important;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.9),
                 0 0 20px rgba(0, 255, 102, 0.5) !important;
}

/* 16.11. Плейсхолдеры в модалке */
.modal-body .form-control::placeholder,
.modal-body input::placeholder {
    color: #64748b !important;
    opacity: 0.7 !important;
    font-weight: normal !important;
    text-shadow: 0 0 4px rgba(100, 116, 139, 0.3) !important;
}

/* 16.12. Борьба с автозаполнением в модалке */
.modal-body input:-webkit-autofill,
.modal-body input:-webkit-autofill:hover,
.modal-body input:-webkit-autofill:focus,
.modal-body input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #050505 inset !important;
    -webkit-text-fill-color: var(--neon-green) !important;
    -webkit-text-stroke: 0px transparent !important;
    background-color: #050505 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.modal-body input:-moz-autofill {
    color: var(--neon-green) !important;
    background-color: #050505 !important;
}

/* 16.13. Кнопка отправки в модалке */
.modal-body .btn,
.modal-body button[type="submit"],
.modal-body .btn-primary,
.modal-body .btn-success {
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    text-align: center !important;
    padding: 15px 30px !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border: 1px solid rgba(0, 255, 102, 0.45) !important;
    color: var(--neon-green) !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.15) !important;
    text-shadow: 0 0 5px rgba(0, 255, 102, 0.5) !important;
    transition: all 0.4s ease-in-out !important;
    width: 100% !important;
    margin-top: 10px !important;
    line-height: 1.4 !important;
}

.modal-body .btn:hover,
.modal-body button[type="submit"]:hover,
.modal-body .btn-primary:hover {
    color: var(--neon-blue) !important;
    border-color: var(--neon-blue) !important;
    background-color: rgba(0, 245, 255, 0.08) !important;
    background: rgba(0, 245, 255, 0.08) !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.95),
                 0 0 12px rgba(0, 245, 255, 0.5) !important;
    box-shadow: 0 0 25px rgba(0, 245, 255, 0.55) !important;
}

/* 16.14. Чекбокс в модалке */
.modal-body .checkbox,
.modal-body .form-check {
    font-family: monospace !important;
    font-size: 13px !important;
    color: #cbd5e1 !important;
    margin: 15px 0 10px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.modal-body .checkbox input[type="checkbox"],
.modal-body .form-check input[type="checkbox"] {
    accent-color: var(--neon-blue) !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    background: transparent !important;
}

.modal-body .checkbox label,
.modal-body .form-check label {
    color: #cbd5e1 !important;
    text-shadow: none !important;
    font-size: 13px !important;
}

/* 16.15. Ссылки в модалке */
.modal-body .login-links,
.modal-body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    text-align: center !important;
    background: transparent !important;
}

.modal-body .login-links li,
.modal-body ul li {
    display: inline-block !important;
    margin: 0 10px !important;
    background: transparent !important;
}

.modal-body .login-links li a,
.modal-body ul li a {
    font-family: monospace !important;
    font-size: 12px !important;
    color: var(--neon-blue) !important;
    text-decoration: none !important;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid transparent !important;
    background: transparent !important;
}

.modal-body .login-links li a:hover,
.modal-body ul li a:hover {
    color: var(--neon-green) !important;
    border-bottom-color: var(--neon-green) !important;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.5) !important;
}

/* 16.16. Подвал модального окна */
.modal-footer {
    border-top: 1px dashed rgba(0, 245, 255, 0.15) !important;
    padding: 15px 25px !important;
    background: transparent !important;
    background-color: transparent !important;
}

.modal-footer .cyber-form-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    text-align: left !important;
}

/* 16.17. Сообщения в модалке */
.modal-body .alert,
.modal-body #system-message-container .alert,
.modal-body .alert-danger,
.modal-body .alert-error {
    background: rgba(255, 17, 17, 0.1) !important;
    background-color: rgba(255, 17, 17, 0.1) !important;
    border: 1px solid var(--neon-red) !important;
    border-radius: 4px !important;
    color: var(--neon-red) !important;
    font-family: monospace !important;
    font-size: 13px !important;
    padding: 15px 20px !important;
    text-shadow: 0 0 5px rgba(255, 17, 17, 0.3) !important;
    box-shadow: 0 0 20px rgba(255, 17, 17, 0.1) !important;
}

.modal-body .alert-success {
    background: rgba(0, 255, 102, 0.1) !important;
    background-color: rgba(0, 255, 102, 0.1) !important;
    border: 1px solid var(--neon-green) !important;
    color: var(--neon-green) !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.1) !important;
}

/* 16.18. Техническая информация в модалке */
.modal-body .cyber-log-status {
    font-family: monospace !important;
    font-size: 10px !important;
    color: #475569 !important;
    text-align: center !important;
    margin-top: 15px !important;
    letter-spacing: 1px !important;
}

.modal-body .cyber-log-status .status-online {
    color: var(--neon-green) !important;
    text-shadow: 0 0 5px rgba(0, 255, 102, 0.3) !important;
}

/* 16.19. Анимация появления модалки */
.modal.fade .modal-dialog {
    transform: translate(0, -50px) scale(0.95) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modal.fade.in .modal-dialog {
    transform: translate(0, 0) scale(1) !important;
}

/* 16.20. Мобильная адаптация модалки */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 15px !important;
        max-width: calc(100% - 30px) !important;
    }
    
    .modal-content {
        margin: 0 !important;
    }
    
    .modal-header .modal-title {
        font-size: 1.4rem !important;
    }
    
    .modal-body {
        padding: 20px !important;
    }
    
    .modal-body .btn,
    .modal-body button[type="submit"] {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }
}

@media (max-width: 480px) {
    .modal-header .modal-title {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .modal-body .login-links li,
    .modal-body ul li {
        display: block !important;
        margin: 5px 0 !important;
    }
}

/* 16.21. Принудительный сброс фонов в модалке */
.modal-body *,
.modal-footer *,
.modal-header * {
    background-color: transparent !important;
    background-image: none !important;
}

.modal-body .form-control,
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="email"] {
    background-color: #050505 !important;
}

.modal-body .btn,
.modal-body button[type="submit"] {
    background-color: transparent !important;
}

.modal-body .btn:hover,
.modal-body button[type="submit"]:hover {
    background-color: rgba(0, 245, 255, 0.08) !important;
}

/* ================================================================
   БЛОК 17: АНИМАЦИИ (ЕДИНЫЙ ЦЕНТР УПРАВЛЕНИЯ)
   ================================================================ */

/* 17.1. Пульсация неоновой рамки (для меню, форм, модалок) */
@keyframes neonBorderPulse {
    0%, 100% {
        border-color: var(--neon-blue);
        box-shadow: 0 0 10px rgba(0, 245, 255, 0.2);
    }
    50% {
        border-color: var(--neon-green);
        box-shadow: 0 0 10px rgba(0, 255, 102, 0.2);
    }
}

/* 17.2. Мигающий курсор (для заголовков форм) */
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 17.3. Вспышка и затухание (для кнопки "Наверх") */
@keyframes neonFlashThenFade {
    0% {
        border-color: rgba(0, 245, 255, 0.05);
        box-shadow: 0 0 2px rgba(0, 245, 255, 0.01);
        color: rgba(0, 245, 255, 0.1);
        text-shadow: 0 0 2px rgba(0, 245, 255, 0.02);
    }
    10% {
        border-color: rgba(0, 245, 255, 0.95);
        box-shadow: 0 0 30px rgba(0, 245, 255, 0.6),
                    0 0 60px rgba(0, 245, 255, 0.3),
                    0 0 100px rgba(0, 245, 255, 0.12);
        color: rgba(0, 245, 255, 1);
        text-shadow: 0 0 12px rgba(0, 245, 255, 0.8),
                     0 0 30px rgba(0, 245, 255, 0.3);
    }
    45% {
        border-color: rgba(0, 245, 255, 0.95);
        box-shadow: 0 0 30px rgba(0, 245, 255, 0.6),
                    0 0 60px rgba(0, 245, 255, 0.3),
                    0 0 100px rgba(0, 245, 255, 0.12);
        color: rgba(0, 245, 255, 1);
        text-shadow: 0 0 12px rgba(0, 245, 255, 0.8),
                     0 0 30px rgba(0, 245, 255, 0.3);
    }
    70% {
        border-color: rgba(0, 245, 255, 0.5);
        box-shadow: 0 0 15px rgba(0, 245, 255, 0.2),
                    0 0 30px rgba(0, 245, 255, 0.08);
        color: rgba(0, 245, 255, 0.7);
        text-shadow: 0 0 6px rgba(0, 245, 255, 0.2);
    }
    100% {
        border-color: rgba(0, 245, 255, 0.25);
        box-shadow: 0 0 8px rgba(0, 245, 255, 0.05);
        color: rgba(0, 245, 255, 0.5);
        text-shadow: 0 0 4px rgba(0, 245, 255, 0.1);
    }
}

/* ================================================================
   БЛОК 18: ФИНАЛЬНЫЕ ПРАВКИ И ДОПОЛНИТЕЛЬНЫЕ КОРРЕКТИРОВКИ
   ================================================================ */

/* 18.1. Скрываем заголовки на страницах книг (дополнительно) */
.com-users-registration .breadcrumb,
.com-users-login .breadcrumb {
    display: none !important;
}

.com-users-registration .com-content,
.com-users-login .com-content {
    background: transparent !important;
    padding: 0 !important;
}

/* 18.2. Поле "Подтверждение пароля" — отступ сверху */
#member-registration .form-control[type="password"]:nth-of-type(2) {
    margin-top: 5px !important;
}

/* ================================================================
   КОНЕЦ ФАЙЛА — custom.css
   ================================================================ */