/* Оформление интерфейса. Шрифты — системные, внешних файлов нет. */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #1f2933;
  --muted: #5f6b7a;
  --line: #d9dee4;
  --accent: #2f4858;
  --accent-ink: #ffffff;
  --accent-soft: #e6ecef;
  --danger: #a12d2d;
  --danger-soft: #fbeaea;
  --ok-soft: #e6f3ea;
  --ok: #1f6b3a;
  --radius: 8px;
}

* { box-sizing: border-box; }
/* Скрытое остаётся скрытым и у кнопок: кнопки, которые работают только со скриптом,
   скрыты в разметке, и скрипт сам их показывает. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0.4rem 0 1rem; text-wrap: balance; }
h2 { font-size: 1.2rem; margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 20px; padding-bottom: 32px; min-height: 70vh; }

/* Шапка */
.topbar { background: var(--accent); color: var(--accent-ink); }
/* Шапка в две строки: название и пользователь, под ними — разделы. */
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-top: 10px; padding-bottom: 8px; }
.topbar a, .topbar .linklike { color: var(--accent-ink); }
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; order: 3; flex-basis: 100%; margin-left: -12px; }
.nav a { padding: 6px 12px; border-radius: 6px; text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, 0.12); }
.nav a.current { background: rgba(255, 255, 255, 0.22); font-weight: 600; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.9rem; margin-left: auto; }
.who { opacity: 0.85; }
.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

.footer { color: var(--muted); font-size: 0.85rem; padding-top: 12px; padding-bottom: 24px; }

/* Вкладки разделов каталога */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.current { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* Карточки и заголовки страниц */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 12px; }
.page-head h1 { margin: 0; }
.muted { color: var(--muted); font-size: 0.9rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.empty { color: var(--muted); text-align: center; padding: 28px 16px; }

/* Кнопки */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1.3;
}
.btn:hover { background: var(--accent-soft); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #24394a; }
.btn-quiet { border-color: var(--line); color: var(--ink); font-weight: 500; }
.btn-small { padding: 5px 10px; font-size: 0.875rem; }
/* Недоступная кнопка видна, но явно неактивна (например, «Зафиксировать» у незавершённого расчёта). */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .linklike:focus-visible {
  outline: 3px solid #f0b429; outline-offset: 2px;
}
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Сообщения */
.message { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; background: var(--accent-soft); }
.message.success { background: var(--ok-soft); color: var(--ok); }
.message.error { background: var(--danger-soft); color: var(--danger); }

/* Формы */
.form { max-width: 640px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field-check label { font-weight: 500; display: flex; gap: 8px; align-items: center; }
.optional { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.field input:not([type=checkbox]):not([type=file]), .field select, .field textarea {
  width: 100%; padding: 9px 10px; border: 1px solid #aab3bd; border-radius: 6px;
  font: inherit; background: #fff; color: var(--ink);
}
.field input[type=checkbox] { width: 18px; height: 18px; }
/* Поля прямо в таблице (цены вариантов, подсчёт инвентаризации) — как обычные поля. */
td > input:not([type=checkbox]):not([type=hidden]), td > select {
  width: 100%; min-width: 7em; padding: 7px 8px; border: 1px solid #aab3bd; border-radius: 6px;
  font: inherit; background: #fff; color: var(--ink);
}
.help { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger) !important; }
.error-text { color: var(--danger); font-size: 0.9rem; margin-top: 4px; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
.login { max-width: 420px; margin: 6vh auto 0; }

/* Фильтры */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .field { margin: 0; min-width: 150px; }
.filters .grow { flex: 1 1 260px; }
.filter-actions { display: flex; gap: 8px; }

/* Плитки каталога */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(31, 41, 51, 0.12); }
.tile-image { position: relative; aspect-ratio: 1 / 1; background: #eef0f2; overflow: hidden; }
.tile-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tile-body { padding: 12px 14px 14px; }
.tile-code { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.tile-name { margin-bottom: 4px; }
.archived { opacity: 0.6; }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e3e6ea; color: #414b57; vertical-align: middle; }

/* Карточка формы */
.detail { display: grid; grid-template-columns: minmax(260px, 460px) minmax(0, 1fr); gap: 20px; }
.detail-image img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* Подпись занимает не больше 45% ширины: длинная подпись переносится, а не выталкивает значение. */
dl { margin: 0; display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 8px 18px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }

/* Таблицы */
.table-wrap { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); font-weight: 600; background: #fafbfc; vertical-align: bottom; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Кнопки действий стоят в одну строку и всегда видны: столбец «прилипает»
   к правому краю, даже если широкая таблица прокручивается по горизонтали. */
td.row-actions, th.actions-col { position: sticky; right: 0; }
td.row-actions {
  display: table-cell; white-space: nowrap; text-align: right;
  background: var(--surface); box-shadow: -10px 0 8px -8px rgba(31, 41, 51, 0.14);
}
th.actions-col { background: #fafbfc; }
td.row-actions > * { margin-left: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge-warn { background: #fdf0d5; color: #7a4b00; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; float: left; margin-right: 10px; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: center; margin-bottom: 20px; color: var(--muted); }

/* Заглушка вместо отсутствующей фотографии */
.no-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 0.95rem; padding: 24px 0; }
.no-photo img { width: 45%; max-width: 180px; height: auto; }
.tile-image .no-photo { position: absolute; inset: 0; padding: 0; }
.tile-image .no-photo img { position: static; width: 45%; height: auto; }
/* Фотография в карточке показывается целиком, с исходными пропорциями. */
.detail-image > img { max-height: 75vh; object-fit: contain; }

/* Поле изображения в форме */
.image-current { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.image-current img { width: 120px; height: 120px; object-fit: contain; background: #eef0f2; border: 1px solid var(--line); border-radius: 6px; display: block; }
.image-remove { display: flex !important; gap: 8px; align-items: center; font-weight: 500 !important; margin-top: 8px; }
.image-action { font-weight: 600; margin-bottom: 6px; }
.image-field input[type=file] { max-width: 100%; font: inherit; }
.image-preview { margin-top: 12px; }
.image-preview img { max-width: 200px; max-height: 200px; border: 1px solid var(--line); border-radius: 6px; display: block; margin-bottom: 4px; }

/* --- Этап 2: калькулятор, сметы, остатки камня ------------------------------ */
h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge.status-draft { background: #fdf0d5; color: #7a4b00; }
.badge.status-fixed { background: var(--ok-soft); color: var(--ok); }
.badge.status-archived { background: #e3e6ea; color: #414b57; }
.form-wide { max-width: none; }

/* Калькулятор: шаги слева, расчёт справа */
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 20px; align-items: start; }
.calc-summary { position: sticky; top: 12px; }
.calc-summary .actions { margin-top: 0; flex-wrap: wrap; }
fieldset.step { margin: 0 0 16px; min-width: 0; }
fieldset.step legend { font-weight: 700; font-size: 1.1rem; padding: 0 6px; }
/* Блоки нумеруются сами: в расчёте без стелы и в заказе их разное число. */
.calc-steps { counter-reset: step; }
fieldset.step legend::before { counter-increment: step; content: counter(step) ". "; }
.field-grid { display: grid; gap: 0 14px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.item-qty { grid-template-columns: minmax(0, 1fr) 140px; }
.rows { display: grid; gap: 4px; }
.row-line { display: grid; grid-template-columns: minmax(0, 2.4fr) 120px minmax(0, 1.4fr) auto; gap: 0 12px; }
.row-line[hidden] { display: none; }
.row-line .field { margin-bottom: 10px; }
/* Кнопка «Убрать» стоит на одной линии с полями, а не с их подписями. */
.row-remove { align-self: end; margin-bottom: 10px; }
/* Поиск товара и быстрые кнопки над списком */
.picker { margin: 6px 0 10px; }
.picker label { display: block; font-weight: 600; margin-bottom: 4px; }
.picker input { width: 100%; padding: 9px 10px; border: 1px solid #aab3bd; border-radius: 6px; font: inherit; background: #fff; color: var(--ink); }
.picker-results { display: grid; gap: 4px; margin-top: 6px; }
.picker-results .btn { text-align: left; font-weight: 500; white-space: normal; }
.quick { margin-bottom: 10px; }
#breakdown.is-stale { opacity: 0.55; }
#breakdown h2 { margin-bottom: 10px; }
.calc-facts { grid-template-columns: 1fr auto; margin-bottom: 12px; font-size: 0.95rem; }
.calc-facts dd { text-align: right; }

/* Расшифровка расчёта */
.bd-section { font-weight: 700; padding: 8px 0 4px; border-bottom: 2px solid var(--line); }
.bd-line { display: flex; gap: 12px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bd-main { min-width: 0; overflow-wrap: anywhere; }
.bd-name { font-weight: 500; }
.bd-amount { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.bd-line.unknown .bd-name { color: var(--danger); }
.bd-subtotal { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 12px; font-weight: 600; }
.bd-subtotal span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.grand-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 6px; background: var(--accent-soft); font-size: 1.05rem; }
.grand-total strong { font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Таблица строк сметы */
tr.section-row td { font-weight: 700; background: #fafbfc; }
tr.subtotal td { font-weight: 600; }
tr.subtotal.grand td { font-size: 1.1rem; background: var(--accent-soft); }
tr.unknown td:first-child { color: var(--danger); }
tr.changed td { background: #fffaf0; }
.inscription { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.radio-list { display: grid; gap: 8px; }
.radio { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.radio input { width: 18px !important; height: 18px; margin-top: 3px; flex: none; padding: 0 !important; }

/* --- Этап 3: заказы ---------------------------------------------------------- */
.badge.order-draft { background: #fdf0d5; color: #7a4b00; }
.badge.order-cancelled { background: #e3e6ea; color: #414b57; }
.badge.receipt-draft, .badge.inventory-counting { background: #fdf0d5; color: #7a4b00; }
.badge.receipt-posted, .badge.inventory-posted { background: #dff3e4; color: #1e6b35; }
.badge.receipt-reversed, .badge.inventory-cancelled { background: #e3e6ea; color: #414b57; }
/* Склад: строка поступления — позиция, количество, цена (у директора), примечание. */
.receipt-row { grid-template-columns: minmax(0, 2.4fr) 110px 150px minmax(0, 1.2fr) auto; }
.receipt-row:not(:has(.row-cost)) { grid-template-columns: minmax(0, 2.4fr) 110px minmax(0, 1.4fr) auto; }
tr.is-stale td { background: var(--danger-soft); }
/* Подбор портрета: материал → форма → размер (добавляет скрипт над основным списком). */
.variant-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.variant-picker label { font-size: 0.85rem; font-weight: 500; margin: 0; }
.variant-picker select { width: 100%; margin-top: 2px; }
.plain-list { margin: 6px 0 0; padding-left: 20px; }
.plain-list li { margin: 2px 0; }
/* Текст для памятника показывается в точности, как введён: с переносами строк. */
.exact-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 6px 10px; border-left: 3px solid var(--line); background: #fafbfc; }
.person-head { margin: 0 0 10px; }
.person-head h3 { margin: 0; }
/* Список отметок (оформление умершего) */
.check-list > div { display: grid; gap: 6px; }
.check-list label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; margin: 0; }
.check-inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; margin: 0; white-space: nowrap; }
.check-list input[type=checkbox] { margin-top: 3px; flex: none; }
.check-columns > div { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.filters .field-check { min-width: 0; padding-bottom: 9px; }

/* Печатная форма сметы */
.print-body { background: #e9ecef; }
.print-toolbar { max-width: 210mm; margin: 12px auto; display: flex; justify-content: space-between; gap: 10px; padding: 0 8px; }
.sheet { background: #fff; color: #000; max-width: 210mm; margin: 0 auto 24px; padding: 14mm 14mm 16mm; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15); }
.sheet h1 { font-size: 1.5rem; margin: 2px 0; }
.sheet h2 { font-size: 1.1rem; margin: 18px 0 8px; }
.sheet-org { font-weight: 700; letter-spacing: 0.02em; }
.sheet-head { border-bottom: 2px solid #000; padding-bottom: 10px; }
.sheet-mark { display: inline-block; margin-top: 8px; padding: 4px 10px; border: 2px solid #000; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.sheet-mark.light { border-width: 1px; font-weight: 600; }
.sheet-state { margin-top: 6px; color: #333; }
.sheet-table th, .sheet-table td { border-bottom: 1px solid #999; padding: 7px 8px; }
.sheet-table th { background: none; color: #000; }
.sheet-table tr.section-row td, .sheet-table tr.subtotal.grand td { background: none; }
.sheet-table tr.subtotal.grand td { border-top: 2px solid #000; border-bottom: 2px solid #000; }
.sheet-warning { margin-top: 12px; padding: 8px 10px; border: 2px solid #000; font-weight: 600; }
.sheet .muted, .sheet dt { color: #333; }
.sheet .badge { background: none; border: 1px solid #000; color: #000; }

@media print {
  @page { size: A4; margin: 12mm; }
  .no-print, .topbar, .footer, .messages { display: none !important; }
  body, .print-body { background: #fff; }
  .sheet { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .sheet-table tr { break-inside: avoid; }
}

/* Панель с итогом у нижнего края: нужна только там, где расчёт уходит под форму. */
.calc-bar { display: none; }

@media (max-width: 1000px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-summary { position: static; }
  .calc-bar:not([hidden]) {
    display: flex; position: sticky; bottom: 0; z-index: 5; align-items: center; justify-content: space-between;
    gap: 12px; margin: 16px -16px 0; padding: 10px 16px; background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 -2px 10px rgba(31, 41, 51, 0.25);
  }
  .calc-bar.is-offscreen { visibility: hidden; }
  .calc-bar.is-stale .calc-bar-total { opacity: 0.6; }
  .calc-bar a { color: var(--accent-ink); font-size: 0.9rem; white-space: nowrap; }
  .calc-bar-total { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
}

@media (max-width: 760px) {
  .field-grid.two, .field-grid.three, .field-grid.item-qty { grid-template-columns: minmax(0, 1fr); }
  /* Строка списка: позиция во всю ширину, под ней количество и примечание. */
  .row-line { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 8px 0 0; border-top: 1px solid var(--line); }
  .row-line .row-item { grid-column: 1 / -1; }
  .receipt-row, .receipt-row:not(:has(.row-cost)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .receipt-row .row-note { grid-column: 1 / -2; }
  .variant-picker { grid-template-columns: minmax(0, 1fr); }
  table.cards tr.section-row, table.cards tr.subtotal { display: flex; justify-content: space-between; gap: 12px; }
  table.cards tr.section-row td, table.cards tr.subtotal td { padding: 2px 0; width: auto; min-height: 0; }
  table.cards tr.section-row td::before, table.cards tr.subtotal td::before { content: none; }
  table.cards tr.subtotal.grand { background: var(--accent-soft); }
  table.cards tr.subtotal.grand td { background: none; }
  /* Строка сметы на телефоне: название, под ним «количество × цена», справа сумма. */
  table.cards.lines tbody tr:not(.section-row):not(.subtotal) {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 6px; align-items: baseline;
  }
  table.cards.lines tbody tr:not(.section-row):not(.subtotal) td { padding: 1px 0; min-height: 0; width: auto; }
  table.cards.lines tbody tr:not(.section-row):not(.subtotal) td::before { content: none; }
  table.cards.lines td[data-label="Позиция"] { grid-column: 1 / -1; }
  table.cards.lines td[data-label="Количество"], table.cards.lines td[data-label="Цена"] { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
  table.cards.lines tbody tr:not(.section-row):not(.subtotal) td[data-label="Цена"]::before { content: "× "; position: static; font-size: inherit; }
  table.cards.lines td[data-label="Сумма"] { text-align: right; font-weight: 600; white-space: nowrap; }
  .print-toolbar { flex-wrap: wrap; }
  .sheet { padding: 16px; }
  .sheet-table thead { display: none; }
  .sheet-table, .sheet-table tbody, .sheet-table tr, .sheet-table td { display: block; }
  .sheet-table tr { border-bottom: 1px solid #999; padding: 6px 0; }
  .sheet-table td { border: 0; padding: 2px 0; text-align: left; }
  .sheet-table td.num { text-align: left; }
  .sheet-table td[data-label]::before { content: attr(data-label) ": "; color: #333; }
  .sheet-table tr.subtotal { display: flex; justify-content: space-between; gap: 10px; }
}

@media (max-width: 760px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  /* На телефоне подпись стоит над значением. */
  dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl > dt { font-size: 0.85rem; margin-top: 10px; }
  dl > dt:first-child { margin-top: 0; }
  .calc-facts { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .calc-facts > dt { font-size: inherit; margin-top: 0; }
  .account { margin-left: 0; }
  .filters .field, .filters .grow { flex: 1 1 100%; min-width: 0; }
  .filter-actions { flex: 1 1 100%; }
  .actions { flex-wrap: wrap; }

  /* На телефоне строка таблицы превращается в карточку «подпись — значение»,
     поэтому горизонтальная прокрутка не нужна и все кнопки на виду. */
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.cards tbody tr:last-child { border-bottom: 0; }
  table.cards td { border: 0; padding: 4px 0 4px 44%; position: relative; text-align: left; white-space: normal; min-height: 1.9em; overflow-wrap: anywhere; }
  table.cards td::before {
    content: attr(data-label); position: absolute; left: 0; top: 4px; width: 41%; color: var(--muted); font-size: 0.85rem;
    /* Подпись всегда в одну строку: слишком длинная обрезается, а не наезжает на соседнюю. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  table.cards td.empty { padding: 20px 0; text-align: center; }
  table.cards td.empty::before { content: none; }
  table.cards td.row-actions { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 2px; box-shadow: none; background: none; }
  table.cards td.row-actions::before { content: none; }
  table.cards td.row-actions > * { margin-left: 0; }
  .thumb { float: none; display: block; margin: 0 0 6px; }
}