/* ============================================================
   pages/utm — генератор UTM-меток (/utm/, /en/utm/, посадочные /utm/{площадка}/,
   шаблон page-generator-utm.php). Дизайн v4: «Генератор UTM v2» (десктоп) + мобильный прототип,
   спека — digests-v4/generator-utm-v2.md и generator-utm-mobile.md, решения v4-critic Р-29…Р-34.
   Слой поверх pages/tools.css: каркас .cr-tool__ оттуда, общий файл НЕ меняется — все отличия
   v2 заданы здесь скоупом .cr-tool--utm (H1 30, H2 23, FAQ 16/15, крошки 18). Скоуп нужен и по
   порядку подключения: mobile.css и article.css грузятся ПОСЛЕ этого файла и при равной
   специфичности перебили бы правила страницы.
   Плоская форма без карточек: поля-подчёркивания, единственная «карточка» — липкая панель
   результата. Функции прода, которых нет в макете (расширенные параметры, история/шаблоны,
   сокращалка + QR, трекер/постбек, три режима пакета), нарисованы тем же языком.
   В прототипе у большинства подписей line-height не задан (normal), тема наследует от body 1.65 —
   поэтому normal выставлен явно. Мобильные (≤767) и планшетные правила — в конце файла.
   ============================================================ */

/* --- Каркас страницы: отличия v2 от общего каркаса инструментов --- */
/* Моно-стек страницы = --font-mono + Consolas и Liberation Mono перед generic. Причина — баг
   Chromium с DejaVu Sans Mono (дефолтный monospace в Linux): в однострочном input при 13.5–14.5px
   не рисуется глиф «_» (в div и textarea рисуется) — для генератора UTM это «paid social»
   вместо «paid_social». На macOS/iOS (SF Mono), Windows (Consolas — и так дефолт) и Android
   стек даёт тот же шрифт, что и токен. */
.cr-tool--utm{ --cr-utm-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }
.cr-tool.cr-tool--utm > .cr-crumbs{ margin:0 0 18px; }          /* v2: 18 (каркас 20) */
.cr-tool--utm .cr-tool__title{
  font-size:30px;                    /* нет токена: H1 v2 (общий --fs-h1-page 27 не трогаем) */
  letter-spacing:-.022em;            /* нет токена */
  line-height:1.08;                  /* нет токена */
}
.cr-tool--utm .cr-utm,
.cr-tool--utm .cr-bulk{ margin:0; line-height:normal; }

/* Пары подписей «десктоп / мобайл» в одном DOM (KeyCDN не различает UA) */
.cr-tool--utm .cr-utm__mob{ display:none; }

/* --- Табы режима: подчёркивание, не сегмент --- */
.cr-tool--utm .cr-utm__tabs{
  display:flex;
  gap:22px;
  margin:22px 0 24px;                /* верхние 22 схлопываются с 8 у H1 → между ними 22 */
  border-bottom:1px solid var(--border);
}
.cr-tool--utm .cr-utm__tab{
  margin:0 0 -1px;
  padding:0 2px 11px;
  border-bottom:2px solid transparent;
  border-radius:0;
  font-size:15px;                    /* нет токена */
  font-weight:var(--fw-semibold);
  line-height:normal;
  color:var(--text-muted);
  transition:color var(--transition);
}
.cr-tool--utm .cr-utm__tab.is-active{ color:var(--accent); border-bottom-color:var(--accent-bright); }
.cr-tool--utm .cr-utm__tab:focus-visible{ border-radius:var(--radius-sm); }

/* --- Обёртка формы: containing block липкой панели --- */
.cr-tool--utm .cr-utm__form{ position:relative; margin:0 0 36px; }

/* --- Подписи полей --- */
.cr-tool--utm .cr-utm__labelrow{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:2px 7px;
  margin:0 0 6px;
}
.cr-tool--utm .cr-utm__labelrow--split{
  flex-wrap:nowrap;
  justify-content:space-between;
  gap:12px;
  margin:0 0 7px;
}
.cr-tool--utm .cr-utm__label{
  font-size:var(--fs-meta-sm);       /* 13 */
  font-weight:var(--fw-semibold);
  line-height:normal;
  color:var(--text-lead);
}
.cr-tool--utm .cr-utm__label--block{ display:block; margin:0 0 9px; }
.cr-tool--utm .cr-utm__tag,
.cr-tool--utm code{
  padding:0;
  background:none;                   /* README: без тонированных плашек — моно без подложки */
  font-family:var(--cr-utm-mono);
}
.cr-tool--utm .cr-utm__tag{
  font-size:11px;                    /* нет токена */
  font-weight:var(--fw-regular);
  color:var(--text-ghost);
}
.cr-tool--utm .cr-utm__req{
  font-size:11px;                    /* нет токена */
  font-weight:var(--fw-semibold);
  color:var(--danger);
  white-space:nowrap;
}
.cr-tool--utm .cr-utm__caps{
  font-size:var(--fs-caption-sm);    /* 11.5 */
  font-weight:var(--fw-bold);
  letter-spacing:.08em;              /* нет токена */
  text-transform:uppercase;
  line-height:normal;
  color:var(--text-label);
}
.cr-tool--utm .cr-utm__caps--block{ display:block; margin:0 0 7px; }

/* Текстовые кнопки */
.cr-tool--utm .cr-utm__clear{
  flex:none;
  font-size:var(--fs-caption);       /* 12.5 */
  font-weight:var(--fw-medium);
  line-height:normal;
  color:var(--text-muted-2);
  transition:color var(--transition);
}
.cr-tool--utm .cr-utm__textbtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;                   /* тач-цель WCAG 2.2 AA */
  font-size:var(--fs-caption);       /* 12.5 */
  font-weight:var(--fw-semibold);
  line-height:normal;
  text-align:left;                   /* у button по умолчанию center: на 320 «+ полный набор…» уходит на 2 строки */
  color:var(--accent);
  transition:color var(--transition);
}
.cr-tool--utm .cr-utm__textbtn--muted{ color:var(--text-muted-2); font-weight:var(--fw-medium); }

/* Кнопка «?» в конце линии поля — открывает модалку-справку (только там, где ACF даёт текст) */
.cr-tool--utm .cr-utm__inwrap{ position:relative; }
.cr-tool--utm .cr-utm__inwrap--q .cr-utm__line{ padding-right:26px; }
.cr-tool--utm .cr-utm-q{
  position:absolute;
  top:8px;                           /* центр строки ввода: (42 − 8 padding-bottom − 18) / 2 */
  right:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:18px;
  height:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface-base);
  font-size:var(--fs-caption-sm);
  font-weight:var(--fw-semibold);
  line-height:1;
  color:var(--text-muted-2);
  transition:border-color var(--transition), color var(--transition);
}
/* Кружок остаётся 18x18, область попадания — 24x24 (WCAG 2.2 AA): хитбокс не влияет на поток */
.cr-tool--utm .cr-utm-q::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%);
}

/* --- Поля --- */
.cr-tool--utm .cr-utm__input{
  width:100%;
  min-width:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  outline:none;
  color:var(--text-primary);
}
.cr-tool--utm .cr-utm__input::placeholder{ color:var(--text-ghost); font-weight:var(--fw-regular); }
/* Поле-подчёркивание (в т.ч. строки своих параметров — их создаёт JS с классом .cr-utm__input) */
.cr-tool--utm .cr-utm__line,
.cr-tool--utm .cr-utm-custom-row .cr-utm__input{
  height:42px;
  padding:0 0 8px;
  border-bottom:1px solid var(--border);
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-ui);            /* 14 */
  line-height:normal;
  transition:border-color var(--transition), box-shadow var(--transition);
}
/* base.css даёт :focus-visible кольцо и радиус 8 — у подчёркивания фокус = линия 2px */
.cr-tool--utm .cr-utm__line:focus,
.cr-tool--utm .cr-utm__line:focus-visible,
.cr-tool--utm .cr-utm-custom-row .cr-utm__input:focus,
.cr-tool--utm .cr-utm-custom-row .cr-utm__input:focus-visible{
  border-radius:0;
  border-bottom-color:var(--accent-bright);
  box-shadow:0 1px 0 0 var(--accent-bright);   /* нет токена: линия фокуса */
}
/* Нативный select (пакет: пресет, разделители, фильтр) — тот же вид, что у кастомных селектов
   трекера: подчёркивание + шеврон 16/2.2 --text-ghost (иконка темы chevron-down, цвет #9AA1B0) */
.cr-tool--utm select.cr-utm__line{
  padding-right:24px;
  -webkit-appearance:none;
  appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0 top 9px / 16px 16px no-repeat;
  font-family:var(--font-sans);
  text-overflow:ellipsis;
  cursor:pointer;
}

/* Адрес: бокс 50/r12 с инлайн-префиксом протокола (и тот же бокс у сокращалки) */
.cr-tool--utm .cr-utm__addr{
  display:flex;
  align-items:stretch;
  min-width:0;
  height:50px;
  margin:0 0 24px;
  border:1px solid #C9D0DB;          /* нет токена: рамка адреса/textarea/панели v2 */
  border-radius:var(--radius-lg);
  background:var(--surface-base);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.cr-tool--utm .cr-utm__addr:has(.cr-utm-ib__input:focus){
  border-color:var(--accent-bright);
  box-shadow:var(--ring-focus);
}
.cr-tool--utm .cr-utm-ib__pre{ position:relative; flex:none; display:flex; }
/* Состояние протокола/сервиса — textContent кнопки (utm.js), поэтому шеврон рисует ::after */
.cr-tool--utm .cr-utm-ib__btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:100%;
  padding:0 0 0 16px;
  font-family:var(--cr-utm-mono);
  font-size:15px;                    /* нет токена */
  line-height:normal;
  color:var(--text-muted-2);
  transition:color var(--transition);
}
.cr-tool--utm .cr-utm-ib__btn::after{
  content:"";
  flex:none;
  width:12px;
  height:12px;
  background:var(--text-ghost);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.cr-tool--utm .cr-utm-ib__btn:focus-visible{ border-radius:11px 0 0 11px; }
.cr-tool--utm .cr-utm__addr .cr-utm-ib__input{
  flex:1;
  height:100%;
  padding:0 16px 0 8px;
  border-radius:0 11px 11px 0;
  font-family:var(--cr-utm-mono);
  font-size:15px;                    /* нет токена */
  line-height:normal;
}
.cr-tool--utm .cr-utm__addr .cr-utm-ib__input:focus,
.cr-tool--utm .cr-utm__addr .cr-utm-ib__input:focus-visible{ box-shadow:none; }
/* Адрес введён со своим протоколом — префикс не применяется, прячем (класс ставит utm.js) */
.cr-tool--utm .cr-utm__addr.has-scheme .cr-utm-ib__pre{ display:none; }
.cr-tool--utm .cr-utm__addr.has-scheme .cr-utm-ib__input{ padding-left:16px; border-radius:11px; }

/* Выпадающее меню (протокол, сервис сокращения, трекер/источник) — функциональный поповер */
.cr-tool--utm .cr-utm-menu{
  position:absolute;
  z-index:20;
  top:calc(100% + 6px);
  left:0;
  min-width:150px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface-base);
  box-shadow:var(--shadow-menu);
  display:none;
}
.cr-tool--utm .cr-utm-menu.is-active{ display:block; }
.cr-tool--utm .cr-utm-menu__list{ margin:0; padding:0; list-style:none; }
/* Пункт — <button> (доступен с клавиатуры): ширина и выравнивание — сброс кнопки; кольцо фокуса
   даёт base.css (:focus-visible), радиус у пункта тот же */
.cr-tool--utm .cr-utm-menu__item{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-ui);
  line-height:normal;
  color:var(--text-body);
  cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.cr-tool--utm .cr-utm-menu__item.is-sel{ color:var(--accent); font-weight:var(--fw-medium); }

/* --- Пресеты: один ряд чипов (wrap); группы остаются в DOM ради aria, в потоке их нет --- */
.cr-tool--utm .cr-utm__presetbox{ margin:0 0 26px; }
.cr-tool--utm .cr-utm__presets{ display:flex; flex-wrap:wrap; gap:8px; }
.cr-tool--utm .cr-utm__pgroup{ display:contents; }
.cr-tool--utm .cr-utm__chip,
.cr-tool--utm .cr-utm-vtab{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:none;
  height:32px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface-base);
  font-size:var(--fs-meta-sm);       /* 13 */
  font-weight:var(--fw-medium);
  line-height:normal;
  color:var(--text-muted);
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.cr-tool--utm .cr-utm__chip input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
/* Активный — белый с кольцом 2px (border + inset), без тинта --accent-tint */
.cr-tool--utm .cr-utm__chip:has(input:checked),
.cr-tool--utm .cr-utm-vtab.is-active{
  border-color:var(--accent-bright);
  box-shadow:inset 0 0 0 1px var(--accent-bright);   /* нет токена: кольцо активного чипа */
  font-weight:var(--fw-semibold);
  color:var(--accent);
}
/* Радио спрятано визуально, поэтому кольцо фокуса рисует сама «таблетка» */
.cr-tool--utm .cr-utm__chip:has(input:focus-visible){ box-shadow:var(--ring-focus); }
.cr-tool--utm .cr-utm__chip:has(input:checked:focus-visible){ box-shadow:inset 0 0 0 1px var(--accent-bright), var(--ring-focus); }
.cr-tool--utm .cr-utm-vtab:focus-visible{ border-radius:var(--radius-pill); }
.cr-tool--utm .cr-utm__sub,
.cr-tool--utm .cr-utm__note,
.cr-tool--utm .cr-utm__fieldnote{
  font-size:var(--fs-caption);       /* 12.5 */
  line-height:1.5;                   /* нет токена */
  color:var(--text-muted-2);
}
.cr-tool--utm .cr-utm__sub{ margin:10px 0 0; }
.cr-tool--utm .cr-utm__note{ margin:6px 0 0; }
.cr-tool--utm .cr-utm__presetbox .cr-utm__textbtn{ margin:4px 0 0; }

/* --- Грид параметров 3×2 (на EN без erid — 3+2) --- */
.cr-tool--utm .cr-utm__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;                 /* подсказки пресета делают ряды разной высоты */
  gap:20px;
  margin:0 0 18px;
}
.cr-tool--utm .cr-utm__cell{ min-width:0; }
.cr-tool--utm .cr-utm-fieldhint{
  display:none;
  margin:6px 0 0;
  font-size:var(--fs-caption);
  line-height:1.45;                  /* нет токена: подсказка пресета */
  color:var(--accent);
  overflow-wrap:anywhere;
}
.cr-tool--utm .cr-utm-fieldhint.is-active{ display:block; }
.cr-tool--utm .cr-utm__fieldnote{ margin:0 0 20px; }
.cr-tool--utm .cr-utm__fieldnote--tight{ margin:8px 0 0; }
.cr-tool--utm .cr-utm__fieldnote--top{ margin:0 0 14px; }

/* --- «Расширенные параметры» и прочие сворачиваемые строки --- */
.cr-tool--utm .cr-utm__adv{ border-top:1px solid var(--hairline); }
.cr-tool--utm .cr-utm__adv-sum,
.cr-tool--utm .cr-utm__fold-sum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  list-style:none;
  cursor:pointer;
  line-height:normal;
}
.cr-tool--utm .cr-utm__adv-sum::-webkit-details-marker,
.cr-tool--utm .cr-utm__fold-sum::-webkit-details-marker{ display:none; }
.cr-tool--utm .cr-utm__adv-sum{
  padding:14px 0;
  font-size:var(--fs-meta-sm);       /* 13 */
  font-weight:var(--fw-semibold);
  color:var(--text-lead);
}
.cr-tool--utm .cr-utm__chev{ flex:none; color:var(--text-ghost); transition:transform var(--transition); }
.cr-tool--utm details[open] > summary .cr-utm__chev,
.cr-tool--utm .cr-utm-ddfield.is-open .cr-utm__chev{ transform:rotate(180deg); }
.cr-tool--utm .cr-utm__adv-body{ padding:6px 0 4px; }
.cr-tool--utm .cr-utm__grid--adv{ margin:0 0 14px; }
.cr-tool--utm .cr-utm__customs{ margin:0 0 18px; }
.cr-tool--utm .cr-utm-custom-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;
  align-items:end;
  gap:20px;
  margin:0 0 10px;
}
.cr-tool--utm .cr-utm-crm{
  height:42px;
  padding:0 0 8px;
  font-size:20px;                    /* нет токена: крестик строки */
  line-height:1;
  color:var(--text-ghost);
  transition:color var(--transition);
}

/* --- Опции: перед панелью результата --- */
.cr-tool--utm .cr-utm__opts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 26px;
  margin:0 0 22px;
  padding:16px 0 0;
  border-top:1px solid var(--hairline);
}
.cr-tool--utm .cr-utm__check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-meta);          /* 13.5 */
  line-height:normal;
  color:var(--text-body);
  cursor:pointer;
}
.cr-tool--utm .cr-utm__check input{ flex:none; width:16px; height:16px; margin:0; accent-color:var(--accent-bright); cursor:pointer; }

/* --- Липкая панель результата ---
   sticky работает, пока у предков нет overflow ≠ visible (замер разведки: .cr-tool__main,
   .cr-layout, main, .cr-sheet — все visible). z-index 5 внутри контекста .cr-sheet (z 1):
   панель всегда ниже шапки (100) и модалки входа (400). */
.cr-tool--utm .cr-utm__dock{
  position:sticky;
  bottom:16px;
  z-index:5;
  padding:16px 18px 15px;
  border:1px solid #C9D0DB;          /* нет токена */
  border-radius:var(--radius-xl);
  background:var(--surface-base);
  box-shadow:0 14px 34px -14px rgba(18,22,29,.28);   /* нет токена: тень панели v2 */
}
.cr-tool--utm .cr-utm__dock--static{ position:static; box-shadow:none; }
.cr-tool--utm .cr-utm__dock-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 9px;
}
.cr-tool--utm .cr-utm__dock-count{
  font-size:12px;                    /* нет токена */
  line-height:normal;
  color:var(--text-ghost);
  white-space:nowrap;
}
.cr-tool--utm .cr-utm__dock-out{
  margin:0 0 14px;
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-ui);            /* 14 */
  line-height:1.75;                  /* нет токена */
  color:var(--text-heading);
  overflow-wrap:anywhere;
}
/* Пустое состояние — CSS: контейнер печатается и очищается в :empty */
.cr-tool--utm .cr-utm__dock-out:empty{ font-family:var(--font-sans); line-height:normal; }
.cr-tool--utm .cr-utm__dock-out:empty::before{ content:attr(data-ph); color:var(--text-ghost); text-wrap:pretty; }
/* Подсветка частей ссылки. Зазор между парами — пробел в ::before: сгенерированный контент не
   выделяется и не копируется, зато переносит строку по границам пар и схлопывается в её начале */
.cr-tool--utm .cr-utm__u-sep,
.cr-tool--utm .cr-utm__u-eq{ color:#A6ADBA; }                     /* нет токена: разделители ссылки */
.cr-tool--utm .cr-utm__u-key{ color:var(--accent); font-weight:var(--fw-medium); }
.cr-tool--utm .cr-utm__u-hash{ color:var(--text-muted-2); }
.cr-tool--utm .cr-utm__u-sep::before,
.cr-tool--utm .cr-utm__u-hash::before{ content:" "; }
.cr-tool--utm .cr-utm__dock-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

/* Кнопки панели (значения = кнопкам cookies на десктопе, но свой класс: мобайл расходится) */
.cr-tool--utm .cr-utm__btn{
  flex:none;
  height:42px;
  border-radius:var(--radius-md);    /* 11 */
  line-height:normal;
  white-space:nowrap;
}
.cr-tool--utm .cr-utm__btn--main{ padding:0 20px; font-size:var(--fs-body-sm); }   /* 14.5 */
.cr-tool--utm .cr-utm__btn--ghost{ padding:0 18px; font-size:var(--fs-ui); color:var(--text-muted); }
.cr-tool--utm .cr-utm__btn svg,
.cr-tool--utm .cr-utm__textbtn svg{ flex:none; }
/* Две подписи в одной ячейке грида: ширина кнопки = ширине большей, .is-copied не даёт скачка */
.cr-tool--utm .cr-utm__swap{ display:inline-grid; align-items:center; justify-items:center; }
.cr-tool--utm .cr-utm__swap > span{ grid-area:1 / 1; display:inline-flex; align-items:center; gap:8px; }
.cr-tool--utm .cr-utm__textbtn .cr-utm__swap > span{ gap:5px; justify-self:end; }
.cr-tool--utm .cr-utm__textbtn .cr-utm__swap svg{ width:13px; height:13px; }
.cr-tool--utm .cr-utm__swap-b{ visibility:hidden; }
.cr-tool--utm .is-copied .cr-utm__swap-a{ visibility:hidden; }
.cr-tool--utm .is-copied .cr-utm__swap-b{ visibility:visible; }

.cr-tool--utm .cr-utm__status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  font-size:var(--fs-meta-sm);       /* 13 */
  line-height:normal;
  color:var(--text-muted);
}
.cr-tool--utm .cr-utm__status-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.cr-tool--utm .cr-utm__status.is-ok .cr-utm__status-dot{ background:var(--success); }
/* Текст статуса пишет utm.js; без JS оставалась бы красная точка без подписи */
.cr-tool--utm .cr-utm__status:has(.cr-utm__status-text:empty){ display:none; }

/* --- «Проверка»: плоский список, маркеры «!»/«✓» ставит CSS (строки создаёт utm.js) --- */
.cr-tool--utm .cr-utm__checks{ margin:0 0 44px; }
.cr-tool--utm .cr-utm__checks-title,
.cr-tool--utm .cr-utm__sec-title{
  margin:0 0 4px;
  font-size:var(--fs-meta-sm);       /* 13 */
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  line-height:normal;
  color:var(--text-primary);
}
.cr-tool--utm .cr-utm__warnlist{ margin:0; padding:0; list-style:none; }
.cr-tool--utm .cr-utm__fixes,
.cr-tool--utm .cr-utm__warnlist li{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:10px 0;
  border-bottom:1px solid var(--hairline);
  font-size:var(--fs-ui);            /* 14 */
  line-height:1.5;                   /* нет токена */
  color:var(--text-body);
}
.cr-tool--utm .cr-utm__fixes::before,
.cr-tool--utm .cr-utm__warnlist li::before{
  content:"!";
  flex:none;
  width:14px;
  text-align:center;
  font-weight:var(--fw-bold);
  color:var(--danger);
}
.cr-tool--utm .cr-utm__fixes::before,
.cr-tool--utm .cr-utm__warnlist li.is-ok::before{ content:"\2713"; color:var(--success); }
.cr-tool--utm .cr-utm__err{
  margin:8px 0 0;
  font-size:var(--fs-meta-sm);
  line-height:1.5;
  color:var(--danger);
}
.cr-tool--utm .cr-utm__err--soft{ color:var(--warning); }

/* --- Вторичные секции после «Проверки» (в макете их нет): плоско, заголовок как у «Проверки» --- */
.cr-tool--utm .cr-utm__sec{ margin:0 0 36px; }
.cr-tool--utm .cr-utm__sec--last{ margin:0 0 44px; }
.cr-tool--utm .cr-utm__sec-title{ margin:0 0 8px; }
.cr-tool--utm .cr-utm__sec-lead{
  max-width:64ch;
  margin:0 0 16px;
  font-size:var(--fs-ui);
  line-height:1.5;
  color:var(--text-muted);
}
/* История и шаблоны — строки-аккордеоны с хайрлайнами */
.cr-tool--utm .cr-utm__fold{ border-bottom:1px solid var(--hairline); }
.cr-tool--utm .cr-utm__fold:first-child{ border-top:1px solid var(--hairline); }
.cr-tool--utm .cr-utm__fold-sum{
  padding:13px 0;
  font-size:var(--fs-ui);            /* 14 */
  font-weight:var(--fw-semibold);
  color:var(--text-primary);
}
.cr-tool--utm .cr-utm__fold-body{ padding:0 0 14px; }
.cr-tool--utm .cr-utm__share{ margin:12px 0 0; font-size:var(--fs-meta); }
.cr-tool--utm .cr-utm__ul{ margin:0; padding:0; list-style:none; }
.cr-tool--utm .cr-utm__ul li{ font-size:var(--fs-caption); line-height:1.5; color:var(--text-body); }
.cr-tool--utm .cr-utm-hrow{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:7px 0;
}
.cr-tool--utm .cr-utm-hurl{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--cr-utm-mono);
  color:var(--text-muted);
  cursor:pointer;
  transition:color var(--transition);
}
.cr-tool--utm .cr-utm-hbtns{ display:flex; flex:none; gap:14px; }
.cr-tool--utm .cr-utm-hcopy,
.cr-tool--utm .cr-utm-hrestore,
.cr-tool--utm .cr-utm-tapply,
.cr-tool--utm .cr-utm-tdel{
  min-height:24px;
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  line-height:normal;
  color:var(--accent);
  transition:color var(--transition);
}
.cr-tool--utm .cr-utm-tdel{ color:var(--text-muted-2); font-weight:var(--fw-medium); }
.cr-tool--utm .cr-utm-muted{ color:var(--text-muted-2); }
.cr-tool--utm .cr-utm__ul li.cr-utm-muted{ padding:2px 0 8px; }
.cr-tool--utm .cr-utm__tplsave{ display:flex; align-items:flex-end; gap:16px; margin:6px 0 0; }
.cr-tool--utm .cr-utm__tplsave .cr-utm__input{ max-width:269px; }

/* Сокращалка: тот же бокс, что у адреса (сервис — префикс), «Сократить» — outline 42 */
.cr-tool--utm .cr-utm__shortrow{ display:flex; align-items:center; gap:10px; }
.cr-tool--utm .cr-utm__addr--short{ flex:1; margin:0; }
.cr-tool--utm .cr-utm__addr--short .cr-utm-ib__input{ color:var(--text-heading); }
/* QR: рамка канваса — функциональная (граница изображения), не декоративная */
.cr-tool--utm .cr-utm__qr{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; }
.cr-tool--utm .cr-utm__qr-canvas{
  display:flex;
  align-items:center;
  justify-content:center;
  width:168px;
  height:168px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface-base);
}
.cr-tool--utm .cr-utm__qr-canvas img,
.cr-tool--utm .cr-utm__qr-canvas canvas{ display:block; }
.cr-tool--utm .cr-utm__qr-ph{
  font-size:var(--fs-caption);
  line-height:1.45;                  /* нет токена: плейсхолдер QR */
  text-align:center;
  color:var(--text-ghost);
}
.cr-tool--utm .cr-utm__qr-side{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }

/* Трекер и постбек: селекты — подчёркивания с шевроном */
.cr-tool--utm .cr-utm__grid--trk,
.cr-tool--utm .cr-utm__grid--pb{ margin:0 0 20px; }
.cr-tool--utm .cr-utm__cell .cr-utm__label--block{ margin:0 0 6px; }
.cr-tool--utm .cr-utm-ddfield{ position:relative; }
.cr-tool--utm .cr-utm-ddsel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  height:42px;
  padding:0 0 8px;
  border-bottom:1px solid var(--border);
  border-radius:0;
  font-size:var(--fs-ui);
  line-height:normal;
  text-align:left;
  color:var(--text-primary);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.cr-tool--utm .cr-utm-ddfield.is-open .cr-utm-ddsel,
.cr-tool--utm .cr-utm-ddsel:focus-visible{
  border-radius:0;
  border-bottom-color:var(--accent-bright);
  box-shadow:0 1px 0 0 var(--accent-bright);
}
.cr-tool--utm .cr-utm-ddfield .cr-utm-menu{ top:calc(100% + 4px); right:0; }
.cr-tool--utm .cr-utm__map{ margin:0 0 4px; }
.cr-tool--utm .cr-utm__map li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  padding:9px 0;
  border-bottom:1px solid var(--hairline);
  font-size:var(--fs-meta);
  color:var(--text-body);
}
.cr-tool--utm .cr-utm__map code{ font-size:var(--fs-meta-sm); color:var(--accent); }
.cr-tool--utm .cr-utm__map code:first-child{ color:var(--text-heading); }
.cr-tool--utm .cr-utm-arrow{ color:var(--text-ghost); }
/* Мини-панель результата: оболочка панели без sticky и тени */
.cr-tool--utm .cr-utm__mini{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 0;
  padding:9px 9px 9px 18px;
  border:1px solid #C9D0DB;          /* нет токена */
  border-radius:var(--radius-xl);
  background:var(--surface-base);
}
.cr-tool--utm .cr-utm__mini-out{
  flex:1;
  height:42px;
  padding:0;
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-meta);
  line-height:normal;
  color:var(--text-heading);
  text-overflow:ellipsis;
}
.cr-tool--utm .cr-utm__mini-out:focus-visible{ box-shadow:none; }

/* ============================================================
   Пакетная генерация (#cr-utm-bulk)
   ============================================================ */
.cr-tool--utm .cr-bulk__form{ margin:0 0 44px; }
.cr-tool--utm .cr-bulk__modes{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.cr-tool--utm .cr-bulk__count{
  flex:none;
  font-size:var(--fs-caption);
  line-height:normal;
  color:var(--text-muted-2);
  white-space:nowrap;
}
.cr-tool--utm .cr-bulk__count b{ font-weight:var(--fw-regular); }
.cr-tool--utm .cr-bulk__count b.is-over{ font-weight:var(--fw-semibold); color:var(--danger); }
.cr-tool--utm .cr-bulk__count--row{ margin:0 0 24px; }
.cr-tool--utm .cr-bulk__hint{ font-size:var(--fs-caption); font-weight:var(--fw-regular); color:var(--text-muted-2); }
.cr-tool--utm textarea.cr-bulk__ta{
  display:block;
  width:100%;
  margin:0 0 24px;
  padding:12px 16px;
  border:1px solid #C9D0DB;          /* нет токена */
  border-radius:var(--radius-lg);
  background:var(--surface-base);
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-meta);          /* 13.5 */
  line-height:1.6;                   /* нет токена */
  resize:vertical;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.cr-tool--utm textarea.cr-bulk__ta:focus,
.cr-tool--utm textarea.cr-bulk__ta:focus-visible{
  border-color:var(--accent-bright);
  border-radius:var(--radius-lg);
  box-shadow:var(--ring-focus);
}
.cr-tool--utm .cr-bulk__matrix{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px; }
.cr-tool--utm .cr-bulk__mcell{ min-width:0; }
.cr-tool--utm .cr-bulk__mcell .cr-utm__label--block{ margin:0 0 7px; }
.cr-tool--utm .cr-bulk__mcell .cr-utm__tag{ font-size:var(--fs-caption); color:var(--text-muted-2); }
.cr-tool--utm .cr-bulk__mcell textarea.cr-bulk__ta{ margin:0 0 18px; }
.cr-tool--utm .cr-bulk__selrow{ display:flex; flex-wrap:wrap; gap:20px; margin:0 0 20px; }
.cr-tool--utm .cr-bulk__sel{ display:block; flex:0 1 269px; min-width:0; }
.cr-tool--utm .cr-bulk__sel .cr-utm__label--block{ margin:0 0 6px; }
.cr-tool--utm .cr-bulk__sel--inline{ flex:0 1 190px; }
.cr-tool--utm .cr-bulk__common > .cr-utm__label--block{ margin:0 0 16px; line-height:1.4; }
.cr-tool--utm .cr-bulk-inbox[data-mode="paste"] .cr-utm__label{ line-height:1.4; }   /* подпись в 2–3 строки */
.cr-tool--utm .cr-bulk__runrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.cr-tool--utm .cr-bulk__progress{ margin-left:auto; font-size:var(--fs-meta-sm); color:var(--text-muted-2); }
.cr-tool--utm .cr-bulk__results{ margin:0 0 44px; }
.cr-tool--utm .cr-bulk__summary{
  margin:0 0 14px;
  font-size:15px;                    /* нет токена */
  font-weight:var(--fw-semibold);
  line-height:1.4;
  color:var(--text-primary);
}
.cr-tool--utm .cr-utm__checks--bulk{ margin:0 0 20px; }
.cr-tool--utm .cr-bulk__filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 26px; margin:0 0 16px; }
.cr-tool--utm .cr-bulk__filters .cr-utm__check{ min-height:42px; padding:0 0 8px; }
.cr-tool--utm .cr-bulk__tablewrap{ max-height:560px; overflow:auto; }
.cr-tool--utm .cr-bulk__table{ font-size:var(--fs-meta-sm); }
.cr-tool--utm .cr-bulk__table tbody td{ padding:10px 16px 10px 0; vertical-align:top; }
.cr-tool--utm .cr-bulk__table tbody td:last-child{ padding-right:0; }
.cr-tool--utm .cr-bulk-urlcell{ font-family:var(--cr-utm-mono); font-size:var(--fs-caption); color:var(--text-heading); word-break:break-all; }
.cr-tool--utm .cr-bulk-st{ white-space:nowrap; cursor:default; }
.cr-tool--utm .cr-bulk-details td{ font-size:var(--fs-caption); color:var(--text-muted); }
.cr-tool--utm .cr-bulk-details ul{ margin:0; padding:0 0 0 16px; }
/* Бейджи статусов — функциональные (состояние строки), поэтому с тинтом */
.cr-tool--utm .cr-utm-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-caption-sm);
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}
.cr-tool--utm .cr-utm-badge.is-ok{ background:var(--success-tint); color:var(--success); }
.cr-tool--utm .cr-utm-badge.is-warn{ background:var(--warning-tint); color:var(--warning); }
.cr-tool--utm .cr-utm-badge.is-err{ background:var(--danger-tint); color:var(--danger); }
.cr-tool--utm .cr-bulk__pager{ display:flex; align-items:center; gap:14px; margin:12px 0 0; }
.cr-tool--utm .cr-bulk__exports{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:20px 0 0; }

/* ============================================================
   Контентные секции (вне .cr-utm — видны в обоих режимах)
   ============================================================ */
.cr-tool--utm .cr-utm__h2{
  margin:0 0 6px;
  font-size:23px;                    /* нет токена: прототип UTM v2 держит 23 (токен статьи с v5 = 21) */
  line-height:normal;
}
.cr-tool--utm .cr-utm__lead{
  max-width:64ch;
  margin:0 0 16px;
  font-size:var(--fs-body);          /* 15.5 */
  line-height:1.7;                   /* нет токена */
  color:var(--text-body);
}

/* Вводка content_utm — под инструментом, прозой лида. article.css грузится ПОСЛЕ этого файла,
   поэтому у переопределений статейной типографики в селекторе есть скоуп страницы. */
.cr-tool--utm .cr-utm__intro{ margin:0 0 44px; }
.cr-tool--utm .cr-tool__prose,
.cr-tool--utm .cr-tool__prose p,
.cr-tool--utm .cr-tool__prose > p:first-child,
.cr-tool--utm .cr-tool__prose li{
  font-size:var(--fs-body);
  line-height:1.7;                   /* нет токена */
  color:var(--text-body);
}
.cr-tool--utm .cr-tool__prose p,
.cr-tool--utm .cr-tool__prose > p:first-child{ max-width:64ch; margin:0 0 12px; }
.cr-tool--utm .cr-tool__prose ul,
.cr-tool--utm .cr-tool__prose ol{ max-width:64ch; margin:0 0 12px; gap:6px; }
.cr-tool--utm .cr-tool__prose > :last-child{ margin-bottom:0; }

/* Справочник переменных */
.cr-tool--utm .cr-utm__vars{ margin:0 0 44px; }
.cr-tool--utm .cr-utm-vtabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.cr-tool--utm .cr-utm-vtabs > li{ display:flex; }
/* Сервер панели не прячет: без JS справочник читается целиком, ссылки вкладок работают якорями.
   Флаг .is-js ставит инлайн-строка variables.php до разбора панелей (вспышки нет); дальше
   utm.js переключает вкладки инлайновым display — он сильнее этих правил. */
.cr-tool--utm .cr-utm__vars.is-js .cr-utm-vpane{ display:none; }
.cr-tool--utm .cr-utm__vars.is-js .cr-utm-vpane:first-child{ display:block; }
/* Без JS панели идут подряд — отбивка между ними (у открытой вкладки соседей нет) */
.cr-tool--utm .cr-utm__vars:not(.is-js) .cr-utm-vpane + .cr-utm-vpane{ margin-top:32px; }
.cr-tool--utm .cr-utm-vpane > :last-child{ margin-bottom:0; }
.cr-tool--utm .cr-utm__vtitle{
  margin:0 0 6px;
  font-size:16px;                    /* нет токена */
  font-weight:var(--fw-semibold);
  line-height:1.4;
  color:var(--text-primary);
}
.cr-tool--utm .cr-utm__prose{ margin:0 0 20px; }
.cr-tool--utm .cr-utm__prose,
.cr-tool--utm .cr-utm__prose p,
.cr-tool--utm .cr-utm__prose > p:first-child,
.cr-tool--utm .cr-utm__prose li,
.cr-tool--utm .cr-utm__landing,
.cr-tool--utm .cr-utm__landing p,
.cr-tool--utm .cr-utm__landing > p:first-child,
.cr-tool--utm .cr-utm__landing li{
  font-size:var(--fs-body-sm);       /* 14.5 */
  line-height:var(--lh-body);
  color:var(--text-body);
}
.cr-tool--utm .cr-utm__prose p,
.cr-tool--utm .cr-utm__prose > p:first-child,
.cr-tool--utm .cr-utm__landing p,
.cr-tool--utm .cr-utm__landing > p:first-child{ margin:0 0 12px; }
.cr-tool--utm .cr-utm__prose ul,
.cr-tool--utm .cr-utm__prose ol,
.cr-tool--utm .cr-utm__landing ul,
.cr-tool--utm .cr-utm__landing ol{ margin:0 0 12px; gap:6px; }
.cr-tool--utm .cr-utm__prose > :last-child{ margin-bottom:0; }
.cr-tool--utm .cr-utm__tplrow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 7px;
}
.cr-tool--utm .cr-utm__tpl{
  margin:0 0 22px;
  padding:0 0 16px;
  border-bottom:1px solid var(--hairline);
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-meta-sm);       /* 13 */
  line-height:1.75;                  /* нет токена */
  color:var(--text-heading);
  overflow-wrap:anywhere;
}
/* Справочник макросов — общий компонент .cr-table-wrap/.cr-table (components.css; правки 19.09 §4: рамка 1.5 #C5D9DF,
   шапка #F3FBFD/accent 600, ячейки 11×16). Здесь — только моно-первая колонка 13 accent и отбивки. */
.cr-tool--utm .cr-utm__mtable-wrap{ margin:0 0 14px; }
.cr-tool--utm .cr-utm__mtable-wrap:last-child{ margin-bottom:2px; }   /* макет: 14 + спейсер 32 = 46 */
.cr-tool--utm .cr-utm__mtable tbody th{
  padding:11px 16px;
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-meta-sm);       /* 13 */
  font-weight:var(--fw-regular);
  line-height:1.55;
  text-align:left;
  vertical-align:baseline;
  color:var(--accent);
  white-space:nowrap;
}
/* Длинные ячейки-перечни (класс ставит variables.php): перенос по пробелам, вклад в ширину колонки ограничен */
.cr-tool--utm .cr-utm__mtable tbody th.is-long{ max-width:260px; white-space:normal; }
.cr-tool--utm .cr-utm__mtable tbody td{ vertical-align:baseline; line-height:1.55; }   /* нет токена */
.cr-tool--utm .cr-utm__more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  line-height:normal;
  color:var(--accent);
}
.cr-tool--utm .cr-utm__more svg{ flex:none; }

/* Посадочные: «Пример готовой ссылки» и «Разбор ссылки по частям» */
.cr-tool--utm .cr-utm__landing{ margin:12px 0 44px; }
.cr-tool--utm .cr-utm__landing > :last-child{ margin-bottom:0; }
/* Длинные ссылки и макросы в текстах должны ломаться по любому символу, а таблицы разбора —
   получать свою горизонтальную прокрутку: иначе на мобайле таблица растягивает layout viewport
   (на /utm/tiktok/ было 941 px вместо 390). Вид таблицы — плоский, как у справочника. */
.cr-tool--utm .cr-article code,
.cr-tool--utm .cr-tool__faq-a code,
.cr-tool--utm .cr-utm-modal__body code{ font-size:.93em; overflow-wrap:anywhere; }
.cr-tool--utm .cr-article table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  font-size:var(--fs-ui);
}
.cr-tool--utm .cr-article table thead tr{ background:none; }
.cr-tool--utm .cr-article table th{
  min-width:120px;
  padding:0 16px 8px 0;
  border-bottom:1px solid var(--border);
  background:none;
  font-size:var(--fs-caption-sm);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;              /* нет токена */
  text-transform:uppercase;
  line-height:normal;
  color:var(--text-label);
}
.cr-tool--utm .cr-article table td{
  min-width:120px;
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--hairline);
  line-height:1.55;
  vertical-align:baseline;
}
.cr-tool--utm .cr-article table tr + tr{ border-top:0; }
.cr-tool--utm .cr-article table td:first-child{ font-weight:var(--fw-regular); color:var(--accent); }

/* «Частые ошибки»: нумерованные строки, номер — CSS-счётчик */
.cr-tool--utm .cr-utm__mistakes{
  margin:0 0 44px;
  padding:0;
  list-style:none;
  counter-reset:cr-utm-mistake;
}
.cr-tool--utm .cr-utm__mistake{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:0 12px;
  padding:17px 0;
  border-bottom:1px solid var(--hairline);
  counter-increment:cr-utm-mistake;
}
.cr-tool--utm .cr-utm__mistake::before{
  content:counter(cr-utm-mistake, decimal-leading-zero);
  font-family:var(--cr-utm-mono);
  font-size:var(--fs-meta-sm);       /* 13 */
  font-weight:var(--fw-semibold);
  line-height:1.7;
  color:var(--border-hover);         /* #B9C1CE: значение токена рамки, роль здесь — текст номера */
}
.cr-tool--utm .cr-utm__mistake-body{ min-width:0; }
.cr-tool--utm .cr-utm__mistake-title{
  margin:0 0 5px;
  font-size:16px;                    /* нет токена */
  font-weight:var(--fw-semibold);
  line-height:1.4;
  color:var(--text-primary);
}
.cr-tool--utm .cr-utm__mistake-text,
.cr-tool--utm .cr-utm__mistake-text p,
.cr-tool--utm .cr-utm__mistake-text > p:first-child{
  margin:0 0 8px;
  font-size:var(--fs-body-sm);       /* 14.5 */
  line-height:var(--lh-body);
  color:var(--text-muted);
  text-wrap:pretty;
}
.cr-tool--utm .cr-utm__mistake-text,
.cr-tool--utm .cr-utm__mistake-text > p:last-child{ margin-bottom:0; }

/* FAQ: значения v2 поверх общего аккордеона tools.css */
.cr-tool--utm .cr-tool__faq-q{
  gap:14px;
  padding:17px 0;
  font-size:16px;                    /* нет токена */
  line-height:1.4;
}
.cr-tool--utm .cr-tool__faq-a{
  padding:0 28px 19px 0;
  font-size:15px;                    /* нет токена */
  line-height:1.7;
}
.cr-tool--utm .cr-tool__faq-a p{ margin:0 0 10px; }
.cr-tool--utm .cr-tool__faq-a p:last-child{ margin-bottom:0; }

/* «UTM по площадкам» в сайдбаре: общие .cr-side-title + .cr-tool-others__link (tools.css). Анкоры —
   описательные title прода в две строки, поэтому межстрочный интервал плотнее наследуемого 1.65 */
.cr-tool--utm .cr-utm-side .cr-tool-others__link{ line-height:1.4; }

/* Мета «Обновлено…» — мелкой строкой в конце колонки (Р-31) */
.cr-tool--utm .cr-utm__updated{
  margin:28px 0 0;
  font-size:var(--fs-caption);
  line-height:1.5;
  color:var(--text-muted-2);
}

/* --- Модалки-подсказки «?» (в макете нет — оставлены как есть) --- */
.cr-utm-modals{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:var(--overlay);
}
.cr-utm-modals.is-active{ display:flex; }
.cr-utm-modal{
  position:relative;
  display:none;
  width:min(620px,100%);
  max-height:82vh;
  overflow:auto;
  padding:26px 28px;
  border-radius:var(--radius-modal);
  background:var(--surface-base);
  box-shadow:var(--shadow-modal);
}
.cr-utm-modal.is-active{ display:block; }
.cr-utm-modal__x{
  position:absolute;
  top:16px;
  right:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-pill);
  background:var(--surface-close);
  font-size:var(--fs-h2);
  line-height:1;
  color:var(--text-muted);
  cursor:pointer;
  transition:background var(--transition);
}
.cr-utm-modal__label{
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--text-label);
}
.cr-utm-modal__title{
  margin:8px 0 14px;
  padding-right:40px;
  font-size:var(--fs-h2);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-snug);
  color:var(--text-heading);
}
.cr-utm-modal__body p{ margin:0 0 12px; font-size:var(--fs-body-sm); line-height:var(--lh-body); color:var(--text-body); }
.cr-utm-modal__list{ margin:0; padding:0 0 0 18px; }
.cr-utm-modal__list li{ margin:0 0 6px; font-size:var(--fs-body-sm); line-height:var(--lh-body); color:var(--text-body); }

/* --- Тост (шаринг, сокращалка, история, ошибки копирования). Аппендится в body, поэтому без
   скоупа страницы. Показывается СВЕРХУ: у низа окна висит липкая панель результата, и тост
   ложился бы на её кнопки и статус. Под закреплённой зоной: шапка (+ полоса A1, если липкая — --cr-a1-stick: телефон 123,
   планшет 159, ПК 100) + зазор 13; без A1 — 59 + 13 = 72, как было. --- */
.cr-utm-toast{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + var(--cr-a1-stick, 59px) + 13px);
  z-index:1200;
  width:max-content;                 /* без этого left:50% ужимает тост до половины экрана */
  max-width:calc(100vw - 28px);
  transform:translate(-50%,-12px);
  padding:11px 18px;
  border-radius:var(--radius-md);
  background:var(--surface-inverse);
  font-size:var(--fs-body-sm);
  line-height:1.4;
  color:var(--text-on-accent);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition), transform var(--transition);
}
.cr-utm-toast.is-active{ opacity:1; transform:translate(-50%,0); }

/* --- Hover — только там, где есть указатель (05-адаптив) --- */
@media (hover:hover){
  .cr-tool--utm .cr-utm__tab:hover{ color:var(--text-primary); }
  .cr-tool--utm .cr-utm__tab.is-active:hover{ color:var(--accent); }
  .cr-tool--utm .cr-utm__clear:hover{ color:var(--danger); }
  .cr-tool--utm .cr-utm__textbtn:hover{ color:var(--accent-bright); }
  .cr-tool--utm .cr-utm__textbtn--muted:hover{ color:var(--danger); }
  .cr-tool--utm .cr-utm-q:hover{ border-color:var(--accent-bright); color:var(--accent); }
  .cr-tool--utm .cr-utm-ib__btn:hover{ color:var(--text-primary); }
  .cr-tool--utm .cr-utm-menu__item:hover{ background:var(--surface-hover); color:var(--text-primary); }
  .cr-tool--utm .cr-utm__chip:hover,
  .cr-tool--utm .cr-utm-vtab:hover{ border-color:var(--border-hover); }
  .cr-tool--utm .cr-utm__chip:has(input:checked):hover,
  .cr-tool--utm .cr-utm-vtab.is-active:hover{ border-color:var(--accent-bright); color:var(--accent); }
  .cr-tool--utm .cr-utm__btn--ghost:hover{ border-color:var(--border-hover); color:var(--text-primary); }
  .cr-tool--utm .cr-utm-crm:hover{ color:var(--danger); }
  .cr-tool--utm .cr-utm-hurl:hover{ color:var(--accent); }
  .cr-tool--utm .cr-utm-hcopy:hover,
  .cr-tool--utm .cr-utm-hrestore:hover,
  .cr-tool--utm .cr-utm-tapply:hover{ color:var(--accent-bright); }
  .cr-tool--utm .cr-utm-tdel:hover{ color:var(--danger); }
  .cr-tool--utm .cr-utm-ddsel:hover{ border-bottom-color:var(--border-hover); }
  .cr-tool--utm .cr-utm__more:hover{ color:var(--accent-bright); }
  .cr-utm-modal__x:hover{ background:var(--surface-close-hover); }
}

/* --- Низкое окно (ландшафт телефона, клавиатура с resize-вьюпортом): панель зажимается верхней
   кромкой формы и закрывала бы адрес и пресеты — встаёт в поток (Р-33) --- */
@media (max-height:600px){
  .cr-tool--utm .cr-utm__dock{ position:static; }
}

/* ============================================================
   Планшет 768–1023: десктопная раскладка без сайдбара (он уходит под контент — layout.css).
   Узкая колонка полей (RU: 768–850 и 1024–1170, EN: 1024–1090; «Расширенные» — до 1180): подпись
   «Название кампании utm_campaign обяз.» уходит на две строки (flex-wrap), соседняя — нет, и
   линии полей одного ряда вставали на разной высоте (15px). Ряды «подпись / поле / подсказка»
   делаются общими для всей строки грида (subgrid) — решение не зависит от длины текста и языка;
   однострочная подпись прижата к своему полю. На ≥1200 геометрия та же, что без subgrid
   (грид 849×146, линии 21 / 104). Нет поддержки subgrid — остаётся прежняя раскладка.
   ============================================================ */
@media (min-width:768px){
  @supports (grid-template-rows:subgrid){
    .cr-tool--utm .cr-utm__form > .cr-utm__grid,
    .cr-tool--utm .cr-utm__grid--adv{ row-gap:0; }   /* отступ между рядами ячеек — margin подписи ниже */
    .cr-tool--utm .cr-utm__form > .cr-utm__grid > .cr-utm__cell,
    .cr-tool--utm .cr-utm__grid--adv > .cr-utm__cell{
      display:grid;
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:subgrid;
      grid-row:span 3;               /* подпись / поле / подсказка пресета */
    }
    .cr-tool--utm .cr-utm__grid--adv > .cr-utm__cell{ grid-row:span 2; }   /* подсказок нет */
    .cr-tool--utm .cr-utm__form > .cr-utm__grid > .cr-utm__cell > .cr-utm__labelrow,
    .cr-tool--utm .cr-utm__grid--adv > .cr-utm__cell > .cr-utm__labelrow{ align-self:end; }
    .cr-tool--utm .cr-utm__form > .cr-utm__grid > .cr-utm__cell:nth-child(n+4) > .cr-utm__labelrow,
    .cr-tool--utm .cr-utm__grid--adv > .cr-utm__cell:nth-child(n+4) > .cr-utm__labelrow{ margin-top:20px; }
  }
}

/* ============================================================
   Мобайл ≤767 (generator-utm-mobile.md)
   ============================================================ */
@media (max-width:767px){
  .cr-tool--utm .cr-utm__desk{ display:none; }
  .cr-tool--utm .cr-utm__mob{ display:inline; }

  .cr-tool.cr-tool--utm > .cr-crumbs{ margin:0 0 14px; }
  .cr-tool--utm .cr-tool__title{
    margin:0 0 18px;                 /* меты и лида нет: 18 до табов */
    font-size:24px;                  /* нет токена: моб. H1 инструмента */
    letter-spacing:var(--ls-tight);
    line-height:1.15;
  }
  .cr-tool--utm .cr-utm__tabs{ gap:20px; margin:0 0 20px; }
  .cr-tool--utm .cr-utm__tab{ min-height:44px; }

  .cr-tool--utm .cr-utm__form{ margin:0; }
  /* Тач-зона 45 без сдвига строки: внешний бокс остаётся 15 (приём .cr-cookies__link) */
  .cr-tool--utm .cr-utm__clear{ padding:15px 0; margin:-15px 0; }
  .cr-tool--utm .cr-utm__addr{ margin:0 0 22px; }
  .cr-tool--utm .cr-utm-ib__btn{ padding-left:14px; font-size:16px; }
  .cr-tool--utm .cr-utm__addr .cr-utm-ib__input{ padding-right:14px; font-size:16px; }  /* макет 15: <16 = зум iOS */
  .cr-tool--utm .cr-utm__addr.has-scheme .cr-utm-ib__input{ padding-left:14px; }

  /* Пресеты и вкладки справочника — full-bleed скроллеры */
  .cr-tool--utm .cr-utm__presetbox{ margin:0 0 24px; }
  .cr-tool--utm .cr-utm__presets,
  .cr-tool--utm .cr-utm-vtabs{
    flex-wrap:nowrap;
    margin-left:calc(-1 * var(--gutter));
    margin-right:calc(-1 * var(--gutter));
    padding:0 var(--gutter) 6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cr-tool--utm .cr-utm__presets::-webkit-scrollbar,
  .cr-tool--utm .cr-utm-vtabs::-webkit-scrollbar{ display:none; }
  .cr-tool--utm .cr-utm-vtabs{ margin-bottom:18px; }
  .cr-tool--utm .cr-utm__chip,
  .cr-tool--utm .cr-utm-vtab{ height:36px; padding:0 14px; font-size:var(--fs-meta); }   /* 13.5 */
  .cr-tool--utm .cr-utm__sub{ margin:4px 0 0; }

  /* Поля — одна колонка, подчёркивание 44 / моно 16 */
  .cr-tool--utm .cr-utm__grid{ grid-template-columns:minmax(0,1fr); gap:18px; margin:0 0 16px; }
  .cr-tool--utm .cr-utm__labelrow{ margin:0 0 4px; }
  .cr-tool--utm .cr-utm__labelrow--split{ margin:0 0 7px; }
  .cr-tool--utm .cr-utm__cell .cr-utm__label--block{ margin:0 0 4px; }
  .cr-tool--utm .cr-utm__line,
  .cr-tool--utm .cr-utm-custom-row .cr-utm__input,
  .cr-tool--utm .cr-utm-ddsel{ height:44px; font-size:16px; }
  .cr-tool--utm .cr-utm-q{ top:9px; }
  .cr-tool--utm select.cr-utm__line{ background-position:right 0 top 10px; }
  .cr-tool--utm .cr-utm__fieldnote{ margin:0 0 18px; }
  .cr-tool--utm .cr-utm__fieldnote--tight{ margin:8px 0 0; }
  .cr-tool--utm .cr-utm__fieldnote--top{ margin:0 0 14px; }
  .cr-tool--utm .cr-utm__adv-sum{ min-height:48px; }
  .cr-tool--utm .cr-utm__grid--adv{ margin:0 0 14px; }
  .cr-tool--utm .cr-utm-custom-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px; gap:12px; }
  .cr-tool--utm .cr-utm-crm{ height:44px; }

  /* Опции — колонка тач-строк 44, чекбокс 18; между строками 4 (05-адаптив; в макете 2) */
  .cr-tool--utm .cr-utm__opts{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    margin:0 0 22px;
    padding:10px 0 0;
  }
  .cr-tool--utm .cr-utm__check{ display:flex; gap:12px; min-height:44px; font-size:var(--fs-body-sm); }   /* 14.5 */
  .cr-tool--utm .cr-utm__check input{ width:18px; height:18px; }

  /* Липкая панель */
  .cr-tool--utm .cr-utm__dock{
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    padding:14px 14px 13px;
  }
  .cr-tool--utm .cr-utm__dock-head{ margin:0 0 8px; }
  .cr-tool--utm .cr-utm__dock-out{
    max-height:112px;                /* ≈5 строк, дальше внутренний скролл */
    margin:0 0 12px;
    overflow:auto;
    font-size:var(--fs-meta-sm);     /* 13 */
    line-height:1.7;
  }
  .cr-tool--utm .cr-utm__dock-out:empty{ font-size:var(--fs-ui); }
  .cr-tool--utm .cr-utm__dock-row{ gap:8px; }
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn{ height:46px; }
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn--main{ flex:1 1 0; min-width:0; padding:0 12px; }
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn--ghost{ padding:0 14px; font-size:var(--fs-meta); }
  /* «Параметры» → «✓»: вторая подпись — одна иконка, ширину держит первая */
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn--ghost .cr-utm__swap-done{ display:none; }
  .cr-tool--utm .cr-utm__status{
    flex:1 1 100%;
    align-items:flex-start;
    margin:2px 0 0;
    font-size:var(--fs-caption);
    line-height:1.4;
  }
  .cr-tool--utm .cr-utm__status-dot{ margin:6px 0 0; }

  .cr-tool--utm .cr-utm__checks{ margin:28px 0 0; }
  .cr-tool--utm .cr-utm__checks-title{ margin:0 0 2px; font-size:var(--fs-caption); }
  .cr-tool--utm .cr-utm__fixes,
  .cr-tool--utm .cr-utm__warnlist li{ padding:11px 0; }

  /* Вторичные секции: ниже «Проверки», вне зоны липкой панели */
  .cr-tool--utm .cr-utm__sec{ margin:28px 0 0; }
  .cr-tool--utm .cr-utm__sec--last{ margin:28px 0 0; }
  .cr-tool--utm .cr-utm__sec-title{ font-size:var(--fs-caption); }
  .cr-tool--utm .cr-utm__fold-sum{ min-height:48px; padding:0; }
  .cr-tool--utm .cr-utm__textbtn{ min-height:44px; }
  .cr-tool--utm .cr-utm__presetbox .cr-utm__textbtn{ margin:0; }
  .cr-tool--utm .cr-utm-hrow{ flex-wrap:wrap; gap:0 12px; padding:6px 0; }
  .cr-tool--utm .cr-utm-hurl{ flex:1 1 100%; }
  .cr-tool--utm .cr-utm-hcopy,
  .cr-tool--utm .cr-utm-hrestore,
  .cr-tool--utm .cr-utm-tapply,
  .cr-tool--utm .cr-utm-tdel{ min-height:40px; }
  .cr-tool--utm .cr-utm__tplsave .cr-utm__input{ max-width:none; }
  .cr-tool--utm .cr-utm__shortrow{ flex-wrap:wrap; }
  .cr-tool--utm .cr-utm__addr--short{ flex:1 1 100%; }
  .cr-tool--utm .cr-utm__shortrow .cr-utm__btn{ flex:1 1 100%; height:46px; }
  .cr-tool--utm .cr-utm__qr-side .cr-utm__btn{ height:46px; }
  .cr-tool--utm .cr-utm__mini{ flex-wrap:wrap; gap:4px 12px; padding:6px 12px 12px; }
  .cr-tool--utm .cr-utm__mini-out{ flex:1 1 100%; font-size:16px; }
  .cr-tool--utm .cr-utm__mini .cr-utm__btn{ flex:1 1 100%; height:46px; }
  .cr-tool--utm .cr-utm-menu{ min-width:140px; }

  /* Пакет */
  .cr-tool--utm .cr-bulk__form{ margin:0; }
  .cr-tool--utm .cr-bulk__modes{ margin:0 0 22px; }
  .cr-tool--utm textarea.cr-bulk__ta{ margin:0 0 22px; padding:12px 14px; font-size:16px; }   /* макет 13.5: <16 = зум iOS */
  .cr-tool--utm .cr-bulk__matrix{ grid-template-columns:minmax(0,1fr); }
  .cr-tool--utm .cr-bulk__sel,
  .cr-tool--utm .cr-bulk__sel--inline{ flex:1 1 100%; }
  .cr-tool--utm .cr-bulk__runrow .cr-utm__btn{ flex:1 1 auto; height:46px; }
  .cr-tool--utm .cr-bulk__runrow .cr-utm__clear{ padding:15px 6px; }
  .cr-tool--utm .cr-bulk__results{ margin:28px 0 0; }
  .cr-tool--utm .cr-bulk__exports .cr-utm__btn{ flex:1 1 100%; height:46px; }
  /* Таблица результатов остаётся таблицей: у неё 4 колонки и свой скролл по X */
  .cr-tool--utm .cr-bulk__table{ min-width:560px; }

  /* Контентные секции: H2 19, хайрлайны вместо отбивок 44 */
  .cr-tool--utm .cr-utm__h2{ margin:0 0 8px; font-size:19px; text-wrap:pretty; }   /* нет токена: моб. H2 */
  .cr-tool--utm .cr-utm__intro{
    margin:30px 0 0;
    padding:24px 0 0;
    border-top:1px solid var(--hairline);
  }
  .cr-tool--utm .cr-tool__prose,
  .cr-tool--utm .cr-tool__prose p,
  .cr-tool--utm .cr-tool__prose > p:first-child,
  .cr-tool--utm .cr-tool__prose li,
  .cr-tool--utm .cr-utm__lead{ font-size:var(--fs-body-sm); line-height:1.6; }
  .cr-tool--utm .cr-utm__lead{ margin:0 0 14px; }
  .cr-tool--utm .cr-utm__vars{
    margin:30px 0 0;
    padding:24px 0 0;
    border-top:1px solid var(--hairline);
  }
  .cr-tool--utm .cr-utm__vtitle{ font-size:15px; }
  .cr-tool--utm .cr-utm__tplrow{ margin:0 0 6px; }
  .cr-tool--utm .cr-utm__tplcopy{ padding:10px 0; margin:-10px 0; }
  .cr-tool--utm .cr-utm__tpl{ margin:0 0 6px; padding:0 0 14px; font-size:var(--fs-caption); line-height:1.7; }
  /* Таблица макросов → стопка: параметр над описанием, без шапки и подписей data-label */
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable-wrap{ margin:0 0 14px; overflow:visible; border:0; border-radius:0; } /* стопка без рамки (моб. прототип не менялся) */
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable,
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable tbody,
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable tr,
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable th,
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable td{ display:block; }
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable thead{
    position:absolute;               /* шапка остаётся скринридеру, визуально её нет */
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable tbody tr{ padding:12px 0; border-bottom:1px solid var(--hairline); }
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable tbody th,
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable tbody th.is-long{
    max-width:none;
    margin:0 0 3px;
    padding:0;
    border:0;
    line-height:1.4;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .cr-tool--utm .cr-utm__vars .cr-utm__mtable tbody td{
    padding:0;
    border:0;
    font-size:var(--fs-ui);
    line-height:1.5;
  }
  .cr-tool--utm .cr-utm__more{ min-height:44px; }
  .cr-tool--utm .cr-utm__landing{ margin:10px 0 28px; }
  .cr-tool--utm .cr-utm__h2--ruled{
    margin-top:26px;
    padding-top:24px;
    border-top:1px solid var(--hairline);
  }
  .cr-tool--utm .cr-utm__mistakes{ margin:0 0 30px; }
  .cr-tool--utm .cr-utm__mistakes ~ .cr-utm__h2,
  .cr-tool--utm .cr-utm__h2--ruled{ margin-bottom:4px; }
  .cr-tool--utm .cr-utm__mistake{ grid-template-columns:24px minmax(0,1fr); gap:0 10px; padding:15px 0; }
  .cr-tool--utm .cr-utm__mistake::before{ font-size:var(--fs-caption); }
  .cr-tool--utm .cr-utm__mistake-title{ margin:0 0 4px; font-size:15px; }
  .cr-tool--utm .cr-utm__mistake-text,
  .cr-tool--utm .cr-utm__mistake-text p,
  .cr-tool--utm .cr-utm__mistake-text > p:first-child{ font-size:var(--fs-ui); line-height:1.6; }
  .cr-tool--utm .cr-tool__faq-q{ min-height:48px; gap:12px; padding:14px 0; font-size:15px; }
  .cr-tool--utm .cr-tool__faq-chev{ width:17px; height:17px; }
  .cr-tool--utm .cr-tool__faq-a{ padding:0 0 16px; font-size:var(--fs-body-sm); line-height:1.6; }
  .cr-tool--utm .cr-utm__updated{ margin:20px 0 0; }

  /* Низ: «UTM по площадкам» → TG-карта → «Другие инструменты» (в DOM сайдбара список второй) */
  .cr-tool--utm .cr-tool__layout{ gap:0; }
  .cr-tool--utm .cr-utm-side{ order:-1; }
  .cr-tool--utm .cr-tool-tg{ margin:26px 0 0; }
  .cr-tool--utm .cr-utm-side .cr-tool-others__link{ min-height:46px; font-size:var(--fs-body-sm); }   /* 14.5 */
  .cr-tool--utm .cr-utm-side .cr-tool-others__chev{ width:14px; height:14px; }

  .cr-utm-modal{ padding:20px 18px; max-height:88vh; }
}
/* 320–340: подписи кнопок панели не переносятся — ужимаем поля и прячем иконку */
@media (max-width:340px){
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn--ghost{ padding:0 10px; }
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn--main svg{ display:none; }
  .cr-tool--utm .cr-utm__dock-row .cr-utm__btn--main .cr-utm__swap-b svg{ display:block; }
}