/* Для WebKit браузеров (Chrome, Safari) */
::-webkit-scrollbar {
    width: 4px; /* Максимально тонкая полоса прокрутки */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Цвет фона трека */
}

::-webkit-scrollbar-thumb {
    background: #8a2be2; /* Виолетовый цвет ползунка */
    border-radius: 10px; /* Закругление углов ползунка */
}

::-webkit-scrollbar-thumb:hover {
    background: #7a1cb5; /* Более темный виолетовый при наведении */
}

/* Пример использования для всего документа */
body {
    scrollbar-width: thin;
    scrollbar-color: #8a2be2 #f1f1f1;
}


/* [2026-10-01] Claude: фон-частицы переделан: мелкая сетка точек (шаг 18px, как в присланном примере с radial-gradient, но темнее и мельче),
   часть точек мерцает и переливается оттенками фиолетового. Всё на CSS (без JS и canvas).
   Как устроено: #particles — статичная еле заметная сетка точек; ::before и ::after — по десятку "живых" точек, расставленных
   по узлам той же сетки (повторяются плиткой), у каждого слоя свой цвет-оттенок, период и фаза мерцания (opacity), поэтому точки
   загораются и гаснут вразнобой, а слои по очереди перетекают друг в друга (переливание). Яркость занижена, чтобы не бросалось в глаза.
   Правка 2: по просьбе пользователя точки мельче (радиус ~0.8px вместо 1.4px), мерцание еле заметное (максимум ~35% яркости, период 11 и 15 с).
   Слои fixed, под контентом (z-index -1), поверх затемняющего слоя body::before (z-index -2). Скрыто на экранах до 1220px
   (правило ниже в файле). При настройке "уменьшить анимацию" мерцание отключено. Откат: вернуть блок #particles из aNew/css/styles.css,
   подключение particles.js в main.tpl и вызов в js/libs.js. Параметры: шаг сетки — 18px (и в расстановке точек), яркость — opacity в @keyframes. */
#particles, #particles::before, #particles::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    pointer-events: none;
    content: "";
    animation: none;
    box-shadow: none;
}
#particles {
    z-index: -1;
    background-color: transparent;
    background-image: radial-gradient(circle, rgba(190, 160, 235, 0.10) 0, rgba(190, 160, 235, 0.10) 0.6px, transparent 1.2px);
    background-size: 18px 18px;
}
#particles::before, #particles::after {
    background-repeat: repeat;
    opacity: 0;
}
#particles::before {
    background-image:
        radial-gradient(circle at 27px 81px, rgba(176,110,255,1) 0, rgba(176,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 81px 45px, rgba(205,150,255,1) 0, rgba(205,150,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 135px 45px, rgba(205,150,255,1) 0, rgba(205,150,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 135px 81px, rgba(176,110,255,1) 0, rgba(176,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 117px 81px, rgba(176,110,255,1) 0, rgba(176,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 63px 9px, rgba(176,110,255,1) 0, rgba(176,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 99px 9px, rgba(150,120,255,1) 0, rgba(150,120,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 45px 27px, rgba(205,150,255,1) 0, rgba(205,150,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 117px 99px, rgba(150,120,255,1) 0, rgba(150,120,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 99px 45px, rgba(176,110,255,1) 0, rgba(176,110,255,1) 0.8px, transparent 1.4px);
    background-size: 144px 108px;
    animation: dots-shimmer-a 11s ease-in-out infinite;
}
#particles::after {
    background-image:
        radial-gradient(circle at 45px 81px, rgba(140,110,255,1) 0, rgba(140,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 81px 27px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 171px 99px, rgba(140,110,255,1) 0, rgba(140,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 9px 99px, rgba(190,100,245,1) 0, rgba(190,100,245,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 135px 117px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 135px 63px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 153px 9px, rgba(140,110,255,1) 0, rgba(140,110,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 9px 45px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 153px 99px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 63px 9px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 81px 117px, rgba(190,100,245,1) 0, rgba(190,100,245,1) 0.8px, transparent 1.4px),
        radial-gradient(circle at 81px 63px, rgba(215,160,255,1) 0, rgba(215,160,255,1) 0.8px, transparent 1.4px);
    background-size: 180px 126px;
    animation: dots-shimmer-b 15s ease-in-out infinite -5s;
}
@keyframes dots-shimmer-a {
    0%, 100% { opacity: .02; }
    40%      { opacity: .34; }
    70%      { opacity: .12; }
}
@keyframes dots-shimmer-b {
    0%, 100% { opacity: .1; }
    35%      { opacity: .02; }
    65%      { opacity: .36; }
}
@media (prefers-reduced-motion: reduce) {
    #particles::before, #particles::after { animation: none; opacity: .2; }
}


/* [2026-10-01] Claude: затемняющий слой поверх фоновой картинки body (bg.jpg).
   Зачем: картинка фона слишком яркая и мешает частицам/контенту; нужен тёмный фиолетовый фон как на референсе.
   z-index:-2 — ниже #particles (-1), поэтому частицы остаются яркими, затемняется только картинка.
   Регулировка силы затемнения — последнее число (альфа) в rgba(). */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* [2026-10-01] Claude: v2 — прошлый вариант (rgba(8,0,20,0.65)) давал серо-фиолетовую муть, частицы терялись.
       Теперь почти непрозрачный чёрно-фиолетовый фон + мягкое фиолетовое свечение сверху, чтобы линии частиц контрастно читались. */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(90, 20, 160, 0.35) 0%, rgba(90, 20, 160, 0) 60%),
        /* [2026-10-01] Claude (правка): фон тёмно-фиолетовый, а не чёрный (было rgba(5, 0, 12, 0.93)) */
        linear-gradient(180deg, #230f42 0%, #170a2b 100%);
    z-index: -2;
    pointer-events: none;
}

.particles {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
}


.prilipaika {
    position: -webkit-sticky; /* Для поддержки Safari */
    position: sticky;
    top: 95px; /* Расстояние до верха страницы */
    z-index: 100; /* Убедитесь, что контейнер находится поверх других элементов */
}

/*-----------------------------------------------[ вывод новостей  ]---------------------------------------------------*/
.news-item {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.2s ease;
    will-change: transform;
}

.news-item:hover {
    transform: scale(1.02);
    backface-visibility: hidden;
}

.news-item-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
    transform: translateZ(0);
}

.news-item-title a {
    text-decoration: none;
    color: inherit;
}

.news-item-title a:hover {
    color: var(--bg-btn);
}

.news-item-desc {
    padding: 15px;
    flex-grow: 1;
}

.news-item-meta {
    display: flex;
    gap: 10px;
    color: #777;
    font-size: 0.9em;
}

.news-item-category {
    color: var(--bg-btn);
    font-weight: 600;
}

.news-item-views {
    display: flex;
    align-items: center;
    color: #777;
}

.news-item-views .fa-eye {
    margin-right: 5px;
    color:  var(--bg-btn);
}

.news-item-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
}

.news-item-title a {
    text-decoration: none;
    color: inherit;
}

.news-item-title a:hover {
    color: #530157;
}

.news-item-text {
    color: #555;
    line-height: 1.6;
}

.news-item-img {
    flex-shrink: 0;
    width: 220px;
    height: 140px;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 15px;
    justify-content: space-between;
}

.news-item-actions .fas {
    font-size: 1.2em;
    color: var(--bg-btn); /* Фиолетовый цвет иконок */
    cursor: pointer;
    transition: color 0.3s ease; /* Плавный переход цвета */
}

.news-item-actions .fas:hover {
    color: var(--bg-btn-hover);  /* Светло-фиолетовый цвет при наведении */
}

.news-item-fav .news-item-fav-added {
    color: var(--tt-btn); /* Белая иконка */
    background-color: var(--bg-btn); /* Фиолетовый фон */
    border-radius: 50%; /* Круглая форма */
    padding: 8px; /* Отступы внутри кружка */
}

.news-item-fav .news-item-fav-added:hover {
    background-color: #7A1C87; /* Светлее фиолетовый при наведении */
	color: var(--tt-btn);/* Белая иконка */
}

.news-item-actions div {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
}

@media (max-width: 600px) {
    .news-item {
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .news-item-img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        position: relative;
    }

    .news-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .news-item-desc {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Фон на всю ширину картинки */
        background: linear-gradient(to bottom, rgb(74 4 121) 20%, rgba(255, 255, 255, 0) 95%); /* Глубокий градиент, начинается с темного фиолетового и постепенно становится прозрачным */
        color: #fff; /* Белый текст для контраста */
        text-align: center;
        padding: 20px 20px; /* Паддинг для текста */
        font-size: 1em; /* Размер шрифта */
    }

    .news-item-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .news-item-actions div {
        flex-basis: 25%;
        text-align: center;
    }

    .news-item-title {
        font-size: 1em;
        margin-bottom: 10px;
        color: #ffffff;
    }

    .news-item-category {
        color: #FFF;
        font-weight: 600;
    }
    
    .news-item-views {
        display: flex;
        align-items: center;
        color: #ffffff;
    }

    .news-item-views .fas {
        font-size: 1.2em;
        color: #fff;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .news-item-date {
        color: #FFF;
    }

    .news-item-text .line-clamp {
        color: #FFF;
    }

    .news-item-category {
    font-size: 0.8em;
        font-weight: 450;
    }
    
}




/*====================================================================MENU===========================  */
/*---------------------Для отдельных обычныхссылок ----------------------- */
.my-menu a:hover {
    text-decoration: none;
	color: #ffffff;
}
.my-menu a {
    text-decoration: none;
	color: #ffffff;
	font-family: sans-serif;
}

.my-menu {
    background-color: #24042e;
}

.my-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.my-menu > ul > li {
    position: relative;
    display: block;
    border-bottom: 1px solid #330246;
}

.my-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    background: rgb(90,3,145);
    background: -moz-linear-gradient(220deg, rgba(90,3,145,1) 0%, rgba(101,0,164,1) 50%, rgba(77,0,126,1) 100%);
    background: -webkit-linear-gradient(220deg, rgba(90,3,145,1) 0%, rgba(101,0,164,1) 50%, rgba(77,0,126,1) 100%);
    background: linear-gradient(220deg, rgba(90,3,145,1) 0%, rgba(101,0,164,1) 50%, rgba(77,0,126,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5a0391",endColorstr="#4d007e",GradientType=1);
    transition: background-color 0.3s ease;
    position: relative;
}

.my-menu a:hover {
    background: rgb(60,3,97);
    background: -moz-linear-gradient(86deg, rgba(60,3,97,1) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
    background: -webkit-linear-gradient(86deg, rgba(60,3,97,1) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
    background: linear-gradient(86deg, rgba(60,3,97,1) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c0361",endColorstr="#7c08b5",GradientType=1);
}

/* Отступы для всех уровней подменю и применение градиентов */
.my-submenu > li > a {
    padding-left: 40px;
    background: rgb(60,3,97);
    background: -moz-linear-gradient(282deg, rgba(60,3,97,1) 0%, rgba(80,1,129,1) 50%, rgba(64,2,103,1) 100%);
    background: -webkit-linear-gradient(282deg, rgba(60,3,97,1) 0%, rgba(80,1,129,1) 50%, rgba(64,2,103,1) 100%);
    background: linear-gradient(282deg, rgba(60,3,97,1) 0%, rgba(80,1,129,1) 50%, rgba(64,2,103,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c0361",endColorstr="#400267",GradientType=1);
    border-top: 1px solid #330246;
}

.my-submenu .my-submenu > li > a {
    padding-left: 60px;
    background-color: rgba(60,3,97,0.8); /* Второй уровень с более светлым оттенком */
}

.my-submenu .my-submenu .my-submenu > li > a {
    padding-left: 80px;
    background-color: rgba(60,3,97,0.6); /* Третий уровень с еще более светлым оттенком */
}

/* Дополнительные уровни подменю можно продолжать таким образом */

/* Добавляем стрелки только к элементам с подменю */
.my-menu-item:has(+ .my-submenu)::after, 
.my-menu-item:has(+ .my-submenu2)::after {
    content: '\f107'; /* FontAwesome код для стрелки вниз */
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Изменяем стрелку, когда меню открыто */
.my-menu li.my-active > .my-menu-item:has(+ .my-submenu)::after, 
.my-menu li.my-active > .my-menu-item:has(+ .my-submenu2)::after {
    content: '\f107';font-weight: 300; font-family:'Font Awesome 5 Pro'; /* FontAwesome код для стрелки вверх */
}

.my-submenu, .my-submenu2 {
    display: none;
}

.my-menu li.my-active > .my-submenu,
.my-menu li.my-active > .my-submenu2 {
    display: block;
}

.my-submenu a:hover, .my-submenu2 a:hover {
    background-color: #555;
}

/* ===== SIDEBAR MENU ROUNDED =====
   [2026-10-01] Claude: левое меню возвращено к исходному виду (пункты вплотную друг к другу, без зазоров и лишних отступов).
   Единственное изменение: скруглены внешние углы всего блока меню. Предыдущий вариант с отдельными плашками убран (было слишком пусто).
   overflow:hidden только вне режима прилипшей полоски (body:not(.menu-docked)), иначе обрезались бы выпадающие списки. */
body:not(.menu-docked) .my-menu {border-radius: 14px; overflow: hidden;}
/* [2026-10-01] Claude: строка поиска над меню скруглена тем же радиусом (14px), что и меню. Высота не менялась. */
.cols__side .search-block__input, .cols__side .search-block__input:focus {border-radius: 14px;}
.cols__side .search-block__btn {border-radius: 0 14px 14px 0;}
/* [2026-10-01] Claude: строка поиска в фиолетовых оттенках (по просьбе пользователя): светло-сиреневый фон, сиреневая рамка,
   фиолетовые текст и лупа, при фокусе яркая фиолетовая рамка со свечением. Также убрана серая подложка за поиском/меню (.nav-holder),
   которая выглядывала серым пятном под строкой поиска. */
.cols__side .nav-holder {background: none;}
.cols__side .search-block__input {background: #f6eefc; border: 1px solid #d9bff0; color: #3a0a63; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;}
.cols__side .search-block__input:not(:focus)::placeholder {color: #9b7bbd; opacity: 1;}
.cols__side .search-block__input:focus {background: #fff; border-color: #8a2be2; box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.18);}
.cols__side .search-block__btn {color: #6a0dad; background: transparent;}
.cols__side .search-block__btn:hover {color: #8a2be2; background: transparent;}
/* ===== MENU DOCKED =====
   [2026-10-01] Claude: режим "прилипшего" меню. Класс body.menu-docked ставит js/mymenu.js, когда боковое меню
   уезжает под шапку при прокрутке. Зачем: меню не должно уплывать — оно превращается в полоску иконок
   под верхним меню, а подпункты открываются выпадающим списком под иконкой.
   --dock-top (нижняя граница шапки) тоже выставляет JS, 84px — запасное значение. */
body.menu-docked .my-menu {
    position: fixed;
    top: var(--dock-top, 84px);
    /* [2026-10-01] Claude (правка 3): было left:0; right:0 + по центру — теперь слева, над сайдбаром.
       Правка 6: --dock-left = левый край колонки сайдбара (считает JS при загрузке/прокрутке/ресайзе, адаптивно, без margin).
       Тонкая подстройка — переменная --dock-offset (например 20px), по умолчанию 0. */
    /* правка 8: по просьбе пользователя меню снова по центру экрана (привязка к левой грани .content отменена) */
    left: 0;
    right: 0;
    z-index: 140; /* ниже шапки (.header z-index:150) */
    /* [2026-10-01] Claude (правка 2): фон и тень убраны с контейнера — форма "трапеции" рисуется в .my-menu > ul::before,
       а drop-shadow повторяет эту форму. pointer-events:none, чтобы прозрачные края не перекрывали клики по странице. */
    background: none !important;
    pointer-events: none;
    display: flex;
    justify-content: center;
    animation: menuDockIn 0.3s ease; /* плавное "выезжание" из-под шапки */
}
@keyframes menuDockIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
body.menu-docked .my-menu > ul {
    display: flex;
    position: relative;
    padding: 0 16px; /* место под скошенные края трапеции (правка 7: слева отступ возвращён) */
    pointer-events: auto;
}
/* [2026-10-01] Claude (правка 2): форма как на референсе — полоска "свисает" от шапки,
   сверху шире, снизу уже, края скошены. Сделана фоновым слоем с clip-path (сами пункты/выпадашки не обрезаются). */
body.menu-docked .my-menu > ul::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #8a24d6 0%, #6d10b4 100%); /* [2026-10-01] Claude (правка): вкладка светлее и ярче (было 220deg #5a0391 → #6500a4 → #4d007e, сливалась с шапкой) */
    /* [2026-10-01] Claude (правка 5): левый край прямой и вровень с белой границей блока, скос только справа (по макету пользователя) */
    /* правка 7: скос слева возвращён, как был (правка 5 его убирала) */
    /* [2026-10-01] Claude (правка 11): заливка вкладки сужена на 2px внутрь (по скошенным сторонам и снизу), чтобы под ней осталась
       тёмная кайма-контур из ul::after (clip-path не умеет border, поэтому кайма — это второй слой той же формы чуть больше). */
    clip-path: polygon(2.2px 0, calc(100% - 2.2px) 0, calc(100% - 17.3px) calc(100% - 2px), 17.3px calc(100% - 2px));
}
/* [2026-10-01] Claude (правка 11): причина "серых иконок" и затемнения вкладки найдена — большая тень шапки (box-shadow 0 0 35px чёрная,
   шапка выше вкладки по z-index) ложилась поверх вкладки и приглушала иконки. В режиме вкладки тень шапки уменьшена до узкой полосы. */
body.menu-docked .header {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}/* Тёмная кайма вкладки: та же форма, лежит под заливкой и выглядывает по краям. Сверху каймы нет — вкладка "растёт" из шапки. */
body.menu-docked .my-menu > ul::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #2a0446;
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%);
    pointer-events: none;
}
body.menu-docked .my-menu > ul > li {
    display: block;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.16); /* правка: было #330246 (тёмные полоски) */
}
/* [2026-10-01] Claude (правка 3): убраны разделительные полоски у крайних кнопок (рядом со скошенными краями),
   чтобы форма смотрелась однородно. */
body.menu-docked .my-menu > ul > li:last-child {
    border-right: 0;
}
/* [2026-10-01] Claude (правка 10): затемнение вкладки (тень от верхнего меню) и внешняя тень убраны по просьбе пользователя — было слишком затенено. */
/* Верхний уровень: только иконка, без текста и стрелки */
body.menu-docked .my-menu > ul > li > .my-menu-item {
    /* [2026-10-01] Claude (правка 2): иконки уменьшены (было 18px / padding 9px 26px) */
    padding: 9px 19px;
    font-size: 16px; /* правка: было 14px */
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.45); /* правка: иконки чище и ярче */
    line-height: 1;
    background: transparent; /* фон даёт ul::before */
}
body.menu-docked .my-menu > ul > li > .my-menu-item:hover {
    background: rgba(160, 60, 230, 0.35);
}
/* [2026-10-01] Claude (правка 2): своя подсказка вместо стандартной title — крупнее и в цвет сайта.
   Текст берётся из data-tip (его ставит js/mymenu.js). Скрыта, когда у пункта открыт выпадающий список. */
/* [2026-10-01] Claude (правка 4): селектор [data-tip] — без текста подсказка вообще не рисуется (раньше мелькала пустая фиолетовая плашка) */
body.menu-docked .my-menu > ul > li > .my-menu-item[data-tip]::before {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -4px);
    white-space: nowrap;
    padding: 8px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(220deg, #5a0391 0%, #6500a4 50%, #4d007e 100%);
    border: 1px solid #8a2be2;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}
body.menu-docked .my-menu > ul > li:not(.my-active) > .my-menu-item:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
body.menu-docked .my-menu > ul > li > .my-menu-item .my-menu-text {
    display: none;
}
body.menu-docked .my-menu > ul > li > .my-menu-item::after {
    display: none;
}
/* Подсвечиваем иконку, у которой открыт выпадающий список */
body.menu-docked .my-menu > ul > li.my-active > .my-menu-item {
    background: linear-gradient(86deg, rgba(60,3,97,1) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
}
/* Выпадающий список под иконкой */
body.menu-docked .my-menu > ul > li > .my-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    max-height: calc(100vh - var(--dock-top, 84px) - 60px);
    overflow-y: auto;
    background: #24042e;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
    border-radius: 0 0 8px 8px;
}

/*===============================Стили для кабинета =======================================================*/
.kabinet-login__menu {
	display: flex;
	flex-direction: column;
	width: 300px;
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.kabinet-login__menu li {
	margin-bottom: 10px;
}

.kabinet-login__menu a {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #3f0067; /* Фиолетовый цвет */
	
}

.kabinet-login__menu a:hover {
	transform: translateX(10px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.kabinet-login__menu a .fal {
	font-size: 24px;
	margin-right: 15px;
	color: #3f0067;
}
/*================================[ Здесь заканчивается зоyа которую я меняю]========================================*/
/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative;}
.wrapper-container {max-width: 1320px; /* было var(--max-width) = 1260px, правка 2026-10-01 Claude: чуть шире, чтобы блок контента не казался узким */ margin: 0 auto; position: relative; z-index: 20;}
.header {background: url(https://glukam.net/templates/V2/images/bgpurp.png) var(--bg); box-shadow: 0 0 35px rgb(0, 0, 0); position: fixed; z-index: 150; margin-top: 150px; width: 100%;}
.header__inner {padding: 0px var(--indent); }
/* [2026-10-01] Claude: убрана "пустота" по бокам белого блока контента: боковые отступы были 80px слева и 33px справа, стали по 28px
   (--indent не трогаем: он нужен шапке, подвалу и другим блокам). Отдельно чуть шире сам блок (см. .wrapper-container) и меньше зазор между колонками (см. .cols). */
.content {background-color: var(--bg); box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.55); padding: 240px 28px;padding-bottom: 40px; border-radius: 15px; position: relative; z-index: 10; margin-top: -150px; margin-bottom: -50px;}
.cols {display: grid; gap: 36px; /* было 50px, правка 2026-10-01 Claude */ grid-template-columns: 260px minmax(0,1fr); 
	grid-template-areas: "sidebar main";}
.cols__main {grid-area: main;}
.cols__side {grid-area: sidebar;}
.footer {background: url(https://glukam.net/templates/V2/images/bgpurp.png) var(--bg-black); color: #fff; border-radius: 15px;}
.footer__inner {padding: 30px var(--indent); padding-top: 80px; gap: 30px;}

.scrolltop {position: fixed; width: 44px; height: 40px; right: -60px; bottom: 0px;
	z-index: 990; border-radius: 0; font-size: 20px; opacity: 0; transition: right 0.2s, opacity 0.2s;}
.scrolltop.is-active {right: 0px; opacity: 1;}

/* HEADER
----------------------------------------------- */
.logo {display: block; height: 80px; line-height: 80px; font-weight: 700; color: #ffffff !important;
	font-size: 24px; letter-spacing: 1px; padding-left: 40px;  
	background: url(../images/logo.svg) 0 center / 30px no-repeat;}
.logo span {font-weight: 400;}
.header__logo {min-width: 280px; margin-right: 30px;}
/* [2026-10-01] Claude: аватарка в шапке вместо текстовой кнопки "Кабинет" (разметка в login.tpl) */
.hdr-avatar {display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px;
	margin-left: 10px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
	border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12);
	transition: border-color 0.2s ease, transform 0.2s ease;}
.hdr-avatar:hover {border-color: #fff; transform: scale(1.06);}
.hdr-avatar img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* ===== HEADER USER MENU =====
   [2026-10-01] Claude: меню кабинета под аватаркой в шапке — центральная модалка (разметка login.tpl, логика js/usermenu.js).
   Правка: фон белый вместо тёмно-фиолетового (по просьбе пользователя — было мрачновато). Акценты остались фиолетовыми. */
.hdr-user {position: relative; display: flex; align-items: center;}
.hdr-menu {position: fixed; top: 50%; left: 50%; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow-y: auto; z-index: 1001;
	background: #fff; color: #3a0a63;
	border: 1px solid #e6d6f5; border-radius: 18px;
	box-shadow: 0 24px 60px rgba(40, 0, 70, 0.35);
	opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(0.96);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;}
.hdr-user.is-open .hdr-menu {opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);}
.hdr-menu__backdrop {position: fixed; inset: 0; z-index: 1000; background: rgba(30, 0, 55, 0.45);
	opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s;}
.hdr-user.is-open .hdr-menu__backdrop {opacity: 1; visibility: visible;}
.hdr-user.is-open .hdr-avatar {border-color: #fff;}
.hdr-menu__close {position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 16px; cursor: pointer; z-index: 2; transition: background 0.15s ease;}
.hdr-menu__close:hover {background: rgba(255, 255, 255, 0.4);}
/* Шапка меню: аватар + имя (фиолетовая полоса, чтобы белое меню не было пресным) */
.hdr-menu__head {display: flex; align-items: center; gap: 12px; padding: 18px 20px;
	background: linear-gradient(150deg, #6a0dad 0%, #4d007e 100%); color: #fff;}
.hdr-menu__head img {width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.8);}
.hdr-menu__who {display: flex; flex-direction: column; min-width: 0;}
.hdr-menu__who b {font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hdr-menu__who span {font-size: 12px; color: rgba(255, 255, 255, 0.75);}
/* Список пунктов */
.hdr-menu__list {list-style: none; margin: 0; padding: 8px;}
.hdr-menu__list li {margin: 0;}
.hdr-menu__list a {display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
	color: #3a0a63; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s ease, padding-left 0.15s ease;}
.hdr-menu__list a:hover {background: #f3e9fb; color: #4d007e; padding-left: 16px;}
.hdr-menu__list i {width: 20px; text-align: center; font-size: 16px; color: #8a2be2;}
.hdr-menu__list span {flex: 1 1 auto;}
/* Бейджи: число закладок / сообщений; нули скрыты, новые сообщения выделены */
.hdr-menu__badge {font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; min-width: 20px; height: 18px;
	padding: 0 6px; text-align: center; border-radius: 9px; background: #f3e9fb; color: #4d007e;}
.hdr-menu__badge.is-zero {display: none;}
.hdr-menu__badge.is-new {background: #ff4500; color: #fff;}
/* Админпанель — акцент; Выйти — отделён линией и красный */
.hdr-menu__list .is-admin a {background: #efe0fb; margin-bottom: 6px; font-weight: 600;}
.hdr-menu__list .is-admin a:hover {background: #e3c9f7;}
.hdr-menu__list .is-logout {margin-top: 6px; padding-top: 6px; border-top: 1px solid #efe3f8;}
.hdr-menu__list .is-logout a, .hdr-menu__list .is-logout i {color: #d93025;}
.hdr-menu__list .is-logout a:hover {background: #fdeceb;}
/* ===== STATS PAGE =====
   [2026-10-01] Claude: современная страница статистики (разметка в stats.tpl): ключевые показатели карточками,
   активность по периодам плитками, таблица лучших пользователей в фирменном фиолетовом стиле.
   Префикс st- чтобы не пересекаться с остальными стилями. */
.st-head {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px;}
.st-title {margin: 0;}
.st-section-title {display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; font-size: 18px; font-weight: 700; color: #3a0a63;}
.st-section-title i {color: #8a2be2;}

/* Ключевые показатели */
.st-kpis {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;}
.st-kpi {position: relative; padding: 20px 20px 16px; border-radius: 16px; color: #fff; overflow: hidden;
	background: linear-gradient(150deg, #6a0dad 0%, #3a0a63 100%); box-shadow: 0 8px 22px rgba(58, 10, 99, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;}
.st-kpi:hover {transform: translateY(-3px); box-shadow: 0 14px 28px rgba(58, 10, 99, 0.45);}
.st-kpi__icon {position: absolute; top: 14px; right: 16px; font-size: 38px; color: rgba(255, 255, 255, 0.16);}
.st-kpi__label {font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75);}
.st-kpi__num {font-size: 40px; font-weight: 800; line-height: 1.15; margin: 4px 0 12px;}
.st-kpi__list {list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18);}
.st-kpi__list li {display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; color: rgba(255, 255, 255, 0.8);}
.st-kpi__list b {color: #fff;}
.st-kpi__links a {color: #e3c4ff; text-decoration: none;}
.st-kpi__links a:hover {color: #fff;}
.st-kpi__links i {margin-left: 4px; font-size: 12px;}

/* Активность по периодам */
.st-periods {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;}
.st-period {padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #e6d6f5;
	box-shadow: 0 4px 14px rgba(58, 10, 99, 0.08);}
.st-period__name {display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; font-weight: 700;
	color: #3a0a63; border-bottom: 1px dashed #d9bff0;}
.st-period__name i {color: #8a2be2;}
.st-period__row {display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: #555;}
.st-period__row i {width: 18px; text-align: center; color: #b07ae0;}
.st-period__row span {flex: 1 1 auto;}
.st-period__row b {min-width: 30px; text-align: center; padding: 2px 10px; border-radius: 99px; background: #f3e9fb; color: #4d007e;}

/* Таблица лучших пользователей */
.st-table {border-radius: 14px; overflow: hidden; border: 1px solid #e6d6f5; box-shadow: 0 4px 14px rgba(58, 10, 99, 0.08);}
.st-table table {width: 100%; border-collapse: collapse; background: #fff; font-size: 14px;}
.st-table td, .st-table th {padding: 11px 14px; text-align: center; border: 0; border-bottom: 1px solid #f0e5fa;}
/* [2026-10-01] Claude: DLE выводит шапку в thead>tr>td, поэтому красим thead, а не tr:first-child (иначе первая строка пользователей тоже стала бы шапкой) */
.st-table thead td, .st-table thead th {background: linear-gradient(150deg, #5a0391 0%, #3a0a63 100%);
	color: #fff; font-weight: 600; font-size: 13px; border-bottom: 0;}
.st-table tbody tr:nth-child(even) td {background: #faf5fe;}
.st-table tbody tr:hover td {background: #f0e0fb;}
.st-table td:first-child {text-align: left; font-weight: 600;}
.st-table tr:last-child td {border-bottom: 0;}
/* [2026-10-01] Claude: колонка "ПС" — вместо текста "[ ПС ]" иконка конверта. Скобки выводит сам DLE, поэтому
   прячем текст ячейки (font-size:0) и рисуем иконку Font Awesome через ::before у ссылки. */
.st-table tbody td:last-child {font-size: 0;}
.st-table tbody td:last-child a {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: 50%; font-size: 0; border-bottom: 0; text-decoration: none; background: #f3e9fb; transition: background 0.15s ease, transform 0.15s ease;}
.st-table tbody td:last-child a::before {content: "\f0e0"; font-family: 'Font Awesome 5 Pro'; font-weight: 300; font-size: 16px; color: #6a0dad;}
.st-table tbody td:last-child a:hover {background: #6a0dad; transform: scale(1.08); text-decoration: none;}
.st-table tbody td:last-child a:hover::before {color: #fff;}
/* [2026-10-01] Claude: колонки "Регистрация" (3-я) и "Последнее посещение" (4-я) скрыты по просьбе пользователя.
   Таблицу выдаёт DLE ({topusers}), поэтому скрываем через CSS; данные остаются в HTML. */
.st-table td:nth-child(3), .st-table td:nth-child(4), .st-table th:nth-child(3), .st-table th:nth-child(4) {display: none;}
.st-table a {color: #6a0dad; text-decoration: none;}
.st-table a:hover {color: #8a2be2; text-decoration: underline;}
@media (max-width: 600px) {
	.st-kpi__num {font-size: 32px;}
	.st-table td, .st-table th {padding: 9px 8px; font-size: 12px;}
}
/* ===== TOP USERS =====
   [2026-10-01] Claude: современный вид страницы "Топ пользователей". Разметку и встроенный style выдаёт модуль
   engine/modules/top.php (вне папки шаблона, его не трогаем), поэтому здесь переопределяем стили с более высокой
   специфичностью (.cols__main .top-users ...): прозрачный блок вместо серой карточки, заголовки с фиолетовой плашкой,
   карточки с номером места (CSS-счётчик), у первых трёх золотой/серебряный/бронзовый номер, кольцо вокруг аватара. */
.cols__main .top-users {max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;}
.cols__main .top-users h3 {display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; padding: 0; border: 0;
	font-size: 20px; font-weight: 700; color: #3a0a63;}
.cols__main .top-users h3:first-child {margin-top: 0;}
.cols__main .top-users h3::before {content: ""; width: 5px; height: 24px; border-radius: 3px; background: linear-gradient(180deg, #8a2be2, #4d007e);}
.cols__main .top-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: rank;}
.cols__main .user-card {position: relative; counter-increment: rank; width: auto; gap: 14px; padding: 12px 16px 12px 14px;
	background: #fff; border: 1px solid #e6d6f5; border-radius: 14px; box-shadow: 0 4px 12px rgba(58, 10, 99, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
.cols__main .user-card:hover {transform: translateY(-3px); border-color: #b07ae0; box-shadow: 0 10px 22px rgba(58, 10, 99, 0.18);}
/* Номер места */
.cols__main .user-card::before {content: counter(rank); flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #4d007e; background: #f3e9fb;}
.cols__main .top-grid .user-card:nth-child(1)::before {background: linear-gradient(135deg, #ffd86b, #e8a400); color: #5a3b00;}
.cols__main .top-grid .user-card:nth-child(2)::before {background: linear-gradient(135deg, #e6eaf0, #aab4c3); color: #3d4654;}
.cols__main .top-grid .user-card:nth-child(3)::before {background: linear-gradient(135deg, #f0b27a, #b9692b); color: #4a2606;}
.cols__main .user-avatar img {display: block; width: 48px; height: 48px; margin: 0; object-fit: cover; border-radius: 50%;
	border: 2px solid #fff; box-shadow: 0 0 0 2px #b07ae0;}
.cols__main .user-info {min-width: 0;}
.cols__main .user-name {font-size: 15px; font-weight: 700; color: #3a0a63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cols__main .user-stat {margin-top: 2px; font-size: 13px; color: #8a6aa8;}
@media (max-width: 700px) {
	.cols__main .top-grid {grid-template-columns: 1fr;}
}
/* [2026-10-01] Claude: окно профиля пользователя (всплывает по клику на ник) всегда по центру экрана и "преследует" пользователя
   при прокрутке, пока окно не закрыто. Зачем: окно открывалось в произвольном месте страницы и уезжало при скролле.
   Это диалог jQuery UI от DLE (класс dle-popup-userprofile): переопределяем его позицию на fixed; !important нужен,
   потому что jQuery UI ставит top/left инлайн-стилями. */
.ui-dialog.dle-popup-userprofile {position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
	margin: 0 !important; transform: translate(-50%, -50%); max-height: calc(100vh - 32px); max-width: calc(100vw - 24px); overflow-y: auto;}
/* ===== ABOUT PAGE =====
   [2026-10-01] Claude: стили новой страницы "О нас" (разметка about.tpl, подключена в main.tpl только для страницы o-nas).
   Префикс ab- чтобы не пересекаться с остальными стилями. Откат: убрать подключение about.tpl в main.tpl. */
.ab {color: #3a2a4d;}
.ab-hero {position: relative; padding: 44px 36px; border-radius: 20px; color: #fff; overflow: hidden;
	background: radial-gradient(circle at 85% 15%, rgba(176, 122, 224, 0.55) 0%, rgba(176, 122, 224, 0) 55%), linear-gradient(150deg, #6a0dad 0%, #2e0650 100%);
	box-shadow: 0 14px 32px rgba(58, 10, 99, 0.35);}
.ab-hero__title {margin: 0 0 14px; font-size: 34px; line-height: 1.2; font-weight: 800; color: #fff;}
.ab-hero__title span {color: #e3c4ff;}
.ab-hero__text {margin: 0 0 24px; max-width: 640px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.88);}
.ab-hero__btns {display: flex; flex-wrap: wrap; gap: 12px;}
.ab-btn {display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 12px; font-size: 15px; font-weight: 700;
	text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;}
.ab-btn:hover {transform: translateY(-2px); text-decoration: none;}
.ab-btn--main {background: #fff; color: #4d007e;}
.ab-btn--main:hover {color: #4d007e; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);}
.ab-btn--ghost, .ab-btn--outline {background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5);}
.ab-btn--ghost:hover, .ab-btn--outline:hover {background: rgba(255, 255, 255, 0.25); color: #fff;}
.ab-btn--light {background: #fff; color: #4d007e;}
.ab-btn--light:hover {color: #4d007e; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);}

.ab-numbers {display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 22px 0 0;}
.ab-num {padding: 18px 12px; text-align: center; border-radius: 14px; background: #fff; border: 1px solid #e6d6f5; box-shadow: 0 4px 14px rgba(58, 10, 99, 0.08);}
.ab-num b {display: block; font-size: 30px; font-weight: 800; color: #6a0dad;}
.ab-num span {font-size: 13px; color: #7a6a8c;}

.ab-title {display: flex; align-items: center; gap: 12px; margin: 38px 0 18px; font-size: 24px; font-weight: 800; color: #3a0a63;}
.ab-title::before {content: ""; width: 5px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, #8a2be2, #4d007e);}

/* правка: 2 колонки (8 карточек = 4 полных ряда), раньше auto-fit давал неполный последний ряд */
.ab-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
.ab-card {padding: 22px 20px; border-radius: 16px; background: #fff; border: 1px solid #e6d6f5; box-shadow: 0 4px 14px rgba(58, 10, 99, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
.ab-card:hover {transform: translateY(-4px); border-color: #b07ae0; box-shadow: 0 12px 26px rgba(58, 10, 99, 0.18);}
.ab-card__icon {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px;
	font-size: 22px; color: #fff; background: linear-gradient(150deg, #8a2be2, #4d007e);}
.ab-card h3 {margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #3a0a63;}
.ab-card p {margin: 0; font-size: 14px; line-height: 1.55; color: #5d4e70;}

/* [2026-10-01] Claude: версия 2 страницы О нас — блок живой истории, цитата и принципы (было слишком "презентационно") */
.ab-story {padding: 26px 28px; border-radius: 16px; background: #faf5fe; border: 1px solid #efe3f8;}
.ab-story p {margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: #4a3b5c;}
.ab-story p:last-child {margin-bottom: 0;}
.ab-story .ab-story__lead {font-size: 17px; line-height: 1.7; color: #3a0a63;}
.ab-story strong {color: #4d007e;}
.ab-story + .ab-timeline {margin-top: 18px;}
.ab-quote {position: relative; margin: 36px 0 0; padding: 26px 30px 26px 74px; border-radius: 16px; border: 0;
	background: linear-gradient(150deg, #f3e9fb 0%, #ebd9fa 100%); box-shadow: 0 4px 14px rgba(58, 10, 99, 0.1);}
.ab-quote > i {position: absolute; left: 26px; top: 24px; font-size: 30px; color: #8a2be2;}
.ab-quote p {margin: 0; font-size: 17px; line-height: 1.7; font-style: italic; font-weight: 500; color: #3a0a63;}
.ab-values {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;}
.ab-value {padding: 22px 20px; text-align: center; border-radius: 16px; background: #fff; border: 1px solid #e6d6f5; box-shadow: 0 4px 14px rgba(58, 10, 99, 0.07);}
.ab-value > i {display: block; margin-bottom: 12px; font-size: 30px; color: #8a2be2;}
.ab-value h3 {margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #3a0a63;}
.ab-value p {margin: 0; font-size: 14px; line-height: 1.55; color: #5d4e70;}
@media (max-width: 700px) {
	.ab-story {padding: 20px 18px;}
	.ab-quote {padding: 22px 20px 22px 20px;}
	.ab-quote > i {position: static; display: block; margin-bottom: 8px;}
}
.ab-timeline {position: relative; display: grid; gap: 16px; padding-left: 8px;}
.ab-step {display: flex; align-items: stretch; gap: 18px;}
/* правка: фиксированная ширина плашки, чтобы длинное слово не раздвигало её */
.ab-step__year {flex: 0 0 140px; width: 140px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 12px;
	font-size: 15px; font-weight: 800; color: #fff; text-align: center; background: linear-gradient(150deg, #6a0dad, #4d007e);}
.ab-step__body {flex: 1 1 auto; padding: 14px 18px; border-radius: 12px; background: #faf5fe; border: 1px solid #efe3f8;}
.ab-step__body h3 {margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #3a0a63;}
.ab-step__body p {margin: 0; font-size: 14px; line-height: 1.5; color: #5d4e70;}

.ab-cta {margin: 40px 0 8px; padding: 36px 32px; text-align: center; border-radius: 20px; color: #fff;
	background: radial-gradient(circle at 15% 85%, rgba(176, 122, 224, 0.5) 0%, rgba(176, 122, 224, 0) 55%), linear-gradient(150deg, #4d007e 0%, #2e0650 100%);
	box-shadow: 0 14px 32px rgba(58, 10, 99, 0.35);}
.ab-cta h2 {margin: 0 0 10px; font-size: 26px; font-weight: 800; color: #fff;}
.ab-cta p {max-width: 560px; margin: 0 auto 22px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.85);}
.ab-cta .ab-hero__btns {justify-content: center;}
@media (max-width: 700px) {
	.ab-hero {padding: 30px 20px;}
	.ab-hero__title {font-size: 26px;}
	.ab-step {flex-direction: column; gap: 8px;}
	.ab-step__year {flex-basis: auto; width: auto;}
	.ab-grid {grid-template-columns: 1fr;}
}
/* ===== HOME HERO / TILES =====
   [2026-10-01] Claude: новый верх главной (разметка windex.tpl). Зачем: прежние плитки были с белым текстом на пёстрых фото,
   с тяжёлой чёрной рамкой, другим шрифтом и непонятной кликабельностью. Теперь: тёмно-фиолетовый градиент поверх фото
   для читаемости, шрифт сайта, иконки, стрелка "Открыть", эффект при наведении. Префикс hm-. */
.hm-hero, .hm-tile {position: relative; overflow: hidden; border-radius: 18px; color: #fff; isolation: isolate;
	box-shadow: 0 10px 26px rgba(58, 10, 99, 0.3);}
/* правка: плитка целиком ссылка, текст оригинальный (SEO), без кнопок и отдельных иконок */
.hm-hero {flex: 1 1 100%; min-height: 230px; display: flex; align-items: center; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease;}
.hm-hero:hover {transform: translateY(-4px); color: #fff; box-shadow: 0 16px 34px rgba(58, 10, 99, 0.5);}
.hm-hero__bg, .hm-tile__bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.5s ease;}
.hm-hero::before, .hm-tile::before {content: ""; position: absolute; inset: 0; z-index: -1;}
.hm-hero::before {background: linear-gradient(100deg, rgba(30, 4, 56, 0.95) 0%, rgba(58, 10, 99, 0.82) 45%, rgba(58, 10, 99, 0.35) 100%);}
.hm-hero__body {padding: 30px 38px; max-width: 800px;}
.hm-hero__title {margin: 0 0 12px; font-size: 28px; line-height: 1.2; font-weight: 800; color: #fff;}
.hm-hero__title span {color: #e3c4ff;}
.hm-hero__text {margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.92);}
.hm-hero__text:last-child {margin-bottom: 0;}
.hm-hero__title i, .hm-tile__title i {margin-right: 8px; color: #e3c4ff; font-size: 0.85em;}

.hm-tiles {flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.hm-tile {display: flex; align-items: flex-end; min-height: 210px; text-decoration: none; color: #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease;}
.hm-tile::before {background: linear-gradient(to top, rgba(30, 4, 56, 0.96) 0%, rgba(58, 10, 99, 0.75) 55%, rgba(58, 10, 99, 0.35) 100%);}
.hm-tile:hover {transform: translateY(-5px); color: #fff; box-shadow: 0 16px 34px rgba(58, 10, 99, 0.5);}
.hm-tile:hover .hm-tile__bg, .hm-hero:hover .hm-hero__bg {transform: scale(1.06);}
.hm-tile__body {position: relative; width: 100%; padding: 22px 24px;}
.hm-tile__title {margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #fff;}
.hm-tile__text {margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.88);}
@media (max-width: 700px) {
	.hm-hero__body {padding: 26px 22px;}
	.hm-hero__title {font-size: 22px;}
	.hm-tiles {grid-template-columns: 1fr;}
}
/* ===== ADMIN GLOW BORDER =====
   [2026-10-01] Claude: вращающаяся светящаяся рамка (как "мерцающий бордер, бегущий по кругу") у админских элементов:
   аватарка в шапке (класс hdr-glow ставится в login.tpl только для группы 1), кнопка озвучки (hdr-glow-ring, она и так только для группы 1)
   и пункт "Админпанель" в окне кабинета (виден только админам). У остальных пользователей эффекта нет.
   Техника: conic-gradient, угол которого анимируется через @property --ab-angle; для кнопок с обычной формой рамка рисуется
   псевдоэлементом с маской (виден только контур), для круглой аватарки градиент служит фоном кнопки, а сама картинка лежит внутри.
   Если браузер не поддерживает @property, рамка остаётся статичной (не ломается). Для людей с "уменьшить анимацию" не вращается. */
@property --ab-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes ab-spin {
	to {--ab-angle: 360deg;}
}
/* Аватарка: градиент как кольцо толщиной 2px вокруг картинки */
.hdr-avatar.hdr-glow {
	border: 0; padding: 2px;
	background: conic-gradient(from var(--ab-angle), rgba(176, 122, 224, 0) 0%, rgba(176, 122, 224, 0) 45%, #b07ae0 68%, #ffffff 82%, #e3c4ff 90%, rgba(176, 122, 224, 0) 100%);
	filter: drop-shadow(0 0 5px rgba(176, 122, 224, 0.65));
	animation: ab-spin 3.2s linear infinite;
}
.hdr-avatar.hdr-glow img {border-radius: 50%;}
.hdr-avatar.hdr-glow:hover {transform: scale(1.06);}
/* Кнопки обычной формы: рамка-контур псевдоэлементом (маска вырезает середину) */
.hdr-glow-ring, .hdr-menu__list .is-admin a {position: relative;}
.hdr-glow-ring::before, .hdr-menu__list .is-admin a::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
	background: conic-gradient(from var(--ab-angle), rgba(176, 122, 224, 0) 0%, rgba(176, 122, 224, 0) 45%, #b07ae0 68%, #ffffff 82%, #e3c4ff 90%, rgba(176, 122, 224, 0) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: ab-spin 3.2s linear infinite;
}
.hdr-glow-ring {filter: drop-shadow(0 0 4px rgba(176, 122, 224, 0.6));}
@media (prefers-reduced-motion: reduce) {
	.hdr-avatar.hdr-glow, .hdr-glow-ring::before, .hdr-menu__list .is-admin a::before {animation: none;}
}/* ===== DLE PUSH NOTIFICATIONS =====
   [2026-10-01] Claude: уведомления DLE (например "Публикация успешно убрана из закладок") переделаны в стиль сайта и теперь выезжают
   снизу по центру экрана (были светлые, цветные, в правом верхнем углу). Тёмно-фиолетовая карточка со скруглением, круглая иконка-акцент
   (зелёный — успех, оранжевый — предупреждение, красный — ошибка), белый текст. engine.css не менялся: стили перебиваем более
   специфичными селекторами (.DLEPush .DLEPush-notification...), так как engine.css подключается после styles.css. Откат: удалить блок. */
@keyframes push-rise {
	from {transform: translateY(40px) scale(0.96); opacity: 0;}
	to   {transform: translateY(0) scale(1); opacity: 1;}
}
body .DLEPush { /* body — для специфичности: engine.css подключается позже и задаёт top/right */
	top: auto; right: auto; bottom: 24px; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	width: calc(100vw - 32px); max-width: 440px; pointer-events: none;
}
.DLEPush .DLEPush-notification.wrapper {
	pointer-events: auto; min-width: 0; max-width: 440px; width: 100%; margin: 0;
	animation: push-rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
	background: linear-gradient(150deg, #43157a 0%, #2a0a4d 100%); color: #fff;
	border: 1px solid rgba(190, 140, 245, 0.45); border-radius: 16px;
	box-shadow: 0 16px 38px rgba(20, 0, 40, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
	padding: 4px 4px 4px 0;
}
.DLEPush .DLEPush-notification .DLEPush-icon {
	width: 40px; height: 40px; margin: 12px 4px 12px 14px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.12); color: #fff;
}
.DLEPush .DLEPush-notification .DLEPush-icon svg {scale: 0.75;}
.DLEPush .DLEPush-notification .DLEPush-header {font-weight: 700; color: #fff; margin: 12px 36px 0 12px;}
.DLEPush .DLEPush-notification .DLEPush-message {font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.9); margin: 12px 36px 12px 12px;}
.DLEPush .DLEPush-notification .DLEPush-header:not(:empty) + .DLEPush-message {margin-top: 4px;}
.DLEPush .DLEPush-notification .DLEPush-close {color: #fff; top: 10px; right: 12px; opacity: 0.6;}
.DLEPush .DLEPush-notification .DLEPush-close:hover {opacity: 1;}
.DLEPush .DLEPush-notification.wrapper.push-success .DLEPush-icon {background: rgba(80, 220, 160, 0.2); color: #6ee7b0;}
.DLEPush .DLEPush-notification.wrapper.push-warning .DLEPush-icon {background: rgba(255, 183, 77, 0.2); color: #ffc470;}
.DLEPush .DLEPush-notification.wrapper.push-error   .DLEPush-icon {background: rgba(255, 107, 107, 0.2); color: #ff8f8f;}
.DLEPush .DLEPush-notification.wrapper.push-success {border-color: rgba(110, 231, 176, 0.45);}
.DLEPush .DLEPush-notification.wrapper.push-warning {border-color: rgba(255, 196, 112, 0.45);}
.DLEPush .DLEPush-notification.wrapper.push-error   {border-color: rgba(255, 143, 143, 0.5);}
.DLEPush .DLEPush-notification.wrapper.push-success, .DLEPush .DLEPush-notification.wrapper.push-warning, .DLEPush .DLEPush-notification.wrapper.push-error {
	background: linear-gradient(150deg, #43157a 0%, #2a0a4d 100%);
}
@media (prefers-reduced-motion: reduce) {
	.DLEPush .DLEPush-notification.wrapper {animation: none;}
}/* ===== AUTH MODAL =====
   [2026-10-01] Claude: окно авторизации (для гостей) приведено к стилю окна кабинета: фиолетовая шапка с белым заголовком, скругление 18px,
   вместо светлой серой рамки 10px — тонкая сиреневая; поля ввода светло-сиреневые со скруглением, при фокусе фиолетовая рамка; кнопка входа
   с градиентом сайта; затемнение страницы фиолетовое. Разметка (login.tpl) не менялась, всё через стили .login--not-logged. Откат: удалить блок. */
.overlay {background-color: #1e0037 !important; /* у .overlay уже есть opacity: 0.6, поэтому цвет сплошной */}
.login.login--not-logged {
	border: 1px solid rgba(190, 140, 245, 0.4); border-radius: 18px; background: #fff;
	box-shadow: 0 24px 60px rgba(40, 0, 70, 0.45);
}
.login--not-logged .login__header {
	padding: 22px 56px 20px 32px; border-bottom: 0; color: #fff;
	background: linear-gradient(150deg, #6a0dad 0%, #4d007e 100%);
}
.login--not-logged .login__title {color: #fff; font-size: 22px;}
.login--not-logged .login__caption {color: rgba(255, 255, 255, 0.78);}
.login--not-logged .login__close {color: #fff; right: 12px; top: 12px; width: 34px; height: 34px; font-size: 18px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.16); transition: background 0.15s ease;}
.login--not-logged .login__close:hover {background: rgba(255, 255, 255, 0.34); color: #fff;}
.login--not-logged .login__content {padding: 24px 32px 28px;}
.login--not-logged .login__row-caption {font-weight: 600; color: #3a0a63;}
.login--not-logged .login__row-caption a, .login--not-logged .login__caption a {color: #8a2be2; font-weight: 500;}
.login--not-logged .login__input input {
	background: #f6eefc; border: 1px solid #d9bff0; border-radius: 12px; color: #3a0a63; box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.login--not-logged .login__input input::placeholder {color: #9b7bbd; opacity: 1;}
.login--not-logged .login__input input:focus {background: #fff; border-color: #8a2be2; box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.18);}
.login--not-logged .login__row::before {color: #8a2be2;}
.login--not-logged .has-checkbox span {color: #3a0a63;}
.login--not-logged .login__row button[type="submit"] {
	height: 46px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
	background: linear-gradient(150deg, #8a24d6 0%, #4d007e 100%); box-shadow: 0 8px 18px rgba(77, 0, 126, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login--not-logged .login__row button[type="submit"]:hover {transform: translateY(-2px); box-shadow: 0 12px 24px rgba(77, 0, 126, 0.5);}
.login--not-logged .login__social-caption {color: #8a7a9c;}
@media (max-width: 600px) {
	.login--not-logged .login__header {padding-left: 20px;}
	.login--not-logged .login__content {padding: 20px;}
}.header__btn-login {padding: 0 10px;}
/* [2026-10-01] Claude: отступ слева уменьшен (было 30px) — кнопка сохранённых теперь стоит вплотную слева от аватарки */
.header__btn-fav {margin-left: 10px;}
/* [2026-10-01] Claude: минималистичная кнопка озвучки в стиле кнопки сохранённых (белая "таблетка"), вместо оранжевой.
   Пульсация оставлена (только масштаб, без смены цвета). Используется в login.tpl, скрипт — js/tts.js. */
.tts-btn {display: flex; align-items: center; justify-content: center; height: 24px; min-width: 34px; padding: 0 9px;
	background: #fff; border: 1px solid var(--bdc); border-radius: 77px; font-size: 12px; line-height: 1; cursor: pointer;
	user-select: none; animation: tts-pulse 1.5s infinite; transition: box-shadow 0.3s ease-in-out;}
.tts-btn:hover {box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);}
@keyframes tts-pulse {
	0%, 100% {transform: scale(1);}
	50% {transform: scale(1.12);}
}
.header__btn-fav:before {color: #fac51f; font-size: 15px;}
.header__btn-fav span:last-child {background: #fff; font-size: 12px; display: flex; align-items: center; height: 24px; 
	padding: 0 9px; border: 1px solid var(--bdc); border-radius: 77px; min-width: 34px;}

.search-block {width: 100%; position: relative; margin-bottom: 20px;}
.search-block__input, .search-block__input:focus {border-radius: 0; padding: 0 40px 0 13px; box-shadow: none;}
.search-block__input:not(:focus)::placeholder {color: var(--tt-fade); opacity: 1; font-size: 14px;}
.search-block__btn {position: absolute; right: 0; top: 0; width: 40px; border-radius: 0px; font-size: 16px;}

.header__menu {gap: 30px;}
.header__menu > li {position: relative;}
.header__menu > li > a {color: #fff; height: 80px; display: flex; align-items: center; justify-content: space-between; 
	font-weight: 600; font-size: 16px; gap: 10px;}
.header__menu-submenu {width: 240px; padding: 15px 30px; border-radius: 0 0 4px 4px; display: grid; gap: 10px; 
	position: absolute; left: -30px; top: 100%; background: var(--bg); box-shadow: 0 12px 12px rgba(0,0,0,0.27); 
	opacity: 0; visibility: hidden; transform: translateY(30px);}
.header__menu-submenu li + li {border-top: 1px dashed var(--bdc); padding-top: 10px;}
.header__menu-has-submenu > a::after {content:"\f107"; font-weight: 300; font-family:'Font Awesome 5 Pro';}


/* HERO
----------------------------------------------- */
.hero {background: #000 url(../images/hero-bg.jpg) center center / cover no-repeat; color: #fff; padding-bottom: 150px; 
	box-shadow: inset 0 500px rgba(124, 104, 173, 0.4), inset 0 60px 60px rgba(0,0,0,1);}
.hero__inner {padding: 50px var(--indent); display: grid; gap: 10px 30px; grid-template-columns: 1fr min-content;}
.hero__btn {grid-row: 1 / 3; grid-column: 2 / 3; align-self: center; 
	background-color: transparent; border: 1px solid rgba(255,255,255,0.4);}
.hero__title {font-weight: 600; font-size: 18px;}
.hero__caption {opacity: 0.8; font-size: 13px;}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 50px;}
.sect__header {margin-bottom: 30px;}
.sect__title {font-size: 24px; font-weight: 700;}

.speedbar {color: var(--tt-fade); font-size: 14px; margin-bottom: 15px;}

.sect__sort {height: 36px;}
.sect__sort ul {height: 36px; background-color: var(--bg-lighter);
	border-radius: 6px; position: relative; z-index: 50; cursor: pointer; text-align: center;}
.sect__sort ul li {height: 36px; line-height: 36px; visibility: hidden; padding: 0 10px; font-size: 13px;}
.sect__sort ul li[class], .sect__sort ul:hover li {visibility: visible;}
.sect__sort ul:hover {height: auto; box-shadow: var(--bsh);}
.sect__sort ul li[class]::before {content: 'Сортировать по:'; margin-right: 6px;}
.sect__sort li.asc a::after, .sect__sort li.desc a::after {content: "\f063"; font-family: "Font Awesome 5 Pro"; 
	display: inline-block; margin-left: 6px; font-weight: 300; font-size: 10px;}
.sect__sort li.desc a::after {content: "\f062"}
.descr {display: grid; grid-gap: 20px; line-height: 1.7; font-size: 14px; color: #5c5c5c; 
	padding-top: 40px; border-top: 1px dashed #ccc;}
.descr h1, .descr h2, .descr h3 {font-size: 18px; font-weight: 700; color: var(--tt); line-height: 1.3;}
.descr a {text-decoration: underline; color: var(--accent);}
.descr ul li {position: relative; padding-left: 25px; margin-left: 25px;}
.descr ul li::before {content:"\f00c"; font-weight: 300; font-family:'Font Awesome 5 Pro'; 
	color: var(--accent); position: absolute; left: 0; top: 0;}
.descr__section {padding-top: 15px; margin-bottom: -15px;}
.descr__section p, .descr__section h2, .descr__section h3 {margin-bottom: 15px;}
/* [2026-10-01] Claude: SEO-текст под статьями на главной оформлен карточкой в стиле остальных блоков (скругление, фиолетовая рамка,
   светлый фиолетовый фон) и сделан компактнее (меньше отступы, картинка 96px). Нижний край карточки выровнен по нижнему краю баннера Discord
   в сайдбаре: убраны нижние отступы у последнего абзаца и секции, поэтому оба блока заканчиваются на одной линии. Текст и разметка не менялись. */
.descr {padding: 18px 24px; margin: 0; border-radius: 16px; background: #faf5fe; border: 1px solid #e6d6f5; grid-gap: 8px; line-height: 1.55; box-sizing: border-box;}
.descr h1 {color: #3a0a63;}
.descr h2 {color: #3a0a63;}
.descr__section {margin-bottom: 0; padding-top: 4px;}
.descr__section p:last-child {margin-bottom: 0;}
.descr__section p, .descr__section h2 {margin-bottom: 8px;}
.descr__img {width: 80px; height: 80px; margin-right: 18px;}
/* Правка 2: SEO-карточка вровень с баннером Discord — та же высота (360px) и тот же верх/низ (обе стоят в одной строке сетки).
   Для этого текст ещё уплотнён: меньше отступы и межстрочный интервал, картинка 80px. Высота баннера и карточки задаётся общей переменной --side-banner-h. */
:root {--side-banner-h: 360px;}
.descr.order-last {min-height: var(--side-banner-h);}
.descr__img {width: 130px; height: 130px; border-radius: 50%; margin-right: 25px; float: left;
	box-shadow: 0 0 0 1px var(--bdc); border: 10px solid var(--bg); background-color: var(--bg-darker);}


/* SHORT STORY
----------------------------------------------- */
.short {padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--bdc); gap: 30px; position: relative;}
.short__img {width: 240px; height: 160px; display: block;}
.short__fav {position: absolute; left: 200px; top: -5px; z-index: 5;}
.short__fav .fas {width: 30px; height: 30px; position: relative; padding-top: 5px;
	background-color: #4e0080; color: #fff; font-size: 14px;}
.short__fav .fas::after {content: ''; position: absolute; left: 0; top: 100%; transform-origin: center top;
	border: 15px solid transparent; border-top-color: #4e0080; transform: scale(1,0.5);}
.short__fav .fas.short__fav-added {background-color: #bbff00; color: #000000;}
.short__fav .fas.short__fav-added::after {border-top-color: #bbff00;}
.short__fav a {transition: none;}
.short__meta {font-size: 13px; color: var(--tt-fade); margin-bottom: 8px; gap: 8px;}
.short__title {font-size: 19px; font-weight: 400; margin-bottom: 15px;}
.short__title a {color: var(--tt-colored);}
.short__text {-webkit-line-clamp: 3; color: #5c5c5c; line-height: 1.5;}

/* Для читайте также в фулстори 
----------------------------------------------------------*/
.related-news-block {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.related-news-block__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #3f0067;
    text-align: left;
    position: relative;
}

.related-news-block__title span {
    background-color: #f9f9f9;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.related-news-block__title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background-color: #ddd;
    z-index: 0;
}

.related-news-block__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.popular-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    width: 100%;
}

.popular-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.popular-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

.popular-card__img-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.popular-card:hover .popular-card__img-element {
    transform: scale(1.05);
}

.popular-card__content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popular-card__category {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.popular-card__title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .related-news-block__content {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    .related-news-block__content {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}
/* SIDEBAR ----------------------------------------------- */
.side-block:not(:last-child) {margin-bottom: 50px;}
.side-block__title {font-size: 19px; font-weight: 600; 
	margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--bdc);}
.side-block__title a {font-size: 13px; text-decoration: underline; position: relative; padding-right: 15px; font-weight: 400;}
.side-block__title a::before {position: absolute; right: 0; top: 3px; font-size: 15px;}
.side-block__grid {display: grid; gap: 20px; grid-template-columns: repeat(auto-fill,minmax(240px,1fr));}
.popular {gap: 15px; border-bottom: 1px solid var(--bdc); padding-bottom: 20px;}
.popular__img {width: 60px; height: 60px; border-radius: 50%;}
.popular__category {font-size: 13px; color: var(--tt-fade); margin-bottom: 5px;}
.cols__side .popular__title {-webkit-line-clamp: 3;}

.lcomm {border-bottom: 1px solid var(--bdc); padding-bottom: 20px;}
.lcomm__title {font-weight: 400;}
.lcomm__meta {font-size: 13px; color: var(--tt-fade); gap: 10px; margin: 5px 0;}
.lcomm__text {font-size: 14px; -webkit-line-clamp: 5; color: #5c5c5c;}

.nav-holder {margin-top: -50px; padding-top: 50px; background-color: var(--bg-darker);}
.nav-holder__title {font-size: 19px; font-weight: 600; margin-bottom: 20px;}
.nav-holder__caption {font-size: 16px; display: block;}
.nav-holder__caption:not(:last-child) {border-bottom: 1px solid var(--bdc); margin-bottom: 15px;
	margin-left: -30px; margin-right: -30px; padding: 15px 30px; padding-top: 0;}
.nav-holder__list {font-size: 13px; display: grid; gap: 8px; color: var(--tt-fade);}
.nav-holder__list a {opacity: 0.7; font-size: 14px; margin-right: 5px;} 
.nav-holder__list + .nav-holder__caption {margin-top: 20px;}

.place-holder {height: 280px; padding: 30px; padding-bottom: 100px; position: relative; background: var(--bg-darker);}
.place-holder__btn {position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 1;}
.rkl-holder {background: #000 url(../images/hero-bg.jpg) center center / cover no-repeat; color: #fff; 
	overflow: hidden; box-shadow: inset 0 500px rgba(124, 104, 173, 0.4), inset 0 60px 60px rgba(0,0,0,1);}
/* [2026-10-01] Claude: баннер Discord в сайдбаре вытянут по вертикали (было 280px, стало 360px), а кнопка "Вступить в сообщество"
   получила вращающуюся светящуюся рамку (как у админских элементов, см. блок ADMIN GLOW BORDER: тот же @property --ab-angle и ab-spin).
   Для всех посетителей. Для людей с "уменьшить анимацию" рамка не вращается. */
.rkl-holder {height: var(--side-banner-h, 360px); padding-bottom: 110px;}
/* [2026-10-01] Claude: баннер Discord скруглён тем же радиусом (16px), что и карточка SEO-текста рядом и остальные новые карточки. overflow:hidden обрезает фон и свечение по скруглению. */
.rkl-holder {border-radius: 16px; overflow: hidden;}
.rkl-holder .place-holder__btn {border-radius: 12px; filter: drop-shadow(0 0 6px rgba(176, 122, 224, 0.7));}
.rkl-holder .place-holder__btn::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
	background: conic-gradient(from var(--ab-angle), rgba(176, 122, 224, 0) 0%, rgba(176, 122, 224, 0) 40%, #b07ae0 65%, #ffffff 80%, #e3c4ff 90%, rgba(176, 122, 224, 0) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: ab-spin 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.rkl-holder .place-holder__btn::before {animation: none;}
}.rkl-holder__title {font-weight: 600; font-size: 24px; line-height: 1.2; margin-bottom: 10px;}
.rkl-holder__caption {opacity: 0.8; font-size: 13px; line-height: 1.6;}
.rkl-holder::after {content: ''; width: 500px; height: 500px; position: absolute; right: -200px; bottom: -250px;
	background: radial-gradient(circle closest-side at center, #ffc300 0%, transparent 100%); 
	mix-blend-mode: overlay; opacity: 0.6;}
.vk-holder {background: radial-gradient(circle farthest-side at 50% 30%, #fff 0%, #fff 10%, #e9edf8 60%);}
.vk-holder .place-holder__btn {background-color: #587ba1; height: 32px; font-size: 13px;}
.vk-holder__title {color: #435d79; text-align: center; font-size: 13px;}
.vk-holder::before {width: 50px; height: 50px; border-radius: 50%; content: ''; display: block;
	margin: 15px auto 15px auto; background: url(../images/social/vk.svg) 0 0 / 50px no-repeat;}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__menu {gap: 15px 30px;}
.footer__menu a {font-weight: 400; font-size: 16px; color: #fff;}
.footer__text {border-top: 1px solid rgba(255,255,255,0.13); margin-top: 30px; padding-top: 15px; 
	font-size: 13px; color: rgba(255,255,255,0.5);}
.footer__copyright {margin-top: 11px; color: rgba(255,255,255,0.66);}
.footer__copyright span {color: #fff;}
.footer__logo {filter: grayscale(1); min-width: 280px; margin-top: -32px;}
.footer__counter {margin-top: 30px;}
.footer__socials {
	gap: 6px;
	margin-top: 5px;
  }
  
  .footer__socials a, .footer__socials a img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: block;
	transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .footer__socials a:hover img {
	transform: scale(1.1);
	filter: brightness(1.2);
  }
  

.pagination {gap: 30px 60px;}
.pagination a, .pagination span, .pagination__btn {display: grid; place-items: center; height: 36px;}
.pagination__btn-loader {width: 100%;}
.pagination__btn-loader a, .pagination__btn-loader span {height: 40px; border-radius: 4px; 
	background-color: var(--bg-darker); color: var(--tt-fade); width: 100%;}
.pagination__pages {gap: 10px 20px; font-size: 18px;}
.pagination__pages span:not(.nav_ext) {background-color: var(--accent); color: #fff; padding: 0 15px; border-radius: 7px;}
.pagination__btn {width: 36px; background-color: var(--bg-darker-2); color: var(--tt-fade-2);}


/* INNER PAGE
----------------------------------------------- */
.page__title {font-size: 25px;line-height: 1.2; margin-bottom: 10px; margin-top: 30px;background: #530085; border-radius: 10px; padding: 20px; color: white;}
.page__meta {color: var(--tt-fade); font-size: 13px; gap: 15px 20px; margin-bottom: 40px;}
.page__meta .short__fav {position: relative; left: 0; top: 0;}
.page__meta .short__fav a {display: flex; align-items: center; gap: 5px; color: var(--tt-fade);}
.page__meta .short__fav .fas {transform: scale(0.8,0.8); transform-origin: left center;}
.page__text {margin-bottom: 30px;}

.page__intro {line-height: 1.5; margin: 0 0 30px 0; padding: 15px 20px 15px 100px; 
	position: relative; background-color: #f2f5fc; color: #2d4550;}
.page__intro::before {content:"\f05a"; font-family:'Font Awesome 5 Pro'; font-weight: 300; 
	position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #8babda; font-size: 40px;}
.page__img {padding-top: 46%; margin-bottom: 40px;}
.page__img-caption {font-size: 13px; position: absolute; left: 15px; bottom: 15px; z-index: 10; 
	color: #fff; opacity: 0.9; width: 46%;}

/*--------------------------------------------------------------------------------------*/
.page__prev-next-wrapper {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
}

.page__prev-next-card {
    flex: 1 1 50%; /* Карточки делят контейнер поровну */
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 0; /* Важно для равного распределения */
}

.page__prev-next-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.page__prev-next-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #3f0067;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.page__prev-card .page__prev-next-icon {
    margin-right: 15px;
}

.page__next-card .page__prev-next-icon {
    margin-left: 15px;
}

.page__prev-next-content {
    flex-grow: 1;
    min-width: 0; /* Важно для текстового блока */
}

.page__prev-next-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.line-clamp {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

/* Адаптивность */
@media (max-width: 768px) {
    .page__prev-next-wrapper {
        flex-wrap: wrap; /* Разрешаем перенос на новую строку */
    }

    .page__prev-next-card {
        flex-basis: 100%; /* Карточки занимают всю ширину на маленьких экранах */
        margin-bottom: 10px; /* Добавляем отступ между карточками */
    }
}


/*--------------------------------------------------------------------------------------*/

.page__tags {margin-bottom: 30px; gap: 10px;}
.page__tags a {display: flex; align-items: center; white-space: nowrap; height: 30px; border-radius: 2px; 
	padding: 0 10px; font-size: 12px; text-transform: uppercase; color: var(--tt-fade); border: 1px solid var(--bdc);}

.page__info {border-bottom: 1px solid var(--bdc); padding-bottom: 20px; margin-bottom: 20px;}
.page__author {display: block; position: relative; padding-left: 50px;}
.page__author-caption {color: var(--tt-fade); font-size: 13px; margin-bottom: 3px;}
.page__author::before, .page__author img {position: absolute; left: 0; top: 50%; transform: translateY(-50%); 
	color: var(--accent); font-size: 40px;}
.page__author img {width: 40px; height: 40px; border-radius: 50%; object-fit: cover;}
.page__rating {gap: 30px;}
.page__rating > * {display: flex; align-items: center; gap: 10px;}
.page__rating > * .fal {font-size: 18px; height: 40px; width: 40px; border-radius: 50%; 
	border: 2px solid var(--ui-green); color: var(--ui-green);}
.page__rating > *:last-child .fal {border: 2px solid var(--ui-red); color: var(--ui-red); }
/*-----------------------------------Читайте в соц сетях ----------------------------------------------*/
.readinsocialnetwork {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ya-dzen {
    flex: 1 1 calc(25% - 10px);
    box-sizing: border-box;
    margin-bottom: 30px;
    border-radius: 10px;
    padding: 18px 30px;
    position: relative;
    transition: transform 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border: 1px;
}
.ya-dzen:hover {
    transform: scale(1.05);
}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.full-text {line-height: 1.6; font-size: 17px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: #5278b1;}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, 
.full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative;}
.full-text > ul li:before {content: ''; width: 8px; height: 8px; border-radius: 50%; 
	border: 3px solid #3f1479; position: absolute; top: 6px; left: 34px;}
.full-text > ol {counter-reset: num;}
.full-text > ol li:before {content: counter(num); counter-increment: num; background-color: #3f1479; color: #fff; 
	position: absolute; top: -3px; left: 17px; width: 24px; height: 30px; font-size: 14px; font-weight: 600;
	display: flex; justify-content: flex-end; align-items: center; padding-right: 6px; box-sizing: border-box;}
.full-text > ol li:after {content: ''; border: 10px solid transparent; border-left-color: #3f1479; 
	position: absolute; left: 41px; top: -3px; transform: scale(0.66,1.5); transform-origin: 0 0;}
.full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;}
.full-text table, .video-inside > * {width:100%;}
.full-text table tr td {padding:10px; border:2px solid #fff;}
.full-text table tr:nth-child(2n+1) {background-color:#f2f6f9;} 
.full-text table tr:nth-child(1) {background-color:#cee0ed;}
.full-text table img:not(.emoji) {margin:0; max-width:350px}
.full-text > *:last-child {margin-bottom: 0;}
.video-responsive {padding-top: 60%; position: relative;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 21px; margin-bottom: 20px;}
.full-text iframe {width: 100%; height: 400px; margin-bottom: 20px;}
.fdl-btn {display: block; position: relative; box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
	text-decoration: none !important; padding: 15px 15px 15px 130px;
	background: linear-gradient(to top, #27ae60, #2ecc71); color: #fff !important; overflow: hidden;}
.fdl-btn-title {font-weight: 600; text-transform: uppercase; word-wrap: break-word;}
.fdl-btn-size {font-size: 14px; margin-top: -2px; margin-bottom: 6px; opacity: 0.9;}
.fdl-btn-caption {opacity: 0.7; font-size: 14px;}
.fdl-btn-dl {font-size: 12px; text-transform: uppercase; margin-left: 15px;}
.fdl-btn > * {position: relative; z-index: 3;}
.fdl-btn-icon {width: 50px; height: 50px; border-radius: 50%; margin-top: -25px; font-size: 24px;
	position: absolute; left: 40px; top: 50%; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 15px rgba(0,0,0,0.13), 0 0 0 30px rgba(0,0,0,0.08), 0 0 0 45px rgba(0,0,0,0.04);}


/* COMMENTS
----------------------------------------------- */
.page__comments {margin-top: 0px;}
.page__comments-title {font-size: 24px;}
.page__comments-info {color: var(--tt-fade); display: block; margin: 5px 0 20px;}
.page__comments-info::before {color: var(--ui-red); margin-right: 10px;}
.ac-form {margin-bottom: 20px;}
.ac-form__header, .ac-form__editor, .ac-form .message-info {gap: 10px; margin-bottom: 10px;}
.ac-form__btn {padding: 0 60px;}
.ac-form__bottom {gap: 25px;}
.confidential-check {font-size: 14px;}
.ac-form__header > span {margin-left: 15px;}
.ac-form .comments_subscribe {margin-top: 0px;}

.ac-form__editor .bb-editor textarea, .ac-form__editor .fr-wrapper {height: 100px !important;}
.ac-form__editor .fr-view {min-height: 80px !important;}
.ac-form .tox-tinymce {height: 160px !important;}
.comments_subscribe + br, .ac-form .bb-editor + br {display: none;}

.mass_comments_action {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.mass_comments_action select {flex: 1 1 0; margin: 0 -28px 0 0; border-radius: 0; box-shadow: none; min-width: 60%;}
.mass_comments_action .bbcodes {border-radius: 0; padding: 0 10px;}

.comm__title {font-size: 18px; margin-bottom: 20px;}

.comm {margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--bdc);}
.comm__img {width: 40px; height: 40px; border-radius: 50%; margin-right: 15px;}
.comm__img::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--ui-red); 
	position: absolute; right: -1px; top: -1px; z-index: 5; border: 2px solid var(--bg);}
.comm--online .comm__img::before {background-color: var(--ui-green);}
.comm__letter {width: 100%; height: 100%; text-transform: uppercase; border-radius: inherit;
	position: absolute; left: 0; top: 0; color: #fff; font-size: 18px; font-weight: var(--ui-fw-bolder);}
.comm__author, .comm__author a {color: var(--tt-colored); font-weight: 600; font-size: 14px;}
.comm__date {color: var(--tt-fade); font-size: 13px; margin-top: 2px;}
.comm__main {margin: 10px 0 6px 0;}
.comm__action {gap: 20px; font-size: 13px;}
.comm__action li, .comm__action li a {color: var(--tt-fade); cursor: pointer; gap: 8px;}
.comm__ctrl, .comm__ctrl a {font-size: 15px; gap: 10px 15px; color: var(--tt-fade);}
.comm__ctrl li.has-checkbox {transform: scale(0.8,0.8); margin: 0 -10px 0 -5px;}
.comm__ctrl li.has-checkbox input {border-color: var(--tt-fade);}
.comm__rating {gap: 10px; font-size: 14px;}
.comm__rating::before {content: attr(data-text); display: inline;}
.comm__rating > * {display: flex; gap: 5px;}
.comm__rating > * > span:first-child {text-decoration: underline; color: var(--ui-green);}
.comm__rating > * + * > span:first-child {color: var(--ui-red);}


/* LOGIN
----------------------------------------------- */
.login {border-radius:15px; position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow-y: auto;
	background-color: var(--ui-bg); width: 440px; border: 10px solid var(--ui-bg-darker); display: none;
	box-shadow: 0 15px 45px rgba(0,0,0,1); max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);}
.login__header {padding: 20px 50px 25px 50px; border-bottom: 1px solid var(--ui-bdc); position: relative;}
.login__title {font-size: 24px; font-weight: var(--ui-fw-bolder);}
.login__caption {font-size: 13px; color: var(--ui-tt-fade); margin-top: 3px;}
.login__close {font-size: 23px; position: absolute; right: 10px; top: 10px; padding: 0; width: 40px; height: 40px;}
.login__content {display: grid; gap: 20px; padding: 25px 50px; padding-bottom: 30px; position: relative;}
.login__row, .login__row.fal, .login__row.fas {position: relative; display: grid; gap: 10px; justify-content: stretch;}
.login__row-caption a, .login__caption a {margin-left: 10px;}
.login__row::before {position: absolute; left: 2px; bottom: 0; width: 40px; height: 50px; 
	display: grid; place-items: center; opacity: 0.4; font-size: 18px;}
.login__input input {padding-left: 40px; border-radius: 4px; height: 50px; line-height: 48px;}
.login__row button {width: 100%; height: 40px; border-radius: 4px;}
.login__social {padding-top: 10px; text-align: center; gap: 10px;}
.login__social-caption {font-size: 13px; color: var(--ui-tt-fade); width: 100%;}
.login__social a, .login__social img {display: block; width: 34px; height: 34px;}
.login--logged .login__header {padding-left: 115px;}
.login__avatar {width: 50px; height: 50px; position: absolute; left: 50px; top: 25px;}
.login__menu a {border-bottom: 1px solid var(--ui-bdc); padding: 10px 0; width: 100%; justify-content: flex-start;}
.login__menu li:last-child a {border: 0;}
.login__menu a::before {width: 20px; font-size: 18px; text-align: center; color: var(--ui-accent); margin-right: 10px;}



/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	opacity: 0.6; background-color: #000; cursor: pointer; display: none;}
.mobile-menu {width: 360px; height: 100%; overflow-x: hidden; overflow-y: auto;
	z-index: 999; position: fixed; left: -360px; top: 0; transition: left 0.4s; 
	background-color: var(--bg); visibility: hidden;}
.mobile-menu.is-active {left: 0; visibility: visible;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}
@media screen and (max-width: 590px) { .mobile-menu {left: -100vw; width: 100vw; height: 100vh;} }
.mobile-menu__header {background: url(https://glukam.net/templates/V2/images/bgpurp.png); padding: 0 20px; gap: 10px;}
.mobile-menu__search {background-color: var(--ui-bg-darker); padding: 10px 20px;}
.mobile-menu__search .search-block {margin: 0;}
.mobile-menu__header .logo {height: 60px; line-height: 60px; min-width: 100px; margin: 0; }
.mobile-menu__btn-close {font-size: 24px; width: 40px; height: 40px; margin-right: -10px; color: #fff;}
.mobile-menu__content .header__menu {margin: 0; padding: 20px 20px 0 20px;; display: block;}
.mobile-menu__content .header__menu > li > a {height: 40px; line-height: 40px; }
.mobile-menu__content .header__menu-submenu {width: 100%; height: auto; position: static; display: none;
	border-radius: 0; padding: 5px 0 5px 20px; opacity: 1; visibility: visible; transform: none; box-shadow: none;}
.mobile-menu__content .header__menu-has-submenu > a::after {content:"\f067"; font-size: 18px;}
.mobile-menu__content .header__menu-has-submenu.is-active .header__menu-submenu {display: grid;}
.mobile-menu__content .header__menu-has-submenu.is-active > a::after {content:"\f068";}
.mobile-menu__content .nav-holder {padding: 1px 20px 20px 20px; margin: 0;}
.logo {font-size: 21px;}

@media screen and (max-width: 1220px) {
	:root {--indent-negative: -20px; --indent: 20px;}
	body {background-image: none;}
	.wrapper {padding: 0; background-image: none; overflow: hidden;}
	.wrapper-container {max-width:1000px;}
	.header .header__menu, .cols__side .nav-holder {display: none;}
	.header__btn-mobmenu {display: flex; font-size: 28px; margin-left: 30px; color: #fff;}
	.header__logo {flex: 1 1 0; min-width: 120px; max-width: 100%; 
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.content {padding-top: 30px;}
	.cols {display: block;}
	.cols__side, .footer__right {margin-top: 30px;}
	.footer__inner {display: block; text-align: center;}
	.footer__logo {min-width: auto; display: inline-block;}
	.footer__socials, .footer__menu {justify-content: center;}
	.header {margin-top: 0px;}
	.content{margin-top: 80px;}
	.header__logo {color: rgb(48, 0, 70);}
	#particles {
	display: none; /* Скрывает частицы на устройствах с шириной экрана 1220px и меньше */
	}
    
    .header__menu > li > a {
        font: 15px / 1.4 'Manrope', sans-serif;
        display: block;
        color: white;
        text-decoration: none;
        background: rgb(90,3,145);
        background: -moz-linear-gradient(220deg, rgba(90,3,145,1) 0%, rgba(101,0,164,1) 50%, rgba(77,0,126,1) 100%);
        background: -webkit-linear-gradient(220deg, rgba(90,3,145,1) 0%, rgba(101,0,164,1) 50%, rgba(77,0,126,1) 100%);
        background: linear-gradient(220deg, rgba(90,3,145,1) 0%, rgba(101,0,164,1) 50%, rgba(77,0,126,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5a0391",endColorstr="#4d007e",GradientType=1);
        position: relative;
        border-top: 1px solid #330246;
        padding-left: 15px;
        
    }
    
    .header__menu > li > a:hover {
        background: rgb(60,3,97);
        background: -moz-linear-gradient(86deg, rgb(97, 95, 3) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
        background: -webkit-linear-gradient(86deg, rgba(60,3,97,1) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
        background: linear-gradient(86deg, rgba(60,3,97,1) 0%, rgba(116,12,181,1) 50%, rgba(124,8,181,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c0361",endColorstr="#7c08b5",GradientType=1);
        padding-left: 15px;
    }
}

@media screen and (max-width: 950px) {
	.wrapper-container {max-width:768px;}
	.short {gap: 20px;}
}

@media screen and (max-width: 760px) {
	.wrapper-container {max-width:640px;}
	.hero__inner {grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 30px;}
	.hero__btn {grid-column: span 1; grid-row: span 1; margin-top: 5px; justify-self: start;}
	.short__img {width: 160px;}
	.short__fav {left: 120px;}
	.pagination > a, .pagination > span {display: none;}
	.pagination__pages {width: 100%;}

	.page__title {font-size: 24px;}
	.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 20px;}
	.page__intro, .page__text .quote {margin-left: var(--indent-negative); margin-right: var(--indent-negative); padding-right: var(--indent);}
	.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 18px;}
	
	.ac-form__bottom {gap: 10px;}
	.ac-form__bottom button {padding: 0 20px;}
	.ac-form__header input + input {min-width: 100%; order: 10;}
	.ac-form__header > span, .comm__rating::before {display: none;}
}

@media screen and (max-width: 590px) {
	.wrapper-container {max-width:480px;}
	.header__btn-fav, .header__btn-login::before, .descr__img {display: none;}
	.header__btn-mobmenu {margin-left: 10px; margin-right: -10px;}
	.header__btn-login1 {width: 40px; padding: 0;}
	.short__img {width: 100%; height: 180px;}
	.short__fav {left: 20px;}
}

@media screen and (max-width: 470px) {
	.wrapper-container123 {max-width:360px;}
	.login__header, .login__content {padding-left: 20px; padding-right: 20px;}
	.login--logged .login__header {padding-left: 85px;}
	.login__avatar {left: 20px;}
	.login__title span {display: none;}
	.login__input input, .login__row::before {height: 40px; line-height: 38px;}
	.login__menu {margin: -15px 0;}
	.hero__title {font-size: 19px;}
	
	.page__meta, .page__rating {gap: 10px 20px; font-size: 13px;}
	.page__rating .fal {width: 30px; height: 30px; font-size: 14px; border-width: 1px;}
	.page__meta-item:first-child, .page__intro::before {display: none;}
	.page__intro {padding-left: 20px;}
	.page__intro + .page__img {margin-top: -30px; margin-left: -20px; margin-right: -20px;}
	.full-text {font-size: 15px;}
	.ac-form__bottom .comments_subscribe {font-size: 13px;}
	.full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px; margin-right: -20px;}
}