/* =====================================================================
   mobile.css — главная и общие блоки на телефоне (22.10.2026)
   1) Шапка: выше (52px), крупнее логотип и кнопки, без мелкой подписи; поиск занимает оставшееся место.
   2) Три плитки сверху (Каталог / Скидки / Опт): иконка, число, название — без нечитаемого мелкого текста.
   3) «Лидеры платформы» в светлой теме — светлый блок (в тёмной теме остаётся как был).
   4) Ровные отступы между блоками.
   На компьютере ничего не меняется.
   ===================================================================== */
@media (max-width: 992px) {
    /* ---------- 1. Шапка ---------- */
    /* единый отступ от шапки на всех страницах: шапка 52px + 12px воздуха */
    html:root { padding-top: 0 !important; }
    html body { padding-top: 60px !important; }
    html body > .layout { margin-top: 0 !important; padding-top: 0 !important; }
    html body > .layout > .main, html body > .layout > main { margin-top: 0 !important; padding-top: 0 !important; }
    html body > .layout > .main > :first-child, html body > .layout > main > :first-child { margin-top: 0 !important; }
    html body > .layout > .main > .cab-head { margin-top: 0 !important; margin-bottom: 8px !important; }
    html body .white-header { height: 52px !important; min-height: 52px !important; padding: 0 10px !important; gap: 7px !important; align-items: center !important; box-sizing: border-box; }
    html body .white-header .header-left-block { flex: 0 0 auto !important; gap: 6px !important; align-items: center !important; height: auto !important; }
    html body .white-header .header-logo-png { width: 28px !important; height: 28px !important; max-height: none !important; }
    html body .white-header .white-header-title { font-size: 17px !important; line-height: 1 !important; margin: 0 !important; letter-spacing: -.01em; }
    html body .white-header .white-header-title * { font-size: inherit !important; }
    html body .white-header .header-desc { display: none !important; }

    html body .white-header .header-search { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: 34px !important; margin: 0 !important; }
    html body .white-header .header-search input {
        width: 100% !important; height: 34px !important; min-width: 0 !important; box-sizing: border-box !important; border-radius: 11px !important;
        font-size: 12.5px !important; line-height: 1 !important; padding: 0 10px 0 31px !important; background-position: 11px 50% !important; background-size: 14px 14px !important; }
    html body .white-header .header-search input::placeholder { font-size: 12.5px !important; }
    /* поиск: в шапке — кнопка-лупа, при нажатии поле раскрывается на всю ширину шапки */
    html body .white-header .header-search { flex: 0 0 34px !important; width: 34px !important; position: relative; }
    html body .white-header .header-search input { padding: 0 !important; background-position: 50% 50% !important; cursor: pointer; }
    html body .white-header .header-search input:not(:focus) { font-size: 0 !important; color: transparent !important; }
    html body .white-header .header-search input#tg-gsearch:not(:focus)::placeholder { font-size: 0 !important; color: transparent !important; }
    html body .white-header .header-search:focus-within { position: absolute !important; left: 10px !important; right: 10px !important; top: 9px !important; width: auto !important; z-index: 200 !important; }
    html body .white-header .header-search:focus-within input#tg-gsearch { padding: 0 12px 0 34px !important; background-position: 12px 50% !important; background-color: #0c2b3a !important; border-color: rgba(94,232,201,.55) !important; color: #fff !important; cursor: text; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; }
    html body .white-header .header-search:focus-within input::placeholder { color: rgba(255,255,255,.65) !important; }
    html body .white-header .stat-bubble-online svg { display: none !important; }
    html body .white-header .header-left-block { flex: 1 1 auto !important; min-width: 0; }

    html body .white-header .lang-switcher { margin: 0 !important; flex-shrink: 0; }
    html body .white-header .lang-switcher .lang-current { height: 34px !important; padding: 0 10px !important; gap: 6px !important; border-radius: 11px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; box-sizing: border-box; }
    html body .white-header .lang-switcher .lang-current img, html body .white-header .lang-switcher .lang-current svg { width: 18px !important; height: auto !important; max-height: 14px !important; }

    html body .white-header .header-stats-panel { flex: 0 0 auto !important; gap: 7px !important; margin: 0 !important; align-items: center !important; }
    html body .white-header .stat-bubble-online { height: 34px !important; padding: 0 10px !important; gap: 6px !important; border-radius: 11px !important; font-size: 11.5px !important; line-height: 1 !important; font-weight: 800 !important; box-sizing: border-box; }
    html body .white-header .stat-bubble-online span { font-size: inherit !important; line-height: 1 !important; }
    html body .white-header .stat-bubble-online svg { width: 13px !important; height: 13px !important; }
    html body .white-header .tg-theme-toggle { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 11px !important; padding: 0 !important; }
    html body .white-header .tg-theme-toggle svg { width: 17px !important; height: 17px !important; }

    /* ---------- 2. Три плитки сверху ---------- */
    /* прямоугольные плитки: [иконка с числом-бейджем] [название в 2 строки] — всё на одной оси */
    html body .top-nav-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin: 0 0 8px !important; width: 100% !important; box-sizing: border-box; }
    html body .top-nav-buttons .promo-card {
        display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
        height: 58px !important; min-height: 0 !important; padding: 0 6px 0 8px !important; border-radius: 14px !important; box-sizing: border-box !important; overflow: visible; }
    html body .top-nav-buttons .promo-card-row {
        display: flex !important; flex-direction: row !important; align-items: center !important; gap: 7px !important; margin: 0 !important; width: 100%; min-width: 0; flex-wrap: nowrap !important; }
    html body .top-nav-buttons .promo-card-icon { position: relative; flex: 0 0 28px; width: 28px !important; height: 28px !important; border-radius: 9px !important; margin: 0 !important; display: grid !important; place-items: center; background: rgba(255,255,255,.24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
    html body .top-nav-buttons .promo-card-icon svg { width: 16px !important; height: 16px !important; }
    /* число — бейджем в углу иконки, как счётчик у приложения */
    html body .top-nav-buttons .promo-card-stat {
        position: absolute !important; right: calc(100% - 40px) !important; top: 4px !important; left: auto !important; margin: 0 !important; z-index: 2;
        min-width: 17px; height: 16px; padding: 0 4px !important; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center;
        font-size: 9.5px !important; line-height: 1 !important; font-weight: 800 !important; border-radius: 8px !important; font-variant-numeric: tabular-nums;
        color: #fff !important; background: rgba(8,15,35,.62) !important; border: 1px solid rgba(255,255,255,.55) !important;
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 3px 10px -2px rgba(8,15,35,.45) !important; letter-spacing: .1px; }
    html[data-theme="dark"] body .top-nav-buttons .promo-card-stat { color: #fff !important; background: #0b1428 !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.3) !important; }
    html body .top-nav-buttons .promo-card { position: relative !important; }
    html body .top-nav-buttons .promo-card-title {
        flex: 1 1 auto; min-width: 0; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important;
        font-size: 11px !important; line-height: 13px !important; font-weight: 800 !important; max-width: none !important; white-space: normal !important; letter-spacing: -.3px; margin: 0 !important; overflow-wrap: normal; word-break: normal; }
    html body .top-nav-buttons .promo-card-desc { display: none !important; }
    html body .top-nav-buttons .promo-card-link { display: none !important; }
    html body .white-header .header-stat-bubble:not(.stat-bubble-online) { display: none !important; }

    /* ---------- 4. Отступы между блоками ---------- */
    html body .top-boards-viewport { margin-bottom: 8px !important; padding: 12px 10px !important; }
}

/* ---------- 3. «Лидеры платформы» — светлый вариант для светлой темы (телефон и компьютер) ---------- */
@media all {
    html:not([data-theme="dark"]) body .top-boards-viewport {
        background: radial-gradient(90% 60% at 0% 0%, rgba(42,171,238,.09), transparent 70%), radial-gradient(70% 50% at 100% 0%, rgba(16,185,129,.07), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%) !important;
        border: 1px solid #e3ebf5 !important; box-shadow: 0 10px 30px -18px rgba(15,23,42,.35) !important; }
    html:not([data-theme="dark"]) body .top-boards-viewport::before, html:not([data-theme="dark"]) body .top-boards-viewport::after { display: none !important; }
    html:not([data-theme="dark"]) body .tb-eyebrow { background: #eaf6ff !important; border-color: #bfe3fb !important; color: #0b6fb3 !important; box-shadow: none !important; }
    html:not([data-theme="dark"]) body .tb-eyebrow::before { background: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.18) !important; }
    html:not([data-theme="dark"]) body .tb-title { color: #0f172a !important; }
    html:not([data-theme="dark"]) body .tb-desc { color: #52627a !important; }

    html:not([data-theme="dark"]) body .top-boards .board-card { background: #ffffff !important; border: 1px solid #e6edf5 !important; box-shadow: 0 6px 18px -10px rgba(15,23,42,.25) !important; }
    html:not([data-theme="dark"]) body .board-card::after { display: none !important; }
    html:not([data-theme="dark"]) body .board-card .board-title { color: #0f172a !important; border-bottom-color: #eef2f7 !important; }
    html:not([data-theme="dark"]) body .board-card .board-title svg { filter: none !important; }
    html:not([data-theme="dark"]) body .board-card .btn-see-all { color: #0f172a !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
    html:not([data-theme="dark"]) body .board-card .board-item { border-bottom-color: #f1f5f9 !important; }
    html:not([data-theme="dark"]) body .board-card .board-item:nth-child(1) { background: #f7fafd !important; border-color: #e8eef6 !important; }
    html:not([data-theme="dark"]) body .board-card .board-num { color: #334155 !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
    html:not([data-theme="dark"]) body .board-card .board-item:nth-child(1) .board-num { color: #fff !important; background: var(--accent) !important; border-color: var(--accent) !important; }
    html:not([data-theme="dark"]) body .board-card .board-name, html:not([data-theme="dark"]) body .board-card .board-item:nth-child(1) .board-name { color: #0f172a !important; }
    html:not([data-theme="dark"]) body .board-card .board-val { color: #0f172a !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; }
    html:not([data-theme="dark"]) body .board-card .board-item:nth-child(1) .board-val { color: #fff !important; background: var(--accent) !important; border-color: var(--accent) !important; }
    html:not([data-theme="dark"]) body .board-card .avatar-badge { border-color: #fff !important; }
    html:not([data-theme="dark"]) body .board-item .rank-chip { box-shadow: none !important; }
    html:not([data-theme="dark"]) body .board-item .rank-chip.rank-steel { --rank-bg: #f1f5f9; --rank-text: #334155; --rank-icon: #64748b; --rank-border: #e2e8f0; }
    html:not([data-theme="dark"]) body .board-item .rank-chip.rank-silver { --rank-bg: #e8f5fe; --rank-text: #0369a1; --rank-icon: #0ea5e9; --rank-border: #bae2fb; }
    html:not([data-theme="dark"]) body .board-item .rank-chip.rank-gold { --rank-bg: #fff7e0; --rank-text: #a16207; --rank-icon: #f59e0b; --rank-border: #fde49a; }
    html:not([data-theme="dark"]) body .top-boards-dots .dot { background: #cbd5e1 !important; }
    html:not([data-theme="dark"]) body .top-boards-dots .dot.active { background: linear-gradient(90deg, #2AABEE, #10b981) !important; }
}

/* узкие телефоны: шапка уплотняется, но ничего не исчезает */
@media (max-width: 380px) {
    html body .white-header { gap: 5px !important; padding: 0 8px !important; }
    html body .white-header .white-header-title { font-size: 15px !important; }
    html body .white-header .header-logo-png { width: 24px !important; height: 24px !important; }
    html body .white-header .lang-switcher .lang-current, html body .white-header .stat-bubble-online { padding: 0 7px !important; }
    html body .top-nav-buttons .promo-card-title { font-size: 10.5px !important; line-height: 12.5px !important; }
    html body .top-nav-buttons .promo-card { padding: 0 6px 0 7px !important; }
    html body .top-nav-buttons .promo-card-row { gap: 6px !important; }
}

/* =====================================================================
   5. Рейтинг: поиск выделен, переключатель «Подтверждённые» — ровный
   ===================================================================== */
@media (max-width: 992px) {
    /* поиск и «Подтверждённые» — в одну строку, одной высоты */
    html body .tbs-bar .tbs-field { height: 38px !important; border-radius: 12px !important; }
    html body #catalogAjaxWrap .tbs-bar { flex-wrap: nowrap !important; }
    html body #catalogAjaxWrap .tbs-bar .tbs-verified { flex: 0 0 auto !important; }
    html body #catalogAjaxWrap .tbs-bar .tbs { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
    /* поиск — всегда с цветной рамкой и голубой лупой, чтобы его было видно сразу */
    html body .tbs-bar .tbs-field {
        border: 1.5px solid transparent !important;
        background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #2AABEE, #18d2a8) border-box !important;
        box-shadow: 0 6px 18px -8px rgba(20,165,255,.45) !important; }
    html body .tbs-bar .tbs-field .tbs-ico { color: #14a5ff !important; }
    html body .tbs-field input#tbSearchInput::placeholder { color: #64748b !important; font-weight: 600 !important; }
    html[data-theme="dark"] body .tbs-bar .tbs-field { background: linear-gradient(#0f1a2e, #0f1a2e) padding-box, linear-gradient(120deg, #2AABEE, #18d2a8) border-box !important; }
    html[data-theme="dark"] body .tbs-field input#tbSearchInput::placeholder { color: #8ea3bb !important; }

    /* переключатель: 34×20, кружок 16px, ровно по центру */
    html body #catalogAjaxWrap .tbs-verified { height: 38px !important; padding: 0 12px 0 10px !important; gap: 9px !important; border-radius: 12px !important; border-width: 1.5px !important; }
    html body #catalogAjaxWrap .tbs-switch { --sw-w: 34px; --sw-h: 20px; --sw-k: 16px; --sw-p: 2px; width: 34px !important; height: 20px !important; min-width: 34px !important; }
    html body #catalogAjaxWrap .tbs-switch::after { box-shadow: 0 1px 3px rgba(15,23,42,.3) !important; }
}

/* =====================================================================
   6. Фон блока «Рейтинг Telegram-каналов» — как у «Лидеров» (светлая тема; телефон и компьютер)
   ===================================================================== */
html:not([data-theme="dark"]) body .glass-filter-panel {
    background: radial-gradient(90% 60% at 0% 0%, rgba(42,171,238,.09), transparent 70%), radial-gradient(70% 50% at 100% 0%, rgba(16,185,129,.07), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%) !important;
    border-color: #e3ebf5 !important; }

/* =====================================================================
   7. Карточки каналов в таблице (телефон): крупнее ячейки, ярче «золото», закреп в ТОПе выделен
   ===================================================================== */
@media (max-width: 992px) {
    /* у каждой метрики свой лёгкий цвет: подпись цветная, ячейка с тонким оттенком — таблица больше не серая */
    html body .ch-row.grid-all { --t-subs: 37,99,235; --t-view: 124,58,237; --t-err: 13,148,136; --t-iv: 217,119,6; --t-price: 71,85,105; --t-cpm: 5,150,105; }
    html body .ch-row.grid-all > :nth-child(4)  { --t: var(--t-subs); }
    html body .ch-row.grid-all > :nth-child(5)  { --t: var(--t-view); }
    html body .ch-row.grid-all > :nth-child(6)  { --t: var(--t-err); }
    html body .ch-row.grid-all > :nth-child(7)  { --t: var(--t-iv); }
    html body .ch-row.grid-all > :nth-child(9)  { --t: var(--t-price); }
    html body .ch-row.grid-all > :nth-child(10) { --t: var(--t-cpm); }
    /* плоские ячейки: ровный лёгкий оттенок без градиента и «пухлых» теней; цветная только подпись */
    html body .ch-row.grid-all > :is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9), :nth-child(10)):not(.btn-write-wrap):not(.ch-no-price-panel) {
        background: rgba(var(--t), .065) !important; border: 1px solid rgba(var(--t), .13) !important; box-shadow: none !important; border-radius: 10px !important; }
    html body .ch-row.grid-all > :is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9), :nth-child(10)):not(.btn-write-wrap):not(.ch-no-price-panel)::before { color: rgb(var(--t)) !important; opacity: 1; letter-spacing: .2px; }
    html[data-theme="dark"] body .ch-row.grid-all { --t-subs: 96,165,250; --t-view: 167,139,250; --t-err: 45,212,191; --t-iv: 251,191,36; --t-price: 148,163,184; --t-cpm: 52,211,153; }
    html[data-theme="dark"] body .ch-row.grid-all > :is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9), :nth-child(10)):not(.btn-write-wrap):not(.ch-no-price-panel) {
        background: linear-gradient(180deg, rgba(var(--t), .13), rgba(var(--t), .05)) !important; border-color: rgba(var(--t), .25) !important; box-shadow: none !important; }
}

/* «Золотой» тариф владельца — сочнее (светлая тема; телефон и компьютер) */
html:not([data-theme="dark"]) body .ch-wrapper.js-channel-row.tariff-business-yellow:not(.js-top-ch-card) { background: linear-gradient(90deg, #fff4cf 0%, #fffbee 45%, #ffffff 100%) !important; border-left: 3px solid #f5b301 !important; }
html:not([data-theme="dark"]) body .ch-wrapper.js-channel-row.tariff-business-yellow:not(.js-top-ch-card):hover { background: linear-gradient(90deg, #ffefc0 0%, #fff8e4 45%, #ffffff 100%) !important; }
html:not([data-theme="dark"]) body .ch-wrapper.tariff-business-yellow:not(.js-top-ch-card) .ch-title {
    color: #b06b00 !important; background: linear-gradient(90deg, #c27c00, #e9a400 55%, #b86b00) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html:not([data-theme="dark"]) body .ch-wrapper.tariff-business-yellow:not(.js-top-ch-card) .ch-user { color: #b7791f !important; }
html:not([data-theme="dark"]) body .ch-wrapper.tariff-business-yellow:not(.js-top-ch-card) .avatar-wrap .ch-avatar { border-color: #f5b301 !important; box-shadow: 0 0 0 2px rgba(245,179,1,.25) !important; }
html body .ch-wrapper.tariff-business-yellow:not(.js-top-ch-card) .avatar-wrap > .avatar-badge { background: linear-gradient(135deg, #ffd84d, #f5a400) !important; opacity: 1 !important; box-shadow: 0 1px 4px rgba(245,164,0,.45) !important; }
html body .ch-wrapper.tariff-business-yellow .avatar-wrap > .avatar-badge svg { stroke: #fff !important; color: #fff !important; }
html body .ch-wrapper .avatar-wrap > .tariff-designer-badge { opacity: 1 !important; filter: saturate(1.35) brightness(1.08) drop-shadow(0 1px 3px rgba(217,119,6,.55)) !important; }

/* категория канала в карточке — лёгкий фон своего цвета (цвет берётся из значка, msort.js) */
html body .ch-badge.cat-tint, html body .ch-row .ch-names .ch-badge.cat-tint {
    background: rgba(var(--cat-rgb), .10) !important; border: 1px solid rgba(var(--cat-rgb), .24) !important; box-shadow: none !important; }
html body .ch-badge.cat-tint, html body .ch-row .ch-names .ch-badge.cat-tint, html body .ch-badge.cat-tint .ch-badge-label { color: color-mix(in srgb, rgb(var(--cat-rgb)) 70%, #0f172a) !important; font-weight: 700 !important; }
html[data-theme="dark"] body .ch-badge.cat-tint, html[data-theme="dark"] body .ch-row .ch-names .ch-badge.cat-tint { background: rgba(var(--cat-rgb), .16) !important; border-color: rgba(var(--cat-rgb), .32) !important; }
html[data-theme="dark"] body .ch-badge.cat-tint, html[data-theme="dark"] body .ch-row .ch-names .ch-badge.cat-tint, html[data-theme="dark"] body .ch-badge.cat-tint .ch-badge-label { color: color-mix(in srgb, rgb(var(--cat-rgb)) 45%, #ffffff) !important; }
@media (max-width: 992px) {
}

/* =====================================================================
   8. Нижняя панель: крупнее подписи и значки; «Продвижение» — круглая кнопка в цветах сайта
   ===================================================================== */
@media (max-width: 992px) {
    :root { --sb-bnav-h: 58px; }
    html body .sb-bnav { padding: 0 6px env(safe-area-inset-bottom, 0px) !important; }
    html body .sb-bnav a, html body .sb-bnav button { gap: 4px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0; }
    html body .sb-bnav svg { width: 21px !important; height: 21px !important; }
    html body .sb-bnav-me img { width: 23px !important; height: 23px !important; }
    html body .sb-bnav a.on:not(.sb-fab)::before, html body .sb-bnav button.on::before { left: 30% !important; right: 30% !important; height: 3px !important; }

    /* «Продвижение» — круглая кнопка в цветах сайта (голубой → бирюзовый), приподнята над панелью */
    html body .sb-bnav .sb-fab { justify-content: flex-end !important; padding-bottom: 7px !important; color: #7ff3cf !important; }
    html body .sb-bnav .sb-fab i {
        position: absolute !important; top: -20px !important; left: 50% !important; transform: translateX(-50%) !important;
        width: 52px !important; height: 52px !important; border-radius: 50% !important; border: 4px solid #050818 !important; box-sizing: border-box !important;
        display: grid !important; place-items: center;
        background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.45), transparent 42%), linear-gradient(140deg, #2AABEE 0%, #10c9b7 55%, #00e5a0 100%) !important;
        box-shadow: 0 8px 22px -4px rgba(0,229,160,.55), 0 0 0 1px rgba(127,243,207,.35) !important; }
    html body .sb-bnav .sb-fab i svg { width: 22px !important; height: 22px !important; color: #fff !important; stroke-width: 2.2 !important; animation: none !important; filter: drop-shadow(0 1px 1px rgba(0,60,60,.35)); }
    html body .sb-bnav .sb-fab.on i { box-shadow: 0 0 0 3px rgba(0,229,160,.35), 0 8px 24px -2px rgba(0,229,160,.7) !important; }
    html body .sb-bnav .sb-fab span { font-weight: 800 !important; }
    html body .sb-bnav .sb-chat-badge { top: 7px !important; }
}

/* =====================================================================
   9. Карточка канала на телефоне: крупная звезда «в избранное» и плашка рейтинга
   ===================================================================== */
@media (max-width: 992px) {
    html body .ch-row.grid-all > .ch-meta { padding-right: 44px !important; }
    html body .ch-row.grid-all .ch-names .btn-fav {
        width: 34px !important; height: 34px !important; padding: 0 !important; right: 0 !important; border-radius: 11px !important; box-sizing: border-box;
        display: grid !important; place-items: center; background: rgba(245,179,1,.08) !important; border: 1.5px solid rgba(245,179,1,.55) !important;
        transition: transform .15s, background .2s, box-shadow .2s; }
    html body .ch-row.grid-all .ch-names .btn-fav svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: #f5b301 !important; stroke-width: 2 !important; }
    html body .ch-row.grid-all .ch-names .btn-fav.active {
        background: linear-gradient(135deg, #ffd84d 0%, #f5a400 100%) !important; border-color: #f5a400 !important;
        box-shadow: 0 4px 14px -4px rgba(245,164,0,.75), inset 0 1px 0 rgba(255,255,255,.45) !important; }
    html body .ch-row.grid-all .ch-names .btn-fav.active svg { fill: #fff !important; stroke: #fff !important; }
    html body .ch-row.grid-all .ch-names .btn-fav:active { transform: translateY(-50%) scale(.92) !important; }
    html[data-theme="dark"] body .ch-row.grid-all .ch-names .btn-fav:not(.active) { background: rgba(245,179,1,.10) !important; }

    /* рейтинг: крупная плашка с иконкой лиги, цвета лиги сохраняются */
    html body .ch-row.grid-all > .rank-chip {
        height: 30px !important; padding: 0 11px 0 9px !important; gap: 5px !important; border-radius: 10px !important; align-self: center !important;
        font: 800 13.5px/1 Inter, sans-serif !important; letter-spacing: -.2px; border-width: 1.5px !important; }
    html body .ch-row.grid-all > .rank-chip .rank-chip-icon, html body .ch-row.grid-all > .rank-chip .rank-chip-icon svg { width: 15px !important; height: 15px !important; }
    html body .ch-row.grid-all > .rank-chip.rank-diamond { box-shadow: 0 4px 14px -4px rgba(94,157,255,.6) !important; }
}

/* =====================================================================
   10. Закреплённый канал (ТОП) — сдержанно и дорого: изумрудный оттенок слева, тонкая рамка, один цвет на всём
   (раньше — ярко-голубая заливка из catalog.php; золотой тариф внутри закрепа больше не смешивается с зелёным)
   ===================================================================== */
html body .ch-wrapper.js-channel-row.verified.js-top-ch-card, html body .ch-wrapper.js-channel-row.js-top-ch-card {
    background: linear-gradient(90deg, rgba(16,185,129,.13) 0%, rgba(16,185,129,.05) 40%, rgba(255,255,255,0) 100%), #ffffff !important;
    border: 1px solid rgba(16,185,129,.28) !important; border-left: 3px solid #10b981 !important; border-radius: 0 !important;
    box-shadow: 0 6px 18px -12px rgba(16,185,129,.55) !important; }
html body .ch-wrapper.js-channel-row.verified.js-top-ch-card:hover, html body .ch-wrapper.js-channel-row.js-top-ch-card:hover { background: linear-gradient(90deg, rgba(16,185,129,.18) 0%, rgba(16,185,129,.07) 40%, rgba(255,255,255,0) 100%), #ffffff !important; }
html[data-theme="dark"] body .ch-wrapper.js-channel-row.verified.js-top-ch-card, html[data-theme="dark"] body .ch-wrapper.js-channel-row.js-top-ch-card { background: linear-gradient(90deg, rgba(16,185,129,.16) 0%, rgba(16,185,129,.05) 45%, transparent 100%) !important; border-color: rgba(52,211,153,.28) !important; border-left-color: #10b981 !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card .ch-names .ch-title, html body .ch-wrapper.js-top-ch-card .ch-title { color: #065f46 !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="dark"] body .ch-wrapper.js-channel-row.js-top-ch-card .ch-names .ch-title, html[data-theme="dark"] body .ch-wrapper.js-top-ch-card .ch-title { color: #6ee7b7 !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card .ch-names .ch-user { color: #059669 !important; }
html[data-theme="dark"] body .ch-wrapper.js-channel-row.js-top-ch-card .ch-names .ch-user { color: #34d399 !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card .ch-meta .avatar-wrap.verified .ch-avatar, html body .ch-wrapper.js-channel-row.js-top-ch-card .ch-meta .avatar-wrap .ch-avatar { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16,185,129,.18) !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card .ch-meta .avatar-wrap > .avatar-badge { background: #10b981 !important; box-shadow: 0 1px 4px rgba(16,185,129,.5) !important; }
html body .ch-wrapper.js-top-ch-card .pinned-badge {
    background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; border-radius: 6px !important; letter-spacing: .5px;
    box-shadow: 0 2px 8px -2px rgba(5,150,105,.6) !important; }

/* =====================================================================
   11. Без «прыжков» при загрузке (телефон): пока не отработал msort.js, место уже занято так же, как после него
   ===================================================================== */
@media (max-width: 992px) {
    /* категории: сразу видны только 3 строки (как после сворачивания кнопкой «Ещё N») */
    html body .cat-filter-row:not(.cat-fold), html body .tbl-cat-row:not(.cat-fold) { max-height: 116px !important; overflow: hidden !important; }
    /* шапка сортировки: одна высота до и после замены на строку «Сортировка» */
    html body .table-responsive > .tbl-head.grid-all { min-height: 50px !important; box-sizing: border-box !important; }
    html body .table-responsive > .tbl-head.grid-all:not(.msort-on) > span { visibility: hidden !important; }
    /* плитки: название сразу в итоговом размере */
    html body .top-nav-buttons .promo-card-title { contain: layout; }
}

/* =====================================================================
   12. Логотип в шапке: место под него занято сразу, текст «TGRank» не сдвигается, когда картинка догрузилась
   ===================================================================== */
html body .white-header .header-logo-png { aspect-ratio: 1 / 1; object-fit: contain; flex-shrink: 0; }
@media (min-width: 993px) { html body .white-header .header-logo-png { width: 54.7px !important; height: 54.7px !important; } }

/* =====================================================================
   13. Шапка не зависит от стилей страницы: свой шрифт задан сразу (раньше на «Продвижении»/«Тарифах» шрифт
   приходил вместе со стилем страницы, ПОСЛЕ шапки — кнопки на миг были уже, поиск «вытягивался»)
   ===================================================================== */
html body .white-header, html body .white-header input, html body .white-header button { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; }
@media (min-width: 993px) {
    html body .white-header .header-search { flex: 0 1 clamp(220px, 22vw, 340px) !important; width: auto !important; min-width: 150px !important; margin-left: auto !important; margin-right: 12px !important; }
    html body .white-header .header-search input { width: 100% !important; max-width: none !important; }
    html body .white-header .header-stat-bubble { white-space: nowrap; }
}


/* =====================================================================
   14. Шрифты без «перескока» у всех сразу. Файл fonts/inter/inter.css браузеры держат в кэше до 12 часов,
   поэтому те же шрифты объявлены и здесь (этот файл с версией — обновляется сразу): font-display: optional —
   шрифт берётся, только если он уже есть/успел мгновенно, без подмены посреди показа страницы.
   ===================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: optional; src: url('/fonts/inter/inter-v20-cyrillic_cyrillic-ext_latin-900.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional; src: url('/fonts/inter/manrope-v20-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional; src: url('/fonts/inter/manrope-v20-cyrillic_cyrillic-ext_latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional; src: url('/fonts/inter/manrope-v20-cyrillic_cyrillic-ext_latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional; src: url('/fonts/inter/manrope-v20-cyrillic_cyrillic-ext_latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: optional; src: url('/fonts/inter/manrope-v20-cyrillic_cyrillic-ext_latin-800.woff2') format('woff2'); }

/* =====================================================================
   15. Место под полосу прокрутки зарезервировано всегда (компьютер). Пока страница грузится, она короткая —
   полосы нет; догрузилась — полоса появилась и «съела» ~15px ширины, шапка и поиск сдвигались. Теперь ширина постоянная.
   ===================================================================== */
html { scrollbar-gutter: stable; }

/* =====================================================================
   16. Компьютер: отступы между блоками на ~25% меньше
   ===================================================================== */
@media (min-width: 993px) {
    html body > .layout > .main { padding: 6px 9px 9px !important; }
    html body .top-nav-buttons { gap: 9px !important; margin-bottom: 10px !important; }
    html body .discounts-grid, html body .wholesale-grid { gap: 10px !important; }
    html body .main > .table-section-title, html body .main > .top-boards-viewport { margin-bottom: 10px !important; }
}

/* =====================================================================
   17. Телефон: компактнее и ровнее
   ===================================================================== */
@media (max-width: 992px) {
    /* отступы между блоками −30% */
    html body { padding-top: 58px !important; }
    html body .top-nav-buttons { gap: 5px !important; margin: 0 0 6px !important; }
    html body .top-boards-viewport { margin-bottom: 6px !important; padding: 10px 8px !important; }
    html body .top-boards-viewport .tb-intro { margin: 0 0 4px !important; }
    html body .top-boards-clip { padding: 4px 0 6px !important; }
    html body .table-section-title { padding-top: 9px !important; }

    /* плитки: число — прозрачный «стеклянный» бейдж в цвет плитки, а не чёрный кружок */
    html:not([data-theme="dark"]) body .top-nav-buttons .promo-card-stat {
        color: #fff !important; background: rgba(255,255,255,.28) !important; border: 1px solid rgba(255,255,255,.6) !important;
        box-shadow: 0 2px 8px -2px rgba(0,0,0,.25) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0,0,0,.25); }

    /* «Лидеры»: подпись «Топ Telegram-каналов» — под заголовком; всё на 15–20% мельче */
    html body .top-boards-viewport .tb-intro { display: flex !important; flex-direction: column; align-items: center; }
    html body .tb-intro .tb-title { order: 1; font-size: 17px !important; margin: 0 0 6px !important; }
    html body .tb-intro .tb-eyebrow { order: 2; font-size: 10px !important; padding: 4px 10px 4px 8px !important; margin: 0 0 6px !important; }
    html body .tb-intro .tb-desc { order: 3; font-size: 11px !important; }
    html body .board-card .board-title-text { font-size: 12px !important; }
    html body .board-card .board-title-text svg { width: 14px !important; height: 14px !important; }
    html body .board-card .board-item { min-height: 40px !important; padding: 5px 4px !important; gap: 8px !important; }
    html body .board-card .board-num { width: 19px !important; height: 19px !important; min-width: 19px !important; font-size: 9.5px !important; }
    html body .board-card .board-avatar-wrap, html body .board-card .board-avatar { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; }
    html body .board-card .board-name { font-size: 11.5px !important; }
    html body .board-card .board-val, html body .board-card .board-item .rank-chip { font-size: 10.5px !important; padding: 4px 8px !important; }
    html body .board-card .board-item .rank-chip-icon { width: 10px !important; height: 10px !important; }
    html body .top-boards-viewport .tb-cta-btn { font-size: 11.5px !important; padding: 11px 20px !important; }
    /* «Смотреть все» — кнопка в цвет доски */
    html body .board-card .btn-see-all, html:not([data-theme="dark"]) body .board-card .btn-see-all {
        font-size: 10px !important; padding: 6px 11px !important; border-radius: 9px !important;
        color: var(--accent, #2AABEE) !important; background: color-mix(in srgb, var(--accent, #2AABEE) 10%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--accent, #2AABEE) 55%, transparent) !important; }
    html[data-theme="dark"] body .board-card .btn-see-all { background: color-mix(in srgb, var(--accent, #2AABEE) 16%, transparent) !important; }

    /* карточка канала: звезда и рейтинг меньше и в одном ритме с текстом */
    html body .ch-row.grid-all > .ch-meta { padding-right: 34px !important; }
    html body .ch-row.grid-all .ch-names .btn-fav { width: 26px !important; height: 26px !important; border-radius: 8px !important; border-width: 1px !important; }
    html body .ch-row.grid-all .ch-names .btn-fav svg { width: 14px !important; height: 14px !important; }
    /* рейтинг: компактная плашка — значок лиги в кружке + число */
    html body .ch-row.grid-all > .rank-chip {
        height: 24px !important; padding: 0 8px 0 3px !important; gap: 5px !important; border-radius: 12px !important; border-width: 1px !important;
        font: 800 11px/1 Inter, sans-serif !important; letter-spacing: -.1px; }
    html body .ch-row.grid-all > .rank-chip .rank-chip-icon {
        width: 18px !important; height: 18px !important; border-radius: 50%; display: grid !important; place-items: center;
        background: var(--rank-icon, #94a3b8); color: #fff !important; }
    html body .ch-row.grid-all > .rank-chip .rank-chip-icon svg { width: 10px !important; height: 10px !important; stroke: #fff !important; }
    html body .ch-row.grid-all > .rank-chip.rank-diamond .rank-chip-icon { background: rgba(255,255,255,.28); }
}

/* =====================================================================
   18. Компьютер: одинаковый отступ сверху и между блоками на всех страницах
   ===================================================================== */
@media (min-width: 993px) {
    html:root { padding-top: 0 !important; }
    html body { padding-top: 62px !important; }
    html body > .layout { margin-top: 0 !important; padding-top: 0 !important; }
    html body > .layout > .main { padding-top: 8px !important; margin-top: 0 !important; }
    html body > .layout > .main > :first-child { margin-top: 0 !important; }
    html body .main > .top-nav-buttons, html body > .layout > .main > .top-nav-buttons { margin-bottom: 8px !important; }
    html body > .layout > .main > .cab-head { margin: 0 0 8px !important; }
    html body > .layout > .main > .table-section-title, html body > .layout > .main #catalogAjaxWrap > .table-section-title { margin-top: 0 !important; margin-bottom: 8px !important; }
    html body > .layout > .main > .top-nav-buttons { gap: 9px !important; }
    html body > .layout > .main > .premium-block, html body > .layout > .main > .tg-promo-hero { margin-top: 0 !important; margin-bottom: 8px !important; }
    html body .main > .top-boards-viewport { margin-bottom: 8px !important; }
    html body > .layout > .main > .discounts-grid, html body > .layout > .main > .wholesale-grid { margin-top: 0 !important; gap: 9px !important; }
}

/* =====================================================================
   19. Таблица каналов (компьютер и телефон): единый вид
   ===================================================================== */
/* обычные каналы: @ник — спокойный тёмно-серый, а не синий */
html:not([data-theme="dark"]) body .ch-wrapper.js-channel-row:not(.tariff-business-yellow):not(.tariff-premium-purple):not(.js-top-ch-card) .ch-names .ch-user { color: #64748b !important; }
html[data-theme="dark"] body .ch-wrapper.js-channel-row:not(.tariff-business-yellow):not(.tariff-premium-purple):not(.js-top-ch-card) .ch-names .ch-user { color: #94a3b8 !important; }
/* двойная обводка аватарки у всех: цветное кольцо + мягкий ореол того же цвета */
html body .ch-wrapper .avatar-wrap.verified .ch-avatar { box-shadow: 0 0 0 2px rgba(76,246,103,.22) !important; }
html body .ch-wrapper .avatar-wrap.unverified .ch-avatar { box-shadow: 0 0 0 2px rgba(148,163,184,.25) !important; }
html body .ch-wrapper.tariff-business-yellow .avatar-wrap .ch-avatar { box-shadow: 0 0 0 2px rgba(245,179,1,.25) !important; }
html body .ch-wrapper.tariff-premium-purple .avatar-wrap .ch-avatar { box-shadow: 0 0 0 2px rgba(168,85,247,.25) !important; }

/* закреп (ТОП): всё в одном изумрудном цвете — фон, полоса, название, ник, кольцо, галочка; тариф владельца его не перекрашивает */
html:not([data-theme="dark"]) body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card { border-left: 3px solid #10b981 !important; border-color: rgba(16,185,129,.3) !important; border-left-color: #10b981 !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .ch-row .ch-title,
html body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .ch-row .ch-title a { color: #047857 !important; -webkit-text-fill-color: #047857 !important; background: none !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .ch-row .ch-user { color: #059669 !important; }
html[data-theme="dark"] body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .ch-row .ch-title,
html[data-theme="dark"] body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .ch-row .ch-title a { color: #6ee7b7 !important; -webkit-text-fill-color: #6ee7b7 !important; }
html[data-theme="dark"] body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .ch-row .ch-user { color: #34d399 !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .avatar-wrap .ch-avatar { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16,185,129,.25) !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .avatar-wrap .avatar-badge { background: #10b981 !important; background-color: #10b981 !important; }
html body .ch-wrapper.js-channel-row.js-top-ch-card.js-top-ch-card .tariff-designer-badge { filter: hue-rotate(95deg) saturate(1.1) drop-shadow(0 1px 2px rgba(5,150,105,.45)) !important; }

/* =====================================================================
   20. Телефон: плитки, категории, звезда
   ===================================================================== */
@media (max-width: 992px) {
    /* число — маленькая «стеклянная» плашка в правом нижнем углу плитки, иконка свободна */
    html body .top-nav-buttons .promo-card-stat {
        position: absolute !important; left: auto !important; top: auto !important; right: 6px !important; bottom: 5px !important;
        min-width: 0 !important; height: 15px !important; padding: 0 6px !important; font-size: 9.5px !important; border-radius: 8px !important;
        color: #fff !important; background: rgba(255,255,255,.22) !important; border: 1px solid rgba(255,255,255,.45) !important; box-shadow: none !important; text-shadow: none !important; }
    html[data-theme="dark"] body .top-nav-buttons .promo-card-stat { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; }
    html body .top-nav-buttons .promo-card { padding-bottom: 6px !important; }

    /* категории −30%: и на главной, и в каталоге */
    html body .cat-filter-row .cat-check-chip, html body .tbl-cat-row .tbl-cat-chip { height: 24px !important; padding: 0 8px 0 6px !important; gap: 5px !important; border-radius: 8px !important; font-size: 10px !important; }
    html body .cat-filter-row .cat-check-label { font-size: 10px !important; }
    html body .cat-filter-row .cat-check-box, html body .tbl-cat-row .tbl-cat-chip .chip-dot { width: 12px !important; height: 12px !important; border-radius: 4px !important; }
    html body .cat-filter-row .cat-check-box svg, html body .tbl-cat-row .tbl-cat-chip .chip-dot svg { width: 8px !important; height: 8px !important; }
    html body .cat-filter-row .cat-check-count { min-width: 16px !important; height: 14px !important; padding: 0 4px !important; font-size: 8.5px !important; border-radius: 5px !important; }
    html body .cat-filter-row, html body .tbl-cat-row { gap: 5px !important; }
    html body .cat-filter-row:not(.cat-fold), html body .tbl-cat-row:not(.cat-fold) { max-height: 86px !important; }
    .cat-more { height: 24px !important; padding: 0 9px 0 10px !important; font-size: 10px !important; border-radius: 8px !important; }
    .cat-more svg { width: 11px !important; height: 11px !important; }
    /* поиск и «Подтверждённые» — тоже чуть компактнее */
    html body .tbs-bar .tbs-field, html body #catalogAjaxWrap .tbs-verified, html body .tbl-search-wrap #searchInput.tbl-search-input, html body .tbl-search-wrap .tbl-verified-label { height: 34px !important; }
    html body .tbs-bar .tbs-field input, html body .tbs-field input#tbSearchInput, html body .tbl-search-wrap #searchInput.tbl-search-input { font-size: 12px !important; }
    html body #catalogAjaxWrap .tbs-verified .tv-short, html body .tbl-search-wrap .tbl-verified-text::after { font-size: 11.5px !important; }

    /* звезда — под рейтингом в правом столбце, а не поверх него */
    html body .ch-row.grid-all { position: relative !important; }
    html body .ch-row.grid-all > .ch-meta { position: static !important; padding-right: 10px !important; }
    html body .ch-row.grid-all > .rank-chip { align-self: start !important; }
    html body .ch-row.grid-all .ch-names .btn-fav { top: 42px !important; right: 12px !important; transform: none !important; }
    html body .ch-row.grid-all .ch-names .btn-fav:active { transform: scale(.92) !important; }
}