:root { --pk-dim: rgba(0, 0, 0, .62); --pk-paper: #fff; --pk-pill-ink: #0b0618; --pk-nobox: #dc2626;
  --pk-soldout: #b45309; --pk-toast: #1f2937; --pk-toast-ink: #fff; --pk-shadow: rgba(0, 0, 0, .5) }
:root[data-theme="light"] { --pk-dim: rgba(0, 0, 0, .45); --pk-toast: #111827; --pk-shadow: rgba(0, 0, 0, .25) }
#pk-root { --pk-bg: var(--bg); --pk-card: var(--card, var(--panel-solid)); --pk-line: var(--line-strong, var(--edge));
  --pk-ink: var(--ink, var(--fg)); --pk-muted: var(--muted, var(--hint)); --pk-accent: var(--accent, var(--primary));
  --pk-warn: var(--soon, var(--warn)); --pk-bad: var(--urgent, var(--danger)); --pk-ok: var(--ok);
  --pk-on-warn: var(--card, var(--panel-solid));
  color: var(--pk-ink); max-width: 900px }
#pk-root button { font: inherit; border-radius: 10px; padding: 10px 14px; border: 1px solid var(--pk-line);
  background: var(--pk-card); color: var(--pk-ink); cursor: pointer }
#pk-root button.pk-primary { background: var(--pk-accent); border-color: var(--pk-accent); color: #fff }
#pk-root button:disabled { opacity: .5 }
.pk-msg { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--pk-card);
  border: 1px solid var(--pk-line) }
.pk-shops { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 16px }
.pk-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer }
.pk-chk input { width: 20px; height: 20px; accent-color: var(--pk-accent) }
.pk-head { position: sticky; top: var(--mbar-h, 0px); z-index: 5; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; padding: 8px 0; background: var(--pk-bg) }
.pk-head .pk-title { flex: 1 1 200px; color: var(--pk-muted); font-size: 13px }
.pk-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 }
.pk-counts button { padding: 6px 10px; font-size: 13px }
.pk-met { margin: 6px 0; padding: 10px; border-radius: 10px; background: var(--tint-teal);
  border: 1px solid var(--pk-ok); cursor: pointer; text-align: center; font-weight: 700 }
.pk-bar .pk-met { margin: 6px 0 0 }
.pk-hb .pk-ico { margin-right: 6px }
.pk-sum { display: none }
.pk-tag { font-size: 12px; margin-right: 8px }
.pk-other { margin-left: 2px }
#pk-root button.pk-accept { background: var(--pk-warn); border-color: var(--pk-warn); color: var(--pk-on-warn); font-weight: 700 }
.pk-bar { position: sticky; bottom: 0; padding: 10px 12px; background: var(--pk-card);
  border-top: 1px solid var(--pk-line); font-size: 14px; z-index: 5 }
.pk-sec { margin: 14px 0; padding: 12px; border: 1px solid var(--pk-line); border-radius: 12px; background: var(--pk-card) }
.pk-sec h3 { margin: 0 0 8px; font-size: 15px }
.pk-sec ul { margin: 6px 0 10px; padding-left: 18px; color: var(--pk-muted); font-size: 13px; max-height: 220px; overflow: auto }
.pk-actions { display: flex; flex-wrap: wrap; gap: 8px }
/* Restore visible overflow on main to fix sticky positioning when window (not main) scrolls */
main:has(#pk-root) { overflow: visible }
@media (max-width: 600px) {
  #pk-root { overflow-x: clip }
  .pk-head { flex-wrap: nowrap }
  .pk-head .pk-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  #pk-root .pk-head .pk-hb { padding: 8px; min-width: 44px; min-height: 44px; font-size: 18px }
  .pk-hb .pk-lbl { display: none }
  .pk-hb .pk-ico { margin-right: 0 }
  .pk-sum { display: block; width: 100%; text-align: left; font-size: 13px; min-height: 44px }
  .pk-fold:not(.open) .pk-shops-line, .pk-fold:not(.open) .pk-counts { display: none }
  .pk-counts button { min-height: 44px }
}

.pk-shops-line { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; font-size: 13px; color: var(--pk-muted) }
.pk-shops-line b { color: var(--pk-ink); font-weight: 600 }
.pk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle }
.pk-debt { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--pk-bad); border-radius: 6px;
  color: var(--pk-bad); font-size: 11px; font-weight: 700; vertical-align: middle }

/* ---- row: article · photo (full height) · title/tail/shop/action · label ---- */
.pk-row { position: relative; display: grid; grid-template-columns: 82px 72px minmax(0, 1fr) 80px;
  align-items: stretch; min-height: 96px; border-bottom: 1px solid var(--pk-line);
  border-left: 6px solid var(--shop) }
.pk-row .pk-art { display: flex; flex-direction: column; justify-content: center; padding: 4px 4px 4px 8px; min-width: 0 }
.pk-row .pk-art { --aw: 70px; --amax: 21px }
/* --n = characters per line (set in JS); the size shrinks so the article always fits its column */
.pk-row .pk-art > b { font: 800 21px/1.05 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: min(var(--amax), calc((var(--aw) / var(--n, 5) + .5px) / .62));
  letter-spacing: -.5px; white-space: nowrap }
.pk-row .pk-art > b.wrap { white-space: normal; word-break: break-all }
.pk-row .pk-qty { margin-top: 3px; font-weight: 800; color: var(--pk-warn) }
.pk-row .pk-tl { display: flex; align-items: center; gap: 4px; margin-top: 5px; white-space: nowrap }
.pk-row .pk-n { margin-top: 2px; font-size: 11px; color: var(--pk-muted) }
.pk-row .pk-img { width: 72px; height: 100%; min-height: 96px; object-fit: cover; background: var(--pk-paper); display: block }
.pk-row .pk-mid { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px 6px 7px; min-width: 0 }
.pk-row .pk-t { font-size: 12px; color: var(--pk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pk-row .pk-sub { display: flex; min-width: 0 }
.pk-row .pk-tail { font: 700 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--pk-ink); white-space: nowrap }
.pk-shop-pill { align-self: flex-start; max-width: 100%; padding: 1px 7px; border-radius: 6px; color: var(--pk-pill-ink); font-size: 11px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.pk-row .pk-debt { margin-left: 0; padding: 0 4px; font-size: 10px }
/* «! ВБ ДОЛГ»: shipped on paper, WB never accepted it — the unit is still here, put it aside */
.pk-wbdebt { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--pk-bad); color: #fff;
  font-size: 11px; font-weight: 800; white-space: nowrap; flex: none }
#pk-root .pk-counts .pk-wbdebt-btn { border-color: var(--pk-bad); color: var(--pk-bad); font-weight: 800 }
.pk-row .pk-act { display: flex; align-items: center; gap: 5px; margin-top: 3px; min-width: 0 }
#pk-root .pk-row .pk-act button { padding: 0 10px; height: 36px; white-space: nowrap; border-radius: 9px; font-size: 13px; font-weight: 600 }
#pk-root .pk-row .pk-act button.pk-nf-chip { background: var(--tint-red); border-color: var(--pk-bad); color: var(--danger-ink, var(--pk-bad));
  font-weight: 700; white-space: nowrap }
#pk-root .pk-row .pk-act button.pk-stock { padding: 0 4px; height: 36px; border: 0; background: transparent;
  font-size: 12px; font-weight: 500; color: var(--pk-muted); white-space: nowrap; text-decoration: underline dotted }
/* walked past («пройдено»): a teal tint and a ✓ by the row number; red/amber states win */
.pk-row.passed { background: var(--tint-teal) }
.pk-row.passed .pk-n::before { content: "✓ "; color: var(--pk-ok); font-weight: 800 }
.pk-row.nf { background: var(--tint-red) }
.pk-row.pending { background: var(--tint-amber) }
.pk-row.wbdebt, .pk-row.wbdebt.passed { background: var(--tint-red) }
.pk-row.accepted .pk-tag { color: var(--pk-warn) }
.pk-row.gone { opacity: .45 }
.pk-row.gone .pk-art > b, .pk-row.gone .pk-t { text-decoration: line-through }
/* the order's own printed label (58×40, landscape) at the edge — the QR to check against */
#pk-root .pk-row .pk-lbl { align-self: center; justify-self: center; width: 76px; height: 52px; padding: 0;
  border: 0; border-radius: 3px; background: var(--pk-paper); overflow: hidden }
.pk-row .pk-lbl img { display: block; width: 100%; height: 100%; object-fit: contain }
#pk-root .pk-row .pk-lbl.none { background: transparent; border: 1px dashed var(--pk-line); opacity: 1 }
/* phones: the list runs edge to edge (main has 18px side padding) — every px goes to the row */
@media (max-width: 600px) {
  #pk-root { overflow-x: visible }
  .pk-list { margin: 0 -18px; overflow-x: clip }
  #pk-root .pk-row .pk-act button { padding: 0 6px; font-size: 12.5px }
  .pk-row .pk-act { gap: 2px 4px; flex-wrap: wrap }
  /* on narrow phones «ост. N ✎» drops under «Не найден» instead of hiding under the label */
  #pk-root .pk-row .pk-act button.pk-stock { height: 22px }
}
@media (min-width: 700px) {
  .pk-row { grid-template-columns: 130px 110px minmax(0, 1fr) 150px; min-height: 110px }
  .pk-row .pk-art { --aw: 118px; --amax: 28px }
  .pk-row .pk-img { width: 110px; min-height: 110px }
  .pk-row .pk-t { font-size: 13px }
  #pk-root .pk-row .pk-lbl { width: 140px; height: 97px }
}

/* ---- «Не найдено — подтвердите» sheet (appended to body, so its own tokens) ---- */
.pk-dim { position: fixed; inset: 0; z-index: 1000; background: var(--pk-dim); display: flex;
  align-items: flex-end; justify-content: center }
.pk-sheet { width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--card, var(--panel-solid));
  color: var(--ink, var(--fg)); border: 1px solid var(--line-strong, var(--edge)); border-bottom: 0;
  border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)) }
.pk-sheet button { font: inherit; cursor: pointer }
.pk-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong, var(--edge)); margin: 0 auto 12px }
.pk-sheet h3 { margin: 0 0 12px; font-size: 19px; text-align: center; color: var(--urgent, var(--danger)) }
.pk-sheet-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px }
.pk-sheet-top img, .pk-sheet-top .pk-noimg { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--pk-paper) }
.pk-sheet-top b { display: block; font: 800 30px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.5px }
.pk-sheet-top span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted, var(--hint));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pk-facts { margin: 0 0 14px; padding: 8px 12px; border-radius: 12px; background: var(--card-2, var(--bg));
  border: 1px solid var(--line, var(--edge)); font-size: 14px }
.pk-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0 }
.pk-facts span { color: var(--muted, var(--hint)) }
.pk-facts b { text-align: right }
.pk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.pk-big { min-height: 64px; padding: 8px 6px; border-radius: 14px; border: 0; color: #fff; font-weight: 800 !important; letter-spacing: .3px }
.pk-nobox { background: var(--pk-nobox) } .pk-soldout { background: var(--pk-soldout) }
.pk-big:disabled { opacity: .6 }
.pk-cancel { width: 100%; margin-top: 10px; height: 48px; border-radius: 12px; border: 1px solid var(--urgent, var(--danger));
  background: transparent; color: var(--urgent, var(--danger)); font-weight: 700 }
.pk-cancel:disabled { cursor: default; opacity: .6 }
.pk-big small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; opacity: .85 }
.pk-cancel em { font-style: normal; font-size: 11px; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--line, var(--edge)) }
.pk-back { width: 100%; margin-top: 6px; height: 44px; border: 0; background: transparent; color: var(--ink, var(--fg)) }
.pk-label-view { align-items: center; flex-direction: column; justify-content: center; gap: 14px; padding: 16px }
.pk-label-view img { max-width: 92vw; max-height: 72vh; background: var(--pk-paper); border-radius: 6px }
.pk-lv-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px }
.pk-lv-bar button { height: 52px; border-radius: 14px; font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-strong, var(--edge)); background: var(--card, var(--panel-solid)); color: var(--ink, var(--fg)) }
.pk-lv-bar .pk-lv-dl { background: var(--accent, var(--primary)); border-color: var(--accent, var(--primary)); color: #fff }
.pk-lv-bar button:disabled { opacity: .6 }
.pk-toast { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 1001;
  max-width: 520px; margin: 0 auto; padding: 12px 14px; border-radius: 14px; background: var(--pk-toast); color: var(--pk-toast-ink);
  border: 1px solid var(--ok); font-size: 14px; box-shadow: 0 8px 30px var(--pk-shadow) }
.pk-toast[hidden] { display: none }

.pk-bar-row { display: flex; align-items: center; gap: 10px }
.pk-bar-text { flex: 1 1 auto; min-width: 0 }
#pk-root .pk-bar .pk-pause { flex: 0 0 auto; min-width: 44px; min-height: 40px; padding: 6px 10px }
.pk-bar.paused { background: var(--tint-amber); border-top-color: var(--pk-warn) }

.pk-sheet h3.pk-h-neutral { color: var(--ink, var(--fg)) }
.pk-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted, var(--hint)); text-align: center }
.pk-qty-edit { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; margin-bottom: 8px }
.pk-qty-edit input { height: 64px; border-radius: 14px; border: 1px solid var(--line-strong, var(--edge));
  background: var(--card-2, var(--bg)); color: var(--ink, var(--fg)); font: 800 30px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center; min-width: 0 }
.pk-step { height: 64px; border-radius: 14px; border: 1px solid var(--line-strong, var(--edge));
  background: var(--card, var(--panel-solid)); color: var(--ink, var(--fg)); font-size: 28px !important; font-weight: 700 }
.pk-save { width: 100%; background: var(--accent, var(--primary)) }

.pk-zlist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 }
.pk-zrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px;
  border: 1px solid var(--pk-line); border-radius: 12px; background: var(--pk-card) }
.pk-zrow img, .pk-zrow .pk-noimg { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--pk-paper) }
.pk-zinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.pk-zinfo b { font: 800 20px ui-monospace, SFMono-Regular, Menlo, monospace }
.pk-zinfo span { font-size: 12px; color: var(--pk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pk-zform { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr auto; gap: 8px }
.pk-zform input { height: 44px; border-radius: 10px; border: 1px solid var(--pk-line); background: var(--pk-bg);
  color: var(--pk-ink); font-size: 18px; padding: 0 12px; min-width: 0 }
.pk-zdone { font-size: 13px; color: var(--pk-muted) }

/* ---- «Этикетки»: ticks + one PDF ---- */
.pk-lb-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 }
#pk-root .pk-lb-chip.on { background: var(--pk-accent); border-color: var(--pk-accent); color: #fff }
.pk-lb-list { display: flex; flex-direction: column }
.pk-lb-row { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr) 84px; gap: 10px; align-items: center;
  padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--pk-line); border-left: 6px solid var(--shop); cursor: pointer }
.pk-lb-row input { width: 22px; height: 22px; accent-color: var(--pk-accent) }
.pk-lb-row.on { background: var(--tint-teal) }
.pk-lb-row.nf { box-shadow: inset 3px 0 0 var(--pk-bad) }
.pk-lb-row.gone { opacity: .55 }
.pk-lb-info { min-width: 0 }
.pk-lb-info b { display: block; font: 800 20px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere }
.pk-lb-info .pk-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 12px }
.pk-lb-info .pk-tail { font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace }
.pk-lb-nf { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--pk-bad); color: var(--pk-bad); font-weight: 700 }
#pk-root .pk-lb-row .pk-lbl { width: 84px; height: 58px; padding: 0; border: 0; border-radius: 3px;
  background: var(--pk-paper); overflow: hidden; color: var(--pk-muted); font-size: 12px }
#pk-root .pk-lb-row .pk-lbl img { width: 100%; height: 100%; object-fit: contain; display: block }
#pk-root .pk-lb-row .pk-lbl.none { background: transparent; border: 1px dashed var(--pk-line) }
.pk-lb-bar { display: flex; gap: 8px; flex-wrap: wrap }
#pk-root .pk-lb-bar .pk-primary { flex: 1 1 200px; min-height: 48px; font-weight: 700 }
#pk-root .pk-lb-bar .pk-primary:disabled { opacity: .55; cursor: default }

.pk-lb-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--pk-paper); display: block }
.pk-search { width: 100%; box-sizing: border-box; height: 42px; margin: 6px 0; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--pk-line); background: var(--pk-card); color: var(--pk-ink); font-size: 16px }
.pk-find { display: flex; gap: 8px; align-items: center; flex: 1 1 100% }
.pk-head .pk-find .pk-search { margin: 0 }
.pk-find .pk-search { flex: 1 1 auto; min-width: 0 }
.pk-find-n { flex: 0 0 auto; font-size: 13px; color: var(--pk-muted); min-width: 34px; text-align: center }
#pk-root .pk-find-next { flex: 0 0 auto; min-width: 44px; height: 42px; padding: 0 10px }
.pk-row.pk-hit { outline: 3px solid var(--pk-accent); outline-offset: -3px }