/* Оформление личного кабинета и форума в языке сайта.
 *
 * Подключается последним и перекрывает и тему MoonShine, и стили
 * шаблона. Сами эти файлы не трогаем: обновление темы их перезапишет,
 * а этот слой останется.
 *
 * Язык, которого держимся, тот же, что на страницах сайта:
 *   прямые углы, без скруглений и срезов,
 *   бронзовая волосяная окантовка поверх холодной стали,
 *   Oswald на заголовках и управлении, PT Serif на чтении.
 *
 *   #907b5b  бронза          #c6b89a  светлая бронза
 *   #31373c  сталь, верх     #3d4145  сталь, низ
 *   #1b1f23  плашка          #15181d  фон страницы
 *
 * Окантовка делается подложкой: бронзовый фон элемента и стальной слой
 * поверх с отступом в пиксель. Так она не спорит с фонами темы.
 */

:root {
    --bc-bronze: #907b5b;
    --bc-bronze-light: #c6b89a;
    --bc-ink: #e0d6bf;
    --bc-muted: #9aa2a9;
    --bc-steel-top: #31373c;
    --bc-steel-bottom: #272c31;
    --bc-plate: #1b1f23;
    --bc-display: "Oswald", "PT Sans Narrow", Arial, sans-serif;
    --bc-text: "PT Serif", "Times New Roman", Times, serif;
}

/* ======================= Текст ======================= */

/* Интерфейс набран Oswald — как вся обвязка сайта. PT Serif остаётся
   там, где текст читают подряд: новости, описание, правила, сообщения
   поддержки. Раньше серифом было набрано всё подряд, включая поля
   ввода, и кабинет выглядел дешевле сайта. */
body,
.layout-wrapper {
    font-family: var(--bc-display);
    letter-spacing: .01em;
    color: #b9c0c7;
}

input,
select,
textarea,
button,
a,
td,
th,
.form-input,
.form-select,
.form-textarea,
.form-group,
.badge,
.table-list,
.breadcrumbs,
.tabs {
    font-family: var(--bc-display);
}

::placeholder {
    font-family: var(--bc-display);
}

/* Длинный текст — серифом. */
.prose,
.ck-content,
.block-content,
.bc-prose,
.article-body,
.news-content {
    font-family: var(--bc-text);
    letter-spacing: 0;
}

h1, h2, h3, h4,
.h1, .h2, .h3,
.menu-inner-link,
.btn,
.badge,
th,
label,
.form-label {
    font-family: var(--bc-display);
    letter-spacing: .03em;
}

h1, h2, h3, h4 {
    color: var(--bc-ink);
    font-weight: 600;
}

/* Шаблон красит текст в голубоватый сланец — уводим в тёплый серый. */
.text-secondary,
.text-gray-400,
.text-slate-400 {
    color: var(--bc-muted);
}

/* ======================= Кнопки =======================

   В теме кнопка — синий градиент, прописанный явно. Заменяем целиком:
   стальная плашка со срезанными углами и бронзовой окантовкой. */

.dark .btn,
.btn {
    position: relative;
    z-index: 0;
    border: 0;
    border-radius: 0;
    background: rgba(144, 123, 91, .5);
    background-image: none;
    color: var(--bc-ink);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: background .25s, color .25s;
}

.dark .btn:before,
.btn:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    left: 1px;
    width: auto;
    height: auto;
    background: linear-gradient(180deg, var(--bc-steel-top) 0%, var(--bc-steel-bottom) 100%);
    transition: background .25s;
}

.dark .btn:hover,
.btn:hover {
    background: rgba(198, 184, 154, .65);
    color: #f0e7d4;
}

/* Главное действие — сплошная бронза, чтобы его было видно сразу. */
.btn-primary,
.btn-purple,
.dark .btn-primary,
.dark .btn-purple {
    background: var(--bc-bronze);
    color: #1b1f23;
}

.btn-primary:before,
.btn-purple:before,
.dark .btn-primary:before,
.dark .btn-purple:before {
    display: none;
}

.btn-primary:hover,
.btn-purple:hover,
.dark .btn-primary:hover,
.dark .btn-purple:hover {
    background: var(--bc-bronze-light);
    color: #14181b;
}

/* Бегущий блик из темы был сиреневым. */
.btn:after {
    background: linear-gradient(120deg, transparent,
    rgba(198, 184, 154, .18), transparent) !important;
}

/* ======================= Плашки и панели ======================= */

.box,
.modal-content,
.card,
.dark .box,
.dark .modal-content {
    position: relative;
    z-index: 0;
    border: 0;
    border-radius: 0;
    padding: 1px;
    background: rgba(144, 123, 91, .34);
}

.box > *,
.modal-content > * {
    position: relative;
    z-index: 1;
}

.box:before,
.modal-content:before,
.dark .box:before,
.dark .modal-content:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    background: linear-gradient(180deg, #22272c 0%, #1b1f23 100%);
}

/* ======================= Поля ввода ======================= */

.form-input,
.dark .form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border: 1px solid rgba(144, 123, 91, .4);
    border-radius: 0;
    background: #16191e;
    color: var(--bc-ink);
    font-family: var(--bc-display);
    transition: border-color .25s, box-shadow .25s;
}

.form-input:focus,
.dark .form-input:focus,
textarea:focus,
select:focus {
    border-color: var(--bc-bronze);
    box-shadow: 0 0 0 2px rgba(144, 123, 91, .22);
    outline: none;
}

.form-input::placeholder {
    color: #6d757c;
}

/* ======================= Боковое меню ======================= */

/* Фон только на широких экранах: до 1280 боковая панель лежит поверх
   страницы выдвижной шторкой, и сплошная заливка закрывает содержимое
   целиком. Проверено — именно это гасило весь кабинет. */
@media (min-width: 1280px) {
    .layout-menu {
        background: linear-gradient(180deg, #1b1f23 0%, #15181d 100%);
        border-right: 1px solid rgba(144, 123, 91, .18);
    }
}

.menu-inner-link,
.dark .menu-inner-link {
    border-radius: 0;
    color: #b9ad94;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .25s, color .25s, box-shadow .25s;
}

.menu-inner-link:hover,
.dark .menu-inner-link:hover {
    background: rgba(144, 123, 91, .14);
    color: var(--bc-ink);
    box-shadow: inset 2px 0 0 var(--bc-bronze);
}

._is-active > .menu-inner-link,
.dark ._is-active > .menu-inner-link {
    background: rgba(144, 123, 91, .2);
    color: #f0e7d4;
    box-shadow: inset 2px 0 0 var(--bc-bronze-light);
}

/* Разделы меню — подписи, а не заголовки: приглушаем. */
.menu-divider,
.divider {
    border-color: rgba(144, 123, 91, .18);
    color: #7f878e;
}

/* ======================= Таблицы ======================= */

.table-default thead th,
table thead th {
    background: #22272c;
    color: var(--bc-bronze-light);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(144, 123, 91, .3);
}

.table-default tbody tr:nth-child(2n),
table tbody tr:nth-child(2n) {
    background: rgba(144, 123, 91, .04);
}

.table-default tbody tr:hover,
table tbody tr:hover {
    background: rgba(144, 123, 91, .1);
}

/* ======================= Плитки дашборда ======================= */

/* Картинка в плитке перебивала текст — кладём затемнение. */
.dashboard-item,
.dashboard-card {
    position: relative;
    border-radius: 0;
}

.dashboard-item:after,
.dashboard-card:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(90deg,
    rgba(16, 19, 22, .92) 0%, rgba(16, 19, 22, .72) 45%, rgba(16, 19, 22, .35) 100%);
    pointer-events: none;
    z-index: 0;
}

.dashboard-item > *,
.dashboard-card > * {
    position: relative;
    z-index: 1;
}

/* ======================= Мелочи ======================= */

/* Пузырь чата был белым пятном в углу тёмной страницы. */
.mini-chat__toggle,
.chat-toggle,
.mini-chat-button {
    background: var(--bc-bronze) !important;
    color: #1b1f23 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.mini-chat__toggle:hover,
.chat-toggle:hover,
.mini-chat-button:hover {
    background: var(--bc-bronze-light) !important;
}

/* Полосы прокрутки в тон, а не системные синие. */
* {
    scrollbar-color: #4a5157 #1b1f23;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #1b1f23;
}

*::-webkit-scrollbar-thumb {
    background: #4a5157;
    border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--bc-bronze);
}

/* Ссылки — бронза вместо синевы. */
a:not(.btn):not(.menu-inner-link) {
    color: var(--bc-bronze-light);
}

a:not(.btn):not(.menu-inner-link):hover {
    color: #e0d6bf;
}

/* ======================= Плитки дашборда =======================

   Плитка — арт на всю площадь, поверх него число, подпись и кнопка.
   Текст по арту читался плохо, поэтому кладём затемнение: слева плотное
   под текст, справа почти прозрачное, чтобы картинку было видно.

   Содержимое приподнимаем над затемнением. Без этого оно уйдёт под
   него: слой позиционированный, а содержимое — нет. */

.report-card {
    position: relative;
    z-index: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .38);
}

.report-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(0deg,
        rgba(14, 17, 20, .72) 0%, rgba(14, 17, 20, .18) 46%,
        rgba(14, 17, 20, 0) 72%),
        linear-gradient(90deg,
        rgba(14, 17, 20, .9) 0%, rgba(14, 17, 20, .66) 42%,
        rgba(14, 17, 20, .26) 76%, rgba(14, 17, 20, .06) 100%);
    pointer-events: none;
}

.report-card > * {
    position: relative;
    z-index: 1;
}

/* Число — крупно и бронзой, подпись над ним приглушена. */
.report-card-value {
    font-family: var(--bc-display);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--bc-bronze-light);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-shadow: 0 0 22px rgba(198, 184, 154, .22);
    /* в теме у числа margin-top: 24px. В перевёрнутой колонке он
       ложится между волоском и цифрой: сверху зияла дыра, а снизу
       цифра упиралась в кнопку. */
    margin: 0 !important;
}

/* «Количество:» перед числом убираем совсем: ровно то же самое уже
   написано подписью плитки («Аккаунты», «Персонажи»), а в плитке
   баланса это слово вдобавок не к месту. Освободившаяся ширина уходит
   числу. */
.report-card-value .hflex {
    display: none !important;
}

.report-card-title {
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b9ad94;
}

/* Белая черта из разметки — в бронзовый волосок. */
.report-card-body hr {
    height: 1px;
    border: 0;
    background: rgba(144, 123, 91, .4) !important;
}

/* ======================= Аватар в шапке =======================

   В теме он светился красным поверх тёмно-фиолетового — остаток чужой
   гаммы. Делаем бронзовое кольцо. */

.btn-ava,
:is(.dark .btn-ava) {
    background: #22272c !important;
    box-shadow: 0 0 0 1px rgba(144, 123, 91, .7),
    0 0 10px 1px rgba(144, 123, 91, .3) !important;
    color: var(--bc-bronze-light);
    font-family: var(--bc-display);
    font-weight: 600;
}

:is(.dark .bg-ava) {
    background: #1b1f23 !important;
}

/* ======================= Кнопка чата =======================

   Был белый круг с серым кольцом — единственное светлое пятно на
   тёмной странице. */

/* Менять только цвет подложки: в сокращённой записи фона у кнопки
   лежит и сам значок, полная замена его стирает. */
.chat-fab,
.fancy-fab {
    background-color: var(--bc-bronze) !important;
    border: 0 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .55) !important;
    transition: background-color .25s, transform .25s;
}

.chat-fab:hover,
.fancy-fab:hover {
    background-color: var(--bc-bronze-light) !important;
    transform: translateY(-2px);
}

/* Пульсирующее кольцо вокруг кнопки — круглое и к делу не идёт. */
.chat-fab:after {
    display: none !important;
}

.chat-fab__badge,
.fancy-fab-badge {
    background: #963630 !important;
    color: #fae2e0 !important;
    font-family: var(--bc-display);
}

.chat-popup,
.chat-popup-header {
    border-radius: 0;
    background: #1b1f23;
    border: 1px solid rgba(144, 123, 91, .35);
}

/* ======================= Без круглого =======================

   Аватар и кнопка чата приходили кругами из шаблона. В остальном
   оформлении круглого нет, и они выбивались — делаем прямоугольными. */

.btn-ava,
.rounded-full.btn-ava {
    border-radius: 0 !important;
}

.chat-fab,
.fancy-fab {
    border-radius: 0 !important;
}

.chat-fab__badge,
.fancy-fab-badge {
    border-radius: 0 !important;
}

/* ======================= Остатки синевы =======================

   В самой странице есть встроенный блок стилей шаблона, он возвращал
   синий градиент панелям и пунктам меню. Этот файл теперь подключён
   после него, поэтому перебивает. */

.dark .box,
.dark .modal-content {
    background: rgba(144, 123, 91, .34);
    background-image: none;
}

/* Пункты бокового меню: ровные плашки стали, активный — с бронзовой
   полосой слева. Скруглений и синевы нет. */
.layout-menu .menu-inner-link,
.layout-menu .menu-inner-button,
.dark .layout-menu .menu-inner-link {
    border-radius: 0;
    background: #1f2429;
    background-image: none;
    box-shadow: none;
}

.layout-menu .menu-inner-link:hover,
.dark .layout-menu .menu-inner-link:hover {
    background: #262c31;
    box-shadow: inset 2px 0 0 var(--bc-bronze);
}

.layout-menu .menu-inner-item._is-active > .menu-inner-link,
.dark .layout-menu .menu-inner-item._is-active > .menu-inner-link {
    background: rgba(144, 123, 91, .22) !important;
    color: #f0e7d4 !important;
    box-shadow: inset 2px 0 0 var(--bc-bronze-light);
}

/* Белая полоска-указатель у активного пункта — в бронзу. */
.menu-inner-item._is-active > .menu-inner-link:before,
.dark .menu-inner-item._is-active > .menu-inner-link:before {
    background: var(--bc-bronze-light) !important;
}

/* Значки в меню шли голубыми. */
.layout-menu .menu-inner-link svg,
.layout-menu .menu-inner-button svg {
    color: #8a9299;
}

.layout-menu .menu-inner-link:hover svg,
.layout-menu .menu-inner-item._is-active svg {
    color: var(--bc-bronze-light) !important;
}

/* Выбор сервера и кнопка «Свернуть меню» внизу панели. */
.layout-menu .select-server,
.layout-menu select,
.menu-inner-toggler {
    border-radius: 0;
    background: #1f2429;
    border: 1px solid rgba(144, 123, 91, .3);
    color: #b9ad94;
}

/* ======================= Плитки: не наезжать =======================

   Кнопка в плитке позиционируется поверх содержимого, и при крупной
   цифре они накладывались. Цифру убавляем, кнопке даём своё место. */


/* ======================= Синяя протяжка в меню =======================

   Пункт меню рисует поверх себя псевдоэлемент-протяжку: широкую
   полосу, которая при наведении выезжает слева. В тёмной теме шаблон
   заливает её синим градиентом, и он перекрывает наш фон целиком —
   отсюда синие строки меню при верном фоне у самого пункта.
   Перекрашиваем протяжку, а не прячем: на ней держится наведение. */

.menu-inner-link::before,
.menu-inner-button::before,
.dark .menu-inner-link::before,
.dark .menu-inner-button::before {
    background: linear-gradient(135deg,
    rgba(144, 123, 91, .20), rgba(144, 123, 91, 0)) !important;
}

/* ======================= Плитки: кнопка в строке =======================

   Кнопка в плитке была вынута из потока и ложилась поверх подписи.
   Возвращаем её в строку: у плитки уже flex с разносом по краям, и
   кнопка сама встаёт справа. Отступ справа у текста больше не нужен.

   Именно relative, не static: подложка кнопки — это её :before с
   inset: 1px, и без собственного позиционирования она растягивается
   до ближайшего позиционированного предка, то есть на всю плитку, и
   закрывает арт. */

.report-card .btn-dashboard {
    position: relative !important;
    inset: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Плитка в одну колонку: подпись, число, кнопка.

   Раньше текст и кнопка делили ширину в строке, и крупное число —
   баланс в миллион — в оставшийся кусок не влезало. Ширину под число
   взять неоткуда, поэтому кнопка уходит на свою строку, а числу
   достаётся вся плитка: теперь не важно, сколько в нём знаков.

   Раскладка задаётся через grid, а не flex, намеренно: в разметке
   стоит flex-direction: row с !important прямо в атрибуте style, и
   перебить его из файла нельзя. Для сетки это свойство не значит
   ничего, и колонка получается без борьбы с разметкой. */

.report-card {
    display: grid !important;
    grid-template-columns: 1fr;
    /* шапка с числом прижата к верху, кнопка к низу: так у плитки
       есть ритм, и высота всех трёх совпадает независимо от того,
       сколько знаков в числе */
    align-content: space-between;
    justify-items: start;
    /* в разметке у плитки gap: 10px прямо в атрибуте style, перебить
       можно только важностью — иначе число прилипает к кнопке */
    gap: 22px !important;
}

.report-card-body {
    height: auto !important;
    min-height: 0;
    padding-right: 0;
    width: 100%;
    display: flex !important;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
}

/* Волосок из разметки стоит между числом и подписью: это и есть
   граница между шапкой плитки и значением, поэтому во всю ширину. */
.report-card-body hr {
    width: 100%;
    margin: 0 !important;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg,
    rgba(144, 123, 91, .45), rgba(144, 123, 91, 0)) !important;
}

/* Низ боковой панели: выбор сервера обрывался на краю.

   Укоротить список нечем — он длиннее экрана даже впритык, поэтому
   боковая панель прокручивается. Беда была в том, что тема прячет
   полосу прокрутки, и обрыв читался как сломанная вёрстка. Возвращаем
   тонкую полосу в цвет и подбираем строки чуть плотнее. */
.layout-menu .menu {
    padding-bottom: 14px;
}

.layout-menu ::-webkit-scrollbar,
.layout-menu .menu::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.layout-menu .menu::-webkit-scrollbar-track {
    background: transparent;
}

.layout-menu .menu::-webkit-scrollbar-thumb {
    background: rgba(144, 123, 91, .45);
}

.layout-menu .menu-inner-link,
.layout-menu .menu-inner-button {
    padding-top: 8px;
    padding-bottom: 8px;
}

.report-card {
    min-height: 168px;
    padding: 18px 20px;
}

/* Обёртка плитки ростом с саму плитку. Иначе плитка выше коробки, и
   на телефоне она залезает на следующую — зазор сетки съедается. */
.box.space-elements.p-0 {
    min-height: 168px;
    height: auto;
}

/* На широком экране плитка вытягивается в длину: при высоте 168 px
   она получалась втрое шире, чем выше, и арт при `cover` обрезался
   сверху и снизу — у героев пропадали головы. Высоту поднимаем так,
   чтобы пропорция плитки подошла к пропорции арта (2 к 1). */
@media (min-width: 1024px) {
    .report-card,
    .box.space-elements.p-0 {
        min-height: 210px;
    }
}

@media (min-width: 1440px) {
    .report-card,
    .box.space-elements.p-0 {
        min-height: 240px;
    }
}

/* Плитки рейтинга этого не касается: у их артов своя пропорция, и
   растягивать их по высоте незачем. */
.bc-rating .report-card,
.bc-rating .box.space-elements.p-0 {
    min-height: 168px;
}

/* Волосок между подписью и числом убран: решение владельца
   21.10.2026. Строки и так разведены по высоте, а черта резала арт
   пополам. */
.report-card-body hr {
    display: none;
}

@media (max-width: 640px) {
    .report-card-value {
        font-size: 24px;
    }
}

@media (max-width: 1279px) {
    .report-card-body {
        padding-right: 0;
    }
}

/* ======================= Значок кнопки чата =======================

   Из темы приходил голубой пузырь — единственное синее пятно на
   бронзовой кнопке. Рисуем свой: прямые углы, цвет подложки страницы.
   Значок лежит прямо в правиле картинкой, отдельный файл не нужен. */

.chat-fab,
.fancy-fab {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1f23' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M3 4h18v13H8l-5 4z'/%3E%3Cpath d='M7.5 9h9M7.5 12.5h6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
}

/* =====================================================================
   ПРИВЕТСТВЕННЫЙ БЛОК ГЛАВНОЙ

   Первое, что видит игрок. Задача блока — назвать его по имени,
   показать состояние счёта и дать одну очевидную кнопку. Поэтому
   слева личное (имя, сервер, статус), справа деньги, и больше в нём
   ничего нет.

   Фон собран слоями: стальная плашка, поверх герб в десятой доле
   непрозрачности справа, поверх бронзовый волосок по краю. Герб
   уходит за правый край — так он читается как фактура, а не как
   картинка, которую забыли вписать.
   ===================================================================== */

.bc-hero {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
    margin: 0 0 20px;
    padding: 28px 32px;
    overflow: hidden;
    background: var(--bc-bronze);
}

/* Стальная подложка с отступом в пиксель — тот же приём окантовки,
   что и у остальных плашек кабинета. */
.bc-hero::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -2;
    background:
        radial-gradient(120% 140% at 0% 0%, #2a3036 0%, #1b1f23 55%, #15181d 100%);
}

/* Герб справа. Маска уводит его в ничто к середине блока. */
.bc-hero__art {
    position: absolute;
    top: 50%;
    right: -90px;
    z-index: -1;
    width: 300px;
    height: 300px;
    transform: translateY(-50%);
    background: url("/img/logo/mark.webp") right center / contain no-repeat;
    opacity: .055;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* ------------------------------- слева ------------------------------ */

.bc-hero__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.bc-hero__eyebrow {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bc-bronze);
}

/* Имя — единственная по-настоящему крупная надпись слева. Отсвет тот
   же, что у названия сайта в шапке: тень плюс бронзовое свечение. */
.bc-hero__name {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    color: #f3ecdd;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .55),
        0 0 26px rgba(144, 123, 91, .42);
    overflow-wrap: anywhere;
}

.bc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.bc-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid rgba(144, 123, 91, .38);
    background: rgba(144, 123, 91, .08);
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b9ad94;
    white-space: nowrap;
}

.bc-hero__dot {
    width: 6px;
    height: 6px;
    background: #6d7278;
}

.bc-hero__chip--on {
    border-color: rgba(122, 168, 108, .45);
    color: #a9c79c;
}

.bc-hero__chip--on .bc-hero__dot {
    background: #7aa86c;
    box-shadow: 0 0 0 0 rgba(122, 168, 108, .55);
    animation: bc-pulse 2.4s ease-out infinite;
}

@keyframes bc-pulse {
    0% { box-shadow: 0 0 0 0 rgba(122, 168, 108, .55); }
    70% { box-shadow: 0 0 0 7px rgba(122, 168, 108, 0); }
    100% { box-shadow: 0 0 0 0 rgba(122, 168, 108, 0); }
}

.bc-hero__chip--off {
    border-color: rgba(150, 54, 48, .45);
    color: #c99b96;
}

.bc-hero__chip--off .bc-hero__dot {
    background: #963630;
}

.bc-hero__note {
    font-family: var(--bc-display);
    font-size: 13px;
    color: #727a81;
}

/* ------------------------------- справа ----------------------------- */

/* Отделено волоском, а не рамкой: блок один, просто у него две
   половины. */
.bc-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding-left: 32px;
    border-left: 1px solid rgba(144, 123, 91, .22);
    text-align: right;
}

.bc-hero__label {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bc-muted);
}

.bc-hero__balance {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--bc-bronze-light);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 24px rgba(198, 184, 154, .25);
    overflow-wrap: anywhere;
}

.bc-hero__discount {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a9c79c;
}

/* Кнопка — сплошная бронза на тёмном тексте: во всём кабинете это
   единственная такая, чтобы взгляд шёл к ней. */
.bc-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 0 22px;
    height: 42px;
    background: linear-gradient(180deg, var(--bc-bronze-light), var(--bc-bronze));
    /* тема красит ссылки своим цветом, поэтому здесь важность */
    color: #16191e !important;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: filter .25s, transform .25s, box-shadow .25s;
}

.bc-hero__cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}

/* ------------------------------ узкий экран ------------------------- */

@media (max-width: 900px) {
    .bc-hero {
        flex-direction: column;
        gap: 22px;
        padding: 22px;
    }

    .bc-hero__name {
        font-size: 32px;
    }

    .bc-hero__aside {
        align-items: flex-start;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(144, 123, 91, .22);
        text-align: left;
        width: 100%;
    }

    .bc-hero__balance {
        font-size: 36px;
    }

    .bc-hero__cta {
        width: 100%;
    }

    .bc-hero__art {
        width: 220px;
        height: 220px;
        right: -60px;
        opacity: .07;
    }
}

/* =====================================================================
   ВЕРХНЯЯ ПОЛОСА

   Была просто парой кнопок, висящих в воздухе: ни границы, ни фона,
   содержимое страницы начиналось без всякого перехода. Делаем из неё
   полосу — своя плашка, волосок снизу, кнопки ростом пониже и в тон.
   ===================================================================== */

.layout-page > .layout-navigation,
.dark .layout-page > .layout-navigation {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 62px;
    padding: 0 20px;
    background: rgba(21, 24, 29, .92);
    backdrop-filter: blur(8px);
    border: 0;
    border-bottom: 1px solid rgba(144, 123, 91, .22);
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9);
}

/* Кнопки в полосе: ровные плашки без заливки, подсветка при наведении
   бронзовая. Крупная заливка в кабинете одна — кнопка пополнения. */
.layout-page > .layout-navigation .btn,
.layout-page > .layout-navigation .link-button {
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid rgba(144, 123, 91, .3);
    color: #b9ad94;
    font-size: 12px;
    letter-spacing: .1em;
}

.layout-page > .layout-navigation .btn:hover,
.layout-page > .layout-navigation .link-button:hover {
    border-color: var(--bc-bronze);
    background: rgba(144, 123, 91, .12);
    color: var(--bc-ink);
}

/* Содержимое страницы начинается с того же отступа, что и полоса. */
.layout-page > .layout-content.p-4 {
    padding: 20px;
}

@media (max-width: 640px) {
    .layout-page > .layout-navigation,
    .dark .layout-page > .layout-navigation {
        padding: 0 14px;
        min-height: 56px;
    }

    .layout-page > .layout-content.p-4 {
        padding: 14px;
    }
}

/* =====================================================================
   ЗАГОЛОВКИ БЛОКОВ, ВОЗДУХ МЕЖДУ НИМИ, ПУСТЫЕ СОСТОЯНИЯ
   ===================================================================== */

/* Заголовок блока: значок, название, счётчик. Палки «| 0 / 7 |» из
   заголовка убраны — счёт теперь отдельной плашкой справа от названия. */
.box-title {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
    margin: 0;
    font-family: var(--bc-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bc-ink);
}

.box-title > .w-6,
.box-title svg {
    color: var(--bc-bronze);
}

.bc-counter {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 3px 9px;
    border: 1px solid rgba(144, 123, 91, .38);
    background: rgba(144, 123, 91, .1);
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    color: #b9ad94;
    font-variant-numeric: tabular-nums;
}

/* Воздух. Блоки стояли почти вплотную, из-за чего страница читалась
   одним комом. */
.layout-content > .box,
.layout-content > .grid,
.layout-content > .fields-group {
    margin-bottom: 20px;
}

.layout-content hr.divider {
    margin: 24px 0;
    border-color: rgba(144, 123, 91, .16);
}

/* Плитки обёрнуты в такую же коробку, но с классом p-0: у них своя
   внутренняя раскладка, и отступ коробки вылезал бронзовой рамкой. */
.box.space-elements:not(.p-0) {
    padding: 22px 24px;
}

.box .box-title + hr,
.box > hr {
    border-color: rgba(144, 123, 91, .16) !important;
    opacity: 1 !important;
}

/* Пустое состояние. Было строкой серого текста с перечёркнутым кругом
   у края — выглядело как ошибка. Делаем спокойный блок по центру:
   значок бронзой, текст крупнее, вокруг воздух. */
.alert.alert-default {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 24px;
    border: 1px solid rgba(144, 123, 91, .16);
    border-radius: 0;
    background: rgba(255, 255, 255, .014);
    text-align: center;
}

/* Значок из шаблона — перечёркнутый круг, знак запрета. Пустой список
   это не ошибка, поэтому значок убираем, остаётся ровная строка. */
.alert.alert-default .alert-icon {
    display: none;
}

.alert.alert-default .alert-content {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7d858c;
}

/* Кнопка в плитке. Сплошная заливка в кабинете одна — пополнение
   баланса в приветственном блоке. Здесь кнопка обведённая, на
   полупрозрачной подложке: она лежит поверх арта и не должна с ним
   спорить. Стальную подложку кнопки гасим, иначе она закрывает фон. */
.report-card .btn-dashboard {
    min-height: 36px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(144, 123, 91, .45);
    background: rgba(17, 20, 24, .72);
    color: #d9cdb4;
    font-size: 12px;
    letter-spacing: .1em;
    backdrop-filter: blur(3px);
    transition: border-color .25s, background .25s, color .25s;
}

.report-card .btn-dashboard::before {
    display: none !important;
}

.report-card .btn-dashboard:hover {
    border-color: var(--bc-bronze-light);
    background: rgba(144, 123, 91, .26);
    color: #f3ecdd;
}

.report-card-title {
    font-size: 12px;
    letter-spacing: .14em;
}

@media (max-width: 640px) {
    .report-card-value {
        font-size: 28px;
    }
}

/* Шапка блока: название слева, кнопки справа, между ними воздух.
   Без зазора кнопка наезжала на счётчик, а название ломалось на две
   строки, упираясь в неё. */
.box > .flex.items-center.justify-between {
    gap: 16px;
}

.box > .flex.items-center.justify-between > .flex.items-center.gap-2 {
    flex: 0 0 auto;
}

/* Подпись в подвале. Раньше там стояло название чужой CMS ссылкой на
   чужой телеграм. Теперь название проекта, ведёт на сайт. */
.layout-footer {
    padding: 18px 20px;
    border-top: 1px solid rgba(144, 123, 91, .14);
}

.bc-sign {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none;
    color: #5f666d;
    transition: color .25s;
}

.bc-sign:hover {
    color: var(--bc-bronze-light);
}

.bc-sign__year {
    padding-left: 10px;
    border-left: 1px solid rgba(144, 123, 91, .28);
    letter-spacing: .14em;
    color: #4e555b;
}

.bc-sign:hover .bc-sign__year {
    color: var(--bc-bronze);
}

/* =====================================================================
   ВЫБОР СЕРВЕРА В БОКОВОЙ ПАНЕЛИ

   Один список карточек на все ширины. Карточка — ссылка на
   переключение, текущая отмечена и не кликается. Картинка внутри
   приглушена до фактуры, поверх читается название.
   ===================================================================== */

.bc-srvlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 4px;
}

.bc-srv {
    position: relative;
    z-index: 0;
    display: block;
    padding: 11px 13px;
    overflow: hidden;
    border: 1px solid rgba(144, 123, 91, .22);
    background: #1b1f23;
    text-decoration: none;
    transition: border-color .25s, background .25s;
}

a.bc-srv:hover {
    border-color: rgba(144, 123, 91, .55);
    background: #22272c;
}

.bc-srv--current {
    border-color: rgba(144, 123, 91, .55);
    box-shadow: inset 2px 0 0 var(--bc-bronze-light);
}

.bc-srv__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/panel/images/rating1.webp") center / cover no-repeat;
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 10%, #000 100%);
}

.bc-srv--current .bc-srv__art {
    opacity: .26;
}

.bc-srv__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.bc-srv__name {
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-srv__rate {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgba(144, 123, 91, .4);
    font-family: var(--bc-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #b9ad94;
}

.bc-srv__state {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--bc-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7d858c;
}

.bc-srv__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
}

.bc-srv__dot--on {
    background: #7aa86c;
}

.bc-srv__dot--off {
    background: #963630;
}

.bc-srv__load {
    margin-left: auto;
    color: #b9ad94;
    font-variant-numeric: tabular-nums;
}

/* Полоса загрузки: тонкая черта в бронзе вместо кольца с процентом. */
.bc-srv__bar {
    display: block;
    height: 2px;
    margin-top: 8px;
    background: rgba(144, 123, 91, .18);
}

.bc-srv__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--bc-bronze), var(--bc-bronze-light));
}

.bc-srv__current {
    display: block;
    margin-top: 8px;
    font-family: var(--bc-display);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-bronze);
}

/* В свёрнутой панели места нет: оставляем только название и точку. */
._is-minimized .bc-srv__state,
._is-minimized .bc-srv__bar,
._is-minimized .bc-srv__current,
._is-minimized .bc-srv__rate {
    display: none;
}

._is-minimized .bc-srv__head {
    margin: 0;
}

/* На телефоне плитка во всю ширину, и кнопка в ней тоже: так у неё
   нормальная площадь нажатия, а не огрызок у левого края. */
@media (max-width: 640px) {
    .report-card {
        justify-items: stretch;
    }

    .report-card .btn-dashboard {
        width: 100%;
        height: 42px;
        min-height: 42px;
    }
}

/* Значок и подпись плитки в одну линию.

   Строка выровнена по центру, но у заголовка h5 есть верхний отступ,
   и при центрировании он считается вместе с текстом — подпись
   оказывалась на четыре пикселя ниже значка. Снимаем отступ и
   приводим значок к одному размеру: в разметке у них разный viewBox,
   из-за чего они вставали по-разному в каждой плитке. */

.report-card .flex.items-center.gap-1 {
    gap: 9px;
}

.report-card-title {
    margin: 0 !important;
    line-height: 1;
}

.report-card-heading {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.report-card-heading .w-6,
.report-card-heading > div {
    width: 17px;
    height: 17px;
    color: var(--bc-bronze);
}

.report-card-heading svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* =====================================================================
   ПУСТОЙ СПИСОК АККАУНТОВ КАК ТОЧКА ВХОДА

   Раньше здесь была серая строка «у вас ещё нет аккаунта» — тупик.
   Теперь объяснение и та же кнопка создания, что и в плитке сверху.
   ===================================================================== */

.bc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 24px !important;
    text-align: center;
}

/* Значок над пустым состоянием: не иллюстрация, а точка опоры для
   взгляда, поэтому крупный контур и приглушённая бронза. */
.bc-empty__icon {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 4px;
    color: rgba(144, 123, 91, .55);
}

.bc-empty__icon svg {
    width: 100%;
    height: 100%;
}

.bc-empty__title {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bc-ink);
}

.bc-empty__hint {
    max-width: 440px;
    margin: 6px auto 0;
    font-family: var(--bc-display);
    font-size: 14px;
    line-height: 1.55;
    color: #818990;
}

.bc-empty .bc-empty__cta {
    height: 42px;
    min-height: 42px;
    padding: 0 24px;
    border: 1px solid rgba(144, 123, 91, .55);
    background: rgba(144, 123, 91, .14);
    color: #e6dcc6;
    font-family: var(--bc-display);
    font-size: 13px;
    letter-spacing: .1em;
}

.bc-empty .bc-empty__cta::before {
    display: none !important;
}

.bc-empty .bc-empty__cta:hover {
    border-color: var(--bc-bronze-light);
    background: rgba(144, 123, 91, .28);
    color: #f3ecdd;
}

/* =====================================================================
   ПОЛОСА КОЛЕСА ФОРТУНЫ

   Собрана как приветственный блок: та же окантовка подложкой, та же
   фактура из арта справа, тот же ритм подписей. Поэтому читается не
   как рекламная вставка, а как часть страницы.
   ===================================================================== */

.bc-promo {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
    padding: 26px 30px;
    overflow: hidden;
    background: rgba(144, 123, 91, .34);
}

.bc-promo::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -2;
    background: linear-gradient(90deg, #1d2127 0%, #16191e 100%);
}

.bc-promo__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/panel/images/rating2.webp") right center / cover no-repeat;
    opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 95%);
    mask-image: linear-gradient(90deg, transparent 18%, #000 95%);
}

.bc-promo__text {
    min-width: 0;
}

.bc-promo__eyebrow {
    margin: 0 0 6px;
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-bronze);
}

.bc-promo__title {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #f0e7d4;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 22px rgba(144, 123, 91, .35);
}

.bc-promo__hint {
    max-width: 520px;
    margin: 8px 0 0;
    font-family: var(--bc-display);
    font-size: 14px;
    line-height: 1.55;
    color: #8d959c;
}

.bc-promo__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border: 1px solid rgba(144, 123, 91, .55);
    background: rgba(17, 20, 24, .66);
    color: #e6dcc6 !important;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(3px);
    transition: border-color .25s, background .25s, transform .25s;
}

.bc-promo__cta:hover {
    border-color: var(--bc-bronze-light);
    background: rgba(144, 123, 91, .3);
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .bc-promo {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 22px;
    }

    .bc-promo__title {
        font-size: 22px;
    }

    .bc-promo__cta {
        width: 100%;
    }

    .bc-promo__art {
        opacity: .2;
    }
}

/* =====================================================================
   СТРАНИЦА ДОНАТА

   Своя палитра страницы держится на переменных — перекрываем их на
   уровне страницы кабинета, и холодная синева уходит разом, вместе со
   скруглениями. Это надёжнее, чем перебивать каждое правило.
   ===================================================================== */

.layout-page {
    --bg-main: linear-gradient(145deg, #1d2127, #16191e);
    --bg-card: linear-gradient(135deg, #20252b 0%, #181c21 100%);
    --bg-info: rgba(255, 255, 255, .015);
    --color-text-main: #ded3bc;
    --color-text-sub: #8d959c;
    --color-text-info: #b9c0c7;
    --color-highlight: #c6b89a;
    --color-accent: #907b5b;
    --radius-main: 0;
    --radius-inner: 0;
    --shadow: 0 4px 20px rgba(0, 0, 0, .45);
    --shadow-strong: 0 8px 18px rgba(0, 0, 0, .35);
}

/* Карточка пополнения приходила с синей заливкой в самом правиле. */
.box-donate,
:is(.dark .box-donate) {
    background: transparent !important;
}

/* Внешняя рамка «Донат» обнимала всю страницу и ничего не значила:
   внутри неё уже есть две карточки. Оставляем заголовок, рамку и
   отступы снимаем — это один лишний уровень вложенности из трёх. */
.box.bc-bare {
    padding: 0 !important;
    background: none !important;
}

.box.bc-bare::before {
    display: none !important;
}

/* --------------------------- карточки оплаты ------------------------

   Валюты и способы оплаты приходят готовыми картинками: яркие ленты и
   логотипы на своих фонах. Рядом они смотрятся набором наклеек.
   Кладём их на одинаковые тёмные плашки и приглушаем, а цвет
   возвращаем выбранной — так видно, что выбрано, и ряд читается как
   один набор. */

/* Кромка нарисована на самой подложке, поэтому рамку в стилях не
   рисуем — вышла бы двойная линия. Выбор отмечаем кольцом снаружи. */
.currency-btn.payment-imgs {
    min-width: 0;
    max-width: none;
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: #16191e;
    opacity: 1 !important;
    transition: box-shadow .25s;
}

.currency-btn.payment-imgs img {
    display: block;
    width: 100%;
    height: auto;
    opacity: .72;
    transition: opacity .25s;
}

.currency-btn.payment-imgs:hover {
    box-shadow: 0 0 0 1px rgba(144, 123, 91, .55);
}

.currency-btn.payment-imgs:hover img {
    opacity: .92;
}

.currency-btn.payment-imgs.active,
:is(.dark .currency-btn.payment-imgs.active) {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 0 0 2px var(--bc-bronze-light);
    background: #16191e;
}

.currency-btn.payment-imgs.active img {
    opacity: 1;
}

.payment-img,
:is(.dark .payment-img) {
    height: 58px;
    min-width: 130px;
    max-width: 152px;
    object-fit: contain;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #16191e !important;
    opacity: .72;
    transition: opacity .25s, box-shadow .25s;
}

.payment-img:hover {
    box-shadow: 0 0 0 1px rgba(144, 123, 91, .55) !important;
    opacity: .92;
}

input[type="radio"]:checked + .payment-img {
    opacity: 1 !important;
    background: #16191e !important;
    box-shadow: 0 0 0 2px var(--bc-bronze-light) !important;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* ------------------------------ ползунок ---------------------------- */

.irs--round .irs-line {
    background: #22272c;
    border-radius: 0;
}

.irs--round .irs-bar {
    background: linear-gradient(90deg, var(--bc-bronze), var(--bc-bronze-light));
    border-radius: 0;
}

.irs--round .irs-handle {
    width: 16px;
    height: 16px;
    top: 30px;
    border: 3px solid var(--bc-bronze-light);
    border-radius: 0;
    background: #16191e;
    box-shadow: none;
}

.irs--round .irs-min,
.irs--round .irs-max,
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single,
:is(.dark .irs-single),
:is(.dark .irs-max) {
    border-radius: 0 !important;
    background: #1b1f23 !important;
    border: 1px solid rgba(144, 123, 91, .32);
    box-shadow: none !important;
    color: #b9ad94 !important;
    font-family: var(--bc-display);
    font-size: 11px;
    letter-spacing: .06em;
}

.irs--round .irs-from::before,
.irs--round .irs-to::before,
.irs--round .irs-single::before {
    display: none;
}

:is(.dark #bonus_sum),
#bonus_sum {
    --color-accent: var(--bc-bronze);
    border-radius: 0 !important;
    background: #1b1f23 !important;
    border: 1px solid rgba(144, 123, 91, .32);
    box-shadow: none !important;
    color: var(--bc-bronze-light) !important;
}

:is(.dark .donate-bns),
.donate-bns {
    border-radius: 0 !important;
    background: #1b1f23 !important;
    box-shadow: none !important;
    border: 1px solid rgba(144, 123, 91, .22);
    color: #b9c0c7 !important;
}

/* --------------------------- воздух на телефоне ---------------------

   На экране 412 px содержимое ужималось до 236: его обрезали четыре
   вложенных отступа подряд. Внутренние уровни на узком экране ничего
   не разделяют — там и так всё в одну колонку, — поэтому снимаем. */

@media (max-width: 860px) {
    .layout-page {
        padding: 0 !important;
    }

    .layout-page > .layout-content.p-4 {
        padding: 12px;
    }

    .box.space-elements:not(.p-0) {
        padding: 16px;
    }

    .box .box.space-elements:not(.p-0):not(.bc-empty) {
        padding: 0 !important;
        background: none !important;
    }

    .box .box.space-elements:not(.p-0):not(.bc-empty)::before {
        display: none !important;
    }

    .discount-wrapper,
    .discount-info,
    .discount-block {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =====================================================================
   КАРКАС: ДВЕ ПЛАШКИ РЯДОМ

   Содержимое лежало на плашке с отступом от края окна, а боковая
   панель была приклеена к самому краю и тянулась от верха до низа
   экрана. Из-за этого она читалась как часть окна браузера, а не как
   часть страницы.

   Делаем из неё такую же плашку: тот же отступ от края, та же
   заливка, та же волосяная окантовка, тот же верх. Между панелью и
   содержимым — зазор, как между любыми двумя блоками.

   Только на широком экране: ниже 1280 px панель превращается в
   выдвижную шторку поверх страницы, и сплошной фон на ней гасит весь
   кабинет.
   ===================================================================== */

/* Скруглений в оформлении нет нигде, плашка страницы была исключением. */
.layout-page {
    border-radius: 0;
}

@media (min-width: 1280px) {
    /* 24 от края окна + 270 ширина панели + 24 до содержимого.

       С важностью: тема задаёт этот отступ своим правилом, которое
       перебивало наше, и блоки в итоге налезали друг на друга на
       шесть пикселей — зазора между ними не было вовсе. */
    .layout-wrapper {
        padding-left: 318px !important;
    }

    /* Окантовка та же, что у блоков содержимого: бронзовый фон и
       стальной слой поверх с отступом в пиксель. Иначе панель одного
       тона со страницей и читается как её продолжение, а не как
       отдельный блок. */
    .layout-menu {
        left: 24px;
        top: 24px;
        bottom: 24px;
        height: auto;
        padding: 1px;
        overflow: hidden;
        border: 0;
        background: rgba(144, 123, 91, .34);
    }

    .layout-menu::before {
        content: "";
        position: absolute;
        left: 1px;
        top: 1px;
        right: 1px;
        bottom: 1px;
        z-index: 0;
        background: linear-gradient(180deg, #22272c 0%, #1b1f23 100%);
    }

    .layout-menu > * {
        position: relative;
        z-index: 1;
    }

    .layout-menu .menu-heading {
        padding: 18px 16px 14px;
        margin: 0;
    }

    /* Прокручивается только список пунктов, шапка с логотипом и низ с
       кнопкой свёртывания остаются на месте. */
    .layout-menu .menu {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 12px;
    }

    .layout-menu .menu-bottom {
        flex: 0 0 auto;
        padding: 12px;
        margin: 0;
        border: 0;
    }

    /* Разделители внутри панели шли от края до края и спорили с её
       собственной окантовкой — поджимаем их к содержимому. */
    .layout-menu .menu-heading,
    .layout-menu .menu-bottom {
        border-top: 0;
        border-bottom: 0;
    }

    .layout-menu .menu-heading {
        box-shadow: inset 0 -1px 0 rgba(144, 123, 91, .16);
    }

    .layout-menu .menu-bottom {
        box-shadow: inset 0 1px 0 rgba(144, 123, 91, .16);
    }
}

/* =====================================================================
   ВЫБРАННЫЙ ПУНКТ МЕНЮ

   Тема заливает его сплошной бронзой, а значок при этом оставался
   бронзовым же — и пропадал. Текст белым по бронзе читался немногим
   лучше. Делаем как у кнопки пополнения: светлая плашка, тёмные
   буквы и тёмный значок.
   ===================================================================== */

.layout-menu .menu-inner-item._is-active > .menu-inner-link,
.dark .layout-menu .menu-inner-item._is-active > .menu-inner-link,
._is-active > .menu-inner-link,
.dark ._is-active > .menu-inner-link {
    background: linear-gradient(180deg, #d2c4a6, #b8a888) !important;
    color: #16191e !important;
    box-shadow: inset 3px 0 0 #6f5d42 !important;
    font-weight: 600;
}

.layout-menu .menu-inner-item._is-active svg,
.layout-menu .menu-inner-item._is-active .menu-inner-link svg,
._is-active > .menu-inner-link svg {
    color: #16191e !important;
}

/* Протяжка под курсором на выбранном пункте только мешает. */
.menu-inner-item._is-active > .menu-inner-link::before {
    display: none !important;
}

/* =====================================================================
   ВХОД И РЕГИСТРАЦИЯ

   Эти страницы игрок видит раньше всего остального. Раньше форма
   висела маленькой коробкой в верхней трети пустого экрана, а кнопка
   входа ничем не отличалась от служебных.

   Теперь это цельная композиция: герб, заголовок, форма и переход
   между входом и регистрацией — всё по центру свободного места.
   Позади — тот же герб крупно и едва заметно, чтобы экран не был
   плоской пустотой.
   ===================================================================== */

.bc-auth {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
    padding: 32px 0;
}

.bc-auth::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 620px;
    height: 620px;
    max-width: 120%;
    transform: translate(-50%, -50%);
    background: url("/img/logo/mark.webp") center / contain no-repeat;
    opacity: .04;
    pointer-events: none;
}

/* Карточка: та же окантовка подложкой, что у блоков кабинета. */
.bc-auth__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    padding: 1px;
    background: rgba(144, 123, 91, .34);
}

.bc-auth__card::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    background:
        radial-gradient(120% 120% at 50% 0%, #262c33 0%, #1b1f23 55%, #16191e 100%);
}

.bc-auth__card > * {
    margin-left: 34px;
    margin-right: 34px;
}

.bc-auth__mark {
    display: block;
    width: 64px;
    height: 64px;
    margin: 34px auto 16px;
    background: url("/img/logo/avatar512.webp") center / contain no-repeat;
    filter: drop-shadow(0 0 18px rgba(144, 123, 91, .45));
}

.bc-auth__title {
    margin: 0 34px 6px;
    font-family: var(--bc-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    color: #f0e7d4;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 22px rgba(144, 123, 91, .35);
}

.bc-auth__sub {
    margin: 0 34px 22px;
    font-family: var(--bc-display);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: #818990;
}

/* Форму отдаёт движок — правим то, что он выводит. */
.bc-auth__card form,
.bc-auth__card .form {
    margin: 0 34px;
}

.bc-auth__card .form-group,
.bc-auth__card .moonshine-field {
    margin-bottom: 16px;
}

.bc-auth__card label,
.bc-auth__card .form-label {
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d959c;
}

/* Галочки и переключатели исключены: иначе общая высота поля
   растягивает их в вертикальную полоску. */
.bc-auth__card .form-input,
.bc-auth__card input:not([type="checkbox"]):not([type="radio"]),
.bc-auth__card select {
    height: 44px;
    font-family: var(--bc-display);
    font-size: 15px;
}

/* Кнопка входа — единственное сплошное пятно на странице. */
.bc-auth__card button[type="submit"],
.bc-auth__card .btn-primary,
.bc-auth__card form .btn {
    width: 100%;
    height: 46px;
    min-height: 46px;
    margin-top: 4px;
    border: 0;
    background: linear-gradient(180deg, var(--bc-bronze-light), var(--bc-bronze));
    color: #16191e !important;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: filter .25s, transform .25s;
}

.bc-auth__card button[type="submit"]::before,
.bc-auth__card form .btn::before {
    display: none !important;
}

.bc-auth__card button[type="submit"]:hover,
.bc-auth__card form .btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.bc-auth__card button[type="submit"] svg,
.bc-auth__card form .btn svg {
    color: #16191e;
}

/* Переход на соседнюю страницу. */
.bc-auth__switch {
    margin: 22px 34px 32px;
    padding-top: 18px;
    border-top: 1px solid rgba(144, 123, 91, .16);
    font-family: var(--bc-display);
    font-size: 13px;
    text-align: center;
    color: #818990;
}

.bc-auth__switch a {
    margin-left: 6px;
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(198, 184, 154, .35);
}

.bc-auth__switch a:hover {
    color: #f0e7d4;
    border-bottom-color: var(--bc-bronze-light);
}

@media (max-width: 640px) {
    .bc-auth {
        min-height: 0;
        padding: 12px 0 24px;
    }

    .bc-auth__card > *,
    .bc-auth__title,
    .bc-auth__sub,
    .bc-auth__card form,
    .bc-auth__card .form {
        margin-left: 20px;
        margin-right: 20px;
    }

    .bc-auth__switch {
        margin: 20px 20px 26px;
    }

    /* Поля карточки задаются правилом `.bc-auth__card > *`, и оно же
       отменяло `auto` у герба — на узком экране тот уезжал влево.
       Возвращаем центр. */
    .bc-auth__mark {
        margin-top: 26px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Длинные заголовки («Создание нового пароля») в 21 пикселе с широкой
   разрядкой не помещаются в карточку на телефоне. */
@media (max-width: 480px) {

    .bc-auth__title {
        font-size: 17px;
        letter-spacing: .1em;
    }

    .bc-auth__sub {
        font-size: 12px;
    }
}

/* Плотность формы. Движок ставит отступ каждому полю, сверху ещё один
   обёртке, и между строками набегало по три с лишним десятка
   пикселей — форма растягивалась, а перед кнопкой зияла дыра. */
.bc-auth__card .form-group.moonshine-field {
    margin: 0 0 14px !important;
}

.bc-auth__card .form-group-expansion {
    margin-bottom: 0 !important;
}

.bc-auth__card form hr.divider {
    margin: 4px 0 14px !important;
}

.bc-auth__card form .grid.grid-cols-12 {
    margin-top: 2px !important;
}

.bc-auth__card form .mt-3 {
    margin-top: 0 !important;
}

/* Подпись «Логин» приходит обычным текстом внутри обёртки поля, а не
   меткой, поэтому общая настройка меток её не ловит. */
.bc-auth__card .form-wrapper,
.bc-auth__card .form-group .form-wrapper {
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d959c;
}

.bc-auth__card .form-wrapper input,
.bc-auth__card .form-wrapper select,
.bc-auth__card .form-wrapper .choices {
    font-family: var(--bc-display);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bc-ink);
}

/* =====================================================================
   ТАБЛИЦЫ И РЕЙТИНГ

   Таблицы приходят из шаблона со светло-серыми линиями (#e2e8f0) —
   на тёмной странице это сетка в клетку. Переписываем на бронзовый
   волосок, заголовки делаем подписями, строки подсвечиваем наведением.

   Верхние плитки рейтинга без данных раньше крутили вечный загрузчик
   и показывали ноль — теперь там слово.
   ===================================================================== */

.bc-nodata {
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7d858c;
}

/* Заголовок страницы рейтинга шёл сериф-курсивом вперемешку с
   остальными заголовками кабинета. */
.layout-content h1.title,
.layout-content .title,
.layout-content h2:not(.box-title) {
    font-family: var(--bc-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bc-ink);
}

.layout-content .title svg {
    color: var(--bc-bronze);
}

/* Подписи блоков рейтинга. */
.layout-content fieldset > legend,
.layout-content legend {
    padding: 0 10px;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b9ad94;
}

/* ------------------------------- таблицы ---------------------------- */

.table-list table,
table.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--bc-display);
}

.table-list thead th,
.table-list thead td,
table.table thead th {
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(144, 123, 91, .34) !important;
    background: rgba(144, 123, 91, .06);
    font-family: var(--bc-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b9ad94 !important;
    white-space: nowrap;
}

.table-list thead th svg,
table.table thead th svg {
    color: var(--bc-bronze);
}

.table-list tbody th,
.table-list tbody td,
table.table tbody td,
table.table tbody th {
    padding: 11px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(144, 123, 91, .12) !important;
    background: transparent !important;
    font-family: var(--bc-display) !important;
    font-size: 14px !important;
    font-weight: 400;
    color: #b9c0c7 !important;
}

.table-list tbody tr,
table.table tbody tr {
    background: transparent !important;
    transition: background .2s;
}

.table-list tbody tr:hover,
table.table tbody tr:hover {
    background: rgba(144, 123, 91, .07) !important;
}

/* Первая колонка — место в таблице: цифра бронзой и моноширинно,
   чтобы ряд не прыгал. */
.table-list tbody tr > th:first-child,
.table-list tbody tr > td:first-child {
    width: 1%;
    font-family: var(--bc-display) !important;
    font-size: 15px !important;
    font-weight: 600;
    color: var(--bc-bronze-light) !important;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Круглых портретов в оформлении нет нигде — выравниваем. */
.table-list img.rounded-full,
.layout-content .rounded-full.w-7,
.layout-content .rounded-full.w-8,
.layout-content .rounded-full.w-6 {
    border-radius: 0 !important;
    border: 1px solid rgba(144, 123, 91, .3);
}

/* Точка «в сети» у персонажа была кружком с белым кольцом. */
.layout-content .bg-green-500.rounded-full {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #7aa86c !important;
    border: 0 !important;
}

/* Рамка вокруг картинок предметов. */
.imgs {
    border: 1px solid rgba(144, 123, 91, .3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Заголовок раздела внутри страницы: шрифт уже наш, но шёл строчными
   и без разрядки, поэтому выбивался из ряда прочих заголовков. */
.layout-content h1.truncate,
.layout-content h1.truncate > div {
    font-family: var(--bc-display) !important;
    font-size: 17px !important;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bc-ink);
}

.layout-content h1.truncate svg {
    color: var(--bc-bronze);
}

/* Таблица шире своей колонки: в рейтинге их две в ряд, а столбцов до
   шести, и правый — тот, ради которого таблица и нужна, — обрезался.
   Поджимаем ячейки и разрешаем таблице прокручиваться внутри себя. */

.table-list {
    overflow-x: auto;
    scrollbar-width: thin;
}

.table-list::-webkit-scrollbar {
    height: 5px;
}

.table-list::-webkit-scrollbar-thumb {
    background: rgba(144, 123, 91, .4);
}

.table-list table {
    min-width: 100%;
}

.table-list thead th,
.table-list thead td {
    padding: 9px 8px !important;
    font-size: 10px !important;
    letter-spacing: .1em;
}

.table-list tbody th,
.table-list tbody td {
    padding: 8px !important;
    font-size: 13px !important;
}

/* Последний столбец — значение, ради которого таблицу и смотрят:
   прижат к правому краю, бронзой и моноширинно. */
.table-list tbody tr > *:last-child,
.table-list thead tr > *:last-child {
    text-align: right;
    padding-right: 12px !important;
}

.table-list tbody tr > *:last-child {
    font-family: var(--bc-display) !important;
    font-weight: 600;
    color: var(--bc-bronze-light) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Портреты поменьше: они здесь опознавательный знак, а не картинка. */
.table-list img.rounded-full.w-7,
.table-list img.w-7 {
    width: 22px !important;
    height: 22px !important;
}

.table-list .imcr {
    gap: 6px;
}

/* Длинное название класса обрезаем многоточием, а не разносим
   таблицу вширь. */
.table-list tbody tr > *:nth-last-child(2) {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Раскладка таблиц рейтинга.

   Таблиц шесть, в каждой до шести столбцов, и вдвоём в ряду им тесно:
   правый столбец — тот, ради которого таблицу и смотрят, — уезжал за
   край. Два в ряд оставляем только на действительно широком экране,
   иначе каждая таблица занимает строку целиком. */

@media (max-width: 1699px) {
    /* Только колонки таблиц: верхние плитки идут с другой долей и
       должны остаться по трое в ряд. */
    .bc-rating .grid.grid-cols-12 > [class*="xl:col-span-6"] {
        grid-column: span 12 / span 12;
    }
}

/* Главный столбец у таблиц рейтинга стоит предпоследним — последним
   идёт дополнительный. Поэтому общее правило «последний столбец —
   значение» здесь снимаем и красим оба как числа. */
.bc-rating .table-list tbody tr > *:last-child,
.bc-rating .table-list tbody tr > *:nth-last-child(2) {
    max-width: none;
    overflow: visible;
    font-variant-numeric: tabular-nums;
}

.bc-rating .table-list tbody tr > *:nth-last-child(2) {
    white-space: nowrap;
    text-overflow: clip;
}

/* Верхние плитки рейтинга: подпись, герой, число, арт.

   Раньше подпись приходила сюда «кнопкой» плитки и несла три
   одинаковых звезды с бесконечной анимацией. Звёзды ничего не
   значили, а при перерисовке вылезали за край плитки: значок
   приходил шириной 24 px в коробку шириной 20 px. Теперь в шапке
   плитки подпись и герой, внизу — значок по смыслу плитки и число. */

.bc-rating .report-card {
    gap: 16px !important;
    /* строка сетки одна, и по умолчанию она встаёт по высоте
       содержимого — низ плитки оставался пустым */
    align-content: stretch;
}

.bc-rating .report-card-body {
    height: 100% !important;
}

/* Содержимое плитки разведено по высоте: подпись с героем вверху,
   число внизу. Колонка перевёрнута (сначала число, потом волосок и
   шапка), поэтому свободное место забирает верхний отступ числа. */
.bc-rating .report-card-value {
    margin-top: auto !important;
}

.bc-rating .report-card-title {
    width: 100%;
    min-width: 0;
}

.bc-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Подпись плитки: короткая бронзовая черта и слово в разрядку. */
.bc-top__tag {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bc-bronze);
}

.bc-top__tag::before {
    content: "";
    width: 16px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--bc-bronze);
}

.bc-top__who {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* Портрет прямоугольный: округлых форм в кабинете нет. */
.bc-top__ava {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px rgba(144, 123, 91, .55);
}

.bc-top__crest {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.bc-top__crest img {
    display: block;
    width: auto;
    max-height: 16px;
}

.bc-top__name {
    font-family: var(--bc-display);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e4dac2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.bc-top__name:hover {
    color: #f3ecdd;
}

.bc-top__name_empty {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: none;
    color: #8d959c;
}

/* Число со значком: значок задаёт смысл плитки вместо трёх звёзд. */
.bc-top__val {
    display: flex;
    align-items: center;
    gap: 11px;
    line-height: 1;
}

/* Значки приходят со своими width и height в атрибутах — без этого
   правила каждый встаёт своим размером и вылезает за коробку. */
.bc-top__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--bc-bronze);
}

.bc-top__ico > div,
.bc-top__ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .bc-top__ico {
        width: 22px;
        height: 22px;
    }
}

/* =====================================================================
   ПРОФИЛЬ

   Подписи полей здесь сделаны разделителем с надписью — отсюда чёрточка
   слева и шрифт по умолчанию. Приводим к виду меток остальных форм.
   ===================================================================== */

.layout-content div.divider,
.layout-content .divider-label,
.layout-content .divider > span {
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d959c;
}

/* Вкладки «Общие» и «Пароль». */
.layout-content .tabs-button,
.layout-content [role="tablist"] a,
.layout-content .tabs a {
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8d959c;
}

.layout-content .tabs-item svg,
.layout-content [role="tablist"] a svg,
.layout-content .tabs a svg {
    color: var(--bc-bronze);
}

.layout-content .tabs-button._is-active,
.layout-content [role="tablist"] a[aria-selected="true"],
.layout-content .tabs a._is-active {
    color: var(--bc-bronze-light);
    border-bottom-color: var(--bc-bronze) !important;
}

/* Выбор файла: браузерная кнопка выбивалась из всего остального. */
.layout-content input[type="file"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px dashed rgba(144, 123, 91, .35);
    background: rgba(255, 255, 255, .015);
    font-family: var(--bc-display);
    font-size: 13px;
    color: #8d959c;
    cursor: pointer;
}

.layout-content input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 1px solid rgba(144, 123, 91, .45);
    border-radius: 0;
    background: rgba(144, 123, 91, .12);
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d9cdb4;
    cursor: pointer;
    transition: background .25s, border-color .25s;
}

.layout-content input[type="file"]::file-selector-button:hover {
    border-color: var(--bc-bronze-light);
    background: rgba(144, 123, 91, .26);
}

/* Кнопка сохранения — главное действие страницы. */
.layout-content form .btn-close,
.layout-content form button[type="submit"].btn-close {
    height: 46px;
    min-height: 46px;
    border: 0;
    background: linear-gradient(180deg, var(--bc-bronze-light), var(--bc-bronze));
    color: #16191e !important;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: filter .25s, transform .25s;
}

.layout-content form .btn-close::before {
    display: none !important;
}

.layout-content form .btn-close:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* У подписи-разделителя слева оставался обрубок линии в десяток
   пикселей: он ничего не отделяет, только мусорит. */
.layout-content form div.divider {
    border: 0 !important;
    background: none !important;
}

.layout-content form div.divider::before,
.layout-content form div.divider::after {
    display: none !important;
}

/* =====================================================================
   ТАБЛИЦА ИГРОВЫХ АККАУНТОВ

   Кнопка смены пароля занимала всю колонку и упиралась в край
   таблицы, из-за неё же строка была вдвое выше остальных.
   ===================================================================== */

.table-list .btn-start,
.table-list .btn-start.w-full {
    /* ячейка — флекс-контейнер, и кнопка растягивалась по нему даже
       с шириной auto; прижимаем её к правому краю своим размером */
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto;
    width: auto !important;
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(144, 123, 91, .4) !important;
    border-radius: 0 !important;
    background: rgba(144, 123, 91, .1) !important;
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d9cdb4 !important;
    white-space: nowrap;
    transition: border-color .25s, background .25s;
}

.table-list .btn-start::before {
    display: none !important;
}

.table-list .btn-start:hover {
    border-color: var(--bc-bronze-light) !important;
    background: rgba(144, 123, 91, .24) !important;
    color: #f3ecdd !important;
}

.table-list .btn-start svg {
    width: 14px;
    height: 14px;
}

/* Значок «нет данных» в пустых ячейках был заметнее самих данных. */
.table-list [class*="not-file"],
.table-list svg[data-slot="icon"][style*="opacity"] {
    opacity: .22 !important;
}

/* Логин игрового аккаунта — имя, а не обычный текст. */
.table-list tbody tr > th:nth-child(2) {
    font-family: var(--bc-display);
    letter-spacing: .04em;
    color: var(--bc-ink) !important;
}

/* ─────────────────────────────────────────────────────────────
   Пополнение баланса: крупная сумма и шкала со ступенями бонуса.
   Ступени нанесены прямо на ползунок, поэтому текстовый пример
   расчёта со страницы убран — он дублировал шкалу.
   ───────────────────────────────────────────────────────────── */

.bc-coin {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: block;
}

.bc-coin_l {
    width: 30px;
    height: 30px;
}

.bc-dn__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.bc-dn__amt {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Сумма — это и есть поле ввода: её можно набрать руками. */
.bc-dn__num,
.bc-dn__num:focus,
.bc-dn__num:hover {
    width: auto;
    min-width: 2.2ch !important;
    max-width: 190px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--bc-display) !important;
    font-weight: 300 !important;
    font-size: 44px !important;
    line-height: 1 !important;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
}

.bc-dn__num::-webkit-outer-spin-button,
.bc-dn__num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bc-dn__num[type="number"] {
    -moz-appearance: textfield;
}

.bc-dn__unit {
    font-family: var(--bc-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-muted);
}

.bc-dn__out {
    text-align: right;
}

.bc-dn__out u {
    display: block;
    text-decoration: none;
    font-family: var(--bc-display);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
}

.bc-dn__out b {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 9px;
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    color: #f6e7c7;
    font-variant-numeric: tabular-nums;
}

.bc-dn__out s {
    display: block;
    margin-top: 6px;
    text-decoration: none;
    font-family: var(--bc-display);
    font-size: 12px;
    color: #79cf8e;
}

.bc-dn__out s:empty {
    display: none;
}

/* ── шкала ── */

.bc-sc {
    position: relative;
    margin: 22px 0 6px;
    padding-bottom: 58px;
}

.bc-sc .irs {
    position: relative;
    z-index: 1;
    height: 30px;
}

.bc-sc .irs--round .irs-line,
.bc-sc .irs--round .irs-bar {
    top: 12px;
    height: 6px;
    border-radius: 0;
}

.bc-sc .irs--round .irs-line {
    background: #1d2329;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}

.bc-sc .irs--round .irs-bar {
    background: linear-gradient(135deg, #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
}

.bc-sc .irs--round .irs-handle {
    top: 3px;
    width: 14px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(94, 64, 20, .5);
    cursor: ew-resize;
}

.bc-sc .irs--round .irs-handle:hover,
.bc-sc .irs--round .irs-handle:active,
.bc-sc .irs--round .irs-handle.state_hover {
    background: linear-gradient(135deg, #c98a3a 0%, #f2cb86 26%, #fff0cf 48%, #e6b76a 72%, #b07c32 100%);
}

.bc-sc .irs--round .irs-min,
.bc-sc .irs--round .irs-max,
.bc-sc .irs--round .irs-from,
.bc-sc .irs--round .irs-to,
.bc-sc .irs--round .irs-single,
.bc-sc .irs-grid {
    display: none !important;
}

.bc-sc__marks {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.bc-sc__mk {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.bc-sc__mk i {
    display: block;
    position: relative;
    top: 6px;
    width: 2px;
    height: 18px;
    margin: 0 auto;
    background: #39414a;
}

.bc-sc__mk u {
    display: block;
    margin-top: 13px;
    text-decoration: none;
    font-family: var(--bc-display);
    font-size: 11px;
    color: #6b737a;
    font-variant-numeric: tabular-nums;
}

.bc-sc__mk b {
    display: block;
    margin-top: 6px;
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 12px;
    color: #596168;
}

.bc-sc__mk.is-on i {
    background: #e9bd72;
    box-shadow: 0 0 9px rgba(233, 189, 114, .8);
}

.bc-sc__mk.is-on u {
    color: #b9c0c7;
}

.bc-sc__mk.is-on b {
    color: #e9bd72;
}

/* ── валюты оплаты ── */

.currency-buttons.bc-curs {
    display: grid;
    /* Ровно две колонки на любой ширине: подложка тянется во всю
       колонку, и логотипы на ней остаются читаемыми. Авторасстановка
       на узкой карточке схлопывала их то в одну, то в пять. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    gap: 7px;
    margin-bottom: 18px;
}

button.currency-btn.bc-cur {
    display: block;
    padding: 9px 6px 8px;
    text-align: center;
    background: #171c21;
    border: 1px solid rgba(198, 184, 154, .14);
    border-radius: 0;
    transition: border-color .2s ease, background .2s ease;
}

.bc-cur b {
    display: block;
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    color: #9aa3ab;
}

.bc-cur s {
    display: block;
    margin-top: 6px;
    text-decoration: none;
    font-family: var(--bc-display);
    font-size: 12px;
    color: #5f676e;
    font-variant-numeric: tabular-nums;
}

button.currency-btn.bc-cur.active {
    transform: none;
    border-color: #e9bd72;
    background: rgba(233, 189, 114, .1);
}

.currency-btn.bc-cur.active b {
    color: #f2e2c2;
}

.currency-btn.bc-cur.active s {
    color: var(--bc-bronze-light);
}

/* ── подарочные предметы за сумму ── */

.bc-gift {
    margin: 18px 0 0;
    padding: 14px 16px;
    background: #151a1f;
    border: 1px solid rgba(198, 184, 154, .15);
}

.bc-gift__ttl {
    font-family: var(--bc-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
    margin-bottom: 12px;
}

.bc-gift__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bc-gift__i {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bc-gift__i img {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.bc-gift__n {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--bc-display);
    font-size: 14px;
    color: var(--bc-ink);
}

.bc-gift__n b {
    color: #e9bd72;
}

.bc-gift__c {
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 14px;
    color: #f6e7c7;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .bc-dn__top {
        gap: 12px;
    }

    .bc-dn__num,
    .bc-dn__num:focus,
    .bc-dn__num:hover {
        max-width: 130px !important;
        font-size: 34px !important;
    }

    .bc-sc__mk b {
        font-size: 11px;
    }
}

/* Крайние подписи шкалы не должны вылезать за карточку. */
.bc-sc__mk_s {
    transform: translateX(0);
    text-align: left;
}

.bc-sc__mk_e {
    transform: translateX(-100%);
    text-align: right;
}

/* ── правая колонка: курс, накопительная скидка, расчёт, история ── */

.bc-coin_s {
    width: 17px;
    height: 17px;
}

.bc-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 2px 0 18px;
    font-family: var(--bc-display);
    font-size: 14px;
    color: var(--bc-muted);
}

.bc-rate span {
    color: var(--bc-ink);
}

.bc-yb {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(100deg, rgba(144, 123, 91, .22), rgba(144, 123, 91, .03));
    border-left: 2px solid #e9bd72;
}

.bc-yb__pc {
    flex: 0 0 auto;
    font-family: var(--bc-display);
    font-weight: 300;
    font-size: 42px;
    line-height: 1;
    color: #f6e7c7;
}

.bc-yb__tx u {
    display: block;
    text-decoration: none;
    font-family: var(--bc-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
}

.bc-yb__tx s {
    display: block;
    margin-top: 8px;
    text-decoration: none;
    font-family: var(--bc-display);
    font-size: 13px;
    line-height: 1.45;
    color: var(--bc-muted);
}

.bc-pg {
    margin-top: 16px;
}

.bc-pg__t {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-family: var(--bc-display);
    font-size: 12px;
    color: var(--bc-muted);
}

.bc-pg__t b {
    color: #e9bd72;
    font-weight: 600;
}

.bc-pg__b {
    position: relative;
    height: 6px;
    background: #1d2329;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}

.bc-pg__b em {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(135deg, #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
}

.bc-flow {
    display: grid;
    grid-template-columns: 1fr 26px 1fr 26px 1fr;
    align-items: center;
    margin-top: 20px;
}

.bc-flow__c {
    padding: 14px 8px;
    text-align: center;
    background: #151a1f;
    border: 1px solid rgba(198, 184, 154, .15);
    min-width: 0;
}

.bc-flow__c u {
    display: block;
    text-decoration: none;
    font-family: var(--bc-display);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bc-muted);
}

.bc-flow__c b {
    display: block;
    margin-top: 9px;
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: var(--bc-ink);
    font-variant-numeric: tabular-nums;
}

.bc-flow__c_g b {
    color: #79cf8e;
}

.bc-flow__c_t {
    border-color: rgba(233, 189, 114, .45);
    background: rgba(233, 189, 114, .07);
}

.bc-flow__c_t b {
    color: #f6e7c7;
}

.bc-flow__a {
    text-align: center;
    font-family: var(--bc-display);
    font-size: 15px;
    color: #4f575e;
}

.bc-hhd {
    margin: 22px 0 2px;
    padding-top: 18px;
    border-top: 1px solid rgba(198, 184, 154, .15);
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
}

.bc-hist {
    max-height: 330px;
    overflow-y: auto;
}

.bc-hist__r {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(198, 184, 154, .12);
}

.bc-hist__r:last-child {
    border-bottom: 0;
}

.bc-hist__d {
    font-family: var(--bc-display);
    font-size: 12px;
    color: #6f777e;
    font-variant-numeric: tabular-nums;
}

.bc-hist__m {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-family: var(--bc-display);
    font-size: 13px;
    color: #aeb6bd;
}

.bc-hist__s {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--bc-ink);
    font-variant-numeric: tabular-nums;
}

.bc-hempty {
    padding: 24px 0;
    text-align: center;
    font-family: var(--bc-display);
    font-size: 13px;
    color: #6f777e;
}

@media (max-width: 479.98px) {
    .bc-flow {
        grid-template-columns: 1fr 20px 1fr 20px 1fr;
    }

    .bc-flow__c b {
        font-size: 16px;
    }

    .bc-yb__pc {
        font-size: 34px;
    }
}

/* Плитка валюты — готовая подложка с логотипами систем, под ней итог
   в этой валюте. Рамка нарисована на самой картинке, поэтому своей
   рамки не добавляем: вышла бы двойная линия. */
button.currency-btn.payment-imgs.bc-curp {
    padding: 0 0 9px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.bc-curp img {
    display: block;
    width: 100%;
    height: auto;
}

.bc-curp s {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    margin-top: 9px;
    text-decoration: none;
    font-family: var(--bc-display);
}

.bc-curp s b {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .1em;
    color: #aab2ba;
}

.bc-curp s em {
    font-style: normal;
    font-size: 13px;
    color: #6b737a;
    font-variant-numeric: tabular-nums;
}

button.currency-btn.payment-imgs.bc-curp:hover {
    box-shadow: none;
}

button.currency-btn.payment-imgs.bc-curp:hover img {
    opacity: .92;
}

button.currency-btn.payment-imgs.bc-curp.active,
:is(.dark button.currency-btn.payment-imgs.bc-curp.active) {
    background: transparent;
    box-shadow: none;
}

.bc-curp.active img {
    box-shadow: 0 0 0 2px var(--bc-bronze-light);
}

.bc-curp.active s b {
    color: #f2e2c2;
}

.bc-curp.active s em {
    color: var(--bc-bronze-light);
}

/* ── шкала: доводка и адаптация ── */

/* Без ступеней под шкалой одна строка подписей, со ступенями две. */
.bc-sc {
    padding-bottom: 36px;
}

.bc-sc_tiers {
    padding-bottom: 58px;
}

/* Концы шкалы отмечены засечками — видно, где начало и где предел. */
.bc-sc .irs--round .irs-line:before,
.bc-sc .irs--round .irs-line:after {
    content: "";
    position: absolute;
    top: -5px;
    width: 2px;
    height: 16px;
    background: #39414a;
}

.bc-sc .irs--round .irs-line:before {
    left: 0;
}

.bc-sc .irs--round .irs-line:after {
    right: 0;
}

/* Пальцем в ползунок шириной 14 пикселей не попасть. */
@media (pointer: coarse) {
    .bc-sc .irs--round .irs-handle {
        top: -1px;
        width: 22px;
        height: 32px;
    }
}

@media (max-width: 575.98px) {
    .bc-sc__mk u {
        font-size: 10px;
    }

    .bc-sc__mk b {
        font-size: 11px;
    }

}

/* Узкая карточка: число и «к зачислению» встают друг под друга.
   Меряем саму карточку, а не окно: в двухколоночной раскладке она
   узкая и на широком экране. */
.bc-dn {
    container-type: inline-size;
}

@container (max-width: 400px) {
    .bc-dn__top {
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
    }

    .bc-dn__out {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 12px;
        padding-top: 13px;
        border-top: 1px solid rgba(198, 184, 154, .15);
        text-align: left;
    }

    .bc-dn__out b {
        margin-top: 0;
    }

    .bc-dn__out s {
        flex: 1 1 100%;
        margin-top: 0;
    }
}

/* Главная кнопка страницы была самой незаметной на ней. */
.layout-content .btn.btn-pay,
.dark .layout-content .btn.btn-pay {
    height: 54px;
    background: linear-gradient(135deg, #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
    color: #17120a;
    font-size: 14px;
    letter-spacing: .12em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

.layout-content .btn.btn-pay:before,
.layout-content .btn.btn-pay:after {
    display: none;
}

.layout-content .btn.btn-pay:hover {
    filter: brightness(1.07);
}

/* ── ступени бонуса списком ── */

.bc-tiers {
    margin-top: 18px;
    padding: 15px 17px 13px;
    background: #151a1f;
    border: 1px solid rgba(198, 184, 154, .15);
}

.bc-tiers__ttl {
    margin-bottom: 11px;
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
}

.bc-tiers__r {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(198, 184, 154, .1);
}

.bc-tiers__r:last-of-type {
    border-bottom: 0;
}

.bc-tiers__f {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--bc-display);
    font-size: 14px;
    color: #99a1a8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bc-tiers__f img {
    opacity: .55;
    transition: opacity .2s ease;
}

.bc-tiers__d {
    flex: 1 1 auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(198, 184, 154, .3) 0 2px, transparent 2px 6px);
}

.bc-tiers__p {
    font-family: var(--bc-display);
    font-weight: 600;
    font-size: 16px;
    color: #6d757c;
    font-variant-numeric: tabular-nums;
}

/* Ступень, под которую уже попадает набранная сумма. */
.bc-tiers__r.is-on .bc-tiers__f {
    color: #e2d7bd;
}

.bc-tiers__r.is-on .bc-tiers__f img {
    opacity: 1;
}

.bc-tiers__r.is-on .bc-tiers__p {
    color: #f6e7c7;
    text-shadow: 0 0 14px rgba(233, 189, 114, .45);
}

.bc-tiers__note {
    margin: 11px 0 0;
    font-family: var(--bc-display);
    font-size: 12px;
    line-height: 1.5;
    color: #79828a;
}

/* Шапка таблицы: тема красит саму строку `thead` в синий
   (`.table-sticky > table > thead` в dashboard.css), а наш бронзовый
   фон лежит на ячейках и полупрозрачный — синий просвечивал. */
.table-sticky > table > thead,
.table-sticky > table > thead:is(.dark *),
.table-list thead,
table.table thead {
    background: transparent !important;
}

/* И сама таблица: `.dark table` в dashboard.css подкладывает под неё
   синевато-стальной прямоугольник со скруглением в пять пикселей.
   Таблица лежит на плите блока — вторая подложка ей не нужна, а
   скругления в оформлении нет нигде. */
table.table-list,
.dark table.table-list,
.layout-content table,
.dark .layout-content table {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
}

/* ================ Рейтинг: вкладки и таблицы ================

   Было шесть таблиц одна под другой, каждая в своей коробке
   MoonShine со скруглением и голубой рамкой — шесть экранов
   прокрутки и чужой язык оформления.

   Стало: вкладки сверху, один список на экране. Таблица без коробки
   и без рамок — только волосок под шапкой и подсветка строки при
   наведении. Первые три места отмечены бронзой, серебром и медью.

   Разметка: resources/views/panel/general/rating/lists.blade.php,
   строки — шесть шаблонов рядом с ним, общие ячейки в cells/.      */

.rt {
    margin-top: 26px;
}

/* ---- заголовок раздела ---- */

.rt__head {
    margin-bottom: 18px;
}

.rt__ttl {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bc-ink);
}

.rt__lead {
    max-width: 68ch;
    margin: 7px 0 0;
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--bc-muted);
}

/* ---- вкладки ----

   Горизонтальная лента. На узких экранах она прокручивается пальцем:
   шесть разделов в строку не помещаются, а переносить их в две-три
   строки — значит отдать под переключатель треть экрана. */

/* Затемнение у правого края ленты: пока вкладки уходят за экран, край
   притемнён — видно, что список продолжается. Класс ставит скрипт,
   когда прокручивать действительно есть куда. */
.rt__tabwrap {
    position: relative;
}

.rt__tabwrap:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 2px;
    width: 46px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    background: linear-gradient(90deg, rgba(10, 12, 15, 0) 0%, rgba(10, 12, 15, .8) 100%);
}

.rt__tabwrap.is-more:after {
    opacity: 1;
}

.rt__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(144, 123, 91, .22);
}

.rt__tabs::-webkit-scrollbar {
    display: none;
}

.rt__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 15px 12px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bc-muted);
    background: transparent;
    transition: color .22s, background .22s;
}

.rt__tab:hover {
    color: var(--bc-bronze-light);
    background: rgba(144, 123, 91, .07);
}

/* Открытая вкладка держится на бронзовой подчёркивающей полосе: она
   лежит ровно на линии, отделяющей ленту от таблицы, и связывает
   кнопку со списком. */
.rt__tab.is-on {
    color: #f0e7d4;
    background: linear-gradient(180deg, rgba(144, 123, 91, .16) 0%, rgba(144, 123, 91, .04) 100%);
}

.rt__tab.is-on:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #907b5b 0%, #efe2c4 50%, #907b5b 100%);
}

.rt__tab-ico {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
    opacity: .85;
}

.rt__tab-ico svg,
.rt__tab-ico img {
    width: 16px;
    height: 16px;
}

/* Счётчик строк: сразу видно, в каком разделе данные есть. */
.rt__tab-n {
    padding: 2px 6px 1px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bc-bronze);
    background: rgba(144, 123, 91, .16);
}

.rt__tab.is-on .rt__tab-n {
    color: #17120a;
    background: linear-gradient(180deg, #efe2c4 0%, #c6b89a 100%);
}

/* ---- панели ---- */

.rt__pane {
    display: none;
}

.rt__pane.is-on {
    display: block;
    animation: rt-fade .22s ease-out;
}

@keyframes rt-fade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Таблица шире экрана прокручивается внутри себя, а не тянет за собой
   всю страницу. */
.rt__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(144, 123, 91, .5) transparent;
}

.rt__scroll::-webkit-scrollbar {
    height: 6px;
}

.rt__scroll::-webkit-scrollbar-thumb {
    background: rgba(144, 123, 91, .5);
}

/* ---- таблица ---- */

.rt__tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--bc-display);
}

.rt__tbl thead {
    background: transparent;
}

.rt__tbl thead th {
    padding: 13px 14px 11px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--bc-bronze);
    white-space: nowrap;
    border-bottom: 1px solid rgba(144, 123, 91, .28);
    background: transparent;
}

.rt__hi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rt__hi svg,
.rt__hi img {
    width: 14px;
    height: 14px;
    opacity: .8;
}

.rt__tbl tbody td {
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 400;
    color: #b9c0c7;
    border-bottom: 1px solid rgba(198, 184, 154, .07);
    vertical-align: middle;
}

.rt__tbl tbody tr {
    transition: background .18s;
}

.rt__tbl tbody tr:hover {
    background: rgba(144, 123, 91, .08);
}

.rt__tbl tbody tr:last-child td {
    border-bottom: 0;
}

/* Числовые колонки вправо: цифры разной длины читаются столбиком
   только по правому краю. */
.rt__c_num {
    text-align: right !important;
    white-space: nowrap;
}

.rt__val {
    font-size: 15px;
    font-weight: 600;
    color: #e0d6bf;
}

.rt__val_time {
    font-size: 13px;
    font-weight: 500;
    color: var(--bc-bronze-light);
}

/* ---- место ---- */

.rt__c_rank {
    width: 1%;
    padding-right: 4px !important;
    text-align: center !important;
}

.rt__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: #6f787f;
}

/* Первые три места. Цвета не из ниоткуда: золото — наша светлая
   бронза, серебро — холодная сталь шапки, бронза — основной цвет
   сайта. Чужого жёлтого и чужого серого на странице не появляется. */
.rt__rank_1 {
    color: #17120a;
    background: linear-gradient(145deg, #f8e3b4 0%, #d8a558 55%, #a8702a 100%);
}

.rt__rank_2 {
    color: #14171a;
    background: linear-gradient(145deg, #dfe4e8 0%, #a9b2b9 55%, #78828a 100%);
}

.rt__rank_3 {
    color: #14171a;
    background: linear-gradient(145deg, #d6b48c 0%, #a8784a 55%, #7d5730 100%);
}

/* ---- персонаж ---- */

.rt__who {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* Портрет квадратный: круглые аватарки в этом оформлении смотрятся
   наклейкой из другого интерфейса. */
.rt__ava {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .45);
}

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

/* Отметка «в игре» — квадратик в углу портрета. */
.rt__on {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 8px;
    height: 8px;
    background: #58a06a;
    box-shadow: 0 0 0 2px #1b1f23, 0 0 8px rgba(88, 160, 106, .7);
}

.rt__nick {
    font-size: 14px;
    font-weight: 500;
    color: #d8dee4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt__cls {
    font-size: 13px;
    font-weight: 300;
    color: var(--bc-muted);
    white-space: nowrap;
}

/* ---- клан ---- */

.rt__clan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
    color: #c4ccd3;
    transition: color .2s;
}

a.rt__clan:hover {
    color: var(--bc-bronze-light);
}

.rt__crest {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    flex-shrink: 0;
    color: var(--bc-bronze);
}

.rt__crest img,
.rt__crest svg {
    max-width: 18px;
    max-height: 16px;
}

.rt__clan-nm {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt__ally {
    font-size: 13px;
    color: var(--bc-muted);
}

.rt__dash {
    color: #5c646b;
}

/* ---- замки ---- */

.rt__castle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--bc-bronze-light);
}

.rt__castle svg,
.rt__castle img {
    width: 22px;
    height: 22px;
}

.rt__siege {
    font-size: 13px;
    font-weight: 500;
    color: var(--bc-bronze-light);
    white-space: nowrap;
}

/* ---- узкие экраны ----

   Колонки убираются по важности: сперва класс и вторая цифра, они
   справочные; ник, клан и главное число остаются до конца. */

@media (max-width: 900px) {
    .rt__c_h1 {
        display: none;
    }
}

@media (max-width: 620px) {
    .rt__c_h2 {
        display: none;
    }

    .rt__tbl thead th,
    .rt__tbl tbody td {
        padding-left: 9px;
        padding-right: 9px;
    }

    .rt__ttl {
        font-size: 19px;
    }

    .rt__tab {
        padding: 10px 12px 11px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rt__pane.is-on {
        animation: none;
    }

    .rt__tab,
    .rt__tbl tbody tr {
        transition: none;
    }
}

/* =====================================================================
   ВЫПАДАШКА ПРОФИЛЯ

   Шаблон отдавал её белым блоком со скруглениями и серыми
   разделителями: на тёмном кабинете она читалась как чужое окно.
   Собираем из тех же частей, что и остальные плиты — окантовка
   подложкой, Oswald на подписях, бронза на значках.

   Показывает и скрывает блок flowbite, переключая класс hidden, —
   поэтому display здесь не задаём ни одному из состояний.
   ===================================================================== */

/* Кнопка-аватар приходила круглой серой заливкой из шаблона, и за
   квадратной плиткой торчал светлый круг. */
[data-dropdown-toggle="dropdown-user"] {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.nx-user {
    position: relative;
    z-index: 60;
    width: 252px;
    padding: 1px;
    background: rgba(144, 123, 91, .7) !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    list-style: none;
}

/* Окантовка подложкой: фон блока бронзовый, а сталь лежит внутри с
   отступом в пиксель. Так волосок не зависит от border. */
.nx-user::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: linear-gradient(180deg, #31373c 0%, #1c2023 100%);
    pointer-events: none;
}

.nx-user > * {
    position: relative;
    z-index: 1;
}

.nx-user__head {
    padding: 12px 15px 11px;
    border-bottom: 1px solid rgba(144, 123, 91, .3);
}

.nx-user__name {
    margin: 0;
    font-family: var(--bc-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bc-ink);
    line-height: 1.2;
}

.nx-user__mail {
    margin: 3px 0 0;
    overflow: hidden;
    font-family: var(--bc-text);
    font-size: 12px;
    color: var(--bc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-user__list {
    margin: 0;
    padding: 5px 0;
    list-style: none;
}

.nx-user__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b4ab99;
    text-decoration: none;
    transition: color .2s, background .2s;
}

/* Полоса слева выезжает на наведении — тот же приём, что в меню. */
.nx-user__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--bc-bronze);
    transform: scaleY(0);
    transition: transform .2s;
}

.nx-user__item:hover {
    background: rgba(144, 123, 91, .12);
    color: #e8dcc2;
}

.nx-user__item:hover::before {
    transform: scaleY(1);
}

.nx-user__ico {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--bc-bronze);
    transition: color .2s;
}

.nx-user__item:hover .nx-user__ico {
    color: var(--bc-bronze-light);
}

/* Выход — единственное действие, от которого стоит предупредить. */
.nx-user__item--out:hover {
    background: rgba(150, 54, 48, .14);
    color: #e7c4c0;
}

.nx-user__item--out::before {
    background: #963630;
}

.nx-user__item--out:hover .nx-user__ico {
    color: #c9736c;
}

@media (prefers-reduced-motion: reduce) {

    .nx-user__item,
    .nx-user__item::before,
    .nx-user__ico {
        transition: none;
    }
}

/* =====================================================================
   ВОССТАНОВЛЕНИЕ ПАРОЛЯ

   Обе страницы собраны на карточке входа (.bc-auth), здесь только то,
   чего на входе нет: полоса из трёх шагов и приписка под формой.

   Шаги нужны, потому что восстановление растянуто во времени: человек
   уходит в почту и возвращается по ссылке. Видя «1 — 2 — 3», он
   понимает, что письмо придёт, а страница из письма — та же самая.
   ===================================================================== */

.bc-steps {
    display: flex;
    /* Боковые поля приходят от .bc-auth__card > * — на узком экране
       они сами становятся 20px. Здесь только вертикальные. */
    margin-top: 2px;
    margin-bottom: 24px;
    padding: 0;
    list-style: none;
}

.bc-steps__i {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Волосок от предыдущего шага к номеру следующего. */
.bc-steps__i + .bc-steps__i::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 1px;
    margin: 0 19px;
    background: rgba(144, 123, 91, .26);
}

.bc-steps__n {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #1b1f23;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .28);
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 600;
    color: #79818a;
}

.bc-steps__t {
    font-family: var(--bc-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    color: #6d757c;
}

/* Шаг, на котором человек сейчас. */
.bc-steps__i.is-on .bc-steps__n {
    background: linear-gradient(180deg, var(--bc-bronze-light), var(--bc-bronze));
    box-shadow: 0 0 16px rgba(144, 123, 91, .4);
    color: #16191e;
}

.bc-steps__i.is-on .bc-steps__t {
    color: #d9cdb4;
}

/* Пройденные шаги: бронзовый контур вместо заливки. */
.bc-steps__i.is-done .bc-steps__n {
    background: #22272c;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .55);
    color: var(--bc-bronze-light);
}

.bc-steps__i.is-done .bc-steps__t {
    color: #8d959c;
}

/* Приписка под формой: куда смотреть, если письмо не пришло. */
.bc-auth__note {
    margin-top: 16px;
    margin-bottom: 0;
    font-family: var(--bc-text);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    color: #70787f;
}

@media (max-width: 400px) {

    .bc-steps__t {
        font-size: 9px;
        letter-spacing: .06em;
    }
}

/* =====================================================================
   ПОДТВЕРЖДЕНИЕ ПОЧТЫ

   Экран между регистрацией и кабинетом. Карточка и шаги — те же, что у
   входа и восстановления; здесь только адрес почты и две кнопки.
   ===================================================================== */

/* Адрес, на который ушло письмо. Показываем крупно: именно на этом
   экране обнаруживают опечатку в почте. */
.bc-mailbox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 20px;
    padding: 16px 18px;
    background: rgba(144, 123, 91, .3);
}

.bc-mailbox::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: linear-gradient(180deg, #23282e, #1a1e22);
}

.bc-mailbox > * {
    position: relative;
    z-index: 1;
}

.bc-mailbox__ico {
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
    color: var(--bc-bronze);
}

.bc-mailbox__label {
    font-family: var(--bc-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d757c;
}

.bc-mailbox__value {
    max-width: 100%;
    font-family: var(--bc-text);
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    color: #e4dac3;
    word-break: break-all;
}

/* Две кнопки: повторить письмо и выйти. Вторая намеренно тише — ею
   пользуются, только если ошиблись адресом. */
.bc-acts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.bc-acts__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 46px;
    background: linear-gradient(180deg, var(--bc-bronze-light), var(--bc-bronze));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    font-family: var(--bc-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Тема красит ссылки кабинета поверх — отсюда !important,
       как и у кнопки отправки в карточке входа. */
    color: #16191e !important;
    text-decoration: none;
    transition: filter .25s, transform .25s;
}

.bc-acts__btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #16191e !important;
}

.bc-acts__btn svg {
    width: 17px;
    height: 17px;
}

.bc-acts__out {
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #767e85;
    text-decoration: none;
    border-bottom: 1px solid rgba(144, 123, 91, .22);
    transition: color .25s, border-color .25s;
}

.bc-acts__out:hover {
    color: #c9bda4;
    border-bottom-color: rgba(198, 184, 154, .45);
}

/* На этой странице приписка — последняя, и низ карточки держит она. */
.bc-auth__note:last-child {
    margin-bottom: 32px;
}

/* Плашка ответа на гостевых страницах: «письмо отправлено»,
   «пароль изменён». Стоит под подзаголовком, перед формой: человек
   читает её раньше, чем снова тянется к полям. */
.bc-flash {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 34px 20px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(144, 123, 91, .14), rgba(144, 123, 91, .06));
    border-left: 2px solid var(--bc-bronze);
}

.bc-flash__ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--bc-bronze-light);
}

.bc-flash__t {
    font-family: var(--bc-display);
    font-size: 13px;
    line-height: 1.5;
    color: #cfc5b2;
}

@media (max-width: 640px) {
    .bc-flash {
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* Отказ: та же плашка, но полоса холоднее и знак другой. Страница не
   должна вспыхивать красным из-за опечатки в адресе. */
.bc-flash.is-warn {
    background: linear-gradient(180deg, rgba(126, 86, 70, .18), rgba(126, 86, 70, .07));
    border-left-color: #8d5f4c;
}

.bc-flash.is-warn .bc-flash__ico {
    color: #c79582;
}

/* ======================= Шапка: колокольчик =======================

   Выпадашка уведомлений приходила голой коробкой темы: классы
   `notifications-*` из разметки не описаны нигде, а то, что было
   описано, лежало блоком <style> в самом шаблоне и рисовало красную
   точку. Собираем заново в языке кабинета.

   Прямоугольная кнопка с бронзовым волоском, счётчик — тонкая метка в
   углу, а не алый кружок. */

.bc-nt .dropdown {
    position: relative;
}

.bc-nt__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: linear-gradient(180deg, var(--bc-steel-top), var(--bc-steel-bottom));
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .45);
    color: #a9b1b8;
    cursor: pointer;
    transition: color .2s, box-shadow .2s, background .2s;
}

.bc-nt__btn:hover {
    background: linear-gradient(180deg, #373e44, #2b3035);
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .7);
    color: var(--bc-bronze-light);
}

.bc-nt__ico {
    width: 19px;
    height: 19px;
}

/* Счётчик: прямая метка в углу кнопки. Цифра набрана Oswald, чтобы
   двузначное «9+» не раздувало метку. */
.bc-nt__count {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 17px;
    height: 15px;
    padding: 0 3px;
    background: var(--bc-bronze);
    box-shadow: 0 0 0 1px #1b1f23;
    font-family: var(--bc-display);
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    color: #14171a;
}

/* --- сама выпадашка --- */

.bc-nt .dropdown-body,
.bc-nt__body {
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 0;
    background: var(--bc-plate);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .4),
    0 18px 40px rgba(0, 0, 0, .55);
}

.bc-nt .dropdown-heading {
    margin: 0;
    padding: 12px 14px 10px;
    background: linear-gradient(180deg, rgba(144, 123, 91, .12), transparent);
    border-bottom: 1px solid rgba(144, 123, 91, .3);
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
}

.bc-nt .dropdown-content {
    max-height: min(60vh, 420px);
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(144, 123, 91, .5) transparent;
}

.bc-nt .dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.bc-nt .dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(144, 123, 91, .5);
}

.bc-nt__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-nt__i {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 11px;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(144, 123, 91, .16);
}

.bc-nt__i:last-child {
    border-bottom: 0;
}

/* Непрочитанное: полоса слева и чуть светлее подложка. Красного в
   кабинете нет — есть бронза. */
.bc-nt__i.is-new {
    background: linear-gradient(90deg, rgba(144, 123, 91, .13), transparent 70%);
}

.bc-nt__i.is-new::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--bc-bronze);
}

.bc-nt__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #22272c;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .4);
    color: var(--bc-bronze-light);
}

/* Значок приходит разметкой MoonShine в коробке 20 px — размер задаём
   коробке, иначе своя ширина значка её распирает. */
.bc-nt__tile svg {
    width: 16px;
    height: 16px;
}

/* Предупреждение — единственный повод уйти в тёплый тон. */
.bc-nt__i.is-warm .bc-nt__tile {
    background: #2a2220;
    box-shadow: inset 0 0 0 1px rgba(166, 110, 90, .55);
    color: #c79582;
}

.bc-nt__c {
    min-width: 0;
}

.bc-nt__t {
    margin: 0 0 3px;
    font-family: var(--bc-display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bc-ink);
}

.bc-nt__m {
    font-family: var(--bc-display);
    font-size: 12.5px;
    line-height: 1.5;
    color: #9aa2a9;
    overflow-wrap: anywhere;
}

/* Текст приходит из редактора админки: там и абзацы, и ссылки. Внутри
   выпадашки отступы абзацев гасим, иначе список разъезжается. */
.bc-nt__m p {
    margin: 0;
}

.bc-nt__m p + p {
    margin-top: 5px;
}

.bc-nt__m a {
    color: var(--bc-bronze-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bc-nt__go {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 10px;
    background: linear-gradient(180deg, var(--bc-steel-top), var(--bc-steel-bottom));
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .45);
    font-family: var(--bc-display);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bc-bronze-light);
}

.bc-nt__go:hover {
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .75);
    color: var(--bc-ink);
}

.bc-nt__d {
    display: block;
    margin-top: 6px;
    font-family: var(--bc-display);
    font-size: 11px;
    letter-spacing: .04em;
    color: #6f777e;
}

.bc-nt .dropdown-footer {
    padding: 0;
    background: transparent;
    border-top: 1px solid rgba(144, 123, 91, .3);
}

.bc-nt__clear {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: 0;
    font-family: var(--bc-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    color: #8c949b;
    cursor: pointer;
    transition: color .2s, background .2s;
}

.bc-nt__clear:hover {
    background: rgba(144, 123, 91, .1);
    color: var(--bc-bronze-light);
}

/* ======================= Шапка: язык =======================

   Кнопка темы с флагом, а список — голый <div> с тремя синими
   кнопками-ссылками. Приводим к шапке сайта: плита, волосок, флаг и
   код языка, рядом самоназвание. */

.bc-lang {
    position: relative;
    display: flex;
}

.bc-lang__btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px;
    background: linear-gradient(180deg, var(--bc-steel-top), var(--bc-steel-bottom));
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .45);
    cursor: pointer;
    transition: box-shadow .2s, background .2s;
}

.bc-lang__btn:hover {
    background: linear-gradient(180deg, #373e44, #2b3035);
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .7);
}

.bc-lang__flag {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: cover;
}

.bc-lang__code {
    font-family: var(--bc-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--bc-ink);
}

.bc-lang__chev {
    width: 13px;
    height: 13px;
    color: #8c949b;
    transition: color .2s;
}

.bc-lang__btn:hover .bc-lang__chev {
    color: var(--bc-bronze-light);
}

.bc-lang__menu {
    z-index: 412;
    min-width: 168px;
    padding: 4px 0;
    background: var(--bc-plate);
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .4),
    0 16px 36px rgba(0, 0, 0, .5);
}

.bc-lang__i {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    transition: background .2s;
}

.bc-lang__i:hover {
    background: rgba(144, 123, 91, .14);
}

.bc-lang__i .bc-lang__code {
    color: var(--bc-bronze-light);
}

.bc-lang__native {
    font-family: var(--bc-display);
    font-size: 12.5px;
    color: #9aa2a9;
}

.bc-lang__i:hover .bc-lang__native {
    color: var(--bc-ink);
}

/* ======================= Шапка: аватар =======================

   Кнопка приходила круглой, с двумя разными размерами (картинка 32 px,
   буква 40) и серой подложкой из шаблона. Теперь это такой же
   прямоугольник 38 px, как колокольчик и язык рядом. */

.bc-ava {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.bc-ava__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bc-ava__letter {
    font-family: var(--bc-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--bc-bronze-light);
}

/* ======================= Шапка: баланс =======================

   Левая половина шапки пустовала. Ставим туда баланс: монета, число и
   бронзовый плюс — он же короткий путь на пополнение. Высота та же
   38 px, что у кнопок справа. */

.bc-bal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 0 0 10px;
    background: linear-gradient(180deg, var(--bc-steel-top), var(--bc-steel-bottom));
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .45);
    transition: box-shadow .2s, background .2s;
}

.bc-bal:hover {
    background: linear-gradient(180deg, #373e44, #2b3035);
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .7);
}

/* Монета — та же и того же размера, что на странице пополнения
   (`.bc-coin`): собственная подложка у неё есть, но она там и так
   видна каждый день, и две разные монеты в кабинете были бы хуже. */
.bc-bal__coin {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.bc-bal__sum {
    font-family: var(--bc-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1;
    color: var(--bc-ink);
    white-space: nowrap;
}

.bc-bal__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 38px;
    margin-left: 2px;
    background: rgba(144, 123, 91, .16);
    box-shadow: inset 1px 0 0 rgba(144, 123, 91, .4);
    color: var(--bc-bronze-light);
}

.bc-bal__add svg {
    width: 14px;
    height: 14px;
}

.bc-bal:hover .bc-bal__add {
    background: var(--bc-bronze);
    color: #14171a;
}

/* На узком экране цифра остаётся, подпись не нужна: место отдаём
   кнопкам справа. */
@media (max-width: 420px) {
    .bc-bal {
        padding-left: 7px;
        gap: 6px;
    }

    .bc-bal__sum {
        font-size: 13px;
    }
}

/* Аватар стоит в одном ряду с колокольчиком и языком, значит и
   подложка с волоском у него те же. Прежнее правило давало ему
   бронзовое свечение, и в ряду он выглядел ярче соседей. */
.bc-ava,
:is(.dark .bc-ava) {
    background: linear-gradient(180deg, var(--bc-steel-top), var(--bc-steel-bottom)) !important;
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .45) !important;
}

.bc-ava:hover,
:is(.dark .bc-ava:hover) {
    background: linear-gradient(180deg, #373e44, #2b3035) !important;
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .7) !important;
}

/* Кликом фокус тоже ставится, и тема подсвечивает кнопку кольцом из
   своей гаммы. Нам хватает наведения. */
.bc-nt__btn:focus,
.bc-lang__btn:focus,
.bc-ava:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .7);
}

/* Обводка с клавиатуры. По умолчанию браузер рисует её белой — на
   тёмной шапке это вспышка поперёк ряда. */
.bc-nt__btn:focus-visible,
.bc-lang__btn:focus-visible,
.bc-lang__i:focus-visible,
.bc-ava:focus-visible,
.bc-bal:focus-visible,
.bc-nt__clear:focus-visible {
    outline: 1px solid var(--bc-bronze-light);
    outline-offset: 2px;
}