/* =========================================================
   ГЕНЕРАТОР UTM-МЕТОК — стили рабочей области.
   Использует глобальные переменные дизайн-системы сайта
   (--color-accent, --radius-*, --shadow-*, --transition-fast
   из style.css) — здесь только специфичное для этого инструмента.

   Раздел от "Ссылка на страницу" до "Готовая ссылка" (всё до
   комментария "Анатомия ссылки") спроектирован заново: единая
   вертикальная сетка отступов, три обязательных параметра
   обозначены цветными маркерами (те же цвета, что и в готовой
   ссылке, и в разборе "Анатомии ссылки" ниже по странице — одна
   палитра на весь инструмент, не три случайно похожих), вставка
   макросов — через компактный виджет внутри поля вместо ряда
   чипов, результат — как единая карточка с понятной иерархией
   действий.
   ========================================================= */

:root {
  --ut-border: rgba(43, 47, 51, 0.09);
  --ut-danger: #c94747;
  --ut-danger-bg: rgba(201, 71, 71, 0.07);
  --ut-mono: var(--font-mono);

  /* Три цвета обязательных параметров — те же значения, что уже
     использует блок "Анатомия ссылки" ниже (не трогаем его CSS,
     просто используем идентичные hex здесь, чтобы маркер у поля,
     подсветка в живом превью и легенда анатомии были одним и тем
     же цветом, а не тремя случайно похожими). */
  --ut-source: #38a9dd;
  --ut-medium: #84cc16;
  --ut-campaign: #f5b022;
}

/* Строчная высота глифа иконки по умолчанию наследуется от текста
   страницы и вычисляется от font-size КАЖДОЙ иконки отдельно —
   из-за этого иконка внутри flex-центрированной кнопки визуально
   плывёт на пару пикселей от геометрического центра. */
[class^="ri-"]:not(:is(.sidebar, .mobile-header, .mobile-nav-panel, .notice-slider, .breadcrumbs, .tool-faq, .site-footer) *),
[class*=" ri-"]:not(:is(.sidebar, .mobile-header, .mobile-nav-panel, .notice-slider, .breadcrumbs, .tool-faq, .site-footer) *) { line-height: 1; }

/* =========================================================
   Заголовки секций — иконка-чип + заголовок + короткое пояснение.
   Используется для каждого крупного шага сценария.
   ========================================================= */

.ut-section { margin-bottom: 30px; }
.ut-section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ut-section-head--inset { margin-bottom: 22px; }
.ut-section-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text-strong);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.ut-section-title { font-size: 16px; font-weight: 700; color: var(--color-text-strong); margin: 0 0 3px; line-height: 1.3; }
.ut-section-desc { font-size: 13px; color: var(--color-muted); margin: 0; line-height: 1.5; }

/* =========================================================
   Базовый URL
   ========================================================= */

.ut-url-input {
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--color-surface); border: 1.5px solid var(--ut-border);
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;
  color: var(--color-text-strong); font-family: var(--ut-mono);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ut-url-input:hover,
.ut-url-input:focus-visible { border-color: var(--color-accent); }
.ut-url-input:focus-visible { box-shadow: 0 0 0 4px rgba(29,217,122,0.14); outline: none; }
.ut-url-input.is-invalid { border-color: var(--ut-danger); }
.ut-url-input.is-invalid:focus-visible { box-shadow: 0 0 0 4px rgba(201,71,71,0.14); }

.ut-field-error {
  display: flex; align-items: center; gap: 7px; margin: 8px 0 0;
  font-size: 12.5px; color: var(--ut-danger);
}
.ut-field-error span { min-width: 0; }
.ut-field-error[hidden] { display: none; }

/* =========================================================
   Пресеты площадок
   ========================================================= */

.ut-presets { display: flex; flex-wrap: wrap; gap: 10px; }
.ut-preset-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 20px 6px 6px; background: var(--color-surface);
  border: 1.5px solid var(--ut-border); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ut-preset-btn-icon {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--color-bg); color: var(--color-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; transition: background var(--transition-fast), color var(--transition-fast);
}
@media (max-width: 640px) {
  .ut-preset-btn { min-height: 40px; padding: 5px 16px 5px 5px; font-size: 12.5px; }
  .ut-preset-btn-icon { width: 24px; height: 24px; font-size: 11.5px; }
}
.ut-preset-btn:hover { border-color: rgba(29,217,122,0.45); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.ut-preset-btn.is-selected {
  border-color: var(--color-accent); background: var(--color-accent); color: #06231a;
  box-shadow: 0 6px 16px -6px rgba(29,217,122,0.5);
}
.ut-preset-btn.is-selected .ut-preset-btn-icon { background: rgba(6,35,26,0.14); color: #06231a; }

/* Пояснение к выбранному набору: одна-две строки под чипами — что нужно
   знать про эту площадку. Приглушённый текст без рамки, чтобы не спорить
   с самими чипами и полями. */
.ut-preset-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0;
  font-size: 12.5px; line-height: 1.6; color: var(--color-muted);
}
.ut-preset-note[hidden] { display: none; }
.ut-preset-note i { flex-shrink: 0; margin-top: 2px; font-size: 13px; color: var(--color-accent-dark); }
.ut-preset-note span { min-width: 0; }
/* =========================================================
   Основная панель — "Параметры ссылки"
   ========================================================= */

.ut-main-panel {
  background: var(--color-surface); border: 1px solid var(--ut-border);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 480px) { .ut-main-panel { padding: 20px; } }

/* Легенда цвета — объясняет один раз, что означают цветные маркеры
   у трёх обязательных полей ниже, вместо повторяющейся плашки
   "обязательно" на каждом поле по отдельности */
.ut-color-legend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--color-muted); line-height: 1.5;
  margin: -6px 0 22px;
}
.ut-color-legend strong { color: var(--color-text-strong); font-weight: 700; }

.ut-fields-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 24px; }
@media (max-width: 640px) { .ut-fields-grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } }
.ut-field--wide { grid-column: 1 / -1; }

.ut-field { display: flex; flex-direction: column; min-width: 0; }

.ut-field-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--color-text-strong); font-family: var(--ut-mono);
}
/* Цветной маркер = "это один из трёх обязательных параметров, и
   именно этим цветом он подсвечен в готовой ссылке ниже и в разборе
   анатомии". Один визуальный сигнал заменяет собой отдельную плашку
   "обязательно" на каждом поле — сигнал не повторяется зря, а сразу
   несёт вторую, более полезную информацию (какой это цвет). */
.ut-field-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ut-field-dot--source { background: var(--ut-source); }
.ut-field-dot--medium { background: var(--ut-medium); }
.ut-field-dot--campaign { background: var(--ut-campaign); }

.ut-field-optional { font-weight: 500; color: var(--color-muted); font-family: var(--ut-mono); }

.ut-field input[type="text"],
.ut-field select {
  height: 46px; padding: 0 14px;
  background: var(--color-surface); border: 1.5px solid var(--ut-border);
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  color: var(--color-text-strong); font-family: var(--ut-mono);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ut-field input[type="text"]:hover,
.ut-field select:hover,
.ut-field input[type="text"]:focus-visible,
.ut-field select:focus-visible { border-color: var(--color-accent); }
.ut-field input[type="text"]:focus-visible,
.ut-field select:focus-visible { box-shadow: 0 0 0 4px rgba(29,217,122,0.14); outline: none; }
/* Стрелку у select рисует общая система селектов (style.css):
   иконка <i> в обёртке больше не нужна и скрыта. */
.ut-select-wrap { position: relative; }
.ut-select-wrap select { width: 100%; }
.ut-select-wrap > i { display: none; }
.ut-field select {
 width: 100%;
  cursor: pointer;
}

.ut-field-desc { font-size: 12px; color: var(--color-muted); line-height: 1.5; margin: 8px 0 0; }

.ut-field-hint {
  display: flex; align-items: center;
  min-height: 0; margin-top: 6px; font-size: 11.5px; color: var(--color-accent-dark);
  font-family: var(--ut-mono); font-weight: 700;
  overflow-wrap: break-word; word-break: break-word;
}
.ut-field-hint:empty { margin-top: 0; }
.ut-field-hint .ri-arrow-right-line { font-size: 15px; margin-right: 1px; flex-shrink: 0; }
/* Не всякая подсказка — хорошая новость (например, "это значение
   никуда не попадёт" — не про успешную нормализацию, а про то, что
   поле придётся заполнить иначе); такие сообщения нейтрально-серые,
   а не фирменно-зелёные, чтобы тон соответствовал смыслу. */
.ut-field-hint.is-neutral { color: var(--color-muted); font-weight: 600; }
.ut-field-hint .ri-information-line { font-size: 12.5px; margin-right: 5px; flex-shrink: 0; }

/* =========================================================
   Виджет вставки макроса — компактная иконка-триггер внутри поля
   (фигурные скобки — тот же символ, что и в самом синтаксисе
   макроса {campaign_id}, поэтому назначение читается без подписи)
   и выпадающее меню с вариантами. Раньше это был ряд отдельных
   чипов под полем, всегда занимавший место, даже когда не нужен;
   теперь — один маленький элемент внутри самого поля, который
   раскрывается по требованию.
   ========================================================= */

.ut-input-row { position: relative; }
.ut-input-row input[type="text"] { width: 100%; }
.ut-input-row.has-macro input[type="text"] { padding-right: 44px; }

.ut-macro-widget[hidden] { display: none; }
/* Залита фирменным зелёным постоянно, а не только на hover — иначе
   в спокойном состоянии кнопка сливалась с полем и её было легко
   не заметить вовсе. Тёмно-зелёный текст на ярком акценте — тот же
   контраст, что у выбранного пресета и у готовой кнопки "Копировать". */
.ut-macro-trigger {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); border: none; border-radius: 7px;
  color: #06231a; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 2px 5px -1px rgba(29,217,122,0.55);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.ut-macro-trigger:hover,
.ut-macro-trigger[aria-expanded="true"] { background: var(--color-accent-dark); }
.ut-macro-trigger:active { transform: translateY(-50%) scale(0.94); }

.ut-macro-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--ut-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.ut-macro-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ut-macro-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 8px 10px; background: none; border: none; border-radius: var(--radius-sm);
  text-align: left; cursor: pointer; transition: background var(--transition-fast);
}
.ut-macro-item:hover { background: var(--color-bg); }
.ut-macro-item code {
  font-family: var(--ut-mono); font-size: 12px; font-weight: 600; color: var(--link);
  background: none; padding: 0; flex-shrink: 0;
}
.ut-macro-item span { font-size: 12px; color: var(--color-muted); }

/* --- Расширенные параметры GA4 --- */
.ut-advanced { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ut-border); }
.ut-advanced summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--color-text-strong); list-style: none;
}
.ut-advanced summary::-webkit-details-marker { display: none; }
.ut-advanced summary i { transition: transform var(--transition-fast); color: var(--color-muted); }
.ut-advanced[open] summary i { transform: rotate(180deg); }
.ut-advanced-optional { font-weight: 500; color: var(--color-muted); font-size: 12.5px; }
.ut-advanced-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 24px; margin-top: 22px; }
@media (max-width: 640px) { .ut-advanced-body { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   История ссылок
   ========================================================= */

.ut-history-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.ut-history-item {
  padding: 14px 16px; background: var(--color-surface);
  border: 1px solid var(--ut-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex; align-items: flex-start; gap: 10px;
  transition: border-color var(--transition-fast);
}
.ut-history-item:hover { border-color: rgba(29,217,122,0.3); }
.ut-history-item-info { min-width: 0; flex: 1; }
.ut-history-item-url {
  font-size: 12px; font-family: var(--ut-mono); color: var(--color-text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.ut-history-item-meta { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
.ut-history-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ut-history-icon-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--color-muted); cursor: pointer; border-radius: var(--radius-sm);
  font-size: 13px; transition: background var(--transition-fast), color var(--transition-fast);
}
.ut-history-icon-btn:hover { background: rgba(29,217,122,0.1); color: var(--color-accent-dark); }
.ut-history-icon-btn.is-danger:hover { background: var(--ut-danger-bg); color: var(--ut-danger); }

/* =========================================================
   Готовая ссылка — результат
   ========================================================= */

.ut-result {
  margin-top: 24px; padding: 24px;
  background: var(--color-text-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 480px) { .ut-result { padding: 18px; } }

.ut-result-status {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5);
}
.ut-result-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ut-result-status.is-ready { color: var(--color-accent); }
.ut-result-status.is-missing { color: #f5b022; }

.ut-result-url {
  font-family: var(--ut-mono); font-size: 13.5px; line-height: 1.75;
  color: rgba(255,255,255,0.5);
  overflow-wrap: break-word;
  min-height: 46px;
  padding: 12px 14px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm);
}
/* Цвета совпадают с маркерами полей выше и с легендой "Анатомии
   ссылки" ниже на странице — один и тот же язык в трёх местах. */
.ut-result-url .ut-p-base { color: #e8eef0; }
.ut-result-url .ut-p-punct { color: rgba(255,255,255,0.32); }
.ut-result-url .ut-p-source { color: #7dd3fc; }
.ut-result-url .ut-p-medium { color: #a3e635; }
.ut-result-url .ut-p-campaign { color: #fbbf24; }
.ut-result-url .ut-p-other { color: #c9a3f5; }

.ut-result-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.ut-copy-btn {
  width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ut-copy-btn:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.8); }
.ut-copy-btn.is-ready {
  background: var(--color-accent); border-color: var(--color-accent); color: #06231a;
  box-shadow: 0 8px 20px -8px rgba(29,217,122,0.55);
}
.ut-copy-btn.is-ready:hover { background: var(--color-accent-dark); color: #06231a; }
.ut-copy-btn.is-error { background: var(--ut-danger); border-color: var(--ut-danger); color: #fff; }
.ut-copy-btn.is-error:hover { background: var(--ut-danger); color: #fff; }

@keyframes ut-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.ut-copy-btn.is-shake { animation: ut-shake 420ms ease; }
@media (prefers-reduced-motion: reduce) { .ut-copy-btn.is-shake { animation: none; } }

.ut-result-actions-row { display: flex; gap: 8px; }
.ut-qr-btn {
  flex: 1 1 auto; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-sm); border: 1px solid rgba(29,217,122,0.35);
  background: transparent; color: var(--color-accent);
  font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ut-qr-btn:hover { background: rgba(29,217,122,0.1); border-color: var(--color-accent); }
.ut-clear-btn {
  flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.12);
  background: transparent; color: rgba(255,255,255,0.5);
  font-size: 14px; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ut-clear-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }

/* =========================================================
   Анатомия ссылки (SEO-блок)
   ========================================================= */

.ut-anatomy {
  background: var(--color-surface); border: 1px solid var(--ut-border);
  border-radius: var(--radius-lg); padding: 26px;
}
@media (max-width: 480px) { .ut-anatomy { padding: 18px; } }
.ut-anatomy-url {
  font-family: var(--ut-mono); font-size: 14px; line-height: 1.9;
  word-break: break-all; margin-bottom: 22px;
}
.ut-anatomy-part { padding: 3px 2px; border-radius: 4px; }
.ut-anatomy-part--base { background: rgba(43,47,51,0.06); color: var(--color-text-strong); }
.ut-anatomy-part--q, .ut-anatomy-part--amp { color: var(--color-muted); font-weight: 700; padding: 0; }
.ut-anatomy-part--source { background: rgba(125,211,252,0.18); color: #0c6b91; }
.ut-anatomy-part--medium { background: rgba(163,230,53,0.22); color: #4d7c0f; }
.ut-anatomy-part--campaign { background: rgba(251,191,36,0.22); color: #92610a; }

.ut-anatomy-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
@media (max-width: 640px) { .ut-anatomy-legend { grid-template-columns: minmax(0, 1fr); } }
.ut-anatomy-legend-item { display: flex; align-items: flex-start; gap: 10px; }
.ut-anatomy-legend-item > div { min-width: 0; }
.ut-anatomy-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; margin-top: 4px; }
/* Точки легенды — насыщенные сплошные цвета, отдельные от приглушённой
   подсветки текста в самом URL выше. Раньше точки переиспользовали те
   же классы .ut-anatomy-part--*, что и фон для текста внутри строки —
   там уместна лёгкая тонировка (текст должен остаться читаемым), а
   здесь точке нужно быть чётко видимым цветным маркером. "Базовый"
   цвет (rgba 6% непрозрачности) на фоне карточки был почти невидим —
   на мобильном, где строки легенды идут одна под другой, а не в два
   столбца, этот контраст с остальными тремя яркими точками бросался
   в глаза как нечто явно сломанное. */
.ut-anatomy-dot.ut-anatomy-part--base { background: var(--color-muted); }
.ut-anatomy-dot.ut-anatomy-part--source { background: #38a9dd; }
.ut-anatomy-dot.ut-anatomy-part--medium { background: #84cc16; }
.ut-anatomy-dot.ut-anatomy-part--campaign { background: #f5b022; }
.ut-anatomy-legend-item strong { display: block; font-size: 13px; color: var(--color-text-strong); font-family: var(--ut-mono); }
.ut-anatomy-legend-item span { display: block; font-size: 12.5px; color: var(--color-muted); line-height: 1.5; margin-top: 1px; }

.ut-anatomy-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0;
  padding-top: 18px; border-top: 1px solid var(--ut-border);
  font-size: 13px; color: var(--color-muted); line-height: 1.6;
}
/* КРИТИЧНО: весь текст (а не только иконка) обёрнут в один <span> с
   min-width:0. Без этого display:flex дробит прозу вперемешку с
   несколькими <code>-тегами на россыпь отдельных flex-элементов —
   каждый пытается сохранить свою "естественную" ширину и не
   переносится как единый абзац, из-за чего блок физически вылезал
   за границу экрана на мобильном. Flex годится для строки из
   дискретных UI-элементов, но не для потока прозы с инлайн-тегами
   внутри — для этого нужен ровно один текстовый контейнер-элемент. */
.ut-anatomy-note > span { min-width: 0; }
.ut-anatomy-note i { color: var(--color-muted); margin-top: 2px; flex-shrink: 0; }

/* =========================================================
   Табличные справочники
   ========================================================= */

.ut-table-wrap { overflow-x: auto; border: 1px solid var(--ut-border); border-radius: var(--radius-lg); }
.ut-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ut-table th {
  text-align: left; padding: 12px 16px; background: var(--color-bg);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); white-space: nowrap;
}
.ut-table td { padding: 12px 16px; border-top: 1px solid var(--ut-border); color: var(--color-text); vertical-align: top; }

.ut-req-yes { color: var(--color-accent-dark); font-weight: 700; }
.ut-req-no { color: var(--color-muted); }
.ut-source-note { font-size: 12px; color: var(--color-muted); margin: 10px 2px 0; }

/* =========================================================
   Макросы рекламных систем — по карточке на площадку.
   Одна длинная таблица с колонкой «Площадка» заставляла искать
   нужную строку среди чужих; здесь видно сразу: чьи скобки и
   какие макросы есть именно у этой площадки.
   ========================================================= */

.ut-macro-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ut-macro-group {
  min-width: 0; padding: 22px; background: var(--color-surface);
  border: 1px solid var(--ut-border); border-radius: var(--radius-lg);
}
.ut-macro-group-head {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ut-border);
}
.ut-macro-group-head strong { font-size: 15px; color: var(--color-text-strong); }
.ut-macro-group-head span { font-family: var(--ut-mono); font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
.ut-macro-list { margin: 0; }
.ut-macro-list > div { padding: 12px 0; border-top: 1px solid var(--ut-border); }
.ut-macro-list > div:first-child { border-top: none; padding-top: 14px; }
.ut-macro-list > div:last-child { padding-bottom: 0; }
.ut-macro-list dt {
  font-family: var(--ut-mono); font-size: 12.5px; font-weight: 700; line-height: 1.5;
  color: var(--color-text-strong); overflow-wrap: anywhere;
}
.ut-macro-list dd { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--color-muted); }
@media (max-width: 480px) { .ut-macro-group { padding: 18px; } }
/* =========================================================
   Focus-состояния
   ========================================================= */
.ut-preset-btn:focus-visible,
.ut-copy-btn:focus-visible,
.ut-qr-btn:focus-visible,
.ut-clear-btn:focus-visible,
.ut-macro-trigger:focus-visible,
.ut-macro-item:focus-visible,
.ut-history-icon-btn:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* Пояснения о том, что инструмент изменил в адресе */
.ut-result-notes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ut-result-notes[hidden] { display: none !important; }
.ut-result-notes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  /* Строчный бокс иконки равен высоте строки текста — глиф встаёт
     по центру первой строки, а не выше неё */
  line-height: 19px;
  color: var(--color-muted);
}
.ut-result-notes li i { font-size: 13px; line-height: 19px; flex-shrink: 0; color: var(--color-accent-dark); }
.ut-result-notes li span { min-width: 0; }
.ut-result-notes li.is-warn { color: rgba(255,255,255,0.78); }
.ut-result-notes li.is-warn i { color: #f5b022; }

/* =========================================================
   SEO-БЛОКИ СТРАНИЦЫ
   Белый корпус у плашки обязателен: секции лежат прямо на
   фоне страницы, и var(--color-bg) там совпал бы с фоном.
   ========================================================= */

.ut-note {
  --ut-note-line: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-md);
}
.ut-note i { font-size: 16px; line-height: var(--ut-note-line); color: var(--color-accent-dark); flex-shrink: 0; }
.ut-note p { margin: 0; font-size: 14px; line-height: var(--ut-note-line); color: var(--color-text); }
.ut-note strong { color: var(--color-text-strong); }

/* ---- Список «заголовок + пояснение» ---- */
.ut-deflist { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; }

.ut-deflist-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.ut-deflist > .ut-deflist-item:first-child { padding-top: 0; border-top: none; }
.ut-deflist > .ut-deflist-item:last-child { padding-bottom: 0; }

.ut-deflist-item > i {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.1);
  color: var(--color-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

/* Контейнер — flex-строка, поэтому растягиваем через flex-grow,
   а не width:100%: иначе 100% считается от всей строки вместе
   с иконкой и даёт горизонтальное переполнение */
.ut-deflist-item > div { flex: 1 1 auto; min-width: 0; }
.ut-deflist-item > div > strong {
  display: block;
  font-size: 15.5px;
  /* Равно высоте плашки с иконкой: центры совпадают точно и при
     переносе заголовка на вторую строку иконка остаётся у первой */
  line-height: 26px;
  color: var(--color-text-strong);
  margin-bottom: 6px;
}
.ut-deflist-item p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--color-text); }

/* ---- Шаги ---- */
.ut-steps {
  --ut-step-num-size: 28px;
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column;
}

.ut-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.ut-steps > .ut-step:first-child { padding-top: 0; border-top: none; }
.ut-steps > .ut-step:last-child { padding-bottom: 0; }

.ut-step-num {
  flex-shrink: 0;
  width: var(--ut-step-num-size);
  height: var(--ut-step-num-size);
  border-radius: 9px;
  background: var(--color-text-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.ut-step-body { flex: 1 1 auto; min-width: 0; }
.ut-step-body h3 { font-size: 16.5px; margin: 0 0 6px; }
.ut-step-body p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--color-text); }

@media (max-width: 520px) {
  .ut-steps { --ut-step-num-size: 26px; }
  .ut-step { gap: 14px; }
}

/* Инлайн-код в SEO-блоках: иначе Bootstrap красит его в розовый */

/* =========================================================
   ПРОВЕРКА ГОТОВОЙ ССЫЛКИ
   ========================================================= */

.ut-check-input-row { position: relative; }

.ut-check-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(43, 47, 51, 0.1);
  background: var(--color-surface);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ut-check-clear[hidden] { display: none !important; }
.ut-check-clear:hover { border-color: rgba(232, 93, 93, 0.4); color: #c94747; }
.ut-check-input-row .ut-url-input { padding-right: 52px; }

.ut-check-result { margin-top: 18px; }
.ut-check-result[hidden] { display: none !important; }

.ut-check-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.ut-check-verdict i { font-size: 17px; }
.ut-check-verdict.is-ok { background: rgba(29, 217, 122, 0.1); color: var(--color-accent-dark); }
.ut-check-verdict.is-warn { background: #FDF3E6; color: #8A5A1B; }
.ut-check-verdict.is-bad { background: #FCEBEC; color: #8F1D24; }

.ut-check-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--color-muted);
}

/* Таблица найденных параметров: ключ, значение и человеческое имя */
.ut-check-params { list-style: none; margin: 0 0 14px; padding: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(43, 47, 51, 0.08); }

.ut-check-params li {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 14px;
  background: var(--color-surface);
  border-top: 1px solid rgba(43, 47, 51, 0.06);
  font-size: 13px;
}
.ut-check-params li:first-child { border-top: none; }

@media (max-width: 620px) {
  .ut-check-params li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

.ut-check-key { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-accent-dark); word-break: break-all; }
.ut-check-val { font-weight: 600; color: var(--color-text-strong); word-break: break-all; }
.ut-check-label { color: var(--color-muted); font-size: 12.5px; }

.ut-check-empty,
.ut-check-extras { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--color-muted); }

.ut-check-issues { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ut-check-issues li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  /* Строчный бокс иконки равен высоте строки текста — глиф встаёт
     ровно по центру первой строки, а не выше неё */
  line-height: 21px;
  color: var(--color-text);
}
.ut-check-issues li i { font-size: 13px; line-height: 21px; flex-shrink: 0; }
.ut-check-issues.is-errors li i { color: #C1121F; }
.ut-check-issues.is-warnings li i { color: #B35900; }

.ut-check-load {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.ut-check-load:hover { border-color: rgba(29, 217, 122, 0.4); color: var(--color-accent-dark); background: rgba(29, 217, 122, 0.06); }

/* Второй и последующие заголовки разделов внутри одного SEO-блока
   нуждаются в отступе от предыдущего текста. Раньше он задавался
   инлайновым стилем прямо в разметке */
.ut-section-head-spaced { margin-top: 36px; }