:root{--bg:#f6f7f9;--card:#fff;--tx:#1b1f24;--mut:#68707b;--bd:#dde1e6;--ac:#1f6feb;--ok:#1a7f37;--er:#cf222e}
:root{color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14171a;--card:#1d2126;--tx:#e6e9ed;--mut:#98a1ad;--bd:#2e353c;--ac:#58a6ff;--ok:#3fb950;--er:#f85149;color-scheme:dark}}
:root[data-theme=dark]{--bg:#14171a;--card:#1d2126;--tx:#e6e9ed;--mut:#98a1ad;--bd:#2e353c;--ac:#58a6ff;--ok:#3fb950;--er:#f85149;color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;justify-content:space-between;padding:12px 16px}#who{color:var(--mut)}
nav{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px}
button,select,input,textarea{font:inherit;color:var(--tx)}
nav button,.btn{border:1px solid var(--bd);background:var(--card);padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
nav button.on,.pr{background:var(--ac);color:#fff;border-color:var(--ac)}
button{border:1px solid var(--bd);background:var(--card);padding:7px 12px;border-radius:8px;cursor:pointer}
button.pr{background:var(--ac);color:#fff}button:disabled{opacity:.5;cursor:default}button.dg{color:var(--er)}
main{padding:0 16px 24px;max-width:960px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px;margin-bottom:14px}
h2{font-size:15px;margin:0 0 10px}.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
input,select,textarea{flex:1 1 140px;min-width:0;padding:9px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}
textarea{width:100%;flex:1 1 100%}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--bd);white-space:nowrap}
th{color:var(--mut);font-size:13px}.mut{color:var(--mut)}#msg{min-height:22px;padding:0 16px 6px;font-size:14px}.ok{color:var(--ok)}.er{color:var(--er)}
.bar2{background:var(--bd);height:10px;border-radius:5px;min-width:80px}.bar2>div{background:var(--ac);height:100%;border-radius:5px}
.stat{display:inline-block;margin:0 18px 6px 0}.stat b{display:block;font-size:22px}.neg{color:var(--er)}.pos{color:var(--ok)}
.scanbox{display:flex;gap:6px;flex:1 1 140px;min-width:0}.scanbox input{flex:1}.cam{position:fixed;inset:0;background:#000;z-index:10;display:flex;flex-direction:column;gap:8px;padding:8px}
.cam video{width:100%;flex:1;min-height:0;object-fit:cover;border-radius:8px}
.note{border-left:4px solid var(--ac);background:var(--bg);padding:8px 12px;margin:8px 0;border-radius:6px}

/* ---- боковая панель навигации по разделам (как в МПФИТ) ---- */
header.topbar{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:6}
header.topbar .grow{flex:1}#menu{display:none;font-size:18px;padding:4px 10px}
#shell{display:flex;align-items:flex-start}
#side{width:228px;flex:0 0 228px;background:var(--card);border-right:1px solid var(--bd);position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;padding:6px 0 16px}
#content{flex:1;min-width:0}
#nav{display:block;overflow:visible;padding:0;gap:0}
#nav .grp{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx);border-top:1px solid var(--bd)}#nav .grp.cur{color:var(--ac)}#nav .grp .chev{font-size:12px;color:var(--mut)}#nav button.sub{padding:8px 16px 8px 30px;font-size:14px}
#nav button{display:block;width:100%;text-align:left;border:0;border-radius:0;background:none;padding:8px 16px;white-space:normal}
#nav button:hover{background:var(--bg)}#nav button.on{background:var(--ac);color:#fff;font-weight:600}
main{max-width:1100px;margin:0;padding:0 20px 28px}
@media(max-width:820px){#menu{display:inline-block}
  #side{position:fixed;left:-250px;top:52px;height:calc(100vh - 52px);z-index:5;transition:left .15s;box-shadow:2px 0 12px rgba(0,0,0,.2)}
  #side.open{left:0}main{padding:0 12px 24px}}

.fld{display:flex;flex-direction:column;gap:2px;flex:1;min-width:11em}.fld input,.fld select{width:100%}
.fld input,.fld select{flex:none;height:auto}

/* ---- адресное хранение ---- */
.k-storage{--kc:#1f6feb}.k-pick{--kc:#1a7f37}.k-quarantine{--kc:#d29922}.k-shortage{--kc:#8250df}.k-site{--kc:#0a8f8f}.k-receiving{--kc:#57606a}.k-defect{--kc:#cf222e}
.bd{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;color:var(--kc);border:1px solid var(--kc)}
.zgrid,.tiles{display:grid;gap:8px}.zgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.tiles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.zc{text-align:left;border:1px solid var(--bd);border-left:4px solid var(--kc);border-radius:8px;padding:10px;background:var(--card);cursor:pointer;display:block;width:100%}
.zc.on{outline:2px solid var(--ac)}.zc b{display:block;margin-bottom:2px}.zc .mut,.tile .mut{font-size:12px}
.tile{border:1px solid var(--bd);border-top:3px solid var(--kc);border-radius:6px;padding:6px;background:var(--card);cursor:pointer;text-align:left;display:block;width:100%}
.tile.has{background:color-mix(in srgb,var(--kc) 10%,var(--card))}.tile.on{outline:2px solid var(--ac)}.tile b{font-size:13px;display:block}
.bar{height:5px;border-radius:3px;background:var(--bd);margin-top:5px;overflow:hidden}.bar i{display:block;height:100%;background:var(--kc)}.bar i.over{background:var(--er)}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:8px 0}
.fact{border:1px solid var(--bd);border-radius:8px;padding:8px;background:var(--bg)}.fact b{display:block;font-size:18px}.fact span{font-size:12px;color:var(--mut)}
.mut{color:var(--mut)}
.bar i.w0{width:0%}
.bar i.w10{width:10%}
.bar i.w20{width:20%}
.bar i.w30{width:30%}
.bar i.w40{width:40%}
.bar i.w50{width:50%}
.bar i.w60{width:60%}
.bar i.w70{width:70%}
.bar i.w80{width:80%}
.bar i.w90{width:90%}
.bar i.w100{width:100%}

/* ---- справочник клиентов ---- */
.k-ff{--kc:#1f6feb}.k-3pl{--kc:#8250df}.k-both{--kc:#1a7f37}.k-none{--kc:#cf222e}.k-paused{--kc:#d29922}.k-archived{--kc:#57606a}.k-active{--kc:#1a7f37}
.checks{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 8px}.checks label{display:flex;gap:6px;align-items:center;cursor:pointer}.checks input{flex:none;min-width:0;width:auto}
.warn{border:1px solid var(--kc,#d29922);border-left:4px solid #d29922;border-radius:8px;padding:8px 10px;margin:0 0 10px;background:color-mix(in srgb,#d29922 10%,var(--card))}

/* ---- справочник товаров ---- */
.k-st-sale{--kc:#1a7f37}.k-st-quarantine{--kc:#cf222e}.k-st-hold{--kc:#d29922}.k-st-shortage{--kc:#8250df}
.tag{display:inline-block;margin:1px 3px 1px 0;padding:1px 7px;border-radius:10px;font-size:.78em;background:color-mix(in srgb,#57606a 14%,var(--card))}
.tag.m{background:color-mix(in srgb,#1f6feb 16%,var(--card))}.tag.w{background:color-mix(in srgb,#d29922 22%,var(--card))}
.pic{width:96px;height:96px;object-fit:cover;border-radius:8px}
.wrapbox{white-space:normal;min-width:9em}
.hn{margin-top:3px}.hn-t{padding:3px 8px;margin:3px 0 0;font-size:.85em}
.dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:8px 0}
.dt{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;cursor:pointer}
.dt .n{font-size:1.9em;font-weight:700;line-height:1.1}.dt .l{color:var(--mut);font-size:.88em}.dt .s{font-size:.8em;color:var(--mut);margin-top:2px}
.dt.bad{border-color:#e5484d;background:color-mix(in srgb,#e5484d 12%,var(--card))}.dt.warn{border-color:#f5a524;background:color-mix(in srgb,#f5a524 12%,var(--card))}
.bar{height:10px;background:var(--bd);border-radius:5px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:#2e7d5b}
.bar.hot i{background:#e5484d}.bar.mid i{background:#f5a524}
.cr{border-left:4px solid #f5a524;padding:6px 10px;margin:6px 0;background:color-mix(in srgb,#f5a524 12%,var(--card));border-radius:4px}
.cr.bad{border-color:#e5484d;background:color-mix(in srgb,#e5484d 12%,var(--card))}.cr .ct{font-weight:600;cursor:pointer}.cr ul{margin:4px 0 0 18px;padding:0;font-size:.88em;color:var(--mut)}
.ok{color:var(--ok);font-weight:600}
#nav .home{display:block;width:100%;text-align:left;font-weight:700;padding:12px 16px;border:0;border-bottom:1px solid var(--bd);background:var(--card);cursor:pointer;font-size:1em}
#nav .home.on{background:#1769e0;color:#fff}
.cr .ct{display:flex;justify-content:space-between;gap:8px}.cr .why{font-size:.88em;color:var(--mut);margin:4px 0}
.cr.open{box-shadow:0 0 0 2px #1769e0}.dd{margin-top:8px;background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:8px}
.lk{color:var(--ac);cursor:pointer;text-decoration:underline}.dd td,.dd th{white-space:normal}
.pbadge{display:inline-block;padding:1px 7px;border-radius:9px;font-size:.8em;margin:1px;background:color-mix(in srgb,#e5484d 20%,var(--card));color:var(--er)}.pbadge.warn{background:color-mix(in srgb,#f5a524 26%,var(--card));color:var(--tx)}
.pbadge.ok{background:color-mix(in srgb,#2e7d5b 22%,var(--card));color:var(--ok)}
#lang{width:auto;min-width:0}
.fld.auto{min-width:9em}.fld .cap{white-space:normal;overflow-wrap:anywhere;font-size:11px;color:var(--mut,#667);line-height:1.1}
.how{margin:8px 0 12px;padding:8px 12px;border:1px solid var(--bd);border-left:4px solid var(--ac);background:var(--card);border-radius:8px}.how summary{cursor:pointer;font-weight:600}
.how p{margin:6px 0 2px}.how ol{margin:4px 0 2px;padding-left:20px}.how li{margin:2px 0}
#pal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:60;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.pal-box{background:var(--card);color:var(--tx);border-radius:10px;padding:12px;width:min(560px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.pal-box input{width:100%;font-size:16px;padding:10px;box-sizing:border-box}.pal-list{max-height:50vh;overflow:auto;margin:8px 0}
.pal-i{display:block;width:100%;text-align:left;margin:2px 0}.pal-sku{padding:6px 4px;border-top:1px solid var(--bd)}
.now-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.now-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;text-align:left}
#pal-btn{font-size:13px}
#lang{width:auto!important;flex:none}#msg .next{margin-left:8px;padding:3px 10px}
.codes{background:var(--bg);border:1px solid var(--bd);padding:10px;border-radius:6px;font-size:15px;line-height:1.6;user-select:all}
.ldet{display:block;max-width:60ch;white-space:normal}

/* ---- удобство: свёрнутые карточки, верхняя панель на телефоне ---- */
details.fold{margin:8px 0;border:1px solid var(--bd);border-radius:8px;background:var(--card)}
details.fold>summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}
details.fold>summary::before{content:"▸ ";color:var(--mut)}details.fold[open]>summary::before{content:"▾ "}
details.fold>.card{margin:0;border:0;border-top:1px solid var(--bd);border-radius:0 0 8px 8px}
header.topbar a[href="/tsd"]{padding:4px 10px;border:1px solid var(--bd);border-radius:6px;text-decoration:none;font-weight:600}
@media(max-width:820px){
  header.topbar{gap:6px;padding:0 8px}header.topbar select{max-width:84px;padding:4px}
  #who{display:none}header.topbar button{padding:6px 8px;white-space:nowrap}
  .now-g{grid-template-columns:1fr 1fr}.now-b{padding:10px}
}
.grp .gt{display:inline-flex;align-items:center;gap:10px}.grp .gi{display:inline-flex;color:var(--mut)}
.grp.cur .gi,.grp[aria-expanded="true"] .gi{color:var(--ac)}
#nav .home .gt{display:inline-flex;align-items:center;gap:10px}#nav .home .gi{display:inline-flex}
@media(max-width:480px){
  header.topbar{gap:4px;padding:0 6px}header.topbar b{font-size:15px}
  header.topbar select{max-width:66px;font-size:13px}
  header.topbar button,header.topbar a[href="/tsd"]{font-size:13px;padding:5px 7px}
  #menu{padding:4px 8px}
}
.dims{display:flex;gap:4px;flex-wrap:nowrap}.dims input{min-width:0;flex:none}
/* крупнее цели нажатия на телефоне и сенсорных экранах */
@media(max-width:820px),(pointer:coarse){
  .tw button,.tw select,.tw input:not([type=checkbox]),.row button{min-height:36px}
  .tw button{padding:6px 12px}
}

#theme{min-width:36px;padding:7px 10px}
.dcap{align-self:center;padding:0 2px}