:root {
  --bg:#f4f5f7; --fg:#1b1d21; --muted:#5f6670; --card:#fff; --line:#e3e5e8;
  --accent:#1f6feb; --ok:#1a7f37; --err:#cf222e;
  --green:#1a7f37; --green-bg:#e6f4ea; --orange:#c2410c; --orange-bg:#fdeee4;
  --blue:#1f6feb; --blue-bg:#e7f0fe; --gray:#6b7280; --gray-bg:#eef0f2;
}
* { box-sizing: border-box; }
html { font-size: 20px; }
body { margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.35; }
a { color: var(--accent); }
h1 { font-size:1.6rem; margin:0 0 16px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

/* Иконки */
.ico { width:1.4em; height:1.4em; flex:none; }
.ico.sm { width:1.1em; height:1.1em; }

/* Шапка */
.top { display:flex; align-items:center; gap:16px; padding:10px 16px; background:#1b1d21; color:#fff; }
.top .brand { display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; text-decoration:none; font-size:1.1rem; flex:none; }
.top .who { margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; opacity:.9; font-size:.9rem; }
.who-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.who-role { flex:none; padding:2px 8px; border-radius:999px; background:#33373d; font-size:.75rem; }
.inline { display:inline; margin:0; flex:none; }
.btn-exit { display:flex; align-items:center; gap:6px; background:#33373d; border:0; border-radius:8px; color:#fff; font-size:.9rem; padding:8px 12px; cursor:pointer; }
.btn-exit:hover { background:#4a4f57; }

/* Карточки и формы */
.card { background:var(--card); border-radius:12px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.login { max-width:420px; margin:8vh auto; display:flex; flex-direction:column; gap:14px; }
label { display:flex; flex-direction:column; gap:6px; font-weight:600; }
input, select { font-size:1.1rem; padding:12px; border:1px solid #bbb; border-radius:8px; width:100%; }
.btn { font-size:1.2rem; padding:14px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
.err { color:var(--err); font-weight:600; }
.big { font-size:1.4rem; }
.back { display:inline-flex; align-items:center; gap:4px; }

/* Главное меню */
.menu { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
@media (min-width: 960px) { .menu.menu-main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { --c:var(--blue); --cbg:var(--blue-bg);
  display:flex; flex-direction:column; gap:8px; min-width:0; overflow:hidden;
  background:var(--card); border:2px solid transparent; border-radius:14px; padding:20px;
  text-decoration:none; color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.08);
  border-top:6px solid var(--c); transition: transform .08s, box-shadow .08s; }
.tile:hover, .tile:focus-visible { border-color:var(--c); border-top-width:6px; box-shadow:0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px); outline:none; }
.tile-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:4px; }
.tile-ico { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:14px; background:var(--cbg); color:var(--c); }
.tile-ico .ico { width:36px; height:36px; }
.tile kbd { font:600 .85rem/1 ui-monospace, monospace; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-bottom-width:3px; border-radius:6px; padding:6px 9px; }
.tile-name { font-size:clamp(1.05rem, 1.1vw + .45rem, 1.3rem); overflow-wrap:anywhere; hyphens:auto; min-width:0; }
.tile small { color:var(--muted); font-size:.9rem; }
.tile.c-green  { --c:var(--green);  --cbg:var(--green-bg); }
.tile.c-orange { --c:var(--orange); --cbg:var(--orange-bg); }
.tile.c-blue   { --c:var(--blue);   --cbg:var(--blue-bg); }
.tile.c-gray   { --c:var(--gray);   --cbg:var(--gray-bg); }
.tile.soon .tile-name, .tile.soon small { color:var(--gray); }
.badge { align-self:flex-start; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--gray-bg); color:var(--gray); }
.tip { color:var(--muted); font-size:.85rem; margin-top:20px; }
.adminlist li { margin:8px 0; }

/* Телефон */
@media (max-width: 600px) {
  html { font-size:18px; }
  .top { gap:10px; padding:8px 12px; }
  .top .brand span, .btn-exit span, .who-role { display:none; }
  .menu { grid-template-columns: 1fr; }
  .tile { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:14px; }
  .tile-head { margin:0; }
  .tile-ico { width:52px; height:52px; }
  .tile kbd { display:none; }
  .tile-name { flex:1; min-width:0; }
  .tile small { flex-basis:100%; }
  .tile .badge { margin-left:0; }
  .tip { display:none; }
}

/* Сообщения */
.flash { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-weight:600; }
.flash.ok { background:var(--green-bg); color:var(--green); }
.flash.err { background:#fde8e8; color:var(--err); }

/* Админка: заголовки, таблицы, формы */
h2 { font-size:1.15rem; margin:0 0 4px; }
.pagehead { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.pagehead h1 { margin:0; overflow-wrap:anywhere; }
.pagehead .btn { margin-left:auto; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.btn-sm { font-size:.95rem; padding:10px 16px; }
.btn-ghost { background:var(--gray-bg); color:var(--fg); }
.btn-danger { background:var(--err); }
.muted { color:var(--muted); }
.small { font-size:.8rem; }
.filters { font-size:.9rem; }
.card.flush { padding:0; }
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th, .tbl td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th { font-size:.8rem; color:var(--muted); font-weight:600; background:#fafbfc; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tr.off td { color:var(--gray); }
.pill { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:999px; }
.pill.green { background:var(--green-bg); color:var(--green); }
.pill.red { background:#fde8e8; color:var(--err); }
.pill.gray { background:var(--gray-bg); color:var(--gray); }
.form { display:flex; flex-direction:column; gap:14px; }
.card.form { max-width:560px; }
.grid2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-bottom:16px; }
.grid2 .card.form { max-width:none; }
.actions { max-width:none !important; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
span.tile { cursor:default; }
span.tile:hover { transform:none; box-shadow:0 1px 3px rgba(0,0,0,.08); border-color:transparent; border-top-color:var(--c); }

/* Таблица на телефоне превращается в карточки */
@media (max-width: 600px) {
  .tbl-stack thead { display:none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display:block; width:100%; }
  .tbl-stack tr { padding:12px 16px; border-bottom:1px solid var(--line); }
  .tbl-stack tr:last-child { border-bottom:0; }
  .tbl-stack td { border:0; padding:3px 0; white-space:normal; display:flex; gap:12px; justify-content:space-between; }
  .tbl-stack td[data-label]::before { content: attr(data-label); color:var(--muted); font-size:.8rem; }
  .tbl-stack td.cell-main { font-size:1.05rem; padding-bottom:6px; }
}

/* Настройки */
.settings { display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.settings .card.form, #np.card.form { max-width:760px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-weight:600; }
.field.has-err input { border-color:var(--err); }
.secret-state { display:flex; align-items:center; gap:8px; font-size:.9rem; }
.row.nowrap { flex-wrap:nowrap; }
.row.nowrap input { min-width:0; }
.row.nowrap .btn { flex:none; }
label.check { flex-direction:row; align-items:center; gap:8px; font-weight:400; font-size:.9rem; }
label.check input { width:auto; }
code { font-size:.85em; background:var(--gray-bg); padding:2px 6px; border-radius:6px; overflow-wrap:anywhere; }
details summary { cursor:pointer; color:var(--accent); }
.savebar { max-width:760px; }
.savebar .btn { width:100%; }
#np .pagehead .btn { margin-left:auto; }

/* Списки данных: фильтры, листание, сырой JSON */
.filters.row { align-items:center; margin:12px 0; }
.filters input, .filters select { font-size:.95rem; padding:10px; width:auto; }
.f-short { max-width:220px; }
.f-wide { flex:1; min-width:220px; max-width:420px; }
.pager { display:flex; align-items:center; gap:12px; margin-top:12px; }
.card.wide { max-width:none; margin-bottom:12px; }
.mt { margin-top:24px; margin-bottom:8px; }
pre.raw { font-size:.75rem; line-height:1.4; overflow:auto; max-height:70vh; white-space:pre; }
dl.facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 20px; margin:0; font-size:.95rem; }
dl.facts dt { color:var(--muted); }
dl.facts dd { margin:0; overflow-wrap:anywhere; }
.refs { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.refs .card { padding:16px 0 4px; }
.refs h2 { padding:0 16px 8px; }
.tbl td.num { width:1%; color:var(--muted); }

/* Карточка заказа */
.ocard { display:flex; flex-direction:column; gap:16px; margin-bottom:8px; }
.ocard-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ocard-num { font-size:1.8rem; font-weight:700; }
.big-pill { font-size:.95rem; padding:6px 14px; }
table.items { width:100%; border-collapse:collapse; font-size:1.1rem; }
table.items th { text-align:left; font-size:.8rem; color:var(--muted); font-weight:600; padding:6px 0; border-bottom:1px solid var(--line); }
table.items td { padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.items .qty { text-align:right; white-space:nowrap; padding-left:16px; }
table.items td.qty b { font-size:1.3rem; }
@media (max-width: 600px) {
  dl.facts { grid-template-columns:1fr; gap:2px; }
  dl.facts dd { margin-bottom:8px; }
  .f-short, .f-wide { max-width:none; width:100%; flex:1 1 100%; }
}

/* Сканирование: на всю ширину экрана, главное — товары */
.wrap.wrap-full { max-width:none; padding:12px 16px; }
.scan-screen { display:grid; gap:12px; grid-template-columns:minmax(0, 1fr);
  grid-template-areas:"top" "banner" "items" "side"; }
.scan-top { grid-area:top; display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.modes { display:flex; gap:8px; flex:none; }
.mode-btn { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; background:var(--card);
  color:var(--fg); text-decoration:none; font-size:1.05rem; font-weight:700; border:3px solid var(--line); white-space:nowrap; }
.mode-btn kbd { margin-left:4px; font:600 .75rem/1 ui-monospace, monospace; color:var(--muted); border:1px solid var(--line); border-bottom-width:3px; border-radius:6px; padding:4px 7px; }
.mode-btn.m-ship.active { border-color:var(--green); background:var(--green-bg); color:var(--green); }
.mode-btn.m-return.active { border-color:var(--orange); background:var(--orange-bg); color:var(--orange); }
.scan-form { flex:1 1 320px; display:flex; }
.scan-input { font-size:clamp(1.3rem, 1rem + 1vw, 2rem); padding:12px 18px; border:3px solid var(--accent); border-radius:12px; font-family:ui-monospace, monospace; letter-spacing:.05em; }
.scan-input:focus { outline:4px solid var(--blue-bg); }

.scan-banner { grid-area:banner; }
.sres-banner { border-radius:14px; padding:clamp(12px, 1.6vh, 22px) clamp(16px, 1.6vw, 26px); color:#fff; }
.sres-title { font-size:clamp(1.4rem, 1rem + 1.5vw, 2.6rem); font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
.sres-msg { font-size:clamp(.95rem, .8rem + .4vw, 1.25rem); margin-top:6px; opacity:.95; }
.sres-banner.s-green { background:var(--green); }
.sres-banner.s-red { background:var(--err); }
.sres-banner.s-orange { background:#d97706; }
.sres-banner.s-idle { background:var(--card); color:var(--muted); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.sres-banner.s-idle .sres-title { font-size:clamp(1.2rem, 1rem + .6vw, 1.6rem); color:var(--fg); }

/* Товары: самое крупное на экране */
.scan-items { grid-area:items; padding:clamp(12px, 1.4vw, 24px); min-height:0; overflow:auto; }
.pack-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:8px; border-bottom:2px solid var(--line); }
.pack-title { font-size:clamp(.9rem, .75rem + .4vw, 1.2rem); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.pack-count { font-size:clamp(1rem, .8rem + .6vw, 1.5rem); font-weight:800; }
.pack-list { list-style:none; margin:0; padding:0; }
.pack-item { display:flex; align-items:center; gap:clamp(12px, 1.6vw, 32px); padding:clamp(8px, 1.3vh, 22px) 0; border-bottom:1px solid var(--line); }
.pack-item:last-child { border-bottom:0; }
.pack-qty { flex:none; display:flex; align-items:baseline; justify-content:center; gap:4px;
  min-width:clamp(84px, 9vw, 170px); padding:clamp(6px, 1vh, 12px) 12px; border-radius:14px; background:var(--gray-bg); }
.pack-qty b { font-size:clamp(2rem, min(1.1rem + 2.8vw, 7vh), 4.4rem); line-height:1; }
.pack-qty small { font-size:clamp(.85rem, .7rem + .5vw, 1.3rem); color:var(--muted); font-weight:700; }
.pack-item.many .pack-qty { background:#fff3cd; color:#8a5a00; box-shadow:inset 0 0 0 3px #f0b429; }
.pack-item.many .pack-qty small { color:#8a5a00; }
.pack-name { display:flex; flex-direction:column; gap:4px; min-width:0;
  font-size:clamp(1.25rem, min(.85rem + 1.5vw, 3.9vh), 2.7rem); font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.pack-meta { font-size:clamp(.8rem, .65rem + .45vw, 1.15rem); font-weight:400; color:var(--muted); }
.pack-list.multi .pack-name { font-size:clamp(1.1rem, .9rem + .8vw, 1.8rem); }
.pack-note { margin-top:10px; padding:10px 16px; border-radius:10px; background:#fff8e1; border-left:6px solid #f0b429;
  font-size:clamp(1.05rem, min(.8rem + .8vw, 3vh), 1.8rem); overflow-wrap:anywhere; }
.pack-idle, .pack-empty { color:var(--muted); font-size:clamp(1.1rem, .9rem + .6vw, 1.5rem); text-align:center; padding:clamp(24px, 6vh, 80px) 0; }

/* Сбоку: подробности заказа и последние сканы */
.scan-side { grid-area:side; display:flex; flex-direction:column; gap:12px; min-height:0; }
.side-order { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.side-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.side-num { font-size:1.5rem; font-weight:800; }
.side-ship { padding:8px 12px; border-radius:8px; background:var(--green-bg); font-size:.95rem; }
.side-ship.none { background:#fde8e8; color:var(--err); }
.side-order dl.facts { font-size:.85rem; gap:4px 14px; }
.recent-card { padding:14px 0 4px; min-height:0; display:flex; flex-direction:column; }
.recent-card h2 { padding:0 16px 8px; font-size:1rem; }
.recent-card #recent-empty { padding:0 16px; }
.recent { list-style:none; margin:0; padding:0; overflow:auto; min-height:0; }
.srow { display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:8px 14px;
  border-top:1px solid var(--line); font-size:.85rem; border-left:5px solid transparent; }
.srow.s-green { border-left-color:var(--green); }
.srow.s-red { border-left-color:var(--err); }
.srow.s-orange { border-left-color:#d97706; }
.srow-time, .srow-mode { color:var(--muted); }
.srow-ttn { justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill.orange { background:var(--orange-bg); color:var(--orange); }

/* Широкий экран: товары слева на всю высоту, подробности справа */
@media (min-width: 1000px) {
  .scan-screen { grid-template-columns:minmax(0, 1fr) clamp(300px, 27vw, 460px);
    grid-template-rows:auto auto minmax(0, 1fr);
    grid-template-areas:"top top" "banner side" "items side";
    height:calc(100dvh - 84px); }
  .scan-side { overflow:auto; }
  .scan-side .srow { grid-template-columns:auto minmax(0, 1fr) auto auto; }
  .scan-side .srow-mode { display:none; }
}
@media (max-width: 600px) {
  .wrap.wrap-full { padding:8px; }
  .modes { width:100%; }
  .mode-btn { flex:1; justify-content:center; padding:10px; }
  .mode-btn kbd { display:none; }
  .srow { grid-template-columns:auto minmax(0, 1fr) auto; }
  .srow-mode, .srow-order { display:none; }
}
.filter-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px 12px; margin:12px 0; align-items:end; }
.filter-grid label { font-size:.8rem; font-weight:600; color:var(--muted); gap:4px; }
.filter-grid input, .filter-grid select { font-size:.95rem; padding:9px; width:100%; color:var(--fg); }
.filter-btns { align-items:center; }
.tbl td.wrap-cell { white-space:normal; min-width:260px; }
.sdsum { display:flex; gap:8px; flex-wrap:wrap; }
.sdsum .pill { font-size:.85rem; padding:6px 12px; text-decoration:none; }
label.check.big-check { font-weight:600; font-size:1rem; }

/* Настройки: вкладки слева, содержимое справа */
.set-layout { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:20px; align-items:start; }
.set-nav { display:flex; flex-direction:column; gap:6px; position:sticky; top:12px; }
.set-nav a { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:10px; text-decoration:none;
  color:var(--fg); background:var(--card); border:2px solid transparent; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.set-nav a small { color:var(--muted); font-size:.75rem; }
.set-nav a:hover { border-color:var(--line); }
.set-nav a.active { border-color:var(--accent); background:var(--blue-bg); }
.set-nav a.active b { color:var(--accent); }
.set-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.set-main .card.form.set-card { max-width:760px; }
.set-main .savebar { max-width:none; margin-top:4px; }
@media (max-width: 800px) {
  .set-layout { grid-template-columns:1fr; }
  .set-nav { position:static; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px; }
  .set-nav a { flex:none; padding:10px 14px; }
  .set-nav a small { display:none; }
}
.filter-grid .dt-pair { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:6px; grid-column:span 2; }
@media (max-width: 600px) { .filter-grid .dt-pair { grid-column:1 / -1; } }
/* Узкая правая колонка (экраны ~1000–1200 px): подписи над значениями, в сканах без ТТН */
.scan-side { container-type:inline-size; }
@container (max-width: 380px) {
  .side-order dl.facts { grid-template-columns:1fr; gap:0; }
  .side-order dl.facts dd { margin-bottom:6px; }
  .scan-side .srow { grid-template-columns:auto minmax(0, 1fr) auto; }
  .scan-side .srow-ttn { display:none; }
}