:root{
  --bg:#f6f7f9; --card:#fff; --ink:#16181d; --dim:#6b7280; --line:#e3e6ea;
  --accent:#2563eb; --ok:#0f9d58; --warn:#d97706; --bad:#dc2626;
  --ok-bg:#e8f6ee; --warn-bg:#fdf3e3; --bad-bg:#fdeaea; --accent-bg:#eaf0fe;
  --r:10px;
}
*{box-sizing:border-box}
/* Браузерное [hidden]{display:none} слабее любого авторского правила с классом,
   поэтому .tag и .ac-list продолжали показываться при hidden=true. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:25px;margin:0 0 3px}
h2{font-size:18px;margin:0 0 11px}
.muted{color:var(--dim)}
.small{font-size:14px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── каркас ── */
header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .in{max-width:1440px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:20px;height:56px}
.top .brand{font-weight:700;font-size:17px;color:var(--ink)}
.top nav{display:flex;gap:16px;flex:1}
.top nav a{color:var(--dim);font-weight:500}
.top nav a.on{color:var(--ink);font-weight:600}
.wrap{max-width:1440px;margin:0 auto;padding:20px 18px 60px}
.wrap.wide{max-width:1760px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card + .card{margin-top:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* ── элементы формы ── */
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=number],input[type=password],input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-bg);border-color:var(--accent)}
textarea{min-height:72px;resize:vertical}
label.f{display:block;margin-bottom:8px}
label.f span{display:block;font-size:13px;color:var(--dim);margin-bottom:3px}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:8px;
  background:#fff;cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{background:#f2f4f7;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(.94)}
.btn.danger{color:var(--bad);border-color:#f3c9c9}
.btn.sm{padding:5px 11px;font-size:14px}
.btn.big{padding:13px 24px;font-size:18px}
form.inline{display:inline}

/* ── таблицы: фиксированная раскладка, без горизонтальной прокрутки ── */
table{width:100%;border-collapse:collapse;table-layout:fixed}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);
  text-align:left;font-weight:600}
tbody tr:hover{background:#fafbfc}
tr.dim td{color:var(--dim)}
/* Итог таблицы: липнет к низу окна, чтобы сумма была видна и на длинном документе. */
tfoot td{background:#eef0f3;border-top:2px solid #d5d9de;border-bottom:0;
  position:sticky;bottom:0;padding-top:11px;padding-bottom:11px}
tr.hit td{background:var(--ok-bg)}

/* ── миниатюры обложек в документе ── */
td.cover{padding:6px 4px 6px 8px}
td.cover img{width:36px;height:52px;object-fit:cover;border-radius:3px;display:block;
  background:#eceff2;box-shadow:0 1px 3px rgba(15,20,30,.18)}
td.cover .nocover{display:block;width:36px;height:52px;border-radius:3px;
  background:repeating-linear-gradient(135deg,#f0f2f4,#f0f2f4 5px,#e8ebee 5px,#e8ebee 10px)}

/* ── бейджи и полоса прогресса ── */
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;
  background:#eef0f3;color:#4b5563;white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:#0b6b3d}
.tag.warn{background:var(--warn-bg);color:#92590a}
.tag.bad{background:var(--bad-bg);color:#a31414}
.tag.accent{background:var(--accent-bg);color:#1d4ed8}
.bar{height:9px;border-radius:99px;background:#e9ecf0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);transition:width .2s}
.bar.part i{background:var(--accent)}

/* ── поиск с подсказками ── */
.ac{position:relative}
.ac-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,20,30,.12);
  max-height:420px;overflow:auto}
.ac-item{display:flex;gap:10px;padding:9px 11px;cursor:pointer;border-bottom:1px solid #f1f3f5}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.sel{background:var(--accent-bg)}
.ac-item img{width:38px;height:54px;object-fit:cover;border-radius:3px;background:#eceff2;flex:none}
.ac-item .t{font-weight:600;line-height:1.25}
.ac-item .m{font-size:14px;color:var(--dim);margin-top:2px}

/* ── экран приёмки ── */
.scan-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.scan-grid{grid-template-columns:minmax(0,1fr)}}
#scan{font-size:32px;padding:18px 20px;text-align:center;letter-spacing:.06em;font-weight:600}
.verdict{border-radius:var(--r);padding:18px;min-height:124px;display:flex;flex-direction:column;
  justify-content:center;gap:5px;border:1px solid var(--line);background:#fff;transition:background .12s}
.verdict.ok{background:var(--ok-bg);border-color:#bfe3cd}
.verdict.over{background:var(--bad-bg);border-color:#f0c4c4}
.verdict.extra{background:var(--warn-bg);border-color:#f0dcb4}
.verdict .big{font-size:23px;font-weight:700;line-height:1.25}
.verdict .sub{font-size:15px;color:var(--dim)}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tabs button{padding:8px 15px;border:1px solid var(--line);background:#fff;border-radius:99px;
  cursor:pointer;font-size:15px;font-weight:500}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.panel{max-height:60vh;overflow-y:auto;overflow-x:hidden}
/* Кнопки действий в панели расхождений: переносятся, а не распирают таблицу вбок. */
.acts{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.panel table{table-layout:fixed;width:100%}

.feed{font-size:14px;max-height:240px;overflow:auto}
.feed div{padding:3px 0;border-bottom:1px solid #f1f3f5;display:flex;gap:8px}
.feed .c{color:var(--dim)}
.kbd{display:inline-block;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;font-size:13px;background:#fff;color:var(--dim)}

/* ── печать ── */
@media print{
  header.top,.noprint{display:none!important}
  body{background:#fff}
  .card{border:0;padding:0}
}

/* ── телефон ───────────────────────────────────────────────────────────
   Склад ходит с телефоном чаще, чем с ноутбуком. Правило то же, что и на
   большом экране: никакой горизонтальной прокрутки — вместо неё меньше
   колонок и перенос строк. */
@media (max-width: 720px) {
  body{font-size:15px}
  .wrap{padding:12px 10px 48px}
  .card{padding:12px}
  h1{font-size:21px}

  /* Шапка в две строки: имя прячем, меню уходит вниз и тянется на всю ширину. */
  .top .in{height:auto;min-height:48px;padding:8px 10px;gap:8px;flex-wrap:wrap}
  .top .brand{font-size:15px}
  .top .me{margin-left:auto}
  .top .uname{display:none}
  .top nav{order:3;width:100%;gap:16px;padding-top:2px}

  /* Поля формы занимают строку целиком — инлайновые ширины в шаблонах перебиваем. */
  .row > label.f,
  .row > input, .row > select,
  .card form .row > * {width:100%!important;min-width:0!important}
  .row > .btn, .row > button{width:auto!important}
  .ac{min-width:0!important;width:100%}

  /* Колонки, которые на телефоне только мешают. */
  .hide-sm{display:none!important}

  th,td{padding:8px 6px}
  td.cover img, td.cover .nocover{width:30px;height:44px}

  /* Экран приёмки: поле сканера ниже, панели во всю ширину. */
  #scan{font-size:26px;padding:14px 12px}
  .verdict{min-height:96px;padding:14px}
  .verdict .big{font-size:19px}
  .panel{max-height:46vh}
  .feed{max-height:150px}
  .tabs{gap:4px}
  .tabs button{padding:7px 11px;font-size:14px}
}