/* WMS FF — вид «Строгий» (тема 23; спека docs/specs/2026-10-02-14-ui-design.md, прототип
   docs/specs/2026-10-02-14-prototype.html). Свои стили вместо Pico: база — вид голых элементов, на которые опираются
   все шаблоны, дальше — компоненты по экранам. Только светлая тема, шрифт системный, ничего не загружается.
   Узкий экран: шапка — до 960 px, таблицы карточками и плотные отступы — до 700 px. */

/* ── переменные ── */
:root {
  --font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f5f8; --ink: #1a2230; --muted: #5b6676;
  --line: #e1e5eb; --line-strong: #c4cbd5;
  --accent: #2346a8; --accent-ink: #ffffff; --accent-edge: #1d3b8f; --accent-soft: #e4eafb; --focus: #6f8fe8;
  --hover: #f6f8fb; --list-bg: #f7f8fa; --blind-bg: #fff6f5; --panel-head: #fafbfc; --scan-bg: #f6f8fb;
  --half-bg: #f1f4fd; --th-bg: #f6f8fa; --open-bg: #eef7f1; --land-bg: #dbe6ff;
  --hot: #c2410c; --hot-soft: #fff1e8; --warn: #a15c07; --warn-soft: #fff6e0; --warn-line: #f1c98a;
  --danger: #b42318; --danger-soft: #fdeceb; --danger-line: #f3b4ae;
  --ok: #15803d; --ok-soft: #e9f7ee; --ok-line: #9fd8b2;
  --radius: 6px; --gap: 18px; --pad: 24px;
  color-scheme: light;
}
@media (max-width: 700px) { :root { --gap: 14px; --pad: 14px; } }

/* ── база: голые элементы ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.45; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
h1 { font-size: 1.55rem; font-weight: 750; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p, ul, ol, dl, pre, table, form, fieldset, details, article, section, blockquote { margin: 0 0 var(--gap); }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 4px; }
small { font-size: .875em; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }
code, kbd, pre { font-family: var(--mono); font-size: .9em; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
pre { background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; }
pre code { background: none; padding: 0; }
img, svg { max-width: 100%; }
mark { display: inline-block; font-size: .85em; font-weight: 600; padding: 1px 7px; border-radius: 4px; line-height: 1.5;
  background: var(--warn-soft); color: var(--warn); }
mark.error { background: var(--danger-soft); color: var(--danger); }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 20px var(--pad) 32px; }
main.container > :last-child { margin-bottom: 0; }

/* кнопки: основная — синяя заливка; второстепенная (.secondary, .outline, .contrast) — белая с серой рамкой;
   опасная (.danger) — красный текст; недоступная — полупрозрачная */
button, [role="button"], input[type="submit"], input[type="button"] {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; margin: 0; border-radius: var(--radius); border: 1px solid var(--accent-edge);
  background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; text-align: center;
  line-height: 1.2; vertical-align: middle; }
a[role="button"]:hover { text-decoration: none; }
button:hover, [role="button"]:hover { filter: brightness(1.08); }
button.secondary, button.outline, button.contrast, [role="button"].secondary, [role="button"].outline,
[role="button"].contrast, input.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button.secondary:hover, button.outline:hover, button.contrast:hover, [role="button"].secondary:hover { filter: none; background: var(--hover); }
button.danger, [role="button"].danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
button.danger:hover, [role="button"].danger:hover { filter: none; background: var(--danger-soft); }
button[disabled], [role="button"][aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
/* запрос HTMX в пути: кнопка его формы полупрозрачна */
/* не «.htmx-request button»: опрос раз в 10 с ставит класс на весь блок стола, и кнопки мигали бы (ревью блока 14) */
form.htmx-request button, button.htmx-request { opacity: .6; }
td button, td [role="button"], td input[type="submit"] { min-height: 36px; padding: 0 12px; font-size: .93em; font-weight: 500; }
form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; vertical-align: middle; }
form.inline input:not([type="hidden"]), form.inline select { width: auto; }
p.actions, .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* поля: 16 px и выше — телефон не увеличивает страницу при фокусе */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]), select, textarea {
  font: inherit; font-size: 16px; width: 100%; min-height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
textarea { padding: 10px 12px; min-height: 88px; resize: vertical; }
select { padding-right: 32px; appearance: none; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6676' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="file"] { font: inherit; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; vertical-align: middle; cursor: pointer; }
input[readonly] { background: var(--surface-2); }
input.qty, input[type="number"].qty { width: 6rem; display: inline-block; }
label { display: block; margin: 0 0 14px; font-size: .93em; color: var(--muted); }
label > input:not([type="checkbox"], [type="radio"]), label > select, label > textarea { margin-top: 4px; color: var(--ink); }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 1rem; cursor: pointer; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px 6px; min-width: 0; }
legend { padding: 0 6px; color: var(--muted); }
legend strong, legend b { color: var(--ink); }
/* выбор радиокнопками — строки по 48 px с линией между ними («Куда» и подобные) */
fieldset > label:has(> input[type="radio"]) { flex-wrap: wrap; min-height: 48px; margin: 0; border-top: 1px solid var(--line); }
fieldset > legend + label:has(> input[type="radio"]), fieldset > label:has(> input[type="radio"]):first-child { border-top: 0; }

/* таблицы данных: шапка — мелкие прописные серые подписи, строки разделены линией */
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
th { text-align: left; font-weight: 600; font-size: .78em; color: var(--muted); background: var(--th-bg);
  padding: 10px 12px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; vertical-align: bottom; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody > tr:last-child > td { border-bottom: 0; }
td.right, th.right { text-align: right; }
td form { margin: 0; }
tr.muted td, table.muted td { color: var(--muted); }
.overflow-auto { overflow-x: auto; }

/* панель (article): рамка, шапка на светло-серой подложке */
article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
article > header { margin: -14px -16px 14px; padding: 12px 16px; background: var(--panel-head); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; }
article > footer { margin: 14px -16px -14px; padding: 12px 16px; background: var(--panel-head); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius); }
article > :last-child { margin-bottom: 0; }
article > table:first-child, article > .overflow-auto:first-child { margin-top: -14px; }
article > table:last-child, article > .overflow-auto:last-child { margin-bottom: -14px; }
article > table, article > .overflow-auto { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
article > table td:first-child, article > table th:first-child { padding-left: 16px; }
article > table td:last-child, article > table th:last-child { padding-right: 16px; }

/* раскрывашка со стрелкой */
details > summary { cursor: pointer; list-style: none; display: block; min-height: 32px; padding: 4px 0; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; color: var(--muted); display: inline-block; width: 1em; margin-right: 4px; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }
details[open] > summary { margin-bottom: 10px; }
/* раскрывашка — действие («Изменить владельца», «Добавить кабинет»): синим, как ссылка, — серой стрелкой и чёрным
   текстом её не было видно (владелец на stage, 03.10.2026). Короб стола — не действие, остаётся текстом */
details > summary { color: var(--accent); font-weight: 600; }
details > summary::before { color: var(--accent); }
details[data-keep] > summary, details[data-keep] > summary::before { color: var(--ink); font-weight: 400; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
@media (max-width: 700px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.grid > button, .grid > [role="button"] { margin-bottom: 14px; }

nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
nav li + li { margin-top: 0; }
nav[aria-label="breadcrumb"] { margin-bottom: 10px; }
nav[aria-label="breadcrumb"] ul { gap: 4px 0; }
nav[aria-label="breadcrumb"] li + li::before { content: "›"; color: var(--muted); padding: 0 8px; }
/* пункты шапки переносятся, а не уезжают за край (спека 11б, раздел 7.5); на узком экране их прячет «Меню» */
header nav, header nav ul { flex-wrap: wrap; }

/* крутилка: aria-busy и индикатор HTMX (виден только во время запроса — правило htmx) */
[aria-busy="true"]::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* «меньше движения» в настройках устройства — ни переходов, ни анимаций, в том числе перелёта строки стола */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── смысловые классы шаблонов ── */
.muted { color: var(--muted); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.error { color: var(--danger); }
span.error, strong.error, small.error { font-weight: 600; }
/* сообщение об ошибке — красный текст на красноватой подложке со значком */
p.error, article.error, div.error { background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--radius);
  padding: 10px 14px 10px 38px; position: relative; font-weight: 600; }
p.error::before, article.error::before, div.error::before { content: "✕"; position: absolute; left: 14px; top: 10px; font-weight: 700; }
.error.big { font-size: 1.3rem; font-weight: 750; line-height: 1.3; }
.error.big::before { top: 11px; }
.notice { background: var(--accent-soft); border: 1px solid #c9d5f5; border-radius: var(--radius); padding: 10px 14px; }
.burning { color: var(--hot); }
tr.burning > td { color: var(--hot); }
tr.burning > td:first-child { box-shadow: inset 4px 0 0 var(--hot); }
.hot { color: var(--hot); font-weight: 700; }
.bring { color: var(--warn); font-weight: 600; }
.step-done { color: var(--ok); font-weight: 700; }
td.sticker { font-family: var(--mono); font-weight: 700; white-space: nowrap; letter-spacing: .02em; }
.badge { font-weight: 700; }
.ozon-key-warn { color: var(--warn); }
.ozon-key-alarm { color: var(--danger); }
.due { font-size: .88em; font-weight: 600; padding: 0 6px; border-radius: 4px; white-space: nowrap; }
.due.warn { color: var(--warn); background: var(--warn-soft); }
.due.late { color: var(--danger); background: var(--danger-soft); }
.mp { display: inline-block; padding: 1px 8px; border-radius: 4px; color: #fff; font-size: .82em; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.mp.wb { background: #a21caf; }
.mp.ozon { background: #005bff; }
.card-row { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.card-row > :last-child { margin-left: auto; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sound-toggle { font-size: .93em; }
article.login { max-width: 26rem; margin: 3rem auto; }

/* ── прежние свои классы экранов: смысл тот же, цвета — «Строгого»; раскладки экранов уточняются ниже по группам ── */
.scan-input { font-size: 1.5rem; }
article.scan-found { border-left: 5px solid var(--accent); }
article.scan-rejected { border-left: 5px solid var(--danger); }
.scan-found .big, .scan-found p.big { font-size: 1.35rem; font-weight: 750; }
.troubles p { margin: 0 0 6px; }
/* главная: список склада раскрывается нажатием на строку склада (OZ4, владелец 27.09.2026) */
tr[data-toggle] { cursor: pointer; }
tr[data-toggle]:hover > td { background: var(--hover); }
.wh-arrow::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
tr[aria-expanded="true"] .wh-arrow::before { transform: rotate(90deg); }
tr[data-warehouse] > td:nth-child(2) { color: #a21caf; font-weight: 700; }
tr[data-ozon-warehouse] > td:nth-child(2) { color: #005bff; font-weight: 700; }
/* приёмка «Сканом» (спека 11б, раздел 6) */
.mode-nav ul { gap: 1.2rem; }
.mode-nav a.active { font-weight: 700; text-decoration: underline; }
article.count-ok { border-left: 5px solid var(--ok); }
article.count-ask { border-left: 5px solid var(--warn); }
article.count-minus { border-left: 5px solid var(--line-strong); }
.target { font-family: var(--mono); font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--ok); }
.target.ask { font-family: inherit; font-size: 1.5rem; color: var(--warn); }
.target.minus { color: var(--muted); font-size: 2rem; }
.count-total { font-size: 1.1rem; margin: 4px 0 0; }
.count-total strong { font-size: 1.4rem; }
.scan-state { font-size: .93em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.scan-state .dot { width: 9px; height: 9px; margin-right: 4px; }
tr.last-scan td { font-weight: 700; }
.put-left { font-size: 1.5rem; font-weight: 800; color: var(--hot); white-space: nowrap; }
.cell-chips { display: grid; gap: 8px; margin: 10px 0; }
.cell-chips form { margin: 0; }
.cell-chips button { width: 100%; min-height: 48px; justify-content: flex-start; gap: 10px; align-items: baseline; padding: 12px 14px;
  font-family: var(--mono); font-weight: 700; background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.cell-chips button small { font-family: var(--font); font-weight: 400; color: var(--muted); }
.cell-chips .chip-group { margin: 4px 0 0; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
/* место хранения (блок 16): Склад — цветом действий, Запас — своим; слово рядом, цвет не единственный носитель */
.place { display: inline-block; font-family: var(--font); font-size: .78em; font-weight: 700; padding: 0 6px; border-radius: 4px;
  letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.place.pick { background: var(--accent-soft); color: var(--accent); }
.place.reserve { background: #efe7da; color: #6b4a12; }
.cell-group { display: inline-block; margin-right: 12px; }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.put-grid { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 12px; }
.put-grid button { grid-column: 1 / -1; }

/* ── узкий экран: таблицы карточками из той же разметки (спека 14, раздел 4.5) ──
   Строка — блок с рамкой, ячейки — строчкой с переносом, шапка таблицы скрыта. Раскладку под экран задаёт класс обёртки
   (t-…, ниже по экранам); таблица, что влезает без потерь, помечается классом plain и остаётся таблицей. */
@media (max-width: 700px) {
  table:not(.plain), table:not(.plain) > tbody, table:not(.plain) > tbody > tr, table:not(.plain) > tbody > tr > td { display: block; width: auto; }
  table:not(.plain) > thead { display: none; }
  table:not(.plain) > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 14px; margin-bottom: 10px; background: var(--surface); }
  table:not(.plain) > tbody > tr > td { padding: 2px 0; border: 0; box-shadow: none; min-width: 0; max-width: 100%; }
  table:not(.plain) > tbody > tr > td[colspan] { flex-basis: 100%; }
  table:not(.plain) > tbody > tr > td:empty { display: none; }
  table:not(.plain) > tbody > tr.burning { box-shadow: inset 5px 0 0 var(--hot); padding-left: 18px; }
  article > table:not(.plain) { width: auto; margin: 0; }
  article > table:not(.plain):last-child { margin-bottom: 0; }
  td.right { text-align: left; }
  .card-row > :last-child { margin-left: 0; }
}

/* ── шапка ── */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 8px var(--pad); display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: .02em; color: var(--accent); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; }
.nav > a { color: var(--ink); text-decoration: none; padding: 8px 11px; border-radius: var(--radius); min-height: 42px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav > a:hover { background: var(--hover); }
.nav > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); font-weight: 600; }
.nav-printer { margin-left: auto; }
.nav-user { color: var(--muted); padding: 0 4px; white-space: nowrap; }
.nav-logout button { min-height: 38px; padding: 0 14px; }
.menu-btn { display: none; }
/* бейджи 🔥 ⚠ и ключ Ozon — ярлыками внутри «Главной» (одна точка опроса /nav/badges) */
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badges:empty { display: none; }
.badges > * { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-weight: 700;
  font-size: .86em; line-height: 1.6; white-space: nowrap; text-decoration: none; }
.badges > .burning { background: var(--hot-soft); color: var(--hot); }
.badges > a.badge { background: var(--warn-soft); color: var(--warn); }
.badges > .ozon-key-warn { background: var(--warn-soft); white-space: normal; }
.badges > .ozon-key-alarm { background: var(--danger-soft); white-space: normal; }
/* точка агента печати: зелёная — на связи, красная — нет; подпись для чтения с экрана внутри */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); flex: none; }
.dot.off { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

@media (max-width: 959px) {
  .top-in { gap: 8px; }
  /* пункты меню — прямые участники строки шапки: «Главная» и принтер в строке, остальное — по «Меню» */
  .nav { display: contents; }
  .nav > a, .nav > .nav-user, .nav > form.nav-logout { order: 10; flex: 1 0 100%; display: none; }
  .nav > a.nav-home { order: 1; display: inline-flex; flex: 0 1 auto; margin-left: auto; padding: 6px; min-width: 0; box-shadow: none; }
  .nav-home .nav-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* бейджей нет — в строке шапки видно слово «Главная», иначе пункт пустой */
  .nav-home:not(:has(.badges > *)) .nav-word { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav > a.nav-printer { order: 2; display: inline-flex; flex: none; margin: 0; padding: 6px 8px; }
  .nav-printer .nav-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-btn { display: inline-flex; order: 3; min-height: 40px; padding: 0 14px; }
  .menu-btn::before { content: ""; width: 16px; height: 12px; flex: none;
    background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .top.open .nav > a.nav-item { display: flex; min-height: 48px; padding: 0 10px; font-size: 1.05rem; box-shadow: none; }
  .top.open .nav > a.nav-item[aria-current="page"] { background: var(--surface-2); font-weight: 650; }
  .top.open .nav > .nav-user { display: flex; align-items: center; flex: 1 0 auto; order: 11; min-height: 48px; padding: 0 10px; border-top: 1px solid var(--line); }
  .top.open .nav > form.nav-logout { display: flex; flex: 0 0 auto; order: 12; border-top: 1px solid var(--line); min-height: 48px; }
}

/* ── подменю админки: на компьютере — полоса вкладок, на узком экране — кнопка со списком (спека 14, раздел 4.4) ── */
.subnav { background: var(--surface-2); border-top: 1px solid var(--line); }
.subnav-btn { display: none; }
.subnav-list { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); display: flex; gap: 2px; overflow-x: auto; }
.subnav-list a { padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; white-space: nowrap; }
.subnav-list a:hover { color: var(--ink); }
.subnav-list a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); font-weight: 600; }
@media (max-width: 959px) {
  .subnav-btn { display: flex; width: calc(100% - 2 * var(--pad)); margin: 8px var(--pad); gap: 6px; justify-content: flex-start;
    background: var(--surface); color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
  .subnav-btn::after { content: "▾"; margin-left: auto; color: var(--muted); }
  .subnav.open .subnav-btn::after { content: "▴"; }
  .subnav-list { display: none; }
  .subnav.open .subnav-list { display: grid; gap: 2px; padding-bottom: 8px; }
  .subnav.open .subnav-list a { min-height: 46px; color: var(--ink); border-radius: var(--radius); }
  .subnav.open .subnav-list a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
}

/* ── журналы записей: одна вкладка, переключатель WB / Ozon / Банк (спека 14, раздел 5) ── */
.log-head { display: grid; gap: 10px; justify-items: start; margin-bottom: 12px; }
.log-head h1 { margin: 0; }
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.seg-tabs a { padding: 0 22px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius);
  color: var(--muted); text-decoration: none; font-weight: 500; }
.seg-tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(26, 34, 48, .12); }
.seg-tabs .cnt { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: .85em; }
details.filters { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
details.filters > summary { display: none; }
details.filters form { margin: 0; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; }
details.filters label { margin-bottom: 0; }
details.filters button { margin-bottom: 0; }
.resline { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.st { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-size: .9em; padding: 1px 8px; border-radius: 4px; white-space: nowrap; }
.st.ok { color: var(--ok); background: var(--ok-soft); }
.st.err { color: var(--danger); background: var(--danger-soft); }
.st.wait { color: var(--warn); background: var(--warn-soft); }
.t-log td details { margin: 4px 0 0; }
.t-log td details > summary { color: var(--accent); font-size: .9em; min-height: 0; }
.t-log td details[open] > summary { margin-bottom: 6px; }
.t-log td details pre { max-width: 60ch; font-size: .82em; margin-bottom: 6px; }
.t-log td details p { margin-bottom: 6px; }
.t-log td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pager { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
@media (max-width: 959px) {
  details.filters form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  details.filters form > label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .seg-tabs { display: flex; justify-self: stretch; }
  .seg-tabs a { flex: 1; padding: 0 8px; }
  details.filters { padding: 4px 14px; }
  details.filters[open] { padding-bottom: 12px; }
  details.filters > summary { display: flex; justify-content: space-between; min-height: 40px; align-items: center; font-weight: 600; }
  details.filters > summary::before { content: none; }
  details.filters > summary span { color: var(--muted); font-weight: 400; font-size: .9em; text-align: right; }
  details.filters form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  /* запись — карточкой: операция и итог в первой строке, время и учётка во второй, остальное ниже */
  .t-log > table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
  .t-log tbody > tr > td:nth-child(6) { display: contents; }
  .t-log tbody > tr > td:nth-child(6) > .st { grid-column: 2; grid-row: 1; align-self: start; }
  .t-log tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 2; color: var(--muted); font-size: .9em; }
  .t-log tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 2; color: var(--muted); font-size: .9em; text-align: right; }
  .t-log tbody > tr > td:nth-child(n+2):nth-child(-n+4), .t-log tbody > tr > td:nth-child(6) > :not(.st) { grid-column: 1 / -1; font-size: .93em; }
  .t-log:not(.t-log-bank) tbody > tr > td:nth-child(3), .t-log.t-log-bank tbody > tr > td:nth-child(4) { grid-row: 1; grid-column: 1; font-weight: 700; font-size: 1rem; }
  .t-log tbody > tr > td[colspan] { grid-column: 1 / -1; grid-row: auto; }
}

/* ── главная (спека 14, раздел 4.6, п. 1): тревоги плитками, таблица складов, на узком — карточки складов ── */
.troubles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: var(--radius); font-size: .87rem; line-height: 1.35;
  background: var(--danger-soft); }
.tile > strong { color: var(--danger); }
.tile.fire { background: var(--hot-soft); }
.tile.fire > strong { color: var(--hot); }
.tile.warn { background: var(--warn-soft); }
.tile.warn > strong { color: var(--warn); }
.tile > [role="button"] { align-self: flex-start; margin-top: auto; min-height: 30px; padding: 0 10px; font-size: .95em; font-weight: 500; }
.t-home > table > tbody > tr > td { vertical-align: top; }
/* между телефоном и компьютером (планшет) таблица шире экрана — прокручивается внутри панели, страница — нет */
article.t-home { overflow-x: auto; }
.t-home > table > tbody > tr[data-toggle] > td:first-child, .t-home > table > tbody > tr > td:first-child { font-weight: 600; }
/* «слепой» кабинет — красная полоса и подложка; горящий склад — оранжевая полоса (темы 13, 23) */
.t-home tr:has([data-banner]) > td { background: var(--blind-bg); }
.t-home tr:has([data-banner]) > td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.t-home tr:not(:has([data-banner])):has(> td > .burning) > td:first-child { box-shadow: inset 4px 0 0 var(--hot); }
.t-home [data-banner], .t-home td > [data-waiting] { display: inline-block; font-size: .9em; margin-top: 2px; }
.t-home td > .burning { font-weight: 700; white-space: nowrap; }
/* маркетплейс — ярлыком своего цвета с подписью (темы 5, 23) */
.t-home tr[data-warehouse] > td:nth-child(2), .t-home tr[data-ozon-warehouse] > td:nth-child(2) { font-size: 0; }
.t-home tr[data-warehouse] > td:nth-child(2)::before, .t-home tr[data-ozon-warehouse] > td:nth-child(2)::before {
  display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: .82rem; font-weight: 700; color: #fff; letter-spacing: .02em; line-height: 1.5; }
.t-home tr[data-warehouse] > td:nth-child(2)::before { content: "WB"; background: #a21caf; }
.t-home tr[data-ozon-warehouse] > td:nth-child(2)::before { content: "Ozon"; background: #005bff; }
.t-home td > [role="button"] { min-height: 36px; padding: 0 14px; font-weight: 600; }
.t-home td:nth-child(6) { white-space: nowrap; }
/* раскрытый список склада — серой подложкой, заказы мельче */
.t-home tr.wh-list > td { background: var(--list-bg); padding: 10px 12px 14px 34px; }
.t-home tr.wh-list table { font-size: .92em; background: var(--surface); border: 1px solid var(--line); }
.t-home tr.wh-list th, .t-home tr.wh-list td { padding: 7px 10px; }
.t-home tr.wh-list p { margin: 12px 0 6px; }
@media (max-width: 700px) {
  /* склад — карточкой: селлер, маркетплейс и склад в первой строке, пометка кабинета — под ними, затем числа,
     поставки и «Собрать» во всю ширину; раскрытие — нажатием на карточку, как на строку */
  .t-home { border: 0; padding: 0; background: none; }
  .t-home > table > tbody > tr:not(.wh-list) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .t-home > table > tbody > tr:not(.wh-list)::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(3) { display: contents; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(3) [data-banner] { flex-basis: 100%; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(n+4) { order: 3; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(7), .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(8) { order: 4; flex-basis: 100%; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(7):has(> .muted:only-child) { display: none; }
  .t-home tr[data-warehouse] > td:nth-child(7)::before { content: "поставки: "; color: var(--muted); }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(6)::before { content: "время "; color: var(--muted); }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(6):not(:has(*)):is(:empty) { display: none; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(8) > [role="button"] { width: 100%; min-height: 44px; margin-top: 4px; }
  .t-home > table > tbody > tr:not(.wh-list) > td:nth-child(4) br { display: none; }
  .t-home tr:has([data-banner]) { background: var(--blind-bg); box-shadow: inset 5px 0 0 var(--danger); padding-left: 18px; }
  .t-home tr:has([data-banner]) > td { background: none; }
  .t-home tr:not(:has([data-banner])):has(> td > .burning) { box-shadow: inset 5px 0 0 var(--hot); padding-left: 18px; }
  .t-home tr > td:first-child { box-shadow: none !important; }
  .t-home tr.wh-list { margin-top: -6px; background: var(--list-bg); }
  .t-home tr.wh-list > td { padding: 0; background: none; }
  .t-home tr.wh-list .overflow-auto { overflow: visible; }
  .t-home tr.wh-list table { border: 0; background: none; }
  .t-home tr.wh-list tbody > tr { margin-bottom: 6px; padding: 8px 10px; font-size: .95em; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
  .t-home tr.wh-list tbody > tr > td:first-child { font-weight: 700; }
  /* задание WB: возраст, артикул · размер, номер — строкой; название и пометка ниже */
  .t-home tr.wh-list tbody > tr:has(> td:nth-child(6)) > td:nth-child(3)::before { content: "· "; }
  .t-home tr.wh-list tbody > tr:has(> td:nth-child(6)) > td:nth-child(4) { order: 2; flex-basis: 100%; }
  .t-home tr.wh-list tbody > tr:has(> td:nth-child(6)) > td:nth-child(5) { color: var(--muted); }
  .t-home tr.wh-list tbody > tr:has(> td:nth-child(6)) > td:nth-child(6) { order: 3; flex-basis: 100%; }
  /* отправление Ozon: срок и номер строкой, товары и пометки ниже */
  .t-home tr.wh-list tbody > tr:not(:has(> td:nth-child(6))) > td:nth-child(n+3) { flex-basis: 100%; }
}

/* ── «Собрать» WB и Ozon (раздел 4.6, п. 2): горящие — оранжевая полоса и 🔥, «нельзя собрать» — серая полоса без
   флажка, причина жирным; на узком — карточка на задание, флажок ставится нажатием в любое место карточки ── */
.back { margin-bottom: 4px; }
.back a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; min-height: 36px; }
.t-collect { border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0; overflow-x: auto; }
.t-collect > table > tbody > tr > td { vertical-align: middle; }
.t-collect > table { margin: 0; }
.t-collect > table > tbody > tr:not(:has(input.pick)) > td { color: var(--muted); }
.t-collect > table > tbody > tr:not(:has(input.pick)) > td:first-child { box-shadow: inset 4px 0 0 var(--line-strong); }
.t-collect > table > tbody > tr:not(:has(input.pick)) strong { color: var(--ink); }
.t-collect > table > tbody > tr > td:first-child { width: 44px; text-align: center; }
label.pick-cell { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin: 0; cursor: pointer; }
.t-collect > table > tbody > tr > td:nth-last-child(2) { white-space: nowrap; }
form > fieldset { margin-top: 4px; }
button.start { min-height: 52px; padding: 0 28px; font-size: 1.05rem; }
@media (max-width: 700px) {
  .t-collect { border: 0; overflow: visible; }
  .t-collect > table > tbody > tr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; }
  .t-collect > table > tbody > tr > td { grid-column: 2 / -1; }
  .t-collect > table > tbody > tr > td:first-child { grid-column: 1; grid-row: 1 / span 4; width: auto; }
  /* флажок — на всю карточку */
  .t-collect label.pick-cell::after { content: ""; position: absolute; inset: 0; }
  .t-collect > table > tbody > tr > td:nth-child(2) { color: var(--muted); font-size: .9em; order: 3; }
  .t-collect > table > tbody > tr > td:nth-child(3) { font-weight: 700; }
  .t-collect > table > tbody > tr:not(:has(input.pick)) { box-shadow: inset 5px 0 0 var(--line-strong); padding-left: 18px; }
  .t-collect > table > tbody > tr:not(:has(input.pick)) > td { box-shadow: none; }
  button.start { width: 100%; }
}

/* ── стол упаковки WB, поставка и сборка (раздел 4.6, п. 3; тема 6): одной колонкой — поле скана, под ним отмена
   и звук, результат скана цветной карточкой, «Упаковать», «Коробы», «Передать в доставку» во всю ширину ── */
.scan-zone { background: var(--scan-bg); padding: 14px; }
.scan-zone > form { margin: 0; }
/* поле скана — рамка 3 px цвета действия и значок сканера; шрифт крупный, телефон не увеличивает страницу */
input.scan-input { min-height: 72px; font-size: 1.6rem; border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
  padding-left: 60px; background: var(--surface) no-repeat 16px center / 32px 32px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6676' stroke-width='1.8'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 8v8M10 8v8M13 8v8M16.5 8v8'/%3E%3C/svg%3E"); }
input.scan-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
input.scan-input::placeholder { color: var(--muted); opacity: .85; }
.scan-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
/* звук — переключателем */
label.sound-toggle { display: inline-flex; min-height: 44px; margin: 0; user-select: none; }
input[data-sound-toggle] { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--line-strong); position: relative; transition: background .15s; }
input[data-sound-toggle]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
input[data-sound-toggle]:checked { background: var(--ok); }
input[data-sound-toggle]:checked::after { left: 21px; }
/* результат скана: синяя — «жду второй код», зелёная — «в коробе», красная — отказ */
#scan-result:empty { display: none; }
#scan-result { margin-bottom: var(--gap); }
#scan-result > div > * + * { margin-top: 10px; }
#scan-result article { margin-bottom: 0; }
article.scan-found { border: 1px solid var(--ok-line); border-left-width: 1px; background: var(--ok-soft); }
article.scan-found:not(:has(form)) > header { color: var(--ok); }
article.scan-found:not(:has(form)) > header::before { content: "✓ "; }
article.scan-found:has(input[data-scan]) { border-color: var(--accent); background: var(--half-bg); }
article.scan-found > header { background: none; border: 0; margin-bottom: 4px; padding-bottom: 0; font-size: 1.05rem; }
article.scan-found .big, article.scan-found p.big { font-size: 1.45rem; font-weight: 750; line-height: 1.25; }
article.scan-found input.scan-input { min-height: 60px; }
article.scan-rejected { border: 1px solid var(--danger-line); border-left-width: 1px; background: var(--danger-soft); }
article.scan-rejected > p.error { background: none; border: 0; padding: 0 0 0 30px; }
article.scan-rejected > p.error::before { left: 0; top: 0; }
/* панели «Упаковать» и «Коробы» */
/* между телефоном и компьютером таблица шире панели — прокрутка внутри панели, а не обрезка (ревью блока 14) */
#supply-body > article { padding: 0; overflow-x: auto; }
#supply-body > article > header { margin: 0; border-radius: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
#supply-body > article > header strong { font-size: 1.05rem; }
#supply-body > article > p { padding: 0 16px; margin: 14px 0; }
#supply-body > article > table { width: 100%; margin: 0; }
table.supply-to-pack td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
table.supply-to-pack td:first-child { padding-left: 16px; }
table.supply-to-pack td:last-child { padding-right: 16px; }
table.supply-to-pack td.right { white-space: nowrap; }
table.supply-to-pack td:nth-child(4):not(:empty) { color: var(--warn); font-weight: 600; font-size: .9em; }
details.box { border-top: 1px solid var(--line); margin: 0; }
details.box > summary { padding: 12px 16px; min-height: 44px; margin: 0; }
details.box-open > summary { background: var(--open-bg); box-shadow: inset 4px 0 0 var(--ok); font-weight: 600; }
.state-open { color: var(--ok); font-weight: 700; }
details.box table { font-size: .92em; }
details.box td { padding: 7px 16px 7px 34px; border-top: 1px solid var(--line); border-bottom: 0; }
details.box > p { padding: 0 16px; }
.box-acts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
/* отступы панели выше по старшинству, чем у p.error и .box-acts: значок ✕ налезал на текст (ревью блока 14) */
#supply-body > article > p.error { margin: 12px 16px; padding: 10px 14px 10px 38px; }
#supply-body > article > p.box-acts { padding: 12px 16px; margin: 0; }
#supply-body > [role="button"], #supply-body > button[disabled] { min-height: 52px; font-size: 1.05rem; margin-bottom: 8px; }
/* перелёт: строка, приехавшая в короб, на секунду подсвечивается (ui.js) */
tr.landed > td { animation: landed 1.6s ease-out; }
@keyframes landed { 0%, 35% { background: var(--land-bg); } 100% { background: transparent; } }
/* «Ячейки»: после «Сохранить» и «Удалить» экран возвращается к строке по якорю — она не у самого края окна
   и на секунду подсвечивается, чтобы глаз её нашёл */
tr[id^="cell-"], tr[id^="zone-"] { scroll-margin-top: 80px; }
tr[id^="cell-"]:target > td, tr[id^="zone-"]:target > td { animation: landed 1.6s ease-out; }
@media (max-width: 700px) {
  label .due { white-space: normal; }
  input.scan-input { min-height: 64px; font-size: 1.25rem; padding-left: 50px; background-position: 12px center; background-size: 26px 26px; }
  /* «Упаковать» — строкой-карточкой: артикул и стикер, под ними ячейка, пометка и действия */
  table.supply-to-pack > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; margin: 0; padding: 10px 14px; }
  table.supply-to-pack > tbody > tr > td { padding: 0 !important; }
  table.supply-to-pack > tbody > tr > td:first-child { font-weight: 600; }
  table.supply-to-pack > tbody > tr > td.sticker { grid-column: 2; grid-row: 1; text-align: right; }
  table.supply-to-pack > tbody > tr > td:nth-child(n+3) { grid-column: 1 / -1; }
  table.supply-to-pack td.right { white-space: normal; }
  details.box table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; border: 0; border-top: 1px solid var(--line);
    border-radius: 0; margin: 0; padding: 8px 14px 8px 30px; }
  details.box td { padding: 0; border: 0; }
  details.box td.sticker { grid-column: 2; grid-row: 1; }
}

/* ── стол и сборка Ozon (раздел 4.6, п. 4): те же компоненты, что у WB; «Упаковано — везти в пункт приёма» и «Сдано
   сегодня» — панели. Шаги сборки обеих линий — строками с галочками ── */
.ozon-count { margin: 0 0 8px; font-size: 1.05rem; }
#ozon-table-body > article { padding: 0; overflow-x: auto; }
#ozon-table-body > article > header { margin: 0; border-radius: 0; }
#ozon-table-body > article > header strong { font-size: 1.05rem; }
#ozon-table-body > article > p { padding: 0 16px; margin: 12px 0; }
#ozon-table-body > article > table { width: 100%; margin: 0; }
table.packing-items td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
table.packing-items td:first-child { padding-left: 16px; }
table.packing-items td:last-child { padding-right: 16px; }
table.packing-items td.right { white-space: nowrap; }
/* погашенная кнопка в строке («Напечатать этикетку» без агента) — второстепенной, а не синей */
td button[disabled] { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
#steps > ul, #ship-steps ol { list-style: none; padding: 0; margin-bottom: 14px; }
#steps > ul > li, #ship-steps ol > li { padding: 6px 0; border-bottom: 1px solid var(--line); margin: 0; }
#steps > ul > li:last-child, #ship-steps ol > li:last-child { border-bottom: 0; }
@media (max-width: 700px) {
  /* отправление — строкой-карточкой: номер и товар, под ними ячейка, состояние и действия */
  table.packing-items > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; margin: 0; padding: 10px 14px; }
  table.packing-items > tbody > tr > td { padding: 0 !important; }
  table.packing-items td.right { white-space: normal; }
}

/* ── приёмка, остатки, выдача (раздел 4.6, п. 5): вкладки приёмки — переключатель во всю ширину, «Без ячейки» —
   оранжевым кружком; карточка скана — зелёная «→ ячейка», жёлтая «выберите ячейку», красная — отказ, серая — «−1» ── */
nav.mode-nav { background: none; border: 0; margin-bottom: 12px; }
.mode-nav ul { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.mode-nav li { flex: 1; }
.mode-nav a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 10px; border-radius: var(--radius);
  color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.mode-nav a.active { background: var(--surface); color: var(--ink); font-weight: 650; text-decoration: none; box-shadow: 0 1px 2px rgba(26, 34, 48, .12); }
.mode-nav [data-nocell-total] { background: var(--hot); color: #fff; border-radius: 99px; padding: 0 7px; font-size: .82em; font-weight: 700; }
#count-body > article, #count-body > div > article { display: grid; gap: 8px; }
#count-body article > * { margin: 0; }
article.count-ok { border: 1px solid var(--ok-line); background: var(--ok-soft); }
article.count-ask { border: 1px solid var(--warn-line); background: var(--warn-soft); }
article.count-minus { border: 1px solid var(--line); background: var(--surface-2); }
.count-total strong { font-variant-numeric: tabular-nums; }
#count-body form.actions button { width: 100%; }
#count-body table.plain { margin-bottom: var(--gap); }
#count-body table.plain td, #count-body table.plain th { padding: 8px; }
#count-body p.actions [role="button"] { min-height: 52px; }
#count-body .cell-chips + form { margin: 0; }
form.inline:has(> button.danger) { margin-top: 4px; }
@media (max-width: 700px) {
  #count-body p.actions, #count-body p.actions [role="button"] { display: flex; width: 100%; }
  form.inline:has(> button.danger), form.inline > button.danger { width: 100%; }
}
/* компактная карточка: ячейки строки идут строчкой с переносом — для журналов и списков, где подпись не нужна */
@media (max-width: 700px) {
  .t-inline > table > tbody > tr { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 8px 12px; margin-bottom: 6px; }
  .t-inline > table > tbody > tr > td { padding: 0; }
  .t-inline > table > tbody > tr > td:first-child { flex-basis: 100%; font-weight: 600; }
}
@media (max-width: 700px) {
  .t-cells > table > tbody > tr > td:nth-child(2)::before { content: "остаток "; color: var(--muted); }
  .t-cells > table > tbody > tr > td:nth-child(3)::before { content: "доступно "; color: var(--muted); }
  .t-cells > table > tbody > tr > td:nth-child(4) { flex-basis: 100%; }
  .t-stock > table > tbody > tr > td:nth-child(5)::before { content: "Склад "; color: var(--muted); }
  .t-stock > table > tbody > tr > td:nth-child(6)::before { content: "Запас "; color: var(--muted); }
  .t-stock > table > tbody > tr > td:nth-child(7)::before { content: "всего "; color: var(--muted); }
  .t-stock > table > tbody > tr > td:nth-child(8) { flex-basis: 100%; }
  .t-bring > table > tbody > tr > td:nth-child(2)::before { content: "нужно сейчас "; color: var(--muted); }
  .t-bring > table > tbody > tr > td:nth-child(3)::before { content: "с запасом "; color: var(--muted); }
  .t-bring > table > tbody > tr > td:nth-child(4)::before, .t-ahead > table > tbody > tr > td:nth-child(4)::before { content: "на Складе "; color: var(--muted); }
  .t-bring > table > tbody > tr > td:nth-child(5), .t-ahead > table > tbody > tr > td:nth-child(5) { flex-basis: 100%; }
  .t-ahead > table > tbody > tr > td:nth-child(2)::before { content: "довезти "; color: var(--muted); }
  .t-ahead > table > tbody > tr > td:nth-child(3)::before { content: "в день "; color: var(--muted); }
}

/* ── «Разобрать», принтер, вход, ошибки (раздел 4.6, п. 6) ── */
h1 form.inline, h2 form.inline { margin-left: 12px; }
h1 button, h2 button { font-size: .93rem; min-height: 38px; }
#triage-body > article > p { padding: 10px 0; margin: 0; border-top: 1px solid var(--line); }
#triage-body > article > header + p { border-top: 0; padding-top: 0; }
#triage-body > article > form.inline { margin: 0 0 10px; }
#printer-status section, #printer-select, #printer-actions { margin-bottom: var(--gap); }
#printer-actions form.inline + form.inline { margin-left: 8px; }
@media (max-width: 700px) {
  #printer-actions form.inline, #printer-actions form.inline button { width: 100%; margin: 0 0 8px; }
}

/* ── админка (раздел 4.6, п. 7): формы — строкой выровненных полей, простая форма — не шире 560 px,
   заголовок строки таблицы — обычным текстом ── */
.grid { align-items: end; margin-bottom: 12px; }
.grid > label, .grid > button, .grid > [role="button"] { margin-bottom: 0; }
td > form.grid { margin: 0; align-items: center; }
/* широкая таблица списка (сессии учёток) на планшете — прокрутка внутри обёртки, страница не едет вбок */
.t-inline { overflow-x: auto; }
tr:has(> td > form) > td { vertical-align: middle; }
td > form.grid > label:has(> input[type="checkbox"]) { min-height: 44px; }
article > header > form.grid { margin-bottom: 8px; }
main form:not(.grid, .inline) > label, main form:not(.grid, .inline) > input:not([type="hidden"], .scan-input),
main form:not(.grid, .inline) > select, main form:not(.grid, .inline) > textarea { max-width: 560px; }
tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; color: var(--ink); background: none;
  white-space: normal; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 700px) {
  tbody > tr > th { display: block; padding: 2px 0; border: 0; }
  td > form.grid { gap: 8px; }
  /* поля формы в одну колонку не вплотную: у подписей отступа снизу больше нет (ревью блока 14) */
  .grid { row-gap: 12px; }
}

/* ── взаиморасчёты (раздел 4.6, п. 9): «Ждут решения» — красная панель, «Оплаты ждут решения» — жёлтая, полосы
   статуса банка — серые (не тревога); деньги — по правому краю табличными цифрами; на узком клиент — карточкой
   с галочкой на всю карточку и суммой крупно ── */
p[data-bank-writes], p[data-bank-reads] { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 14px; font-size: .93em; margin-bottom: 10px; }
section[data-waiting] { border: 1px solid var(--danger-line); border-left: 5px solid var(--danger); background: var(--danger-soft);
  border-radius: var(--radius); padding: 12px 16px; }
section[data-waiting] > h2 { color: var(--danger); font-size: 1.05rem; }
section[data-waiting] > table { background: var(--surface); margin: 0; }
section[data-payments-waiting] { border: 1px solid var(--warn-line); border-left: 5px solid var(--warn); background: var(--warn-soft);
  border-radius: var(--radius); padding: 12px 16px; }
section[data-payments-waiting] > h2 { color: var(--warn); font-size: 1.05rem; }
section[data-payments-waiting] > p { margin: 0 0 4px; }
.t-billing { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow-x: auto; }
.t-billing > table { margin: 0; }
.t-billing > table > thead > tr > th:nth-child(n+5):nth-child(-n+8), .t-billing > table > tbody > tr > td:nth-child(n+5):nth-child(-n+8) { text-align: right; }
.t-billing > table > tbody > tr > td:nth-child(n+5):nth-child(-n+8) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-billing > table > tbody > tr > td:nth-child(6) { color: var(--muted); }
.t-billing > table > tbody > tr > td:first-child { width: 44px; }
.t-billing mark { margin: 0 4px 4px 0; }
@media (max-width: 700px) {
  .t-billing { border: 0; overflow: visible; }
  .t-billing > table > tbody > tr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; }
  .t-billing > table > tbody > tr > td { grid-column: 2 / -1; text-align: left !important; }
  .t-billing > table > tbody > tr > td:first-child { grid-column: 1; grid-row: 1 / span 6; width: auto; }
  .t-billing > table > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 700; }
  .t-billing > table > tbody > tr > td:nth-child(5) { grid-column: 3; grid-row: 1; font-size: 1.15em; font-weight: 700; }
  .t-billing > table > tbody > tr > td:nth-child(6)::before { content: "прошлый "; }
  .t-billing > table > tbody > tr > td:nth-child(7)::before { content: "долг "; color: var(--muted); }
  .t-billing label.pick-cell::after { content: ""; position: absolute; inset: 0; }
  .t-billing a { position: relative; z-index: 1; }
}
tfoot th, tfoot td { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--surface-2); font-weight: 700; }
@media (max-width: 700px) {
  /* итоговая строка — одной строкой «Итого … сумма» */
  table:not(.plain) > tfoot { display: block; }
  table:not(.plain) > tfoot > tr { display: flex; gap: 12px; justify-content: space-between; padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius); }
  table:not(.plain) > tfoot > tr > * { display: block; padding: 0; border: 0; background: none; }
  table:not(.plain) > tfoot > tr > td:empty { display: none; }
}