/* Компоненты портала. Все значения — var(--…) из tokens.css; инлайновые
   стили и магические числа — ошибка (контракт docs/ДИЗАЙН.md).
   Рабочие экраны плотнее лендинга (адаптация 4): поля и отступы секций
   24–40px вместо лендинговых 80–120px. Один акцентный цвет на экран —
   #0066CC; статусы и ошибки — семантические токены.
   Рабочая область 3D-вьюера тёмная (адаптация 3): стиль Apple живёт
   в обрамлении (шапка, карточки, панели, диалоги), не в самой сцене. */

/* ── База ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

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

body {
  font-family: var(--apple-font-text);
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-body);
  line-height: var(--apple-leading-body);
  letter-spacing: var(--apple-tracking-body);
  color: var(--tc-text-primary);
  background: var(--tc-bg-canvas-solid);
}

h1, h2, h3 {
  font-family: var(--apple-font-display);
  line-height: var(--apple-leading-title);
  letter-spacing: var(--apple-tracking-en-title);
  color: var(--tc-text-primary);
  margin: 0;
}

a { color: var(--tc-link); }
a:hover { color: var(--tc-link-hover); }

.noscript-note {
  padding: var(--apple-card-padding);
  text-align: center;
  color: var(--tc-text-secondary);
}

/* ── Шапка ────────────────────────────────────────────────────────────── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--tc-bg-panel);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
  box-shadow: var(--tc-shadow-sm);
}

.app-header-inner {
  max-width: var(--apple-content-max-width-lg);
  margin: 0 auto;
  padding: var(--tc-control-pad-y) var(--tc-screen-pad);
  display: flex;
  align-items: center;
  gap: var(--apple-component-gap-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
  text-decoration: none;
}

.brand-logo {
  width: var(--apple-card-padding-sm);
  height: var(--apple-card-padding-sm);
}

.brand-name {
  font-family: var(--apple-font-display);
  font-weight: var(--apple-weight-title-bold);
  letter-spacing: var(--apple-tracking-en-title-loose);
  color: var(--tc-text-primary);
}

.main-nav {
  display: flex;
  gap: var(--apple-component-gap-sm);
  flex-wrap: wrap;
}

.nav-link {
  position: relative; /* красный счётчик заявок позиционируется по углу ссылки */
  text-decoration: none;
  color: var(--tc-text-secondary);
  font-weight: var(--apple-weight-body-medium);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  border-radius: var(--apple-radius-button);
}

.nav-link:hover {
  color: var(--tc-text-primary);
  background: var(--tc-bg-soft);
}

.nav-link-active {
  color: var(--tc-link);
  background: var(--tc-bg-soft);
}

/* Красный счётчик неодобренных заявок у «Модерации» (shell.js, badgeId в
   NAV_ITEMS): маленькая красная точка с числом pending на верхнем углу ссылки.
   Виден только когда заявок больше нуля — класс nav-badge-show вешает shell.js
   из ответа /api/moderation/count; по умолчанию (и после одобрения всех) скрыт.
   Чисто токены: красный --tc-danger, белая цифра, радиус-кнопка = кружок. */
.nav-badge {
  position: absolute;
  top: calc(-1 * var(--tc-space-sm));
  right: calc(-1 * var(--tc-space-sm));
  min-width: calc(var(--tc-space-sm) * 2.5);
  height: calc(var(--tc-space-sm) * 2.5);
  padding: 0 var(--tc-space-xs);
  box-sizing: border-box;
  border-radius: var(--apple-radius-button);
  background: var(--tc-danger);
  color: var(--apple-text-white);
  font-size: var(--apple-font-size-caption);
  font-weight: var(--apple-weight-title-bold);
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.nav-badge.nav-badge-show { display: inline-flex; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--apple-component-gap-sm);
}

.version-chip {
  font-size: var(--apple-font-size-caption);
  color: var(--tc-text-tertiary);
  background: var(--tc-bg-soft);
  border-radius: var(--apple-radius-badge);
  padding: 0 var(--tc-control-pad-y);
}

.account-menu { position: relative; }

.account-summary {
  cursor: pointer;
  list-style: none;
  font-weight: var(--apple-weight-body-medium);
  color: var(--tc-text-primary);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  border-radius: var(--apple-radius-button);
  background: var(--tc-bg-soft);
}

.account-summary::-webkit-details-marker { display: none; }

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--tc-control-pad-y));
  min-width: var(--tc-menu-min-width);
  background: var(--tc-bg-panel);
  border-radius: var(--apple-radius-card-sm);
  box-shadow: var(--tc-shadow-modal);
  padding: var(--tc-control-pad-y);
  display: flex;
  flex-direction: column;
}

.account-role {
  font-size: var(--apple-font-size-caption-max);
  color: var(--tc-text-tertiary);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
}

.account-link {
  text-align: left;
  text-decoration: none;
  color: var(--tc-text-primary);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  border-radius: var(--apple-radius-card-sm);
  transition: transform var(--tc-hover-transition), background var(--tc-hover-transition), color var(--tc-hover-transition);
}

.account-link:hover { background: var(--tc-bg-soft); }

.account-logout { color: var(--tc-danger); }

/* Экран входа рисуется без шапки: body.bare прячет кабинетный хром. */
body.bare .app-header { display: none; }
body.bare { background: var(--tc-bg-canvas); }

/* ── Слот и экраны ────────────────────────────────────────────────────── */

.app-main {
  max-width: var(--apple-content-max-width-lg);
  margin: 0 auto;
  padding: var(--tc-screen-pad);
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--tc-screen-gap);
}

.screen-narrow {
  max-width: var(--apple-content-max-width);
  margin: 0 auto;
  width: 100%;
}

.screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.screen-title {
  font-size: var(--apple-font-size-subtitle-max);
  font-weight: var(--apple-weight-title-bold);
}

/* ── Карточки ─────────────────────────────────────────────────────────── */

.card {
  background: var(--tc-bg-panel);
  border-radius: var(--apple-radius-card);
  padding: var(--apple-card-padding-sm);
  box-shadow: var(--tc-shadow-card);
}

.card-title {
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title);
  margin-bottom: var(--tc-row-gap);
}

.subsection-title {
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-body-medium);
  margin: var(--tc-row-gap) 0;
}

.empty-card {
  text-align: center;
  padding: var(--apple-card-padding-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-row-gap);
}

.empty-title {
  font-size: var(--apple-font-size-subtitle);
  font-weight: var(--apple-weight-title);
}

.empty-note { color: var(--tc-text-secondary); margin: 0; }

/* ── Кнопки ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-control-pad-y);
  font-family: var(--apple-font-text);
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-body-medium);
  line-height: var(--apple-leading-body-tight);
  text-decoration: none;
  color: var(--tc-link);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-link);
  border-radius: var(--apple-radius-button);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  cursor: pointer;
  transition: transform var(--tc-hover-transition), box-shadow var(--tc-hover-transition), background var(--tc-hover-transition), color var(--tc-hover-transition), border-color var(--tc-hover-transition);
}

.btn:hover:not(:disabled) {
  color: var(--tc-link-hover);
  border-color: var(--tc-link-hover);
  box-shadow: var(--tc-shadow-sm);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

.btn-primary {
  background: var(--tc-link);
  border-color: var(--tc-link);
  color: var(--apple-text-white);
}

.btn-primary:hover:not(:disabled) {
  background: var(--tc-link-hover);
  border-color: var(--tc-link-hover);
  color: var(--apple-text-white);
}

.btn-primary:disabled { background: var(--tc-link); }

.btn-block { width: 100%; }

/* ── Бейджи статусов ──────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  border-radius: var(--apple-radius-badge);
  padding: 0 var(--tc-control-pad-y);
  background: var(--tc-bg-soft);
  color: var(--tc-text-secondary);
  white-space: nowrap;
}

.badge-status-created    { color: var(--tc-status-created); }
.badge-status-working    { color: var(--tc-status-working); }
.badge-status-approval   { color: var(--tc-status-approval); }
.badge-status-production { color: var(--tc-status-production); }
.badge-status-shipped    { color: var(--tc-status-shipped); }

/* ── Фильтры-чипы дашборда ────────────────────────────────────────────── */

.status-filters {
  display: flex;
  gap: var(--tc-control-pad-y);
  flex-wrap: wrap;
}

.filter-chip {
  position: relative;
  font: inherit;
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  color: var(--tc-text-secondary);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-button);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  cursor: pointer;
}

.filter-chip:hover { color: var(--tc-text-primary); }

.filter-chip-active {
  color: var(--tc-link);
  border-color: var(--tc-link);
}

/* Красный кружок-счётчик на верхнем углу вкладки статуса (docs/ДИЗАЙН.md,
   адаптация 9): формат = кружок «Модерации» (.nav-badge, v0.1.12) — маленький
   красный кружок с числом заказов в этом статусе, торчит над углом чипа.
   Виден, только когда заказов больше нуля (класс chip-badge-show вешает
   orders.js по данным прогона); при нуле кружка нет вообще. Клик по кружку
   = клик по вкладке (pointer-events: none). Чисто токены: красный
   --tc-danger (тёмная тема переопределяет его в слое --tc-*), белая цифра. */
.chip-badge {
  position: absolute;
  top: calc(-1 * var(--tc-space-sm));
  right: calc(-1 * var(--tc-space-sm));
  min-width: calc(var(--tc-space-sm) * 2.5);
  height: calc(var(--tc-space-sm) * 2.5);
  padding: 0 var(--tc-space-xs);
  box-sizing: border-box;
  border-radius: var(--apple-radius-button);
  background: var(--tc-danger);
  color: var(--apple-text-white);
  font-size: var(--apple-font-size-caption);
  font-weight: var(--apple-weight-title-bold);
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.chip-badge-show { display: inline-flex; }

/* ── Список заказов ───────────────────────────────────────────────────── */

.orders-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-row-gap);
}

.order-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--tc-hover-transition), transform var(--tc-hover-transition);
}

.order-card:hover {
  box-shadow: var(--tc-shadow-hover);
  transform: translateY(var(--tc-hover-lift));
}

.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  margin-bottom: var(--tc-control-pad-y);
}
.order-card-top-right {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
}

/* Кнопка-«мусорка» — удаление случайно созданных заказов (orders.js). */
.order-card-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: var(--apple-font-size-body);
  line-height: 1;
  color: var(--tc-danger);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-text-tertiary);
  border-radius: var(--apple-radius-badge);
  padding: var(--tc-control-pad-y);
  cursor: pointer;
  transition: border-color var(--tc-hover-transition), color var(--tc-hover-transition);
}
.order-card-del:hover { border-color: var(--tc-danger); color: var(--tc-danger); }

.order-number {
  font-family: var(--apple-font-display);
  font-weight: var(--apple-weight-title);
  color: var(--tc-link);
}

.order-patient { font-weight: var(--apple-weight-body-medium); }

.order-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
  font-size: var(--apple-font-size-caption-max);
  color: var(--tc-text-secondary);
  margin-top: var(--tc-control-pad-y);
}

/* ── Карточка заказа ──────────────────────────────────────────────────── */

.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.order-head-top {
  display: flex;
  align-items: center;
  gap: var(--tc-row-gap);
}

.order-head-meta {
  color: var(--tc-text-secondary);
  margin: var(--tc-control-pad-y) 0 0;
}

.order-head-actions {
  display: flex;
  gap: var(--tc-control-pad-y);
  flex-wrap: wrap;
}

.order-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-screen-gap);
  /* stretch: левая колонка тянется до высоты правой, чтобы 3D-мастерская
     заполняла экран, а не зависела от высоты канваса (иначе ResizeObserver
     и канвас раскручивают друг друга — баг v0.1.0, пойман ревью 10.09.2026). */
  align-items: stretch;
}

.order-left, .order-right {
  display: flex;
  flex-direction: column;
  gap: var(--tc-screen-gap);
  min-width: 0;
}

/* ── Вьюер: тёмная рабочая область (адаптация 3 ДИЗАЙН.md) ───────────── */

.viewer-card { padding: var(--tc-screen-pad); display: flex; flex-direction: column; flex: 1 1 auto; }

.viewer-host {
  position: relative;
  min-height: var(--tc-viewer-min-height);
  border-radius: var(--apple-radius-card-sm);
  background: var(--tc-bg-strong);
  overflow: hidden;
  flex: 1 1 auto;
}

/* Канвас ВНЕ потока: его размер не влияет на высоту хоста, иначе
   ResizeObserver → setSize → рост канвасa → рост хоста → бесконечная
   петля (баг v0.1.0). Размер канваса задаёт только хост. */
.viewer-host > canvas {
  position: absolute;
  inset: 0;
}

.viewer-host-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer-placeholder {
  color: var(--tc-text-on-strong);
  text-align: center;
  padding: var(--apple-card-padding);
  max-width: var(--apple-content-max-width);
}

.viewer-placeholder-title {
  font-family: var(--apple-font-display);
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title);
  margin: 0 0 var(--tc-control-pad-y);
}

.viewer-placeholder-note {
  color: var(--tc-text-tertiary);
  margin: 0;
}

.viewer-warnings { display: flex; flex-direction: column; gap: var(--tc-control-pad-y); }

.warning-row {
  color: var(--tc-warning);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

/* ── Модели и загрузка ────────────────────────────────────────────────── */

.model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.model-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--tc-row-gap);
  align-items: baseline;
  padding: var(--tc-control-pad-y) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.model-kind {
  font-size: var(--apple-font-size-caption-max);
  color: var(--tc-text-tertiary);
  white-space: nowrap;
}

.model-name {
  font-weight: var(--apple-weight-body-medium);
  overflow-wrap: anywhere;
}

.model-size {
  font-size: var(--apple-font-size-caption-max);
  color: var(--tc-text-secondary);
  white-space: nowrap;
}

.model-warning {
  grid-column: 1 / -1;
  color: var(--tc-warning);
  font-size: var(--apple-font-size-caption-max);
}

.upload-buttons {
  display: flex;
  gap: var(--tc-control-pad-y);
  flex-wrap: wrap;
  margin-top: var(--tc-row-gap);
}

.upload-btn { cursor: pointer; }

/* ── Личные настройки вида ────────────────────────────────────────────── */

.view-prefs { margin-top: var(--tc-row-gap); }

.prefs-list { display: flex; flex-direction: column; gap: var(--tc-control-pad-y); }

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
  padding: var(--tc-control-pad-y) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.pref-eye {
  display: flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
  cursor: pointer;
}

.pref-opacity {
  display: flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
}

/* ── План: кликабельные клавиши FDI (верхняя/нижняя челюсть) ── */

.fdi-grid {
  margin-bottom: var(--tc-row-gap);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-card);
  box-shadow: var(--tc-shadow-sm);
  padding: var(--tc-control-pad-x);
  overflow: hidden;
}

.fdi-jaw { margin-bottom: var(--tc-row-gap); }
.fdi-jaw:last-child { margin-bottom: 0; }

.fdi-jaw-title {
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  color: var(--tc-text-secondary);
  margin-bottom: var(--tc-control-pad-y);
}

.fdi-jaw-keys {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--tc-control-pad-y);
}

/* Клавиша зуба — кнопка с номером (11..48). */
.fdi-key {
  min-width: 0;
  font-family: var(--apple-font-display);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  line-height: 1;
  color: var(--tc-text-primary);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-text-tertiary);
  border-radius: var(--apple-radius-badge);
  padding: var(--tc-control-pad-y) 0;
  cursor: pointer;
  transition: transform var(--tc-hover-transition), background var(--tc-hover-transition), border-color var(--tc-hover-transition), color var(--tc-hover-transition);
}
.fdi-key:hover { border-color: var(--tc-link); color: var(--tc-link); }
.fdi-key:focus-visible { outline: var(--tc-border-width) solid var(--tc-link); outline-offset: 0; }

/* Выбранный зуб без конструкции — акцент-синий (#0066CC из токенов). */
.fdi-key-selected { background: var(--tc-link); border-color: var(--tc-link); color: var(--apple-text-white); }
.fdi-key-selected:hover { color: var(--apple-text-white); }

/* Выбранный зуб с конструкцией — «загорается» цветом конструкции (--tc-constr-*). */
.fdi-keys-constr-crown .fdi-key-lit { background: var(--tc-constr-crown); border-color: var(--tc-constr-crown); color: var(--apple-text-white); }
.fdi-keys-constr-bridge .fdi-key-lit { background: var(--tc-constr-bridge); border-color: var(--tc-constr-bridge); color: var(--apple-text-white); }
.fdi-keys-constr-inlay .fdi-key-lit { background: var(--tc-constr-inlay); border-color: var(--tc-constr-inlay); color: var(--apple-text-white); }
.fdi-keys-constr-veneer .fdi-key-lit { background: var(--tc-constr-veneer); border-color: var(--tc-constr-veneer); color: var(--apple-text-white); }
.fdi-keys-constr-removable .fdi-key-lit { background: var(--tc-constr-removable); border-color: var(--tc-constr-removable); color: var(--apple-text-white); }
.fdi-keys-constr-implant .fdi-key-lit { background: var(--tc-constr-implant); border-color: var(--tc-constr-implant); color: var(--apple-text-white); }

.plan-selected {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
  margin-bottom: var(--tc-control-pad-y);
}

.plan-actions {
  display: flex;
  gap: var(--tc-control-pad-y);
  flex-wrap: wrap;
  margin-top: var(--tc-row-gap);
}

/* ── Контрагент (chief) ──────────────────────────────────────────────── */

.assign-block { display: flex; flex-direction: column; gap: var(--tc-control-pad-y); }

.assign-current-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-control-pad-y);
  flex-wrap: wrap;
  padding-bottom: var(--tc-control-pad-y);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-control-pad-y);
}

.assign-name { font-weight: var(--apple-weight-body-medium); }

.assign-current {
  color: var(--tc-link);
  background: var(--tc-bg-soft);
}

/* ── Формы ────────────────────────────────────────────────────────────── */

.form-card { display: flex; flex-direction: column; gap: var(--tc-row-gap); }

.field { display: flex; flex-direction: column; gap: var(--tc-control-pad-y); }

.field-label {
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  color: var(--tc-text-secondary);
}

.input {
  font: inherit;
  color: var(--tc-text-primary);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-card-sm);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  box-shadow: var(--tc-shadow-sm);
}

.input:focus {
  outline: none;
  border-color: var(--tc-link);
}

.input-inline { width: auto; padding: 0 var(--tc-control-pad-y); }

.form-actions {
  display: flex;
  gap: var(--tc-control-pad-y);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.form-error {
  color: var(--tc-danger);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

.form-note {
  color: var(--tc-success);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

/* ── Чат ──────────────────────────────────────────────────────────────── */

.chat-list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-control-pad-y);
  max-height: var(--tc-viewer-min-height);
  overflow-y: auto;
  margin-bottom: var(--tc-row-gap);
}

.chat-item {
  background: var(--tc-bg-soft);
  border-radius: var(--apple-radius-card-sm);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
}

.chat-item-system {
  background: none;
  border-left: var(--tc-border-width) solid var(--tc-border);
  border-radius: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.chat-head {
  display: flex;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  margin-bottom: var(--tc-control-pad-y);
}

.chat-author { font-weight: var(--apple-weight-body-medium); }

.chat-time {
  font-size: var(--apple-font-size-caption);
  color: var(--tc-text-tertiary);
}

.chat-text { overflow-wrap: anywhere; }

.chat-form { display: flex; gap: var(--tc-control-pad-y); }
.chat-form .input { flex: 1; }

/* ── Модальный диалог ─────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--tc-overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-screen-pad);
  z-index: 20;
}

.modal {
  width: 100%;
  max-width: var(--apple-content-max-width);
  box-shadow: var(--tc-shadow-modal);
  padding: var(--apple-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--tc-row-gap);
}

.modal-title {
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title);
}

.modal-textarea { resize: vertical; }

/* ── Уведомления-попапы контрагенту (v0.1.20, docs/ДИЗАЙН.md адаптация 10) ──
   Компонент на существующих токенах (тёмная тема — без правок, адаптация 7). */

/* .modal-overlay задаёт display:flex — авторское правило перебивает UA-стиль
   [hidden] {display:none}, и окно «скрытое» остаётся на экране. Явно. */
.modal-overlay[hidden] { display: none; }

.notify-modal { max-width: var(--tc-notify-modal-max-width); }
.notify-order {
  font-weight: var(--apple-weight-title);
  font-size: var(--apple-font-size-subtitle-min);
}
.notify-text { color: var(--tc-text-secondary); margin: 0; }

/* ── Пользователи ─────────────────────────────────────────────────────── */

.user-create-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-row-gap);
}

.user-table { display: flex; flex-direction: column; }

.user-row {
  display: grid;
  grid-template-columns: minmax(var(--tc-user-col-login), 1fr) minmax(var(--tc-user-col-name), 2fr) minmax(var(--tc-user-col-role), 1.5fr) auto minmax(var(--tc-user-col-seen), 1fr); auto;
  gap: var(--tc-row-gap);
  align-items: center;
  padding: var(--tc-control-pad-y) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.user-row-head {
  font-size: var(--apple-font-size-caption);
  color: var(--tc-text-tertiary);
  font-weight: var(--apple-weight-body-medium);
}

.user-login { font-weight: var(--apple-weight-body-medium); }

.user-last-seen {
  font-size: var(--apple-font-size-caption-max);
  color: var(--tc-text-secondary);
}
.user-row-del {
  border: 0;
  background: transparent;
  color: var(--tc-danger);
  font-size: var(--apple-font-size-caption-max);
  line-height: 1;
  padding: var(--tc-control-pad-y);
  cursor: pointer;
}
.user-row-del:hover { opacity: 0.7; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
  cursor: pointer;
}

/* ── Аккаунт ──────────────────────────────────────────────────────────── */

.account-identity {
  display: flex;
  align-items: center;
  gap: var(--tc-row-gap);
  margin-bottom: var(--tc-row-gap);
}

.account-avatar {
  width: var(--tc-avatar-size);
  height: var(--tc-avatar-size);
  border-radius: var(--apple-radius-button);
  object-fit: cover;
  background: var(--tc-bg-soft);
  flex-shrink: 0;
}

.account-avatar-empty { box-shadow: var(--tc-shadow-sm); }

.account-name {
  font-family: var(--apple-font-display);
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title);
}

.account-role-line {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

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

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-screen-pad);
}

.login-card {
  width: 100%;
  max-width: var(--tc-login-card-max-width);
  padding: var(--apple-card-padding-lg);
  display: flex;
  flex-direction: column;
  gap: var(--tc-row-gap);
  text-align: center;
}

.login-logo {
  width: var(--tc-avatar-size);
  height: var(--tc-avatar-size);
  margin: 0 auto;
}

.login-title {
  font-size: var(--apple-font-size-subtitle-max);
  font-weight: var(--apple-weight-title-bold);
  letter-spacing: var(--apple-tracking-en-title-loose);
}

.login-subtitle {
  color: var(--tc-text-secondary);
  margin: 0 0 var(--tc-control-pad-y);
}

.login-card .field { text-align: left; }

.login-toggle {
  font: inherit;
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-body-medium);
  color: var(--tc-link);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-link);
  border-radius: var(--apple-radius-button);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  cursor: pointer;
  transition: transform var(--tc-hover-transition), box-shadow var(--tc-hover-transition), background var(--tc-hover-transition), color var(--tc-hover-transition), border-color var(--tc-hover-transition);
}
.login-toggle:hover:not(:disabled) {
  color: var(--tc-link-hover);
  border-color: var(--tc-link-hover);
  box-shadow: var(--tc-shadow-sm);
}
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--tc-row-gap);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: var(--tc-border-width);
  background: var(--tc-bg-soft);
}
.login-notice {
  text-align: left;
  font-size: var(--apple-font-size-body);
  line-height: var(--apple-leading-body-tight);
  color: var(--tc-success);
  background: var(--tc-bg-soft);
  border-radius: var(--apple-radius-card-sm);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
}
.btn-danger {
  color: var(--tc-danger);
  border-color: var(--tc-danger);
}
.btn-danger:hover:not(:disabled) {
  color: var(--apple-text-white);
  background: var(--tc-danger);
  border-color: var(--tc-danger);
  box-shadow: var(--tc-shadow-sm);
}
/* Экран «Модерация» (moderation.js): карточка входящей заявки */
.mod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  padding: var(--tc-control-pad-y) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}
.mod-row:last-child { border-bottom: none; }
.mod-main { display: flex; flex-direction: column; gap: var(--tc-control-pad-y); }
.mod-name { font-weight: var(--apple-weight-title); }
.mod-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-row-gap);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}
.mod-actions { display: flex; gap: var(--tc-row-gap); flex-shrink: 0; }

/* ── Адаптив (брейкпоинты design-tokens.md §9: 734/1068/1440px —
      в @media var() не работает, числа те же, что в токенах) ─────────── */

@media (min-width: 734px) {
  .orders-list { grid-template-columns: repeat(2, 1fr); }
  .user-create-form { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1068px) {
  .app-main { padding: var(--tc-screen-pad-lg); }
  .order-columns { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .orders-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1440px) {
  .orders-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 733px) {
  .app-header-inner { flex-wrap: wrap; gap: var(--tc-control-pad-y); }
  .main-nav { order: 3; width: 100%; }
  .user-row { grid-template-columns: 1fr 1fr; }
  .user-row-head { display: none; }
}

/* ─── Инференс BoundPred ─────────────────────────────────────────────────── */
.infer-block {
  margin-top: var(--tc-space-md);
  padding: var(--tc-space-md);
  background: var(--tc-surface-2);
  border-radius: var(--apple-radius-badge);
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}
.infer-label {
  font-weight: 600;
  font-size: var(--tc-font-size-small);
  white-space: nowrap;
}
.infer-fdi-input {
  width: var(--tc-infer-input-width) !important;
  text-align: center;
}
.infer-status {
  font-size: var(--tc-font-size-caption-sm);
  color: var(--tc-text-secondary);
  width: 100%;
  margin-top: var(--tc-space-xs);
}

/* ── Тема оформления (Профиль, v0.1.13) ───────────────────────────────────
   Переключатель «Светлая/Тёмная» в карточке профиля: две круглые кнопки,
   активная — акцент-синим (--tc-link), выбор сохраняется в localStorage и
   применяется до первой отрисовки (index.html). Чисто токены, как весь css. */
.theme-toggle {
  display: inline-flex;
  gap: var(--tc-space-sm);
  margin-top: var(--tc-space-sm);
}

.theme-toggle-btn {
  font: inherit;
  font-size: var(--apple-font-size-body);
  color: var(--tc-text-primary);
  background: var(--tc-bg-soft);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-button);
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  cursor: pointer;
  transition: transform var(--tc-hover-transition), background var(--tc-hover-transition), border-color var(--tc-hover-transition), color var(--tc-hover-transition);
}

.theme-toggle-btn:hover {
  border-color: var(--tc-link);
  color: var(--tc-link);
}

.theme-toggle-active {
  background: var(--tc-link);
  border-color: var(--tc-link);
  color: var(--tc-text-on-accent);
}

.theme-toggle-active:hover {
  color: var(--tc-text-on-accent);
}

/* ── Состояния кнопок (docs/ДИЗАЙН.md, адаптация 8): нажатие, фокус,
       reduced-motion ──────────────────────────────────────────────────── */
.btn:active:not(:disabled),
.login-toggle:active:not(:disabled),
.theme-toggle-btn:active:not(:disabled),
.fdi-key:active,
.account-link:active {
  transform: scale(var(--tc-press-scale));
  box-shadow: inset 0 0 0 100vmax var(--tc-press-overlay);
  transition-duration: var(--tc-press-transition);
}

.btn:focus-visible,
.login-toggle:focus-visible,
.theme-toggle-btn:focus-visible,
.account-link:focus-visible {
  outline: var(--tc-border-width) solid var(--tc-link);
  outline-offset: 0;
}

/* Уменьшение движения: смена состояний мгновенная и видимая, масштаб
   не анимируется (transition-duration/scale — только в этом блоке). */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .login-toggle,
  .theme-toggle-btn,
  .fdi-key,
  .account-link {
    transition-duration: 0.01ms;
  }
  .btn:active:not(:disabled),
  .login-toggle:active:not(:disabled),
  .theme-toggle-btn:active:not(:disabled),
  .fdi-key:active,
  .account-link:active {
    transform: none;
  }
}

/* ── Очередь заказов: таблица и фильтры (E2, docs/platform-spec/
   frontend-design.md F02, D01–D02) ─────────────────────────────────────
   Компонент собран из семантических токенов --tc-*: рабочий экран плотный,
   поэтому размеры строк/колонок вынесены в tokens.css, а не «на глаз».
   На узком экране таблица превращается в карточки (D02, 390×844): на
   такой ширине столбцы не читаются, а прятать данные нельзя. */

.visually-hidden {
  position: absolute;
  width: var(--tc-sr-size);
  height: var(--tc-sr-size);
  margin: calc(-1 * var(--tc-sr-size));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.orders-title-block { display: flex; flex-direction: column; gap: var(--tc-space-xs); }

.orders-count {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

/* ── Панель поиска и фильтров ────────────────────────────────────────── */

.orders-screen [hidden] { display: none; }

.orders-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--tc-toolbar-gap);
  padding: var(--tc-toolbar-pad);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-table-radius);
}

.orders-search-row {
  display: flex;
  align-items: center;
  gap: var(--tc-toolbar-gap);
  flex-wrap: wrap;
}

.orders-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 var(--tc-search-max-width);
  max-width: var(--tc-search-max-width);
}

.orders-search-icon {
  position: absolute;
  left: var(--tc-control-pad-x);
  width: var(--tc-status-icon-size);
  height: var(--tc-status-icon-size);
  color: var(--tc-text-tertiary);
  pointer-events: none;
}

.orders-search-input {
  width: 100%;
  min-height: var(--tc-control-height);
  padding-left: calc(var(--tc-control-pad-x) * 2);
}

.orders-search-input:focus-visible {
  outline: var(--tc-border-width) solid var(--tc-link);
  outline-offset: 0;
}

.orders-hint { position: relative; }

.orders-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tc-control-height);
  height: var(--tc-control-height);
  color: var(--tc-text-secondary);
  background: var(--tc-bg-soft);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-button);
  font-weight: var(--apple-weight-title);
  cursor: pointer;
  list-style: none;
}

.orders-hint-btn::-webkit-details-marker { display: none; }

.orders-hint-btn:focus-visible,
.orders-hint-btn:hover {
  border-color: var(--tc-link);
  color: var(--tc-link);
  outline: none;
}

.orders-hint-pop {
  position: absolute;
  top: calc(100% + var(--tc-space-sm));
  left: 0;
  z-index: var(--tc-menu-z);
  max-width: var(--tc-tooltip-max-width);
  padding: var(--tc-toolbar-pad);
  background: var(--tc-bg-panel);
  color: var(--tc-text-secondary);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-table-radius);
  box-shadow: var(--tc-shadow-card);
  font-size: var(--apple-font-size-caption-max);
  line-height: var(--apple-leading-body);
}

.orders-hint-pop p { margin: 0; }

.orders-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tc-filter-max-width), 1fr));
  gap: var(--tc-toolbar-gap);
  align-items: end;
}

.orders-filter {
  display: flex;
  flex-direction: column;
  gap: var(--tc-control-pad-y);
  min-width: 0;
}

.orders-filter .input {
  min-height: var(--tc-control-height);
  width: 100%;
}

.orders-check {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
  min-height: var(--tc-control-height);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
  cursor: pointer;
}

.orders-check input { width: var(--tc-status-icon-size); height: var(--tc-status-icon-size); }

.orders-active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-control-pad-y);
}

.orders-active:empty { display: none; }

.orders-active-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
  padding: var(--tc-space-xs) var(--tc-control-pad-y);
  color: var(--tc-link);
  background: var(--tc-bg-soft);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-button);
  font-size: var(--apple-font-size-caption-max);
}

.orders-active-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tc-status-icon-size);
  height: var(--tc-status-icon-size);
  padding: 0;
  color: var(--tc-text-secondary);
  background: none;
  border: 0;
  border-radius: var(--apple-radius-button);
  cursor: pointer;
  line-height: 1;
}

.orders-active-remove:hover { color: var(--tc-danger); }

.orders-active-remove:focus-visible,
.orders-reset:focus-visible,
.orders-view-btn:focus-visible,
.filter-chip:focus-visible,
.orders-del:focus-visible,
.orders-link:focus-visible,
.orders-columns summary:focus-visible {
  outline: var(--tc-border-width) solid var(--tc-link);
  outline-offset: 0;
}

/* ── Плашка «список обновился» ───────────────────────────────────────── */

.orders-updated {
  display: flex;
  align-items: center;
  gap: var(--tc-toolbar-gap);
  flex-wrap: wrap;
  padding: var(--tc-banner-pad);
  background: var(--tc-bg-soft);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-table-radius);
}

.orders-updated[hidden] { display: none; }

.orders-updated-text {
  flex: 1 1 var(--tc-search-max-width);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

/* ── Строка вида: сколько показано, плотность, столбцы ───────────────── */

.orders-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-toolbar-gap);
  flex-wrap: wrap;
}

.orders-shown {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.orders-view-actions {
  display: flex;
  align-items: center;
  gap: var(--tc-toolbar-gap);
  flex-wrap: wrap;
}

.orders-density {
  display: inline-flex;
  gap: var(--tc-space-xs);
  padding: var(--tc-space-xs);
  background: var(--tc-bg-soft);
  border-radius: var(--apple-radius-button);
}

.orders-view-btn {
  font: inherit;
  font-size: var(--apple-font-size-caption-max);
  color: var(--tc-text-secondary);
  background: none;
  border: var(--tc-border-width) solid transparent;
  border-radius: var(--apple-radius-button);
  padding: var(--tc-space-xs) var(--tc-control-pad-y);
  cursor: pointer;
  list-style: none;
}

.orders-view-btn::-webkit-details-marker { display: none; }

.orders-view-btn:hover { color: var(--tc-text-primary); }

.orders-view-btn-active {
  color: var(--tc-link);
  background: var(--tc-bg-panel);
  border-color: var(--tc-link);
}

.orders-columns { position: relative; }

.orders-columns-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--tc-space-xs));
  z-index: var(--tc-menu-z);
  min-width: var(--tc-columns-menu-min-width);
  display: flex;
  flex-direction: column;
  gap: var(--tc-control-pad-y);
  padding: var(--tc-toolbar-pad);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-table-radius);
  box-shadow: var(--tc-shadow-card);
}

.orders-column-option {
  display: flex;
  align-items: center;
  gap: var(--tc-control-pad-y);
  color: var(--tc-text-primary);
  font-size: var(--apple-font-size-caption-max);
  cursor: pointer;
}

.orders-column-option input { width: var(--tc-status-icon-size); height: var(--tc-status-icon-size); }

/* ── Таблица ─────────────────────────────────────────────────────────── */

.orders-panel { min-height: var(--tc-orders-panel-min-height); }

.orders-table-wrap {
  overflow-x: auto;
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-table-radius);
}

.orders-table {
  width: 100%;
  min-width: var(--tc-table-min-width);
  border-collapse: collapse;
  font-size: var(--tc-table-font-size);
  color: var(--tc-text-primary);
}

.orders-th {
  position: sticky;
  top: 0;
  z-index: var(--tc-table-head-z);
  padding: var(--tc-table-head-pad-y) var(--tc-table-cell-pad-x);
  background: var(--tc-table-head-bg);
  color: var(--tc-text-secondary);
  font-size: var(--tc-table-head-font-size);
  font-weight: var(--apple-weight-body-medium);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.orders-td {
  padding: var(--tc-table-cell-pad-y) var(--tc-table-cell-pad-x);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
  vertical-align: top;
}

.orders-density-compact .orders-td { padding: var(--tc-space-xs) var(--tc-table-cell-pad-x); }
.orders-density-compact .orders-th { padding: var(--tc-space-sm) var(--tc-table-cell-pad-x); }

.orders-row:last-child .orders-td { border-bottom: 0; }

.orders-row { cursor: pointer; }

.orders-row:hover .orders-td { background: var(--tc-table-row-hover-bg); }

.orders-th-public_id, .orders-td-public_id { width: var(--tc-table-col-number); }
.orders-th-patient, .orders-td-patient { width: var(--tc-table-col-patient); }
.orders-th-clinic, .orders-td-clinic { width: var(--tc-table-col-clinic); }
.orders-th-works, .orders-td-works { width: var(--tc-table-col-works); }
.orders-th-assignee, .orders-td-assignee { width: var(--tc-table-col-assignee); }
.orders-th-status, .orders-td-status { width: var(--tc-table-col-status); }
.orders-th-due, .orders-td-due { width: var(--tc-table-col-due); }
.orders-th-priority, .orders-td-priority { width: var(--tc-table-col-priority); }
.orders-th-updated, .orders-td-updated { width: var(--tc-table-col-updated); }
.orders-th-actions, .orders-td-actions { width: var(--tc-table-col-actions); }

.orders-link {
  white-space: nowrap;
  color: var(--tc-link);
  font-weight: var(--apple-weight-title);
  text-decoration: none;
}

.orders-link:hover { color: var(--tc-link-hover); text-decoration: underline; }

.orders-patient { font-weight: var(--apple-weight-body-medium); }

.orders-status {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-xs);
  /* Текст статуса — основным цветом: оранжевый/зелёный акценты на мягкой
     заливке не добирают 4.5:1. Цвет и форма остаются в значке (графика
     требует 3:1), а название статуса читается как обычный текст. */
  color: var(--tc-text-primary);
}

.orders-status-icon {
  width: var(--tc-status-icon-size);
  height: var(--tc-status-icon-size);
  flex: none;
  color: var(--tc-text-secondary);
}

.orders-status.badge-status-created .orders-status-icon { color: var(--tc-status-created); }
.orders-status.badge-status-working .orders-status-icon { color: var(--tc-status-working); }
.orders-status.badge-status-approval .orders-status-icon { color: var(--tc-status-approval); }
.orders-status.badge-status-production .orders-status-icon { color: var(--tc-status-production); }
.orders-status.badge-status-shipped .orders-status-icon { color: var(--tc-status-shipped); }

.orders-due { white-space: nowrap; }

.orders-overdue {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-xs);
  margin-left: var(--tc-space-xs);
  color: var(--tc-danger);
  font-size: var(--apple-font-size-caption);
  font-weight: var(--apple-weight-body-medium);
  white-space: nowrap;
}

.orders-priority {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-xs);
  /* Как и статус: название — основным цветом, цвет остаётся в точке-маркере.
     «Срочный» и «Высокий» различаются словом, а не только оттенком. */
  color: var(--tc-text-primary);
  white-space: nowrap;
}

.orders-priority::before {
  content: "";
  width: var(--tc-priority-mark-size);
  height: var(--tc-priority-mark-size);
  border-radius: var(--apple-radius-button);
  background: var(--tc-text-secondary);
}

.orders-priority-urgent::before { background: var(--tc-danger); }
.orders-priority-high::before { background: var(--tc-warning); }
.orders-priority-normal::before { background: var(--tc-text-secondary); }
.orders-priority-low::before { background: var(--tc-text-tertiary); }

.orders-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tc-control-height);
  height: var(--tc-control-height);
  padding: 0;
  color: var(--tc-danger);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-badge);
  cursor: pointer;
}

.orders-del:hover { border-color: var(--tc-danger); }

/* ── Низ таблицы и состояния ─────────────────────────────────────────── */

.orders-footer {
  display: flex;
  align-items: center;
  gap: var(--tc-toolbar-gap);
  flex-wrap: wrap;
}

.orders-footer[hidden] { display: none; }

.orders-footer-note {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.orders-error { border: var(--tc-border-width) solid var(--tc-border); }

.orders-error-id { margin: 0; color: var(--tc-text-tertiary); font-size: var(--apple-font-size-caption-max); }
.orders-error-id code { color: var(--tc-text-secondary); }
.orders-error-list { margin: 0; padding-left: var(--tc-row-gap); color: var(--tc-text-secondary); text-align: left; }
.orders-error-actions { display: flex; gap: var(--tc-control-pad-y); flex-wrap: wrap; justify-content: center; }

/* ── Скелетон загрузки ───────────────────────────────────────────────── */

.orders-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--tc-table-cell-pad-y);
  padding: var(--tc-toolbar-pad);
  background: var(--tc-bg-panel);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-table-radius);
}

.orders-skeleton-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  gap: var(--tc-toolbar-gap);
}

.orders-skeleton-cell {
  height: var(--tc-control-height);
  border-radius: var(--tc-table-radius);
  background: var(--tc-skeleton-bg);
  animation: orders-skeleton-pulse var(--tc-skeleton-duration) ease-in-out infinite alternate;
}

.orders-skeleton-cell-sm { max-width: var(--tc-table-col-number); }

@keyframes orders-skeleton-pulse {
  from { background: var(--tc-skeleton-bg); }
  to { background: var(--tc-skeleton-shine); }
}

/* ── Узкий экран: таблица становится карточками (D02) ────────────────── */

@media (max-width: 733px) {
  .orders-search { max-width: none; }
  .orders-search-row, .orders-viewbar { align-items: stretch; }
  .orders-view-actions { justify-content: space-between; }
  .orders-columns-menu { right: auto; left: 0; }

  .orders-table-wrap {
    overflow-x: visible;
    background: none;
    border: 0;
  }

  .orders-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .orders-table thead { display: none; }
  .orders-table tbody { display: block; }

  .orders-row {
    display: block;
    margin-bottom: var(--tc-table-card-gap);
    padding: var(--tc-table-card-pad);
    background: var(--tc-bg-panel);
    border: var(--tc-border-width) solid var(--tc-border);
    border-radius: var(--tc-table-radius);
  }

  .orders-td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tc-toolbar-gap);
    width: auto;
    padding: var(--tc-space-xs) 0;
    border-bottom: 0;
    text-align: right;
  }

  .orders-td::before {
    content: attr(data-label);
    color: var(--tc-text-secondary);
    font-size: var(--apple-font-size-caption);
    text-align: left;
    flex: none;
  }

  .orders-row:hover .orders-td { background: none; }

  .orders-td-public_id { padding-bottom: var(--tc-space-xs); }
  .orders-td-actions { justify-content: flex-end; }
  .orders-td-actions::before { content: none; }
}

/* ── Уменьшение движения: скелетон не мигает ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .orders-skeleton-cell { animation: none; }
  .orders-row { transition: none; }
}

/* ══ Мастерская (E4): каркас F04/F05 ═══════════════════════════════════════
   Мастерская — полноширинный рабочий экран: общая навигация свёрнута,
   возврат в заказ внутри экрана. Сцена остаётся тёмной в обеих темах
   (адаптация 3 ДИЗАЙН.md), панели — на семантических --tc-* токенах. */

body.workshop-view .main-nav { display: none; }

body.workshop-view .app-main {
  max-width: none;
  padding: var(--tc-screen-pad);
}

.workshop-screen {
  display: flex;
  flex-direction: column;
  gap: var(--tc-workshop-gap);
}

.workshop-screen [hidden] { display: none; }

.workshop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.workshop-head-info {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  min-width: 0;
}

.workshop-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-back,
.workshop-crumb {
  color: var(--tc-link);
  text-decoration: none;
}

.workshop-back:hover,
.workshop-crumb:hover { color: var(--tc-link-hover); }

.workshop-crumb-sep { color: var(--tc-text-tertiary); }

.workshop-title-row {
  display: flex;
  align-items: center;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.workshop-title {
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title-bold);
}

.workshop-subtitle {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-head-actions {
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}

.workshop-save {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-xs);
  padding: var(--tc-space-xs) var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-button);
  background: var(--tc-workshop-subtle-bg);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
  white-space: nowrap;
}

.workshop-save-dot {
  width: var(--tc-space-sm);
  height: var(--tc-space-sm);
  border-radius: 50%;
  background: currentColor;
}

.workshop-save[data-state="saved"] { color: var(--tc-workshop-save-saved); }
.workshop-save[data-state="dirty"] { color: var(--tc-workshop-save-dirty); }
.workshop-save[data-state="saving"] { color: var(--tc-workshop-save-saving); }
.workshop-save[data-state="error"] { color: var(--tc-workshop-save-error); }
.workshop-save[data-state="conflict"] { color: var(--tc-workshop-save-error); }
.workshop-save[data-state="offline"] { color: var(--tc-text-secondary); }

/* ── Шаги ─────────────────────────────────────────────────────────────── */

.workshop-steps {
  display: flex;
  align-items: center;
  gap: var(--tc-workshop-step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.workshop-step { flex: 0 0 auto; }

.workshop-step-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-sm);
  padding: var(--tc-workshop-step-pad);
  border: var(--tc-border-width) solid transparent;
  border-radius: var(--apple-radius-button);
  background: var(--tc-bg-panel);
  color: var(--tc-text-secondary);
  font-family: var(--apple-font-text);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  cursor: pointer;
  transition: color var(--tc-hover-transition), background var(--tc-hover-transition), border-color var(--tc-hover-transition);
}

.workshop-step-btn:hover {
  color: var(--tc-text-primary);
  background: var(--tc-bg-soft);
}

.workshop-step-btn-active {
  color: var(--tc-link);
  border-color: var(--tc-link);
  background: var(--tc-bg-soft);
}

.workshop-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tc-workshop-step-no-size);
  height: var(--tc-workshop-step-no-size);
  border-radius: 50%;
  background: var(--tc-bg-soft);
  font-size: var(--apple-font-size-caption);
}

.workshop-step-btn-active .workshop-step-no {
  background: var(--tc-link);
  color: var(--tc-text-on-accent);
}

/* ── Плашки состояний ─────────────────────────────────────────────────── */

.workshop-banners {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
}

.workshop-banners:empty { display: none; }

.workshop-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  padding: var(--tc-workshop-banner-pad);
  border: var(--tc-border-width) solid var(--tc-border);
  border-left: var(--tc-workshop-banner-accent) solid var(--tc-workshop-banner-info);
  border-radius: var(--tc-workshop-banner-radius);
  background: var(--tc-bg-panel);
  box-shadow: var(--tc-shadow-sm);
  flex-wrap: wrap;
}

.workshop-banner-warning { border-left-color: var(--tc-workshop-banner-warning); }
.workshop-banner-error { border-left-color: var(--tc-workshop-banner-error); }
.workshop-banner-conflict { border-left-color: var(--tc-workshop-banner-error); }
.workshop-banner-success { border-left-color: var(--tc-workshop-banner-success); }
.workshop-banner-info { border-left-color: var(--tc-workshop-banner-info); }

.workshop-banner-body {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  min-width: 0;
}

.workshop-banner-title {
  font-weight: var(--apple-weight-title);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-banner-text {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-banner-actions {
  display: flex;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}

/* ── Каркас: левая панель, сцена, правая панель ───────────────────────── */

.workshop-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-workshop-gap);
  align-items: stretch;
}

.workshop-panel {
  display: flex;
  flex-direction: column;
  gap: var(--tc-row-gap);
  padding: var(--tc-workshop-panel-pad);
  min-width: 0;
  overflow: auto;
}

.workshop-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.workshop-phase-tabs,
.workshop-panel-tabs {
  display: flex;
  gap: var(--tc-space-xs);
  margin-bottom: var(--tc-space-sm);
}

.workshop-panel-tab {
  flex: 1 1 auto;
  min-height: var(--tc-workshop-tabs-height);
  padding: var(--tc-space-xs) var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-button);
  background: var(--tc-bg-panel);
  color: var(--tc-text-secondary);
  font-family: var(--apple-font-text);
  font-size: var(--apple-font-size-caption-max);
  cursor: pointer;
}

.workshop-panel-tab-active {
  color: var(--tc-link);
  border-color: var(--tc-link);
}

.workshop-viewer {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--tc-workshop-viewer-min-height);
  border-radius: var(--apple-radius-card);
  background: var(--tc-bg-strong);
  overflow: hidden;
}

.workshop-viewer > canvas {
  position: absolute;
  inset: 0;
}

.workshop-viewer-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.workshop-scene-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-row-gap);
  padding: var(--tc-workshop-fallback-pad);
  color: var(--tc-text-on-strong);
  text-align: center;
}

.workshop-scene-fallback-title {
  margin: 0;
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title);
}

.workshop-scene-fallback-text {
  margin: 0;
  max-width: var(--tc-workshop-scene-note-max);
  color: var(--tc-viewer-panel-text-dim);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-scene-note {
  position: absolute;
  bottom: var(--tc-workshop-scene-note-inset);
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--tc-workshop-scene-note-max);
  padding: var(--tc-space-sm) var(--tc-workshop-scene-note-inset);
  border-radius: var(--apple-radius-button);
  background: var(--tc-viewer-panel-bg);
  color: var(--tc-viewer-panel-text);
  font-size: var(--apple-font-size-caption-max);
  text-align: center;
  pointer-events: none;
}

/* ── Левая панель: объекты и версии ───────────────────────────────────── */

.workshop-object-group {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
}

.workshop-object-title {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  font-weight: var(--apple-weight-title);
  letter-spacing: var(--tc-viewer-label-tracking);
  text-transform: uppercase;
}

.workshop-slot {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  padding: var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-card-sm);
  background: var(--tc-workshop-subtle-bg);
}

.workshop-slot-head {
  display: flex;
  align-items: center;
  gap: var(--tc-space-xs);
  flex-wrap: wrap;
}

.workshop-slot-title {
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

.workshop-slot-select {
  width: 100%;
  min-height: var(--tc-control-height);
}

.workshop-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--tc-workshop-tag-pad);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-badge);
  background: var(--tc-bg-panel);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  white-space: nowrap;
}

.workshop-tag-required {
  color: var(--tc-danger);
  border-color: var(--tc-danger);
}

.workshop-result-row {
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
  padding: var(--tc-space-xs) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.workshop-result-no {
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

.workshop-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tc-space-sm);
  padding: var(--tc-space-sm) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.workshop-file-info {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  min-width: 0;
}

.workshop-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--apple-font-size-caption-max);
}

.workshop-file-meta {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.workshop-eye {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.workshop-eye input {
  width: var(--tc-status-icon-size);
  height: var(--tc-status-icon-size);
  cursor: pointer;
}

.workshop-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tc-control-height);
  min-height: var(--tc-control-height);
  padding: 0 var(--tc-space-sm);
  border: var(--tc-border-width) solid transparent;
  border-radius: var(--apple-radius-button);
  background: none;
  color: var(--tc-text-secondary);
  font-family: var(--apple-font-text);
  font-size: var(--apple-font-size-caption-max);
  cursor: pointer;
}

.workshop-icon-btn:hover {
  color: var(--tc-link);
  border-color: var(--tc-link);
  background: var(--tc-bg-soft);
}

/* ── Правая панель: параметры шага ────────────────────────────────────── */

.workshop-section {
  display: flex;
  flex-direction: column;
  gap: var(--tc-row-gap);
}

.workshop-section-title {
  margin: 0;
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-title);
}

.workshop-section-title-spaced { margin-top: var(--tc-row-gap); }

.workshop-hint {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
  line-height: var(--apple-leading-body);
}

.workshop-field {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
}

.workshop-check {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-sm);
  color: var(--tc-text-primary);
  font-size: var(--apple-font-size-caption-max);
  cursor: pointer;
}

.workshop-check input {
  width: var(--tc-status-icon-size);
  height: var(--tc-status-icon-size);
  margin-top: var(--tc-space-xs);
  cursor: pointer;
}

.workshop-check-block {
  padding: var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-card-sm);
  background: var(--tc-workshop-subtle-bg);
}

.workshop-checklist,
.workshop-remarks,
.workshop-note-list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workshop-remark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-sm);
  padding: var(--tc-space-xs) 0;
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.workshop-remark-done { color: var(--tc-text-secondary); text-decoration: line-through; }

.workshop-note-item {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-inline-form {
  display: flex;
  gap: var(--tc-space-sm);
}

.workshop-inline-form .input { flex: 1 1 auto; min-width: 0; }

.workshop-upload-row {
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}

.workshop-file-input {
  max-width: 100%;
  font-size: var(--apple-font-size-caption-max);
}

.workshop-upload-status {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.workshop-section-error { color: var(--tc-text-primary); }

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

.workshop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.workshop-footer-meta {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.workshop-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.workshop-footer-note {
  margin: 0;
  max-width: var(--tc-tooltip-max-width);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

/* ── Карточка заказа: блок «Работы» (E4) ─────────────────────────────── */

.works-list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
}

.works-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-sm);
  padding: var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-card-sm);
  background: var(--tc-workshop-subtle-bg);
  flex-wrap: wrap;
}

.works-row-info {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  min-width: 0;
}

.works-row-title {
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

.works-row-meta {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.works-create { margin-top: var(--tc-row-gap); }

.works-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
}

.works-create-row {
  display: flex;
  gap: var(--tc-space-sm);
}

.works-create-row .input { flex: 1 1 auto; min-width: 0; }

/* ── Фокус и уменьшение движения ─────────────────────────────────────── */

.workshop-step-btn:focus-visible,
.workshop-panel-tab:focus-visible,
.workshop-icon-btn:focus-visible,
.workshop-back:focus-visible,
.workshop-crumb:focus-visible {
  outline: var(--tc-border-width) solid var(--tc-link);
  outline-offset: 0;
}

/* На узком экране — одна активная боковая панель (frontend-design D02):
   сцена остаётся видимой, панели переключаются кнопками над ней. */
@media (max-width: 1067px) {
  .workshop-screen .workshop-left,
  .workshop-screen .workshop-right { display: none; }

  .workshop-screen[data-panel="objects"] .workshop-left { display: flex; }

  .workshop-screen[data-panel="parameters"] .workshop-right { display: flex; }
}

@media (min-width: 1068px) {
  .workshop-body {
    grid-template-columns: var(--tc-workshop-left-width) minmax(0, 1fr) var(--tc-workshop-right-width);
  }

  .workshop-panel-tabs { display: none; }
}

@media (min-width: 1440px) {
  .workshop-body {
    grid-template-columns: var(--tc-workshop-left-width-lg) minmax(0, 1fr) var(--tc-workshop-right-width-lg);
  }

  body.workshop-view .app-main { padding: var(--tc-screen-pad-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-step-btn,
  .workshop-panel-tab,
  .workshop-icon-btn { transition: none; }
}

/* ══ Проверка и выдача (E5): F07 ═══════════════════════════════════════════
   Очередь pending-проверок, фиксированная ревизия в детали и вкладка
   «Выдача» в карточке заказа. Цвета — только семантические --tc-*,
   размеры — токены группы reviews/issue. */

/* ── Очередь проверок ─────────────────────────────────────────────────── */

.reviews-screen {
  display: flex;
  flex-direction: column;
  gap: var(--tc-reviews-gap);
}

.reviews-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.reviews-title-block {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  min-width: 0;
}

.reviews-subtitle {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.reviews-head-actions {
  display: flex;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}

.reviews-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.reviews-filters {
  display: flex;
  gap: var(--tc-space-xs);
  flex-wrap: wrap;
}

.reviews-count {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.reviews-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-reviews-gap);
  align-items: start;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
  min-width: 0;
  padding: var(--tc-reviews-detail-pad);
}

.reviews-detail {
  min-width: 0;
  padding: var(--tc-reviews-detail-pad);
}

.reviews-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-space-sm);
  width: 100%;
  padding: var(--tc-reviews-row-pad);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-card-sm);
  background: var(--tc-bg-panel);
  color: var(--tc-text-primary);
  font-family: var(--apple-font-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--tc-hover-transition), border-color var(--tc-hover-transition);
}

.reviews-row:hover {
  background: var(--tc-bg-soft);
  border-color: var(--tc-link);
}

.reviews-row-active {
  background: var(--tc-bg-soft);
  border-color: var(--tc-link);
}

.reviews-row:focus-visible {
  outline: var(--tc-border-width) solid var(--tc-link);
  outline-offset: 0;
}

.reviews-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  min-width: 0;
}

.reviews-row-title {
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
}

.reviews-row-meta {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.reviews-row-overdue { color: var(--tc-danger); }

.reviews-stage {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-xs);
  padding: 0 var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-badge);
  background: var(--tc-bg-soft);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  white-space: nowrap;
}

.reviews-stage-technical {
  color: var(--tc-link);
  border-color: var(--tc-link);
}

.reviews-stage-clinical {
  color: var(--tc-warning);
  border-color: var(--tc-warning);
}

.reviews-placeholder {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.reviews-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-sm);
  padding: var(--tc-reviews-row-pad);
}

.reviews-state-title {
  margin: 0;
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-title);
}

.reviews-state-text {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.reviews-banner-slot:empty { display: none; }

.reviews-banner {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  padding: var(--tc-reviews-banner-pad);
  border: var(--tc-border-width) solid var(--tc-border);
  border-left: var(--tc-reviews-banner-accent) solid var(--tc-link);
  border-radius: var(--tc-reviews-banner-radius);
  background: var(--tc-bg-panel);
  box-shadow: var(--tc-shadow-sm);
  font-size: var(--apple-font-size-caption-max);
}

.reviews-banner-success { border-left-color: var(--tc-success); }
.reviews-banner-error { border-left-color: var(--tc-danger); }
.reviews-banner-warning { border-left-color: var(--tc-warning); }
.reviews-banner-info { border-left-color: var(--tc-link); }
.reviews-banner-auth { border-left-color: var(--tc-danger); }

/* ── Деталь проверки ──────────────────────────────────────────────────── */

.review-detail {
  display: flex;
  flex-direction: column;
  gap: var(--tc-row-gap);
}

.review-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.review-detail-title-block { min-width: 0; }

.review-detail-title {
  margin: 0;
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title-bold);
}

.review-detail-meta {
  margin: var(--tc-space-xs) 0 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.review-detail-badges {
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
  margin: 0;
  flex-wrap: wrap;
}

.review-detail-note {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.review-state {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-badge);
  background: var(--tc-bg-soft);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  white-space: nowrap;
}

.review-state-pending { color: var(--tc-warning); border-color: var(--tc-warning); }
.review-state-accepted { color: var(--tc-success); border-color: var(--tc-success); }
.review-state-returned { color: var(--tc-danger); border-color: var(--tc-danger); }

.review-section {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
  padding-top: var(--tc-row-gap);
  border-top: var(--tc-border-width) solid var(--tc-border);
}

.review-section-title {
  margin: 0;
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-title);
}

.review-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-xs) var(--tc-row-gap);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.review-manifest-hash {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  overflow-wrap: anywhere;
}

.review-code {
  padding: 0 var(--tc-space-xs);
  border-radius: var(--apple-radius-badge);
  background: var(--tc-bg-soft);
  font-family: var(--tc-font-mono);
  font-size: var(--apple-font-size-caption);
  overflow-wrap: anywhere;
}

.review-table-wrap { overflow-x: auto; }

.review-table {
  width: 100%;
  min-width: var(--tc-reviews-table-min-width);
  border-collapse: collapse;
  font-size: var(--apple-font-size-caption-max);
}

.review-table th,
.review-table td {
  padding: var(--tc-table-cell-pad-y) var(--tc-table-cell-pad-x);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
  text-align: left;
  vertical-align: top;
}

.review-table th {
  background: var(--tc-table-head-bg);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  font-weight: var(--apple-weight-title);
}

.review-cell-name { overflow-wrap: anywhere; }

.review-params {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  margin: 0;
}

.review-param {
  display: flex;
  gap: var(--tc-space-sm);
  font-size: var(--apple-font-size-caption-max);
}

.review-param dt {
  min-width: var(--tc-reviews-param-key);
  color: var(--tc-text-secondary);
}

.review-param dd { margin: 0; overflow-wrap: anywhere; }

.review-note-list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-note-item {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
  overflow-wrap: anywhere;
}

.review-slot { font-family: var(--tc-font-mono); color: var(--tc-text-primary); }

.review-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-check {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-sm);
  font-size: var(--apple-font-size-caption-max);
}

.review-check input {
  width: var(--tc-status-icon-size);
  height: var(--tc-status-icon-size);
  margin-top: var(--tc-space-xs);
  cursor: pointer;
}

.review-required { color: var(--tc-danger); font-size: var(--apple-font-size-caption); }

.review-stale {
  margin: 0;
  padding: var(--tc-reviews-banner-pad);
  border-left: var(--tc-reviews-banner-accent) solid var(--tc-warning);
  border-radius: var(--tc-reviews-banner-radius);
  background: var(--tc-bg-soft);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.review-decision {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
  padding-top: var(--tc-row-gap);
  border-top: var(--tc-border-width) solid var(--tc-border);
}

.review-decision-actions {
  display: flex;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}

.review-decision-note {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.review-reason {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-sm);
  padding: var(--tc-reviews-banner-pad);
  border: var(--tc-border-width) solid var(--tc-danger);
  border-radius: var(--tc-reviews-banner-radius);
  background: var(--tc-bg-soft);
}

.review-reason[hidden] { display: none; }

.review-reason-error {
  color: var(--tc-danger);
  font-size: var(--apple-font-size-caption);
}

.review-reason-error[hidden] { display: none; }

.review-reason-actions {
  display: flex;
  gap: var(--tc-space-sm);
  flex-wrap: wrap;
}

/* ── Вкладка «Выдача» в карточке заказа ───────────────────────────────── */

.issue-root { min-width: 0; }

.issue-screen {
  display: flex;
  flex-direction: column;
  gap: var(--tc-reviews-gap);
}

.issue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tc-row-gap);
  flex-wrap: wrap;
}

.issue-title-block { min-width: 0; }

.issue-title {
  margin: 0;
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title-bold);
}

.issue-subtitle {
  margin: var(--tc-space-xs) 0 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.issue-head-actions { display: flex; gap: var(--tc-space-sm); flex-wrap: wrap; }

.issue-banner-slot:empty { display: none; }

.issue-banner {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  padding: var(--tc-reviews-banner-pad);
  border: var(--tc-border-width) solid var(--tc-border);
  border-left: var(--tc-reviews-banner-accent) solid var(--tc-link);
  border-radius: var(--tc-reviews-banner-radius);
  background: var(--tc-bg-panel);
  box-shadow: var(--tc-shadow-sm);
  font-size: var(--apple-font-size-caption-max);
}

.issue-banner-success { border-left-color: var(--tc-success); }
.issue-banner-warning { border-left-color: var(--tc-warning); }
.issue-banner-error { border-left-color: var(--tc-danger); }
.issue-banner-info { border-left-color: var(--tc-link); }

.issue-summary { display: flex; flex-direction: column; gap: var(--tc-space-xs); }

.issue-approved-version {
  margin: 0;
  font-size: var(--apple-font-size-subtitle-min);
  font-weight: var(--apple-weight-title-bold);
}

.issue-summary-text {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.issue-note {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.issue-warning {
  padding: var(--tc-reviews-banner-pad);
  border: var(--tc-border-width) solid var(--tc-border);
  border-left: var(--tc-reviews-banner-accent) solid var(--tc-warning);
  border-radius: var(--tc-reviews-banner-radius);
  background: var(--tc-bg-panel);
  box-shadow: var(--tc-shadow-sm);
}

.issue-warning-title {
  margin: 0 0 var(--tc-space-xs);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-title);
}

.issue-warning-list {
  margin: 0;
  padding-left: var(--tc-row-gap);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.issue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-issue-gap);
  align-items: start;
}

.issue-side {
  display: flex;
  flex-direction: column;
  gap: var(--tc-issue-gap);
  min-width: 0;
}

.issue-compose { min-width: 0; }

.issue-section-title {
  margin: 0 0 var(--tc-space-sm);
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-title);
}

.issue-table-wrap { overflow-x: auto; }

.issue-table {
  width: 100%;
  min-width: var(--tc-issue-table-min-width);
  border-collapse: collapse;
  font-size: var(--apple-font-size-caption-max);
}

.issue-table th,
.issue-table td {
  padding: var(--tc-table-cell-pad-y) var(--tc-table-cell-pad-x);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
  text-align: left;
  vertical-align: top;
}

.issue-table th {
  background: var(--tc-table-head-bg);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  font-weight: var(--apple-weight-title);
}

.issue-cell-name { overflow-wrap: anywhere; }

.issue-code {
  padding: 0 var(--tc-space-xs);
  border-radius: var(--apple-radius-badge);
  background: var(--tc-bg-soft);
  font-family: var(--tc-font-mono);
  font-size: var(--apple-font-size-caption);
  overflow-wrap: anywhere;
}

.issue-build-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-xs) var(--tc-row-gap);
}

.issue-status {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--tc-space-sm);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--apple-radius-badge);
  background: var(--tc-bg-soft);
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
  white-space: nowrap;
}

.issue-status-ready { color: var(--tc-success); border-color: var(--tc-success); }
.issue-status-building { color: var(--tc-link); border-color: var(--tc-link); }
.issue-status-requested { color: var(--tc-link); border-color: var(--tc-link); }
.issue-status-failed { color: var(--tc-danger); border-color: var(--tc-danger); }

.issue-fact {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption);
}

.issue-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-xs);
  margin: var(--tc-space-sm) 0 0;
}

.issue-error {
  margin: var(--tc-space-sm) 0 0;
  color: var(--tc-danger);
  font-size: var(--apple-font-size-caption-max);
}

.issue-build-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-sm);
  margin-top: var(--tc-space-md);
}

.issue-placeholder {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.issue-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-sm);
  padding: var(--tc-reviews-row-pad);
}

.issue-state-title {
  margin: 0;
  font-size: var(--apple-font-size-body);
  font-weight: var(--apple-weight-title);
}

.issue-state-text {
  margin: 0;
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
}

.issue-note-list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue-note-item {
  color: var(--tc-text-secondary);
  font-size: var(--apple-font-size-caption-max);
  overflow-wrap: anywhere;
}

/* ── Вкладки карточки заказа ──────────────────────────────────────────── */

.order-tabs {
  display: flex;
  gap: var(--tc-space-xs);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}

.order-tab {
  padding: var(--tc-control-pad-y) var(--tc-control-pad-x);
  border: 0;
  border-bottom: var(--tc-reviews-banner-accent) solid transparent;
  background: none;
  color: var(--tc-text-secondary);
  font-family: var(--apple-font-text);
  font-size: var(--apple-font-size-caption-max);
  font-weight: var(--apple-weight-body-medium);
  cursor: pointer;
}

.order-tab:hover { color: var(--tc-text-primary); }

.order-tab-active {
  color: var(--tc-link);
  border-bottom-color: var(--tc-link);
}

.order-tab:focus-visible {
  outline: var(--tc-border-width) solid var(--tc-link);
  outline-offset: 0;
}

.order-tab-panel[hidden] { display: none; }

/* ── Адаптив и движение ───────────────────────────────────────────────── */

@media (min-width: 1068px) {
  .reviews-layout {
    grid-template-columns: var(--tc-reviews-list-width) minmax(0, 1fr);
  }

  .reviews-detail {
    position: sticky;
    top: var(--tc-reviews-sticky-top);
    max-height: calc(100vh - var(--tc-reviews-sticky-top) * 2);
    overflow: auto;
  }

  .issue-grid {
    grid-template-columns: minmax(0, 1fr) var(--tc-issue-side-width);
  }
}

@media (min-width: 1440px) {
  .reviews-layout {
    grid-template-columns: var(--tc-reviews-list-width-lg) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-row,
  .order-tab { transition: none; }
}

/* Недоступная роль стадия не выглядит нажимаемой и не обещает фильтр,
   который сервер всё равно отклонит 403. */
.reviews-filters .filter-chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.reviews-filters .filter-chip:disabled:hover {
  color: var(--tc-text-secondary);
}