/* custom.css */

/*
 * Пагинация (CLinkPager).
 *
 * В макете компонента пагинации нет вовсе, а списки новостей, галереи, тикетов и историй
 * кабинета постраничные. Стили собраны на токенах темы из main.css, чтобы пагинация
 * не выпадала из оформления. Правки — здесь, main.css не трогаем.
 */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

/*
 * CLinkPager вешает на кнопки страниц класс page (internalPageCssClass по умолчанию),
 * а в этой вёрстке .page — корневая обёртка всей страницы (min-height:100vh; width:100%).
 * Без сброса каждая кнопка страницы разворачивалась в блок 1024x900.
 */
.pager li,
.pager li.page {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    flex-grow: 0;
    flex-direction: row;
    padding: 0;
    margin: 0;
    transition: none;
}

.pager li a,
.pager li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.625rem;
    border: var(--box-border);
    border-radius: var(--box-border-radius);
    background-color: var(--box-background-color);
    color: var(--color-grey-rgb);
    font-family: var(--font-2);
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pager li a:hover {
    border-color: var(--color-accent-rgb);
    color: var(--color-white-rgb);
}

/*
 * Имена классов заданы в protected/config/main.php (CLinkPager):
 * selectedPageCssClass = active, hiddenPageCssClass = disabled.
 * Дефолтные selected/hidden здесь не подходят — они никогда не совпадут.
 */
.pager li.active a,
.pager li.active span {
    border-color: var(--color-accent-rgb);
    color: var(--color-light-rgb);
}

.pager li.disabled a,
.pager li.disabled span {
    opacity: 0.4;
    pointer-events: none;
}

/*
 * Широкие таблицы.
 *
 * .page__content — это grid с колонкой 1fr, то есть minmax(auto, 1fr): дорожка
 * разрастается под самый широкий контент. Из-за этого таблица статистики (900px+)
 * растягивала колонку за пределы окна, а .tblbox с его overflow-x:auto ехал вместе
 * с ней и прокрутка не появлялась — на мобильном часть колонок была недоступна.
 */
.page__content {
    grid-template-columns: minmax(0, 1fr);
}

.tblbox {
    max-width: 100%;
}

/*
 * Правый отступ контента.
 *
 * На десктопе .page даёт padding-left:3vw, а справа отступа нет, и .page__content
 * упирается в край окна. Поверх правого края висит фиксированная панель соцсетей
 * (.scl_type_desk: right:2rem, width:3.6875rem), поэтому последняя колонка таблиц
 * статистики и правый столбец галереи оказывались под иконками.
 * На главной этого отступа быть не должно — там герой и слайдер намеренно уходят под край.
 */
@media (min-width: 1200px) {
    .body-other .page__content > *:not(.panel) {
        padding-right: 6.6875rem;
    }
}

/*
 * Список новостей на /news.
 *
 * В макете карточки post существуют только внутри свайпера на главной — это тизеры
 * с обрезкой заголовка в две строки и описания в четыре. Для самой страницы новостей
 * нужен список: миниатюра, полный заголовок и описание целиком.
 * Оформление карточки — те же токены, что у строки товара в витрине (.product).
 */

.newslist {
    display: grid;
    gap: 1.25rem;
}

.newslist__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5625rem;
    align-items: start;
    padding: 1.25rem;
    border-radius: 0.625rem;
    background-color: rgba(24, 30, 40, 0.5);
    box-sizing: border-box;
}

/* Новость без картинки — текст занимает всю ширину, пустого места под миниатюру нет. */
.newslist__item_nopic {
    grid-template-columns: 1fr;
}

.newslist__pic {
    display: block;
    width: 15rem;
    height: 9.375rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #0b0e14;
}

.newslist__img {
    display: block;
    /* На 1px больше контейнера со всех сторон. Скруглённый overflow:hidden клип режет
     * тогда по «телу» картинки, а не по её анти-алиасной кромке — иначе по верхней и
     * нижней границе оставалась светлая волосяная линия (при наведении она пропадала,
     * потому что scale(1.06) выводил кромку за клип). Зума при этом не видно. */
    width: calc(100% + 2px);
    max-width: none;   /* иначе img{max-width:100%} из main.css срежет перехлёст по бокам */
    height: calc(100% + 2px);
    margin: -1px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.newslist__pic:hover .newslist__img {
    transform: scale(1.06);
}

.newslist__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-1);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: #d3ddf3;
    font-feature-settings: "lnum";
    font-variant-numeric: lining-nums;
}

.newslist__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.newslist__title a:hover {
    color: #7697d4;
}

.newslist__desc {
    margin-bottom: 0.9375rem;
    font-family: var(--font-2);
    font-size: 1rem;
    line-height: 1.5;
    color: #b5b5b4;
}

.newslist__desc p {
    margin: 0 0 0.625rem;
}

.newslist__desc p:last-child {
    margin-bottom: 0;
}

/* В карточке на главной .post__btns центрирует ссылку; в списке она должна стоять по левому
   краю текста, как дата и заголовок. */
.newslist .post__btns {
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .newslist__item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .newslist__pic {
        width: 100%;
        height: 12rem;
    }
}

/*
 * Галерея. Отдельного компонента в макете нет; плитка собрана на тех же токенах,
 * просмотр — встроенным fancybox (v3), он уже подключён в layout.
 */

.gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-list__link {
    display: block;
    overflow: hidden;
    border: var(--box-border);
    border-radius: var(--box-border-radius);
    background-color: var(--box-background-color);
}

.gallery-list__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-list__link:hover img {
    transform: scale(1.05);
}

/*
 * Чекбоксы: делаем инпут доступным, оставляя его невидимым.
 *
 * В main.css у .checkbox__input стоит display:none. Такой элемент нельзя сфокусировать,
 * поэтому браузер отказывается показывать подсказку встроенной валидации и просто молча
 * не отправляет форму (Chrome пишет в консоль «An invalid form control ... is not focusable»).
 * На регистрации из-за этого форма с непоставленной галочкой согласия выглядела бы сломанной.
 *
 * Заодно чекбоксы становятся доступны с клавиатуры — при display:none до них нельзя было
 * добраться табом. Соседний селектор .checkbox__input:checked + .checkbox__block продолжает
 * работать: элемент остаётся в потоке разметки, просто не виден.
 */

.checkbox__input {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Обводка по фокусу с клавиатуры — иначе непонятно, где находишься. */
.checkbox__input:focus-visible + .checkbox__block {
    outline: 2px solid var(--color-accent-rgb);
    outline-offset: 2px;
}

/*
 * Картинка внутри карточки новости (/news/<id>).
 *
 * В макете .post__pic — абсолютная подложка карточки на главной, вне .post она
 * растягивается на весь .page__container. Здесь нужна обычная картинка в потоке.
 */
.newsdetail__pic {
    margin: 0 0 1.25rem;
    border-radius: var(--box-border-radius);
    overflow: hidden;
}

.newsdetail__img {
    display: block;
    /* На 1px больше контейнера со всех сторон — против светлого шва по кромке
     * (скруглённый overflow:hidden клип режет по телу картинки). При height:auto
     * отрицательные поля дают тот же перехлёст сверху и снизу. */
    width: calc(100% + 2px);
    height: auto;
    max-height: 25rem;
    margin: -1px;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Картинка новости лежит в .content__box, где действует .content__box img{max-width:100%}
 * (специфичнее одного класса) — из-за него перехлёст по бокам срезался. Поднимаем
 * специфичность, чтобы calc(100% + 2px) действительно давал +1px слева и справа. */
.content__box .newsdetail__img {
    max-width: none;
}

/*
 * Атрибут hidden.
 *
 * В main.css сброс `[hidden],template{display:none}` стоит в самом начале, а ниже идут
 * компоненты со своим display (например `.informer{display:flex}`) — при равной
 * специфичности выигрывает то, что ниже, и hidden перестаёт работать. На витрине из-за
 * этого оба блока informer («баланс пополнен» и «что-то пошло не так») висели постоянно,
 * хотя должны показываться скриптом по хэшу в адресе.
 */
[hidden] {
    display: none !important;
}

/*
 * Многострочные поля свободного текста.
 *
 * В теме у textarea min-height 4.625rem — это одна строка. В макете textarea есть только
 * на «Привязать IP», где короткое поле уместно (список адресов). Для обращения в поддержку
 * и ответа в тикете поле в одну строку неудобно, поэтому даём высоту в несколько строк.
 * Оформление поля (рамка, фон, шрифт) остаётся штатным — меняется только высота.
 */
.field__input.input_multiline {
    min-height: 9.25rem;
    resize: vertical;
}

/*
 * Два блока кнопок подряд.
 *
 * На просмотре тикета «Ответить» лежит внутри формы, а «К списку тикетов» — отдельным
 * блоком сразу за ней. У .form__btns есть внутренний gap, но между двумя блоками отступа
 * нет, и кнопки слипались.
 */
.form + .form__btns,
.form__btns + .form__btns {
    margin-top: 0.625rem;
}

/*
 * Строка-разделитель в таблицах статистики.
 *
 * В stats/total.php секции («Разное», «Расы», «Рейты») размечены как <tr class="divider">,
 * но такого класса нет ни в макете, ни в main.css: строки красились обычной зеброй
 * tr:nth-child(odd), и через одну секция выглядела как обычная строка данных.
 * Оформляем их как заголовок таблицы — теми же цветом и шрифтом, что и .table th.
 */
.tblbox tr.divider td {
    background-color: #1e2b46;
    color: var(--color-white-rgb);
    font-family: var(--font-1);
    text-transform: uppercase;
    border-radius: 0.625rem;
}

/*
 * Вертикальные отступы между блоками на страницах без панели кабинета.
 *
 * В кабинете расстояния задаёт .panel__contentbox своим padding, а статистика, галерея
 * и список новостей кладутся прямо в .page__content — это грид без row-gap, и блоки
 * (заголовок, вкладки серверов, вкладки разделов, таблица) стояли впритык: полоса под
 * вкладками упиралась в первую строку таблицы.
 * На главной отступ не нужен — там герой и слайдер стыкуются намеренно.
 */
.body-other .page__content {
    row-gap: 1.25rem;
}

/*
 * Замок в таблице статистики: миниатюра + название.
 *
 * Раскладка та же, что у предмета в бонусах (.item / .item__pic): картинка в рамке
 * фиксированного размера, подпись под ней.
 */
.castle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.castle__pic {
    width: 6.25rem;
    height: 4.375rem;
    border-radius: 0.3125rem;
    overflow: hidden;
    background-color: #4c515b;
    flex-shrink: 0;
}

.castle__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.castle__name {
    font-family: var(--font-1);
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * Автозаполнение Chrome.
 *
 * У инпутов в теме `background: transparent` — тёмный фон рисует обёртка
 * `.field` (#080a0b). Когда браузер подставляет сохранённые логин/пароль/почту, он красит
 * сам инпут своим `#e8f0fe` и делает текст чёрным, и внутри тёмной рамки появляется
 * светло-голубой прямоугольник. Правил под `:-webkit-autofill` нет ни в теме, ни в макете.
 *
 * Убрать фон напрямую нельзя — браузер его игнорирует; штатный приём это залить поле
 * внутренней тенью того же цвета, что у `.field`, и задать `-webkit-text-fill-color`.
 * `border-radius: inherit` нужен, чтобы заливка не срезала скругление справа: инпут
 * доходит до самого края обёртки.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #a2a5ab;
    -webkit-text-fill-color: var(--input-color);
    caret-color: #a2a5ab;
    caret-color: var(--input-color);
    -webkit-box-shadow: 0 0 0 62.5rem #080a0b inset;
    box-shadow: 0 0 0 62.5rem #080a0b inset;
    border-radius: inherit;
    /* Chrome анимирует фон после подстановки — длинная задержка не даёт ему проявиться. */
    transition: background-color 100000s ease-in-out 0s;
}

/*
 * Типографика содержимого страниц.
 *
 * .content__box — это то, что администратор пишет в админке (правила, контакты, «Скачать»,
 * текст новости). В макете content.html текст состоит только из <p>, <hr> и блоков .info,
 * поэтому у заголовков и списков стилей в теме нет вовсе: h2/h3 падали на браузерный дефолт —
 * гротеск вместо антиквы, без капители, размером почти как основной текст. Любая страница
 * с заголовками выглядела неоформленной.
 *
 * Здесь заголовки, списки, ссылки и разделители приведены к оформлению остальных страниц:
 * шрифт и капитель как у .content__title, цвет заголовка как у .post__title.
 */
.content__box {
    font-family: var(--font-2);
    font-size: 1rem;
    line-height: 1.5;
    color: #b5b5b4;
}

.content__box h1,
.content__box h2,
.content__box h3,
.content__box h4,
.content__box h5,
.content__box h6 {
    margin: 1.875rem 0 0.9375rem;
    font-family: var(--font-1);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: #d3ddf3;
    font-feature-settings: "lnum";
    font-variant-numeric: lining-nums;
}

.content__box > :first-child {
    margin-top: 0;
}

.content__box h1 { font-size: 2.25rem; }
.content__box h2 { font-size: 1.75rem; }
.content__box h3 { font-size: 1.375rem; }
.content__box h4,
.content__box h5,
.content__box h6 { font-size: 1.125rem; }

.content__box p {
    margin: 0 0 0.9375rem;
}

.content__box ul,
.content__box ol {
    margin: 0 0 0.9375rem;
    padding-left: 1.5rem;
}

.content__box li {
    margin-bottom: 0.375rem;
}

.content__box li::marker {
    color: var(--color-accent-rgb);
}

.content__box a {
    color: var(--color-url-rgb);
    text-decoration: none;
}

.content__box a:hover {
    text-decoration: underline;
}

.content__box strong,
.content__box b {
    color: #d3ddf3;
    font-weight: 700;
}

.content__box hr {
    height: 0;
    margin: 1.5625rem 0;
    border: 0;
    border-top: 1px solid #31353a;
}

.content__box blockquote {
    margin: 0 0 0.9375rem;
    padding: 0.625rem 1.25rem;
    border-left: 2px solid var(--color-accent-rgb);
    background-color: rgba(24, 30, 40, 0.5);
    border-radius: 0 0.375rem 0.375rem 0;
}

.content__box img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Таблицу из админки нельзя дать разъехать за пределы колонки. */
.content__box table {
    max-width: 100%;
    border-collapse: collapse;
}

/*
 * Витрина: пропорции колонок строки товара.
 *
 * В теме колонка «Количество» задана как 32% ширины строки (--product-grid-template-columns:
 * 2.5rem 1fr 32% 7.5rem 2.5rem). Под числовое поле это чрезмерно много, а названию остаётся
 * остаток: на 1280px это ~72px, и «Gold Einhasad Box x30» ломается на три строки, тогда как
 * соседнее «Adena» занимает одну. Колонки витрины — два независимых списка, поэтому строки
 * слева и справа получали разную высоту и переставали совпадать по горизонтали.
 * В макете этого не видно: там у товара короткое имя «Gold Beomult».
 *
 * Фиксированная ширина возвращает названию место — имя укладывается максимум в две строки,
 * а `.product` с его min-height: 5.25rem держит все строки одной высоты.
 */
@media (min-width: 680px) {
    :root {
        --product-grid-template-columns: 2.5rem 1fr 8rem 7.5rem 2.5rem;
    }
}

/* Количество бывает восьмизначным (адена), а у поля 1.25rem отступов с каждой стороны —
   число не помещалось и обрезалось. Здесь отступы уже, значение по центру. */
.product__col_3 .field__input {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    text-align: center;
}

/* Кнопка «Купить» стояла вплотную к последней строке товаров — зазор был ровно 0. */
.shop + .form__btns,
.shop + .form__informer {
    margin-top: 1.25rem;
}

/*
 * Меню кабинета на широких экранах — в несколько строк.
 *
 * В макете pnav это свайпер-лента: пункты в одну строку, лишнее уезжает за край и листается
 * колесом. Восьми пунктов макета не хватало уже на 1440px (там та же обрезка, что и у нас),
 * а после объединения списка вкладок с плиткой их стало тринадцать — лента вышла 1679px
 * при колонке 936px.
 *
 * На десктопе лента не нужна: разрешаем перенос строк. Гасим фиксированную высоту, маску
 * по краям и transform, который свайпер пишет инлайном. Полосу-подчёркивание рисуем заново
 * под всем списком: штатная `.pnav::after` привязана к высоте одной строки
 * (top: calc(var(--pnav-height) - .125rem)) и при переносе оставалась под первой строкой.
 * На мобильном всё остаётся лентой, как в макете.
 */
@media (min-width: 1200px) {
    /* .panel__nav задана высота 5rem — под одну строку. При переносе второй ряд наезжал
       на .panel__contentbox, который начинается сразу под ней. */
    .panel__nav:has(.pnav.swiper) {
        height: auto;
    }

    .panel__nav .pnav.swiper {
        height: auto;
        overflow: visible;
        -webkit-mask: none;
        mask: none;
    }

    .panel__nav .pnav.swiper:after {
        display: none;
    }

    .panel__nav .pnav.swiper .pnav__list {
        position: relative;
        flex-wrap: wrap;
        width: 100%;
        transform: none !important;
    }

    .panel__nav .pnav.swiper .pnav__list:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0.125rem;
        background-color: #31353a;
    }
}


/* =====================================================================
 * Ниже — правки, которых не было в статичном макете, но которые нужны теме
 * на живом движке: тёмная подложка (защита от белых просветов), сетка карточек
 * форума/RSS и счётчик слайдера новостей. Слой «вау»-эффектов снят по просьбе
 * заказчика — см. комментарий в assets/js/custom.js.
 * ===================================================================== */


/* ==== FX: тёмная подложка =============================================
 * У html фон прозрачный, а фоновая картинка .bg__top ограничена по высоте
 * (min(100%, 75.9375rem)) и не тянется на всю длинную страницу и на очень
 * широкие экраны. Там, где картинки нет, сквозь прозрачный html светилась
 * белизна браузера — просветы по краям на больших разрешениях и вспышка
 * в момент перехода между страницами (View Transitions).
 *
 * Красим корневой фон в тон темы: под фоновой картинкой всегда темнота,
 * а не белый лист. Это же убирает белый кадр при переходах.
 * ===================================================================== */

html {
    background-color: #050607;
}

.bg {
    background-color: #050607;
}
/* ==== /FX: тёмная подложка ============================================ */


/* ==== FX: сетка карточек postgrid =====================================
 * Не эффект, а починка. Класс postgrid используется в forum-threads.php и
 * rss-news.php, но правил для него нет ни в макете, ни в main.css: карточки
 * выкладывались в столбик. Плюс в этих вью у .post нет .post__pic, который
 * даёт карточке фон, — поэтому фон и рамку задаём здесь.
 * ===================================================================== */

.postgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--post-width, 19rem), 1fr));
    gap: 1.25rem;
}

.postgrid .post {
    width: auto;
    height: auto;
    min-height: var(--post-height, 14.5rem);
    background-color: #0b0e14;
    border: var(--box-border);
    align-items: flex-start;
}
/* ==== /FX: сетка карточек postgrid ==================================== */


/* ==== Оформление описаний серверов ====================================
 * Не эффект, а вёрстка. Содержимое about/*.php — сырой HTML, вставленный
 * с форума (XenForo): абзацы, списки, заголовки, скриншоты интерфейса и
 * <hr> вперемешку, без единого класса темы. Без оформления это выглядело
 * дампом. Приводим к типографике темы, не трогая сам текст.
 * ===================================================================== */

.about__tab {
    font-family: var(--font-2);
    font-size: 1rem;
    line-height: 1.65;
    color: #b5b5b4;
}

.about__tab p,
.about__tab div,
.about__tab ul,
.about__tab ol {
    margin: 0 0 0.85rem;
}

.about__tab ul,
.about__tab ol {
    padding-left: 1.5rem;
}

.about__tab li {
    margin-bottom: 0.4rem;
}

.about__tab li::marker {
    color: rgba(var(--color-light), 0.7);
}

/* Заголовки строк и акценты — шрифтом и цветом темы. */
.about__tab h1,
.about__tab h2,
.about__tab h3,
.about__tab h4 {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--font-1);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-light-rgb);
    text-transform: uppercase;
}

.about__tab h3 { font-size: 1.35rem; }
.about__tab h4 { font-size: 1.15rem; }

.about__tab strong { color: #d6d4cf; }

.about__tab a {
    color: rgba(var(--color-accent), 1);
    text-decoration: none;
}

.about__tab a:hover { text-decoration: underline; }

/* Разделитель — фирменная градиентная линия вместо браузерного <hr>. */
.about__tab hr {
    border: 0;
    height: 1px;
    margin: 1.5rem 0;
    background: linear-gradient(90deg, rgba(118, 151, 212, 0.6), transparent);
}

/* Картинки: рамка и отступы, чтобы скриншоты не липли к тексту и не сливались
 * с фоном. Крупные (обёрнуты лайтбоксом) идут отдельными блоками ограниченной
 * ширины; мелкие иконки в тексте остаются в строке. */
.about__tab img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    vertical-align: middle;
}

.about__tab p > img,
.about__tab div > img {
    display: block;
    margin: 0.5rem 0;
}

/* ==== /Оформление описаний серверов =================================== */


/* ==== FX: управление слайдером новостей ================================
 * Счётчик «1 / 7» app.js умеет сам, но узла под него в макете не было —
 * добавлен в views/index.php, здесь оформление.
 *
 * Заодно починка макета: .dot:after позиционируется absolute, а у самого
 * .dot нигде не задан position — ромбик уезжает к ближайшему
 * позиционированному предку. Точки слайдера сейчас всё равно недостижимы
 * (см. комментарий в views/index.php), но правило пригодится и для других
 * мест, где .dot используется.
 * ===================================================================== */

.dot {
    position: relative;
}

.news__counter {
    flex-shrink: 0;
    margin-left: 1.25rem;
    font-family: var(--font-1);
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    color: #646465;
    font-variant-numeric: lining-nums;
}

.news__counter .counter__current {
    color: var(--color-light-rgb);
}
/* ==== /FX: управление слайдером новостей ============================== */



/*
 * Капча.
 *
 * Проблема была не в размере самом по себе, а в том, что картинка не заполняла свою
 * ячейку: у .field__captcha была фиксированная ширина 9.375rem с внутренним отступом,
 * картинка (115×48) висела в ней мелкой, а по бокам оставались пустые поля.
 *
 * Убираем фиксированную ширину и отступ: ячейка становится ровно по картинке, а сама
 * картинка заполняет поле по высоте с сохранением пропорций (без растягивания). Пустот
 * нет, буквы не искажены. Тёмная подложка — страховка на случай светлого фона картинки.
 */
.field__captcha {
    width: auto;
    padding: 0;
    background-color: #0c0f14;
}

.field__captcha img {
    display: block;
    height: 100%;
    width: auto;
}


/*
 * Описание серверов: клик по вкладке не должен выбрасывать страницу вверх.
 *
 * Вкладки меняют контент на месте. Если новая вкладка короче — страница резко
 * укорачивается, и браузер сам поджимает прокрутку к самому верху (к шапке): читал одну
 * вкладку, ткнул в соседнюю — улетел наверх.
 *
 * Держим область вкладок минимум в высоту экрана: страница уже не схлопывается при
 * переключении на короткую вкладку, прокрутка не поджимается — кнопки остаются ровно
 * там же, меняется только текст под ними. У длинных вкладок это ни на что не влияет.
 */
.about__tabs {
    min-height: 100vh;
}


/*
 * Главное меню: отделяем раздел «Нововведения» от основных пунктов.
 * Отступ примерно равен ещё одной строке меню — как на согласованном скриншоте.
 */
@media (min-width: 1200px) {
    .sidebar__menu .menu__item_innovations {
        /* Чуть больше воздуха перед «Нововведениями», чтобы раскрытый вверх поиск
           не перекрывал пункт «Контакты». */
        margin-top: 8.25rem;
    }
}


/*
 * Поиск по разделу «Нововведения» в левом меню.
 * Лупа встроена в строку раздела, а поле и результаты раскрываются
 * внутри его подменю, не ломая штатный механизм data-menu-sublist.
 */
.menu__item_innovations .menu__link {
    padding-right: 1rem;
}

.innovations-search-toggle {
    position: relative;
    z-index: 3;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    margin-right: 0.6rem;
    color: #989a9d;
    opacity: 0.8;
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s, filter 0.2s;
}

.innovations-search-toggle::before {
    content: "";
    position: absolute;
    left: 0.38rem;
    top: 0.34rem;
    width: 0.72rem;
    height: 0.72rem;
    border: 0.12rem solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.innovations-search-toggle::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 1.04rem;
    width: 0.62rem;
    height: 0.12rem;
    background: currentColor;
    border-radius: 0.1rem;
    transform: rotate(45deg);
    transform-origin: left center;
}

.menu__item_innovations .menu__link:hover .innovations-search-toggle,
.menu__item_innovations .menu__link_active .innovations-search-toggle,
.innovations-search-toggle:hover,
.innovations-search-toggle:focus,
.innovations-search-toggle[aria-expanded="true"] {
    color: #d7e5ff;
    opacity: 1;
    filter: drop-shadow(0 0 0.22rem rgba(141, 183, 255, 0.9));
    outline: none;
}

.innovations-search-panel {
    box-sizing: border-box;
    width: 100%;
    padding: 0.25rem 1.35rem 1.15rem 5rem;
}

.innovations-search-panel[hidden] {
    display: none !important;
}

.innovations-search-field {
    position: relative;
    width: 100%;
}

.innovations-search-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 2.7rem;
    padding: 0.55rem 2.25rem 0.55rem 0.8rem;
    border: 1px solid rgba(121, 151, 201, 0.42);
    border-radius: 0.18rem;
    outline: none;
    background: rgba(3, 6, 10, 0.82);
    color: #d7d9de;
    font-family: var(--font-2);
    font-size: 0.86rem;
    line-height: 1.2;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.innovations-search-input:focus {
    border-color: rgba(121, 151, 201, 0.9);
    background: rgba(5, 9, 15, 0.95);
    box-shadow: 0 0 0.5rem rgba(93, 132, 199, 0.18);
}

.innovations-search-input::placeholder {
    color: rgba(190, 197, 210, 0.52);
}

.innovations-search-clear {
    position: absolute;
    z-index: 2;
    right: 0.25rem;
    top: 50%;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 0;
    transform: translateY(-50%);
    background: transparent;
    color: rgba(190, 197, 210, 0.58);
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.innovations-search-clear:hover {
    color: #d7e5ff;
}

.innovations-search-results {
    display: grid;
    gap: 0.35rem;
    max-height: 18rem;
    margin-top: 0.45rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.2rem;
}

.innovations-search-message {
    padding: 0.55rem 0.25rem 0.25rem;
    color: #7f838a;
    font-family: var(--font-2);
    font-size: 0.78rem;
    line-height: 1.35;
}

.innovations-search-result {
    display: block;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(121, 151, 201, 0.18);
    border-radius: 0.15rem;
    background: rgba(16, 21, 29, 0.74);
    color: #aeb3bc;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.innovations-search-result:hover,
.innovations-search-result:focus {
    border-color: rgba(121, 151, 201, 0.65);
    background: rgba(25, 34, 47, 0.92);
    color: #fff;
    outline: none;
}

.innovations-search-result__title {
    display: block;
    color: #d6d9df;
    font-family: var(--font-1);
    font-size: 0.92rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.innovations-search-result__snippet {
    display: block;
    margin-top: 0.25rem;
    color: #858b95;
    font-family: var(--font-2);
    font-size: 0.7rem;
    line-height: 1.35;
}

.innovations-search-result:hover .innovations-search-result__snippet,
.innovations-search-result:focus .innovations-search-result__snippet {
    color: #aeb7c5;
}

/* Подсветка найденного слова уже внутри страницы «Нововведения». */
.innovations-search-highlight {
    padding: 0 0.08em;
    background: rgba(121, 151, 201, 0.32);
    color: #fff;
    box-shadow: 0 0 0.3rem rgba(121, 151, 201, 0.22);
}

@media (max-width: 1199px) {
    .innovations-search-panel {
        padding-right: 1rem;
    }
}

/*
 * На широком экране поиск раскрывается ВВЕРХ над пунктом «Нововведения».
 * Панель остаётся внутри ширины левого меню и больше не уходит вправо.
 * Поле поиска закреплено снизу панели рядом с пунктом меню, а найденные
 * результаты растут вверх — как выпадающий список, открывающийся вверх.
 */
@media (min-width: 1200px) {
    .sidebar__menu .menu__item_innovations {
        position: relative;
        overflow: visible;
    }

    .menu__item_innovations .menu__sublist {
        overflow: visible;
    }

    .menu__item_innovations .innovations-search-panel {
        position: absolute;
        z-index: 80;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(100% + 0.45rem);
        top: auto;
        width: auto;
        padding: 0.8rem;
        border: 1px solid rgba(121, 151, 201, 0.38);
        border-radius: 0.2rem;
        background: rgba(7, 10, 15, 0.97);
        box-shadow:
            0 -0.8rem 2.2rem rgba(0, 0, 0, 0.55),
            0 0 1rem rgba(87, 126, 190, 0.12);

        /* Поле остаётся у нижней границы, результаты появляются над ним. */
        display: flex;
        flex-direction: column-reverse;
    }

    .menu__item_innovations .innovations-search-panel[hidden] {
        display: none !important;
    }

    .menu__item_innovations .innovations-search-results {
        max-height: 21rem;
        margin-top: 0;
        margin-bottom: 0.45rem;
    }
}

/* =========================================================
 * Language switcher flags (RU / EN)
 * ---------------------------------------------------------
 * The text code remains visible, while the flag gives an
 * immediate graphical indication of the active language.
 * ========================================================= */
.lang .lang__name {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
}

.lang .lang__flag {
    display: block;
    width: 1.55rem;
    height: 1.03rem;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 0.1rem;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0.12rem 0.3rem rgba(0, 0, 0, 0.32);
}

.lang .lang__code {
    display: inline-block;
    line-height: 1;
}

.lang__link:hover .lang__flag,
.lang__current:hover .lang__flag {
    box-shadow:
        0 0 0 1px rgba(139, 170, 224, 0.52),
        0 0 0.45rem rgba(121, 151, 201, 0.25);
}

@media (max-width: 1199px) {
    .lang .lang__flag {
        width: 1.4rem;
        height: 0.93rem;
    }
}