/* Proxeon — бренд-тема «Warm Signal».
   Светлая (кремовая) — ПО УМОЛЧАНИЮ; тёмная — тёплый эспрессо (не сине-серый!).
   Отстройка от mobileproxy держится на: тёплой температуре, плоскости вместо
   сине-фиолетовых градиентов и семействе оттенка (зелёный + янтарь).

   КАК ЭТО РАБОТАЕТ (важно для правок):
   - Файл инжектится перед </head> в design_proxeon/m.tpl => грузится ПОСЛЕ
     modern-v2.css/bootstrap и перекрывает их правила.
   - НО инлайн-<style> внутри шаблонов идут НИЖЕ по документу и перекрыть их
     отсюда без !important нельзя. Поэтому цвета в design_proxeon/index.tpl
     переведены на токены --px-* (скрипт scratchpad/px_color_remap.py, 157 замен):
     переменные резолвятся в момент использования => порядок не важен и обе темы
     обслуживаются ОДНИМ ремапом.
   - Правило: сюда НЕ добавлять фикс-цвета под конкретные элементы — только
     токены + точечные перекрытия захардкоженных правил базы.
   - Семантику (success #10b981, warning #f59e0b) намеренно не трогали: зелёный
     и янтарь и так попадают в палитру Warm Signal. */

/* ===================== СВЕТЛАЯ (по умолчанию) ===================== */
:root{
    /* бренд */
    --px-primary:#0F766E;      --px-primary-rgb:15,118,110;   /* глубокий зелёный */
    --px-primary-dark:#115E56;
    --px-primary-300:#5EAAA3;                                 /* было #60a5fa */
    --px-primary-200:#A7D3CE;                                 /* было #93c5fd */
    --px-accent:#D97706;       --px-accent-rgb:217,119,6;     /* янтарь */
    --px-accent-dark:#B45309;                                 /* было #7c3aed */
    --px-accent2:#C2410C;      --px-accent2-rgb:194,65,12;    /* было #ec4899 */
    --px-accent2-dark:#9A3412;                                /* было #db2777 (тёмная пара) */

    /* поверхности / чернила */
    --px-ink:#1C1A17;                                         /* было #1e293b */
    --px-tint-a:#F5F0E8;                                      /* было #f0f9ff */
    --px-tint-b:#FAF7F2;                                      /* было #faf5ff / #e0f2fe */
    --px-border:#E8DFD0;

    /* перекрываем токены modern-v2.css */
    --primary:#0F766E;
    --primary-dark:#115E56;
    --accent:#D97706;
    --shadow-glow:0 0 20px rgba(15,118,110,.15);

    /* bootstrap */
    --bs-body-bg:#FAF7F2;
    --bs-body-color:#1C1A17;
    --bs-primary:#0F766E;
    --bs-primary-rgb:15,118,110;
    --bs-link-color:#0F766E;
    --bs-link-color-rgb:15,118,110;
    --bs-link-hover-color:#115E56;
    --bs-link-hover-color-rgb:17,94,86;
    --bs-border-color:#E8DFD0;
    --bs-card-bg:#FFFFFF;
    /* ТЁПЛЫЕ НЕЙТРАЛЫ (шаг 2): холодные сине-серые Bootstrap/modern-v2 -> тёплый taupe/крем.
       --bs-secondary-color — главный: весь приглушённый текст (16+ использований + все px-eng-блоки). */
    --bs-secondary-color:#6F675C;   /* было холодн. #6c757d */
    --bs-tertiary-color:#8A8175;
    --bs-emphasis-color:#1C1A17;
    --bs-secondary-bg:#EFE8DC;
    --bs-tertiary-bg:#F2ECE1;
    --gray-50:#F5F0E8;    /* modern-v2: было #f9fafb */
    --gray-100:#EFE8DC;   /* было #f3f4f6 */
    --gray-900:#1C1A17;   /* было #111827 */
}

/* ===================== ТЁМНАЯ (тёплый эспрессо) ===================== */
[data-bs-theme="dark"]{
    --px-primary:#2DD4BF;      --px-primary-rgb:45,212,191;   /* на тёмном зелёный светлеет */
    --px-primary-dark:#14B8A6;
    --px-primary-300:#5EEAD4;
    --px-primary-200:#99F6E4;
    --px-accent:#FBBF24;       --px-accent-rgb:251,191,36;    /* янтарь светлеет */
    --px-accent-dark:#F59E0B;
    --px-accent2:#FB923C;      --px-accent2-rgb:251,146,60;
    --px-accent2-dark:#EA580C;

    --px-ink:#F0E9DE;                                         /* тёплый кремовый текст */
    --px-tint-a:#241F1A;
    --px-tint-b:#1A1714;
    --px-border:#332C24;

    --primary:#2DD4BF;
    --primary-dark:#14B8A6;
    --accent:#FBBF24;
    --shadow-glow:0 0 20px rgba(45,212,191,.18);

    --bs-body-bg:#1A1714;
    --bs-body-color:#F0E9DE;
    --bs-primary:#2DD4BF;
    --bs-primary-rgb:45,212,191;
    --bs-link-color:#2DD4BF;
    --bs-link-color-rgb:45,212,191;
    --bs-link-hover-color:#5EEAD4;
    --bs-link-hover-color-rgb:94,234,212;
    --bs-border-color:#332C24;
    --bs-card-bg:#241F1A;
    /* тёплые нейтралы — тёмная: эспрессо вместо сине-серого */
    --bs-secondary-color:#A2988A;   /* было холодн. светло-серый */
    --bs-tertiary-color:#8C8172;
    --bs-emphasis-color:#F0E9DE;
    --bs-secondary-bg:#2A241E;
    --bs-tertiary-bg:#241F1A;
    --gray-50:#241F1A;    /* было #1f2937 */
    --gray-100:#2A241E;
    --gray-900:#F0E9DE;   /* было #f9fafb */
}

/* ===================== Кнопки ===================== */
.btn-primary{
    --bs-btn-bg:var(--px-primary);
    --bs-btn-border-color:var(--px-primary);
    --bs-btn-hover-bg:var(--px-primary-dark);
    --bs-btn-hover-border-color:var(--px-primary-dark);
    --bs-btn-active-bg:var(--px-primary-dark);
    --bs-btn-active-border-color:var(--px-primary-dark);
}

/* ===================== Кремовые поверхности =====================
   Bootstrap .bg-white/.bg-light идут с !important — перекрываем тем же.
   Секции-обёртки становятся кремовыми, карточки остаются белыми => контраст
   «кремовая страница + белые карточки», как в макете Warm Signal. */
.bg-white{ background-color:var(--px-tint-b) !important; }
.bg-light{ background-color:var(--px-tint-a) !important; }
[data-bs-theme="dark"] .bg-white{ background-color:var(--px-tint-a) !important; }
[data-bs-theme="dark"] .bg-light{ background-color:var(--px-tint-b) !important; }

/* Навбар: стеклянный, но тёплый (в базе rgba(255,255,255,.85)) */
.navbar{ background:rgba(250,247,242,.85) !important; }
[data-bs-theme="dark"] .navbar{ background:rgba(26,23,20,.85) !important; }

/* ============ Точечные перекрытия захардкоженных цветов modern-v2.css ============
   (сам modern-v2.css общий с mobileproxy — не трогаем) */
.hero-section::before{
    background:radial-gradient(circle, rgba(var(--px-primary-rgb),.08) 0%, transparent 70%);
}
.btn-new:hover{
    box-shadow:var(--shadow-lg), 0 0 25px rgba(var(--px-primary-rgb),.25);
}
.breadcrumb-modern-link:hover{ background:rgba(var(--px-primary-rgb),.08); }
[data-bs-theme="dark"] .breadcrumb-modern-link:hover{
    color:var(--px-primary-300);
    background:rgba(var(--px-primary-rgb),.15);
}
@keyframes pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(var(--px-accent-rgb),.4); }
    50%    { box-shadow:0 0 0 15px rgba(var(--px-accent-rgb),0); }
}

/* ============ НАВБАР: логотип и вордмарк «PROXEON» одной высоты ============
   Матчасть: img лого в навбаре 55×42, но viewBox 48×48 вписывается с масштабом .875,
   и гексагон после rotate(90) занимает по высоте ~26px (а не все 42). Поэтому кегль
   подобран так, чтобы КАПИТЕЛЬ (~.72em) совпала с реальной высотой знака: 36px*.72 ≈ 26px.
   В офф-канвасе лого 64×50 => знак ~31px => кегль 42px.
   КРУТИЛКИ: --px-brand-size / --px-brand-size-lg — меняй их, если захочется крупнее/мельче.
   Инлайновый font-size:17px снят в design_proxeon/m.tpl (проход #6), иначе он бил бы этот CSS. */
:root{ --px-brand-size:36px; --px-brand-size-lg:42px; }

.navbar-brand.px-brand,
.offcanvas-title.navbar-brand{
    display:inline-flex;
    align-items:center;      /* лого и текст по центру друг друга */
    gap:.45rem;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
    color:var(--px-ink);
}
.navbar-brand.px-brand{ font-size:var(--px-brand-size); }
.offcanvas-title.navbar-brand{ font-size:var(--px-brand-size-lg); }
/* float/отступ из базовой разметки мешают флексу — гасим, интервал даёт gap */
.navbar-brand.px-brand .logo,
.offcanvas-title.navbar-brand .logo{ float:none !important; padding:0 !important; }

/* ============ Кнопки навбара: перекрашиваем .bgc-blue под палитру ============
   .bgc-blue — «пилюля»-подложка под группой корзина+Купить и под переключателем языка.
   База: modern-v2.css:531 (голубой градиент #bfdbfe→#dbeafe), bootstrap.min.css:49 (#c2e6ff),
   тёмный вариант bootstrap.min.css:563 (#1f2937, с !important => перекрываем тем же).
   Warm Signal плоский => ровный тёплый тон вместо голубого градиента.
   Содержимое пилюли (текст «Купить» .text-primary, иконка корзины) НЕ красим —
   оно и так идёт от --bs-primary/--primary, т.е. от токенов темы. */
.bgc-blue{ background:rgba(var(--px-primary-rgb),.12) !important; }
[data-bs-theme="dark"] .bgc-blue{ background:var(--px-tint-a) !important; }

/* ============ Кнопки: убираем СМЕЩЕНИЕ, «рябь» ОСТАВЛЯЕМ ============
   Дёргает кнопку именно transform на :hover (напр. .btn-outline-primary → translateY(-2px)
   в инлайн-стилях главной; .nav-pills → translateY(-4px) scale(1.05)). Гасим ТОЛЬКО transform.
   Эффект расширяющегося светлого фона (.btn::before, 0→300px, modern-v2.css:119-135)
   намеренно НЕ трогаем — он остаётся.
   !important обязателен: эти правила живут в инлайн-<style> НИЖЕ по документу, чем этот файл. */
.btn:hover,
.btn-new:hover,
.btn-outline-primary:hover,
.nav-pills .nav-link:hover,
.final-cta-btn-trial:hover,          /* у кнопок финального CTA свой translateY(-2px), */
.final-cta-btn-buy:hover{ transform:none !important; }   /* класса .btn на них нет */

/* ============ ДОБИВКА СИНЕВЫ из общих CSS ============
   Эти литералы живут в bootstrap.min.css / modern-v2.css (общие с mobileproxy, править нельзя).
   proxeon.css грузится ПОСЛЕ них => перекрываем по селектору.
   Семантику (success/warning/danger/info) намеренно не трогаем. */

/* Иконка корзины в навбаре (bootstrap.min.css:338 — единственный #007bff во внешнем CSS;
   проход #7 в обёртке его не достаёт, он чинит только HTML/инлайн-стили).
   В тёмной теме .cart i уже белая с !important (bootstrap.min.css:566) — не трогаем. */
.cart i{ color:var(--px-primary); }

/* #64b1e7 «deep-blue» (bootstrap.min.css:445-465) */
.btn-check:checked+.btn{
    background-color:var(--px-primary);
    border-color:var(--px-primary);
    color:#fff;
}
.btn-check:checked+.btn:hover{           /* было #1b95eb + рамка #64b1e7 */
    background-color:var(--px-primary-dark);
    border-color:var(--px-primary-dark);
}
.btn-new:hover{ background-color:var(--px-primary-dark); border-color:var(--px-primary); }
.bg-deep-blue{ background-color:var(--px-primary) !important; }
.text-deep-blue{ color:var(--px-primary) !important; }
/* .bg-light-blue: тон РАЗНЫЙ по темам — в светлой это светлая плашка #a7d9fc
   (bootstrap.min.css:466), в тёмной — насыщенный #006bb6 (строка 564).
   Поэтому и подменяем разным, иначе светлая плашка станет тёмно-зелёной. */
.bg-light-blue{ background-color:rgba(var(--px-primary-rgb),.15) !important; }
[data-bs-theme="dark"] .bg-light-blue{ background-color:var(--px-primary-dark) !important; }

/* #0d6efd — primary Bootstrap 5, зашит литералом в состояниях компонентов.
   Переменных --bs-primary мало: focus-ring/checked/active берут хардкод. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus{
    border-color:rgba(var(--px-primary-rgb),.5);
    box-shadow:0 0 0 .25rem rgba(var(--px-primary-rgb),.25);
}
.form-check-input:checked{
    background-color:var(--px-primary);
    border-color:var(--px-primary);
}
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active{
    background-color:var(--px-primary);
    border-color:var(--px-primary);
}
.page-link{ color:var(--px-primary); }
.page-item.active .page-link{
    background-color:var(--px-primary);
    border-color:var(--px-primary);
}
.accordion-button:not(.collapsed){
    color:var(--px-primary);
    background-color:rgba(var(--px-primary-rgb),.08);
}
.accordion-button:focus{
    border-color:rgba(var(--px-primary-rgb),.5);
    box-shadow:0 0 0 .25rem rgba(var(--px-primary-rgb),.25);
}
.form-range::-webkit-slider-thumb{ background-color:var(--px-primary); }
.form-range::-moz-range-thumb{ background-color:var(--px-primary); }
.form-range::-webkit-slider-thumb:active{ background-color:rgba(var(--px-primary-rgb),.55); }
.form-range::-moz-range-thumb:active{ background-color:rgba(var(--px-primary-rgb),.55); }
.table-primary{
    --bs-table-bg:rgba(var(--px-primary-rgb),.14);
    --bs-table-border-color:rgba(var(--px-primary-rgb),.28);
}

/* Активный таб .nav-pills: в bootstrap.min.css:477 зашит синий #1b95eb.
   Красим ТОЛЬКО background-color. Псевдоэлемент ::before из modern-v2 (градиент
   var(--primary)/var(--accent)) не трогаем — он уже брендовый и лежит поверх. */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{ background-color:var(--px-primary); }

/* #2f3c50 — холодная тёмная поверхность из тёмного блока bootstrap.min.css:565 */
[data-bs-theme="dark"] .bgc-white,
[data-bs-theme="dark"] .bg-while-opacity-90{ background-color:var(--px-tint-a) !important; }

/* ===== ТЁПЛЫЕ НЕЙТРАЛЫ (шаг 2): точечные перекрытия холодных ЛИТЕРАЛОВ modern-v2.css,
   которые не идут через токены (footer/breadcrumb muted, тёмные .card/footer поверхности).
   .client-card-alt (#e2e8f0) намеренно пропущен — блок «Нам доверяют» на Proxeon удалён. ===== */
footer a, .breadcrumb-modern-link{ color:var(--bs-secondary-color); }          /* было #6b7280 */
[data-bs-theme="dark"] .card{ background:var(--px-card-bg) !important; }        /* было сине-серый #1f2937 -> эспрессо */
[data-bs-theme="dark"] footer{ background:var(--px-tint-a) !important; }        /* было #1f2937 -> эспрессо */
[data-bs-theme="dark"] .breadcrumb-modern-link{ color:var(--px-ink) !important; } /* было холодн. #f9fafb */

/* ============================================================================
   НАВБАР — «техническая планка» (вариант B, 2026-07-18)
   Отстройка: у mobileproxy навбар — плавающая СТЕКЛЯННАЯ пилюля (backdrop-filter
   blur(12px) + rounded-5 + shadow + подчёркивание-слайдер на ховере). Здесь —
   плоская планка вровень со страницей: сплошной крем, волосяная линия снизу,
   янтарная кромка сверху («край документа»), моно-меню капслоком, СТАТИЧНАЯ
   янтарная черта у активного пункта.

   CSS-ONLY, правок разметки не нужно: классы .rounded-5/.shadow из общего m.tpl
   Bootstrap ставит через !important, но proxeon.css грузится ПОЗЖЕ — при равной
   специфичности побеждает наш !important.
   ============================================================================ */
.navbar{
    background: var(--px-tint-b) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;   /* убираем стекло */
    box-shadow: none !important;                /* бьёт .shadow */
    border-radius: 0 !important;                /* бьёт .rounded-5 / .rounded-top-0 */
    border-bottom: 1px solid var(--px-border) !important;
    /* ВНИМАНИЕ: position здесь НЕ задавать. `.fixed-top{position:fixed}` в Bootstrap идёт
       БЕЗ !important, специфичность равна `.navbar`, а proxeon.css грузится позже —
       любой position тут перебьёт fixed, и шапка перестанет быть липкой (был такой баг).
       Для ::before позиционирование не нужно: fixed сам является containing block. */
}
/* янтарная кромка сверху — «край документа» */
.navbar::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background: var(--px-accent); z-index:2; pointer-events:none;
}
/* Вертикальный разделитель между лого и меню УБРАН по просьбе владельца —
   оставлен только воздух (отступ), без линии. */
@media(min-width:992px){
    .navbar-brand.px-brand{ margin-right: 1rem; }
}
/* меню: моно, капслок, разрядка */
.navbar .nav-link-top-menu{
    font-family: ui-monospace,"JetBrains Mono",Consolas,monospace;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.navbar .nav-link-top-menu:hover{ color: var(--px-ink); }
.navbar .nav-link-top-menu.active{ color: var(--px-ink) !important; }
/* подчёркивание: янтарное и СТАТИЧНОЕ. Слайдер 0->80% на ховере убран —
   в «инженерной» подаче ничего не ездит; черта только у активного пункта.
   Порядок правил важен: hover ставим ДО active, чтобы активный при наведении не схлопывался. */
.navbar .nav-link:not(.dropdown-toggle)::after{ background: var(--px-accent) !important; transition: none !important; }
.navbar .nav-link:not(.dropdown-toggle):hover::after{ width: 0 !important; }
.navbar .nav-link:not(.dropdown-toggle).active::after{ width: 80% !important; }
/* ---- Правый кластер КАК В МАКЕТЕ: сплошная зелёная кнопка + рамка у языка ----
   .bgc-blue — подложка-пилюля под корзиной и «Купить»; гасим её, чтобы кнопка
   стояла сама по себе (в макете подложки нет). */
.navbar .bgc-blue{ background: transparent !important; padding: 0 !important; }
.navbar .dropdown-item.text-primary{            /* «Купить» */
    display: inline-flex !important; align-items: center; gap: .35rem; width: auto;
    background: var(--px-primary);
    color: #fff !important;
    border-radius: 3px;
    padding: .42rem .95rem !important;
    font-weight: 700;
}
.navbar .dropdown-item.text-primary:hover,
.navbar .dropdown-item.text-primary:focus{ background: var(--px-primary-dark); color: #fff !important; }
.navbar #dropdown09{                            /* переключатель языка */
    border: 1px solid var(--px-border) !important;
    background: transparent !important;
    color: var(--px-ink) !important;
    border-radius: 3px !important;
    padding: .35rem .6rem !important;
    font-family: ui-monospace,"JetBrains Mono",Consolas,monospace;
    font-weight: 700;
}
/* Корзина: иконка опущена на 10px, бейдж-счётчик подвинут под неё.
   База (bootstrap.min.css): .cart i{position:relative;right:12px;font-size:25px}
   и .cart:before{position:relative;top:-23px;right:-38px} — координаты РАМКИ relative,
   поэтому отрицательный right сдвигает бейдж вправо. Значения заданы владельцем. */
.navbar .cart i{ font-size: 1.05rem !important; color: var(--px-primary); top: 10px; }
#cart::before{ top: -15px !important; right: -23px !important; }

/* ---- Единый кегль + вертикальное выравнивание всего содержимого планки ---- */
.navbar .navbar-nav, .navbar .offcanvas-body{ align-items: center; }
.navbar .nav-link,
.navbar .nav-link-top-menu,
.navbar .dropdown-item.text-primary,
.navbar #dropdown09{
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
}

/* ============================================================================
   BREADCRUMBS — «файловый путь» (вариант A, 2026-07-18)
   Было: полупрозрачная СКРУГЛЁННАЯ карточка (bg rgba(255,255,255,.6), radius .75rem)
   с пилюлями-подложками на ховере, FA-шевронами и анимацией появления.
   Стало: моно-путь со слэшами — `/ Главная / Блог / Статья`, ведущий слэш янтарём,
   текущая страница чернилами. Ноль подложек, скруглений и анимаций.

   CSS-ONLY: разметка в общем design_v2/m.tpl НЕ трогается (её править нельзя),
   микроразметка schema.org BreadcrumbList остаётся нетронутой.
   Работает на ВСЕХ страницах со $breadcrumbs (блог, ГЕО, инструменты, оферта).
   ============================================================================ */
.breadcrumb-modern{
    background: transparent !important;
    border-radius: 0 !important;
    padding: .5rem 0 !important;
    align-items: center;
    /* modern-v2.css:561 рисует «стеклянную плашку»: рамка, тень и блюр.
       Фон мы уже сняли, но без этих трёх строк оставалась висеть пустая
       рамка вокруг прозрачного места. backdrop-filter снимаем в обоих
       написаниях — Safari понимает только -webkit-. */
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* ведущий слэш — маркер корня пути */
.breadcrumb-modern::before{
    content: "/";
    font-family: ui-monospace,"JetBrains Mono",Consolas,monospace;
    font-weight: 700;
    color: var(--px-accent);
    margin-right: .45rem;
}
.breadcrumb-modern-item{
    animation: none !important;      /* инженерная подача — ничего не «выезжает» */
    align-items: center;
    font-size: .8rem;
}
.breadcrumb-modern-link,
.breadcrumb-modern-current{
    font-family: ui-monospace,"JetBrains Mono",Consolas,monospace;
    font-size: .8rem;
    letter-spacing: .01em;
}
.breadcrumb-modern-link{
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--bs-secondary-color) !important;
    text-decoration: none;
}
.breadcrumb-modern-link:hover{
    background: transparent !important;   /* убираем пилюлю-подложку */
    color: var(--px-primary) !important;
}
.breadcrumb-modern-current{
    color: var(--px-ink) !important;
    font-weight: 700;
}
/* Разделитель: тот же <i class="fas fa-chevron-right">, но глиф подменён на слэш —
   меняем font-family с Font Awesome на моно и content на "/". Элемент не трогаем. */
.breadcrumb-modern-separator{
    font-family: ui-monospace,"JetBrains Mono",Consolas,monospace !important;
    font-weight: 400 !important;
    font-size: .8rem !important;
    color: var(--px-border) !important;
    margin: 0 .45rem !important;
}
.breadcrumb-modern-separator::before{ content: "/" !important; }
/* иконка «дом» лишняя — роль корня выполняет янтарный слэш */
.breadcrumb-modern-link i.fa-home{ display: none !important; }

/* ---- Мобильное меню: линии ТОЛЬКО на мобиле.
   БЫЛ БАГ: без медиазапроса border-bottom рисовался под КАЖДЫМ пунктом и на десктопе —
   на lg+ содержимое offcanvas показывается инлайн прямо в планке. ---- */
@media(max-width:991.98px){
    .offcanvas{ background: var(--px-tint-b) !important; border-left: 1px solid var(--px-border) !important; }
    .offcanvas .navbar-nav .nav-item{ border-bottom: 1px solid var(--px-border); }
    .offcanvas .navbar-nav .nav-link{ padding-top: .7rem; padding-bottom: .7rem; }
}

/* Скрытие неготовых разделов НЕ здесь: ссылки ВЫРЕЗАЮТСЯ из HTML в
   design_proxeon/m.tpl (проход #8) — так их не видит и краулер. */

/* ============================================================================
   ИНЖЕНЕРНЫЕ КОМПОНЕНТЫ — общий слой для ВСЕХ страниц Proxeon
   ----------------------------------------------------------------------------
   Зачем одним куском: /faq, /pages, /partner, /promotions, /oferta, ЛК и
   покупка собраны из ОДНИХ И ТЕХ ЖЕ кирпичей bootstrap (на публичных страницах
   насчитано: modal 168, btn 112, card 67, alert 48, form-control 32).
   Почти вся геометрия BS резолвится ЧЕРЕЗ токены на этапе использования
   (--bs-card-border-radius: var(--bs-border-radius) и т.д.), поэтому ремап
   нескольких переменных в :root выпрямляет card/modal/dropdown/alert/badge/
   btn/pagination/list-group/progress/toast/form-control/form-select и утилиты
   .rounded/.shadow РАЗОМ — без форков шаблонов и без правки design_v2.

   Хардкод мимо токенов в modern-v2.css мал (9 радиусов / 6 теней / 12
   градиентов) и добивается адресно ниже — блок «ДОБИВКА».
   ============================================================================ */

/* ---- Токены слоя ---------------------------------------------------------- */
:root{
    --px-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Поверхность карточки/поля. ВАЖНО: раньше на неё ссылалась строка ~280
       ([data-bs-theme="dark"] .card), но сам токен НИГДЕ не был объявлен —
       var() без fallback делал объявление невалидным, и фон карточек в тёмной
       теме схлопывался в transparent. Здесь он наконец определён. */
    --px-card-bg: #FFFFFF;

    /* Геометрия: бумага не скруглена. */
    --bs-border-radius:      0;
    --bs-border-radius-sm:   0;
    --bs-border-radius-lg:   0;
    --bs-border-radius-xl:   0;
    --bs-border-radius-xxl:  0;
    --bs-border-radius-2xl:  0;
    --bs-border-radius-pill: 0;

    /* Тени: бумага не отбрасывает тень. Гасим и BS, и modern-v2. */
    --bs-box-shadow:       none;
    --bs-box-shadow-sm:    none;
    --bs-box-shadow-lg:    none;
    --bs-box-shadow-inset: none;
    --shadow-soft: none;
    --shadow-md:   none;
    --shadow-lg:   none;
    --shadow-glow: none;

    /* Фокус: янтарь вместо дефолтной синевы bootstrap. */
    --bs-focus-ring-color: rgba(var(--px-accent-rgb), .35);
    --bs-focus-ring-width: 2px;
}
/* Тёмная тема. Специфичность равна :root (обе 0-1-0) — работает за счёт
   порядка в файле, ровно как в блоках токенов выше. Не поднимать выше :root. */
[data-bs-theme="dark"]{
    --px-card-bg: #241F1A;
}

/* ---- ДОБИВКА: хардкод modern-v2.css, который перебивает токены ------------- */
/* .btn там задаёт border-radius:.75rem БЕЗ !important — токен до него не
   доходит, поэтому только так. */
.btn{ border-radius: 0 !important; box-shadow: none !important; }

/* .card::before / .client-card-alt::before — hover-свечение (inset:-2px,
   linear-gradient, z-index:-1). Инженерной бумаге свечение чуждо. */
.card::before,
.client-card-alt::before{ display: none !important; }

/* Градиентные плашки и «модные» поверхности -> плоские.

   ГРАБЛИ (наступал 2026-07-22, чинил в тот же день): у всех трёх фон задан
   ШОРТКАТОМ `background: linear-gradient(...)`, а шорткат сбрасывает
   background-color в transparent. Поэтому глушить один background-image НЕЛЬЗЯ:
   элемент остаётся полностью прозрачным. У .btn-new вдобавок `color:#fff
   !important` из modern-v2.css:139 -> белый текст на кремовом фоне, то есть
   кнопка ИСЧЕЗАЕТ в светлой теме. Так пропали главный CTA «Попробовать
   бесплатно», «Перейти на партнёрский портал» и «Отправить пароль» в модалке
   восстановления (последняя — на каждой странице сайта).
   ПРАВИЛО: для любого элемента с шорткат-градиентом задавать фон ЦЕЛИКОМ. */
.badge-popular,
.btn-new,
.client-card-alt{
    border-radius: 0 !important;
    box-shadow: none !important;
}
.badge-popular{ background: var(--px-accent) !important; color: #1C1A17 !important; }

/* Кнопка-CTA: сплошной зелёный вместо градиента. */
.btn-new{ background: var(--px-primary) !important; border: none !important; }
/* В тёмной теме --px-primary светлый бирюзовый (#2DD4BF): белый текст даёт на нём
   ~1.9:1. Перебиваем `color:#fff !important` тёмными чернилами. */
[data-bs-theme="dark"] .btn-new,
[data-bs-theme="dark"] .btn-new:hover{ color: #10201E !important; }

/* Карточка «Нам доверяют»: плоская светлая поверхность вместо градиента. */
.client-card-alt{ background: var(--px-card-bg) !important; border: 1px solid var(--px-border) !important; }

/* .card.bg-it30 (акцентная карточка) — единственный носитель @keyframes pulse
   с фиолетовым rgba(139,92,246). Фон там задан ШОРТКАТОМ background:
   linear-gradient(...), а шорткат обнуляет и background-color, поэтому глушить
   один background-image нельзя — карточка станет прозрачной. Задаём фон целиком.
   Специфичность .card.bg-it30 (0-2-0) выше общего .card (0-1-0) — правило ниже
   должно быть таким же составным, иначе не перебьёт. */
.card.bg-it30{
    background: rgba(var(--px-accent-rgb), .10) !important;
    border: 1px solid var(--px-accent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Пилюли табов: 1rem !important в modern-v2 — перебиваем тем же оружием. */
.nav-pills .nav-link,
.nav-pills .nav-link::before{ border-radius: 0 !important; }

/* ---- Карточка = плоская плитка -------------------------------------------- */
.card{
    background: var(--px-card-bg) !important;
    border: 1px solid var(--px-border) !important;
    box-shadow: none !important;
}
.card-header, .card-footer{
    background: var(--px-tint-a) !important;
    border-color: var(--px-border) !important;
}
/* Подъём при наведении заменяем на янтарную кромку — только у интерактивных. */
.hover-lift, .client-card-alt{ transition: border-color .15s ease !important; }
.hover-lift:hover, .client-card-alt:hover{
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--px-accent) !important;
}

/* ---- Таблицы = ведомость --------------------------------------------------- */
.table{ border-color: var(--px-border) !important; }
.table > :not(caption) > * > *{
    border-color: var(--px-border) !important;
    background-image: none !important;
}
.table > thead > tr > th,
.table thead th{
    font-family: var(--px-mono) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--px-ink) !important;   /* жирная линия шапки */
}
/* Зебру убираем — разделение несут hairline-линии. */
.table-striped > tbody > tr:nth-of-type(odd) > *{ background: transparent !important; }
.table-hover > tbody > tr:hover > *{ background: rgba(var(--px-accent-rgb), .07) !important; }
/* Цифры в ячейках — моно, с табличными цифрами (колонки выравниваются). */
.table td, .table th{ font-variant-numeric: tabular-nums; }

/* ---- Формы ----------------------------------------------------------------- */
.form-control, .form-select, .input-group-text{
    border-color: var(--px-border) !important;
    border-radius: 0 !important;
    background-color: var(--px-card-bg) !important;
    box-shadow: none !important;
}
.input-group-text{ background-color: var(--px-tint-a) !important; font-family: var(--px-mono); }
.form-control:focus, .form-select:focus, .form-check-input:focus{
    border-color: var(--px-accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--px-accent-rgb), .30) !important;
}
.form-check-input:checked{
    background-color: var(--px-primary) !important;
    border-color: var(--px-primary) !important;
}
/* Поля, куда вводят ДАННЫЕ (логин, IP, порт, ключ), — моноширинные.
   textarea намеренно исключён: длинный текст в моно читается хуже. */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"], input[type="url"]{
    font-family: var(--px-mono);
    font-size: .95em;
}
.form-label{
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ---- Кнопки ---------------------------------------------------------------- */
.btn-primary{
    background: var(--px-primary) !important;
    border-color: var(--px-primary) !important;
    background-image: none !important;
    color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary:focus{
    background: var(--px-primary-dark) !important;
    border-color: var(--px-primary-dark) !important;
}
/* В тёмной теме primary — яркий бирюзовый #2DD4BF: белый текст на нём даёт
   контраст ~1.9:1. Ставим тёмные чернила. */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary:hover{ color: #10201E !important; }

.btn-outline-primary{
    border-color: var(--px-primary) !important;
    color: var(--px-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover{
    background: var(--px-primary) !important;
    color: #FFFFFF !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover{ color: #10201E !important; }

/* ---- Алерты = врезка с левой акцентной планкой ----------------------------- */
.alert{
    border: 1px solid var(--px-border) !important;
    border-left: 3px solid var(--px-accent) !important;
    border-radius: 0 !important;
    background: var(--px-tint-a) !important;
    color: var(--bs-body-color) !important;
}
.alert-success{ border-left-color: var(--px-primary) !important; }
.alert-warning{ border-left-color: var(--px-accent) !important; }
.alert-danger { border-left-color: #DC2626 !important; }
.alert-info   { border-left-color: var(--px-primary-300) !important; }

/* ---- Модалки (самый частый компонент — 168 вхождений) ---------------------- */
.modal-content{
    background: var(--px-card-bg) !important;
    border: 1px solid var(--px-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.modal-header, .modal-footer{
    background: var(--px-tint-a) !important;
    border-color: var(--px-border) !important;
}
.modal-title{ font-weight: 700; letter-spacing: -.01em; }

/* ---- Выпадающие списки ----------------------------------------------------- */
.dropdown-menu{
    background: var(--px-card-bg) !important;
    border: 1px solid var(--px-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.dropdown-item:hover, .dropdown-item:focus{
    background: rgba(var(--px-accent-rgb), .10) !important;
    color: var(--bs-body-color) !important;
}
.dropdown-item.active, .dropdown-item:active{
    background: var(--px-primary) !important;
    color: #FFFFFF !important;
}

/* .dropdown-menu-dark — тёмный вариант меню; им размечен ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
   (class="dropdown-menu dropdown-menu-dark dropdown-menu-end").
   Bootstrap задаёт там свою пару «тёмный фон #343a40 + светлый текст #dee2e6»
   через ТОКЕНЫ, а правило .dropdown-menu выше перебивает фон шорткатом с
   !important — фон становится светлым, а текст остаётся #dee2e6.
   Итог: почти белые буквы на белом, «варианты языков написаны крайне блекло»
   (замечание отдела маркетинга, док 1 п. 13). Проверено: на странице этот
   класс ровно один — на языковом меню.
   Чиним НЕ цветом, а ремапом токенов: они резолвятся в момент использования,
   поэтому одна правка обслуживает и светлую, и тёмную тему. */
.dropdown-menu-dark{
    --bs-dropdown-color:                 var(--bs-body-color);
    --bs-dropdown-link-color:            var(--bs-body-color);
    --bs-dropdown-link-hover-color:      var(--bs-body-color);
    --bs-dropdown-link-hover-bg:         rgba(var(--px-accent-rgb), .10);
    --bs-dropdown-link-active-color:     #FFFFFF;
    --bs-dropdown-link-active-bg:        var(--px-primary);
    --bs-dropdown-link-disabled-color:   var(--bs-tertiary-color);
    --bs-dropdown-header-color:          var(--bs-secondary-color);
    --bs-dropdown-border-color:          var(--px-border);
    --bs-dropdown-divider-bg:            var(--px-border);
}
[data-bs-theme="dark"] .dropdown-menu-dark{ --bs-dropdown-link-active-color:#10201E; }

/* ---- Табы: подчёркивание вместо заливки ------------------------------------ */
.nav-tabs{ border-bottom: 1px solid var(--px-border) !important; }
.nav-tabs .nav-link{
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--bs-secondary-color) !important;
    font-weight: 600;
}
.nav-tabs .nav-link:hover{ border-bottom-color: var(--px-border) !important; }
.nav-tabs .nav-link.active{
    background: transparent !important;
    color: var(--px-ink) !important;
    border-bottom-color: var(--px-accent) !important;
}

/* ---- Пагинация, бейджи, прогресс, списки ----------------------------------- */
.page-link{
    border-radius: 0 !important;
    border-color: var(--px-border) !important;
    color: var(--px-ink) !important;
    font-family: var(--px-mono);
    font-size: .85rem;
}
.page-link:hover{ background: var(--px-tint-a) !important; }
.page-item.active .page-link{
    background: var(--px-primary) !important;
    border-color: var(--px-primary) !important;
    color: #FFFFFF !important;
}
.badge{
    border-radius: 0 !important;
    font-family: var(--px-mono);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.progress{ border-radius: 0 !important; background: var(--px-tint-a) !important; }
.progress-bar{ background: var(--px-primary) !important; background-image: none !important; }
.list-group-item{
    background: var(--px-card-bg) !important;
    border-color: var(--px-border) !important;
    border-radius: 0 !important;
}

/* ---- Доступность: видимый фокус в фирменном янтаре -------------------------- */
:focus-visible{
    outline: 2px solid var(--px-accent) !important;
    outline-offset: 2px;
}

/* ---- NAV: про .bgc-white здесь правила НЕТ, и это намеренно ------------------
   На внутренних страницах общий design_v2/m.tpl отдаёт пункты навбара с классом
   bgc-white (на главной — bgc-blue). Правило под .bgc-white тут стояло и было
   удалено: оно гасило только фон, а .navbar .bgc-blue гасит ещё и padding, из-за
   чего внутренние страницы всё равно расходились с главной.
   Вместо двух правил, которые надо держать синхронно, класс подменяется в HTML —
   проход #6b в design_proxeon/m.tpl. Не возвращай правило сюда: после подмены
   .bgc-white на страницах Proxeon просто не существует. */

/* ---- FAQ: разделы (группировка включена в @modules/faq.php под PROXEON) --------
   Классы .faq-cat-head / .faq-toc-cat отдаёт модуль; в общем design_v2/faq.tpl их
   нет, поэтому на mobileproxy эти правила ни на что не действуют. */
.faq-cat-head{
    display: flex; align-items: baseline; gap: .55rem;
    margin: 2.2rem 0 .9rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--px-ink);
    font-size: 1.05rem; font-weight: 700; color: var(--px-ink);
}
.faq-cat-head:first-child{ margin-top: 0; }
.faq-cat-head .faq-cat-i{
    font-family: var(--px-mono); font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; color: var(--px-accent);
}
/* Оглавление: раздел — «якорь» с числом вопросов, вопросы под ним с отступом. */
.faq-toc-cat{ list-style: none; margin: 1rem 0 .35rem; }
.faq-toc-cat:first-child{ margin-top: 0; }
.faq-toc-cat > a{
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    padding: .3rem 0; text-decoration: none;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--px-ink) !important; border-bottom: 1px solid var(--px-border);
}
.faq-toc-cat > a:hover{ border-bottom-color: var(--px-accent); }
.faq-toc-cat .faq-toc-cat-n{
    font-family: var(--px-mono); font-size: .7rem; font-weight: 400;
    color: var(--bs-secondary-color);
}
.faq-toc-cat ~ .faq-toc-item{ padding-left: .6rem; }

/* ---- НАВБАР: кнопка «Кабинет» (вход в ЛК для авторизованных) -----------------
   Разметку даёт проход #6c в design_proxeon/m.tpl: класс .px-cab на триггере
   дропдауна + подпись .px-cab-t «Кабинет» рядом с иконкой fa-user.
   Замечание отдела маркетинга (док2 п.4): вход в ЛК был голой иконкой — делаем
   заметной обведённой кнопкой в фирменном зелёном.
   caret (.dropdown-toggle::after) НЕ трогаем — стрелка дропдауна остаётся. */
.navbar .nav-link.px-cab{
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem !important;
    border: 1px solid var(--px-primary);
    border-radius: 3px;
    color: var(--px-primary) !important;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
.navbar .nav-link.px-cab:hover,
.navbar .nav-link.px-cab.show{
    background: var(--px-primary);
    color: #fff !important;
}
[data-bs-theme="dark"] .navbar .nav-link.px-cab:hover,
[data-bs-theme="dark"] .navbar .nav-link.px-cab.show{ color: #10201E !important; }
.px-cab .px-cab-t{ font-size: .9rem; }
.px-cab i.fa-user{ font-size: .95rem; }
/* На узких экранах подпись прячем — остаётся компактная иконка-кнопка. */
@media (max-width: 575.98px){ .px-cab .px-cab-t{ display: none; } }

/* ---- Полоса «география одним взглядом» (блок карты) --------------------------
   Разметку даёт design_proxeon/index.tpl (перед картой): ряд флагов .px-geo-flag
   + крупные цифры пула. Замечание отдела маркетинга док2 п.7, честный вариант:
   флаги + ОБЩАЯ цифра (по стране данных нет). */
.px-geo-strip{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 0 0 1.5rem; padding: 1rem 1.2rem;
    background: var(--px-card-bg); border: 1px solid var(--px-border);
}
.px-geo-flags{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.px-geo-flag{
    display: inline-block; width: 30px; height: 21px;
    background-size: cover; background-position: center;
    border: 1px solid var(--px-border); border-radius: 2px;
}
.px-geo-more{
    font-family: var(--px-mono); font-size: .78rem; font-weight: 700;
    color: var(--px-accent); padding-left: .25rem;
}
.px-geo-nums{ display: flex; align-items: center; gap: 1.1rem; }
.px-geo-num{ display: flex; flex-direction: column; line-height: 1.1; }
.px-geo-num .v{
    font-family: var(--px-mono); font-size: 1.55rem; font-weight: 800;
    color: var(--px-ink); letter-spacing: -.02em;
}
.px-geo-num .u{ font-size: .72rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.px-geo-sep{ width: 1px; height: 34px; background: var(--px-border); }
@media (max-width: 575.98px){
    .px-geo-strip{ flex-direction: column; align-items: flex-start; }
    .px-geo-num .v{ font-size: 1.3rem; }
}