/* ============================================================
   РусВита Платформа — прототип
   Палитра и типографика наследуют лендинг contract.rusvitatechnology.ru
   ============================================================ */

/* Шрифты те же, что на лендинге, и в той же роли.
 *
 * Onest — весь текст. Unbounded — только цифры, и это не обрезанный файл,
 * а система: на лендинге в нём ровно одиннадцать глифов (пробел и 0–9),
 * поэтому в стеке «Unbounded, Onest» буквы рисует Onest, а числа —
 * Unbounded. Крупные числа своим начертанием, слова — общим.
 *
 * Из этого следует то, что легко принять за поломку: заголовок кабинета
 * набран Onest, хотя в font-family первым стоит Unbounded. Так и надо —
 * ровно так же выглядит лендинг.
 *
 * Формат woff2 вместо ttf. Onest пересобран из наших же полных ttf, все
 * 470 глифов на месте: подмена файлом лендинга стоила бы знака ₽, а им
 * подписана каждая вторая цифра в кабинете. Unbounded взят у лендинга как
 * есть — там и нужны одни цифры.
 *
 * Весило 644 КБ, стало 126 КБ. Больше половины прежнего веса приходилось
 * на Unbounded (349 КБ) — ради заголовков, которые теперь и не он. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/onest-400.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/onest-500.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/onest-600.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/onest-700.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/onest-800.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/unbounded-700.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --accent: #c51708;
  --accent-dark: #8f0c04;
  --accent-soft: #fff1ef;
  --ink: #111111;
  --ink-soft: #373333;
  --muted: #6c6462;
  --paper: #f4f2ef;
  --surface: #ffffff;
  --surface-warm: #fbfaf8;
  --line: #e2ddd6;
  --line-strong: #c6bdb3;
  --ok: #1a6c3f;
  --ok-soft: #e9f5ee;
  --warn: #8a5300;
  --warn-soft: #fdf2df;
  --info: #1d4f92;
  --info-soft: #eaf1fb;
  --shadow: 0 12px 32px rgba(24, 18, 16, 0.08);
  --shadow-sm: 0 3px 10px rgba(24, 18, 16, 0.06);
  --radius: 10px;
  --radius-lg: 16px;
  --sidebar: 250px;
  /* Ширина содержимого. 1420 оставляли под ноутбук, и на широком мониторе
     справа висела пустая полоса в пол-экрана, а карточки товаров при этом
     оставались узкими: сетка добирала их числом, а не шириной. */
  --max: 1680px;
}

* { box-sizing: border-box; }
html { background: var(--paper); overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font: 15px/1.5 Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* Ссылка внутри предложения обязана выглядеть ссылкой.
 *
 * Сброс выше нужен плиткам и меню: там ссылка — это вся карточка целиком,
 * и подчёркивать в ней нечего. Но в связном тексте он превращает ссылку в
 * обычные слова, и по ней просто не нажимают: «откройте @rusnotifi_bot»
 * читается как совет найти бота поиском, хотя это готовая ссылка.
 *
 * Перечисляем места, где живёт именно текст, а не разметка. Общего
 * правила для всех `a` не делаем — оно раскрасило бы навигацию и
 * карточки товаров. */
.notice a,
.card__sub a,
.field__hint a,
.empty a,
p a,
.small a,
.tiny a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.notice a:hover, .card__sub a:hover, .field__hint a:hover,
.empty a:hover, p a:hover, .small a:hover, .tiny a:hover {
  text-decoration-thickness: 2px;
}
/* Кроме тех, что и так нарисованы как элементы. */
.small a.button, .tiny a.button, p a.button,
.small a.chip, .tiny a.chip, p a.chip {
  color: inherit; text-decoration: none; font-weight: inherit;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid rgba(197, 23, 8, .35); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: fixed; z-index: 300; top: 10px; left: 10px;
  padding: 10px 14px; border-radius: 8px; color: #fff; background: var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.boot-screen { display: grid; place-content: center; gap: 8px; min-height: 100vh; text-align: center; color: var(--muted); }
.boot-screen strong { font-family: Unbounded, Onest, sans-serif; font-size: 22px; color: var(--ink); }

/* ---------- утилиты ---------- */
/* Вертикальная стопка.
 *
 * align-content: start обязателен. Без него строки грида делят между собой
 * лишнюю высоту: узкая колонка, растянутая до высоты соседней, разгоняет
 * свои карточки, а внутри карточки — заголовок и содержимое разъезжаются
 * на сотню пикселей. Выглядит как сломанная вёрстка, а это раздача
 * свободного места по умолчанию. */
.stack { display: grid; gap: 20px; align-content: start; }
.stack--tight { gap: 12px; }
.stack--wide { gap: 30px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline--between { justify-content: space-between; }
.inline--end { justify-content: flex-end; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
.text-danger { color: var(--accent); }
.text-ok { color: var(--ok); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* ---------- кнопки ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 18px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-weight: 600; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.button:active { transform: translateY(1px); }
.button--primary { background: var(--accent); color: #fff; }
.button--primary:hover { background: var(--accent-dark); }
.button--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.button--secondary:hover { border-color: var(--accent); color: var(--accent); }
.button--ghost { background: transparent; color: var(--muted); }
.button--ghost:hover { background: var(--surface-warm); color: var(--ink); }
.button--dark { background: var(--ink); color: #fff; }
.button--dark:hover { background: #2c2626; }
/* «Инструкция» рядом с шагом. Синяя, а не красная: красная на этих
   экранах означает «сделать дальше», и вторая красная рядом отняла бы у
   первой смысл. Это подсказка, а не действие. */
.button--guide {
  background: var(--info-soft); border-color: #c3d6ef; color: var(--info);
}
.button--guide:hover { background: #dfeaf9; border-color: var(--info); }
.button--danger { background: #fff; border-color: #eec2bd; color: var(--accent); }
.button--danger:hover { background: var(--accent-soft); }
.button--small { min-height: 34px; padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.button--block { width: 100%; }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.icon-button {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted);
}
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---------- бейджи и статусы ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-warm); color: var(--muted); border: 1px solid var(--line);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--ok { background: var(--ok-soft); color: var(--ok); border-color: #c5e4d2; }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: #f0dcb4; }
.badge--danger { background: var(--accent-soft); color: var(--accent); border-color: #f2cdc8; }
.badge--info { background: var(--info-soft); color: var(--info); border-color: #c8d9f0; }
.badge--plain::before { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.chip--active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--accent { background: var(--accent-soft); border-color: #f2cdc8; color: var(--accent); }

/* ---------- карточки ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--warm { background: var(--surface-warm); }
.card--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.card--dark .muted { color: rgba(255,255,255,.62); }
.card--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.card--accent .muted { color: rgba(255,255,255,.75); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card__title { font-size: 17px; font-weight: 700; }
.card__sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1080px) { .grid--sidebar { grid-template-columns: 1fr; } }

/* ---------- метрики ---------- */
.metric { display: grid; gap: 4px; }
.metric__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.metric__value { font-family: Unbounded, Onest, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.metric__value--sm { font-size: 20px; }
.metric__hint { font-size: 12px; color: var(--muted); }
.card--dark .metric__label, .card--accent .metric__label { color: rgba(255,255,255,.7); }
.card--dark .metric__hint, .card--accent .metric__hint { color: rgba(255,255,255,.72); }

/* ---------- страница ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-head h1 { font-family: Unbounded, Onest, sans-serif; font-size: 27px; letter-spacing: -.02em; }
.page-head p { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 70ch; }
.section-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; }

/* ---------- таблицы ---------- */
.table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  padding: 12px 14px; text-align: left; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-warm); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-warm); }
td.right, th.right { text-align: right; }

/* ---------- формы ---------- */
.field { display: grid; gap: 6px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background-color: var(--surface); transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }

/* Стрелка у списка — своя, а не браузерная.
 *
 * Нативную мы не трогали, и она прижималась вплотную к рамке: padding
 * справа 12 пикселей отводил место тексту, а стрелка рисуется поверх него
 * и упирается в границу. В разных браузерах это выглядит по-разному, и
 * везде — неаккуратно.
 *
 * Поэтому appearance: none и свой шеврон фоном. Место под него отводим
 * padding-right, иначе длинное значение наезжает на стрелку. Цвет задан
 * числом: currentColor в background-image не работает, а переменную в
 * data-URI не подставить. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236c6462' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 8px;
}
/* Стрелка не должна затирать заливку у списков со своим фоном. */
select:disabled { opacity: .6; }
.select-inline { padding-right: 26px; background-position: right 7px center; background-size: 10px 7px; }
.calc-field__control select { padding-right: 28px; background-position: right 9px center; }
.field textarea { min-height: 96px; resize: vertical; }
.field__hint { font-size: 12px; color: var(--muted); }
/* Группа полей, которую целиком запирают на время проверки. Рамку и отступы
   браузера снимаем: fieldset нужен ради disabled, а не ради вида. */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
fieldset.plain:disabled { opacity: .65; }
/* Галочка в строку с подписью: подпись — часть цели нажатия, а не текст рядом. */
label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
label.checkbox input { width: auto; margin: 0; }
/* Строка под поиском по каталогу площадки: когда копию читали и кнопка
   перечитать. Кнопка справа — читают строку, а нажимают по краю. */
.picker-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: -2px 0 8px;
}
@media (max-width: 480px) {
  .picker-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* Ошибка поля — рядом с полем, а не тостом наверху: тост уезжает, а
   исправлять человеку здесь. */
.field__error { font-size: 12px; font-weight: 600; color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--accent); }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); }
.check input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: var(--accent); }

.radio-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.radio-card {
  display: grid; gap: 5px; padding: 15px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.radio-card:hover { border-color: var(--accent); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__title { display: block; font-weight: 700; font-size: 14px; }
.radio-card__desc { display: block; font-size: 12.5px; color: var(--muted); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- конструктор: полоса шагов ---------- */
/* Полоса отвечает на два вопроса сразу: где я и сколько ещё. Соединяющая
   линия рисуется псевдоэлементом от кружка предыдущего шага — так она не
   торчит за края первого и последнего. */
.steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin: 0; padding: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.steps__item { position: relative; }
.steps__item + .steps__item::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 26px;
  transform: translateY(-50%); background: var(--line);
}
.steps__button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--muted); text-align: left;
  transition: background .15s ease, color .15s ease;
}
.steps__button:hover:not(:disabled) { background: var(--surface-warm); color: var(--ink); }
.steps__button:disabled { cursor: default; opacity: .55; }
.steps__num {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); color: var(--muted);
  font-size: 12px; font-weight: 700;
}
.steps__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps__item--done .steps__num { background: var(--ok-soft); color: var(--ok); }
.steps__item--done .steps__button { color: var(--ink-soft); }
.steps__item--active .steps__button { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.steps__item--active .steps__num { background: var(--accent); color: #fff; }
/* На узком экране четыре подписи не помещаются, но оставить одни цифры —
   значит спросить «а что такое третий шаг». Название держим у текущего:
   остальные человек уже прошёл или ещё увидит. */
@media (max-width: 720px) {
  .steps { display: flex; }
  .steps__item { flex: none; }
  .steps__item--active { flex: 1; min-width: 0; }
  .steps__item:not(.steps__item--active) .steps__title { display: none; }
  .steps__button { padding: 12px 10px; }
}

/* ---------- конструктор: выбор ---------- */
/* Сетка вместо списка во всю ширину: двадцать составов строками давали
   тринадцать экранов прокрутки, и до тары человек доходил уставшим. */
.pick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.pick-grid--two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* minmax(0, 1fr) обязателен: по умолчанию колонка грида шириной с самое
   широкое содержимое, и строка «название + бейдж формы» распирает карточку
   за её собственную рамку. */
.pick {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start;
  padding: 13px 14px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.pick:hover { border-color: var(--accent); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick--on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pick__name { min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.3; }
/* Описание в две строки: третья почти всегда добирает хвост предложения,
   а на двадцати карточках это лишний экран прокрутки. */
.pick__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
/* Номер свидетельства в карточку не выносим: в колонке под 180 пикселей он
   обрезается до «Декларация (Г…» — это шум, а не сведение. Он есть в
   подсказке при наведении и целиком в сводке справа. */
.pick__foot .badge { flex: none; }
.pick__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  min-width: 0; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line);
}
.pick__price { flex: none; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Раскрытие для второстепенного: сравнение размеров, роспись списания,
   требования к маркировке. Смотрят один раз, а места занимают экран. */
.sizes > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 0; list-style: none;
}
.sizes > summary::-webkit-details-marker { display: none; }
.sizes > summary::before { content: "▸ "; color: var(--muted); }
.sizes[open] > summary::before { content: "▾ "; }
.sizes > summary:hover { color: var(--accent); }

/* Ряд сравнения размеров не переносится: перенос ломает саму мысль —
   тары должно быть видно рядом, в одном масштабе. Не влезло — прокрутка. */
.size-row { flex-wrap: nowrap; align-items: flex-end; gap: 20px; overflow-x: auto; padding: 10px 0 4px; }
.size-row > * { flex: none; }

.step-nav { padding-top: 2px; }
.page-head--tight p { margin-top: 4px; }

.build-aside { position: sticky; top: 78px; }
.build-aside__vessel { display: flex; justify-content: center; align-items: flex-end; min-height: 150px; padding: 6px 0; }
.build-aside__price { font-family: Unbounded, Onest, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 1080px) { .build-aside { position: static; } }

/* ---------- уведомления ---------- */
.notice {
  display: grid; gap: 5px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface-warm); font-size: 13.5px; color: var(--ink-soft);
}
.notice strong { font-size: 14px; color: var(--ink); }
.notice--ok { background: var(--ok-soft); border-color: #c5e4d2; border-left-color: var(--ok); }
.notice--warn { background: var(--warn-soft); border-color: #f0dcb4; border-left-color: var(--warn); }
.notice--danger { background: var(--accent-soft); border-color: #f2cdc8; border-left-color: var(--accent); }
.notice--info { background: var(--info-soft); border-color: #c8d9f0; border-left-color: var(--info); }

.empty { display: grid; gap: 8px; justify-items: center; padding: 44px 20px; text-align: center; color: var(--muted); }
.empty strong { color: var(--ink); font-size: 16px; }

/* ---------- оболочка приложения ---------- */
.app-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand__mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: var(--accent); color: #fff; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 16px;
}
.brand__text strong { display: block; font-family: Unbounded, Onest, sans-serif; font-size: 14px; letter-spacing: -.01em; }
.brand__text small { display: block; font-size: 12px; color: var(--muted); }

.app-layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); align-items: start; }
/* Меню — колонка во всю высоту: разделы сверху, «мы в сети» прижато к низу.
   Прижимаем через flex, а не отступом сверху: отступ пришлось бы подбирать
   под число разделов и переподбирать при каждом новом. */
.sidebar {
  position: sticky; top: 59px; height: calc(100vh - 59px); overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 18px 12px; border-right: 1px solid var(--line); background: var(--surface);
}
.nav-group { margin-bottom: 18px; }
.nav-group__label {
  padding: 0 12px 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.nav-list { display: grid; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink-soft);
  transition: background .13s ease, color .13s ease;
}
.nav-link:hover { background: var(--surface-warm); color: var(--ink); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* Значок пункта меню.
   Раньше здесь стоял символ из шрифта, и правило было про текст: ширина,
   кегль, выравнивание. Теперь это svg, и от рамки нужно только место и
   ровная посадка рядом с подписью. */
.nav-link__icon { flex: none; display: inline-flex; width: 18px; height: 18px; opacity: .75; }
.nav-link[aria-current="page"] .nav-link__icon { opacity: 1; }
.nav-link:hover .nav-link__icon { opacity: 1; }

/* Общая рамка значка: тянется за размером, цвет берёт у текста. */
.icon { width: 100%; height: 100%; display: block; }
.nav-link__count {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.nav-link[aria-current="page"] .nav-link__count { background: var(--accent); }
/* Спокойный счётчик — очередь, которую оператор уже видел: заказы к
   отгрузке никуда не денутся и гореть весь день не должны. Цветным
   остаётся только новое, появившееся с прошлого захода. */
.nav-link__count--quiet { background: var(--surface-warm); color: var(--muted); border: 1px solid var(--line); padding: 0 6px; }
.nav-link[aria-current="page"] .nav-link__count--quiet { background: var(--surface); }

/* Строка сводки, за которой открывается список.
   Не таблица: строк три-шесть, а у таблицы здесь появились бы заголовки
   колонок, которые нечем заполнить. */
.drill {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 8px; color: inherit;
  border: 1px solid transparent;
}
.drill:hover { background: var(--surface-warm); border-color: var(--line); }
.drill__label { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.drill__value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Пустая строка не должна тянуть на себя внимание: ноль — это хорошая
   новость, и выделять её так же, как непустую, значит уравнять их. */
.drill--empty .drill__label { color: var(--muted); }
.drill--empty:hover { background: transparent; border-color: transparent; }

/* Столбики оборота по дням.
   Своя разметка вместо библиотеки: это один ряд чисел, и тянуть ради него
   зависимость в проект без зависимостей было бы странно. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.spark__bar {
  flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent); opacity: .75;
}
.spark__bar:hover { opacity: 1; }

/* Ссылка-действие внутри строки текста: не кнопка, потому что стоит в
   предложении и читается как его часть. */
.link-button {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}

/* Наш идентификатор ЭДО: его копируют, а не читают.
   Полсотни знаков переписывают руками ровно один раз, потом ошибаются —
   поэтому кнопка рядом, а сам он моноширинный и переносится по символам. */
.edo-card {
  display: grid; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-warm);
}
.edo-card__id {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.edo-card__id .mono {
  font-size: 13px; font-weight: 600; word-break: break-all; line-height: 1.4;
}

/* Артикул маркетплейса на карточке товара.
   Не строка справки, а состояние: пока не привязан, товар не продаётся
   вообще. Поэтому цветом и значком — красное «сделай», зелёное «сделано». */
.mp-sku {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.3; margin-top: 8px;
}
.mp-sku__icon { width: 15px; height: 15px; flex: none; }
.mp-sku__label { font-weight: 600; }
.mp-sku__value { margin-left: auto; font-weight: 600; word-break: break-all; text-align: right; }
.mp-sku--off {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.mp-sku--on {
  background: var(--ok-soft); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
}

/* Пошаговая инструкция.
   Номер слева, действие справа, экран под ним. Всё, что объясняет «зачем»,
   свёрнуто: оно помогает тому, кто застрял, и мешает тому, кто просто
   идёт по шагам. */
/* Оглавление слева и липкое.
   Семнадцать инструкций — несколько экранов прокрутки, и до нижних
   доходит только тот, кто знает, что они есть. Строка чипов сверху этого
   не решала: уехав вниз, она пропадает. Сбоку она видна всегда, и по
   подсветке видно место в пути. */
.guide-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px;
  /* Растягиваем колонки, а не прижимаем к верху: липкому блоку нужен
     запас высоты у родителя, иначе ему некуда съезжать и он просто
     уезжает вместе со страницей. */
  align-items: stretch;
}
.guide-body { display: grid; gap: 16px; min-width: 0; align-content: start; }
.guide-side__inner {
  /* 86px — под прилипшей шапкой кабинета, а не под ней же. */
  position: sticky; top: 86px;
  max-height: calc(100vh - 102px); overflow: auto;
  padding: 14px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.guide-side__head {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.guide-side__block + .guide-side__block { margin-top: 14px; }
.guide-side__title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 5px;
}
.guide-side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.guide-side__link {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 9px; border-radius: 8px;
  font-size: 13px; line-height: 1.3; color: var(--ink-soft); text-decoration: none;
  border-left: 2px solid transparent;
}
.guide-side__link:hover { background: var(--surface-warm); color: var(--ink); }
/* Текущая инструкция. Считается по прокрутке — см. guideSpy в app.js. */
.guide-side__link--here {
  background: var(--info-soft); color: var(--info);
  border-left-color: var(--info); font-weight: 600;
}
.guide-side__min { font-size: 11px; color: var(--muted); white-space: nowrap; }
.guide-side__link--here .guide-side__min { color: var(--info); }
.guide-block {
  font-size: 13px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  margin: 26px 0 -4px;
}
/* Узкий экран: оглавление уезжает наверх и перестаёт быть липким —
   на телефоне липкий блок съедает пол-экрана ради навигации. */
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; gap: 16px; }
  .guide-side__inner { position: static; max-height: none; }
  .guide-side__list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .guide-side__list { display: grid; }
}

.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.guide-step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.guide-step__no {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.guide-step__body { display: grid; gap: 8px; min-width: 0; }
.guide-step__text { font-size: 15px; line-height: 1.5; }

.guide-why summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.guide-why summary::-webkit-details-marker { display: none; }
.guide-why summary::before { content: "?"; }
.guide-why summary:hover { color: var(--ink); }
.guide-why p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Снимок экрана. Рамка и фон нужны затем, что скриншот светлый на светлом
   и без границы сливается со страницей. */
.guide-shot {
  display: block; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--paper); max-width: 760px;
}
.guide-shot img { display: block; width: 100%; height: auto; }
.guide-shot:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* Чужой кабинет: Ozon, Диадок, «Честный знак». Помечаем прямо, чтобы
   продавец не искал этот экран у нас. */
.guide-outside {
  display: grid; gap: 4px; padding: 10px 12px;
  border-left: 3px solid var(--line); background: var(--surface-warm);
  border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5;
}
.guide-outside__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* Ссылка на первоисточник: там живые скриншоты этого экрана, и обновляет
   их тот, чей это интерфейс. */
.guide-outside__link {
  justify-self: start; margin-top: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}

/* Плотная таблица: строка на запись.
   Пять заказов занимали экран целиком, потому что под каждым
   разворачивалась воронка и полтора десятка полей площадки. */
.table--tight td { padding-top: 7px; padding-bottom: 7px; }
.table--tight .cell-toggle { width: 26px; padding-right: 0; }
/* Состав и название контрагента — в одну строку с обрезкой: без неё
   строка растёт вверх, ради чего вся эта плотность и затевалась.
   Целиком видно в подсказке и в раскрытых подробностях. */
.table--tight .cell-items, .table--tight .cell-name {
  max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table--tight .cell-name { max-width: 180px; }

.row-toggle {
  width: 20px; height: 20px; border: 0; background: none; padding: 0;
  color: var(--muted); font-size: 15px; line-height: 1;
  transition: transform .12s ease, color .12s ease;
}
.row-toggle:hover { color: var(--ink); }
.row-toggle--on { transform: rotate(90deg); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .row-toggle { transition: none; } }

/* Тонкости подключения — свёрнутые.
   Нужны один раз, в момент создания ключа, и все сразу; развёрнутыми они
   красной стеной стояли под списком прав, ради которого сюда и заходят. */
/* Необязательное право: тот же блок, но приглушённый — чтобы его не
   выдавали заодно со всеми, не разобравшись. */

.caveats { border-top: 1px dashed var(--line); padding-top: 6px; }
.caveats__head {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.caveats__head::-webkit-details-marker { display: none; }
.caveats__head::before { content: "?"; }
.caveats[open] .caveats__head::before { content: "×"; }
.caveats__head:hover { color: var(--ink); }
.caveats__list {
  margin: 6px 0 0; padding-left: 16px;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.caveats__list li { margin-bottom: 4px; }

.main { padding: 26px 28px 90px; max-width: var(--max); }
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 18px 15px 96px; }
  .app-topbar { padding: 10px 15px; }
  .mobile-nav {
    position: fixed; z-index: 70; bottom: 0; left: 0; right: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    display: grid; justify-items: center; gap: 2px; padding: 6px 2px;
    font-size: 10.5px; color: var(--muted); border-radius: 8px;
  }
  /* Значок в нижнем меню чуть крупнее, чем в боковом: палец, а не курсор. */
  .mobile-nav a .nav-link__icon { width: 20px; height: 20px; opacity: .85; }
  .mobile-nav a[aria-current="page"] .nav-link__icon { opacity: 1; }
  .mobile-nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
}

@media (max-width: 560px) {
  /* В шапке остаётся только бренд и баланс: подпись компании съедает строку. */
  .brand__text small { display: none; }
  .app-topbar { gap: 10px; }
  .app-topbar .badge { font-size: 11px; padding: 3px 8px; }
  .page-head h1 { font-size: 23px; }
}

/* мобильные таблицы -> карточки */
@media (max-width: 720px) {
  .table-shell table, .table-shell thead, .table-shell tbody, .table-shell tr, .table-shell td { display: block; width: 100%; }
  .table-shell thead { display: none; }
  .table-shell tbody tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .table-shell tbody tr:last-child { border-bottom: 0; }
  .table-shell tbody td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 6px 14px; text-align: right; }
  .table-shell tbody td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted);
  }
}

/* ---------- диалоги ---------- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(20, 15, 14, .5); backdrop-filter: blur(2px);
}
.dialog {
  width: min(660px, 100%); max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.dialog--wide { width: min(900px, 100%); }
.dialog__header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 22px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.dialog__header h2 { font-family: Unbounded, Onest, sans-serif; font-size: 19px; letter-spacing: -.01em; }
.dialog__header p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dialog__body { padding: 20px 22px; display: grid; gap: 18px; }
.dialog__footer {
  position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 15px 22px; background: var(--surface-warm); border-top: 1px solid var(--line);
}

.toast-root { position: fixed; z-index: 400; bottom: 22px; left: 50%; transform: translateX(-50%); }
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow);
}
/* Отказ. Читать его обязательно — он и есть ответ на нажатие, — поэтому он
   заметен, помещает длинную фразу в несколько строк и ждёт, пока закроют. */
.toast--error {
  background: var(--accent-dark); border-radius: var(--radius);
  max-width: min(560px, calc(100vw - 32px)); text-align: left; line-height: 1.4;
}
.toast__close {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 16px; line-height: 1;
  cursor: pointer;
}
.toast__close:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 900px) { .toast-root { bottom: 78px; } }

/* ---------- шаги мастера ---------- */
.steps { display: flex; gap: 8px; flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 13px; color: var(--muted);
}
.step__num {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--line); color: var(--ink); font-size: 11px; font-weight: 700;
}
.step--active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.step--active .step__num { background: var(--accent); color: #fff; }
.step--done { color: var(--ok); border-color: #c5e4d2; background: var(--ok-soft); }
.step--done .step__num { background: var(--ok); color: #fff; }

/* ---------- прогресс ---------- */
.progress { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.progress__bar--ok { background: var(--ok); }
.progress__bar--warn { background: var(--warn); }

/* ---------- пайплайн статусов ---------- */
.pipeline { display: flex; gap: 4px; align-items: stretch; flex-wrap: wrap; }
.pipeline__node {
  flex: 1 1 96px; min-width: 92px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-warm);
  font-size: 12px; color: var(--muted); text-align: center;
}
.pipeline__node strong { display: block; font-size: 12.5px; }
.pipeline__node--done { background: var(--ok-soft); border-color: #c5e4d2; color: var(--ok); }
.pipeline__node--current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pipeline__node--current strong { color: #fff; }

/* ---------- таймлайн ---------- */
.timeline { display: grid; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; padding-bottom: 16px; position: relative; }
.timeline__item::before {
  content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 1px; background: var(--line);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  width: 11px; height: 11px; margin: 5px auto 0; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.timeline__dot--done { background: var(--ok); border-color: var(--ok); }
.timeline__dot--now { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline__body strong { font-size: 14px; }
.timeline__body p { font-size: 13px; color: var(--muted); }
.timeline__time { font-size: 12px; color: var(--muted); }

/* ---------- каталог ---------- */
/* Нижняя граница колонки — не «сколько влезет», а «сколько нужно».
   255 пикселей не вмещали номер свидетельства: «AM.01.06.01.003.R.000203.06.26»
   ломался посреди числа и читался как два разных. Считаем от него: сам
   номер около 210 пикселей моноширинным, плюс подпись, отступы и поля
   карточки — 300. */
.catalog-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.product-card {
  display: grid; gap: 0; overflow: hidden; grid-template-rows: auto 1fr auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-card__visual {
  position: relative; display: grid; place-items: center; height: 158px;
  background:
    radial-gradient(120% 90% at 50% 8%, #fbf9f6 0%, #efe9e1 58%, #e4ddd3 100%);
  /* Страховка от переполнения: даже при неверном масштабе превью не должно
     наезжать на соседние карточки. */
  overflow: hidden;
}
.product-card__body { display: grid; gap: 8px; padding: 16px; align-content: start; }
/* Подписи у товаров разной длины. Без ограничения строк ряды сетки скачут
   по высоте, и кнопки «Выбрать» перестают стоять на одной линии. */
/* Ограничение на три строки — только в каталоге, где первая подпись это
   описание разной длины и ряды сетки иначе скачут по высоте. На карточке
   своего товара там короткое название тары, и резерв в три строки
   оставлял под ним две пустые. */
.product-card--pick .product-card__body .product-card__meta:first-of-type {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(3 * 1.45em);
}
.product-card__name { font-weight: 700; font-size: 15px; }
.product-card__meta { font-size: 12.5px; color: var(--muted); }
.product-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 16px 16px;
  /* Тираж со счётчиком и кнопкой в узкую карточку одной строкой не влезает:
     раньше он вылезал за край и обрезался. Переносим целиком. */
  flex-wrap: wrap;
}
/* Цена на карточке описана ниже, рядом с остальной карточкой. Здесь
   было второе описание, которое ниже перекрывалось целиком — вместе со
   шрифтом. */
.product-card__tag {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 9px; border-radius: 999px; background: rgba(17,17,17,.82); color: #fff; font-size: 11px; font-weight: 600;
}

/* Рекламные рендеры вертикальные, 3:4. Блок берёт ровно эту пропорцию,
   поэтому object-fit ничего не срезает: подпись на постаменте остаётся целой. */
.product-card__visual--photo {
  height: auto; aspect-ratio: 3 / 4; background: var(--paper); place-items: stretch;
}
.product-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Плашка формы лежит поверх тёмного рендера — тёмная на тёмном не читается. */
.product-card__tag--light {
  background: rgba(255,255,255,.92); color: #17110f;
  backdrop-filter: blur(4px); box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.summary-photo {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}

/* Полоска примеров на экране выбора ветки: пять товаров вместо пустых
   заглушек «этикетка» — на тёмной карточке рендеры читаются лучше всего. */
.start-strip { display: flex; gap: 10px; align-items: flex-end; }
.start-strip__photo {
  width: 68px; height: 91px; object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 12px rgba(0,0,0,.28);
}

/* Строка со шкалой шагов под основной строкой таблицы: без своей рамки
   и отступов, чтобы читалась как продолжение заказа, а не как новый заказ. */
.row-sub > td { padding: 0 16px 12px; border-top: 0; }
.pipeline--off { opacity: .8; }
.pipeline__note { margin-left: 10px; align-self: center; }

/* Списки внутри подсказок: без внешних отступов, чтобы не разрывать блок. */
.tight-list { margin: 2px 0 2px 18px; padding: 0; display: grid; gap: 3px; }
.tight-list li { line-height: 1.4; }

/* Макеты дизайна: сетка карточек с превью. Пропорция свободная — присылают
   и вертикальные тубы, и горизонтальные развёртки, обрезать их нельзя. */
.concept-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.concept {
  margin: 0; display: grid; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface);
}
.concept img { width: 100%; height: 180px; object-fit: contain; background: var(--paper); display: block; }
.concept figcaption { display: grid; gap: 6px; padding: 10px; justify-items: start; }
.concept--picked { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
/* PDF в <img> даёт битую иконку, поэтому вместо превью — плитка со ссылкой,
   занимающая ровно то же место, что и картинка: сетка не прыгает. */
.concept__stub {
  display: grid; align-content: center; justify-items: center; gap: 4px;
  height: 180px; background: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.brief-recap summary { cursor: pointer; color: var(--muted); }
.brief-recap[open] summary { margin-bottom: 8px; }

/* Кошелёк в шапке: баланс — главная цифра кабинета, поэтому крупная.
   Рядом — сколько ещё не разложено по товарам. */
.wallet { display: flex; align-items: stretch; gap: 10px; }
.wallet__main, .wallet__free {
  display: grid; gap: 1px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.wallet__main small, .wallet__free small { font-size: 10px; color: var(--muted); line-height: 1.2; }
.wallet__main strong { font-size: 19px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wallet__free strong { font-size: 14px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; }
.wallet__main--low strong { color: var(--accent); }
.wallet__free { background: var(--surface-warm); }

/* Тираж на карточке товара.
   Число вводят руками, а под ним всегда стоят цена штуки и произведение:
   продавец распоряжается деньгами, а не «единицами». */
/* Правила тиража жили в двух местах файла и спорили между собой: этот
   набор перекрывался целиком тем, что ниже. Осталось одно место — ниже,
   рядом со счётчиком. */

/* Шаги готовности к работе. Подсвечен ровно один — первый незакрытый:
   список одинаково выделенных дел человек не читает. */
.readiness { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.readiness__item {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius); border: 1px solid transparent;
}
.readiness__item--current { border-color: var(--accent); background: var(--accent-soft); }
.readiness__num {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.readiness__item--done .readiness__num { border-color: #c5e4d2; background: var(--ok-soft); color: var(--ok); }
.readiness__item--current .readiness__num { border-color: var(--accent); background: var(--accent); color: #fff; }
.readiness__body { display: grid; gap: 2px; }
.readiness__item--done .readiness__body strong { color: var(--muted); font-weight: 600; }
/* Кнопки справа от шага: «Инструкция» и, у текущего шага, «Перейти».
   На узком экране они уходят под текст, а не жмут его до одного слова. */
.readiness__go { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
@media (max-width: 560px) {
  .readiness__item { grid-template-columns: 26px 1fr; }
  .readiness__go { grid-column: 2; justify-content: flex-start; }
}

/* нарисованная тара */
/* Нарисованная тара.
 *
 * Раньше это были плоские прямоугольники с заливкой — на карточке они
 * читались как заглушка, а не как товар. Добавлены боковой блик, мягкая тень
 * под донышком и скруглённые плечи: этого хватает, чтобы форма читалась
 * объёмной, а сама отрисовка осталась чистым CSS без картинок. */
.vessel { position: relative; filter: drop-shadow(0 8px 14px rgba(24,18,16,.18)); }
.vessel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 22%,
    rgba(0,0,0,.06) 62%, rgba(0,0,0,.14) 100%);
  border-radius: inherit;
}
/* Тень-подложка: тара стоит на поверхности, а не висит. */
.product-card__visual::after {
  content: ''; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 58%; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(24,18,16,.20), transparent 70%);
  pointer-events: none;
}
.product-card__visual--photo::after { display: none; }
.vessel__label-zone {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px dashed var(--line-strong);
  font-size: 9px; color: var(--muted); text-align: center; padding: 2px;
}
.vessel__label-zone img { width: 100%; height: 100%; object-fit: cover; }
.vessel__label-zone--filled { border-style: solid; border-color: rgba(0,0,0,.12); }

/* ---------- калькулятор состава ---------- */
.formula-row {
  display: grid; grid-template-columns: minmax(0,1fr) 108px 96px 38px; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.formula-row:last-child { border-bottom: 0; }
.formula-row input[type="range"] { width: 100%; accent-color: var(--accent); }
@media (max-width: 640px) { .formula-row { grid-template-columns: minmax(0,1fr) 74px 38px; } .formula-row .formula-row__range { grid-column: 1 / -1; } }

.cost-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line); }
.cost-line:last-child { border-bottom: 0; }
.cost-line--total { padding-top: 12px; font-size: 16px; font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 6px; }

/* ---------- баланс ---------- */
.balance-card { display: grid; gap: 16px; }
.balance-card__value { font-family: Unbounded, Onest, sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.ledger-amount--in { color: var(--ok); font-weight: 700; }
.ledger-amount--out { color: var(--ink); font-weight: 700; }

/* ---------- интеграции ---------- */
.mp-logo {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
/* Плитка под знаком площадки.
   Знаки несут свой цвет, поэтому плитка белая: перекрашивать чужой
   логотип нельзя. Свой канал не бренд — ему хватает букв на тёмном. */
.mp-logo--plain {
  background: #fff; border: 1px solid var(--line);
  color: inherit; overflow: hidden;
}
.mp-logo--plain svg { width: 68%; height: 68%; display: block; }
.mp-logo--image { background: #fff; padding: 0; overflow: hidden; }
.mp-logo--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-logo--manual { background: var(--ink); }

/* ---------- публичные экраны ---------- */
.public-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 20px; background: var(--paper); }
.public-topbar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; max-width: 100%; }
.public-topbar .brand__text { text-align: center; }
.public-topbar .brand__wordmark { margin-inline: auto; }
.public-main { display: grid; flex-shrink: 0; place-items: center; width: 100%; }
.auth-card { width: min(480px, 100%); }
.auth-card h1 { font-family: Unbounded, Onest, sans-serif; font-size: 24px; letter-spacing: -.02em; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; width: min(1180px, 100%); }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 26px; } }
.hero h1 { font-family: Unbounded, Onest, sans-serif; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { margin-top: 16px; font-size: 16px; color: var(--ink-soft); max-width: 52ch; }
.hero-points { display: grid; gap: 10px; margin-top: 24px; }
.hero-point { display: grid; grid-template-columns: 24px 1fr; gap: 11px; font-size: 14px; align-items: start; }
.hero-point__num {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
}
.demo-switch { display: grid; gap: 10px; }
.demo-switch__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  text-align: left; width: 100%;
}
.demo-switch__row:hover { border-color: var(--accent); }
.demo-switch__row strong { display: block; font-size: 14px; }
.demo-switch__row small { color: var(--muted); font-size: 12.5px; }

/* режим просмотра чужого кабинета */
.viewing-banner { border-left-color: var(--warn); }

/* прочее */
.kv { display: grid; gap: 9px; }
.kv__row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.kv__row dt { color: var(--muted); }
.kv__row dd { margin: 0; font-weight: 600; text-align: right; }
.file-drop {
  display: grid; gap: 6px; place-items: center; padding: 26px 16px; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-warm);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.file-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-drop strong { font-size: 14px; }
.file-drop input { display: none; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab {
  padding: 9px 14px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab--active { color: var(--accent); border-bottom-color: var(--accent); }
/* Число на вкладке. Стоит здесь, а не в заголовке раздела, потому что
   отвечает на вопрос «сколько у нас операторов» до перехода на вкладку —
   а раньше на него отвечали пересчётом строк глазами. */
.tab__count {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-warm); color: var(--muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tab--active .tab__count { background: var(--accent-soft); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Список ролей прямо в строке таблицы: смена роли — редкое действие, ради
   которого не стоит уводить на отдельный экран. */
.select-inline {
  margin-left: 8px; padding: 4px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: 8px;
  /* background-color, а не background: шорткат стирает background-image, а
     стрелка у списка нарисована именно им. */
  background-color: var(--surface); color: inherit;
}
.input-search {
  padding: 9px 14px; min-width: 220px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit;
}
.input-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- кабинет сборщика -------------------------------------------------------
   Человек стоит у стола со сканером и смотрит на экран издалека: цифры
   крупные, кнопки крупные, меню нет — задача одна. */

.app-layout--plain { grid-template-columns: 1fr; }
.app-layout--plain .main { padding-top: 20px; }

/* Связь с сервером. Точка, а не текст: сборщику важно «идёт ли поток»,
   а не как это устроено. */
.pick-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px;
  background: var(--paper); color: var(--muted); white-space: nowrap;
}
.pick-live__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
}
.pick-live--on { color: var(--ok); background: var(--ok-soft); }
.pick-live--on .pick-live__dot { background: var(--ok); animation: pick-pulse 2s infinite; }
@keyframes pick-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .pick-live--on .pick-live__dot { animation: none; }
}

/* Ярлыки компаний. Красный кружок — только у новых заказов: это то, что
   требует действия. Взятое в работу считаем спокойным цветом, иначе цифра
   рядом с названием перестаёт значить «иди сюда». */
/* Меню статусов.
 *
 * Стоит над ярлыками компаний и выглядит иначе: это два разных вопроса —
 * «чей заказ» и «на каком он шаге», и одинаковые кнопки заставляли бы
 * каждый раз читать, чтобы понять, что переключаешь. */
.pick-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper);
}
.pick-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 14px;
}
.pick-tab:hover { color: inherit; background: var(--surface); }
.pick-tab--active {
  background: var(--surface); color: inherit; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.pick-tab__count { font-size: 12px; font-weight: 700; color: var(--muted); }
.pick-tab--active .pick-tab__count { color: var(--accent); }

/* Метка площадки. Цвета — фирменные, чтобы различать их не читая:
   Ozon синий, Wildberries фиолетовый. */
.mp-mark {
  display: inline-flex; align-items: center; margin-right: 8px;
  padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff; vertical-align: middle;
}
/* Колонка очереди узкая — от 178px. Бейджи в шапке карточки отжимали номер
   заказа, и он ломался пополам: «WB-» на одной строке, цифры на другой.
   Номер здесь главное, поэтому шапка переносится, а не сжимает его. */
.pick-card .card__head { flex-wrap: wrap; gap: 8px; }
.pick-card .card__head > div:first-child { flex: 1 1 100%; }

.mp-mark--ozon { background: #005bff; }
.mp-mark--wb { background: #7b1fa2; }
.mp-mark--yandex { background: #fc3f1d; }
.mp-mark--manual { background: var(--muted); }

.pick-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: inherit; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1;
  transition: border-color .15s, background .15s;
}
.pick-tag:hover { border-color: var(--line-strong); }
.pick-tag--active { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pick-tag__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pick-tag__work {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--paper); color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pick-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.pick-card--work { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.pick-lines { display: grid; gap: 4px; }
.pick-line { display: flex; gap: 8px; font-size: 14px; }
.pick-line__qty { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; }

.pick-item {
  display: grid; gap: 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-warm);
}
.pick-item--done { border-color: var(--ok); background: var(--ok-soft); }
.pick-item__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pick-item__name { font-weight: 600; }
/* Фотография товара в задании. Небольшая и с краю: сборщик сверяет по ней
   банку, а не разглядывает — место на экране нужнее под коды. */
/* Отсканированный код: целиком, с переносом и кнопкой снять рядом.
   Сверять его глазами с банкой — единственный способ поймать чужую банку
   до отгрузки, и огрызок в восемнадцать знаков для этого не годится. */
.pick-mark { display: flex; align-items: flex-start; gap: 8px; word-break: break-all;
  background: var(--surface-2, #f4f4f5); border-radius: 6px; padding: 6px 8px; }
.pick-mark button { border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 16px; line-height: 1; padding: 0 2px; }

.pick-item__photo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
  background: var(--surface-2, #f4f4f5); flex: 0 0 auto; }
.pick-item__count { text-align: right; white-space: nowrap; }
.pick-item__count strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.pick-item__count span { display: block; font-size: 11px; color: var(--muted); }
.pick-item__count--done strong { color: var(--ok); }

/* Поле сканера. Крупный моноширинный шрифт: код читают глазами, когда
   сканер не сработал и его набирают руками. */
.pick-scan {
  width: 100%; padding: 12px 14px; font-size: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: inherit;
}
.pick-scan:focus { outline: none; border-color: var(--accent); border-style: solid; }

.button--big { padding: 13px 22px; font-size: 16px; }

/* Сгенерированная витринная картинка тары: ведёт себя как фотография —
   вписывается в отведённое место и не растягивается. */
.vessel-art { max-width: 100%; height: auto; display: block; }

/* Изображения в описании для маркетплейса: порядок виден, каждое кликабельно. */
.mp-images { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.mp-image { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.mp-image img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.mp-stop summary { cursor: pointer; }
/* Выбор товара из каталога площадки: список прокручивается внутри окна,
   потому что позиций бывают тысячи, а окно должно оставаться окном. */
.sku-picker {
  /* Высота от экрана, а не 260 фиксированных пикселей: в списке сто
     позиций, и в окошко на четыре строки их листать невозможно. */
  display: grid; gap: 4px; max-height: min(46vh, 420px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  background: var(--surface);
}
.sku-option {
  /* По верху, а не по центру: название переносится на две-три строки, и
     при центрировании картинка уезжает к их середине. */
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer;
}
.sku-option:hover { background: var(--paper); }
.sku-option > input { margin-top: 9px; flex: none; }
.sku-option img, .sku-option__blank {
  width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
  background: var(--paper); flex: none;
}
.sku-option__body { display: grid; gap: 1px; min-width: 0; flex: 1; }
/* Название целиком, в несколько строк.
   Здесь стояло многоточие в одну строку, и товары вида «Артикулат
   восстанавливающий крем … 1 шт» отличались друг от друга ровно в
   отрезанном хвосте: на экране пять одинаковых строк, выбрать нельзя. */
.sku-option__name { line-height: 1.35; overflow-wrap: anywhere; }
.sku-option__body .mono {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Карточка товара с площадки в модерации: то, что оператор и проверяет. */
.mp-card {
  display: grid; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-warm);
}
.mp-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-card__link { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mp-card__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
}
.mp-card__shots { display: flex; gap: 6px; flex-wrap: wrap; max-width: 220px; }
.mp-card__shots img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
}
@media (max-width: 720px) {
  .mp-card__body { grid-template-columns: 1fr; }
  .mp-card__link { margin-left: 0; }
}

/* Уже привязанный артикул выбрать нельзя: два товара на один артикул
   означают задвоенные заказы. */
.sku-option--linked { opacity: .5; cursor: default; }

/* Артикул площадки на карточке товара: следующий шаг, а не настройка. */
.listing-empty {
  display: grid; gap: 8px; width: 100%;
  padding: 10px 12px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: var(--paper);
}
.listing-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); width: 100%; flex-wrap: wrap;
}

/* Каталог без правой панели: сетка получает всю ширину, и плиток на экран
   помещается больше. */
.catalog-grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Плитка целиком кликабельна: человек метит в картинку, а не в кнопку. */
.product-card--pick { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.product-card--pick:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.product-card--pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Подробности товара окном: фотография слева, данные справа. На узком
   экране — друг под другом, фотография первой. */
.pick-detail { display: grid; gap: 18px; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.pick-detail__visual img {
  width: 100%; border-radius: var(--radius); display: block; background: var(--paper);
}
.pick-detail__stub {
  display: grid; place-items: center; aspect-ratio: 3 / 4;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper);
}
.pick-detail__body { min-width: 0; }
@media (max-width: 720px) { .pick-detail { grid-template-columns: 1fr; } }

/* Цена — первое, что спрашивают: крупно и на подложке. */
.ready-pick__price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft);
}
.ready-pick__price span {
  font-family: Unbounded, Onest, sans-serif; font-size: 20px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ready-pick__price small { font-size: 11px; color: var(--muted); }

/* Отметки готовности на плитке товара витрины: видно одним взглядом,
   чего в карточке не хватает, без чтения списка. */
.goods-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.goods-mark {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--paper); color: var(--muted); white-space: nowrap;
}
.goods-mark--ok { background: var(--ok-soft); color: var(--ok); font-weight: 600; }

/* Незаконченная карточка помечается рамкой: менеджер приходит сюда за
   незавершённым, и оно должно бросаться в глаза. */
.product-card--draft { border-color: var(--warn); }

/* Изображение карточки товара: миниатюра, подпись и порядок в строке. */
.good-image {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.good-image__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--paper); font-size: 12px; font-weight: 700;
}
.good-image img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.good-image__body { display: grid; gap: 3px; flex: 1; min-width: 0; }

/* Журнал правок реквизитов: свёрнут по умолчанию — нужен редко, но нужен. */
.req-log summary { cursor: pointer; color: var(--muted); }
.req-log__row { padding: 8px 12px; background: var(--paper); border-radius: var(--radius); }

/* Свёрнутое действие: нужно немногим, а места занимает как основное. */
.disclosure summary { cursor: pointer; color: var(--muted); }

/* Значение, которое нельзя править: показываем как факт, а не как
   заблокированное поле — серое поле ввода выглядит поломкой. */
.readonly-value {
  padding: 9px 12px; border-radius: var(--radius);
  background: var(--paper); font-weight: 600;
}

/* Приложенный документ: подтверждение вместо поля выбора. */
.file-attached {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--ok); border-radius: var(--radius);
  background: var(--ok-soft);
}
.file-attached__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 12px; flex: none;
}
.file-attached a { font-weight: 600; }
.file-attached .button { margin-left: auto; cursor: pointer; }

/* Поле, скрытое от глаз, но живое для клавиатуры и для label. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Собранное сегодня: строки, а не карточки — работа по ним уже сделана. */
.pick-done { display: grid; gap: 6px; }
/* Собранное сегодня: строка-отчёт, пока работа по ней закончена. */
.pick-done__row {
  display: grid; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.pick-done__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
/* Непромаркированная коробка — не отчёт, а задача: выделяем и ставим выше. */
.pick-done__row--todo { border-color: var(--accent); background: var(--accent-soft); }
.pick-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Отменённое из-под рук: коробка уже собрана наполовину, и это не
   очередная строка списка, а указание её разобрать. */
.pick-cancelled { display: grid; gap: 8px; border-color: #f2cdc8; background: var(--accent-soft); }

/* Чужая работа — приглушённо: видеть её надо, а брать не надо. */
.pick-others { opacity: .62; }
.pick-others:hover { opacity: 1; }

/* Что рассказала площадка о заказе. Плитка фактов под воронкой: читают её
   глазами по диагонали, поэтому подпись мелкая и тусклая, а значение —
   обычным текстом. */
.market-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.market-facts__one { display: flex; flex-direction: column; gap: 1px; }
.market-facts__one .small { font-variant-numeric: tabular-nums; }

/* Исходный ответ площадки. Длинный, поэтому со своей прокруткой — иначе
   диалог растягивается на весь экран и кнопка «Закрыть» уезжает. */
.raw-payload {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 12px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  tab-size: 2;
}

/* Партия на карточке позиции.
   Сборщик читает её с расстояния вытянутой руки, поэтому номер лота крупнее
   срока: сначала «какую коробку взять», потом «не просрочена ли». */
.pick-lots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pick-lot {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-warm); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pick-lot b { font-size: 14px; }
/* Просроченная партия — не предупреждение, а стоп: такую банку в коробку
   класть нельзя. */
.pick-lot--bad {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-dark);
}

/* Цена за банку на плитке каталога.
   Продавец пролистывает витрину глазами и сравнивает именно её, поэтому
   цифра крупная, а слово «за банку» — мелким рядом, а не над ней. */
.product-card__price {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 17px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-card__price small { font-size: 11px; font-weight: 400; color: var(--muted); }

/* Из чего сложилась цена.
   Продавец сравнивает цену товара с чужими, а платит итог — поэтому обе
   строки видны, а итог отделён чертой и набран крупнее. Спорить потом
   не о чем: всё было на экране. */
.price-breakdown {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-warm); padding: 4px 14px; margin: 4px 0;
}
.price-breakdown__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 14px;
}
.price-breakdown__row + .price-breakdown__row { border-top: 1px solid var(--line); }
.price-breakdown__row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-breakdown__row small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.price-breakdown__row--total { border-top: 2px solid var(--line-strong); }
.price-breakdown__row--total b { font-size: 20px; }

/* Незаполненный реквизит.
   Красим рамку и подпись, а не заливаем поле: заливка мешает читать то,
   что в него набирают, а рамку видно и краем глаза. Подсказка снизу
   отвечает на вопрос «а зачем оно нужно» — иначе поле выглядит придиркой. */
.field--gap > input,
.field--gap > select {
  border-color: var(--accent);
  /* background-color: шорткат стёр бы стрелку списка — она background-image,
     и незаполненный реквизит остался бы без неё. */
  background-color: var(--accent-soft);
}
.field--gap > label { color: var(--accent-dark); font-weight: 600; }
.field--gap > label::after { content: " ·"; }
.field__hint--gap { color: var(--accent-dark); }

/* Подсказка у поля.
   Значок рядом с подписью, объяснение — под ним по нажатию. Наведение не
   годится: на складе и на телефоне его нет, а три строки в всплывающую
   подсказку не помещаются. */
.field__label { display: inline-flex; align-items: center; gap: 6px; }
.field__label > label { margin: 0; }

/* Обёртка подсказки.
 *
 * Здесь и был перекос, который я сперва искал не там. Обёртка была
 * обычным блоком, значок внутри — строчным элементом, и он вставал на
 * строку с межстрочным интервалом заголовка: 16 пикселей значка на
 * строке в 27,6 — по базовой линии, то есть заметно ниже середины.
 * Выравнивание самого заголовка это не лечило: там всё было честно
 * отцентровано, только центровался объект, внутри которого значок уже
 * сидел криво.
 *
 * Флекс убирает строку целиком: значок центрируется в обёртке, обёртка —
 * в заголовке, и промежуточной строки, где всё съезжало, больше нет. */
.hint { display: inline-flex; align-items: center; position: relative; }
/* Значок подсказки. Он объясняет соседний текст, а не соревнуется с ним,
   поэтому мелкий и серый. Размер один на весь кабинет: у подписи поля и
   у заголовка страницы он должен читаться как один и тот же предмет. */
.hint__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--line); color: var(--muted);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; user-select: none; list-style: none;
}
.hint__mark::-webkit-details-marker { display: none; }
.hint__mark:hover, .hint[open] .hint__mark { background: var(--accent); color: #fff; }

/* Объяснение вынимаем из потока: иначе открытая подсказка раздвигает форму
   и поля прыгают под курсором. */
.hint__body {
  position: absolute; z-index: 60; top: 22px; left: -8px;
  width: max(260px, 22vw); max-width: min(380px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.5; font-weight: 400; color: var(--ink-soft);
  white-space: normal; text-align: left;
}
.hint__body b { color: var(--ink); }
.hint__body a { color: var(--accent-dark); }
.hint__body p { margin: 0 0 7px; }
.hint__body p:last-child { margin-bottom: 0; }
.hint__body ol, .hint__body ul { margin: 0 0 7px; padding-left: 18px; }
.hint__body li { margin-bottom: 4px; }
/* У правого края формы подсказка уезжала за экран. */
.hint--left .hint__body { left: auto; right: -8px; }

/* Привязанные артикулы на карточке товара.
   Заголовок отвечает на вопрос «какой артикул привязан», не открываясь:
   у товара с одной площадкой это одна строка, разворачивать её незачем.
   Внутри — управление: перечитать карточку, отвязать, добавить площадку. */
.sku-listings { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.sku-listings > summary {
  display: flex; flex-direction: column; gap: 1px;
  cursor: pointer; list-style: none; padding: 2px 0;
}
.sku-listings > summary::-webkit-details-marker { display: none; }
.sku-listings > summary::after {
  content: "показать ещё"; font-size: 11px; color: var(--muted);
}
.sku-listings[open] > summary::after { content: "свернуть"; }
.sku-listings > summary:hover { color: var(--accent-dark); }

/* Кабинет активен.
   Пройденный путь занимает пол-экрана и не отвечает ни на один вопрос —
   в собранном виде от него остаётся одна строка. Развернуть можно: иногда
   надо свериться, что именно считается настроенным. */
.ready-line {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 16px;
}
.ready-line > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.ready-line > summary::-webkit-details-marker { display: none; }
.ready-line > summary::after {
  content: "что настроено"; margin-left: auto;
  font-size: 11px; color: var(--muted);
}
.ready-line[open] > summary::after { content: "свернуть"; }
.ready-line > summary:hover::after { color: var(--accent-dark); }

/* «Собрать свой» — последней карточкой каталога.
   Не отдельным экраном перед товарами: на вопрос «готовый или свой» человек
   отвечает, только увидев ассортимент. Карточка выглядит как остальные, но
   без фотографии — товара ещё нет. */
.product-card--build { border-style: dashed; }
.product-card--build:hover { border-color: var(--accent); }
.product-card__visual--build {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-warm); min-height: 148px;
}
.build-card__plus {
  font-size: 44px; font-weight: 300; line-height: 1;
  color: var(--line-strong);
}
.product-card--build:hover .build-card__plus { color: var(--accent); }

/* Значок пояснения в заголовке раздела.
   Заголовок набран крупно, а значок должен остаться значком — поэтому
   сбрасываем наследованный размер и приподнимаем к первой строке. */
/* В заголовке значок ставим флексом, а не `vertical-align: middle`.
   Ключевое слово middle считает середину от высоты строчных букв, а в
   заголовке из прописных она заметно ниже середины самих букв — значок
   и висел низко. Флекс центрирует по строке, и считать ничего не надо. */
.page-head h1 { display: flex; align-items: center; gap: 9px; }
.page-head h1 .hint__mark { width: 16px; height: 16px; font-size: 10px; }
.page-head h1 .hint__body { font-family: Onest, system-ui, sans-serif; letter-spacing: 0; }

/* ---------- карточка своего товара ---------- */

/* Состояние — поверх снимка, справа сверху.
   Внизу оно спорило с тиражом: две разные вещи на одной строке, и глаз не
   знал, что из них главное. Сверху оно читается за долю секунды и не
   мешает тому, ради чего на карточку смотрят. */
.product-card__state { position: absolute; top: 10px; right: 10px; z-index: 1; }
.product-card__state .badge { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* Номера — свидетельство и артикулы площадок.
   Их читают редко, но когда читают — сверяют посимвольно. Поэтому
   моноширинный шрифт и своя колонка, но приглушённая подпись слева:
   строка не должна перебивать название товара. */
.sku-facts { display: grid; gap: 5px; margin: 2px 0 0; padding-top: 10px;
  border-top: 1px solid var(--line); }
/* Подпись сверху, значение под ней во всю ширину карточки.
   Стояли в строку, и номеру свидетельства оставалась половина: он
   переносился по точкам, а перенесённый номер — это уже не номер, его
   нельзя ни прочесть глазами, ни выделить двойным щелчком. */
.sku-facts__row { display: grid; gap: 2px; }
.sku-facts__row dt { font-size: 11px; color: var(--muted); }
.sku-facts__row dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.sku-facts__row dd.mono { font-size: 12px; letter-spacing: -.01em; }

/* Управление привязкой — свёрнутой строкой.
   Сами артикулы стоят выше, в фактах: их надо видеть, а не разворачивать.
   Здесь остаётся действие, и выглядеть оно должно как ссылка, а не как
   ещё один блок. */
.sku-listings { margin-top: 10px; border-top: 0; padding-top: 0; }
.sku-listings > summary {
  display: inline; cursor: pointer; list-style: none;
  font-size: 12px; color: var(--muted); text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.sku-listings > summary::-webkit-details-marker { display: none; }
.sku-listings > summary::after { content: none; }
.sku-listings > summary:hover { color: var(--accent-dark); }
.sku-listings[open] > summary { color: var(--accent-dark); }

/* Низ карточки товара: артикул площадки и кнопки.
   Здесь был счётчик тиража — число, которое продавец вводил сам и которое
   ни на что не влияло: остаток у площадки витринный, заказы приходят
   независимо, отгрузку держит весь баланс. */
.product-card--mine .product-card__foot {
  flex-direction: column; align-items: stretch; gap: 10px;
  border-top: 1px solid var(--line); margin: 0 16px; padding: 14px 0 16px;
}

/* ---------- справка ---------- */

.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav .chip { text-decoration: none; }

/* Список свёрнутых ответов.
   Человек приходит с вопросом, а не читать: открытым должно быть то, что
   он выбрал, а не всё сразу. */
.faq-list { display: grid; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; }
.faq-item > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
  content: "+"; flex: none;
  width: 18px; text-align: center;
  font-size: 16px; font-weight: 400; color: var(--muted);
}
.faq-item[open] > summary::before { content: "−"; color: var(--accent); }
.faq-item > summary:hover { color: var(--accent-dark); }

.faq-item__body {
  padding: 0 0 16px 28px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 76ch;
}
.faq-item__body p { margin: 0 0 10px; }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__body ul, .faq-item__body ol { margin: 0 0 10px; padding-left: 20px; }
.faq-item__body li { margin-bottom: 6px; }
.faq-item__body b { color: var(--ink); }

/* Ссылка внутрь кабинета. Ответ, который кончается словами «зайдите в
   раздел», заставляет искать этот раздел глазами — здесь он в одном
   нажатии. */
.faq__link {
  display: inline-block; margin-top: 2px;
  color: var(--accent-dark); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.faq__link:hover { color: var(--accent); }

/* Доступы, которые надо отметить при создании ключа.
   Против каждого — что перестанет работать без него. Без этой строки
   список читается как «дайте нам побольше», и продавец справедливо
   жмётся: он выдаёт ключ к своему магазину. */
.scope-list { display: grid; gap: 10px; margin: 6px 0 2px; }
.scope {
  padding: 10px 12px; border-left: 3px solid var(--accent);
  background: var(--surface-warm); border-radius: 0 var(--radius) var(--radius) 0;
}
.scope__name { font-weight: 700; font-size: 13.5px; }
/* Описание роли из чужого кабинета, дословно. Курсив и приглушение —
   чтобы читалось как цитата, а не как ещё одно наше пояснение. */
.scope__hint { font-style: italic; margin-top: 2px; }
.scope__why { color: var(--ink-soft); margin-top: 2px; }
.scope__breaks { color: var(--accent-dark); margin-top: 4px; }
/* «Канал подключён» над списком доступов. Зелёная, а не красная: это
   не предупреждение, а разрешение не читать дальше. */
.scope-done {
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--ok-soft); color: var(--ok); border: 1px solid #c5e4d2;
}

/* Наши площадки для связи — внизу меню.
   Не работа, а «где нас найти»: ищут их редко и намеренно, поэтому
   приглушённо и текстом. Значки без подписи пришлось бы угадывать. */
.sidebar-social { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.sidebar-social__links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px; }

/* Значок площадки.
 *
 * В покое приглушённый — это не работа, а «где нас найти», и подсвечивать
 * его наравне с разделами незачем. При наведении зажигается фирменным
 * цветом: так человек убеждается, что попал в нужный, не читая подпись.
 *
 * Название живёт в title и aria-label: видящий узнаёт значок, читающий
 * экраном слышит слово. Подпись под каждым значком отняла бы всю ширину
 * колонки ради того, что и так понятно. */
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--muted); background: var(--surface);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.social-icon svg { width: 15px; height: 15px; display: block; }
.social-icon__letter {
  font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1;
}
.social-icon:hover {
  color: #fff;
  background: var(--brand, var(--accent));
  border-color: var(--brand, var(--accent));
  transform: translateY(-1px);
}
.social-icon:focus-visible {
  outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px;
}

/* Плашка площадки в инструкции — меньше, чем на карточке канала: здесь она
   опознавательный знак у заголовка, а не главный объект. */
.mp-logo--small { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }

/* Значок, который пришёл картинкой, а не контуром.
   Перекрасить его нельзя, поэтому подсветка своя: белый круг под чёрным
   знаком — ровно так этот знак и выглядит у себя дома. */
.social-icon--image img { width: 18px; height: 18px; display: block; border-radius: 4px; }
.social-icon--image:hover { background: #fff; border-color: var(--accent); }

/* ---------- реферальная программа ---------- */

/* Ссылку копируют кнопкой, а не выделяют мышью: она длинная, и отправить
   обрубок значит потерять реферала. Поле остаётся видимым — человек хочет
   видеть, что именно копирует. */
.ref-link { display: flex; gap: 10px; flex-wrap: wrap; }
.ref-link__field {
  flex: 1 1 260px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-warm); color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.ref-link__field:focus { border-color: var(--accent); outline: none; }

/* Полоса до порога. Она отвечает на «далеко ли ещё» быстрее числа —
   поэтому стоит рядом с ним, а не вместо. */
.ref-bar {
  height: 8px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.ref-bar__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width .3s ease;
}

/* ---------- материалы по офферу ---------- */

/* Ссылка на карточке каталога. Сама карточка — кнопка, поэтому ссылка
   должна выглядеть ссылкой, а не ещё одной кнопкой: два одинаковых
   предмета на одной карточке заставляют выбирать, а выбирать тут не из
   чего — они делают разное. */
.mat-link {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.mat-link:hover { text-decoration-thickness: 2px; }
.mat-link--none { color: var(--muted); text-decoration: none; font-weight: 400; }

.mat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mat-card {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper);
}
.mat-card__title { font-weight: 700; margin-bottom: 6px; }
.mat-card__what { color: var(--ink-soft); line-height: 1.45; }

/* Список папок: строка целиком — ссылка, чтобы попадать не в текст, а в
   строку. Их двадцать три, и мимо промахиваются. */
.mat-list { display: grid; gap: 2px; }
.mat-list__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; color: inherit; text-decoration: none;
  transition: background .12s ease;
}
.mat-list__row:hover { background: var(--paper); }
.mat-list__name { font-weight: 600; }
.mat-list__go { color: var(--accent); white-space: nowrap; }

/* Запреты. Пара «нельзя — как можно» стоит рядом: список одних запретов
   оставляет человека без текста, а ему надо что-то написать сегодня. */
.rules { display: grid; gap: 14px; }
.rule { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.rule__head { font-weight: 700; margin-bottom: 10px; line-height: 1.35; }
.rule__bad, .rule__good { display: flex; gap: 8px; align-items: flex-start; }
.rule__bad { margin-bottom: 8px; }
.rule__mark { flex: none; width: 16px; font-weight: 700; line-height: 1.5; }
.rule__mark--bad { color: var(--accent); }
.rule__mark--good { color: var(--ok); }
.rule__words { display: flex; flex-wrap: wrap; gap: 6px; }
.word {
  font-size: 12px; padding: 2px 8px; border-radius: 20px; line-height: 1.5;
}
.word--bad {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); text-decoration: line-through;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.page-head--tight { margin-bottom: 0; }

/* Ссылка на запреты — рядом с материалами, но другим смыслом: одна ведёт
   за файлами, вторая предупреждает. Красный тут занят действием, поэтому
   предупреждение берёт свой цвет — иначе две ссылки читаются как одна
   двойная. */
.mat-link--warn { display: block; margin-top: 4px; color: var(--warn); }
/* Раздел, к которому приводит якорь: подсветки фокуса не нужно, но и
   рамки браузера по умолчанию тоже — прокрутка уже показала, куда. */
#forbidden:focus { outline: none; }

/* Полное описание в карточке товара.
   Две-пять тысяч знаков: без своей области прокрутки карточка вытянулась
   бы на три экрана, и цена с документами уехали бы за нижний край. */
.pick-detail__text {
  max-height: 230px; overflow-y: auto; padding-right: 8px;
  line-height: 1.55; color: var(--ink-soft);
  border-left: 2px solid var(--line); padding-left: 12px;
}
.pick-detail__text p { margin: 0 0 10px; }
.pick-detail__text p:last-child { margin-bottom: 0; }

/* ---------- полоса эмуляции ---------- */

/* Прилипшая, а не в потоке: обычная плашка уезжала вверх при первой
   прокрутке, и дальше оператор забывал, что он в чужом кабинете. */
.viewing-bar {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--ink); color: #fff;
  font-size: 13px; line-height: 1.35;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
/* Точка-индикатор: тревожная нота без крика. */
.viewing-bar__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 30%, transparent);
}
.viewing-bar__text { flex: 1 1 auto; min-width: 0; }
.viewing-bar__text strong { font-weight: 700; }
.viewing-bar__note {
  display: block; font-size: 11.5px; opacity: .72;
}
.viewing-bar__actions { flex: none; }
.viewing-bar .button--dark {
  background: #fff; border-color: #fff; color: var(--ink);
}
.viewing-bar .button--dark:hover { background: var(--paper); border-color: var(--paper); }

/* Шапка кабинета прилипает под полосой, а не под верхом окна. */
.app-topbar--viewing { top: 36px; }

/* ---------- калькулятор прибыли ---------- */
.calc-tabs { display: flex; gap: 6px; }
/* Ответ — первым и крупно: ради него страницу и открывают. */
.calc-answer {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: stretch;
  padding: 22px 24px; border-radius: 16px; background: var(--ink); color: #fff;
}
.calc-answer__label { display: block; font-size: 12px; opacity: .7; letter-spacing: .04em; text-transform: uppercase; }
.calc-answer__value { display: block; font-family: Unbounded, Onest, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.calc-answer__value.text-danger { color: #ff8a7a; }
.calc-answer__sub { display: block; font-size: 13px; opacity: .78; }
.calc-answer__side { display: grid; gap: 10px; align-content: center; }
.calc-answer .metric__label { color: rgba(255,255,255,.7); }
.calc-answer .metric__value { color: #fff; font-size: 22px; }
.calc-answer .metric__value.text-danger { color: #ff8a7a; }
.calc-answer .metric__hint { color: rgba(255,255,255,.65); }

.calc-grid { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; align-items: start; }
.calc-form { position: sticky; top: 72px; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-field { display: grid; gap: 5px; min-width: 0; }
.calc-field__label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.calc-field__control { display: flex; align-items: center; gap: 6px; }
.calc-field__control input, .calc-field__control select {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  /* background-color: шорткат стёр бы стрелку списка — она background-image. */
  background-color: var(--surface); font: inherit; font-variant-numeric: tabular-nums;
}
.calc-field__control input:focus, .calc-field__control select:focus { border-color: var(--accent); outline: none; }
.calc-field__unit { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.calc-field--check { grid-template-columns: auto 1fr; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; font-size: 13px; }
.calc-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.calc-target { font-family: Unbounded, Onest, sans-serif; font-size: 20px; font-weight: 700; padding: 6px 0; font-variant-numeric: tabular-nums; }

.calc-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.calc-table__group td { padding-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 0; }
.calc-table__sum td { font-weight: 600; background: var(--paper); }
.calc-table__total td { font-weight: 700; font-size: 15px; border-bottom: 0; background: var(--paper); }

/* Сравнение схем: две колонки, классика — приглушённая, наша — акцентная.
   Это объяснение, за что нам платят, поэтому визуально «мы» побеждаем
   осознанно, а не случайно. */
.calc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-compare__col { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); }
.calc-compare__col--classic { background: var(--paper); color: var(--ink-soft); }
.calc-compare__col--ours { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
/* Надколонник и заголовок.
   Левую колонку читали как рассказ о нас: она первая, а заголовок в ней
   звучал как название схемы, а не как «так у других». Поэтому над
   заголовком стоит короткое «если...», а сам заголовок стал крупнее и
   получил цвет своей стороны. */
.calc-compare__eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.calc-compare__head {
  font-weight: 700; font-size: 17px; line-height: 1.2; margin-bottom: 10px;
}
.calc-compare__col--ours .calc-compare__eyebrow { color: var(--accent); }
.calc-compare__col--ours .calc-compare__head { color: var(--accent); }
.calc-compare__big { font-family: Unbounded, Onest, sans-serif; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-compare__col--classic .calc-compare__big { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.calc-compare__list { margin: 12px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; display: grid; gap: 6px; }

@media (max-width: 900px) {
  .calc-grid, .calc-compare, .calc-answer { grid-template-columns: 1fr; }
  .calc-form { position: static; }
  .calc-answer__value { font-size: 32px; }
}

/* Поддержка человеком — под меню.
   Не иконка среди прочих: сюда идут, когда сами не разобрались, и строка
   должна читаться сразу, а не искаться. */
.nav-support { margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.nav-support__link {
  display: flex; align-items: center; gap: 10px; margin: 6px 8px 0; padding: 9px 10px;
  border-radius: 10px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.nav-support__link:hover { border-color: var(--accent); background: var(--surface); }
.nav-support__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #2aabee; color: #fff;
}
.nav-support__text { display: grid; gap: 1px; min-width: 0; }
.nav-support__text strong { font-size: 13px; font-weight: 600; }
.nav-support__text small { font-size: 11.5px; color: var(--muted); }

/* Три показателя рядом с ответом: месяц, сутки, баланс. */
.calc-answer__side { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .calc-answer { grid-template-columns: 1.1fr 1.2fr; } }

/* ---------- выбор площадки в калькуляторе ---------- */

/* Главный переключатель страницы: у нашего товара разница между
   площадками больше, чем от любой другой настройки. Поэтому две крупные
   кнопки в цветах самих площадок, а не пара серых фишек в углу. */
.mp-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-switch__btn {
  --mp: var(--muted);
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: 16px 20px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mp-switch__btn--wb { --mp: #cb11ab; }
.mp-switch__btn--ozon { --mp: #005bff; }
.mp-switch__btn:hover { border-color: var(--mp); }
.mp-switch__btn:focus-visible { outline: 2px solid var(--mp); outline-offset: 2px; }
/* Выбранная залита цветом площадки: так видно с любого места экрана. */
.mp-switch__btn.is-active { background: var(--mp); border-color: var(--mp); color: #fff; }
.mp-switch__name {
  font-family: Unbounded, Onest, sans-serif; font-size: 19px; font-weight: 700; line-height: 1.15;
}
.mp-switch__note { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-switch__btn.is-active .mp-switch__note { color: rgba(255, 255, 255, .85); }
@media (max-width: 700px) { .mp-switch { grid-template-columns: 1fr; } }

/* Фора по времени — главный довод сравнения схем, поэтому крупно и первым. */
.headstart__lead { display: grid; gap: 4px; padding-bottom: 4px; }
.headstart__label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.headstart__value {
  font-family: Unbounded, Onest, sans-serif; font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.headstart__sub { font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 70ch; }

/* Полная надпись для входа, компактный знак рядом с названием компании в кабинете. */
.brand__icon { display: block; flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; border-radius: 9px; }
.brand__wordmark { display: block; width: 210px; height: 40px; object-fit: cover; mix-blend-mode: multiply; }
.brand__text .brand__wordmark + small { margin-top: 4px; }
@media (max-width: 480px) { .brand__wordmark { width: 176px; height: 34px; } }