:root { --bg:#111827; --card:#1f2937; --fg:#f3f4f6; --mut:#9ca3af; --acc:#2563eb; --bad:#f87171; --ok:#34d399; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:18px/1.35 system-ui,sans-serif; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
h1,h2 { margin:.6em 0 .4em; }
#login { max-width:360px; margin:15vh auto; padding:0 16px; text-align:center; }
#app { max-width:560px; margin:0 auto; padding:0 12px 40px; }
header { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 0; }
form { display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; gap:4px; color:#cbd5e1; font-size:16px; font-weight:600; }
input, textarea { font:inherit; font-size:20px; padding:14px; border-radius:10px; border:2px solid #374151; background:var(--card); color:var(--fg); width:100%; }
input:focus, textarea:focus { outline:none; border-color:var(--acc); }
.btn { font:inherit; padding:16px; border:0; border-radius:12px; background:#374151; color:var(--fg); width:100%; cursor:pointer; }
.btn.primary { background:var(--acc); font-weight:600; }
.btn.big { padding:20px; font-size:22px; background:#16a34a; }
.btn.small { width:auto; padding:10px 14px; font-size:16px; min-height:44px; }
.btn:disabled { opacity:.5; cursor:wait; }
.btn:hover:not(:disabled) { filter:brightness(1.15); }
.check { flex-direction:row; align-items:center; gap:12px; font-size:20px; color:var(--fg); }
.check input { width:28px; height:28px; }
.photos { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ph { position:relative; height:140px; background:var(--card); border:2px dashed #4b5563; border-radius:12px; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.ph input { position:absolute; inset:0; opacity:0; width:100%; height:100%; padding:0; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.ph.has img { display:block; }
.catalog { display:flex; gap:12px; background:var(--card); border-radius:12px; padding:10px; font-size:16px; }
.catalog img { width:96px; height:96px; object-fit:contain; background:#fff; border-radius:8px; flex:none; }
.catalog .none { color:var(--mut); }
.err { color:var(--bad); margin:0; min-height:1.2em; }
#recent { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
#recent li { display:flex; gap:10px; background:var(--card); border-radius:12px; padding:8px; align-items:center; font-size:17px; }
#recent img { width:56px; height:56px; object-fit:cover; border-radius:8px; background:#000; flex:none; }
#recent .dmg { color:var(--bad); font-weight:700; }
#recent small { color:var(--mut); }
#toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ok); color:#064e3b; padding:14px 24px; border-radius:30px; font-weight:700; z-index:10; }
#toast.bad { background:var(--bad); color:#450a0a; }
a.btn { display:inline-block; text-decoration:none; text-align:center; }
.check.small { font-size:16px; }
.check.small input { width:24px; height:24px; }
.hint { margin:0; color:var(--mut); font-size:16px; }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.tabs button { font:inherit; padding:14px 6px; border:0; border-radius:10px; background:var(--card); color:#cbd5e1; cursor:pointer; position:relative; }
.tabs kbd { display:none; }
.tabs .cnt { background:#f59e0b; color:#111; border-radius:12px; padding:0 8px; margin-left:6px; font-size:15px; font-weight:700; }
.tabs button.on { background:var(--acc); color:#fff; font-weight:600; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.row .btn { flex:1; }
.row input { flex:1; }
select { font:inherit; padding:10px; border-radius:10px; background:var(--card); color:var(--fg); border:2px solid #374151; }
.file { position:relative; overflow:hidden; }
.file input { position:absolute; inset:0; opacity:0; }
.pill { background:#b45309; color:#fff; border-radius:20px; padding:4px 12px; font-size:16px; font-weight:700; }
.seg { display:flex; gap:8px; align-items:center; margin-top:8px; font-size:15px; color:var(--mut); flex-wrap:wrap; }
.seg button { font:inherit; padding:10px 14px; border-radius:10px; border:2px solid #374151; background:var(--card); color:var(--fg); }
.seg button.on[data-m=ok] { background:#166534; border-color:#16a34a; }
.seg button.on[data-m=mismatch] { background:#7f1d1d; border-color:var(--bad); }
.catalog .color { font-size:20px; font-weight:700; color:#fbbf24; }
.list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.list li { display:flex; gap:10px; background:var(--card); border-radius:12px; padding:10px; align-items:center; font-size:17px; flex-wrap:wrap; }
.list li > div { flex:1; min-width:180px; }
.list img { width:56px; height:56px; object-fit:cover; border-radius:8px; background:#000; flex:none; }
.list small { color:var(--mut); }
.list .dmg, .bad { color:var(--bad); font-weight:700; }
.list .ok { color:var(--ok); font-weight:700; }
.list li.undone { opacity:.45; text-decoration:line-through; }
.stop { background:var(--card); border-radius:14px; padding:14px; font-size:18px; border:3px solid var(--acc); }
.stop .bin { font-size:44px; font-weight:800; letter-spacing:2px; }
.stop .bin.got { color:var(--ok); }
.stop .meta { color:var(--mut); font-size:16px; }
.stop.empty { border-color:#374151; color:var(--mut); }

/* ---------- удобство в браузере ---------- */
:focus-visible { outline:3px solid #fbbf24; outline-offset:2px; }
.list small, #recent small { font-size:15px; }
.list .btn.small { font-size:15px; }
/* полоса последнего скана: видно издалека, что пришло со сканера */
#scanbar { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:10px; padding:8px 12px; font-size:16px; color:var(--mut); border:2px solid transparent; min-height:48px; }
#scanbar b { font-size:22px; letter-spacing:1px; color:var(--fg); font-variant-numeric:tabular-nums; word-break:break-all; }
#scanbar.ok { border-color:var(--ok); } #scanbar.ok b { color:var(--ok); }
#scanbar.bad { border-color:var(--bad); } #scanbar.bad b { color:var(--bad); }
#scanbar .msg { margin-left:auto; text-align:right; }
#net { background:#7f1d1d; }
/* вспышка рамки экрана при скане */
#flash { position:fixed; inset:0; pointer-events:none; z-index:50; border:0 solid transparent; transition:border-width .15s; }
#flash.ok { border:14px solid rgba(52,211,153,.85); }
#flash.bad { border:22px solid rgba(248,113,113,.95); }
#toast { font-size:20px; max-width:92vw; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.5); cursor:pointer; }
#toast.bad { font-size:22px; }
.loading { color:var(--mut); font-style:italic; }
.keys { color:var(--mut); font-size:15px; margin:10px 0 0; }
.keys kbd, .tabs kbd { font:inherit; font-size:13px; background:#374151; color:#e5e7eb; border-radius:5px; padding:1px 6px; }
.stop .upc { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.stop .title { font-size:22px; }
.stop .next { font-size:20px; font-weight:700; color:#fbbf24; margin-top:6px; }

/* Десктоп Chrome: шире экран, две колонки, крупнее главное */
@media (min-width: 1000px) {
  body { font-size:19px; }
  #app { max-width:1280px; padding:0 24px 40px; }
  #app > .sticky { position:sticky; top:0; z-index:5; background:var(--bg); padding-bottom:8px; } /* на телефоне не липнет: экономит высоту */
  .tabs kbd { display:inline; margin-left:8px; }
  .cols { display:grid; grid-template-columns:minmax(420px,560px) 1fr; gap:28px; align-items:start; }
  .cols > .side { position:sticky; top:150px; max-height:calc(100vh - 170px); overflow:auto; padding-right:4px; }
  .cols > .side > h2:first-child { margin-top:0; }
  .stop .bin { font-size:84px; }
  .stop { padding:22px; }
}
@media (max-width: 999px) { .keys { display:none; } }

/* ---------- телефон и камера ---------- */
button#scanbar { width:100%; font:inherit; text-align:left; cursor:pointer; }
button#scanbar::after { content:'История'; margin-left:auto; padding-left:8px; font-size:13px; color:var(--mut); flex:none; }
button#scanbar .msg { margin-left:0; }
.menu-btn { display:none; }
.field { display:flex; gap:8px; align-items:stretch; }
.field input { flex:1; min-width:0; }
.cam-btn { flex:none; width:58px; min-height:56px; border:0; border-radius:10px; background:#374151; color:var(--fg); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.cam-btn:active, .step:active, .btn:active { filter:brightness(1.3); }
.stepper { display:grid; grid-template-columns:58px 1fr 58px; gap:6px; }
.stepper input { text-align:center; min-width:0; }
.step { font:inherit; font-size:28px; font-weight:700; border:0; border-radius:10px; background:#374151; color:var(--fg); cursor:pointer; min-height:56px; }
.pair { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
select { min-height:48px; max-width:100%; }
.seg button { min-height:44px; }
details.opts { background:var(--card); border-radius:12px; padding:0 12px; }
details.opts > summary { min-height:48px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; cursor:pointer; font-size:16px; font-weight:600; color:#cbd5e1; list-style:none; }
details.opts > summary::-webkit-details-marker { display:none; }
details.opts > summary::after { content:'▾'; margin-left:auto; color:var(--mut); }
details.opts[open] > summary::after { content:'▴'; }
details.opts[open] { padding-bottom:12px; }
details.opts > :not(summary) { margin-top:10px; }
.tag { background:#1d4ed8; color:#fff; border-radius:20px; padding:2px 10px; font-size:14px; font-weight:700; }
.tag.off { background:#374151; color:var(--mut); font-weight:600; }
.cam-nav { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:#16a34a !important; color:#fff !important; font-weight:700; }
.cam-nav span { font-size:14px; }
.list li.bad-row { border-left:4px solid var(--bad); }

/* окно камеры */
body.cam-open, body.dlg-open { overflow:hidden; }
.cam-sheet { position:fixed; inset:0; z-index:40; background:#000; display:flex; flex-direction:column; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.cam-top { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.cam-title { font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cam-sp { flex:1; }
.cam-ic { font:inherit; font-size:15px; min-height:44px; padding:0 12px; border:0; border-radius:10px; background:#374151; color:#fff; cursor:pointer; flex:none; }
.cam-ic.on { background:#f59e0b; color:#111; font-weight:700; }
.cam-ic.close { background:#4b5563; }
.cam-view { position:relative; flex:1; min-height:0; overflow:hidden; background:#000; }
.cam-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#camLib video { width:100% !important; height:100% !important; object-fit:cover; }
.cam-frame { position:absolute; left:7.5%; right:7.5%; top:30%; height:40%; border:3px solid rgba(255,255,255,.85); border-radius:16px; box-shadow:0 0 0 100vmax rgba(0,0,0,.35); pointer-events:none; }
#camLib:not([hidden]) ~ .cam-frame { display:none; } /* у запасной библиотеки своя рамка */
.cam-status { padding:10px 14px; font-size:19px; font-weight:600; min-height:52px; background:#111827; color:#e5e7eb; word-break:break-word; }
.cam-status.ok { background:#065f46; color:#ecfdf5; }
.cam-status.bad { background:#7f1d1d; color:#fef2f2; }
.cam-manual { flex-direction:row; gap:8px; padding:8px 10px 12px; background:#111827; }
.cam-manual input { flex:1; min-width:0; padding:10px 12px; font-size:18px; }

/* окна (вместо prompt) */
.dlg { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; }
.dlg-body { background:var(--bg); border-top:2px solid #374151; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); width:100%; max-width:560px; max-height:88vh; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.dlg-body h2 { margin:0; font-size:21px; }
.dlg-body .row { margin:4px 0 0; }
.hist li { flex-wrap:nowrap; }

@media (max-width: 999px) {
  /* нижняя панель: вкладки и большая кнопка «Скан» под большим пальцем */
  .tabs { position:fixed; left:0; right:0; bottom:0; z-index:8; margin:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:#0b1220; border-top:1px solid #374151; }
  .tabs button { min-height:58px; padding:6px 2px; font-size:16px; }
  #app { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  #toast { bottom:calc(92px + env(safe-area-inset-bottom)); }
  /* шапка: имя, статусы и «Меню»; редкие кнопки — в меню */
  header { padding:8px 0; }
  .menu-btn { display:block; margin-left:auto; order:3; }
  header > span:last-child { display:none; width:100%; order:4; }
  header.open > span:last-child { display:flex; flex-direction:column; gap:8px; }
  header.open > span:last-child > span { display:flex; flex-direction:column; gap:8px; }
  header.open .btn.small { width:100%; min-height:52px; font-size:18px; }
  /* «Сохранить» всегда под рукой, над нижней панелью */
  #save { position:sticky; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:4; box-shadow:0 -6px 18px rgba(17,24,39,.9); }
  .stop .bin { font-size:64px; line-height:1.05; }
  .pick-actions .btn { min-height:56px; padding:10px 6px; }
  .side h2 { font-size:20px; }
}
@media (min-width: 1000px) {
  .dlg { align-items:center; }
  .dlg-body { border-radius:18px; border:2px solid #374151; }
}

/* сборка / упаковка */
.modes { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.modes button { font:inherit; min-height:52px; border:2px solid #374151; border-radius:12px; background:var(--card); color:#cbd5e1; cursor:pointer; }
.modes button.on { background:#1e3a8a; border-color:var(--acc); color:#fff; font-weight:700; }
.modes .cnt { background:#16a34a; color:#fff; border-radius:12px; padding:0 8px; margin-left:6px; font-size:15px; font-weight:700; }
.stop.pack .bin { font-size:40px; }
.stop.pack.done { border-color:var(--ok); }
.stop.pack.empty .title { font-size:24px; font-weight:700; color:var(--fg); }
.pack-lines { list-style:none; padding:0; margin:10px 0; display:flex; flex-direction:column; gap:8px; }
.pack-lines li { display:flex; gap:12px; align-items:center; background:#111827; border-radius:10px; padding:10px; cursor:pointer; border:2px solid transparent; }
.pack-lines li .n { font-size:28px; font-weight:800; min-width:64px; text-align:center; font-variant-numeric:tabular-nums; }
.pack-lines li.ok-line { border-color:var(--ok); }
.pack-lines li.ok-line .n { color:var(--ok); }
.pack-lines small { color:var(--mut); }
.pack-actions .btn { min-height:56px; }

.req { color: #e5484d; }
.pk-img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }