/* вынесен из inline-<style> страницы compare.html (SEC-11: style-src без unsafe-inline) */
    .cmp-wrap { padding: 18px 0 80px; }
    .cmp-head { text-align:center; margin-bottom:18px; }
    .cmp-head h1 { font-size: clamp(1.5rem, 5vw, 2.4rem); margin:0 0 6px; }
    .cmp-head p { color: var(--muted, #9990bf); font-size:.92rem; margin:0; }

    /* Тумблер режима */
    .cmp-mode { display:flex; gap:8px; justify-content:center; margin:16px 0 20px; flex-wrap:wrap; }
    .cmp-mode__btn {
      display:flex; align-items:center; gap:7px; padding:10px 18px; border-radius:99px;
      background: rgba(20,12,44,.6); border:1px solid rgba(167,139,255,.22);
      color: var(--muted,#9990bf); font-family:inherit; font-size:.86rem; font-weight:700;
      cursor:pointer; transition: all .18s;
    }
    .cmp-mode__btn.active { background: linear-gradient(135deg,#8b5cff,#ff3ec9); color:#fff; border-color:transparent; }
    /* [МОБИЛЬНАЯ-ВЁРСТКА-COMPARE] Landscape на телефоне.
       Было: детект по ориентации плюс верхняя граница высоты окна, а сцене
       задавалась фиксированная высота в 93 процента вьюпорта — так, будто она
       на нём одна. Реально доступно около 40vh: у .cmp-wrap 98px вертикальных
       отступов (18 сверху, 80 снизу), выше шапка сайта, ниже названия, скраббер
       и два ряда миниатюр. Разница и уезжала за экран, а блоки наезжали друг
       на друга.
       Правятся три причины сразу:
       1. Высота больше не константа от вьюпорта: .cmp-wrap — flex-колонка,
          сцена забирает ОСТАТОК (flex:1 1 auto). Сколько именно осталось,
          считает браузер, а не мы.
       2. min-height вместо height у контейнера: содержимое может не поместиться
          (два ряда миниатюр в ландшафте — это много), и тогда страница просто
          прокручивается. Функциональность не режем.
          У самой сцены — min-height:120px, чтобы при нехватке места она не
          схлопнулась в ноль, а осталась видимой и уехала в прокрутку вместе
          с остальным.
       3. Детект переведён на тип ввода — тот же, что во всех мобильных ветках
          compare-widget.css (Ф-СЛАЙДЕР1). Прежнее условие по высоте окна ловило
          и десктоп: невысокое окно браузера в ландшафте получало мобильную
          раскладку.
       dvh вместо vh: на iOS адресная строка съедает часть vh, и «стопроцентная»
       высота оказывается больше фактически видимой.
       .cmp-head скрыт: в ландшафте на телефоне заголовок с подзаголовком съедает
       около 60px ради текста, который пользователь уже прочитал.
       max-width у названий и скраббера снят на 100%: прежние их значения были
       производными от той самой константы высоты, которой больше нет.
       Точные прежние объявления здесь не повторяются: их считают поиском по
       тексту файла при проверке. */
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) {
      .cmp-wrap {
        display: flex; flex-direction: column; gap: 6px;
        min-height: 100vh; min-height: 100dvh;
        padding: 8px 0 12px;
      }
      .cmp-head { display: none; }
      .cmp-stage {
        flex: 1 1 auto; min-height: 120px;
        height: auto; width: auto; max-width: 100%;
        aspect-ratio: 3/2; margin: 0 auto;
      }
      .cmp-names { flex-shrink: 0; margin-top: 4px; max-width: 100%; }
      .cmp-scrub { flex-shrink: 0; margin-top: 6px; max-width: 100%; }
      .cmp-scrub-thumb { width: 31px; height: 31px; font-size: 0.96rem; }
      .cmp-sets { flex-shrink: 0; }
    }
    /* ── ДЕСКТОПНАЯ ВЕТКА рядов: устройства с мышью ──────────────────
       Строгое дополнение тач-ветки (not all and ...), третьего состояния не
       возникает — идиома взята из compare-widget.css.
       [РЕЛЬСА-ДЕСКТОП-СКРОЛЛ] Лента шире на 50% (720 -> 1080) только здесь:
       на телефоне это бессмысленно, а вычитание полей съело бы отступы.
       min(...) обязателен, а не просто 1080px: .container на этой странице
       НЕ имеет стилей вообще (styles.css сюда не подключён), внешнего кэпа и
       боковых полей нет — без вычитания ряд упирался бы в края окна на
       ширинах между 720 и 1080. Фото/подписи/скраббер сознательно остаются
       720px: ряды это отдельный блок-каталог, растягивать под них превью
       плёнки незачем. */
    @media not all and (hover: none) and (pointer: coarse) {
      .cmp-sets { max-width: min(1080px, 100% - 40px); }
      /* [СЛАЙДЕР-20] 720 -> 864px (+20%), только десктоп. Подписи и скраббер
         тянутся ЗА сценой сознательно — в отличие от рядов, которые остались
         самостоятельным блоком. Причина: .cmp-names выравнивает названия по
         краям кадра, а .cmp-scrub — ручка этой самой шторки. Оставить их на
         720 при сцене 864 значит получить подписи, промахивающиеся мимо краёв
         фото, и полосу управления короче того, чем она управляет.
         Следствие: aspect-ratio 3/2 поднимает высоту сцены 480 -> 576px. */
      .cmp-stage, .cmp-names, .cmp-scrub { max-width:864px; }
    }

    /* Подсказка-кнопка под наборами */
    .cmp-footer-hint {
      max-width:720px; margin:16px auto 0; padding:14px 16px;
      display:flex; align-items:center; gap:12px;
      background: linear-gradient(160deg, rgba(20,12,44,.7), rgba(8,5,20,.85));
      border:1px solid rgba(167,139,255,.18); border-radius:14px;
      color: var(--muted,#9990bf); font-size:.78rem;
    }
    .cmp-footer-hint__icon { font-size:1.15rem; flex-shrink:0; }
    .cmp-footer-hint__txt { flex:1; line-height:1.35; }
    .cmp-footer-hint__txt b { color:#f4f1ff; }
    .cmp-footer-link {
      display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
      background:rgba(139,47,255,.14); border:1px solid rgba(167,139,255,.3);
      border-radius:10px; color:#c9b6ff; text-decoration:none;
      font-size:.78rem; font-weight:700; flex-shrink:0;
    }
    .cmp-footer-link:hover { background:linear-gradient(135deg,#8b5cff,#ff3ec9); color:#fff; border-color:transparent; }

    .btn-primary { background:linear-gradient(135deg,#8b5cff,#ff3ec9); color:#fff; border:none; border-radius:12px; padding:12px 22px; font-weight:700; font-family:inherit; cursor:pointer; text-decoration:none; }

    @media (max-width:600px){
      .cmp-footer-hint{ flex-direction:column; align-items:flex-start; gap:10px; }
      .cmp-footer-link{ width:100%; justify-content:center; }
    }