/* Genesis theme — Organic Dark Glassmorphism для LK3
   База: bootstrap-cyborg.css (Bootstrap 2.6).
   Грузится ДО charisma-app.css → !important для перебивания.

   ВАЖНО: backdrop-filter / transform / filter на родителе создают CSS containing
   block, и charisma .popup__overlay (position: fixed) центрируется относительно
   родителя вместо viewport. Поэтому НЕ ставим эти свойства на:
       .box, .well, .sidebar-nav, .row-fluid * (контейнеры контента),
       .popup, .popup__overlay
   Glass-эффект на них — через чуть менее прозрачный фон.
*/

@import url('bootstrap-cyborg.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* TT Norms Pro — тот же шрифт что у логотипа на сайте.
   Файл лежит в Impreza-child/fonts/, шарим через абсолютный URL. */
@font-face {
    font-family: 'TT Norms Pro';
    src: url('/wp-content/themes/Impreza-child/fonts/tt-norms-pro-regular.woff2') format('woff2'),
         url('/wp-content/themes/Impreza-child/fonts/tt-norms-pro-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Логотип шапки ЛК — шрифт как на сайте.
   Все буквы заглавные → одинаковый кегль (без перепада строчные/PW). */
body .navbar .navbar-inner .container-fluid .brand,
body .navbar .navbar-inner .container-fluid .brand span {
    font-family: 'TT Norms Pro', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

:root {
    --gn-accent:        #00ff66;
    --gn-accent-2:      #00e85d;
    --gn-accent-deep:   #009a3e;
    --gn-accent-soft:   rgba(0, 255, 102, 0.08);
    --gn-accent-mid:    rgba(0, 255, 102, 0.15);
    --gn-accent-line:   rgba(0, 255, 102, 0.30);
    --gn-accent-glow:   rgba(0, 255, 102, 0.40);

    --gn-text:          #d6d8db;
    --gn-text-strong:   #ffffff;
    --gn-text-mute:     #8a939a;
    --gn-text-dim:      #6b7278;

    --gn-bg-0:          #050607;

    --gn-card:          rgba(14, 16, 19, 0.75);
    --gn-card-strong:   rgba(14, 16, 19, 0.94);
    --gn-card-input:    rgba(5, 7, 9, 0.60);

    --gn-border:        rgba(255, 255, 255, 0.03);
    --gn-border-soft:   rgba(255, 255, 255, 0.01);
    --gn-border-mid:    rgba(255, 255, 255, 0.08);
    --gn-border-strong: rgba(255, 255, 255, 0.16);
    --gn-border-glow:   rgba(0, 255, 102, 0.12);

    --gn-info:          #38bdf8;
    --gn-warn:          #ffb648;
    --gn-error:         #ff5e5e;

    --gn-radius:        24px;
    --gn-radius-lg:     32px;
    --gn-radius-sm:     14px;
    --gn-radius-btn:    18px;

    --gn-shadow-float:  inset 0 1px 1px rgba(255, 255, 255, 0.06),
                        0 24px 48px rgba(0, 0, 0, 0.60),
                        0 8px 16px rgba(0, 0, 0, 0.40);
    --gn-shadow-hover:  inset 0 1px 2px rgba(255, 255, 255, 0.10),
                        0 32px 64px rgba(0, 0, 0, 0.70),
                        0 12px 32px rgba(0, 255, 102, 0.15);
    --gn-shadow-pop:    inset 0 1px 1px rgba(255, 255, 255, 0.10),
                        0 24px 64px rgba(0, 0, 0, 0.70);

    --gn-blur:          blur(20px) saturate(160%);
}

/* ==== BASE ==== */
html, body { background-color: var(--gn-bg-0) !important; }
body {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--gn-text) !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 255, 102, 0.08) 0%, transparent 60%),
        radial-gradient(circle 800px at 100% 100%, rgba(0, 255, 102, 0.04) 0%, transparent 100%),
        linear-gradient(180deg, #050607 0%, #0a0c0e 100%) !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea, .btn, .label, .badge {
    font-family: 'Montserrat', sans-serif !important;
}

/* ── Mobile foundation (responsive-craft principles) ──────────────────────── */
/* iOS Safari зумит страницу при фокусе на input если font-size < 16px. Ставим
   max(16px, X) — десктоп получает наши 13px, мобила — 16px без зума. */
input, select, textarea, .uneditable-input {
    font-size: max(16px, 13px) !important;
}
@media (min-width: 768px) {
    input, select, textarea, .uneditable-input {
        font-size: 13px !important;
    }
}
/* Safe-area для iPhone notch / Dynamic Island и хоум-индикатора */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}
/* Touch-friendly — отключаем серую подсветку при тапе на iOS/Android */
a, button, .btn, .navbar .btn-link, .sidebar-nav a, .nav a {
    -webkit-tap-highlight-color: transparent;
}
/* Запрет горизонтального скролла на мобилке (любая узкая панель = беда) */
html, body { overflow-x: hidden; max-width: 100vw; }

a {
    color: var(--gn-accent) !important;
    text-decoration: none;
    transition: all 0.2s ease !important;
}
a:hover, a:focus {
    color: var(--gn-text-strong) !important;
    text-shadow: 0 0 12px var(--gn-accent-glow) !important;
    text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gn-text-strong) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: var(--gn-text-mute) !important;
    font-weight: 500 !important;
}

::selection { background: var(--gn-accent); color: #000; }

/* ==== NAVBAR ==== */
.navbar { margin-bottom: 24px !important; border: none !important; position: relative; z-index: 1040 !important; }
.navbar-inner {
    background: rgba(10, 12, 14, 0.6) !important;
    background-image: linear-gradient(180deg, rgba(0, 255, 102, 0.04) 0%, rgba(10, 12, 14, 0) 100%) !important;
    border: none !important;
    border-bottom: 1px solid var(--gn-border) !important;
    border-radius: 0 0 var(--gn-radius) var(--gn-radius) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
    -webkit-backdrop-filter: var(--gn-blur);
    backdrop-filter: var(--gn-blur);
    padding: 4px 12px !important;
    min-height: 40px !important;
}
/* Базовые цвета шапки. ВАЖНО: padding/size компактные — этот блок применяется
   и на ≤1199 (там нет десктопного override'а). На ≥1200 десктопный блок ниже
   в файле перебивает с большим padding'ом для pill-эффекта.
   Если поставить здесь крупный padding (14px 18px / 6px 14px), то на 1024 кнопки
   станут шире, не помещаются в строку и wrap'ятся → шапка кривая. */
.navbar .brand {
    color: var(--gn-text-strong) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
}
/* Логотип математически на одной оси с текстом «GENESIS PW», но caps-only Montserrat
   700 оптически тяжелее в верхней половине строки — img кажется «ниже». Поднимаем
   на 2px чтобы оптически выровнять. */
.navbar .brand img {
    transform: translateY(-2px) !important;
}
.navbar .nav > li > a {
    color: var(--gn-text) !important;
    text-shadow: none !important;
    background: transparent !important;
    transition: color .15s ease, background-color .15s ease;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover {
    color: var(--gn-accent) !important;
    background: var(--gn-accent-soft) !important;
}
.navbar .btn-group .btn,
.navbar > .container-fluid > .btn-group .btn {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    transition: all .15s ease;
}
.navbar .btn-group .btn:hover {
    background: var(--gn-accent-soft) !important;
    color: var(--gn-accent) !important;
    border-color: var(--gn-accent-line) !important;
}
/* `.btn-navbar` — гамбургер для мобильного меню. По дефолту BS2 ставит ему
   display: none на десктопе, наш `.btn { display: inline-flex !important }`
   это перебивал — принудительно скрываем сами. На ≤767 показываем как
   flex-item шапки с order:99 (крайний справа). Зачем flex-item, а не absolute:
   когда low-priority кнопки уезжают на 2-ю строку, они выравниваются
   `justify-content: flex-end` по правому краю flex-контейнера — РОВНО под
   бургером. С absolute-вариантом бургер бы стоял на 36px правее items
   (через padding-right reservation), и 2-я строка не выравнивалась бы по нему.

   Стиль — accent-зелёный (как было), 40×30 (ширина чуть больше высоты —
   стандарт для «3 полоски» бургера, чтобы не было приплющено).

   Почему 767, а не 1199: BS2-responsive.css на ≥768 принудительно ставит
   `.nav-collapse.collapse { height:auto !important; overflow:visible !important }`
   (строка 810-815) — то есть гамбургер на 768+ бесполезен, sidebar и top-nav
   все равно показаны inline. Classic-тема и все остальные темы LK тоже
   следуют этому правилу. Копируем поведение. */
.navbar .btn-navbar { display: none !important; }
@media (max-width: 767px) {
    .navbar .btn-navbar {
        display: inline-flex !important;
        order: 99 !important;            /* крайний справа в flex-flow — items 2-й строки end-align ровно по нему */
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 40px !important;
        height: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--gn-accent-soft) !important;
        border: 1px solid var(--gn-accent-line) !important;
        border-radius: var(--gn-radius-sm) !important;
        box-shadow: 0 0 12px rgba(0, 255, 102, 0.18) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color .15s, border-color .15s, box-shadow .15s !important;
    }
    .navbar .btn-navbar:hover,
    .navbar .btn-navbar:focus,
    .navbar .btn-navbar.collapsed:hover {
        background: var(--gn-accent-mid) !important;
        border-color: var(--gn-accent) !important;
        box-shadow: 0 0 18px rgba(0, 255, 102, 0.35) !important;
        transform: none !important;
    }
}

/* ─── ≤1199: flex-wrap шапка с приоритетным порядком кнопок ─────────────────
   Подход: brand слева (margin-right:auto толкает остальное вправо). Между
   brand'ом и краем — flex-wrap кнопок в порядке HIGH → MEDIUM → LOW (LTR).
   flex-wrap переносит ПОСЛЕДНИЕ в потоке items на новую строку первыми, так:
   - HIGH (order 5-7) — профиль, тема, флаг → ВСЕГДА в 1-й строке (первые после brand)
   - MEDIUM (order 11-13) — монеты, счёт, «Перейти на сайт» → 1-я строка если влезли
   - LOW (order 30-32) — письмо, таймер лицензии, Admin, GM → во 2-ю строку первыми
   На ≤767 бургер — flex-item с order:99 (крайний справа). Когда низкоприоритетные
   уезжают на 2-ю строку, бургер уезжает вместе с ними и стоит крайним правым —
   тогда `justify-content: flex-end` выравнивает 2-ю строку РОВНО по бургеру.
   Альтернатива (position:absolute) ломала это выравнивание (items 2-й строки
   end-align'ились по padding-right'у, а не по краю бургера).

   Высоты: все элементы строго `height: 30px; align-items: center` — единый
   baseline для иконок (ГМ, письмо, флаг) и текстовых кнопок. */
@media (max-width: 1199px) {
    .navbar-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;  /* кнопки 2-й строки тоже к правому краю; brand остаётся слева через margin-right:auto */
        align-items: center !important;
        gap: 6px 4px !important;
        padding: 6px 12px !important;
        min-height: 40px !important;
    }
    .navbar .container-fluid,
    .navbar .container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px 4px !important;
        width: 100% !important;
    }
    /* Brand: первый flex-item слева. margin-right: auto толкает все остальные
       элементы вправо до конца строки (даёт «brand слева, кнопки справа»). */
    .navbar .brand {
        float: none !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
        height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }
    .navbar .brand img {
        flex: 0 0 auto !important;
        margin: 0 8px 0 0 !important;
        vertical-align: middle !important;
    }
    .navbar .brand > span {
        flex: 0 0 auto !important;
        line-height: 1 !important;
    }
    /* === Базовые правила для ВСЕХ элементов справа ===
       Все имеют единую высоту 30px для baseline-выравнивания. */
    .navbar .top-nav,
    .navbar .top-nav.nav-collapse,
    .navbar div.nav-collapse:not(.sidebar-nav),
    .navbar .btn-group,
    .navbar .btn-group.pull-right,
    .navbar .pull-right:not(.btn-group) {
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        height: 30px !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        clear: none !important;
    }
    /* === ПРИОРИТЕТНЫЙ ORDER (LTR — слева направо) ===
       После brand: HIGH идут сразу за brand'ом и НЕ wrap'ятся; MEDIUM —
       «затыкатели» в первой строке если хватает места; LOW первыми уходят
       на вторую строку. flex-wrap переносит ПОСЛЕДНИЕ items в потоке —
       поэтому HIGH = малый order (visually leftmost после brand, всегда
       помещается), LOW = большой order (visually rightmost, wrap-first).
       Бургер вне потока (position:absolute на ≤767, см. секцию <=767 ниже). */

    /* HIGH (всегда в 1-й строке): профиль, тема, флаг — order 5-7 */
    .navbar .btn-group:has(.btn-danger) { order: 5 !important; }                  /* профиль (логин dropdown) */
    .navbar .btn-group.theme-container { order: 6 !important; }                   /* переключение темы */
    .navbar .btn-group:has(.dropdown-menu.translator) { order: 7 !important; }    /* флаг (переключение языка) */

    /* MEDIUM-HIGH (всегда в 1-й строке — мелкие, легко помещаются): «Счёт №»
       и письмо. Идут СРАЗУ после high (флаг), до больших monets/top-nav/timer.
       flex-wrap кладёт items по порядку — если бы они шли после money (240px),
       не поместились бы на узких экранах и уезжали на 2-ю строку, оставляя
       1-ю с гигантской пустотой между brand'ом и high-priority. order 8-9. */
    .navbar .btn-group:has(> a.btn.btn-link) { order: 8 !important; }             /* «Счёт №» (~94px) — order на parent btn-group */
    .navbar .pull-right:not(.btn-group) { order: 9 !important; }                  /* письмо (32px) */

    /* MEDIUM (затыкатели большие — в 1-й строке если есть место, иначе 2-я):
       Перейти на сайт, монеты, таймер — order 10, 11, 14. */
    .navbar .top-nav,
    .navbar .top-nav.nav-collapse { order: 10 !important; }                       /* «Перейти на сайт» */
    .navbar .btn-group:has(.dropdown-menu li > a[href*="op=donate"]) { order: 11 !important; } /* монеты на счету */
    .navbar .btn-group.pull-right:has(.label-important) { order: 14 !important; } /* таймер «260 дн» */

    /* LOW (на 2-ю строку первыми): Admin, GM, VK, плагин-html — order 32-33.
       Админ/ГМ значки служебные — игроку их видеть в шапке не критично,
       пускай уезжают вниз без затыкания пустот. */
    .navbar .btn-group:has(img[alt="Админ"]) { order: 32 !important; }            /* Admin badge */
    .navbar .btn-group:has(img[alt="Права ГМ"]) { order: 32 !important; }         /* GM badge */
    .navbar .btn-group:has(img.auth_but),
    .navbar .btn-group:has(img.auth_but_succ) { order: 33 !important; }           /* VK login link */
    /* Fallback для остальных btn-group без явного приоритета (плагины через
       Menu::AddHeaderHTML, addon_html и пр.) — кладём в LOW, чтобы не «прыгали»
       перед brand'ом (default order:0). */
    .navbar .btn-group:not(.theme-container):not(:has(.btn-danger)):not(:has(.dropdown-menu.translator)):not(:has(.dropdown-menu li > a[href*="op=donate"])):not(:has(.label-important)):not(:has(img[alt="Админ"])):not(:has(img[alt="Права ГМ"])):not(:has(img.auth_but)):not(:has(img.auth_but_succ)):not(:has(.btn-link)) {
        order: 33 !important;
    }
    /* Внутри .top-nav.nav-collapse — компактный inline-flex как btn-group */
    .navbar .top-nav > ul.nav,
    .navbar .top-nav .nav {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        height: 32px !important;
        flex: 0 0 auto !important;
    }
    .navbar .top-nav > ul.nav > li,
    .navbar .top-nav .nav > li {
        display: inline-flex !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 32px !important;
    }
    /* Кнопки шапки: компактный padding, единая высота 30px, font 12px */
    .navbar .btn-group > .btn,
    .navbar .btn-group > a.btn,
    .navbar .btn-link,
    .navbar a.btn.btn-link,
    .navbar .top-nav > ul.nav > li > a,
    .navbar .top-nav .nav > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        height: 30px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    /* Пилюля «Перейти на сайт» — рамка как у других кнопок шапки */
    .navbar .top-nav > ul.nav > li > a,
    .navbar .top-nav .nav > li > a {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--gn-border-mid) !important;
        border-radius: var(--gn-radius-sm) !important;
        color: var(--gn-text) !important;
        text-decoration: none !important;
    }
    .navbar .top-nav > ul.nav > li > a:hover,
    .navbar .top-nav .nav > li > a:hover {
        background: var(--gn-accent-soft) !important;
        border-color: var(--gn-accent-line) !important;
        color: var(--gn-accent) !important;
    }
    /* Скрываем таймер «22:58:23» в кнопке «260 дн» (живёт в <span class="hidden-phone">)
       — освобождает ~75px в строке, чтобы остальные кнопки помещались. */
    .navbar .btn-warning span.hidden-phone {
        display: none !important;
    }
}

/* ─── ≤1199: sidebar над контентом, не «висит сбоку узкой полосой» ─────────
   BS2 default на 768-979 даёт .span2 width:104px, на 980-1199 charisma делает
   width:14% (~145px). Текст пунктов меню обрезается ellipsis'ом до 1-2 букв
   («Главная» → «Г...»). Бесполезно. Заменяем на 100%-ширину блок над контентом —
   как у .span12. На ≤767 BS2 уже делает то же самое (.span* всё block 100%). */
@media (min-width: 768px) and (max-width: 1199px) {
    .row-fluid > .span2.main-menu-span,
    .row-fluid > .span10,
    body #content.span10 {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    /* BS2-responsive на 768-979 скрывает .hidden-tablet (display: none !important).
       В sidebar этим помечены: текст пунктов (<span class="hidden-tablet">Главная</span>)
       и заголовки секций (<li class="nav-header hidden-tablet">Управление</li>).
       На узкой sidebar 14% это и было задумано — показать только иконки, экономить
       место. Но мы делаем sidebar full-width над контентом → места хватает →
       возвращаем тексты. Specificity 0,3,0 vs BS2 0,1,0 — наше выигрывает.    */
    .sidebar-nav span.hidden-tablet,
    .sidebar-nav li.hidden-tablet,
    .sidebar-nav .nav-header.hidden-tablet {
        display: inline-block !important;
    }
    .sidebar-nav li.hidden-tablet,
    .sidebar-nav .nav-header.hidden-tablet {
        display: list-item !important;
    }
    /* sidebar-nav компактнее — горизонтально расположенные пункты, чтобы не
       занимать всю высоту экрана. Flex-wrap расставит по 3-4 в ряд. */
    .well.sidebar-nav,
    div.well.sidebar-nav.nav-collapse {
        background: var(--gn-card) !important;
        border: 1px solid var(--gn-border-mid) !important;
        border-radius: var(--gn-radius) !important;
        padding: 10px !important;
        margin: 0 0 16px 0 !important;
        height: auto !important;
    }
    .sidebar-nav > ul.nav-stacked {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .sidebar-nav > ul.nav-stacked > li {
        flex: 0 1 auto !important;
        margin: 0 !important;
    }
    /* nav-header — заголовок секции «Управление», «Статистика» — full-width
       и отделяет группы пунктов друг от друга. */
    .sidebar-nav > ul.nav-stacked > li.nav-header {
        flex-basis: 100% !important;
        padding: 8px 4px 0 !important;
        margin: 4px 0 0 0 !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        color: var(--gn-text-dim) !important;
        letter-spacing: 1px !important;
    }
    /* Пункты — pill-кнопки с полным текстом */
    .sidebar-nav > ul.nav-stacked > li > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 14px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
        min-height: 36px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--gn-border) !important;
        border-radius: var(--gn-radius-sm) !important;
        transform: none !important;
    }
    .sidebar-nav > ul.nav-stacked > li > a:hover {
        background: var(--gn-accent-soft) !important;
        border-color: var(--gn-accent-line) !important;
        color: var(--gn-accent) !important;
        transform: none !important;
    }
    .sidebar-nav > ul.nav-stacked > li.active > a,
    .sidebar-nav > ul.nav-stacked > li > a.active {
        background: var(--gn-accent-soft) !important;
        border-color: var(--gn-accent) !important;
        color: var(--gn-accent) !important;
        text-shadow: 0 0 8px var(--gn-accent-glow) !important;
    }
    /* «Возникли вопросы? Помощь» — мелкий текст внизу sidebar */
    .span2.main-menu-span > center {
        margin: 8px 0 0 !important;
        padding: 6px 0 !important;
        font-size: 12px !important;
        text-align: center !important;
    }
}

/* ─── ≥1200: sidebar фиксированно 270px на всём desktop ─────────────────────
   Раньше пытался % + два media-блока (1200-1599 24%, 1600-1919 19%, ≥1920
   charisma 14%) — на каждой границе media был визуальный «прыжок» при
   ресайзе. Заменил на ОДНО правило без media-точек: sidebar = 270px (хватает
   для самых длинных пунктов «Статистика голосования»/«Дашборд маркетплейса»),
   content занимает остальное через calc. На ≥1200 нет НИ ОДНОГО скачка
   вплоть до 1199 (где включается tablet-блок sidebar full-width). */
@media (min-width: 1200px) {
    body .row-fluid > .span2.main-menu-span {
        width: 290px !important;
        flex: 0 0 290px !important;
    }
    body #content.span10 {
        width: calc(100% - 310px) !important;  /* 290 sidebar + 20 margin */
        margin-left: 20px !important;
    }
    .sidebar-nav > ul > li > a {
        padding: 10px 14px !important;
    }
}

/* Полоски бургера — accent-зелёные с glow всегда. */
.navbar .btn-navbar .icon-bar {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: var(--gn-accent) !important;
    background-image: none !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px var(--gn-accent-glow) !important;
    margin: 0 !important;
}

/* === Bootstrap caret (треугольник) === */
.caret {
    border-top-color: var(--gn-text) !important;
    border-bottom-color: var(--gn-text) !important;
    opacity: 0.65;
    transition: opacity .15s ease, border-top-color .15s ease;
}
/* В navbar-кнопках caret через CSS border-trick визуально смещён вверх
   относительно текста (ось треугольника = верх border-top, не геометр.
   центр). Сдвигаем на 2px вниз — стрелка читается на одной оси с текстом. */
.navbar .btn .caret,
.navbar .btn-group .btn .caret,
.navbar .dropdown-toggle .caret {
    margin-top: 2px !important;
}
.btn:hover .caret, .btn:focus .caret,
.dropdown:hover .caret, .dropdown.open .caret,
.btn-group.open .caret {
    border-top-color: var(--gn-accent) !important;
    border-bottom-color: var(--gn-accent) !important;
    opacity: 1;
}

/* === navbar dropdown z-index === */
.navbar .btn-group, .navbar .dropdown { position: relative; z-index: 1041; }
.navbar .btn-group.open, .navbar .dropdown.open { z-index: 1050; }
.navbar .dropdown-menu, .navbar-inner .dropdown-menu { z-index: 1060 !important; }

/* ==== CONTAINERS / CARDS ====
   БЕЗ backdrop-filter / transform — иначе charisma .popup съезжает.
*/
.box, .well {
    background: var(--gn-card) !important;
    border: 1px solid var(--gn-border) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-float) !important;
    margin-bottom: 24px !important;
    color: var(--gn-text) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    position: relative;
}
/* overflow: visible — иначе Chosen .chzn-drop (144px высотой) обрезается нижней границей
   .box, например в форме «Выставить лот»: dropdown «Категория» открывается, видна только
   первая опция, остальные срезаны. Border-radius на .box и .box-header сохранится — у
   .box-header свой `border-radius: var(--gn-radius) var(--gn-radius) 0 0`. */
.box { overflow: visible !important; }
.box:hover, .well:hover {
    box-shadow: var(--gn-shadow-hover) !important;
    border-color: var(--gn-border-glow) !important;
}
.box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gn-accent-line) 50%, transparent 100%);
    opacity: 0.55;
    pointer-events: none;
}
.box-header {
    background: transparent !important;
    background-image: linear-gradient(180deg, var(--gn-accent-soft) 0%, rgba(0,0,0,0) 100%) !important;
    border-bottom: 1px solid var(--gn-border-soft) !important;
    border-radius: var(--gn-radius) var(--gn-radius) 0 0 !important;
    padding: 16px 24px !important;
    color: var(--gn-text-strong) !important;
    filter: none !important;
    min-height: 36px !important;
    height: auto !important;
}
.box-header h2, .box-header h3 {
    color: var(--gn-text-strong) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    font-size: 15px !important;
}
.box-header.well {
    background: linear-gradient(180deg, var(--gn-accent-soft) 0%, rgba(0, 0, 0, 0.10) 100%) !important;
    border: 1px solid var(--gn-border) !important;
    border-bottom-color: var(--gn-accent-line) !important;
    border-radius: 18px 18px 0 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 18px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
}
.box-header.well h2,
.box-header.well h3 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.box-content {
    padding: 24px !important;
    background: transparent !important;
    color: var(--gn-text) !important;
}

/* ==== BUTTONS — floating, organic ==== */
.btn {
    background: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border) !important;
    border-radius: var(--gn-radius-sm) !important;
    color: var(--gn-text) !important;
    padding: 6px 16px !important;
    height: 32px !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.02) !important;
}
.btn:hover, .btn:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--gn-text-strong) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    outline: none !important;
}
.btn:active, .btn.active {
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}

.btn-primary, .btn-success {
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.12), rgba(0, 154, 62, 0.25)) !important;
    background-image: linear-gradient(135deg, rgba(0, 255, 102, 0.12), rgba(0, 154, 62, 0.25)) !important;
    border: 1px solid var(--gn-accent-line) !important;
    color: var(--gn-text-strong) !important;
    box-shadow: 0 0 16px rgba(0, 255, 102, 0.15), inset 0 1px 1px rgba(255,255,255,0.2) !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.4) !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.20), rgba(0, 232, 93, 0.35)) !important;
    background-image: linear-gradient(135deg, rgba(0, 255, 102, 0.20), rgba(0, 232, 93, 0.35)) !important;
    border-color: var(--gn-accent) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0 12px 32px rgba(0, 255, 102, 0.25),
        0 0 24px rgba(0, 255, 102, 0.40),
        0 0 48px rgba(0, 255, 102, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.30) !important;
    text-shadow: 0 0 12px rgba(0, 255, 102, 0.70) !important;
}
.btn-primary:active, .btn-success:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}

.btn-info {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(14, 116, 168, 0.25)) !important;
    background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(14, 116, 168, 0.25)) !important;
    color: var(--gn-text-strong) !important;
    border-color: rgba(56, 189, 248, 0.40) !important;
}
.btn-info:hover {
    transform: translateY(-3px) !important;
    border-color: var(--gn-info) !important;
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.22), 0 0 24px rgba(56, 189, 248, 0.30) !important;
}

.btn-warning {
    background: linear-gradient(135deg, rgba(255, 182, 72, 0.10), rgba(180, 110, 0, 0.25)) !important;
    background-image: linear-gradient(135deg, rgba(255, 182, 72, 0.10), rgba(180, 110, 0, 0.25)) !important;
    color: var(--gn-text-strong) !important;
    border-color: rgba(255, 182, 72, 0.40) !important;
}
.btn-warning:hover {
    transform: translateY(-3px) !important;
    border-color: var(--gn-warn) !important;
    box-shadow: 0 12px 32px rgba(255, 182, 72, 0.22), 0 0 24px rgba(255, 182, 72, 0.30) !important;
}

.btn-danger {
    background: linear-gradient(135deg, rgba(255, 94, 94, 0.10), rgba(160, 30, 30, 0.25)) !important;
    background-image: linear-gradient(135deg, rgba(255, 94, 94, 0.10), rgba(160, 30, 30, 0.25)) !important;
    color: var(--gn-text-strong) !important;
    border-color: rgba(255, 94, 94, 0.40) !important;
}
.btn-danger:hover {
    transform: translateY(-3px) !important;
    border-color: var(--gn-error) !important;
    box-shadow: 0 12px 32px rgba(255, 94, 94, 0.22), 0 0 24px rgba(255, 94, 94, 0.30) !important;
}

.btn-inverse {
    background: rgba(255, 255, 255, 0.05) !important;
    background-image: none !important;
    color: var(--gn-text-strong) !important;
    border-color: var(--gn-border-strong) !important;
}
.btn-inverse:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    transform: translateY(-2px) !important;
}

.btn[disabled], .btn.disabled, .btn[disabled]:hover {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--gn-text-mute) !important;
    border-color: var(--gn-border) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
.btn-large {
    font-weight: 700 !important;
    padding: 8px 20px !important;
    height: 38px !important;
    font-size: 14px !important;
}

/* ==== FORMS — soft neon ==== */
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="number"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"], input[type="color"],
textarea, select, .uneditable-input {
    background: var(--gn-card-input) !important;
    background-color: var(--gn-card-input) !important;
    /* Видимая рамка по умолчанию: иначе тёмное поле сливается с фоном страницы
       (форма кошелька маркетплейса — input «Сумма в рублях» / «Реквизиты»).
       На hover/focus дальше переходит на var(--gn-accent-line). */
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    color: var(--gn-text-strong) !important;
    padding: 10px 16px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}
input:hover, textarea:hover, select:hover {
    background: rgba(10, 13, 15, 0.7) !important;
    border-color: var(--gn-border-mid) !important;
}
input:focus, textarea:focus, select:focus {
    background: rgba(10, 15, 12, 0.8) !important;
    border-color: var(--gn-accent-line) !important;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        0 10px 24px rgba(0, 255, 102, 0.10),
        0 0 0 4px var(--gn-accent-soft) !important;
    outline: none !important;
    color: var(--gn-text-strong) !important;
}
/* Chrome autofill: при автозаполнении браузер рисует своё заполнение (жёлтое
   в light-mode или светло-серое/белое в dark-mode) через ::-webkit-autofill,
   перекрывая наш тёмный фон. Используем ДВА слоя override:

   Слой 1: box-shadow inset 1000px непрозрачным цветом — классический workaround.
   var(--gn-card-input) полупрозрачный (alpha 0.60), сквозь него autofill
   просвечивает — берём сплошной #0a0c0e.

   Слой 2: background-clip: text + background-color: transparent — фон рисуется
   ТОЛЬКО под буквами текста, основная площадь инпута становится прозрачной.
   Сохраняет тёмный фон даже на новых версиях Chrome где box-shadow trick
   могут начать игнорировать.

   transition 9999s блокирует повторную перерисовку Chrome после focus/blur. */
html input:-webkit-autofill,
html input:-webkit-autofill:hover,
html input:-webkit-autofill:focus,
html input:-webkit-autofill:active,
html textarea:-webkit-autofill,
html select:-webkit-autofill {
    -webkit-text-fill-color: var(--gn-text-strong) !important;
    -webkit-box-shadow: 0 0 0 1000px #0a0c0e inset !important;
    box-shadow: 0 0 0 1000px #0a0c0e inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-color: transparent !important;
    caret-color: var(--gn-text-strong) !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s !important;
    border-color: var(--gn-border-mid) !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.30) !important;
}
select option {
    background: #0e1013 !important;
    color: var(--gn-text) !important;
}
/* Кастомный select — нативный appearance оставляет стрелку у системы и режет текст
   при padding 10/16 на height 28. Заменяем на свою SVG-стрелку (белая, заметна на темном). */
select:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--gn-card-input) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23ffffff' d='M3 4.5l3 3 3-3z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 12px !important;
    padding: 4px 28px 4px 12px !important;
    height: 32px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    color: var(--gn-text-strong) !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
select:not([multiple]):focus {
    border-color: var(--gn-accent-line) !important;
    box-shadow: 0 0 0 4px var(--gn-accent-soft), 0 0 18px rgba(0, 255, 102, 0.18) !important;
    outline: none !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gn-accent); }

label, legend, .control-label, .control-label1 {
    color: var(--gn-text) !important;
    text-shadow: none !important;
}
legend {
    border-bottom-color: var(--gn-border) !important;
    color: var(--gn-text-strong) !important;
    font-weight: 600 !important;
}
.form-actions {
    background: rgba(0, 0, 0, 0.20) !important;
    border-top: 1px solid var(--gn-border) !important;
    border-radius: 0 0 var(--gn-radius) var(--gn-radius) !important;
}
.help-block, .help-inline { color: var(--gn-text-mute) !important; }

/* input-prepend / input-append (.add-on) — без gradient, тот же фон что у input
   (иначе верхняя часть gradient выглядит как «белая обводка» над тёмным input). */
.input-prepend .add-on, .input-append .add-on, .add-on {
    background: var(--gn-card-input) !important;
    background-color: var(--gn-card-input) !important;
    background-image: none !important;
    color: var(--gn-text-mute) !important;
    border: 1px solid var(--gn-border-mid) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.input-prepend .add-on { border-right: 0 !important; border-radius: var(--gn-radius-sm) 0 0 var(--gn-radius-sm) !important; }
.input-append  .add-on { border-left: 0 !important;  border-radius: 0 var(--gn-radius-sm) var(--gn-radius-sm) 0 !important; }
.input-prepend input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-append  input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.add-on > i, .add-on > [class^="icon-"], .add-on > [class*=" icon-"] { opacity: 0.95; }

.search_init, .search_focus {
    background: var(--gn-card-input) !important;
    color: var(--gn-text) !important;
    border-color: var(--gn-border-mid) !important;
}
.search_focus { border-color: var(--gn-accent-line) !important; }

/* Chrome autofill — закрываем БЕЛУЮ обводку/фон браузерного автозаполнения.
   :-webkit-autofill (старый WebKit) + :autofill (новый стандарт) + явный outline/border. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill,
input:autofill:hover,
input:autofill:focus,
textarea:-webkit-autofill, textarea:autofill,
select:-webkit-autofill, select:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--gn-card-input) inset, inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 0 1000px var(--gn-card-input) inset, inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    -webkit-text-fill-color: var(--gn-text-strong) !important;
    caret-color: var(--gn-text-strong) !important;
    border: 1px solid transparent !important;
    outline: none !important;
    transition: background-color 9999s ease-out 0s, color 9999s ease-out 0s !important;
}
/* Доп. защита: явно убираем browser outline на любом input/textarea/select. */
input, textarea, select {
    outline: none !important;
}

/* ==== SIDEBAR — воздушное меню ==== */
.sidebar-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    overflow: visible !important;
}
.sidebar-nav > ul { margin: 0 !important; }
.sidebar-nav > ul > li { margin: 0 !important; }
.sidebar-nav > ul > li > a {
    color: var(--gn-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--gn-radius-sm) !important;
    padding: 12px 20px !important;
    margin: 0 12px 8px !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.sidebar-nav > ul > li > a:hover:not(.active) {
    color: var(--gn-text-strong) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    transform: translateX(6px) !important;
    border-color: var(--gn-border) !important;
}
.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li.active > a:hover,
.sidebar-nav > ul > li > a.active {
    background: linear-gradient(90deg, var(--gn-accent-soft) 0%, transparent 100%) !important;
    border-left: 3px solid var(--gn-accent) !important;
    box-shadow: inset 16px 0 32px -16px var(--gn-accent-glow) !important;
    color: var(--gn-text-strong) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow) !important;
}
.sidebar-nav .nav-header,
.sidebar-nav > ul > li.nav-header {
    color: var(--gn-text-dim) !important;
    background: transparent !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 18px 24px 8px !important;
    margin: 0 !important;
}

/* ==== TABLES — separated rows, без линий ==== */
.table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--gn-text) !important;
}
.table th {
    border: none !important;
    border-bottom: 1px solid var(--gn-border) !important;
    color: var(--gn-text-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 16px 12px !important;
    background: transparent !important;
    text-shadow: none !important;
}
.table td {
    background: rgba(255, 255, 255, 0.015) !important;
    border: none !important;
    padding: 16px !important;
    color: var(--gn-text) !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    vertical-align: middle !important;
}
.table td:first-child { border-radius: var(--gn-radius-sm) 0 0 var(--gn-radius-sm) !important; }
.table td:last-child  { border-radius: 0 var(--gn-radius-sm) var(--gn-radius-sm) 0 !important; }
/* Если td и первый и последний (одна ячейка в строке — например, поле «Количество
   монет» в op=money) — скругляем все 4 угла, а не только правые. */
.table td:first-child:last-child { border-radius: var(--gn-radius-sm) !important; }
.table tbody tr:hover td,
.table-hover tbody tr:hover td {
    background: var(--gn-accent-soft) !important;
    color: var(--gn-text-strong) !important;
    box-shadow: inset 0 1px 0 rgba(0, 255, 102, 0.10), inset 0 -1px 0 rgba(0, 255, 102, 0.10) !important;
}
.table-bordered, .table-bordered td, .table-bordered th { border: 0 !important; }
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

.userinfo, .userinfo_table {
    background: rgba(20, 23, 26, 0.70) !important;
    color: var(--gn-text) !important;
    border-color: var(--gn-border) !important;
    border-radius: var(--gn-radius-sm) !important;
}
.userinfo_table tbody tr:nth-child(2n+1) td,
.userinfo_table tbody tr:nth-child(2n+1) th {
    background-color: rgba(255, 255, 255, 0.018) !important;
    border-color: var(--gn-border) !important;
}
.table_header {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gn-border) !important;
    color: var(--gn-text) !important;
    border-radius: var(--gn-radius) var(--gn-radius) 0 0 !important;
}
.chart-container, .thumbnail {
    background: rgba(20, 23, 26, 0.72) !important;
    border-color: var(--gn-border) !important;
    color: var(--gn-text) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-float) !important;
}
.show-grid [class*="span"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--gn-text) !important;
    border-radius: var(--gn-radius-sm) !important;
}

/* odd/even строки логов */
tbody tr.odd.minus td  { background-color: rgba(255, 94, 94, 0.12) !important; }
tbody tr.even.minus td { background-color: rgba(255, 94, 94, 0.06) !important; }
tbody tr.odd.plus td   { background-color: rgba(0, 255, 102, 0.12) !important; }
tbody tr.even.plus td  { background-color: rgba(0, 255, 102, 0.05) !important; }
tbody tr.minus:hover td, tbody tr.plus:hover td {
    background-color: rgba(0, 255, 102, 0.20) !important;
}
.item_cnt {
    background: var(--gn-accent-mid) !important;
    color: var(--gn-text-strong) !important;
    border-radius: var(--gn-radius-sm) !important;
}
td .config_itemid {
    background: rgba(255, 200, 60, 0.15) !important;
    color: var(--gn-text-strong) !important;
    border-radius: var(--gn-radius-sm) !important;
}

/* ==== ALERTS ==== */
.alert {
    background: rgba(20, 24, 28, 0.70) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    color: var(--gn-text) !important;
    text-shadow: none !important;
    box-shadow: var(--gn-shadow-float) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.alert .alert-heading { color: var(--gn-text-strong) !important; font-weight: 600 !important; }
/* BS2 дефолт: .alert .close { right: -21px; top: -2px; position: relative } — крестик
   «висит» снаружи правой границы alert. С overflow:hidden на .box (наш старый стиль) это
   срезалось, выглядело будто крестик в правом углу. После .box { overflow:visible } крестик
   уехал за границу. Возвращаем его внутрь alert. */
.alert .close {
    color: var(--gn-text-strong) !important;
    text-shadow: none !important;
    opacity: 0.55 !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
    margin-left: 8px !important;
}
.alert .close:hover { opacity: 1 !important; }
.alert-success {
    border-left: 4px solid var(--gn-accent) !important;
    background: linear-gradient(90deg, rgba(0, 255, 102, 0.08) 0%, rgba(20, 24, 28, 0.70) 100%) !important;
    color: #d8ffe5 !important;
}
.alert-info {
    border-left: 4px solid var(--gn-info) !important;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.08) 0%, rgba(20, 24, 28, 0.70) 100%) !important;
    color: #d8ecff !important;
}
.alert-warning {
    border-left: 4px solid var(--gn-warn) !important;
    background: linear-gradient(90deg, rgba(255, 182, 72, 0.08) 0%, rgba(20, 24, 28, 0.70) 100%) !important;
    color: #ffe8c2 !important;
}
.alert-error, .alert-danger {
    border-left: 4px solid var(--gn-error) !important;
    background: linear-gradient(90deg, rgba(255, 94, 94, 0.08) 0%, rgba(20, 24, 28, 0.70) 100%) !important;
    color: #ffd6d6 !important;
}

/* ==== NAV-TABS / NAV-PILLS ==== */
.nav-tabs {
    border-bottom: 1px solid var(--gn-border) !important;
}
.nav-tabs > li > a {
    color: var(--gn-text-mute) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--gn-radius-sm) var(--gn-radius-sm) 0 0 !important;
    margin-right: 4px;
    padding: 10px 16px !important;
    transition: all .15s ease;
}
.nav-tabs > li > a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gn-text-strong) !important;
    border-color: var(--gn-border) var(--gn-border) transparent !important;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
    color: var(--gn-accent) !important;
    background: var(--gn-accent-soft) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 -2px 0 var(--gn-accent) inset, 0 0 18px rgba(0, 255, 102, 0.18) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow);
}
.nav-pills > li > a {
    color: var(--gn-text) !important;
    background: transparent !important;
    border-radius: var(--gn-radius-sm) !important;
}
.nav-pills > li > a:hover {
    background: var(--gn-accent-soft) !important;
    color: var(--gn-accent) !important;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
    background: var(--gn-accent) !important;
    color: #000 !important;
    text-shadow: none !important;
    box-shadow: 0 0 24px rgba(0, 255, 102, 0.35) !important;
}

/* ==== LABELS / BADGES ==== */
.label, .badge {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--gn-text-strong) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 999px !important;
    padding: 1px 9px !important;
    line-height: 1.5 !important;
    vertical-align: baseline !important;
    display: inline-block !important;
}
.label-success, .badge-success { background-color: rgba(0, 255, 102, 0.85) !important; color: #001a09 !important; }
.label-info, .badge-info       { background-color: rgba(56, 189, 248, 0.85) !important; color: #001020 !important; }
.label-warning, .badge-warning { background-color: var(--gn-warn) !important; color: #1a1000 !important; }
.label-important, .badge-important,
.label-danger, .badge-danger   { background-color: var(--gn-error) !important; color: #fff !important; }
.label-inverse, .badge-inverse {
    background-color: rgba(0, 0, 0, 0.55) !important;
    color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-border-mid) !important;
}

/* ==== DROPDOWNS ==== */
.dropdown-menu {
    background: var(--gn-card-strong) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: var(--gn-shadow-pop) !important;
    -webkit-backdrop-filter: var(--gn-blur);
    backdrop-filter: var(--gn-blur);
    padding: 6px !important;
}
.dropdown-menu > li > a {
    color: var(--gn-text) !important;
    background: transparent !important;
    text-shadow: none !important;
    border-radius: var(--gn-radius-sm) !important;
    padding: 8px 12px !important;
    transition: all .12s ease;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a {
    color: var(--gn-accent) !important;
    background: var(--gn-accent-soft) !important;
    background-image: none !important;
}
.dropdown-menu .divider {
    background: var(--gn-border) !important;
    border-bottom-color: transparent !important;
    margin: 4px 0 !important;
}

/* ==== MODALS ==== */
.modal {
    background: var(--gn-card-strong) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-lg) !important;
    box-shadow: var(--gn-shadow-pop) !important;
    color: var(--gn-text) !important;
    -webkit-backdrop-filter: var(--gn-blur);
    backdrop-filter: var(--gn-blur);
}
.modal::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gn-accent-line), transparent);
    opacity: 0.6;
}
.modal-header {
    background: rgba(0, 0, 0, 0.22) !important;
    border-bottom: 1px solid var(--gn-border) !important;
    border-radius: var(--gn-radius-lg) var(--gn-radius-lg) 0 0 !important;
    color: var(--gn-text-strong) !important;
}
.modal-header h2, .modal-header h3, .modal-header h4 { color: var(--gn-text-strong) !important; }
.modal-header .close {
    color: var(--gn-text-strong) !important;
    text-shadow: none !important;
    opacity: 0.65 !important;
}
.modal-header .close:hover { opacity: 1 !important; }
.modal-body { color: var(--gn-text) !important; }
.modal-footer {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid var(--gn-border) !important;
    border-radius: 0 0 var(--gn-radius-lg) var(--gn-radius-lg) !important;
    box-shadow: none !important;
}
.modal-backdrop, .modal-backdrop.in {
    background: rgba(0, 0, 0, 0.72) !important;
    opacity: 1 !important;
}

/* ==== POPOVER / TOOLTIP ==== */
.popover {
    background: var(--gn-card-strong) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    color: var(--gn-text) !important;
    box-shadow: var(--gn-shadow-pop) !important;
    -webkit-backdrop-filter: var(--gn-blur);
    backdrop-filter: var(--gn-blur);
}
.popover-title {
    background-color: var(--gn-accent-soft) !important;
    color: var(--gn-accent) !important;
    border-bottom: 1px solid var(--gn-border) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    border-radius: var(--gn-radius-sm) var(--gn-radius-sm) 0 0 !important;
}
.popover-content, .popover-inner {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--gn-text) !important;
}
.popover.top    .arrow:after { border-top-color: var(--gn-card-strong) !important; }
.popover.right  .arrow:after { border-right-color: var(--gn-card-strong) !important; }
.popover.bottom .arrow:after { border-bottom-color: var(--gn-card-strong) !important; }
.popover.left   .arrow:after { border-left-color: var(--gn-card-strong) !important; }
.tooltip-inner {
    background: var(--gn-card-strong) !important;
    color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: var(--gn-shadow-pop) !important;
}
.tooltip.in { opacity: 1 !important; }

/* ==== Charisma popups (БЕЗ backdrop-filter — см. шапку файла) ==== */
.popup_clean, .popup_clean1, .popup_clean2 {
    background: rgba(14, 16, 19, 0.96) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius) !important;
    color: var(--gn-text) !important;
    box-shadow: var(--gn-shadow-pop) !important;
}
.popup {
    background: var(--gn-card-strong) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-lg) !important;
    box-shadow: var(--gn-shadow-pop) !important;
    color: var(--gn-text) !important;
}
.popup__overlay {
    background: rgba(0, 0, 0, 0.78) !important;
    overflow-y: auto !important;  /* единственная полоса — у overlay'а */
}
/* Popup центрируем через margin: auto. left/transform убраны — `transform: translateX(-50%)`
   совмещённый с inline-стилем charisma давал сдвиг вправо (popup имеет width = 446px,
   margin: auto центрирует корректно). */
.popup__overlay > .popup,
.popup__overlay > .popup_clean,
.popup__overlay > .popup_clean1,
.popup__overlay > .popup_clean2 {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 110px auto 40px !important;
    max-height: none !important;
    overflow-y: visible !important;
    z-index: 1100 !important;
}
/* Когда popup открыт — блокируем body scroll, чтобы не было второй полосы прокрутки.
   :has() работает в современных браузерах (Chrome 105+). */
body:has(.popup__overlay[style*="block"]),
body:has(.popup__overlay[style*="flex"]) {
    overflow: hidden !important;
}
/* Inputs/select/textarea внутри popup — приводим к темной теме (по умолчанию white).
   Обводка зелёная — иначе тёмный input сливается с тёмным фоном popup.
   :not() исключает кнопки/чекбоксы/файл — у них свой стиль. */
.popup input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
.popup .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
.popup textarea,
.popup .modal-body textarea,
.popup select,
.popup .modal-body select {
    background: var(--gn-card-input) !important;
    background-color: var(--gn-card-input) !important;
    color: var(--gn-text-strong) !important;
    -webkit-text-fill-color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 255, 102, 0.06) !important;
    padding: 8px 12px !important;
    margin: 10px 0 14px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.popup input::placeholder,
.popup textarea::placeholder {
    color: rgba(255, 255, 255, 0.30) !important;
}
/* Кнопки в popup'е — не обрезать текст («Сменить создателя» не влезает),
   увеличенный padding + nowrap + auto-width. Между input и кнопкой — отступ. */
.popup .modal-body .btn,
.popup .modal-footer .btn {
    white-space: nowrap !important;
    padding: 6px 18px !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: 8px !important;
}
.popup .modal-body input + .btn,
.popup .modal-body input ~ .btn {
    margin-top: 12px !important;
}
/* Кнопки в popup'е — разнести, чтобы не лежали впритык. */
.popup .modal-footer .btn,
.popup .modal-body .btn,
.popup .btn + .btn {
    margin: 4px 6px 4px 0 !important;
}
.popup .modal-footer {
    gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}
.popup__overlay_clean { background: rgba(0, 0, 0, 0.55) !important; }
#maskBody, #proctypeBody { background: rgba(0, 0, 0, 0.65) !important; }

/* ==== PAGINATION ==== */
.pagination ul {
    background: rgba(20, 23, 26, 0.55) !important;
    border-radius: var(--gn-radius-sm) !important;
    border: 1px solid var(--gn-border) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.pagination ul > li > a, .pagination ul > li > span {
    background: transparent !important;
    color: var(--gn-text) !important;
    border-left-color: var(--gn-border) !important;
    transition: all .12s ease;
}
.pagination ul > li > a:hover {
    background: var(--gn-accent-soft) !important;
    color: var(--gn-accent) !important;
}
.pagination ul > .active > a, .pagination ul > .active > span {
    background: var(--gn-accent) !important;
    color: #000 !important;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(0, 255, 102, 0.30) !important;
}
.pagination ul > .disabled > span, .pagination ul > .disabled > a {
    color: rgba(255, 255, 255, 0.22) !important;
}

/* ==== HR ==== */
hr {
    border-top-color: var(--gn-border) !important;
    border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}

/* ==== SHOP / PERS / MAILS — floating карточки ==== */
.row-fluid .shop-block,
.row-fluid .pers-block,
.row-fluid .mails-block {
    background: rgba(14, 16, 19, 0.78) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border) !important;
    border-radius: var(--gn-radius) !important;
    text-shadow: none !important;
    box-shadow: var(--gn-shadow-float) !important;
    filter: none !important;
    transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
    position: relative;
    overflow: hidden;
}
.row-fluid .shop-block::before,
.row-fluid .pers-block::before,
.row-fluid .mails-block::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gn-accent-line), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}
/* Карточки .pers-block / .shop-block / .mails-block — БЕЗ hover-эффекта на саму карточку
   (пользователь: «это обычная карточка, не должна реагировать на наведение»).
   Hover остаётся только на кнопках ВНУТРИ карточки (но без translateY — иначе налезают друг на друга). */
.row-fluid .shop-block:hover,
.row-fluid .pers-block:hover,
.row-fluid .mails-block:hover {
    background: rgba(14, 16, 19, 0.78) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%) !important;
    border-color: var(--gn-border) !important;
    color: var(--gn-text) !important;
    box-shadow: var(--gn-shadow-float) !important;
    transform: none !important;
}
.row-fluid .shop-block:hover::before,
.row-fluid .pers-block:hover::before,
.row-fluid .mails-block:hover::before {
    opacity: 0 !important;
}
/* Кнопки внутри карточек — без подъёма (вертикальные кнопки налезают друг на друга),
   только свечение/обводка/фон от обычного hover-стиля .btn. */
.row-fluid .pers-block .btn:hover,
.row-fluid .pers-block .btn:focus,
.row-fluid .pers-block .btn-primary:hover,
.row-fluid .pers-block .btn-success:hover,
.row-fluid .pers-block .btn-danger:hover,
.row-fluid .pers-block .btn-warning:hover,
.row-fluid .pers-block .btn-info:hover,
.row-fluid .pers-block .btn-inverse:hover,
.row-fluid .shop-block .btn:hover,
.row-fluid .shop-block .btn:focus,
.row-fluid .shop-block .btn-primary:hover,
.row-fluid .shop-block .btn-success:hover,
.row-fluid .shop-block .btn-danger:hover,
.row-fluid .shop-block .btn-warning:hover,
.row-fluid .shop-block .btn-info:hover,
.row-fluid .shop-block .btn-inverse:hover,
.row-fluid .mails-block .btn:hover,
.row-fluid .mails-block .btn:focus,
.row-fluid .mails-block .btn-primary:hover,
.row-fluid .mails-block .btn-success:hover,
.row-fluid .mails-block .btn-danger:hover,
.row-fluid .mails-block .btn-warning:hover,
.row-fluid .mails-block .btn-info:hover,
.row-fluid .mails-block .btn-inverse:hover {
    transform: none !important;
}
.shop-block hr, .pers-block hr, .mails-block hr {
    background-color: var(--gn-border) !important;
    color: var(--gn-border) !important;
}
.mails-block .name { color: var(--gn-text-strong) !important; }
.mails-block .role span { color: var(--gn-warn) !important; }
.mails-block .name span { color: #ff8a8a !important; }
.mails-reason { color: var(--gn-warn) !important; }
.mails-date   { color: var(--gn-accent) !important; }

.top-block {
    background: var(--gn-accent-soft) !important;
    background-image: linear-gradient(180deg, var(--gn-accent-mid) 0%, var(--gn-accent-soft) 100%) !important;
    color: var(--gn-text-strong) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 0 0 1px var(--gn-accent-line) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow) !important;
    filter: none !important;
}
.top-block:hover {
    background-image: linear-gradient(180deg, var(--gn-accent-mid) 0%, var(--gn-accent-mid) 100%) !important;
    box-shadow: inset 0 0 0 1px var(--gn-accent), 0 0 24px rgba(0, 255, 102, 0.25) !important;
}

/* ==== FOOTER ==== */
footer {
    color: var(--gn-text-mute) !important;
    border-top: 1px solid var(--gn-border) !important;
    margin-top: 28px;
    padding-top: 14px;
}
footer a { color: var(--gn-accent) !important; }
footer font[color="#a0a0a0"] { color: var(--gn-text-mute) !important; }

/* ==== Form-таблицы (outform/addlk/sendform) — в горизонтальный flex ====
   Старая разметка LK обёрнута в <table class="table table-bordered table-striped">,
   ряды идут ВЕРТИКАЛЬНО (input → «Голд: N» → кнопка). На широком экране это занимает
   много места и hover на tr рисует «полуплоскую обводку» через .table inset-shadow.
   Превращаем в горизонтальный flex, убираем табличные фоны/рамки/hover. */
form[name="outform"] table,
form[name="addlk"] table,
form[name="sendform"] table,
form[name="enterpromo"] table {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    width: auto !important;
    margin: 0 auto !important;
    box-shadow: none !important;
}
form[name="outform"] table tbody,
form[name="addlk"] table tbody,
form[name="sendform"] table tbody,
form[name="enterpromo"] table tbody {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}
form[name="outform"] table tr,
form[name="addlk"] table tr,
form[name="sendform"] table tr,
form[name="enterpromo"] table tr {
    display: contents !important;
    background: transparent !important;
}
/* Селектор включает `.table-striped` чтобы перебить общее правило
   `.table-striped tbody > tr:nth-child(odd) > td { background-color: rgba(255,255,255,.025) }`
   (специфичность 0,2,3). Без `.table-striped` в нашем селекторе была 0,1,3 — striped
   побеждал, td имел тонкий полупрозрачный фон (виден на mobile как «лишний прямоугольник»
   вокруг кнопки/input). Добавили `.table-striped` → 0,2,4 → перебивает. */
form[name="outform"] table.table-striped tbody td,
form[name="addlk"] table.table-striped tbody td,
form[name="sendform"] table.table-striped tbody td,
form[name="enterpromo"] table.table-striped tbody td,
form[name="outform"] table td,
form[name="addlk"] table td,
form[name="sendform"] table td,
form[name="enterpromo"] table td {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
}
/* Hover-обводки на ряды форм НЕ применять (она и создавала ту «полу-квадратную» рамку). */
form[name="outform"] table tbody tr:hover td,
form[name="addlk"] table tbody tr:hover td,
form[name="sendform"] table tbody tr:hover td,
form[name="enterpromo"] table tbody tr:hover td {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}
/* Input внутри form-tables — инлайн ширина, без растягивания. */
form[name="outform"] table input[type="text"],
form[name="outform"] table input[type="number"],
form[name="addlk"] table input[type="text"],
form[name="addlk"] table input[type="number"],
form[name="sendform"] table input[type="text"],
form[name="sendform"] table input[type="number"],
form[name="enterpromo"] table input[type="text"] {
    width: 180px !important;
    margin: 0 !important;
}
/* Центральная ячейка («Голд: N») меняет ширину при вводе → весь flex-ряд скачет.
   Фиксируем min-width на td и на сам span с числом — место зарезервировано даже
   когда число короткое. */
form[name="outform"] table tbody tr:nth-child(2) td {
    min-width: 140px !important;
    text-align: center !important;
}
#plus_gold,
#minus_gold,
form[name="outform"] table span[id^="plus_"],
form[name="outform"] table span[id^="minus_"] {
    display: inline-block !important;
    min-width: 60px !important;
    text-align: left !important;
}

/* ==== SweetAlert2 (swal2-*) — диалоги магазина «+» / «Редактировать» ====
   Дефолтный фон popup'а — белый. Перекрашиваем под тёмную тему.
   Кнопки/инпуты/иконки/footer — все приводим к нашему стилю. */
.swal2-container {
    background: rgba(0, 0, 0, 0.78) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1100 !important;
}
.swal2-popup {
    background: var(--gn-card-strong) !important;
    background-color: var(--gn-card-strong) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-pop) !important;
}
.swal2-title {
    color: var(--gn-text-strong) !important;
    font-weight: 700 !important;
}
.swal2-html-container,
.swal2-content {
    color: var(--gn-text) !important;
}
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    background: var(--gn-card-input) !important;
    color: var(--gn-text-strong) !important;
    -webkit-text-fill-color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: rgba(255, 255, 255, 0.30) !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--gn-accent) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5),
                0 0 0 4px var(--gn-accent-soft) !important;
    outline: none !important;
}
.swal2-validation-message {
    background: rgba(255, 94, 94, 0.10) !important;
    color: #ffd6d6 !important;
    border-radius: var(--gn-radius-sm) !important;
}
.swal2-footer {
    color: var(--gn-text-mute) !important;
    border-top: 1px solid var(--gn-border) !important;
}
.swal2-close {
    color: var(--gn-text-mute) !important;
}
.swal2-close:hover { color: var(--gn-text-strong) !important; }
.swal2-loader { border-color: var(--gn-accent) transparent var(--gn-accent) transparent !important; }

/* Кнопки SweetAlert — приводим к виду наших .btn (зелёная primary, серый cancel, красный deny) */
.swal2-actions .swal2-styled,
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: var(--gn-radius-sm) !important;
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.05) !important;
    transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.12), rgba(0, 154, 62, 0.25)) !important;
    background-image: linear-gradient(135deg, rgba(0, 255, 102, 0.12), rgba(0, 154, 62, 0.25)) !important;
    color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-accent-line) !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.4) !important;
}
.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus {
    border-color: var(--gn-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35),
                0 0 18px rgba(0, 255, 102, 0.30),
                inset 0 1px 2px rgba(255, 255, 255, 0.20) !important;
}
.swal2-styled.swal2-cancel {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border-mid) !important;
}
.swal2-styled.swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--gn-border-strong) !important;
    color: var(--gn-text-strong) !important;
    transform: translateY(-2px) !important;
}
.swal2-styled.swal2-deny {
    background: linear-gradient(135deg, rgba(255, 94, 94, 0.10), rgba(160, 30, 30, 0.25)) !important;
    color: var(--gn-text-strong) !important;
    border: 1px solid rgba(255, 94, 94, 0.40) !important;
}
.swal2-styled.swal2-deny:hover {
    border-color: var(--gn-error) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 94, 94, 0.22),
                0 0 18px rgba(255, 94, 94, 0.30) !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 4px var(--gn-accent-soft) !important; }

/* Иконки (?, ✓, ✗, ⚠) — приведение цветов под нашу палитру. */
.swal2-icon.swal2-question {
    color: var(--gn-info) !important;
    border-color: var(--gn-info) !important;
}
.swal2-icon.swal2-info {
    color: var(--gn-info) !important;
    border-color: var(--gn-info) !important;
}
.swal2-icon.swal2-success {
    color: var(--gn-accent) !important;
    border-color: var(--gn-accent-line) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-icon.swal2-success .swal2-success-ring {
    background-color: var(--gn-accent) !important;
    border-color: var(--gn-accent) !important;
}
.swal2-icon.swal2-warning {
    color: var(--gn-warn) !important;
    border-color: var(--gn-warn) !important;
}
.swal2-icon.swal2-error {
    color: var(--gn-error) !important;
    border-color: var(--gn-error) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--gn-error) !important;
}

/* ==== ShowCost — .gold / .silver «монетка + сумма» ====
   Charisma даёт span с background-image слева и padding-left: 15px — иконка центрируется
   через background-position, но текст-сумма сидит на baseline и визуально съезжает вниз.
   Решение: inline-flex с align-items: center + иконка через ::before pseudo. Тогда
   и иконка и число центрируются по вертикали ровно. */
.gold, .silver {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-left: 8px !important;
    padding-left: 0 !important;
    background: none !important;
    background-image: none !important;
}
.gold::before, .silver::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    flex: 0 0 auto;
}
.gold::before   { background-image: url(../img/gold.png) !important; }
.silver::before { background-image: url(../img/silver.png) !important; }

/* ==== TEXT HELPERS ==== */
small, .muted, .text-muted { color: var(--gn-text-mute) !important; }
.green { color: var(--gn-accent) !important; }
.red   { color: var(--gn-error) !important; }
.blue  { color: var(--gn-info) !important; }
.yellow{ color: var(--gn-warn) !important; }
.table-plugins td:nth-child(1) { color: var(--gn-info) !important; }
.table-plugins td:nth-child(3) { color: var(--gn-warn) !important; }
/* background-color, НЕ shorthand background — иначе стирается background-image
   с SVG-стрелкой от общего правила `select:not([multiple])` и стрелка пропадает. */
.dataTables_filter input, .dataTables_length select {
    background-color: var(--gn-card-input) !important;
    color: var(--gn-text) !important;
    border-color: var(--gn-border-mid) !important;
}
/* PVP-раздел: текст «ID:» в pvp.php — голый текст-узел в <form> без label, лепится
   к скруглённому краю input. Раздвигаем input и кнопку «Отправить приглашение». */
form[name="redform"]   input[type="text"],
form[name="blueform"]  input[type="text"],
form[name="zritform1"] input[type="text"],
form[name="zritform2"] input[type="text"] {
    margin: 0 10px !important;
}
/* Лейбл «Поиск:» / «10 записей» обёрнут вокруг input/select без зазора —
   текст лепится к скруглённому краю input. Делаем inline-flex + gap. */
.dataTables_filter label,
.dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate {
    color: var(--gn-text-mute) !important;
}
/* DataTables 1.9 ставит inline `style="width: <sum_of_th_widths>px"` на таблицу
   (bAutoWidth=true дефолт). На FullHD 1920 таблица получает ~1151px и НЕ растягивается
   на доступные ~1529px wrapper'а — справа пустота. Перебиваем. */
table.dataTable {
    width: 100% !important;
}
/* На планшете 768-1199 (и любом виде где таблица шире wrapper'а из-за фикс-ширин
   колонок — например klan.php с 11 колонками) — горизонтальный скролл внутри обёртки.
   Без этого таблица вылазит за `.box-content` и видна обрезанной правой границей. */
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ==== CODE / PRE / KBD ==== */
code, kbd, samp, tt, var {
    background: rgba(0, 255, 102, 0.07) !important;
    color: #b8ffd0 !important;
    border: 1px solid rgba(0, 255, 102, 0.18) !important;
    border-radius: var(--gn-radius-sm) !important;
    padding: 1px 8px !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace !important;
    font-size: 0.92em;
    text-shadow: none !important;
    white-space: normal;
}
pre {
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border) !important;
    border-radius: var(--gn-radius-sm) !important;
    padding: 14px 16px !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace !important;
    line-height: 1.55;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}
pre code, pre > code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}
table.table.table-bordered td > code:only-child {
    display: inline-block;
    background: rgba(0, 255, 102, 0.06) !important;
    color: #c8e6d4 !important;
    border-color: rgba(0, 255, 102, 0.14) !important;
    padding: 6px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4;
    border-radius: var(--gn-radius-sm) !important;
}

/* =========================================================================
   GENESIS PW — DARK INDUSTRIAL TOGGLE SWITCH (jquery.iphone.toggle)
   ========================================================================= */

/* Контейнер: строгий глубокий паз с эффектом внутренней тени */
.iPhoneCheckContainer {
    box-sizing: border-box !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: var(--gn-card-input) !important;
    border: 1px solid var(--gn-border-strong) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    height: 32px !important;
    min-height: 32px !important;
    position: relative !important;
}
.iPhoneCheckContainer * { box-sizing: border-box !important; }

.iPhoneCheckContainer .iPhoneCheckLabelOn,
.iPhoneCheckContainer .iPhoneCheckLabelOff {
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: 100% !important;
}
.iPhoneCheckContainer .iPhoneCheckLabelOn {
    background: linear-gradient(90deg, rgba(0,255,102,0) 0%, var(--gn-accent-mid) 100%) !important;
    box-shadow: inset -4px 0 10px -4px var(--gn-accent-glow) !important;
}
.iPhoneCheckContainer .iPhoneCheckLabelOff { background: transparent !important; }

.iPhoneCheckContainer .iPhoneCheckLabelOn span,
.iPhoneCheckContainer .iPhoneCheckLabelOff span {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
}
.iPhoneCheckContainer .iPhoneCheckLabelOn span {
    color: var(--gn-accent) !important;
    justify-content: flex-start !important;
    padding-left: 12px !important;
    text-shadow: 0 0 8px var(--gn-accent-glow), 0 0 3px var(--gn-accent) !important;
}
.iPhoneCheckContainer .iPhoneCheckLabelOff span {
    color: var(--gn-text-mute) !important;
    justify-content: flex-end !important;
    padding-right: 12px !important;
}

/* Ползунок: glassmorphism (backdrop-filter здесь безопасен — handle не
   родитель .popup/.popup__overlay, ограничение CLAUDE.md не нарушается). */
.iPhoneCheckContainer .iPhoneCheckHandle {
    height: 26px !important;
    top: 2px !important;
    background: var(--gn-card) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--gn-border-strong) !important;
    border-radius: 4px !important;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.iPhoneCheckContainer .iPhoneCheckHandleRight,
.iPhoneCheckContainer .iPhoneCheckHandleLeft { display: none !important; }

/* Центр ручки — LED-индикатор состояния. */
.iPhoneCheckContainer .iPhoneCheckHandleCenter {
    width: 2px !important;
    height: 12px !important;
    border-radius: 2px !important;
    background: var(--gn-text-mute) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
.iPhoneCheckChecked .iPhoneCheckHandle {
    border-color: var(--gn-accent-line) !important;
}
.iPhoneCheckChecked .iPhoneCheckHandleCenter {
    background: var(--gn-accent) !important;
    box-shadow: 0 0 6px var(--gn-accent-glow), 0 0 2px var(--gn-accent) !important;
}

/* ==== Chosen select ====
   ВЕРСИЯ Chosen в проекте — 0.9.8 (старая). Классы:
     .chzn-container, .chzn-container-active (на контейнере при открытии),
     .chzn-single (закрытая плашка), .chzn-single-with-drop (на плашке при открытии),
     .chzn-drop (выпадающий список).
   chosen.css применяет к `.chzn-container-single .chzn-single` (0,2,0) белый
   linear-gradient + height:23px + padding:0 0 0 8px. Перебиваем через 0,3,0+!important. */
.chzn-container {
    vertical-align: middle !important;     /* без этого .chzn-container лежит на baseline и съезжает вниз относительно соседних input */
    margin: 0 !important;
}
/* Ширина Chosen-плашки. inherit_select_classes: true в charisma.js копирует bootstrap-классы
   на .chzn-container — `.input-medium` (150px) и `.input-small` (90px) узкие для опций
   «Все категории» / «Сначала новые» с учётом стрелки и padding. Расширяем. */
.chzn-container.input-medium { width: 220px !important; min-width: 220px !important; }
.chzn-container.input-small  { width: 140px !important; min-width: 140px !important; }
.chzn-container.input-large  { width: 280px !important; min-width: 280px !important; }
/* DataTables length-меню («... записей») использует свой Chosen с inline-style width:60px —
   текста типа «100» с padding и стрелкой не помещается, .chzn-single span сжимается до 0px
   (на странице видна только стрелка без цифры). Принудительно раздвигаем. */
.dataTables_length .chzn-container {
    width: 90px !important;
    min-width: 90px !important;
}
.dataTables_length .chzn-container .chzn-single span {
    display: inline-block !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* .chzn-drop наследует width от .chzn-container (Chosen ставит inline-style); если ширина
   контейнера задана через CSS — drop тоже становится той же ширины автоматически. */
.chzn-container .chzn-single,
.chzn-container.chzn-container-single .chzn-single,
.chzn-container .chzn-single-with-drop {
    background-color: var(--gn-card-input) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.10) 100%) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40) !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 26px 0 12px !important;
    text-shadow: none !important;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}
.chzn-container .chzn-single:hover,
.chzn-container.chzn-container-single .chzn-single:hover {
    border-color: var(--gn-accent-line) !important;
    background-color: rgba(8, 14, 10, 0.70) !important;
    color: var(--gn-text-strong) !important;
}
.chzn-container .chzn-single span,
.chzn-container.chzn-container-single .chzn-single span { color: var(--gn-text) !important; }
.chzn-container .chzn-single div {
    background: transparent !important;
    border-left: 1px solid var(--gn-border) !important;
}
/* Стрелка справа — белая SVG (как у нативных select), перебиваем chosen-sprite.png.
   Также перебиваем chosen.css:341 `background-position: -18px 1px` в открытом состоянии. */
.chzn-container .chzn-single div b,
.chzn-container-active .chzn-single-with-drop div b {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23ffffff' d='M3 4.5l3 3 3-3z'/></svg>") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
    opacity: 0.9;
}
/* Открытое состояние — ТОЛЬКО когда dropdown реально открыт (класс .chzn-single-with-drop).
   В Chosen 0.9.8 .chzn-container-active остаётся на контейнере и после выбора опции —
   если стилизовать по нему, верхние-только скругления и зелёная обводка «залипают».
   Поэтому условие — именно .chzn-single-with-drop (живёт строго пока список развёрнут).
   ВАЖНО: специфичность ≥0,3,0 чтобы перебить общее правило `.chzn-container.chzn-container-single
   .chzn-single` (0,3,0) выше — иначе border/border-radius из общего побеждают. */
.chzn-container.chzn-container-single .chzn-single-with-drop,
.chzn-container.chzn-container-active .chzn-single-with-drop {
    background-color: var(--gn-card-input) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.10) 100%) !important;
    color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-accent-line) !important;
    /* При открытом dropdown — только верхние скругления, низ примыкает к .chzn-drop без шва */
    border-radius: var(--gn-radius-sm) var(--gn-radius-sm) 0 0 !important;
    border-bottom-color: transparent !important;
    /* Без `0 1px 0 #fff inset` от chosen.css (он создавал «сжатие сверху») */
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(0, 255, 102, 0.18) !important;
}
/* Перебиваем chosen.css `.chzn-container-active .chzn-single { border: 1px solid #5897fb }` —
   синяя обводка появлялась после выбора и оставалась залипшей. Возвращаем нашу серую. */
.chzn-container-active .chzn-single:not(.chzn-single-with-drop) {
    border-color: var(--gn-border-mid) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40) !important;
}
.chzn-container .chzn-drop {
    background: var(--gn-card-strong) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-top: 0 !important;            /* верх примыкает к низу .chzn-single без двойной рамки */
    border-radius: 0 0 var(--gn-radius-sm) var(--gn-radius-sm) !important;
    box-shadow: var(--gn-shadow-pop) !important;
    -webkit-backdrop-filter: var(--gn-blur);
    backdrop-filter: var(--gn-blur);
    margin-top: -1px !important;         /* перекрытие на 1px чтобы исчез "квадратик сверху" */
    /* width перебиваем только при открытом dropdown'е — иначе Chosen не может скрыть
       его через left:-9999px, и список висит постоянно. */
    box-sizing: border-box !important;
}
/* Открытый dropdown — width 100% от контейнера (Chosen ставит inline-style в пикселях). */
.chzn-container.chzn-container-active .chzn-drop,
.chzn-container .chzn-single-with-drop + .chzn-drop {
    width: 100% !important;
}
.chzn-container .chzn-results {
    background: transparent !important;
    color: var(--gn-text) !important;
    margin: 4px !important;
    padding: 0 !important;
}
/* Опции — без border-radius (накладываются у соседних), без вертикального margin (не "стопкой"),
   accent на hover и selected без "наезжания" друг на друга. */
.chzn-container .chzn-results li {
    background: transparent !important;
    color: var(--gn-text) !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    margin: 1px 0 !important;            /* зазор 2px между опциями — accent-фон не сливается */
    line-height: 1.3 !important;
}
.chzn-container .chzn-results li.highlighted {
    background: var(--gn-accent-soft) !important;
    background-image: none !important;
    color: var(--gn-accent) !important;
}
.chzn-container .chzn-results li.result-selected {
    background: var(--gn-accent-mid) !important;
    color: var(--gn-text-strong) !important;
}
/* Если опция и highlighted (наводимся) и result-selected (выбрана) одновременно —
   доминирует hover-стиль (видно куда переходим), без наслоения двух фонов. */
.chzn-container .chzn-results li.result-selected.highlighted {
    background: var(--gn-accent-soft) !important;
    color: var(--gn-accent) !important;
}
.chzn-container .chzn-search input {
    background: var(--gn-card-input) !important;
    color: var(--gn-text) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40) !important;
}
.chzn-container-multi .chzn-choices {
    background: var(--gn-card-input) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
}
.chzn-container-multi .chzn-choices .search-choice {
    background: var(--gn-accent-mid) !important;
    background-image: none !important;
    color: var(--gn-text-strong) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.chzn-container-multi .chzn-choices .search-field input {
    color: var(--gn-text) !important;
    background: transparent !important;
}

/* ==== Uniform plugin (file uploader, sprites) ====
   Uniform применяет стили через `div.uploader` / `div.uploader span.action`
   (специфичность 0,1,1 / 0,2,1) — мои короткие `.uploader` / `.uploader .action`
   их НЕ перебивают. Используем тот же `div.uploader ...` тег-селектор. */
.checker, .radio, .uploader, .selector {
    background-image: none !important;
    background: transparent !important;
}
div.uploader {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 32px !important;
    width: auto !important;               /* Uniform ставит width: 190px — перебиваем */
    min-width: 240px !important;          /* filename (~120) + action (~110) */
    flex: 0 1 auto !important;
    border-radius: var(--gn-radius-sm) !important;
    overflow: hidden !important;
    border: 1px solid var(--gn-border-mid) !important;
    background: var(--gn-card-input) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40) !important;
    vertical-align: middle !important;
    margin-right: 0 !important;
    cursor: pointer !important;
}
div.uploader span.filename {
    background: transparent !important;
    color: var(--gn-text) !important;
    padding: 0 12px !important;
    line-height: 30px !important;
    height: 30px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    border: 0 !important;
    flex: 1 1 120px !important;
    min-width: 120px !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    cursor: pointer !important;
}
div.uploader span.action {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.10) 100%) !important;
    color: var(--gn-text-strong) !important;
    border: 0 !important;
    border-left: 1px solid var(--gn-border-mid) !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: none !important;
    height: 30px !important;
    min-height: 30px !important;
    flex: 0 0 auto !important;            /* не сжимается */
    width: auto !important;               /* по содержимому, не фиксированная */
    min-width: 0 !important;
    box-sizing: border-box !important;
    /* Inline-flex с центрированием — текст-нода Uniform не центрируется через text-align
       при фиксированной ширине от плагина. Flex-родитель с justify/align-center работает. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}
/* Невидимый input[type=file] поверх .uploader (Uniform: absolute + opacity 0).
   Курсор pointer чтобы вся зона (включая центр, где input перекрывает span'ы)
   показывала «пальчик». */
div.uploader input[type="file"] {
    cursor: pointer !important;
}
/* В клановой форме «Выберите файл + Загрузить» кнопка submit может перенестись на
   следующую строку и обрезаться. Даём родителю flex+wrap+gap, элементам — выравнивание. */
.box-content form .uploader,
.box-content form input[type="submit"],
.box-content form input[type="button"],
.box-content form button.btn,
.box-content form a.btn {
    vertical-align: middle !important;
}
/* Форма загрузки иконки клана (klan.php): «Выберите картинку: [.uploader] [Загрузить]» —
   ставим в одну линию через flex БЕЗ wrap (иначе submit падает вниз даже когда есть место).
   uploader сжимается через flex: 0 1 auto, submit не сжимается. */
form[name="upload"] {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 8px 0 !important;
}
form[name="upload"] input[type="submit"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
/* Hover — мягкий accent-soft, не токсичный неон. Зелёный текст на зеленоватом фоне. */
.uploader.hover .action,
.uploader:hover .action,
.uploader .action:hover {
    background: var(--gn-accent-soft) !important;
    background-image: none !important;
    color: var(--gn-accent) !important;
    box-shadow: inset 0 0 12px rgba(0, 255, 102, 0.20) !important;
}
/* Шапка: .gold/.silver внутри кнопок шапки — центрирование по вертикали в flex .btn.
   Дефолтный .gold/.silver имеет margin-left: 8px и ::before-иконку 14×14, которая
   через inline-flex родителя центрируется по своей внутренней оси, но текстовая
   нода-метка («Монеты на счету:») сидит на baseline кнопки → визуально циферка
   уезжала вниз. Фиксим: явная высота как у кнопки + align-self center в flex-родителе. */
.navbar .btn .gold,
.navbar .btn .silver,
.navbar .btn-group .btn .gold,
.navbar .btn-group .btn .silver {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    vertical-align: middle !important;
    height: 32px !important;
    line-height: 1 !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.navbar .btn .gold::before,
.navbar .btn .silver::before,
.navbar .btn-group .btn .gold::before,
.navbar .btn-group .btn .silver::before {
    align-self: center !important;
    vertical-align: middle !important;
    margin: 0 4px 0 0 !important;
}
.uploader.focus, .uploader.active {
    border-color: var(--gn-accent-line) !important;
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.40),
        0 0 0 4px rgba(0, 255, 102, 0.08) !important;
}
/* Uniform для checkbox/radio оборачивает нативный input в <div class="checker">
   <span class="checked|disabled"><input type=...></span></div>. Дефолтный спрайт
   (uniform.default.css) плохо читаем на тёмном фоне — рисуем свои квадраты под Genesis.
   div.checker — внешняя обёртка, div.checker span — визуальный квадрат, при чек-классе
   .checked показываем зелёную галочку через ::after. Сам input лежит сверху прозрачным
   (Uniform его скрывает).
   ВАЖНО: тег-селектор `div.checker` (а не просто `.checker`) — иначе цепляет
   BS2 `<label class="checkbox">` и сжимает его до 18×18, ломая layout формы. */
div.checker {
    display: inline-block !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 6px 2px 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
}
div.checker span {
    display: inline-block !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--gn-card-input) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40) !important;
    box-sizing: border-box !important;
    transition: border-color .15s, background-color .15s, box-shadow .15s !important;
}
div.checker:hover span,
div.checker span.hover,
div.checker span.focus {
    border-color: var(--gn-accent-line) !important;
    background: rgba(8, 14, 10, 0.70) !important;
}
div.checker span.checked {
    background: var(--gn-accent-mid) !important;
    background-image: none !important;
    border-color: var(--gn-accent-line) !important;
    box-shadow: 0 0 10px var(--gn-accent-glow), inset 0 1px 1px rgba(0, 0, 0, 0.30) !important;
}
div.checker span.checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--gn-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    pointer-events: none;
}
div.checker span.disabled,
div.checker span.disabled.checked {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}
div.checker input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Radio: тот же подход, только круглая форма + точка вместо галочки.
   Тег-селектор `div.radio` (не `.radio`) — иначе цепляет BS2 `<label class="radio">`
   на remember.php / любых формах с inline-radio и сжимает label до 18×18. */
div.radio {
    display: inline-block !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 6px 2px 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
}
div.radio span {
    display: inline-block !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--gn-card-input) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40) !important;
    box-sizing: border-box !important;
    transition: border-color .15s, background-color .15s, box-shadow .15s !important;
}
div.radio:hover span,
div.radio span.hover,
div.radio span.focus {
    border-color: var(--gn-accent-line) !important;
    background: rgba(8, 14, 10, 0.70) !important;
}
div.radio span.checked {
    border-color: var(--gn-accent-line) !important;
    box-shadow: 0 0 10px var(--gn-accent-glow), inset 0 1px 1px rgba(0, 0, 0, 0.30) !important;
}
div.radio span.checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 8px;
    height: 8px;
    background: var(--gn-accent);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--gn-accent-glow);
    pointer-events: none;
}
div.radio input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* ==== Tab content ==== */
.tab-content { background: transparent !important; color: var(--gn-text) !important; }
.tab-pane { color: var(--gn-text) !important; }

/* ==== AUTH ==== */
.login, .welcome-user { color: var(--gn-text-strong); }

/* ==== SCROLLBAR ==== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--gn-accent-mid);
    border-radius: 10px;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gn-accent);
    box-shadow: 0 0 10px var(--gn-accent-glow);
}
::-webkit-scrollbar-corner { background: transparent; }
* {
    scrollbar-color: var(--gn-accent-mid) transparent;
    scrollbar-width: thin;
}

/* =========================================================
   GENESIS PW - ОБНОВЛЕНИЕ ДИЗАЙНА ЛК (Стиль, чистота, минимализм)
   ========================================================= */

/* --- 1. ПАРЯЩАЯ ШАПКА (Floating Glass Pill) ---
   `display: flex` на .navbar-inner — это десктопный layout (pill, кнопки в одну
   линию по vertical center). На ≤1199 он мешает BS2 default float (top-nav и
   sidebar отображаются как линейный block) — поэтому всё что про flex/height
   фиксированный обёрнуто в @media min-width: 1200px.

   Backgrounds, borders, blur, glassmorphism — БЕЗ @media, применяются всегда. */
.navbar {
    margin: 24px 0 32px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    z-index: 1040 !important;
}
/* Раньше тут было два media-правила (1200-1429 / ≥1430) с разными padding-right
   шапки — они компенсировали charisma'вский зазор между #content (83-84%) и
   row-fluid (100%). После того как мы зафиксировали sidebar 270px и content
   через calc(100% - 290px), зазора больше нет — шапка ровна с правым краем
   контента без подгонки. Удалено: устраняло скачок layout на границе 1429→1430. */
/* Background/border/blur ШАПКИ — применяются ВЕЗДЕ (на всех breakpoints).
   Visual identity Genesis-pill. */
.navbar-inner {
    background: var(--gn-card) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-lg) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

/* ─── DESKTOP ≥1200: pill-layout с фиксированной высотой кнопок 32px ─────────
   Этот блок ОБЁРНУТ в @media min-width:1200 — на ≤1199 не применяется.
   Внизу 1199 работает общая bootstrap-responsive.css (та же что у classic,
   cyborg, cerulean и других 9 тем) + базовый Genesis (раздел 1, ~строки 130-260).
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {

.navbar-inner {
    padding: 8px 16px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;          /* вертикальное центрирование .container-fluid внутри pill */
}
/* .container-fluid — единственный flex-child .navbar-inner, занимает всю ширину
   и фиксированной высоты 32px (= высоте кнопок), чтобы float'ы внутри легли
   на одной горизонтальной линии. Без height:32px float-кнопки прижимаются
   к верху контейнера и шапка выглядит «кнопки сверху, пустота снизу». */
.navbar .container-fluid,
.navbar .container {
    width: 100% !important;
    height: 32px !important;
}
.navbar .brand {
    color: var(--gn-text-strong) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    padding: 0 24px 0 16px !important;
    margin-left: 8px !important;
    height: 32px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}
/* Логотип и текст бренда — центрируем строго через flex (родитель .brand с align-items: center).
   line-height: 32px на span ломал центровку — заменили на 1. */
.navbar .brand > img {
    float: none !important;
    margin: 0 10px 0 0 !important;
    display: inline-block !important;
}
.navbar .brand > span {
    float: none !important;
    line-height: 1 !important;
    display: inline-block !important;
}
/* Убираем лишний padding/margin у btn-group в шапке — кнопки должны быть 32px */
.navbar .btn-group {
    padding: 0 !important;
    margin: 0 0 0 4px !important;
}
.navbar .btn-group:first-child {
    margin-left: 0 !important;
}
/* Срок действия "261 дн" — выравниваем (был margin-top:5px) */
.navbar .btn-group > .btn,
.navbar .btn-group > a.btn {
    height: 32px !important;
    line-height: 20px !important;
    padding: 6px 14px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* "Перейти на сайт" живёт в обёртке .top-nav.nav-collapse — BS2 ставит ей
   height:0 + overflow:hidden когда .collapse не имеет .in. На десктопе (≥1200)
   сбрасываем — стилизуем как inline pill-кнопку рядом с .brand.
   Этот блок уже внутри обёртки @media min-width:1200, поэтому утечки в ≤1199
   нет — там BS2-responsive.css работает по дефолту (как у всех других тем). */
.navbar .top-nav,
.navbar .nav-collapse,
.navbar .top-nav.nav-collapse,
.navbar div.nav-collapse.collapse {
    height: 32px !important;
    min-height: 32px !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    float: left !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Внутри .top-nav стоит <ul class="nav"><li><a>Перейти на сайт</a></li></ul> —
   это обычная ссылка БЕЗ класса .btn. Центрируем и стилизуем как кнопку. */
.navbar .top-nav > ul.nav,
.navbar .top-nav .nav {
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
}
.navbar .top-nav > ul.nav > li,
.navbar .top-nav .nav > li {
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
}
/* "Перейти на сайт" — голая <a> внутри <ul class="nav">. Делаем кнопкой такого же
   стиля, как остальные элементы шапки (рамка, фон, padding, высота 32). */
.navbar .top-nav > ul.nav > li > a,
.navbar .top-nav .nav > li > a {
    color: var(--gn-text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border-mid) !important;
    text-decoration: none !important;
    border-radius: var(--gn-radius-sm) !important;
    height: 32px !important;
    line-height: 1 !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    background: transparent !important;
    transition: none !important;
}
.navbar .top-nav > ul.nav > li > a:hover,
.navbar .top-nav .nav > li > a:hover,
.navbar .top-nav > ul.nav > li > a:focus,
.navbar .top-nav .nav > li > a:focus {
    color: var(--gn-accent) !important;
    background: var(--gn-accent-soft) !important;
    border-color: var(--gn-accent-line) !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(0, 255, 102, 0.22),
        inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow) !important;
    border-radius: var(--gn-radius-sm) !important;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, text-shadow .15s ease !important;
}
.navbar .top-nav > ul.nav > li > a:active,
.navbar .top-nav .nav > li > a:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
.navbar .top-nav > ul.nav > li > a:focus,
.navbar .top-nav .nav > li > a:focus {
    background: transparent !important;
    text-decoration: none !important;
    outline: none !important;
}
/* "Счёт №" в навбаре — это .btn.btn-link (Menu.php). Делаем его визуально как обычную
   кнопку шапки: видимая серая рамка по умолчанию, овальный радиус, тот же фон и высота. */
.navbar .btn-link,
.navbar .top-nav .btn-link,
.navbar a.btn.btn-link {
    color: var(--gn-text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-image: none !important;
    border: 1px solid var(--gn-border-mid) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    border-radius: var(--gn-radius-sm) !important;
    height: 32px !important;
    line-height: 1 !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    align-self: center !important;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, text-shadow .15s ease !important;
}
.navbar .btn-link:hover,
.navbar .top-nav .btn-link:hover,
.navbar a.btn.btn-link:hover {
    color: var(--gn-accent) !important;
    background: var(--gn-accent-soft) !important;
    border: 1px solid var(--gn-accent-line) !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(0, 255, 102, 0.22),
        inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow) !important;
    border-radius: var(--gn-radius-sm) !important;
}
.navbar .btn-link:active,
.navbar .top-nav .btn-link:active,
.navbar a.btn.btn-link:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/* Focus БЕЗ подчёркивания — иначе после клика и отвода мыши остаётся подчёркнутым */
.navbar .btn-link:focus,
.navbar .top-nav .btn-link:focus,
.navbar a.btn.btn-link:focus {
    color: var(--gn-text) !important;
    background: transparent !important;
    text-decoration: none !important;
    outline: none !important;
    transition: none !important;
}
/* (Правила иконок icon-user / icon-shopping-cart / общий filter — вынесены
   ПОСЛЕ закрытия @media min-width:1200, чтобы работать и на мобильных тоже.
   Раньше были тут — применялись только на десктопе.) */
/* Внутри кнопок — иконки, картинки, <b>, <span>, <i> — все по вертикали по центру строки */
.navbar .btn,
.navbar .btn-link {
    line-height: 1 !important;
}
.navbar .btn > *,
.navbar .btn-link > *,
.navbar .brand > * {
    vertical-align: middle !important;
    line-height: 1 !important;
}
.navbar .btn img,
.navbar .btn-link img,
.navbar .brand img {
    vertical-align: middle !important;
    display: inline-block !important;
}
.navbar .btn b,
.navbar .btn span,
.navbar .btn i {
    vertical-align: middle !important;
    line-height: 1 !important;
    display: inline-block !important;
}
/* Caret (стрелочка вниз) в dropdown-кнопках шапки */
.navbar .btn .caret,
.navbar .dropdown-toggle .caret {
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-left: 6px !important;
    margin-bottom: 2px !important;
}
/* "261 дн ..." — это .btn-group с margin-top:5px, сбрасываем */
.navbar .btn-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.navbar .brand:hover,
.navbar .brand:focus {
    color: var(--gn-accent) !important;
    text-shadow: 0 0 12px var(--gn-accent-glow) !important;
    text-decoration: none !important;
    outline: none !important;
    border-bottom: 0 !important;
}
/* Все ссылки и кнопки в шапке — без подчёркивания НИ В КАКОМ состоянии */
.navbar a,
.navbar a:link,
.navbar a:visited,
.navbar .btn,
.navbar .btn-group .btn,
.navbar .btn-link,
.navbar .dropdown-toggle {
    text-decoration: none !important;
    outline: none !important;
}
/* border-bottom: 0 ТОЛЬКО для голых <a> (BS дефолтное подчёркивание = bottom-border).
   На .btn / .btn-group .btn / .dropdown-toggle НЕ применяем — иначе срезает рамку. */
.navbar a:hover,
.navbar a:focus,
.navbar a:active {
    text-decoration: none !important;
    outline: none !important;
    border-bottom: 0 !important;
}
.navbar .btn:hover,
.navbar .btn:focus,
.navbar .btn:active,
.navbar .btn-group .btn:hover,
.navbar .btn-group .btn:focus,
.navbar .btn-group .btn:active,
.navbar .btn-link:hover,
.navbar .btn-link:focus,
.navbar .btn-link:active,
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus {
    text-decoration: none !important;
    outline: none !important;
}
/* "Перейти на сайт" и подобные .btn-link — синий цвет Bootstrap'а перебиваем */
.navbar .btn-link {
    color: var(--gn-text) !important;
    text-decoration: none !important;
}
.navbar .btn-link:hover,
.navbar .btn-link:focus {
    color: var(--gn-text-strong) !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}
/* Кнопки в шапке — приподнимаются вверх + зелёная обводка/свечение на hover.
   Все цветные варианты (primary/success/danger/info/warning) получают одинаковую зелёную
   подсветку (без красного/жёлтого «как на обычных страницах»). */
.navbar .btn:hover,
.navbar .btn:focus,
.navbar .btn-group .btn:hover,
.navbar .btn-group .btn:focus,
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus,
.navbar .btn-primary:hover,
.navbar .btn-primary:focus,
.navbar .btn-success:hover,
.navbar .btn-success:focus,
.navbar .btn-danger:hover,
.navbar .btn-danger:focus,
.navbar .btn-inverse:hover,
.navbar .btn-inverse:focus,
.navbar .btn-info:hover,
.navbar .btn-info:focus,
.navbar .btn-warning:hover,
.navbar .btn-warning:focus {
    background: var(--gn-accent-soft) !important;
    background-image: none !important;
    color: var(--gn-accent) !important;
    border-color: var(--gn-accent-line) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(0, 255, 102, 0.22),
        inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow) !important;
}
/* (Правило .navbar .btn-danger вынесено ПОСЛЕ закрытия @media min-width:1200.) */
.navbar .btn:active,
.navbar .btn-group .btn:active,
.navbar .dropdown-toggle:active,
.navbar .btn-primary:active,
.navbar .btn-success:active,
.navbar .btn-danger:active,
.navbar .btn-inverse:active,
.navbar .btn-info:active,
.navbar .btn-warning:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/* Иконка письма и подобные «голые» ссылки — высота 32px чтобы матчиться с остальными */
.navbar .pull-right:not(.btn-group) {
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.navbar .pull-right:not(.btn-group) > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    height: 32px !important;
    padding: 0 !important;
}
.navbar .pull-right:not(.btn-group) > a > i,
.navbar .pull-right:not(.btn-group) > a > img {
    vertical-align: middle !important;
    margin: 0 !important;
}

}  /* === КОНЕЦ @media (min-width: 1200px) для шапки === */

/* ─── Глобальные правила шапки (на всех breakpoint'ах) ──────────────────────
   Эти правила ДОЛЖНЫ работать и на десктопе ≥1200, и на мобиле ≤1199 —
   поэтому вынесены ИЗ @media-блока. Раньше лежали внутри desktop-секции
   и применялись только на больших экранах: иконки персонажа/монет были
   серые на мобилке, кнопка логина мерцала красным на ховере. */

/* Иконки в кнопках шапки (профиль, монеты) — рендерим инлайновым SVG.
   Bootstrap2 sprite + cyborg.css инвертирует .icon-white (тёмные иконки на
   тёмной кнопке = серые), filter brightness/invert работает не везде.
   Inline-SVG = белый цвет гарантированно, без зависимости от PNG. */
.navbar .btn > i.icon-user,
.navbar .dropdown-toggle > i.icon-user {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-2.67 0-8 1.34-8 4V14h16v-.5c0-2.66-5.33-4-8-4Z'/></svg>") !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    width: 14px !important;
    height: 14px !important;
    filter: none !important;
    opacity: 1 !important;
}
.navbar .btn > i.icon-shopping-cart,
.navbar .dropdown-toggle > i.icon-shopping-cart {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path d='M0 1.5A.5.5 0 0 1 .5 1h2a.5.5 0 0 1 .485.379L3.89 5H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 14H4a.5.5 0 0 1-.491-.408L1.61 3.476 1.01 2H.5a.5.5 0 0 1-.5-.5ZM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm7 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/></svg>") !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    width: 14px !important;
    height: 14px !important;
    filter: none !important;
    opacity: 1 !important;
}
/* Прочие icon-* в кнопках шапки (новые, не покрытые SVG) — белый через filter */
.navbar .btn > i:not(.icon-color):not(.icon-user):not(.icon-shopping-cart),
.navbar .btn-link > i:not(.icon-color):not(.icon-user):not(.icon-shopping-cart),
.navbar .dropdown-toggle > i:not(.icon-color):not(.icon-user):not(.icon-shopping-cart) {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* btn-danger в шапке (кнопка логина) — НЕ красная. Глобальный .btn-danger
   ставит красный градиент, при ховере transition мерцает красный→жёлтый→
   зелёный по дороге к accent-soft. Сбрасываем default до серой «таблетки»
   как у остальных кнопок → плавный переход серый → зелёный без мерцания. */
.navbar .btn-group > .btn-danger,
.navbar .btn-danger {
    background: rgba(255, 255, 255, 0.04) !important;
    background-image: none !important;
    border-color: var(--gn-border-mid) !important;
    color: var(--gn-text) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* ─── 1200-1473: force-wrap «Перейти на сайт» ТОЛЬКО на админских аккаунтах ──
   У админа в шапке торчат таймер лицензии (.label-important), значки «Админ»
   и «Права ГМ» — правый float-стек переполняется и top-nav кривовато прыгает
   под «Изменить тему» (float:left стекается за float:right'ами). Force через
   clear:left + центрируем под brand'ом.

   На обычном аккаунте этих маркеров нет, места до 1260 хватает с запасом —
   top-nav остаётся в одной строке с brand'ом. Селектор :has() различает
   шапку с админ-маркерами и без них (Chrome 105+, Firefox 121+, Safari 15.4+). */
@media (min-width: 1200px) and (max-width: 1473px) {
    .navbar:has(.label-important) .top-nav,
    .navbar:has(.label-important) .nav-collapse,
    .navbar:has(.label-important) .top-nav.nav-collapse,
    .navbar:has(.label-important) div.nav-collapse.collapse,
    .navbar:has(img[alt="Админ"]) .top-nav,
    .navbar:has(img[alt="Админ"]) .nav-collapse,
    .navbar:has(img[alt="Админ"]) .top-nav.nav-collapse,
    .navbar:has(img[alt="Админ"]) div.nav-collapse.collapse,
    .navbar:has(img[alt="Права ГМ"]) .top-nav,
    .navbar:has(img[alt="Права ГМ"]) .nav-collapse,
    .navbar:has(img[alt="Права ГМ"]) .top-nav.nav-collapse,
    .navbar:has(img[alt="Права ГМ"]) div.nav-collapse.collapse {
        clear: left !important;
        margin: 0 0 0 18px !important;
    }

}

/* На не-админских аккаунтах «Перейти на сайт» помещается рядом с brand'ом
   вплоть до ~1271. Ниже — правый стек упирается в неё, она прыгает под brand.
   Только в этом узком диапазоне заменяем длинный текст на компактный «↗ Сайт»
   (экономия ~95px). Padding и height — как у остальных кнопок шапки, чтобы
   высота не выбивалась из ряда. На ≥1272 — полный «Перейти на сайт». */
@media (min-width: 1200px) and (max-width: 1271px) {
    .navbar:not(:has(.label-important)):not(:has(img[alt="Админ"])):not(:has(img[alt="Права ГМ"])) .top-nav > ul.nav > li > a,
    .navbar:not(:has(.label-important)):not(:has(img[alt="Админ"])):not(:has(img[alt="Права ГМ"])) .top-nav .nav > li > a {
        font-size: 0 !important;
        padding: 6px 14px !important;
        height: 32px !important;
    }
    .navbar:not(:has(.label-important)):not(:has(img[alt="Админ"])):not(:has(img[alt="Права ГМ"])) .top-nav > ul.nav > li > a::before,
    .navbar:not(:has(.label-important)):not(:has(img[alt="Админ"])):not(:has(img[alt="Права ГМ"])) .top-nav .nav > li > a::before {
        content: '↗ Сайт';
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.3px;
        line-height: 1;
    }
}

/* --- 2. ЦЕНТРАЛЬНАЯ ОБЛАСТЬ (SaaS Vibe Cards) --- */
.box, .well {
    background: var(--gn-card) !important;
    border: 1px solid var(--gn-border-soft) !important;
    border-top: 1px solid var(--gn-border-mid) !important; /* Тонкая световая полоска */
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    margin-bottom: 20px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
/* .well — обёртка с прямым содержимым: padding внутри. .box — у него свой box-header/box-content,
   они имеют padding сами; на .box внешний padding НЕ ставим. */
.well {
    padding: 14px 18px !important;
}
.box {
    padding: 0 !important;
}
.box:hover, .well:hover {
    border-color: var(--gn-border-mid) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.box-header {
    padding: 8px 18px !important;
    border-bottom: 1px solid var(--gn-border-soft) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 28px !important;
}
.box-header h2, .box-header h3 {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--gn-text-strong) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
}
/* Элегантная иерархия надзаголовка */
.box-header h2 small, .box-header h3 small, .box-header .subtitle {
    font-size: 11px !important;
    color: var(--gn-text-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 500 !important;
}
.box-content {
    padding: 18px 20px !important;
    line-height: 1.65 !important;
}
.box-content h3 {
    margin: 0 0 12px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.box-content h3:not(:first-child) {
    margin-top: 18px !important;
}
.box-content p {
    margin: 0 0 8px 0 !important;
}
/* Empty state / Приглушенный текст внутри карточек */
.box-content p:empty, .box-content .empty-state {
    color: var(--gn-text-dim) !important;
    font-style: italic !important;
}

/* --- 3. ТАБЛИЦЫ (Деликатные разделители и Zebra-striping) --- */
.table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    margin-bottom: 0 !important;
}
.table th {
    padding: 0 16px 12px !important;
    font-size: 11px !important;
    color: var(--gn-text-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--gn-border-soft) !important;
    border-top: none !important;
}
.table td {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: var(--gn-text) !important;
    background: var(--gn-border-soft) !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
/* Мягкая зебра */
.table tbody tr:nth-child(even) td {
    background: transparent !important;
}
/* Округление краев строк таблицы */
.table td:first-child {
    border-radius: var(--gn-radius-sm) 0 0 var(--gn-radius-sm) !important;
    border-left: 1px solid transparent !important;
}
.table td:last-child {
    border-radius: 0 var(--gn-radius-sm) var(--gn-radius-sm) 0 !important;
    border-right: 1px solid transparent !important;
}
/* Hover-состояние строк */
.table tbody tr:hover td {
    background: var(--gn-border-mid) !important;
    color: var(--gn-text-strong) !important;
}

/* --- 4. КНОПКИ (В контенте) --- */
.btn-primary, .btn-success {
    box-shadow: 0 4px 12px var(--gn-accent-mid), inset 0 1px 1px rgba(255,255,255,0.1) !important;
    text-shadow: none !important;
    border: 1px solid var(--gn-accent-line) !important;
    transition: all 0.3s ease !important;
}
.btn-primary:hover, .btn-success:hover {
    box-shadow: 0 8px 24px var(--gn-accent-glow), inset 0 1px 1px rgba(255,255,255,0.2) !important;
    border-color: var(--gn-accent) !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   MARKETPLACE — Genesis-overrides поверх inline-стилей в marketplace.php.
   Inline <style> в .php грузится ПОСЛЕ внешних .css → нужен !important.
   Дефолтный стиль в marketplace.php (серый #2a2a2a, dashed empty) —
   нейтральный «работает на любой теме», эти правила красят его под Genesis.
   ========================================================= */

/* Карточки лотов — glassmorphism вместо плоского #2a2a2a.
   Безопасно: .mkt-card не родитель popup__overlay (попапы рендерятся в body). */
.mkt-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%), rgba(14, 16, 19, 0.55) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--gn-border) !important;
    border-top: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease, background .2s ease !important;
    position: relative;
}
.mkt-card::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gn-accent-line), transparent);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.mkt-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--gn-accent-line) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 255, 102, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.mkt-card:hover::before { opacity: 1; }

/* Иконка лота — тёмный glass-фон вместо #1e1e1e */
.mkt-icon {
    background: rgba(0, 0, 0, 0.30) !important;
    border: 1px solid var(--gn-border) !important;
    border-radius: 6px !important;
}

/* Цена-блок — glass-фон с золотой акцент-полосой слева */
.mkt-price {
    background: rgba(0, 0, 0, 0.30) !important;
    border: 1px solid var(--gn-border) !important;
    border-left: 2px solid #f0a030 !important;
    border-radius: 6px !important;
}
.mkt-price-value { text-shadow: 0 0 8px rgba(240, 160, 48, 0.30) !important; }
.mkt-price-currency { color: var(--gn-text-mute) !important; }

/* Текст в карточках — приведение под палитру темы (вместо #9aa0a6 / #d0d0d0) */
.mkt-qty            { color: var(--gn-text-mute) !important; }
.mkt-seller-row     { color: var(--gn-text-mute) !important; }
.mkt-seller-name    { color: var(--gn-text) !important; }
.mkt-rating         { text-shadow: 0 0 6px rgba(240, 192, 64, 0.25) !important; }
.mkt-rating-count   { color: var(--gn-text-dim) !important; }
.mkt-rating-empty   { color: var(--gn-text-dim) !important; }

/* Таймер срока лота (на месте рейтинга) — палитра темы + лёгкое свечение по остатку */
.mkt-timer-ok      { color: var(--gn-accent) !important; text-shadow: 0 0 6px rgba(0, 255, 102, 0.25) !important; }
.mkt-timer-warn    { color: #fbbf24 !important; text-shadow: 0 0 6px rgba(251, 191, 36, 0.25) !important; }
.mkt-timer-crit    { color: #ef4444 !important; text-shadow: 0 0 6px rgba(239, 68, 68, 0.30) !important; }
.mkt-timer-forever { color: #5ccfff !important; text-shadow: 0 0 6px rgba(92, 207, 255, 0.25) !important; }

/* Empty state — glass-карточка вместо dashed-рамки #444 */
.mkt-empty {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 60%), rgba(14, 16, 19, 0.55) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--gn-border) !important;
    border-radius: var(--gn-radius-sm) !important;
    color: var(--gn-text-mute) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    opacity: 1 !important;
    padding: 28px 24px !important;
}

/* ── Фильтры маркетплейса: hover-реакция, мягкий focus, без «залипания» ──
   Общий select:focus в теме даёт жирный 4px-glow + accent-line border, который
   остаётся после клика и закрытия dropdown'а (HTML-стандарт :focus). Visually
   «залипает» зелёным. Для фильтров делаем :focus:not(:focus-visible) идентичным
   дефолту — после клика без удержания клавиатуры рамка возвращается обычной. */
.mkt-filters select,
.mkt-filters input[type="number"],
.mkt-filters input[type="text"] {
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}
.mkt-filters select:hover,
.mkt-filters input[type="number"]:hover,
.mkt-filters input[type="text"]:hover {
    border-color: var(--gn-accent-line) !important;
    background-color: rgba(8, 14, 10, 0.70) !important;
    color: var(--gn-text-strong) !important;
}
.mkt-filters select:focus,
.mkt-filters input[type="number"]:focus,
.mkt-filters input[type="text"]:focus {
    border-color: var(--gn-accent-line) !important;
    background-color: rgba(8, 14, 10, 0.75) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.40), 0 0 0 2px rgba(0, 255, 102, 0.10), 0 0 12px rgba(0, 255, 102, 0.10) !important;
    outline: none !important;
}
/* После клика мышью (без табуляции с клавиатуры) убираем «зелёный залип». */
.mkt-filters select:focus:not(:focus-visible),
.mkt-filters input:focus:not(:focus-visible) {
    border-color: var(--gn-border-mid) !important;
    background-color: var(--gn-card-input) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.40) !important;
}

/* Number-input: нативные spinner-стрелки кривые (особенно в темной теме).
   Скрываем — поле остаётся числовым (валидация и keyboard up/down работают). */
/* Глобально убираем spinner-стрелочки у <input type="number"> — мешают визуально
   и не нужны в формах ЛК (форма «Выставить лот», фильтры, ввод сумм). */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ============================================================================
   MKT-ACCOUNT-VIEW — Genesis-overrides поверх inline-стилей в marketplace_account_view.php
   Дефолтные стили (#2a2a2a, #1e1e1e и т.д.) — нейтральные под любую тему LK.
   Под Genesis заменяем на glassmorphism с зелёным акцентом.
   ============================================================================ */

/* Кнопка «← К списку лотов» прижата к низу .box-header (зелёная полоска).
   Добавляем верхний отступ от заголовка карточки и нижний — от первого блока. */
.mkt-acc-wrap > a.btn:first-child {
    margin-top: 4px !important;
    margin-bottom: 18px !important;
}

/* Главные блоки-карточки: заголовок аккаунта, цена/продавец/информация, ресурсы ЛК,
   панель «Покупка аккаунта» внизу. */
.mkt-acc-box,
.mkt-acc-actions {
    background: var(--gn-card) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-float) !important;
    color: var(--gn-text) !important;
}

/* Иконка-плашка с геймпадом слева от заголовка аккаунта. Серый #1e1e1e → наш input-фон. */
.mkt-acc-head-icon {
    background: var(--gn-card-input) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40), 0 0 12px rgba(0, 255, 102, 0.10) !important;
}

/* Категория-таблетка («АККАУНТ»). Дефолтный зелёный #10b981 заменяем на наш accent. */
.mkt-acc-cat {
    background: var(--gn-accent-mid) !important;
    color: var(--gn-accent) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    text-shadow: 0 0 8px var(--gn-accent-glow) !important;
}

/* Заголовок аккаунта и описание. */
.mkt-acc-title { color: var(--gn-text-strong) !important; }
.mkt-acc-desc  { color: var(--gn-text) !important; }

/* Боковые подписи в блоках (ЦЕНА / ПРОДАВЕЦ / ИНФОРМАЦИЯ — серые лейблы). */
.mkt-acc-side-label { color: var(--gn-text-mute) !important; letter-spacing: 0.4px; }

/* Цена в оранжевом — оставляем оранжевый акцент, добавляем лёгкое свечение. */
.mkt-acc-price { text-shadow: 0 0 10px rgba(240, 160, 48, 0.30) !important; }

/* Подзаголовок «Покупка аккаунта» в нижней панели. */
.mkt-acc-actions-title { color: var(--gn-text-strong) !important; }

/* Зелёный баннер «Продавец сейчас не в игре» — приводим к accent-стилю. */
.mkt-acc-online-banner {
    background: var(--gn-accent-soft) !important;
    color: var(--gn-accent) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    text-shadow: 0 0 6px var(--gn-accent-glow) !important;
}

/* Жёлтый warn про «комиссия 5% не возвращается». В дефолтном файле margin-bottom = 0,
   следующий .mkt-acc-box лепится вплотную — добавляем зазор. */
.mkt-acc-warn-snapshot {
    background: rgba(255, 182, 72, 0.08) !important;
    color: var(--gn-warn) !important;
    border: 1px solid rgba(255, 182, 72, 0.25) !important;
    border-radius: var(--gn-radius-sm) !important;
    margin-bottom: 18px !important;
}
/* Зелёный баннер про «Продавец сейчас не в игре» — тот же зазор до следующего блока. */
.mkt-acc-online-banner,
.mkt-acc-online-no { margin-bottom: 18px !important; }

/* iframe «Предпросмотр аккаунта» в marketplace_account_finalize.php — inline-стиль
   ставит фон #1f1f1f. Перебиваем на наш glass-фон + рамка как у box. */
.mkt-fin-preview-frame {
    background: var(--gn-card) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-float) !important;
}
/* Embed-режим внутри iframe: контейнер табов имел padding:0 — табы упирались в
   левый край и подчёркивание активной табы вылезало на скруглённый угол рамки
   родительского iframe. Возвращаем боковой и верхний отступ. Specificity 0,3,0
   (двойной класс на wrap), чтобы перебить inline `.mkt-acc-wrap > .mkt-acc-box`
   (0,2,0) который идёт ПОЗЖЕ в каскаде. */
.mkt-acc-wrap.mkt-acc-embed > .mkt-acc-box {
    padding: 14px 20px 0 !important;
    border-radius: var(--gn-radius) !important;
}
.mkt-acc-wrap.mkt-acc-embed { padding-bottom: 14px !important; }
.mkt-fin-preview { border-top: 1px solid var(--gn-border-mid) !important; }
.mkt-fin-preview .hint { color: var(--gn-text-mute) !important; opacity: 1 !important; }

/* Блок «Логин / Временный пароль / Осталось времени» на той же странице — тоже серый,
   приводим к виду остальной темы. */
.mkt-fin-cred {
    background: var(--gn-card) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-float) !important;
}
.mkt-fin-cred .k { color: var(--gn-text-mute) !important; opacity: 1 !important; }
.mkt-fin-cred .v { color: var(--gn-text-strong) !important; }

/* ============================================================================
   MKT-LOT-VIEW — Genesis-overrides поверх inline-стилей в marketplace_lot.php.
   Те же серые блоки (#2a2a2a / #1e1e1e) для карточки лота предмета, чека,
   услуги. Заменяем на наш glassmorphism, как сделали для marketplace_account_view.
   ============================================================================ */

.mkt-box,
.mkt-price-box,
.mkt-actions {
    background: var(--gn-card) !important;
    border: 1px solid var(--gn-border-mid) !important;
    border-radius: var(--gn-radius) !important;
    box-shadow: var(--gn-shadow-float) !important;
    color: var(--gn-text) !important;
    box-sizing: border-box !important;
}

/* Блок цены: оригинал даёт border-left: 3px solid #f0a030 (оранжевая полоса).
   Inline-style в marketplace_lot.php перебивает наш `border` на левой стороне,
   поэтому полоса остаётся 3px. Принудительно снимаем НАШ верх/право/низ border
   на этой стороне (компенсируем визуальную «толщину» от border-box) — оранжевая
   полоса оригинала остаётся, лишний контур не выпирает. */
.mkt-price-box { border-left-width: 3px !important; }

/* Иконка предмета в квадрате слева от заголовка лота (.mkt-lot-icon — #1e1e1e). */
.mkt-lot-icon {
    background: var(--gn-card-input) !important;
    border: 1px solid var(--gn-accent-line) !important;
    border-radius: var(--gn-radius-sm) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40), 0 0 12px rgba(0, 255, 102, 0.10) !important;
}

/* Категория-таблетка («ПРЕДМЕТ» синяя, «ЗОЛОТО» жёлтая, «УСЛУГА» фиолетовая
   и т.д.). Дефолтные плоские цвета приводим к единой Genesis-форме (стекло
   + текст исходного цвета сохраняется через важный override чтобы не потерять
   семантику категорий). Базовый стиль всех — без !important на color, чтобы
   inline color из .php сохранился. */
.mkt-cat,
.mkt-cat-item,
.mkt-cat-gold,
.mkt-cat-service,
.mkt-cat-account {
    border-radius: var(--gn-radius-sm) !important;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.40);
    letter-spacing: 0.4px;
}

/* Заголовок лота и количество. */
.mkt-lot-title { color: var(--gn-text-strong) !important; }
.mkt-lot-qty   { color: var(--gn-text-mute) !important; }

/* Боковые подписи блоков (ЦЕНА / ПРОДАВЕЦ / ИНФОРМАЦИЯ — uppercase grey). */
.mkt-side-label { color: var(--gn-text-mute) !important; letter-spacing: 0.4px; }

/* Цена в оранжевом — оставляем оранжевый акцент, добавляем лёгкое свечение. */
.mkt-price-value { text-shadow: 0 0 10px rgba(240, 160, 48, 0.30) !important; }
.mkt-price-currency { color: var(--gn-text-mute) !important; }
.mkt-price-comm     { color: var(--gn-text-mute) !important; }

/* Имя продавца и его рейтинг. */
.mkt-seller-name   { color: var(--gn-text) !important; }
.mkt-seller-rating { color: var(--gn-text-mute) !important; }

/* Заголовок «Покупка» в нижней панели. */
.mkt-actions-title { color: var(--gn-text-strong) !important; }

/* ============================================================================
   ADAPTIVE / RESPONSIVE — стратегия «как в classic».

   Все темы LK (classic, cerulean, cyborg и т.д.) используют ОДНУ и ту же
   адаптивную базу — `bootstrap-responsive.css` (BS2.0.4). Они НЕ override-ят
   layout-механизмы. Genesis раньше делал это (большой блок 1429-overrides) и
   ломал собственную раскладку.

   Что делает BS2-responsive САМ:
     ≥1200px — desktop, .span* в %, .navbar default float
     768-1199 — tablet, .row-fluid .span* в % (sidebar 14%, content 84%),
                .nav-collapse.collapse { height:auto !important } —
                то есть top-nav и sidebar ВИДНЫ inline, гамбургер не нужен
     ≤767px  — phone, .span* становятся block 100%, .nav-collapse {height:0},
                гамбургер виден, raскрывает drawer через `.in` класс

   Genesis добавляет ТОЛЬКО:
     1. Цвета/рамки/blur (вне @media — работают везде).
     2. Pill-шапка flex (выше: @media min-width:1200px) — на ≤1199 BS2 default float.
     3. Гамбургер (выше: @media max-width:767px) — Genesis-glass green.
     4. На ≤767 — Genesis-glass рамка для развёрнутого drawer (.in).
     5. Mobile-специфичные quirks: blur off, hover off, container padding,
        DataTables filter в столбик и т.д.
   ============================================================================ */

/* ── ≤767: phone — общие правила, blur off, hover off, container ─────────── */
@media (max-width: 767px) {
    /* GPU blur off (Chrome mobile crash) */
    .modal, .popover, .dropdown-menu, .tooltip, .navbar-inner, .chzn-drop,
    .mkt-card, .mkt-empty, .mkt-fin-preview-frame {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body { background-attachment: scroll !important; }

    /* hover-translate off (touch device) */
    .row-fluid .shop-block:hover,
    .row-fluid .pers-block:hover,
    .row-fluid .mails-block:hover,
    .btn:hover, .btn-primary:hover, .btn-success:hover,
    .sidebar-nav > ul > li > a:hover:not(.active),
    .mkt-card:hover,
    .navbar .btn:hover, .navbar .btn-link:hover,
    .navbar .top-nav .nav > li > a:hover {
        transform: none !important;
    }

    /* Container с safe-area */
    body > .container-fluid {
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
    }
    .box, .well {
        margin-bottom: 12px !important;
        border-radius: var(--gn-radius-sm) !important;
    }
    .box-header { padding: 6px 12px !important; }
    .box-content { padding: 12px !important; }
    .well { padding: 12px !important; }
    .box-header h2, .box-header h3 { font-size: clamp(13px, 3.4vw, 15px) !important; }
    .box-content h3 { font-size: clamp(14px, 3.6vw, 16px) !important; }

    /* Шапка */
    .navbar { margin: 6px 0 12px !important; padding: 0 !important; }
    .navbar-inner { padding: 6px 10px !important; border-radius: var(--gn-radius) !important; }

    /* === COLLAPSE на ≤767: drawer SIDEBAR скрыт по дефолту, гамбургер раскрывает.
       === TOP-NAV («Перейти на сайт») остаётся в шапке inline (не уходит в drawer).
       BS2 default ставит .nav-collapse.collapse {height:0} на ≤767 для ОБОИХ —
       перебиваем top-nav обратно на height:auto, а sidebar оставляем коллапс. */
    .well.sidebar-nav.nav-collapse:not(.in),
    div.well.sidebar-nav.nav-collapse:not(.in) {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* TOP-NAV «Перейти на сайт» — НЕ collapse, остаётся inline-кнопкой в шапке,
       wrap'ится на новую строку если не помещается. Перебивает BS2 default. */
    .navbar div.top-nav.nav-collapse,
    .navbar div.top-nav.nav-collapse.collapse,
    .navbar div.top-nav.nav-collapse:not(.in),
    .navbar div.top-nav.nav-collapse.collapse:not(.in) {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    div.well.sidebar-nav.nav-collapse.in,
    div.sidebar-nav.nav-collapse.in {
        background: var(--gn-card-strong) !important;
        border: 1px solid var(--gn-accent-line) !important;
        border-radius: var(--gn-radius) !important;
        padding: 10px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px rgba(0,255,102,0.10) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Touch-friendly пункты sidebar в раскрытом drawer */
    div.well.sidebar-nav.nav-collapse.in > ul > li > a,
    div.sidebar-nav.nav-collapse.in > ul > li > a {
        min-height: 40px !important;
        padding: 10px 14px !important;
        margin: 2px 0 !important;
        border-radius: var(--gn-radius-sm) !important;
        transform: none !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    /* На мобиле sidebar внутри drawer должна быть вертикальной (block list),
       а не flex-wrap pill-ряд. Перебиваем правило из 768-1199 блока. */
    div.well.sidebar-nav.nav-collapse.in > ul.nav-stacked,
    div.sidebar-nav.nav-collapse.in > ul.nav-stacked {
        display: block !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    div.well.sidebar-nav.nav-collapse.in > ul.nav-stacked > li,
    div.sidebar-nav.nav-collapse.in > ul.nav-stacked > li {
        display: block !important;
        flex: none !important;
        width: 100% !important;
    }
    div.well.sidebar-nav.nav-collapse.in > ul.nav-stacked > li > a,
    div.sidebar-nav.nav-collapse.in > ul.nav-stacked > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* «Возникли вопросы? Помощь» — на телефоне центрируем без жирной полосы */
    .span2.main-menu-span > center {
        margin: 0 0 12px !important;
        padding: 6px 0 !important;
        font-size: 12px !important;
    }

    /* Marketplace grid компактнее */
    .mkt-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }

    /* Marketplace 1 колонка */
    .mkt-grid { grid-template-columns: 1fr !important; }
    .mkt-card { padding: 12px !important; }

    /* PW-iframe */
    .mkt-fin-preview-frame {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }

    /* Таблицы — горизонтальный скролл */
    .box-content:has(> .table),
    .box-content:has(> .dataTables_wrapper),
    .box-content:has(table.table),
    .well:has(.table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }
    /* `min-width: max-content` для DataTables: таблица сохраняет натуральную ширину
       и скроллится в .box-content { overflow-x: auto }. Для НЕ-DataTable таблиц
       (op=marketplace_my) это правило ломало карточный layout — перебивало
       `width: 100%` и таблица оставалась 421px. Применяем только к dataTable. */
    table.dataTable { font-size: 12px !important; min-width: max-content !important; }
    table.dataTable th, table.dataTable td { padding: 6px 6px !important; }
    /* Обычные .table — компактные ячейки, но БЕЗ min-width. */
    .table:not(.dataTable) { font-size: 12px !important; }
    .table:not(.dataTable) th, .table:not(.dataTable) td { padding: 6px 6px !important; }

    /* DataTables: filter/length стэк вертикально, нормальные отступы между блоками. */
    .dataTables_wrapper .row-fluid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    /* Снимаем BS2 row-fluid float у дочерних span* — иначе пагинация
       (sDom использует <span10> + <span2>) с фиксированной height:36px вылезает
       наверх соседей и подвал «слипается». */
    .dataTables_wrapper .row-fluid > [class*="span"] {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
    .dataTables_filter, .dataTables_length,
    .dataTables_info, .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* На мобиле снимаем inline-width DataTables на таблице И на th — иначе таблица
       расширяется до суммы заданных th-width (~800px) и торчит из узкого wrapper'а
       (548 на viewport 600). Делаем width:100% + th width:auto → колонки сжимаются
       к естественной ширине, всё помещается. */
    table.dataTable {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    table.dataTable thead th,
    table.dataTable tbody td,
    table.dataTable tfoot th,
    table.dataTable tfoot td {
        width: auto !important;
        min-width: 0 !important;
    }
    /* tfoot search inputs (klan-арты, login-логи) — на всю ширину ячейки + компактный шрифт. */
    table.dataTable tfoot input,
    table.dataTable tfoot input.search_init,
    table.dataTable tfoot input.search_focus {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 11px !important;
        padding: 4px 6px !important;
    }
    /* Форма загрузки картинки клана (op=klan) — стэк column на мобиле, иначе кнопка
       «Загрузить...» уезжает за viewport (Uniform-обёртка + submit стояли inline). */
    form[name="upload"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    form[name="upload"] div.uploader {
        width: auto !important;
        max-width: 100% !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }
    form[name="upload"] input[type="submit"],
    form[name="upload"] input.btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* На мобиле заголовки h2-h4 в #main_content_div получают margin-top, чтобы
       секции (например «История заявок на вывод» в marketplace_wallet после кнопки
       «Запросить вывод») не лепились вплотную к предыдущему контенту. */
    #main_content_div h2,
    #main_content_div h3,
    #main_content_div h4 {
        margin-top: 18px !important;
    }
    #main_content_div h2:first-child,
    #main_content_div h3:first-child,
    #main_content_div h4:first-child {
        margin-top: 0 !important;
    }

    /* op=marketplace_my (и другие страницы с горизонтальными табами): `.nav-tabs`
       без `.nav-stacked` (sidebar исключаем). BS2 default — float left, не центрируется,
       wrap'ится криво. Делаем flex-wrap center. */
    .nav-tabs:not(.nav-stacked) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        border-bottom: 0 !important;
        margin: 12px 0 12px !important;
        padding: 0 !important;
    }
    .nav-tabs:not(.nav-stacked) > li {
        float: none !important;
        flex: 0 1 auto !important;
        margin: 0 !important;
    }
    .nav-tabs:not(.nav-stacked) > li > a {
        padding: 6px 12px !important;
        margin: 0 !important;
        border-radius: var(--gn-radius-sm) !important;
    }

    /* op=marketplace_my: таблица лотов (без `.dataTable` класса) — 7 колонок не
       помещаются на мобиле. На ≤480 преобразуем в карточный layout: thead скрыт,
       каждая строка — карточка с inline-block td. */
    #main_content_div table.table:not(.dataTable) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }
    #main_content_div table.table:not(.dataTable) th,
    #main_content_div table.table:not(.dataTable) td {
        width: auto !important;
        min-width: 0 !important;
        padding: 5px 4px !important;
        font-size: 11px !important;
        word-break: break-word !important;
    }

    /* Витрина маркетплейса: фильтры (.mkt-filters / #mkt_filters) на мобиле — column-layout.
       BS2 form-inline ставит inline-block для children → на узком экране кнопка «Применить»
       и selects слипаются и наезжают друг на друга. Стэк column с одинаковыми отступами. */
    form#mkt_filters,
    .mkt-filters {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    form#mkt_filters > select,
    form#mkt_filters > input,
    form#mkt_filters > button,
    .mkt-filters > select,
    .mkt-filters > input,
    .mkt-filters > button,
    .mkt-filters > .chzn-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* «Поиск:» — column (лейбл-сверху, input-снизу).
       Внутри label всего два элемента (text-node «Поиск:» + input). */
    .dataTables_filter label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    /* «N записей» — три элемента в label (text-node число + Chosen-select + text-node «записей»).
       С column они уезжали в столбик и число «15» болталось над плашкой. Делаем row+wrap+center. */
    .dataTables_length label {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .dataTables_filter input { width: 100% !important; box-sizing: border-box !important; }
    /* Кнопки пагинации (BS2 .pagination > ul > li) — flex-wrap чтобы не вылезали за фон. */
    .dataTables_paginate ul,
    .dataTables_paginate .pagination ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .dataTables_paginate ul > li {
        float: none !important;
        display: inline-flex !important;
        margin: 0 !important;
    }
    /* Genesis-стиль для кнопок пагинации — pill с зелёным акцентом для active.
       На десктопе используется дефолтный BS2 stack, поэтому правило только в mobile-секции. */
    .dataTables_paginate ul > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 12px !important;
        min-width: 32px !important;
        height: 32px !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: var(--gn-text) !important;
        border: 1px solid var(--gn-border-mid) !important;
        border-radius: var(--gn-radius-sm) !important;
        text-shadow: none !important;
        box-shadow: none !important;
        transition: background-color .15s, border-color .15s, color .15s !important;
    }
    .dataTables_paginate ul > li > a:hover {
        background: var(--gn-accent-soft) !important;
        border-color: var(--gn-accent-line) !important;
        color: var(--gn-accent) !important;
    }
    .dataTables_paginate ul > li.active > a,
    .dataTables_paginate ul > li.active > a:hover {
        background: var(--gn-accent) !important;
        border-color: var(--gn-accent) !important;
        color: #0a0c0e !important;
        font-weight: 700 !important;
        box-shadow: 0 0 12px var(--gn-accent-glow) !important;
    }
    .dataTables_paginate ul > li.disabled > a,
    .dataTables_paginate ul > li.disabled > a:hover {
        opacity: 0.4 !important;
        background: rgba(255, 255, 255, 0.02) !important;
        color: var(--gn-text-mute) !important;
        border-color: var(--gn-border) !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }
    /* Info-блок живёт в отдельной обёртке `<div class="label">` ПОСЛЕ row-fluid.
       BS2 .label = inline-block с fg/bg — сбрасываем; нормальный отступ сверху от length. */
    .dataTables_wrapper > .label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 12px 0 0 !important;
        background: transparent !important;
        color: inherit !important;
        padding: 0 !important;
        font-size: inherit !important;
    }

    /* hidden-phone скрывается на ≤767 (BS2-responsive дефолт). На десктопе
       у нас правило `.navbar .btn span { display: inline-block !important }`
       (~2374) перебивает по специфичности (0,3,0) — поднимаем нашу через тег. */
    .navbar span.hidden-phone,
    .navbar .btn span.hidden-phone,
    .navbar .btn-link span.hidden-phone,
    .navbar a span.hidden-phone {
        display: none !important;
    }

    /* Form-horizontal: лейблы сверху */
    .form-horizontal .control-label,
    .form-horizontal .control-label1 {
        float: none !important;
        width: auto !important;
        text-align: left !important;
        padding-top: 0 !important;
        margin-bottom: 4px !important;
    }
    .form-horizontal .controls { margin-left: 0 !important; }
    .form-horizontal .form-actions { padding: 12px !important; text-align: center !important; }
    /* BS2 классы input-xlarge/input-medium/input-block-level задают фикс-ширину (300/150/...).
       На ≤767 эти ширины выходят за viewport (заголовок лота, описание, выплата select,
       срок размещения). Принудительно сжимаем все поля внутри `.form-horizontal .controls`
       до 100% ширины обёртки. */
    .form-horizontal .controls input[type="text"],
    .form-horizontal .controls input[type="number"],
    .form-horizontal .controls input[type="email"],
    .form-horizontal .controls input[type="password"],
    .form-horizontal .controls input.input-mini,
    .form-horizontal .controls input.input-small,
    .form-horizontal .controls input.input-medium,
    .form-horizontal .controls input.input-large,
    .form-horizontal .controls input.input-xlarge,
    .form-horizontal .controls input.input-xxlarge,
    .form-horizontal .controls input.input-block-level,
    .form-horizontal .controls select,
    .form-horizontal .controls textarea,
    .form-horizontal .controls .uneditable-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Длинная опция «Реальные деньги (зачисляются на кошелёк маркетплейса; ...)» в select
       payout_method растягивает select по содержимому. Принудительно ограничиваем. */
    .form-horizontal .controls select {
        min-width: 0 !important;
    }

    /* op=marketplace_sell, шаг 2 (продажа аккаунта): карточки персонажей.
       Inline-style в marketplace_sell.php:79 — `#mkt_acc_roles .role-card { display: inline-flex; min-width: 180px }`.
       На узком экране 4-5 карточек × 180px = 700-900px в одной строке → горизонтальный
       overflow body → ВСЯ форма (input/select width:100%) привязывается к расширенной
       ширине → поля уходят за viewport. Сжимаем карточки + flex-wrap. */
    #mkt_acc_roles {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #mkt_acc_roles .role-card {
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* Browser-default `<fieldset> { min-width: min-content }` — содержимое (Chosen
       dropdown с длинной option, или любой широкий child) расширяет fieldset за
       пределы form, что вызывает horizontal overflow body на узких viewport. */
    fieldset {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* `.chzn-drop` скрыт через `left: -9000px`, но его inline-width учитывается
       в document scrollWidth и расширяет body. Ограничиваем viewport. */
    .chzn-drop {
        max-width: 100vw !important;
    }

    /* op=marketplace_account_view: окна-превью аккаунта (Персонаж / Рюкзак / Хранилище /
       Общий склад / Склад гильдии). Нативные ширины из XML-окон PW: character 375,
       inventory 336, storage 325, genstorage 326, guildstorage 603. Guildstorage 603px
       не влезает в мобильный viewport 375 — горизонтальный overflow body на 258px.
       Сжимаем через `transform: scale()` с фиксированными значениями per-breakpoint
       + `transform-origin: top left` (окно прижимается к левому краю).
       ⚠ НЕ использовать `scale(min(1, calc((100vw-20px)/375)))` — calc отдаёт px,
       а scale ожидает unitless → браузер игнорирует, transform: none. */
    /* PW-окна центрируются по горизонтали через `display: block; margin: 0 auto`.
       transform-origin: top left — scale shrink'ает вокруг (0,0), без сдвига влево.
       Per-breakpoint правила ниже задают `width: visual_w` совместно с `transform: scale()`,
       чтобы layout-ширина совпадала с visual-шириной — тогда margin:auto реально центрирует. */
    .pw-window {
        display: block !important;
        transform-origin: top left !important;
        margin: 0 auto !important;
    }
    /* Родитель ряда окон — block, центровка через width окна + margin:auto. */
    .pw-windows-row {
        display: block !important;
        text-align: center !important;
        overflow-x: hidden !important;
    }
    .mkt-acc-box {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .mkt-acc-box, .mkt-acc-wrap { overflow-x: hidden !important; }
}
/* Адаптивные scale + width-override для PW-окон превью аккаунта.
   Идея: `width: native * scale` совмещает layout-width с visual-width после transform —
   тогда `margin: 0 auto` действительно центрирует, а `transform-origin: top left`
   не сдвигает окно. Native widths: character 375, inventory 336, storage 325,
   genstorage 326, guildstorage 603. Самый широкий — guildstorage 603. */
@media (max-width: 767px) and (min-width: 641px) {
    .pw-win-guildstorage { transform: scale(0.95) !important; width: 573px !important; }
}
@media (max-width: 640px) and (min-width: 561px) {
    .pw-win-guildstorage { transform: scale(0.85) !important; width: 513px !important; }
}
@media (max-width: 560px) and (min-width: 481px) {
    .pw-win-guildstorage { transform: scale(0.75) !important; width: 453px !important; }
}
@media (max-width: 480px) and (min-width: 421px) {
    .pw-win-character    { transform: scale(0.95) !important; width: 357px !important; }
    .pw-win-guildstorage { transform: scale(0.65) !important; width: 392px !important; }
}
@media (max-width: 420px) and (min-width: 381px) {
    .pw-win-character    { transform: scale(0.92) !important; width: 345px !important; }
    .pw-win-guildstorage { transform: scale(0.6)  !important; width: 362px !important; }
}
@media (max-width: 380px) and (min-width: 341px) {
    .pw-win-character    { transform: scale(0.88) !important; width: 330px !important; }
    .pw-win-inventory    { transform: scale(0.98) !important; width: 330px !important; }
    .pw-win-guildstorage { transform: scale(0.55) !important; width: 332px !important; }
}
@media (max-width: 340px) {
    .pw-win-character    { transform: scale(0.78) !important; width: 293px !important; }
    .pw-win-inventory    { transform: scale(0.88) !important; width: 296px !important; }
    .pw-win-storage      { transform: scale(0.92) !important; width: 299px !important; }
    .pw-win-genstorage   { transform: scale(0.92) !important; width: 300px !important; }
    .pw-win-guildstorage { transform: scale(0.5)  !important; width: 302px !important; }
}

/* op=marketplace_my на ≤600: таблица в карточный layout без скролла. thead скрыт,
   каждый <tr> — карточка с inline-block <td>. Без data-label заголовков (на узком
   экране подписи занимали бы лишнее место), но порядок td сохраняется как «# / категория /
   описание / цена / статус / создан / действия». */
@media (max-width: 600px) {
    /* На ≤480 box-content имеет overflow-x:auto от глобального DataTables-правила,
       но карточный layout не нуждается в скролле — перебиваем. */
    .box-content:has(table.table:not(.dataTable)) {
        overflow-x: hidden !important;
    }
    #main_content_div table.table:not(.dataTable) thead { display: none !important; }
    #main_content_div table.table:not(.dataTable),
    #main_content_div table.table:not(.dataTable) tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #main_content_div table.table:not(.dataTable) tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 8px 10px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid var(--gn-border-mid) !important;
        border-radius: var(--gn-radius-sm) !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    #main_content_div table.table:not(.dataTable) td {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 2px 6px !important;
        border: 0 !important;
        vertical-align: middle !important;
        background: transparent !important;
        word-break: break-word !important;
        text-align: center !important;
    }
    /* «Действия» (последний td с кнопками) — отдельной строкой полной ширины,
       чтобы кнопки не лепились к данным. */
    #main_content_div table.table:not(.dataTable) td:last-child {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
        border-top: 1px dashed var(--gn-border) !important;
        text-align: center !important;
    }

}
/* op=top, секция «Классы» (top_class.html): таблица из 10 <td> без <tr>
   (browser auto-wrap'ит). Каждый <td> — карточка одного класса с двумя
   иконками (мужская/женская), счётчиками и названием. Native layout 10 td
   в одну строку (table 1285px) ломается на любом viewport <1526px — таблица
   обрезается контейнером. Применяем Grid layout начиная с 1525, число колонок
   per-breakpoint так чтобы карточка ~200-240px минимум (3 элемента row 2 —
   число+название+число — точно помещаются без wrap). */
@media (max-width: 1525px) {
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) tbody,
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) tr {
        display: contents !important;
    }
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) td {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px 6px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 10px 8px !important;
        margin: 0 !important;
        border: 1px solid var(--gn-border-mid) !important;
        border-radius: var(--gn-radius-sm) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    /* <br> в td — flex-line-break: row 1 (иконка_муж + всего + иконка_жен) | row 2 (мужчин + название + женщин). */
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) td br {
        flex-basis: 100% !important;
        height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    /* Все direct children td не сжимаются — иначе число «10» (женщин) wrap'ается
       на отдельную строку при узкой карточке, ломая симметрию. */
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) td > * {
        flex-shrink: 0 !important;
    }
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) td .class_icon {
        display: inline-block !important;
        margin: 0 !important;
    }
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) td .label {
        margin: 0 !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
}
/* Per-breakpoint число колонок: карточка не уже 200-240px. */
@media (max-width: 1199px) {
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 380px) {
    #main_content_div .box-content:has(> table.table:not(.dataTable) .class_icon) table.table:not(.dataTable) {
        grid-template-columns: 1fr !important;
    }
}

/* op=history: «История действий» (DataTables historytable) — 5 колонок:
   Дата / IP / Стоимость / Остаток / Описание. На мобиле IP не помещается,
   при этом IP — наименее важная колонка. Скрываем её на ≤767, на ≤480
   дополнительно скрываем «Остаток» (легко вычисляется из истории). */
@media (max-width: 767px) {
    #historytable thead th:nth-child(2),
    #historytable tbody td:nth-child(2),
    #historytable tfoot th:nth-child(2) {
        display: none !important;
    }
}
@media (max-width: 480px) {
    #historytable thead th:nth-child(4),
    #historytable tbody td:nth-child(4),
    #historytable tfoot th:nth-child(4) {
        display: none !important;
    }
}
@media (max-width: 767px) {
    /* op=account: input-prepend (иконка + поле) растянуть на 100% — иначе
       поле узкое (~60% ширины) рядом с иконкой и пустотой справа. */
    .input-prepend, .input-append {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .input-prepend > input,
    .input-prepend > .uneditable-input,
    .input-append > input,
    .input-append > .uneditable-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .input-prepend > .add-on,
    .input-append > .add-on {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        line-height: 1 !important;
    }

    /* op=money: outform / addlk / sendform / enterpromo на мобиле — column-layout.
       На десктопе flex-direction:row даёт горизонтальный ряд (input + «Голд:N» + кнопка),
       но на узком экране flex-wrap раскидывает их по 2+1 или 1+1+1 с разной шириной td и
       визуально сдвинутым центром. Делаем строгий стек: каждая ячейка 100% ширины формы
       с center, + дополнительный отступ снизу формы до следующего блока. */
    /* HTML money.php имеет <table style="width:250px"> (inline). На мобиле перебиваем,
       иначе input «Количество монет» (width:100%) будет 250px, не 100% формы. */
    form[name="outform"] table,
    form[name="addlk"] table,
    form[name="sendform"] table,
    form[name="enterpromo"] table {
        width: 100% !important;
        max-width: 100% !important;
    }
    form[name="outform"] table tbody,
    form[name="addlk"] table tbody,
    form[name="sendform"] table tbody,
    form[name="enterpromo"] table tbody {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    form[name="outform"] table td,
    form[name="addlk"] table td,
    form[name="sendform"] table td,
    form[name="enterpromo"] table td {
        width: 100% !important;
        text-align: center !important;
    }
    form[name="outform"] table input[type="text"],
    form[name="outform"] table input[type="number"],
    form[name="outform"] table input[type="password"],
    form[name="addlk"] table input[type="text"],
    form[name="addlk"] table input[type="number"],
    form[name="sendform"] table input[type="text"],
    form[name="sendform"] table input[type="number"],
    form[name="enterpromo"] table input[type="text"] {
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        padding: 10px 14px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    form[name="outform"] table input.btn,
    form[name="addlk"] table input.btn,
    form[name="sendform"] table input.btn,
    form[name="enterpromo"] table input.btn {
        margin: 0 auto !important;
    }
    /* «Вывести монеты в игру» / «Передать монеты на счёт» — это <span class="label label-success">
       ПЕРЕД <table>. По BS2 inline-block. На мобиле делаем block по центру с отступом. */
    form[name="outform"] > .label,
    form[name="addlk"] > .label,
    form[name="sendform"] > .label,
    form[name="enterpromo"] > .label {
        display: block !important;
        width: fit-content !important;
        margin: 0 auto 12px !important;
        text-align: center !important;
    }
    /* «Голд: 0» / «Серебро: 0» — текст в td с inline span#plus_gold/#minus_gold.
       Дефолтный span имеет text-align: left + min-width: 60px → число «0» прижимается
       влево внутри 60px-резерва, визуально весь блок «Голд: 0» сдвинут влево. На мобиле
       в столбик нет смысла резервировать ширину — центруем число. */
    form[name="outform"] table #plus_gold,
    form[name="outform"] table #minus_gold,
    form[name="outform"] table span[id^="plus_"],
    form[name="outform"] table span[id^="minus_"] {
        text-align: center !important;
        min-width: 0 !important;
        width: auto !important;
    }
    form[name="outform"],
    form[name="addlk"],
    form[name="sendform"],
    form[name="enterpromo"] {
        margin-bottom: 24px !important;
    }

    /* op=config: лейбл-поле в две колонки на десктопе → одна колонка на мобиле.
       Сами поля настроек НЕ в .form-horizontal (использует custom layout),
       поэтому общее правило form-horizontal не работает. Адресуем напрямую. */
    form[name="lk_config"] .control-group,
    form[name="lk_config"] .row-fluid {
        display: block !important;
    }
    form[name="lk_config"] .control-label,
    form[name="lk_config"] .control-group > [class*="span"] {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-bottom: 4px !important;
        box-sizing: border-box !important;
    }
    form[name="lk_config"] input[type="text"],
    form[name="lk_config"] input[type="number"],
    form[name="lk_config"] textarea,
    form[name="lk_config"] select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Marketplace_wallet: «Сумма в рублях» поле имеет фиксированный inline-style
       width — на мобиле растягиваем 100%. */
    input[type="number"][name="amount_rub"],
    input[name="card_number"],
    input[name="phone_number"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Form-tables: column */
    form[name="outform"] table tbody,
    form[name="addlk"] table tbody,
    form[name="sendform"] table tbody,
    form[name="enterpromo"] table tbody {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    form[name="outform"] table input[type="text"],
    form[name="outform"] table input[type="number"],
    form[name="addlk"] table input[type="text"],
    form[name="addlk"] table input[type="number"],
    form[name="sendform"] table input[type="text"],
    form[name="sendform"] table input[type="number"],
    form[name="enterpromo"] table input[type="text"] {
        width: 100% !important;
    }

    /* Popup / modal на весь экран */
    .popup__overlay > .popup,
    .popup__overlay > .popup_clean,
    .popup__overlay > .popup_clean1,
    .popup__overlay > .popup_clean2 {
        margin: 16px 8px !important;
        max-width: calc(100vw - 16px) !important;
        width: auto !important;
        border-radius: var(--gn-radius) !important;
    }
    .modal {
        position: fixed !important;
        top: 12px !important; right: 12px !important; left: 12px !important;
        width: auto !important;
        margin: 0 !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
    }

    /* Chosen 100% */
    .chzn-container,
    .chzn-container.input-medium,
    .chzn-container.input-small,
    .chzn-container.input-large {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Footer */
    footer {
        font-size: 11px !important;
        text-align: center !important;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── ≤480: small phone ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    body > .container-fluid {
        padding-left: max(4px, env(safe-area-inset-left)) !important;
        padding-right: max(4px, env(safe-area-inset-right)) !important;
    }
    .navbar { margin: 4px 0 10px !important; }
    .navbar-inner { padding: 6px 8px !important; }
    /* На ≤480 переключаем шапку в режим «центрирование строк»:
       все элементы плотно идут по центру каждой строки, дыры между ними
       исчезают (нет margin-right:auto, нет flex-grow на brand → нет растянутой
       hover-подсветки), пустоты по бокам распределены равномерно слева+справа,
       а не висят с одной стороны.
       Размер brand НЕ уменьшаем — font-size 14px / нативный img из @media ≤1199. */
    .navbar-inner,
    .navbar .container-fluid,
    .navbar .container {
        justify-content: center !important;
        gap: 4px !important;
    }
    .navbar .brand {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .box-header h2, .box-header h3 { font-size: 13px !important; }
    .box-content { padding: 10px !important; line-height: 1.5 !important; }

    .btn { font-size: 12px !important; padding: 6px 12px !important; min-height: 36px !important; }
    .btn-large { min-height: 40px !important; padding: 8px 14px !important; }

    /* DataTables: на узком экране заменяем «В начало»/«В конец» на иконки
       (font-size:0 + ::before — текст всё ещё в DOM для screen reader). */
    .dataTables_paginate ul > li.first > a,
    .dataTables_paginate ul > li.last > a {
        font-size: 0 !important;
        padding: 6px 10px !important;
        min-width: 32px !important;
    }
    .dataTables_paginate ul > li.first > a::before { content: '⏮'; font-size: 14px; }
    .dataTables_paginate ul > li.last > a::before { content: '⏭'; font-size: 14px; }
    /* Колонки таблицы — минимальный padding, мелкий шрифт */
    .table th, .table td { padding: 5px 4px !important; font-size: 11px !important; }
}

/* ==========================================================================
   REMEMBER PAGE — восстановление данных аккаунта (remember.php)
   --------------------------------------------------------------------------
   HTML особенности:
   - Форма `form#ch_pass.form-horizontal` без `<label class="control-label">` →
     BS2-default `.form-horizontal .controls { margin-left: 180px }` сдвигает
     ВСЁ содержимое в пустоту вправо. Сбрасываем для этой формы.
   - Переключатель `<label class="radio">` содержит ДВА `<input type="radio">`
     (Login/Email) + текст-ноды между ними. Делаем flex-row с gap, чтобы
     радио и подписи стояли парами и не наезжали на следующий блок с input.
   - Вторая `.controls` — `<span> + <input> + <button>` подряд (метка, поле,
     кнопка «Восстановить доступ»). Flex-row с gap, на узком — column.
   ========================================================================== */
form#ch_pass.form-horizontal .controls {
    margin-left: 0 !important;
    margin-bottom: 14px !important;
    text-align: left !important;
}
form#ch_pass.form-horizontal .controls:last-child {
    margin-bottom: 0 !important;
}

/* Переключатель Login / Email — flex-row, обе пары "радио + подпись" слева */
form#ch_pass label.radio {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 18px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    color: var(--gn-text) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
/* BS2-default `.radio input[type="radio"] { float: left; margin-left: -18px }` —
   с двумя input в одном label это ломает порядок (оба уезжают влево). Снимаем. */
form#ch_pass label.radio input[type="radio"] {
    float: none !important;
    margin: 0 6px 0 0 !important;
    vertical-align: middle !important;
    accent-color: var(--gn-accent) !important;
}

/* Вторая `.controls` — метка «Login:» + input + кнопка в одну строку.
   Input — фиксированная ширина 280px (не растягивается на 1500px на FullHD,
   не сжимается до 60px на планшете). На ≤640 — стек column во всю ширину. */
form#ch_pass .controls:has(#value) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
form#ch_pass #remember_type {
    color: var(--gn-text-mute) !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
}
form#ch_pass #value {
    flex: 0 1 280px !important;
    width: 280px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
form#ch_pass #remember_btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

@media (max-width: 640px) {
    form#ch_pass .controls:has(#value) {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    form#ch_pass #remember_type {
        text-align: left !important;
    }
    form#ch_pass #value {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    form#ch_pass #remember_btn {
        width: 100% !important;
    }
}

/* `<center>` тег + дочерний fieldset — расширяем на всю ширину `.box-content`
   и убираем default fieldset-границы (BS2 их и так нет, но на случай браузера). */
form#ch_pass center,
form#ch_pass fieldset {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
}
/* Шапка-заголовок страницы: «Перейти к авторизации» — не урезаем, просто
   сохраняем правое выравнивание из inline-style. */
.box-header h2 .icon-locked {
    color: var(--gn-accent) !important;
}

/* ==========================================================================
   LOGIN PAGE — Genesis Premium Glassmorphism (Total Rebuild)
   --------------------------------------------------------------------------
   Стиль: Дорогой, современный, темный неон.
   Принцип: Полный сброс старой компоновки и выстраивание нового стека.
   ========================================================================== */

/* --- 1. ГЛОБАЛЬНЫЙ ФОН И СБРОС --- */
body:has(.login-box1) {
    background-color: #050608 !important;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(0, 255, 102, 0.12), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(0, 255, 102, 0.08), transparent 40%),
        url('img/bg-glitch.png') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: var(--gn-text, #c8d4cf) !important;
    font-family: 'Montserrat', sans-serif !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Убиваем Bootstrap-овские фиксы ширины на корню */
body:has(.login-box1) .container-fluid,
body:has(.login-box1) .row-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* --- 2. ПЕРЕВОДЧИК (ФЛАГИ) — фикс-сверху по центру, переносится при переполнении --- */
body:has(.login-box1) .translator {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}
body:has(.login-box1) .translator img {
    opacity: 0.6 !important;
    transition: opacity 0.2s, transform 0.2s !important;
    width: 20px !important;
    height: auto !important;
    flex-shrink: 0 !important;
}
body:has(.login-box1) .translator a:hover img {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* --- 3. ГЛАВНАЯ КАРТОЧКА (PREMIUM GLASS) --- */
body:has(.login-box1) .login-box1 {
    width: 90% !important;
    max-width: 420px !important;
    height: auto !important;
    margin: 60px auto !important;
    padding: 40px 40px 30px !important;
    background: rgba(10, 12, 16, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 30px !important;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(0, 255, 102, 0.05),
        inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Чистим старые float'ы и clearfix'ы */
body:has(.login-box1) .clearfix { display: none !important; }

/* --- 4. КОМПОНОВКА ФОРМЫ И ЭЛЕМЕНТОВ --- */
/* login.css ставит `form { height: 262px }` (фикс) — flex-children (submit, register)
   вылезают за form и накладываются на footer ниже. Перебиваем height на auto. */
body:has(.login-box1) .login-box1 form {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
/* Порядок children в HTML: login → username-text → password-text → username-field →
   password-field → checkbox → label → forgot → submit → register → applogin (если есть).
   Перестраиваем через flex order: «Логин» → input → «Пароль» → input. */
body:has(.login-box1) .login-box1 form .applogin       { order: -10 !important; }
body:has(.login-box1) .login-box1 form .login          { order: 0 !important; }
body:has(.login-box1) .login-box1 form .username-text  { order: 1 !important; }
body:has(.login-box1) .login-box1 form .username-field { order: 2 !important; }
body:has(.login-box1) .login-box1 form .password-text  { order: 3 !important; }
body:has(.login-box1) .login-box1 form .password-field { order: 4 !important; }
body:has(.login-box1) .login-box1 form .email-text     { order: 5 !important; }
body:has(.login-box1) .login-box1 form .email-field    { order: 6 !important; }
body:has(.login-box1) .login-box1 form .login-captcha  { order: 7 !important; }
body:has(.login-box1) .login-box1 form input[type="checkbox"]         { order: 8 !important; }
body:has(.login-box1) .login-box1 form input[type="checkbox"] + label { order: 9 !important; }
body:has(.login-box1) .login-box1 form .forgot-usr-pwd { order: 10 !important; }
body:has(.login-box1) .login-box1 form input[type="submit"],
body:has(.login-box1) .login-box1 form .material-bubble { order: 11 !important; }
body:has(.login-box1) .login-box1 form .register       { order: 12 !important; }

/* Заголовок (Личный кабинет) — на полную ширину, без padding под шестерёнку */
body:has(.login-box1) .login {
    position: static !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gn-text-mute, #8a9b93) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Шестерёнка (настройки) — fixed в правом верхнем углу viewport,
   видна только админам (HTML-элемент рендерится только для них). */
body:has(.login-box1) .login a {
    position: fixed !important;
    top: 16px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    color: var(--gn-accent, #00ff66) !important;
    font-size: 14px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s, transform 0.3s, background 0.2s !important;
    text-decoration: none !important;
    line-height: 1 !important;
    z-index: 11 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
body:has(.login-box1) .login a:hover {
    opacity: 1 !important;
    background: rgba(0, 255, 102, 0.10) !important;
    transform: rotate(60deg) !important;
}

/* Блок VK Login — выносим наверх */
body:has(.login-box1) .applogin {
    width: 100% !important;
    margin: 0 0 25px 0 !important;
    position: static !important;
    order: -1 !important;
}
body:has(.login-box1) .vklogin {
    width: 100% !important;
    height: 46px !important;
    background: rgba(76, 117, 163, 0.15) !important;
    border: 1px solid rgba(76, 117, 163, 0.3) !important;
    border-radius: 12px !important;
    color: #85a4cc !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
body:has(.login-box1) .vklogin:hover {
    background: rgba(76, 117, 163, 0.25) !important;
    border-color: rgba(76, 117, 163, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(76, 117, 163, 0.2) !important;
}
body:has(.login-box1) .vklogin::before { content: "Войти через ВКонтакте"; }

/* --- 5. ПОЛЯ ВВОДА И ЛЕЙБЛЫ --- */
body:has(.login-box1) .username-text,
body:has(.login-box1) .password-text,
body:has(.login-box1) .welcome-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gn-text-mute, #8a9b93) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 8px 4px !important;
    transition: color 0.2s !important;
    text-align: left !important;
    display: block !important;
}

body:has(.login-box1) .username-field,
body:has(.login-box1) .password-field,
body:has(.login-box1) .email-field {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    position: relative !important;
    float: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

body:has(.login-box1) form input[type="text"],
body:has(.login-box1) form input[type="password"] {
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;             /* login.css ставит margin-left: 10px — убираем */
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    float: none !important;
}

body:has(.login-box1) .email-field input { width: 100% !important; }

body:has(.login-box1) form input:focus,
body:has(.login-box1) form input:focus-visible,
body:has(.login-box1) form input[type="text"]:focus,
body:has(.login-box1) form input[type="password"]:focus {
    outline: 0 none !important;
    outline-offset: 0 !important;
    border: 1px solid rgba(0, 255, 102, 0.5) !important;
    background: rgba(0, 255, 102, 0.03) !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.15), inset 0 0 8px rgba(0, 255, 102, 0.1) !important;
    -webkit-box-shadow: 0 0 20px rgba(0, 255, 102, 0.15), inset 0 0 8px rgba(0, 255, 102, 0.1) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Chrome autofill жёлтый/белый фон поверх input — перебиваем непрозрачным box-shadow inset
   (полупрозрачные значения autofill просвечивают). */
body:has(.login-box1) form input:-webkit-autofill,
body:has(.login-box1) form input:-webkit-autofill:hover,
body:has(.login-box1) form input:-webkit-autofill:focus,
body:has(.login-box1) form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0a0c0e inset !important;
    box-shadow: 0 0 0 1000px #0a0c0e inset !important;
    -webkit-text-fill-color: #fff !important;
    background-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    caret-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s !important;
}
body:has(.login-box1) form input:-webkit-autofill:focus {
    border-color: rgba(0, 255, 102, 0.5) !important;
}

body:has(.login-box1) .username-field:focus-within + .password-text { color: var(--gn-text-mute) !important; }
body:has(.login-box1) .username-field:focus-within .username-text,
body:has(.login-box1) .password-field:focus-within .password-text {
    color: var(--gn-accent, #00ff66) !important;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.4) !important;
}

/* --- 6. ЧЕКБОКС И ССЫЛКА "ЗАБЫЛИ?" --- */
body:has(.login-box1) .control-group-remember {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    font-size: 13px !important;
}

/* Native checkbox убран ВСЕМИ возможными способами одновременно:
   transform: scale(0) — ноль размера, browser не рендерит skin
   position: absolute, left: -9999px — за viewport
   width/height: 0, font-size: 0 — нулевая площадь
   appearance: none (3 префикса) — без native skin
   `:checked` selector работает на любых hidden input. */
body:has(.login-box1) input[type="checkbox"],
body:has(.login-box1) input#remember-me,
body:has(.login-box1) input[name="remember"] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    accent-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: scale(0) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    z-index: -9999 !important;
    visibility: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
}
body:has(.login-box1) input[type="checkbox"] + label {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    /* ВАЖНО: login.css ставит `background: url(checkbox-off.png)` И `padding-left: 28px`
       на label — это и есть «старый круглый чекбокс» который пользователь видит.
       Перебиваем фон + padding + height (login.css фиксирует 24px). */
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    color: var(--gn-text-mute, #8a9b93) !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 18px 0 4px !important;
    padding: 4px 0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    float: none !important;
}
body:has(.login-box1) input[type="checkbox"]:checked + label {
    /* login.css ставит `background: url(checkbox-on.png)` при checked — тоже скрываем. */
    background: transparent !important;
    background-image: none !important;
}
body:has(.login-box1) input[type="checkbox"] + label::before {
    content: "" !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(0, 255, 102, 0.4) !important;
    border-radius: 4px !important;
    margin-right: 10px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    vertical-align: middle !important;
}
body:has(.login-box1) input[type="checkbox"]:checked + label::before {
    background: var(--gn-accent, #00ff66) !important;
    border-color: var(--gn-accent, #00ff66) !important;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.3) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23050608'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

body:has(.login-box1) .forgot-usr-pwd {
    align-self: flex-end !important;
    font-size: 13px !important;
    color: var(--gn-text-mute, #8a9b93) !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
}
body:has(.login-box1) .forgot-usr-pwd a {
    color: var(--gn-text, #c8d4cf) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
body:has(.login-box1) .forgot-usr-pwd a:hover {
    color: var(--gn-accent, #00ff66) !important;
    text-decoration: underline !important;
}

/* --- 7. КНОПКИ --- */
/* Скрываем И сам `.login-btn`, И его обёртку `<a>` (HTML: `<a><div class="login-btn"></div></a>`).
   Без скрытия родителя `<a>` пустая ссылка остаётся в потоке, занимает order:0 в flex,
   и может рисовать дефолтный underline или маленький артефакт между текстами. */
body:has(.login-box1) .login-btn,
body:has(.login-box1) a:has(> .login-btn),
body:has(.login-box1) form > a:last-of-type {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body:has(.login-box1) .action-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

body:has(.login-box1) input[type="submit"],
body:has(.login-box1) .material-bubble {
    width: 100% !important;
    /* `<input type="submit">` игнорирует `height` (browser quirk) — min-height + padding. */
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 16px !important;
    line-height: 1 !important;
    /* `appearance: none` гасит нативный button-look (иначе Chrome/Edge на :active рисуют системную тёмную заливку поверх нашего background). */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #00e85d !important;
    background-image: linear-gradient(135deg, #00ff66 0%, #00e85d 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #050608 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease, background-image 0.15s ease, color 0.15s ease !important;
    box-shadow: 0 10px 25px rgba(0, 255, 102, 0.25) !important;
    margin: 22px 0 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
body:has(.login-box1) input[type="submit"]:hover {
    background-color: #00ff66 !important;
    background-image: linear-gradient(135deg, #00ff66 0%, #00e85d 100%) !important;
    color: #050608 !important;
    box-shadow: 0 15px 35px rgba(0, 255, 102, 0.4) !important;
    transform: translateY(-2px) !important;
}
body:has(.login-box1) input[type="submit"]:active,
body:has(.login-box1) input[type="submit"]:focus:active,
body:has(.login-box1) input[type="submit"]:active:hover,
body:has(.login-box1) input[type="submit"]:active:focus {
    background-color: #008a37 !important;
    background-image: linear-gradient(135deg, #00a040 0%, #008a37 100%) !important;
    color: #eafff1 !important;
    transform: translateY(1px) !important;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.35),
        0 3px 10px rgba(0, 154, 62, 0.25) !important;
    transition: transform 0.05s ease, box-shadow 0.05s ease, background-color 0.05s ease, background-image 0.05s ease, color 0.05s ease !important;
}

body:has(.login-box1) .register {
    width: 100% !important;
    text-align: center !important;
    margin: 14px 0 0 0 !important;
}
body:has(.login-box1) .register a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;              /* совпадает с кнопкой ВХОД (~50px) */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;       /* совпадает с кнопкой ВХОД */
    color: var(--gn-text, #c8d4cf) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
body:has(.login-box1) .register a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* --- 8. FOOTER — static в потоке, ВСЕГДА после login-box1, не перекрывает --- */
body:has(.login-box1) #footer,
body:has(.login-box1) body > #footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 50px auto 24px !important;
    padding: 20px 12px 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    text-align: center !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    z-index: 1 !important;
}
body:has(.login-box1) #footer a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
}
body:has(.login-box1) #footer a:hover {
    color: var(--gn-accent, #00ff66) !important;
}

/* --- 9. АДАПТИВНОСТЬ (MOBILE) — большие touch-таргеты --- */
@media (max-width: 480px) {
    body:has(.login-box1) .login-box1 {
        margin: 70px auto 90px !important;     /* отступ под translator + footer */
        padding: 32px 22px 26px !important;
        border-radius: 22px !important;
    }
    body:has(.login-box1) .login {
        margin-bottom: 24px !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
    body:has(.login-box1) .username-text,
    body:has(.login-box1) .password-text,
    body:has(.login-box1) .welcome-text {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    body:has(.login-box1) form input[type="text"],
    body:has(.login-box1) form input[type="password"] {
        height: 52px !important;       /* крупнее для тапа */
        font-size: 15px !important;
        padding: 0 18px !important;
        font-size: 16px !important;    /* iOS не зумит при focus */
    }
    body:has(.login-box1) .vklogin {
        height: 52px !important;
        font-size: 14px !important;
    }
    body:has(.login-box1) input[type="submit"],
    body:has(.login-box1) .material-bubble {
        height: auto !important;
        min-height: 0 !important;
        padding: 18px 14px !important;
        font-size: 15px !important;
        letter-spacing: 1.2px !important;
        margin-top: 22px !important;
    }
    body:has(.login-box1) .register a {
        height: 54px !important;       /* совпадает с ВХОД на мобиле */
        font-size: 14px !important;
    }
    body:has(.login-box1) .register {
        margin-top: 14px !important;
    }
    body:has(.login-box1) #footer {
        margin: 32px auto 16px !important;
    }
    body:has(.login-box1) .username-field,
    body:has(.login-box1) .password-field,
    body:has(.login-box1) .email-field {
        margin-bottom: 14px !important; /* плотнее на мобиле */
    }
    body:has(.login-box1) .forgot-usr-pwd {
        margin-top: 14px !important;
        font-size: 13px !important;
    }
    body:has(.login-box1) input[type="checkbox"] + label::before {
        width: 22px !important;
        height: 22px !important;       /* крупнее тап-зона */
        border-radius: 5px !important;
    }
    body:has(.login-box1) .translator {
        top: 10px !important;
        padding: 5px 10px !important;
        gap: 5px !important;
    }
    body:has(.login-box1) .translator img {
        width: 18px !important;
    }
    body:has(.login-box1) #footer {
        position: static !important;    /* fixed footer на мобиле может перекрыть кнопку */
        margin-top: 20px !important;
    }
    body:has(.login-box1) .control-group-remember {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
}