/* ============================================================
   MUISE — мобильный слой (подключается ПОСЛЕДНИМ из CSS).
   Системная адаптация. Десктоп (>820px) не трогаем.
   На узких экранах:
   • боковой rail → нижний таб-бар; баланс/аватар → верхний хедер
   • ВСЕ корневые контейнеры (.content, .studio-main, .lib) —
     на всю ширину, со скроллом страницей и отступами под хедер/таб-бар
   • студии, фотосет, библиотека, модалки, поповеры — под палец
   Модалки (z200) и поповеры (z120) выше таб-бара/хедера (z90).
   ============================================================ */

@media (max-width: 820px) {
  /* десктопный body{overflow:hidden} блокировал вертикальный скролл — возвращаем его.
     overscroll-behavior + max-width: убираем сдвиг всего экрана вбок «в пустоту» */
  html { height: auto; overflow-x: hidden; overscroll-behavior-x: none; }
  body { display: block; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100vh; max-width: 100vw; overscroll-behavior-x: none; }
  .content, .studio-main, .lib { max-width: 100vw; }

  /* ---------- КОРНЕВЫЕ КОНТЕЙНЕРЫ ВСЕХ СТРАНИЦ ----------
     Главная/фотосет — .content, студии — .studio-main, библиотека — .lib.
     Все: высота по контенту, скролл страницей, отступы под фикс хедер+таб-бар. */
  .content, .studio-main, .lib {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    padding-top: 60px;     /* верхний хедер 56 + воздух */
    padding-bottom: 108px;  /* парящий нижний бар (70 + отрыв 14 + воздух) */
  }
  .lib { padding-left: 16px; padding-right: 16px; }

  /* ---------- RAIL → нижний таб-бар ---------- */
  .rail {
    position: fixed; left: 12px; right: 12px; bottom: 14px;
    width: auto; height: 70px;
    flex-direction: row; align-items: stretch;
    padding: 0 4px; gap: 0;
    border: 1px solid var(--mrail-glass-border); border-top: 1px solid var(--mrail-glass-border);
    border-radius: 22px;
    background: var(--mrail-glass-bg);
    -webkit-backdrop-filter: blur(var(--mrail-glass-blur));
    backdrop-filter: blur(var(--mrail-glass-blur));
    box-shadow: 0 14px 40px -14px rgba(0,0,0,.7);
    color: var(--mrail-ink);
    z-index: 90;
  }
  /* Тёмное матовое стекло вместо светлого (по умолчанию мобилка была светлой —
     плохо читалась). Матовость = высокая непрозрачность + мягкий блюр. */
  .rail {
    background: rgba(18,19,23,.88) !important;
    border-color: rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
    backdrop-filter: blur(20px) saturate(1.1) !important;
    color: #f4f4f6 !important;
  }
  .rail .logo, .rail .rail-divider { display: none; }
  .content { padding-left: 0 !important; }
  .content > .hero, .content > .ps-banner { margin-left: 0 !important; }
  .content > .hero > .hero-inner { padding-left: 32px !important; padding-right: 32px !important; }
  .content > .ps-banner > .ps-banner-inner { margin-left: 0 !important; }
  .rail-scroll {
    flex-direction: row; align-items: stretch; justify-content: space-around;
    width: 100%; height: 100%; gap: 0; overflow: visible; padding: 0;
  }
  /* Мобильный бар строит shell.js: ровно 4 пункта .mnav
     (Главная · История · Создать · Комьюнити). Спец-правил display/order
     под старый набор из 5 пунктов больше не нужно. */
  .nav-item {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px;
    padding: 8px 2px 9px; border-radius: 14px; position: relative;
    color: var(--mrail-ink-2);
  }
  /* Единый слот под иконку для всех 4 пунктов — тогда подписи на одном уровне */
  .nav-item > svg { width: 26px !important; height: 26px !important; }
  .nav-item span {
    font-size: 11px; font-weight: 600; line-height: 1; height: 12px;
    display: flex; align-items: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .nav-item.active { background: transparent; color: var(--mrail-active-ink); }
  /* «Создать» — основное действие: акцентный кружок; фикс. высота слота = как у иконок 26px,
     чтобы подпись не «плясала» относительно остальных */
  .rail .nav-item.mnav-create > svg {
    color: var(--accent-ink, #1a1f05) !important;
    background: #ffffff; border-radius: 11px;
    padding: 4px; width: 30px !important; height: 30px !important;
    margin-top: -2px;
    box-shadow: 0 6px 16px -6px rgba(209,254,23,.6);
  }
  .rail .nav-item.mnav-create span { color: var(--accent, #d1fe17) !important; }
  /* На тёмном матовом стекле: активный — лайм, неактивный — светло-серый (читаемость) */
  .rail .nav-item { color: rgba(255,255,255,.66) !important; }
  .rail .nav-item svg { color: rgba(255,255,255,.66) !important; }
  .rail .nav-item.active { color: var(--accent, #d1fe17) !important; }
  .rail .nav-item.active svg { color: var(--accent, #d1fe17) !important; }
  .badge-new { top: 4px; right: 18%; }

  /* ---------- RAIL-BOTTOM → верхний хедер ---------- */
  .rail-bottom {
    position: fixed; left: 0; right: 0; top: 0;
    width: 100%; height: 56px;
    flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 9px; padding: 0 14px;
    background: var(--bg-rail); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px -18px rgba(0,0,0,.75);
    z-index: 90;
  }
  .rail-bottom::before {
    content: "мусс"; margin-right: auto;
    display: inline-flex; align-items: center;
    font-family: var(--font-display, "Space Grotesk", sans-serif);
    font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
    color: #ffffff; line-height: 1;
  }
  .rail-authed { flex-direction: row; align-items: center; gap: 9px; }
  .rail-bottom .start-btn { width: auto; padding: 9px 22px; border-radius: 12px; }

  /* ---------- ГЛАВНАЯ ---------- */
  .hero { height: auto; min-height: 640px; padding: 44px 18px 48px; justify-content: center; }
  .hero-inner { max-width: 100%; }
  .hero h1 { font-size: clamp(24px, 6.6vw, 40px); margin: 0 0 36px; }
  .hero.generating { min-height: calc(100vh - 136px); justify-content: flex-end; }

  .prompt-bar { width: 100%; }
  .pb-top { flex-wrap: wrap; }
  .pb-controls {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pb-controls::-webkit-scrollbar { display: none; }
  .pb-actions { flex-wrap: wrap; gap: 8px; }
  .pb-right { margin-left: 0; }
  .tools { flex-wrap: wrap; gap: 8px; justify-content: center; }

  .section { padding-left: 16px; padding-right: 16px; }
  .section h2 { font-size: 22px; }
  .masonry { column-count: 2 !important; }
  .gen-results:not(.single) { grid-template-columns: 1fr; }
  .gen-msg { max-width: 86%; }

  /* ---------- СТУДИИ (Фото/Видео) ---------- */
  .studio-main { flex-direction: column; overflow-x: hidden; }
  .studio-chat { height: auto; width: 100%; min-height: 0; }
  .studio-topbar { padding: 14px 16px 10px; }
  .studio-topbar h1 { font-size: 18px; }
  /* лента — по контенту (не тянуть flex:1, иначе пустая чёрная область во весь экран) */
  .studio-feed {
    flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
    overflow: visible !important; padding: 10px 16px 16px !important;
  }
  .studio-empty { height: auto !important; padding: 22px 8px !important; }
  .studio-empty h2 { font-size: 21px !important; white-space: normal !important; }
  .studio-empty p { font-size: 13.5px !important; }
  .settings-panel {
    width: 100% !important; flex: 0 0 auto !important; height: auto !important;
    border-left: 0 !important; border-top: 1px solid var(--line);
  }
  .composer-wrap { padding: 12px 14px 18px !important; }
  .composer { width: 100%; }
  .dim-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .qual-grid { grid-template-columns: repeat(4, 1fr); }

  /* ---------- ФОТОСЕТ (на .content) ---------- */
  .ps-banner { padding-left: 16px; padding-right: 16px; }
  .ps-banner h1 { font-size: clamp(26px, 8vw, 40px); }
  .ps-bar { width: 100%; }

  /* ---------- БИБЛИОТЕКА (.lib) ---------- */
  .lib-head h1 { font-size: 26px; }
  .lib-tabs { overflow-x: auto; scrollbar-width: none; }
  .lib-tabs::-webkit-scrollbar { display: none; }

  /* ---------- МОДАЛКИ → нижние шторки (z200 поверх) ---------- */
  .sheet-backdrop { align-items: flex-end; }
  .sheet { width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; max-height: 90vh; }
  .auth-wrap { padding: 30px 20px 26px; max-height: 90vh; }

  /* ---------- ПОПОВЕР профиля/«ещё»: сверху справа, под иконкой (п7) ---------- */
  .pop {
    position: fixed !important;
    top: 64px !important; right: 10px !important;
    left: auto !important; bottom: auto !important;
    width: min(290px, calc(100vw - 20px)) !important; max-width: 290px !important;
  }

  /* ---------- МОДАЛКА НАСТРОЕК / ПОДПИСКИ / ТОКЕНОВ ----------
     На десктопе: боковое меню (set-nav 248px) + контент (set-pane).
     На мобиле: меню — горизонтальные табы сверху, контент на всю ширину. */
  /* КЛЮЧЕВОЕ: на десктопе настройки = flex-row + height 640; на мобиле — колонка по контенту */
  #sheet-settings .sheet { flex-direction: column !important; height: auto !important; max-height: 90vh; }
  .set-body { flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .set-nav {
    flex: 0 0 auto !important; width: 100%; align-items: center;
    flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 12px 14px 10px;
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav-head { display: none; }            /* аватар/имя уже есть в хедере */
  .set-tab { flex: 0 0 auto; align-self: center; white-space: nowrap; padding: 9px 13px; }
  .set-pane { padding-left: 2px; padding-right: 2px; }

  /* ============================================================
     ТАРИФЫ — вертикальный список (вариант B).
     Карусель → стопка компактных карточек: название + цена в строку,
     преимущества — чипами, кнопка во всю ширину. Свайп не нужен.
     Меняется только раскладка карточек, разметка/кнопки те же. */
  .plans-head { padding-left: 2px; padding-right: 2px; }
  .plans-head h2 { font-size: 22px; }
  .plans-promo { padding-left: 2px; padding-right: 2px; }
  .plans-grid {
    display: flex !important; flex-direction: column;
    grid-template-columns: none !important;
    overflow: visible; gap: 12px; padding: 6px 2px 10px; margin: 0;
  }
  .plans-grid > .plan {
    flex: 0 0 auto !important; width: 100%;
    min-width: 0 !important; max-width: 100% !important;
    display: flex; flex-direction: column; gap: 5px;
    padding: 16px 16px 18px 48px;   /* слева место под радио */
    position: relative;
  }
  .plans-grid > .plan.featured { margin-top: 10px; }       /* место под бейдж «Хит» */
  .plan .plan-name2 { font-size: 17px; }
  .plan .plan-price {
    margin: 4px 0 2px; justify-self: start;
  }
  .plan .plan-price b { font-size: 26px; white-space: nowrap; }
  .plan .plan-price span { font-size: 12px; }
  .plan .plan-price s { margin-right: 3px; }
  .plan .plan-tag { font-size: 12.5px; min-height: 0; }
  .plan ul {
    grid-area: feats;
    flex-direction: row; flex-wrap: wrap;
    gap: 6px; margin: 13px 0 14px;
  }
  .plan li {
    align-items: center; gap: 5px; white-space: nowrap;
    background: var(--surface-3); border: 1px solid var(--line);
    border-radius: 99px; padding: 5px 11px; font-size: 11.5px;
  }
  .plan li svg { width: 12px; height: 12px; margin-top: 0; }
  .plan .btn { grid-area: cta; margin-top: 4px; }
  .plan .plan-save { top: -9px; left: 14px; right: auto; }  /* не перекрывает цену справа */

  /* ============================================================
     ТОКЕНЫ — выбор количества (вариант C).
     Пресеты → строка быстрых чипов; крупное число количества над
     ползунком; чек с итогом — отдельной карточкой. Ползунок (рабочий
     контрол) и все кнопки сохранены. */
  .tokens-sheet { max-width: 100% !important; }
  .tok-head { padding-left: 18px; padding-right: 18px; }
  .tok-head h2 { font-size: 22px; }

  /* пресеты как быстрые чипы в строке */
  .tok-presets {
    display: flex !important; grid-template-columns: none !important;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 8px; padding: 16px 14px 2px;
    overflow: visible;
  }
  .tok-preset {
    flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px;
    padding: 9px 14px; border-radius: 99px; border-width: 1px;
  }
  .tok-preset .tp-num { font-size: 14px; }
  .tok-preset .tp-sub { display: none; }      /* «токенов» прячем в чипе */
  .tok-preset .tp-badge { display: none; }    /* бейдж скидки — лишний в строке чипов */

  /* крупное число количества над ползунком */
  .tok-slider-wrap { padding: 18px 18px 4px; }
  .tok-slider-top { flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; }
  .tok-slider-top span:first-child { order: 2; font-size: 12px; color: var(--text-3); }
  .tok-slider-top .tok-amount { order: 1; font-size: 46px; line-height: 1; }

  /* промокод, итог и кнопка — ровные отступы по краю экрана */
  .tok-summary { margin-left: 16px; margin-right: 16px; width: auto; }
  .promo-box:not(.plans-promo) { margin-left: 16px; margin-right: 16px; }
  .tok-buy { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); }

  /* ============================================================
     НАСТРОЙКИ — дашборд (вариант C) на вкладке «Подписка».
     Тариф — акцентной карточкой, баланс крупнее, действия — кнопками
     во всю ширину. Табы и остальные вкладки не трогаем. */
  .set-card { padding: 14px !important; }
  .set-pane h2 { font-size: 20px; }
  #sheet-settings .set-pane[data-pane="sub"] .set-card { padding: 16px !important; border-radius: 16px; }
  #sheet-settings .set-pane[data-pane="sub"] .set-card:first-of-type {
    background: linear-gradient(135deg, rgba(124,92,255,.20), var(--surface-2) 72%);
    border-color: var(--line-strong);
  }
  #sheet-settings .set-pane[data-pane="sub"] .balance-big .bb-num { font-size: 34px; }
  #sheet-settings .set-pane[data-pane="sub"] .balance-big .coin { width: 30px; height: 30px; }
  #sheet-settings .set-pane[data-pane="sub"] .btn-row { gap: 9px; }
  #sheet-settings .set-pane[data-pane="sub"] .btn-row .btn {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 14px 12px; border-radius: 13px;
  }

  /* ---------- БИБЛИОТЕКА: 1 колонка по центру ---------- */
  .lib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch; gap: 12px;
  }
  .lib-card, .lib-thumb { width: 100% !important; }
  .lib-thumb { height: auto !important; aspect-ratio: 1 / 1; }

  /* ---------- PROMPT-BAR: базовое (раскладку задаёт блок .expanded ниже) ---------- */
  .pb-gear { display: inline-flex !important; }   /* на мобиле — шестерёнка */
  .pb-right .ctl { display: none !important; }     /* контролы спрятаны в шторку */

  /* ---------- ПРОМО-КАРТОЧКИ «Генерация…»: 3 компактных в ряд (п3) ---------- */
  #feature-strip { gap: 8px; padding-left: 16px; padding-right: 16px; }
  #feature-strip .feat-card {
    flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important;
    height: 116px !important; padding: 0 !important; overflow: hidden;
  }
  #feature-strip .feat-title {
    font-size: 11px !important; line-height: 1.12;
    left: 8px !important; right: 8px !important; bottom: 8px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  #feature-strip .feat-tag { display: none !important; }  /* бейдж накладывался — убираем на мобиле */

  /* ---------- СООБЩЕСТВО: убрать «Новое», выровнять фильтры (п4) ---------- */
  .pill-new { display: none !important; }
  .filters { flex-wrap: wrap; gap: 8px; row-gap: 8px; justify-content: flex-start; }
  .filters .pill { flex: 0 0 auto; }

  /* ---------- ГОТОВЫЕ ПРОМПТЫ СТУДИИ: 1 колонка (п5) ---------- */
  .idea-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---------- КАРУСЕЛИ (тренды/идеи): 1 карточка на ширину (п5) ---------- */
  .hscroll { scroll-snap-type: x proximity; }
  .hscroll > * { scroll-snap-align: center; flex: 0 0 86% !important; max-width: 86% !important; }

  /* ---------- ПОДВАЛ по центру (п6) ---------- */
  .lp-foot, .lp-foot-top, .lp-foot-bottom { text-align: center; }
  .lp-foot-links { align-items: center !important; text-align: center; }

  /* ---------- БИБЛИОТЕКА: чипы сверху, поиск ниже; навбар не обрезан (п9,п10) ---------- */
  .lib { overflow-x: hidden; }
  .lib-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .lib-toolbar > * { flex: 0 0 auto !important; }       /* сброс десктопного flex:1 — иначе поиск растягивается по высоте */
  .lib-seg { order: -1; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .lib-seg::-webkit-scrollbar { display: none; }
  .lib-seg button { flex: 0 0 auto; white-space: nowrap; padding: 0 13px; min-width: max-content; }
  #lib-avatar-btn { padding-right: 11px; }
  #lib-avatar-btn .lib-av-caret { flex: 0 0 auto; margin-left: 1px; }
  .lib-search { width: 100%; height: 46px; }
  .lib-search input { height: 100%; }
  .lib-search-btn { width: 100%; }
}

/* очень узкие телефоны */
@media (max-width: 430px) {
  .hero h1 { font-size: clamp(24px, 6.6vw, 40px); }
  .nav-item span { font-size: 9px; }
  .gen-results:not(.single) { grid-template-columns: 1fr; }
  .rail-bottom::before { font-size: 18px; }
  .composer-wrap { padding: 10px 12px 16px !important; }
  .dim-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 820px) {
  /* Шторка настроек генерации: скроллится внутри себя + ровные отступы (п1в) */
  #sheet-genset .genset-sheet { max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #sheet-genset .genset-head { position: sticky; top: 0; background: var(--surface, #14141c); padding-top: 4px; z-index: 2; }
  #sheet-genset .genset-sec h3 { padding-left: 2px; }
  #sheet-genset .genset-body { padding-bottom: 22px; }
  #sheet-genset .genset-opts { padding-left: 2px; padding-right: 2px; }

  /* Кнопка «Закрыть чат» рядом с «Новый» (мобилка) + видимость (п1г) */
  .gen-feed-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .gen-close { width: 38px; height: 38px; }
  .gen-close svg { width: 16px; height: 16px; }

  /* Чат/лента сверху на мобилке — ниже, чтобы были видны «Новый» и крестик (п1д) */
  .hero.generating .gen-feed { max-height: 46vh; }
}

@media (max-width: 820px) {
  /* === Раскладка строки ввода (надёжная, без display:contents) ===
     ряд 1: [фото] [поле];  ряд 2: [⚙] ............ [✨] [→] */
  .prompt-bar.expanded { display: block; }
  .prompt-bar.expanded .pb-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  }
  .prompt-bar.expanded .pb-top #prompt { flex: 1 1 auto; min-width: 0; order: 2; }
  .prompt-bar.expanded .pb-top .prompt-add { flex: 0 0 auto; order: 1; }
  .prompt-bar.expanded .pb-actions { display: none !important; }  /* дубликат кнопок */

  .prompt-bar.expanded .pb-controls {
    display: flex; flex-direction: row; align-items: center;
    gap: 8px; margin-top: 10px; overflow: visible;
  }
  /* Фото/Видео — ЕДИНЫЙ переключатель-пилюля слева (по ТЗ вынесли из шестерёнки) */
  .prompt-bar.expanded .mode-seg {
    display: inline-flex !important; order: 0; flex: 0 0 auto;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px; gap: 0;
  }
  .prompt-bar.expanded .mode-seg button {
    padding: 7px 13px; font-size: 12.5px; gap: 5px;
    border: 0 !important; background: transparent !important; border-radius: 999px;
  }
  .prompt-bar.expanded .mode-seg button svg { width: 16px; height: 16px; }
  .prompt-bar.expanded .mode-seg button.active {
    background: #ffffff !important; color: #111111 !important; border: 0 !important;
  }
  /* Настройки/Создать — группой справа */
  .prompt-bar.expanded .pb-right {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 8px; flex: 1 1 auto; margin-left: 0; flex-wrap: nowrap;
  }
  .prompt-bar.expanded .pb-right .ctl { display: none !important; }
  .prompt-bar.expanded .pb-gear {
    display: inline-flex !important; flex: 0 0 auto; order: 1;
    width: 46px; height: 46px; border-radius: 50%; padding: 0; justify-content: center;
  }
  .prompt-bar.expanded .pb-gear .pb-gear-label { display: none; }  /* только иконка */
  .prompt-bar.expanded .prompt-spark { display: none !important; }   /* помощник убран на мобилке (главная) */
  .prompt-bar.expanded .generate-btn { flex: 0 0 auto; order: 3; }

  /* «Создать» → круглая кнопка-самолётик (как отправка в Telegram) */
  .prompt-bar.expanded .generate-btn {
    font-size: 0 !important; width: 46px; height: 46px; min-width: 0; padding: 0;
    border-radius: 50%; position: relative;
    background: var(--accent, #E4F482) !important; /* лаймовый шейп кнопки */
  }
  .prompt-bar.expanded .generate-btn::after {
    content: ''; position: absolute; inset: 0;
    background: no-repeat center / 19px 19px;
    /* самолётик белый — на лаймовом шейпе кнопки */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z'/></svg>");
  }
  /* пустой промпт — кнопка чуть приглушена, но остаётся лаймовой (не бело-серой) */
  .prompt-bar.expanded .generate-btn.empty { background: rgba(228,244,130,.55) !important; }

  /* Студии: вернуть панель настроек (studio.css прячет её на узких — показываем снизу) */
  .settings-panel { display: flex !important; }
}

@media (max-width: 820px) {
  /* чат не вылезает за пределы экрана */
  .hero.generating .gen-feed { max-width: 100%; overflow-x: hidden; }
  .gen-feed, .gen-results, .gen-msg, .gen-card { max-width: 100% !important; }

  /* Фотосет — 2 колонки готовых идей */
  .ps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

  /* «Показать ещё» — приподнять, чтобы не лежала на подвале */
  .lp-more-wrap { margin-bottom: 24px; }

  /* подвал строго по центру */
  .lp-foot { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .lp-foot-links { align-items: center !important; text-align: center; width: 100%; }
}

@media (max-width: 820px) {
  /* === Чат на главной: убираем пустоту, поле сразу под лентой, обводим зону === */
  .hero.generating { justify-content: flex-start !important; padding-top: 8px !important; padding-bottom: 14px !important; }
  .hero.generating .hero-inner { height: auto !important; }
  .hero.generating .gen-feed-wrap {
    flex: 0 1 auto !important; max-height: calc(100vh - 250px);
    border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
    background: rgba(255,255,255,.015);
    padding: 8px 10px 10px !important; margin-bottom: 8px;   /* минимальный отступ до поля */
  }
  .gen-feed { gap: 16px !important; }                         /* было 36 — меньше пустот между сообщениями */
  .gen-feed-head { padding: 2px 2px 8px !important; }          /* меньше зазор навбар↔«Новый/крестик» */

  /* результат вписывается по ширине экрана, не уходит вбок */
  .gen-results { max-width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; }
  .res-tile { max-width: 100% !important; width: 100% !important; height: auto !important; min-height: 200px; }
  .gen-results.single .res-tile { height: auto !important; min-height: 260px; }

  /* подвал: логотип, название и подпись — по центру (как ссылки) */
  .lp-foot-top { justify-content: center !important; text-align: center; }
  .lp-foot .brand { max-width: 100%; text-align: center; }
  .lp-foot .brand p { text-align: center; }
  .lp-logo { justify-content: center; }
}

@media (max-width: 820px) {
  /* Композер студий (Фото/Видео/Фотосет): кнопка отправки — круглый самолётик (как на главной) */
  .composer .generate-btn {
    font-size: 0 !important; width: 46px; height: 46px; min-width: 0; padding: 0;
    border-radius: 50%; position: relative; flex: 0 0 auto;
    background: var(--accent, #E4F482) !important; /* лаймовый шейп кнопки */
  }
  .composer .generate-btn::after {
    content: ''; position: absolute; inset: 0;
    background: no-repeat center / 19px 19px;
    /* самолётик белый — на лаймовом шейпе кнопки */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z'/></svg>");
  }
  /* пустой промпт — кнопка чуть приглушена, но остаётся лаймовой (не бело-серой) */
  .composer .generate-btn.empty { background: rgba(228,244,130,.55) !important; }
}

@media (max-width: 820px) {
  /* п1: значок шестерёнки не обрезается в круглом шейпе */
  .prompt-bar.expanded .pb-gear svg { width: 20px; height: 20px; }

  /* п9: длинный промпт переносится и не лезет за шейп / на аватар */
  .gen-msg, .gen-user-col { max-width: 100% !important; }
  .gen-text { overflow-wrap: anywhere; word-break: break-word; }

  /* п2: ровные отступы внутри шторки настроек (~6px) */
  #sheet-genset .genset-sheet { padding-left: 18px !important; padding-right: 18px !important; }
  #sheet-genset .genset-sec h3 { padding-left: 6px; }
  #sheet-genset .genset-opts { padding-left: 6px; padding-right: 6px; }
  #sheet-genset .genset-head { padding-left: 0; padding-right: 0; }

  /* п8b: крестик очистки промпта — справа */
  .prompt-clear { order: 9; margin-left: auto; }

  /* п6/п1: верхняя шапка строго статична. БЕЗ GPU-слоя/will-change —
     именно они вызывали асинхронную перерисовку фикс-шапки и её «уезжание» при скролле на iOS. */
  .rail-bottom {
    box-shadow: none;
  }
}
/* фото слева от шестерёнки (мобилка, п8a) */
@media (max-width: 820px) {
  .prompt-bar.expanded .pb-right .prompt-add { order: 0; flex: 0 0 auto; }
}

@media (max-width: 820px) {
  /* п7: кнопки в открытом промпте Истории — шире и нормальной высоты */
  .lv-prompt-head { flex-wrap: wrap; gap: 8px; }
  .lv-iterate { flex: 1 1 100%; width: 100%; justify-content: center; padding: 10px 14px; }
  .lv-actions .lv-btn, .lv-row2 .lv-btn { min-height: 46px; }

  /* п8/п2: композер Фото/Видео — поле + крестик в верхнем ряду, иконки снизу */
  .composer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .composer #prompt { order: 1; flex: 1 1 calc(100% - 46px); min-width: 0; }
  .composer .prompt-clear { order: 2; flex: 0 0 auto; margin: 0; align-self: center; }
  .composer .prompt-add { order: 3; flex: 0 0 auto; }
  .composer .prompt-newchat { order: 3; flex: 0 0 auto; }
  .composer .prompt-spark { order: 4; flex: 0 0 auto; margin-left: auto; }
  .composer .generate-btn { order: 5; flex: 0 0 auto; }
}

@media (max-width: 820px) {
  /* Фотосет: поле+крестик в верхнем ряду, кнопки снизу (как на главной); крестик в строке ввода */
  .ps-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ps-bar-top #ps-prompt { order: 1; flex: 1 1 calc(100% - 46px); min-width: 0; }
  .ps-bar-top .ps-clear { order: 2; flex: 0 0 auto; }
  .ps-bar-top .ps-upload-btn { order: 3; flex: 0 0 auto; }
  .ps-bar-top .ps-create { order: 4; flex: 0 0 auto; margin-left: auto; }
}

@media (max-width: 820px) {
  /* тарифы: радио наверху слева, бейдж «Хит» по центру сверху */
  .plan-radio { top: 18px; transform: none; }
  .plan .plan-pop { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 820px) {
  /* ТАРИФЫ: окно скроллится само (фон залочен), ровные отступы по краям, крестик в пределах */
  #sheet-plans .sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 4px; }
  #sheet-plans .plans-head { padding: 18px 52px 4px 16px; }   /* справа место под крестик */
  #sheet-plans .period-seg { margin: 0 14px 14px; }
  #sheet-plans .plans-promo { margin-left: 14px; margin-right: 14px; }
  #sheet-plans .plans-grid { padding: 4px 14px 12px !important; }
  #sheet-plans .plans-cta-wrap { padding-left: 14px; padding-right: 14px; padding-bottom: 12px; }
  #sheet-plans .sheet-close { top: 14px; right: 14px; z-index: 12; }
}

@media (max-width: 820px) {
  /* НАСТРОЙКИ: без верхних табов, весь функционал на одном экране */
  #sheet-settings .set-nav { display: none !important; }   /* убираем строку «Главная/Профиль…» */
  #sheet-settings .set-body { padding: 16px 14px 22px; overflow-x: hidden; }
  #sheet-settings:not([data-view="home"]) .set-back { display: flex; }   /* «назад» внутри разделов */

  /* тариф + баланс в один ряд */
  .set-dash-row { display: flex; gap: 10px; align-items: stretch; }
  .set-dash-row > .set-hero, .set-dash-row > .set-bal { flex: 1 1 0; min-width: 0; margin-bottom: 0; padding: 14px; }
  .set-hero .sh-top { margin-bottom: 8px; }
  .set-hero .sh-plan { font-size: 22px; }
  .set-hero .sh-sub { font-size: 11px; line-height: 1.4; }
  .set-bal .bb-num { font-size: 24px; }
  .set-bal .balance-big { margin-bottom: 10px; }
  .sb-foot { flex-direction: column; gap: 1px; font-size: 10.5px; }
  .plan-badge { font-size: 11px; padding: 4px 9px; }

  /* кнопки в один ряд, одинаковые */
  #sheet-settings [data-pane="home"] .btn-row { display: flex; flex-wrap: nowrap; gap: 10px; margin: 14px 0 0; }
  #sheet-settings [data-pane="home"] .btn-row .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; white-space: nowrap; }

  /* плитки по 2 в ряд, одинаковые */
  #sheet-settings .set-tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  #sheet-settings .set-tile { padding: 14px; }
  #sheet-settings .set-tile b { font-size: 14px; }
  #sheet-settings .set-tile span { font-size: 11px; }
}

@media (max-width: 820px) {
}

@media (max-width: 820px) {
  /* реферальная программа: блоки статистики в пределах шейпа */
  #sheet-settings .ref-stats { gap: 8px; }
  #sheet-settings .ref-stat { padding: 12px 10px; min-width: 0; }
  #sheet-settings .ref-stat .rs-num { font-size: 20px; }
  #sheet-settings .ref-stat .rs-lbl { font-size: 11px; }
}

@media (max-width: 820px) {
  /* шапка настроек: заголовок + крестик в пределах шейпа */
  #sheet-settings .set-mtitle { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; padding: 2px 44px 14px 2px; }
  #sheet-settings:not([data-view="home"]) .set-mtitle { display: none; }   /* в разделах — кнопка «назад» вместо заголовка */
  #sheet-settings .sheet-close { z-index: 20; top: 14px; right: 14px; }
}

@media (max-width: 820px) {
  /* ТАРИФЫ: слайд-шоу по одной карточке со стрелками (стиль Leonardo) */
  .plans-carousel { position: relative; display: block; margin: 0 8px 2px; }
  #sheet-plans .plans-grid {
    display: flex !important; flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x proximity;
    gap: 12px; padding: 6px 36px 14px !important; margin: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #sheet-plans .plans-grid::-webkit-scrollbar { display: none; }
  #sheet-plans .plans-grid > .plan {
    flex: 0 0 calc(100% - 56px) !important; width: calc(100% - 56px) !important;
    scroll-snap-align: center;
  }
  .plans-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    color: var(--text); z-index: 5; cursor: pointer; padding: 0;
  }
  .plans-arrow:active { transform: translateY(-50%) scale(.92); }
  .plans-arrow svg { width: 20px; height: 20px; }
  .plans-arrow.prev { left: 0; }
  .plans-arrow.next { right: 0; }
}

@media (max-width: 820px) {
  /* помощник/чат Claude — строго в пределах, не вылезают */
  .hero-inner > .assistant, .hero-inner > .claude-chat { max-width: 100%; width: 100%; box-sizing: border-box; }
  .claude-chat .cc-feed { max-height: 42vh; overflow-y: auto; }
  .assistant .asst-body { max-height: 42vh; overflow-y: auto; }

  /* Помощник Claude на мобилке — ВСТРОЕННАЯ панель прямо в чате (как на десктопе и
     как было раньше), НЕ попап на весь экран и НЕ модалка с затемнением.
     Прокручивается содержимое помощника (cc-feed выше, max-height 42vh), кнопки
     «Вставить в редактор»/«Закрыть» работают — поверх ничего не лежит. */
  .hero.claude-open .claude-chat,
  .claude-chat.cc-standalone {
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
}

@media (max-width: 820px) {
  /* логотип-wordmark «мусс» в шапке — кликабельный переход на главную */
  .rail-mlogo { position: absolute; left: 0; top: 0; height: 56px; width: 160px; z-index: 5; background: transparent !important; }
  .rail-bottom::before { pointer-events: none; }
  /* настройки генерации: тонкий скролл (не выпадает из скругления) + заголовок ниже */
  #sheet-genset .genset-sheet { scrollbar-width: none; }
  #sheet-genset .genset-sheet::-webkit-scrollbar { display: none; }
  #sheet-genset .genset-head { padding-top: 22px; }
}

@media (max-width: 820px) {
  /* Фотосет: убираем «Фотосет» и «Все», оставляем фильтры ровным рядом */
  #ps-filters .ps-tag, #ps-filters .ps-sep, #ps-filters .ps-all { display: none !important; }
  #ps-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 0 2px;
  }
  #ps-filters .ps-cat-pill { flex: 0 0 auto; }
}

@media (max-width: 820px) {
  /* feat-карточки (Генерируй идеи/контент/Создавай) — слайд-шоу по одной, крупнее */
  #feature-strip {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto; scroll-snap-type: x proximity;
    gap: 12px; padding: 2px 0 6px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #feature-strip::-webkit-scrollbar { display: none; }
  #feature-strip .feat-card {
    flex: 0 0 86% !important; width: 86% !important; max-width: 86% !important;
    height: 188px !important; scroll-snap-align: center;
  }

  /* Тарифы: компактнее, чтобы заголовок не срезался и не нужно было листать шейп */
  #sheet-plans .plans-head { padding: 12px 52px 2px 16px; }
  #sheet-plans .plans-head h2 { font-size: 20px; }
  #sheet-plans .plans-head p { font-size: 12px; margin: 4px 0 0; line-height: 1.4; }
  #sheet-plans .period-seg { margin: 0 14px 10px; }
  #sheet-plans .period-seg button { padding: 9px; font-size: 13px; }
  #sheet-plans .plans-promo { margin-bottom: 10px; }
  #sheet-plans .plans-grid { padding: 4px 36px 10px !important; }
  #sheet-plans .plans-grid > .plan { padding: 14px 14px 16px 44px !important; }
  #sheet-plans .plan .plan-price b { font-size: 24px; }
  #sheet-plans .plan ul { gap: 6px; }
  #sheet-plans .plan li { font-size: 13px; }
}

@media (max-width: 820px) {
  /* Тарифы: убираем подтекст под заголовком (надписи задраны вверх) */
  #sheet-plans .plans-head p { display: none; }
}

/* ===== Фичестрип → один блок, плавная смена (кроссфейд + фокус из размытия) ===== */
@media (max-width: 820px) {
  #feature-strip { overflow: hidden !important; scroll-snap-type: none !important; padding: 4px 0 10px !important; }
  #feature-strip > .feat-track {
    display: block !important; position: relative !important;
    width: calc(100vw - 60px) !important; max-width: calc(100vw - 60px) !important;
    margin: 0 auto !important; height: 350px !important;
    transform: none !important; animation: none !important;
  }
  #feature-strip .feat-card {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; height: 100% !important;
    display: flex !important; scroll-snap-align: none !important;
    opacity: 0 !important; transform: scale(0.96) translateY(10px) !important; filter: blur(8px) !important;
    pointer-events: none !important;
    transition: opacity .6s ease, transform .65s cubic-bezier(.2,.7,.2,1), filter .6s ease !important;
  }
  #feature-strip .feat-card.fc-show {
    opacity: 1 !important; transform: none !important; filter: blur(0) !important; pointer-events: auto !important;
  }
  #feature-strip .feat-card.feat-dup { display: none !important; }
  #feature-strip .feat-title {
    top: auto !important; bottom: 18px !important; left: 16px !important; right: 16px !important;
    font-size: 15px !important; -webkit-line-clamp: 3;
  }
  #feature-strip .feat-tag { display: block !important; top: 16px !important; bottom: auto !important; left: 16px !important; }
}

/* Кнопки «Открыть/Скачать» на результате — на мобилке нет наведения, показываем всегда */
@media (max-width: 820px) {
  .res-tile .res-hover { opacity: 1; }
  .res-hover .act { width: 36px; height: 36px; }
}

/* ===== Скролл: убираем «прилипающий» hover на тач-устройствах (дёргал скролл, особенно в Истории) ===== */
@media (max-width: 820px) {
  .lib-card:hover .lib-thumb { transform: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.2) !important; border-color: var(--line) !important; }
  .bp-card:hover .bp-thumb, .tile:hover .tile-img { transform: none !important; }
  .lib-card, .lib-thumb, .lib-grid, .bp-card, .tile { touch-action: manipulation; }
  /* лента генерации: касание по плитке результата (фото/видео) не блокирует вертикальный скролл */
  .res-tile, .res-tile image-slot, .res-tile img, .res-tile video, .res-tile .res-hover { touch-action: pan-y; }
}

/* ===== Длинные промпты на мобилке: текст внутри поля прокручивается (iOS momentum) ===== */
@media (max-width: 820px) {
  .prompt-bar textarea, .composer textarea {
    min-height: 44px;   /* +20px к базовой высоте поля ввода на мобилке */
    max-height: 170px; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    touch-action: pan-y;
  }
  /* видимый бегунок при прокрутке длинного промпта */
  .prompt-bar textarea::-webkit-scrollbar, .composer textarea::-webkit-scrollbar { width: 6px; }
  .prompt-bar textarea::-webkit-scrollbar-thumb, .composer textarea::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 4px;
  }
}

@media (max-width: 820px) {
  /* колокольчик внутри верхней шапки (между планом и профилем) */
  .mn-bell-wrap.mn-in-header { position: static; z-index: auto; display: flex; align-items: center; }
  .mn-in-header .mn-bell { width: 38px; height: 38px; border-radius: 11px; }
  .mn-in-header .mn-bell svg { width: 18px; height: 18px; }
  /* поповер уведомлений — выпадает под шапкой, не уезжает за экран */
  .mn-in-header .mn-pop { position: fixed; top: 60px; right: 10px; left: auto; width: min(92vw, 360px); }
}

/* ============================================================
   ГЛАВНАЯ — мобильная шлифовка (v11)
   Задачи 1–11 из ТЗ. Всё строго ≤820px, десктоп не трогаем.
   ============================================================ */
@media (max-width: 820px) {

  /* ── 1) Видео-шейпы: одна карточка по центру, соседи выглядывают
        поровну слева/справа. Свайп в обе стороны. Стрелок НЕТ (они и так
        скрыты на мобилке). Ширина карточки = экран − поля под пики. ── */
  body.page-home .home-vstrip {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-left: 0; padding-right: 0;
    gap: 12px;
  }
  body.page-home .home-vstrip .hvcard {
    flex: 0 0 calc(100vw - 88px);   /* по ~32px пика с каждой стороны + gap */
    width: calc(100vw - 88px);
    height: 210px;
    scroll-snap-align: center;
  }
  /* центрирование обеспечивает scroll-snap-align:center на карточке;
     стартовую первую карточку по центру ставит JS (recenter). */

  /* ── 2) Блок «−10% при первой оплате»: высота на 100px меньше (300→200) ── */
  body.page-home .hpromo-big { height: 200px; padding: 24px 22px; }
  body.page-home .hpromo-big h3 { font-size: 26px; }
  body.page-home .hpromo-big p { font-size: 13px; margin-bottom: 14px; }
  body.page-home .hpromo-btn { padding: 11px 22px; font-size: 13.5px; }

  /* ── 3) 6 маленьких шейпов (Nano Banana Pro / Seedance …):
        уменьшаем заголовки, тексты и иконки, чтобы всё влезало без обрезки ── */
  body.page-home .hmtile { padding: 13px; }
  body.page-home .hmtile-ic { width: 34px; height: 34px; border-radius: 10px; }
  body.page-home .hmtile-ic svg { width: 19px; height: 19px; }
  body.page-home .hmtile-ic img { width: 21px; height: 21px; }
  body.page-home .hmtile h4 { font-size: 13px; line-height: 1.15; margin-bottom: 2px; }
  body.page-home .hmtile small { font-size: 11px; line-height: 1.3; }
  body.page-home .hmtile-cat { font-size: 8.5px; padding: 3px 6px; }

  /* ── 4) Убираем старый заголовок «Экспресс результат в один клик»
        и подзаголовок hero — поле уезжает вниз в блок CREATE (см. п.10). ── */
  body.page-home .hero .hero-title-express,
  body.page-home .hero .hero-sub { display: none !important; }
  /* блок иконок Фото/Видео/Фотосет/Помощник (#tools) после 6 шейпов — убираем */
  body.page-home .hero #tools,
  body.page-home .hero .tools { display: none !important; }

  /* ── 7) Veo-шейп: те же высота/скругление/поля, что у блока −10% (п.2) ── */
  /* боковые отступы ровно как у промо (5px): гасим padding секции-обёртки */
  body.page-home .section:has(> .home-veo),
  body.page-home .section:has(> .home-photodump) { padding-left: 0; padding-right: 0; }
  body.page-home .home-veo { min-height: 200px; margin-left: 5px; margin-right: 5px; }
  body.page-home .home-veo .hveo-left { padding: 24px 22px; }
  body.page-home .home-veo .hveo-left h2 { font-size: clamp(22px, 6vw, 30px); }
  body.page-home .home-veo .hveo-left p { font-size: 13px; margin-bottom: 14px; }
  body.page-home .home-veo .hveo-btn { padding: 12px 24px; font-size: 13.5px; }

  /* ── 9) Фотодамп-шейп: как п.2 и п.7 ── */
  body.page-home .home-photodump { min-height: 200px; margin-left: 5px; margin-right: 5px; }
  body.page-home .home-photodump .hpd-left { padding: 24px 22px; }
  body.page-home .home-photodump .hpd-left h2 { font-size: clamp(22px, 6vw, 30px); }
  body.page-home .home-photodump .hpd-left p { font-size: 13px; margin-bottom: 14px; }
  body.page-home .home-photodump .hpd-btn { padding: 12px 24px; font-size: 13.5px; }

  /* ── 10) Блок CREATE на мобилке полностью убран: главная = только контент.
        Ни поля ввода, ни рамок CREATE, ни анимации плавания. ── */
  body.page-home .gen-dock-sec { display: none !important; }
  body.page-home .hero-inner > .prompt-bar { display: none !important; }

  /* hero сверху схлопываем, чтобы не было пустого места от бывшего поля */
  body.page-home .hero:not(.generating) { min-height: 0; height: auto; padding: 0; }
  body.page-home .hero:not(.generating) .hero-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.page-home .hero:not(.generating) .hero-bg { display: none; }
}

/* ============================================================
   ГЛАВНАЯ — развод навбаров десктоп/мобилка (v11)
   На десктопе body.home-topnav показывает ВЕРХНИЙ навбар (.ht-topnav)
   и скрывает боковой .rail. Но на мобилке нам нужен НИЖНИЙ таб-бар (.rail),
   а не верхний навбар. Здесь переопределяем поведение только для ≤820px,
   не трогая десктоп и другие страницы.
   ============================================================ */
@media (max-width: 820px) {
  /* верхний навбар главной — на мобилке прячем полностью */
  body.home-topnav .ht-topnav { display: none !important; }
  /* мега-меню верхнего навбара тоже не должны всплывать на мобилке */
  body.home-topnav .ht-mega { display: none !important; }

  /* возвращаем нижний таб-бар (.rail): базовые мобильные стили .rail
     уже позиционируют его снизу — снимаем только принудительное скрытие */
  body.home-topnav .rail { display: flex !important; }

  /* отступ контента под мобильную ВЕРХНЮЮ шапку (rail-bottom, 56px),
     а не под высоту верхнего навбара (которого на мобилке нет) */
  body.home-topnav .content { padding-top: 60px; padding-left: 0; }
}

/* ============================================================
   Подсказки «?» (.tip-pop) на мобилке (v13)
   На десктопе тултип центрируется на «?» и при узком экране вылезает за край.
   На мобилке показываем его как мини-панель по центру экрана — заголовок,
   подзаголовок и текст всегда умещаются, ничего не обрезается.
   ============================================================ */
@media (max-width: 820px) {
  .tip-pop {
    position: fixed !important;
    left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(340px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    max-height: 70vh; overflow-y: auto;
    font-size: 13.5px !important; line-height: 1.55 !important;
    padding: 16px 18px !important; border-radius: 16px !important;
    z-index: 200 !important;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.9) !important;
  }
  /* стрелка-хвостик у центрированной панели не нужна */
  .tip-pop::after { display: none !important; }
}