/* Кабинет b2b.auritech.ru — оптовый каталог, заказы, запросы цен. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6ea;
  --text: #16191d;
  --muted: #6b7280;
  --accent: #1f6feb;
  --accent-soft: #e8f0fe;
  --danger: #c8342b;
  --ok: #17803d;
  --warn: #9a5b00;
  --warn-soft: #fdf3e0;
  /* Статусы заказа «Собран» и «Отгружен» — свои цвета, чтобы шаги сборки различались */
  --teal: #0f766e;
  --violet: #6d3fc0;
  /* Метки состояния уценки — у каждой свой цвет, без зелёного (web/app.js, ConditionBadges) */
  --cond-amber: #9a5b00; --cond-orange: #c2410c; --cond-brown: #8a5a2b; --cond-cyan: #0e7490; --cond-purple: #7e22ce;
  --cond-blue: #1d4ed8; --cond-indigo: #4338ca; --cond-slate: #475569; --cond-red: #c8342b; --cond-pink: #be185d;
  --cond-sky: #0369a1; --cond-crimson: #c4003c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  /* Родные части полей — значок календаря, всплывающий календарь и часы,
     список select — браузер рисует сам и по этой подсказке берёт цвета темы. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #14171a; --surface: #1c2024; --border: #2c3238; --text: #e8eaed;
    --muted: #9aa4b2; --accent: #5b9dff; --accent-soft: #1b2a44;
    --danger: #ff7b72; --ok: #56d364; --warn: #e3b341; --warn-soft: #2b2410;
    --teal: #3fc9b4; --violet: #b69cf5;
    --cond-amber: #e3b341; --cond-orange: #fb923c; --cond-brown: #d6a26d; --cond-cyan: #22d3ee; --cond-purple: #c084fc;
    --cond-blue: #60a5fa; --cond-indigo: #a5b4fc; --cond-slate: #a3afc2; --cond-red: #ff7b72; --cond-pink: #f472b6;
    --cond-sky: #7dd3fc; --cond-crimson: #ff3d7f;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
/* Скроллбары всех прокручиваемых блоков — и вертикальные у списков, и
   горизонтальные у таблиц — в цветах сайта, а не системные белые. Правило
   общее нарочно: новый прокручиваемый блок не должен помнить о нём сам. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* --- Каркас --- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.head {
  position: sticky; top: 0; z-index: 20; background: var(--surface);
  border-bottom: 1px solid var(--border); padding: 10px 16px;
  display: flex; gap: 12px; align-items: center;
}
/* На узком экране шапка в два этажа: сверху логотип и имя, снизу — вся
   навигация одной строкой (лишнее по-прежнему уходит в «⋯»). */
@media (max-width: 800px) {
  .head { flex-wrap: wrap; row-gap: 6px; }
  .head .nav { flex: 1 1 100%; order: 10; }
  .head .who { margin-left: auto; }
}
.brand { font-weight: 650; letter-spacing: -.01em; margin-right: 4px; }
.brand span { color: var(--muted); font-weight: 400; }
/* Меню — строго одна строка: занимает всё место между логотипом и именем,
   не переносится; кто не влез — уходит в «⋯» (см. OverflowNav в app.js). */
.nav { display: flex; gap: 4px; flex: 1 1 0; min-width: 0; position: relative; }
.nav button {
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 9px; cursor: pointer; color: var(--muted); white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 1180px) { .nav button { padding: 6px 7px; font-size: 13.5px; } }
.nav button:hover { background: var(--bg); color: var(--text); }
.nav button.on { background: var(--accent-soft); color: var(--accent); font-weight: 550; }
.nav .count {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  background: var(--accent); color: #fff; border-radius: 9px;
  font-size: 12px; line-height: 18px; text-align: center; font-weight: 600;
}
.nav .more { position: relative; flex-shrink: 0; }
.nav .morebtn { font-weight: 700; min-width: 34px; }
/* Невидимая линейка для измерения: все кнопки натуральной ширины.
   width: max-content, чтобы контейнер их не ужимал; fixed и увод за верхний
   край — чтобы её ширина не расширяла прокрутку страницы: absolute-линейка
   раздувала документ, и мобильный Safari отзумливал весь кабинет. */
.nav.measure {
  position: fixed; top: -200px; left: 0; visibility: hidden; pointer-events: none;
  flex: none; width: max-content; min-width: auto;
}
/* Правым краем к кнопке: слева от «⋯» всегда есть место (там вкладки),
   а справа на узком экране может не быть. */
.navmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 190px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 2px;
}
.navmenu button { text-align: left; }
.spacer { flex: 1; }
.who { color: var(--muted); font-size: 13px; text-align: right; line-height: 1.35; }
.who b { color: var(--text); font-weight: 550; display: block; }

.main { flex: 1; padding: 20px 16px 60px; max-width: 1240px; width: 100%; margin: 0 auto; }
/* Две ступени на весь кабинет: 21 px — заголовок страницы и раздела, 15 px —
   подзаголовок внутри карточки. Раздел от страницы отличается отступом
   сверху, а не размером шрифта: «Менеджеры» на странице клиентов — такой же
   заголовок, как «Клиенты». Размер по умолчанию от браузера не берём нигде,
   иначе h3 оказывается крупнее h2. */
h1, h2 { font-size: 21px; letter-spacing: -.015em; }
h1 { margin: 0 0 4px; }
h2 { margin: 26px 0 10px; }
h3 { font-size: 15px; margin: 22px 0 8px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

/* --- Элементы --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Скруглённый контейнер обязан обрезать содержимое: иначе квадратный угол
   шапки, строки или таблицы вылезает за круглый угол рамки. Правило общее
   нарочно — новый контейнер не должен вспоминать о нём отдельно; заводя
   блок со своим border-radius, добавляйте его сюда.

   Обрезка нужна по ОБЕИМ осям: при overflow-x/y по одной оси браузер углы
   не скругляет вовсе. Поэтому прокрутка живёт на внутреннем элементе
   (.tablewrap, .modal .body, .people.scroll), а не на самом контейнере. */
.card, .modal, .navmenu, .items, .freshkey, .fincard, .toast,
.brandcard > button, .bubble, .person { overflow: hidden; }
.btn {
  background: var(--accent); color: #fff; border: 1px solid transparent;
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 550;
}
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--bg); filter: none; }
.btn.link { background: none; border: none; color: var(--accent); padding: 4px 0; font-weight: 500; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.danger { background: var(--danger); }
/* Поле комментария не тянется за угол: растянутое, оно налезало на соседние
   элементы страницы. Размер задаётся строками. */
textarea { resize: none; }
/* Все текстовые поля — одним правилом. Тип, которого здесь нет, браузер
   рисует по-своему: белое поле со светлым текстом в тёмной теме, как было с
   датами периода. Появился новый тип поля — добавить сюда. Поле без type
   браузер тоже рисует сам — оно здесь же (input:not([type])), а в разметке
   type пишется всегда: это проверяет test-web.js. */
input:not([type]), input[type=text], input[type=tel], input[type=number], input[type=search], input[type=url],
input[type=email], input[type=password], input[type=date], input[type=time],
input[type=datetime-local], input[type=month], textarea, select {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; width: 100%;
}
/* Значок календаря и часов — в цвет текста, а не чёрный на тёмном поле. */
input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.msg { padding: 10px 13px; border-radius: 8px; margin: 12px 0; font-size: 14px; }
.msg.err { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.msg.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* --- Вход --- */
.login { max-width: 380px; margin: 12vh auto; padding: 28px; }
.login h1 { margin-bottom: 6px; }
.login label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 5px; }
.login .btn { width: 100%; margin-top: 16px; }
.code-input { letter-spacing: .5em; text-align: center; font-size: 20px; }

/* --- Каталог --- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filters input[type=text] { flex: 1; min-width: 220px; }
.crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.crumbs span { color: var(--muted); }
.crumbs .btn.link { padding: 0; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; }
.chip .n { opacity: .6; margin-left: 5px; font-size: 12px; }
/* Галочка у отмеченного бренда в фильтре (их можно выбрать несколько) */
.chip .tick { width: 11px; height: 11px; margin: 0 5px -1px -2px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Плитка брендов. Логотип лежит серым и расцветает под курсором — так же,
   как это сделано у конкурента. Обесцвечивание делает браузер, поэтому
   картинка хранится одна, цветная. */
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.brandcard { display: flex; flex-direction: column; }
.brandcard > button {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; cursor: pointer; text-align: left;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
}
.brandcard > button:hover { border-color: var(--accent); }
/* Логотип на светлой подложке — в обеих темах.

   Половина знаков нарисована почти чёрным (Apple, Bose, Sony, Samsung), и на
   тёмной карточке они сливаются с ней. Подкладывать плашку только им — значит
   получить пятнистую сетку, где половина плиток с рамкой, половина без.
   Инвертировать нельзя: цветным логотипам это ломает фирменные цвета.
   Светлая подложка под всеми решает и то и другое, а заодно совпадает с тем,
   как марки просят показывать свои знаки. */
.brandcard img {
  /* Рамка — в пропорциях обработанного логотипа (imagefit TILE_ASPECT = 134 × 52), а не фиксированной высоты: плитка
     на телефоне шире, чем на компьютере, и при высоте 52 px логотип со своим фоном (Dreame, EcoFlow) не доходил до краёв. */
  width: 100%; height: auto; aspect-ratio: 134 / 52; object-fit: contain; object-position: center;
  margin-bottom: 8px; padding: 7px 9px;
  background: #fff; border-radius: 7px;
  /* В покое знак приглушён сильно: у части марок официальный логотип
     чёрно-белый (Apple, Bose, Dyson), и для них разница при наведении — это
     только яркость. Слабое приглушение делало бы наведение незаметным. */
  filter: grayscale(1); opacity: .38;
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}
.brandcard > button:hover img, .brandcard > button:focus-visible img {
  filter: none; opacity: 1; transform: scale(1.04);
}

/* У картинки со своим фоном подложку убираем — и только её.

   Светлая плашка нужна прозрачным знакам, чтобы чёрный логотип не сливался с
   тёмной темой. У непрозрачной картинки фон нарисован внутри неё самой, и
   плашка вокруг превращается в белую рамку — ровно это было видно на Fifine.
   Обрезка и масштаб при этом одни и те же: их определяет содержимое, а не
   наличие прозрачности. Отступ убирается вместе с плашкой — он был её полем,
   а не полем картинки. */
.brandcard.opaque img { background: none; box-shadow: none; padding: 0; }
.brandcard .noimg, .brandcard img { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .07); }
/* Анимация не для всех: при системной настройке «меньше движения» переход
   выключается, а расцветание остаётся мгновенным. */
@media (prefers-reduced-motion: reduce) { .brandcard img { transition: none; } }
.brandcard .noimg {
  height: auto; aspect-ratio: 134 / 52; margin-bottom: 6px; display: flex; align-items: center;
  color: var(--muted); font-size: 20px; font-weight: 650; opacity: .35; letter-spacing: -.02em;
  overflow: hidden; white-space: nowrap;
}
.brandcard .name { font-weight: 600; }
.brandcard .n { color: var(--muted); font-size: 12.5px; }
.logotools { display: flex; gap: 10px; padding: 5px 4px 0; font-size: 12.5px; }
.logotools .btn.link { font-size: 12.5px; }

.items { display: flex; flex-direction: column; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.item { background: var(--surface); padding: 11px 14px; display: grid;
  grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; }
.item .name { font-weight: 500; }
.item .sku { color: var(--muted); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.item .price { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Цена, выданная менеджером по запросу. Отличается цветом, потому что в
   прайсе поставщика этой позиции нет: сумма пришла на конкретный запрос
   клиента, а не из общего прайса. */
.item .price.quoted, .item .price .client.quoted { color: var(--warn); }
.item .price .tag {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 1px 6px;
  vertical-align: middle;
}
/* Название и артикул в запросе цены копируются по нажатию. */
.copyable { cursor: pointer; }
.copyable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.item .noprice { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* «Выгодно!»: вчерашняя цена зачёркнута, снижение — зелёной плашкой */
.item .wasprice { margin-right: 8px; font-weight: 450; color: var(--muted); font-size: 13px; }
.item .wasprice .drop { margin-left: 6px; font-size: 11px; font-weight: 650; color: var(--ok);
  border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; vertical-align: baseline; }
.item .buy { display: flex; gap: 6px; align-items: center; }
.item .buy input { width: 72px; text-align: center; }
@media (max-width: 640px) {
  .item { grid-template-columns: 1fr; gap: 8px; }
  .item .buy { justify-content: flex-start; }
}

.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 18px; }

/* --- Таблицы --- */
/* Обе оси, иначе border-radius не обрезает углы таблицы внутри.
   #2 Таблицы-списки не растят страницу: высота ограничена, шапка липнет,
   длинный список прокручивается внутри карточки. Короткая таблица ниже
   предела — просто не скроллится. */
.tablewrap { overflow: auto; max-height: 62vh; }
.tablewrap thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.people.scroll { max-height: 58vh; overflow-y: auto; padding-right: 3px; }
.listscroll { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; padding-right: 3px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--border); }
th { font-size: 12.5px; color: var(--muted); font-weight: 550; text-transform: uppercase; letter-spacing: .03em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

/* Плашка стоит на базовой линии соседнего текста, а не по центру строки:
   верх строки у шрифтов выше видимых букв, и отцентрованная по строке
   плашка кажется приподнятой. В тексте и ячейках таблиц базовая линия — по
   умолчанию; строкам-флексам с плашкой (.person, .row, .order .top) она
   включается отдельно. Новую строку с плашкой делать так же. */
.badge { display: inline-block; vertical-align: baseline; line-height: 1.5; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 550;
  background: var(--bg); border: 1px solid var(--border); }
.row:has(> .badge) { align-items: baseline; }
.badge.new { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.approved, .badge.process { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.ready { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); border-color: transparent; }
.badge.shipped { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); border-color: transparent; }
.badge.finished { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); border-color: transparent; }
/* Кнопки смены статуса — в цвете статуса, куда переводят (тот же, что у плашки):
   новый — синий, утверждён/собирается — жёлтый, собран — бирюзовый, отгружен —
   фиолетовый, завершён — зелёный, отмена — красный. Заливка мягкая: рядом стоят
   «Оплатить» и «Одобрить» — сплошные, главное действие страницы. */
.btn.st { --st: var(--accent); background: color-mix(in srgb, var(--st) 13%, var(--surface));
  color: var(--st); border-color: color-mix(in srgb, var(--st) 45%, transparent); }
.btn.st:hover { background: color-mix(in srgb, var(--st) 22%, var(--surface)); filter: none; }
.btn.st-new { --st: var(--accent); }
.btn.st-approved, .btn.st-process { --st: var(--warn); }
.btn.st-ready { --st: var(--teal); }
.btn.st-shipped { --st: var(--violet); }
.btn.st-finished { --st: var(--ok); }
.btn.st-cancelled { --st: var(--danger); }
.badge.cancelled { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: transparent; }

.order { padding: 14px 16px; margin-bottom: 10px; }
.order .top { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.order .num { font-weight: 650; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.order ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; }

/* Свежий ключ. Копируется и кнопкой, и нажатием на сам ключ — попадать
   курсором в мелкую кнопку, когда нужен весь длинный ключ, неудобно. */
.freshkey { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; box-shadow: var(--shadow); }
.key { display: block; width: 100%; margin-top: 10px; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; word-break: break-all; cursor: pointer; }
.key:hover { border-color: var(--accent); }

/* --- Узкий экран ---
   Закупщик открывает кабинет с телефона не реже, чем с ноутбука. Шапка на
   375 px занимала четверть экрана: навигация переносилась на вторую строку,
   а блок пользователя вставал третьей. Сжимаем её, не убирая ничего нужного. */
@media (max-width: 560px) {
  .head { padding: 8px 12px; gap: 8px 10px; }
  .brand { width: auto; font-size: 15px; }
  .nav { order: 3; width: 100%; gap: 2px; }
  .nav button { padding: 6px 9px; font-size: 14px; }
  .who { font-size: 12px; }
  /* Имя сотрудника на телефоне не нужно — важно, от чьего лица открыт кабинет. */
  .who { line-height: 1.2; }
  .main { padding: 16px 12px 48px; }
  .brands button { padding: 12px 11px; }
  .order .top { gap: 8px; }
}

/* --- Две цены в строке каталога ---
   Сотрудник видит закупочную цену, а рядом — цену выбранного клиента.
   Держать их одну под другой компактнее, чем разносить по колонкам. */
.item .price.two { text-align: right; font-weight: 500; line-height: 1.35; }
.item .price.two .lbl { color: var(--muted); font-weight: 400; font-size: 11.5px;
  display: block; text-transform: uppercase; letter-spacing: .03em; }
.item .price.two .client { margin-top: 5px; color: var(--accent); font-weight: 650; }

/* --- Отладочный вход ---
   Полоса намеренно заметная: забыть, под кем работаешь, слишком легко. */
.impersonation {
  background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--border);
  padding: 9px 16px; font-size: 13.5px; display: flex; gap: 10px;
  align-items: center; justify-content: center; flex-wrap: wrap;
}
.impersonation .btn.link { color: var(--warn); text-decoration: underline; }

/* --- Карточка клиента --- */
.clients .cname { font-weight: 550; }
/* Состояние компании — простой подписью, а не таблеткой. У таблетки внутренний
   отступ, и её текст начинался правее названия: рядом в столбце это читается
   как сбитое выравнивание. */
.clients .cstatus { color: var(--danger); font-size: 12px; margin-top: 2px; }
.clients tr.open > td { background: var(--bg); }
.clients tr.editor > td { background: var(--bg); padding: 16px 14px 20px; }
.clients .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px;
}
.clients .grid label { display: block; font-size: 12.5px; color: var(--muted); }
.clients .grid label input, .clients .grid label select { margin-top: 4px; }
/* Личная заметка: видна только автору, поэтому и выглядит как пометка на
   полях, а не как общее поле формы. */
.notebox { width: 100%; display: block; }
.notebox.compact { margin: -2px 0 4px; font-size: 13.5px; }
.rowactions { white-space: nowrap; text-align: right; }
.rowactions .btn + .btn { margin-left: 12px; }

.people { display: flex; flex-direction: column; gap: 7px; }
/* Прокручиваемый список — flex-колонка, а её элементы по умолчанию
   сжимаются, чтобы влезть в max-height. Высокая карточка внутри from этого
   схлопывалась и обрезалась (.card прячет переполнение). Пусть держат свою
   высоту, а прокручивается список. */
.people > *, .listscroll > * { flex-shrink: 0; }
.person {
  /* baseline, а не center: плашки и кнопки стоят на одной линии с текстом
     строки (см. .badge). У чекбокса своей базовой линии нет — по центру. */
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px;
}
.person input[type=text] { width: auto; flex: 1; min-width: 160px; }
.person > input[type=checkbox] { align-self: center; }
.person .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
/* Текстовая кнопка остаётся текстовой, даже если она про удаление:
   правило .btn.danger идёт ниже .btn.link и иначе заливает её фоном. */
.btn.link.danger { background: none; border: none; color: var(--danger); }

/* Закупочная цена в позиции заказа — только для сотрудника. Отдельной
   строкой и приглушённо: это справка, а не то, что клиент платит. */
.order .supplier {
  display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px;
}

/* --- Переключатели настроек --- */
.guard { padding: 14px 16px; margin-bottom: 12px; }
/* Правка существующей записи: форма подсвечена приглушённо-оранжевым, чтобы
   её нельзя было спутать с созданием новой. */
.card.editing { background: var(--warn-soft); border-color: var(--warn); }
/* Переключатель с подписью: галочка слева, заголовок и пояснение справа.
   Правило общее — карточка клиента и настройки выглядят одинаково. */
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch > span > b { display: block; }
.guard input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.guard span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.guard span b { display: block; color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.guard .params {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px; margin: 16px 0 2px 30px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* Та же сетка, но как самостоятельный блок: без отступа под галочку и без
   верхней линии — она нужна, только когда параметры идут за переключателем. */
.guard .params.plain { margin: 0; padding-top: 0; border-top: 0; }
.guard .param { display: block; cursor: default; }
.guard .param .pname { display: block; font-size: 13px; font-weight: 550; margin-bottom: 5px; }
.guard .param input { width: 110px; }
.guard .param input[type=checkbox] { width: auto; margin: 0; }
.guard .param .phint { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.45; }
/* Наблюдение по каталогу — это факт, а не продолжение инструкции: отделяем
   его от подсказки цветом текста, иначе строки читаются как один абзац. */
.guard .param .phint.now { color: var(--text); margin-top: 3px; }
/* Пороги по цене: таблица диапазонов, под долей — наблюдение по каталогу; красным — живые цены ниже доли */
.guard.bands .bandtable td { vertical-align: top; }
.guard.bands .bandtable input { width: 82px; }
.guard.bands .bandtable td.edge { white-space: nowrap; }
.guard.bands .bandtable td.edge input { width: 104px; }
.guard.bands .phint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.guard.bands .phint.risky { color: var(--danger); }
@media (max-width: 560px) { .guard .params { margin-left: 0; } }

/* Права сотрудника при создании приглашения. */
.permgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.permgrid label { display: block; }
.permgrid .pname { display: block; font-size: 13px; margin-bottom: 5px; }

/* --- Заказы ---

   В списке карточка ростом с пару позиций: заказ на сорок позиций занимал
   больше экрана, и список переставал быть списком. Остальное — на странице
   заказа, куда ведёт нажатие на карточку. */
.card.order.compact { cursor: pointer; transition: border-color .15s ease; }
.card.order.compact:hover { border-color: var(--accent); }
.card.order.compact ul.peek { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.card.order.compact ul.peek li { font-size: 13px; }
.card.order .more { margin-top: 6px; font-size: 12.5px; color: var(--accent); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.warnmark { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.okmark { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); border-color: transparent; }
/* Создание ключа доступа: две кнопки — на этом устройстве и с телефона, с пояснением второй строкой */
.pkadd { display: flex; gap: 8px; flex-wrap: wrap; }
.pkadd .btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1 1 200px; text-align: left; }
.pkadd .btn small { font-weight: 400; font-size: 12px; opacity: .8; }

/* Карточка заказа: содержимое не должно упираться в границу и вылезать за
   скруглённые углы — таблица внутри рисует свои линии до самого края. */
.orderpage .card { padding: 14px 16px; overflow: hidden; }
.orderpage .lines { width: 100%; border-collapse: collapse; }
.orderpage .linesbox { max-height: 46vh; overflow: auto; margin: -2px; padding: 2px; }
.orderpage .linesbox thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.orderpage .lines th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 0 10px 10px 0;
}
.orderpage .lines th:last-child, .orderpage .lines td:last-child { padding-right: 0; }
.orderpage .lines th.num, .orderpage .lines td.num { text-align: right; }
.orderpage .lines td { padding: 9px 10px 9px 0; border-top: 1px solid var(--border); vertical-align: top; }
.orderpage .lines tr.gone td { color: var(--muted); text-decoration: line-through; }
.orderpage .lines tr.gone td:last-child { text-decoration: none; }
.orderpage .wasline { font-size: 12px; color: var(--warn); margin-top: 2px; }
.orderpage .supplier { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Столбец «Закупка» — только у сотрудника: поле цены и под ним «Подставить» */
.orderpage .purchase { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.orderpage .purchase input { width: 110px; }
.orderpage .purchase .btn.link { font-size: 12px; padding: 0; }
/* Итоги под заказом для сотрудника: закуп, продажа, маржа */
.orderpage .ordertotals { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; font-size: 14px; }
.orderpage .ordertotals span:first-child { color: var(--muted); }
/* Поставщик в режиме «Подставить» — кнопка вместо ссылки, выглядит так же */
button.suprow.pick { width: 100%; background: none; border: none; font: inherit; color: var(--text);
  cursor: pointer; text-align: left; }
.orderpage .addline { margin-top: 12px; }
.orderpage .found { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* --- Всплывающее уведомление ---

   Раньше сообщение вставлялось в поток страницы: содержимое под ним
   подпрыгивало, а на длинном списке его не было видно вовсе — оно оставалось
   выше экрана. Теперь оно висит поверх, у верхнего края, и гаснет само. */
.toast {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 14px; border-radius: 10px; font-size: 14px;
  border: 1px solid transparent; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  animation: toast-in .18s ease-out;
}
.toast.ok {
  background: color-mix(in srgb, var(--ok) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok);
}
.toast.err {
  background: color-mix(in srgb, var(--danger) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger);
}
.toast.warn {
  background: color-mix(in srgb, var(--warn) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn);
}
.toast .btn.link { color: inherit; text-decoration: underline; font-weight: 600; padding: 0; }
.toast .close {
  background: none; border: 0; color: inherit; opacity: .55; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px;
}
.toast .close:hover { opacity: 1; }
/* Комментарии к заказу лентой (OrderComments): свои и чужие видно по цвету полосы слева */
.comments .comment { padding: 8px 10px; border-left: 3px solid var(--border); background: var(--bg); border-radius: 6px; margin-bottom: 6px; }
.comments .comment.staff { border-left-color: var(--accent); }
.comments .comment.client { border-left-color: var(--ok); }
.comments .comment .meta { font-size: 13px; margin-bottom: 2px; }
.comments .comment .text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Плашка новой версии (NewVersionBar): полосой над шапкой, как в Fulfilment Web, и не
   закрывается. Прилипает к верху; шапка прилипает под ней — высоту плашки задаёт компонент. */
.newverwrap { position: sticky; top: 0; z-index: 30; }
/* Плашка целиком — кнопка: нажатие в любом месте перезагружает страницу */
.newver {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin: 0; padding: 5px 16px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center;
  background: var(--warn-soft); color: var(--warn); cursor: pointer;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 0;
}
.newver:hover { background: color-mix(in srgb, var(--warn) 24%, var(--surface)); }
.newver:focus-visible { outline: 2px solid var(--warn); outline-offset: -2px; }
.head { top: var(--newver-h, 0px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Панель выгрузки прайса: два списка отметок. */
.card.export { padding: 14px 16px; margin-bottom: 14px; }
.card.export .pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card.export .pname { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
/* Поля над отбором — каждое со своей строки. Метка это label, а он строчный:
   выпадающий список и галочка вставали в одну строку и читались как одно
   поле, где подсказка селекта относится к галочке. */
.card.export .param { display: block; max-width: 320px; margin-bottom: 12px; }
.card.export .param select { width: 100%; }
.card.export .checkline { display: flex; margin-bottom: 12px; }
.card.export .chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; }
.btn.ghost.on { border-color: var(--accent); color: var(--accent); }

/* --- Модальные окна --- */
/* Окно может открыться изнутри ячейки таблицы (закупка → «Подставить»): оно не
   наследует её выравнивание по правому краю и моноширинные цифры. */
.overlay {
  text-align: left; font-variant-numeric: normal; white-space: normal;
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 12, 18, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  width: min(560px, 100%); max-height: min(72vh, 640px);
  display: flex; flex-direction: column;
}
.modal .head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.modal .head .close {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 2px;
}
.modal .head .close:hover { color: var(--text); }
.modal .body { padding: 12px 16px 16px; overflow-y: auto; }

/* Список поставщиков в модалке. */
.supplist { display: flex; flex-direction: column; gap: 2px; }
.supentry { min-width: 0; border-radius: 8px; }
.supentry:hover { background: var(--bg); }
.suprow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text);
}
.suprow .flag { width: 22px; flex-shrink: 0; }
.suprow .name { min-width: 0; overflow-wrap: anywhere; }
.suprow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.supsource {
  padding: 0 10px 9px 42px; color: var(--muted); font-size: 12px; line-height: 1.4;
  overflow-wrap: anywhere; user-select: text; -webkit-user-select: text;
}

/* Цена-кнопка: выглядит как цена, ведёт себя как ссылка. */
.pricebtn {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  font-weight: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.pricebtn:hover { color: var(--accent); }

/* Журнал действий. */
.auditlog { max-height: 420px; overflow-y: auto; }
.auditrow {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 2px; font-size: 13.5px; border-bottom: 1px solid var(--border);
}
.auditrow:last-child { border-bottom: 0; }
.auditrow .mono { white-space: nowrap; }
/* Имя инициатора не сжимается и не переносится: колонка должна читаться
   сверху вниз одним взглядом. Переносится описание действия. */
.auditrow b { white-space: nowrap; flex-shrink: 0; }
.auditrow > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Секретные слова и подобные пары полей — на всю доступную ширину. */
/* Широкие пары полей (секретные слова): поле занимает всю колонку, в отличие
   от числовых порогов проверок цен, которым хватает 110px. */
.guard .params.wide { margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.guard .params.wide .param input { width: 100%; }
/* Поле «да/нет» — это галочка, а не выпадающий список из двух пунктов:
   подпись встаёт рядом с квадратиком, и вместо двух строк выходит одна. */
.guard .param.check .pname { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; }
.guard .param.check input[type=checkbox] { width: auto; margin: 0; }

/* Пикер получателей рассылки. */
.recipients { margin-top: 12px; }
.recipients .pname { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.recipients .chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; }

/* «Доступна новая цена» в строке закупки. */
.newprice { color: var(--warn); }
button.supplier.pricebtn { display: inline; text-align: left; font-size: 12px; color: var(--muted); }
button.supplier.pricebtn:hover { color: var(--accent); }

/* Чат поддержки. */
.chatbox {
  padding: 14px 16px; max-height: 56vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.bubble {
  max-width: 72%; align-self: flex-start;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px; padding: 8px 12px; font-size: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble.mine {
  align-self: flex-end; border-radius: 12px 12px 4px 12px;
  background: var(--accent-soft); border-color: transparent;
}
.bubble .from { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.bubble .when { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: right; }

/* Финансы. */
.finrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.fincard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.fincard .lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.fincard b { font-size: 17px; }
.fincard b.neg, td.neg { color: var(--danger); }
/* Разбивка бонусов — сбоку от итога: подпись слева, сумма справа. Под итогом
   она задирала карточку выше соседних; сбоку высота остаётся прежней. Сетка,
   а не flex с переносом: две колонки должны стоять рядом гарантированно. */
.fincard.bonuscard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: start; }
.fincard .split { border-left: 1px solid var(--border); padding-left: 14px; }
/* На узкой колонке разбивка уходит под итог — сбоку ей уже не хватает места. */
@media (max-width: 700px) {
  .fincard.bonuscard { grid-template-columns: 1fr; }
  .fincard .split { border-left: 0; border-top: 1px solid var(--border);
    padding: 9px 0 0; margin-top: 9px; }
}
.fincard .split div { display: flex; gap: 12px; font-size: 13px; color: var(--muted); line-height: 1.75; }
.fincard .split div b { margin-left: auto; font-size: 13px; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
td.pos { color: var(--ok); }
.checkresult {
  font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Пакетная проверка и описание услуги. */
.bulkimei { flex: 1; min-width: 220px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.svcdesc { margin: 10px 2px 0; color: var(--muted); font-size: 13px; }
/* Форма бонусов в редакторе. */
.bonusgrant { max-width: 640px; }
.bonusgrant .row + .row { margin-top: 8px; }
.bonusgrant b { font-size: 15px; }
/* Галочка с подписью в одну строку — для назначений бонусов и подобного. */
.checkline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.checkline input { margin: 0; }

details > summary { cursor: pointer; user-select: none; }
/* Чип шапки: несколько колонок «подпись/сумма» в одном чипе. */
button.who.balance .cols { display: flex; gap: 14px; }
button.who.balance .cols > span { display: flex; flex-direction: column; text-align: right; }

/* Результат проверки IMEI: пары «подпись — значение» строками. */
.checkgrid { display: flex; flex-direction: column; }
.checkrow {
  display: flex; gap: 14px; align-items: baseline;
  padding: 7px 2px; border-bottom: 1px solid var(--border);
}
.checkrow:last-child { border-bottom: none; }
.checklabel { color: var(--muted); font-size: 13px; flex: 0 0 44%; }
.checkvalue { font-weight: 550; overflow-wrap: anywhere; }
.checkvalue.bad { color: var(--danger); }
.checkvalue.good { color: var(--ok); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Подвкладки каналов в «Чатах». */
.chantabs { display: flex; gap: 6px; margin: 2px 0 14px; }
.chantabs button {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; color: var(--muted); font-size: 13.5px;
}
.chantabs button.on { background: var(--accent-soft); border-color: transparent;
  color: var(--accent); font-weight: 550; }

/* Баланс в шапке — рядом с именем, кликом в «Финансы». */
button.who.balance {
  background: var(--accent-soft); border: 0; border-radius: 9px;
  padding: 5px 11px; cursor: pointer; text-align: right;
}
button.who.balance b { color: var(--accent); }
button.who.balance b.neg { color: var(--danger); }
button.who.balance:hover { filter: brightness(1.06); }

/* Базовый прайс: наценка в строке */
/* Список, поле и кнопка в одну линию и одной высоты: у полей кабинета отступ 8px,
   у маленькой кнопки 5px, а высоту select браузер считает сам — без этого строки «ехали». */
.rule-input { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.rule-input select, .rule-input input[type=text], .rule-input .btn {
  box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; line-height: 32px; }
.rule-input select { width: 96px; padding-left: 10px; padding-right: 6px; }
.rule-input input[type=text] { width: 96px; }
.rule-input .btn { min-width: 44px; }
.bp-filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(130px, 1fr)) auto; gap: 8px; align-items: center; }
.bp-filters select, .bp-filters input { width: 100%; }
.bp-filters.dates { grid-template-columns: auto auto auto; justify-content: start; }
.bp-filters.dates label { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
@media (max-width: 760px) { .bp-filters { grid-template-columns: 1fr 1fr; } .bp-filters > input[type=text] { grid-column: 1 / -1; } }
.bp-filters .checkline { white-space: nowrap; }
.bp-filters .checkline input { width: auto; }
span.neg { color: var(--danger); }
/* Строка «Найдено · Наценка всем · страницы» не прилипает к таблице */
.bp-toolbar { margin-bottom: 12px; }
/* Права сотрудника: пояснение под каждым модулем */
.permgrid .phint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; font-weight: 400; }
.people .muted.small, .muted.small { font-size: 12.5px; }
/* Ключ API: области доступа */
.scopes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 14px; }
.scopes .checkline input { width: auto; }

/* Уценка (02.10.2026): переключатель «Новые / Уценка» у заголовка каталога и бейджи состояния.
   Плашки — по базовой линии, как все .badge; цвет — «предупреждение»: товар не новый. */
.titlerow { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; padding: 4px 14px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 550; }
/* Новые / Уценка / Выгодно! — у каждой вкладки свой цвет из палитры темы (и стиля кабинета): синий, оранжевый, зелёный.
   Неактивная — цветом текста, активная — светлой заливкой того же цвета */
.seg.states .st-new { --st: var(--accent); }
.seg.states .st-used { --st: var(--cond-orange); }
.seg.states .st-deals { --st: var(--ok); }
.seg.states button { color: color-mix(in srgb, var(--st) 75%, var(--muted)); }
.seg.states button.on { color: var(--st); background: color-mix(in srgb, var(--st) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 30%, transparent); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.badge.used { --c: var(--cond-amber); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); border-color: transparent; }
.badge.cond-amber { --c: var(--cond-amber); } .badge.cond-orange { --c: var(--cond-orange); } .badge.cond-brown { --c: var(--cond-brown); }
.badge.cond-cyan { --c: var(--cond-cyan); } .badge.cond-purple { --c: var(--cond-purple); } .badge.cond-blue { --c: var(--cond-blue); }
.badge.cond-indigo { --c: var(--cond-indigo); } .badge.cond-slate { --c: var(--cond-slate); } .badge.cond-red { --c: var(--cond-red); }
.badge.cond-pink { --c: var(--cond-pink); } .badge.cond-sky { --c: var(--cond-sky); }
/* AS IS+ — насыщенный малиновый: та же семья, что AS IS, но ярче и плотнее, чтобы их не путали */
.badge.cond-crimson { --c: var(--cond-crimson); background: color-mix(in srgb, var(--c) 30%, transparent); }
.conds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: baseline; }
/* Плитки категорий — режим каталога «По категориям»: те же карточки, что у брендов, только без логотипа */
.brands.cats .brandcard > button { min-height: 70px; justify-content: center; }
/* Перетаскивание плиток админом (08.10.2026): «рука» над плиткой, перетаскиваемая — полупрозрачная */
.brandcard[draggable="true"] > button { cursor: grab; }
.brandcard.dragging { opacity: .35; }