без класса wrap и .container вообще без боковых padding — на телефоне крошки, заголовки, абзацы, списки, плашки и таблицы упирались в края экрана (0…18 px). Стало: отступ-«жёлоб» 24 px у всех страниц. Плюс мелочи, которые вылезали за этот жёлоб: — блок «Другие инструменты» вставляется скриптом прямо в (вне

), поэтому отступ ему даём отдельно через body > section / body > .container; — у главной .prose без .glass сам имел 24 px внутри main.wrap (то есть 48 px от края) — обнуляем, чтобы текст встал на общую линию 24 px и таблица .seo-table не уезжала за край; — длинные слова в заголовках («Политика конфиденциальности») переносим, а не выпускаем за экран (lang="ru" на страницах есть, переносы работают). Правило только до 1168 px: на широком экране .container и так центрируется с отступом >24 px, поэтому настольная вёрстка не меняется. Отдельная беда — форма генератора: карточка .form-card как grid-элемент не могла сжаться (min-width:auto = ширина полей по умолчанию), из-за чего трек растягивался до 415 px и страница распирала вьюпорт (замер: /generators/invoice/ на 360 px давал scrollWidth=440 — и вместе с ним растягивались fixed-элементы: шапка и баннер cookie уезжали за край). Лечим сжимаемостью: min-width:0 у карточки/треков и у самих полей. */ @media (max-width: 1168px) { main:not(.wrap) { padding-left: 24px; padding-right: 24px; } body > section { padding-left: 24px; padding-right: 24px; } body > .container { padding-left: 24px; padding-right: 24px; } footer .container { padding-left: 24px; padding-right: 24px; } main.wrap .prose:not(.glass) { padding-left: 0; padding-right: 0; } main h1, main h2 { overflow-wrap: break-word; hyphens: auto; } .form-card, .tool-layout > *, .gen-grid > * { min-width: 0; } .field input, .field select, .field textarea { min-width: 0; } .item-row input, .item-row select { min-width: 0; } table.seo-table, table.cmp { display: block; max-width: 100%; overflow-x: auto; } .hud { flex-wrap: wrap; } } /* ── Мобильная шапка: кнопки темы, «скачать» и меню — одинаковые промежутки (24.09.2026). Раньше группа кнопок стояла по центру (justify-content: space-between), а бургер — справа, поэтому между «скачать» и меню был большой разрыв. Теперь группа прижата вправо, а промежутки между всеми тремя кнопками одинаковые. */ @media (max-width: 1024px) { header.app-header .head-in, header.app-header .header-inner { gap: 8px; } header.app-header .head-cta, header.app-header .header-actions { gap: 8px; margin-left: auto; } } @media (max-width: 760px) { header.app-header .head-in, header.app-header .header-inner { gap: 8px; } header.app-header .head-cta, header.app-header .header-actions { gap: 8px; } } /* ── Кнопка «Скачать на рабочий стол»: фон стеклянный — как у кнопки смены темы, /* ─────────── строка поиска внутри мобильного меню (24.09.2026) ─────────── Жалоба владельца: при открытии меню на телефоне текст в строке поиска сливается с фоном. Причина: панель мобильного меню всегда тёмная (rgba(17,14,30,.97)), а поле поиска сохраняло цвета светлой темы — светлый фон (--hglass) при светлом же тексте (--htxt: #f1eef9), плюс иконка-лупа была нарисована тёмным цветом. Что делаем: внутри меню поле делаем тёмным со светлым текстом, светлой лупой и видимой подсказкой. */ header.app-header .main-nav .nav-extra .search-input { background-color: rgba(255, 255, 255, .07); color: #f1eef9; border-color: rgba(255, 255, 255, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3da' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20.5 20.5 16 16'/%3E%3C/svg%3E"); } header.app-header .main-nav .nav-extra .search-input::placeholder { color: rgba(241, 238, 249, .62); } header.app-header .main-nav .nav-extra .search-input:focus { border-color: rgba(221, 214, 254, .55); box-shadow: 0 0 0 3px rgba(167, 139, 250, .16); } а стрелка (SVG) — фиолетовая в цвет темы. Синий цвет из кнопки убран: эмодзи заменён на SVG, потому что системный эмодзи перекрасить нельзя. */ header.app-header .head-cta #installBtn, header.app-header .header-actions #installBtn { background: var(--hglass); border: 1px solid var(--hline); color: var(--hvio); } header.app-header .head-cta #installBtn:hover, header.app-header .header-actions #installBtn:hover { border-color: var(--hline-2); color: var(--hvio); } header.app-header .head-cta #installBtn svg, header.app-header .header-actions #installBtn svg { display: block; width: 20px; height: 20px; } :root[data-theme="light"] header.app-header .head-cta #installBtn, :root[data-theme="light"] header.app-header .header-actions #installBtn { background: var(--hglass); border-color: var(--hline); color: var(--hvio); } .card-cover{display:block;margin:0 0 12px;border-radius:14px;overflow:hidden;aspect-ratio:1200/630} .card-cover img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}