:root{
  --bg:#f4f5f7; --card:#fff; --ink:#16191d; --muted:#6b7280; --line:#e3e6ea;
  --accent:#1f6feb; --ok:#12805c; --warn:#b45309; --bad:#b42318;
  --free:#eceff3; --busy:#1f6feb; --svc:#7c5cff;
  --r:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
nav{display:flex;gap:2px;max-width:1200px;margin:0 auto;padding:0 10px}
nav a,.nav-more summary{padding:14px 14px;color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap;
  border-bottom:3px solid transparent}
nav a.on,.nav-more summary.on{color:var(--ink);border-bottom-color:var(--accent)}
.nav-more{position:relative;flex:none}
.nav-more summary{display:block;cursor:pointer;list-style:none}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:'⌄';margin-left:5px}
.nav-menu{display:none;position:absolute;top:100%;right:0;z-index:30;min-width:190px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(16,25,45,.16)}
.nav-more[open] .nav-menu{display:grid;gap:2px}
.nav-menu a{border:0;border-radius:7px;padding:11px 12px}
.nav-menu a.on,.nav-menu a:hover{background:#eef5ff}
main{max-width:1200px;margin:0 auto;padding:16px 12px 60px}
/* Заголовок часто равен имени файла клиента: «332_Примка_Медиз_18.08_Заказ_6»
   без единого пробела раздвигает страницу на телефоне. Ломаем где угодно. */
h1{font-size:21px;margin:6px 0 14px;overflow-wrap:anywhere}
h2{font-size:16px;margin:22px 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.flash{padding:12px 14px;border-radius:var(--r);margin-bottom:14px;font-weight:600}
.flash.ok{background:#e6f4ef;color:var(--ok)}
.flash.err{background:#fdeceb;color:var(--bad)}
/* Результат операции виден там, где смотрит человек: экран после приёмки
   остаётся на своём месте, и строка наверху страницы прошла бы мимо глаз. */
.flash.toast{position:fixed;left:12px;right:12px;bottom:14px;z-index:60;margin:0;cursor:pointer;
  max-width:600px;margin-inline:auto;box-shadow:0 6px 24px rgba(16,25,45,.18);
  border:1px solid rgba(16,25,45,.08);animation:toast-in .18s ease-out}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.flash.toast{animation:none}}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 5px}
input,select,textarea{width:100%;padding:13px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:17px;background:#fff;color:var(--ink);font-family:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.scan-location{background:var(--free);color:var(--muted)}
.scan-location:focus,.scan-location:not(:placeholder-shown){background:#fff;color:var(--ink)}
button{padding:14px 20px;border:0;border-radius:8px;background:var(--accent);color:#fff;
  font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
button.ghost{background:#eef1f5;color:var(--ink)}
button.danger{background:#fdeceb;color:var(--bad)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:150px}
.grow2{flex:2}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.muted{color:var(--muted)}
.small{font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 8px;border-bottom:1px solid var(--line)}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}

/* карта стеллажа */
.mapwrap{overflow-x:auto;padding-bottom:8px}
.rack{display:block;width:100%}
.lvl{display:flex;align-items:stretch;gap:6px;margin-bottom:6px}
.lvl-label{width:56px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:8px}
.sections{display:flex;gap:6px;flex:1}
.sec{display:flex;gap:3px;padding:5px;background:#fff;border:1px solid var(--line);
  border-radius:8px;flex:1;min-width:0}
.slot{flex:1;min-width:18px;height:44px;border-radius:5px;background:var(--free);display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted)}
.slot.busy{background:var(--busy);color:#fff}
.slot.piece{background:var(--svc);color:#fff}
.slot.fbs{background:#fdf0dd;color:#9a5600}
.slot.fbs.busy{background:#c97813;color:#fff}
.slot.fbs.piece{background:#a95e10;color:#fff}
.slot.found{outline:3px solid #f59e0b;outline-offset:2px;box-shadow:0 0 0 4px #fef3c7}
.slot.missing{background:#fff;border:1px dashed var(--line);color:#b8bec7;cursor:default}
.slot.missing:hover{outline:0}
.slot:hover{outline:2px solid var(--ink);outline-offset:1px}
.secnums{display:flex;gap:6px;margin-left:62px}
.secnum{flex:1;text-align:center;font-size:11px;color:var(--muted);font-weight:700;
  padding:4px 0;min-width:0}
.secnum span{display:block;font-size:10px;font-weight:600}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:12px}
.dot{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.fbs-dot{background:#c97813}
.missing-dot{background:#fff;border:1px dashed var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;color:var(--ink)}
.tile b{display:block;font-size:24px}
.client-stock{border-color:#cfe0ff;background:#f7faff}
.client-stock span{display:block;margin-top:5px;color:var(--accent);font-size:14px;font-weight:600}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700}
.pill.new{background:#e8f0fe;color:var(--accent)}
.pill.done{background:#e6f4ef;color:var(--ok)}
.pill.cancelled{background:#eef1f5;color:var(--muted)}
.pill.warn{background:#fdf0dd;color:var(--warn)}
.pill.bad{background:#fdeceb;color:var(--bad)}
.pill.wait{background:#eef1f5;color:var(--muted)}
/* Сводка расхождений: числа должны читаться с расстояния вытянутой руки. */
.diff{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.diff div{flex:1 1 110px;padding:10px 12px;border-radius:8px;background:#f8f9fb;border:1px solid var(--line)}
.diff b{display:block;font-size:22px;line-height:1.1}
.diff span{font-size:12px;font-weight:600;opacity:.75}
.diff .short{background:#fdeceb;border-color:#f4c9c5;color:var(--bad)}
.diff .over,.diff .unplanned,.diff .damaged{background:#fdf0dd;border-color:#f0d9b0;color:var(--warn)}
.plan{background:#f8f9fb;border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:10px}
.addr{font-family:ui-monospace,Menlo,monospace;font-size:19px;font-weight:700}
.rack-title{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.rack-title h1{margin-bottom:0}
.rack-picker{display:flex;gap:8px;align-items:center;flex:none}
.rack-picker select{min-width:170px;padding:9px 10px;font-size:15px}
.rack-picker button{padding:10px 14px;font-size:14px}
.map-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.map-find{display:flex;gap:8px;align-items:center;flex:1;max-width:600px}
.map-find input{min-width:0}
.map-find button{padding:12px 16px;white-space:nowrap}
.structure-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.structure-row:last-child{border-bottom:0}
.structure-row button{padding:10px 14px;font-size:14px}
.settings-card summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.settings-card summary b{font-size:17px}
.settings-card summary span{font-size:13px;color:var(--muted)}
.settings-card[open] summary{padding-bottom:8px;border-bottom:1px solid var(--line)}
.stock-search{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.stock-search input{flex:1;min-width:0}
.stock-search select{width:auto;flex:none}
.stock-search button{padding:12px 16px;white-space:nowrap}
.stock-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.stock-head h1{margin-bottom:2px}.stock-head p{margin:0 0 14px}
.stock-table td:nth-child(4),.stock-table td:nth-child(5){text-align:right;font-weight:700}
@media(max-width:600px){
  main{padding:12px 10px 88px}
  nav{padding:0 6px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .nav-menu{position:fixed;top:54px;right:10px}
  nav a,.nav-more summary{padding:14px 12px;font-size:14px;scroll-snap-align:start}
  h1{font-size:24px;line-height:1.2;margin:8px 0 16px}
  h2{font-size:14px;margin:18px 0 8px}
  .card{padding:14px 12px;border-radius:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .flash{padding:12px;font-size:15px}
  .row>*{min-width:100%}
  /* Количество и брак — одна мысль в два поля; на телефоне они должны быть
     видны рядом, иначе кладовщик листает форму, чтобы сверить два числа. */
  .row>.half{min-width:calc(50% - 5px)}
  .row>div>button{width:100%}
  input,select,textarea{min-height:50px;font-size:18px}
  /* Галочку 50-й высоты растягивать не надо: палец жмёт по подписи рядом. */
  input[type=checkbox]{min-height:0;width:auto;margin-right:6px}
  button{min-height:50px;font-size:17px}
  .card table{min-width:600px}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:84px}
  .mapwrap{margin:0 -2px}
  .rack{min-width:var(--rack-min-width)}
  .slot{height:52px;min-width:24px;font-size:12px}
  .lvl{margin-bottom:8px}
  .legend{gap:8px}
  .addr{font-size:18px}
  .rack-title{display:block}
  .rack-title h1{margin-bottom:12px}
  .rack-picker select{min-width:0;flex:1}
  .rack-picker button{min-height:50px;width:auto}
  .map-tools{display:grid;grid-template-columns:1fr}
  .map-find{max-width:none}
  .map-find input{min-width:0}
  .map-tools .button-link{margin-left:0}
  .structure-row{align-items:flex-end}
  .structure-row button{min-height:50px}
  .settings-card summary{align-items:flex-start}
  .settings-card summary span{max-width:120px;text-align:right}
  .stock-search{flex-wrap:wrap}
  .stock-search input{flex-basis:100%}
  .stock-search button{width:auto}
  .stock-head{align-items:flex-start}.stock-head .button-link{white-space:nowrap}
  .stock-table table{min-width:720px}
  .picked button{min-height:44px;width:100%}
  form.take .row{gap:8px}
  form.take .row>*{min-width:0}
  form.take button{min-height:50px}
  form.take .qty{min-height:50px}
}

/* поиск товара в приёмке */
#hits{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.hit{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  color:var(--ink);font-size:16px;font-weight:400;padding:12px 14px;border-radius:8px}
.hit:hover{border-color:var(--accent);background:#f7faff}
.picked{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:12px 14px;
  background:#eef5ff;border:1px solid #cfe0ff;border-radius:8px;font-size:16px}
.picked button{margin-left:auto;padding:8px 14px;font-size:14px}
.step{min-width:52px;font-size:22px;padding:12px 0}

/* «взять в работу»: кнопки вплотную к полю */
form.take .row>*{flex:0 0 auto;min-width:0}
form.take .qty{width:90px;text-align:center;font-size:20px;font-weight:700}

/* карточки товара — вместо тяжёлых таблиц на телефоне */
.product-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
/* Имена файлов клиента приходят без пробелов; без переноса карточка приёмки
   или задания раздвигает страницу на телефоне. */
.product-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow-wrap:anywhere}
.product-card-top{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.product-card-top>div{min-width:0}
.product-card-top b:first-child{font-size:16px;line-height:1.25}
.product-qty{flex:none;color:var(--accent);font-size:16px;font-weight:800;white-space:nowrap}
.product-identifiers{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0;color:var(--muted);font-size:13px}
.product-identifiers span{background:#f1f3f5;padding:3px 6px;border-radius:5px}
.product-card details{border-top:1px solid var(--line);padding-top:8px;font-size:14px}
.product-card summary{cursor:pointer;color:var(--muted)}
.code-list{display:grid;gap:6px;margin:10px 0}.code-list span{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.code-list form{display:inline}.code-delete{min-height:auto;padding:1px 7px;background:#fdeceb;color:var(--bad);font-size:16px}
.add-code{display:flex;gap:8px;align-items:center}.add-code input{min-width:0;padding:10px;font-size:15px}.add-code button{min-height:44px;padding:8px 12px;font-size:14px;white-space:nowrap}
.location-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.location-list a{background:#f1f3f5;border-radius:5px;padding:5px 7px;font-size:13px}
.picker-card{max-width:620px;margin:0 auto}.picker-address{font:800 clamp(34px,10vw,62px)/1.05 ui-monospace,Menlo,monospace;letter-spacing:-.04em;margin:12px 0}.picker-product{font-size:18px;font-weight:700}
.picker-need{font-size:22px;font-weight:800;margin:14px 0 6px}
.picker-steps{margin:0;padding-left:22px;font-size:17px;line-height:1.5}
.picker-steps li{margin:6px 0}
.preview-stats .tile{min-height:auto}.button-link{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:8px;font-weight:700;margin-left:8px}.ghost-link{background:#eef1f5;color:var(--ink)}
.search-results-mobile{display:none;margin-top:14px}
.order-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.order-actions button{padding:8px 12px;font-size:14px}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:-2px 0 12px;padding-bottom:2px}
.tab{flex:1;min-width:120px;padding:11px 14px;text-align:center;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--muted);font-weight:700;white-space:nowrap}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tabs-sub{margin-top:-4px}.tabs-sub .tab{flex:0 0 auto;min-width:0;padding:8px 12px;font-size:14px}
.deadline-urgent{color:var(--bad);font-weight:700}
.rack-tile{display:flex;flex-direction:column;gap:8px}.rack-tile>b,.rack-tile>a>b{display:block;font-size:24px}.rack-tile>a:first-child{color:var(--ink)}
@media(max-width:600px){.product-list{grid-template-columns:1fr}.product-card{padding:13px}.add-code{flex-wrap:wrap}.add-code input{min-height:46px;width:100%}.add-code button{width:100%}.picker-address{font-size:39px;word-break:break-all}}
@media(max-width:600px){.search-results-mobile{display:grid}.search-results-table{display:none}}

/* Приёмка: режим ввода. Старый склад заводят россыпью подряд, и «1 короб» в поле
   приходилось бы стирать на каждой позиции. */
.modes{display:flex;gap:8px;margin:14px 0 4px}
.modes .mode{flex:1;padding:12px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;font-size:16px;font-weight:600}
.modes .mode.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.total{margin:10px 0 0;font-size:17px;font-weight:700}