/* Единый CSS-файл Custom.CRM. Шрифт DM Sans, линеаровская минималистичная стилистика. */

:root {
  /* Цветовые токены — светлая тема по умолчанию (Linear-style).
     Тёмная палитра живёт только в скоупе body.page-production (см. ниже). */
  --bg: #ffffff;
  --bg-elev: #f7f7f9;
  --surface: #ffffff;
  --border: #e6e6ea;
  --text: #1f2329;
  --text-dim: #6a6f78;
  --text-mute: #9aa0a8;
  --primary: #1f2329;
  --primary-ink: #ffffff;
  --accent: #6e7bff;
  --danger: #e5484d;
  --success: #16a34a;

  /* Геометрия */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Типографика */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
}

/* --- Кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  /* Safari/iOS: убрать нативный градиент/скругление у <button>, чтобы наш
     border-radius и background не подменялись системными. */
  -webkit-appearance: none;
  appearance: none;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn:active {
  transform: scale(0.99);
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
  width: 100%;
}

.btn--primary:hover {
  background: #ececef;
}

.btn--ghost {
  height: 40px;
  padding: 0 var(--space-4);
  border-color: var(--border);
  color: var(--text-dim);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: var(--text-mute);
}

/* --- Поля формы --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: -0.005em;
}

.field__input {
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
  /* Safari/iOS: убрать нативные inset-shadow, scroll-handle и шеврон у select.
     Без этого <select> в Safari выглядит «системно» и ломает паритет с input. */
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
/* Safari/iOS: <select> теряет нативную стрелку после appearance:none —
   рисуем свой шеврон через background-image, чтобы паритет был во всех браузерах. */
select.field__input {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237b8290' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
/* Safari/iOS: убрать «жирный» фон у автозаполненного input — оставляем нашу палитру. */
.field__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset;
  -webkit-text-fill-color: var(--text);
}

.field__input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-dim);
  font-size: 14px;
  user-select: none;
  cursor: pointer;
}

.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* --- Flash-сообщения --- */
.flash-stack {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 50;
  max-width: 92vw;
}

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.flash--error {
  border-color: rgba(255, 95, 109, 0.35);
  background: rgba(255, 95, 109, 0.08);
  color: #ffd0d4;
}

.flash--success {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
  color: #c8f7d6;
}

/* --- Страница входа --- */
.page-auth {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.auth__card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.auth__logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: var(--space-3);
}

.auth__title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.auth__subtitle {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quick-login {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
}

.quick-login__hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quick-login__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.quick-login__row .btn {
  height: 40px;
  padding: 0 var(--space-3);
  width: 100%;
}

/* --- Топбар --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__brand {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Главная --- */
.home {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home__eyebrow {
  margin: 0;
  color: var(--text-mute);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home__title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.home__role {
  margin: 0;
  color: var(--text-dim);
}

.home__role span {
  color: var(--text);
  font-weight: 500;
}

.home__placeholder {
  padding: var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-dim);
  background: var(--bg-elev);
  text-align: center;
}

/* --- Адаптивность --- */
@media (max-width: 480px) {
  .home {
    padding: var(--space-5) var(--space-4);
  }
  .home__title {
    font-size: 28px;
  }
}

/* ============================================================ */
/* Block 2: канбан-доска, форма заказа, карточка                */
/* ============================================================ */

/* --- Общие хелперы --- */
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -0.01em; }
.text-mute { color: var(--text-mute); }

.btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  height: 40px;
  padding: 0 var(--space-4);
  font-weight: 500;
  width: auto;
}
.btn--accent:hover { background: #5b69f0; border-color: #5b69f0; }

/* --- Топбар: расширения --- */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.topbar__user {
  color: var(--text-dim);
  font-size: 14px;
}
.topbar__brand a { color: inherit; }

/* --- Канбан-доска --- */
.page-board { background: var(--bg); }

.board {
  padding: var(--space-5);
}

.empty-state {
  max-width: 480px;
  margin: var(--space-8) auto;
  padding: var(--space-7);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.empty-state h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.empty-state p { margin: 0; color: var(--text-dim); }
.empty-state--full { min-height: 60vh; justify-content: center; }

/* Канбан-доска: на десктопе все 5 зон фиксированно делят ширину контейнера
   `.board-view` поровну (без горизонтального скролла). Колонки сжимаются
   до содержимого через `minmax(0, 1fr)` — карточки внутри подстраиваются
   под ширину колонки. Мобильный сценарий (горизонтальный скролл с snap)
   восстанавливается ниже в @media max-width: 760px. */
.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.column {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  scroll-snap-align: start;
}

.column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.column__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.column__count {
  font-size: 12px;
  color: var(--text-mute);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

.column__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.column__empty {
  margin: 0;
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
}

/* --- Карточка --- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: border-color 120ms ease, transform 80ms ease;
}
.card:hover { border-color: var(--text-mute); }
.card:active { transform: scale(0.99); }

.card--muted { opacity: 0.7; }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Группировка: номер слева, дата+thumb справа (через margin-left:auto
     на первом «правом» элементе — обычно .row__date или .card__thumb,
     если даты нет). */
}

.card__number {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;      /* #S-002 — одной строкой, без переноса */
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.card__head .row__date { white-space: nowrap; flex-shrink: 0; margin-left: auto; }
/* thumb НЕ живёт в card__head — он во второй строке (.card__body) справа,
   см. блок «Kanban card body + thumb» ниже. */

.card__title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
}

.card__meta {
  display: flex;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-mute);
}

.card__status {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: var(--space-1);
}

/* --- Бейдж дедлайна --- */
.deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  white-space: nowrap;
}
.deadline__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-mute);
}
.deadline--ok    .deadline__dot { background: #16a34a; }
.deadline--soon  .deadline__dot { background: #d97706; }
.deadline--late  .deadline__dot,
.deadline--today .deadline__dot,
.deadline--past  .deadline__dot { background: #dc2626; }
.deadline--ok    { color: #166534; background: #dcfce7; border-color: #86efac; }
.deadline--soon  { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.deadline--late,
.deadline--today,
.deadline--past  { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }

/* --- Отклонённые (свёрнутая зона) --- */
.rejected {
  margin-top: var(--space-5);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.rejected summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  user-select: none;
}
.rejected__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* --- Форма создания заказа --- */
.form-page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.form-page__title {
  margin: 0 0 var(--space-5);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.form-section__header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.form-section__actions {
  display: flex;
  gap: var(--space-2);
}

.hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.field__input--area {
  height: auto;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  font-family: inherit;
}

.radio-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}
.radio input { accent-color: var(--accent); }

/* Группа «Приоритет» в форме заказа должна всегда умещаться в одну строку
   (Обычный · Высокий · 🔥 Горящий) — поле живёт в правой колонке двух-
   колоночного .field-row рядом с «Дедлайном», и при стандартном
   padding'е радиокнопок третий вариант переносился. Делаем nowrap +
   чуть компактнее по горизонтали; на узких экранах (≤540px) поле и так
   разворачивается на всю ширину контейнера через общие responsive-
   правила формы — там нативный wrap снова допустим. */
.radio-group:has(.radio--prio) { flex-wrap: nowrap; gap: var(--space-2); }
.radio--prio { padding: 8px var(--space-3); white-space: nowrap; }
@media (max-width: 540px) {
  .radio-group:has(.radio--prio) { flex-wrap: wrap; }
}

.items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.item-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.item-row--auto {
  border-style: dashed;
  background: rgba(110, 123, 255, 0.05);
}

.item-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-row__badge {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 999px;
}
.item-row__badge--accent {
  color: var(--accent);
  border-color: rgba(110,123,255,0.35);
  background: rgba(110,123,255,0.08);
}

.item-row__remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.item-row__remove:hover { color: var(--danger); border-color: rgba(255,95,109,0.4); }

.item-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.item-grid .field { grid-column: span 2; }
.item-grid .field--qty { grid-column: span 1; }
.item-grid .field--span { grid-column: 1 / -1; }

.item-grid--accessory {
  grid-template-columns: 1fr 100px;
}
.item-grid--accessory .field--span { grid-column: 1 / -1; }
.item-grid--accessory .field--qty  { grid-column: auto; }

/* ---- Минималистичная inline-строка аксессуара ----
   Чистый list: нет per-row рамки и фона, только hairline-разделитель.
   Override .item-row (которая по умолчанию column-card): аксессуар — это
   одна редактируемая «строка таблицы» с qty. */
.item-row.item-row--accessory {
  flex-direction: row;
  align-items: center;
  gap: 14px;                       /* комфорт между name / qty / × */
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
/* Последняя строка списка — без нижней линии. */
.item-row.item-row--accessory:last-child { border-bottom: 0; }
/* Auto-режим (предзаполненные дефолт-аксессуары) — лёгкий tint без рамки. */
.item-row--accessory.item-row--auto { background: rgba(110, 123, 255, 0.04); }

/* ВАЖНО: эти селекторы заскоуплены под `.item-row--accessory`, т.к. те же
   классы `.acc-row__name`/`.acc-row__qty` используются на /orders/<id>
   в read-only списке комплектации (см. `.acc-row` ниже). Без скоупа span'ы
   на detail'е наследовали бы chip-вид и hover-border'ы инпутов формы. */
.item-row--accessory input.acc-row__name {
  flex: 1 1 auto; min-width: 0;
  height: 36px; padding: 0 10px;
  font: inherit; color: var(--text);
  background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  /* Длинные имена — обрезка в одну строку с ellipsis. Полное имя
     сохраняется в value инпута; визуально клипается. */
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.item-row--accessory .acc-row__name:hover { border-color: var(--border); }
.item-row--accessory .acc-row__name:focus {
  outline: none;
  border-color: var(--accent, #6E7BFF);
  background: var(--surface);
  text-overflow: clip;             /* при фокусе показываем хвост текста */
}
/* Жёсткий клэмп ширины: высокая специфичность (class + attr), чтобы побить
   intrinsic-размер number-инпута и любые flex/width-правила. width + max-width
   + flex-basis + min-width:0 — поле не может ни вырасти, ни сжать строку. */
.item-row--accessory input.acc-row__qty[name="items-quantity"] {
  flex: 0 0 72px;
  width: 72px; min-width: 0; max-width: 72px;
  height: 36px; padding: 0 6px;
  font: inherit; text-align: center;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  -moz-appearance: textfield;        /* Firefox — спрятать нативный stepper */
}
/* WebKit/Blink — спрятать нативные ±-стрелки числового инпута, поле
   остаётся компактным и центрированным. */
.item-row--accessory .acc-row__qty::-webkit-outer-spin-button,
.item-row--accessory .acc-row__qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.item-row--accessory .acc-row__flag { font-size: 11px; color: var(--text-mute); }

/* Минимальный icon-only delete: без рамки, без фона. Тап-область ≥44px
   за счёт padding (видимая глиф ~16px, hit-area 44×44). */
.acc-row__remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font-size: 20px; line-height: 1;
  padding: 12px;                   /* hit-area 44×44 при глифе 20px */
  margin: -8px -8px -8px 0;        /* визуально не «раздувает» строку */
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.acc-row__remove:hover,
.acc-row__remove:focus-visible {
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.08);
  outline: none;
}

/* ---- Stage: read-only strip с уже сохранёнными превью ----
   Лежит над `.preview-stage__grid` (там — новые staged загрузки). */
.preview-stage__existing {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.preview-stage__existing:empty { display: none; }
.preview-tile--existing {
  width: 96px; height: 96px;
  position: relative; aspect-ratio: auto;
  border-radius: 8px; overflow: hidden;
  background: #FAFAF8;
  border: 1px solid var(--border);
}
.preview-tile--existing img { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview-tile--existing .preview-tile__delform { position: absolute; top: 4px; right: 4px; margin: 0; }
.preview-tile--existing .preview-tile__del {
  width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; opacity: 0.8;
}
.preview-tile--existing .preview-tile__del:hover { opacity: 1; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);     /* воздух от чистого списка комплектации */
}
.form-actions .btn--primary { width: auto; min-width: 220px; }

/* --- Карточка заказа --- */
.detail {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.detail__header {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail__numberline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.detail__number {
  font-size: 13px;
  color: var(--text-dim);
}

.status-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.status-pill--draft          { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
.status-pill--on_pricing,
.status-pill--invoice_issued { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.status-pill--paid           { color: #166534; background: #dcfce7; border-color: #86efac; }
.status-pill--manufacturing,
.status-pill--drying,
.status-pill--packing,
.status-pill--ready_to_ship  { color: #3730a3; background: #e0e7ff; border-color: #a5b4fc; }
.status-pill--shipped        { color: #1e293b; background: #e2e8f0; border-color: #94a3b8; }
.status-pill--rejected       { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }

.detail__title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.detail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.detail__meta div { display: flex; flex-direction: column; gap: 2px; }
.detail__meta dt {
  font-size: 12px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail__meta dd { margin: 0; font-size: 14px; color: var(--text); }

.detail__section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail__section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.detail__subtitle {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  font-weight: 500;
}

.detail__comment {
  margin: 0;
  white-space: pre-wrap;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.line {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.line--compact { padding: var(--space-2) var(--space-4); }

.line__main {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.line__qty {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-mute);
  min-width: 28px;
}
.line__name { font-weight: 500; }

.line__params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--text-dim);
}

.line__notes {
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
  white-space: pre-wrap;
}

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.history__item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
  align-items: baseline;
}
.history__item:last-child { border-bottom: none; }
.history__time { color: var(--text-mute); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
.history__arrow strong { color: var(--text); }
.history__who { color: var(--text-dim); font-size: 13px; }

/* --- Адаптив --- */
@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .item-grid .field, .item-grid .field--qty { grid-column: span 1; }
  .item-grid .field--span { grid-column: 1 / -1; }
  .history__item { grid-template-columns: 1fr; gap: 2px; }
  .form-page, .detail { padding: var(--space-5) var(--space-4); }
}
@media (max-width: 480px) {
  .form-page__title { font-size: 22px; }
  .detail__title { font-size: 22px; }
  .topbar { padding: var(--space-3) var(--space-4); }
  .topbar__actions { gap: var(--space-2); }
  .topbar__user { display: none; }
}

/* =========================================================
   БЛОК 3 — действия на карточке заказа (светлая тема)
   ========================================================= */

.actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.action {
  border: 1px solid var(--c-border, #e6e6ea);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  min-width: 220px;
}

.action__btn {
  cursor: pointer;
  list-style: none;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 15px;
  user-select: none;
  display: block;
  text-align: center;
}
.action__btn::-webkit-details-marker { display: none; }
.action__btn:hover { background: #f5f6f8; }

.action__btn--primary {
  background: #1fbf68;
  color: #062513;
  border-radius: 10px;
}
.action__btn--primary:hover { background: #18ad5b; }

.action__btn--danger {
  background: #fff;
  color: #c8364a;
  border-top: 2px solid transparent;
}
.action__btn--danger:hover { background: #fdf1f3; }

.action__btn--disabled {
  opacity: .55;
  cursor: not-allowed;
}

.action--primary {
  border-color: #1fbf68;
  box-shadow: 0 0 0 1px #1fbf68;
}

.action__form {
  padding: 14px 16px;
  border-top: 1px solid var(--c-border, #e6e6ea);
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn--success {
  background: #1fbf68;
  color: #062513;
  border: none;
}
.btn--success:hover:not([disabled]) { background: #18ad5b; }
.btn--success[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Чек-лист комплектации на светлой карточке ---- */
.packing-counter {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f0732a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.packing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.pkrow form { margin: 0; }
.pkrow__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.pkrow__btn:hover { background: #f5f6f8; }
.pkrow__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 2px solid #c9ccd2;
  border-radius: 7px;
  color: transparent;
  font-weight: 700;
  flex: 0 0 auto;
}
.pkrow--done .pkrow__btn { background: #ecfaf2; border-color: #b6e6c8; }
.pkrow--done .pkrow__check {
  background: #1fbf68; border-color: #1fbf68; color: #fff;
}
.pkrow__text { font-size: 15px; }
.packing-hint { margin-top: 10px; font-size: 13px; }

.history__comment {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #6a6f78;
  padding-left: 12px;
  border-left: 2px solid #e6e6ea;
}

/* =========================================================
   БЛОК 4 — ФАЙЛЫ ЗАКАЗА (light, на карточке заказа)
   ========================================================= */

.files__group {
  border: 1px solid #e6e6ea;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #ffffff;
}
.files__group--finance { background: #fafafc; }
.files__grouphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.files__grouptitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2329;
}
.files__upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.files__filelabel { position: relative; cursor: pointer; }
.files__filelabel input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.files__pickbtn {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed #c8c9cf;
  border-radius: 6px;
  font-size: 13px;
  color: #4a4f57;
  background: #fff;
}
.files__filelabel:hover .files__pickbtn { border-color: #1f2329; color: #1f2329; }
.btn--sm { padding: 6px 12px; font-size: 13px; }

.files__list { list-style: none; padding: 0; margin: 0; }
.files__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #f0f0f2;
  font-size: 14px;
}
.files__item:first-child { border-top: none; }
.files__link {
  text-decoration: none;
  color: #1f2329;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.files__link:hover { text-decoration: underline; }
.files__name { word-break: break-all; }
.files__meta {
  margin-left: auto;
  color: #6a6f78;
  font-size: 12px;
  white-space: nowrap;
}
.files__delform { display: inline; }
.files__delbtn {
  background: none;
  border: 1px solid transparent;
  color: #a0a4ac;
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.files__delbtn:hover { border-color: #d44; color: #d44; background: #fdf2f2; }
.files__empty { margin: 4px 0 0 0; font-size: 13px; }

/* =========================================================
   БЛОК 3 — ПРОИЗВОДСТВЕННЫЙ ЭКРАН (DARK, scoped)
   Все правила ниже включаются только под body.page-production.
   ========================================================= */

body.page-production {
  /* Восстанавливаем тёмные значения токенов ТОЛЬКО внутри производственного экрана. */
  --bg: #0b0b0f;
  --bg-elev: #14141b;
  --surface: #1b1b24;
  --border: #262631;
  --text: #f4f4f6;
  --text-dim: #9a9aa6;
  --text-mute: #6b6b78;
  --primary: #ffffff;
  --primary-ink: #0b0b0f;
  --danger: #ff5f6d;
  --success: #4ade80;

  /* Единая шкала отступов для планшетного экрана производства (≥761px).
     --prod-section-gap — вертикальный ритм между крупными блоками .prod__detail;
     --prod-card-pad — внутренний паддинг карточных блоков (трек, опции, доски). */
  --prod-section-gap: 18px;
  --prod-card-pad: 14px;

  background: #0c0d11;
  color: #e6e8ec;
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
}
/* Тосты — снизу по центру, чтобы не перекрывать шапку («ОЧЕРЕДЬ»/часы).
   Позиция безопасна на всех ширинах (низ экрана свободен). */
body.page-production .flash-stack { z-index: 100; top: auto; bottom: 24px; }
body.page-production .flash {
  background: #14161b;
  color: #e6e8ec;
  border: 1px solid #20242b;
}
body.page-production .flash--error { border-color: #ff5c5c; color: #ff8c8c; }
body.page-production .flash--success { border-color: #33c66e; color: #6fdc94; }

body.page-production .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

body.page-production .prod {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 18px;
  gap: 18px;
}

/* ---- Верхняя панель ---- */
body.page-production .prod__top {
  /* 4 элемента в один ряд: бренд | очередь (растяжка) | часы | звук.
     Раньше было 3 колонки на 4 ребёнка → часы переносились на 2-й ряд. */
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  background: #14161b;
  border: 1px solid #1e2127;
  border-radius: 14px;
  /* Плотная шапка: меньше вертикального воздуха — высоту отдаём панели
     деталей ниже (от неё считаются высоты snap-экранов на планшете). */
  padding: 9px 20px;
}
body.page-production .prod__brand {
  grid-column: 1;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: .18em; font-weight: 700; font-size: 13px;
  color: #c8ccd3;
}
body.page-production .prod__livedot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #33c66e;
  box-shadow: 0 0 0 0 rgba(51,198,110,.6);
  animation: prodPulse 1.6s ease-out infinite;
}
@keyframes prodPulse {
  0%   { box-shadow: 0 0 0 0   rgba(51,198,110,.7); }
  100% { box-shadow: 0 0 0 12px rgba(51,198,110,0); }
}
body.page-production .prod__queueinfo { grid-column: 2; text-align: center; }
body.page-production .prod__queuelabel {
  letter-spacing: .22em; color: #7c828b; font-size: 12px; margin-right: 12px;
}
body.page-production .prod__queuecount { color: #f2f4f7; font-weight: 700; font-size: 18px; }
body.page-production .prod__clockbox {
  grid-column: 3;
  display: flex; align-items: baseline; gap: 14px; justify-self: end;
}
body.page-production .prod__clock {
  font-size: 22px; font-weight: 600; color: #f2f4f7;
  letter-spacing: .02em;
}
body.page-production .prod__date { color: #7c828b; font-size: 13px; }

/* ---- Двухколоночное тело ---- */
body.page-production .prod__main {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  flex: 1;
}

/* ---- Очередь ---- */
body.page-production .prod__queue {
  background: #14161b;
  border: 1px solid #1e2127;
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
}
body.page-production .prod__sectionlabel {
  letter-spacing: .22em;
  color: #565c66;
  font-size: 11px;
  font-weight: 600;
}
body.page-production .prod__sectionlabel--detail { margin: 6px 0 14px; }

body.page-production .qcard {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border: 1px solid #1e2127;
  border-radius: 13px;
  background: #14161b;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}
body.page-production .qcard:hover { background: #181b21; }
body.page-production .qcard--selected {
  background: #191f22;
  border-color: #34b5d6;
}
body.page-production .qcard__num { color: #7c828b; font-size: 12px; }
body.page-production .qcard__title { color: #e6e8ec; font-weight: 500; font-size: 15px; line-height: 1.2; }
body.page-production .qcard__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px;
}
body.page-production .qcard__stage {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #c8ccd3;
}
body.page-production .qcard__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
body.page-production .stage--green  { color: #33c66e; }
body.page-production .stage--cyan   { color: #34b5d6; }
body.page-production .stage--amber  { color: #f5a623; }
body.page-production .stage--orange { color: #f0732a; }
body.page-production .stage--gray   { color: #8a9099; }
body.page-production .stage--muted  { color: #7c828b; }

body.page-production .qcard__deadline { font-size: 12px; color: #8a9099; }
body.page-production .qcard__deadline--urgent { color: #ff5c5c; font-weight: 600; }

body.page-production .prod__empty { color: #565c66; font-size: 13px; }

/* ---- Правая колонка ---- */
body.page-production .prod__detail {
  background: #14161b;
  border: 1px solid #1e2127;
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
}
/* Колонка деталей — flex-column с ограниченной высотой и прокруткой.
   Без flex-shrink:0 дети сжимаются короче своего контента (flex-shrink:1 по
   умолчанию), и текст налезает на следующий блок. Фиксируем высоту детей —
   блоки больше не перекрываются, панель просто скроллится при переполнении. */
body.page-production .prod__detail > * { flex-shrink: 0; }

/* ---- Экраны панели деталей (scroll-snap, только планшет ≥761px) ----
   По умолчанию (и на телефоне ≤760px) контейнеры-обёртки прозрачны:
   display:contents убирает их из дерева боксов, и вложенные блоки остаются
   прямыми flex-детьми .prod__detail — поэтому мобильный flex-order работает
   без единого изменения в @media (max-width:760px). Реальными snap-боксами
   обёртки становятся ТОЛЬКО на планшете (см. min-width-медиа ниже). */
body.page-production .prod__screen,
body.page-production .prod__screen-scroll { display: contents; }
/* Служба доставки — фича планшета; на телефоне скрыта (показываем ниже). */
body.page-production .prod__delivery { display: none; }
body.page-production .prod__deliverynone {
  font-size: 16px; color: #7c828b; font-weight: 500;
}

/* ============================================================
   Планшет ≥761px: правая панель деталей — вертикальный scroll-snap из трёх
   полноэкранных «страниц». ЕДИНСТВЕННОЕ исключение из max-width-конвенции
   файла: эти правила не должны достигать телефона (≤760px), где .prod__screen
   остаётся display:contents (см. базу выше). ============================== */
@media (min-width: 761px) {
  /* Контейнер = вертикальный snap. Фиксированная высота нужна, чтобы
     min-height:100% экранов разрешалось в конкретный размер. Высота =
     100vh − (паддинги .prod 18+18 + плотная шапка ~50 + зазор 18 ≈ 104),
     с лёгким недобором 108px — экран чуть короче вьюпорта, snap чистый. */
  body.page-production .prod__detail {
    height: calc(100vh - 108px);
    max-height: calc(100vh - 108px);
    padding: 0;                       /* паддинг переносим внутрь экранов */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }
  /* Левая очередь — та же высота, колонки совпадают по низу. */
  body.page-production .prod__queue {
    height: calc(100vh - 108px);
    max-height: calc(100vh - 108px);
  }
  /* Экран = «страница» во всю видимую высоту панели, магнитная. */
  body.page-production .prod__screen {
    display: flex; flex-direction: column;
    box-sizing: border-box;
    min-height: 100%;
    padding: 24px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Экран 1 — центрируем стопку: конвейер и кнопка не прижаты к верху,
     экран выглядит осмысленно заполненным. */
  body.page-production .prod__screen--1 { justify-content: center; }
  /* Внутренняя прокрутка длинных экранов (2 и 3): snap срабатывает МЕЖДУ
     экранами, а содержимое листается внутри, не ломая привязку. */
  body.page-production .prod__screen-scroll {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
  }
  /* Экран 2: доски выше опций (порядок не зависит от DOM-порядка). */
  body.page-production .prod__screen--2 .prod__boards { order: 1; }
  body.page-production .prod__screen--2 .prod__build  { order: 2; }
  body.page-production .prod__screen--2 .prod__art    { order: 3; }
  /* Служба доставки видна на планшете (на телефоне скрыта базой). */
  body.page-production .prod__delivery { display: block; }
}

body.page-production .prod__detailhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  margin-bottom: var(--prod-section-gap);
}
body.page-production .prod__title {
  font-size: 30px; font-weight: 600; color: #f2f4f7;
  margin: 0 0 8px 0; line-height: 1.15;
}
body.page-production .prod__metaline {
  display: flex; align-items: center; gap: 8px;
  color: #7c828b; font-size: 14px;
}
body.page-production .prod__metadot { color: #565c66; }
body.page-production .prod__detailright {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
body.page-production .prod__deadlinechip {
  background: rgba(245,166,35,.12);
  color: #ffb638;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
body.page-production .prod__pkglink {
  color: #7c828b; text-decoration: none; font-size: 13px;
}
body.page-production .prod__pkglink:hover { color: #c8ccd3; }
body.page-production .prod__pkgcount { color: #f5a623; font-weight: 600; }

/* ---- Плитки конвейера (6 на post-V1) ---- */
body.page-production .tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: var(--prod-section-gap);
}
/* minmax(0,1fr) вместо 1fr: плитки могут ужиматься уже своего min-content,
   поэтому все 6 стадий помещаются по ширине и не вылезают за правый край
   на портретном iPad (fit-to-width, без горизонтального скролла). */
body.page-production .tiles--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.page-production .tile {
  padding: 22px 18px;
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 150px;
  text-align: center;
  border: 1px solid transparent;
}
body.page-production .tile__icon svg { width: 30px; height: 30px; }
body.page-production .tile__name {
  font-size: 16px; font-weight: 600; line-height: 1.15;
  /* На узких плитках (портрет) длинные слова «Изготовление»/«Комплектация»
     переносятся на 2 строки, а не обрезаются и не вылезают за пределы плитки.
     text-wrap: balance даёт ровный перенос «Готов к отгрузке» на 2 строки. */
  white-space: normal; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance;
}
body.page-production .tile__state {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
}

/* done — зелёный приглушённый */
body.page-production .tile--done {
  background: rgba(51,198,110,.10);
  border-color: rgba(51,198,110,.28);
  color: #4fd389;
}
/* current — сплошной cyan */
body.page-production .tile--current {
  background: #34b5d6;
  color: #04222b;
  border-color: #34b5d6;
}
/* Активная (cyan) плитка: только жирнее, БЕЗ увеличения кегля — иначе длинное
   «Изготовление» обрезается именно на активной плитке. */
body.page-production .tile--current .tile__name { font-weight: 700; }
body.page-production .tile--current .tile__state { color: #04222b; }
/* next — dashed muted */
body.page-production .tile--next {
  background: #13151a;
  border: 1.5px dashed #2a2e36;
  color: #7c828b;
}
/* future — самый тёмный */
body.page-production .tile--future {
  background: #101216;
  border: 1px solid #1c1f26;
  color: #565c66;
}
body.page-production .tile--locked { color: #565c66; }
body.page-production .tile--locked .tile__icon { color: #565c66; }

/* ---- Кнопка действия ---- */
body.page-production .prod__actions { margin-bottom: var(--prod-section-gap); }
body.page-production .prod__actionform { display: flex; flex-direction: column; gap: 12px; }
body.page-production .prod__btnrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}
body.page-production .btn-advance {
  background: #33c66e;
  color: #062513;
  border: none;
  padding: 22px 28px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
}
body.page-production .btn-advance:hover:not([disabled]) { background: #2ab35f; }
body.page-production .btn-advance--disabled,
body.page-production .btn-advance[disabled] {
  background: #1a2c22;
  color: #4a6155;
  cursor: not-allowed;
}
body.page-production .btn-comment {
  background: #15171c;
  color: #c8ccd3;
  border: 1px solid #2a2e36;
  padding: 22px 24px;
  font-size: 15px;
  border-radius: 14px;
  cursor: pointer;
}
body.page-production .btn-comment:hover { background: #1a1d24; }
body.page-production .prod__commenttext, body.page-production .prod__trackinput {
  width: 100%;
  background: #0c0d11;
  color: #e6e8ec;
  border: 1px solid #2a2e36;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
}
body.page-production .prod__hint {
  color: #f5a623; font-size: 13px; margin: 0;
}

/* ---- Чек-лист на тёмном экране ---- */
body.page-production .packing {
  border-top: 1px solid #1e2127;
  padding-top: 18px;
  margin-top: 6px;
}
body.page-production .packing__title {
  font-size: 16px; font-weight: 600; color: #f2f4f7;
  margin: 0 0 14px 0;
  display: flex; align-items: center; gap: 12px;
}
body.page-production .packing__counter {
  font-size: 13px;
  background: rgba(245,166,35,.16);
  color: #ffb638;
  padding: 3px 10px;
  border-radius: 999px;
}
body.page-production .packing__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
body.page-production .pkgitem__form { margin: 0; }
body.page-production .pkgitem__btn {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 16px 18px;
  background: #101216;
  border: 1px solid #1e2127;
  color: #e6e8ec;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
body.page-production .pkgitem__btn:hover { background: #14161b; }
body.page-production .pkgitem__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 2px solid #2a2e36;
  border-radius: 8px;
  color: transparent;
  flex: 0 0 auto;
}
body.page-production .pkgitem__check svg { width: 22px; height: 22px; }
body.page-production .pkgitem--done .pkgitem__btn { background: rgba(51,198,110,.08); border-color: rgba(51,198,110,.30); }
body.page-production .pkgitem--done .pkgitem__check { background: #33c66e; border-color: #33c66e; color: #062513; }
body.page-production .pkgitem__qty { color: #7c828b; margin-right: 6px; }
body.page-production .pkgitem__text { font-size: 15px; }

/* ---- Размещение / выход ---- */
body.page-production .prod__logout {
  position: fixed; bottom: 12px; right: 14px;
  margin: 0;
}
body.page-production .prod__logout button {
  background: transparent; border: none;
  color: #565c66; font-size: 12px; cursor: pointer;
  letter-spacing: .08em;
}
body.page-production .prod__logout button:hover { color: #8a9099; }

body.page-production .prod__placeholder {
  text-align: center; padding: 80px 20px; color: #7c828b;
}
body.page-production .prod__placeholder h2 { font-size: 22px; color: #c8ccd3; margin: 0 0 8px 0; }

/* Адаптация: телефон в горизонталке */
@media (max-width: 920px) {
  /* Портретный планшет (≈768px): оставляем две колонки, но очередь чуть уже
     (200px), чтобы колонке деталей хватило ширины. Конвейер из 6 плиток
     помещается за счёт minmax(0,1fr) + переноса названий; зазор между
     плитками уменьшен, чтобы они не были слишком тонкими. */
  body.page-production .prod__main { grid-template-columns: 200px 1fr; }
  body.page-production .tiles { gap: 8px; }
  body.page-production .tile { min-height: 120px; padding: 12px 6px; }
  body.page-production .tile__name { font-size: 14px; }
  body.page-production .prod__title { font-size: 22px; }
}

/* ----- Блок 4: Макет/Превью на тёмном экране производства (scoped) ----- */
body.page-production .prod__art {
  margin: var(--prod-section-gap) 0 0 0;
  padding: var(--prod-card-pad);
  border: 1px solid #23262d;
  border-radius: 12px;
  background: #14161b;
}
body.page-production .prod__arttitle {
  margin: 0 0 10px 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c828b;
  font-weight: 600;
}
body.page-production .prod__artlist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
body.page-production .prod__artitem { }
body.page-production .prod__artlink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid #2a2e36;
  border-radius: 8px;
  background: #1b1e24;
  color: #e6e8ec;
  text-decoration: none;
  font-size: 14px;
}
body.page-production .prod__artlink:hover { background: #21252c; border-color: #3a3f48; }
body.page-production .prod__artbadge {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #062513; background: #6fdc94; border-radius: 4px; padding: 2px 6px;
  font-weight: 700;
}
body.page-production .prod__artname { color: #c8ccd3; }

/* ====== Блок 5 — навигация в топбаре ====== */
.topbar__nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: 16px;
}
.topbar__navlink {
  padding: 6px 12px;
  font-size: 14px; font-weight: 500;
  color: #4b5159;
  text-decoration: none;
  border-radius: 6px;
}
.topbar__navlink:hover { background: #f3f4f6; color: #111317; }
.topbar__navlink--active { background: #eef0f3; color: #111317; font-weight: 600; }

/* ====== Блок 5 — Дашборд (light) ====== */
.page-dashboard { background: #f7f8fa; }
.dash {
  max-width: 1200px; margin: 0 auto; padding: 24px 24px 64px;
}
.dash__title {
  margin: 8px 0 24px 0;
  font-size: 28px; font-weight: 700; color: #111317;
  letter-spacing: -0.02em;
}
.dash__section { margin-bottom: 36px; }
.dash__h2 {
  margin: 0 0 14px 0;
  font-size: 15px; font-weight: 600; color: #111317;
  letter-spacing: 0; text-transform: none;
}
.dash__hint {
  margin-left: 6px;
  font-size: 13px; font-weight: 400; color: #7c828b;
  text-transform: none; letter-spacing: 0;
}
.dash__zones {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.dash-zone {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
}
.dash-zone--muted { opacity: 0.7; }
.dash-zone__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.dash-zone__label { font-size: 13px; font-weight: 600; color: #4b5159; }
.dash-zone__count {
  font-size: 22px; font-weight: 700; color: #111317;
  letter-spacing: -0.02em;
}
.dash-zone__list { list-style: none; padding: 0; margin: 0; }
.dash-zone__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 13px;
}
.dash-zone__num { color: #4b5159; }

/* Риск-список */
.dash-risk { list-style: none; padding: 0; margin: 0; }
.dash-risk__row { margin-bottom: 8px; }
.dash-risk__link {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px;
  text-decoration: none; color: #111317;
}
.dash-risk__link:hover { border-color: #c8ccd3; background: #fafbfc; }
.dash-risk__title { color: #111317; font-weight: 500; }

/* Большие цифры */
.dash-stats { display: flex; gap: 16px; margin-bottom: 18px; }
.dash-stat {
  flex: 1;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 18px 20px;
}
.dash-stat__num {
  font-size: 32px; font-weight: 700; color: #111317;
  letter-spacing: -0.02em;
}
.dash-stat__label { font-size: 13px; color: #7c828b; margin-top: 4px; }

/* Карточки с разбивками */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dash-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px 18px;
}
.dash-card--wide { grid-column: 1 / -1; }
.dash-card__title {
  margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #4b5159;
}
.dash-card__list { list-style: none; padding: 0; margin: 0; }
.dash-card__list li {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 14px; color: #111317;
  border-bottom: 1px solid #f3f4f6;
}
.dash-card__list li:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  .dash-stats { flex-direction: column; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-risk__link { grid-template-columns: 1fr; gap: 4px; }
}

/* ====== Блок 5 — Дизайнер (light) ====== */
.page-designer { background: #f7f8fa; }
.dsg {
  max-width: 900px; margin: 0 auto; padding: 24px 24px 64px;
}
.dsg__title {
  margin: 8px 0 20px 0;
  font-size: 24px; font-weight: 700; color: #111317;
  letter-spacing: -0.02em;
}
.dsg-list { list-style: none; padding: 0; margin: 0; }
.dsg-list__row { margin-bottom: 8px; }
.dsg-list__link {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px; align-items: center;
  padding: 14px 16px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  text-decoration: none; color: #111317;
}
.dsg-list__link:hover { border-color: #c8ccd3; background: #fafbfc; }
.dsg-list__num { color: #111317; font-weight: 600; }
.dsg-list__title { font-weight: 500; }
.dsg-list__meta { color: #7c828b; font-size: 13px; }

.dsg-head {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}
.dsg-head__numline {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 6px;
}
.dsg-head__num { font-size: 20px; font-weight: 600; color: #111317; }
.dsg-head__internal { font-size: 13px; color: #7c828b; }
.dsg-head__title {
  margin: 0; font-size: 24px; font-weight: 700; color: #111317;
  letter-spacing: -0.02em;
}
.dsg__section { margin-bottom: 28px; }
.dsg__h2 {
  margin: 0 0 12px 0;
  font-size: 15px; font-weight: 600; color: #111317;
  letter-spacing: 0.02em; text-transform: uppercase;
}

@media (max-width: 540px) {
  .dsg-list__link { grid-template-columns: 1fr; gap: 4px; }
}

/* ====== Post-V1: приоритеты на светлых страницах ====== */
.prio-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 12px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent;
  letter-spacing: 0;
}
.prio-pill--urgent { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.prio-pill--high   { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.prio-pill--normal { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }

/* Карточка канбана: акцент по приоритету (левая «полоса») */
.card.prio--urgent { box-shadow: inset 3px 0 0 #ef4444; }
.card.prio--high   { box-shadow: inset 3px 0 0 #f59e0b; }
.card__prio { font-size: 14px; line-height: 1; }
.card__head { gap: 6px; }

/* Радио-выбор приоритета на форме */
.radio--prio-urgent input:checked + span { color: #b91c1c; font-weight: 600; }
.radio--prio-high   input:checked + span { color: #92400e; font-weight: 600; }
.field--num { max-width: 130px; }

/* Заголовок детали с акцентом приоритета */
.detail__header.prio--urgent { border-left: 3px solid #ef4444; padding-left: 14px; }
.detail__header.prio--high   { border-left: 3px solid #f59e0b; padding-left: 14px; }
.detail__numberline {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}

/* Линии комплектации / опций в детали заказа */
.line__params {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 4px; font-size: 13px; color: #4b5159;
}
.line__options {
  list-style: none; padding: 6px 0 0 0; margin: 6px 0 0 0;
  border-top: 1px dashed #e5e7eb;
  display: grid; gap: 2px;
}
.line__options li { font-size: 13px; color: #111317; }
.line__warn {
  margin-left: 8px; font-size: 11px; font-weight: 600;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
  padding: 1px 6px; border-radius: 4px;
}

/* Дашборд: приоритетный акцент в строке риска */
.dash-risk__row.prio--urgent .dash-risk__link { border-left: 3px solid #ef4444; }
.dash-risk__row.prio--high   .dash-risk__link { border-left: 3px solid #f59e0b; }
.dash-risk__prio { font-size: 14px; }

/* ====== Post-V1: smart-paste парсер ====== */
.paste-parser {
  max-width: 880px; margin: 16px auto 0; padding: 16px 20px;
  background: #f8f9fb; border: 1px solid #e5e7eb; border-radius: 12px;
}
.paste-parser__text { background: #fff; }
.paste-parser__actions {
  display: flex; align-items: center; gap: 14px; margin-top: 10px;
}
.paste-parser__meta { font-size: 13px; color: #4b5159; }
/* Статус парсинга: «Добавлено: …» / «Не удалось разобрать…».
   Скрыт по умолчанию (атрибут hidden), JS показывает с нужным kind. */
.paste-parser__status {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #f1f3f5;
  color: #4b5159;
}
.paste-parser__status--ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.paste-parser__status--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.form-section--warn {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}
.form-section__warn-title {
  font-size: 14px; font-weight: 600; color: #92400e; margin: 0 0 8px 0;
}
.parser-notes {
  list-style: disc inside; padding: 0; margin: 0; font-size: 13px; color: #92400e;
}

/* Опции изготовления внутри строки доски */
.item-options {
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed #cbd5e1; border-radius: 8px;
  background: #fbfcfd;
}
.item-options__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.item-options__title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #4b5159;
}
.btn--sm { padding: 4px 10px; font-size: 12px; }
.item-options__list { display: grid; gap: 6px; }
.opt-row {
  display: grid; grid-template-columns: 1fr 80px auto; gap: 8px; align-items: center;
}
.opt-row__name, .opt-row__qty {
  padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px;
  background: #fff; font: inherit;
}
.opt-row__remove {
  background: transparent; border: 1px solid #e5e7eb; border-radius: 6px;
  width: 32px; height: 32px; cursor: pointer; color: #4b5159;
}
.opt-row__remove:hover { background: #f3f4f6; }

/* Трек-номер на детали (светлый) */
.detail__track .track-form {
  display: flex; gap: 8px; align-items: center; max-width: 480px;
}
.detail__track .track-form .field__input { flex: 1; }
.track-value { font-size: 17px; font-weight: 600; color: #111317; margin: 0; }

/* ====== Post-V1: КРУПНЫЕ блоки на производственном экране ====== */
body.page-production .prod__prio { margin-right: 6px; }
body.page-production .prod__detailhead.prio--urgent { border-left: 4px solid #ff5c5c; padding-left: 12px; }
body.page-production .prod__detailhead.prio--high   { border-left: 4px solid #f5a623; padding-left: 12px; }
body.page-production .qcard.prio--urgent { box-shadow: inset 4px 0 0 #ff5c5c; }
body.page-production .qcard.prio--high   { box-shadow: inset 4px 0 0 #f5a623; }
body.page-production .qcard__prio { margin-right: 4px; }

/* Трек: крупная плашка */
body.page-production .prod__trackbox {
  background: #0c0d11; border: 1px solid #2a2e36; border-radius: 12px;
  padding: var(--prod-card-pad) 20px; margin-bottom: var(--prod-section-gap);
  display: flex; align-items: center; gap: 14px; min-height: 64px;
}
body.page-production .prod__trackvalue {
  font-size: 22px; font-weight: 700; color: #f2f4f7; letter-spacing: 0.02em;
}
body.page-production .prod__tracknone {
  font-size: 16px; color: #f5a623; font-weight: 600;
}
/* Мобильный серый плейсхолдер трека по умолчанию скрыт — на планшете
   виден прежний оранжевый «--desk». На телефоне меняются местами (см. медиа). */
body.page-production .prod__tracknone--m { display: none; }

/* ---- Опции изготовления: ЛЁГКИЙ стиль (как на мобильном) — справочная
   информация без визуального веса: простой серый заголовок, строки только
   с тонкими разделителями, без рамки-карточки. ---- */
body.page-production .prod__build {
  margin-top: var(--prod-section-gap);
  background: transparent; border: none; border-radius: 0; padding: 0;
}
body.page-production .prod__buildtitle {
  margin: 0 0 10px 0; font-size: 13px; font-weight: 700;
  color: #8a8f99; letter-spacing: 0.12em; text-transform: uppercase;
}
body.page-production .prod__buildlist {
  list-style: none; padding: 0; margin: 0; display: block;
}
body.page-production .prod__builditem {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; background: transparent; border: none;
  border-bottom: 1px solid #242424; border-radius: 0;
}
body.page-production .prod__builditem:last-child { border-bottom: none; }
body.page-production .prod__buildqty {
  font-size: 16px; font-weight: 600; color: #9a9aa6;
}
body.page-production .prod__buildname {
  font-size: 16px; font-weight: 400; color: #e6e8ec;
}
/* Дублирующая инфо о доске в строке опции скрыта и на планшете —
   размеры доски уже показаны в блоке «ДОСКИ». Строка опции = «кол-во× название». */
body.page-production .prod__buildboard { display: none; }
body.page-production .prod__buildhint {
  margin: 8px 0 0 0; font-size: 12px; color: #7c828b; font-style: italic;
}

/* ---- Комплектация: АКЦЕНТНЫЙ стиль (карточка с бирюзовой рамкой) + тап-чек-лист
   (как на мобильном). Это то, с чем Ильмир реально работает — отмечает собранное.
   Строки используют существующий endpoint production.toggle_accessory_packed
   (через общий JS внизу шаблона) и колонку packed_at — новых маршрутов нет. ---- */
body.page-production .prod__mpack {
  margin-top: var(--prod-section-gap);
  background: #14161b; border: 1px solid #34b5d6;
  border-radius: 14px; padding: var(--prod-card-pad);
}
body.page-production .prod__mpacktitle {
  display: flex; align-items: center; gap: 12px;
  letter-spacing: .12em; font-weight: 700; font-size: 14px;
  text-transform: uppercase; color: #34b5d6; margin: 0 0 14px;
}
body.page-production .prod__mpackcounter {
  font-size: 13px; font-weight: 600;
  background: rgba(52,181,214,.16); color: #5cc8e6;
  padding: 3px 10px; border-radius: 999px;
}
body.page-production .prod__mpacklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.page-production .prod__mpackitem { padding: 0; border: none; }
/* Вся строка — тап-цель ≥44px (semantic button). */
body.page-production .prod__mpackbtn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 48px; padding: 11px 16px;
  background: #101216; border: 1px solid #1e2127; border-radius: 12px;
  color: #e6e8ec; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.page-production .prod__mpackbtn:hover { background: #14161b; }
body.page-production .prod__mpackcheck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 2px solid #2a2e36; border-radius: 8px; color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.page-production .prod__mpackcheck svg { width: 20px; height: 20px; }
body.page-production .prod__mpacktext { font-size: 16px; }
body.page-production .prod__mpackqty { color: #7c828b; margin-right: 6px; }
/* Упаковано: зелёный фон, галочка, чуть приглушённый текст (без зачёркивания). */
body.page-production .prod__mpackitem.is-packed .prod__mpackbtn {
  background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.45);
}
body.page-production .prod__mpackitem.is-packed .prod__mpackcheck {
  background: #10B981; border-color: #10B981; color: #062513;
}
body.page-production .prod__mpackitem.is-packed .prod__mpacktext { color: #aeb4bd; }

/* ---- Порядок секций в колонке деталей на планшете (≥761px), как на мобильном:
   …кнопка → ДОСКИ → ОПЦИИ → КОМПЛЕКТАЦИЯ → макет/превью. Верхние секции
   (шапка, СТАДИЯ, конвейер, ТРЕК, кнопка) остаются с order:0 в порядке DOM.
   .prod__detail — flex-колонка, поэтому order работает и здесь. ---- */
body.page-production .prod__boards { order: 1; }
body.page-production .prod__build  { order: 2; }
body.page-production .packing,
body.page-production .prod__mpack   { order: 3; }
body.page-production .prod__art     { order: 4; }

/* Блок «доски» на производстве: материал/размеры */
body.page-production .prod__boards {
  margin-top: var(--prod-section-gap); padding: var(--prod-card-pad);
  background: #14161b; border: 1px solid #23262d; border-radius: 12px;
}
body.page-production .prod__boardstitle {
  margin: 0 0 12px 0; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; color: #7c828b;
}
body.page-production .prod__boardslist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
body.page-production .prod__boarditem {
  /* Размер квадрата превью на планшете/десктопе (см. FIX 1). */
  --prev-size-tablet: 120px;
  display: grid; grid-template-columns: 50px 1fr auto;
  grid-template-areas: "qty name chips";
  gap: 16px; align-items: start;
  padding: 12px 16px; background: #101216; border: 1px solid #1e2127; border-radius: 10px;
}
/* Есть превью — добавляем четвёртую колонку под квадрат справа (планшет/десктоп ≥761px).
   Мобайл (≤760px) переопределяет это ниже своим :has-блоком. */
body.page-production .prod__boarditem:has(.prod__board-previews) {
  grid-template-columns: 50px 1fr auto var(--prev-size-tablet);
  grid-template-areas: "qty name chips preview";
}
body.page-production .prod__boardqty { grid-area: qty; font-size: 18px; font-weight: 700; color: #f2f4f7; }
body.page-production .prod__boardname { grid-area: name; min-width: 0; color: #e6e8ec; font-size: 15px; }
body.page-production .prod__boardchips { grid-area: chips; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Портрет (≈768px): четыре зоны в один ряд тесноваты, поэтому чипы уходят
   под название, а превью-квадрат занимает правую колонку на оба ряда. Блок
   стоит ПОСЛЕ базовых правил доски (порядок каскада), но ДО мобильного
   @media(max-width:760px) — поэтому на планшете-портрете применяется он,
   а на телефоне его перекрывает мобильный :has-блок ниже. */
@media (max-width: 920px) {
  body.page-production .prod__boarditem:has(.prod__board-previews) {
    grid-template-columns: 50px 1fr var(--prev-size-tablet);
    grid-template-areas:
      "qty   name  preview"
      "chips chips preview";
  }
}
body.page-production .prod__chip {
  font-size: 11px; color: #c8ccd3;
  background: #1b1e24; border: 1px solid #2a2e36;
  padding: 2px 8px; border-radius: 999px;
}
body.page-production .prod__chip--accent {
  color: #062513; background: #6fdc94; border-color: #6fdc94; font-weight: 700;
}

/* Чек-лист упаковки: КРУПНЫЕ строки */
body.page-production .packing--large .packing__title {
  font-size: 18px; letter-spacing: 0.08em;
}
body.page-production .packing__list--large { gap: 12px; }
body.page-production .pkgitem--large .pkgitem__btn {
  padding: 22px 24px; min-height: 72px;
}
body.page-production .pkgitem--large .pkgitem__check {
  width: 40px; height: 40px;
}
body.page-production .pkgitem--large .pkgitem__check svg { width: 26px; height: 26px; }
body.page-production .pkgitem--large .pkgitem__text { font-size: 19px; font-weight: 600; }
body.page-production .pkgitem__warn {
  margin-left: 10px; font-size: 11px; font-weight: 700;
  color: #062513; background: #f5a623; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase;
}

/* =========================================================
   БЛОК UI-REDESIGN — светлая сторона (Eugene/Sergey)
   ВНИМАНИЕ: ни одно правило ниже не должно затрагивать
   body.page-production — это тёмный экран и он живёт ниже.
   ========================================================= */

/* ----- Topbar shell: гамбургер на мобиле (CSS-only) ----- */
.topbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar__brand { font-weight: 600; letter-spacing: -0.01em; }
.topbar__brand a { color: inherit; }
.topbar__panel { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; flex: 1; justify-content: flex-end; }
.topbar__nav { display: flex; gap: var(--space-2); }
.topbar__navlink { padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--text-dim); }
.topbar__navlink:hover { background: var(--bg-elev); color: var(--text); }
.topbar__navlink--active { background: var(--bg-elev); color: var(--text); font-weight: 500; }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar__user { font-size: 13px; color: var(--text-dim); }
.topbar__logout { margin: 0; }
.topbar__toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.topbar__burger { display: none; }

.btn--accent {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn--accent:hover { background: #5a68f0; border-color: #5a68f0; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .topbar__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; margin-left: auto; cursor: pointer; border-radius: 8px;
  }
  .topbar__burger:hover { background: var(--bg-elev); }
  .topbar__burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 0 auto; transition: transform 150ms; }
  .topbar__panel {
    flex-basis: 100%; margin-left: 0; flex-direction: column; align-items: stretch;
    gap: var(--space-2); padding-top: var(--space-3); margin-top: var(--space-3);
    border-top: 1px solid var(--border); display: none;
  }
  .topbar__toggle:checked ~ .topbar__panel { display: flex; }
  .topbar__nav { flex-direction: column; gap: 2px; }
  .topbar__nav .topbar__navlink { padding: 12px 14px; }
  .topbar__actions { flex-wrap: wrap; gap: var(--space-2); }
  .topbar__user { display: inline; flex: 1; }
}

/* ----- Board page wrapper ----- */
.board-main { padding: 0; }
.view-tabs {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px;
}
.view-tab {
  padding: 8px 16px; border-radius: 7px; font-size: 14px;
  color: var(--text-dim); cursor: pointer; transition: background 120ms, color 120ms;
}
.view-tab:hover { color: var(--text); }
.view-tab--active {
  background: var(--surface); color: var(--text); font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ----- Mobile zone-filter pills ----- */
.zone-pills {
  display: none; gap: 8px;
  padding: 0 var(--space-4) var(--space-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zone-pills::-webkit-scrollbar { display: none; }
.zone-pill {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--text-dim); cursor: pointer;
  white-space: nowrap; font-family: inherit;
}
.zone-pill:hover { color: var(--text); }
.zone-pill--active { background: var(--text); color: var(--primary-ink); border-color: var(--text); }

/* ----- List view (default) ----- */
.list-view {
  max-width: 960px; margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.list-zone { display: flex; flex-direction: column; gap: var(--space-3); }
.list-zone__head {
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer; user-select: none; padding: var(--space-2) var(--space-1);
  border-radius: 6px;
}
.list-zone__head:hover { background: var(--bg-elev); }
.list-zone__chev { color: var(--text-mute); font-size: 12px; transition: transform 150ms; }
.list-zone--collapsed .list-zone__chev { transform: rotate(-90deg); }
.list-zone--collapsed .list-zone__body { display: none; }
.list-zone__title {
  margin: 0; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text);
}
.list-zone__count {
  font-size: 12px; color: var(--text-mute); background: var(--bg-elev);
  padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border);
}
.list-zone__body { display: flex; flex-direction: column; gap: var(--space-2); }

.list-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-left-width: 4px; border-left-color: var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: border-color 120ms ease, transform 80ms ease, box-shadow 120ms;
}
.list-card:hover { border-color: var(--text-mute); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.list-card:active { transform: scale(0.997); }
.list-card.prio--urgent { border-left-color: var(--danger); }
.list-card.prio--high   { border-left-color: #d97706; }
.list-card__num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--text-dim); align-self: flex-start; }
.list-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.list-card__title { font-weight: 500; font-size: 16px; line-height: 1.3; }
.list-card__meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-mute);
}
.list-card__items { font-size: 12px; color: var(--text-mute); }
.list-card__pills { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ----- Приоритет-пилюли (общие, не только для list) ----- */
.prio-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.prio-pill--urgent { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.prio-pill--high   { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.prio-pill--normal { display: none; }

/* ----- Table view ----- */
.table-view {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-7);
}
.table-view__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.orders-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.orders-table thead th {
  text-align: left; padding: 10px 14px; font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-mute); background: var(--bg-elev);
  border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
  white-space: nowrap;
}
.orders-table thead th:hover { color: var(--text); }
.orders-table thead th[data-dir="asc"]::after  { content: " ▲"; font-size: 10px; color: var(--text-mute); }
.orders-table thead th[data-dir="desc"]::after { content: " ▼"; font-size: 10px; color: var(--text-mute); }
.orders-table tbody tr {
  border-top: 1px solid var(--border); cursor: pointer;
  transition: background 100ms;
}
.orders-table tbody tr:hover { background: var(--bg-elev); }
.orders-table tbody tr.prio--urgent { background: rgba(229,72,77,0.04); border-left: 3px solid var(--danger); }
.orders-table tbody tr.prio--urgent:hover { background: rgba(229,72,77,0.08); }
.orders-table tbody tr.prio--high   { background: rgba(217,119,6,0.04); border-left: 3px solid #d97706; }
.orders-table tbody tr.prio--high:hover { background: rgba(217,119,6,0.08); }
.orders-table td { padding: 12px 14px; font-size: 14px; vertical-align: middle; }
.orders-table td.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--text-dim); }

/* ----- Board (conveyor) view ----- */
.board-view {
  padding: var(--space-3) var(--space-5) var(--space-7);
  max-width: 1400px; margin: 0 auto;
}

@media (max-width: 760px) {
  .view-tab--desktop { display: none; }
  .zone-pills { display: flex; }
}

/* ----- Detail page: 2-column layout ----- */
.detail { max-width: 1200px; }
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}
.detail-main, .detail-side {
  display: flex; flex-direction: column; gap: var(--space-5); min-width: 0;
}
.detail-side {
  position: sticky; top: var(--space-4);
}
.detail-side .detail__section { padding: var(--space-4); }
.detail-side .actions__row { flex-direction: column; align-items: stretch; }
.detail-side .action { width: 100%; min-width: 0; }

@media (max-width: 980px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}

/* ----- Dashboard responsive grid ----- */
.dash { max-width: 1200px; }
.dash__zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
@media (max-width: 540px) {
  .dash__zones { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .dash__zones { grid-template-columns: 1fr; }
}

/* ----- /orders/new responsive hardening ----- */
@media (max-width: 540px) {
  .form-page { padding: var(--space-4) var(--space-3); }
  .form-section { padding: var(--space-4); }

  /* Board-панель: 2-колоночная сетка. Толщина + Кол-во встают в один ряд
     (через order), остальные поля — во всю ширину. Визуальный порядок:
     тип, длина, ширина, [толщина | кол-во], материал, печать,
     цвет бортов, цвет ковра, заметки. nth-child привязан к DOM-порядку
     детей #row-board-tpl → .item-grid. */
  .item-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .item-grid > .field { grid-column: 1 / -1; }          /* по умолчанию во всю ширину */
  .item-grid > :nth-child(1) { order: 1; }              /* тип доски */
  .item-grid > :nth-child(2) { order: 2; }              /* длина */
  .item-grid > :nth-child(3) { order: 3; }              /* ширина */
  .item-grid > :nth-child(4) { order: 4; grid-column: span 1; }  /* толщина */
  .item-grid > :nth-child(9) { order: 5; grid-column: span 1; }  /* кол-во */
  .item-grid > :nth-child(5) { order: 6; }              /* материал */
  .item-grid > :nth-child(6) { order: 7; }              /* печать */
  .item-grid > :nth-child(7) { order: 8; }              /* цвет бортов */
  .item-grid > :nth-child(8) { order: 9; }              /* цвет ковра */
  .item-grid > :nth-child(10){ order: 10; }             /* заметки */

  .item-grid--accessory { grid-template-columns: 1fr; }

  /* Все инпуты/селекты — строго внутри своего трека: никаких распираний. */
  .item-grid .field__input {
    font-size: 16px;                              /* отключает zoom iOS Safari */
    width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box;
  }
  .size-pair, .size-pair__ft, .size-pair__cm { min-width: 0; }

  /* Толщина заполняет свою половину (снимаем десктопный max-width:130px). */
  .item-grid .field--num { max-width: none; }

  /* Кол-во — компактный левый инпут, не тянется на всю колонку. */
  .item-grid .field--qty .field__input {
    width: 80px; max-width: 80px; flex: 0 0 80px;
    align-self: flex-start;
  }

  /* Палитра ковра — свотчи переносятся в несколько рядов, без выхода за край. */
  .carpet-palette {
    display: flex; flex-wrap: wrap;
    max-width: 100%;
  }

  .form-actions .btn--primary { width: 100%; min-width: 0; }
}

/* ----- Kanban на мобиле: восстанавливаем горизонтальный скролл со snap.
   На десктопе .kanban — `grid-template-columns: repeat(5, minmax(0, 1fr))`;
   здесь переключаемся обратно на `grid-auto-flow: column` с фиксированной
   шириной колонок и overflow-x. ----- */
@media (max-width: 760px) {
  .kanban {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 80vw);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
}

/* =========================================================
   POLISH PASS: пустые группы, плоский фильтр, мобильная таблица
   ========================================================= */

/* Пустая зона в Списке — одна тонкая приглушённая строка, без блока тела. */
.list-zone--empty { gap: 0; }
.list-zone--empty .list-zone__head {
  padding: 6px var(--space-1);
  cursor: default;
}
.list-zone--empty .list-zone__head:hover { background: transparent; }
.list-zone--empty .list-zone__chev { visibility: hidden; }
.list-zone--empty .list-zone__title {
  color: var(--text-mute); font-weight: 500;
}
.list-zone--empty .list-zone__count {
  color: var(--text-mute); background: transparent; border-color: transparent;
}

/* Плоский режим (выбрана конкретная пилюля): заголовки зон скрываем —
   пилюля сверху уже сообщает, какая это зона. */
.list-view--flat .list-zone__head { display: none; }
.list-view--flat .list-zone { gap: 0; }

/* Пилюли видны всегда (не только на мобиле). Десктоп: чуть просторнее.
   padding-top даёт «воздух» между верхней разделительной полосой топбара
   и пилюлями — иначе «Все / Оформл / Расчёт / …» прилипают к линии. */
.zone-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: var(--space-4) var(--space-5) var(--space-3);
  max-width: 960px; margin: 0 auto;
}

/* Список плотнее по вертикали, чтобы карточки не «висели в пустоте». */
.list-view { gap: var(--space-4); padding-top: var(--space-2); }
.list-zone { gap: var(--space-2); }
.list-zone__head { padding: 4px var(--space-1); }

/* На мобиле — компактные заголовки + горизонтальный скролл пилюль,
   и принудительно прячем таб «Таблица»/«Доска» (они и так .view-tab--desktop). */
@media (max-width: 760px) {
  .zone-pills {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: var(--space-3) var(--space-4);
  }
  .zone-pills::-webkit-scrollbar { display: none; }
  .zone-pill { flex: 0 0 auto; }
  .list-view { padding: var(--space-2) var(--space-4) var(--space-6); }
  .list-zone__head { padding: 2px var(--space-1); }
  .list-zone__title { font-size: 11px; letter-spacing: 0.08em; }
  .list-zone__count { font-size: 11px; padding: 1px 8px; }

  /* Таблица — desktop-only. Если сервер вернул её, скрываем; JS перезагружает в list. */
  .table-view { display: none; }
  /* Карточка чуть плотнее на мобиле. */
  .list-card { padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-3); }
  .list-card__title { font-size: 15px; }
}

/* =========================================================
   REDESIGN v13 — Light side: single-line rows, dot+word status,
   emoji group headers, detail grid-areas, prod sound button.
   Все правила СТРОГО вне body.page-production (тёмный экран не трогаем).
   ========================================================= */

/* ---------- Эмодзи в заголовках зон + цветной count badge ---------- */
.list-zone__title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.list-zone__count { font-weight: 600; }
.list-zone__count--draft_zone      { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.list-zone__count--finance_zone    { background: #fff7ed; color: #b45309; border-color: #fde4c1; }
.list-zone__count--paid_zone       { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
.list-zone__count--production_zone { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.list-zone__count--shipped_zone    { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.list-zone__count--rejected_zone   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ---------- Список: single-line строка-заказ ---------- */
.list-zone__body { list-style: none; margin: 0; padding: 0; gap: 1px; }
.list-zone__body li { margin: 0; }

.row {
  display: grid;
  grid-template-columns: 4px 64px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: border-color 120ms, box-shadow 120ms, transform 80ms;
  min-height: 52px;
}
.row + .row,
.list-zone__body li + li .row { /* плотнее визуально */ margin-top: 0; }
.list-zone__body { display: flex; flex-direction: column; gap: 6px; }

.row:hover { border-color: #c8ccd4; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.row:active { transform: scale(0.998); }

.row__bar {
  width: 4px; height: 28px;
  background: transparent; border-radius: 2px;
  align-self: center; justify-self: center;
}
.row.prio--urgent .row__bar { background: var(--danger); }
.row.prio--high   .row__bar { background: #d97706; }

.row__num {
  font-size: 13px; color: var(--text-mute);
  white-space: nowrap;
}
.row__title {
  font-size: 15px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.row__fire { margin-right: 4px; }

.row__status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-dim); white-space: nowrap;
}
.row__statustext { color: var(--text-dim); }

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex: 0 0 8px;
}
.dot--gray   { background: #9ca3af; }
.dot--amber  { background: #f59e0b; }
.dot--green  { background: #10b981; }
.dot--cyan   { background: #06b6d4; }
.dot--orange { background: #f97316; }
.dot--teal   { background: #14b8a6; }
.dot--muted  { background: #cbd5e1; }
.dot--danger { background: #ef4444; }

.row__date {
  font-size: 13px; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
  min-width: 64px;
}
.row__date.deadline--past  { color: var(--danger); font-weight: 600; }
.row__date.deadline--today { color: var(--danger); font-weight: 600; }
.row__date.deadline--soon  { color: #d97706; }
.row__date.deadline--ok    { color: var(--text-mute); }

/* Старая 2-строчная карточка списка больше не используется — выключаем
   её визуально, чтобы любые остатки не текли в новый дизайн. */
.list-card { display: none !important; }

/* На мобиле строка чуть плотнее, скрываем длинный текст статуса (оставляем точку). */
@media (max-width: 540px) {
  .row {
    grid-template-columns: 3px 56px minmax(0, 1fr) auto auto;
    gap: 10px; padding: 10px 12px; min-height: 48px;
  }
  .row__statustext { display: none; }
  .row__num { font-size: 12px; }
  .row__title { font-size: 14px; }
  .row__date { font-size: 12px; min-width: 56px; }
}

/* Цветные пилюли мобильного фильтра — мягкий вариант стейджа. */
.zone-pill { display: inline-flex; align-items: center; gap: 4px; }
.zone-pill.zone-pill--draft_zone      { color: #4338ca; }
.zone-pill.zone-pill--finance_zone    { color: #b45309; }
.zone-pill.zone-pill--paid_zone       { color: #047857; }
.zone-pill.zone-pill--production_zone { color: #155e75; }
.zone-pill.zone-pill--shipped_zone    { color: #475569; }
.zone-pill.zone-pill--rejected_zone   { color: #b91c1c; }
.zone-pill--active { color: #fff !important; }

/* ---------- Detail page: grid-areas, actions сверху на мобиле ---------- */
.detail { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-7); }

.detail__header.card {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  border-left: 4px solid var(--border);
}
.detail__header.card.prio--urgent { border-left-color: var(--danger); }
.detail__header.card.prio--high   { border-left-color: #d97706; }

.detail__numberline {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.detail__title {
  margin: 0 0 var(--space-4); font-size: 28px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.2;
}
.detail__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6);
  margin: 0; padding: 0;
}
.detail__metaitem { display: flex; flex-direction: column; gap: 2px; }
.detail__metaitem dt {
  font-size: 11px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.detail__metaitem dd { margin: 0; font-size: 14px; color: var(--text); }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "content actions"
    "content track"
    "content files"
    "history history";
  gap: var(--space-4);
  align-items: start;
}
.detail-content { grid-area: content; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.detail-actions { grid-area: actions; position: sticky; top: var(--space-4); }
.detail-track   { grid-area: track; }
.detail-files   { grid-area: files; }
.detail-history { grid-area: history; }

@media (max-width: 980px) {
  .detail-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "actions"
      "content"
      "track"
      "files"
      "history";
  }
  .detail-actions { position: static; }
  .detail__title { font-size: 22px; }
}

/* Унифицированная карточка (card) — общий контейнер всех секций. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.detail__section { padding: var(--space-5); }
.detail__section-title {
  margin: 0 0 var(--space-3);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text);
}

/* Блок «ОПЦИИ ИЗГОТОВЛЕНИЯ» внутри доски — выраженный, чтобы не путать с упаковкой. */
.line__opts {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: #fff7ed; border: 1px dashed #fcd34d; border-radius: 8px;
}
.line__optstitle {
  font-size: 11px; font-weight: 700; color: #92400e;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.line__options { margin: 0; padding-left: 18px; color: var(--text); }
.line__options li { margin: 2px 0; }

/* Track form: input + кнопка в одну строку. */
.track-form { display: flex; gap: var(--space-2); }
.track-form .field__input { flex: 1; min-width: 0; }
.track-value { font-size: 18px; color: var(--text); margin: 0; word-break: break-all; }
.hint { font-size: 12px; color: var(--text-mute); margin: var(--space-2) 0 0; }

/* ---------- Production: sound button ---------- */
body.page-production .prod__sound {
  grid-column: 4; justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: #1b1e24; color: #d6dce6;
  border: 1px solid #2a2e36; border-radius: 8px;
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
body.page-production .prod__sound:hover { background: #232730; color: #ffffff; }
body.page-production .prod__sound--on {
  background: #1f3a2a; color: #6fdc94; border-color: #2f5942;
}

/* ---------- Production: контейнер карточек и подсветка новых ---------- */
body.page-production .prod__queuecards { display: contents; }

@keyframes qcard-new-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111,220,148,0.6); transform: translateX(0); }
  20%  { box-shadow: 0 0 0 6px rgba(111,220,148,0); transform: translateX(-2px); }
  40%  { transform: translateX(2px); }
  60%  { transform: translateX(0); }
  100% { box-shadow: 0 0 0 0 rgba(111,220,148,0); }
}
body.page-production .qcard--new {
  border-color: #6fdc94 !important;
  background: linear-gradient(180deg, rgba(111,220,148,0.10), rgba(111,220,148,0.02));
  animation: qcard-new-pulse 1.6s ease-out 1;
}
body.page-production .qcard--new::after {
  content: "НОВЫЙ";
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: #062513; background: #6fdc94;
  padding: 2px 6px; border-radius: 3px;
}
body.page-production .qcard { position: relative; }


/* =========================================================
   v14→v15 — Light list color calibration (visual only).
   Цель: только то, что требует внимания, должно выделяться.
   ========================================================= */

/* (1) Даты в списке — без заливки. Только цвет текста. */
.row__date {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text-mute);
  font-weight: 500;
}
.row__date.deadline--past,
.row__date.deadline--today { color: #dc2626; font-weight: 600; }
.row__date.deadline--soon  { color: #b45309; font-weight: 500; }
.row__date.deadline--ok    { color: var(--text-mute); font-weight: 400; }

/* То же — для даты в card__head на доске (kanban). */
.card__head .row__date {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* (2) Count-бейдж в заголовках групп — нейтральный серый. */
.list-zone__count,
.list-zone__count--draft_zone,
.list-zone__count--finance_zone,
.list-zone__count--paid_zone,
.list-zone__count--production_zone,
.list-zone__count--shipped_zone,
.list-zone__count--rejected_zone {
  background: #f1f5f9;
  color: var(--text-mute);
  border-color: var(--border);
}

/* (3) Status-dots — все приглушены до серо-голубой палитры.
       Сигнальный цвет остаётся только за приоритетной полосой
       (.row__bar — красная для urgent, янтарная для high)
       и за датой (красный текст «просроч.»/«сегодня»). */
.dot { opacity: 0.85; }
.dot--gray   { background: #cbd5e1; }
.dot--amber  { background: #94a3b8; }
.dot--green  { background: #94a3b8; }
.dot--cyan   { background: #94a3b8; }
.dot--orange { background: #94a3b8; }
.dot--teal   { background: #94a3b8; }
.dot--muted  { background: #cbd5e1; }
.dot--danger { background: #ef4444; } /* rejected — единственный «громкий» dot */

/* Лёгкая дифференциация — через светлый ободок (визуально calm). */
.dot--green  { box-shadow: inset 0 0 0 1px rgba(16,185,129,0.45); }
.dot--cyan   { box-shadow: inset 0 0 0 1px rgba(6,182,212,0.45); }
.dot--teal   { box-shadow: inset 0 0 0 1px rgba(20,184,166,0.45); }
.dot--orange { box-shadow: inset 0 0 0 1px rgba(249,115,22,0.45); }
.dot--amber  { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.45); }

/* Мягче текст статуса в списке — серый, не основной. */
.row__statustext { color: var(--text-mute); }

/* Мобильные пилюли фильтра — тоже нейтральные, без зональной окраски. */
.zone-pill.zone-pill--draft_zone,
.zone-pill.zone-pill--finance_zone,
.zone-pill.zone-pill--paid_zone,
.zone-pill.zone-pill--production_zone,
.zone-pill.zone-pill--shipped_zone,
.zone-pill.zone-pill--rejected_zone { color: var(--text-dim); }
.zone-pill--active { color: #fff !important; }

/* (4) Переключатель видов скрыт на мобильных. На узком экране остаётся
       только список — лишняя одинокая кнопка «Список» выглядит как мусор.
       Сами пилюли в .board-bar остаются видимыми. */
@media (max-width: 720px) {
  .board-bar .view-tabs--icons { display: none !important; }
}


/* =========================================================
   v15→v16 — Header (.tb) rebuild + final polish.
   Single row both desktop and mobile. No hamburger. Generous spacing.
   Match attached reference: brand «CRM», text nav left + icon-button row
   on mobile, indigo «+Новый заказ», avatar circle, logout icon.
   ========================================================= */

.tb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 64px;
}

.tb__brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  margin-right: 6px;
}
.tb__brand:hover { color: var(--text); }

.tb__nav { display: flex; align-items: center; gap: 6px; }
.tb__navlink {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.tb__navlink:hover { color: var(--text); background: #f7f6f1; }
.tb__navlink--active { background: #F2F1EC; color: var(--text); font-weight: 500; }

.tb__spacer { flex: 1; }

.tb__actions { display: flex; align-items: center; gap: 14px; }

.tb__newbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: #6E7BFF;
  color: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms, transform 80ms;
}
.tb__newbtn:hover  { background: #5C6BF5; color: #fff; }
.tb__newbtn:active { transform: scale(0.98); }
.tb__plus { font-size: 17px; line-height: 1; margin-top: -1px; }

.tb__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: transparent;
}
.tb__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #DCE0FF; color: #4751E0;
  font-size: 12px; font-weight: 600;
}
.tb__username { font-size: 14px; color: var(--text); }

.tb__logoutform { margin: 0; }

.tb__iconbtn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #F2F1EC;
  color: #4b5160;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms, transform 80ms;
  padding: 0;
}
.tb__iconbtn:hover { background: #e9e7df; color: var(--text); }
.tb__iconbtn:active { transform: scale(0.96); }
.tb__iconbtn--active { background: #1D1D1F; color: #ffffff; }
.tb__iconbtn--active:hover { background: #1D1D1F; color: #fff; }
.tb__iconbtn--accent { background: #6E7BFF; color: #ffffff; }
.tb__iconbtn--accent:hover { background: #5C6BF5; color: #fff; }
.tb__iconbtn--ghost { background: #F2F1EC; }

/* Десктоп vs мобильное переключение */
.tb__icons--mobile { display: none; }

@media (max-width: 760px) {
  .tb { padding: 12px 14px; gap: 10px; min-height: 60px; }
  .tb__brand { font-size: 17px; }
  .tb__nav--desktop,
  .tb__actions--desktop { display: none !important; }
  .tb__icons--mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
}

/* Узкий мобильный — оставляем плотные 8px между иконками, всё в одну строку */
@media (max-width: 380px) {
  .tb { padding: 10px 12px; gap: 8px; }
  .tb__icons--mobile { gap: 6px; }
  .tb__iconbtn { width: 44px; height: 44px; border-radius: 10px; }
}


/* =========================================================
   v17→v18 — Part 2 UX/UI: list-zone container cards,
   «← К доске» back link, размерные токены.
   ВСЁ светлое — никаких пересечений с body.page-production.
   ========================================================= */

/* Контейнер вокруг каждой зоны на /board?view=list.
   Светлый card-блок: белый фон, тонкая бежевая граница, 16px скругление.
   Заголовок (emoji + label + count) отделён от строк ≥12px дыхания. */
.list-view { display: flex; flex-direction: column; gap: 24px; }
.list-zone {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border: 1px solid #EAEAE6;
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(20, 20, 18, 0.02);
}
.list-zone__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px 0;          /* ≥12px дыхание перед списком */
  margin: 0 0 8px 0;
  border-bottom: 1px solid #F2F1EC;
  background: transparent;
}
.list-zone__head:hover { background: transparent; }
.list-zone__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
/* Нейтрально-серый count-бейдж — без цветовых акцентов. */
.list-zone__count,
.list-zone__count--draft_zone,
.list-zone__count--finance_zone,
.list-zone__count--paid_zone,
.list-zone__count--production_zone,
.list-zone__count--shipped_zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  background: #F2F1EC;
  color: #5C5C58;
  border: 1px solid #EAEAE6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.list-zone__chev { color: var(--text-mute); font-size: 11px; }
.list-zone__body { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }

/* Пустая зона — тонкая полоса без border-bottom и без раздувания. */
.list-zone--empty { padding: 10px 18px; gap: 0; }
.list-zone--empty .list-zone__head {
  padding: 0;
  margin: 0;
  border-bottom: none;
}
.list-zone--empty .list-zone__title { color: var(--text-mute); font-weight: 500; }

/* Узкая мобилка: те же контейнеры, но компактнее по горизонтали. */
@media (max-width: 720px) {
  .list-view { gap: 18px; }
  .list-zone { padding: 14px 14px 14px; border-radius: 14px; }
  .list-zone__head { padding-bottom: 10px; margin-bottom: 6px; }
}

/* «← К доске» — back-link на /orders/<id>. */
.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 22px 0;
  padding: 6px 10px 6px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 8px;
  transition: background 120ms, color 120ms, transform 80ms;
}
.detail__back:hover { background: #F2F1EC; color: var(--text); }
.detail__back:active { transform: translateX(-1px); }
.detail__back-arrow { font-size: 15px; line-height: 1; margin-top: -1px; }
@media (max-width: 720px) {
  .detail__back {
    margin: 10px 14px 0;
    padding: 8px 12px 8px 10px;     /* комфортный таргет на тачскрине */
    font-size: 14px;
  }
}

/* Защита от «🔥 🔥» дублирования: эмодзи приоритета вставляется только
   через row__fire — никаких ::before/::after на .row или статус-пилле. */
.row__fire { font-size: 13px; line-height: 1; margin-right: 4px; }


/* =========================================================
   v20→v21 — «Действия»: full-width внутри панели карточки заказа.
   Раньше .action имел min-width:220px и flex-wrap делал ряд кнопок
   с пустой половиной справа. Внутри .detail-actions колонка
   растягивает <details> и <summary> на всю ширину панели —
   и на десктопе (sticky-right ~340px), и на мобиле.
   ========================================================= */
.detail-actions .actions__row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.detail-actions .action {
  width: 100%;
  min-width: 0;            /* перебиваем общий min-width:220px */
  box-sizing: border-box;
}
.detail-actions .action__btn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.detail-actions .action__form {
  padding: 12px 14px 14px;
  background: #FAFAF8;
  border-top: 1px solid #EFEEEA;
}
.detail-actions .action__form .btn { width: 100%; }


/* =========================================================
   BOARD: иконочный switcher (Доска по умолчанию)
   + drag-and-drop состояния + reject-modal
   ВСЁ ПРИМЕНИМО ТОЛЬКО К СВЕТЛОЙ СТОРОНЕ — никаких body.page-production!
   ========================================================= */

/* ---- Единая панель управления /board: пилюли слева + switcher справа,
   один ряд (space-between), выровнен по контент-гайдам колонок (max-width
   1400 / боковой padding --space-5). Высота ряда определяется самой пилюлей
   (~44px), без лишнего вертикального «воздуха». */
.board-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  max-width: 1400px; margin: 0 auto;
  padding: var(--space-4) var(--space-5) 0;
}
/* Пилюли внутри панели не добавляют собственный внешний отступ — его задаёт
   .board-bar. Слева, занимают свободное место; на десктопе в одну строку. */
.board-bar .role-pills {
  flex: 1 1 auto; min-width: 0;
  padding: 0; margin: 0;
  flex-wrap: nowrap;
}
.board-bar .view-tabs--icons { flex: 0 0 auto; }

/* Иконочный switcher: минималистичный, без рамки/фона у контейнера —
   только сами иконки. Активный таб подсвечивается лёгкой подложкой
   (subtle fill), без вида «нажатой кнопки» с обводкой. */
.view-tabs--icons {
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.view-tab--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  color: var(--text-mute);
  transition: color 120ms, background 120ms;
}
.view-tab--icon:hover { color: var(--text); background: transparent; }
.view-tab--icon.view-tab--active {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  box-shadow: none;
}
.view-tab--icon svg { display: block; }

/* --- Drag-and-drop состояния --- */
.card[draggable="true"] { cursor: grab; }
.card[draggable="true"]:active { cursor: grabbing; }
.card--dragging { opacity: 0.45; }
/* Подсветка валидных колонок-целей. */
.column--drop-ok  { outline: 1px dashed var(--accent, #2563eb); outline-offset: -2px; }
.column--drop-over {
  outline: 2px solid var(--accent, #2563eb); outline-offset: -2px;
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--bg-elev));
}

/* «Отклонён» как drop-target — всегда виден. */
.rejected__summary {
  display: flex; align-items: center; gap: 8px;
  list-style: none; padding: 4px 0;
}
.rejected__summary::-webkit-details-marker { display: none; }
.rejected__label { font-weight: 500; color: var(--text); }
.rejected__count {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--text-mute);
}
.rejected__hint { color: var(--text-mute); font-size: 13px; }
.rejected--drop-ok { outline: 1px dashed var(--danger, #ef4444); outline-offset: -2px; }
.rejected--drop-over {
  outline: 2px solid var(--danger, #ef4444); outline-offset: -2px;
  background: color-mix(in srgb, var(--danger, #ef4444) 7%, var(--bg-elev));
}

/* --- Модал «Отклонить заказ» --- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); width: 100%; max-width: 460px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.modal__title { margin: 0; font-size: 17px; font-weight: 600; }
.modal__close {
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: var(--text-mute); cursor: pointer; padding: 0 4px;
}
.modal__close:hover { color: var(--text); }
.modal__body { padding: var(--space-4) var(--space-5); }
.modal__desc { margin: 0 0 var(--space-3); color: var(--text-dim); font-size: 14px; }
.modal__footer {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border); background: var(--bg-elev);
}
.field__input--area { min-height: 96px; resize: vertical; font-family: inherit; }

/* Кнопка-danger — для «Подтвердить» в модале отклонения. */
.btn--danger {
  background: var(--danger, #ef4444); color: #fff; border: 1px solid var(--danger, #ef4444);
}
.btn--danger:hover:not(:disabled) { filter: brightness(0.95); }
.btn--danger:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================================================================
   PREVIEW GALLERY — «визуальная память» заказа.
   Светлая часть (канбан, /orders/<id>, /orders/new). Dark-секция для
   /production отдельным блоком ниже под body.page-production.
   ========================================================================= */

/* ---- Чип превью на канбан-карточке (60×60) ---- */
.card__head { position: relative; }
/* ---- Per-tab paste-парсер (внутри каждой board-панели) ---- */
/* Раньше парсер жил единственным top-level блоком над формой; теперь —
   внутри КАЖДОГО таба доски, заполняет ТОЛЬКО эту доску + общие
   аксессуары (см. orders_new.js → bindTabParser). */
.tab-panel .tab-parser {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tab-panel .tab-parser .field { margin: 0; }
.tab-panel .tab-parser__actions {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}

/* ---- Kanban card layout (full-width text + bottom-right thumb) ----
   Структура карточки (все строки на ПОЛНУЮ ширину карточки):
     .card
       .card__head    — номер + (приоритет) + дата (текст).
       .card__title   — название (до 2 строк, line-clamp).
       .card__meta    — «N доска · N позиций» в ОДНУ строку (nowrap).
       .card__foot    — статус слева, превью справа в углу.

   Раньше превью жило сбоку (двухколонник), отжимая meta-строку — она
   ломалась на «2 доски · 9 / позиций». Теперь meta-строка получает всю
   ширину, а превью уезжает вниз-вправо. */
.card__title {
  /* До 2 строк, длинные имена не обрезаются грубо. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}
.card__meta {
  /* Одна строка, без переноса. Полная ширина карточки → не схлопывается. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;     /* статус-строка прижата к низу, если карточка тянется */
}
.card__foot .card__status { margin: 0; min-width: 0; }
.card__thumb {
  /* Превью в правом нижнем углу. Белый фон, без рамки, contain. */
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  background: #FFFFFF;
  border: 0;
  border-radius: 8px;
  object-fit: contain;
  object-position: right bottom;
  margin: 0;
}

/* ---- Галерея на /orders/<id> ---- */
.preview-gallery__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.preview-gallery__addform { margin: 0; }
.preview-gallery__addbtn { cursor: pointer; }
.preview-gallery__addinput {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.preview-gallery__empty {
  color: var(--muted); font-size: 14px; margin: 4px 0 0;
}
.preview-gallery__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* ---- Тайл превью (общий для detail и new) ---- */
.preview-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.preview-tile[draggable="true"] { cursor: grab; }
.preview-tile--dragging { opacity: 0.45; cursor: grabbing; }
.preview-tile--over {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.preview-tile__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent;
  cursor: zoom-in;
}
.preview-tile img {
  width: 100%; height: 100%;
  object-fit: contain;            /* пропорции, без crop — § спека */
  background: #f5f6f8;
  display: block;
}
.preview-tile__delform {
  position: absolute; top: 4px; right: 4px; margin: 0;
}
.preview-tile__del {
  width: 24px; height: 24px;
  border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.preview-tile__del:hover { background: rgba(239, 68, 68, 0.92); }

/* ---- /orders/new — staged tiles ---- */
.preview-stage__grid {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.preview-stage__grid .preview-tile { cursor: grab; }
.preview-stage__empty {
  grid-column: 1 / -1;
  color: var(--muted); font-size: 14px; margin: 0;
}
.preview-stage__addbtn { cursor: pointer; }
.preview-stage__addbtn input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.preview-tile__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  font-size: 11px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(15, 17, 21, 0.88);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  background: #fff;
  border-radius: 8px;
}
.lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: #111;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__close:hover { background: #fff; }
body.body--lb-open { overflow: hidden; }

/* =========================================================================
   PREVIEW STRIP на /production — ТОЛЬКО под body.page-production.
   Тонкая горизонтальная лента thumb'ов, без управления.
   ========================================================================= */
body.page-production .prod__previews {
  list-style: none; padding: 0; margin: 4px 0 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
body.page-production .prod__previewitem { margin: 0; }
body.page-production .prod__previewlink {
  display: block;
  width: 96px; height: 96px;
  border-radius: 6px; overflow: hidden;
  background: #0f1115;
  border: 1px solid #2a2e36;
  transition: border-color 0.12s;
}
body.page-production .prod__previewlink:hover {
  border-color: #4a5160;
}
body.page-production .prod__previews img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* =========================================================================
   SIZE-PAIR — парные ft↔cm инпуты в форме новой доски (Block-ордер 0007).
   Слева ft/inch (UI-конвертер, без name), справа cm (то, что улетает в DB).
   ========================================================================= */
.size-pair {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.size-pair__ft,
.size-pair__cm {
  flex: 1 1 0;
  min-width: 0;
}
.size-pair__sep {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  font-weight: 500;
  padding: 0 2px;
  user-select: none;
}

/* ============================================================
   Part 4 — Цвета: side toggle, carpet палитра, swatches.
   Светлая часть приложения. Тёмные оверрайды — внизу в
   `body.page-production` (swatches уже корректны: используют
   --swatch-color или класс-цвет напрямую, контраста хватает).
   ============================================================ */

/* Универсальный swatch — квадрат 14×14 с тонкой обводкой. */
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--swatch-color, #ccc);
  border: 1px solid rgba(0, 0, 0, 0.18);
  vertical-align: -2px;
  flex: 0 0 auto;
}
.swatch--inline { margin: 0 4px; }

/* Бинарные swatch'и для бортов. */
.swatch--white  { --swatch-color: #FFFFFF; border-color: rgba(0,0,0,0.32); }
.swatch--black  { --swatch-color: #1F1F1F; border-color: rgba(0,0,0,0.5); }
.swatch--gray   { --swatch-color: #9CA3AF; }
.swatch--red    { --swatch-color: #DC2626; }
.swatch--blue   { --swatch-color: #2563EB; }
.swatch--green  { --swatch-color: #16A34A; }
.swatch--yellow { --swatch-color: #FACC15; }
.swatch--orange { --swatch-color: #F97316; }

/* Side toggle — два варианта в один ряд. */
.side-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: #f4f4f5;
  border-radius: 8px;
  border: 1px solid #e4e4e7;
}
.side-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #52525b;
  user-select: none;
  transition: background 120ms, color 120ms;
}
.side-toggle__opt input { position: absolute; opacity: 0; pointer-events: none; }
.side-toggle__opt:has(input:checked) {
  background: #fff;
  color: #18181b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.side-toggle__chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.28);
}
.side-toggle__chip--white { background: #FFFFFF; }
.side-toggle__chip--black { background: #1F1F1F; }

/* Carpet palette — 8 круглых swatch + «не задан». */
.carpet-palette {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px;
  background: #f4f4f5;
  border-radius: 8px;
  border: 1px solid #e4e4e7;
}
.carpet-palette .swatch,
.carpet-palette__none {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--swatch-color, #fff);
  position: relative;
  outline: none;
  transition: transform 120ms, border-color 120ms;
}
.carpet-palette .swatch {
  /* внешний контур-обводка для видимости белого на белом фоне */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.carpet-palette__none {
  background: #fff;
  color: #71717a;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  border-color: #e4e4e7;
}
.carpet-palette .swatch:hover,
.carpet-palette__none:hover { transform: scale(1.08); }
.carpet-palette .swatch.is-active,
.carpet-palette__none.is-active {
  border-color: #18181b;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18),
              0 0 0 2px #fff,
              0 0 0 3px #18181b;
}
.carpet-palette__none.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #18181b;
}

/* Цветовая метка в карточке: «Борта: ■ Чёрный». */
.spec-color {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Двухстрочный размер доски в карточке заказа. */
.board-size {
  margin-top: 6px;
  font-size: 14px;
  color: #18181b;
  line-height: 1.3;
}
.board-size__primary { font-weight: 500; }
.board-size__secondary {
  font-size: 12px;
  color: #71717a;
  margin-top: 1px;
}
.board-size--inline {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
}

/* В тёмной /production-зоне muted-цвет должен быть видимым на тёмном фоне. */
body.page-production .board-size { color: #f4f4f5; }
body.page-production .board-size__secondary { color: rgba(244,244,245,0.55); }

/* ===========================================================
   Order Detail — единый язык с /orders/new и /board.
   Скоуп: только body.page-order-detail.
   Карточный паттерн заимствован у .form-section: те же токены
   --bg-elev / --border / --radius-lg / --space-*, та же
   типографика (DM Sans, 16/600 для заголовков секций, 14 body).
   /production не затрагиваем.
   =========================================================== */

body.page-order-detail { background: var(--bg); }

/* ---- Контейнер: ритм как у .form-page, но шире (есть правая колонка). ---- */
.sheet-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sheet-back {
  align-self: flex-start;
  margin: 0;
  padding: 6px 10px;
  color: var(--text-dim);
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.sheet-back:hover { color: var(--text); background: rgba(0,0,0,0.04); }

/* «← К доске» внутри формы создания/правки заказа. `.form-page` — block,
   поэтому даём ссылке явный inline-flex + нижний отступ, чтобы она встала
   отдельной строкой над заголовком формы (одинаково с `.sheet-wrap`). */
.form-page > .sheet-back {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: var(--space-4);
}

/* «Лист» теперь — вертикальный поток секций без обводки/тени/паддингов. */
.sheet      { display: flex; flex-direction: column; gap: var(--space-5); }
.sheet__body{ display: flex; flex-direction: column; gap: var(--space-4); }

/* Urgency — базовый fallback: тонкая цветная полоска над заголовочной
   карточкой (работает везде). В браузерах с поддержкой `:has()`
   прячем её и используем цветной box-shadow на самой карточке —
   тот же приём, что у .card.prio--* на /board. */
.sheet__urgency {
  height: 3px;
  border-radius: 3px;
}
.sheet__urgency--high   { background: #f59e0b; }
.sheet__urgency--urgent { background: #ef4444; }

@supports selector(:has(*)) {
  .sheet__urgency { display: none; }
  .sheet:has(.sheet__urgency--urgent) .sheet-title__text { box-shadow: inset 4px 0 0 #ef4444; }
  .sheet:has(.sheet__urgency--high)   .sheet-title__text { box-shadow: inset 4px 0 0 #f59e0b; }
}

/* =============== Общий «карточный» паттерн =============== */
.sheet-title__text,
.sheet-poster,
.sheet-section,
.side-card,
.appx {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* =============== Заголовок: компактная шапка ===============
   Постер справа убран; информации мало — гоним плотность.
   Структура: [#номер]  /  [H1 + статус-пиллы в одной строке]  /
   [одно-строчная мета «label: value · label: value · …»]. */
.sheet-title { display: block; }

/* Уменьшаем «карточный» padding/gap внутри текстового блока шапки —
   карточный паттерн `.sheet-title__text` объявлен выше с space-4 / space-3,
   здесь подтягиваем для density. */
.sheet-title__text {
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
}

.sheet-title__number {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}

/* H1 + пиллы — одна строка, пиллы прижаты вправо. */
.sheet-title__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.sheet-title__h {
  margin: 0;
  font-size: 24px;          /* было 28 — плотнее, но всё ещё доминирует */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  min-width: 0;
}
.sheet-title__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}
.status-pill__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Мета-ряд — inline «label · value» вместо двухуровневого dt/dd.
   Экономит ~1 строку на каждом пункте; визуально читается как подпись. */
.sheet-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  margin: 0;
  font-size: 13px;
}
.sheet-meta__item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.sheet-meta__item dt {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 500;
  text-transform: none;
}
.sheet-meta__item dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}

/* =============== Превью-карточка =============== */
.sheet-poster { gap: var(--space-3); }
.sheet-poster__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.poster__empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  color: var(--text-mute); font-size: 13px;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
/* Полоса превью — `[data-grid]` для DnD-reorder.
   Первый tile вытягивается во весь постер 4:5, остальные — мини 48×60. */
.poster__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.poster__strip .preview-tile {
  position: relative;
  width: 48px; height: 60px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.poster__strip .preview-tile:first-child {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  margin-bottom: 2px;
}
.poster__thumb {
  width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent;
  cursor: zoom-in;
  display: block;
}
.poster__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster__strip .preview-tile:first-child .poster__thumb img { object-fit: contain; }
.poster__strip .preview-tile .preview-tile__delform {
  position: absolute; top: 4px; right: 4px; margin: 0;
}
.poster__strip .preview-tile .preview-tile__del {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.poster__strip .preview-tile:not(:first-child) .preview-tile__delform { display: none; }
.preview-tile--dragging { opacity: 0.45; }
.preview-tile--over     { outline: 2px solid var(--accent); outline-offset: -2px; }
.poster__add { margin: 0; }
.poster__addbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 60px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  font-size: 22px;
  cursor: pointer;
  background: var(--surface);
}
.poster__addbtn input[type="file"] { display: none; }
.poster__addbtn:hover { border-color: var(--accent); color: var(--accent); }

/* =============== Сетка ниже заголовка =============== */
/* Две независимые колонки flex: высоты НЕ выравниваются между ними.
   Левая (main) растёт, правая (aside) фиксированной ширины и sticky. */
.sheet-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.sheet-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
/* Sidebar должен стоять СПРАВА от main — поэтому через :order,
   не меняя DOM-порядок (на мобайле .sheet-col растворяется через
   display:contents и :order перенимается секциями). */
.sheet-col--main  { flex: 1 1 auto; order: 1; }
.sheet-col--aside {
  flex: 0 0 320px;
  position: sticky;
  top: var(--space-4);
  order: 2;
}
.sheet-grid .gallery--mobile { display: none; }

/* =============== Side-card =============== */
.side-card { gap: var(--space-3); padding: var(--space-4); }
.side-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Действия — ghost-кнопки в столбик. */
.side-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.side-action { width: 100%; }
.side-action__btn {
  display: block;
  width: 100%;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.side-action__btn::-webkit-details-marker { display: none; }
.side-action__btn:hover { border-color: var(--text-mute); }
.side-action__btn--primary {
  background: var(--success); color: #fff; border-color: var(--success);
}
.side-action__btn--primary:hover { background: #128a3f; border-color: #128a3f; color: #fff; }
.side-action__btn--danger { color: var(--danger); border-color: rgba(229,72,77,0.35); }
.side-action__btn--danger:hover { background: rgba(229,72,77,0.08); }
.side-action__btn--disabled { opacity: 0.55; cursor: not-allowed; }
.side-action[data-noform] .side-action__form { display: none; }
.side-action[open] .side-action__form {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-top: var(--space-2);
}

/* Приоритет — segmented control в стиле .radio--prio. */
.prio-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.prio-toggle__seg {
  flex: 1;
  padding: 6px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  user-select: none;
}
/* Активный сегмент — сильный контраст, как активная фильтр-пилюля «Все · N»:
   тёмная заливка (--text) + белый текст. «🔥 Горящий» — красная заливка.
   Спецификача (0,3,0) намеренно выше, чем у `.prio-toggle__form
   .prio-toggle__seg { background: transparent }` ниже — иначе в editable-
   режиме заливка активного сегмента «съедалась» (это и был баг с еле
   заметным active-состоянием). */
.prio-toggle .prio-toggle__seg.is-active {
  background: var(--text);
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}
.prio-toggle .prio-toggle__seg--urgent.is-active {
  background: var(--danger, #dc2626);
  color: #ffffff;
}
/* Неактивные — обычный текст без заливки и рамки (легчайший hover ниже). */
.prio-toggle .prio-toggle__seg:not(.is-active) {
  background: transparent;
  color: var(--text-dim);
}

/* Inline-editable приоритет: каждый сегмент — submit-кнопка мини-формы.
   Делаем кнопки визуально неотличимыми от span'ов read-only варианта. */
.prio-toggle--editable { gap: 4px; }
.prio-toggle__form { flex: 1; margin: 0; display: flex; }
.prio-toggle__form .prio-toggle__seg {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: background 120ms ease, color 120ms ease;
}
.prio-toggle--editable .prio-toggle__seg:not(.is-active):hover {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}
.prio-toggle__form .prio-toggle__seg:focus-visible {
  outline: 2px solid var(--text-mute);
  outline-offset: 1px;
}

/* Трек-номер. */
.track-form { display: flex; flex-direction: column; gap: var(--space-2); }
.track-form .field__input { height: 40px; font-size: 14px; }
.track-form .btn { height: 40px; padding: 0 var(--space-4); font-size: 14px; width: 100%; }
.track-value {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* =============== Секция (Доски / Комплектация / ...) =============== */
.sheet-section { gap: var(--space-4); }
.sheet-section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sheet-comment {
  margin: 0;
  white-space: pre-wrap;
  font-size: 14px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ---- Доска ---- */
/* Каждая доска — самостоятельная карточка: thumb-квадрат слева + тело справа.
   Между карточками — расстояние, не разделитель. */
.board-list { display: flex; flex-direction: column; gap: var(--space-3); }
.board-entry {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}
.board-entry__thumb {
  flex: 0 0 160px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  /* Внутренний отступ, чтобы картинка не упиралась в рамку. */
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
}
.board-entry__thumb-img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.board-entry__thumb-add { width: 100%; height: 100%; margin: 0; }
.board-entry__thumb-addbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  width: 100%; height: 100%;
  cursor: pointer;
  color: var(--text-mute);
  font-size: 12px;
}
.board-entry__thumb-addbtn:hover { color: var(--text-dim); background: rgba(0,0,0,0.02); }
.board-entry__thumb-addbtn input[type="file"] { display: none; }
.board-entry__thumb-plus { font-size: 26px; line-height: 1; font-weight: 300; }
.board-entry__thumb-hint { font-size: 11px; letter-spacing: 0.02em; }
.board-entry__thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.board-entry__thumb-delform {
  position: absolute; top: 6px; right: 6px; margin: 0;
}
/* Кнопка удаления — всегда видима (доступность: touch + клавиатура).
   Полупрозрачная по умолчанию, ярче на hover/focus. */
.board-entry__thumb-del {
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: block;
  opacity: 0.7;
  transition: opacity 0.12s;
}
.board-entry__thumb-del:hover,
.board-entry__thumb-del:focus-visible,
.board-entry__thumb:hover .board-entry__thumb-del { opacity: 1; }
.board-entry__body {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* Overline-метка «Доска N» — мелкая капс-надпись над head'ом, плотно
   прижата к нему (negative margin), чтобы не отъедать лишнюю строку. */
.board-entry__kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 500;
  margin-bottom: -2px;
}
/* Шапка карточки доски: слева qty-chip, справа — inline-grid заголовок
   из 3 столбцов (категория · размер). Чтобы см-подстрочник встал ровно
   под «10'6 × 32"» (а не под началом «Прогулочная»), он кладётся в ту
   же 3-ю колонку grid-сетки, во второй ряд. */
.board-entry__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.board-entry__title {
  margin: 0;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  column-gap: 6px;
  row-gap: 0;
  align-items: baseline;
  justify-content: start;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
  min-width: 0;
}
.board-entry__title-cat { grid-column: 1; grid-row: 1; color: var(--text); }
.board-entry__title-sep {
  grid-column: 2; grid-row: 1;
  color: var(--text-mute);
  font-weight: 400;
}
.board-entry__title-size {
  grid-column: 3; grid-row: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
/* Секондари в см — та же 3-я колонка grid-сетки, что и ft/inch размер,
   во второй ряд → ровно под «10'6 × 32"». Мелкая муто-серая. */
.board-entry__size-cm {
  grid-column: 3; grid-row: 2;
  justify-self: start;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: 1px;
}
.board-entry__notes {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
  white-space: pre-wrap;
}

/* Чип количества — стиль .item-row__badge--accent с /orders/new. */
.qty-chip {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(110,123,255,0.08);
  color: var(--accent);
  border: 1px solid rgba(110,123,255,0.35);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

/* Спецификации — 2×2 сетка (Материал/Печать в первой строке,
   Борта/Ковёр во второй). На мобайле — одна колонка. */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
  row-gap: 6px;
  margin: 0;
}
.specs-grid__item {
  display: flex; gap: var(--space-2);
  align-items: baseline;
  font-size: 13.5px;
  min-width: 0;
}
.specs-grid__item dt {
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
}
.specs-grid__item dt::after { content: ":"; }
.specs-grid__item dd {
  margin: 0;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.spec-color { display: inline-flex; align-items: center; gap: 8px; }

/* Опции изготовления — амбер-блок dashed (родственно .form-section--warn). */
.opts-block {
  border: 1px dashed #fcd34d;
  border-radius: var(--radius-md);
  background: #fef9e7;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.opts-block__title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
}
.opts-block__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px;
  color: var(--text);
}
.opts-block__list .mono { color: #92400e; margin-right: 4px; }

/* ---- Комплектация ---- */
.acc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.acc-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.acc-row:first-child { border-top: 0; padding-top: 0; }
.acc-row__qty { color: var(--text-mute); font-size: 13px; }
.acc-row__name { color: var(--text); }
.acc-row__warn {
  margin-left: 8px;
  font-size: 11px;
  color: var(--danger);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(229,72,77,0.08);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.acc-row__notes { color: var(--text-mute); font-size: 13px; }

.packing-counter {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

/* ---- Мобильная галерея ---- */
.gallery--mobile .gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
}
.gallery--mobile .gallery__tile,
.gallery--mobile .gallery__add {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.gallery--mobile .preview-tile__open {
  width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent;
  cursor: zoom-in;
}
.gallery--mobile .preview-tile__open img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.gallery--mobile .preview-tile__delform {
  position: absolute; top: 4px; right: 4px; margin: 0;
}
.gallery--mobile .preview-tile__del {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.gallery--mobile .gallery__addbtn {
  display: flex;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border: 1px dashed var(--border);
  color: var(--text-mute);
  font-size: 28px;
  cursor: pointer;
  background: var(--surface);
}
.gallery--mobile .gallery__addbtn input[type="file"] { display: none; }
.gallery--mobile .gallery__add form { margin: 0; height: 100%; }

/* =============== Файлы / История — 2 колонки =============== */
.sheet-appendix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);   /* было space-4 — отделяем колонки заметно */
  row-gap: var(--space-5);
  margin-top: var(--space-5);   /* воздух перед футером */
}
.appx { gap: var(--space-3); }
.appx__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.appx-files__group { display: flex; flex-direction: column; gap: 6px; }
.appx-files__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding-bottom: 2px;
}
.appx-files__group-title {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}
.appx-files__upload { margin-left: auto; }
.appx-files__pick {
  display: inline-block;
  font-size: 13px;
  color: var(--accent);
  padding: 2px 6px;
  cursor: pointer;
}
.appx-files__pick input[type="file"] { display: none; }
.appx-files__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.appx-files__item {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: 14px;
  color: var(--text);
  border-top: 1px dashed var(--border);
}
.appx-files__item:first-child { border-top: 0; }
.appx-files__icon { font-size: 14px; color: var(--text-mute); }
.appx-files__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.appx-files__dl { color: var(--accent); font-size: 13px; }
.appx-files__dl:hover { text-decoration: underline; }
.appx-files__delform { margin: 0; }
.appx-files__del {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--danger); font-size: 14px;
  cursor: pointer; border-radius: 4px;
}
.appx-files__del:hover { background: rgba(229,72,77,0.08); }
.appx-files__empty { font-size: 13px; margin: 0; color: var(--text-mute); }

.appx-history { margin: 0; padding: 0; list-style: none; }
.appx-history__item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: 8px 0;
  border-top: 1px dashed var(--border);
  font-size: 14px;
}
.appx-history__item:first-child { border-top: 0; }
.appx-history__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
  margin-top: 6px;
}
.appx-history__main { color: var(--text); min-width: 0; }
.appx-history__main strong { color: var(--text); font-weight: 600; }
.appx-history__comment { color: var(--text-dim); }
.appx-history__time {
  color: var(--text-mute);
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* =============== Адаптив ≤920px =============== */
@media (max-width: 920px) {
  .sheet-wrap { padding: var(--space-4) var(--space-3); }
  .sheet      { gap: var(--space-4); }
  .sheet__body{ gap: var(--space-3); }

  /* Заголовок в одну колонку; десктоп-постер скрыт — превью отдельным блоком в сетке. */
  .sheet-title { gap: var(--space-3); }
  .sheet-title__headrow { gap: var(--space-2); }
  .sheet-poster { display: none; }
  .sheet-title__h { font-size: 24px; }

  /* Единая колонка. Обёртки .sheet-col растворяются — порядок секций
     задаётся через `order` (display:contents превращает их в transparent box). */
  .sheet-grid {
    flex-direction: column;
    gap: var(--space-3);
  }
  .sheet-col { display: contents; }
  .sheet-grid .s-priority         { order: 1; }
  .sheet-grid .s-actions          { order: 2; }
  .sheet-grid .s-track            { order: 3; }
  .sheet-grid .s-orphan-previews  { order: 4; }
  .sheet-grid .s-boards           { order: 5; }
  .sheet-grid .s-accessories      { order: 6; }
  .sheet-grid .s-packing          { order: 7; }
  .sheet-grid .s-comment          { order: 8; }

  /* На мобайле — превью доски сверху, тело снизу. */
  .board-entry { flex-direction: column; }
  .board-entry__thumb { flex-basis: auto; width: 100%; max-width: 240px; }

  .specs-grid     { grid-template-columns: 1fr; row-gap: 6px; }
  .sheet-appendix { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .sheet-meta     { column-gap: var(--space-4); row-gap: var(--space-2); }
}

@media (max-width: 480px) {
  .sheet-wrap { padding: var(--space-3); }
  .sheet-title__h { font-size: 22px; }
  .gallery--mobile .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   АРХИВ ЗАКАЗОВ — иконка-источник, баннер на детали, блок «Архив (N)» на доске.
   Все стили глобальные (используются и на /board, и на /orders/<id>).
   ============================================================================ */

/* Иконка-источник у номера заказа (карточка канбана, строка списка,
   ячейка таблицы, заголовок детали). Inline-bauble: не ломает ритм текста. */
.src-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  object-fit: contain;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.src-icon--lg {
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  margin-right: 8px;
}

/* Баннер «В архиве» в шапке детали заказа. */
.archive-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #fff7ed;            /* мягкий амбер-tint */
  border: 1px solid #fdba74;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #9a3412;
}
.archive-banner__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.archive-banner__date { font-size: 13px; }
.archive-banner__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Кнопка «В архив» внутри панели «Действия» — геометрия и зазор сверху
   как у остальных side-action-кнопок: gap контейнера .side-actions
   единый (var(--space-2)), своего margin-top тут быть НЕ должно, иначе
   расстояние над «В архив» удваивается. */
.side-action__archive {
  align-self: stretch;
}

/* Блок «Архив (N)» в самом низу доски. По умолчанию свёрнут (`<details>`
   без атрибута `open`). Карточный паттерн в общем визуальном языке.
   Геометрия должна совпадать с контентной областью `.kanban` внутри
   `.board-view`: max-width 1400px минус боковой padding (var(--space-5)) с двух
   сторон. На узких экранах `width: calc(100% - var(--space-5)*2)` оставляет
   те же боковые поля, что и у `.board-view`. */
.archive-block {
  max-width: calc(1400px - var(--space-5) * 2);
  width: calc(100% - var(--space-5) * 2);
  margin: var(--space-6) auto var(--space-5);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.archive-block__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  user-select: none;
}
.archive-block__summary::-webkit-details-marker { display: none; }
.archive-block__chev {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-dim);
}
.archive-block[open] .archive-block__chev { transform: rotate(0deg); }
.archive-block:not([open]) .archive-block__chev { transform: rotate(-90deg); }
.archive-block__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.archive-block__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Компактная строка в архив-листе — тот же ритм, что у `.row` в списке зон. */
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.archive-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.archive-row:last-child { border-bottom: 0; }
.archive-row__link {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.archive-row__link:hover { color: var(--accent); }
.archive-row__num {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.archive-row__title {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-row__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.archive-row__date {
  font-size: 13px;
  white-space: nowrap;
}
.archive-row__actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Модал-чекбокс «понимаю, что необратимо» — для hard-delete. */
.archive-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #991b1b;
  cursor: pointer;
}
.archive-modal__check input { margin-top: 2px; flex-shrink: 0; }
.modal__desc--warn {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

/* Мобайл: грид-строки архива сжимаем (статус/дата уходят на 2-ю «строку»). */
@media (max-width: 600px) {
  .archive-row { flex-wrap: wrap; }
  .archive-row__link {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num title"
      "status date";
  }
  .archive-row__num    { grid-area: num; }
  .archive-row__title  { grid-area: title; }
  .archive-row__status { grid-area: status; }
  .archive-row__date   { grid-area: date; justify-self: end; }
  .archive-row__actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   Block: order edit mode (lock-матрица, change log)
   ============================================================ */

/* Ноут рядом с label заблокированной секции/поля. */
.lock-note {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
}
.hint.lock-note {
  display: block;
  margin-left: 0;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-sm);
  color: #9a3412;
  font-size: 13px;
}

/* Read-only summary заблокированных досок (внутри edit-формы). */
.locked-items {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.locked-items__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.locked-items__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.locked-items__row {
  padding: 4px 0;
  font-size: 14px;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.locked-items__row:first-child { border-top: 0; }

/* Disabled-поля create-формы (используется браузером — стилизуем визуально). */
.order-form input:disabled,
.order-form select:disabled,
.order-form textarea:disabled {
  background: #f8fafc;
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.85;
}

/* История: запись правки полей (kind='edit') — серая точка + tag. */
.appx-history__item--edit .appx-history__dot {
  background: var(--text-dim);
  opacity: 0.5;
}
.appx-history__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  margin-right: 4px;
}

/* Кнопка-ссылка «Редактировать» — наследует side-action__btn, но как ссылка. */
.side-action__btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.side-action__btn--ghost:hover {
  background: #f8fafc;
}

/* ============================================================ */
/* Multi-board (Part 2-3): tabs, per-tab preview stage,         */
/* per-board galleries on detail и /production.                 */
/* ============================================================ */

/* ---- Tabs strip / panels ---- */
.boards-tabs { margin: 8px 0 16px; }
.boards-tabs__strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  padding: 0 0 6px;
  margin-bottom: 12px;
}
.boards-tabs__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  background: #f5f5f7; border: 1px solid #e5e7eb; border-radius: 8px;
  font: inherit; font-size: 13px; color: #1f2328;
  cursor: pointer;
}
.boards-tabs__tab.is-active {
  background: #111; color: #fff; border-color: #111;
}
.boards-tabs__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 1;
  border-radius: 4px; opacity: .6;
}
.boards-tabs__close:hover { opacity: 1; background: rgba(255,255,255,.15); }
.boards-tabs__tab:not(.is-active) .boards-tabs__close:hover { background: rgba(0,0,0,.06); }
.boards-tabs__panels { display: block; }
.tab-panel { display: block; }
.tab-panel[hidden] { display: none !important; }

/* ---- Per-tab preview stage ---- */
.preview-stage--tab {
  margin-top: 10px; padding: 10px 12px;
  background: #fafafa; border: 1px solid #eee; border-radius: 10px;
}
.preview-stage--tab .preview-stage__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.preview-stage--tab .preview-stage__title {
  margin: 0; font-size: 13px; font-weight: 600; color: #1f2328;
}

/* ---- Accessories zone (общий блок) ---- */
.accessories-zone { margin-top: 16px; }
/* Шапка блока «Аксессуары»: заголовок слева, кнопка «+ Аксессуар» справа. */
.accessories-zone__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 4px;
}
.accessories-zone__title {
  margin: 0; font-size: 13px; font-weight: 600; color: #1f2328;
}
.accessories-zone__hint { margin: 0 0 8px; color: #6b7280; font-size: 12px; }

/* ---- Per-board gallery on detail page (light) ---- */
.board-entry__gallery { margin-top: 12px; }
.board-entry__gallery-title {
  margin: 0 0 6px; font-size: 12px; font-weight: 600;
  color: #6b7280; text-transform: uppercase; letter-spacing: .03em;
}
.board-entry__gallery-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.board-entry__tile { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 6px; }
.board-entry__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-entry__add { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/5; border: 1px dashed #d1d5db; border-radius: 6px;
  background: #fafafa;
}
.board-entry__addbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 20px; color: #6b7280;
  cursor: pointer;
}
.board-entry__addbtn input[type="file"] { display: none; }
.board-entry__addbtn:hover { color: #111; background: #f3f4f6; border-radius: 6px; }

/* ---- /production: per-board previews (scoped к тёмной зоне).
   Планшет/десктоп (≥761px): чистый белый квадрат справа карточки доски,
   доска видна целиком (object-fit: contain), без кропа. Мобайл (≤760px)
   переопределяет размер/позицию своим блоком ниже. ---- */
body.page-production .prod__board-previews {
  list-style: none; padding: 0; margin: 0;
  grid-area: preview; align-self: start; justify-self: end;
  width: var(--prev-size-tablet);
  display: flex; flex-wrap: wrap; gap: 6px;
}
body.page-production .prod__board-previewitem {
  width: var(--prev-size-tablet); height: var(--prev-size-tablet); overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
body.page-production .prod__board-previewlink { display: block; width: 100%; height: 100%; }
body.page-production .prod__board-previewitem img {
  width: 100%; height: 100%; object-fit: contain; background: #fff; display: block;
}

/* ---- Role-aware фильтр-пилюли (верхний ряд /board): «Все» / «Требуют моих
   действий». Per-zone пилюли — отдельный ряд ниже (только в режиме «Список»). */
.role-pills {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: flex-start;
  padding: 12px 0 4px;
}
.role-pill {
  appearance: none; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; line-height: 1;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.role-pill:hover:not([disabled]) { color: var(--text); }
.role-pill--active {
  background: var(--text); color: #ffffff; border-color: var(--text);
}
.role-pill[disabled] { opacity: .45; cursor: not-allowed; }
.role-pill--action.role-pill--active {
  background: var(--success); border-color: var(--success); color: #ffffff;
}

/* CSS-фильтр «Требуют моих действий»: прячем элементы без data-флага.
   Source of truth — серверный _requires_my_action (см. orders.py). */
body.filter-requires-action .card:not([data-requires-action="1"]),
body.filter-requires-action .list-zone__body > li:not([data-requires-action="1"]),
body.filter-requires-action .orders-table tbody tr:not([data-requires-action="1"]) {
  display: none !important;
}
/* В режиме «Доска»: пустые колонки в этом режиме допустимы — заголовки
   остаются как ориентир, тело колонки просто пустеет. */

/* «Готов к оплате» — маленький бейдж рядом со статус-пилюлей в карточке.
   Только для status=invoice_issued (data-driven в шаблоне). Светлая зона. */
.card__badge {
  display: inline-block;
  font-size: 11px; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  margin-left: 6px; vertical-align: middle;
  white-space: nowrap; font-weight: 500;
  border: 1px solid transparent;
}
.card__badge--ready-to-pay {
  color: #15803d; background: #dcfce7; border-color: #86efac;
}

/* =========================================================
   MOBILE ADAPTATION PASS (≤760px) — light-side only.
   Тёмная зона /production не затронута (правила scoped под body.page-production).
   Десктоп ≥761px не трогается.
   ========================================================= */

@media (max-width: 760px) {
  /* Безопасная сетка: ничего не «торчит» за экран. Внутренние скроллеры
     (модалки, контейнеры с overflow:auto) продолжают работать. */
  html, body { overflow-x: hidden; }

  /* iOS safe-area: топбар (sticky, top:0) уходит ниже статус-бара/нотча,
     а нижний контент — выше home-indicator. viewport-fit=cover уже задан
     в <meta> base.html. Тёмный /production исключён (body.page-production) —
     там собственный layout, его не трогаем. */
  body:not(.page-production) .topbar { padding-top: calc(var(--space-3) + env(safe-area-inset-top)); }
  body:not(.page-production) { padding-bottom: env(safe-area-inset-bottom); }

  /* ---- Убираем view-switcher (Список/Таблица/Канбан) на мобиле полностью.
     В панели остаются только фильтры-пилюли. */
  .board-bar .view-tabs--icons { display: none !important; }
  /* Панель выровнена с боковыми отступами .kanban (var(--space-3)); пилюли
     скроллятся по горизонтали, если не помещаются. */
  .board-bar { padding: var(--space-3) var(--space-3) 0; }
  .board-bar .role-pills { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Канбан: вместо горизонтального скролла — вертикальная стопка зон.
     Карточки растягиваются на всю ширину. Override прежнего mobile-правила
     `grid-auto-flow: column` чуть выше (тот блок остаётся для совместимости,
     но эти селекторы перекрывают за счёт порядка/специфичности). */
  .kanban {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    gap: var(--space-4);            /* единый вертикальный ритм между зонами */
    padding: 0 var(--space-3);
  }
  .column { width: 100%; min-height: 0; }
  .column__body { padding: var(--space-3); }
  /* Пустая зона на мобайле — тонкая одностроковая шапка без тела.
     Тот же gap (--space-4) от .kanban обеспечивает «воздух» между
     соседними пустыми зонами — они больше не слипаются. */
  .column:has(.column__empty) { min-height: 0; }
  .column:has(.column__empty) .column__body { display: none; }
  .column:has(.column__empty) .column__header { border-bottom: 0; padding: 12px 14px; }

  /* ---- Список: фикс #S-NNN+title overlap. Колонка номера получала
     фикс. 56–64px, что мало для «#S-XXX» с иконкой источника — текст
     выезжал в соседнюю колонку и налезал на title. Делаем auto. */
  .row {
    grid-template-columns: 3px auto minmax(0, 1fr) auto auto;
  }

  /* ---- Ряд role-фильтра выровнен с боковыми отступами .kanban (var(--space-3)),
     чтобы первая пилюля «Все · N» не прилипала к краю экрана. */
  .role-pills { padding-left: var(--space-3); padding-right: var(--space-3); }

  /* ---- Tap-targets ≥44px для всего, чем можно ткнуть пальцем. */
  .tb__iconbtn { min-width: 44px; min-height: 44px; }
  .role-pill, .zone-pill { min-height: 44px; padding: 10px 16px; }
  .view-tab { min-width: 44px; min-height: 44px; }
  .side-action__btn, .btn, .btn--accent, .btn--primary, .btn--ghost { min-height: 44px; }
  .board-entry__thumb-del { width: 28px; height: 28px; font-size: 16px; }
}

/* ---- Деталь заказа на мобайле: единая колонка, все секции — на полную
   ширину. Боковая колонка уже растворяется через display:contents (≤920px),
   но дополнительно гарантируем, что её содержимое не зажато. */
@media (max-width: 760px) {
  .side-card, .sheet-section { width: 100%; max-width: none; }
  .side-actions { flex-direction: column; }
  .side-action, .side-action__btn { width: 100%; }
}

/* ---- Превью доски на мобайле: не «зажимать» в 160–240px, давать
   полную ширину контентной колонки (картинка contain — не клипается). */
@media (max-width: 760px) {
  .board-entry__thumb {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;       /* комфортнее под фото доски */
  }
}

/* ---- Зона «⛔ Отклонён» на мобайле: оформляем как обычную карточку-зону,
   чтобы блок не «выбивался» из общего ряда .column. На мобайле DnD не
   используется — подсказку «перетащите карточку сюда» прячем. */
@media (max-width: 760px) {
  .rejected {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: var(--space-4) var(--space-3) 0;   /* тот же gap от последней зоны .kanban */
    padding: 0;
  }
  .rejected__summary {
    padding: var(--space-3) var(--space-4);
    gap: 10px;
  }
  .rejected__label {
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase;
  }
  .rejected__count { margin-left: auto; }
  .rejected__hint { display: none; }     /* DnD-only подсказка, не нужна на тач-устройстве */
  .rejected__list {
    grid-template-columns: 1fr;
    padding: 0 var(--space-3) var(--space-3);
    margin-top: 0;
  }
}

/* ============================================================
   /production — мобильная адаптация (Ильмир, телефон ≤760px).
   Планшет/десктоп (≥761px) НЕ затрагиваются: всё строго внутри
   @media (max-width:760px) и под body.page-production. Тёмная тема
   сохранена — используем те же тёмные токены, что и на планшете.
   ============================================================ */

/* Новые мобильные элементы по умолчанию скрыты — на планшете/десктопе
   их быть не должно. Включаются ниже в @media (max-width:760px). */
body.page-production .prod__mtop,
body.page-production .prod__mlist,
body.page-production .prod__back { display: none; }

@media (max-width: 760px) {
  /* ---- Пульсирующая «онлайн»-точка (только CSS, без JS) ---- */
  @keyframes prod-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  }

  /* ---- Каркас: одна колонка, iOS safe-area сверху и снизу ---- */
  body.page-production .prod {
    padding: 14px;
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    gap: 16px;
  }

  /* ---- Планшетную шапку и нижний logout прячем, мобильную шапку — показываем ---- */
  body.page-production .prod__top { display: none; }
  body.page-production .prod__logout { display: none; }
  body.page-production .prod__mtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #14161b;
    border: 1px solid #1e2127;
    border-radius: 16px;
    padding: 14px 16px;
  }
  body.page-production .prod__mbrandbox {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
  }
  body.page-production .prod__mbrandrow {
    display: inline-flex; align-items: center; gap: 10px;
  }
  body.page-production .prod__mdot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
    animation: prod-pulse 1.6s infinite;
  }
  body.page-production .prod__mbrand {
    font-weight: 800; font-size: 21px; letter-spacing: .04em; color: #f4f4f6;
  }
  body.page-production .prod__msub { font-size: 13px; color: #8a8f99; }
  body.page-production .prod__mlogout { margin: 0; flex: none; }
  body.page-production .prod__mlogout button {
    min-height: 44px; padding: 10px 18px;
    border-radius: 12px; border: 1px solid #2a2f37;
    background: transparent; color: #c8ccd3;
    font-size: 15px; font-family: inherit; cursor: pointer;
  }
  body.page-production .prod__mlogout button:active { background: #1b1e24; }

  /* ---- Двухколоночную область прячем в режиме «список» ---- */
  body.page-production .prod__main { display: none; }

  /* ---- Мобильный список (две секции) ---- */
  body.page-production .prod__mlist { display: block; }
  body.page-production .prod__mcounter {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    color: #8a8f99; font-size: 14px; margin: 4px 2px 18px;
  }
  body.page-production .prod__mstatnum {
    font-size: 20px; font-weight: 700; color: #e6e8ec; margin: 0 1px;
  }
  body.page-production .prod__mstatdiv { color: #3a3f47; }
  body.page-production .prod__msection { margin-bottom: 22px; }
  body.page-production .prod__msectionlabel {
    letter-spacing: .14em; font-weight: 700; font-size: 12px;
    text-transform: uppercase; color: #8a8f99; margin-bottom: 10px;
  }
  body.page-production .prod__mempty {
    color: #6b6b78; font-size: 14px; margin: 0; padding: 4px 2px;
  }

  /* ---- Карточка списка (вся — ссылка, tap-target ≥44px) ---- */
  body.page-production .mcard {
    display: flex; flex-direction: column; gap: 7px;
    min-height: 44px; padding: 16px; margin-bottom: 12px;
    background: #14161b; border: 1px solid #1e2127;
    border-left: 3px solid transparent; border-radius: 16px;
    text-decoration: none; color: #e6e8ec;
  }
  body.page-production .mcard:active { background: #181b21; }
  body.page-production .mcard.prio--urgent { border-left-color: #ff5c5c; }
  body.page-production .mcard.prio--high   { border-left-color: #f5a623; }
  body.page-production .mcard__top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  body.page-production .mcard__num { font-size: 13px; color: #9a9aa6; }
  body.page-production .mcard__prio { margin-right: 4px; }
  body.page-production .mcard__deadline { font-size: 12px; color: #9a9aa6; white-space: nowrap; }
  /* Цветовое кодирование: янтарь — дедлайн ≤2 дней, красный — просрочено. */
  body.page-production .mcard__deadline.is-urgent  { color: #f5a623; }
  body.page-production .mcard__deadline.is-overdue { color: #ff6b6b; }
  body.page-production .mcard__title { font-size: 19px; font-weight: 700; color: #f4f4f6; line-height: 1.2; }
  body.page-production .mcard__summary { font-size: 13px; color: #9a9aa6; }
  body.page-production .mcard__stage {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; margin-top: 2px;
  }
  body.page-production .mcard__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: none;
  }

  /* ============================================================
     Экран «детали» (?id=<id> → .prod--mdetail).
     ============================================================ */
  /* В режиме деталей: прячем мобильный список и шапку-список,
     показываем правую колонку как единственный экран. */
  body.page-production .prod--mdetail .prod__mtop { display: none; }
  body.page-production .prod--mdetail .prod__mlist { display: none; }
  /* Базовый .prod__main — это grid 300px/1fr (двухколоночный планшет).
     На телефоне делаем его обычным полноширинным блоком, иначе колонка
     контента сжимается до 1fr-остатка и по краям видны тёмные поля. */
  body.page-production .prod--mdetail .prod__main {
    display: block; width: 100%; max-width: 100%; grid-template-columns: none;
  }
  body.page-production .prod--mdetail .prod__queue { display: none; }
  /* Базовый .prod__detail — тёмная карточка с padding 26/28. На телефоне
     это даёт двойную вложенность (карточка в карточке) и тёмные поля по
     бокам. Уплощаем: прозрачный фон, без рамки и боковых отступов —
     контент занимает всю ширину минус боковой padding самого .prod. */
  body.page-production .prod--mdetail .prod__detail {
    display: flex; flex-direction: column; gap: 18px;
    width: 100%; max-width: 100%;
    padding: 0; background: transparent; border: none; overflow: visible;
  }

  /* В режиме «список» правая колонка не нужна вовсе (на всякий случай). */
  body.page-production .prod__detail { display: none; }

  /* ---- Порядок секций на экране деталей (flex order) ----
     назад → заголовок+дедлайн → БОЛЬШАЯ кнопка → доски → опции →
     макеты → комплектация → трек. Главное действие — сразу под
     заголовком, Ильмиру не нужно скроллить. Конвейер/«СТАДИЯ» скрыты. */
  body.page-production .prod__back {
    display: inline-flex; align-items: center; order: -1;
    min-height: 44px; padding: 6px 2px; margin: 0;
    color: #c8ccd3; font-size: 15px; text-decoration: none;
  }
  body.page-production .prod__detailhead { order: 1; }
  body.page-production .prod__actions    { order: 2; }
  body.page-production .prod__boards     { order: 3; }
  body.page-production .prod__build      { order: 4; }
  body.page-production .prod__art        { order: 5; }
  body.page-production .packing,
  body.page-production .prod__mpack      { order: 6; }
  body.page-production .prod__sectionlabel--track { order: 7; }
  body.page-production .prod__trackbox   { order: 8; }

  /* Конвейер из 6 плиток на телефоне не показываем — текущая стадия видна
     в чипе карточки, следующая — в подписи большой кнопки. */
  body.page-production .prod__sectionlabel--stage,
  body.page-production .tiles--six { display: none; }

  /* ---- Заголовок деталей: КРУПНО, в одну колонку ---- */
  body.page-production .prod__detailhead {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 0; border: none; margin: 0;
  }
  body.page-production .prod__detailtitleblock { width: 100%; }
  body.page-production .prod__title { font-size: 28px; line-height: 1.15; font-weight: 800; }
  body.page-production .prod__metaline {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    font-size: 14px; color: #9a9aa6; margin-top: 6px;
  }
  body.page-production .prod__detailright {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
  }
  /* ---- Плашка дедлайна: янтарь по умолчанию, красная — просрочка ---- */
  body.page-production .prod__deadlinechip {
    background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.35);
    color: #f5b94a; font-size: 14px; padding: 7px 13px; border-radius: 999px;
  }
  body.page-production .prod__deadlinechip--overdue {
    background: rgba(255,92,92,0.12); border-color: rgba(255,92,92,0.4); color: #ff7a7a;
  }
  /* ---- Рабочий якорь «смотреть комплектацию ›» ---- */
  body.page-production .prod__pkglink {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
    color: #6cb8ff; font-size: 14px; text-decoration: none;
  }
  body.page-production .prod__pkglink:hover { color: #8fcaff; text-decoration: underline; }

  /* ---- Большая основная кнопка «следующий этап» (сразу под заголовком, ≥64px) ---- */
  body.page-production .prod__actions { margin: 2px 0 0; }
  body.page-production .prod__btnrow { flex-direction: column; gap: 10px; }
  body.page-production .btn-advance {
    width: 100%; min-height: 64px; font-size: 18px; font-weight: 700; border-radius: 14px;
  }
  /* Кнопка «Комментарий» на телефоне не нужна — упрощаем. */
  body.page-production .btn-comment { display: none; }

  /* ---- Доски: карточка в две колонки ----
     ВАЖНО: базовый .prod__boarditem — это grid `50px 1fr auto` в один ряд.
     На телефоне переопределяем сетку: СЛЕВА текстовый блок (кол-во + категория
     · размер, ниже — чипы), СПРАВА квадратное превью, занимающее ранее пустое
     место. SUP снимается сверху (кадр широкий) — поэтому квадрат + contain
     даёт чистый letterbox без сжатия в полоску и без портретного кропа.
     Размер квадрата адаптивный: 120px на стандартном экране, до 96px на узких
     (<360px) — через clamp(), без второго media-блока и без горизонтального
     скролла. ---- */
  body.page-production .prod__boardslist { display: flex; flex-direction: column; gap: 12px; }
  body.page-production .prod__boarditem {
    --prev-size: clamp(96px, 28vw, 120px);
    display: grid;
    /* Без превью — две колонки (правая схлопывается). */
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "qty   name"
      "chips chips";
    align-items: baseline;
    column-gap: 12px; row-gap: 8px;
    background: #1a1a1a; border: 1px solid #242424;
    border-radius: 16px; padding: 16px; margin: 0;
  }
  /* Есть превью — добавляем правую колонку под квадрат. */
  body.page-production .prod__boarditem:has(.prod__board-previews) {
    grid-template-columns: auto 1fr var(--prev-size);
    grid-template-areas:
      "qty   name  preview"
      "chips chips preview";
  }
  body.page-production .prod__boardqty { grid-area: qty; color: #9a9aa6; }
  body.page-production .prod__boardname {
    grid-area: name; min-width: 0;
    font-size: 18px; font-weight: 700; color: #f4f4f6; line-height: 1.25;
  }
  body.page-production .prod__boardname .board-size--inline {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  }
  body.page-production .prod__boardname .board-size__primary { font-size: 18px; font-weight: 700; }
  body.page-production .prod__boardname .board-size__secondary { font-size: 13px; }
  body.page-production .prod__boardchips {
    grid-area: chips; min-width: 0; flex-wrap: wrap; gap: 8px;
  }
  /* Правая колонка: квадратное превью, верх по верху номера. */
  body.page-production .prod__board-previews {
    grid-area: preview; align-self: start; justify-self: end;
    margin: 0; width: var(--prev-size);
  }
  body.page-production .prod__board-previewitem {
    width: var(--prev-size); height: var(--prev-size);
    aspect-ratio: auto; min-height: 0; max-height: none;
    background: #fff; border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px; overflow: hidden;
  }
  body.page-production .prod__board-previewlink { display: block; width: 100%; height: 100%; }
  body.page-production .prod__board-previewitem img {
    width: 100%; height: 100%; object-fit: contain;
    background: #fff; border-radius: 8px; display: block;
  }

  /* ---- Опции изготовления: ЛЁГКИЙ стиль (без рамки-карточки, простой
     серый заголовок, строки только с тонкими разделителями). Это справочная
     информация — визуального веса не требует. ---- */
  body.page-production .prod__build {
    background: transparent; border: none; border-radius: 0;
    padding: 0; margin-top: 0;
  }
  body.page-production .prod__buildtitle {
    color: #8a8f99; font-size: 13px; letter-spacing: .12em;
    text-transform: uppercase; margin: 0 0 10px;
  }
  body.page-production .prod__buildboard { display: none; }
  body.page-production .prod__buildlist { margin: 0; padding: 0; }
  body.page-production .prod__builditem {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 0; background: transparent; border: none;
    border-bottom: 1px solid #242424; border-radius: 0; font-size: 15px;
  }
  body.page-production .prod__builditem:last-child { border-bottom: none; }
  body.page-production .prod__buildqty { font-size: 15px; color: #9a9aa6; }
  body.page-production .prod__buildname { font-size: 15px; font-weight: 400; color: #e6e8ec; }
  body.page-production .prod__buildhint { margin-top: 8px; }

  /* ---- Комплектация: АКЦЕНТНЫЙ стиль (карточка с бирюзовой рамкой) +
     тап-чек-лист. Это то, с чем Ильмир реально работает — отмечает
     собранное, поэтому даём визуальный вес. Зазор сверху отделяет от
     «Опций». ---- */
  body.page-production .prod__mpack {
    display: block; margin-top: 12px;
    background: #14161b; border: 1px solid #34b5d6;
    border-radius: 14px; padding: 16px 18px;
  }
  body.page-production .prod--mdetail .prod__mpack { display: block; }
  body.page-production .prod__mpacktitle {
    display: flex; align-items: center; gap: 12px;
    letter-spacing: .12em; font-weight: 700; font-size: 14px;
    text-transform: uppercase; color: #34b5d6; margin: 0 0 14px;
  }
  body.page-production .prod__mpackcounter {
    font-size: 13px; font-weight: 600; letter-spacing: 0;
    background: rgba(52,181,214,.16); color: #5cc8e6;
    padding: 3px 10px; border-radius: 999px;
  }
  body.page-production .prod__mpacklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  body.page-production .prod__mpackitem { padding: 0; border: none; }
  /* Вся строка — тап-цель ≥44px (semantic button). */
  body.page-production .prod__mpackbtn {
    display: flex; align-items: center; gap: 14px; width: 100%;
    min-height: 56px; padding: 12px 14px;
    background: #101216; border: 1px solid #1e2127; border-radius: 12px;
    color: #e6e8ec; font: inherit; text-align: left; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  body.page-production .prod__mpackbtn:active { background: #14161b; }
  body.page-production .prod__mpackcheck {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border: 2px solid #2a2e36; border-radius: 8px;
    color: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  body.page-production .prod__mpackcheck svg { width: 20px; height: 20px; }
  body.page-production .prod__mpacktext { font-size: 16px; }
  body.page-production .prod__mpackqty { color: #7c828b; margin-right: 6px; }
  /* Упаковано: зелёный фон, галочка, чуть приглушённый текст (без зачёркивания). */
  body.page-production .prod__mpackitem.is-packed .prod__mpackbtn {
    background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.45);
  }
  body.page-production .prod__mpackitem.is-packed .prod__mpackcheck {
    background: #10B981; border-color: #10B981; color: #062513;
  }
  body.page-production .prod__mpackitem.is-packed .prod__mpacktext { color: #aeb4bd; }

  /* ---- Трек-номер: нейтральный серый плейсхолдер (не «алерт») ---- */
  body.page-production .prod__tracknone--desk { display: none; }
  body.page-production .prod__tracknone--m {
    display: inline; color: #7c828b; font-weight: 500; font-size: 15px;
  }

  /* ---- Вторичная ссылка «Отклонить» (если движок её вернул) ---- */
  body.page-production .prod__reject { margin-top: 12px; }
  body.page-production .prod__rejectlink {
    color: #ff8c8c; font-size: 14px; cursor: pointer;
    min-height: 44px; display: inline-flex; align-items: center;
  }
  body.page-production .prod__rejectform { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  body.page-production .prod__rejectbtn {
    min-height: 48px; border-radius: 12px; border: 1px solid #ff5c5c;
    background: transparent; color: #ff8c8c;
    font-size: 15px; font-family: inherit; cursor: pointer;
  }

  /* ---- Tap-targets ≥44px для всех ссылок/кнопок экрана ---- */
  body.page-production .mcard,
  body.page-production .prod__back,
  body.page-production .prod__pkglink { min-height: 44px; }
}