/* =========================================================
   ВОДЯНОЙ ЗНАК НА ФОТО (/tools/watermark) — стили инструмента.
   Палитра и переменные — из style.css. Дизайн-язык общий с
   image-enhancer, но классы свои (префикс wm-), чтобы страницы
   не влияли друг на друга при доработках.
   ========================================================= */

.wm-tool { display: flex; flex-direction: column; gap: 24px; margin: 40px 0; }

/* =========================================================
   ЗОНА ЗАГРУЗКИ
   ========================================================= */

.wm-drop {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,20,24,0.05), 0 12px 28px -18px rgba(16,20,24,0.18);
  transition: box-shadow 260ms cubic-bezier(0.4,0,0.2,1), transform 260ms cubic-bezier(0.4,0,0.2,1);
}
.wm-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.wm-drop-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; margin: 10px; padding: 46px 28px;
  border: 1px dashed rgba(43,47,51,0.16); border-radius: 15px;
  transition: border-color 260ms cubic-bezier(0.4,0,0.2,1), background 260ms cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 599px) { .wm-drop-inner { padding: 34px 20px; margin: 8px; } }
.wm-drop:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(16,20,24,0.05), 0 20px 40px -22px rgba(16,20,24,0.24); }
.wm-drop:hover .wm-drop-inner { border-color: rgba(29,217,122,0.5); }
.wm-drop.is-dragover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(16,20,24,0.05), 0 24px 48px -24px rgba(29,217,122,0.4); }
.wm-drop.is-dragover .wm-drop-inner { border-color: var(--color-accent); background: rgba(29,217,122,0.04); }

.wm-drop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--color-text-strong); color: #fff; font-size: 22px; margin-bottom: 4px;
  box-shadow: 0 6px 16px -8px rgba(16,20,24,0.5);
  transition: background 260ms cubic-bezier(0.4,0,0.2,1), color 260ms cubic-bezier(0.4,0,0.2,1), transform 260ms cubic-bezier(0.4,0,0.2,1), box-shadow 260ms cubic-bezier(0.4,0,0.2,1);
}
.wm-drop:hover .wm-drop-icon, .wm-drop.is-dragover .wm-drop-icon {
  background: var(--color-accent); color: #06231a;
  transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px -10px rgba(29,217,122,0.7);
}
.wm-drop h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--color-text-strong); margin: 0; }
.wm-drop p { font-size: 14px; line-height: 1.55; color: var(--color-muted); margin: 0; max-width: 42ch; }
.wm-drop-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 26px; margin-top: 8px; border-radius: 999px;
  background: var(--color-accent); color: #06231a; font-size: 14px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 8px 18px -8px rgba(29,217,122,0.5);
  transition: background 220ms cubic-bezier(0.4,0,0.2,1), box-shadow 220ms cubic-bezier(0.4,0,0.2,1), transform 220ms cubic-bezier(0.4,0,0.2,1);
}
.wm-drop:hover .wm-drop-cta { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 12px 24px -10px rgba(29,217,122,0.6); }
.wm-drop:active .wm-drop-cta { transform: translateY(0) scale(0.98); }
.wm-drop:focus-within .wm-drop-cta { box-shadow: 0 0 0 3px rgba(29,217,122,0.3); }
.wm-drop-formats { font-size: 12.5px; color: var(--color-muted); margin-top: 4px; }

.wm-drop-privacy {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12.5px; color: var(--color-muted); margin: 14px 0 0;
}
.wm-drop-privacy i { font-size: 13px; color: var(--color-accent-dark); }

/* =========================================================
   ОЧЕРЕДЬ ФАЙЛОВ
   ========================================================= */

.wm-queue-wrap { display: none; }
.wm-queue-wrap.is-visible { display: flex; flex-direction: column; gap: 12px; }
.wm-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wm-queue-head h2 { font-size: 15px; margin: 0; }
.wm-add-more {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--color-text-strong); background: var(--color-surface);
  border: 1px solid rgba(43,47,51,0.1); border-radius: 999px; height: 36px; padding: 0 16px;
  cursor: pointer; position: relative;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.wm-add-more input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wm-add-more:hover { border-color: rgba(29,217,122,0.4); background: rgba(29,217,122,0.05); }

.wm-queue { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.wm-queue-item { position: relative; flex-shrink: 0; width: 96px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.wm-queue-thumb {
  position: relative; width: 96px; height: 84px; border-radius: var(--radius-sm);
  overflow: hidden; border: 2px solid transparent; background: var(--color-bg);
  box-shadow: 0 1px 2px rgba(16,20,24,0.06);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.wm-queue-item:hover .wm-queue-thumb { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 12px 22px -12px rgba(16,20,24,0.3); }
.wm-queue-item.is-active .wm-queue-thumb { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29,217,122,0.15); }
.wm-queue-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-queue-name { font-size: 11.5px; font-weight: 600; color: var(--color-text-strong); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-queue-item.is-active .wm-queue-name { color: var(--color-accent-dark); }
.wm-queue-meta { font-size: 11px; color: var(--color-muted); line-height: 1.2; }

.wm-queue-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6,35,26,0.55); color: #fff; font-size: 18px; opacity: 0;
  transition: opacity var(--transition-fast);
}
.wm-queue-item[data-status="processing"] .wm-queue-status,
.wm-queue-item[data-status="done"] .wm-queue-status { opacity: 1; }
.wm-queue-item[data-status="processing"] .wm-queue-status i { animation: wm-spin 0.9s linear infinite; }
@keyframes wm-spin { to { transform: rotate(360deg); } }

.wm-queue-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(6,8,10,0.72); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border: none; cursor: pointer; opacity: 0; transform: scale(0.7);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.wm-queue-item:hover .wm-queue-remove,
.wm-queue-item:focus-within .wm-queue-remove { opacity: 1; transform: scale(1); }
.wm-queue-remove:hover { background: #c0392b; transform: scale(1.1); }
/* Кнопка маленькая визуально, но зона нажатия — 32px */
.wm-queue-remove::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* На сенсорных экранах наведения нет: без этого правила крестик
   был невидим, но оставался нажимаемым — удаление «вслепую» */
@media (hover: none) {
  .wm-queue-remove { opacity: 1; transform: none; width: 24px; height: 24px; font-size: 13px; }
}

/* =========================================================
   РАБОЧАЯ ЗОНА — холст слева (липкий), панель справа
   ========================================================= */

.wm-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr);
  /* В одну колонку превью идёт ПЕРВЫМ и прилипает к верху экрана:
     раньше оно стояло под всей панелью, и на телефоне, планшете и
     ноутбуке до 1320px результат настройки был не виден без
     прокрутки на полторы тысячи пикселей вниз. */
  grid-template-areas: "canvas" "panel" "actions";
  gap: 20px; align-items: start;
}
.wm-workspace > .wm-panel { grid-area: panel; }
.wm-workspace > .wm-actions { grid-area: actions; }
.wm-workspace > .wm-canvas-wrap { grid-area: canvas; }

@media (min-width: 1320px) {
  .wm-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    grid-template-areas: "canvas panel" "canvas actions" "canvas .";
    grid-template-rows: auto auto 1fr;
  }
  .wm-workspace > .wm-canvas-wrap.is-visible { position: sticky; top: 20px; }
  .wm-workspace:not(:has(.wm-canvas-wrap.is-visible)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "panel" "actions";
  }
  .wm-workspace .wm-field-row { flex-direction: column; gap: 16px; }
  .wm-workspace .wm-field { flex: none; width: 100%; }
  .wm-workspace .wm-actions { flex-direction: column; align-items: stretch; }
  .wm-workspace .wm-actions .wm-btn { justify-content: center; width: 100%; }
  .wm-workspace .wm-progress-wrap { flex: none; width: 100%; }
}

/* Холст с превью */
.wm-canvas-wrap { display: none; flex-direction: column; gap: 16px; }
.wm-canvas-wrap.is-visible { display: flex; }

.wm-stage {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); overflow: hidden;
  background: repeating-conic-gradient(#e9ebee 0% 25%, #f5f6f8 0% 50%) 0 0 / 20px 20px;
  box-shadow: 0 1px 2px rgba(16,20,24,0.05), 0 28px 56px -38px rgba(16,20,24,0.3);
  touch-action: none;
}
.wm-stage canvas { display: block; max-width: 100%; height: auto; }
@media (max-width: 1319.98px) {
  .wm-workspace > .wm-canvas-wrap.is-visible { position: sticky; top: 8px; z-index: 5; }
}
/* До 992px у сайта липкая мобильная шапка высотой 64px (style.css,
   .mobile-header) — превью прилипает под ней, а не прячется за неё */
@media (max-width: 991.98px) {
  .wm-workspace > .wm-canvas-wrap.is-visible { top: 72px; }
  /* Не больше ~40% высоты экрана: остальное — под настройки.
     Холст — заменяемый элемент, пропорции при двух max-* сохраняются. */
  .wm-stage canvas { max-height: 40vh; max-height: 40svh; width: auto; }
  .wm-stage { box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 16px 32px -18px rgba(16,20,24,0.45); }
}
/* Курсор подсказывает, что знак можно тащить */
.wm-stage.is-draggable canvas { cursor: grab; }
.wm-stage.is-dragging canvas { cursor: grabbing; }

.wm-stage-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: block; width: max-content; max-width: calc(100% - 28px);
  background: rgba(14,17,20,0.52);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 9px 18px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.94);
  text-align: center; line-height: 1.4; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5);
  pointer-events: none;
  transition: opacity 200ms ease;
}
.wm-stage.is-dragging .wm-stage-hint,
.wm-stage.is-hint-off .wm-stage-hint { opacity: 0; }
@media (max-width: 480px) { .wm-stage-hint { bottom: 10px; padding: 8px 14px; font-size: 11.5px; } }

/* =========================================================
   ПАНЕЛЬ НАСТРОЕК
   ========================================================= */

.wm-panel {
  display: none;
  background: var(--color-surface);
  border: 1px solid rgba(43,47,51,0.07);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(16,20,24,0.04), 0 20px 44px -32px rgba(16,20,24,0.22);
}
.wm-panel.is-visible { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 599px) { .wm-panel { padding: 18px; } }

.wm-section { display: flex; flex-direction: column; gap: 14px; }
.wm-section + .wm-section { padding-top: 20px; border-top: 1px solid rgba(43,47,51,0.08); }

.wm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wm-section-title { font-size: 14px; font-weight: 700; color: var(--color-text-strong); margin: 0; }

.wm-label { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); }
.wm-value { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-accent-dark); }
.wm-hint { font-size: 12px; color: var(--color-muted); margin: -4px 0 0; line-height: 1.45; }

.wm-control { display: flex; flex-direction: column; gap: 9px; }

/* Пресеты-пилюли */
.wm-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.wm-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(43,47,51,0.1); background: var(--color-bg);
  color: var(--color-text-strong); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), border-color 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-pill i { font-size: 14px; }
.wm-pill:hover { border-color: rgba(29,217,122,0.4); transform: translateY(-1px); }
.wm-pill:active { transform: translateY(0) scale(0.97); }
.wm-pill.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #06231a; box-shadow: 0 8px 18px -8px rgba(29,217,122,0.5); }
.wm-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,217,122,0.28); }

/* Сегментированный переключатель */
.wm-seg { display: flex; gap: 6px; }
.wm-seg-btn {
  flex: 1 1 0%; min-width: 0; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid rgba(43,47,51,0.1); background: var(--color-bg); color: var(--color-text-strong);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), border-color 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-seg-btn:hover { border-color: rgba(29,217,122,0.4); }
.wm-seg-btn:active { transform: scale(0.96); }
.wm-seg-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #06231a; box-shadow: 0 6px 14px -6px rgba(29,217,122,0.5); }
.wm-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,217,122,0.28); }

/* Сетка размещения 3×3 */
.wm-anchor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  width: 132px; padding: 6px; border-radius: var(--radius-sm);
  background: var(--color-bg); border: 1px solid rgba(43,47,51,0.08);
}
.wm-anchor {
  aspect-ratio: 1; border: none; border-radius: 6px; background: transparent;
  cursor: pointer; position: relative;
  transition: background 180ms ease;
}
.wm-anchor::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 8px; height: 8px; border-radius: 2px; transform: translate(-50%,-50%);
  background: rgba(43,47,51,0.25); transition: background 180ms ease, width 180ms ease, height 180ms ease;
}
.wm-anchor:hover::after { background: rgba(29,217,122,0.7); }
.wm-anchor.is-active { background: var(--color-accent); }
.wm-anchor.is-active::after { background: #06231a; width: 10px; height: 10px; }
.wm-anchor:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,217,122,0.28); }

/* Поля ввода */
.wm-input, .wm-select, .wm-textarea {
  width: 100%; border-radius: var(--radius-sm); border: 1px solid rgba(43,47,51,0.14);
  background: var(--color-bg); padding: 0 14px; font-size: 13.5px; font-weight: 600;
  color: var(--color-text-strong); font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.wm-input, .wm-select { height: 42px; }
.wm-textarea { padding: 11px 14px; min-height: 76px; resize: vertical; line-height: 1.5; font-weight: 500; }
.wm-input:hover, .wm-select:hover, .wm-textarea:hover { border-color: rgba(29,217,122,0.4); }
.wm-input:focus-visible, .wm-select:focus-visible, .wm-textarea:focus-visible {
  border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29,217,122,0.18); outline: none;
}
.wm-select { cursor: pointer; }
.wm-select-wrap { position: relative; display: flex; align-items: center; }
.wm-select-wrap > i { display: none; } /* стрелку рисует общая система селектов (style.css) */

.wm-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.wm-field { flex: 1 1 150px; display: flex; flex-direction: column; gap: 9px; }

/* Ползунок */
.wm-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) var(--wm-fill,0%), rgba(43,47,51,0.1) var(--wm-fill,0%), rgba(43,47,51,0.1) 100%);
  outline: none; cursor: pointer;
}
.wm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-accent);
  box-shadow: 0 1px 3px rgba(6,8,10,0.18); cursor: pointer;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.wm-range::-webkit-slider-thumb:hover { box-shadow: 0 1px 3px rgba(6,8,10,0.18), 0 0 0 7px rgba(29,217,122,0.14); transform: scale(1.05); }
.wm-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--color-accent); cursor: pointer; }
.wm-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(43,47,51,0.1); }
.wm-range:disabled { opacity: 0.4; cursor: not-allowed; }

/* Переключатель */
.wm-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.wm-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.wm-switch-track { position: absolute; inset: 0; background: rgba(43,47,51,0.16); border-radius: 999px; transition: background var(--transition-base); }
.wm-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1);
}
.wm-switch input:checked + .wm-switch-track { background: var(--color-accent); }
.wm-switch input:checked + .wm-switch-track::after { transform: translateX(18px); }
.wm-switch input:focus-visible + .wm-switch-track { box-shadow: 0 0 0 3px rgba(29,217,122,0.28); }

.wm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wm-toggle-text { flex: 1; min-width: 0; }
.wm-toggle-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); }
.wm-toggle-text span { font-size: 12px; color: var(--color-muted); line-height: 1.4; }

/* =========================================================
   ЦВЕТ — палитра, пипетка, HEX и RGB в одну ровную строку
   ========================================================= */

/* Образцы не шире 40px: на панели во всю ширину (планшет, ноутбук)
   1fr раздувал их до 60–75px — это уже плитки, а не палитра */
.wm-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 40px)); gap: 8px; }
/* На узкой панели — те же 8 в ряд, только плотнее: переход на 4 колонки
   раздувал образцы до 75px и растягивал панель на два ряда «плиток» */
@container wmpanel (max-width: 400px) { .wm-swatches { gap: 6px; } .wm-swatch { border-radius: 8px; } }

.wm-swatch {
  aspect-ratio: 1; width: 100%; border-radius: 9px; cursor: pointer; padding: 0;
  border: 1px solid rgba(43,47,51,0.14);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.25);
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-swatch:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 8px 16px -8px rgba(16,20,24,0.35); }
.wm-swatch:active { transform: translateY(0) scale(0.94); }
.wm-swatch.is-active {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}
.wm-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(29,217,122,0.6); }

.wm-color-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* Пипетка: нативный input прячем, показываем аккуратный образец */
.wm-color-well {
  position: relative; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  border: 1px solid rgba(43,47,51,0.14);
  background: repeating-conic-gradient(#e4e7ea 0% 25%, #f2f4f6 0% 50%) 0 0 / 8px 8px;
}
.wm-color-well input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; width: calc(100% + 8px); height: calc(100% + 8px); }
.wm-color-swatch { position: absolute; inset: 0; background: #FFFFFF; pointer-events: none; }
.wm-color-well:hover { border-color: rgba(29,217,122,0.5); }

/* Поле HEX: решётка — часть поля, а не отдельный элемент */
.wm-hex {
  display: flex; align-items: center; height: 42px; flex: 1 1 auto; min-width: 0;
  border: 1px solid rgba(43,47,51,0.14); border-radius: var(--radius-sm);
  background: var(--color-bg); padding: 0 12px; gap: 2px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wm-hex:hover { border-color: rgba(29,217,122,0.4); }
.wm-hex:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29,217,122,0.18); }
.wm-hex-sign { color: var(--color-muted); font-size: 13.5px; font-weight: 600; }
.wm-hex input {
  border: none; background: none; outline: none; width: 100%; min-width: 0; padding: 0;
  height: 100%; align-self: stretch; /* кликабельно всё поле, а не строка текста */
  font-family: var(--font-mono);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--color-text-strong); text-transform: uppercase;
}
/* Рамку и мягкое кольцо фокуса рисует обёртка .wm-hex (:focus-within выше).
   Общее input:focus-visible из style.css добавляло второе такое же кольцо
   вокруг самого поля — глушим его тем же псевдоклассом (специфичность выше). */
.wm-hex input:focus-visible {
  box-shadow: none;
}
.wm-rgb {
  flex-shrink: 0; font-size: 12px; color: var(--color-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 420px) { .wm-rgb { display: none; } }

/* =========================================================
   ПИКЕР ШРИФТОВ С ЖИВЫМ ПРЕВЬЮ
   ========================================================= */

.wm-fontpicker { position: relative; }

.wm-fp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid rgba(43,47,51,0.14); border-radius: var(--radius-sm);
  background: var(--color-bg); cursor: pointer; text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.wm-fp-trigger:hover { border-color: rgba(29,217,122,0.4); background: rgba(29,217,122,0.04); }
.wm-fp-trigger[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29,217,122,0.18); }
.wm-fp-trigger:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29,217,122,0.18); }
.wm-fp-trigger i { font-size: 12px; color: var(--color-muted); flex-shrink: 0; transition: transform var(--transition-fast); }
.wm-fp-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.wm-fp-current {
  font-size: 15px; font-weight: 600; color: var(--color-text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wm-fp-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--color-surface); border: 1px solid rgba(43,47,51,0.1);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 24px 48px -20px rgba(16,20,24,0.35);
}
.wm-fp-menu[hidden] { display: none !important; }

.wm-fp-search {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid rgba(43,47,51,0.08);
}
.wm-fp-search i { font-size: 13px; color: var(--color-muted); flex-shrink: 0; }
.wm-fp-search input {
  border: none; outline: none; background: none; width: 100%;
  font-size: 13.5px; font-weight: 500; color: var(--color-text-strong);
  font-family: var(--font-body);
}
.wm-fp-list { max-height: 300px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }

.wm-fp-group {
  font-size: 11px; font-weight: 700; color: var(--color-muted);
  padding: 10px 10px 6px; letter-spacing: 0.02em;
}
.wm-fp-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: background var(--transition-fast);
}
.wm-fp-option:hover { background: var(--color-bg); }
.wm-fp-option.is-active { background: rgba(29,217,122,0.1); }
.wm-fp-option:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(29,217,122,0.5); }
/* Название набрано самим шрифтом — видно, как он выглядит */
.wm-fp-sample {
  font-size: 19px; line-height: 1.25; color: var(--color-text-strong);
  flex-shrink: 0; min-width: 96px;
}
.wm-fp-name { font-size: 12.5px; color: var(--color-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-fp-check { font-size: 13px; color: var(--color-accent-dark); opacity: 0; flex-shrink: 0; }
.wm-fp-option.is-active .wm-fp-check { opacity: 1; }
.wm-fp-empty { font-size: 13px; color: var(--color-muted); padding: 16px 10px; margin: 0; text-align: center; }

/* Загрузка логотипа */
.wm-logo-drop {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--radius-sm);
  border: 1px dashed rgba(43,47,51,0.18); background: var(--color-bg); cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.wm-logo-drop:hover { border-color: rgba(29,217,122,0.5); }
.wm-logo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wm-logo-preview {
  width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
  background: repeating-conic-gradient(#e4e7ea 0% 25%, #f2f4f6 0% 50%) 0 0 / 10px 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--color-muted); font-size: 18px;
}
.wm-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wm-logo-text { min-width: 0; }
.wm-logo-text strong { display: block; font-size: 13px; color: var(--color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-logo-text span { font-size: 12px; color: var(--color-muted); }

/* Сохранённые пресеты */
.wm-saved { display: flex; gap: 8px; flex-wrap: wrap; }
.wm-saved-item {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 14px;
  border-radius: 999px; background: var(--color-bg); border: 1px solid rgba(43,47,51,0.1);
  font-size: 12.5px; font-weight: 600; color: var(--color-text-strong); cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.wm-saved-item:hover { border-color: rgba(29,217,122,0.4); background: rgba(29,217,122,0.05); }
.wm-saved-del {
  width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(43,47,51,0.1);
  color: var(--color-muted); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease, color 180ms ease;
}
.wm-saved-del:hover { background: #c0392b; color: #fff; }
.wm-saved-empty { font-size: 12.5px; color: var(--color-muted); margin: 0; }

/* =========================================================
   ДЕЙСТВИЯ
   ========================================================= */

.wm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.wm-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px;
  border-radius: 999px; font-size: 14px; font-weight: 700; border: none; cursor: pointer;
  line-height: normal;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-btn i {
  font-size: 15px;
  line-height: 1;
  /* Флекс-центрирование по обеим осям: у шрифтовых иконок своя
     базовая линия, и без этого глиф уезжает относительно подписи */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-btn:active { transform: scale(0.97); }
.wm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,217,122,0.3); }
.wm-btn-primary { background: var(--color-accent); color: #06231a; box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 8px 18px -8px rgba(29,217,122,0.5); }
.wm-btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 12px 24px -10px rgba(29,217,122,0.6); }
.wm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.wm-btn-secondary { background: var(--color-text-strong); color: #fff; box-shadow: 0 1px 2px rgba(16,20,24,0.08); }
.wm-btn-secondary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(16,20,24,0.1), 0 12px 24px -12px rgba(16,20,24,0.5); }
.wm-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: var(--color-text-strong); }
.wm-btn-ghost {
  background: none; color: var(--color-muted); padding: 0 6px; border-radius: 0;
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: 4px;
}
.wm-btn-ghost:hover { color: var(--color-text-strong); text-decoration-color: var(--color-text-strong); }

.wm-progress-wrap { display: none; flex: 1 1 220px; flex-direction: column; gap: 6px; }
.wm-progress-wrap.is-visible { display: flex; }
.wm-progress-track { height: 6px; border-radius: 999px; background: rgba(43,47,51,0.1); overflow: hidden; }
.wm-progress-fill { height: 100%; width: 0%; background: var(--color-accent); border-radius: 999px; transition: width var(--transition-base); animation: wm-pulse 1.6s ease-in-out infinite; }
@keyframes wm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.75; } }
.wm-progress-label { font-size: 12px; color: var(--color-muted); font-weight: 600; }

/* =========================================================
   ЧЕСТНОЕ ПРЕДУПРЕЖДЕНИЕ
   ========================================================= */

.wm-honesty {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--color-surface); border: 1px solid rgba(43,47,51,0.07);
  border-radius: var(--radius-md); padding: 20px 22px;
}
@media (max-width: 599px) { .wm-honesty { flex-direction: column; gap: 12px; } }
.wm-honesty-icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 10px;
  background: var(--color-text-strong); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.wm-honesty strong { display: block; font-size: 14px; color: var(--color-text-strong); margin-bottom: 4px; }
.wm-honesty p { font-size: 13.5px; color: var(--color-muted); margin: 0; line-height: 1.65; }
.wm-honesty p + p { margin-top: 8px; }

/* Сообщение об ошибке/статусе внутри панели */
.wm-note {
  font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-muted); margin: 0;
}
.wm-note.is-warn { color: #8a5d0c; background: rgba(240, 180, 40, 0.1); }
.wm-note[hidden] { display: none !important; }

/* =========================================================
   ИКОНКИ SEO-БЛОКА — сплошной акцент, как в других инструментах
   ========================================================= */

.wm-seo .tool-seo-tile-icon {
  background: var(--color-accent); color: #06231a; border-radius: 14px;
  box-shadow: 0 8px 20px -10px rgba(29,217,122,0.6);
}
.wm-seo .tool-seo-tile {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.wm-seo .tool-seo-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(16,20,24,0.04), 0 20px 40px -28px rgba(16,20,24,0.2);
  border-color: rgba(29,217,122,0.2);
}
.wm-seo .tool-seo-tile p { max-width: 48ch; }

/* Шаги работы */
.wm-steps { margin-bottom: 4px; }
.wm-steps .step { padding: 18px; }
.wm-steps .step h3 { font-size: 14.5px; margin-bottom: 4px; }
.wm-steps .step p { font-size: 13px; }

/* Сетка «Угол» и отступ стоят рядом даже в узкой панели:
   в столбец сетка 132px оставляла бы пустоту справа */
.wm-workspace .wm-field-row--anchor { flex-direction: row; align-items: flex-start; gap: 18px; }
.wm-workspace .wm-field-row--anchor > .wm-field:first-child { flex: 0 0 auto; width: auto; }
.wm-workspace .wm-field-row--anchor > .wm-field:last-child { flex: 1 1 auto; width: auto; min-width: 0; }

/* Ровный вертикальный ритм внутри секций */
.wm-section > .wm-control + .wm-control { margin-top: 14px; }

/* Сегментированный переключатель с иконками (выключка строк) */
.wm-seg-btn i { font-size: 15px; line-height: 1; display: inline-flex; }

/* Опции плашки появляются вложенным блоком, визуально подчинённым */
#wmPlateOptions {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid rgba(43,47,51,0.07);
}
#wmPlateOptions[hidden] { display: none !important; }

/* =========================================================
   ВКЛАДКИ ПАНЕЛИ — все настройки одним списком требовали
   слишком много прокрутки; вкладки держат панель компактной
   ========================================================= */
.wm-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--color-bg);
  border-radius: 12px;
  border: 1px solid rgba(43,47,51,0.07);
}
.wm-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; height: 52px; padding: 0 4px; border: none; border-radius: 9px;
  background: transparent; color: var(--color-muted); cursor: pointer;
  font-size: 11.5px; font-weight: 600;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-tab i { font-size: 15px; line-height: 1; }
.wm-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* На узкой панели «Размещение» и «Сохранение» обрезались многоточием */
@container wmpanel (max-width: 320px) {
  .wm-tabs { gap: 2px; padding: 3px; }
  .wm-tab { padding: 0 1px; font-size: 10.5px; letter-spacing: -0.01em; }
}
.wm-tab:hover { color: var(--color-text-strong); background: rgba(43,47,51,0.04); }
.wm-tab.is-active {
  background: var(--color-surface); color: var(--color-text-strong);
  box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 4px 10px -6px rgba(16,20,24,0.25);
}
.wm-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,217,122,0.3); }

/* Секции вкладок: первая в потоке не должна нести разделитель сверху */
.wm-section[data-tab][hidden] { display: none !important; }
.wm-section[data-tab] + .wm-section[data-tab] { padding-top: 20px; border-top: 1px solid rgba(43,47,51,0.08); }
.wm-tabs + .wm-section[data-tab] { padding-top: 0; border-top: none; }

/* Раскрывающийся блок тонких настроек — держит основную вкладку короткой */
.wm-more { margin-top: 14px; border-top: 1px solid rgba(43,47,51,0.08); padding-top: 12px; }
.wm-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding: 4px 0;
  font-size: 13px; font-weight: 600; color: var(--color-text-strong);
  transition: color 180ms ease;
}
.wm-more summary::-webkit-details-marker { display: none; }
.wm-more summary:hover { color: var(--color-accent-dark); }
.wm-more summary i {
  font-size: 12px; color: var(--color-muted);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-more[open] summary i { transform: rotate(180deg); }
.wm-more summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,217,122,0.3); border-radius: 6px; }
.wm-more-body { padding-top: 6px; }

/* =========================================================
   ИНДИКАТОР ЭТАПОВ РАБОТЫ
   Плоско и спокойно: номер в круге, подпись, тонкие разделители.
   Текущий шаг выделен акцентом, пройденные помечены галочкой —
   раньше три статичные карточки не читались как последовательность.
   ========================================================= */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.04);
}
@media (max-width: 767px) { .flow { grid-template-columns: minmax(0, 1fr); } }

.flow-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  min-width: 0;
}
.flow-step + .flow-step { border-left: 1px solid rgba(43, 47, 51, 0.07); }
@media (max-width: 767px) {
  .flow-step + .flow-step { border-left: none; border-top: 1px solid rgba(43, 47, 51, 0.07); }
}

.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  transition: background 260ms cubic-bezier(0.4,0,0.2,1), color 260ms cubic-bezier(0.4,0,0.2,1), box-shadow 260ms cubic-bezier(0.4,0,0.2,1);
}
.flow-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.flow-text strong {
  font-size: 14px; font-weight: 600; color: var(--color-muted);
  transition: color 260ms cubic-bezier(0.4,0,0.2,1);
}
.flow-text span { font-size: 12.5px; color: var(--color-muted); line-height: 1.4; }

.flow-step.is-active .flow-num {
  background: var(--color-accent); color: #06231a;
  box-shadow: 0 6px 16px -8px rgba(29, 217, 122, 0.7);
}
.flow-step.is-active .flow-text strong { color: var(--color-text-strong); }

.flow-step.is-done .flow-num { background: var(--color-text-strong); color: #fff; font-size: 0; }
.flow-step.is-done .flow-num::after {
  content: "\eb7b";
  font-family: "remixicon";
  font-size: 14px; line-height: 1;
}
.flow-step.is-done .flow-text strong { color: var(--color-text-strong); }

/* Вторичные действия — компактной парой, а не растянутыми на всю
   ширину ссылками: в узкой колонке они расходились по краям
   и читались как несвязанные элементы */
.wm-actions-minor {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wm-actions-minor .wm-btn-ghost {
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1);
}
.wm-actions-minor .wm-btn-ghost:hover {
  background: var(--color-bg);
  color: var(--color-text-strong);
  text-decoration: none;
}
.wm-actions-minor .wm-btn-ghost i { font-size: 14px; }
@media (min-width: 1320px) {
  .wm-workspace .wm-actions .wm-actions-minor { width: 100%; justify-content: flex-start; }
  .wm-workspace .wm-actions .wm-actions-minor .wm-btn { width: auto; }
}

/* Пока крупный снимок декодируется — показываем, что идёт работа,
   вместо замершего пустого холста */
.wm-stage.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: wm-skeleton 1.2s linear infinite;
}
@keyframes wm-skeleton { to { background-position: -200% 0; } }
.wm-stage.is-loading { min-height: 280px; }

/* Заголовок панели: показывает, что это второй этап работы,
   а вкладки ниже — порядок прохождения настроек */
.wm-panel-head {
  display: flex;
  /* Плашка шага выравнивается по первой строке заголовка, а не по
     верху блока — иначе она «висит» выше подписи */
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(43, 47, 51, 0.08);
}
.wm-panel-step {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #06231a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.wm-panel-title { font-size: 15px; font-weight: 700; color: var(--color-text-strong); margin: 0 0 2px; }
.wm-panel-sub { font-size: 12.5px; color: var(--color-muted); margin: 0; line-height: 1.45; }

/* Номер вкладки вместо иконки — читается как порядок шагов */
.wm-tab-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid rgba(43, 47, 51, 0.16);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), border-color 200ms cubic-bezier(0.4,0,0.2,1);
}
/* Тонкая связка между номерами — читается как последовательность
   шагов, а не как четыре независимые кнопки */
.wm-tab + .wm-tab .wm-tab-num::before {
  content: "";
  position: absolute;
  right: 100%;
  width: 100%;
  height: 1.5px;
  background: rgba(43, 47, 51, 0.14);
  pointer-events: none;
}
.wm-tab.is-active .wm-tab-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06231a;
}
.wm-tab.is-done .wm-tab-num { background: var(--color-text-strong); border-color: var(--color-text-strong); color: #fff; }

/* Иконка внутри сегментированной кнопки центрируется по обеим осям */
.wm-seg-btn i {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Вторичные действия: внутренний отступ кнопок компенсируем, чтобы
   подпись была вровень с краем колонки, а не с непонятным сдвигом */
.wm-actions-minor { margin-left: -12px; }
@media (min-width: 1320px) {
  .wm-workspace .wm-actions .wm-actions-minor { justify-content: center; margin-left: 0; }
}

/* Компактная лента файлов: подпись в одну строку, миниатюра ниже.
   Область над холстом занимала неоправданно много вертикали. */
.wm-queue-item { width: 108px; gap: 4px; }
.wm-queue-thumb { width: 108px; height: 72px; }
.wm-queue-cap { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.wm-queue-cap .wm-queue-name { flex: 1 1 auto; min-width: 0; font-size: 11px; }
.wm-queue-cap .wm-queue-meta { flex: 0 0 auto; font-size: 10.5px; }
.wm-queue-head { margin-bottom: 2px; }
.wm-queue-head h2 { font-size: 14px; }
.wm-add-more { height: 32px; padding: 0 14px; font-size: 12.5px; }

/* =========================================================
   ЕДИНОЕ ЦЕНТРИРОВАНИЕ ИКОНОК В ПАНЕЛИ ИНСТРУМЕНТА
   У шрифтовых иконок глиф внутри строчной коробки садится по
   базовой линии — даже при отцентрированной коробке значок
   визуально уезжает. Флекс по обеим осям с line-height:1
   снимает зависимость от метрик конкретного шрифта.
   Абсолютно позиционированные (стрелки селектов) исключены —
   у них своя вертикаль через translateY.
   ========================================================= */
.wm-panel i[class^="ri-"], .wm-panel i[class*=" ri-"],
.wm-actions i[class^="ri-"], .wm-actions i[class*=" ri-"],
.wm-queue i[class^="ri-"], .wm-queue i[class*=" ri-"],
.wm-drop i[class^="ri-"], .wm-drop i[class*=" ri-"],
.wm-honesty i[class^="ri-"], .wm-honesty i[class*=" ri-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
/* Заголовки зоны загрузки и очереди перестали быть <h2>: уровни
   заголовков принадлежат разделам страницы, а не элементам
   интерфейса. Внешний вид сохранён прежний. */
.wm-drop-title {
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--color-text-strong); margin: 0;
}
.wm-queue-title { font-size: 14px; font-weight: 700; color: var(--color-text-strong); margin: 0; }

/* Вкладки без номеров: иконка над подписью, как было задумано
   изначально — это разделы настроек, а не последовательность шагов */
.wm-tab i { font-size: 15px; line-height: 1; }

/* =========================================================
   ПОЯСНИТЕЛЬНЫЕ РЯДЫ SEO-РАЗДЕЛА

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

.wm-rows { display: flex; flex-direction: column; }

.wm-row {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.wm-row:first-child { border-top: none; padding-top: 0; }

.wm-row-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-accent-dark);
}
.wm-row h3 {
  font-size: 17px; line-height: 1.35; margin: 0 0 10px;
  color: var(--color-text-strong);
}
.wm-row p {
  font-size: 14.5px; line-height: 1.75; color: var(--color-muted); margin: 0 0 12px;
}
.wm-row p:last-child { margin-bottom: 0; }
.wm-row strong { color: var(--color-text-strong); font-weight: 600; }

/* Ширину меряем у контейнера, а не у окна: с 1024px на сайте
   появляется фиксированный сайдбар в 332px, и оконный медиазапрос
   ошибается в оценке доступной ширины ровно на эту величину. */
.tool-seo { container-type: inline-size; container-name: wmseo; }
@container wmseo (max-width: 620px) {
  .wm-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 952px) {
    .wm-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  }
}

/* Remix Icon рисует стрелку «-s-» в сетке 24px с большими полями:
   при 12px, как у стрелки Bootstrap, шеврон выходил 5–6px и терялся.
   17px дают тот же видимый размер, что был у прежней иконки. */
.wm-more summary i[class^="ri-"] { font-size: 17px; }

/* Стрелку селекта рисует общая система селектов (style.css).
   Иконка в обёртке скрыта здесь, ниже общего правила иконок панели
   (.wm-panel i[class^="ri-"] { display: flex }), иначе оно
   показывало её второй стрелкой рядом с селектом. */
.wm-select-wrap > i[class^="ri-"] { display: none; }

.wm-panel { container: wmpanel / inline-size; }