/* ─────────────────────────────────────────────────────────────────────────
 * mobile.css — comprehensive phone-friendly overrides for landing + cabinet.
 * Loaded LAST (after styles.css / app.css / common.css) so cascade wins.
 *
 * Goals:
 *   • Никакого горизонтального скролла на телефоне.
 *   • Все кликабельные элементы (кнопки, чипы, табы, дропдауны) ≥ 40×40px.
 *   • Inputs ≥ 16px font-size, чтобы iOS Safari не зумил при фокусе.
 *   • Хедер не съедает экран, не громоздится в две строки на 320–414px.
 *   • Боттом-табы реально кликабельны и не перекрывают контент.
 *   • Модалки — bottom-sheet с прокруткой, кнопка закрытия в зоне большого пальца.
 *
 * Breakpoints used (matches existing app.css / styles.css conventions):
 *   768px — основной перелом desktop → mobile.
 *   480px — узкий телефон (iPhone SE 1, Galaxy A10).
 *   380px — ультра-узкий (старые Android, маленькие телефоны).
 * ───────────────────────────────────────────────────────────────────────── */

/* ─── 0. Universal safety net ──────────────────────────────────────────── */

html,
body {
  max-width: 100%;
  overflow-x: clip;
  /* `clip` рубит горизонтальный скролл, но не ломает sticky внутри,
     в отличие от `hidden`. Падает на старые браузеры — fallback ниже. */
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

@media (max-width: 768px) {
  /* фикс «100vw + scrollbar» — у нас scrollbar не рисуется, но мобильные
     браузеры всё равно мерят 100vw без учёта safe-area, что даёт overflow */
  .app-aurora,
  .landing-bg-canvas,
  .tools-aurora,
  .landing-cursor-trail,
  .bg-grain,
  .app-bg-particles {
    width: 100%;
  }

  /* Чтобы flex/grid дети могли усыхать, не выталкивая родителя */
  .container,
  .app-header-inner,
  .topbar-inner,
  .hero-grid,
  .section-top,
  .feed-toolbar,
  .reports-toolbar,
  .owners-toolbar,
  .filters-content {
    min-width: 0;
  }

  /* На iPhone адрес-бар скрывается → используем dvh, чтобы фон/aurora
     не выскакивал за экран при скролле. */
  body { min-height: 100dvh; }
}

/* ─── 1. Скип-линк не должен прятаться за стики-хедер ──────────────────── */
@media (max-width: 768px) {
  .skip-link:focus-visible {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 12px;
  }
}

/* ─── 2. LANDING: топбар (index.html, tools.html) ──────────────────────── */
@media (max-width: 720px) {
  /* По умолчанию у нас уже flex-wrap, но логотип + дропдауны + login кнопка
     + nav в 6 ссылок съезжают криво. Перекомпонуем: верхняя строка =
     логотип + язык + login. Тема и nav уходят отдельной строкой. */
  .topbar-inner {
    padding: 10px 0;
    gap: 8px 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* container ужмём — 16px на сторону */
  .topbar-inner.container,
  .container {
    width: min(1100px, calc(100% - 24px));
  }

  .logo {
    font-size: 16px;
    gap: 8px;
  }

  /* topbar-actions: убираем у theme dropdown текст-лейбл, оставляя только
     swatch + chevron. У lang dropdown оставляем «RU» + chevron. */
  .topbar-actions {
    gap: 6px;
    flex-wrap: nowrap;
    margin-left: auto;
  }
  .topbar-dropdown-label,
  .lang-dropdown-globe {
    display: none;
  }
  .topbar-dropdown-trigger {
    min-height: 38px;
    padding: 0 8px;
    font-size: 12px;
  }
  .theme-dropdown-trigger {
    padding-left: 8px;
    padding-right: 8px;
  }
  .lang-dropdown-trigger {
    padding-left: 10px;
    padding-right: 8px;
    gap: 6px;
  }

  /* Дропдаун-панели на телефоне не должны быть шире вьюпорта */
  .topbar-dropdown-panel {
    min-width: 0;
    width: min(220px, calc(100vw - 24px));
    right: 0;
    left: auto;
    max-height: 70vh;
    overflow-y: auto;
  }
  .lang-dropdown-panel { width: min(200px, calc(100vw - 24px)); }

  /* Кнопка «Войти» в хедере — крупнее и без переноса */
  .landing-auth-link {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    min-height: 38px;
  }

  /* Сам .nav уже скроллится горизонтально (см. landing-critical.css:3165).
     Подправим тач-таргеты и ритм. */
  .nav {
    order: 99; /* в конец .topbar-inner */
    margin-top: 2px;
    padding: 4px 4px 6px;
  }
  .nav a {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .topbar-inner.container,
  .container {
    width: min(1100px, calc(100% - 16px));
  }
  .logo { font-size: 15px; }
  .landing-auth-link { padding: 7px 12px; font-size: 12px; }
  /* Сглаживаем гэп когда экран совсем крошечный */
  .topbar-actions { gap: 4px; }
}

/* ─── 3. LANDING: hero / CTA ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero {
    padding: 36px 0 24px;
  }
  .hero-title {
    font-size: clamp(28px, 8.5vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .hero-sub {
    font-size: 15px;
    line-height: 1.55;
  }
  .hero-brand-row { margin-bottom: 14px; }
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .hero-actions .btn,
  .hero-actions .btn-hero-feed,
  .hero-actions .btn-hero-tg,
  .hero-actions .btn-hero-how {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    min-height: 48px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .hero { padding: 28px 0 16px; }
  .hero-title { font-size: clamp(26px, 9vw, 36px); }
  .hero-sub { font-size: 14px; }
  /* hero-proof в две колонки уже из landing-critical.css; для ультра-узких
     экранов плотнее. */
  .hero-proof {
    gap: 10px 14px;
    padding-top: 16px;
    margin-top: 18px;
  }
  .hero-proof-item strong {
    font-size: clamp(20px, 6vw, 24px);
  }
  .hero-proof-item span { font-size: 12px; }
}

/* ─── 4. LANDING: общие правила кнопок и плотности секций ──────────────── */
@media (max-width: 480px) {
  .btn {
    padding: 11px 16px;
    font-size: 14px;
    min-height: 44px;
  }
  .btn-sm {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 38px;
  }
  /* секции на лендинге дышат тише */
  section { padding: 40px 0; }
}

/* ─── 5. APP HEADER (app.html кабинет) ─────────────────────────────────── */
@media (max-width: 768px) {
  /* В кабинете header содержит 8 элементов справа — на телефоне это
     перетекает в две строки. Скрываем второстепенное, оставляя:
     [logo] [lang] [bell] [avatar]. */
  .app-header-inner {
    padding: 0 12px;
    gap: 8px;
  }
  .app-header { height: 56px; }
  :root { --header-h: 56px; }

  .logo {
    font-size: 15px;
    gap: 8px;
  }

  /* Прячем некритичные индикаторы в шапке — они дублируются логикой
     внутри секций (sync via toasts; live pulse не нужен на маленьком
     экране — пользователь и так видит ленту). */
  .app-user-area .sync-indicator,
  .app-user-area .app-live-pulse,
  .app-user-area #app-tour-btn {
    display: none;
  }

  .app-user-area {
    gap: 6px;
  }
  .app-header-topbar {
    gap: 4px;
  }

  /* Тема и язык — без текстовых лейблов, оставляем визуальные индикаторы.
     В кабинете .theme-dropdown-swatch и шеврон — единственные элементы внутри
     триггера, поэтому их размеры должны быть явные, иначе кнопка схлопывается. */
  .app-header-topbar .topbar-dropdown-trigger {
    min-height: 36px;
    min-width: 36px;
    padding: 0 8px;
    gap: 4px;
  }
  .app-header-topbar .topbar-dropdown-label {
    display: none;
  }
  .app-header-topbar .lang-dropdown-globe {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .app-header-topbar .topbar-dropdown-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.7;
  }
  .app-header-topbar .lang-dropdown-code {
    min-width: 1.4em;
    text-align: center;
    font-size: 12px;
  }
  .app-header-topbar .theme-dropdown-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    flex-shrink: 0;
  }

  /* notif bell */
  .notif-bell {
    width: 38px;
    height: 38px;
    padding: 0;
  }
  .notif-bell-badge {
    transform: translate(2px, -4px);
  }

  /* avatar — фикс размер, не растягиваем */
  .app-user-avatar {
    width: 36px;
    height: 36px;
  }
  .app-user-meta { display: none; }

  /* Notif center — позиционируем относительно вьюпорта */
  .notif-center {
    position: fixed;
    top: calc(var(--header-h, 56px) + 6px + env(safe-area-inset-top, 0px));
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }
  /* User dropdown (Settings / Logout) */
  .user-dropdown {
    position: fixed;
    top: calc(var(--header-h, 56px) + 6px + env(safe-area-inset-top, 0px));
    right: 8px;
    left: auto;
    width: min(240px, calc(100vw - 16px));
  }

  /* Safe-area inset под чёлку iOS */
  .app-header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--header-h, 56px) + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 380px) {
  .app-header-inner { padding: 0 10px; gap: 6px; }
  .logo { font-size: 14px; }
}

/* Galaxy Fold / iPhone 5 (≤ 340px) — последняя стадия: прячем тему,
   чтобы оставить только язык + bell + avatar в правой части хедера. */
@media (max-width: 340px) {
  .app-header-topbar [data-dropdown="theme"] {
    display: none;
  }
}

/* ─── 6. APP main content padding (учитываем bottom-tabs + safe-area) ──── */
@media (max-width: 768px) {
  .app-main {
    padding: 16px 14px calc(20px + var(--bottom-h, 68px) + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 480px) {
  .app-main {
    padding: 14px 12px calc(20px + var(--bottom-h, 68px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── 7. APP bottom tabs — реально кликабельные ────────────────────────── */
@media (max-width: 768px) {
  .app-bottom-tabs {
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 2px;
  }
  .btab {
    min-height: 52px;
    padding: 6px 2px;
    gap: 2px;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    word-break: keep-all;
  }
  .btab svg { width: 22px; height: 22px; }
  /* Когда 6 табов (signals/reports/portfolio/filters/admin/settings) — текст
     слишком плотный. Скрываем самую длинную надпись на узких. */
}
@media (max-width: 380px) {
  .btab { font-size: 9px; padding: 5px 1px; }
  .btab svg { width: 20px; height: 20px; }
}

/* ─── 8. Section-top: заголовок + кнопка обновить ──────────────────────── */
@media (max-width: 768px) {
  .section-top {
    gap: 10px;
    margin-bottom: 14px;
  }
  .section-top h1,
  #signals-title,
  #reports-title,
  #filters-title,
  #admin-title {
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.15;
  }
  .section-subtitle {
    font-size: 13px;
    margin-top: 6px;
  }
  .section-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .section-actions .btn { flex: 1 1 auto; }
}

/* ─── 9. Feed toolbar (chips + search) ─────────────────────────────────── */
@media (max-width: 768px) {
  .feed-toolbar {
    /* На большом экране sticky под хедером выглядит круто. На телефоне это
       приклеивает 3 ряда чипов поверх контента и съедает 30% экрана. */
    position: relative;
    top: auto;
    padding: 10px 12px;
    border-radius: 12px;
    gap: 8px 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .feed-toolbar-chips-stack {
    width: 100%;
    gap: 6px;
  }
  .feed-toolbar-actions {
    width: 100%;
  }
  .feed-toolbar-search {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
  }
  .feed-toolbar-search-input {
    font-size: 16px; /* iOS не зумит при ≥ 16px */
  }
  .feed-toolbar-chips {
    /* Делаем горизонтальный скролл-ряд вместо обёртывания, чтобы кнопки
       не плясали в 3 строки */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 3px;
  }
  .feed-toolbar-chips::-webkit-scrollbar { display: none; }
  .feed-toolbar-chips .chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 12px;
    min-height: 32px;
  }
}

/* ─── 10. Сигналы — карточки и сетки ───────────────────────────────────── */
@media (max-width: 768px) {
  /* Базовая сетка карточек — одна колонка (уже есть в app.css:6627), но
     для ясности подтверждаем + ужмём паддинги */
  .signals-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .signal-card {
    padding: 16px 14px;
    border-radius: 14px;
  }
  .signal-card.signal-card--v2 {
    padding: 14px 12px;
  }
  /* Карточка с превью скина — арт не должен быть огромным */
  .signal-card.signal-card--v2 .sc-art,
  .signal-card .sc-art {
    max-width: 100%;
  }
  /* Owners-toolbar тоже в столбик */
  .owners-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .owners-toolbar-search {
    width: 100%;
  }
  .owners-toolbar-search-input {
    font-size: 16px;
  }
  .owners-toolbar-meta {
    justify-content: space-between;
  }
}

/* ─── 11. Отчёты (reports-toolbar / tables) ────────────────────────────── */
@media (max-width: 768px) {
  .reports-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .reports-toolbar-tabs {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  /* Перебиваем существующий `#section-reports .reports-toolbar .report-tabs`
     (специфичность #id+.cls+.cls). Используем такую же специфичность. */
  #section-reports .reports-toolbar .report-tabs,
  #section-reports .reports-toolbar .report-views,
  .reports-toolbar-segment {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 auto;
    align-self: stretch;
  }
  #section-reports .reports-toolbar .report-tabs .rtab,
  #section-reports .reports-toolbar .report-views .rview,
  .reports-toolbar-segment .rtab,
  .reports-toolbar-segment .rview {
    flex: 1 1 0 !important;
    min-height: 38px;
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
  }
  .reports-toolbar-meta {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
  }
  .reports-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
  }
  .reports-toolbar-btn {
    flex: 1 1 auto;
    min-height: 36px;
    font-size: 12px;
    padding: 7px 10px;
  }

  /* Таблицы отчётов — скролл с touch-momentum + видимый рамкой */
  .reports-hot-table-scroll,
  .table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  .data-table {
    font-size: 12px;
    min-width: 100%;
  }
  .data-table th,
  .data-table td {
    padding: 10px 10px;
    white-space: nowrap;
  }
}

/* ─── 12. Фильтры (filters page) ───────────────────────────────────────── */
@media (max-width: 768px) {
  .filters-content {
    gap: 12px;
  }
  .filter-overview,
  .filter-hero,
  .filter-summary-card {
    padding: 14px;
    border-radius: 14px;
  }
  /* Категорийные табы (Normal/StatTrak/Souvenir) — flex/scroll */
  .filter-category-tabs,
  .filter-tabs,
  .filter-preset-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .filter-category-tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .filter-preset-tabs::-webkit-scrollbar { display: none; }

  .filter-category-tab,
  .filter-tab,
  .filter-preset-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Preset-сетка — одна колонка на ультра-узких; auto-fit на 480-768 */
  .filter-preset-grid,
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Кнопки в строках фильтров */
  .filter-row,
  .filter-row--preset {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .filter-row .linked-action,
  .filter-row__action {
    flex: 1 1 auto;
    min-height: 36px;
  }
}

/* ─── 13. Портфолио ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* React-render внутри — но контейнер можно подкрутить */
  #portfolio-content {
    width: 100%;
    overflow-x: hidden;
  }
  .pf-figma-table-wrap,
  .pf-figma-positions-list {
    border-radius: 14px;
  }
  .pf-holdings-header--figma {
    padding: 12px 14px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .pf-search--figma {
    width: 100%;
  }
  .pf-search--figma input {
    font-size: 16px;
    min-height: 40px;
  }
  /* Сумма-блок 3-колонки → 1-колонка наследуется (см. app.css:6702) */
  .pf-stat-card--figma {
    padding: 14px 16px;
  }
  .pf-stat-value--figma {
    font-size: 20px;
  }
}

/* ─── 14. Профиль / Настройки / Админка ────────────────────────────────── */
@media (max-width: 768px) {
  .profile-content,
  .settings-content,
  .admin-content {
    gap: 12px;
  }
  /* Plan-карточка с тарифом */
  .plan-card,
  .plan-card-section,
  .account-card,
  .settings-card,
  .admin-card,
  .billing-card {
    padding: 16px 14px;
    border-radius: 14px;
  }
  /* Обычные двух-колоночные раскладки внутри секций */
  .settings-grid,
  .profile-grid,
  .admin-grid,
  .billing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  /* Linked-аккаунты (Telegram/Steam/Discord) */
  .linked-account {
    flex-wrap: wrap;
    gap: 8px;
  }
  .linked-account .linked-action {
    flex: 1 1 100%;
    min-height: 40px;
  }
}

/* ─── 15. Формы и инпуты — анти-зум iOS + крупные таргеты ──────────────── */
@media (max-width: 768px) {
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px; /* iOS не зумит */
    min-height: 44px;
    border-radius: 10px;
  }
  textarea {
    min-height: 88px;
  }
  .form-group {
    margin-bottom: 14px;
  }
  .form-label {
    font-size: 13px;
  }
}

/* ─── 16. Модалки (signal/owner/tx/pos/confirm/plan) ────────────────────── */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-overlay--center { align-items: center; padding: 12px; }

  .modal-panel {
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .modal-overlay--center .modal-panel,
  .modal-panel--centered,
  .modal-panel--sm,
  .modal-panel--xs {
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    max-height: 88dvh;
  }
  .modal-panel--xs { max-width: 380px; }

  .modal-close {
    width: 38px;
    height: 38px;
    top: 12px;
    right: 12px;
    font-size: 22px;
  }

  /* В формах модалок 2-колоночные грид-блоки разворачиваем */
  #tx-modal-body div[style*="grid-template-columns:1fr 1fr"],
  #tx-modal-body div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .modal-panel {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ─── 17. Баннеры (free / expired / sync / error) ──────────────────────── */
@media (max-width: 768px) {
  .app-banner {
    padding: 10px 14px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .app-banner span {
    flex: 1 1 100%;
    order: 1;
  }
  .app-banner svg {
    order: 0;
  }
  .banner-action {
    order: 2;
    margin-left: auto;
    min-height: 32px;
    padding: 6px 12px;
  }
  .banner-close {
    order: 3;
    min-width: 32px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 22px;
    line-height: 1;
  }
}

/* ─── 18. Command palette (Cmd-K) ──────────────────────────────────────── */
@media (max-width: 768px) {
  .cmd-palette-window {
    width: calc(100% - 16px);
    max-width: 100%;
    margin: 8px;
    border-radius: 14px;
  }
  .cmd-palette-input { font-size: 16px; }
}

/* ─── 19. Tour FAB / help fab — над bottom-tabs ───────────────────────── */
@media (max-width: 768px) {
  .cb-tour-fab,
  .footer-help-fab {
    bottom: calc(var(--bottom-h, 68px) + 12px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

/* ─── 20. Cookieyes баннер — не закрывает bottom-tabs ──────────────────── */
@media (max-width: 768px) {
  .cky-consent-container,
  .cky-modal {
    z-index: 100; /* ниже наших табов (z=90), но всё ещё поверх контента */
  }
  /* Когда cookieyes показан, поднимем bottom-tabs выше его панели */
  body.cky-consent-shown .app-bottom-tabs {
    bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  }
}

/* ─── 21. Tools page (tools.html) — фильтры и каталог ──────────────────── */
@media (max-width: 768px) {
  .tools-shell,
  .tools-layout,
  .tools-page {
    padding-left: 14px;
    padding-right: 14px;
  }
  .tools-page__header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tools-page__controls,
  .tools-page__search-wrap {
    width: 100%;
  }
  .tools-page__search-wrap input { font-size: 16px; min-height: 42px; }
  .tools-filters-drawer__toggle {
    width: 100%;
    min-height: 42px;
  }
  /* Каталог карточек — одна колонка */
  .tools-catalog,
  .tools-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}

/* ─── 22. Шер-страницы (share.html / report-share.html) ───────────────── */
@media (max-width: 768px) {
  .pf-share-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }
  .pf-share-header .topbar-actions { justify-content: flex-end; }
  .report-share-page,
  .share-page {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ─── 23. Анти-горизонтальный-скролл для самых частых нарушителей ─────── */
@media (max-width: 768px) {
  pre, code, .cmd code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }
  img, video, canvas, iframe, svg.fluid {
    max-width: 100%;
    height: auto;
  }
  /* Длинные строки (steamid, скин-урлы) ломаем */
  .signal-card,
  .signal-card * ,
  .filter-row,
  .filter-row *,
  .linked-account,
  .linked-account *,
  .pf-figma-positions-list * {
    overflow-wrap: anywhere;
  }
  /* Кроме счетчиков и таб-нав */
  .feed-toolbar-chips .chip,
  .btab,
  .reports-toolbar-segment .rtab,
  .reports-toolbar-segment .rview {
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

/* ─── 24. Финальный сейфти-нет: всё что лежит под body, не вылезает ────── */
@media (max-width: 768px) {
  main, section, article, header, footer, nav, aside,
  .app-section, .app-main, .container {
    max-width: 100%;
  }

  /* Лендинг-секции с абсолютными декорациями (орбита, glow, ticker) рубят
     overflow, чтобы декор не растягивал body.scrollWidth */
  .hero,
  .landing-hero,
  .market-ticker-section,
  .market-ticker-bar,
  .feature-tiles,
  .feature-tile,
  .feature-tile-center,
  .signal-demo-shell,
  .audience-grid,
  .pillars-grid,
  .pricing-grid,
  .workflow-grid,
  .built-grid,
  .cta-inner {
    overflow: clip;
  }
  @supports not (overflow: clip) {
    .hero, .landing-hero, .market-ticker-section, .market-ticker-bar,
    .feature-tiles, .feature-tile, .feature-tile-center,
    .signal-demo-shell, .audience-grid, .pillars-grid,
    .pricing-grid, .workflow-grid, .built-grid, .cta-inner {
      overflow: hidden;
    }
  }

  /* Тяжёлая декоративная орбита hero — на телефоне просто отвлекает и
     вылезает за пределы экрана. Скрываем. */
  .tools-entry-orbit--landing-hero {
    display: none !important;
  }

  /* bg-glow остаются (position:fixed), но обрезаем их до вьюпорта */
  .bg-glow,
  .bg-glow--1,
  .bg-glow--2,
  .bg-glow--3 {
    max-width: 100vw;
    max-height: 100vh;
  }
}