:root {
  --b:#2563eb; --b-dark:#1d4ed8; --bg:#f3f5f9; --card:#fff; --line:#e6e8ee;
  --muted:#6b7280; --text:#0f172a; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
}
* { box-sizing:border-box; }
body { font-family:-apple-system,system-ui,'Segoe UI',Roboto,Arial,sans-serif; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
.wrap { max-width:680px; margin:0 auto; padding:0 16px 48px; }
h1 { font-size:18px; margin:0; display:flex; align-items:center; gap:8px; }
h2 { font-size:16px; margin:0; }
label { display:block; margin:12px 0 5px; font-weight:600; font-size:14px; color:#374151; }
input, select { width:100%; padding:11px 12px; border:1px solid #d1d5db; border-radius:11px; font-size:16px; background:#fff; color:var(--text); }
input:focus, select:focus { outline:none; border-color:var(--b); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
button:focus-visible, .dz:focus-visible, .cab-drag:focus-visible {
  outline:3px solid rgba(37,99,235,.45); outline-offset:2px;
}
.hidden { display:none !important; }

/* header */
header.app { position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--line); }
header.app .inner { max-width:680px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#authWhoami { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.test-mode-banner { padding:7px 12px; background:#b91c1c; color:#fff; text-align:center; font-size:14px; font-weight:800; }
body.test-mode { --b:#b91c1c; --b-dark:#991b1b; }

/* buttons */
button { font-family:inherit; padding:10px 13px; border-radius:11px; font-size:15px; font-weight:600; cursor:pointer; border:1px solid var(--b); background:var(--b); color:#fff; transition:background .15s,box-shadow .15s; }
button:hover { background:var(--b-dark); }
button:disabled { opacity:.55; cursor:default; }
.ghost { background:#fff; color:var(--b); border-color:#c7d6f7; }
.ghost:hover { background:#f5f8ff; }
.subtle { background:#eef1f6; color:#374151; border-color:transparent; }
.subtle:hover { background:#e4e8f0; }
.block { width:100%; }
.lg { padding:15px; font-size:16px; }
.sm { padding:7px 11px; font-size:13px; }
.go { width:100%; padding:14px; font-size:16px; margin-top:4px; }
.iconbtn { width:42px; height:42px; min-width:42px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#374151; font-size:18px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.iconbtn:hover { background:#f3f4f6; }
.iconbtn.plus { font-size:24px; color:var(--b); border-color:#c7d6f7; }

/* segmented controls (маркетплейс / режим / брак) */
.seg { display:flex; gap:4px; background:#e9edf4; padding:4px; border-radius:13px; margin:14px 0; }
.seg button { flex:1; border:0; background:transparent; color:#3f4756; padding:11px 8px; border-radius:10px; font-size:15px; font-weight:600; }
.seg button:hover { background:rgba(255,255,255,.5); }
.seg button.active { background:#fff; color:var(--b); box-shadow:var(--shadow); }
.seg button.on { background:#b91c1c; color:#fff; box-shadow:none; }
#mode button { font-size:14px; padding:10px 4px; white-space:nowrap; }

@media (max-width:899px) {
  .topline #seg {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
  }
  .topline #seg button { flex:0 0 auto; }
}

.row { display:flex; gap:8px; align-items:center; margin-top:8px; }
.row > input, .row > select, .row > .btn, .row > button { min-width:0; }
.row > select, .row > .btn, .row > button { flex:1; }

.file-drop { display:block; width:100%; max-width:100%; border:2px dashed var(--line); background:#fff; color:#64748b; text-align:center; font-weight:400; transition:.15s; }
.file-drop:hover { border-color:#94a3b8; background:#f8fafc; color:#475569; }

/* галочка-опция (напр. «Формировать лист подбора»): чекбокс узкий, подпись тянется */
.opt-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:600; font-size:14px; color:#374151; margin:12px 0 0; }
.opt-check input { width:auto; flex:0 0 auto; margin-top:2px; transform:scale(1.15); }
.opt-check > span { min-width:0; }
.cabrow { display:flex; gap:8px; align-items:center; margin:14px 0; }
.cabrow select { flex:1; }

/* panels & chips */
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:14px 0; box-shadow:var(--shadow); }
.panel b { font-size:15px; }
.chip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:14px; margin:10px 0; box-shadow:var(--shadow); }
.chip .ok { color:#15803d; font-weight:700; } .chip .no { color:#b45309; font-weight:700; }
.chip button { margin-left:auto; }
/* #printBar: кнопки идут первыми одним рядом, статус после них — авто-отступ chip-кнопок гасим */
#printBar button { margin-left:0; }
.shk { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:11px 13px; font-size:14px; }
.err { color:#b91c1c; margin-top:10px; white-space:pre-wrap; font-size:14px; }
.err.warn { color:#92400e; background:#fff7ed; border:1px solid #fdba74; border-radius:10px; padding:10px 12px; font-size:16px; font-weight:600; }
/* «ожидают сборки» — заметное, но НЕ пугающее уведомление (не красный err): спокойный янтарный инфо-баннер */
.info { margin-top:10px; color:#854d0e; background:#fefce8; border:1px solid #fde68a; border-radius:10px; padding:10px 12px; font-size:15px; font-weight:600; white-space:pre-wrap; line-height:1.4; }
.sticky-notices { position:fixed; right:16px; bottom:16px; z-index:3000; display:flex; flex-direction:column; gap:8px; max-width:min(420px,calc(100vw - 32px)); }
.sticky-notice { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.18); font-size:14px; font-weight:700; line-height:1.35; }
.sticky-notice.warn { background:#fff7ed; color:#9a3412; border:1px solid #fdba74; }
.sticky-notice.ok { background:#ecfdf5; color:#166534; border:1px solid #86efac; }
.sticky-notice button { flex:0 0 auto; width:22px; height:22px; min-width:22px; padding:0; border-radius:999px; border:0; background:rgba(15,23,42,.08); color:inherit; line-height:22px; }
.sticky-notice-summary { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid #d1d5db; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.18); font-size:13px; }
.sticky-notice-summary button { margin-left:auto; padding:6px 9px; border-radius:8px; font-size:12px; }
.sticky-notice-extra { padding:3px 7px; border-radius:999px; background:#f97316; color:#fff; }
/* мелкая подсказка в баре базы ШК: «нужна только для загрузки из файла» (не блокер) */
.shk-hint { flex-basis:100%; color:var(--muted); font-size:12px; font-weight:400; margin-top:2px; }
#fileBox.drop { outline:2px dashed #2563eb; outline-offset:4px; background:#eff6ff; border-radius:10px; }
#fileBox.drop #dropHint { color:#2563eb; font-weight:700; }
.go:disabled, .go[disabled] { opacity:.7; cursor:wait; animation:gopulse 1s ease-in-out infinite; }
@keyframes gopulse { 0%,100%{opacity:.55} 50%{opacity:.85} }
#packProg { margin:10px 0; }
.prog { position:relative; height:48px; border-radius:12px; background:#eef2f7; border:1px solid var(--line); overflow:hidden; }
.prog-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#bfdbfe,#93c5fd); transition:width .35s ease; }
.prog-left, .prog-right { position:absolute; top:0; bottom:0; display:flex; align-items:center; font-size:15px; font-weight:600; }
.prog-left { left:14px; color:#1e3a5f; } .prog-right { right:14px; color:#6b7280; }
.prog-left b { font-size:26px; margin-right:4px; } .prog-right b { font-size:20px; margin-right:4px; }
.muted { color:var(--muted); font-size:14px; }

/* партии */
.batches-head { display:flex; align-items:center; justify-content:space-between; margin-top:24px; margin-bottom:4px; }
@media (max-width:520px) {
  .batches-head { flex-wrap:wrap; justify-content:flex-start; gap:8px; }
  .batches-head h2 { flex:1 1 100%; }
}
.batch { background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px; margin:10px 0; box-shadow:var(--shadow); }
.batch.fresh { border-color:var(--b); box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.batch .bh { display:flex; align-items:center; gap:8px; font-size:13px; color:#374151; font-weight:600; margin-bottom:10px; }
.batch .files { display:flex; flex-wrap:wrap; gap:6px; }
.batch a.file { padding:8px 11px; background:#f3f4f6; border-radius:9px; text-decoration:none; color:#1f2937; font-size:13px; font-weight:500; border:1px solid #ecedf1; }
.batch a.file:hover { background:#e9edf3; }
.batch .actions { margin-top:10px; }
.badge { background:var(--b); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.02em; }

/* модалки */
.overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50; padding:0; }
.modal { background:#fff; width:100%; max-width:520px; border-radius:18px 18px 0 0; padding:20px; max-height:88vh; overflow:auto; box-shadow:0 -8px 30px rgba(0,0,0,.2); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
@media (min-width:560px) { .overlay { align-items:center; } .modal { border-radius:18px; } }

/* Главная (план 18.07 этап 3): выбор кабинетов для массовой загрузки + модалка совпадений */
.la-cab-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:6px; background:#fff; }
.la-cab-row.disabled { opacity:.5; }
.la-cab-row input[type=checkbox] { width:auto; flex:0 0 auto; }
.la-cab-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; }
.la-cab-toolbar .opt-check { margin:0; }
.la-view-switch { flex:0 0 auto; }
.la-view-switch button { min-width:88px; }
.la-cab-list.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:8px; }
.la-cab-list.tiles .la-cab-row, .la-cab-list.list .la-cab-row { margin:0; min-width:0; }
.la-cab-list.list { display:grid; gap:6px; }
/* Тот же переключатель вида — в «Настройки → API и склады» и «Картинки» (01.08.2026).
   Карточки там уже .panel со своими отступами, поэтому в плитке гасим их margin — иначе
   между колонками сетки набегает двойной зазор. */
.cab-view-switch { flex:0 0 auto; }
.cab-view-switch button { min-width:80px; }
.cab-grid.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:8px; align-items:start; }
.cab-grid.tiles > .panel, .cab-grid.list > .panel { margin:0; min-width:0; }
.cab-grid.list { display:grid; gap:6px; }
@media (max-width:900px) { .cab-grid.tiles { grid-template-columns:1fr; } }
.mm-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:6px; }
.mm-photo { width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--line);
  background:#fff; cursor:zoom-in; flex:0 0 auto; }
#mmZoom { width:300px; height:300px; object-fit:contain; background:#fff; border:2px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.3); position:fixed; z-index:2000; pointer-events:none; }
.mm-qty { width:56px; padding:6px; border:1px solid var(--line); border-radius:8px; text-align:center; }

/* станция упаковки / отчёты.
   С1 (04.08.2026, макет утверждён): фото — главный элемент (60% карточки, на «Сборке» больше),
   размер — гигантским кеглем (читают с метра), поле скана компактное. */
#scan { font-size:16px; padding:10px 12px; flex:0 1 300px; min-width:180px; }
#scanLive { white-space:nowrap; }
#scanLive.live { color:#16a34a; font-weight:700; }
#defectBtn.on { background:#fef3c7; border-color:#f59e0b; color:#92400e; }
#pcard { display:flex; gap:16px; align-items:stretch; padding:12px; }
/* Бокс фото резервирует место ДО загрузки картинки (aspect-ratio) — страница не «прыгает»
   при скане; сама картинка вписывается целиком (contain). */
.pphoto-box { flex:1.4 1 0; min-width:0; display:flex; align-items:center; justify-content:center; }
#pcard.asm-card .pphoto-box { flex:2.2 1 0; }
.pphoto { width:100%; max-height:62vh; aspect-ratio:1/1; object-fit:contain; border-radius:10px;
          border:1px solid #e5e7eb; background:#d3d8de; }
.pid { flex:1 1 0; min-width:0; overflow-wrap:anywhere; }
.part { font-size:20px; font-weight:800; line-height:1.18; word-break:break-word; margin-top:10px; }
/* Размер не должен вылезать из карточки (жалоба 05.08.2026: «буквы и текст вылезают из рамок»):
   длинный размер («2XL-XXL», «44-46») сам ужимается — max-width + ужатие шрифта под ширину бокса. */
.psize { display:inline-block; max-width:100%; font-size:clamp(28px, 11vw, 84px); font-weight:800;
         background:#111827; color:#fff; padding:0 22px; border-radius:14px; line-height:1.2;
         overflow-wrap:anywhere; box-sizing:border-box; }
.psize.long { font-size:clamp(22px, 6vw, 44px); padding:4px 14px; }
/* «Не напечатано» — крупная красная плашка НАД карточкой: мелкую строку статуса внизу с метра
   не видно, и работник шёл жать «Перевыпуск» (печатавший прошлую вещь). */
#noPrintNote { margin-top:12px; padding:12px 14px; border-radius:12px; font-size:18px;
               font-weight:800; color:#7f1d1d; background:#fee2e2; border:2px solid #ef4444;
               white-space:pre-wrap; line-height:1.35; }
.pcolor { display:block; font-size:26px; font-weight:800; color:#111827; margin-top:10px;
          text-transform:capitalize; }
.pbc { font-size:12px; color:#9ca3af; margin-top:8px; word-break:break-all; }
.pcab { margin-top:7px; color:#4b5563; font-size:13px; font-weight:600; }
.pphoto-empty { display:flex; align-items:center; justify-content:center; color:#6b7280; font-size:15px; }
#station-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-top:14px; }
#station-row > #pcard { flex:1 1 300px; margin:0; }
#station-row > #postingsBox { flex:1 1 260px; margin:0; }
#postingsBox { display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; }
#postingsBox:empty { display:none; }

/* «Общага»: одна рабочая станция для всех ЛК. Карточка всегда занимает место слева,
   действия — справа, скан и общий учёт идут ниже без скачков раскладки. */
.common-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.common-mode { width:min(100%,360px); }
#commonStationHost { margin-top:14px; }
#common #stationWorkspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:12px 18px; align-items:start; }
#common #station-row { grid-column:1; grid-row:1 / span 2; margin:0; min-width:0; }
#common #stationControls { grid-column:2; grid-row:1; min-width:0; }
#common #pbtns { grid-column:2; grid-row:2; max-width:none; }
#common #scanBlock { grid-column:1 / -1; grid-row:3; }
#common #scan { max-width:none; }
#common #packProg, #common #commonProg { grid-column:1 / -1; grid-row:4; max-width:none; }
#common #perr { grid-column:1 / -1; grid-row:5; }
#common #stationLog { grid-column:1 / -1; grid-row:6; }
#common #pcard { min-height:300px; width:100%; box-sizing:border-box; }
/* С1: размер фото в «Общаге» задаёт .pphoto-box (пропорцией), фиксированные width убраны —
   иначе они перебивали бы новую крупную карточку по специфичности. */
#common #positions { margin-top:8px; }
@media (max-width:860px) {
  #common #stationWorkspace { grid-template-columns:1fr; }
  #common #station-row, #common #stationControls, #common #pbtns, #common #scanBlock,
  #common #packProg, #common #commonProg, #common #perr, #common #stationLog { grid-column:1; grid-row:auto; }
  #common #station-row { order:1; }
  #common #stationControls { order:2; }
  #common #pbtns { order:3; }
  #common #scanBlock { order:4; }
  #common #packProg, #common #commonProg { order:5; }
  #common #perr { order:6; }
  #common #stationLog { order:7; }
  #common #pcard { min-height:210px; }
}
@media (max-width:480px) {
  #common #pcard { min-height:180px; }
  #common #pcard .part { font-size:18px; }
  .psize { font-size:15vw; }
}
.phead { flex-basis:100%; font-size:13px; color:#374151; font-weight:600; margin:0; }
.phint { font-size:11px; color:#9ca3af; font-weight:400; }
.prow { background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px 16px; margin:0; width:auto; align-self:flex-start; box-shadow:var(--shadow); transition:background .2s, border-color .2s, opacity .35s, transform .35s; touch-action:manipulation; }
.prow.multi { border-color:#f59e0b; background:#fffdf8; }
.prow.done { border-color:#16a34a; background:#ecfdf5; }
.pdone { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:34px; height:34px;
  border-radius:50%; border:2px solid var(--line); background:#fff; color:transparent; font-size:18px; font-weight:800;
  line-height:1; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background .15s, border-color .15s; }
.prow.done .pdone { border-color:#16a34a; background:#16a34a; color:#fff; }
.prow.wrong { border-color:#dc2626; background:#fef2f2; animation:pwrong .32s 1; }
@keyframes pwrong { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Перетаскивание кабинетов: ручка ⠿ + индикатор места вставки */
.cab-drag { flex:0 0 auto; cursor:grab; color:#9ca3af; font-size:18px; line-height:1; padding:2px 4px;
  user-select:none; -webkit-tap-highlight-color:transparent; touch-action:none; }
.cab-drag:active { cursor:grabbing; }
.cab-row.cab-drop-over { border-top:3px solid #2563eb; }

/* Учёт позиций (Упаковка): строка = товар; зелёная = выполнена (все штуки упакованы) */
.pos-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff;
  border:1px solid var(--line); border-radius:11px; padding:10px 14px; margin-bottom:6px;
  box-shadow:var(--shadow); transition:background .2s, border-color .2s; }
.pos-row.done { border-color:#16a34a; background:#ecfdf5; }
.pos-row.flash { border-color:#2563eb; background:#eff6ff; animation:pwrong .32s 1; }
/* Давняя позиция (план 18.07 п.1): ждёт дольше порога — красным, поверх .done (закрытая, но давняя). */
.pos-row.late { position:relative; border-color:#eab308; background:#fefce8; }
.late-corner { position:absolute; top:-1px; right:12px; background:#eab308; color:#fff;
  font-weight:700; font-size:10px; letter-spacing:.02em; padding:2px 8px; border-radius:0 0 6px 6px;
  box-shadow:var(--shadow); }
.pos-row.stale { border-color:#dc2626; background:#fef2f2; }
.stale-badge { display:inline-flex; align-items:center; gap:4px; background:#dc2626; color:#fff;
  font-weight:700; font-size:12px; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pos-row.printing { border-color:#2563eb; background:#eff6ff; }
.pos-row.print-ok { border-color:#16a34a; }
.pos-row.print-err { border-color:#dc2626; background:#fef2f2; }
/* Счётчик на корешке вкладки: давние — на «Упаковке», спорные — на «Потеряшках» */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  margin-left:5px; padding:0 5px; border-radius:999px; background:#dc2626; color:#fff;
  font-size:11px; font-weight:700; line-height:18px; vertical-align:middle; }
.pos-cnt { flex:0 0 auto; white-space:nowrap; }
.pos-row.done .pos-cnt { color:#15803d; font-weight:600; }
.pos-actions { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.pos-print-status { flex:1 0 100%; display:none; margin-top:2px; padding:7px 10px; border-radius:8px;
  background:#f8fafc; color:#374151; font-size:13px; font-weight:600; }
.pos-print-status:not(:empty) { display:block; }
.pos-row.printing .pos-print-status { background:#dbeafe; color:#1d4ed8; }
.pos-row.print-ok .pos-print-status { background:#dcfce7; color:#166534; }
.pos-row.print-err .pos-print-status { background:#fee2e2; color:#991b1b; }
.pos-photo { flex:0 0 auto; width:48px; height:48px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); background:#fff; cursor:zoom-in; }
.lost-origin-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px;
  border-radius:999px; background:#ede9fe; color:#5b21b6; border:1px solid #c4b5fd;
  font-size:11px; font-weight:700; white-space:nowrap; }
.warehouse-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px;
  border-radius:999px; background:#ecfeff; color:#155e75; border:1px solid #a5f3fc;
  font-size:11px; font-weight:700; white-space:nowrap; }
/* позицию удаляли вручную, а заказ вернулся следующей загрузкой (см. delete_position) */
.was-deleted-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px;
  border-radius:999px; background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
  font-size:11px; font-weight:700; white-space:nowrap; }
.pos-row.from-lost { border-color:#a78bfa; }
.pos-row.ozon-missing { border-color:#f97316; background:#fff7ed; }
.ozon-missing-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px;
  border-radius:999px; background:#fed7aa; color:#9a3412; border:1px solid #fdba74;
  font-size:11px; font-weight:800; white-space:nowrap; }
.pos-row.print-urgent { border-color:#f59e0b; background:#fff7ed; }
.print-urgent-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px;
  border-radius:7px; background:#f59e0b; color:#fff; font-size:11px; font-weight:800; white-space:nowrap; }
.done-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 8px; }
.done-col-head h2 { margin:0; }

.lost-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; align-items:start; }
.lost-card { display:flex; align-items:flex-start; gap:10px; min-width:0; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:10px; box-shadow:var(--shadow); cursor:pointer; }
.lost-card input { flex:0 0 auto; margin-top:4px; width:auto; }
.lost-photo { flex:0 0 58px; width:58px; height:58px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); background:#f8fafc; cursor:zoom-in; }
.lost-empty { display:flex; align-items:center; justify-content:center; color:#64748b; font-size:24px; }
.lost-info { display:flex; flex-direction:column; gap:3px; min-width:0; font-size:13px; line-height:1.25; }
.lost-info b, .lost-info span { overflow-wrap:anywhere; }

/* Лайтбокс фото позиции: затемнение на весь экран, картинка по центру; выход — ✕ / Esc / клик мимо */
#photoOverlay { position:fixed; inset:0; z-index:1000; display:none; align-items:center;
  justify-content:center; background:rgba(15,23,42,.82); cursor:zoom-out; }
#photoOverlay.open { display:flex; }
#photoOverlay img { max-width:92vw; max-height:92vh; border-radius:12px; background:#fff;
  box-shadow:0 10px 40px rgba(0,0,0,.5); cursor:default; }
#photoOverlay #photoOverlayClose { position:absolute; top:14px; right:18px; width:44px; height:44px;
  border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:22px;
  font-weight:700; cursor:pointer; line-height:1; }
#photoOverlay #photoOverlayClose:hover { background:rgba(255,255,255,.28); }
.prow-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pcode { font-size:24px; font-weight:700; color:#6b7280; }
.pcode b { background:#111827; color:#fff; padding:2px 10px; border-radius:7px; letter-spacing:.04em; }
.pcode.stack { display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1; }
.pcode.stack .psub { font-size:15px; font-weight:600; color:#6b7280; letter-spacing:.02em; }
.pcode.stack b { font-size:30px; }
.pmulti { margin-left:auto; background:#fff7ed; color:#b45309; border:1px solid #fdba74; padding:7px 11px; font-size:13px; font-weight:600; border-radius:9px; }
.pitems { margin-top:8px; border-top:1px dashed #e5e7eb; padding-top:8px; }
.pitem { font-size:14px; padding:4px 0; color:#1f2937; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pitem.current { background:#eff6ff; border:1px solid #60a5fa; border-radius:8px; padding:7px 8px; }
.pitem span { min-width:0; }
.pitem em { display:block; font-style:normal; font-weight:700; color:#1d4ed8; margin-top:2px; }
.pitem b { flex:0 0 auto; font-size:12px; }
.pitem.done b { color:#15803d; }
.pitem.todo b { color:#b45309; }
/* Заказ из нескольких позиций (05.08.2026): миниатюра + размер, чтобы вещь узнавали глазами,
   и своя кнопка печати направления/ШК этой позиции. */
.pitem-img { flex:0 0 auto; width:56px; height:56px; object-fit:contain; border-radius:8px;
             border:1px solid #e5e7eb; background:#f3f4f6; }
.pitem-size { font-size:15px; color:#111827; }
.pitem-print { flex:0 0 auto; font-size:16px; line-height:1; padding:8px 10px; }
@media (max-width:640px) { .pitem-img { width:44px; height:44px; } }
.drow { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:8px 10px; margin:6px 0; font-size:14px; box-shadow:var(--shadow); }
.drow .x { margin-left:auto; background:#fff; color:#b91c1c; border:1px solid #f1c0c0; padding:6px 10px; }
.tag { font-size:12px; padding:2px 8px; border-radius:999px; color:#fff; white-space:nowrap; font-weight:600; }
.tag.tshirt { background:#2563eb; } .tag.print { background:#7c3aed; }
.bad { color:#b91c1c; font-weight:700; }

/* ===== ОБЩИЙ СКЛАД («Совпадения») ===== */
/* форма прихода: артикул тянется, размер/кол-во узкие; на телефоне — в столбик */
.stock-form { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.stock-form > div { display:flex; flex-direction:column; }
.stock-form label { margin:0 0 5px; }
.stock-form .sf-art { flex:1 1 200px; min-width:0; }
.stock-form .sf-size { flex:0 1 120px; }
.stock-form .sf-qty { flex:0 1 110px; }
@media (max-width:520px) { .stock-form > div { flex:1 1 100%; } }

/* таблица остатков на CSS-grid (выравнивается с шапкой) */
.strow { display:grid; grid-template-columns:auto 1fr auto auto auto; gap:10px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:11px; padding:10px 12px; margin:6px 0; box-shadow:var(--shadow); }
.strow.sthead { background:#f8fafc; box-shadow:none; font-weight:600; color:#374151; font-size:13px; padding:8px 12px; }
.st-art { font-weight:600; word-break:break-word; min-width:0; }
.st-size { display:inline-block; background:#111827; color:#fff; padding:1px 10px; border-radius:8px; font-weight:700; font-size:13px; justify-self:start; }
.strow.sthead .st-size { background:transparent; color:#374151; padding:0; }
.st-qty { white-space:nowrap; } .st-qty b { font-size:17px; }
.st-actions { display:flex; gap:6px; }
@media (max-width:520px) {
  .strow { grid-template-columns:auto 1fr auto; grid-auto-rows:auto; }
  .strow .st-actions { grid-column:1 / -1; }
  .strow.sthead { display:none; }
}

/* история движений */
.hrow { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:8px 12px; margin:6px 0; font-size:14px; box-shadow:var(--shadow); }
.h-delta { flex:0 0 auto; font-weight:800; font-size:16px; min-width:44px; text-align:right; }
.h-delta.st-in { color:#15803d; } .h-delta.st-out { color:#b91c1c; }
.h-body { flex:1 1 auto; min-width:0; word-break:break-word; }
.h-date { flex:0 0 auto; white-space:nowrap; font-size:12px; }

/* ===== блок совпадений в потоке загрузки ===== */
.panel.matches { border-color:#bfdbfe; }
.matches .m-all { display:flex; align-items:center; gap:8px; font-weight:600; margin:12px 0 4px; cursor:pointer; }
.matches .m-all input { width:auto; flex:0 0 auto; }
.m-head { display:grid; grid-template-columns:auto 1fr auto auto 84px; gap:8px; align-items:center;
  font-size:12px; color:#6b7280; font-weight:600; padding:6px 4px 4px; }
.mrow { display:grid; grid-template-columns:auto 1fr auto auto 84px; gap:8px; align-items:center;
  border-top:1px solid #eef0f3; padding:8px 4px; }
.m-pick { display:flex; align-items:center; justify-content:center; }
.m-pick input { width:auto; flex:0 0 auto; transform:scale(1.25); }
.m-art { font-weight:600; word-break:break-word; min-width:0; }
.m-size { display:inline-block; background:#111827; color:#fff; padding:1px 9px; border-radius:8px; font-weight:700; font-size:13px; justify-self:start; }
.m-have { white-space:nowrap; font-size:13px; color:#374151; }
.m-qty { width:84px; padding:8px 8px; text-align:center; }
@media (max-width:520px) {
  .m-head { display:none; }
  .mrow { grid-template-columns:auto 1fr 84px; row-gap:4px; }
  .m-size, .m-have { grid-column:2; justify-self:start; }
  .m-qty { grid-row:1 / span 3; grid-column:3; align-self:center; }
}

/* Вкладка «Сделано»: на телефоне колонки друг под другом, на десктопе — рядом (см. медиа-блок) */
#doneGrid { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }

/* ═══════════════════════════════════════════════════════════════════════
   ШИРОКИЙ ЭКРАН (≥900px) — компактная раскладка, добавлено 18.07.2026.
   ВСЁ в этом блоке действует ТОЛЬКО на десктопе: телефоны и планшеты
   (<900px) отображаются ровно как раньше — обёртки .topline/.g2l/.g2r
   там просто обычные <div> без стилей.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px) {
  /* поле на всю ширину вместо узкой колонки 680px */
  .wrap, header.app .inner { max-width:1500px; }

  /* разделы (WB/Ozon/Совпадения/КИЗ) и выбор кабинета — в одну строку */
  .topline { display:flex; gap:14px; align-items:center; }
  /* Панель разделов НЕ должна распирать страницу. С `flex:0 0 auto` она отказывалась сжиматься:
     одиннадцать вкладок занимали 1346px, и на ноутбуке 1280px вбок ездила ВСЯ страница на любой
     вкладке (замер 01.08.2026: body.scrollWidth = 1362). Лечим двумя способами сразу:
       • отступы кнопок 18px → 12px — на типовом ноутбуке панель влезает целиком, без прокрутки;
       • `0 1 auto` + min-width:0 + собственный overflow-x — если окно уже или вкладок станет
         больше, вбок едет САМА панель, а тело страницы стоит на месте (так же, как <900px ниже). */
  .topline #seg { flex:0 1 auto; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; }
  .topline .seg button { flex:0 0 auto; padding:11px 12px; }
  .topline .cabrow { flex:1 1 300px; max-width:430px; margin-left:auto; }

  /* двухколоночные разделы: слева управление, справа содержимое.
     .hidden (display:none !important) по-прежнему сильнее grid. */
  #cabHome, #work, #stock, #kiz { display:grid; grid-template-columns:minmax(330px,440px) minmax(0,1fr); gap:0 18px; align-items:start; }
  .g2l, .g2r { min-width:0; }
  .g2r .batches-head { margin-top:14px; }

  /* подвкладки кабинета (Печать/Сборка/…) не тянутся на всю ширину (5 вкладок с «Сделано») */
  #mode { max-width:660px; }

  /* «Сделано»: сделанные слева, несделанные справа. Столбцы «Нет принта» и «Перенесённые»
     появляются по мере надобности, поэтому ширину задаём по фактическому числу столбцов —
     иначе пустая колонка съедала бы место у рабочих. */
  #doneGrid { grid-template-columns:1fr 1fr; gap:16px; }
  #doneGrid.with-no-print,
  #doneGrid.with-deferred { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #doneGrid.with-no-print.with-deferred { grid-template-columns:repeat(4,minmax(0,1fr)); }

  /* партии — сеткой в несколько колонок */
  #recent { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; align-items:start; }
  #recent .batch { margin:0; }
  #recent > p { grid-column:1 / -1; }

  /* станция: скан-блоки не расползаются на 1500px */
  #printBar, #printCfg, #scan, #packProg, #pbtns { max-width:680px; }
  /* последние списания — сеткой (учёт позиций теперь в #doneGrid, две колонки — правило выше) */
  #plist { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:8px; align-items:start; }
  #plist .drow { margin:0; }
}

.load-summary-title { justify-content:space-between; margin:16px 0 8px; }
.load-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.load-summary-table { overflow:auto; }
.load-summary-table summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; list-style-position:inside; }
.load-summary-table h4 { margin:14px 0 4px; }
.load-summary-table table { width:100%; border-collapse:collapse; font-size:13px; }
.load-summary-table th, .load-summary-table td { padding:7px 8px; border-bottom:1px solid var(--line); text-align:left; }
.load-summary-table th:not(:first-child), .load-summary-table td:not(:first-child) { text-align:right; }
.load-summary-total td { border-top:2px solid var(--line); border-bottom:0; font-weight:700; }

/* Сводка во вкладке «Общага»: свёрнута по умолчанию, чтобы не отодвигать сканер вниз.
   Внутри — те же два блока, что на Главной; в свёрнутом виде главная цифра дублируется в строку
   <summary> (см. refreshCommonSummary), поэтому разворачивать ради неё не нужно. */
.common-summary { margin:10px 0 0; padding:10px 16px; }
.common-summary > summary { display:flex; justify-content:space-between; align-items:center; gap:12px;
  cursor:pointer; list-style-position:inside; font-size:14px; }
.common-summary > summary .muted { font-size:12px; }
.common-summary[open] { padding-bottom:16px; }
.common-summary .load-summary-title { margin-top:10px; }
.common-summary .load-summary-table { margin:0; }
@media (max-width:900px) { .common-summary .load-summary-grid { grid-template-columns:1fr; } }

/* Разбивка партии по кабинетам — над сводкой размеров, тот же табличный стиль */
.load-batch-cabs { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
.load-batch-cabs th, .load-batch-cabs td { padding:7px 8px; border-bottom:1px solid var(--line); text-align:left; }
.load-batch-cabs th:not(:first-child), .load-batch-cabs td:not(:first-child) { text-align:right; }

.stats-head, .stats-controls, .stats-workers { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stats-head { justify-content:space-between; margin-bottom:12px; }
.stats-controls input { width:auto; }
.stats-metrics { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; margin:12px 0; }
.stats-metric { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; }
.stats-metric span { display:block; color:var(--muted); font-size:12px; }
.stats-metric b { display:block; margin-top:4px; font-size:24px; }
.stats-workers { margin:10px 0; }
.stats-workers label { display:flex; gap:6px; align-items:center; }
.stats-workers i { width:11px; height:11px; border-radius:3px; }
.stats-chart-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px; }
.stats-chart { width:100%; min-width:700px; height:auto; }
.stats-chart text { fill:var(--muted); font-size:11px; }
.stats-chart .stats-grid { stroke:#e5e7eb; stroke-width:1; }
.stats-bottom { display:grid; grid-template-columns:minmax(280px,420px) minmax(0,1fr); gap:12px; margin-top:12px; }
.stats-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:8px; }
.stats-calendar b { text-align:center; font-size:11px; color:var(--muted); }
.stats-calendar button { min-height:34px; padding:4px; border:1px solid var(--line); background:#fff; color:var(--text); }
.stats-calendar .stats-work { background:#dcfce7; border-color:#86efac; }
.stats-calendar .stats-selected { outline:2px solid var(--b); }
.stats-day-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
@media (max-width:700px) {
  .load-summary-grid, .stats-bottom { grid-template-columns:1fr; }
  .stats-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .la-cab-toolbar { flex-wrap:wrap; }
  .la-cab-list.tiles { grid-template-columns:1fr; }
  .stats-day-row { flex-direction:column; gap:4px; }
}

/* Правила артикулов (Настройки → «Артикулы»): подсветка размеченных кусков примера */
mark.m-color { background: #fde68a; border-radius: 3px; padding: 0 1px; }
mark.m-size { background: #bfdbfe; border-radius: 3px; padding: 0 1px; }

/* Кружок цвета на карточке станции (03.08.2026): пятно читается быстрее слова */
.cdot { display:inline-block; width:0.9em; height:0.9em; border-radius:50%;
        border:1.5px solid #94a3b8; vertical-align:-0.08em; margin-right:0.35em; }

/* Номер API-кабинета в «Настройки → API и склады» (04.08.2026): по нему кабинет называют вслух */
.api-num { flex:0 0 auto; min-width:26px; height:26px; padding:0 6px; border-radius:8px;
           background:#1e293b; color:#fff; font-weight:800; font-size:13px;
           display:inline-flex; align-items:center; justify-content:center; }

/* Плашка «вышло обновление» (05.08.2026): заметная, но не блокирует работу — сканировать можно,
   пока не дожал вещь; кнопка перезагружает страницу. */
#updateBanner { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:3500;
                background:#fef3c7; border:2px solid #f59e0b; color:#78350f; border-radius:12px;
                padding:12px 16px; font-size:15px; font-weight:700;
                box-shadow:0 6px 20px rgba(0,0,0,.18); max-width:min(480px,calc(100vw - 32px)); }
#updateBanner button { margin-left:10px; font-size:14px; padding:8px 12px; }