/* ===== Строгий светлый стиль в духе Material: плотные таблицы, тонкие линии, мягкая тень, синий акцент ===== */
:root {
  --bg:#f2f3f5; --card:#ffffff; --ink:#111318; --muted:#6b7280; --line:#e3e5e9; --line-strong:#b9bec7;
  --primary:#111318; --primary-dark:#000000; --primary-soft:#fff6c2; --accent:#ffd600; --blue:#2962ff; --ok:#1b8a4c; --ok-soft:#e3f5ea;
  --warn:#e37400; --warn-soft:#fef7e0; --err:#d93025; --err-soft:#fce8e6;
  --sh-1:0 1px 2px rgba(60,64,67,.18), 0 1px 3px 1px rgba(60,64,67,.08);
  --sh-2:0 2px 6px 2px rgba(60,64,67,.12), 0 1px 2px rgba(60,64,67,.24);
  --sh-3:0 8px 24px rgba(60,64,67,.22), 0 2px 6px rgba(60,64,67,.18);
  --r:4px;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 Roboto, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
b, strong { font-weight:700; }
.mono, .num, .art, .code-input, .totals b { font-family:"Roboto Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; }

/* шапка */
.top { display:flex; align-items:center; gap:28px; padding:0 24px; height:56px; background:var(--ink); color:#fff; box-shadow:var(--sh-2); position:sticky; top:0; z-index:20; }
.brand { font-weight:800; font-size:17px; letter-spacing:.08em; text-transform:uppercase; }
.tabs { display:flex; gap:2px; height:56px; }
.tabs a { display:flex; align-items:center; padding:0 18px; color:#c9ccd3; font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.08em; border-bottom:3px solid transparent; border-radius:0; }
.tabs a.active { color:#fff; border-bottom-color:var(--accent); } .tabs a:hover { background:#24272e; text-decoration:none; color:#fff; }
.who { margin-left:auto; color:#c9ccd3; font-size:12.5px; } .who a { color:var(--accent); }
.page { padding:20px 24px 60px; max-width:1720px; margin:0 auto; }

/* карточки и сетка */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); padding:18px 20px; min-width:0; }
.card h1, .card h2 { margin:0 0 14px; font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding-bottom:10px; border-bottom:2px solid var(--ink); }
.two-col { display:grid; grid-template-columns:440px minmax(0,1fr); gap:20px; align-items:start; }
.sticky { position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:auto; }
@media (max-width:1100px) { .two-col { grid-template-columns:minmax(0,1fr); } .sticky { position:static; max-height:none; } }
.toolbar { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filters, .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rate-box { display:inline-flex; gap:8px; align-items:center; padding:4px 10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); }

/* формы */
input, select, textarea { font:inherit; padding:8px 12px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); border-radius:6px; transition:border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color:#9aa0a6; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 2px var(--accent); }
input[type=search] { min-width:280px; }
label { display:block; margin:10px 0; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
label input, label textarea, label select { display:block; width:100%; margin-top:5px; font-size:14px; text-transform:none; letter-spacing:0; font-weight:500; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chk { display:inline-flex; gap:6px; align-items:center; color:var(--ink); margin:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:13px; }
.chk input { width:16px; height:16px; margin:0; accent-color:var(--ink); }

/* кнопки */
.btn { display:inline-flex; align-items:center; gap:4px; padding:7px 14px; border:1px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; font:inherit; font-weight:700; line-height:1.2; border-radius:4px; text-transform:uppercase; font-size:12px; letter-spacing:.06em; transition:background .12s, color .12s, box-shadow .12s; }
.btn:hover { background:var(--ink); color:#fff; text-decoration:none; }
.btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:var(--sh-1); } .btn.primary:hover { background:var(--accent); color:var(--ink); border-color:var(--accent); box-shadow:var(--sh-2); }
.btn.danger { color:var(--err); border-color:#f5c2be; } .btn.danger:hover { background:var(--err-soft); }
.btn.small { padding:5px 10px; font-size:11px; } .btn.tiny { padding:3px 7px; font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; }
.btn.big { width:100%; justify-content:center; padding:13px; font-size:14px; margin-top:12px; }
.btn.active { background:var(--accent); border-color:var(--ink); color:var(--ink); }
.btn.add { background:var(--ink); border-color:var(--ink); color:#fff; font-size:14px; padding:3px 12px; font-weight:800; border-radius:4px; min-width:44px; justify-content:center; } .btn.add:hover { background:var(--accent); color:var(--ink); }
.btn.add.bump { transform:scale(1.12); }
.btn:disabled { opacity:.5; cursor:wait; }
.muted { color:var(--muted); } .small { font-size:12px; }

/* таблицы */
.table-wrap { overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); }
table.grid { border-collapse:collapse; width:100%; }
.grid th, .grid td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.grid th { background:#fff; color:var(--ink); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; position:sticky; top:0; white-space:nowrap; z-index:2; border-bottom:2px solid var(--ink); }
.grid th a.sort { color:var(--ink); } .grid th a.sort.active { color:var(--blue); }
.grid .num { text-align:right; white-space:nowrap; font-size:13.5px; }
.grid .name { max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grid.compact th, .grid.compact td { padding:6px 10px; }
.grid tbody tr:last-child td { border-bottom:none; }
.grid tr.dim { opacity:.55; } .grid tr.saved td { background:var(--ok-soft); } .grid tr.picked td { background:var(--primary-soft); }
.grid tr.row-link { cursor:pointer; } .grid tbody tr:hover td { background:#f8f9fa; } .grid tr.picked:hover td { background:#ffef9e; }
.grid td.s { color:#3c4043; } .grid td.prod { max-width:380px; }
.prod .art { font-weight:700; font-size:13px; } .prod .nm { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:360px; }
#cat-table td.prod { max-width:250px; } #cat-table .prod .nm { max-width:230px; }
#cat-table td.num, #cat-table th.num { padding-left:6px; padding-right:6px; }
.grid td.mono { white-space:nowrap; }
.grid td.act { white-space:nowrap; text-align:right; width:1%; }
.link-draft { color:var(--blue); font-weight:700; white-space:nowrap; }
#cat-table td.act, #cat-table th:last-child, #products td.act, #products th:last-child { position:sticky; right:0; background:#fff; box-shadow:-1px 0 0 var(--line); }
#cat-table tr.picked td.act { background:var(--primary-soft); } #cat-table th:last-child, #products th:last-child { background:#fff; z-index:3; }
.warn { color:var(--warn); font-weight:700; }
input.cell { width:95px; padding:5px 8px; text-align:right; }
input.qty { width:64px; padding:4px 6px; text-align:right; margin:0 3px; font-weight:700; }
.qty-cell { white-space:nowrap; }
.badge { display:inline-block; padding:3px 9px; border-radius:3px; font-size:11px; font-weight:700; white-space:nowrap; background:#f1f3f4; color:var(--ink); letter-spacing:.04em; text-transform:uppercase; border:1px solid rgba(0,0,0,.08); }
.st-need_order { background:var(--warn-soft); color:#8a4b00; } .st-ordered { background:#e3ecff; color:#1b3fa6; } .st-warehouse_china { background:#fce4f3; color:#8e1d5c; } .st-in_transit { background:#e0f2fe; color:#075985; } .st-arrived { background:var(--ok-soft); color:var(--ok); } .st-fulfillment { background:#ede7f6; color:#4527a0; }
.pay-paid { background:var(--ok-soft); color:var(--ok); } .pay-need_payment { background:var(--err-soft); color:#a50e0e; }
.notes .note { font-weight:600; }
.totals { margin:14px 0; border:1px solid var(--ink); border-radius:var(--r); padding:10px 14px; background:#fff; }
.totals div { display:flex; justify-content:space-between; padding:3px 0; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.totals div b { color:var(--ink); font-size:14px; }
.totals .total { border-top:2px solid var(--ink); margin-top:4px; padding-top:7px; } .totals .total b { font-size:20px; color:var(--ink); }
.status-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.cat-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.cat-wrap { max-height:calc(100vh - 200px); }
.cart-wrap { max-height:38vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r); }
.cart-wrap .grid th { position:static; }
.edit-block { margin-top:14px; } .edit-block summary { list-style:none; display:inline-flex; } .edit-block[open] summary { margin-bottom:12px; }
details.fold summary { cursor:pointer; font-weight:600; text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; margin:8px 0; color:var(--muted); }
.history ul { padding-left:18px; margin:6px 0; }

/* массовые действия */
.bulk-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 14px; margin-bottom:14px; background:var(--accent); border:1px solid var(--ink); border-radius:var(--r); box-shadow:var(--sh-2); position:sticky; top:64px; z-index:10; }
.bulk-bar b { font-size:15px; color:var(--ink); } .bulk-bar input { width:96px; padding:5px 8px; } .bulk-bar select { padding:5px 8px; }
.bulk-bar .sep { width:1px; height:26px; background:rgba(0,0,0,.35); margin:0 4px; }
input.sel, #sel-all { width:18px; height:18px; accent-color:var(--ink); cursor:pointer; }

/* всплывающая карточка */
.pop { position:fixed; z-index:100; width:480px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto; background:#fff; border:1px solid var(--ink); border-top:4px solid var(--accent); border-radius:var(--r); box-shadow:var(--sh-3); padding:14px 16px; font-size:13px; }
.pop-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; }
.pop-title { font-weight:700; font-size:15px; } .pop-name { color:var(--muted); font-size:12px; }
.pop-section { margin:10px 0; } .pop-h { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:6px; color:var(--muted); }
.bar-row { display:grid; grid-template-columns:64px 1fr 40px auto; gap:8px; align-items:center; margin:3px 0; }
.bar-label { font-size:12px; } .bar { height:10px; border-radius:2px; background:#eceef2; overflow:hidden; } .bar i { display:block; height:100%; background:var(--ink); border-radius:2px; }
.bar-val { text-align:right; font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:700; } .bar-sub { font-size:11px; color:var(--muted); }
.pop-list { margin:0; padding-left:16px; } .pop-list li { margin:3px 0; }
.pop-loading { padding:20px; text-align:center; color:var(--muted); }

/* вход */
.login-box { max-width:440px; margin:80px auto; background:#fff; border:1px solid var(--ink); border-top:6px solid var(--accent); border-radius:var(--r); box-shadow:var(--sh-2); padding:32px; text-align:center; }
.login-box h1 { font-weight:700; font-size:20px; margin:0 0 8px; }
.login-form { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.code-input { font-size:26px; letter-spacing:10px; text-transform:uppercase; width:210px; text-align:center; font-weight:700; }
.alert { padding:10px 14px; border-radius:6px; background:var(--warn-soft); border:1px solid #f6d9a0; margin:10px 0; font-weight:500; } .alert.error { background:var(--err-soft); border-color:#f5c2be; color:#a50e0e; }
.toast { position:fixed; right:20px; bottom:20px; padding:12px 18px; background:#323232; color:#fff; z-index:200; border-radius:6px; box-shadow:var(--sh-2); font-weight:500; }
.toast.error { background:var(--err); } .toast.ok { background:#323232; }

/* отступы между соседними кнопками/полями в ячейках таблиц (ⓘ и «+», −10 − [qty] + +10, 💾 и т.п.) */
.grid td .btn + .btn, .grid td .btn + input, .grid td input + .btn, .grid td .btn + a.btn, .grid td a.btn + .btn { margin-left:6px; }
.grid td.act { padding-right:10px; }
.qty-cell .btn { margin:0 2px; }
.pop-head .btn { margin-left:8px; }
.grid td.prod { cursor:pointer; }

/* сортируемые заголовки */
#cat-table th[data-key], table.js-sort th.sortable { cursor:pointer; user-select:none; } #cat-table th[data-key]:hover, table.js-sort th.sortable:hover { color:var(--blue); }
#cat-table th.sorted, table.js-sort th.sorted { color:var(--blue); }

/* корзина — список карточек, помещается на любой ширине */
.cart-list { max-height:40vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r); }
.cart-item { padding:8px 10px; border-bottom:1px solid var(--line); background:#fff; }
.cart-item:last-child { border-bottom:none; }
.ci-head { display:flex; align-items:flex-start; gap:8px; }
.ci-name { flex:1; min-width:0; } .ci-name > b { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-sum { font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-weight:700; white-space:nowrap; padding-top:1px; }
.ci-ctrl { display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap; }
.ci-ctrl input.qty { width:64px; margin:0 2px; }
.ci-ctrl .btn.tiny { padding:4px 8px; min-width:34px; justify-content:center; }
.cart-empty { padding:14px; }
@media (max-width:480px) { .ci-ctrl .btn.tiny { padding:5px 7px; min-width:32px; } .ci-ctrl input.qty { width:56px; } }

/* ===== телефон ===== */
@media (max-width:700px) {
  html, body { overflow-x:hidden; }
  .top { height:auto; padding:8px 12px; gap:8px 14px; flex-wrap:wrap; }
  .brand { font-size:14px; letter-spacing:.04em; }
  .tabs { order:3; width:100%; height:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tabs a { padding:8px 10px; font-size:11px; letter-spacing:.04em; white-space:nowrap; border-bottom-width:2px; }
  .who { margin-left:auto; font-size:11px; }
  .page { padding:12px 10px 40px; }
  .card { padding:12px; }
  .two-col { gap:12px; }
  .row2 { grid-template-columns:1fr; gap:0; }
  input[type=search] { min-width:0; width:100%; }
  .toolbar, .filters, .actions, .cat-head { gap:6px; }
  .filters > *, .cat-head > * { flex:1 1 auto; }
  .rate-box { flex-wrap:wrap; }
  .totals div { font-size:11px; } .totals .total b { font-size:17px; }
  .cat-wrap { max-height:none; }
  .bulk-bar { top:0; position:static; }
  .pop { width:calc(100vw - 16px); left:8px !important; }
  .grid th, .grid td { padding:7px 8px; }
  .prod .nm { max-width:200px; } #cat-table td.prod { max-width:180px; } #cat-table .prod .nm { max-width:170px; }
}

.fit-ok { color:var(--ok); font-weight:700; } .fit-mid { color:#b7791f; font-weight:700; }
.ci-fit { margin-top:2px; } .qty-big { font-size:15px; }

.badge.draft { background:#fff3c4; color:#7a5a00; border-color:#e0c15a; font-size:10px; padding:1px 6px; vertical-align:middle; }
.draft-form { margin-bottom:14px; } .draft-grid { display:grid; grid-template-columns:2fr 3fr 1fr 1fr 1fr; gap:10px; }
@media (max-width:900px) { .draft-grid { grid-template-columns:1fr 1fr; } }

/* ===== PWA / приложение на iPhone ===== */
.shop-switch { font:inherit; font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:#24272e; border:1px solid #3a3e47; border-radius:6px; padding:5px 8px; max-width:220px; }
.shop-switch:focus { outline:none; box-shadow:0 0 0 2px var(--accent); }
.bottom-nav { display:none; }
@media (max-width:700px) {
  .m-hide { display:none !important; }
  .top { position:sticky; top:0; padding-top:calc(8px + env(safe-area-inset-top)); flex-wrap:nowrap; justify-content:space-between; }
  .tabs, .who { display:none; }
  .brand { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .shop-switch { max-width:70vw; font-size:14px; }
  .page { padding:12px 10px calc(74px + env(safe-area-inset-bottom)); }
  .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; background:#111318; border-top:1px solid #2b2f37; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -2px 10px rgba(0,0,0,.25); }
  .bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#9aa0a6; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 0; border-radius:8px; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .bottom-nav a .ic { font-size:20px; line-height:1; }
  .bottom-nav a.active { color:var(--accent); } .bottom-nav a:active { background:#24272e; }
  /* поля ввода не меньше 16px — иначе iPhone приближает страницу при фокусе */
  input, select, textarea, input.cell, input.qty, .bulk-bar input, .bulk-bar select { font-size:16px; }
  input.cell { width:84px; } input.qty { width:60px; }
  .btn { min-height:38px; } .btn.small { min-height:34px; } .btn.tiny { min-height:30px; }
  /* колонка товара прилипает слева при горизонтальной прокрутке таблицы */
  .grid th.prod, .grid td.prod { position:sticky; left:0; background:#fff; z-index:1; box-shadow:1px 0 0 var(--line); }
  .grid th.prod { z-index:3; } .grid tr.picked td.prod { background:var(--primary-soft); } .grid tr:hover td.prod { background:#fff; }
  .grid td.prod, #cat-table td.prod { max-width:150px; } .prod .nm, #cat-table .prod .nm { max-width:140px; }
  .table-wrap { -webkit-overflow-scrolling:touch; border-left:none; border-right:none; border-radius:0; margin:0 -10px; }
  .notes { max-width:200px; } .notes .small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .toolbar .actions { width:100%; } .toolbar .actions .btn { flex:1 1 auto; justify-content:center; }
  /* карточка товара — шторка снизу */
  .pop { left:0 !important; right:0; top:auto !important; bottom:0; width:100vw; max-width:100vw; max-height:80vh; border-radius:14px 14px 0 0; border-top-width:4px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  .toast { left:10px; right:10px; bottom:calc(76px + env(safe-area-inset-bottom)); text-align:center; }
  .login-box { margin:30px 10px; padding:20px; }
}
@media (display-mode: standalone) { body { -webkit-user-select:none; user-select:none; } input, textarea { -webkit-user-select:text; user-select:text; } }

/* ===== Экран PIN (в духе FIN) ===== */
.pin-body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(120% 80% at 50% 0%, #2a2e38 0%, #111318 55%, #0b0c10 100%); color:#fff; display:flex; align-items:center; justify-content:center; padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.pin-screen { display:flex; flex-direction:column; align-items:center; gap:26px; width:100%; max-width:380px; }
.pin-header { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pin-logo { width:64px; height:64px; border-radius:18px; background:var(--accent); color:#111318; font-weight:900; font-size:26px; letter-spacing:.04em; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(255,214,0,.25); }
.pin-title { font-weight:800; font-size:18px; letter-spacing:.08em; text-transform:uppercase; }
.pin-subtitle { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#9aa0a6; text-align:center; min-height:16px; transition:color .2s; font-variant-numeric:tabular-nums; }
.pin-subtitle.error, .pin-subtitle.locked { color:#ff6b61; letter-spacing:1px; } .pin-subtitle.ok { color:#6fdc8c; }
.pin-shops { display:flex; gap:8px; max-width:100%; overflow-x:auto; padding:2px 4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .pin-shops::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#c9ccd3; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s, border-color .15s; }
.chip.active { background:var(--accent); color:#111318; border-color:var(--accent); }
.pin-dots { display:flex; gap:18px; } .pin-dots.shake { animation:pin-shake .5s cubic-bezier(.36,.07,.19,.97) both; }
.pin-dot { width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); display:block; transition:transform .18s, background .18s, border-color .18s, box-shadow .18s; }
.pin-dot.filled { background:#fff; border-color:transparent; transform:scale(1.15); box-shadow:0 0 14px rgba(255,255,255,.35); }
.pin-dot.error { background:#ff6b61; border-color:#ff6b61; box-shadow:0 0 14px rgba(255,107,97,.5); } .pin-dot.ok { background:#6fdc8c; border-color:#6fdc8c; }
@keyframes pin-shake { 10%,90% { transform:translateX(-2px); } 20%,80% { transform:translateX(4px); } 30%,50%,70% { transform:translateX(-8px); } 40%,60% { transform:translateX(8px); } }
.pin-pad { display:grid; grid-template-columns:repeat(3, 74px); gap:16px; } .pin-pad.disabled { opacity:.4; pointer-events:none; }
.pin-btn { width:74px; height:74px; border-radius:50%; border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%); color:#fff; font:inherit; font-size:28px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:transform .08s, background .12s, border-color .12s; }
.pin-btn:active { transform:scale(.93); background:rgba(255,214,0,.22); border-color:rgba(255,214,0,.6); }
.pin-btn.empty { border:none; background:none; pointer-events:none; } .pin-del { font-size:22px; color:#c9ccd3; }
.pin-foot { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; } .pin-foot a { color:var(--accent); } .pin-foot .muted { color:#80868b; }
@media (max-height:640px) { .pin-screen { gap:16px; } .pin-pad { grid-template-columns:repeat(3, 64px); gap:12px; } .pin-btn { width:64px; height:64px; font-size:24px; } .pin-logo { width:52px; height:52px; font-size:22px; } }

/* панель массовых действий скрыта, пока ничего не отмечено (атрибут hidden перебивался display:flex) */
.bulk-bar[hidden] { display:none; }

/* заметки-теги к товару */
.pnotes { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; align-items:center; }
.pnote { display:inline-block; padding:2px 8px; border-radius:999px; background:#fff6c2; border:1px solid #e0c15a; color:#5a4300; font-size:11.5px; font-weight:600; white-space:normal; line-height:1.3; }
.pnote-x { color:#8a4b00; font-weight:800; margin-left:2px; } .pnote-x:hover { color:var(--err); text-decoration:none; }
.pnote-add { font-size:11.5px; color:var(--blue); font-weight:600; white-space:nowrap; }
.link-del { color:var(--err); font-weight:700; white-space:nowrap; }
@media (max-width:700px) { .pnote-add, .link-del, .link-draft { padding:4px 0; display:inline-block; } }

/* страница товара */
.crumbs { margin:0 0 10px; font-size:13px; } .crumbs a { font-weight:700; }
.prod-page { grid-template-columns:minmax(0,5fr) minmax(0,7fr); } .prod-page > div { display:flex; flex-direction:column; gap:16px; min-width:0; }
.prod-head { display:flex; gap:16px; align-items:flex-start; } .prod-head-text { min-width:0; flex:1; }
.prod-head h1 { border:none; padding:0; margin:0 0 4px; font-size:20px; letter-spacing:0; text-transform:none; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.prod-head p { margin:4px 0; }
.prod-img { width:96px; height:96px; object-fit:cover; border-radius:6px; border:1px solid var(--line); flex:0 0 auto; background:#f1f3f4; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.note-form { display:flex; gap:8px; margin-bottom:10px; } .note-form input { flex:1; min-width:0; }
.note-list { list-style:none; padding:0; margin:0; } .note-list li { padding:8px 0; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:baseline; }
.note-list li:last-child { border-bottom:none; } .note-date { font-family:"Roboto Mono", ui-monospace, Menlo, monospace; font-size:12px; color:var(--muted); white-space:nowrap; }
.note-text { flex:1; font-weight:500; }
.goto { display:inline-block; margin-right:6px; color:var(--blue); font-weight:800; font-size:13px; text-decoration:none; padding:0 4px; border:1px solid #c7d4ff; border-radius:4px; background:#eef2ff; line-height:1.4; }
.goto:hover { background:var(--blue); color:#fff; text-decoration:none; }
.pop-actions { display:flex; gap:6px; align-items:center; white-space:nowrap; }
@media (max-width:700px) { .prod-page { grid-template-columns:minmax(0,1fr); } .row3 { grid-template-columns:1fr 1fr; } .prod-img { width:72px; height:72px; } .goto { padding:2px 7px; font-size:14px; } }
.note-count { display:inline-block; margin-top:3px; font-size:11.5px; font-weight:700; color:#5a4300; background:#fff6c2; border:1px solid #e0c15a; border-radius:999px; padding:1px 8px; white-space:nowrap; }
.note-count:hover { background:#ffe982; text-decoration:none; }

/* ===== Новая шапка и нижнее меню: без иконок, тёмная панель, жёлтый акцент ===== */
html { background:#111318; }
body { background:var(--bg); min-height:100vh; }
.top { height:56px; padding:0 20px; gap:20px; background:linear-gradient(180deg, #1b1e25 0%, #111318 100%); border-bottom:1px solid #2b2f37; box-shadow:0 2px 12px rgba(0,0,0,.25); }
.brand { display:flex; align-items:center; min-width:0; }
.shop-pill, .shop-switch { display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:10px; background:rgba(255,214,0,.12); border:1px solid rgba(255,214,0,.35); color:var(--accent); font:inherit; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-switch { -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:32px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffd600' stroke-width='2' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; }
.shop-switch:hover { background-color:rgba(255,214,0,.2); } .shop-switch:focus { outline:none; box-shadow:0 0 0 2px rgba(255,214,0,.45); }
.shop-switch option { color:#111318; background:#fff; text-transform:none; letter-spacing:0; }
.tabs { gap:4px; height:56px; }
.tabs a { padding:0 16px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:none; color:#aab0ba; border-bottom:2px solid transparent; }
.tabs a:hover { background:transparent; color:#fff; } .tabs a.active { color:#fff; border-bottom-color:var(--accent); }
.who { display:flex; align-items:center; gap:14px; font-size:13px; color:#aab0ba; } .who-name { font-weight:600; }
.who .logout { color:#fff; font-weight:700; padding:6px 12px; border:1px solid #3a3e47; border-radius:8px; } .who .logout:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.login-box h1 { letter-spacing:0; }
@media (max-width:700px) {
  .top { height:auto; min-height:52px; padding:calc(6px + env(safe-area-inset-top)) 12px 6px; gap:10px; flex-wrap:nowrap; justify-content:space-between; }
  .shop-pill, .shop-switch { height:36px; font-size:14px; max-width:62vw; }
  .who { display:flex; } .who-name { display:none; } .who .logout { padding:7px 12px; font-size:13px; }
  .bottom-nav { padding:0 6px calc(0px + env(safe-area-inset-bottom)); background:rgba(17,19,24,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid #2b2f37; box-shadow:0 -4px 16px rgba(0,0,0,.28); }
  .bottom-nav a { position:relative; flex-direction:row; justify-content:center; height:54px; padding:0; font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:none; color:#aab0ba; border-radius:0; }
  .bottom-nav a::before { content:""; position:absolute; top:0; left:18%; right:18%; height:2px; border-radius:0 0 2px 2px; background:transparent; }
  .bottom-nav a.active { color:var(--accent); } .bottom-nav a.active::before { background:var(--accent); }
  .bottom-nav a:active { background:rgba(255,255,255,.06); }
  .page { padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .toast { bottom:calc(68px + env(safe-area-inset-bottom)); }
}

/* активная кнопка: не сплошная заливка, а белая с жёлтой рамкой и подчёркиванием */
.btn.active { background:#fff; color:var(--ink); border-color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent), var(--sh-1); }
.btn.active:hover { background:#fffbe6; color:var(--ink); }

/* фото-вложения */
.att-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin-bottom:10px; }
.att { margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fafafa; }
.att img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.att figcaption { padding:6px 8px; font-size:11px; display:flex; flex-direction:column; gap:2px; } .att figcaption > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.att-del { color:var(--err); font-weight:800; } .att-add { cursor:pointer; }
@media (max-width:700px) { .att-grid { grid-template-columns:repeat(3, 1fr); gap:8px; } .att-add { width:100%; justify-content:center; min-height:42px; } #att-hint { display:block; margin-top:6px; } }

/* нижнее меню — минимализм: без полосок и жёлтого, активный пункт просто белый */
@media (max-width:700px) {
  .bottom-nav { background:#111318; border-top:1px solid #23262d; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .bottom-nav a { color:#7d838c; font-weight:500; font-size:14px; letter-spacing:0; }
  .bottom-nav a::before { display:none; }
  .bottom-nav a.active { color:#fff; font-weight:700; }
  .bottom-nav a:active { background:transparent; color:#fff; }
}

/* активная кнопка-фильтр («Новые», статусы): минимализм — без подчёркивания и жёлтого, просто тёмная рамка и лёгкий серый фон */
.btn.active, .btn.active:hover { background:#eceef1; color:var(--ink); border-color:var(--ink); box-shadow:none; }

/* ===== Минимализм вместо жёлтой заливки: выбранные строки, кнопки «+», корзина, массовые действия ===== */
.grid tr.picked td, #cat-table tr.picked td.act, .grid tr.picked td.prod { background:#f6f7f9; }
.grid tr.picked td.prod { box-shadow:inset 3px 0 0 var(--ink); }
.grid tr.picked:hover td, .grid tr.picked:hover td.prod { background:#f0f2f5; }
.btn.add { background:var(--ink); color:#fff; border-color:var(--ink); border-radius:8px; font-weight:700; }
.btn.add:hover { background:#000; color:#fff; border-color:#000; }
tr.picked .btn.add { background:#fff; color:var(--ink); border-color:var(--ink); }
.btn.add.bump { transform:scale(1.06); }
/* корзина */
.cart-list { border:none; background:transparent; }
.cart-item { border:1px solid var(--line); border-radius:10px; margin-bottom:8px; padding:10px 12px; background:#fff; }
.cart-item:last-child { margin-bottom:0; }
.ci-name > b { font-size:14px; }
.ci-sum { font-size:14px; }
.cart-item .btn.tiny.del { border:none; background:transparent; color:#9aa0a6; font-size:14px; padding:2px 6px; min-width:0; } .cart-item .btn.tiny.del:hover { color:var(--err); background:transparent; }
.ci-ctrl { gap:0; margin-top:8px; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; display:inline-flex; flex-wrap:nowrap; }
.ci-ctrl .btn.tiny { border:none; border-right:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); font-weight:600; padding:6px 10px; margin:0; min-width:38px; }
.ci-ctrl .btn.tiny:last-child { border-right:none; } .ci-ctrl .btn.tiny:hover { background:#f1f3f4; color:var(--ink); }
.ci-ctrl input.qty { border:none; border-right:1px solid var(--line); border-radius:0; margin:0; width:60px; text-align:center; font-weight:800; padding:6px 4px; }
.ci-ctrl input.qty:focus { box-shadow:inset 0 -2px 0 var(--ink); }
.cart-empty { border:1px dashed var(--line-strong); border-radius:10px; text-align:center; }
/* массовые действия на поставках */
.bulk-bar { background:#f6f7f9; border:1px solid var(--ink); box-shadow:none; border-radius:8px; }
.bulk-bar .sep { background:var(--line-strong); }
/* метки заметок — нейтральные */
.pnote, .note-count { background:#f1f3f4; border-color:var(--line-strong); color:#3c4043; } .note-count:hover { background:#e4e6ea; }
@media (max-width:700px) { .ci-ctrl { width:100%; } .ci-ctrl .btn.tiny { flex:1; padding:7px 4px; min-width:0; } .ci-ctrl input.qty { width:64px; flex:0 0 64px; } }

/* корзина компактнее — в масштабе блока итогов */
.cart-item { border:1px solid var(--line-strong); border-radius:var(--r); padding:7px 10px; margin-bottom:6px; }
.ci-head { gap:6px; } .ci-name > b { font-size:13px; } .ci-name .small, .ci-fit { font-size:11px; line-height:1.3; }
.ci-sum { font-size:13px; } .cart-item .btn.tiny.del { font-size:12px; padding:0 4px; }
.ci-ctrl { margin-top:6px; border-radius:var(--r); border-color:var(--line-strong); }
.ci-ctrl .btn.tiny { padding:4px 8px; min-width:32px; font-size:11.5px; min-height:0; }
.ci-ctrl input.qty { width:52px; padding:4px 2px; font-size:14px; }
.cart-empty { padding:10px; font-size:12px; }
@media (max-width:700px) { .ci-ctrl .btn.tiny { padding:5px 2px; min-height:30px; } .ci-ctrl input.qty { width:56px; flex:0 0 56px; font-size:15px; } }
.chk-inline { display:inline-flex; align-items:center; gap:6px; } .chk-inline input { width:16px; height:16px; margin:0; accent-color:var(--ink); display:inline-block; }

/* компактная форма поставки: два поля в строке и на телефоне, меньше отступов */
label { margin:6px 0; font-size:10.5px; }
label input, label select, label textarea { margin-top:3px; padding:7px 10px; font-size:14px; }
.row2 { gap:8px; }
.status-row { gap:5px; margin:8px 0; } .status-row .btn.small { padding:5px 9px; font-size:11px; min-height:0; }
.totals { margin:10px 0; padding:8px 12px; } .totals div { padding:2px 0; } .totals .total { margin-top:3px; padding-top:5px; }
.card h1, .card h2 { margin-bottom:10px; padding-bottom:8px; font-size:14px; }
.card { padding:14px 16px; }
@media (max-width:700px) {
  .row2 { grid-template-columns:1fr 1fr; gap:8px; }
  label { margin:5px 0; } label input, label select { padding:7px 9px; font-size:16px; }
  .status-row .btn.small { padding:6px 8px; font-size:11px; min-height:32px; } .btn { min-height:34px; }
  .card { padding:12px; } .totals { padding:8px 10px; }
  .btn.big { padding:11px; margin-top:8px; }
  .prod-head h1 { font-size:18px; }
}

/* нижнее меню: заметный отклик на нажатие — пункт сжимается, подсвечивается и сразу становится активным */
@media (max-width:700px) {
  .bottom-nav a { transition:transform .12s ease, color .12s ease, background .12s ease; border-radius:10px; margin:4px 2px; height:46px; }
  .bottom-nav a:active, .bottom-nav a.pressed { transform:scale(.9); color:#fff; background:rgba(255,255,255,.12); }
  .bottom-nav a.pressed { animation:nav-press .35s ease; }
  @keyframes nav-press { 0% { transform:scale(1); background:transparent; } 40% { transform:scale(.88); background:rgba(255,255,255,.16); } 100% { transform:scale(.96); background:rgba(255,255,255,.1); } }
}

/* составное поле: сумма и курс (или галочка и сумма) в одной рамке */
.inp-group { display:flex; align-items:stretch; margin-top:3px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; overflow:hidden; transition:border-color .12s, box-shadow .12s; }
.inp-group:focus-within { border-color:var(--ink); box-shadow:0 0 0 2px var(--accent); }
.inp-group input[type=number] { display:block; flex:1 1 0; width:auto; min-width:0; margin:0; border:none; border-radius:0; box-shadow:none; padding:7px 8px; text-align:right; font-weight:600; }
.inp-group input[type=number]:focus { outline:none; box-shadow:none; }
.inp-group .pre, .inp-group .sep { display:flex; align-items:center; padding:0 8px; font-size:11px; color:var(--muted); white-space:nowrap; text-transform:none; letter-spacing:0; }
.inp-group .sep { border-left:1px solid var(--line); border-right:1px solid var(--line); background:#f8f9fa; }
.inp-group .chk-inline { padding:0 6px 0 10px; border-right:1px solid var(--line); background:#f8f9fa; }
.inp-group .chk-inline input { width:18px; height:18px; }
@media (max-width:700px) { .inp-group input[type=number] { font-size:16px; padding:7px 6px; } .inp-group .sep, .inp-group .pre { padding:0 6px; } }
/* составное поле не должно вылезать из колонки */
.row2 > label, .row3 > label { min-width:0; }
.inp-group { max-width:100%; }
.inp-group input[type=number] { width:0; flex:1 1 0; }
.inp-group input[type=number]::-webkit-outer-spin-button, .inp-group input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.inp-group input[type=number] { -moz-appearance:textfield; }
.inp-group:focus-within { border-color:var(--ink); box-shadow:none; }

/* ===== Дизайн v2: Inter, спокойные подписи, скруглённые поля, чипы статусов, чистый блок итогов ===== */
body { font-family:Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:14px; line-height:1.45; color:#14161a; }
.mono, .num, .art, .code-input, .totals b, .ci-sum, .bar-val, .note-date { font-family:"JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace; }
.page { padding:16px 16px 60px; }
.card { border:none; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 4px rgba(16,24,40,.08); padding:16px; }
.card h1, .card h2 { text-transform:none; letter-spacing:-.01em; font-size:15px; font-weight:700; border-bottom:1px solid var(--line); padding-bottom:10px; margin:0 0 12px; }
label { text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; color:#6b7280; margin:10px 0 0; }
label input, label select, label textarea, .inp-group { margin-top:5px; }
input, select, textarea { border-radius:8px; border-color:#d7dae0; padding:8px 11px; }
input:hover, select:hover, textarea:hover { border-color:#b8bcc5; }
input:focus, select:focus, textarea:focus { border-color:#14161a; box-shadow:0 0 0 3px rgba(20,22,26,.08); }
.inp-group { border-radius:8px; border-color:#d7dae0; } .inp-group:focus-within { border-color:#14161a; box-shadow:0 0 0 3px rgba(20,22,26,.08); }
.inp-group .pre, .inp-group .sep { font-size:12px; color:#8a919e; padding:0 9px; } .inp-group .sep { background:#f3f4f6; border-color:#e5e7eb; }
.row2, .row3 { gap:10px; }
.btn { text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; border-radius:8px; padding:8px 14px; border-color:#d7dae0; color:#14161a; }
.btn:hover { background:#f3f4f6; color:#14161a; border-color:#b8bcc5; }
.btn.primary, .btn.primary:hover { background:#14161a; color:#fff; border-color:#14161a; box-shadow:none; }
.btn.primary:hover { background:#000; }
.btn.small { padding:6px 11px; font-size:12.5px; } .btn.tiny { padding:4px 8px; font-size:12px; border-radius:6px; }
.btn.danger { color:var(--err); border-color:#f3c9c5; } .btn.danger:hover { background:var(--err-soft); border-color:#e8a8a2; }
.btn.active, .btn.active:hover { background:#14161a; color:#fff; border-color:#14161a; box-shadow:none; }
.btn.big { border-radius:10px; padding:12px; font-size:14px; }
.btn.add { border-radius:8px; }
.badge { text-transform:none; letter-spacing:0; border-radius:6px; font-size:11.5px; font-weight:600; padding:3px 8px; border:none; }
.badge.draft { font-size:10.5px; }
/* шапка поставки */
.sup-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.sup-code { font-size:20px; font-weight:700; letter-spacing:-.01em; } .sup-meta { font-size:12px; margin-top:2px; }
.sup-badges { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.sup-actions { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
/* статусы — чипы в одну прокручиваемую строку */
.status-row { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; margin:5px 0 6px; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .status-row::-webkit-scrollbar { display:none; }
.status-row .btn.small { white-space:nowrap; border-radius:999px; padding:6px 12px; flex:0 0 auto; min-height:0; }
/* сегментный переключатель (оплата) */
.seg { display:flex; margin-top:5px; border:1px solid #d7dae0; border-radius:8px; overflow:hidden; }
.seg .btn { flex:1; border:none; border-radius:0; padding:8px 6px; min-height:0; font-size:12.5px; } .seg .btn + .btn { border-left:1px solid #d7dae0; }
.seg .btn.active { background:#14161a; color:#fff; }
/* итоги */
.totals { border:none; background:#f6f7f9; border-radius:10px; padding:10px 14px; margin:12px 0; }
.totals div { text-transform:none; letter-spacing:0; font-size:13px; color:#6b7280; padding:4px 0; gap:12px; align-items:baseline; }
.totals div span:first-child { flex:1 1 auto; min-width:0; } .totals div b { font-size:14px; font-weight:600; color:#14161a; white-space:nowrap; }
.totals .total { border-top:1px solid #dfe2e8; margin-top:6px; padding-top:8px; color:#14161a; font-weight:500; } .totals .total b { font-size:17px; font-weight:700; }
.totals .total.grand { border-top:2px solid #14161a; } .totals .total.grand b { font-size:19px; }
.alert { border-radius:8px; }
.muted.small, .small.muted { font-size:12px; }
/* шапка */
.shop-pill, .shop-switch { text-transform:none; letter-spacing:0; font-size:15px; font-weight:700; }
.tabs a { font-size:13.5px; }
@media (max-width:700px) {
  .page { padding:12px 12px calc(66px + env(safe-area-inset-bottom)); }
  .card { padding:14px; border-radius:12px; }
  label { margin-top:8px; } label input, label select { padding:8px 10px; }
  .status-row .btn.small { min-height:34px; }
  .seg .btn { min-height:36px; }
  .btn { min-height:36px; } .btn.small { min-height:32px; }
  .sup-code { font-size:18px; }
  .table-wrap { margin:0 -14px; }
}
/* v2: мелкие правки после проверки на телефоне */
.seg .btn { white-space:nowrap; font-size:12px; padding:8px 4px; }
@media (max-width:700px) {
  .toolbar .filters .btn { flex:0 0 auto; } .toolbar .filters input[type=search] { flex:1 1 100%; }
  .page > p.muted { display:none; } /* длинная подсказка под фильтрами на телефоне не нужна */
  .rate-box { width:100%; gap:6px; } .rate-box .btn.small { flex:1 1 auto; justify-content:center; }
}
/* фото: кнопка удаления поверх миниатюры */
.att { position:relative; }
.att-del { position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(17,19,24,.72); color:#fff; font-size:14px; font-weight:700; line-height:28px; text-align:center; padding:0; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.att-del:hover { background:var(--err); }
/* тег «Микс» — в поставке несколько артикулов */
.badge.mixed { background:#e8f0fe; color:#1a4fb4; font-size:10.5px; padding:2px 7px; vertical-align:middle; }
.chk-row { display:flex; align-items:center; gap:8px; font-size:13px; color:#14161a; font-weight:500; margin-top:12px; cursor:pointer; }
.chk-row input { width:18px; height:18px; margin:0; accent-color:#14161a; display:inline-block; }
.row2 .chk-row { align-self:end; margin:0 0 8px; }

/* «Готово»: раскладка по артикулам */
.badge.done { background:#e6f4ea; color:#137333; font-size:10.5px; padding:2px 7px; vertical-align:middle; }
.done-box { margin:8px 0 4px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; }
.done-head, .done-row { display:grid; grid-template-columns:minmax(0,1fr) 44px 64px 56px 44px; gap:6px; align-items:center; }
.done-head { font-size:11px; color:#6b7280; padding:2px 0 6px; border-bottom:1px solid var(--line); }
.done-row { padding:6px 0; border-bottom:1px solid #f0f1f3; } .done-row:last-of-type { border-bottom:none; }
.done-row .art { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.done-row input { width:100%; padding:5px 4px; text-align:center; font-weight:700; border-radius:6px; }
.done-row .left { font-weight:700; } .done-row .left.warn { color:var(--err); }
.done-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px; flex-wrap:wrap; }
/* склад ФФ */
.ff-cols { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
#ff-table input.ff-qty { width:80px; text-align:center; font-weight:700; }
.moves { list-style:none; margin:0; padding:0; } .moves li { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.moves li:last-child { border-bottom:none; } .mv-date { font-family:"JetBrains Mono", monospace; font-size:11px; color:#6b7280; } .mv-art { font-weight:600; } .mv-delta { font-family:"JetBrains Mono", monospace; }
@media (max-width:700px) {
  .ff-cols { grid-template-columns:minmax(0,1fr); }
  .done-head, .done-row { grid-template-columns:minmax(0,1fr) 36px 56px 50px 40px; gap:4px; }
  .done-row input { font-size:15px; padding:6px 2px; }
  .bottom-nav a { font-size:13px; }
}
/* история изменений себестоимости */
.h-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hist-btn { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12px; font-weight:600; color:#6b7280; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px; padding:3px 10px; cursor:pointer; text-transform:none; letter-spacing:0; }
.hist-btn:hover { color:#14161a; border-color:#b8bcc5; }
.ico-clock { vertical-align:-2px; }
.hist { margin:-4px 0 12px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; background:#fafbfc; max-height:260px; overflow:auto; }
.hist-row { display:grid; grid-template-columns:auto auto 1fr; gap:4px 10px; align-items:baseline; padding:5px 0; border-bottom:1px solid #eef0f3; font-size:12.5px; }
.hist-row:last-child { border-bottom:none; } .hist-date { font-family:"JetBrains Mono", monospace; font-size:11px; color:#6b7280; } .hist-field { color:#6b7280; }
.hist-val { font-family:"JetBrains Mono", monospace; } .hist-row .muted { grid-column:1 / -1; }
.hist-link { display:inline-flex; align-items:center; gap:3px; margin-top:3px; margin-right:6px; font-size:11px; color:#6b7280; text-decoration:none; }
.hist-link:hover { color:#14161a; text-decoration:none; }
@media (max-width:700px) { .hist-row { grid-template-columns:1fr 1fr; } }
.pop-h-row, .h-row .net-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.net-toggle { font-size:12px; font-weight:500; color:#6b7280; text-transform:none; letter-spacing:0; margin:0; cursor:pointer; white-space:nowrap; }
.net-toggle input { width:15px; height:15px; margin:0 4px 0 0; accent-color:#14161a; display:inline-block; }