/* =====================================================================
   mobile.css — главная и общие блоки на телефоне (22.10.2026)
   1) Шапка: выше (52px), крупнее логотип и кнопки, без мелкой подписи; поиск занимает оставшееся место.
   2) Три плитки сверху (Каталог / Скидки / Опт): иконка, число, название — без нечитаемого мелкого текста.
   3) «Лидеры платформы» в светлой теме — светлый блок (в тёмной теме остаётся как был).
   4) Ровные отступы между блоками.
   На компьютере ничего не меняется.
   ===================================================================== */
@media (max-width: 992px) {
    /* ---------- 1. Шапка ---------- */
    /* шапка стала на 17px выше (35 → 52) — сдвигаем содержимое на столько же, сохраняя отступы каждой страницы */
    html body > .layout { margin-top: 17px !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. Три плитки сверху ---------- */
    html body .top-nav-buttons { gap: 8px !important; margin: 4px 0 10px !important; }
    html body .top-nav-buttons .promo-card {
        display: flex !important; flex-direction: column !important; justify-content: space-between; gap: 10px;
        min-height: 92px; padding: 11px 10px 12px !important; border-radius: 16px !important; box-sizing: border-box; }
    html body .top-nav-buttons .promo-card-row {
        display: grid !important; grid-template-columns: auto 1fr !important; grid-template-areas: "ic st" "tt tt" !important;
        row-gap: 10px !important; column-gap: 6px !important; margin: 0 !important; align-items: center !important; }
    html body .top-nav-buttons .promo-card-icon { grid-area: ic; width: 30px !important; height: 30px !important; border-radius: 10px !important; }
    html body .top-nav-buttons .promo-card-icon svg { width: 16px !important; height: 16px !important; }
    html body .top-nav-buttons .promo-card-stat { grid-area: st; justify-self: end !important; align-self: center !important; font-size: 11px !important; line-height: 1 !important; padding: 4px 8px !important; border-radius: 9px !important; font-weight: 800 !important; }
    html body .top-nav-buttons .promo-card-title { grid-area: tt; font-size: 12.5px !important; line-height: 1.2 !important; font-weight: 800 !important; max-width: none !important; white-space: normal !important; letter-spacing: -.01em; }
    html body .top-nav-buttons .promo-card-desc, html body .top-nav-buttons .promo-card-link { display: none !important; }

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

/* ---------- 3. «Лидеры платформы» — светлый вариант для светлой темы ---------- */
@media (max-width: 992px) {
    html:not([data-theme="dark"]) body .top-boards-viewport {
        background: radial-gradient(120% 70% at 50% 0%, rgba(42,171,238,.14), transparent 65%), linear-gradient(180deg, #ffffff 0%, #f2f7fd 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: 11.5px !important; }
}