/*
  Дизайн-система из docs/design/2026-08-21-manager-ui.md, раздел 3.
  Тёмная плотная утилита: расчёт на сотрудника, который проводит здесь весь день.
  Акцент один и только для действий. Ничего декоративного.
*/

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('/fonts/PTSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: oklch(0.17 0.014 70);
  --panel: oklch(0.205 0.014 70);
  --panel2: oklch(0.235 0.016 70);
  --line: oklch(0.32 0.018 70);
  --line-soft: oklch(0.25 0.014 70);
  --line2: oklch(0.27 0.016 70);
  --tx: oklch(0.95 0.006 70);
  --tx2: oklch(0.76 0.01 70);
  --tx3: oklch(0.62 0.012 70);
  --acc: #e5a33c;
  --acc-tx: oklch(0.2 0.02 80);
  --ozon: oklch(0.7 0.13 250);
  --wb: oklch(0.7 0.13 330);
  --ok: oklch(0.74 0.12 155);
  --no: oklch(0.68 0.15 25);

  /* Движение интерфейса: единые кривые и длительности (WP5 §5.1) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 110ms;
  --dur-base: 170ms;
  --dur-slow: 240ms;
  /* Подложка активного пункта и проявление содержимого (docs/design/2026-10-29-reviews-tab-and-motion.md): старое гаснет
     за --dur-fade-out, новое проявляется за --dur-fade-in после паузы --dur-fade-gap. */
  --dur-thumb: 260ms;
  --dur-fade-out: 90ms;
  --dur-fade-gap: 70ms;
  --dur-fade-in: 190ms;

  /* Скругления: контролы — мелкий, карточки — средний, диалог — крупный (WP3 §3.1) */
  --radius-sm: 6px;  /* контролы: кнопка, поле, select, textarea, chip, пункт nav/tab, сегмент */
  --radius-md: 10px; /* карточки: панель, диалог-лист, preview, статусбар, композер */
  --radius-lg: 14px; /* диалог */
  --radius-pill: 999px; /* пилюли статусов (docs/design/2026-10-29-queue-and-visual-language.md §6) */

  /* Типографическая шкала ×1,1 к плану 2026-09-09: пользователь выбрал масштаб 110% (WP1, 2026-09-10) */
  --fs-2xs: 12px;     /* нижняя граница шкалы: kbd в статус-баре и в чипах */
  --fs-xs: 13px;      /* подписи колонок, бейджи, метаданные, chip */
  --fs-sm: 14px;      /* тело: ячейки таблиц, кнопки, поля, базовый текст */
  --fs-md: 15px;      /* заголовки панелей, h3, имена */
  --fs-lg: 17px;      /* h2, диалоги, .auth__title, логотип */
  --fs-title: 19px;   /* h1, .auth__logo */
  --fs-hero: 21px;    /* текст отзыва в режиме разбора по одному */
  --fs-display: 26px; /* числа воронки в отчётах */

  --sans: 'PT Sans', 'IBM Plex Mono', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* {
  box-sizing: border-box;
}

/* Панели с inline display:flex всё равно обязаны слушаться hidden */
[hidden] {
  display: none !important;
}

/* Только для экранного чтения: текст входит в доступное имя, но не виден */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.mono,
code,
kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--acc);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
}

h1 {
  font-size: var(--fs-title);
}

h2 {
  font-size: var(--fs-lg);
}

h3 {
  font-size: var(--fs-md);
}

/* Верхняя навигация — 50 px, стадии слева, взгляд на систему справа (план 2026-10-18, §3, Ш1–Ш3).
   z-index — выше липких блоков страницы и списка .combo__list (20), ниже тостов (100) и индикатора загрузки (101):
   панель меню «Настройки» выступает из шапки поверх содержимого. Не помещается в строку — пункты переносятся, а не
   уезжают за край: горизонтальной прокрутки и полос с прокруткой у шапки нет ни на какой ширине. */

.nav {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  min-height: 50px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  view-transition-name: nav;
}

.nav__logo {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: 20px;
}

.nav__logo span {
  color: var(--acc);
}

.nav__sections,
.nav__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.nav__tools {
  margin-left: auto;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--tx2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.nav__item:hover {
  background: var(--panel2);
  color: var(--tx);
  text-decoration: none;
}

.nav__item--active {
  background: var(--panel2);
  color: var(--tx);
}

/* Сноска у мастер-вкладки «Отзывы» — число кандидатов (_ReviewsNote): мелкие цифры над строкой, вплотную к подписи */
.nav__note {
  align-self: flex-start;
  margin: 4px 0 0 -4px;
  color: var(--acc);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

/* «Очередь 11» (Ш2): точка — что-то выполняется, бейдж — очередь на паузе; расшифровка — в подсказке и для
   экранного чтения, подробности — на странице «Очередь» */
.nav__running {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.nav__paused {
  padding: 1px 6px;
}

/* Живой блок внутри пункта шапки (_NavQueue): обёртка для фоновой замены, а пункты — в строке ссылки, как без неё */
.nav__live {
  display: contents;
}

/* Имя — без роли; роль — в подсказке и мелкой строкой только на широком экране (Ш2) */
.nav__user {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding-left: 4px;
}

.nav__user b {
  max-width: 140px;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__user span {
  display: none;
  font-size: var(--fs-xs);
  color: var(--tx3);
}

@media (min-width: 1440px) {
  .nav__user span {
    display: block;
  }
}

/* «Перейти к содержимому» — первая ссылка страницы: видна только в фокусе и ведёт к <main id="main" tabindex="-1"> */
.skip-link {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 40;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--acc);
  color: var(--acc-tx);
  font-weight: 700;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
  transform: none;
  text-decoration: none;
}

main:focus {
  outline: none;
}

/* Меню «Настройки» (Ш1): ссылка на «Магазины» и кнопка ▾ — один пункт с общей подложкой и тонким разделителем.
   Панель разделов закрыта через visibility: её ссылки не получают фокус и не ловят указатель. С JS (html[data-js])
   состояние одно — .is-open от app.js (п. 12), как панель ни открыли, и aria-expanded всегда совпадает с видимостью;
   :hover и :focus-within открывают её только без JS. */
.navmenu {
  position: relative;
  display: flex;
  align-items: center;
}

:root[data-js] .navmenu__link {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.navmenu__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 33px;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent;
  color: var(--tx2);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

:root[data-js] .navmenu__toggle {
  display: inline-flex;
}

.navmenu:hover :is(.navmenu__link, .navmenu__toggle),
.navmenu.is-open :is(.navmenu__link, .navmenu__toggle),
.navmenu__link.nav__item--active,
.navmenu__link.nav__item--active + .navmenu__toggle {
  background: var(--panel2);
  color: var(--tx);
  text-decoration: none;
}

/* Под шапкой, правым краем к пункту: top — 8 px отступа шапки и 1 px её рамки ниже пункта */
.navmenu__panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 280px;
  padding: 4px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.35);
  visibility: hidden;
  opacity: 0;
}

/* Прозрачный мостик над панелью — через зазор до пункта: путь мыши к разделу, в том числе наискосок, не выходит
   из .navmenu, и панель не схлопывается. Закрытая панель прячет и его. */
.navmenu__panel::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 10px;
}

.navmenu.is-open .navmenu__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Без JS: наведение мышью открывает через 120 мс (проход по шапке не дёргает панель), уход закрывает через 300 мс;
   фокус на «Настройки» или в панели открывает сразу. Задержки — transition видимости. */
:root:not([data-js]) .navmenu__panel {
  transition: visibility 0s linear 300ms, opacity 0s linear 300ms;
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-js]) .navmenu:hover .navmenu__panel {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 120ms, opacity var(--dur-fast) var(--ease) 120ms;
  }
}

:root:not([data-js]) .navmenu:focus-within .navmenu__panel {
  visibility: visible;
  opacity: 1;
  transition: none;
}

.navmenu__group {
  margin: 8px 0 2px;
  padding: 0 14px;
  color: var(--tx3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.navmenu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navmenu__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 14px;
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.navmenu__item:hover {
  background: var(--panel2);
  text-decoration: none;
}

.navmenu__item:focus-visible {
  outline-offset: -2px;
}

/* Текущий раздел — подложкой и полосой слева, не только цветом */
.navmenu__item[aria-current='page'] {
  background: var(--panel2);
  box-shadow: inset 3px 0 0 var(--acc);
  font-weight: 700;
}

.navmenu__hint {
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* Центр уведомлений (docs/design/2026-10-28-notification-center.md, макет screens/notifications/mockup.html).
   Колокольчик — пункт шапки той же высоты; панель — под шапкой правым краем к колокольчику, как меню «Настройки».
   Уровень: сбой — --no, внимание — --acc, действие — --ok; передаётся и формой значка, и словами. */
/* Спрайт значков (_NotificationIcons) не занимает места в потоке */
.icon-sprite {
  position: absolute;
  overflow: hidden;
}

.bellbox {
  position: relative;
  display: flex;
  align-items: center;
}

/* Значок — ровно по центру: промежуток .nav__item (gap) после значка стоял бы перед пустым контейнером пилюли
   (её ширина 0, сама пилюля — абсолютная) и сдвигал значок влево. */
.bell {
  position: relative;
  justify-content: center;
  gap: 0;
  width: 38px;
  padding: 0;
}

.bell > svg {
  width: 18px;
  height: 18px;
}

.bell[aria-expanded='true'] {
  background: var(--panel2);
  color: var(--tx);
}

/* Пилюля поверх угла значка: цвет — высший уровень открытых, заливка — есть новые с последнего просмотра */
.bell__count {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1.5px solid var(--c);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--panel);
  color: var(--c);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

.bell__count--crit {
  --c: var(--no);
}

.bell__count--warn {
  --c: var(--acc);
}

.bell__count--act {
  --c: var(--ok);
}

.bell__count--new {
  background: var(--c);
  color: var(--acc-tx);
}

/* Однократное покачивание, когда опрос принёс новое уведомление */
@keyframes bell-ring {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-11deg);
  }
  60% {
    transform: rotate(7deg);
  }
  80% {
    transform: rotate(-4deg);
  }
}

.bell--ring > svg {
  transform-origin: 50% 2px;
  animation: bell-ring 700ms var(--ease);
}

/* Плитка-значок вида и точки */
.ntile {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c);
}

.ntile svg {
  width: 16px;
  height: 16px;
}

.ntile--crit {
  --c: var(--no);
}

.ntile--warn {
  --c: var(--acc);
}

.ntile--act {
  --c: var(--ok);
}

.ntile--done {
  --c: var(--tx3);
}

.ndot {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
}

.mp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: 1px;
}

.mp-dot--ozon {
  --c: var(--ozon);
}

.mp-dot--wb {
  --c: var(--wb);
}

/* Панель: неблокирующий диалог; с JS видимость — атрибут hidden (app.js, п. 14). Появляется мягко: короткое
   проявление со сдвигом на 4 px, как у меню «Настройки»; при prefers-reduced-motion — сразу. */
@keyframes npanel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.npanel:not([hidden]) {
  animation: npanel-in var(--dur-fast) var(--ease);
}

.npanel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-height: min(560px, 70vh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.35);
}

.npanel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.npanel__head h2 {
  margin: 0;
  font-size: var(--fs-md);
}

.npanel__head h2:focus {
  outline: none;
}

.npanel__all {
  margin-left: auto;
  font-size: var(--fs-xs);
}

/* Прокрутка списка — тонкая, в тон линий: светлая системная полоса в тёмной панели выбивалась */
.npanel__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

.npanel__note {
  margin: 8px 10px 0;
}

.npanel__group {
  margin: 0;
  padding: 10px 14px 4px;
  color: var(--tx3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nlist {
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
}

.nitem {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
}

.nitem:hover,
.nitem:focus-within {
  background: var(--panel2);
}

.nitem__body {
  flex: 1;
  min-width: 0;
}

/* Ссылка несёт заголовок (доступное имя строки) и растягивается на всю строку псевдоэлементом */
.nitem__link {
  display: -webkit-box;
  overflow: hidden;
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nitem__link:hover {
  text-decoration: none;
}

.nitem__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.nitem__link:focus-visible {
  outline: none;
}

.nitem:has(.nitem__link:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.nitem__meta {
  margin-top: 2px;
  overflow: hidden;
  color: var(--tx3);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Над растянутой ссылкой: «Разобрано» ловит щелчок сам */
.nitem__side {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.nitem__side form {
  display: contents;
}

.nclose {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--tx2);
  cursor: pointer;
  opacity: 0;
}

.nclose svg {
  width: 14px;
  height: 14px;
}

.nclose:hover {
  border-color: var(--ok);
  color: var(--ok);
}

.nitem:hover .nclose,
.nitem:focus-within .nclose {
  opacity: 1;
}

/* Сенсорный экран: кнопка видна всегда и не меньше 40 px */
@media (hover: none) {
  .nclose {
    width: 40px;
    height: 40px;
    opacity: 1;
  }
}

.npanel__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--tx3);
  font-size: var(--fs-xs);
}

/* Скелет на время загрузки панели */
.nskel {
  height: 46px;
  margin: 6px 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel2) 0, var(--line2) 40%, var(--panel2) 80%);
  background-size: 300% 100%;
  animation: nskel 1.3s linear infinite;
}

@keyframes nskel {
  to {
    background-position: -150% 0;
  }
}

.nempty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 34px 16px;
  color: var(--tx3);
  text-align: center;
}

.nempty svg {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  color: var(--ok);
}

.nempty b {
  color: var(--tx);
  font-size: var(--fs-md);
}

/* Страница: вкладки (.tabs), фильтры, лента по дням */
.nfeed__note {
  margin-bottom: 12px;
}

.nfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
}

.nfilters .chip {
  color: var(--tx2);
  text-decoration: none;
}

.nfilters .chip--selected {
  color: var(--tx);
}

.nfilters .chip .mono {
  color: var(--tx3);
}

.nfilters__store {
  margin-left: auto;
}

.nfilters select {
  width: auto;
  min-width: 200px;
  height: 29px;
}

.nfeed {
  border: 1px solid var(--line-soft);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--panel);
}

.nday {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.ncards {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ncard {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.nday-group:last-child .ncard:last-child {
  border-bottom: 0;
}

.ncard:hover {
  background: color-mix(in oklab, var(--panel2) 55%, transparent);
}

.ncard__main {
  min-width: 0;
}

.ncard__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.ncard__detail {
  margin-top: 2px;
  color: var(--tx2);
  overflow-wrap: anywhere;
}

.ncard__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 4px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.ncard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.ncard__note {
  color: var(--acc);
}

.ncard__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ncard--closed {
  opacity: 0.72;
}

.ncard--closed .ncard__title {
  font-weight: 400;
}

.nfeed__more {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--tx3);
  font-size: var(--fs-xs);
}

/* ≤ 600 px: панель — во всю ширину под шапкой, как «Настройки»; у карточки кнопки — под текстом */
@media (max-width: 600px) {
  .bellbox {
    position: static;
  }

  .npanel {
    top: calc(100% + 1px);
    right: 12px;
    left: 12px;
    width: auto;
  }

  .ncard {
    grid-template-columns: 28px 1fr;
  }

  .ncard__actions {
    grid-column: 2;
    flex-wrap: wrap;
  }

  .ncard__actions .btn {
    min-height: 40px;
  }

  .nfilters__store {
    width: 100%;
    margin-left: 0;
  }

  .nfilters select {
    width: 100%;
  }
}

/* Строка этапов «Отзывов» и строка разделов на страницах администратора (Ш1; у разделов — те же группы, что в меню,
   через разделитель). Вкладки во всю высоту строки, прижаты к её нижней границе: у текущей — светлее фон, скругление
   сверху и акцентная черта снизу (вид из макета «Ожидают результата», понравился пользователю 2026-10-30). */
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
  view-transition-name: subnav;
}

.subnav__group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Разделитель групп — короткая черта посередине, а не во всю высоту вкладок */
.subnav__group + .subnav__group {
  position: relative;
  margin-left: 12px;
  padding-left: 12px;
}

.subnav__group + .subnav__group::before {
  content: '';
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  border-left: 1px solid var(--line);
}

.subnav__item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--tx2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.subnav__item:hover {
  background: var(--panel2);
  color: var(--tx);
  text-decoration: none;
}

.subnav__item[aria-current='page'] {
  background: var(--panel2);
  box-shadow: inset 0 -2px 0 var(--acc);
  color: var(--tx);
}

/* Узкая ширина (Ш3), только CSS: ≤ 1100 px — инструменты делят строку с логотипом и разделами и переносятся внутри себя,
   а не уходят целиком на вторую строку. Этапы «Отзывов» — своей строкой под шапкой (.subnav). */
@media (max-width: 1100px) {
  .nav__tools {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
  }
}

/* ≤ 600 px — хвосты подписей и имя скрыты с экрана (имя остаётся в доступном имени «Выйти», хвост — в имени пункта),
   панель меню — во всю ширину шапки, раздел — строка не ниже 40 px */
@media (max-width: 600px) {
  .nav__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav__user {
    display: none;
  }

  .navmenu {
    position: static;
  }

  .navmenu__panel {
    top: calc(100% + 1px);
    right: 12px;
    left: 12px;
    width: auto;
  }

  .navmenu__item {
    min-height: 40px;
  }
}

/* ≤ 600 px с мышью: панель встаёт под всей шапкой, а между пунктом и ней может быть перенесённая строка шапки.
   Мостик опускается от пункта до панели (дальше его закрывает сама панель): путь мыши к разделу не выходит из .navmenu. */
@media (max-width: 600px) and (hover: hover) and (pointer: fine) {
  .navmenu__link,
  .navmenu__toggle {
    position: relative;
  }

  .navmenu.is-open :is(.navmenu__link, .navmenu__toggle)::after,
  :root:not([data-js]) .navmenu:hover .navmenu__link::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 160px;
  }
}

/* Экранная сетка */

.page {
  padding: 20px;
}

.page__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.page__head p {
  margin: 0;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

/* ≤ 600 px шапка страницы переносится: заголовок, затем действия; подпись — во всю ширину, а не узким столбцом рядом
   с заголовком (ревью 2026-10-23-ui-declutter-review.md, п. 1 быстрых правок). */
@media (max-width: 600px) {
  .page__head {
    flex-wrap: wrap;
  }

  .page__head p {
    flex-basis: 100%;
  }
}

/* «Шаблоны текста» конструктором (docs/design/2026-10-29-template-builder.md): блоки письма слева, предпросмотр справа. */
.letter-head {
  flex-wrap: wrap;
  gap: 12px;
}

.letter-status {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.letter-status--dirty {
  color: var(--acc);
}

.letter-history {
  position: relative;
}

.letter-history > summary {
  list-style: none;
}

.letter-history > summary::-webkit-details-marker {
  display: none;
}

.letter-history__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(460px, calc(100vw - 40px));
  max-height: 420px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel2);
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.45);
}

.letter-history__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.letter-history__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line2);
  font-size: var(--fs-sm);
}

.letter-history__list li .muted {
  font-size: var(--fs-xs);
}

.letter__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.letter__main {
  display: flex;
  flex: 999 1 560px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.letter__aside {
  position: sticky;
  top: 12px;
  flex: 1 1 360px;
  min-width: 0;
}

.letter__mode {
  align-self: flex-start;
  font-size: var(--fs-xs);
}

.letter-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--panel);
}

.letter-card--loop {
  border: 1px solid color-mix(in oklab, var(--acc) 35%, transparent);
}

.letter-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.letter-card__head h2 {
  margin: 0;
  font-size: var(--fs-md);
}

.letter-card__head .muted {
  font-size: var(--fs-xs);
}

.letter-card__icon {
  align-self: center;
  width: 16px;
  height: 16px;
  color: var(--acc);
}

.letter-card textarea,
.letter-card input[type="text"] {
  width: 100%;
}

.letter-inserts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.letter-inserts__label {
  margin-right: 2px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.letter-legal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.letter-legal input {
  margin-top: 3px;
  accent-color: var(--acc);
}

.letter-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel2);
}

.letter-lines__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.letter-line {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 8px;
}

.letter-line__move {
  display: flex;
  gap: 2px;
}

.letter-line__on {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}

.letter-line__on input {
  accent-color: var(--acc);
}

.letter-line__hint {
  display: block;
  color: var(--tx3);
  font-size: var(--fs-2xs);
}

.letter-line input.letter-line__label {
  padding: 4px 9px;
  font-size: var(--fs-xs);
}

.letter-line--off .letter-line__on > span,
.letter-line--off .letter-line__label {
  opacity: 0.55;
}

.letter-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.letter-preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.letter-preview__head .muted {
  font-size: var(--fs-xs);
}

.letter-preview__body {
  color: var(--tx);
}

.letter-preview__error {
  display: block;
}

@media (max-width: 600px) {
  .letter__aside {
    position: static;
  }

  .letter-line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .letter-line__label {
    grid-column: 1 / -1;
  }
}

.panel {
  background: var(--panel);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 37px;
  padding: 0 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--fs-md);
  font-weight: 700;
}

.panel__body {
  padding: 16px;
}

/* Подзаголовок внутри тела панели — подпись .label без фона и рамки; справа — счётчик или бейдж (ревью 2026-10-23,
   принцип 5): вторая .panel__head внутри тела спорила с шапкой панели. */
.panel__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.panel__sub > :last-child:not(:first-child) {
  margin-left: auto;
}

/* Пояснение справа в шапке панели: на узком экране не помещается рядом с заголовком — скрыто. */
@media (max-width: 600px) {
  .panel__aside {
    display: none;
  }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 486px;
  gap: 12px;
  align-items: start;
}

.split--list {
  grid-template-columns: 440px minmax(0, 1fr);
}

.split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* На окне ≤ 1366px инспектор уже, чтобы таблица кандидатов помещалась без прокрутки
   после роста кеглей (план 2026-09-10 §1.3). Списки .split--list не трогаем. */
@media (max-width: 1366px) {
  .split:not(.split--list):not(.split--even) {
    grid-template-columns: minmax(0, 1fr) 430px;
  }
}

.split > :only-child {
  grid-column: 1 / -1;
}

.split > * {
  min-width: 0;
}

/* ≤ 600 px колонки split — одна под другой: колонка фиксированной ширины выходила за край экрана, а соседняя сжималась
   до нуля (ревью 2026-10-23, п. 3 быстрых правок). У кандидатов своя раскладка — с 1100 px. */
@media (max-width: 600px) {
  .split,
  .split:not(.split--list):not(.split--even) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Карточка отправки и разбора под списком: магазин, сведения об обращении и кнопки шапки переносятся на новые строки,
     а не обрезаются шапкой высотой 37 px. */
  #outbox-detail .panel__head,
  #reply-detail .panel__head {
    flex-wrap: wrap;
    height: auto;
    min-height: 37px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Кандидаты (план 2026-10-18-ui-candidates-header-rules.md, К2–К3): инспектор закреплён при прокрутке таблицы, решение
   — в его закреплённом низу. Только под .split--candidates: обычный .split у «Магазинов» и «Пользователей» не меняется. */
.split--candidates #inspector-slot {
  position: sticky;
  top: 12px;
}

/* Выделенная стрелками строка прокручивается в видимую часть выше липкой строки состояния (К3) */
.split--candidates table.grid tbody tr {
  scroll-margin-bottom: max(var(--statusbar-h), var(--candidate-bulk-h, 0px));
}

.spacer {
  flex: 1;
}

/* Таблицы */

/* Таблица шире панели на узком окне: прокручиваем её, а не обрезаем.
   Панель при этом сохраняет overflow:hidden ради скруглённых углов. position: relative — скрытые подписи (.sr-only) в
   ячейках прокручиваются вместе с таблицей, а не растягивают страницу вбок. */
.table-scroll {
  position: relative;
  overflow-x: auto;
}

table.grid {
  width: 100%;
  border-collapse: collapse;
}

table.grid th {
  height: 33px;
  padding: 0 10px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

table.grid td {
  height: 42px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line2);
  color: var(--tx2);
  font-size: var(--fs-sm);
  vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease);
}

/* Список пользователей — 48 px по дизайн §3, у таблиц отзывов 42 px */
table.grid--roomy td {
  height: 48px;
}

table.grid tbody tr:hover td {
  background: oklch(0.225 0.014 70);
}

table.grid tbody tr.is-selected td {
  background: oklch(0.26 0.016 70);
  color: var(--tx);
}

table.grid tbody tr.is-selected td:first-child {
  box-shadow: inset 2px 0 0 var(--acc);
}

/* Причина зафиксирована и переживёт переход по строкам: точка у первой ячейки (дефект 1.2) */
table.grid tbody tr.has-reason td:first-child::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--acc);
  vertical-align: middle;
}

.cell-title {
  color: var(--tx);
  font-size: var(--fs-sm);
}

.cell-sub {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

/* Кандидаты (план 2026-10-18-ui-candidates-header-rules.md, К6): строки таблицы одной высоты — магазин и причина ИИ в
   одну строку с многоточием, целиком — в подсказке ячейки. Ширину держит сам текст (ширина колонки минус поля ячейки),
   а не ячейка: так колонка не растёт по длинному названию при любой раскладке таблицы. */
.split--candidates .cell-clip {
  display: block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split--candidates .cell-clip--reason {
  max-width: 148px;
}

/* Фильтры кандидатов (К6): список не шире поиска магазина (.combo) — длинные названия причин ИИ не растягивают строку
   фильтров на две; открытый список показывает их целиком. */
.candidates-filters select {
  max-width: 280px;
}

/* Список выбора магазина (.combo__list) выходит за границы панели фильтров — как у «Все отзывы» */
.candidates-filters {
  overflow: visible;
}

/* «Фильтры» (ревью 2026-10-23, структурный п. 9): магазин, причина ИИ и поиск свёрнуты на телефоне. На широком экране
   свёртки не видно: details и его содержимое — в строке фильтров, как раньше, раскрыт он или нет. Браузер без
   ::details-content покажет «Фильтры» и на широком экране. С JS «Найти» не нужна: Enter в поиске — candidates.js. */
.candidates-filters__more > summary {
  color: var(--tx2);
  cursor: pointer;
}

.candidates-filters__more::details-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.candidates-filters__more[open] > summary {
  margin-bottom: 10px;
}

@supports selector(::details-content) {
  @media (min-width: 721px) {
    .candidates-filters__more {
      display: contents;
    }

    .candidates-filters__more > summary {
      display: none;
    }

    .candidates-filters__more::details-content {
      display: contents;
      content-visibility: visible;
    }
  }
}

:root[data-js] .candidates-filters__find {
  display: none;
}

/* «Разбирать по одному» в шапке: на телефоне подпись короче — «По одному», чтобы кнопка встала в строку заголовка;
   полная остаётся доступным именем. */
#focus-toggle-label {
  position: relative;
}

.focus-toggle__narrow {
  display: none;
}

@media (max-width: 600px) {
  .focus-toggle__wide {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .focus-toggle__narrow {
    display: inline;
  }
}

.empty {
  padding: 28px 12px;
  color: var(--tx3);
  text-align: center;
}

/* Кнопки */

/* Иерархия (docs/design/2026-10-29-queue-and-visual-language.md §8): btn--accent — главное действие экрана; btn —
   любое действие, меняющее состояние или запускающее процесс (заметна на панели: светлее --panel2, рамка --line,
   тень снизу; у машинных действий — значок слева); btn--quiet — только уход и навигация; btn--danger — необратимое. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 33px;
  padding: 0 12px;
  background: color-mix(in oklab, var(--tx) 7%, var(--panel2));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.28);
  color: var(--tx);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.btn:hover {
  background: color-mix(in oklab, var(--tx) 12%, var(--panel2));
  border-color: var(--tx3);
  text-decoration: none;
}

.btn > svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: -2px;
}

.btn--sm {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-xs);
}

.btn--sm > svg {
  width: 14px;
  height: 14px;
}

/* Только значок: универсально узнаваемое действие рядом с тем, к чему относится; aria-label и title обязательны */
.btn--icon {
  width: 33px;
  padding: 0;
}

.btn--icon > svg {
  margin: 0;
}

.btn--icon.btn--sm {
  width: 28px;
}

.btn--accent {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-tx);
  font-weight: 700;
}

.btn--accent:hover {
  filter: brightness(1.08);
}

.btn--danger {
  color: var(--no);
  border-color: color-mix(in oklab, var(--no) 45%, transparent);
}

.btn--danger:hover {
  background: color-mix(in oklab, var(--no) 12%, var(--panel2));
  border-color: var(--no);
}

.btn--large {
  height: 42px;
  padding: 0 18px;
  font-size: var(--fs-sm);
}

.btn--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--tx2);
}

.btn--quiet:hover {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--tx);
}

/* Тихий значок «убрать»: красный только при наведении */
.btn--quiet.btn--danger-hover:hover {
  border-color: color-mix(in oklab, var(--no) 45%, transparent);
  color: var(--no);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Статус-пилюля (§6): заливка тона 14 %, без рамки, текст с заглавной. Нейтральное по умолчанию («Собран», «Обычный»)
   — без пилюли: приглушённым текстом или ничего. Площадки — не пилюли: .mp-tag / .mp-dot. */
.pill {
  --c: var(--tx3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c);
  font-size: var(--fs-xs);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.pill--ok {
  --c: var(--ok);
}

.pill--no {
  --c: var(--no);
}

.pill--acc {
  --c: var(--acc);
}

.pill--mute {
  --c: var(--tx3);
}

.pill > svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.pill--dot::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mp-tag {
  --c: var(--tx3);
  color: var(--c);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mp-tag--ozon {
  --c: var(--ozon);
}

.mp-tag--wb {
  --c: var(--wb);
}

/* Встроенное предупреждение (§7) о состоянии объекта: подложка тона 9 %, значок, ключевая фраза <b>, ссылка действия.
   Отличие от .note: note — сообщение страницы о результате действия. */
.callout {
  --c: var(--no);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--c) 9%, transparent);
  color: var(--tx2);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.callout > svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--c);
}

.callout b {
  color: var(--tx);
  font-weight: 700;
}

.callout a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--tx) 40%, transparent);
  text-underline-offset: 2px;
}

.callout a:hover {
  text-decoration-color: var(--acc);
}

.callout--acc {
  --c: var(--acc);
}

.callout--info {
  --c: var(--tx3);
}

.callout__text {
  flex: 1;
  min-width: 0;
}

.callout__actions {
  display: flex;
  align-self: center;
  gap: 6px;
  margin-left: 8px;
}

/* Точка состояния — замена глифа ● */
.dot {
  --c: var(--tx3);
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}

.dot--ok {
  --c: var(--ok);
}

.dot--no {
  --c: var(--no);
}

.dot--acc {
  --c: var(--acc);
}

.dot--live {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .dot--live {
    box-shadow: none;
  }
}

/* Поля ввода */

.field {
  display: block;
  margin-bottom: 12px;
}

.field__label {
  display: block;
  margin-bottom: 5px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.field__hint {
  margin-top: 5px;
  color: var(--tx3);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* «?» у подписи (ревью 2026-10-23, принцип 4): редкая подсказка не висит под полем, а раскрывается по нажатию — под
   строкой подписи. В шапке панели раскрытая подсказка ложится поверх тела панели, во всю её ширину. */
.hint-q {
  display: inline;
}

.hint-q > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: 1px solid var(--tx3);
  border-radius: 50%;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  vertical-align: 1px;
  list-style: none;
  cursor: pointer;
}

.hint-q > summary::-webkit-details-marker {
  display: none;
}

.hint-q > summary:hover,
.hint-q[open] > summary {
  border-color: var(--tx2);
  color: var(--tx2);
}

.hint-q__body {
  display: block;
  margin: 4px 0 2px;
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.hint-q__body ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.hint-q__body p {
  margin: 0 0 6px;
}

.hint-q__body p:last-child {
  margin-bottom: 0;
}

/* «?» у заголовка страницы («Отчёты»): раскрытая подсказка ложится под шапкой страницы поверх содержимого. */
.page__head:has(> .hint-q) {
  position: relative;
}

.page__head > .hint-q > .hint-q__body {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  max-width: 760px;
  margin: 0;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.35);
  color: var(--tx2);
}

.panel__head:has(> .hint-q) {
  position: relative;
}

/* Раскрытая подсказка может быть выше тела панели — панель её не обрезает. */
.panel:has(> .panel__head > .hint-q[open]) {
  overflow: visible;
}

.panel__head > .hint-q > .hint-q__body {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  padding: 10px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  color: var(--tx2);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
select,
textarea {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--tx);
  font-family: inherit;
  font-size: var(--fs-sm);
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
}

/* Кольцо снимается только у полей, которым фокус показывает акцентная рамка.
   У чекбокса и радио рамки нет, и голое input:focus оставляло их вообще без
   индикатора фокуса — с клавиатуры было не видно, где ты находишься. */
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--acc);
}

/* Браузерный крестик в поиске ломает высоту строки фильтров (дефект 1.1) */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

input.code {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: 0.35em;
  text-align: center;
}

/* Сообщения */

.note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--tx2);
  font-size: var(--fs-sm);
}

.note--error {
  border-left-color: var(--no);
  color: var(--no);
}

.note--ok {
  border-left-color: var(--ok);
}

/* Предупреждение: перед необратимым действием, по итогу действия, отклонение от нормы. */
.note--acc {
  border-left-color: var(--acc);
}

/* Информационный текст — приглушённый абзац без рамки. Рамка остаётся у ошибок, результатов действий и предупреждений
   перед необратимым действием (ревью 2026-10-23, принцип 5): так глаз находит главное. */
.note--info {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--tx3);
}

/* Экран входа */

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.auth__card {
  width: 100%;
  max-width: 420px;
}

.auth__logo {
  margin-bottom: 18px;
  font-size: var(--fs-title);
  font-weight: 700;
  text-align: center;
}

.auth__logo span {
  color: var(--acc);
}

.auth__title {
  margin-bottom: 4px;
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Акцентный serif: имя приложения и «первая полоса» экрана, 4 места (WP1 §1.5).
   Идёт позже правил .nav__logo/.auth__logo, чтобы победить их вес по порядку. */
.nav__logo,
h1,
.auth__logo,
.auth__title {
  font-family: var(--serif);
  font-weight: 400;
}

.auth__sub {
  margin: 0 0 16px;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.auth__foot {
  margin-top: 14px;
  color: var(--tx3);
  font-size: var(--fs-xs);
  text-align: center;
}

/* Мастер приглашения */

.steps {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.step {
  flex: 1;
  height: 3px;
  background: var(--line2);
  border-radius: 2px;
}

.step--done {
  background: color-mix(in oklab, var(--acc) 45%, transparent);
}

.step--current {
  background: var(--acc);
}

.qr {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 12px;
  padding: 8px;
  background: #fff;
  border-radius: 3px;
}

.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}

.codes span {
  color: var(--tx);
}

/* Карточка пользователя и диалоги */

.rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
}

.row__label {
  color: var(--tx3);
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--tx2);
  font-size: var(--fs-sm);
}

.tab:hover {
  background: var(--panel2);
  text-decoration: none;
}

.tab--active {
  background: var(--panel2);
  color: var(--tx);
  font-weight: 700;
}

.tab__count {
  color: var(--tx3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

/* Изменившийся при OOB-замене счётчик навигации коротко подсвечивается (WP5 §5.6) */
@keyframes count-bump {
  from {
    color: var(--acc);
    transform: scale(1.08);
  }
}

.tab__count--bump {
  animation: count-bump var(--dur-slow) var(--ease);
}

dialog {
  width: min(500px, calc(100vw - 32px));
  padding: 0;
  background: var(--panel);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.5);
  color: var(--tx);
}

dialog::backdrop {
  background: oklch(0.12 0.01 70 / 0.72);
  transition: opacity var(--dur-slow) var(--ease);
}

/* Вход диалога: прозрачность и лёгкий масштаб за --dur-slow (WP5 §5.5).
   Без поддержки @starting-style окно просто появляется — запасных путей нет. */
dialog[open] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.98);
  }

  dialog[open]::backdrop {
    opacity: 0;
  }
}

.dialog__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.dialog__body {
  padding: 20px;
}

.dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.stack {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.muted {
  color: var(--tx3);
}

.label {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.text-danger {
  color: var(--no);
}

.text-ok {
  color: var(--ok);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
}

.checkbox input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--acc);
}

/* Разделы отзывов: фильтры одной строкой, инспектор, панели деталей */

.filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
}

.seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg a,
.seg button {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 11px;
  border: none;
  background: transparent;
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}

.seg a:hover,
.seg button:hover {
  color: var(--tx2);
  text-decoration: none;
}

.seg .is-active {
  background: var(--panel2);
  color: var(--tx);
  font-weight: 700;
}

/* ≤ 600 px сегменты и вкладки переносятся на следующую строку, а не выталкивают страницу за правый край. */
@media (max-width: 600px) {
  .seg,
  .tabs {
    flex-wrap: wrap;
  }
}

/* Режим «Разбирать по одному»: один отзыв на весь экран, кегль текста 21 px (дизайн §2, §3). План
   2026-10-18-ui-candidates-header-rules.md, К4: в шапке — площадка, магазин, место в списке и соседние отзывы; скриншот —
   миниатюрой, только если он есть; низ решения закреплён над строкой состояния, как у инспектора (К2). overflow: clip
   вместо hidden у .panel не делает панель областью прокрутки — иначе низ не лип бы к окну; где clip не поддержан,
   остаётся hidden, и низ просто стоит в конце панели. */
.focus {
  max-width: 946px;
  margin: 0 auto;
}

.focus__panel {
  overflow: clip;
}

.focus__store {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus__position {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 400;
}

.focus__nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.focus__nav .btn {
  font-weight: 400;
}

.focus__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.focus__shot {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 242px;
  height: 174px;
  margin: 0 0 12px 16px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.focus__shot img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Переносы строк отзыва сохраняются */
.focus__text {
  font-size: var(--fs-hero);
  line-height: 1.45;
  margin-top: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Низ решения в режиме «по одному» — те же сводка и кнопки, что в инспекторе (_CandidateDecisionFoot) */
.focus__foot {
  position: sticky;
  bottom: var(--statusbar-h);
  z-index: 1;
  padding: 10px 16px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

/* Инспектор кандидата (план 2026-10-18, К2): шапка, прокручиваемое тело и низ с решением.
   Высота — окно без 12 px сверху, 12 px над строкой состояния, самой строки и нижнего поля страницы (20 px): в конце
   прокрутки строка поднимается на это поле, и низ сетки не выталкивает инспектор за верх окна.
   overflow: clip вместо hidden у .panel не делает панель областью прокрутки, поэтому низ решения липнет к низу окна,
   пока инспектор ещё не встал на место (верх страницы после перезагрузки): решение на экране сразу, а не после
   прокрутки. Где clip не поддержан, остаётся hidden, и низ просто стоит в конце инспектора. */
.split--candidates .inspector {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 44px - max(var(--statusbar-h), var(--candidate-bulk-h, 0px)));
  max-height: calc(100dvh - 44px - max(var(--statusbar-h), var(--candidate-bulk-h, 0px)));
  overflow: clip;
}

.inspector__head {
  display: grid;
  gap: 4px;
  padding: 9px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}

.inspector__line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inspector__store {
  min-width: 0;
  overflow: hidden;
  color: var(--tx);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector__source {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.inspector__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.inspector__body {
  padding: 12px;
}

.split--candidates .inspector__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Скриншот — только если он есть: у отзывов WEB/API его нет, и пустая рамка не сжимает текст */
.inspector__shot {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 86px;
  margin: 0 0 8px 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

/* Атрибуты 120×86 — место под миниатюру до загрузки; снимок другой пропорции вписывается, а не растягивается */
.inspector__shot img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Переносы строк отзыва сохраняются */
.inspector__text {
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inspector__url {
  margin-top: 4px;
  font-size: var(--fs-xs);
  word-break: break-all;
}

.inspector__foot {
  flex: none;
  padding: 10px 12px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.split--candidates .inspector__foot {
  position: sticky;
  bottom: max(var(--statusbar-h), var(--candidate-bulk-h, 0px));
  z-index: 1;
}

/* «Проверка ИИ» (_CandidateCheck): только причина и обоснование */
.check {
  clear: both;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

/* Проверки нет — одна приглушённая строка: без рамки, фона и плашки-заголовка. */
.check--empty {
  border: 0;
  background: none;
  font-size: var(--fs-xs);
}

.check__head {
  padding: 6px 11px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.check__body {
  display: grid;
  gap: 7px;
  padding: 9px 11px;
  font-size: var(--fs-xs);
}

.check__facts {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
}

.check__facts dt {
  color: var(--tx3);
}

.check__facts dd {
  margin: 0;
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Низ решения (_CandidateDecisionFoot): сводка выбранной причины и два действия в одну строку */
.decision-reasons {
  margin-top: 12px;
}

.decision-reasons__nojs {
  margin-top: 6px;
}

.decision__summary {
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.decision__summary--empty {
  color: var(--tx3);
}

.decision__buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.decision__confirm {
  flex: 1;
  min-width: 0;
}

.decision__reject {
  flex: 1;
  min-width: 0;
}

.decision__buttons kbd {
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: var(--fs-2xs);
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.7;
}

.preview {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--tx2);
  white-space: pre-wrap;
  max-height: 460px;
  overflow: auto;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--tx2);
  font-family: inherit;
  font-size: var(--fs-xs);
}

.chip--selected {
  border-color: var(--acc);
  color: var(--tx);
  background: color-mix(in oklab, var(--acc) 12%, transparent);
}

.chip kbd {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 3px;
  line-height: 1.3;
}

.chip--selected kbd {
  color: var(--acc);
  border-color: var(--acc);
}

.chips--attention {
  outline: 1px solid var(--acc);
  outline-offset: 3px;
}

/* Наблюдаемое состояние отзыва на площадке (docs/design/2026-10-27-review-marketplace-state.md, «Интерфейс»): без плашки —
   иконка 14 px в цвет состояния, в строке таблиц перед текстом (подробности — в подсказке), в карточке — с подписью.
   Удалённый отзыв в строке ещё и приглушён и зачёркнут; на иконку (inline-flex) зачёркивание не переходит. Высота
   иконки меньше строки текста: строки таблиц не растут. */
.mstate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  font-size: var(--fs-xs);
  line-height: 1;
  white-space: nowrap;
  vertical-align: -2px;
}

.mstate svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.mstate--labeled {
  margin-right: 0;
  vertical-align: baseline;
}

/* Подпись в карточке — приглушённая: цвет состояния несёт только иконка. */
.mstate--labeled > span {
  color: var(--tx2);
}

.mstate--deleted {
  color: color-mix(in oklab, var(--no) 80%, var(--tx2));
}

.mstate--excluded {
  color: color-mix(in oklab, var(--acc) 80%, var(--tx2));
}

/* Ссылки строк (a.row-link, .archive__text a) сами задают цвет и снимают подчёркивание — селекторы сильнее, и при наведении. */
.mstate-text--deleted,
a.row-link.mstate-text--deleted,
.archive__text a.mstate-text--deleted,
.archive__text a.mstate-text--deleted:hover {
  color: var(--tx3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--no) 55%, transparent);
}

/* «Итоговая причина» (план 2026-10-18, К2–К3): причины площадки отзыва — списком в одну колонку во всю ширину; длинное
   название переносится, а не обрезается: названия начального набора начинаются одинаково и различаются в конце.
   Клавиша — слева. Высота списка на скорость не влияет: решение — в закреплённом низу инспектора. */
.reason-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.chip--reason {
  display: flex;
  align-items: baseline;
  width: 100%;
  height: auto;
  min-height: 29px;
  padding: 5px 9px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.chip--reason kbd {
  flex: none;
  min-width: 1.6em;
  text-align: center;
}

.chip__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Пункт жалобы WB в «К отправке» (docs/design/2026-10-31-wb-complaint-items.md, вариант «В»): те же плашки выбора, что
   «Итоговая причина» кандидатов, только сеткой — пункты короткие, а карточка широкая. Точка справа — пункт по причине. */
.wb-items {
  margin-bottom: 14px;
}

.wb-items fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wb-items__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 0;
}

.wb-items__manual {
  color: var(--acc);
  font-size: var(--fs-xs);
}

.wb-items__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.chip__auto {
  flex: none;
  align-self: center;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--tx3);
}

.chip--selected .chip__auto {
  background: var(--acc);
}

/* Итог разбора WB (_ReplyDetail.cshtml) — чипы-радиокнопки: отмеченный выглядит как выбранный чип разметки Ozon. */
.chip--radio {
  position: relative;
  cursor: pointer;
}

.chip--radio:has(> input:checked) {
  border-color: var(--acc);
  color: var(--tx);
  background: color-mix(in oklab, var(--acc) 12%, transparent);
}

.chip--radio:has(> input:checked) .chip__auto {
  background: var(--acc);
}

.chip--radio:has(> input:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.wb-ack {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.wb-ack__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wb-ack__row input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
}

.wb-ack-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--tx2);
  font-size: var(--fs-sm);
}

.wb-ack-done svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ok);
}

.wb-ack-done b {
  color: var(--tx);
  font-weight: 600;
}

.wb-items__reset {
  margin-top: 8px;
}

/* ── WP4: конструктор текста отправки ── */

/* Закреплённая панель под textarea: селект «Собрать заново» и чипы значений макросов.
   Чипы вставляют значения, а не плейсхолдеры — DraftText уходит на площадку как есть (§4.1). */
.composer {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--panel2);
}

/* Снаружи — шаблон и «Собрать заново» одной строкой; на узкой карточке кнопка переносится, а не выходит за край. */
.composer__rebuild {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.composer__rebuild select {
  flex: 0 1 360px;
  width: auto;
  min-width: 0;
}

/* Значения макросов — свёрнуты под строкой «Собрать заново» (ревью 2026-10-23, структурный п. 5). */
.composer__insert {
  font-size: var(--fs-xs);
}

.composer__rebuild + .composer__insert {
  margin-top: 8px;
}

.composer__group {
  margin-top: 8px;
}

/* Чип не шире карточки: имя макроса — одной строкой, сокращается значение (на телефоне чип {items} рвал имя или
   выходил за край). */
.composer__group .chip {
  max-width: 100%;
}

.composer__group .chip > .mono {
  flex: none;
  white-space: nowrap;
}

/* Подпись «имя → значение» внутри чипа: значение обрезается, полное — в подсказке */
.composer__value {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx3);
}

/* Высота строки состояния — одна на все места, которые от неё отступают: инспектор кандидатов и его низ решения,
   прокрутка выделенной строки таблицы (план 2026-10-18, К2–К3). Строка в одну строку текста — ровно такой высоты. */
:root {
  --statusbar-h: 36px;
}

/* Строка состояния экрана кандидатов: подсказки клавиш, пока не отмечены строки, — массовые действия (К5). Поля по
   3 px сверху и снизу: в высоту --statusbar-h помещаются и строка подсказок, и компактные (28 px) контролы панели. */
.statusbar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--statusbar-h);
  padding: 3px 12px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-size: var(--fs-xs);
  color: var(--tx3);
}

/* Подсказки клавиш — прямо в строке, как и были; прячутся целиком, пока видна панель массовых действий */
.statusbar__keys {
  display: contents;
}

/* Массовые действия в строке состояния (план 2026-10-18-ui-candidates-header-rules.md, К5): видны сразу после первой
   отметки, сколько бы строк ни было в таблице. Высота строки та же: от неё отступают инспектор и его низ решения.
   Акцентная рамка строки — пока панель видна. */
.statusbar__bulk {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}

.statusbar:has(> .statusbar__bulk:not([hidden])) {
  border-color: var(--acc);
}

.statusbar__count {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.statusbar__selected {
  color: var(--tx);
  font-weight: 700;
}

.statusbar__mixed {
  color: var(--tx2);
}

.statusbar__reason {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.statusbar__bulk select,
.statusbar__bulk .btn {
  height: 28px;
  font-size: var(--fs-xs);
}

.statusbar__bulk select {
  width: auto;
  max-width: 320px;
  padding: 0 8px;
}

.statusbar__bulk .btn {
  padding: 0 10px;
}

.statusbar kbd {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 4px;
  font-size: var(--fs-2xs);
  color: var(--tx2);
}

.statusbar a {
  color: var(--tx3);
  text-decoration: none;
}

.statusbar a:hover {
  color: var(--tx2);
}

.statusbar__list {
  display: grid;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--tx2);
}

/* К7–К7б: кандидаты на планшете и телефоне. Настройки других split-экранов не меняются. */
.candidate-text__meta {
  display: none;
}

@media (max-width: 1100px) {
  #candidates-main.split--candidates {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--candidates #inspector-slot {
    position: static;
    order: -1;
    scroll-margin-top: 12px;
  }

  .split--candidates .inspector {
    max-height: none;
  }

  .split--candidates .inspector__body {
    overflow: visible;
  }

  .split--candidates .inspector__foot {
    bottom: var(--candidate-bulk-h, 0px);
  }

  .candidates-filters .btn,
  .candidates-filters .seg a,
  .split--candidates .btn,
  .split--candidates .chip,
  .focus .btn,
  .focus .chip,
  .statusbar--candidates .btn,
  .statusbar--candidates select {
    min-height: 32px;
    height: auto;
  }

  .split--candidates input[type="checkbox"] {
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }

  .inspector__source,
  .focus__meta a,
  .candidates-filters__more > a,
  .split--candidates .empty a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  .split--candidates .row-link {
    min-height: 32px;
    padding: 6px 0;
  }

  .focus__head {
    flex-wrap: wrap;
  }

  .focus__nav {
    flex-wrap: wrap;
  }
}

@media (hover: none) {
  .statusbar--candidates .statusbar__keys,
  .statusbar--focus {
    display: none;
  }

  .statusbar--candidates:has(> .statusbar__bulk[hidden]) {
    display: none;
  }
}

@media (max-width: 720px) {
  .split--candidates table.grid {
    table-layout: fixed;
  }

  .split--candidates table.grid th:not(:first-child):not(:nth-child(5)),
  .split--candidates table.grid td:not(:first-child):not(:nth-child(5)) {
    display: none;
  }

  .split--candidates table.grid th:first-child {
    width: 52px !important;
  }

  .split--candidates table.grid .candidate-text {
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal !important;
    max-width: none !important;
  }

  .candidate-text .row-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    padding: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .candidate-text__meta {
    display: block;
    margin-top: 4px;
    color: var(--tx3);
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
  }

  .candidates-filters .filters > *,
  .candidates-filters__more > *,
  .candidates-filters__more > .combo,
  .candidates-filters__more > select,
  .candidates-filters__more > input {
    width: 100% !important;
    max-width: none;
    min-width: 0;
  }

  .candidates-filters .seg a {
    flex: 1;
    justify-content: center;
  }

  .statusbar--candidates .statusbar__keys,
  .statusbar--focus {
    display: none;
  }

  .statusbar--candidates:has(> .statusbar__bulk[hidden]) {
    display: none;
  }

  .statusbar--candidates .statusbar__reason {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .statusbar--candidates .statusbar__reason select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .focus__nav {
    width: 100%;
    margin-left: 0;
  }

  .focus__shot,
  .inspector__shot {
    float: none;
    max-width: 100%;
    margin: 12px 0;
  }

  .decision__buttons kbd {
    display: none;
  }

  .focus__foot {
    bottom: 0;
  }

  /* Телефон: низ решения инспектора — в конце инспектора, сразу после причин. Липкий, он ложился поверх списка причин,
     пока инспектор не прокручен до конца (ревью 2026-10-23, структурный п. 9); инспектор стоит над списком, фильтры
     свёрнуты — решение и так на первом экране. */
  .split--candidates .inspector__foot {
    position: static;
  }
}

.funnel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}

@media (max-width: 1100px) {
  .funnel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.funnel__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--panel2);
  border-radius: var(--radius-md);
}

.funnel__tile .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-display);
  color: var(--tx);
}

.bar {
  height: 8px;
  background: var(--line2);
  border-radius: 4px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--acc);
}

.lane-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .lane-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Очередь (docs/design/2026-10-29-queue-and-visual-language.md §1–§3): карточки полос WEB и ИИ и список задач. */
.lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--panel);
}

.lane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.lane__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--panel2);
  color: var(--tx2);
}

.lane__icon > svg {
  width: 16px;
  height: 16px;
}

.lane__name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
}

.lane__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--tx2);
  font-size: var(--fs-sm);
}

.lane__state--ok {
  color: var(--tx);
}

.lane__state--no {
  color: var(--no);
}

.lane__state--acc {
  color: var(--acc);
}

.lane__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lane__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  background: var(--panel2);
  color: var(--tx3);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.lane__stat > svg {
  width: 13px;
  height: 13px;
}

.lane__stat b {
  font-family: var(--mono);
  font-weight: 600;
}

.lane__stat--on {
  color: var(--tx);
}

.lane__stat--no {
  background: color-mix(in oklab, var(--no) 12%, transparent);
  color: var(--no);
}

.lane__stat:hover {
  background: var(--line2);
  color: var(--tx);
  text-decoration: none;
}

.lane__sub {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.queue-paused {
  align-items: center;
  margin-bottom: 12px;
  font-size: var(--fs-sm);
}

/* Вкладки внутри панели; фильтр полосы — справа в том же ряду */
.panel > .tabs {
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--panel);
}

.panel > .tabs .seg {
  margin-left: auto;
}

.tab__count--no {
  color: var(--no);
}

.qlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px 6px;
  color: var(--tx3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qgroup--no {
  color: var(--no);
}

.job {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line2);
}

.job--no {
  background: color-mix(in oklab, var(--no) 5%, transparent);
}

/* Явные позиции: авторазмещение уводило бы вторую строку в колонку значка, когда справа есть действия */
.job__state {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  width: 24px;
  height: 22px;
  color: var(--tx3);
}

.job__state > svg {
  width: 16px;
  height: 16px;
}

.job__state--no {
  color: var(--no);
}

.job__state--ok {
  color: var(--ok);
}

.job__state--ok > svg {
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.job__title {
  grid-column: 2;
  grid-row: 1;
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.job__title a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.job__title a:hover {
  text-decoration-color: var(--acc);
}

.job__meta {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  gap: 4px 10px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.job__when {
  font-variant-numeric: tabular-nums;
}

.job__actions {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-items: center;
  gap: 6px;
}

.job__callout {
  grid-column: 2 / -1;
  grid-row: 3;
  margin-top: 4px;
}

.qempty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 34px 16px;
  color: var(--tx3);
  text-align: center;
}

.qempty > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
}

.qempty b {
  color: var(--tx);
  font-size: var(--fs-md);
}

.qfoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line2);
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.qpager {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .job__state--ok > svg {
    animation: none;
  }
}

@media (max-width: 600px) {
  .job {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .job__callout {
    grid-column: 2;
    grid-row: 3;
  }

  .job__actions {
    grid-column: 2;
    grid-row: 4;
    margin-top: 4px;
  }

  .lane__state {
    width: 100%;
    margin-left: 0;
  }

  .panel > .tabs {
    flex-wrap: wrap;
  }

  .panel > .tabs .seg {
    margin-left: 0;
  }
}

.results-strip {
  display: flex;
  gap: 2px;
  height: 28px;
  border-radius: 3px;
  overflow: hidden;
}

.results-strip span {
  height: 100%;
}

/* ── WP4: отзывчивость ── */

/* Ссылка на строку таблицы: клик открывает, средняя кнопка/Cmd — новая вкладка */
a.row-link {
  color: inherit;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Движение: токены §5.1 — быстрый отклик на наведение, нажатие отзывается сжатием (WP5 §5.3) */
.btn,
.chip,
.seg a,
.seg button,
.nav__item,
.tab {
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active,
.chip:active {
  transform: scale(0.985);
}

/* Появление/уход панели массовых действий */
#bulk-panel {
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

#bulk-panel[hidden] {
  transform: translateY(4px);
}

/* Появление htmx-контента — проявление (docs/design/2026-10-29-reviews-tab-and-motion.md, выбор пользователя): старое
   остаётся на месте до ответа и не гаснет до нуля заранее, новое проявляется с лёгким увеличением 98,5 → 100 %.
   Анимация живёт, пока у узла класс .htmx-added, — замене с ней нужен settle не короче --dur-fade-in (260 мс у карточек
   «К отправке» и «Ответ получен»). */
.htmx-added {
  animation: fade-in var(--dur-fade-in) var(--ease) both;
}

/* «Разобрано» перерисовывает ленту уведомлений на месте: исчезает одна карточка, остальные заново не проявляются. */
#notifications-feed > .htmx-added {
  animation: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* Перебор кандидатов меняет рабочую область, оставляя страницу и её фон на месте.
   Общий htmx fade-out до нуля здесь давал вспышку даже при точечной замене. */
#candidates-main.htmx-swapping,
#candidates-workspace.htmx-swapping,
#inspector-slot.htmx-swapping {
  opacity: 1;
  transition: none;
}

#candidates-main.htmx-added,
#candidates-main.htmx-settling,
#candidates-workspace.htmx-added,
#candidates-workspace.htmx-settling,
#inspector-slot.htmx-added,
#inspector-slot.htmx-settling {
  animation: none;
}

#candidates-main.htmx-settling .inspector__body,
#inspector-slot.htmx-settling .inspector__body,
#candidates-workspace.htmx-settling .focus .panel__body {
  animation: candidate-in var(--dur-base) var(--ease);
}

@keyframes candidate-in {
  from { opacity: .8; }
}

/* ── Переход между страницами (hx-boost меняет <body> целиком, движение — View Transitions через hx-swap
   transition:true) ──
   Проявление: старое гаснет за 90 мс, новое проявляется с лёгким увеличением от верхней кромки за 190 мс после паузы
   70 мс. Шапка, строки под ней и ряды вкладок и фильтров — свои именованные группы без анимации: они не моргают, а
   подложка активного пункта в них переезжает (motion.js). Имя ряда своё на каждой странице (style в разметке): общее
   имя рядов разных страниц протаскивало снимок ряда через страницу. Группа, которой нет на другой стороне перехода,
   уходит и появляется тем же проявлением. Без поддержки View Transitions проявляется только новый <main>. */
::view-transition-old(*),
::view-transition-new(*) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
::view-transition-old(*):only-child {
  animation: fade-out var(--dur-fade-out) var(--ease-in) both;
}

::view-transition-new(root),
::view-transition-new(*):only-child {
  transform-origin: 50% 0;
  animation: fade-in var(--dur-fade-in) var(--ease) var(--dur-fade-gap) both;
}

/* Классы htmx на <body> при бустовом swap: затухание и проявление всего body не нужны — шапка и служебные узлы стоят
   на месте, страницу проявляет View Transition. */
body.htmx-swapping {
  opacity: 1;
  transition: none;
}

body > .htmx-added {
  animation: none;
}

@supports not (view-transition-name: none) {
  body > main {
    animation: fade-in var(--dur-fade-in) var(--ease) both;
  }
}

/* Подложка активного пункта (motion.js, п. 1): одна на группу [data-thumb] — шапку, строки этапов и разделов, ряды
   вкладок и сегментов. Она переезжает к нажатому пункту и меняет ширину, а фон самих активных пунктов в такой группе
   не рисуется. Пункты — над подложкой: она лежит ниже них внутри изолированной группы. Без JS групп с подложкой нет —
   фон рисует активный пункт, как прежде. */
[data-thumb] {
  position: relative;
  isolation: isolate;
}

.thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: var(--panel2);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-thumb) var(--ease), width var(--dur-thumb) var(--ease),
    height var(--dur-thumb) var(--ease), opacity var(--dur-fast) linear;
}

.thumb.is-on {
  opacity: 1;
}

.thumb--instant {
  transition: none;
}

/* Прыжок между скоплениями пунктов группы (motion.js): подложка встаёт на новое место сразу и проявляется там — полёт
   через пустую середину шапки неуместен. */
.thumb--hop {
  animation: thumb-hop var(--dur-fade-in) var(--ease) both;
}

@keyframes thumb-hop {
  from { opacity: 0; }
}

.subnav > .thumb {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: inset 0 -2px 0 var(--acc);
}

.seg > .thumb {
  border-radius: 0;
}

.has-thumb :is(.nav__item--active, .tab--active, .is-active, .subnav__item[aria-current='page']),
.has-thumb .navmenu__link.nav__item--active + .navmenu__toggle {
  background: transparent;
  box-shadow: none;
}

/* Нажатый пункт (motion.js, п. 2): фон наведения гаснет, пока к нему едет подложка, а не пропадает до её прихода.
   Только у нажатого: в новой разметке пункт теряет свой фон, когда группа получает подложку, — там гаснуть нечему. */
.has-thumb .thumb-target {
  transition: background-color var(--dur-thumb) var(--ease);
}

/* Фокус с клавиатуры: акцентное кольцо на всех интерактивных элементах */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* overflow:hidden панели (ради скруглённых углов) срезает кольцо фокуса у элементов
   у края панели — например у свёрнутого <summary> «Как это считается» на /reports.
   Рисуем кольцо внутри элемента по всей панели. */
.panel :focus-visible {
  outline-offset: -1px;
}

/* Исключение: чекбокс и радио всего 15px, кольцо внутрь легло бы прямо на них.
   У края панели они не стоят — в ячейке таблицы 12px отступа, — поэтому им
   оставляем обычное внешнее кольцо. */
.panel input[type='checkbox']:focus-visible,
.panel input[type='radio']:focus-visible {
  outline-offset: 1px;
}

/* Янтарное кольцо внутри янтарной .btn--accent не читается — переводим его в --acc-tx.
   Область та же, что у правила выше: кольцо рисуется внутри кнопки по всей панели,
   значит и цвет надо менять по всей панели, а не только в шапке. */
.panel .btn--accent:focus-visible {
  outline-color: var(--acc-tx);
}

/* Всплывающие уведомления внизу экрана (2026-11-10) — единственный вид сообщений о результате действия: успех,
   предупреждение, ошибка (_Flash.cshtml), тосты htmx и скрипта (app.js showToast/armToast). Стекло над страницей, значок
   и тонкая полоса оставшегося срока цветом тона; наведение и фокус останавливают отсчёт (скрипт и полоса — вместе). */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  --toast-tone: var(--acc);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.01'/%3E%3C/svg%3E");
  --toast-life: 4500ms;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  padding: 10px 8px 11px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--toast-tone) 30%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--panel2) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--tx);
  font-size: var(--fs-sm);
  line-height: 1.45;
  box-shadow: 0 14px 36px oklch(0 0 0 / 0.45), inset 0 1px 0 oklch(1 0 0 / 0.04);
  pointer-events: auto;
  animation: toast-in 260ms var(--ease) both;
}

.toast::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: var(--toast-tone);
  -webkit-mask: var(--toast-icon) center / contain no-repeat;
  mask: var(--toast-icon) center / contain no-repeat;
}

.toast::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--toast-tone);
  opacity: 0.6;
  transform-origin: left;
  animation: toast-timer var(--toast-life) linear forwards;
}

.toast:hover::after,
.toast:focus-within::after {
  animation-play-state: paused;
}

.toast--ok {
  --toast-tone: var(--ok);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.4 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
}

.toast--warn {
  --toast-tone: var(--acc);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.5a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.6v3.8M12 16.8v.01'/%3E%3C/svg%3E");
}

.toast--error {
  --toast-tone: var(--no);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2M12 16.4v.01'/%3E%3C/svg%3E");
  --toast-life: 8000ms;
}

.toast.is-leaving {
  animation: toast-out 200ms var(--ease-in) forwards;
}

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px 0 -2px auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
}

.toast__close:hover,
.toast__close:focus-visible {
  color: var(--tx);
  background: color-mix(in oklab, var(--tx) 9%, transparent);
}

.toast__close svg {
  width: 14px;
  height: 14px;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

@keyframes toast-timer {
  to {
    transform: scaleX(0);
  }
}

/* Ожидание (motion.js, п. 3), если ответ задержался дольше 400 мс. Загрузка содержимого — заготовкой (скелетом) на
   месте будущего содержимого: у перехода страницы — в <main> ниже нажатого ряда, у карточки — поверх своего
   контейнера [data-skeleton]; внутренний слой прилипает к верху окна, чтобы заготовка была видна и в прокрученной
   странице. Кнопка действия — тонким кольцом на месте подписи, ширина кнопки не меняется. При prefers-reduced-motion
   глобальное правило гасит блик и вращение — остаётся неподвижная заготовка и кольцо. */
.page,
[data-skeleton] {
  position: relative;
}

.skeleton {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: var(--bg);
  pointer-events: none;
  animation: fade-in var(--dur-fast) var(--ease) both;
}

.skeleton--page {
  padding: 0 20px 20px;
}

.skeleton__inner {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 14px;
}

.skeleton--page .skeleton__inner {
  padding-top: 20px;
}

.skeleton__panel {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.skeleton__row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line2);
}

.skeleton__row:last-child {
  border-bottom: 0;
}

.skeleton__row--head {
  height: 37px;
  background: var(--panel2);
}

.skeleton__body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.skeleton__bar {
  display: block;
  flex: none;
  width: 70px;
  height: 11px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel2) 35%, var(--line2) 50%, var(--panel2) 65%);
  background-size: 260% 100%;
  animation: skeleton-sheen 1.4s linear infinite;
}

.skeleton__row .skeleton__bar:not(.skeleton__bar--tag):not(.skeleton__bar--end) {
  flex: 0 1 auto;
}

.skeleton__bar--title {
  width: 180px;
  height: 17px;
}

.skeleton__bar--tag {
  width: 40px;
}

.skeleton__bar--end {
  width: 84px;
  margin-left: auto;
}

.skeleton__bar--block {
  width: 100%;
  height: 56px;
}

.skeleton__row--head .skeleton__bar {
  background: var(--line2);
  animation: none;
}

@keyframes skeleton-sheen {
  from {
    background-position: 160% 0;
  }

  to {
    background-position: -60% 0;
  }
}

[data-pending] {
  position: relative;
  color: transparent !important;
}

[data-pending] > * {
  visibility: hidden;
}

[data-pending]::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border: 2px solid var(--pending-ring, var(--tx2));
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}

.btn--accent[data-pending] {
  --pending-ring: var(--acc-tx);
}

/* AdsPower: локальная загрузка фрагментов и команд (страница /admin/adspower) */
.adspower .adspower-loading::before,
.adspower form.htmx-request button[type='submit']::after,
.adspower button.htmx-request::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: adspower-spin 0.8s linear infinite;
}

.adspower .adspower-loading::before {
  margin-right: 0.5em;
}

.adspower form.htmx-request button[type='submit']::after,
.adspower button.htmx-request::after {
  margin-left: 0.5em;
}

.adspower [data-adspower-failed] .btn {
  margin-left: 8px;
}

@keyframes adspower-spin {
  to {
    transform: rotate(360deg);
  }
}

/* AdsPower: компактная раскладка (docs/design/2026-10-21-adspower-page-layout.md). Сверху — сводка входа, ниже —
   ряд из трёх панелей настроек (на ≤ 900px — в столбик), свёрнутые разделы и запись в площадки. Всё не шире
   контейнера: широкие таблицы прокручиваются внутри .table-scroll, длинные имена и ошибки переносятся. */
.adspower .panel,
.adspower .panel__body,
.adspower form {
  min-width: 0;
  max-width: 100%;
}

.adspower select {
  max-width: 100%;
}

.adspower .note,
.adspower .field__hint,
.adspower .cell-title,
.adspower .cell-sub,
.adspower .mono {
  overflow-wrap: anywhere;
}

.adspower-gap {
  margin-top: 12px;
}

.adspower-gap-sm {
  margin-top: 8px;
}

.adspower-note {
  margin-bottom: 10px;
}

.adspower-failed {
  margin-top: 10px;
}

#adspower-auth > .adspower-failed {
  margin: 0 16px 16px;
}

/* «Подключение» (состояние и ключ аккаунта) и рядом маленькая «Частота сбора» (ревью 2026-10-23, структурный п. 1). */
.adspower-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .adspower-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ключ аккаунта — под состоянием в той же панели, через тонкую линию. */
.adspower-key {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* Шапка панели с командами: переносится, а не вылезает за край. */
.adspower-head {
  flex-wrap: wrap;
  height: auto;
  min-height: 37px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.adspower-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-weight: 400;
}

.adspower-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.adspower-inline > input,
.adspower-inline > select {
  flex: 1 1 160px;
  width: auto;
  min-width: 0;
}

.adspower-inline > select {
  flex-grow: 0;
}

.adspower-inline__hint {
  margin-top: 0;
}

.adspower-runtime__state {
  align-items: center;
  margin-bottom: 10px;
}

/* «AdsPower не подключён» — предупреждение на всю ширину, «Повторить» внутри */
.adspower-runtime__state > .callout {
  flex: 1 1 100%;
}

/* Таблицы страницы: строки растут по содержимому, текст переносится. */
.adspower-table td {
  padding-top: 6px;
  padding-bottom: 6px;
}

.adspower-login td {
  min-width: 96px;
}

.adspower-login .pill {
  white-space: nowrap;
}

/* Узкая ширина: сводка входа — карточками (профиль, где используется, затем Ozon и WB рядом с подписями). */
@media (max-width: 600px) {
  .adspower-login thead {
    display: none;
  }

  .adspower-login,
  .adspower-login tbody {
    display: block;
  }

  .adspower-login tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line2);
  }

  table.grid.adspower-login td {
    display: block;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
  }

  .adspower-login td:nth-child(-n + 2) {
    grid-column: 1 / -1;
  }

  .adspower-login td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--tx3);
    font-size: var(--fs-xs);
  }
}

.adspower-auth__foot {
  margin-top: 10px;
}

/* Свёрнутые разделы: заголовок панели — строка-сводка. */
.adspower-fold {
  margin-top: 12px;
}

.adspower-fold__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  padding: 8px 12px;
  background: var(--panel2);
  font-size: var(--fs-md);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.adspower-fold__head::-webkit-details-marker {
  display: none;
}

.adspower-fold__head::before {
  content: '▸';
  color: var(--tx3);
}

.adspower-fold[open] > .adspower-fold__head {
  border-bottom: 1px solid var(--line);
}

.adspower-fold[open] > .adspower-fold__head::before {
  content: '▾';
}

.adspower-fold__filter input {
  max-width: 360px;
}

/* Профили по умолчанию: три выбора в одну строку, ширина по содержимому. */
.adspower-bindings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.adspower-bindings .field {
  flex: 0 1 260px;
  min-width: 0;
  max-width: 320px;
  margin: 0;
}

/* Запись в площадки: строка на площадку — название и сегмент режимов (ревью 2026-10-23, структурный п. 1). */
.adspower-write {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}

.adspower-write__name {
  padding-top: 6px;
  color: var(--tx);
  font-weight: 700;
}

.adspower-write__stale {
  color: var(--acc);
}

/* Сегмент режима: радиокнопки вне форм — выбор ничего не отправляет. Выбранный режим — подложкой, как у .seg; текущий —
   полосой снизу: пока выбран другой, видно, что действует сейчас. */
.write-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.write-mode > .write-mode__apply,
.write-mode > .write-mode__note {
  flex-basis: 100%;
  margin-top: 0;
}

.write-mode__option {
  position: relative;
  display: flex;
  cursor: pointer;
}

.write-mode__option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.write-mode__option > input + span {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 11px;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.write-mode__option:hover > input + span {
  color: var(--tx2);
}

.write-mode__option > input:checked + span {
  background: var(--panel2);
  color: var(--tx);
  font-weight: 700;
}

.write-mode__option--current > input + span {
  box-shadow: inset 0 -2px 0 var(--acc);
}

.write-mode__option > input:focus-visible + span {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

/* Форма нового режима: подтверждение последствий и «Применить» — рамкой предупреждения перед действием. */
.write-mode__apply > form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--acc);
  border-radius: var(--radius-sm);
}

/* Форма видна, только пока в сегменте выбран её режим (и он не текущий: у текущего формы нет). Без :has() видны все
   формы — как прежние кнопки режимов. */
@supports selector(:has(*)) {
  .write-mode__apply {
    display: none;
  }

  .write-mode:has(input[value='Off']:checked) > .write-mode__apply[data-write-for='Off'],
  .write-mode:has(input[value='ManualTest']:checked) > .write-mode__apply[data-write-for='ManualTest'],
  .write-mode:has(input[value='Enabled']:checked) > .write-mode__apply[data-write-for='Enabled'] {
    display: block;
  }
}

@media (max-width: 600px) {
  .adspower-write {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .adspower-write__body + .adspower-write__name {
    margin-top: 8px;
  }
}

/* «Все отзывы»: компактная таблица, раскрытие строки, выбор магазина с поиском */

/* Список выбора магазина выходит за границы панели фильтров */
.archive .archive__filters {
  overflow: visible;
}

.archive .archive__check {
  align-items: center;
  white-space: nowrap;
}

.archive__summary {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line2);
  color: var(--tx2);
  font-size: var(--fs-xs);
}

.archive__grid td {
  height: 44px;
}

/* Строка раскрывается кликом по свободному месту (app.js); ссылки и кнопки — свои */
.archive__grid tr[data-archive-row] > td {
  cursor: pointer;
}

.archive__stars {
  white-space: nowrap;
}

/* Оценка: векторные звёзды (_Rating) — тёплый градиент с бликом, пустые — приглушённый контур */
.rating {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  vertical-align: middle;
}

.rating svg {
  display: block;
  overflow: visible;
}

.rating--none {
  line-height: inherit;
}

.rating__on {
  stroke: #9a5f1a;
  stroke-width: 1;
  stroke-linejoin: round;
  paint-order: stroke;
}

.rating__gloss {
  pointer-events: none;
}

.rating__off {
  fill: color-mix(in oklab, var(--tx3) 10%, transparent);
  stroke: color-mix(in oklab, var(--tx3) 60%, transparent);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.rating__stop-hi {
  stop-color: #ffd98a;
}

.rating__stop-mid {
  stop-color: var(--acc);
}

.rating__stop-lo {
  stop-color: #c27a22;
}

/* Состояние отзыва и значок ИИ — одной строкой. Колонка по содержимому (width: 1% при авторазметке таблицы): шириной в
   самый широкий статус страницы, а не в запас под «отклонён менеджером»; остальное место — тексту отзыва. */
.archive__state-head {
  width: 1%;
}

.archive__state {
  padding-right: 14px;
  white-space: nowrap;
}

.archive__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  vertical-align: middle;
}

.llm-mark {
  display: inline-flex;
  color: var(--tx3);
}

.llm-mark svg {
  display: block;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.llm-mark--queued {
  color: var(--acc);
}

.llm-mark--checked {
  color: var(--ok);
}

.llm-mark--failed {
  color: var(--no);
}

.llm-mark--skipped {
  color: color-mix(in oklab, var(--tx3) 70%, transparent);
}

.archive__uuid {
  white-space: nowrap;
}

.archive__product {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive__text {
  max-width: 340px;
}

.archive__text a {
  display: block;
  overflow: hidden;
  color: var(--tx2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive__text a:hover {
  color: var(--tx);
  text-decoration: none;
}

.archive__detail > td {
  height: auto;
  padding: 0;
  background: var(--bg);
}

/* ≤ 600 px — строка отзыва карточкой (ревью 2026-10-23, структурный п. 8; как у кандидатов): площадка · магазин · дата,
   текст в две строки, оценка и статус со стрелкой раскрытия. ID и товар — в раскрытом отзыве: девять столбцов не
   помещались, и текст был виден только после прокрутки вбок. */
@media (max-width: 600px) {
  .archive__grid thead {
    display: none;
  }

  .archive__grid,
  .archive__grid tbody,
  .archive__grid tr.archive__detail {
    display: block;
  }

  /* Ячейка-блок с высотой строки таблицы (42 px) не растёт по содержимому: раскрытый отзыв лёг бы на следующие карточки. */
  table.grid.archive__grid tr.archive__detail > td {
    display: block;
    height: auto;
  }

  .archive__grid tr[data-archive-row] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'mp store date'
      'text text text'
      'stars state more';
    align-items: center;
    gap: 6px 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line2);
  }

  table.grid.archive__grid tr[data-archive-row] > td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  table.grid.archive__grid tr[data-archive-row] > td.archive__uuid,
  table.grid.archive__grid tr[data-archive-row] > td.archive__product {
    display: none;
  }

  .archive__grid .archive__mp {
    grid-area: mp;
  }

  .archive__grid .archive__store {
    grid-area: store;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archive__grid .archive__date {
    grid-area: date;
  }

  .archive__grid .archive__text {
    grid-area: text;
    max-width: none;
  }

  .archive__grid .archive__text a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .archive__grid .archive__stars {
    grid-area: stars;
  }

  .archive__grid .archive__state {
    grid-area: state;
    min-width: 0;
    padding-right: 0;
    white-space: normal;
  }

  .archive__grid .archive__more {
    grid-area: more;
  }
}

.archive__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tx3);
  font-family: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  vertical-align: middle;
}

.icon-btn:hover {
  border-color: var(--line);
  color: var(--tx);
  text-decoration: none;
}

/* Значок из спрайта внутри кнопки-значка (копирование ID магазина в «Ожидают результата») */
.icon-btn > svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.archive__chevron[aria-expanded='true'] {
  transform: rotate(180deg);
}

.archive-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 20px;
  padding: 14px 16px;
}

.archive-detail__main,
.archive-detail__side {
  min-width: 0;
}

@media (max-width: 1100px) {
  .archive-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.archive-detail__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.archive-detail__label {
  margin: 10px 0 4px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.archive-detail__text {
  color: var(--tx);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.archive-detail__parts,
.archive-detail__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: var(--fs-sm);
}

.archive-detail__parts dt,
.archive-detail__facts dt {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.archive-detail__parts dd,
.archive-detail__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--tx2);
  overflow-wrap: anywhere;
}

/* Переносы сохраняются только в тексте покупателя, комментарии менеджера и обосновании ИИ:
   в остальных фактах разметка шаблона многострочная, и pre-wrap показал бы её отступы. */
.archive-detail__parts dd,
.archive-detail__facts dd.archive-detail__text {
  white-space: pre-wrap;
}

.archive-detail__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.archive-detail__photos img {
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.archive-detail__photos a {
  display: block;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.archive-detail__photos a:hover img {
  border-color: var(--tx3);
}

.archive-detail__photos a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Просмотр фото покупателя (app.js, п. 10): одно модальное окно на весь экран. */
html.photo-viewer-open {
  overflow: hidden;
}

dialog.photo-viewer {
  display: none;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

dialog.photo-viewer[open] {
  display: flex;
  flex-direction: column;
}

dialog.photo-viewer::backdrop {
  background: radial-gradient(ellipse at center, oklch(0.16 0.012 70 / 0.88), oklch(0.08 0.008 70 / 0.96));
  backdrop-filter: blur(6px);
}

.photo-viewer__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: oklch(0.12 0.01 70 / 0.7);
  border-bottom: 1px solid var(--line-soft);
}

.photo-viewer__level {
  min-width: 48px;
  color: var(--tx2);
  font-size: var(--fs-xs);
}

.photo-viewer__btn {
  min-width: 33px;
}

.photo-viewer__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.photo-viewer__close {
  font-size: var(--fs-lg);
}

/* Прокрутка двигает увеличенное фото; margin:auto центрирует и не обрезает края. */
.photo-viewer__stage {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  overscroll-behavior: contain;
}

.photo-viewer__stage:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.photo-viewer__img {
  display: block;
  flex: none;
  max-width: none;
  margin: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 48px oklch(0 0 0 / 0.55);
}

.photo-viewer__img[hidden],
.photo-viewer__error[hidden] {
  display: none;
}

.photo-viewer__error {
  margin: auto;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--tx2);
}

.archive-detail__llm {
  font-size: var(--fs-sm);
  color: var(--tx2);
}

.archive-detail__llm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.archive-detail__llm-head + .cell-sub {
  margin-top: 4px;
}

.archive-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.combo {
  position: relative;
  width: 280px;
}

.combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 100%;
  max-height: 280px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.35);
  list-style: none;
}

.combo__list li {
  padding: 6px 10px;
  color: var(--tx2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.combo__list li[aria-selected='true'],
.combo__list li[role='option']:hover {
  background: var(--panel2);
  color: var(--tx);
}

.combo__list .combo__empty {
  color: var(--tx3);
  cursor: default;
}

/* «Магазины»: технические подробности последнего сбора — только по раскрытию */
.collection-details summary {
  color: var(--tx3);
  cursor: pointer;
}

.collection-details .mono {
  font-size: var(--fs-2xs);
  overflow-wrap: anywhere;
}

/* «Магазины», форма: зависимое поле — с отступом под своим флажком; оценки видны, только пока отмечено «Проверять
   отзывы ИИ» (ревью 2026-10-23, структурный п. 2) — и без JS. */
form[data-store-form] [data-store-mode],
form[data-store-form] [data-check-ratings] {
  margin-left: 24px;
}

form[data-store-form]:has(input[name='checkReviewsWithAi']:not(:checked)) [data-check-ratings] {
  display: none;
}

/* Обращения в поддержку Ozon: режим записи, шаги ручного теста, состояние обращения в кабинете */
.ozon-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .ozon-modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ozon-mode {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.ozon-mode--current {
  border-color: var(--line);
  box-shadow: inset 2px 0 0 var(--acc);
}

.ozon-mode__title,
.ozon-step__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tx);
  font-weight: 700;
}

.ozon-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 22px;
}

.ozon-step::marker {
  color: var(--tx3);
  font-family: var(--mono);
}

.ozon-step form {
  margin-top: 8px;
}

.ozon-facts {
  gap: 8px;
  margin-bottom: 14px;
}

.ozon-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}

.ozon-actions form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ozon-actions .checkbox {
  flex-basis: 100%;
}

.ozon-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ozon-support-messages summary {
  color: var(--tx2);
  cursor: pointer;
}

.ozon-message {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

table.grid tr.awaiting-extra td {
  height: auto;
  padding: 6px 10px 10px;
}

/* Ошибка проверки под строкой реестра (§7) */
.awaiting__callout {
  margin-top: 4px;
}

/* «Ожидают результата» — реестр (вариант «Б», 2026-10-30, docs/design/2026-10-30-awaiting-registry.md): сводка плитками,
   строки выше обычных (имя и ID магазина, время и «следующая проверка» — в две строки), действия справа. */
.awaiting__cadence {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.awaiting__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.awaiting-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* Телефон: плитки остаются строкой, но компактнее — сводка не занимает пол-экрана. */
@media (max-width: 600px) {
  .awaiting-tiles {
    gap: 8px;
  }

  .awaiting-tile {
    padding: 8px 10px;
  }

  .awaiting-tile__num {
    font-size: var(--fs-lg);
  }
}

.awaiting-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--panel);
}

.awaiting-tile__label {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.awaiting-tile__num {
  color: var(--tx);
  font-family: var(--mono);
  font-size: var(--fs-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.awaiting-tile--no .awaiting-tile__num {
  color: var(--no);
}

table.grid.awaiting-table td {
  height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
}

table.grid.awaiting-table td.awaiting__actions {
  text-align: right;
  white-space: nowrap;
}

.awaiting__actions > .btn + .btn {
  margin-left: 4px;
}

.awaiting__id {
  display: flex;
  align-items: center;
  gap: 2px;
}

.awaiting__check {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.awaiting__pending {
  margin-top: 4px;
}

.awaiting__hint {
  margin-top: 8px;
}

/* Меню строки (popover): в верхнем слое — прокрутка таблицы его не обрезает; место под своей кнопкой ставит app.js,
   щелчок мимо и Esc закрывают его сами. */
.rowmenu {
  position: fixed;
  inset: auto;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel2);
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.38);
  color: var(--tx);
}

.rowmenu__item {
  width: 100%;
  justify-content: flex-start;
}

/* «Правила и причины»: у поля есть сообщение проверки ([data-rules-error] без hidden) — рамка поля красная.
   Место сообщения заменяет ответ проверки (htmx out-of-band), поэтому рамка следует за ним без скрипта. */
.field:has(> [data-rules-error]:not([hidden])) > :is(input, textarea) {
  border-color: var(--no);
}

/* «Правила и причины», П2 (docs/design/2026-10-18-ui-candidates-header-rules.md, 4.2, решения 2, 3, 5): кто читает
   поле или раздел — приглушённо справа от подписи; причины — карточки списком (сводка «как это увидят» в summary, кнопки
   порядка — вне summary); пункты причины — список выбранных и флажки с полными текстами во вложенном details. */
.field__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 5px;
}

.field__top > .field__label {
  margin-bottom: 0;
}

.rules-readers {
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-weight: 400;
  white-space: nowrap;
}

.rules-cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.rules-card--removed {
  display: block;
}

.rules-card__details {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.rules-card__details[open] {
  border-color: var(--line);
}

.rules-card__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.rules-card__summary::-webkit-details-marker {
  display: none;
}

.rules-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.rules-card__number {
  min-width: 18px;
  color: var(--tx3);
}

.rules-card__toggle {
  grid-column: 2;
  grid-row: 1;
  color: var(--acc);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.rules-card__close,
.rules-card__details[open] > .rules-card__summary .rules-card__open,
.rules-card__details[open] > .rules-card__summary .rules-card__line {
  display: none;
}

.rules-card__details[open] > .rules-card__summary .rules-card__close {
  display: inline;
}

.rules-card__line {
  grid-column: 1 / -1;
  padding-left: 28px;
  color: var(--tx3);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.rules-card__body {
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}

.rules-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rules-card__order {
  display: flex;
  gap: 4px;
}

.rules-picked {
  display: grid;
  gap: 2px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.rules-picked li {
  overflow: hidden;
  color: var(--tx2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rules-picked .mono {
  margin-right: 4px;
  color: var(--tx3);
}

.rules-picks__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 12px;
}

.rules-picks {
  flex: 1 1 320px;
  min-width: 0;
}

.rules-picks > summary {
  color: var(--acc);
  line-height: 33px;
  cursor: pointer;
}

.rules-picks__list {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.rules-picks__add {
  flex: none;
}

/* Узкая ширина: кнопки порядка — в строке названия справа, «Изменить ▸» — под сводкой. */
@media (max-width: 720px) {
  .rules-card {
    position: relative;
    display: block;
  }

  .rules-card__order {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .rules-card__summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .rules-card:has(> .rules-card__order:not([hidden])) .rules-card__summary {
    padding-right: 84px;
  }

  .rules-card__toggle {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .rules-card__line {
    padding-left: 0;
  }
}

/* П3: «Так увидит поддержка» — пример всего текста, который уйдёт, в рамке под текстом причины. */
.rules-sample {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--acc);
  border-radius: var(--radius-sm);
}

.rules-sample__head {
  margin-bottom: 6px;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.rules-sample__body .preview {
  max-height: 320px;
}

.rules-sample__body.htmx-request {
  opacity: 0.6;
}

/* «Пункты жалобы WB» над редактором правил WB (docs/design/2026-10-31-wb-complaint-items.md, вариант «А»): сколько, когда
   получены, «Обновить с WB»; пока идёт запрос к WB — подпись об ожидании рядом с кнопкой. */
.rules-wb-items {
  margin-bottom: 12px;
  padding: 10px 14px;
}

.rules-wb-items__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.rules-wb-items__title {
  font-weight: 600;
}

.rules-wb-items__busy {
  display: none;
  font-size: var(--fs-xs);
}

.rules-wb-items.htmx-request .rules-wb-items__busy {
  display: inline;
}

.rules-wb-items .note {
  margin: 10px 0 0;
}

.rules-wb-item {
  max-width: 360px;
}

/* П5: итог проверки по адресатам — «Для менеджеров / поддержки / ИИ», объём текста для ИИ полосой. */
.rules-impact {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.rules-impact__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 12px;
}

.rules-impact dt {
  color: var(--tx3);
}

.rules-impact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.rules-impact__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-length {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.rules-length__bar {
  flex: 0 1 220px;
  height: 6px;
  overflow: hidden;
  background: var(--line);
  border-radius: 3px;
}

.rules-length__fill {
  display: block;
  height: 100%;
  background: var(--acc);
}

.rules-length.text-danger .rules-length__fill {
  background: var(--no);
}

.rules-more h4 {
  margin: 12px 0 6px;
  color: var(--tx2);
  font-size: var(--fs-sm);
}

/* П5: липкая панель — последний элемент формы: видна при любой прокрутке и не закрывает последние поля (стоит в
   потоке формы); поле, к которому перешли с клавиатуры, не прячется под ней. Отступ снизу — до «Истории редакций». */
.rules-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 -6px 18px oklch(0 0 0 / 0.35);
}

/* «Правок нет» — делать нечего: панель стоит на своём месте в конце формы и не ложится поверх причин и итога проверки
   (ревью 2026-10-23, структурный п. 4). Липкой её делает первая правка — rules.js переводит её в «Черновик». */
.rules-bar[data-state='clean'] {
  position: static;
  box-shadow: none;
}

/* «Итог проверки» — только после проверки: пустой #rules-check (цель htmx-ответа) раздел не показывает. */
#rules-section-check:has(> #rules-check:empty) {
  display: none;
}

.rules-bar__status {
  margin: 0;
  color: var(--tx2);
}

.rules-bar__status > :not(:first-child):not(:empty)::before {
  content: ' · ';
  color: var(--tx3);
}

.rules-bar[data-state='invalid'] [data-rules-bar-text],
.rules-bar[data-state='conflict'] [data-rules-bar-text] {
  color: var(--no);
}

.rules-bar[data-state='checked'] [data-rules-bar-text] {
  color: var(--ok);
}

.rules-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#rules-editor :is(input, textarea, summary) {
  scroll-margin-bottom: 96px;
}

@media (max-width: 720px) {
  .rules-impact__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .rules-bar__actions {
    width: 100%;
  }

  .rules-bar__actions .btn {
    flex: 1 1 auto;
  }
}

/* П4: «Правила площадки» и «Инструкция для ИИ» — разделы-сводки (details): свёрнутый раздел — одна строка со
   сводкой, раскрытый — заголовок с отметкой «правка» и поля. */
.rules-section {
  margin-bottom: 12px;
}

.rules-section__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-height: 37px;
  padding: 8px 12px;
  background: var(--panel2);
  font-size: var(--fs-md);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.rules-section__summary::-webkit-details-marker {
  display: none;
}

.rules-section__summary::before {
  content: '▸';
  color: var(--tx3);
}

.rules-section[open] > .rules-section__summary {
  border-bottom: 1px solid var(--line);
}

.rules-section[open] > .rules-section__summary::before {
  content: '▾';
}

.rules-section__more {
  color: var(--tx3);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.rules-section[open] > .rules-section__summary .rules-section__more {
  display: none;
}

.rules-section__mark {
  margin-left: auto;
  font-weight: 400;
}

.rules-section__subhead {
  margin: 4px 0 6px;
  font-size: var(--fs-md);
}

/* Те же разделы в просмотре редакции — внутри её панели, поэтому с рамкой. */
.rules-view-section {
  margin: 18px 0 0;
  border: 1px solid var(--line-soft);
}

/* Строка пункта: номер и код рядом, текст, «где используется», действия. */
table.grid .rules-clause > td {
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}

.rules-clause__number,
.rules-clause__code {
  white-space: nowrap;
}

table.grid .rules-clause > .rules-clause__number,
table.grid .rules-clause > .rules-clause__code,
table.grid .rules-clause > .rules-clause__used {
  padding-top: 14px;
}

.rules-clause__code {
  color: var(--tx2);
}

table.grid .rules-clause > .rules-clause__used {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.rules-clause__actions {
  white-space: nowrap;
}

/* Инструкция — одна рамка-документ: поля участков и серые плашки вставок между ними. */
.rules-instructions {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}

.rules-slot {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.rules-slot__name {
  display: inline-block;
  padding: 1px 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--tx2);
}

/* Памятка первой настройки — в карточке состояния. */
.rules-setup {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--tx2);
}

.rules-setup__title {
  margin-bottom: 4px;
  color: var(--tx);
  font-weight: 700;
}

.rules-setup__steps {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding-left: 22px;
}

.rules-setup__state {
  margin-left: 6px;
  font-size: var(--fs-xs);
}

/* Переключатель площадок: состояние приглушено. */
.rules-tabs__state {
  color: var(--tx3);
  font-weight: 400;
}

/* Шапка «Правил»: заголовок, под ним слева переключатель площадок своей строкой, под ним описание страницы. */
.rules-page-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.rules-page-head .rules-tabs {
  max-width: 100%;
}

/* Узкая ширина: площадки делят строку переключателя; таблица пунктов — карточками (номер и код, затем текст,
   «где используется», действия). */
@media (max-width: 720px) {
  .rules-page-head .rules-tabs {
    align-self: stretch;
  }

  .seg.rules-tabs a {
    flex: 1 1 auto;
    justify-content: center;
    height: auto;
    min-height: 31px;
    padding: 4px 8px;
    text-align: center;
  }

  .rules-clauses thead {
    display: none;
  }

  .rules-clauses,
  .rules-clauses tbody {
    display: block;
  }

  .rules-clauses tr.rules-clause {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line2);
  }

  table.grid.rules-clauses tr.rules-clause > td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
  }

  .rules-clauses .rules-clause__text,
  .rules-clauses .rules-clause__used,
  .rules-clauses .rules-clause__actions {
    grid-column: 1 / -1;
  }

  .rules-clauses tr[data-rules-strip],
  .rules-clauses tr[data-rules-strip] > td {
    display: block;
    height: auto;
  }
}

/* «Сервер ИИ»: у поля есть сообщение ([data-llm-error] без hidden) — рамка поля красная; после проверки соединения
   сообщения заменяет ответ htmx (out-of-band), рамка следует за ними без скрипта. */
.field:has(> [data-llm-error]:not([hidden])) > input {
  border-color: var(--no);
}

/* «Сервер ИИ» → «Что считать кандидатом»: оценки и порог — две свои формы рядом в одной панели (ревью 2026-10-23,
   структурный п. 7), кнопки — внизу слева каждой; на узкой ширине — одна под другой. */
.llm-candidate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}

.llm-candidate > form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.llm-candidate > form > .btn {
  margin-top: auto;
}

.llm-candidate__thresholds {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-self: stretch;
}

.llm-candidate__thresholds .field {
  flex: 1 1 140px;
  max-width: 240px;
}

@media (max-width: 900px) {
  .llm-candidate {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Уважение к системной настройке: все переходы и анимации отключаются */
/* «Ответ получен» (docs/design/2026-11-03-replies-followup-sku-ui.md, Р4). Шапка разбора — в несколько строк, а не
   полоса 37 px: номер и сведения слева, кнопки копирования справа с собственными отступами; на узком экране всё
   переносится. */
.panel__head.reply-head {
  flex-wrap: wrap;
  height: auto;
  min-height: 37px;
  padding: 10px 14px;
  row-gap: 6px;
  column-gap: 14px;
}

.reply-head__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-head__ticket {
  font-size: var(--fs-md);
  font-weight: 700;
}

.reply-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: var(--fs-xs);
  font-weight: 400;
}

.reply-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  font-weight: 400;
}

/* Отзыв обращения: «товар {SKU}» — так его называет поддержка Ozon, рядом мелко GUID (Р1). */
.review-id {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.review-id__sku {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
}

a.review-id__sku:hover {
  color: var(--acc);
}

.review-id__guid {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  overflow-wrap: anywhere;
}

/* Лента переписки обращения (Р3): наши сообщения справа, поддержки — слева; длинные свёрнуты до 6 строк. */
.thread {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.thread__msg {
  max-width: min(760px, 92%);
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-width: 0;
}

.thread__msg--out {
  justify-self: end;
  background: color-mix(in oklab, var(--acc) 7%, var(--bg));
  border-color: color-mix(in oklab, var(--acc) 22%, var(--line-soft));
}

.thread__msg--in {
  justify-self: start;
}

.thread__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.thread__who {
  color: var(--tx2);
  font-weight: 600;
}

.thread__state {
  color: var(--acc);
}

.thread__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--tx);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.thread__more summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  cursor: pointer;
  list-style: none;
}

.thread__more summary::-webkit-details-marker {
  display: none;
}

.thread__more:not([open]) summary {
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.thread__more[open] summary {
  display: block;
  -webkit-line-clamp: unset;
}

.thread__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.thread__divider::before,
.thread__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.thread__fallback {
  margin: -6px 0 16px;
}

/* Ответ поддержке (Р2): продолжения корня, строка незавершённого продолжения, форма ответа под лентой. */
.follow-ups {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.follow-up {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.follow-up__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--fs-sm);
}

.follow-up__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: var(--fs-xs);
}

.follow-up-pending {
  margin: 0 0 16px;
}

.follow-up-pending__action {
  margin-top: 10px;
}

.reply-form {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
}

.reply-form textarea {
  width: 100%;
  min-height: 110px;
}

/* Предисловие нового обращения — редактируемое поле в две строки, ниже поля ответа. */
.reply-form textarea.reply-form__preface {
  min-height: 0;
}

.reply-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ── «Ответ получен», раскладка «Рядом» (2026-11-06) ──
   Разбор — на всю ширину и на высоту окна (app.js, п. 16 задаёт --reply-fit), переписка и разметка — колонками со своей
   прокруткой. Список обращений выезжает слева по кнопке «Обращения»: колонка сетки раскрывается от 0 до 320 px той же
   кривой, что подложка пунктов (--ease), содержимое догоняет сдвигом и проявлением; закрытие — короче и с ускорением
   (--ease-in), как уход любого элемента. Без JS список открыт. */
.replies {
  --replies-list-w: 320px;
  display: grid;
  grid-template-columns: 0px minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
  transition: grid-template-columns var(--dur-base) var(--ease-in), column-gap var(--dur-base) var(--ease-in);
}

.replies.is-list-open,
:root:not([data-js]) .replies {
  grid-template-columns: var(--replies-list-w) minmax(0, 1fr);
  column-gap: 12px;
  transition: grid-template-columns var(--dur-thumb) var(--ease), column-gap var(--dur-thumb) var(--ease);
}

/* Первая отрисовка — без движения: состояние из памяти вкладки ставится до data-ready. */
.replies:not([data-ready]),
.replies:not([data-ready]) .replies__list-inner {
  transition: none !important;
}

.replies__list {
  position: sticky;
  top: 12px;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.replies__list-inner {
  width: var(--replies-list-w);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  opacity: 0;
  transform: translateX(-14px);
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-base) var(--ease-in), visibility 0s linear var(--dur-base);
}

.replies.is-list-open .replies__list-inner,
:root:not([data-js]) .replies__list-inner {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--dur-fade-in) var(--ease) var(--dur-fade-gap), transform var(--dur-thumb) var(--ease), visibility 0s;
}

.replies > #reply-slot {
  min-width: 0;
}

/* Кнопка «Обращения»: значок панели, левая часть которого «заполняется», пока список открыт. */
.replies-toggle .i-sidebar__fill {
  transition: opacity var(--dur-base) var(--ease);
  opacity: 0.35;
}

.replies-toggle[aria-expanded='true'] {
  border-color: var(--acc);
  color: var(--tx);
}

.replies-toggle[aria-expanded='true'] .i-sidebar__fill {
  opacity: 1;
}

/* Список: номер обращения, под ним магазин; отметка нового ответа — точкой. */
#replies-list .cell-title .row-link {
  font-size: var(--fs-sm);
}

/* Новый ответ поддержки после нашего продолжения: точка цвета успеха с одним мягким импульсом при появлении. */
.reply-new {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 55%, transparent);
  animation: reply-new-pulse 1.6s var(--ease) 1 both;
}

@keyframes reply-new-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 55%, transparent); }
  100% { box-shadow: 0 0 0 7px transparent; }
}

/* Панель разбора на высоту окна. */
.reply-panel {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  height: var(--reply-fit, calc(100dvh - 24px));
  min-height: 480px;
}

.reply-panel > .panel__head {
  flex: none;
}

/* Статус в Ozon — словом с цветной точкой в строке сведений (вместо плашек). */
.reply-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tx2);
}

.reply-state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tx3);
}

.reply-state--ok::before {
  background: var(--ok);
}

.reply-state--work::before {
  background: var(--acc);
}

/* Копирование значком: после копирования значок на миг сменяется галочкой. */
.copy-btn {
  position: relative;
}

.copy-btn > svg {
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease);
}

.copy-btn > .copy-btn__done {
  position: absolute;
  inset: 0;
  margin: auto;
  color: var(--ok);
  opacity: 0;
  transform: scale(0.6);
}

.copy-btn[data-copied] > svg:not(.copy-btn__done) {
  opacity: 0;
  transform: scale(0.6);
}

.copy-btn[data-copied] > .copy-btn__done {
  opacity: 1;
  transform: none;
}

.reply-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
}

.reply-cols--single {
  grid-template-columns: minmax(0, 1fr);
}

.reply-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.reply-col + .reply-col {
  border-left: 1px solid var(--line);
}

.reply-col__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.reply-col__head b {
  color: var(--tx2);
  font-size: var(--fs-sm);
}

.reply-col__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
}

.reply-col__scroll > .thread {
  margin-bottom: 12px;
}

.reply-col__scroll > :last-child {
  margin-bottom: 0;
}

/* Последний ответ поддержки — его ищут глазами первым. */
.thread__msg--last {
  border-color: color-mix(in oklab, var(--ozon) 45%, var(--line-soft));
}

/* SKU отзыва обращения в сообщении поддержки — ссылка на карточку разметки. */
.sku-ref {
  display: inline;
  padding: 0 3px;
  margin: 0;
  border: 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--ozon) 70%, transparent);
  border-radius: 3px;
  background: color-mix(in oklab, var(--ozon) 10%, transparent);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.sku-ref:hover,
.sku-ref.is-hot {
  background: color-mix(in oklab, var(--ozon) 24%, transparent);
  border-bottom-style: solid;
}

.sku-ref:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Подсветка цели перехода «ответ ↔ карточка». */
.is-flash {
  animation: reply-flash 1.1s var(--ease);
}

@keyframes reply-flash {
  0%, 35% { box-shadow: 0 0 0 2px var(--ozon); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

/* Ответ поддержке — внизу колонки переписки: свёрнут в кнопку, раскрытый — не выше половины колонки. */
.reply-composer {
  flex: none;
  max-height: 60%;
  overflow: auto;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.reply-composer > summary {
  list-style: none;
}

.reply-composer > summary::-webkit-details-marker {
  display: none;
}

.reply-composer[open] > summary {
  margin-bottom: 8px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--tx2);
  padding: 0 4px;
  height: 26px;
}

.reply-composer .reply-form {
  margin: 0;
}

.reply-composer .field__hint {
  margin: 0;
}

/* Разметка: компактные карточки; размеченная — цветная кромка итога и приглушённый текст. */
.reply-cards {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reply-card {
  display: grid;
  gap: 5px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--bg);
  min-width: 0;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.reply-card.is-done {
  background: color-mix(in oklab, var(--bg) 70%, var(--panel));
}

.reply-card[data-resolution='Deleted'],
.reply-card[data-resolution='ExcludedFromRating'] {
  border-left-color: var(--ok);
}

.reply-card[data-resolution='Denied'] {
  border-left-color: var(--no);
}

.reply-card[data-resolution='ActionRequired'] {
  border-left-color: var(--acc);
}

.reply-card[data-resolution='Unclear'] {
  border-left-color: var(--tx3);
}

#reply-slot.is-hide-done .reply-card.is-done {
  display: none;
}

.reply-hide-done {
  height: 26px;
  cursor: pointer;
}

/* Включённый переключатель — как выбранный чип. */
.reply-hide-done[aria-pressed='true'] {
  border-color: var(--acc);
  color: var(--tx);
  background: color-mix(in oklab, var(--acc) 12%, transparent);
}

.reply-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.reply-card__n {
  min-width: 1.4em;
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.reply-card__reason {
  margin-left: auto;
  font-size: var(--fs-xs);
  text-align: right;
}

.reply-card__mention {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ozon);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.reply-card__mention > svg {
  width: 13px;
  height: 13px;
}

.reply-card__mention:hover {
  text-decoration: underline;
}

.reply-card__mention:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Текст отзыва — одна строка; щелчок раскрывает целиком. */
.reply-card__text summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--tx2);
  cursor: pointer;
  list-style: none;
  overflow-wrap: anywhere;
}

.reply-card.is-done .reply-card__text summary {
  color: var(--tx3);
}

.reply-card__text summary::-webkit-details-marker {
  display: none;
}

.reply-card__text[open] summary {
  display: block;
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
}

.reply-card__state {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.reply-card__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.reply-card__chips {
  flex: 0 1 auto;
}

.reply-card__form .reply-card__comment {
  flex: 1 1 180px;
  min-width: 150px;
  width: auto;
  height: 29px;
}

.reply-finish {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel2);
  font-size: var(--fs-sm);
}

.reply-finish form {
  margin-left: auto;
}

.reply-finish__bar {
  flex: 0 1 220px;
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}

.reply-finish__bar > i {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width var(--dur-slow) var(--ease);
}

/* Узкое окно: одна колонка, панель и колонки — по содержимому, прокручивается страница; переписка — блок со своей
   прокруткой не выше половины экрана. Список обращений — над разбором, раскрывается сдвигом и проявлением. */
@media (max-width: 980px) {
  .replies,
  .replies.is-list-open,
  :root:not([data-js]) .replies {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 12px;
  }

  .replies:not(.is-list-open) .replies__list {
    display: none;
  }

  .replies__list {
    position: static;
  }

  .replies__list-inner {
    width: auto;
    max-height: none;
  }

  .reply-panel {
    position: static;
    height: auto;
    min-height: 0;
  }

  .reply-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .reply-col + .reply-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .reply-col__scroll[data-reply-chat] {
    max-height: 50vh;
  }

  .reply-col__scroll[data-reply-cards] {
    overflow: visible;
  }

  .reply-composer {
    max-height: none;
  }

  @starting-style {
    .replies.is-list-open .replies__list-inner {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}

@media (max-width: 600px) {
  .thread__msg {
    max-width: 100%;
  }
}

/* Список «Ответ получен»: название магазина в одну строку с многоточием, целиком — в подсказке. */
.replies-list__store {
  display: block;
  max-width: 190px;
  color: var(--tx3);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Столбец ID таблицы отзывов обращения: SKU и GUID друг под другом. */
td.review-id-cell .review-id {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

@media (max-width: 600px) {
  .reply-head__actions {
    margin-left: 0;
  }

  .reply-card {
    padding: 12px;
  }

  .reply-card__reason {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  /* Исключение — задержки меню «Настройки» без JS (Ш1): задержка — не движение, без неё панель схлопывалась бы при
     каждом выходе мыши за край. Плавного появления нет, фокус открывает сразу. */
  :root:not([data-js]) .navmenu__panel {
    transition: visibility 0s linear 300ms, opacity 0s linear 300ms !important;
  }

  :root:not([data-js]) .navmenu:hover .navmenu__panel {
    transition: visibility 0s linear 120ms, opacity 0s linear 120ms !important;
  }

  :root:not([data-js]) .navmenu:focus-within .navmenu__panel {
    transition: none !important;
  }
}