@font-face {
  font-family: "VI Sans";
  src: url("assets/fonts/VI_Sans_Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "VI Sans";
  src: url("assets/fonts/VI_Sans_Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "VI Sans";
  src: url("assets/fonts/VI_Sans_DemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "VI Sans";
  src: url("assets/fonts/VI_Sans_ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  /* «only» — чтобы браузер не пытался подмешать светлый режим системы. */
  color-scheme: dark only;
  --bg: #080d14;
  --panel: rgba(18, 26, 37, 0.92);
  --panel-soft: rgba(22, 32, 45, 0.74);
  --line: #263345;
  --line-strong: #35465c;
  --text: #f2f6fb;
  --muted: #8f9cad;
  --green: #27c46b;
  --green-deep: #158044;
  --blue: #4d8df7;
  --blue-deep: #275fc4;
  --amber: #f5ad32;
  --red: #f05d72;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  --ui: "VI Sans", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

/* Светлая тема. Просьба со встречи-штурма 21.09: «чтобы глаза не болели в конце
   дня». Переопределяем переменные, а не пишем второй набор стилей — тогда любая
   новая вёрстка на переменных получает светлый режим бесплатно. */
body.is-svetlo {
  color-scheme: light only;
  --bg: #eef1f6;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.8);
  --line: #d3dae5;
  --line-strong: #b6c1d1;
  --text: #121a25;
  --muted: #5d6b7e;
  --green-deep: #0f6b39;
  --blue-deep: #1f4fa8;
  --shadow: 0 18px 50px rgba(18, 26, 37, 0.14);
  background:
    radial-gradient(1000px 620px at 3% -8%, rgba(39, 196, 107, 0.10), transparent 59%),
    radial-gradient(850px 560px at 100% 2%, rgba(77, 141, 247, 0.08), transparent 58%),
    var(--bg);
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; }

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--ui);
  background:
    radial-gradient(1000px 620px at 3% -8%, rgba(39, 196, 107, 0.17), transparent 59%),
    radial-gradient(850px 560px at 100% 2%, rgba(77, 141, 247, 0.11), transparent 58%),
    var(--bg);
}

body[data-mode="presort"] {
  background:
    radial-gradient(1000px 620px at 3% -8%, rgba(77, 141, 247, 0.19), transparent 59%),
    radial-gradient(850px 560px at 100% 2%, rgba(154, 92, 246, 0.11), transparent 58%),
    var(--bg);
}

button, input { font: inherit; }
select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
:where(a, button, select, textarea):focus-visible { outline: 2px solid #9bcaff; outline-offset: 3px; }
button { border: 0; }

.shell {
  /* Одна полноширинная сетка для всех рабочих разделов. */
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 30px var(--site-gutter, clamp(16px, 2.2vw, 44px)) 72px;
}

.topbar {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 38px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand__mark {
  display: block;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.privacy {
  color: var(--muted);
  font-size: 12px;
}

.topActions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboardLink {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.dashboardLink:hover {
  border-color: var(--line-strong);
  background: var(--panel);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 26px;
}

.eyebrow,
.overline {
  margin: 0;
  color: #72e6a2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-mode="presort"] .eyebrow { color: #8db9ff; }
.overline { color: var(--muted); }

h1 {
  margin: 5px 0 0;
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.lead {
  max-width: 650px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 13, 20, 0.72);
}

.pickerTabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 13, 20, 0.72);
}
.pickerTabs__lens {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--picker-lens-width, 0px);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 11px;
  background: var(--green);
  box-shadow: 0 8px 24px rgba(39,196,107,.22);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--picker-lens-x, 5px));
}
.pickerTabs.is-ready .pickerTabs__lens {
  opacity: 1;
  transition: transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1), background .3s ease, box-shadow .3s ease;
}
body[data-mode="presort"] .pickerTabs__lens { background: var(--blue); box-shadow: 0 8px 24px rgba(77,141,247,.22); }
body[data-mode="pallets"] .pickerTabs__lens { background: var(--amber); box-shadow: 0 8px 24px rgba(245,173,50,.22); }

.pickerTabGroup {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.pickerTabGroup--bulk { padding-left: 8px; border-left: 1px solid var(--line); }
.pickerTabGroup__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.pickerTabs .tab { position: relative; z-index: 1; min-width: 0; padding-inline: 14px; }
body .pickerTabs .tab[aria-selected="true"] { background: transparent; box-shadow: none; }

.tab {
  min-width: 128px;
  padding: 12px 18px;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s, background 0.16s, box-shadow 0.16s;
}

.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: #fff;
  background: var(--green);
  
}

.tab[data-mode="presort"][aria-selected="true"] {
  background: var(--blue);
  
}

.tab:disabled { opacity: 0.45; cursor: wait; }

.layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.55fr);
  gap: 18px;
  /* Карточки тянутся до общей высоты: разная длина колонок выглядела обрубком. */
  align-items: stretch;
}
.databaseCard { grid-column: 1; grid-row: 1; }
.searchCard { grid-column: 2; grid-row: 1; }
.layout.is-entering { animation: pickerPanelIn .42s cubic-bezier(.22,1,.36,1); }
@keyframes pickerPanelIn { from { opacity: 0; transform: translateY(12px) scale(.99); } }

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(16, 24, 34, 0.95);
  
}

/* Медленный перелив по краю карточки — только подсветка, содержимое не трогает. */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    115deg,
    rgba(0, 200, 83, 0) 18%,
    rgba(0, 200, 83, 0.55) 34%,
    rgba(120, 220, 255, 0.35) 46%,
    rgba(0, 200, 83, 0) 62%
  );
  background-size: 280% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
  animation: cardSheen 9s linear infinite;
}

.searchCard::before { animation-delay: -4.5s; }

@keyframes cardSheen {
  from { background-position: 140% 0; }
  to { background-position: -140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card::before { animation: none; opacity: 0.35; }
  body::before {
    background-image:
      radial-gradient(circle at 24% 28%, rgba(255,91,168,.16), transparent 38%),
      radial-gradient(circle at 76% 40%, rgba(53,111,255,.2), transparent 44%) !important;
  }
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

body::before {
  display: none;
}

body::after {
  inset: -5%;
  background: linear-gradient(180deg, rgba(3,7,17,.08), rgba(3,7,17,.2) 68%, rgba(3,7,17,.68));
  opacity: .58;
}
/* Mobile navigation: the old horizontal strip hid half the destinations.
   The menu is a compact glass control and opens a complete two-column map. */
.navMenuButton { display: none; }
@media (max-width: 640px) {
  body.nav-enhanced .topbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .navMenuButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    color: var(--text);
    background: rgba(16,24,34,.88);
    
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    font-weight: 600;
  }
  .navMenuButton > span { display: grid; gap: 4px; width: 16px; }
  .navMenuButton i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease; }
  .navMenuButton[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
  .navMenuButton[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); }
  body.nav-enhanced .siteNav:not(.is-open) { display: none; }
  .siteNav.is-open {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    width: 100%;
    overflow: visible;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: rgba(15,23,33,.92);
    
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
  }
  .siteNav.is-open .navGroup {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
    width: 100%;
    padding: 5px;
    border: 0;
    background: rgba(255,255,255,.025);
  }
  .siteNav.is-open .navGroup__label { display: block; grid-column: 1 / -1; padding: 4px 7px 1px; }
  .siteNav.is-open .navLink { justify-content: center; min-width: 0; padding-inline: 8px; white-space: normal; text-align: center; }
  .siteNav.is-open .navAdmin { grid-column: 1 / -1; justify-content: center; }
}

.databaseCard {
  padding: 21px;
  /* Примечание прижато вниз, чтобы растянутая карточка не зияла пустотой. */
  display: flex;
  flex-direction: column;
}

.databaseCard .databaseNote { margin-top: auto; }
.searchCard { min-width: 0; padding: 24px; }

.cardHeading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.cardHeading h2 {
  margin: 5px 0 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.modePill,
.readyPill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(39, 196, 107, 0.25);
  border-radius: 999px;
  color: #9af2ba;
  background: rgba(39, 196, 107, 0.1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-mode="presort"] .modePill {
  color: #b2d0ff;
  border-color: rgba(77, 141, 247, 0.27);
  background: rgba(77, 141, 247, 0.12);
}

.readyPill { color: var(--muted); border-color: var(--line); background: var(--panel-soft); }
.readyPill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
body[data-mode="presort"] .readyPill i { background: var(--blue); }

.connection {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.connection.ready {
  border-color: rgba(39, 196, 107, 0.42);
  background: rgba(39, 196, 107, 0.07);
}

body[data-mode="presort"] .connection.ready {
  border-color: rgba(77, 141, 247, 0.42);
  background: rgba(77, 141, 247, 0.08);
}

.connection.error { border-color: rgba(240, 93, 114, 0.4); background: rgba(240, 93, 114, 0.07); }

.connection__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(8, 13, 20, 0.55);
  font-size: 20px;
  font-weight: 600;
}

.connection.loading .connection__icon { animation: spin 1s linear infinite; }
.connection.ready .connection__icon { color: var(--green); }
body[data-mode="presort"] .connection.ready .connection__icon { color: var(--blue); }
.connection.error .connection__icon { color: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }

.connection strong { display: block; font-size: 16px; }
.connection p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.progress {
  height: 5px;
  margin: 11px 2px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width 0.2s ease;
}
body[data-mode="presort"] .progress i { background: var(--blue); }

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 15px 0 0;
}

.stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
}

.stats dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Цифры набираем тем же VI Sans, а не «Cascadia Mono»: у моноширинного другой
   рисунок, и «6 122 122» выбивалось из страницы чужим шрифтом.
   tabular-nums при этом включать НЕЛЬЗЯ: у VI Sans на нём цифры расползаются
   и «2,38» превращается в «2 , 38». Только пропорциональные. */
.stats dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  font-feature-settings: "tnum" 0, "pnum" 1;
  letter-spacing: 0.01em;
}

.databaseNote,
.nameNote,
.scannerNote {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.retry {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  color: #fff;
  background: var(--red);
  font-weight: 600;
  cursor: pointer;
}
.retry[hidden] { display: none; }

.fieldLabel {
  display: block;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nameLabel { margin-top: 18px; }

.searchRow { display: flex; gap: 10px; }
.searchRow input {
  width: 100%;
  min-width: 0;
  height: 57px;
  padding: 0 17px;
  border: 2px solid var(--line);
  border-radius: 14px;
  outline: none;
  color: var(--text);
  background: rgba(7, 12, 18, 0.72);
  transition: border-color 0.16s, box-shadow 0.16s;
}

#scan { font-family: var(--mono); font-size: 25px; letter-spacing: 0.06em; }
#nameSearch { font-size: 18px; }
.searchRow input::placeholder { color: #667487; font-family: var(--ui); letter-spacing: 0; }
.searchRow input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(39, 196, 107, 0.13); }
body[data-mode="presort"] .searchRow input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(77, 141, 247, 0.14); }
.searchRow input:disabled { opacity: 0.5; }

.action {
  flex: none;
  min-width: 92px;
  padding: 0 18px;
  border-radius: 13px;
  color: #fff;
  background: var(--green);
  font-weight: 600;
  cursor: pointer;
}

body[data-mode="presort"] .action { background: var(--blue); }
.action--secondary { color: var(--text); background: #2a384a; }
body[data-mode="presort"] .action--secondary { background: #2a384a; }
.action:disabled { opacity: 0.38; cursor: wait; }

.message {
  min-height: 22px;
  margin: 16px 2px 0;
  color: var(--muted);
  font-size: 14px;
}
.message.ok { color: var(--green); }
body[data-mode="presort"] .message.ok { color: #8db9ff; }
.message.warn { color: var(--amber); }
.message.error { color: var(--red); }

.answer {
  display: none;
  align-items: center;
  gap: 21px;
  margin-top: 17px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.025);
}

.primary {
  flex: none;
  min-width: 174px;
  padding: 20px;
  border-radius: 18px;
  color: #fff;
  background: #2fc97c;
  
}

.primary.category { text-align: center; background: #5b95f2; }
.primary.none { background: #d9506a; }
.primary span { display: block; opacity: 0.82; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.primary strong { display: block; margin-top: 6px; font-size: 34px; line-height: 1.05; white-space: nowrap; }
.primary.category strong { font-size: 56px; }

.answer__info { min-width: 0; }
.answer__label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.answer h3 { margin: 0; font-size: 21px; line-height: 1.4; word-break: break-word; }
.nameRow { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 11px; }
.nameRow h3 { flex: 1 1 auto; min-width: 0; }

/* Название переносят в акт руками, поэтому кнопка копирования стоит вплотную к
 * нему и прижата к первой строке — длинное название не утаскивает её вниз. */
.copyBtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-soft); color: var(--text); font-family: var(--ui); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.copyBtn:hover { border-color: var(--blue); background: rgba(77, 141, 247, 0.14); }
.copyBtn__icon { position: relative; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .85; }
.copyBtn__icon::before { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; border-left: 0; border-bottom: 0; }
.copyBtn.is-done { border-color: rgba(39, 196, 107, 0.65); background: rgba(39, 196, 107, 0.15); color: #a8f0c6; }
.copyBtn.is-failed { border-color: rgba(240, 93, 114, 0.6); background: rgba(240, 93, 114, 0.13); color: #ffc0ca; }
.copyBtn[hidden] { display: none; }
.secondary { display: inline-block; padding: 7px 12px; border: 1px solid rgba(77, 141, 247, 0.34); border-radius: 9px; background: rgba(77, 141, 247, 0.1); font-size: 15px; font-weight: 600; }
.secondary.check { color: #ffc0ca; border-color: rgba(240, 93, 114, 0.4); background: rgba(240, 93, 114, 0.11); }
.code { margin: 11px 0 0; color: var(--muted); font-family: var(--mono); font-size: 13px; word-break: break-all; }
.siteLink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 1px solid rgba(46, 178, 106, 0.42); border-radius: 9px; background: rgba(46, 178, 106, 0.12); color: #a8f0c6; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.siteLink::after { content: "↗"; font-size: 11px; opacity: .75; }
.siteLink:hover { border-color: rgba(46, 178, 106, 0.7); background: rgba(46, 178, 106, 0.2); color: #d6ffe7; }
.siteLink[hidden] { display: none; }

.results,
.details {
  display: none;
  max-height: 420px;
  margin-top: 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
}

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: #141e2a; font-size: 10px; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.results tr.hit { cursor: pointer; }
.results tr.hit:hover { background: rgba(39, 196, 107, 0.07); }
body[data-mode="presort"] .results tr.hit:hover { background: rgba(77, 141, 247, 0.08); }
.details th { position: static; width: 160px; }
.details td { word-break: break-word; }

kbd {
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10px;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .tabs { width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .pickerTabGroup__buttons { width: 100%; }
  .tab { min-width: 108px; }
  .layout { grid-template-columns: 1fr; }
  .databaseCard { grid-column: 1; grid-row: 2; }
  .searchCard { grid-column: 1; grid-row: 1; }
  .databaseNote { display: none; }
}

@media (max-width: 600px) {
  .shell { padding: 24px 14px 48px; }
  .topbar { margin-bottom: 28px; }
  .privacy { display: none; }
  .hero { gap: 20px; margin-bottom: 18px; }
  h1 { font-size: 48px; }
  .lead { font-size: 14px; }
  .card { border-radius: 18px; }
  .searchCard, .databaseCard { padding: 17px; }
  .searchHeading { margin-bottom: 16px; }
  .searchRow input { height: 54px; }
  #scan { font-size: 18px; }
  .action { min-width: 78px; padding: 0 13px; }
  .answer { align-items: stretch; flex-direction: column; }
  .primary { min-width: 0; }
  .primary.category { text-align: left; }
  .nameNote { margin-top: 10px; }
  .pickerTabs { gap: 6px; padding: 5px; }
  .pickerTabGroup--bulk { padding-left: 6px; }
  .pickerTabs .tab { padding-inline: 7px; font-size: 13px; }
  body[data-mode="costlist"] .lead,
  body[data-mode="pallets"] .lead { min-height: 4.95em; }
}

/* Светлой темы здесь больше нет. Она включалась сама, по настройке Windows, и
   у половины склада сайт открывался белым — причём перекрашено было не всё:
   шапка, вкладки и градиенты оставались тёмными, получалась каша. Остальные
   страницы (хитмап, антигенерация) светлого режима не знали вовсе, так что
   разделы выглядели по-разному. Держим один вид для всех. */

/* ---- Раздел «Паллеты» ---------------------------------------------------- */
/* Карточки товара и паллет занимают одно место: показываем ту, что выбрана. */
.palletsCard { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
body[data-mode="pallets"] .searchCard:not(.palletsCard) { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-mode="pallets"] .palletsCard { visibility: visible; opacity: 1; pointer-events: auto; }
body[data-mode="pallets"] .databaseCard { display: none; }
body[data-mode="pallets"] .layout { grid-template-columns: minmax(0, 1fr); }
body[data-mode="pallets"] .searchCard { grid-column: 1; grid-row: 1; }

body[data-mode="pallets"] {
  background:
    radial-gradient(1000px 620px at 3% -8%, rgba(245, 173, 50, 0.14), transparent 59%),
    radial-gradient(850px 560px at 100% 2%, rgba(77, 141, 247, 0.10), transparent 58%),
    var(--bg);
}

body[data-mode="pallets"] .eyebrow { color: #f7c877; }
.tab[data-mode="pallets"][aria-selected="true"] {
  background: var(--amber);
  box-shadow: 0 8px 24px rgba(245, 173, 50, 0.22);
}
body[data-mode="pallets"] .modePill {
  color: #f7d9a8;
  border-color: rgba(245, 173, 50, 0.28);
  background: rgba(245, 173, 50, 0.12);
}
body[data-mode="pallets"] .readyPill i { background: var(--amber); }

/* ---- Раздел «Себес списком» --------------------------------------------- */
.costListCard { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
body[data-mode="costlist"] .searchCard:not(.costListCard) { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-mode="costlist"] .costListCard { visibility: visible; opacity: 1; pointer-events: auto; }
body[data-mode="costlist"] .databaseCard { display: none; }
body[data-mode="costlist"] .layout { grid-template-columns: minmax(0, 1fr); }
body[data-mode="costlist"] .searchCard { grid-column: 1; grid-row: 1; }
body[data-mode="costlist"] {
  background:
    radial-gradient(1000px 620px at 3% -8%, rgba(39, 196, 107, 0.13), transparent 59%),
    radial-gradient(850px 560px at 100% 2%, rgba(77, 141, 247, 0.10), transparent 58%),
    var(--bg);
}
body[data-mode="costlist"] .eyebrow { color: #74dea2; }
body[data-mode="costlist"] .lead,
body[data-mode="pallets"] .lead { min-height: 3.3em; }
.tab[data-mode="costlist"][aria-selected="true"] {
  background: var(--green);
  box-shadow: 0 8px 24px rgba(39, 196, 107, 0.22);
}

.costListIntro { margin: 0 0 17px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.costListUpload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.costListUpload span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.costListFileButton { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#costListInput {
  width: 100%; min-height: 160px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 13px;
  color: var(--text); background: rgba(8, 13, 20, 0.6);
  font-family: var(--ui); font-size: 14px; line-height: 1.5; resize: vertical;
}
#costListInput:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(39, 196, 107, 0.12); }
#costListInput::placeholder { color: var(--muted); }
.searchRow--costList { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.costListProgress { height: 5px; margin: 12px 0 0; overflow: hidden; border-radius: 999px; background: var(--line); }
.costListProgress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width 160ms ease; }
.costListTotals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.costListTotals div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.costListTotals span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.costListTotals strong { color: var(--text); font-size: 20px; }
.costListResults { display: none; max-height: 580px; }
.costListMore { margin-top: 12px; }
.costListResults td { max-width: 320px; }
.costListResults td:nth-child(2), .costListResults td:nth-child(3) { min-width: 220px; }
.costListResults tr.is-missing td { background: rgba(240, 93, 114, 0.07); }
.costListResults tr.is-warning td { background: rgba(245, 173, 50, 0.07); }
/* Гуид карточки — тридцать шесть знаков. Моноширинный и мельче остального,
   иначе одна колонка забирает половину ширины таблицы. */
.costListResults td.guidCell { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.costListStatus--ok { color: #74dea2; }
.costListStatus--missing { color: #ff8da0; }
.costListStatus--warning { color: #f7c877; }

@media (max-width: 700px) {
  .costListTotals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .costListResults { max-height: 70vh; }
  #costListInput { font-size: 16px; }
}

#palletInput {
  width: 100%;
  min-height: 118px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: rgba(8, 13, 20, 0.6);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

#palletInput:focus { outline: none; border-color: var(--line-strong); }
#palletInput::placeholder { color: var(--muted); font-family: var(--ui); }

.searchRow--pallets { margin-top: 12px; display: flex; gap: 10px; }

.palletMissing {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.palletMissing[hidden] { display: none; }
.palletMissing span { font-family: var(--mono); color: var(--muted); }
.palletMissingHint { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

/* Паллета не в зоне уценки — то, ради чего список и вставляют. */
.hit--warn td { background: rgba(245, 173, 50, 0.08); }
.hit--warn td:nth-child(3) { color: var(--amber); font-weight: 600; }

.results td.num, .results th.num { text-align: right; font-feature-settings: "tnum" 0, "pnum" 1; }

/* ---- Общая навигация ------------------------------------------------------
   Два верхних раздела: «Уценка» — это отчётность (антигенерация и хитмап),
   «Инструменты» — то, чем пользуются на складе. Раньше ссылки висели вперемешку
   и было не понять, что к чему относится. */

.siteNav {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.navGroup {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(8, 13, 20, 0.6);
}

.navGroup__label {
  margin-right: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.navLink {
  padding: 9px 15px;
  border-radius: 11px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}

.navLink:hover { background: rgba(255, 255, 255, 0.08); }

/* Текущий раздел не ссылка, а метка места: куда пришёл — видно сразу. */
.navLink[aria-current="page"] {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* Админка стоит особняком: это не раздел сайта, а вход в служебную панель,
   и попадать в неё надо с любой страницы, а не только из антигенерации. */
.navAdmin {
  padding: 9px 15px;
  border: 1px solid rgba(240, 93, 114, 0.42);
  border-radius: 13px;
  color: #ffc0ca;
  background: rgba(240, 93, 114, 0.1);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease;
}

.navAdmin:hover { border-color: rgba(240, 93, 114, 0.75); background: rgba(240, 93, 114, 0.2); }

@media (max-width: 900px) {
  .siteNav { gap: 8px; }
  .navGroup { padding-left: 11px; }
  .navGroup__label { display: none; }
  .navLink, .navAdmin { padding: 8px 12px; font-size: 14px; }
}

/* Телефон. Без этого шапка ломалась на две строки, группы висели по краям
   разной ширины, а логотип оставался сбоку от них — вид разъезжался.
   Здесь: логотип на своей строке, ссылки одной ровной лентой под ним. */
@media (max-width: 640px) {
  .topbar { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
  .siteNav {
    gap: 6px;
    /* Лента прокручивается вбок: разделов станет больше, а переносить их
       на вторую строку — снова получить кривую шапку. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .siteNav::-webkit-scrollbar { display: none; }
  .navGroup { flex: 0 0 auto; padding: 4px; border-radius: 13px; }
  .navLink, .navAdmin { padding: 8px 13px; font-size: 14.5px; }
  .navAdmin { flex: 0 0 auto; }
}

/* ---- Отдача на нажатие (общая для всего сайта) ----------------------------- */
/* Keep intrinsic text widths inside their grid tracks. */
.hero > *, .heroPerf > *, .heroSales > *, .heroStock > *, .perfTools { min-width: 0; }
.brand { flex-shrink: 0; }
.action, .retry, .tab, .navLink, .navAdmin { min-height: 44px; }
.navLink, .navAdmin { display: inline-flex; align-items: center; }
.searchRow--pallets { flex-wrap: wrap; }
.results, .details { overscroll-behavior-inline: contain; }
@media (min-width: 641px) and (max-width: 1200px) {
  .topbar { flex-wrap: wrap; }
  .siteNav { width: 100%; }
}
@media (max-width: 640px) {
  .topbar, .siteNav { width: 100%; }
  .siteNav { scrollbar-width: thin; padding-bottom: 5px; }
  .siteNav::-webkit-scrollbar { display: block; height: 3px; }
  .siteNav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
  .lead, .nameNote, .scannerNote, .connection p { font-size: 14px; line-height: 1.55; }
  .tab { padding-inline: 10px; }
  .cardHeading { gap: 8px; flex-wrap: wrap; }
  .searchRow { gap: 8px; }
  .searchRow input { padding-inline: 11px; }
  #scan, #nameSearch, #palletInput { font-size: 16px; }
  .primary strong { font-size: clamp(25px, 7vw, 34px); white-space: normal; overflow-wrap: anywhere; }
  .details th { width: 105px; }
  table { font-size: 14px; }
  th { font-size: 12px; }
}
@media (hover: none) {
  .card::before { animation: none; }
}
/* Кнопки и вкладки отзываются на само касание, а не на отпускание. Короткая
   длительность — на длинной это читается как подтормаживание. */

.action, .tab, .navLink, .navAdmin, .retry, .dashboardLink {
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1),
              background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.action:active, .retry:active, .dashboardLink:active { transform: scale(0.96); transition-duration: 60ms; }
.tab:active { transform: scale(0.97); transition-duration: 60ms; }
.navLink:active, .navAdmin:active { transform: scale(0.94); transition-duration: 60ms; }

/* Карточка найденного товара тоже слегка подаётся — сканирование идёт потоком,
   и подтверждение отклика помогает не терять место. */
.answer { transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.answer:active { transform: scale(0.995); }

/* Строки таблиц: подсветка под курсором и лёгкое нажатие. */
.results tbody tr { transition: background 120ms ease, transform 120ms ease; }
.results tbody tr:hover { background: rgba(255, 255, 255, 0.045); }
.results tbody tr:active { transform: scale(0.998); background: rgba(255, 255, 255, 0.07); }

@media (prefers-reduced-motion: reduce) {
  .action, .tab, .navLink, .navAdmin, .retry, .dashboardLink, .answer, .results tbody tr {
    transition: none;
  }
  .layout.is-entering { animation: none; }
  .pickerTabs.is-ready .pickerTabs__lens { transition: none; }
  .action:active, .tab:active, .navLink:active, .navAdmin:active,
  .retry:active, .dashboardLink:active, .answer:active, .results tbody tr:active {
    transform: none;
  }
}

/* Отбор дорогого товара — своя карточка, как у паллет. */
.dorogieCard { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
body[data-mode="dorogie"] .searchCard:not(.dorogieCard) { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-mode="dorogie"] .dorogieCard { visibility: visible; opacity: 1; pointer-events: auto; }
body[data-mode="dorogie"] .databaseCard { display: none; }
body[data-mode="dorogie"] .layout { grid-template-columns: minmax(0, 1fr); }
body[data-mode="dorogie"] .searchCard { grid-column: 1; grid-row: 1; }
.dorogieTotals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.dorogieTotals b { color: var(--text); font-weight: 700; font-size: 16px; }
.dorogieCard td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

/* «Это не КГТ» — отметка расхождения, а не действие с товаром: поэтому
   спокойная кнопка рядом со ссылкой, а не акцентная. */
.kgtBtn {
  align-self: flex-start;
  margin-top: 10px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.kgtBtn:hover { color: var(--text); border-color: var(--amber); }
.kgtBtn.is-done { color: var(--green); border-color: rgba(39, 196, 107, .5); cursor: default; }
.kgtBtn[disabled] { opacity: .6; cursor: default; }
/* Обратная отметка — «на деле это КГТ». Ошибка в эту сторону дороже: товар
   уходит в отбор на маркетплейс, который крупногабарит не берёт, и приезжает
   назад. Поэтому кнопка заметнее, чем её пара. */
.kgtBtn--kgt { color: var(--text); border-color: rgba(245, 173, 50, .45); }
.kgtBtn--kgt:hover { background: rgba(245, 173, 50, .12); }

/* Вердикт по отбору на площадки: показывается только на товаре дороже порога,
   поэтому вариант один. Текст дублирует цвет, чтобы решение читалось и без него. */
.otborMark {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.otborMark.is-авито { border-color: rgba(39, 196, 107, .55); background: rgba(39, 196, 107, .12); color: #7ee2a8; }

/* Розничная цена и габариты — справочные строки под кодом товара. Они не
   требуют решения, поэтому подаются тише кода и тем более тише отбора. */
.rrcLine, .razmery { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.rrcLine[hidden], .razmery[hidden] { display: none; }
/* Размер спорит с кластером — это уже повод посмотреть на товар, а не просто
   справка, поэтому строка перестаёт быть серой. */
.razmery--spor { color: #f0c479; font-weight: 600; }

/* Переключатель пикалки на телефоне (24.09): «Себес списком» уходит в две
   строки, правая половина становится выше, и левые кнопки оставались
   низкими, прижатыми к верху — надписи стояли на разной высоте. Кнопки
   растягиваем на всю высоту ряда, текст — по центру. */
.pickerTabGroup { display: flex; }
.pickerTabGroup__buttons { flex: 1; align-items: stretch; }
.pickerTabs .tab { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }

/* Пикалка · актировка с предсорта (akt-predsort.js, /picker/?akt).
   26.09: отдельная панель на всю ширину под карточкой товара — решения и
   дефекты одинаковыми плитками ровной сеткой, вход в ВМС плашкой в шапке. */
.aktPs { margin-top: 14px; padding: 16px 18px 18px; border-radius: 18px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .02); }
.aktPs[hidden] { display: none; }
.aktPs__shapka { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aktPs__nad { margin: 0; font-size: 16px; font-weight: 600; }
.aktPs__rezhim { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.aktPs__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
.aktPs__chip i { width: 8px; height: 8px; border-radius: 50%; background: #27c46b; }
.aktPs__chip.is-ok { border-color: rgba(39, 196, 107, .55); }
.aktPs__chip.is-net { cursor: pointer; border-color: rgba(245, 173, 50, .6); color: #f5ad32; }
.aktPs__chip.is-demo { color: var(--muted); }
.aktPs__x { appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 16px;
  line-height: 1; padding: 0 0 1px 2px; cursor: pointer; }
.aktPs__x:hover { color: var(--text); }
.aktPs__zag { margin: 16px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.aktPs__resheniya { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.aktPs__defekty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.aktPs__kn { appearance: none; min-height: 48px; width: 100%; padding: 10px 8px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.aktPs__kn:hover { border-color: var(--muted); }
.aktPs__kn.is-on { border-color: #f5ad32; background: rgba(245, 173, 50, .16); }
.aktPs__kn--def.is-on { border-color: #f05d72; background: rgba(240, 93, 114, .16); }
.aktPs__akt { appearance: none; width: 100%; margin-top: 14px; border: 0; border-radius: 14px; background: #d8263d;
  color: #fff; font: inherit; font-size: 20px; font-weight: 600; padding: 16px; cursor: pointer; }
.aktPs__akt:disabled { background: rgba(216, 38, 61, .28); color: rgba(255, 255, 255, .6); cursor: default; }
.aktPs__chto, .aktPs__net { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.aktPs__net > span { display: block; margin-top: 4px; }
.aktPs__oshibka { color: #f05d72; font-weight: 600; }
.aktPs__gotovo { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(39, 196, 107, .14);
  border: 1px solid rgba(39, 196, 107, .6); }
.aktPs__gotovo b { display: block; font-size: 22px; font-weight: 600; }
.aktPs__gotovo span { display: block; margin-top: 4px; font-size: 14px; }
.aktPs__vhod { display: grid; grid-template-columns: 1fr 1fr 140px; gap: 8px; margin-top: 12px; }
.aktPs__vhod input { font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 12px; min-width: 0;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .04); color: inherit; }
.aktPs__vhod .aktPs__chto { grid-column: 1 / -1; margin: 0; }
/* ТСД и телефон: решения 3 + 2 во всю ширину, дефекты по два — ряды ровные. */
@media (max-width: 640px) {
  .aktPs { padding: 14px; }
  .aktPs__resheniya { grid-template-columns: repeat(6, 1fr); }
  .aktPs__resheniya .aktPs__kn { grid-column: span 2; }
  .aktPs__resheniya .aktPs__kn:nth-child(n+4) { grid-column: span 3; }
  .aktPs__defekty { grid-template-columns: repeat(2, 1fr); }
  .aktPs__vhod { grid-template-columns: 1fr; }
}


/* Карточка товара (26.09, третья версия): слева только ответ и сверка с
   габаритами, справа плотная справка о товаре рядом фактов. */
.answer { flex-direction: column; align-items: stretch; gap: 0; padding: 18px; border-radius: 18px; }
.answer__setka { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.answer__otvet { display: flex; flex-direction: column; gap: 8px; }
.answer__otvet .primary { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: center; padding: 16px 18px; border-radius: 16px; text-align: center; }
.answer__otvet .primary strong { font-size: 32px; line-height: 1.1; margin-top: 6px; }
.answer__otvet .primary.category strong { font-size: 60px; line-height: 1; }
.razmerProverka { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; }
.razmerProverka[hidden] { display: none; }
.razmerProverka::before { content: "● "; }
.razmerProverka.is-ok { color: #7ee2a8; }
.razmerProverka.is-spor { color: #f0c479; }
/* «Это (не) КГТ» — редкая отметка расхождения, а не главное действие: ссылкой. */
.answer__otvet .kgtBtn { margin: 0; align-self: center; padding: 0; border: 0; background: none;
  color: var(--muted); font-size: 12.5px; text-decoration: underline dotted; text-underline-offset: 3px; }
.answer__otvet .kgtBtn:hover { color: var(--text); background: none; }
.answer__otvet .kgtBtn.kgtBtn--kgt { color: #f5ad32; }
.answer__otvet .kgtBtn.is-done { color: var(--green); text-decoration: none; }
.answer__tovar { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.answer__tovar .nameRow { margin: 0; align-items: center; }
.answer__tovar .nameRow h3 { flex: 0 1 auto; }
.answer h3 { font-size: 22px; line-height: 1.3; }
.answer__tovar .secondary { padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.answer__tovar .secondary.check { color: #ffc0ca; background: none; }
.answer__tovar .otborMark { margin: 0; align-self: stretch; }
.answer__fakty { align-self: stretch; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: start; }
.answer__fakt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.answer__fakt .rrcLine, .answer__fakt .razmery, .answer__fakt .code { margin: 0; color: var(--text); font-family: inherit;
  font-size: 15px; font-weight: 600; line-height: 1.3; word-break: normal; }
.answer__fakt .code { font-family: var(--mono); font-size: 14px; font-weight: 400; }
.answer__fakt .rrcLine span { display: block; margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.answer__fakt .razmery--spor { color: #f0c479; }
.answer__fakt:has(> p[hidden])::after { content: "—"; color: var(--muted); font-size: 15px; font-weight: 600; }
.answer__fakty .siteLink { margin: 0; min-height: 36px; box-sizing: border-box; align-self: center; }
@media (max-width: 700px) {
  .answer__setka { grid-template-columns: 1fr; gap: 14px; }
  .answer__otvet .primary { flex: none; }
  .answer__otvet .primary.category strong { font-size: 52px; }
  .answer__fakty { grid-template-columns: 1fr 1fr; }
  .answer__fakty .siteLink { grid-column: 1 / -1; justify-content: center; }
}
/* Актировка внутри карточки: не отдельный ящик, а следующий шаг под чертой. */
.answer .aktPs { margin: 18px -18px -18px; padding: 16px 18px 18px; border: 0; border-top: 1px solid var(--line);
  border-radius: 0 0 18px 18px; background: rgba(255, 255, 255, .015); }
@media (max-width: 700px) {
  .answer__setka { grid-template-columns: 1fr; gap: 14px; }
  /* ТСД: кластер слева, сверка и «Это КГТ» парой по центру справа. */
  .answer__otvet { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 6px; }
  .answer__otvet .primary { grid-row: span 2; }
  .answer__otvet .primary.category strong { font-size: 52px; }
  .answer__otvet .razmerProverka { align-self: end; }
  .answer__otvet .kgtBtn { align-self: start; justify-self: center; }
  .answer .aktPs { margin: 14px -18px -18px; padding: 14px; }
}

/* Скан камерой (kamera.js, 26.09): квадратная кнопка рядом с «Найти» и окно
   на весь экран с прицелом. */
.kameraBtn { min-width: 58px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
.kameraBtn[hidden] { display: none; }
.kamera { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 20px; background: rgba(5, 9, 15, .92); }
.kamera__ramka { position: relative; width: min(92vw, 640px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  background: #000; }
.kamera__video { width: 100%; height: 100%; object-fit: cover; }
.kamera__pritsel { position: absolute; left: 12%; right: 12%; top: 38%; bottom: 38%; border: 2px solid #5b95f2;
  border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.kamera__tekst { margin: 0; color: #dfe7f2; font-size: 15px; }
.kamera__zakryt { appearance: none; min-width: 180px; padding: 13px 20px; border-radius: 14px; border: 1px solid #35465c;
  background: #1a2433; color: #f2f6fb; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
/* Крит / косм в актировке (26.09): два равных варианта. */
.aktPs__krit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aktPs__krit .aktPs__kn.is-on { border-color: #4d8df7; background: rgba(77, 141, 247, .16); }
@media (max-width: 640px) {
  .aktPs__resheniya[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .aktPs__resheniya[style] .aktPs__kn { grid-column: auto !important; }
}
/* «Куда положили» — пик паллеты после решения (26.09). */
.aktPs__palleta { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(77, 141, 247, .6);
  background: rgba(77, 141, 247, .06); }
.aktPs__palleta .aktPs__zag { margin-top: 0; }
.aktPs__podskaz { margin: 0; font-size: 16px; font-weight: 600; }
.aktPs__palForma { grid-template-columns: 1fr 160px; }
.aktPs__gotovo.is-oshibka { background: rgba(240, 93, 114, .12); border-color: rgba(240, 93, 114, .6); }
.aktPs__gotovo + .aktPs__gotovo, .aktPs__gotovo + .aktPs__palleta { margin-top: 10px; }
/* Актировка целой паллеты (/tsd/akt, 26.09): список штук и ход работы. */
.palSpisok { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 46vh; overflow: auto; }
.palStroka { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; }
.palStroka.is-bez { border-color: rgba(240, 93, 114, .5); background: rgba(240, 93, 114, .06); }
.palStroka__tovar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palStroka__sht, .palStroka__akt { color: var(--muted); white-space: nowrap; }
.palStroka.is-bez .palStroka__akt { color: #f05d72; font-weight: 600; }
.palHod { margin-top: 14px; }
.palHod__polosa { height: 10px; border-radius: 999px; background: rgba(143, 156, 173, .2); overflow: hidden; margin: 8px 0; }
.palHod__polosa i { display: block; height: 100%; background: #27c46b; transition: width .3s; }
/* Пикалка: актировка целой паллеты — карточка товара прячется, панель сверху. */
.answer.is-palleta .answer__setka { display: none; }
.answer.is-palleta .aktPs { margin-top: -18px; border-top: 0; }
/* Пикалка: паллета не в ячейке решения — вопрос перед перемещением (27.09). */
.aktPs__palleta--vopros { border-color: rgba(245, 173, 50, .7); background: rgba(245, 173, 50, .08); }
.aktPs__vopros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
/* Пикалка: карточка паллеты по любому её имени (27.09). */
.palKarta { margin-top: 14px; padding: 18px 20px; border: 1px solid var(--line-strong, #35465c); border-radius: 18px; background: var(--panel, rgba(18,26,37,.92)); }
.palKarta[hidden] { display: none; }
.palKarta__shapka { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.palKarta__nad { margin: 0; color: var(--muted, #8f9cad); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.palKarta h2 { margin: 2px 0 0; font-size: clamp(20px, 3vw, 26px); font-weight: 600; word-break: break-word; }
.palKarta__gde { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.palKarta__gde span { color: var(--muted, #8f9cad); font-weight: 400; }
.palKarta__x { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--line, #263345); border-radius: 12px; background: transparent; color: var(--muted, #8f9cad); font-size: 24px; cursor: pointer; }
.palKarta__fakty { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.palKarta__fakty span { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13.5px; color: var(--muted, #8f9cad); }
.palKarta__fakty b { color: var(--text, #f2f6fb); font-weight: 600; }
.palKarta__fakty .is-vazhno { background: rgba(245,173,50,.14); color: #ffd28a; }
.palKarta__vnimanie { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(240,93,114,.12); color: #ffb3bf; font-size: 13.5px; }
.palKarta__knopki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.palKarta__kn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong, #35465c); border-radius: 12px; background: transparent; color: var(--text, #f2f6fb); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.palKarta__kn:hover { border-color: var(--blue, #4d8df7); }
.palKarta__kn.is-glav { border-color: transparent; background: var(--green-deep, #158044); }
.palKarta__sostav { margin-top: 14px; }
.palKarta__sostav summary { cursor: pointer; color: var(--muted, #8f9cad); font-size: 13.5px; font-weight: 600; }
.palKarta__tabl { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.palKarta__str { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 13px; }
.palKarta__str.is-bez { background: rgba(245,173,50,.1); }
.palKarta__tovar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palKarta__zhdu { margin: 0; color: var(--muted, #8f9cad); }
.palKarta__oshibka { margin: 0; color: #ff8fa0; }
@media (max-width: 640px) {
  .palKarta { padding: 14px; }
  .palKarta__knopki .palKarta__kn { flex: 1 1 45%; }
  .palKarta__str { grid-template-columns: 1fr auto auto; gap: 8px; }
  .palKarta__str span:nth-child(3) { display: none; }
}
/* Пикалка ?akt: карточка паллеты в панели актировки (27.09). */
.palKartaAkt { margin: 10px 0 12px; }
.palKartaAkt__fakty { display: flex; flex-wrap: wrap; gap: 6px; }
.palKartaAkt__fakty span { padding: 5px 10px; border-radius: 9px; background: rgba(255,255,255,.05); color: var(--muted, #8f9cad); font-size: 13px; }
.palKartaAkt__fakty b { color: var(--text, #f2f6fb); font-weight: 600; }
.palKartaAkt__knopki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.palKartaAkt__knopki .aktPs__kn { min-height: 40px; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.palKartaAkt__per { width: 100%; margin-top: 6px; min-height: 44px; }
.palPer .aktPs__podskaz b { font-weight: 600; }
/* Пикалка ?akt — площадка ВМС (27.09): одно поле и что можно сделать. */
body.vmsPlg .pickerTabs, body.vmsPlg .databaseCard, body.vmsPlg .nameLabel,
body.vmsPlg .searchRow--name, body.vmsPlg .nameNote { display: none !important; }
body.vmsPlg .layout { grid-template-columns: 1fr !important; }
.vmsVozm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
.vmsVozm__k { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line, #263345); border-radius: 14px;
  background: rgba(255,255,255,.025); color: var(--muted, #8f9cad); font: inherit; font-size: 12.5px; line-height: 1.45; text-align: left; cursor: pointer; }
.vmsVozm__k:hover { border-color: var(--line-strong, #35465c); }
.vmsVozm__k--kto { cursor: default; }
.vmsVozm__k b { color: var(--text, #f2f6fb); font-size: 15px; font-weight: 600; }
.vmsVozm__k small { color: var(--green, #27c46b); font-size: 12px; font-weight: 600; }
.yachPallety { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; max-height: 460px; overflow-y: auto; }
.yachPalleta { display: grid; grid-template-columns: 1.4fr auto auto 1fr; gap: 10px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--line, #263345); border-radius: 10px; background: transparent; color: var(--text, #f2f6fb); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.yachPalleta:hover { border-color: var(--blue, #4d8df7); }
.yachPalleta__imya { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yachPalleta .is-bez { color: #ffd28a; }
.yachPalleta__zak { color: var(--muted, #8f9cad); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palKartaAkt__fakty .is-vazhno { background: rgba(245,173,50,.14); color: #ffd28a; }
@media (max-width: 760px) {
  .vmsVozm { grid-template-columns: 1fr 1fr; }
  .yachPalleta { grid-template-columns: 1fr auto; }
  .yachPalleta__zak { grid-column: 1 / -1; }
}
/* Площадка ВМС: строка состояния и «попробовать» (27.09). */
.vmsPolosa { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--line, #263345); border-radius: 14px; background: rgba(8,12,18,.45); font-size: 13.5px; color: var(--muted, #8f9cad); }
.vmsPolosa__ryad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vmsPolosa b { color: var(--text, #f2f6fb); font-weight: 600; }
.vmsPolosa__ok { color: #8fe0b1; }
.vmsPolosa__net { color: #ffd28a; }
.vmsPolosa__kn { min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong, #35465c); border-radius: 10px; background: transparent; color: var(--text, #f2f6fb); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vmsPolosa__kn.is-glav { border-color: transparent; background: var(--green-deep, #158044); }
.vmsPolosa .aktPs__vhod { margin: 4px 0; }
.vmsProba { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; color: var(--muted, #8f9cad); }
.vmsProba button { min-height: 34px; padding: 0 12px; border: 1px dashed var(--line-strong, #35465c); border-radius: 999px; background: transparent; color: var(--text, #f2f6fb); font: inherit; font-size: 13px; cursor: pointer; }
.vmsProba button:hover { border-color: var(--green, #27c46b); }
/* Площадка ВМС: акт, «где ещё лежит», история паллеты (27.09). */
.palKartaAkt__dva { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.palKartaAkt__dva .aktPs__kn { min-height: 44px; }
.palIst { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-height: 360px; overflow-y: auto; }
.palIst__shag { display: grid; grid-template-columns: 56px 1fr; gap: 2px 10px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.03); font-size: 13px; }
.palIst__shag .yachPalleta__zak { grid-column: 2; }
.palIst__kogda { grid-row: span 2; color: var(--muted, #8f9cad); font-weight: 600; }
.yachPalleta--stolb { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.yachPalleta--stolb .yachPalleta__imya { white-space: normal; }
/* WMS: столы кнопками, «назад к товару», «сменить стол» (27.09). */
.vmsStoly { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.vmsStoly .aktPs__kn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.vmsStoly small { font-size: 12px; color: var(--muted, #8f9cad); font-weight: 500; }
.vmsNazad { margin: 0 0 10px; }
.vmsSmenit { padding: 0; border: 0; background: none; color: var(--green, #27c46b); font: inherit; text-decoration: underline; cursor: pointer; }
/* Пикалка: WMS и ТСД под замком (27.09). */
.pickerZamki { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; grid-column: -2 / -1; justify-self: end; }
.pickerZamki__metka { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pickerZamok { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; cursor: not-allowed; }
.pickerZamok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.pickerZamok.is-otkryt { border-style: solid; color: var(--text); cursor: pointer; }
.pickerZamok.is-otkryt:hover { border-color: var(--green, #27c46b); }
.pickerZamok.is-on { background: rgba(255, 255, 255, .08); color: var(--text); }
.pickerZamok--nazad { border-style: solid; color: var(--text); cursor: pointer; }
.pickerZamok.is-drozh { animation: pickerDrozh .35s; }
@keyframes pickerDrozh { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }