:root {
  color-scheme: light;
  --bg: #f4f5f7; --card: #fff; --line: #e3e6ea; --rule: #eef0f3;
  --ink: #15191e; --dim: #56606b; --muted: #6b7480; --accent: #0b7a5a;
  --go: #0b7a5a; --go-ink: #fff; --ok: #0b7a5a; --bad: #c0281e;
  --warn: #a35c00; --soft: #f1f6f4; --hi: #fff8e1; --hover: #f7f8fa;
  --ok-bg: #e5f4ee; --warn-bg: #fff3df; --bad-bg: #fdeceb; --mute-bg: #eef0f3;
  --field: #fff; --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --pad: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg: #121417; --card: #1b1e22; --line: #2e3338; --rule: #25292e;
    --ink: #e8ebee; --dim: #b4bcc5; --muted: #919ba6; --accent: #4cc79c;
    --go: #34b289; --go-ink: #06130d; --ok: #4cc79c; --bad: #f28b82;
    --warn: #e3ac55; --soft: #1c2925; --hi: #2c2817; --hover: #22262b;
    --ok-bg: #163126; --warn-bg: #3a2c12; --bad-bg: #3b1f1d; --mute-bg: #272b31;
    --field: #15181b; --shadow: none;
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #121417; --card: #1b1e22; --line: #2e3338; --rule: #25292e;
  --ink: #e8ebee; --dim: #b4bcc5; --muted: #919ba6; --accent: #4cc79c;
  --go: #34b289; --go-ink: #06130d; --ok: #4cc79c; --bad: #f28b82;
  --warn: #e3ac55; --soft: #1c2925; --hi: #2c2817; --hover: #22262b;
  --ok-bg: #163126; --warn-bg: #3a2c12; --bad-bg: #3b1f1d; --mute-bg: #272b31;
  --field: #15181b; --shadow: none;
}
* { box-sizing: border-box }
body { font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif; margin: 0;
       background: var(--bg); color: var(--ink);
       -webkit-text-size-adjust: 100% }
main { max-width: 1800px; margin: 0 auto; padding: 4px var(--pad) 56px }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px }

/* --- шапка: магазин, разделы, часы, тема --- */
.top { background: var(--card); border-bottom: 1px solid var(--line);
       position: sticky; top: 0; z-index: 30 }
.top .in { max-width: 1800px; margin: 0 auto; padding: 12px var(--pad) 0;
           display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center }
h1 { font-size: 20px; margin: 0; font-weight: 750; letter-spacing: -.02em }
.top .who { font-size: 12.5px; color: var(--muted); margin-left: auto; align-items: center;
            font-variant-numeric: tabular-nums; display: flex; gap: 14px }
.top .out { color: var(--muted) }
.top .out:hover { color: var(--ink) }
button.theme { display: inline-flex; align-items: center; justify-content: center; padding: 0;
               width: 32px; min-height: 32px; height: 32px; border-radius: 10px;
               background: transparent; color: var(--dim); border: 1px solid var(--line) }
button.theme:hover { background: var(--hover); color: var(--ink); filter: none }
button.theme svg { width: 17px; height: 17px }
.menu { display: flex; flex-wrap: wrap; max-width: 1800px; margin: 0 auto;
        padding: 4px calc(var(--pad) - 12px) 0 }
.menu a { padding: 10px 12px; font-size: 14.5px; color: var(--dim);
          border-bottom: 2px solid transparent; white-space: nowrap }
.menu a.on { color: var(--ink); border-bottom-color: var(--go); font-weight: 650 }
.menu a:hover { text-decoration: none; color: var(--ink) }

/* --- страница входа --- */
main.onlylogin { max-width: 360px; padding-top: 12vh }
main.onlylogin section { margin: 0 }
main.onlylogin input { width: 100%; margin-bottom: 8px }
main.onlylogin button { width: 100% }

/* --- полоса круга обхода --- */
progress { -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
           border: none; border-radius: 5px; background: var(--rule); display: block;
           margin: 2px 0 10px }
progress::-webkit-progress-bar { background: var(--rule); border-radius: 5px }
progress::-webkit-progress-value { background: var(--go); border-radius: 5px }
progress::-moz-progress-bar { background: var(--go); border-radius: 5px }
.crawl { margin: 0 0 6px; font-variant-numeric: tabular-nums }
.crawl b { font-weight: 600 }

/* --- строка живости фоновых процессов --- */
.pulse { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 14px 0 4px;
         font-size: 13px; color: var(--dim) }
.pulse > span { display: flex; gap: 6px; align-items: baseline;
                font-variant-numeric: tabular-nums }
.pulse b { font-weight: 500; color: var(--ink) }
.pulse .late b, .pulse .never { color: var(--bad) }
.pulse .never { font-weight: 600 }
.pulse i { font-style: normal; color: var(--muted) }
.mode { font-size: 15px; margin: 16px 0 0; color: var(--ink) }
.mode em { font-style: normal; color: var(--dim) }

/* --- раздел: крупный заголовок без линейки, содержимое в белых блоках --- */
section { margin: 28px 0 0; scroll-margin-top: 104px }
.head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
        margin-bottom: 12px }
h2 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -.015em }
h2 small { font-weight: 400; color: var(--muted); font-size: 12px }
.chip { font-size: 13px; color: var(--dim); margin-left: auto; white-space: nowrap;
        font-variant-numeric: tabular-nums }
.chip.ok { color: var(--ok) } .chip.no { color: var(--bad) }
.head > .seg { min-height: 0; padding: 2px; font-size: 13px }
.head > .seg a { padding: 3px 9px }
.sub { color: var(--dim); margin: 0 0 10px; font-size: 14px; max-width: 76ch; overflow-wrap: anywhere }
.note { color: var(--dim); font-size: 13px; margin: 14px 0 0; max-width: 76ch }
.wfacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: 13.5px;
          color: var(--dim) }
.wfacts > span { padding: 5px 11px; border-radius: 10px; background: var(--mute-bg);
                 font-variant-numeric: tabular-nums }
.wfacts > span b { color: var(--ink); font-weight: 700 }
.wfacts > span b.off { color: var(--bad) }
.wfacts > span.ok { background: var(--ok-bg); color: var(--ok); font-weight: 650 }
.gscreen { margin-top: 22px }
.gscreen > .head h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em }
.gscreen > .sub { margin-bottom: 12px }
.gscreen > .wfacts > span { background: var(--card); border: 1px solid var(--line) }
.wfacts > span:has(b.off) { border-color: transparent; background: var(--bad-bg) }
.wfacts > form { display: flex; margin: 0 }
.wfacts > form button { min-height: 0; padding: 5px 11px; border-radius: 10px; font-size: 13.5px;
                        color: var(--accent); background: var(--card); border-color: var(--line) }
.wfacts > form button:hover { background: var(--hover); filter: none }
.flash { margin: 14px 0; padding: 11px 14px; border-radius: 12px; font-size: 14px;
         background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow) }
.flash.bad { background: var(--bad-bg); border-color: transparent; color: var(--bad) }

/* --- документ: приёмка, итог периода. Коробка тут по делу --- */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
       padding: 18px 20px; margin: 28px 0 0; box-shadow: var(--shadow) }
.doc .wrap, .gpanel .wrap { background: none; border: 0; border-radius: 0; box-shadow: none }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px;
          align-items: center; margin-bottom: 12px; max-width: 620px }
.lbl { color: var(--dim); font-size: 13px }
.total { text-align: right; font-size: 13px; margin-top: 10px; color: var(--dim) }
.total b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums }
.doc-foot { margin-top: 12px; gap: 10px; align-items: flex-end }

/* --- таблицы --- */
.wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card);
        border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow) }
#bar { position: fixed; bottom: 0; z-index: 20; overflow-x: auto; background: var(--bg) }
#bar div { height: 1px }
#bar::-webkit-scrollbar { height: 12px }
#bar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 6px }
@supports not selector(::-webkit-scrollbar) { #bar div { height: 12px } }
@media print { #bar { display: none } }
table { border-collapse: collapse; width: 100%; font-size: 14px }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left;
         white-space: nowrap }
th:first-child, td:first-child { padding-left: 16px }
tr:last-child td { border-bottom: 0 }
th { font-weight: 550; font-size: 12.5px; color: var(--muted);
     border-bottom: 1px solid var(--line) }
tr.sum th { font-weight: 700; color: var(--ink) }
th[tabindex] { cursor: pointer }
th a { color: inherit }
th[aria-sort=ascending]::after { content: " ↑" }
th[aria-sort=descending]::after { content: " ↓" }
tbody tr:hover td, table tr:hover td { background: var(--hover) }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
td.no { color: var(--muted); width: 1%; padding-right: 0 }
td.key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px }
td.empty { color: var(--muted); text-align: center; padding: 22px; font-style: italic }
td.dim { color: var(--dim) }
td.long { white-space: normal; overflow-wrap: anywhere; min-width: 14em }
summary { cursor: pointer }
.thumb, .thumb-big { object-fit: contain; background: #fff; border-radius: 8px;
                     display: block }
.thumb { width: 40px; height: 40px }
.thumb-big { width: 140px; height: 140px; margin-bottom: 12px }
.plus { color: var(--ok) } .minus { color: var(--bad) }
tr.hit td { background: var(--hi) }
.off { color: var(--bad) } .on { color: var(--ok) }
b.off, b.on { font-weight: 600 }
h2.alarm, .alarm { color: var(--bad) }
.pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
         margin-top: 14px; font-size: 13.5px; color: var(--muted) }
.pager a, .pager b, .pager .gap { min-width: 36px; padding: 8px 11px; text-align: center;
                                  border-radius: 10px; line-height: 1 }
.pager a { color: var(--ink); border: 1px solid var(--line); text-decoration: none;
           background: var(--card) }
.pager a:hover { background: var(--hover) }
.pager b { background: var(--go); color: var(--go-ink); border: 1px solid transparent }
.pager .gap { color: var(--dim); border: 0; padding: 4px 2px; min-width: 0 }

/* --- поля и кнопки --- */
input, button, select { font: inherit; color: inherit }
input[type=text], input[type=number], input[type=date], input[type=search],
input[type=password], input:not([type]), select, textarea {
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; min-width: 0; min-height: 38px }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)) }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) }
select { color: var(--ink); -webkit-appearance: none; appearance: none; padding-right: 32px;
         background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2377818c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 11px center }
option { background: var(--card); color: var(--ink) }
input::placeholder { color: var(--muted) }
input[type=number] { width: 84px; text-align: right;
                     font-variant-numeric: tabular-nums }
input[type=text] { width: 200px }
button { background: var(--go); color: var(--go-ink); border: 1px solid transparent;
         border-radius: 10px; padding: 8px 16px; cursor: pointer; font-weight: 650;
         font-size: 13.5px; min-height: 38px;
         transition: filter .15s ease-out, background .15s ease-out }
button:hover { filter: brightness(1.05) }
button:active { filter: brightness(.96) }
button.ghost { background: var(--card); color: var(--ink); border-color: var(--line);
               font-weight: 550 }
button.ghost:hover { background: var(--hover); filter: none }
button.link { background: none; border: 0; color: var(--dim); padding: 4px; min-height: 0;
              font-weight: 400; text-decoration: underline; font-size: 12px }
button.link:hover { color: var(--ink); filter: none }
button:disabled { background: var(--rule); color: var(--dim);
                  border-color: var(--line); cursor: default; filter: none }
form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
form.inline { gap: 6px; flex-wrap: nowrap }
td.pack form.inline { display: inline-flex; vertical-align: middle; margin-left: 6px }
td.num form.inline { display: inline-flex; vertical-align: middle }
.sub form.inline { display: inline-flex; vertical-align: middle; margin-left: 6px }
.nowrap { white-space: nowrap }
.pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.chips { display: flex; flex-wrap: wrap; gap: 4px }
.docs { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule) }
.ones { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px }
.one { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px;
       border: 1px solid var(--line); border-radius: 999px; background: var(--soft) }
.one b { font-weight: 500 }
.ones:empty::after { content: "пусто"; color: var(--dim); font-size: 13px }
.add-one { gap: 8px }
input.tiny { width: 64px; padding: 4px 8px; font-size: 13px; min-height: 32px; border-radius: 8px }
input.tiny.money { width: 88px }
input.why { width: 120px; padding: 4px 8px; font-size: 13px; min-height: 32px; border-radius: 8px }
input.code-in { width: 100px; padding: 4px 8px; font-size: 13px; min-height: 32px; border-radius: 8px;
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace }
button.tiny { padding: 5px 11px; font-size: 13px; border-radius: 8px; min-height: 32px }
td:has(form.inline) { padding-top: 6px; padding-bottom: 6px }
form.col { flex-direction: column; align-items: flex-start; gap: 4px }
form.col label { white-space: nowrap; font-size: 13px }
.grid { display: grid; grid-template-columns: max-content 130px; gap: 8px 12px;
        align-items: center }
.tools { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
         margin-bottom: 10px }
.add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
       border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 2px }
input.code { flex: 1 1 320px; min-width: 240px; max-width: 100%; font-size: 16px; min-height: 44px;
             padding: 8px 12px }
.tabs { display: flex; flex-wrap: wrap; margin: 16px 0 0; border-bottom: 1px solid var(--line) }
.tabs .tab { padding: 10px 16px; color: var(--dim); border-bottom: 2px solid transparent;
             font-size: 14.5px; margin-bottom: -1px }
.tabs .tab.on { color: var(--ink); font-weight: 650; border-bottom-color: var(--go) }
.tabs .tab:hover { text-decoration: none; color: var(--ink) }
.boxes { display: flex; flex-direction: column; gap: 2px; max-height: 320px;
         overflow-y: auto; margin: 4px 0 10px }
.boxes label { display: flex; gap: 8px; align-items: baseline; font-size: 13px;
               padding: 3px 0 }
.rows { flex-direction: column; align-items: flex-start; gap: 6px }
.rows .line { display: grid; grid-template-columns: 76px 104px 104px auto;
              gap: 10px; align-items: center }
.rows.list .line { grid-template-columns: 214px auto }
.rows .line .to { color: var(--dim); font-size: 13px }
.rows .cap { color: var(--dim); font-size: 12px; text-transform: uppercase;
             letter-spacing: .04em }
.rows input[type=number], .rows input[type=text] { width: 100%; text-align: right }
.rows.list input[type=text] { text-align: left }
.rows .del { background: none; border: 0; color: var(--dim);
             line-height: 1; padding: 2px 6px; cursor: pointer; font-weight: 400 }
.rows .del:hover { color: var(--bad); filter: none }
.rows .foot { display: flex; gap: 10px; align-items: center; margin-top: 6px }
#fresh { position: fixed; left: 50%; top: 20px; z-index: 30;
         display: flex; gap: 16px; align-items: center; justify-content: center;
         background: var(--go); color: var(--go-ink); padding: 13px 20px;
         border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
         font-size: 15px; font-weight: 600;
         width: max-content; max-width: min(520px, calc(100vw - 20px));
         opacity: 0; transform: translate(-50%, -16px);
         transition: opacity .22s ease-out, transform .22s ease-out }
#fresh.on { opacity: 1; transform: translate(-50%, 0) }
#fresh button { background: var(--go-ink); color: var(--go); border: 0;
                border-radius: 6px; padding: 7px 14px; font-size: 14px;
                font-weight: 700; cursor: pointer }
#fresh button:hover { filter: brightness(1.25) }
@media (prefers-reduced-motion: reduce) { #fresh { transition: none } }
form.spread { gap: 30px }
form.spread label { display: flex; gap: 8px; align-items: baseline }
.stack { display: flex; flex-direction: column; gap: 16px }
.stack .part { display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.stack .part h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--dim);
                  text-transform: uppercase; letter-spacing: .04em }

@media (min-width: 1700px) {
  td.dim:not(.num), td.pack { white-space: normal }
}
@media (max-width: 760px) {
  .opt { display: none }
  :root { --pad: 10px }
  section { scroll-margin-top: 170px }
  main { padding-bottom: 40px }
  .doc { padding: 14px 12px; border-radius: 14px }
  th, td { padding: 7px 8px }
  .fields, .grid { grid-template-columns: 1fr }
  .doc td.dim { white-space: normal }
  .pulse { gap: 0 14px }
  .head > .seg a { padding: 8px 12px }
  /* Телефон - рабочее место склада (ТЗ). Поле мельче 16px Safari встречает зумом всей
     страницы, а после зума сканер целится не туда; палец промахивается мимо цели ниже 32px. */
  input, select, textarea,
  input.tiny, input.why, input.code-in { font-size: 16px }
  input.tiny { width: 64px } input.tiny.money { width: 88px } input.why { width: 124px }
  input.code-in { width: 108px }
  button, button.tiny, button.link { padding: 9px 16px; font-size: 14px; min-height: 38px }
  .boxes label { padding: 7px 0; font-size: 14px }
  .boxes input[type=checkbox] { width: 20px; height: 20px }
  .rows .line { grid-template-columns: 66px 1fr 1fr auto }
  .rows.list .line { grid-template-columns: 1fr auto }
  .rows .del { padding: 8px 10px; min-height: 38px }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important }
}

/* --- товары: каждый товар - карточка, крупное фото и цена --- */
.gtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px }
.gsearch { flex: 0 1 380px; gap: 8px; flex-wrap: nowrap; min-width: 0 }
.gsearch input[type=search] { flex: 1; min-height: 42px; border-radius: 12px; font-size: 15px;
  padding-left: 40px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2377818c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 14px center }
.gsearch button { min-height: 42px; border-radius: 12px; padding: 0 18px; background: var(--go);
                  color: var(--go-ink); border-color: transparent; font-weight: 650 }
.gsearch button:hover { background: var(--go); filter: brightness(1.06) }
.seg { display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 4px;
       font-size: 13.5px; border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
.seg > span { color: var(--muted); padding: 0 6px 0 8px; white-space: nowrap }
.seg a, .seg b { padding: 6px 11px; border-radius: 9px; color: var(--dim); font-weight: 550;
                 white-space: nowrap }
.seg a:hover { background: var(--hover); color: var(--ink); text-decoration: none }
.seg b, .seg a[aria-current] { background: var(--go); color: var(--go-ink); font-weight: 650 }
.seg a[aria-current]:hover { background: var(--go); color: var(--go-ink); text-decoration: none }
.seg i { font-style: normal; opacity: .9; margin-left: 3px }
.gsort { margin: 0 }
.gsort select { min-height: 42px; border-radius: 12px; font-size: 14px }
.gmass form.tools, .gpanel form.tools { margin: 0 }
.gmass form.tools { gap: 8px; align-items: center }
.gmass form.tools button { min-height: 42px; padding: 0 14px; border-radius: 12px; font-size: 13.5px }
.gmass form.tools input[type=text] { width: 220px; min-height: 42px; border-radius: 12px }
.gmerge { position: relative }
#mpick:empty { display: none }
#mpick { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px;
         width: min(520px, calc(100vw - 2 * var(--pad))); max-height: 340px; overflow-y: auto;
         padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
         box-shadow: 0 16px 40px rgba(16, 24, 40, .16) }
#mpick button { display: flex; gap: 12px; align-items: baseline; min-height: 0; padding: 8px 10px;
                border: 0; border-radius: 10px; background: none; color: var(--ink);
                font-weight: 400; text-align: left }
#mpick button:hover, #mpick button:focus { background: var(--hover); filter: none; outline: none }
#mpick b { flex: none; font: 600 13.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace }
#mpick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              font-size: 13px; color: var(--dim) }
.gpanel { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px;
          background: var(--card); box-shadow: var(--shadow) }
.gbox table, .gbox tbody { display: block }
.gbox tr:first-child:has(th) { display: none }
.gbox tr { display: grid; align-items: center; gap: 0 12px; margin-bottom: 10px; padding: 14px 18px;
  grid-template-columns: minmax(290px, 1fr) 130px 150px 86px 86px 132px 124px 104px 104px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow) }
.gbox tr:has(> td.gabc) {
  grid-template-columns: minmax(250px, 1fr) 130px 150px 86px 86px 132px 124px 104px 36px 104px }
.gbox tr:hover { border-color: color-mix(in srgb, var(--muted) 35%, var(--line)) }
.gbox tr:hover td { background: none }
.gbox td { display: block; padding: 0; border: 0; white-space: normal; text-align: left }
.gbox td.empty { grid-column: 1 / -1; padding: 22px }
.gbox td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px;
                               font-size: 12px; color: var(--muted) }
.gbox td small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap }
.gpc { display: flex; gap: 16px; align-items: center }
.gpc .thumb { width: 80px; height: 80px; flex: none; border-radius: 14px; border: 1px solid var(--rule) }
.gpc > div { min-width: 0 }
.gpc span.thumb { background: var(--soft) }
.gt { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
      line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.gm { margin-top: 6px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis }
.gm .key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace }
.gm .sub { margin: 0 }
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 13px;
        font-weight: 600; line-height: 18px }
.pill.ok { color: var(--ok); background: var(--ok-bg) }
.pill.warn { color: var(--warn); background: var(--warn-bg) }
.pill.mute { color: var(--dim); background: var(--mute-bg) }
.pill.bad { color: var(--bad); background: var(--bad-bg) }
.gbox small.warn { color: var(--warn) }
.gs form { display: block; margin-top: 8px }
button.act { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent);
             font-weight: 550; font-size: 13px }
button.act:hover { text-decoration: underline; filter: none }
.ga b { font-size: 22px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.ga b.low { color: var(--bad) }
.gbox td.ga small { display: flex; flex-wrap: wrap; gap: 0 8px; white-space: normal }
.ga small span { white-space: nowrap }
.gbox input.cell { width: 100%; min-height: 40px; padding: 0 8px; font-size: 15px; font-weight: 600;
                   font-variant-numeric: tabular-nums; text-align: left; -moz-appearance: textfield }
.gbox input.cell::-webkit-inner-spin-button, .gbox input.cell::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0 }
.gbox td.gpr form.inline { display: flex }
.gsave { display: flex; gap: 6px; align-items: center }
.gsave input.cell { min-width: 0 }
button.ok { min-height: 40px; padding: 0 12px; visibility: hidden }
tr.dirty button.ok { visibility: visible }
.gbot form { display: flex; margin: 4px 0 }
button.sw { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; min-height: 0;
            background: none; border: 0; color: var(--dim); font-weight: 550; font-size: 13.5px }
button.sw i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px;
              background: var(--muted); background: color-mix(in srgb, var(--muted) 45%, var(--card));
              transition: background .15s ease-out }
button.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
                     border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
                     transition: transform .18s cubic-bezier(.22, 1, .36, 1) }
button.sw[aria-checked=true] { color: var(--ink) }
button.sw[aria-checked=true] i { background: var(--go) }
button.sw[aria-checked=true] i::after { transform: translateX(14px) }
button.sw:hover { filter: none } button.sw:hover i { filter: brightness(1.08) }
.gpts form { display: inline-flex; margin: 0 4px 4px 0 }
.pt { display: inline-block; padding: 4px 11px; min-height: 0; border-radius: 999px; text-align: center;
      border: 1px solid var(--line); background: transparent; color: var(--muted);
      font-size: 12.5px; font-weight: 650; line-height: 16px }
span.pt { margin: 0 4px 4px 0 }
.pt.on, button.pt[aria-pressed=true] { color: var(--ok); background: var(--ok-bg); border-color: transparent }
button.pt:hover { border-color: var(--accent); filter: none }
.gabc { font-weight: 650; color: var(--dim) }
.gmove summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px;
                 padding: 0 14px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 10px;
                 color: var(--ink); background: var(--card) }
.gmove summary::-webkit-details-marker { display: none }
.gmove summary:hover, .gmove details[open] summary { background: var(--hover) }
.gmf { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px }
.gbox .gmf input.cell { min-height: 38px }
.gbox .gmf input[type=text].cell { font-weight: 400 }
@media (max-width: 1399px) {
  .gbox tr, .gbox tr:has(> td.gabc) {
    grid-template-columns: minmax(240px, 1.6fr) repeat(5, minmax(100px, 1fr)); gap: 14px 16px; padding: 16px 20px }
  .gbox td.gp { grid-row: span 2 }
  .gbox td.gbot { grid-column: span 2 }
  .gbox tr:not(:has(> td.gabc)) td.gmove { grid-column: span 2 }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .gbox tr, .gbox tr:has(> td.gabc) { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 12px }
  .gbox td.gp { grid-row: auto; grid-column: 1 / -1 }
  .gbox td.gs, .gbox td.ga { grid-column: span 6 }
  .gbox td.gpr, .gbox td.gbot { grid-column: span 4 }
  .gbox td.gpts, .gbox td.gmove { grid-column: span 3 }
  .gbox td.gabc { grid-column: span 2 }
  .gbox tr:not(:has(> td.gabc)) td.gpts, .gbox tr:not(:has(> td.gabc)) td.gmove { grid-column: span 4 }
}
@media (max-width: 760px) {
  /* на телефоне карточка в столбик: товар, статус и доступно, три цены, бот, точки и правка */
  .gsearch { flex: 1 1 100% }
  .gmass form.tools input[type=text] { width: auto; flex: 1 }
  .gmass form.gflags { display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 100% }
  .gmerge { flex: 1 1 100% }
  #mpick { position: static; flex: 1 1 100%; width: auto; max-height: none; box-shadow: none }
  #mpick button { flex-direction: column; gap: 2px; align-items: stretch; min-height: 48px }
  #mpick span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1;
                -webkit-box-orient: vertical }
  #mpick button:nth-child(n+6) { display: none }
  .gmass form.gflags button { min-height: 52px; padding: 6px 10px; white-space: normal; line-height: 1.25 }
  .gtools { gap: 8px }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none }
  .seg::-webkit-scrollbar { display: none }
  .gbox tr, .gbox tr:has(> td.gabc) { grid-template-columns: repeat(6, 1fr); gap: 10px 12px; padding: 14px }
  .gbox td.gp { grid-row: auto; grid-column: 1 / -1 }
  .gbox td.gbot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 20px }
  .gbox td.gs, .gbox td.gpts { grid-column: 1 / 4 }
  .gbox td.ga, .gbox td.gmove, .gbox tr:not(:has(> td.gabc)) td.gmove { grid-column: 4 / -1 }
  .gbox td.gpr { grid-column: span 2 }
  .gbox td.opt { display: none }
  .gpc .thumb { width: 64px; height: 64px }
  button.ok { display: none }
  tr.dirty button.ok { display: inline-block }
  button.ok, button.sw, button.pt, button.act { min-height: 40px }
  button.sw { padding: 4px 0; font-size: 14px }
  button.pt { padding: 0 12px; font-size: 13px }
  button.act { padding: 0; font-size: 14px }
  .gmove summary { font-size: 14px }
}

.pstate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
          margin: 22px 0 0 }
.ptile { margin: 0; padding: 16px 18px; min-width: 0; background: var(--card);
         border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow) }
.ptile > .head { margin-bottom: 10px }
.ptile h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em }
.ptile .sub { margin: 0; font-size: 13.5px; max-width: none }
.ptile progress { margin: 2px 0 10px }
.ptile .crawl { margin: 0 0 4px; font-size: 13.5px; color: var(--dim) }
.ptile .crawl b { color: var(--ink) }
.pmode { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.pmode .pill { font-size: 13.5px; padding: 4px 12px }
.pmode .pill.bad { color: var(--bad); background: var(--bad-bg) }
.ptile .pulse { margin: 0; gap: 4px 22px; font-size: 13.5px }
.ptile .pulse i { padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
                  color: var(--bad); background: var(--bad-bg) }

.pwarn { margin: 14px 0 0; background: var(--card); border: 1px solid var(--line);
         border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 104px }
.pwarn h2 { margin: 0; padding: 14px 18px 10px; font-size: 15px; font-weight: 700;
            letter-spacing: -.01em }
.pwarn details { border-top: 1px solid var(--rule) }
.pwarn summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px;
                 font-size: 14px; color: var(--ink); cursor: pointer; list-style: none }
.pwarn summary::-webkit-details-marker { display: none }
.pwarn summary:hover { background: var(--soft) }
.pwarn summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 auto;
                        border: solid var(--muted); border-width: 0 2px 2px 0;
                        transform: rotate(45deg) }
.pwarn details[open] > summary::after { margin-top: 4px; transform: rotate(-135deg) }
.pwarn summary .pill { padding: 1px 9px; font-size: 12.5px; font-weight: 650;
                       font-variant-numeric: tabular-nums }
.pwarn table { width: auto; min-width: min(520px, 100%); margin: 0 0 8px; font-size: 13.5px }
.pwarn th, .pwarn td { padding: 7px 18px }
.pwarn td { white-space: normal; overflow-wrap: anywhere; color: var(--dim) }
.pwarn td.num { white-space: nowrap; color: var(--ink) }
.pwarn td a { color: var(--ink) }
.pwarn a:hover { color: var(--accent) }
.pskus { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 2px 18px 14px }
.pskus a { padding: 3px 10px; border-radius: 8px; color: var(--ink); background: var(--soft);
           font: 13px ui-monospace, SFMono-Regular, Menlo, monospace }
.pmore { margin: -4px 0 0; padding: 0 18px 14px; font-size: 13px; color: var(--muted) }

#cards .seg { flex-wrap: wrap }

.pfind { flex: 0 1 620px; min-width: 0 }
.pfind form { flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0 }
.pfind input[type=search] { min-width: 140px }
.pfind select { min-height: 42px; border-radius: 12px; font-size: 14px; max-width: 200px }
.pfind a { font-size: 13.5px; white-space: nowrap }

#cards td.pph { width: 1%; padding-top: 7px; padding-bottom: 7px }
#cards .thumb { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rule) }
#cards span.thumb { background: var(--soft) }
#cards td.ptitle { white-space: normal; min-width: 220px }
#cards td.ptitle a { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
                     -webkit-box-orient: vertical; overflow: hidden; color: var(--ink);
                     text-decoration: underline; text-decoration-color: var(--rule);
                     text-underline-offset: 3px }
#cards td.ptitle a:hover { color: var(--accent) }
#cards td.pprice { font-weight: 650 }
#cards td .pill { min-width: 28px; padding: 1px 9px; font-size: 12.5px; text-align: center }
#cards td.pwhy { white-space: normal; min-width: 160px; font-size: 13px }
#cards td.pwhen { font-size: 13px; color: var(--muted) }
#cards td details > summary { display: inline-block; list-style: none; padding: 2px 10px;
  border-radius: 999px; font: 600 12.5px/18px -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--warn); background: var(--warn-bg); white-space: nowrap }
#cards td details > summary::-webkit-details-marker { display: none }
#cards td details > summary::after { content: " ▾"; opacity: .7 }
#cards td details[open] > summary { margin-bottom: 6px }
#cards td details form { font-family: -apple-system, "Segoe UI", system-ui, sans-serif }

.pback { margin: 18px 0 0; font-size: 14px }
.pback + .gscreen { margin-top: 6px }
.pedit { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start }
.pside, .pedit > form { min-width: 0; padding: 18px 20px; background: var(--card);
                        border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow) }
.pside .thumb-big { width: 100%; height: 220px; margin-bottom: 14px; border-radius: 12px;
                    border: 1px solid var(--rule) }
.pside .sub { margin: 0; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--rule);
              font-size: 13.5px; max-width: none }
.pside > .sub:first-child, .pside > img + .sub { margin-top: 0; padding-top: 0; border-top: 0 }
.pside .sub .nowrap { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                      margin-top: 6px; color: var(--ink) }
.pside .sub form.inline { margin: 0 }
.pside button.pdrop { color: var(--muted); font-size: 12.5px }
.pside button.pdrop:hover { color: var(--bad) }
.pedit > form { align-items: stretch; gap: 18px }
.pedit .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; align-items: end }
.pf { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.pf > label { overflow: hidden; font-size: 12.5px; color: var(--muted); white-space: nowrap;
              text-overflow: ellipsis }
.pf input[type=number], .pf input[type=text] { width: 100%; text-align: left }
.pflags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 30px; padding-top: 16px;
          border-top: 1px solid var(--rule) }
.pflag { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 10px;
         min-height: 32px; font-size: 14px }
.pflag label { cursor: pointer }
.pflag input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 34px; height: 20px; border-radius: 10px; cursor: pointer;
  background: radial-gradient(circle at 10px 50%, var(--card) 0 7px, transparent 7.5px), var(--muted);
  background: radial-gradient(circle at 10px 50%, var(--card) 0 7px, transparent 7.5px),
              color-mix(in srgb, var(--muted) 45%, var(--card)) }
.pflag input[type=checkbox]:checked {
  background: radial-gradient(circle at 24px 50%, var(--go-ink) 0 7px, transparent 7.5px), var(--go) }
.pnotef { grid-column: span 4 }
.ppts { grid-column: span 2 }
.ppts .boxes { flex-direction: row; flex-wrap: wrap; gap: 0 18px; max-height: none; margin: 0 }
.ppts .boxes label { font-size: 14px; padding: 7px 0; align-items: center }
.pedit > form > button { align-self: flex-start; min-width: 160px }

.pafter { margin: 10px 0 0 }
.pkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.pkpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px;
        background: var(--card); border: 1px solid var(--line); border-radius: 16px;
        box-shadow: var(--shadow) }
.pkpi span { font-size: 13px; color: var(--dim) }
.pkpi b { font-size: 24px; font-weight: 750; letter-spacing: -.01em; line-height: 1.15;
          font-variant-numeric: tabular-nums }
.pkpi small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.ptotal { background: color-mix(in srgb, var(--accent) 7%, var(--card));
          border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) }
.ptotal.neg b { color: var(--bad) }
.pclose { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
          gap: 10px 16px; margin-top: 12px; padding: 12px 16px; background: var(--card);
          border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow) }
.pclose .sub { margin: 0 }
.pclose .sub + .sub { margin-top: 2px }
.pclose form { flex-wrap: nowrap; gap: 8px }
.pclose input[type=text] { width: 180px }
.padd { margin-bottom: 14px; align-items: center }
.padd input[name=note] { flex: 1 1 140px; max-width: 360px }
.padd input[name=amount] { width: 110px; text-align: left; -moz-appearance: textfield }
.padd input[name=amount]::-webkit-inner-spin-button,
.padd input[name=amount]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.ppts input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--go) }

@media (max-width: 1200px) {
  .pedit .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .pnotef, .ppts { grid-column: 1 / -1 }
}
@media (max-width: 1000px) {
  .pstate, .pedit { grid-template-columns: minmax(0, 1fr) }
  .pkpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pside .thumb-big { width: 220px; max-width: 100% }
  .pedit .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .pnotef, .ppts { grid-column: 1 / -1 }
}
@media (max-width: 760px) {
  .pstate { margin-top: 14px; gap: 10px }
  .ptile { padding: 14px }
  .pwarn h2, .pwarn summary, .pwarn th, .pwarn td, .pskus, .pmore { padding-left: 14px;
                                                                    padding-right: 14px }
  .pwarn table, .pwarn tbody { display: block; min-width: 0; margin: 0 }
  .pwarn tr:has(th) { display: none }
  .pwarn tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 14px;
              border-top: 1px solid var(--rule) }
  .pwarn td, .pwarn td.num { display: block; padding: 0; border: 0 }
  .pwarn td:empty { display: none }
  .pwarn td.key { flex: 1 1 100% }
  #warn-floor td:nth-child(2)::before { content: "цена карточки " }
  #warn-floor td:nth-child(3)::before { content: "в прайсе " }
  #warn-floor td:nth-child(4)::before { content: "закупка " }
  #warn-floor td:nth-child(5)::before { content: "мин. цена " }
  #warn-hold td:nth-child(2)::before { content: "остаток " }
  .pwarn td::before { color: var(--muted) }
  .pfind { flex: 1 1 100% }
  .pfind form { flex-wrap: wrap }
  .pfind input[type=search] { flex: 1 1 100% }
  .pfind select { flex: 1 1 0; max-width: none }
  .pside, .pedit > form { padding: 14px }
  .pedit .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
  .pedit > form > button { align-self: stretch }
  .pflag { min-height: 40px }
  .ppts .boxes label { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 }
  .pkpis { gap: 8px }
  .pkpi { padding: 12px 14px; border-radius: 14px }
  .pkpi b { font-size: 20px }
  .pclose { padding: 12px }
  .pclose form { flex: 1 1 100% }
  .pclose input[type=text] { flex: 1; width: auto }
  .padd input[name=note] { max-width: none }
}

.wmain.doc { margin: 22px 0 0; padding: 0; background: none; border: 0; border-radius: 0;
             box-shadow: none }
.wmain.doc .wrap { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
                   box-shadow: var(--shadow) }
.wtop { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 22px 0 0 }
.wtop .seg a { padding: 8px 20px; font-size: 14.5px }
.whint { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto }
.whint:empty { display: none }
.whint .sub { margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--bad-bg);
              color: var(--ink); font-size: 13px; max-width: none }
.wdrafts button { min-height: 0; padding: 6px 11px; border: 0; border-radius: 9px; background: none;
                  color: var(--dim); font-size: 13.5px; font-weight: 550 }
.wdrafts button:hover { background: var(--hover); color: var(--ink); filter: none }
.wdrafts { margin: 0 0 12px; flex-wrap: wrap }
.wbox { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
        padding: 16px 18px; margin: 0 0 12px; box-shadow: var(--shadow) }
.wbox.fields { max-width: none; gap: 10px 16px;
               grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) }
.wbox.fields input[type=text] { width: 100%; max-width: 340px }
.wbox.fields .pick input[type=text] { flex: 0 1 260px }
.wnote { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center }
.wnote input[name=comment] { flex: 1 1 260px; width: auto; max-width: 520px }
.wnote .lbl:not(:first-of-type) { margin-left: 8px }
.wbox .pick .chips { gap: 6px }
.sfield { position: relative; flex: 0 1 260px; min-width: 0 }
.wbox.fields .sfield input[type=text] { width: 100%; max-width: none }
#spick:empty { display: none }
#spick { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px;
         width: min(420px, calc(100vw - 2 * var(--pad))); max-height: 340px; overflow-y: auto;
         padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
         box-shadow: 0 16px 40px rgba(16, 24, 40, .16) }
#spick button { min-height: 0; padding: 8px 10px; border: 0; border-radius: 10px; background: none;
                color: var(--ink); font-weight: 400; text-align: left; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap }
#spick button:hover, #spick button:focus { background: var(--hover); filter: none; outline: none }
.wbox .pick button.ghost { border-radius: 999px; background: var(--soft); border-color: transparent }
.wbox .pick button.ghost:hover { background: var(--hover) }
.wres { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
        padding: 16px 18px; box-shadow: var(--shadow) }
.wres > .head { margin-bottom: 10px }
.wres > .head:last-child { margin-bottom: 0 }
.wres > .head h2 { overflow-wrap: anywhere }
.wres .wrap { background: none; border: 0; border-radius: 0; box-shadow: none;
              margin: 0 -18px; border-top: 1px solid var(--rule) }
.wres .wrap th:first-child, .wres .wrap td:first-child { padding-left: 18px }
.wres .sub:last-child, .wres .wfacts:last-child { margin-bottom: 0 }
form.add[action="/scan"] { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
                           padding: 14px 16px 16px; margin: 0 0 12px; gap: 8px 10px;
                           box-shadow: var(--shadow) }
form.add[action="/scan"] .lbl { flex: 1 0 100%; font-size: 12.5px; color: var(--muted) }
form.add[action="/scan"] input.code { flex: 1 1 360px; min-height: 52px; font-size: 18px;
                                      border-radius: 12px; padding: 8px 16px }
form.add[action="/scan"] input[type=number] { width: 88px; min-height: 52px; font-size: 17px;
                                              border-radius: 12px }
form.add[action="/scan"] button { min-height: 52px; padding: 0 26px; border-radius: 12px;
                                  font-size: 15px }
#pick { margin: 0 0 12px }
#pick:empty { display: none }
#pick .sub { margin: 0 0 8px }
.wfoot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
         justify-content: space-between; margin-top: 4px }
.wfoot .total { margin: 0; order: 2 }
.wfoot form.doc-foot { margin: 0; align-items: center }
.wfoot form.doc-foot > button { min-height: 44px; padding: 0 28px; border-radius: 12px; font-size: 15px }
.wback { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: 14px }
.wact { margin: 14px 0 0; align-items: flex-start }
.wres .wact:last-child { margin-bottom: 0 }
.wswap[open] { flex: 1 1 100%; order: 2 }
.wswap td form.inline { display: inline-flex; margin-right: 6px }
.wswap > summary { list-style: none; display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 14px; font-size: 13.5px; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); background: var(--card); white-space: nowrap }
.wswap > summary::-webkit-details-marker { display: none }
.wswap > summary:hover, .wswap[open] > summary { background: var(--hover) }
.wswap form.tools { margin: 10px 0; flex-wrap: nowrap; max-width: 520px }
.wswap form.tools input[type=text] { width: auto }
.wswap form.tools button { min-height: 42px; border-radius: 12px }
.wact > form { margin: 0 }
.wact > form button { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13.5px }
.wship { gap: 10px 12px }
.wship form.tools { margin: 0; gap: 8px; align-items: center; flex-wrap: wrap }
.wship form.tools > a { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
                        background: var(--card); color: var(--ink); font-size: 13.5px; white-space: nowrap }
.wship form.tools > a:hover { background: var(--hover); text-decoration: none }
.wship input[type=date] { min-height: 42px; border-radius: 12px }
.wship form.tools button { min-height: 42px; border-radius: 12px }
.wday { display: flex; gap: 6px; align-items: center; padding: 0 12px; min-height: 42px;
        border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px;
        font-variant-numeric: tabular-nums }
.wday .lbl { margin-left: 6px } .wday .lbl:first-child { margin-left: 0 }
.wxlsx { margin-left: auto }
.wxlsx button { min-height: 42px; border-radius: 12px; background: var(--card); color: var(--ink);
                border-color: var(--line); font-weight: 550 }
.wxlsx button:hover { background: var(--hover); filter: none }
.wship + .wrap td:first-child, #express td:nth-child(4), #shipdays td:nth-child(2),
#shipdays td:nth-child(3), #receipts td:nth-child(4), #receipts td:nth-child(5),
#writeoffs td:nth-child(3), #writeoffs td:nth-child(4), #items td:nth-child(4) {
  color: var(--muted); font-variant-numeric: tabular-nums }
td.wgo { text-align: right; width: 1% }
#items .tick { width: 1%; padding-right: 0 }
#items .tick input { width: 18px; height: 18px; margin: 0; vertical-align: middle; accent-color: var(--go) }
#items td.long:nth-child(7) { width: 28em }
td.wstuck { white-space: nowrap; width: 1% }
td.wstuck > form.inline { display: inline-flex; vertical-align: middle; margin-right: 6px }
td.wstuck > details { display: inline-block; vertical-align: middle }
td.wstuck .wswap > summary { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px }
#stuck tr.wpick { display: none }
#stuck tr:has(details[open]) + tr.wpick { display: table-row }
#stuck tr.wpick > td { padding: 2px 18px 14px; white-space: normal }
#stuck tr.wpick form.tools { margin: 0 0 8px; flex-wrap: nowrap; max-width: 520px }
td.wgo form.inline { justify-content: flex-end }
.wfiles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px;
          font-size: 13.5px; color: var(--muted) }
.wfile { display: inline-flex; gap: 8px; align-items: center; padding: 6px 8px 6px 12px;
         border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink);
         font-variant-numeric: tabular-nums }
.wfile a { padding: 2px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok);
           font-weight: 600 }
.wfile a:hover { text-decoration: none; filter: brightness(1.05) }
.wup { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center }
.wup input[type=file] { font-size: 13.5px; color: var(--dim); max-width: 100% }
.wup input[type=file]::file-selector-button { font: inherit; font-weight: 550; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  margin-right: 10px; cursor: pointer }
.wup label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap }
.wup input[type=radio] { width: 17px; height: 17px; margin: 0; accent-color: var(--go) }
.gsearch.tools { flex-wrap: nowrap; margin: 0; align-items: center }
.wres .gsearch input[type=text], #items .gsearch input[type=text], .part > .gsearch input[type=text], .wswap form.tools input[type=text], #stuck .wpick form.tools input[type=text] { flex: 1; min-height: 42px; border-radius: 12px; font-size: 15px;
  padding-left: 40px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2377818c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 14px center }
#items .gsearch > a { white-space: nowrap; font-size: 13.5px }
.wres .gsearch { margin: 0 0 12px }
.part > .gsearch { margin: 14px 0 12px; max-width: 520px }
.part > .gsearch button { min-height: 42px; border-radius: 12px }
#receipt-lines, #writeoff-lines { margin: 0 0 12px }
#receipt-lines td form, #writeoff-lines td form, .wmain td form[action="/scan"] { flex-wrap: nowrap; gap: 6px }
.wmain td form[action="/scan"] input[type=number] { width: 76px; min-height: 34px; padding: 4px 8px;
                                                      border-radius: 8px }
.wmain td form[action="/scan"] button.ghost { min-height: 34px; padding: 4px 11px; border-radius: 8px;
                                                font-size: 13px }
td form[action="/doc"] input[name=comment] { width: 180px; min-height: 32px; padding: 4px 8px;
                                             font-size: 13px; border-radius: 8px }
td form[action="/bind"] { gap: 8px }
td form[action="/bind"] button.ghost { min-height: 30px; padding: 3px 10px; font-size: 12.5px }
@media (max-width: 1100px) {
  .wbox.fields { grid-template-columns: max-content minmax(0, 1fr) }
}
@media (max-width: 760px) {
  #receipt-pick .wrap { max-height: 50vh; overflow-y: auto }
  #receipt-pick th { position: sticky; top: 0; z-index: 1; background: var(--card) }
  #ship-pick { max-height: 55vh; overflow-y: auto }
  #ship-pick table, #ship-pick tbody { display: block }
  #ship-pick tr:has(> th) { display: none }
  #ship-pick tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px;
                  border-bottom: 1px solid var(--rule) }
  #ship-pick tr:last-child { border-bottom: 0 }
  #ship-pick td, #ship-pick td:first-child { display: block; padding: 0; border: 0; white-space: normal }
  #ship-pick td:empty, #ship-pick td.opt { display: none }
  #ship-pick td.long { flex: 1 1 100%; min-width: 0 }
  #ship-pick td[data-label]::before { content: attr(data-label) " "; color: var(--muted) }
  #ship-pick td.qty::after { content: " шт"; color: var(--muted) }
  .wbox.fields { grid-template-columns: 1fr; gap: 4px }
  .wbox.fields .lbl:not(:first-child) { margin-top: 8px }
  .wbox.fields input[type=text], .wbox.fields .pick input[type=text] { max-width: none; flex-basis: 100% }
  .sfield { flex-basis: 100% }
  #spick { position: static; width: auto; max-height: 262px; margin-top: 6px; box-shadow: none }
  #spick button { min-height: 48px }
  #receipt-lines td:nth-child(3), #writeoff-lines td:nth-child(3),
  .wmain > .wrap td:nth-child(3) { white-space: normal; min-width: 11em }
  .wtop { margin-top: 14px }
  .wtop > .seg { display: flex; width: 100% }
  .wtop .seg a { flex: 1; text-align: center; padding: 9px 6px; min-height: 40px;
                 display: flex; align-items: center; justify-content: center }
  .whint { margin-left: 0 }
  .wbox, .wres { padding: 14px 12px }
  .wres .wrap { margin: 0 -12px }
  .wres .wrap th:first-child, .wres .wrap td:first-child { padding-left: 12px }
  form.add[action="/scan"] { padding: 12px }
  form.add[action="/scan"] input.code { flex: 1 1 100%; min-width: 0 }
  form.add[action="/scan"] button { flex: 1 }
  .wfoot form.doc-foot > button { flex: 1 }
  .wfoot form.doc-foot { flex: 1 1 100% }
  .wship form.tools { width: 100% }
  .wship input[type=date] { flex: 1 }
  .wxlsx { margin-left: 0 }
  .wday { width: 100% }
  .wship .seg a, #items .seg a, .wdrafts button, .wdrafts b { min-height: 38px; display: inline-flex;
                                                               align-items: center }
  .gsearch.tools { flex: 1 1 100% }
  .wship form.tools > a, .wfile a, .wback a { min-height: 38px; display: inline-flex; align-items: center }
  .wmain td form[action="/scan"] input[type=number] { min-height: 38px }
  .wmain td form[action="/scan"] button.ghost, td form[action="/bind"] button.ghost,
  td form[action="/doc"] input[name=comment] { min-height: 38px }
  .wswap > summary, .wact > form button { min-height: 40px }
  .wup { gap: 12px 18px }
  .wup input[type=file], .wup button { flex: 1 1 100% }
  .wres td:not(.key):not(.num):not(.no) { white-space: normal; min-width: 7em }
  #items .tick input { width: 22px; height: 22px }
  #stuck table, #stuck tbody, #express table, #express tbody { display: block }
  #stuck tr:has(> th), #express tr:has(> th), #stuck td:empty, #express td:empty { display: none }
  #stuck tr, #express tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
                           padding: 10px 12px; border-bottom: 1px solid var(--rule) }
  #stuck td, #express td, #stuck td:first-child, #express td:first-child { display: block;
    padding: 0; border: 0; white-space: normal }
  #stuck td.long:not(.key), #stuck td.wstuck, #express td.wgo { flex: 1 1 100%; text-align: left }
  #stuck tr:has(details[open]) + tr.wpick { display: block }
  #express td.num::after { content: " шт" }
  .wrap:has([form^=kit]) table, .wrap:has([form^=kit]) tbody { display: block }
  .wrap:has([form^=kit]) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
                              padding: 10px 12px; border-bottom: 1px solid var(--rule) }
  .wrap:has([form^=kit]) tr:last-child { border-bottom: 0 }
  .wrap:has([form^=kit]) tr:has(th):not(:has(button)), .wrap:has([form^=kit]) th:not(:has(button)),
  .wrap:has([form^=kit]) td.num:empty, .wrap:has([form^=kit]) td.no:empty, .wrap:has([form^=kit]) td.opt,
  .wrap:has([form^=kit]) td:first-child:not(.key):not(.no):not(:has(button)) { display: none }
  .wrap:has([form^=kit]) td:first-child { padding: 0 }
  .wrap:has([form^=kit]) td, .wrap:has([form^=kit]) th { display: block; padding: 0; border: 0;
                                                          white-space: normal; min-width: 0 }
  .wrap:has([form^=kit]) td:not(.key):not(.num):not(.no):not(:has(button, input)) { flex: 1 1 100% }
  .wrap:has([form^=kit]) td:has(button, input) { display: flex; flex-wrap: wrap; gap: 6px;
                                                  align-items: center; flex: 1 1 100%; order: 9 }
  .wrap:has([form^=kit]) td form.inline { display: inline-flex }
  .wrap:has([form^=kit]) tr.hit { background: var(--hi) }
  .wrap:has([form^=kit]) tr:hover td, .wrap:has([form^=kit]) tr.hit td { background: none }
  .wres > .wrap:has([form^=kit]) td:nth-child(5):not(:empty)::before { content: "собрано "; color: var(--muted) }
  .wres > .wrap:has([form^=kit]) td:nth-child(6):not(:empty)::before { content: "цена "; color: var(--muted) }
}
td.wstuck { white-space: normal; min-width: 212px }
td.wstuck > form.inline, td.wstuck > details { margin-top: 2px; margin-bottom: 2px }
td.wstuck button, td.wstuck summary { white-space: nowrap }
#bind td:nth-child(2) { white-space: normal; min-width: 14em }
@media (min-width: 761px) and (max-width: 1300px) {
  #stuck td.long { min-width: 9em }
  #stuck td .pill { white-space: normal; border-radius: 12px }
  td.wstuck { min-width: 190px }
  td.wstuck button { white-space: normal }
}
@media (max-width: 760px) {
  .wswap form.tools input[type=text] { flex: 1 1 0; min-width: 0 }
  .pclose form { flex-wrap: wrap }
}

.arefuse { margin-top: 22px }
.arefuse h1, main.onlylogin h2, main.alone h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em }
.arefuse h1 { margin: 0 0 12px }
.ablk { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
        padding: 18px 20px; box-shadow: var(--shadow) }
.ablk.bad { background: var(--bad-bg); border-color: transparent }
.ablk > :last-child { margin-bottom: 0 }
.ablk p { margin: 0 0 10px }
.wrap + .ablk { margin-top: 14px }
.acols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
         gap: 0 20px }
.acols > section { display: flex; flex-direction: column; min-width: 0 }
.acols > section > .ablk { flex: 1 }

#partners .gsearch { max-width: 380px; margin-bottom: 12px }
#partners .ones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
                  gap: 6px 10px; max-height: 360px; overflow-y: auto; align-content: start }
#partners .one { justify-content: space-between; min-width: 0; border-radius: 10px }
#partners .one b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#partners .one i { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap }

.aresult { max-width: 720px }
.aresult td:first-child { color: var(--dim) }
.aresult td:last-child:not(.num) { white-space: normal }

.anav { display: flex; flex-wrap: wrap; gap: 8px }
.anav a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
          background: var(--card); color: var(--dim); font-size: 13.5px; font-weight: 550;
          white-space: nowrap }
.anav a:hover { background: var(--hover); color: var(--ink); text-decoration: none }

.aform { display: block }
.afs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
       gap: 14px 16px; align-items: end }
#shops .afs { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) }
.af { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted) }
.af input, .af select { width: 100%; min-height: 40px; font-size: 15px; color: var(--ink);
                        text-align: left }
.afoot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px }
.apairs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 20px;
          align-items: baseline; align-content: start }
.apairs > .lbl { font-size: 13px; color: var(--muted) }
.apairs > input.code { width: 100%; min-width: 0; font-size: 15px }
.apairs > button { grid-column: 2; justify-self: start }
.abtns { display: flex; flex-wrap: wrap; gap: 8px }
.acol { flex-direction: column; align-items: flex-start; gap: 10px }
.acol label { display: flex; gap: 8px; align-items: center; font-size: 14px }
.ablk input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--go) }
.ablk input[type=file] { max-width: 100%; font-size: 13.5px; color: var(--muted) }
.ablk input[type=file]::file-selector-button {
  min-height: 38px; margin-right: 12px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink); font: inherit;
  font-weight: 550; cursor: pointer }
.ablk input[type=file]::file-selector-button:hover { background: var(--hover) }

.ablk .rows { align-items: stretch; gap: 8px }
.ablk .rows .line { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) 60px }
.ablk .rows.list .line { grid-template-columns: minmax(0, 1fr) auto }
.ablk .rows .cap { font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0 }
.ablk .rows .to { color: var(--muted) }
.ablk .rows input[type=number], .ablk .rows input[type=text] { min-height: 40px; text-align: left }
.ablk .rows .del { font-size: 13px; color: var(--muted) }
.ablk .rows .foot { margin-top: 6px }
.ablk .rows + .sub { margin: 14px 0 0; font-size: 13px }
.ablk .ones { margin-bottom: 14px }
.ablk .ones + form { margin: 0; padding-top: 14px; border-top: 1px solid var(--rule) }
.ablk .one { padding-top: 4px; padding-bottom: 4px }

#users > .note { max-width: none; margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--line);
                 border-radius: 12px; background: var(--card); box-shadow: var(--shadow);
                 color: var(--ink); font-size: 14px }
#users td input[type=password] { width: 180px; min-height: 32px; padding: 4px 10px;
                                 border-radius: 8px }
.aadd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.aadd input { flex: 1 1 200px; max-width: 280px }
button.adel { color: var(--bad) }
.aparts { flex-direction: row; flex-wrap: wrap; gap: 0 14px; max-height: none }
.aparts label { font-size: 13.5px; align-items: center; white-space: nowrap }
.aadd .aparts input[type=checkbox] { flex: none; width: 17px; height: 17px; margin: 0;
                                     accent-color: var(--go) }
.arole { margin-top: 6px }
.arole > summary { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px;
                   border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
                   color: var(--dim); cursor: pointer; list-style: none }
.arole > summary::-webkit-details-marker { display: none }
.arole > summary:hover, .arole[open] > summary { background: var(--hover); color: var(--ink) }
.arole form { margin-top: 8px }
button.adel:hover { background: var(--bad-bg); border-color: transparent }

.anarrow { max-width: 720px }
.ablk > a:last-child, .ablk > p > a:only-child {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  font-size: 13.5px; font-weight: 550 }
.ablk > a:last-child:hover, .ablk > p > a:only-child:hover { background: var(--hover);
                                                            text-decoration: none }
.ablk > p:has(> a:only-child) { display: inline-flex; margin: 4px 8px 0 0 }
.ablk > p > a.ago { background: var(--go); color: var(--go-ink); border-color: transparent }
.ablk > p > a.ago:hover { background: var(--go); filter: brightness(1.05) }

main.onlylogin, main.alone { max-width: none; min-height: 100vh; min-height: 100dvh;
                             display: flex; flex-direction: column; align-items: center;
                             justify-content: center; padding: 24px var(--pad) 12vh }
main.onlylogin section, main.alone section { width: 100%; max-width: 400px; margin: 0;
  padding: 28px 28px 26px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow) }
main.onlylogin .head { margin-bottom: 18px }
main.onlylogin .flash { margin: 0 0 14px }
main.onlylogin form { align-items: stretch; gap: 10px }
main.onlylogin input { width: 100%; min-height: 48px; margin: 0; padding: 10px 14px;
                       border-radius: 12px; font-size: 16px }
main.onlylogin button { width: 100%; min-height: 48px; margin-top: 6px; border-radius: 12px;
                        font-size: 15px }
.abusy { position: relative; height: 6px; margin: 4px 0 18px; overflow: hidden;
         border-radius: 3px; background: var(--rule) }
.abusy::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
                border-radius: 3px; background: var(--go); animation: abusy 1.4s ease-in-out infinite }
@keyframes abusy { from { transform: translateX(-100%) } to { transform: translateX(250%) } }
@media (prefers-reduced-motion: reduce) { .abusy { display: none } }

@media (max-width: 760px) {
  section, .pwarn { scroll-margin-top: 145px }
  .menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
          -webkit-mask-image: linear-gradient(to left, transparent, var(--ink) 24px);
          mask-image: linear-gradient(to left, transparent, var(--ink) 24px) }
  .menu::-webkit-scrollbar { display: none }
  .menu::after { content: ""; flex: 0 0 24px }
  .menu a { flex: none }
  button.theme { width: 38px; height: 38px; min-height: 38px }
  .ablk { padding: 14px; border-radius: 14px }
  .anav a { padding: 9px 14px; font-size: 14px }
  .apairs { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .apairs > .lbl:not(:first-child) { margin-top: 8px }
  .apairs > button { grid-column: 1 }
  .af input, .af select, .apairs > input.code { font-size: 16px }
  .ablk .rows .line { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) 68px }
  .acol label { min-height: 38px }
  #categories input.tiny, #users td input[type=password] { min-height: 38px }
  #journal .pager a, #journal .pager b { padding: 12px 13px }
  .aadd > * { flex: 1 1 100%; max-width: none }
  #partners .ones { max-height: 50vh }
  #partners .gsearch { max-width: none }
  main.onlylogin section, main.alone section { padding: 22px 18px }
}
@media (max-width: 760px) {
  main input:not([type=checkbox]):not([type=radio]):not([type=file]), main select, main textarea { font-size: 16px !important }
}
@media print {
  th, td { padding: 4px 6px; font-size: 12px }
  th:first-child, td:first-child { padding-left: 2px }
  .wrap { overflow: visible }
}