/* ════════════════════════════════════════════════════════════════════════
   Склад v2 — дизайн-система (фирменный стиль)
   Токены + библиотека компонентов. Плотность — уровень Ozon Seller.
   Шрифты: Inter (текст) + JetBrains Mono (числа). Иконки: Bootstrap Icons.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Палитра */
  --primary:        #4f46e5;
  --primary-dark:   #4338ca;
  --primary-light:  #eef2ff;
  --success:        #10b981;
  --success-light:  #d1fae5;
  --success-dark:   #047857;
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;
  --warning-dark:   #92400e;
  --danger:         #ef4444;
  --danger-light:   #fee2e2;
  --danger-dark:    #b91c1c;
  --info:           #06b6d4;
  --info-light:     #cffafe;
  --info-dark:      #0e7490;

  /* Нейтральные */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Радиусы и тени */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow:    0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);
  --shadow-xl: -12px 0 40px rgba(15, 23, 42, .16);

  /* Макет */
  --banner-h:    0px;   /* плашка теста создаётся JS только на тест-стенде */
  --topbar-h:    56px;
  --sidebar-w:   220px;
  --sidebar-min: 64px;
  --drawer-w:    640px;   /* владелец 16.07: журнал движений места умещается */

  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ══ База ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 13.5px; line-height: 1.45;
  background: var(--slate-100); color: var(--slate-800);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--slate-900); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .85em; background: var(--slate-100); color: var(--slate-600); padding: 2px 5px; border-radius: 4px; }
.muted { color: var(--slate-500); }
.small { font-size: 12px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::placeholder { color: var(--slate-400); }

/* ══ Баннер тест-площадки ════════════════════════════════════════════ */
#banner {
  position: fixed; top: 0; left: 0; right: 0; height: var(--banner-h); z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #fef9c3; color: #854d0e; border-bottom: 1px solid #fde047;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; padding: 0 10px;
}
#banner i { font-size: 12px; }
.banner-short { display: none; }

/* ══ Каркас ══════════════════════════════════════════════════════════ */
#app { padding-top: var(--banner-h); }
#content { margin-left: var(--sidebar-w); transition: margin-left .18s ease; min-width: 0; }
#main { padding: 20px 24px 56px; max-width: 1440px; }
body.sb-min #content { margin-left: var(--sidebar-min); }

/* ── единый контейнер контента раздела: на широком мониторе держим
   аккуратную колонку по центру рабочей области, а не во всю ширину ── */
.page-content { max-width: 1320px; margin: 0 auto; }
/* вертикальная стопка карточек с единым ритмом (вместо inline margin-top) */
.card-stack { display: flex; flex-direction: column; gap: 12px; }
.card-stack > .card { margin: 0; }
/* сетка карточек: несколько в ряд на широком, одна на узком */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
@media (max-width: 1080px) { .cards-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }

/* ══ Сайдбар (slate-900 → 950) ═══════════════════════════════════════ */
#sidebar {
  position: fixed; top: var(--banner-h); left: 0; bottom: 0; z-index: 110;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--slate-900) 0%, var(--slate-950) 100%);
  display: flex; flex-direction: column;
  transition: width .18s ease, transform .2s ease;
}
body.sb-min #sidebar { width: var(--sidebar-min); }

.sb-brand {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  border-bottom: 1px solid rgba(148, 163, 184, .14); white-space: nowrap; overflow: hidden;
  text-decoration: none;
}
.sb-brand:hover { color: #fff; text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; box-shadow: 0 3px 10px rgba(79, 70, 229, .4);
}
.brand-txt .v2 { color: #818cf8; }
body.sb-min .sb-brand { padding: 0; justify-content: center; }
body.sb-min .brand-txt { display: none; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; scrollbar-width: thin; }
.sb-group {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--slate-500); padding: 14px 10px 4px; white-space: nowrap;
}
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 1px; border-radius: 7px;
  color: var(--slate-300); font-size: 13.5px; font-weight: 500; text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.sb-link i { font-size: 15px; width: 18px; flex: none; text-align: center; color: var(--slate-400); }
.sb-link:hover { background: rgba(148, 163, 184, .12); color: #fff; text-decoration: none; }
.sb-link:hover i { color: var(--slate-200); }
.sb-link.active { background: var(--primary); color: #fff; }
.sb-link.active i { color: #fff; }
.sb-sub { padding-left: 20px; font-size: 13px; }
body.sb-min .sb-link { justify-content: center; padding: 9px 0; }
body.sb-min .sb-link .lbl { display: none; }
body.sb-min .sb-sub { padding-left: 0; }
body.sb-min .sb-group {
  padding: 0; margin: 8px 14px 6px; height: 0; overflow: hidden;
  border-top: 1px solid rgba(148, 163, 184, .18);
}

/* ── блок аккаунта внизу сайдбара (имя/роль/аватар + выход) ── */
.sb-acct { flex: none; padding: 8px; border-top: 1px solid rgba(148, 163, 184, .14); }
.sb-acct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 9px; background: rgba(148, 163, 184, .08);
}
.sb-ava {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
}
.sb-acct-nm { flex: 1; min-width: 0; line-height: 1.2; display: flex; flex-direction: column; }
.sb-acct-nm .nm {
  font-weight: 600; font-size: 13px; color: #fff;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sb-acct-nm .rl { font-size: 11px; color: var(--slate-400); }
.sb-logout {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  border: none; background: none; color: var(--slate-400); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.sb-logout:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.sb-login {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.sb-login:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.sb-login i { font-size: 15px; }
/* свёрнутый сайдбар — только аватар/иконка */
body.sb-min .sb-acct-row { padding: 6px; justify-content: center; background: none; }
body.sb-min .sb-acct-nm, body.sb-min .sb-logout { display: none; }
body.sb-min .sb-login { justify-content: center; padding: 9px 0; }
body.sb-min .sb-login .lbl { display: none; }

.sb-foot { flex: none; padding: 8px; border-top: 1px solid rgba(148, 163, 184, .14); }
.sb-collapse {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 7px; cursor: pointer;
  color: var(--slate-400); font: inherit; font-size: 12.5px; padding: 7px 10px; white-space: nowrap;
}
.sb-collapse i { font-size: 14px; width: 18px; flex: none; text-align: center; }
.sb-collapse:hover { background: rgba(148, 163, 184, .12); color: #fff; }
body.sb-min .sb-collapse { justify-content: center; padding: 9px 0; }
body.sb-min .sb-collapse .lbl { display: none; }

#sb-backdrop {
  display: none; position: fixed; inset: var(--banner-h) 0 0 0;
  background: rgba(15, 23, 42, .5); z-index: 105;
}

/* ══ Топбар ══════════════════════════════════════════════════════════ */
#topbar {
  position: sticky; top: var(--banner-h); z-index: 90;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: #fff; border-bottom: 1px solid var(--slate-200);
}
#topbar .tb-burger { display: none; }
.tb-search { position: relative; width: 290px; flex: none; }
.tb-search > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--slate-400); font-size: 13px; pointer-events: none;
}
.tb-search input { width: 100%; padding-left: 31px; }
.tb-chips {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; padding: 2px 0;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.tb-chips::-webkit-scrollbar { display: none; }
.tb-user { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.tb-user .nm-wrap { line-height: 1.15; }
.tb-user .nm { font-weight: 600; font-size: 13px; color: var(--slate-800); }
.tb-user .rl { font-size: 11px; color: var(--slate-500); }

/* ══ Кнопки ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--slate-300); background: #fff; color: var(--slate-700);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap; user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--slate-50); border-color: var(--slate-400); color: var(--slate-900); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-danger { border-color: #fca5a5; color: var(--danger-dark); }
.btn-danger:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger-dark); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--slate-500); }
.btn-ghost:hover { background: var(--slate-100); border-color: transparent; color: var(--slate-800); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn-icon { width: 34px; padding: 0; flex: none; }
.btn-sm.btn-icon { width: 28px; }
/* очень мелкая кнопка для действий в плотной таблице (Задания/Инвентаризация) */
.btn-xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.btn-xs.btn-icon { width: 24px; padding: 0; }
/* строка-«готово/отменено» в таблицах — приглушённая */
.dt-table tbody tr.row-muted td { opacity: .6; }
/* цветной текст в ячейке (Δ инвентаризации: недостача/излишек) */
.dt-table td.bad { color: var(--danger-dark); font-weight: 600; }
.dt-table td.warn { color: var(--warning-dark); font-weight: 600; }
.btn-block { width: 100%; }
.btn:disabled, .btn.loading { opacity: .55; pointer-events: none; }

/* ══ Формы ═══════════════════════════════════════════════════════════ */
.input, .select {
  height: 34px; padding: 0 10px; border: 1px solid var(--slate-300); border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--slate-800); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.input:disabled, .select:disabled { background: var(--slate-50); color: var(--slate-400); }
.field { min-width: 0; }
.field > label { display: block; font-size: 12px; font-weight: 500; color: var(--slate-500); margin-bottom: 4px; }
.field .input, .field .select { width: 100%; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; user-select: none; }
.check input { width: 15px; height: 15px; accent-color: var(--primary); margin: 0; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }

/* ══ Чипы-фильтры ════════════════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 1px solid var(--slate-300); border-radius: 999px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--slate-600);
  cursor: pointer; white-space: nowrap; user-select: none; flex: none;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--slate-400); color: var(--slate-800); }
.chip.active { background: var(--primary-light); border-color: #c7d2fe; color: var(--primary-dark); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip .cnt { font-family: var(--mono); font-size: 11px; color: var(--slate-400); }
.chip.active .cnt { color: var(--primary); }

/* ══ Карточки ════════════════════════════════════════════════════════ */
.card {
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.card-h {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-bottom: 1px solid var(--slate-100); font-weight: 600; font-size: 13.5px; color: var(--slate-900);
}
.card-h i { color: var(--slate-400); font-size: 14px; }
.card-h .spacer { flex: 1; }
.card-b { padding: 14px 16px; }
.card-b.tight { padding: 0; }

/* ══ KPI-плитки ══════════════════════════════════════════════════════ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 13px 15px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-width: 0;
}
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); }
.kpi-txt { min-width: 0; }   /* текстовая колонка плитки: не распирает флекс */
.kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 3px; color: var(--slate-900); }
.kpi-value.good { color: var(--success-dark); }
.kpi-value.bad { color: var(--danger-dark); }
.kpi-sub { font-size: 11.5px; color: var(--slate-400); margin-top: 2px; }
.kpi-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.kpi-ic.success { background: var(--success-light); color: var(--success-dark); }
.kpi-ic.warning { background: var(--warning-light); color: var(--warning-dark); }
.kpi-ic.info { background: var(--info-light); color: var(--info-dark); }
.kpi-ic.muted { background: var(--slate-100); color: var(--slate-500); }

/* ══ Плотная data-table ══════════════════════════════════════════════ */
.dt { overflow: auto; border-radius: 0 0 var(--radius) var(--radius); }
.dt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.dt-table th {
  position: sticky; top: 0; z-index: 2; background: var(--slate-50);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-500); text-align: left; white-space: nowrap;
  height: 36px; padding: 0 12px; border-bottom: 1px solid var(--slate-200);
}
.dt-table td { height: 40px; padding: 5px 12px; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table tbody tr.clickable { cursor: pointer; }
.dt-table tbody tr:hover td { background: var(--slate-50); }
.dt-table tbody tr.sel td { background: var(--primary-light); }
.dt-zebra tbody tr:nth-child(even) td { background: var(--slate-50); }
.dt-zebra tbody tr:hover td { background: var(--slate-100); }
.dt-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dt-table td a { white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--slate-700); }
th.sortable .bi { font-size: 10px; margin-left: 3px; opacity: .4; }
th.sortable.sorted { color: var(--primary-dark); }
th.sortable.sorted .bi { opacity: 1; color: var(--primary); }
.dt-foot {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-top: 1px solid var(--slate-100); font-size: 12.5px; color: var(--slate-500);
}
.dt-foot .spacer { flex: 1; }

.thumb {
  width: 28px; height: 28px; border-radius: 6px; flex: none; overflow: hidden;
  background: var(--slate-100); color: var(--slate-400);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cell-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-title .t { display: block; font-weight: 500; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.cell-title .s { display: block; font-size: 11.5px; color: var(--slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
/* 03.08 (владелец): название и «арт.» — ВСЕГДА столбиком, на любом
   экране/телефоне; текстовый контейнер строки — колонка жёстко */
.cell-title > span:not(.thumb) { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; }
.cell-title > span:not(.thumb) > .t, .cell-title > span:not(.thumb) > .s { display: block; }

/* ══ Бейджи ══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.badge i { font-size: 10px; }
.badge-success { background: var(--success-light); color: var(--success-dark); }
.badge-warning { background: var(--warning-light); color: var(--warning-dark); }
.badge-danger  { background: var(--danger-light); color: var(--danger-dark); }
.badge-info    { background: var(--info-light); color: var(--info-dark); }
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-muted   { background: var(--slate-200); color: var(--slate-600); }
/* бейдж юрлица: цвет задаётся инлайном (6 фиксированных цветов), точка + тинт */
.badge-ip { background: var(--slate-100); color: var(--slate-700); }
.badge-ip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ══ Плашки-заметки ══════════════════════════════════════════════════ */
.note { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 9px 12px; margin: 10px 0; font-size: 13px; }
.note i { font-size: 14px; margin-top: 1px; }
.note-ok   { background: var(--success-light); color: var(--success-dark); }
.note-bad  { background: var(--danger-light); color: var(--danger-dark); }
.note-warn { background: var(--warning-light); color: var(--warning-dark); }
.note-info { background: var(--primary-light); color: var(--primary-dark); }

/* ══ Статус моста печати (Настройки → Принтеры) ════════════════════════ */
.bridge-state { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; }
.bridge-state i { font-size: 26px; flex: none; }
.bridge-state.ok  { background: var(--success-light); color: var(--success-dark); }
.bridge-state.bad { background: var(--danger-light);  color: var(--danger-dark); }
.bridge-state .bs-title { font-weight: 600; font-size: 15px; }
.bridge-state .bs-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.queue-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.queue-row { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 7px; background: var(--slate-50); font-size: 13px; }
.queue-row .qn { color: var(--slate-700); }
.queue-row .qs { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.queue-row .qs.ok   { color: var(--success-dark); }
.queue-row .qs.bad  { color: var(--danger-dark); }
.queue-row .qs.warn { color: var(--warning-dark); }
.queue-row .qs.muted { color: var(--slate-500); }

/* ══ Drawer (карточка справа) ════════════════════════════════════════ */
.drawer-backdrop {
  position: fixed; inset: var(--banner-h) 0 0 0; z-index: 200;
  background: rgba(15, 23, 42, .45);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.drawer {
  position: fixed; top: var(--banner-h); right: 0; bottom: 0; z-index: 201;
  width: var(--drawer-w); max-width: 100vw;
  background: #fff; box-shadow: var(--shadow-xl);
  transform: translateX(102%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-h {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--slate-200);
}
.drawer-h .ttl { font-size: 15px; font-weight: 600; color: var(--slate-900); line-height: 1.3; }
.drawer-h .sub { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.drawer-h .x { margin-left: auto; }
.drawer-b { flex: 1; overflow-y: auto; padding: 14px 18px 20px; }
.drawer-f {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-top: 1px solid var(--slate-200); background: var(--slate-50);
}
.dsec { margin-bottom: 18px; }
.dsec-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-500); margin-bottom: 8px;
}
.dsec-h i { font-size: 12px; color: var(--slate-400); }
.props { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.props .p .k { font-size: 11.5px; color: var(--slate-400); }
.props .p .v { font-size: 13px; color: var(--slate-800); word-break: break-word; }

/* ══ Модалка ═════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 250; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  width: 440px; max-width: 100%; max-height: 86vh; overflow: auto;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px;
}

/* ══ Toast ═══════════════════════════════════════════════════════════ */
/* Тосты стоят НАД плашкой новостей, а не под ней (13.09.2026): плашка висит в
   том же углу и перекрывала сообщение о результате действия — «добавлено строк:
   3» не прочитать. Высоту плашки подставляет она сама в --nudge-h. */
#toasts { position: fixed; right: 16px; bottom: calc(16px + var(--nudge-h, 0px));
  z-index: 9100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 9px; max-width: 360px;
  background: var(--slate-900); color: #f1f5f9; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease;
}
.toast i { font-size: 15px; flex: none; }
.toast.ok i { color: #34d399; }
.toast.err i { color: #f87171; }
.toast.info i { color: #818cf8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ══ Skeleton ════════════════════════════════════════════════════════ */
.skel { position: relative; overflow: hidden; background: var(--slate-200); border-radius: 6px; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; }
.skel-rows { padding: 6px 14px 14px; }
.skel-rows .skel { height: 14px; margin-top: 14px; }

/* ══ Empty-state ═════════════════════════════════════════════════════ */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px; }
.empty-ic {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px;
  background: var(--slate-100); color: var(--slate-400); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.empty-ic.primary { background: var(--primary-light); color: var(--primary); }
.empty-title { font-size: 15px; font-weight: 600; color: var(--slate-800); }
.empty-desc { font-size: 13px; color: var(--slate-500); max-width: 440px; margin-top: 6px; }
.empty .btn { margin-top: 14px; }

/* ══ Прогресс ════════════════════════════════════════════════════════ */
.progress { height: 6px; background: var(--slate-200); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }

/* ══ Tabs ════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; }
.tab {
  padding: 8px 12px; margin-bottom: -1px; background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--slate-500);
}
.tab:hover { color: var(--slate-800); }
.tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* ══ Степпер этапов (главная) ════════════════════════════════════════ */
.stepper { padding: 4px 2px; }
.step { display: flex; gap: 12px; position: relative; padding: 8px 0; }
.step::before {
  content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px;
  background: var(--slate-200);
}
.step:first-child::before { top: 50%; }
.step:last-child::before { bottom: 50%; }
.step-ic {
  width: 28px; height: 28px; border-radius: 50%; flex: none; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-family: var(--mono);
  background: var(--slate-100); color: var(--slate-400);
  border: 2px solid var(--slate-100);
}
.step.done .step-ic { background: var(--success-light); border-color: var(--success-light); color: var(--success-dark); font-size: 13px; }
.step.cur .step-ic { background: var(--primary); border-color: var(--primary-light); color: #fff; font-size: 13px; }
.step-body { padding-top: 4px; min-width: 0; font-size: 13.5px; color: var(--slate-700); }
.step.done .step-body { color: var(--slate-500); }
.step.cur .step-body { font-weight: 500; color: var(--slate-900); }
.step-no { color: var(--slate-400); font-weight: 600; margin-right: 6px; font-size: 12px; }

/* ══ Тулбар над таблицей ═════════════════════════════════════════════ */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.toolbar .count { font-size: 12.5px; color: var(--slate-500); white-space: nowrap; }

/* ══ Заголовок страницы ══════════════════════════════════════════════ */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .sub { font-size: 12.5px; color: var(--slate-500); width: 100%; margin-top: -6px; }

/* ══ Логин ═══════════════════════════════════════════════════════════ */
body.page-login #sidebar, body.page-login #topbar, body.page-login #banner { display: none; }
body.page-login #content { margin-left: 0; }
body.page-login #app { padding-top: 0; }
/* карточка строго по центру всего экрана (и по горизонтали, и по вертикали) */
body.page-login #main { padding: 0; max-width: none; }
.login-wrap {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(99, 102, 241, .14), transparent 60%),
    radial-gradient(1000px 500px at 110% 120%, rgba(124, 58, 237, .12), transparent 55%),
    var(--slate-50);
}
.login-card {
  width: 380px; max-width: 100%;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 30px 28px 26px;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.login-logo .brand-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
.login-logo .nm { font-size: 19px; font-weight: 700; color: var(--slate-900); }
.login-sub { text-align: center; font-size: 12.5px; color: var(--slate-500); margin-bottom: 20px; }

.lg-field { margin-bottom: 16px; }
.lg-label { display: block; font-size: 12px; font-weight: 600; color: var(--slate-600); margin-bottom: 6px; }

/* ── кастомный выпадающий список выбора сотрудника ── */
.lg-dd { position: relative; }
.lg-dd-toggle {
  width: 100%; height: 42px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius);
  font: inherit; font-size: 14px; color: var(--slate-800); cursor: pointer; text-align: left;
}
.lg-dd-toggle:hover { border-color: var(--slate-400); }
.lg-dd.open .lg-dd-toggle { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.lg-dd-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-dd-caret { color: var(--slate-400); font-size: 13px; transition: transform .15s ease; }
.lg-dd.open .lg-dd-caret { transform: rotate(180deg); }
.lg-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.lg-dd.open .lg-dd-menu { display: block; }
.lg-dd-search { position: relative; padding: 8px; border-bottom: 1px solid var(--slate-100); }
.lg-dd-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 13px; }
.lg-dd-search input {
  width: 100%; height: 34px; padding: 0 10px 0 30px;
  border: 1px solid var(--slate-200); border-radius: 8px; font: inherit; font-size: 13.5px;
}
.lg-dd-search input:focus { outline: none; border-color: var(--primary); }
.lg-dd-list { max-height: 240px; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.lg-dd-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border: none; background: none; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--slate-800); cursor: pointer; text-align: left;
}
.lg-dd-item:hover { background: var(--slate-50); }
.lg-dd-item.sel { background: var(--primary-light); color: var(--primary-dark); }
.lg-dd-nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-dd-ok { color: var(--primary); font-size: 15px; }
.lg-dd-ava {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
}
.lg-dd-ava.sm { width: 24px; height: 24px; font-size: 11.5px; }
.lg-dd-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--slate-500); }

/* ── PIN как блокировка iPhone: ряд клеток + скрытый input ── */
.pin-pad {
  display: flex; gap: 10px; justify-content: center; padding: 4px 0;
  cursor: text; outline: none;
}
.pin-cell {
  width: 42px; height: 50px; border-radius: 11px;
  border: 1.5px solid var(--slate-300); background: var(--slate-50);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.pin-cell.filled { border-color: var(--primary); background: #fff; }
.pin-cell.filled::after {
  content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--primary);
}
.pin-pad.focused .pin-cell:not(.filled):first-child,
.pin-pad.focused .pin-cell.filled + .pin-cell:not(.filled) {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.pin-hidden {
  /* 16px — НЕ КОСМЕТИКА (25.09.2026). Safari на iPhone увеличивает страницу,
     когда фокус попадает в поле со шрифтом меньше 16 пикселей: владелец начал
     вводить логин с телефона, и вёрстка «поехала». Чиним размером шрифта, а не
     запретом масштаба: запрет отнимает у людей возможность приблизить экран. */
  font-size: 16px;
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
  left: -9999px;
}
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.pin-pad.shake { animation: pin-shake .42s ease; }
.pin-pad.shake .pin-cell { border-color: var(--danger); }

/* кнопка «Войти» — резерв, незаметная */
/* Класс задавал серый текст, и когда кнопку входа сделали заметной (13.09.2026,
   просьба владельца), серые буквы остались на фиолетовом фоне — не читаются.
   Цвет теперь берётся от .btn-primary, здесь только отступ и размер. */
.lg-fallback { margin-top: 12px; height: 36px; font-size: 13px; }
#login-msg:not(:empty) { margin-top: 12px; }

/* ══ Адаптив ═════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tb-chips { display: none; }
  .only-narrow { display: inline-flex; }
}
@media (min-width: 1101px) { .only-narrow { display: none; } }

@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); width: 240px; }
  body.sb-min #sidebar { width: 240px; }
  body.sb-open #sidebar { transform: none; }
  body.sb-open #sb-backdrop { display: block; }
  #content, body.sb-min #content { margin-left: 0; }
  .sb-foot { display: none; }
  /* на телефоне сайдбар всегда полный — аккаунт показываем целиком */
  body.sb-min .sb-acct-row { padding: 6px 8px; justify-content: flex-start; background: rgba(148, 163, 184, .08); }
  body.sb-min .sb-acct-nm, body.sb-min .sb-logout { display: flex; }
  body.sb-min .sb-acct-nm { display: flex; }
  body.sb-min .sb-login { justify-content: flex-start; padding: 9px 10px; }
  body.sb-min .sb-login .lbl { display: inline; }
  /* на телефоне сайдбар всегда полный, даже если на десктопе был свёрнут */
  body.sb-min .sb-link { justify-content: flex-start; padding: 7px 10px; }
  body.sb-min .sb-link .lbl, body.sb-min .brand-txt { display: inline; }
  body.sb-min .sb-sub { padding-left: 20px; }
  body.sb-min .sb-brand { padding: 0 14px; justify-content: flex-start; }
  body.sb-min .sb-group {
    height: auto; overflow: visible; border-top: none;
    padding: 14px 10px 4px; margin: 0;
  }
  #topbar .tb-burger { display: inline-flex; }
  #topbar { padding: 0 12px; gap: 10px; }
  .tb-search { width: auto; flex: 1; min-width: 0; }
  .tb-user .nm-wrap { display: none; }
  #main { padding: 14px 12px 48px; }
  .banner-full { display: none; }
  .banner-short { display: inline; }
  .props { grid-template-columns: 1fr 1fr; }
  .cell-title .t, .cell-title .s { max-width: 130px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 19px; }
  .drawer { width: 100vw; }
  .dt-table th, .dt-table td { padding-left: 10px; padding-right: 10px; }
  /* на телефоне второстепенные колонки скрываем */
  .dt-table .hm { display: none; }
}

/* ══ Карта склада (этап 2): инлайн-SVG по эталону docs/etalon_map.html ══ */
#warehouse-map {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 10px;
}
#wm-svg { display: block; width: 100%; height: auto; font-family: inherit; }
/* Линейки по кромкам карты: сетка «уголок · верхняя · левая · полотно».
   Шкала вынесена за полотно (владелец 16.09.2026), поэтому подписи метров
   лежат на полях и не закрывают стеллажи. */
.wm-obertka { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 22px auto; }
.wm-obertka > #wm-svg { grid-column: 2; grid-row: 2; }
.wm-shkala { display: block; }
.wm-shkala-v { grid-column: 2; grid-row: 1; }
.wm-shkala-l { grid-column: 1; grid-row: 2; }
.wm-ugol { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--slate-400); }
/* карту тянут и приближают пальцем/колесом — браузеру прокрутку не отдаём */
#wm-svg { touch-action: none; }

/* комнаты и декор */
#wm-svg .wms-room { fill: #fbfcfe; stroke: var(--slate-600); stroke-width: 3; }
#wm-svg .wms-rlabel { font-size: 12px; font-weight: 800; fill: var(--slate-600); letter-spacing: .04em; }
#wm-svg .wms-win { fill: #bae6fd; }
#wm-svg .wms-solid { fill: #fff; stroke: var(--slate-400); stroke-width: 1.5; }
#wm-svg .wms-zlabel { font-size: 10.5px; font-weight: 700; fill: var(--slate-500); }
#wm-svg .wms-zone { fill: none; stroke: var(--slate-300); stroke-width: 1.5; stroke-dasharray: 6 4; }
#wm-svg .wms-zone-buf { stroke: #0284c7; }
#wm-svg .wms-buf-cap { font-size: 10px; font-weight: 800; fill: #075985; }
#wm-svg .wms-cap { font-size: 10px; font-weight: 700; fill: var(--slate-500); }
#wm-svg .wms-lbl { font-size: 8.5px; fill: var(--slate-400); }
#wm-svg .wms-shelf { fill: #f3e8ff; stroke: #7c3aed; stroke-width: 1.5; }
#wm-svg .wms-shelf-lbl { font-size: 8px; font-weight: 700; fill: #5b21b6; }
#wm-svg .wms-tbl { fill: #fffbeb; stroke: #a16207; stroke-width: 1.2; }
#wm-svg .wms-tbl-lbl { font-size: 9px; font-weight: 700; fill: #713f12; }
#wm-svg .wms-door { fill: #fff; stroke: #dc2626; stroke-width: 1.6; stroke-dasharray: 4 3; }
#wm-svg .wms-doorlbl { font-size: 8.5px; font-weight: 700; fill: #dc2626; }
#wm-svg .wms-ret { fill: #fee2e2; stroke: #dc2626; stroke-width: 2.2; }
#wm-svg .wms-ret-lbl { font-size: 10px; font-weight: 800; fill: #7f1d1d; }
#wm-svg .wms-junk { fill: #fff7f7; stroke: #dc2626; stroke-width: 1.5; stroke-dasharray: 5 4; }
#wm-svg .wms-junk-lbl { font-size: 9.5px; font-weight: 800; fill: #7f1d1d; }
#wm-svg .wms-wavy { fill: none; stroke: var(--slate-400); stroke-width: 2.5; }
#wm-svg .wms-pallets { fill: url(#wmHatch); stroke: var(--slate-400); stroke-width: 1.6; }
#wm-svg .wms-strong { font-size: 9.5px; font-weight: 800; fill: var(--slate-600);
  stroke: #fff; stroke-width: 3; paint-order: stroke; }
#wm-svg .wms-barrier { font-size: 9.5px; font-weight: 800; fill: #dc2626;
  stroke: #fff; stroke-width: 3; paint-order: stroke; }
#wm-svg .wms-bike { fill: none; stroke: var(--slate-400); stroke-width: 1.6; }

/* маркер места (из БД map_x/map_y) — палитра состояний 03 */
#wm-svg g.wm-mark { cursor: pointer; }
/* режим выделения рамкой: перекрестье поверх всего, чтобы курсор не обещал
   перетаскивание объекта — тяга сейчас рисует рамку (16.09.2026) */
#wm-svg.vydelyaem, #wm-svg.vydelyaem g.wm-mark, #wm-svg.vydelyaem g.wm-el { cursor: crosshair; }
/* режим замера: прицел вместо «пальца» — курсор больше не обещает карточку места */
#wm-svg.meryaem, #wm-svg.meryaem g.wm-mark, #wm-svg.meryaem g.wm-el { cursor: crosshair; }
#wm-svg g.wm-mark rect { fill: #fff; stroke: var(--slate-300); stroke-width: 1.5; }
#wm-svg g.wm-mark:hover rect { stroke-width: 2.5; }
#wm-svg g.wm-mark .adr { font-size: 9px; font-weight: 700; fill: var(--slate-700); text-anchor: middle; }
#wm-svg g.wm-mark .n { font-family: var(--mono); font-size: 8px; font-weight: 700;
  fill: var(--slate-500); stroke: #fff; stroke-width: 2.5; paint-order: stroke; }
#wm-svg g.wm-mark.sz-sm .adr { font-size: 7.5px; }
#wm-svg g.wm-mark.sz-lg .adr { font-size: 12px; }
#wm-svg g.wm-mark.st-occupied rect { fill: var(--success-light); stroke: var(--success); }
#wm-svg g.wm-mark.st-occupied .adr { fill: var(--success-dark); }
#wm-svg g.wm-mark.st-warn rect { fill: var(--warning-light); stroke: var(--warning); }
#wm-svg g.wm-mark.st-warn .adr { fill: var(--warning-dark); }
#wm-svg g.wm-mark.st-danger rect { fill: var(--danger-light); stroke: var(--danger); }
#wm-svg g.wm-mark.st-danger .adr { fill: var(--danger-dark); }
#wm-svg g.wm-mark.st-blocked rect { fill: var(--slate-100); stroke: var(--slate-200); }
#wm-svg g.wm-mark.st-blocked .adr { fill: var(--slate-400); }

/* фильтры: чужое ИП — пунктир+притухание, поиск — подсветка/притухание */
#wm-svg g.wm-mark.foreign { opacity: .45; }
#wm-svg g.wm-mark.foreign rect { stroke-dasharray: 3 2; }
#wm-svg g.wm-mark.hl rect { stroke: var(--primary); stroke-width: 3; }
#wm-svg g.wm-mark.dim { opacity: .22; }

/* drag-редактор (только админ) */
#wm-svg.editing g.wm-mark { cursor: grab; touch-action: none; }
#wm-svg.editing g.wm-mark.dragging { cursor: grabbing; opacity: .85; }
#wm-svg.editing g.wm-mark rect { stroke-dasharray: 4 2; }

/* конструктор: элементы карты из БД (зоны/подписи/декор) */
#wm-svg g.wm-el { pointer-events: none; }            /* вне редактора декор не перехватывает клики мест */
#wm-svg g.wm-el .el-box { fill: none; stroke: var(--slate-300); stroke-width: 1.5; stroke-dasharray: 6 4; }
#wm-svg g.wm-el.el-decor .el-box { fill: #fffbeb; stroke: #a16207; stroke-width: 1.2; stroke-dasharray: none; }
/* Стена, дверь, окно (10.09.2026). Помещение узнаётся по контуру, поэтому
   у стены сплошная заливка, у окна светлая полоса, у двери — дуга открывания:
   так план читается без подписей, как обычный чертёж. */
#wm-svg g.wm-el.el-wall .el-box { fill: var(--slate-400); stroke: var(--slate-600); stroke-width: 1; stroke-dasharray: none; }
#wm-svg g.wm-el.el-door .el-box { fill: #fff; stroke: #b45309; stroke-width: 2; stroke-dasharray: none; }
#wm-svg g.wm-el.el-door .el-swing { stroke: #b45309; stroke-width: 1.2; stroke-dasharray: 3 2; }
#wm-svg g.wm-el.el-window .el-box { fill: #e0f2fe; stroke: #0284c7; stroke-width: 1.5; stroke-dasharray: none; }
#wm-svg g.wm-el.el-window .el-glass { stroke: #0284c7; stroke-width: 1; }
#wm-svg g.wm-el .el-cap { font-size: 10px; font-weight: 700; fill: var(--slate-500); }
#wm-svg g.wm-el .el-cap-in { font-size: 9px; font-weight: 700; fill: #713f12; }
#wm-svg g.wm-el .el-text { font-size: 11px; font-weight: 800; fill: var(--slate-600); letter-spacing: .03em; }
#wm-svg g.wm-el.dim { opacity: .25; }
#wm-svg g.wm-el .el-resize { display: none; }
/* в редакторе элементы активны: можно тащить, ресайзить уголком, кликать */
#wm-svg.editing g.wm-el { pointer-events: all; cursor: grab; touch-action: none; }
#wm-svg.editing g.wm-el .el-box { stroke: var(--primary); stroke-dasharray: 4 2; }
#wm-svg.editing g.wm-el.dragging { cursor: grabbing; opacity: .85; }
#wm-svg.editing g.wm-el .el-resize { display: block; fill: var(--primary); cursor: nwse-resize; opacity: .8; }

/* формы маркеров по типу: FLOOR (палета) толще, SHELF (поштучно) тоньше */
#wm-svg g.wm-mark .mk-floor { stroke-width: 2.4; }
#wm-svg g.wm-mark .mk-pallet { stroke: var(--slate-400); stroke-width: 1.1; }
#wm-svg g.wm-mark.st-occupied .mk-pallet { stroke: var(--success); }
#wm-svg g.wm-mark .mk-shelf { stroke-width: 1; stroke-dasharray: 2 1.5; }
#wm-svg g.wm-mark.zn-FLOOR rect { fill: #fff; }
#wm-svg g.wm-mark.zn-SHELF .mk-shelf { fill: #faf5ff; stroke: #a78bda; }
#wm-svg g.wm-mark.zn-SHELF.st-occupied .mk-shelf { fill: var(--success-light); stroke: var(--success); }
/* выделенные в редакторе — синяя жирная обводка + лёгкая подсветка */
#wm-svg.editing g.wm-mark.picked rect,
#wm-svg.editing g.wm-mark.picked .mk-floor,
#wm-svg.editing g.wm-mark.picked .mk-shelf { stroke: var(--primary); stroke-width: 3; stroke-dasharray: none; }
#wm-svg.editing g.wm-el.picked .el-box { stroke: var(--primary); stroke-width: 2.5; }
#wm-svg.editing g.wm-el.picked .el-text { fill: var(--primary-dark); }
/* рамка выделения области */
#wm-svg .wm-band { fill: rgba(79, 70, 229, .08); stroke: var(--primary); stroke-width: 1.2; stroke-dasharray: 5 3; pointer-events: none; }

/* плавающая панель массовых действий над картой */
.wm-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 4px; font-size: 13px; }
.wm-selbar b { color: var(--primary-dark); }
.input-sm { height: 30px; padding: 0 8px; font-size: 13px; }

/* схема ярусов стеллажей */
.tiers-wrap { display: flex; gap: 18px; flex-wrap: wrap; }
.tier-stack { border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; min-width: 220px; }
.tier-stack-h { background: var(--slate-100); font-weight: 700; font-size: 13px; padding: 6px 10px; color: var(--slate-700); }
.tier-row { display: flex; align-items: stretch; border-top: 1px solid var(--slate-100); }
.tier-badge { flex: none; width: 64px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--slate-500); background: #fbfcfe; border-right: 1px solid var(--slate-100); }
.tier-cells { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; flex: 1; }
.tier-cell { position: relative; min-width: 30px; height: 28px; padding: 0 5px; border-radius: 5px;
  border: 1.5px solid var(--slate-300); background: #fff; font-size: 10px; font-weight: 700;
  color: var(--slate-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tier-cell:hover { border-color: var(--primary); }
.tier-cell i { position: absolute; top: -5px; right: -4px; background: var(--slate-700); color: #fff;
  font-style: normal; font-size: 8px; font-weight: 700; border-radius: 6px; padding: 0 3px; line-height: 12px; }
.tier-cell.st-occupied { background: var(--success-light); border-color: var(--success); color: var(--success-dark); }
.tier-cell.st-warn { background: var(--warning-light); border-color: var(--warning); }
.tier-cell.st-danger { background: var(--danger-light); border-color: var(--danger); }
.tier-cell.st-blocked { background: var(--slate-100); color: var(--slate-400); }

/* легенда в тулбаре */
.wm-legend { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--slate-500); flex-wrap: wrap; }
.wm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.wm-legend .lg { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--slate-300); display: inline-block; }
.wm-legend .lg.st-occupied { background: var(--success-light); border-color: var(--success); }
.wm-legend .lg.st-warn { background: var(--warning-light); border-color: var(--warning); }
.wm-legend .lg.st-danger { background: var(--danger-light); border-color: var(--danger); }
.wm-legend .lg.st-blocked { background: var(--slate-100); }

/* вкладки внутри карточки товара (Block 2.3) */
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; flex-wrap: wrap; }
.ptab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--slate-500); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ptab:hover { color: var(--slate-800); }
.ptab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* фото товара в карточке (Block 2.1) */
.prod-photo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.prod-photo-box { width: 120px; height: 120px; flex: none; border: 1px solid var(--slate-200);
  border-radius: var(--radius); overflow: hidden; background: var(--slate-50);
  display: flex; align-items: center; justify-content: center; }
.prod-photo-box img { width: 100%; height: 100%; object-fit: cover; }
.prod-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--slate-300); font-size: 12px; }
.prod-photo-empty .bi { font-size: 28px; }
.prod-photo-act { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* крупное превью (шапка сборки ФБС) */
.thumb-lg { width: 56px; height: 56px; border-radius: var(--radius); }

/* карточка места */
.pd-prod { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pd-hist { font-size: 12px; }
.pd-hist-row {
  display: grid; grid-template-columns: 110px 64px 1fr 40px 90px minmax(0, 1.4fr);
  gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--slate-100); align-items: center;
}
.pd-hist-row .in { color: var(--success-dark); font-weight: 600; }
.pd-hist-row .out { color: var(--slate-500); font-weight: 600; }
.chip-place { height: 22px; padding: 0 8px; font-size: 11px; }

@media (max-width: 760px) {
  #warehouse-map { padding: 6px; }
  .pd-hist-row { grid-template-columns: 90px 56px 1fr; }
  .pd-hist-row > :nth-child(n+4) { display: none; }
}

/* ══ Приёмка (этап 3): мастер ═══════════════════════════════════════ */
.scan-input { height: 48px; font-family: var(--mono); font-size: 17px; padding: 0 14px; letter-spacing: .3px; width: 100%; }
.iw-num { height: 46px; font-size: 20px; font-weight: 700; text-align: center; font-family: var(--mono); }
.cand { display: flex; gap: 12px; align-items: center; border: 1px solid var(--slate-200);
  border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; background: #fff; }
.cand .grow { flex: 1; min-width: 0; }
#iw-cands .cand { cursor: pointer; }
#iw-cands .cand:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.sg-option { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--slate-200);
  border-radius: var(--radius); padding: 12px 14px; margin-top: 8px; cursor: pointer; background: #fff; }
.sg-option:hover { border-color: var(--primary); }
.sg-option.sel { border-color: var(--primary); background: var(--primary-light); }
.sg-option .lbl { font-size: 19px; font-weight: 700; min-width: 64px; font-family: var(--mono); }
.iw-ready { text-align: center; padding: 22px 10px; }
.iw-ready .big { font-size: 20px; font-weight: 700; margin-top: 10px; color: var(--slate-900); }
.iw-ready .empty-ic { margin: 0 auto; }
@media (max-width: 760px) {
  .iw-num { height: 52px; font-size: 24px; }
  .scan-input { height: 54px; font-size: 18px; }
  .sg-option { padding: 14px; }
}

/* ══ КИЗ (этап 4): дроп-зона, плашки свежести, бейджи вкладок ═══════ */
.dropzone {
  border: 2px dashed var(--slate-300); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; font-size: 13px; color: var(--slate-500);
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--slate-400); }
.dropzone.drag { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.dropzone i { font-size: 22px; display: block; margin-bottom: 6px; color: var(--slate-400); }
.dropzone.drag i { color: var(--primary); }

.kiz-fresh { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kiz-fresh .fcard {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--slate-200); background: #fff; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; cursor: pointer;
}
.kiz-fresh .fcard:hover { border-color: var(--slate-400); }
.kiz-fresh .fcard.warn { border-color: #fde68a; background: var(--warning-light); }

.tab .bdg { margin-left: 5px; }
.tab .bdg.badge { height: 17px; padding: 0 6px; font-size: 10.5px; }

@media (max-width: 900px) {
  #kz-ctl-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; }
}

/* ═══ ФБС (этап 5) ═══ */
.fbs-sup .fbs-sup-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fbs-sup-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.fbs-prog{margin:8px 0}
.fbs-prog .progress{margin-top:4px}
.fbs-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fbs-sup:hover{box-shadow:0 2px 10px rgba(15,23,42,.08)}
/* ЧИП СКОРОСТИ/КОМИССИИ (владелец 08.08): цвет = зона, читается без слов */
.sp-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  padding:3px 10px;border-radius:999px;letter-spacing:.2px;white-space:nowrap}
.sp-chip.sp-best{background:#065f46;color:#fff}          /* −5: тёмно-зелёный */
.sp-chip.sp-good{background:#bbf7d0;color:#065f46}        /* −3.5: зелёный */
.sp-chip.sp-base{background:var(--slate-200,#e2e8f0);color:var(--slate-600,#475569)}
.sp-chip.sp-bad{background:#dc2626;color:#fff}            /* штраф: красный */
.sp-chip.sp-wait{background:var(--slate-100,#f1f5f9);color:var(--slate-500,#64748b);
  border:1px dashed var(--slate-300,#cbd5e1)}

/* плитка показателя (комиссия за скорость, владелец 08.08) */
.stat-tile{background:var(--slate-50,#f8fafc);border:1px solid var(--border,#e2e8f0);
  border-radius:12px;padding:10px 16px;min-width:150px}
.stat-tile .stat-v{font-size:20px;font-weight:800;line-height:1.2}
.stat-tile .stat-l{font-size:11.5px;color:var(--slate-500,#64748b);margin-top:2px}

/* КУДА СДАЁМ — плашка в углу карточки (владелец 07.08): «не куча иконок, а сразу
   видно». Без иконки, одно слово, цвет несёт смысл. */
.drop-chip{position:absolute;top:0;right:0;z-index:2;font-size:11px;font-weight:800;
  letter-spacing:.6px;padding:3px 9px;border-radius:0 12px 0 12px;line-height:1.4;
  background:var(--slate-200,#e2e8f0);color:var(--slate-600,#475569)}
.drop-chip.is-pvz{background:#f59e0b;color:#fff}
.drop-chip.big{position:static;display:inline-block;font-size:13px;padding:4px 12px;
  border-radius:8px;vertical-align:middle}
/* выбрана к отгрузке (владелец 07.08): видно с одного взгляда, что поедет */
.fbs-sup-on{border-color:var(--primary,#6366f1);box-shadow:0 0 0 2px rgba(99,102,241,.18)}
.fbs-sel input{width:18px;height:18px;cursor:pointer}

.fbs-plan{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.fbs-plan-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:#f8fafc}
.fbs-plan-row.return{border-left:4px solid #d97706;background:#fffbeb}
.fbs-plan-row.partial{border-left:4px solid #4f46e5}
.fbs-plan-row.full{border-left:4px solid #16a34a}
.fbs-plan-place{font-weight:600}
.fbs-plan-take b{font-size:18px;color:#4f46e5}
.fbs-box-scan,.fbs-scan2{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fbs-scan2 .scan-input{font-size:16px}
.fbs-pack-prog{margin-bottom:10px}
.fbs-pick-foot{position:sticky;bottom:0;margin-top:16px;padding-top:10px}

.fbs-tl{display:flex;flex-direction:column;gap:0}
.fbs-tl-row{display:flex;gap:12px;padding:6px 0;position:relative}
.fbs-tl-row::before{content:"";position:absolute;left:5px;top:18px;bottom:-6px;width:2px;background:#e2e8f0}
.fbs-tl-row:last-child::before{display:none}
.fbs-tl-dot{width:12px;height:12px;border-radius:50%;background:#4f46e5;margin-top:4px;flex:none;z-index:1}
.fbs-tl-row.skipped .fbs-tl-dot{background:#cbd5e1}
.fbs-tl-body{display:flex;flex-direction:column}

@media(max-width:800px){
  .fbs-plan-row{grid-template-columns:1fr;gap:4px;font-size:16px}
  .fbs-plan-take b{font-size:22px}
  .fbs-sup-h{flex-direction:column}
  .fbs-sup-meta{align-items:flex-start}
}

/* ═══ Раздел ФБО (этап 6) ═══ */
.fbo-dots{display:inline-flex;gap:4px;align-items:center;margin-top:4px}
.fbo-dot{width:8px;height:8px;border-radius:50%;background:var(--slate-200);display:inline-block}
.fbo-dot.on{background:var(--primary)}
/* ── ФБО-помощник: таблица коэффициентов приёмки «куда и когда везти» ── */
.coef-tbl td, .coef-tbl th { text-align:center; font-variant-numeric:tabular-nums; }
.coef-tbl td.coef-wh, .coef-tbl th:first-child { text-align:left; white-space:nowrap; }
.coef-tbl td.coef-good   { background:var(--success-light); color:var(--success-dark); font-weight:600; }
.coef-tbl td.coef-paid   { background:var(--warning-light); color:var(--warning-dark); }
.coef-tbl td.coef-closed { background:var(--slate-100); color:var(--slate-400); }
.coef-tbl td.coef-empty  { color:var(--slate-300); }
.coef-tbl td.coef-best   { font-weight:700; }
/* ФИЧА 3 — табло складов ВБ с фильтрами: регион/срок приёмки + подсветка выгодной строки */
.coef-tbl td.coef-reg, .coef-tbl td.coef-acc { text-align:left; white-space:nowrap; color:var(--slate-600); }
.coef-tbl tr.coef-row-good td.coef-wh { box-shadow:inset 3px 0 0 var(--success); }
.coef-tbl tr.coef-row-good td.coef-wh b { color:var(--success-dark); }
.fbo-steps{margin:6px 0 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--slate-700)}
.fbo-steps li{line-height:1.4}
.fbo-timeline{display:flex;flex-direction:column;gap:2px}
.fbo-tl-step{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-left:2px solid var(--slate-100);padding-left:12px;margin-left:6px}
.fbo-tl-step.skipped{opacity:.6}
.fbo-tl-dot{color:var(--primary);font-size:15px;line-height:1.2}
.fbo-tl-step.skipped .fbo-tl-dot{color:var(--slate-400)}
.fbo-tl-body{display:flex;flex-direction:column;gap:1px}
.fbo-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.fbo-checklist li{display:flex;align-items:center;gap:8px;font-size:13px}
.fbo-checklist li.ok{color:var(--slate-700)}
.fbo-checklist li.ok .bi{color:#16a34a}
.fbo-checklist li.no{color:var(--slate-500)}
.fbo-checklist li.no .bi{color:var(--slate-300)}
/* резерв ФБО на карте — фиолетовый */
#wm-svg .wm-mark.fbo-reserved rect{fill:#ede9fe;stroke:#7c3aed}

/* ═══════════════════ Этап 7: Возвраты (раздел #returns, #pvz) ═══════════════════
   Утилитарные классы поверх дизайн-системы (Inter, slate, индиго). Без эмодзи. */
.tiles-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-bottom: 14px; }
.tiles-row .kpi { flex-direction: column; align-items: flex-start; }
.kpi-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px;
  font-weight: 700; line-height: 1.15; color: var(--slate-900); }
.kpi-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-500); margin-top: 3px; }
.kpi.kpi-warn { border-color: #f59e0b; background: #fffbeb; }
.kpi.kpi-warn .kpi-n { color: #b45309; }
.kpi.kpi-bad { border-color: #ef4444; background: #fef2f2; }
.kpi.kpi-bad .kpi-n { color: #b91c1c; }

/* плотная таблица (Ozon Seller density) */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { height: 36px; padding: 6px 12px; text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--slate-500);
  border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.tbl td { height: 40px; padding: 5px 12px; border-bottom: 1px solid var(--slate-100);
  vertical-align: middle; color: var(--slate-800); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--slate-50); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* minmax(0, …): иначе широкая таблица распирает колонку шире экрана и карточка
   уезжает за правый край (главная на iPhone, 01.10.2026) */
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.kv { padding: 4px 0; font-size: 13px; color: var(--slate-700); }
.kv b { color: var(--slate-900); font-weight: 600; margin-right: 4px; }

.checklist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-800);
  cursor: pointer; padding: 6px 8px; border: 1px solid var(--slate-200); border-radius: var(--radius);
  background: #fff; min-height: 40px; }
.chk input { width: 18px; height: 18px; }

.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-row > label { font-size: 12px; font-weight: 600; color: var(--slate-600); }

.btn-lg { font-size: 16px; padding: 14px 20px; min-height: 56px; width: 100%; justify-content: center; }
.drawer.wide { width: 560px; max-width: 100vw; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 40; }

/* ══ Этапы 8–9: Люди / Моя смена / Мотивация / Дашборд / Настройки ════ */
/* модалки с шапкой/телом/подвалом (карточка сотрудника, детализация) */
.modal:has(.modal-h) { width: 620px; }
.modal-h { display: flex; align-items: center; gap: 10px; margin: -20px -20px 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--slate-200); }
.modal-h h2 { font-size: 16px; font-weight: 700; color: var(--slate-900); margin: 0; flex: 1; }
.modal-b { display: flex; flex-direction: column; gap: 4px; }
.modal-b label { display: flex; flex-direction: column; gap: 5px; font-size: 12px;
  font-weight: 600; color: var(--slate-600); }
/* ПОДПИСЬ-СТРОКА: галочка слева, текст справа. Правило выше раскладывает любой
   label окна КОЛОНКОЙ — это верно для полей ввода (подпись над полем), но для
   галочки даёт квадрат НАД текстом и по центру: `align-items:center` в
   колоночной раскладке центрирует по горизонтали. Начальник склада 27.09.2026
   прислала снимок: «очень не удобный вид, так везде, где надо что-либо
   выбрать отметив галочки». */
.modal-b label.lbl-str { flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--slate-700); }
.modal-f { display: flex; align-items: center; gap: 8px; margin: 16px -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--slate-200); }
.modal-f .spacer { flex: 1; }
.sect-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-500); margin: 14px 0 8px; }

/* строка алертов на дашборде */
.alert-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; border: 1px solid; }
.banner > span { flex: 1; }
.banner .btn { flex: none; }
.banner-danger { background: var(--danger-light); color: var(--danger-dark); border-color: #fecaca; }
.banner-warn { background: var(--warning-light); color: var(--warning-dark); border-color: #fde68a; }

/* «Моя смена»: на широких экранах ДВЕ колонки.
   ЛЕВО — заработок + KPI-ряд + рейтинг; ПРАВО — длинная «Лента операций»,
   она заполняет правую половину на всю высоту (раньше уходила вниз, а справа
   зияла пустота). На узких — схлопывается в одну колонку (см. медиа ниже). */
.myday { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
  align-items: start; max-width: 1320px; }
.myday-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.myday-col > .card,
.myday-col > .kpi-row { margin: 0; }   /* ритм задаёт gap контейнера, не margin */
/* «Лента операций» в правой колонке тянется на всю высоту левой */
.myday-col-side { position: sticky; top: 14px; }
@media (max-width: 1080px) {
  /* планшет/телефон: одна колонка, порядок осмыслен (заработок→KPI→рейтинг→лента) */
  .myday { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
  .myday-col { gap: 14px; }
  .myday-col-side { position: static; }
}

/* единица измерения рядом с крупным числом KPI (шт / шт/ч) */
.kpi-unit { font-family: var(--font); font-size: 12.5px; font-weight: 600;
  color: var(--slate-400); margin-left: 2px; }

/* «Моя смена»: блок заработка */
.earn-hero { padding: 14px 16px; background: var(--primary-light); border-radius: var(--radius); margin-bottom: 12px; }
.earn-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-dark); }
.earn-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800;
  color: var(--primary-dark); line-height: 1.1; margin: 2px 0 4px; }
.stat-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--slate-700); margin: 8px 0; }
.stat-line b { color: var(--slate-900); }
.row-void td { text-decoration: line-through; color: var(--slate-400); }
.row-void .badge { text-decoration: none; }
.fund-line { padding: 10px 14px; border-top: 1px solid var(--slate-200); font-size: 14px; color: var(--slate-700); text-align: right; }
.fund-line b { color: var(--slate-900); font-family: var(--mono); font-size: 16px; }
.toggle-row { flex-direction: row !important; align-items: center; gap: 8px; }
.toggle-row input { width: 18px; height: 18px; }

/* ярус не задан — подсветка, чтобы руководитель проставил (v10) */
.tier-row-unset { background: var(--warning-light); }
.tier-badge-unset { color: var(--warning-dark); background: var(--warning-light); width: auto; padding: 0 8px; gap: 4px; }
.tier-row-unset .tier-cell { border-color: var(--warning); border-style: dashed; }

/* ════════════════ ГЛАВНАЯ-ДАШБОРД (командный центр) ════════════════
   KPI-плитки с цветной полоской и иконкой, графики (инлайн-SVG), пончик зон,
   плотная таблица с фильтрами-чипсами, срочные задания. */

/* KPI: цветная верхняя полоска + микро-иконка слева от подписи */
.kpi-card { display: flex; flex-direction: column; position: relative; overflow: hidden;
  text-decoration: none; color: inherit; padding: 15px 16px; }
.kpi-card .kpi-value { flex: 1 0 auto; }   /* подвал прижат к низу — карточки ровные */
.kpi-card:hover { text-decoration: none; color: inherit; border-color: var(--slate-300); }
.kpi-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--primary)); }
.kpi-top { display: flex; align-items: center; gap: 8px; color: var(--slate-500);
  font-size: 11.5px; font-weight: 600; margin-bottom: 9px; }
.kpi-mic { width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  color: var(--accent, var(--primary)); background: var(--accentbg, var(--primary-light)); }
.kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px;
  font-weight: 700; font-family: var(--mono); padding: 2px 7px; border-radius: 20px; }
.kpi-trend.t-up { color: var(--success-dark); background: var(--success-light); }
.kpi-trend.t-down { color: var(--danger-dark); background: var(--danger-light); }
.kpi-trend.t-flat { color: var(--slate-600); background: var(--slate-100); }
.kpi-spark { display: block; flex: none; align-self: flex-end; opacity: .9; }
/* подвал плитки: подпись слева, спарклайн прижат вправо. min-height держит
   одинаковую высоту карточек даже там, где спарклайна нет (нет «пустоты»). */
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; margin-top: 10px; min-height: 22px; }
.kpi-foot .kpi-sub { margin-top: 0; }

/* ровный ряд из трёх KPI одинаковой ширины/высоты («Моя смена») */
.kpi-row-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row-3 > .kpi { height: 100%; }
@media (max-width: 720px) { .kpi-row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kpi-row-3 { grid-template-columns: 1fr; } }

/* столбчатый график «Динамика отгрузок»: легенда + сами столбики */
.dash-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 4px 10px;
  font-size: 12px; color: var(--slate-600); }
.dl-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.dl-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.dash-bars-wrap { padding: 0 2px; }
.dash-bars { display: block; width: 100%; }

/* сетка графиков: динамика шире пончика */
.grid-dash { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid-dash { grid-template-columns: minmax(0, 1fr); } }

/* «Мотивация»: KPI-ряд во всю ширину сверху, ниже — ДВЕ колонки.
   ЛЕВО — графики (выработка + разбивка), ПРАВО — рейтинг + платёжная таблица.
   Раньше рейтинг и таблица уходили вниз, и под графиками была пустота справа. */
.metrics-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
  align-items: start; max-width: 1320px; }
.metrics-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.metrics-col > .card,
.metrics-col #metrics-body .card { margin: 0; }
.metrics-col #metrics-body:empty { display: none; }
/* внутри левой колонки графики идут вертикально друг под другом */
.metrics-two .grid-dash { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) {
  .metrics-two { display: flex; flex-direction: column; gap: 16px; max-width: none; }
  .metrics-two .grid-dash { display: grid; grid-template-columns: 1.55fr 1fr; }
}
@media (max-width: 900px) {
  .metrics-two .grid-dash { grid-template-columns: 1fr; }
}

/* честное пустое состояние «график появится позже» */
.dash-soon { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 16px; min-height: 200px; color: var(--slate-500); }
.dash-soon-ic { width: 52px; height: 52px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px;
  background: var(--slate-100); color: var(--slate-400); }
.dash-soon-t { font-size: 14px; font-weight: 600; color: var(--slate-700); }
.dash-soon-d { font-size: 12.5px; color: var(--slate-400); max-width: 320px; margin-top: 4px; }

/* пончик загрузки зон + бары-легенда */
.zones { display: flex; align-items: center; gap: 20px; padding: 4px 4px 0; flex-wrap: wrap; }
.zone-donut { flex: none; }
.zone-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.zl-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.zl-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.zl-name { font-weight: 600; color: var(--slate-700); width: 118px; flex: none; }
.zl-bar { flex: 1; height: 7px; border-radius: 6px; background: var(--slate-100); overflow: hidden; margin: 0 4px; }
.zl-bar span { display: block; height: 100%; border-radius: 6px; }
.zl-pct { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--slate-700); width: 48px; text-align: right; flex: none; }

/* фильтры-чипсы над таблицей «Заказы и поставки» */
.dash-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.dash-filters .fgrp { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dash-filters .fl { font-size: 11px; color: var(--slate-500); font-weight: 700; margin-right: 1px; }
.dash-filters .chip { padding: 3px 10px; font-size: 11.5px; }
.dash-filters .fdiv { width: 1px; height: 18px; background: var(--slate-200); margin: 0 4px; }
.dash-tfoot { padding: 9px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--slate-500); border-top: 1px solid var(--slate-200); }

/* колонки таблицы: артикул-моно, тип ФБС/ФБО, КИЗ-статус */
.art { font-family: var(--mono); font-size: 11.5px; color: var(--slate-500); }
.type { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 5px; }
.type.fbs { background: #ecfeff; color: var(--info-dark); border: 1px solid #a5f3fc; }
.type.fbo { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.kiz { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--slate-500); font-weight: 600; white-space: nowrap; }
.kiz i { font-size: 12px; }
.kiz.req { color: var(--warning-dark); }
.kiz.bad { color: var(--danger-dark); }
.kiz.ok { color: var(--success-dark); }

/* срочные задания: цветная приоритет-полоска + иконка-плашка */
.task { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border-bottom: 1px solid var(--slate-100); }
.task:last-child { border-bottom: 0; }
.task .t-pri { width: 5px; align-self: stretch; border-radius: 4px; flex: none; }
.task .t-pri.p-hi { background: var(--danger); }
.task .t-pri.p-md { background: var(--warning); }
.task .t-pri.p-lo { background: var(--info); }
.task .t-ic { width: 36px; height: 36px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 16px; flex: none; }
.task .t-ic.ic-red { background: var(--danger-light); color: var(--danger-dark); }
.task .t-ic.ic-amber { background: var(--warning-light); color: var(--warning-dark); }
.task .t-ic.ic-blue { background: var(--info-light); color: var(--info-dark); }
.task .t-ic.ic-indigo { background: var(--primary-light); color: var(--primary-dark); }
.task .t-main { flex: 1; min-width: 0; }
.task .t-title { font-weight: 600; color: var(--slate-800); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .t-meta { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .t-go { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--slate-200);
  display: flex; align-items: center; justify-content: center; color: var(--slate-500); font-size: 14px; flex: none; cursor: pointer; }
.task { cursor: pointer; }
.task:hover { background: var(--slate-50); }

/* ══ Карточка товара — широкая страница ══════════════════ */
.pc-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.crumb-mini { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--slate-500); min-width: 0; }
.crumb-mini i { font-size: 11px; color: var(--slate-300); }
.crumb-mini b { color: var(--slate-900); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-head { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-bottom: 18px; align-items: start; }
.pc-photo { padding: 14px; }
.pc-photo-main { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius);
  background: linear-gradient(135deg, #eef2ff, #f8fafc); border: 1px solid var(--slate-200);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pc-photo-main img { width: 100%; height: 100%; object-fit: cover; }
.pc-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c7d2fe; font-size: 56px; }
.pc-photo-empty span { font-size: 12px; color: var(--slate-400); }
.pc-photo-tag { position: absolute; top: 12px; left: 12px; }
.pc-photo-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pc-info { padding: 18px 22px; }
.pc-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--slate-900); }
.pc-sub { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin-top: 18px; }
.pc-specs .spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-specs .spec .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); font-weight: 700; }
.pc-specs .spec .v { font-size: 13.5px; font-weight: 700; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; }
.pc-specs .spec .v.mono, .pc-specs .spec .v .mono { font-family: var(--mono); font-weight: 600; }
.pc-specs .spec .v.warn { color: var(--warning-dark); }
.pc-specs .spec .v a { color: var(--primary-dark); }

.pc-strip { display: flex; margin-top: 18px; border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; }
.pc-strip .ss { flex: 1; padding: 12px 16px; border-right: 1px solid var(--slate-200); }
.pc-strip .ss:last-child { border-right: 0; }
.pc-strip .s-lbl { font-size: 11px; color: var(--slate-500); font-weight: 600; }
.pc-strip .s-val { font-size: 21px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; }
.pc-strip .s-val .s-u { font-size: 13px; color: var(--slate-400); font-weight: 600; }
.pc-strip .s-green { color: var(--success-dark); } .pc-strip .s-amber { color: var(--warning-dark); }
.pc-strip .s-indigo { color: var(--primary-dark); } .pc-strip .s-slate { color: var(--slate-700); }

.pc-tabcard { overflow: hidden; }
.pc-tabs { padding: 0 18px; margin-bottom: 0; }
.pc-tab { display: flex; align-items: center; gap: 7px; padding: 13px 16px; font-size: 13.5px; }
.pc-tab .cnt { font-family: var(--mono); font-size: 11px; background: var(--slate-100); color: var(--slate-600); padding: 0 7px; border-radius: 20px; font-weight: 700; }
.pc-tab.active .cnt { background: var(--primary-light); color: var(--primary-dark); }
.pc-tabbody { padding: 18px 22px; }

.sec-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-400);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.sec-title i { color: var(--primary); }
.sec-title .spacer { flex: 1; }
.cols-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }

/* плотная таблица карточки */
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate-500); padding: 8px 14px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl td { padding: 8px 14px; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:nth-child(even) { background: var(--slate-50); }
.tbl tbody tr:hover { background: var(--primary-light); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl td.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl tfoot td { padding: 9px 14px; border-top: 2px solid var(--slate-200); font-weight: 700; background: var(--slate-50); color: var(--slate-800); }
.tbl tfoot td.r { text-align: right; font-family: var(--mono); }
.cell-code { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; color: var(--slate-900); }
.cell-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.cell-ic.ic-pal { background: var(--info-light); color: var(--info-dark); }
.cell-ic.ic-shelf { background: var(--primary-light); color: var(--primary-dark); }
.cell-ic.ic-buf { background: var(--warning-light); color: var(--warning-dark); }
.tier { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--slate-600); background: var(--slate-100);
  border: 1px solid var(--slate-200); padding: 1px 8px; border-radius: 6px; }
.zona { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--slate-600); }
.zona i { color: var(--slate-400); font-size: 13px; }
.delta.p { color: var(--success-dark); font-weight: 700; } .delta.m { color: var(--danger-dark); font-weight: 700; }
.op { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.op i { font-size: 13px; }
.op.in { color: var(--success-dark); } .op.out { color: var(--danger-dark); } .op.mv { color: var(--info-dark); } .op.rs { color: var(--warning-dark); }
.tbl .who { display: inline-flex; align-items: center; gap: 6px; }
.tbl .who .av { width: 20px; height: 20px; border-radius: 50%; background: var(--slate-200); color: var(--slate-600);
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex: none; }

/* пончик-сводка */
.donut-box { display: flex; align-items: center; gap: 18px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 18px; }
.pc-donut-empty { width: 132px; height: 132px; border-radius: 50%; border: 16px solid var(--slate-100); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--slate-400); font-size: 24px; }
.pc-donut-empty span { font-size: 11px; margin-top: 4px; }
.donut-leg { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.dl-row { display: flex; align-items: center; gap: 9px; }
.dl-row .dot { width: 11px; height: 11px; border-radius: 4px; }
.dl-row .nm { font-weight: 600; color: var(--slate-700); }
.dl-row .vl { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.dl-row.tot { border-top: 1px solid var(--slate-200); padding-top: 11px; }
.mini-stats { display: flex; gap: 10px; margin-top: 14px; }
.mini-stat { flex: 1; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-sm); padding: 11px 13px; }
.mini-stat .l { font-size: 11px; color: var(--slate-500); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mini-stat .n { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-top: 5px; color: var(--slate-800); }

/* КИЗ блок */
.kiz-banner { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--warning-light); border: 1px solid #fde68a; margin-bottom: 16px; }
.kiz-banner.ok { background: var(--success-light); border-color: #a7f3d0; }
/* режим требования КИЗ: warn = «всегда» (амбер, как база); muted = «никогда» (серый) */
.kiz-banner.kiz-banner-warn { background: var(--warning-light); border-color: #fde68a; }
.kiz-banner.kiz-banner-muted { background: var(--slate-100, #f1f5f9); border-color: var(--slate-200, #e2e8f0); }
.kiz-banner .kb-ic { width: 42px; height: 42px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--warning-dark); flex: none; }
.kiz-banner.ok .kb-ic { color: var(--success-dark); }
.kiz-banner.kiz-banner-muted .kb-ic { color: var(--slate-500, #64748b); }
.kiz-banner .kb-t { font-weight: 700; color: var(--slate-900); font-size: 14px; }
.kiz-banner .kb-s { font-size: 12px; color: var(--slate-600); margin-top: 2px; }
.kiz-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kc { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 14px 16px; }
.kc .kc-l { font-size: 11px; color: var(--slate-500); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kc .kc-v { font-family: var(--mono); font-size: 26px; font-weight: 700; margin-top: 7px; letter-spacing: -.02em; }

/* таймлайн событий */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--slate-200); }
.tl-row { position: relative; padding: 0 0 18px; }
.tl-row:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -24px; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--slate-200); }
.tl-dot.d-in { background: var(--success); } .tl-dot.d-out { background: var(--primary); }
.tl-dot.d-mv { background: var(--info); } .tl-dot.d-rs { background: var(--warning); }
.tl-main { display: flex; align-items: flex-start; gap: 8px; }
.tl-t { font-weight: 600; color: var(--slate-800); font-size: 13px; }
.tl-m { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.tl-q { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.tl-q.qty-pos { color: var(--success-dark); } .tl-q.qty-neg { color: var(--danger-dark); }
.tl-ts { font-size: 11px; color: var(--slate-400); margin-top: 3px; }

/* формы внутри вкладок */
.pc-form { max-width: 640px; }
.pc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pc-form .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.pc-form .field label { font-size: 12px; color: var(--slate-600); font-weight: 600; }
.pc-form .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-700); margin: 6px 0 12px; }
.pc-form-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* фото-таб */
.pc-photo-tab { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.pc-photo-big { aspect-ratio: 1/1; border-radius: var(--radius); background: linear-gradient(135deg, #eef2ff, #f8fafc);
  border: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-photo-big img { width: 100%; height: 100%; object-fit: cover; }
.pc-photo-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

@media (max-width: 1000px) {
  .pc-head { grid-template-columns: 1fr; }
  .pc-specs { grid-template-columns: repeat(2, 1fr); }
  .pc-strip { flex-wrap: wrap; }
  .pc-strip .ss { flex: 1 0 45%; }
  .cols-2 { grid-template-columns: 1fr; }
  .kiz-cards { grid-template-columns: repeat(2, 1fr); }
  .pc-photo-tab { grid-template-columns: 1fr; }
}

/* ═══ Рабочее место комплектовщика (#my-tasks) ═══ */
.pwp-group { margin-bottom: 22px; }
.pwp-group-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pwp-group-h h2 { font-size: 16px; font-weight: 650; color: var(--slate-800); margin: 0; }
.pwp-group-ic {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--slate-100); color: var(--slate-500); font-size: 15px;
}
.pwp-group-ic.src-fbs { background: var(--danger-light); color: var(--danger-dark); }
.pwp-group-ic.src-fbo { background: var(--primary-light); color: var(--primary); }
.pwp-group-ic.src-inventory { background: var(--warning-light); color: var(--warning-dark); }
.pwp-group-h .spacer { flex: 1; }

.pwp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 768px) { .pwp-cards { grid-template-columns: 1fr; } }
.pwp-next .pwp-card { box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm); }

.pwp-card {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px 16px; transition: box-shadow .15s;
}
/* карточки задания живут в сетке (узкие колонки) → кнопки уходят строкой вниз,
   во всю ширину, чтобы не наезжать на бейджи/заголовок */
.pwp-card-act { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
.pwp-card-act .btn { flex: 1 1 auto; justify-content: center; }
.pwp-card:hover { box-shadow: var(--shadow); }
.pwp-card.mine { border-color: var(--primary-light); background: #fbfbff; }
.pwp-card-ic {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--slate-100); color: var(--slate-500); font-size: 18px;
}
.pwp-card-main { flex: 1; min-width: 0; }
.pwp-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.pwp-card-title { font-size: 15px; font-weight: 600; color: var(--slate-900); }
.pwp-card-title code { font-size: 13px; background: var(--slate-100); padding: 1px 6px; border-radius: 5px; }
.pwp-card-meta {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px;
  font-size: 13px; color: var(--slate-600);
}
.pwp-card-meta i { color: var(--slate-400); margin-right: 3px; }
.pwp-card-note { margin-top: 6px; }
.pwp-card-act { display: flex; gap: 6px; margin-top: 4px; }

.pwp-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.pwp-big { font-size: 16px; font-weight: 600; color: var(--slate-900); margin-top: 2px; }
.pwp-big code { font-size: 15px; background: var(--slate-100); padding: 2px 8px; border-radius: 6px; }
.pwp-stepper { display: flex; gap: 18px; margin-bottom: 14px; }
.pwp-stepper .step { padding: 0; }

@media (max-width: 720px) {
  .pwp-card { flex-wrap: wrap; }
  .pwp-card-act { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
  .pwp-stepper { flex-wrap: wrap; gap: 10px; }
}

/* ══ ОБУЧЕНИЕ: кнопка «?», поповер, центр «Помощь» ════════════════════════ */
/* маленькая ненавязчивая кнопка-подсказка в шапке раздела */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  border: 1px solid var(--slate-200); border-radius: 50%;
  background: #fff; color: var(--slate-400); cursor: pointer;
  font-size: 15px; line-height: 1; vertical-align: middle;
  transition: color .12s, border-color .12s, background .12s;
}
.help-btn:hover { color: var(--primary); border-color: #c7d2fe; background: var(--primary-light); }
.help-btn i { font-size: 15px; }

/* бейдж роли (нейтральный) */
.help-role {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--slate-100); color: var(--slate-700);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500;
}
.help-role i { font-size: 11px; color: var(--slate-400); }
.help-roles { display: flex; flex-wrap: wrap; gap: 6px; }

/* блок одного вопроса (Зачем / Кому / Что / Как связан) */
.help-q { margin: 0 0 14px; }
.help-q:last-child { margin-bottom: 0; }
.help-q-lbl {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--primary-dark);
}
.help-q-lbl i { font-size: 13px; }

/* нумерованные шаги «что делать» */
.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.help-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.help-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: 12px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; margin-top: 1px;
}

/* всплывающая подсказка раздела (по образцу modal) */
.help-pop { width: 560px; padding: 0; }
.help-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--slate-100);
}
.help-pop-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.help-pop-title { font-weight: 700; font-size: 15.5px; flex: 1; }
.help-pop .help-q { padding: 0 18px; }
.help-pop .help-q:first-of-type { padding-top: 14px; }
.help-pop-foot {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; margin-top: 14px; border-top: 1px solid var(--slate-100);
}
.help-pop-foot .btn:last-child { margin-left: auto; }

/* центр «Помощь»: с чего начать */
.help-start { margin-bottom: 16px; }
.help-guide-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--slate-100);
}
.help-guide-head h2 { margin: 0; font-size: 16px; flex: 1; }
.help-guide-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.help-start-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 12px;
}
.help-start-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 12px 14px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.help-start-card:hover {
  border-color: #c7d2fe; box-shadow: var(--shadow-sm);
  text-decoration: none; transform: translateY(-1px);
}
.help-start-ic {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.help-start-t { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.help-start-d { font-size: 12.5px; color: var(--slate-500); line-height: 1.45; }

/* мини-схема связей разделов (инлайн, без картинок) */
.help-flow-wrap { margin-top: 16px; }
.help-flow-cap {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--slate-500);
}
.help-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.help-flow-node {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500;
}
.help-flow-node i { color: var(--primary); font-size: 14px; }
.help-flow-arrow { color: var(--slate-300); font-size: 16px; display: inline-flex; }

/* раскладка: оглавление слева + гайды справа */
.help-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.help-toc {
  position: sticky; top: calc(var(--banner-h) + var(--topbar-h) + 12px);
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.help-toc-cap {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px;
  font-size: 12px; font-weight: 600; color: var(--slate-500);
}
.help-toc-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
  color: var(--slate-700); text-decoration: none;
}
.help-toc-item i { color: var(--slate-400); font-size: 14px; flex: none; }
.help-toc-item:hover { background: var(--slate-50); text-decoration: none; }
.help-toc-item.active { background: var(--primary-light); color: var(--primary-dark); }
.help-toc-item.active i { color: var(--primary); }

.help-guides { display: flex; flex-direction: column; gap: 14px; }
.help-guide { scroll-margin-top: calc(var(--banner-h) + var(--topbar-h) + 12px); }

@media (max-width: 860px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; }
  .help-pop { width: 100%; }
}

/* ═══════════════════════════ ТРЕНАЖЁР (#trainer) ═══════════════════════════ */
.tr-safe-banner { font-size: 13.5px; margin: 0 0 16px; padding: 12px 14px; }
.tr-safe-thin { margin: 0 0 14px; }
.tr-intro { margin-bottom: 16px; }
.tr-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.tr-intro-ic {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 18px; margin-bottom: 8px;
}
.tr-intro-t { font-weight: 600; font-size: 14px; color: var(--slate-800); margin-bottom: 3px; }
.tr-intro-d { font-size: 12.5px; color: var(--slate-500); line-height: 1.45; }

.tr-scn-cap { font-weight: 600; font-size: 14px; color: var(--slate-700); margin: 4px 2px 12px; display: flex; align-items: center; gap: 7px; }
.tr-scn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tr-scn-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); background: #fff; text-decoration: none; transition: all .15s; box-shadow: var(--shadow-sm);
}
.tr-scn-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.tr-scn-ic {
  width: 52px; height: 52px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 24px;
}
.tr-scn-txt { min-width: 0; }
.tr-scn-t { font-weight: 600; font-size: 16px; color: var(--slate-900); margin-bottom: 4px; }
.tr-scn-d { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.tr-scn-go { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }

.tr-prog { max-width: 680px; margin-bottom: 14px; }
.tr-prog-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.tr-prog-head i { color: var(--warning); }

.tr-wb-card { max-width: 560px; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.tr-wb-head { background: var(--slate-900); color: #fff; padding: 11px 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tr-wb-head i { color: var(--info); }
.tr-wb-head .badge { margin-left: auto; }
.tr-wb-body { padding: 6px 16px; }
.tr-kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--slate-100); font-size: 13.5px; }
.tr-kv:last-child { border-bottom: none; }
.tr-kv > span { color: var(--slate-500); }
.tr-kv > b { color: var(--slate-900); text-align: right; }
.tr-wb-foot { padding: 9px 16px; background: var(--slate-50); font-size: 12px; color: var(--slate-500); display: flex; align-items: center; gap: 7px; }

.tr-do { max-width: 680px; background: var(--primary-light); border: 1px solid #c7d2fe; border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px; }
.tr-do-h { font-weight: 600; font-size: 14px; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tr-do-d { font-size: 13.5px; color: var(--slate-700); line-height: 1.5; }

.tr-scan-wrap { max-width: 560px; margin-bottom: 12px; }
.tr-hint { margin-top: 8px; font-size: 12.5px; color: var(--slate-500); display: flex; align-items: center; gap: 7px; }
.tr-hint i { color: var(--warning); }
.tr-code { font-family: var(--mono); background: var(--warning-light); color: var(--warning-dark); padding: 2px 7px; border-radius: 6px; border: 1px dashed var(--warning); cursor: pointer; }

.tr-place-card { display: flex; gap: 14px; align-items: center; max-width: 560px; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.tr-place-ic { width: 46px; height: 46px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--success-light); color: var(--success-dark); font-size: 22px; }
.tr-place-loc { font-weight: 700; font-size: 18px; color: var(--slate-900); font-family: var(--mono); }

.tr-qr-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.tr-qr { text-align: center; }
.tr-qr-box { width: 72px; height: 72px; border: 1px solid var(--slate-200); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 38px; color: var(--slate-800); background: #fff; }
.tr-qr-cap { font-size: 12px; color: var(--slate-500); margin-top: 5px; }

.tr-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-width: 720px; margin-bottom: 12px; }
.tr-box-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; cursor: pointer; text-align: left; transition: all .15s; }
.tr-box-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tr-box-btn.on { border-color: var(--success); background: var(--success-light); }
.tr-box-ic { font-size: 24px; color: var(--slate-700); }
.tr-box-btn.on .tr-box-ic { color: var(--success-dark); }
.tr-box-cap { font-weight: 600; font-size: 14px; color: var(--slate-900); }
.tr-box-state { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--slate-400); display: inline-flex; align-items: center; gap: 6px; }
.tr-box-btn.on .tr-box-state { color: var(--success-dark); }

.tr-foot { max-width: 680px; margin-top: 18px; }
.tr-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-foot-right { display: flex; gap: 8px; align-items: center; }

.tr-done { max-width: 680px; }
.tr-recap { list-style: none; margin: 10px 0 0; padding: 0; }
.tr-recap li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--slate-100); font-size: 14px; color: var(--slate-800); }
.tr-recap li:last-child { border-bottom: none; }
.tr-recap-n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--success-light); color: var(--success-dark); font-size: 13px; }
.tr-done-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ─── Мотивация: рейтинг (соревнование) + разбивка ─── */
.lb-podium-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lb-podium { position: relative; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 14px 14px 12px; background: var(--surface); overflow: hidden; }
.lb-podium::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--slate-300); }
.lb-podium.medal-gold::before   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.lb-podium.medal-silver::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.lb-podium.medal-bronze::before { background: linear-gradient(90deg, #b45309, #d97706); }
.lb-podium.is-self { border-color: #6366f1; box-shadow: 0 0 0 2px var(--primary-light); }
.lb-rank { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 26px;
  font-weight: 800; line-height: 1; color: var(--slate-200); }
.lb-podium.medal-gold .lb-rank   { color: #f59e0b; }
.lb-podium.medal-silver .lb-rank { color: #94a3b8; }
.lb-podium.medal-bronze .lb-rank { color: #b45309; }
.lb-name { font-weight: 700; font-size: 14px; color: var(--slate-900); padding-right: 30px; }
.lb-big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 800;
  color: var(--slate-900); margin-top: 6px; line-height: 1; }
.lb-big .lb-unit { font-size: 13px; font-weight: 600; color: var(--slate-400); margin-left: 4px; }
.lb-mini { font-size: 12px; color: var(--slate-500); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.lb-income { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--success-dark);
  background: var(--success-light); border-radius: 8px; padding: 4px 8px; display: inline-flex; gap: 5px; align-items: center; }
.dt-table tbody tr.row-self td { background: var(--primary-light); }

.mix-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.mix-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-700); }
.lg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.lg-name { flex: 1; }
.lg-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--slate-900); font-weight: 600; }

/* ═══ Настройки → Роли (Волна 1: роли без программиста) ═══════════════════ */
.roles-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.role-card { border: 1px solid var(--slate-200); border-radius: 12px; padding: 14px 16px;
  background: var(--surface, #fff); }
.role-card.role-new { border-style: dashed; }
.role-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.role-name { font-weight: 700; font-size: 15px; border: 1px solid var(--slate-200); border-radius: 8px;
  padding: 5px 9px; min-width: 180px; }
.role-name:disabled { background: var(--slate-50, #f8fafc); color: var(--slate-700); border-color: transparent; }
.role-code { font-family: var(--mono); font-size: 12px; color: var(--slate-500);
  background: var(--slate-100, #f1f5f9); border-radius: 6px; padding: 2px 7px; }
.role-sec { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2;
  color: var(--slate-600); border: 1px solid var(--slate-200); border-radius: 8px; padding: 5px 10px;
  cursor: pointer; user-select: none; background: var(--card, #fff); transition: all .12s ease; }
.role-sec:hover { border-color: var(--slate-300, #cbd5e1); }
.role-sec.on { background: var(--primary-light, #eef2ff); border-color: var(--primary, #6366f1);
  color: var(--slate-900); font-weight: 600; }
.role-sec input { margin: 0; width: 14px; height: 14px; accent-color: var(--primary, #6366f1); flex: none; }
.role-sec input:disabled { opacity: .55; }
.role-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.role-active { font-size: 13px; color: var(--slate-600); display: inline-flex; align-items: center; gap: 6px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.role-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--slate-500); }
.role-grid input { border: 1px solid var(--slate-200); border-radius: 8px; padding: 6px 9px; font-size: 14px; }

/* ─── Полная Академия (#help → academy.md) ─── */
.academy-toc-item{cursor:pointer}
.academy-body{max-width:none;font-size:.92rem}
.academy-body .academy-h1{font-size:1.2rem;margin:24px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--primary);color:var(--primary)}
.academy-body .academy-h2{font-size:1.05rem;margin:20px 0 8px;color:var(--slate-900);font-weight:700}
.academy-body .academy-h3{font-size:.96rem;margin:14px 0 6px;color:var(--primary-dark)}
.academy-body h4{font-size:.9rem;margin:10px 0 4px;color:var(--slate-700)}
.academy-body p{margin:6px 0;line-height:1.55;color:var(--slate-800)}
.academy-body ul,.academy-body ol{margin:6px 0 10px 22px;line-height:1.5;color:var(--slate-800)}
.academy-body li{margin:3px 0}
.academy-body blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--primary);background:var(--primary-light);border-radius:var(--radius-sm);color:var(--slate-700)}
.academy-body code{background:var(--slate-100);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--danger-dark)}
.academy-body hr{border:0;border-top:1px solid var(--slate-200);margin:16px 0}
.academy-tbl{border-collapse:collapse;width:100%;margin:10px 0;font-size:.86rem}
.academy-tbl th,.academy-tbl td{border:1px solid var(--slate-200);padding:6px 9px;text-align:left;vertical-align:top}
.academy-tbl th{background:var(--primary-light);font-weight:600;color:var(--slate-900)}
.academy-tbl tr:nth-child(even) td{background:var(--slate-50)}


/* ─── Цветные подсказки сканирования (пункт 5) ─── */
.scan-hint{
  display:flex;align-items:center;gap:11px;
  margin:8px 0;padding:10px 13px;
  border:1px solid var(--slate-200);border-left-width:5px;
  border-radius:var(--radius-sm, 10px);
  background:var(--slate-50);
}
.scan-hint-ic{
  flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:9px;font-size:21px;color:#fff;
}
.scan-hint-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.scan-hint-txt b{font-size:14.5px;color:var(--slate-900)}
.scan-hint-sub{font-size:12px;color:var(--slate-500)}
/* компактный значок «вид объекта» (для строк таблиц/шагов) */
.scan-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  border:1px solid currentColor;background:#fff;
}
.scan-chip .bi{font-size:13px}
/* ── цветовая кодировка по виду объекта ── */
.scan-hint.sk-box{border-left-color:var(--warning)}
.scan-hint.sk-box .scan-hint-ic{background:var(--warning)}
.scan-chip.sk-box{color:var(--warning-dark)}
.scan-hint.sk-product{border-left-color:#2563eb}
.scan-hint.sk-product .scan-hint-ic{background:#2563eb}
.scan-chip.sk-product{color:#1d4ed8}
.scan-hint.sk-kiz{border-left-color:var(--primary)}
.scan-hint.sk-kiz .scan-hint-ic{background:var(--primary)}
.scan-chip.sk-kiz{color:var(--primary-dark)}
.scan-hint.sk-order{border-left-color:#7c3aed}
.scan-hint.sk-order .scan-hint-ic{background:#7c3aed}
.scan-chip.sk-order{color:#6d28d9}
.scan-hint.sk-courier{border-left-color:var(--success)}
.scan-hint.sk-courier .scan-hint-ic{background:var(--success)}
.scan-chip.sk-courier{color:var(--success-dark)}
.scan-hint.sk-place{border-left-color:var(--info)}
.scan-hint.sk-place .scan-hint-ic{background:var(--info)}
.scan-chip.sk-place{color:var(--info-dark)}
@media (max-width:640px){
  .scan-hint-ic{width:34px;height:34px;font-size:19px}
  .scan-hint-txt b{font-size:14px}
}

/* === Поставщики/UID (пункт 6): строка добавления + снятая строка === */
.inline-add{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pc-tbl tr.row-off td{opacity:.55}
.pc-tbl tr.row-off .mono{text-decoration:line-through;text-decoration-color:var(--slate-300)}

/* владелец 21.07: длинный бейдж (транзит «А → Б») переносится, не вылезает за карточку */
.pwp-card .badge { max-width: 100%; white-space: normal; height: auto;
  min-height: 20px; line-height: 1.35; padding: 3px 8px; text-align: left; }

/* === Остатки → Распределение (себес по складам ВБ и округам) === */
.sd-table tr.sd-dist td { background: var(--slate-50); border-top: 2px solid var(--slate-200); }
.sd-table tr.sd-wh td { color: var(--slate-600); }
.sd-table td.sd-wh-name { padding-left: 26px; position: relative; }
.sd-table td.sd-wh-name::before { content: ""; position: absolute; left: 12px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px; border-left: 1.5px solid var(--slate-300);
  border-bottom: 1.5px solid var(--slate-300); border-radius: 0 0 0 3px; }
.sd-bar { height: 8px; border-radius: 4px; background: var(--slate-100); overflow: hidden;
  min-width: 90px; display: flex; }
.sd-bar i { display: block; height: 100%; background: var(--primary); }
.sd-bar i.inb { background: #c7d2fe; }   /* светло-фиолетовый = в пути (едет) */
.sd-bar.sd-bar-sub { height: 6px; }
.sd-bar.sd-bar-sub i { background: var(--primary); opacity: .55; }
.sd-bar.sd-bar-sub i.inb { background: #c7d2fe; opacity: 1; }
.kpi-ic.danger { background: var(--danger-light, #fee2e2); color: var(--danger, #ef4444); }

/* Потери (сгоревшие склады): чекбоксы + красная секция */
.sd-chk-cell { width: 34px; text-align: center; }
.sd-chk-cell input.sd-chk { width: 15px; height: 15px; accent-color: var(--danger, #ef4444); cursor: pointer; }
.sd-table tr.sd-lost-head td { background: #fef2f2; border-top: 2px solid #fecaca; color: #991b1b; }
.sd-table tr.sd-lost-head td .bi-fire { color: var(--danger, #ef4444); }
.sd-table tr.sd-lost-row td { color: var(--slate-500); background: #fffafa; }
.sd-table tr.sd-lost-row td.sd-wh-name { text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, .45); }
.sd-table tr.sd-lost-row td.sd-wh-name .muted,
.sd-table tr.sd-lost-row td.sd-wh-name .badge { text-decoration: none; }
.sd-bar.sd-bar-lost { height: 6px; }
.sd-bar.sd-bar-lost i { background: var(--danger, #ef4444); opacity: .55; }

/* «Едет на склад» (ФБО в пути до конечного склада) — голубая приписка */
.sd-inb { color: var(--info-dark, #0e7490); }
.sd-table .sd-inb.small { font-size: 11px; font-weight: 500; }
.sd-table tr.sd-wh-inb-only td { color: var(--slate-400); }
.sd-lost-txt { color: #991b1b; }
.sd-lost-txt .bi-fire { color: var(--danger, #ef4444); }

/* Карта России по округам (инлайн-SVG, low-poly) */
.sd-map-wrap svg { width: 100%; height: auto; max-height: 430px; display: block; }
.sd-map-geo { stroke: #fff; stroke-width: 2; stroke-linejoin: round; cursor: pointer;
  transition: filter .12s; }
.sd-map-geo:hover { filter: brightness(.93); }
.sd-map-geo.sd-map-zero { stroke: var(--slate-200); stroke-dasharray: 4 3; }
.sd-map-geo.sd-map-sel { stroke: var(--slate-900); stroke-width: 2.5; }
.sd-map-info { margin-top: 10px; }
.sd-map-info .sd-inb b, .sd-map-info .sd-lost-txt b { font-family: var(--mono, 'JetBrains Mono', monospace); }
.sd-map-lbl { pointer-events: none; font-family: inherit; }
.sd-map-foot { display: flex; gap: 14px; align-items: center; margin-top: 10px;
  color: var(--slate-500); font-size: 12px; flex-wrap: wrap; }
.sd-map-leg { display: inline-flex; align-items: center; gap: 4px; }
.sd-map-leg i { display: inline-block; width: 24px; height: 10px; border-radius: 3px; }

/* «Движения» в карточке товара (29.07): двухстрочные записи, ничего не съезжает */
.sd-mv { padding: 7px 0; border-bottom: 1px solid var(--slate-100); }
.sd-mv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-mv-top .in { color: var(--success-dark); }
.sd-mv-top .out { color: var(--slate-600); }
.sd-mv-note { margin-top: 2px; padding-left: 2px; white-space: normal; word-break: break-word; }


/* ══ 31.07 (владелец): модалки БЕЗ горизонтального свайпа ══ */
.modal { width: min(96vw, 760px); overflow-x: hidden; }
.modal.modal-baul { width: min(96vw, 1200px); }
.modal .dt, .modal table { max-width: 100%; }
.modal .dt { overflow-x: auto; }
.modal img { max-width: 100%; }
.modal .form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 720px) {
  .modal-backdrop { padding: 8px; }
  .modal { width: 100%; padding: 14px; }
}


/* ══ 31.07 (владелец): «Остатки» — умещаемся без горизонтального скролла ══ */
#st-table th, #st-table td { padding: 6px 8px; }
#st-table th { font-size: 11px; white-space: nowrap; }
#st-table td:first-child { max-width: 230px; }
#st-table .cell-title .t {
  display: inline-block; max-width: 175px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
}
#st-table .cell-title .s { max-width: 175px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
#st-table td { font-size: 12.5px; }
#st-table .badge { font-size: 10.5px; padding: 2px 6px; }
/* поставщики (3-я с конца) и места (2-я с конца) — ограничить, с переносами;
   бейджи НЕ вылезают за ячейку (обрезка многоточием — фикс наслоения 31.07) */
#st-table td:nth-last-child(3), #st-table td:nth-last-child(2) {
  max-width: 185px; white-space: normal; overflow: hidden;
}
#st-table td:nth-last-child(3) .badge, #st-table td:nth-last-child(2) .badge {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block; vertical-align: bottom;
}
/* на средних экранах «Поставщики» прячем (есть в карточке товара по клику) */
@media (max-width: 1560px) {
  #st-table th:nth-last-child(3), #st-table td:nth-last-child(3) { display: none; }
  #st-table .cell-title .thumb { display: none; }
}

/* планшет: остаётся главное — товар/остаток/резерв/доступно/принимается/срок */
@media (max-width: 1150px) {
  #st-table th:nth-last-child(2), #st-table td:nth-last-child(2),
  #st-table th:nth-last-child(4), #st-table td:nth-last-child(4),
  #st-table th:nth-child(2), #st-table td:nth-child(2) { display: none; }
  #st-table td:first-child { max-width: 190px; }
  #st-table .cell-title .t, #st-table .cell-title .s { max-width: 140px; }
  #st-table td:last-child, #st-table th:last-child {
    max-width: 110px; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ── выпадающий мульти-выбор (назначение комплектовщиков и т.п.) ─────────── */
.ddm{position:relative}
.ddm-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer}
.ddm-btn .bi{flex:0 0 auto;color:var(--slate-400,#94a3b8)}
.ddm-list{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--slate-200,#e2e8f0);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.14);max-height:230px;overflow:auto;padding:6px}
.ddm-list .ddm-opt{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;margin:0}
.ddm-opt:hover{background:var(--slate-100,#f1f5f9)}
.ddm-opt input{width:16px;height:16px;accent-color:var(--indigo-600,#4f46e5);margin:0}

/* ── мини-значки маркетплейсов (WB/OZ) в переключателях ──────────────────── */
.mp-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.2px;vertical-align:-5px;margin-right:2px;font-family:Inter,system-ui,sans-serif}
.tab .mp-ico{margin-right:4px}

/* ── инвентаризация: посчитанные места — зелёная заливка (владелец 04.08) ── */
.card.inv-done { background: #e9f9f0; border-color: #86d8ab; }
.card.inv-done .progress { background: #cdeeda; }
.card.inv-done .progress i { background: var(--success, #16a34a); }

/* ── группы «Мои задания» по площадкам: значок WB/OZ вместо иконки группы ── */
.pwp-group-ic.mp { background: transparent; }
.pwp-group-ic.mp .mp-ico { width: 30px; height: 30px; font-size: 12px; margin: 0; vertical-align: 0; border-radius: var(--radius-sm, 8px); }

/* ═══ 06.08 (владелец): «красота настроек» — ровные поля и свёрнутые секции ═══ */
#settings-body .form-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
#settings-body .input, #settings-body select.input { width: 100%; min-width: 0; box-sizing: border-box; }
#settings-body .toolbar { flex-wrap: wrap; }
details.set-acc > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
details.set-acc > summary::-webkit-details-marker { display: none; }
details.set-acc > summary .bi-chevron-down { transition: transform .15s ease; }
details.set-acc[open] > summary .bi-chevron-down { transform: rotate(180deg); }
details.set-acc:not([open]) { padding-bottom: 0; }
.rr-row > summary { list-style: none; }
.rr-row > summary::-webkit-details-marker { display: none; }
/* 06.08: чипы разделов — группами как сайдбар (Рабочее место/Склад/…) */
.role-secs { display: flex; flex-direction: column; gap: 10px; }
.rs-gt { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--slate-400, #94a3b8); margin-bottom: 4px; }
.rs-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ═══ ТАЙМЛАЙН СКИДОК ФБС (владелец 08.08) ═══════════════════════════════════
   Столбик = день. Высота = сколько заказов, куски = зоны комиссии. Масштаб
   общий для всех дней, дни без заказов остаются пустыми — провал в работе
   должен быть виден, а не выпадать из графика. */
.tl-wrap{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;padding:6px 2px 0}
.tl-day{flex:1 0 34px;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:4px}
.tl-bar{width:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;
  border-radius:6px 6px 0 0;overflow:hidden;background:var(--slate-100,#f1f5f9);position:relative}
.tl-seg{width:100%}
.tl-seg.z-best{background:#065f46}                 /* максимальная скидка */
.tl-seg.z-good{background:#34d399}                 /* средняя скидка */
.tl-seg.z-base{background:var(--slate-300,#cbd5e1)} /* без скидки */
.tl-seg.z-bad{background:var(--danger,#ef4444)}                  /* штраф */
.tl-seg.z-wait{background:repeating-linear-gradient(45deg,
  var(--slate-200,#e2e8f0) 0 4px, var(--slate-100,#f1f5f9) 4px 8px)}  /* ещё едут */
.tl-d{font-size:10px;color:var(--slate-500,#64748b);white-space:nowrap}
.tl-n{font-size:11px;font-weight:700;color:var(--slate-700,#334155)}
.tl-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;
  color:var(--slate-600,#475569)}
.tl-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;
  margin-right:5px;vertical-align:-2px}
.tl-money{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.tl-money .m-card{flex:1 1 190px;border:1px solid var(--slate-200,#e2e8f0);border-radius:12px;
  padding:12px 14px;background:var(--card-bg,#fff)}
.tl-money .m-v{font-size:24px;font-weight:800;line-height:1.15}
.tl-money .m-l{font-size:12px;color:var(--slate-500,#64748b);margin-top:3px}
.tl-money .m-sub{font-size:11.5px;color:var(--slate-400,#94a3b8);margin-top:6px}
.tl-money .m-good .m-v{color:var(--success-dark,#059669)}
.tl-money .m-bad .m-v{color:var(--danger-dark,#dc2626)}


/* ═══ ПЛИТКИ ГЛАВНОЙ — ОДИН РЯД (владелец 10.08) ══════════════════════════════
   Раньше плитки переносились и последняя висела одна на второй строке — это
   и выглядело странно. Теперь показатели идут одной строкой; на узком экране
   строка прокручивается вбок, а на телефоне снова переносится по две. */
#dash-kpi {
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  grid-template-columns: none;
  overflow-x: auto;
  padding-bottom: 2px;            /* чтобы тень плиток не срезалась */
  scrollbar-width: thin;
}
#dash-kpi > .kpi { min-width: 150px; }
@media (max-width: 720px) {
  #dash-kpi {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    overflow-x: visible;
  }

  /* ШАПКА КАРТОЧКИ НА ТЕЛЕФОНЕ (13.09.2026, обход кабинета на 390 px).
     `.card-h` — строка из флексов без переноса: на узком экране длинное
     пояснение сжималось в колонку по одному слову на строку и занимало
     пол-экрана, а кнопка справа уезжала за край. Переносим: пояснение уходит
     на свою строку целиком, кнопка встаёт под ним. */
  .card-h { flex-wrap: wrap; }
  .card-h > .muted.small { flex-basis: 100%; margin-left: 0 !important; }
  .card-h > .btn { margin-left: 0 !important; }
}

/* Увеличение фото товара по наведению (список входящих ФБС, 08.09.2026).
   .thumb обрезает картинку под квадрат — для расцветки набора этого мало,
   поэтому крупная копия показывается целиком (object-fit: contain). */
.thumb-zoom { position: relative; overflow: visible; cursor: zoom-in; }
.thumb-zoom .zoom {
  display: none; position: absolute; z-index: 90;
  left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px;
  width: 260px; height: 260px; padding: 6px; border-radius: 12px;
  background: var(--card, #fff); border: 1px solid var(--slate-200, #e2e8f0);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
.thumb-zoom:hover .zoom { display: block; }
.thumb-zoom .zoom img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

/* ── ПУТЬ ТОВАРА — БЛОК-СХЕМА (01.10.2026) ──────────────────────────────────
   Сетка: первая колонка — названия дорожек, дальше 8 колонок этапов. Стрелки —
   SVG ПОД блоками: где линия проходит за чужим блоком, её просто не видно. */
.pt-legenda { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: var(--slate-600); }
.pt-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pt-l { display: inline-block; width: 26px; height: 0; border-top: 2px solid; }
.pt-l-tovar { border-color: var(--primary); }
.pt-l-kod { border-color: #059669; border-top-style: dashed; }
.pt-l-vozvrat { border-color: #e11d48; }
.pt-scroll { overflow-x: auto; padding-bottom: 8px; }
.pt-shema { position: relative; display: grid; min-width: 1340px;
  grid-template-columns: 92px repeat(8, minmax(122px, 1fr));
  grid-auto-rows: minmax(150px, auto); column-gap: 26px; row-gap: 26px; padding: 6px 90px 6px 4px; }
.pt-svg { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.pt-podp { font-size: 11px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.pt-dorozhka { grid-column: 1 / -1; margin: -10px -4px; border-radius: 16px; z-index: 0; }
.pt-dorozhka-t { grid-column: 1; z-index: 2; align-self: center; display: flex; flex-direction: column;
  gap: 6px; align-items: flex-start; font-weight: 700; font-size: 13px; padding-left: 10px; }
.pt-dorozhka-t .bi { font-size: 20px; }
.pt-blok { position: relative; z-index: 2; align-self: center; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--slate-200); border-left: 4px solid var(--pt-c);
  border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(15,23,42,.06);
  color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.pt-blok:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.12); }
.pt-zag { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.pt-chto { font-size: 12px; color: var(--slate-500); line-height: 1.35; }
.pt-nums { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--slate-600); }
.pt-num b { font-size: 15px; color: var(--pt-c); }
.pt-kod { font-size: 11.5px; font-weight: 600; color: #047857; background: #ecfdf5;
  border: 1px dashed #059669; border-radius: 8px; padding: 3px 7px; }
.pt-num-0 b { color: var(--slate-400); }
.pt-d-sklad, .pt-b-sklad { --pt-c: #4f46e5; }
.pt-d-vozvrat, .pt-b-vozvrat { --pt-c: #e11d48; }
.pt-d-fbs, .pt-b-fbs { --pt-c: #d97706; }
.pt-d-fbo, .pt-b-fbo { --pt-c: #7c3aed; }
.pt-d-chz, .pt-b-chz { --pt-c: #059669; }
.pt-dorozhka.pt-d-sklad { background: #eef2ff; }
.pt-dorozhka.pt-d-vozvrat { background: #fff1f2; }
.pt-dorozhka.pt-d-fbs { background: #fffbeb; }
.pt-dorozhka.pt-d-fbo { background: #f5f3ff; }
.pt-dorozhka.pt-d-chz { background: #ecfdf5; }
.pt-dorozhka-t { color: var(--pt-c); }

/* ═══ ПОЛНЫЙ ЭКРАН РАЗДЕЛА КАРТЫ (владелец 15.09.2026) ═══
   Разворачивается весь раздел, чтобы кнопки 2D/3D оставались под рукой. Но по
   умолчанию карта внутри сохраняла свою обычную высоту, и добрая половина
   экрана пустовала. Здесь раздел становится колонкой: панели сверху, карта
   занимает всё остальное. */
#wms-page:fullscreen {
  background: var(--bg, #f6f8fb);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
#wms-page:fullscreen #warehouse-map {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* без этого карта в полном экране занимала ровно 880 точек — половину экрана */
  max-width: none;
  width: 100%;
}
#wms-page:fullscreen #wm-svg {
  width: 100%;
  height: 100%;
  max-height: none;
}
#wms-page:fullscreen #wm3d-wrap { flex: 1 1 auto; display: flex; }
#wms-page:fullscreen #wm3d { width: 100%; height: 100%; object-fit: fill; }
/* легенда в полном экране не должна съедать половину высоты */
#wms-page:fullscreen #wm-legenda { flex: 0 0 auto; max-height: 22vh; overflow: auto; }
#wms-page:fullscreen .toolbar { flex: 0 0 auto; }

/* Подсветка объекта по клику в легенде (владелец 16.09.2026): видна и вне
   редактора — иначе «найди и передвинь» начинается с поисков глазами. */
#wm-svg .wm-el.podsvet rect {
  stroke: #6366f1; stroke-width: 2.4; fill: rgba(99, 102, 241, .16);
}
#wm-svg .wm-el.podsvet .el-cap, #wm-svg .wm-el.podsvet .el-cap-in {
  fill: #4338ca; font-weight: 800;
}
.leg-kod:hover { background: var(--slate-100, #f1f5f9); }

/* Таблица обозначений (владелец 16.09.2026: «сделай, чтобы было в табличном
   формате»). Строки плотнее обычной таблицы: кодов полтора десятка, и при
   высоте строки 40 px блок перестаёт помещаться на экран. */
.leg-tbl td { height: auto; padding: 4px 10px; }
.leg-tbl th { padding: 4px 10px; }
.leg-tbl tbody tr.leg-kod:hover td, .leg-tbl tbody tr.leg-kod3d:hover td {
  background: var(--primary-light, #e0e7ff);
}

/* ── ТЕЛЕФОН: поля ввода не мельче 16px ──────────────────────────────────────
   Та же причина, что у .pin-hidden: iOS Safari сам увеличивает страницу при
   фокусе на мелком поле, и экран съезжает. На компьютере 13.5px остаются. */
@media (max-width: 640px) {
  .input, input.input, select.input, textarea.input { font-size: 16px; }
}

/* Товары: дерево «наш товар → карточки площадок» (01.10.2026) */
.p-tree-bar { display:flex; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line, #e5e7eb); }
.p-tree-tg { flex:none; width:22px; height:22px; margin-right:4px; border:0; background:none; color:var(--muted, #6b7280);
  border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.p-tree-tg[data-tg]:hover { background:var(--hover, rgba(0,0,0,.06)); color:inherit; }
.p-tree-pusto { cursor:default; }
tr.p-open > td { border-bottom-color:transparent; }
tr.p-tree > td { padding:0 12px 12px 52px; background:var(--bg-soft, rgba(99,102,241,.04)); }
.p-tree-box { overflow-x:auto; }
.p-tree-t { width:100%; border-collapse:collapse; font-size:12.5px; }
.p-tree-t th { text-align:left; font-weight:600; color:var(--muted, #6b7280); padding:4px 8px; white-space:nowrap; }
.p-tree-t td { padding:4px 8px; border-top:1px solid var(--line, #e5e7eb); vertical-align:top; }
.p-tree-t td .mono { display:inline-block; margin:0 6px 2px 0; }
.p-tree-grp td { font-weight:600; padding-top:10px !important; border-top:0 !important; }
.p-tree-off td { opacity:.55; }
.p-tree-gtin { background:#d1fae5; color:#065f46 !important; border-radius:4px; padding:0 4px; }
/* Товары: верхний уровень — модель (01.10.2026) */
tr.p-model { cursor:pointer; }
tr.p-model > td { background:var(--bg-soft, rgba(99,102,241,.04)); }
tr.p-razmer > td:nth-child(2) { padding-left:34px; }

/* ══ Чат сотрудников (01.10.2026) ═══════════════════════════════════════
   Раздел на всю рабочую область: слева список, справа переписка. На телефоне
   (≤768) — два экрана: список или открытый чат (.has-active). Поле ввода
   прижато к низу и не уезжает под экранную клавиатуру (100dvh). */
.sb-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; flex: none;
}
.sb-badge[hidden] { display: none; }
body.sb-min .sb-link .sb-badge { position: absolute; margin: -14px 0 0 14px; min-width: 8px; height: 8px; padding: 0; font-size: 0; }
body.sb-min .sb-link { position: relative; }
#topbar .tb-burger.has-dot { position: relative; }
#topbar .tb-burger.has-dot::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--danger); border: 2px solid #fff;
}
body.page-chat #main { padding: 0; max-width: none; }
/* строка поиска товаров и чипы юрлиц к чату не относятся (владелец 02.10.2026) —
   в чате их нет и на компьютере; свой поиск — над списком чатов */
body.page-chat #topbar { display: none; }
body.page-chat #main { --topbar-h: 0px; }   /* только у чата: логотип меню берёт ту же высоту */
/* плашка новостей ВБ закреплена внизу поверх всего — в чате она накрывала поле
   ввода и кнопки целиком (замер 390×844, 01.10.2026); на остальных экранах живёт */
body.page-chat #wbn-nudge { display: none !important; }
.chat {
  display: flex; height: calc(100dvh - var(--banner-h) - var(--topbar-h));
  background: #fff; min-height: 0;
}
.chat-list {
  width: 300px; flex: none; border-right: 1px solid var(--slate-200);
  overflow-y: auto; background: #fff;
}
.chat-list-h { padding: 14px 16px 8px; font-weight: 700; font-size: 15px; color: var(--slate-800);
  position: sticky; top: 0; z-index: 2; background: #fff; }  /* заголовок не уезжает со списком */
/* поиск, вкладки папок, «новая группа» (02.10.2026) */
.chat-list-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.chat-find { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 0 12px; height: 38px; border-radius: 19px;
  background: var(--slate-100); color: var(--slate-500); font-weight: 400; cursor: text; }
.chat-find input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--slate-900); }
.chat-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 8px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab { flex: none; border: 0; background: var(--slate-100); color: var(--slate-600); border-radius: 14px; padding: 5px 12px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chat-tab.on { background: var(--primary); color: #fff; }
.chat-tab-add { padding: 5px 10px; }
.chat-row mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
/* профиль собеседника и страница группы — поверх переписки, как в Telegram */
.chat-prof { position: absolute; inset: 0; z-index: 6; background: var(--slate-100); display: flex; flex-direction: column; }
.chat-prof-h { flex: none; display: flex; align-items: center; padding: 8px 10px; min-height: 56px; background: #fff; border-bottom: 1px solid var(--slate-200); }
.chat-prof-in { flex: 1; overflow-y: auto; padding: 18px 16px 30px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.chat-prof-in > * { width: min(560px, 100%); }
.chat-prof-top { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.chat-prof-ava .chat-ava { width: 104px; height: 104px; font-size: 42px; }
.chat-prof-n { font-size: 20px; font-weight: 700; color: var(--slate-900); margin-top: 6px; }
.chat-prof-btns { display: flex; gap: 10px; justify-content: center; }
.chat-prof-b { flex: 1; max-width: 140px; border: 0; background: #fff; border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chat-prof-b i { font-size: 20px; }
.chat-prof-card { background: #fff; border-radius: 12px; padding: 4px 0; }
.chat-prof-card:empty { display: none; }
.chat-prof-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--slate-100); }
.chat-prof-row:last-child { border-bottom: 0; }
.chat-prof-u { cursor: pointer; }
.chat-prof-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chat-prof-vl { background: #fff; border-radius: 12px; min-height: 80px; overflow: hidden; }
.chat-prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 2px; }
.chat-prof-grid img, .chat-prof-vid { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: pointer; }
.chat-prof-vid { border: 0; background: var(--slate-800); color: #fff; font-size: 30px; }
.chat-prof-link { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--slate-100); align-items: flex-start; }
.chat-prof-link a { word-break: break-all; font-size: 14px; }
.chat-prof-voice { padding: 8px 12px; border-bottom: 1px solid var(--slate-100); }
.chat-prof-vl .chat-row > i { font-size: 26px; color: var(--primary); flex: none; width: 40px; text-align: center; }
.chat-row {
  display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 14px;
  border: 0; background: none; text-align: left; cursor: pointer; font: inherit;
}
.chat-row:hover { background: var(--slate-50); }
.chat-row.active { background: var(--primary-light); }
.chat-row-b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chat-row-t, .chat-row-s { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-row-t b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--slate-900); font-weight: 600; }
.chat-row-t em { font-style: normal; font-size: 11.5px; color: var(--slate-400); flex: none; }
.chat-row-s > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--slate-500); }
.chat-unread {
  font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; flex: none;
}
.chat-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px;
}
.chat-ava-team { background: var(--primary); font-size: 18px; }
.chat-ava-saved { background: #2aabee; font-size: 17px; }
.chat-ava-group { background: #0f766e; font-size: 17px; }
.chat-iz-tg { font-size: 10.5px; font-weight: 700; color: #229ed9; background: rgba(34, 158, 217, .1); border-radius: 4px; padding: 0 4px; }
.chat-ava-watch { background: var(--slate-500); font-size: 17px; }
.chat-list-sec { padding: 14px 16px 6px; font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--slate-200); margin-top: 6px; }
.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #eef1f6; position: relative; }
.chat-pane.drop::after {
  content: 'Отпустите — файлы откроются для отправки'; position: absolute; inset: 10px;
  border: 2px dashed var(--primary); border-radius: 12px; background: rgba(238, 242, 255, .9);
  display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--primary-dark); z-index: 5;
}
/* темы группы — «супергруппы» (05.10.2026) */
.chat-temy { flex: 1; overflow-y: auto; padding: 4px 0; }
.chat-tema-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: #fff; background: linear-gradient(135deg, #8bd17c, #4fae5c); }
.chat-tema-ic.obshchee { background: var(--slate-200); color: var(--slate-600); }
.chat-blank { margin: auto; text-align: center; color: var(--slate-400); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.chat-blank i { font-size: 34px; }
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff;
  border-bottom: 1px solid var(--slate-200); flex: none; min-height: 56px;
}
.chat-head .chat-ava { width: 36px; height: 36px; font-size: 15px; }
.chat-head-t { display: flex; flex-direction: column; min-width: 0; }
.chat-head-t b { font-size: 15px; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-back { display: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 2px; min-height: 0; overscroll-behavior: contain; }
.chat-older { text-align: center; padding: 4px 0 8px; }
.chat-day { text-align: center; margin: 10px 0 6px; }
.chat-day span { background: rgba(15, 23, 42, .08); color: var(--slate-600); font-size: 12px; padding: 3px 10px; border-radius: 10px; }
.chat-m { display: flex; margin-top: 6px; }
.chat-m.series { margin-top: 1px; }
.chat-m.out { justify-content: flex-end; }
.chat-m.flash .chat-bub { box-shadow: 0 0 0 3px var(--warning); }
.chat-bub {
  position: relative; max-width: min(560px, 78%); padding: 7px 10px 5px; border-radius: 14px;
  background: #fff; color: var(--slate-900); font-size: 14.5px; line-height: 1.38;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .08); padding-right: 34px; overflow-wrap: anywhere;
}
.chat-m.out .chat-bub { background: #dbe4ff; }
/* ответ свайпом влево: значок «ответить» проступает справа от пузыря */
.chat-m { position: relative; }
.chat-swipe-ic { position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(.8);
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--slate-200); color: var(--slate-600); opacity: 0; pointer-events: none;
  transition: transform .12s ease; }
.chat-swipe-ic.gotov { transform: translateY(-50%) scale(1); background: var(--primary); color: #fff; }
.chat-bub.has-media { padding: 4px 4px 5px; padding-right: 4px; }
.chat-bub.has-media .chat-t, .chat-bub.has-media .chat-from, .chat-bub.has-media .chat-quote { margin-left: 6px; margin-right: 30px; }
.chat-bub.del { background: transparent; box-shadow: none; border: 1px dashed var(--slate-300); }
.chat-from { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); margin-bottom: 1px; }
.chat-t { white-space: pre-wrap; }
.chat-t a { color: var(--primary-dark); text-decoration: underline; }
.chat-meta { font-size: 11px; color: var(--slate-500); text-align: right; margin-top: 2px; white-space: nowrap; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.chat-bub.has-media .chat-meta { margin-right: 6px; }
.chat-tick { color: var(--slate-400); letter-spacing: -2px; }
.chat-tick.read { color: var(--primary); }
.chat-retry { border: 0; background: none; color: var(--danger); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; }
.chat-deleted { color: var(--slate-500); font-style: italic; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.chat-more {
  position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--slate-400); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-more:hover { background: rgba(15, 23, 42, .06); color: var(--slate-700); }
.chat-bub.has-media .chat-more { background: rgba(255, 255, 255, .85); top: 6px; right: 6px; }
.chat-quote {
  border-left: 3px solid var(--primary); background: rgba(79, 70, 229, .07); border-radius: 6px;
  padding: 3px 8px; margin: 2px 0 4px; cursor: pointer; display: flex; flex-direction: column; min-width: 0;
}
.chat-quote b { font-size: 12px; color: var(--primary-dark); }
.chat-quote.part { border-left-style: double; border-left-width: 4px; }
.chat-quote.part span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-style: italic; }
.chat-ment { color: var(--primary-dark); font-weight: 700; }
.chat-ment.me { background: rgba(245, 158, 11, .18); border-radius: 4px; padding: 0 2px; }
.chat-bub.ment-me { box-shadow: 0 0 0 2px rgba(245, 158, 11, .55); }
.chat-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 1px; }
.chat-bub.has-media .chat-reacts { margin: 4px 6px 1px; }
.chat-react { border: 1px solid var(--slate-200); background: #fff; border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 13px; cursor: pointer; line-height: 20px; }
.chat-react b { font-size: 12px; color: var(--slate-600); }
.chat-react.on { background: var(--primary-light); border-color: var(--primary); }
.chat-react.on b { color: var(--primary-dark); }
button.chat-tick { border: 0; background: none; font: inherit; font-size: 11px; padding: 0; cursor: pointer; letter-spacing: 0; }
.chat-menu-reacts { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 4px 6px; border-bottom: 1px solid var(--slate-100); margin-bottom: 4px; max-width: 260px; }
.chat-menu .chat-menu-reacts button { padding: 4px 6px; font-size: 20px; border-radius: 8px; }
.chat-rd { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13.5px; }
.chat-rd .chat-ava { width: 26px; height: 26px; font-size: 12px; }
.chat-rd.muted { opacity: .65; }
.chat-comp { position: relative; }
.chat-comp .chat-ment-list { position: absolute; left: 50px; bottom: calc(100% + 4px); max-height: 260px; overflow-y: auto; min-width: 220px; }
.chat-ment-list button.on { background: var(--slate-100); }
.chat-ment-list .chat-ava { width: 24px; height: 24px; font-size: 11px; }
.chat-selq { position: fixed; z-index: 400; box-shadow: 0 4px 14px rgba(15, 23, 42, .2); }
.chat-fwd { font-size: 12.5px; color: var(--primary-dark); margin-bottom: 2px; display: flex; gap: 5px; align-items: center; min-width: 0; }
.chat-fwd b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bub.has-media .chat-fwd { margin: 2px 30px 4px 6px; }
.chat-fwd-card { width: min(420px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 64px)); display: flex; flex-direction: column; }
.chat-fwd-msg { margin: 0 16px 8px; padding: 6px 10px; border-left: 3px solid var(--primary); background: var(--slate-50); border-radius: 6px; font-size: 13px; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fwd-list { overflow-y: auto; padding: 0 0 8px; }
#chat-head-t, #chat-head-ava { cursor: pointer; }
#chat-uch .chat-row[disabled] { cursor: default; opacity: .75; }
#chat-uch .chat-row > i { color: var(--primary); font-size: 18px; }
.chat-quote span { font-size: 12.5px; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-img, .chat-vid { display: block; max-width: 100%; max-height: 340px; border-radius: 11px; background: var(--slate-200); }
.chat-img { cursor: zoom-in; min-width: 120px; min-height: 80px; object-fit: cover; }
.chat-vid { width: 320px; }
/* голосовое как в Telegram (02.10.2026): кнопка, волна с перемоткой, время, скорость */
.chat-voice { display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 320px; padding: 4px 2px 2px; }
.chat-voice audio.chat-aud { display: none; }
.cv-play { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cv-play .bi::before { vertical-align: 0; }
.chat-m.out .cv-play { background: #fff; color: var(--primary); }
.cv-body { flex: 1; min-width: 0; }
.cv-wave { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; touch-action: none; }
.cv-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: var(--primary); opacity: .35; }
.cv-wave i.on { opacity: 1; }
.cv-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--slate-500); }
.cv-speed { border: 0; border-radius: 10px; padding: 0 7px; height: 18px; font-size: 11px; font-weight: 700; cursor: pointer;
  background: rgba(79, 70, 229, .12); color: var(--primary); }
.chat-rec-wave { flex: 1; min-width: 60px; height: 32px; }
.chat-doc {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-right: 26px;
  border-radius: 10px; background: rgba(15, 23, 42, .04); color: var(--slate-800); text-decoration: none; min-width: 0;
}
.chat-doc i { font-size: 26px; color: var(--primary); flex: none; }
.chat-doc span { display: flex; flex-direction: column; min-width: 0; }
.chat-doc b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-doc em { font-style: normal; font-size: 12px; color: var(--slate-500); }
.chat-prog { height: 4px; background: rgba(15, 23, 42, .1); border-radius: 2px; margin: 5px 6px 1px; overflow: hidden; }
.chat-prog i { display: block; height: 100%; background: var(--primary); transition: width .2s; }
.chat-bar {
  display: flex; gap: 10px; align-items: center; padding: 6px 12px; background: #fff;
  border-top: 1px solid var(--slate-200); color: var(--primary); flex: none;
}
.chat-bar[hidden] { display: none; }
.chat-bar-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-bar-b b { font-size: 12.5px; color: var(--primary-dark); }
.chat-bar-b span { font-size: 12.5px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-comp {
  display: flex; gap: 6px; align-items: flex-end; padding: 8px 10px; background: #fff;
  border-top: 1px solid var(--slate-200); flex: none;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.chat-comp[hidden] { display: none; }
.chat-comp textarea {
  flex: 1; min-width: 0; resize: none; border: 1px solid var(--slate-200); border-radius: 20px;
  padding: 10px 14px; font: inherit; font-size: 16px; line-height: 1.3; max-height: 140px; background: var(--slate-50);
  outline: none;
}
.chat-comp textarea:focus { border-color: var(--primary); background: #fff; }
.chat-ic {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent;
  color: var(--slate-500); font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.chat-ic:hover { background: var(--slate-100); color: var(--slate-800); }
.chat-ic[hidden] { display: none; }
.chat-send { background: var(--primary); color: #fff; font-size: 18px; }
.chat-send:hover { background: var(--primary-dark); color: #fff; }
.chat-rec { align-items: center; }
.chat-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: chatRec 1s infinite; }
#chat-rec-t { font-variant-numeric: tabular-nums; font-weight: 600; }
.chat-rec .muted { flex: 1; }
.chat-rec #chat-rec-t { font-variant-numeric: tabular-nums; min-width: 36px; }
@keyframes chatRec { 50% { opacity: .25; } }
.chat-menu {
  position: fixed; z-index: 400; background: #fff; border-radius: 10px; padding: 5px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .2); min-width: 190px; display: flex; flex-direction: column;
}
.chat-menu button {
  display: flex; gap: 10px; align-items: center; border: 0; background: none; font: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: 7px; cursor: pointer; text-align: left; color: var(--slate-800);
}
.chat-menu button:hover { background: var(--slate-100); }
.chat-menu button.danger { color: var(--danger-dark); }
.chat-up, .chat-lb {
  position: fixed; inset: 0; z-index: 390; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.chat-up-card {
  background: #fff; border-radius: 14px; width: min(520px, 100%); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-up-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 16px; }
.chat-up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 4px 16px 10px; overflow-y: auto; }
.chat-up-it { position: relative; border-radius: 10px; background: var(--slate-100); overflow: hidden; display: flex; flex-direction: column; }
.chat-up-it img, .chat-up-it video { width: 100%; height: 100px; object-fit: cover; display: block; }
.chat-up-doc { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--primary); }
.chat-up-n { font-size: 11.5px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate-600); }
.chat-up-rm {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(15, 23, 42, .6); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-up-kuda { margin: 0 16px 8px; font-size: 14px; color: var(--slate-600); }
.chat-up-otm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 16px 8px; }
.chat-up-chip { border: 1px solid var(--slate-200); background: var(--surface, #fff); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.chat-up-chip.on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; }
#chat-up-cap { margin: 0 16px; border: 1px solid var(--slate-200); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 16px; resize: none; }
.chat-up-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 14px; }
/* просмотр фото как в Telegram (02.10.2026): шапка «кто и когда», лента кнопок внизу */
.chat-lb { background: rgba(2, 6, 23, .97); padding: 0; flex-direction: column; color: #fff; user-select: none; }
.chat-lb-h { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 10px 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.chat-lb-who { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; min-width: 0; }
.chat-lb-who span { font-size: 12.5px; opacity: .7; }
.chat-lb-st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 64px 12px 76px; touch-action: none; }
.chat-lb-st.zoomed { cursor: grab; }
.chat-lb-st img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .12s ease-out; will-change: transform; }
.chat-lb-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.chat-lb-b { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; text-decoration: none; flex: none; }
.chat-lb-b:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.chat-lb-z { min-width: 46px; text-align: center; font-size: 13px; opacity: .8; }
.chat-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 22px; cursor: pointer; }
.chat-lb-nav.l { left: 8px; } .chat-lb-nav.r { right: 8px; }
.chat-lb-nav[hidden] { display: none; }
.chat-lb-menu { position: absolute; right: 12px; bottom: 66px; z-index: 3; background: #1e293b; border-radius: 12px; padding: 6px;
  display: flex; flex-direction: column; min-width: 190px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.chat-lb-menu button { background: none; border: 0; color: #fff; text-align: left; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 15px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.chat-lb-menu button:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 640px) { .chat-lb-nav { display: none; } .chat-lb-bar { gap: 4px; } }
/* окно файла из чата: шапка с «Закрыть» и «Поделиться», страницы PDF лентой */
.chat-docv { position: fixed; inset: 0; z-index: 395; background: var(--slate-100); display: flex; flex-direction: column; }
.chat-docv-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px; padding-top: max(8px, env(safe-area-inset-top));
  background: #fff; border-bottom: 1px solid var(--slate-200); flex: none; }
.chat-docv-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.chat-docv-b { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chat-docv-b img { width: 100%; max-width: 900px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .15); border-radius: 4px; }
.chat-docv-msg { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 15px; }
.chat-docv-msg > .bi { font-size: 48px; color: var(--primary); }
.chat-w { display: contents; }
/* у голосового справа свой «⋮» браузерного плеера — наша «⋯» встаёт рядом, а не поверх */
.chat-bub.is-voice { padding-right: 38px; }
.chat-bub.is-voice .chat-more { background: transparent; top: 50%; margin-top: -24px; }
.chat-pinmark { color: var(--primary); font-size: 10px; }
.chat-pins {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 14px; background: #fff;
  border-bottom: 1px solid var(--slate-200); flex: none; min-height: 48px;
}
.chat-pins[hidden] { display: none; }
.chat-pins-ic { color: var(--primary); font-size: 15px; flex: none; }
.chat-pins-b {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border: 0; background: none;
  text-align: left; cursor: pointer; font: inherit; padding: 4px 0; border-left: 3px solid var(--primary); padding-left: 9px;
}
.chat-pins-b b { font-size: 12.5px; color: var(--primary-dark); }
.chat-pins-b span, .chat-pins-row span { font-size: 13px; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pins-list { width: min(360px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; }
.chat-pins-h { font-size: 12.5px; font-weight: 700; color: var(--slate-500); padding: 6px 10px 4px; }
.chat-pins-row { display: flex; align-items: center; gap: 2px; }
.chat-pins-row > button:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.chat-pins-row > button:first-child span { max-width: 100%; }
.chat-pins-row b { font-size: 12.5px; color: var(--primary-dark); }
@media (max-width: 768px) {
  .chat-list { width: 100%; border-right: 0; }
  .chat.has-active .chat-list { display: none; }
  .chat:not(.has-active) .chat-pane { display: none; }
  .chat-back { display: inline-flex; margin-left: -6px; }
  .chat-bub { max-width: 86%; }
  .chat-vid { width: 100%; }
  .chat-msgs { padding: 10px 8px 6px; }
  /* открытая переписка — по видимой части экрана (владелец 02.10.2026, iPhone): при
     клавиатуре iOS сдвигал всю страницу вверх и шапка с именем уезжала за край.
     Размер и сдвиг видимой области ставит chatFitViewport() из visualViewport. */
  body.page-chat .chat { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); z-index: 80; }
  body.page-chat:not(.chat-in) .chat { height: calc(var(--vv-h, 100dvh) - var(--tabbar-h)) !important; }
  body.chat-in.kb-open .chat-comp { padding-bottom: 8px; }
  body.page-chat { overscroll-behavior: none; }   /* без «резинки» всей страницы в чате */
}

/* ══ Телефон: панель вкладок внизу (01.10.2026) ═══════════════════════════
   Только на узком экране. Высота с учётом полосы «домой» у iPhone. В открытом
   чате прячется — там внизу поле ввода (как в Telegram). */
#tabbar { display: none; }
@media (max-width: 768px) {
  :root { --tabbar-h: calc(56px + env(safe-area-inset-bottom)); }
  #tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--slate-200);
  }
  body.page-login #tabbar, body.chat-in #tabbar { display: none; }
  /* верхняя строка — поиск товаров и «☰»: в чате на телефоне не нужна («☰» = вкладка
     «Ещё») и наезжала на заголовок «Чат склада» (владелец 01.10.2026, снимок с iPhone) */
  body.page-chat #topbar { display: none; }
  body.page-chat { --topbar-h: 0px; }
  body:not(.page-login):not(.chat-in) #main { padding-bottom: calc(var(--tabbar-h) + 16px); }
  body.page-chat:not(.chat-in) .chat { height: calc(100dvh - var(--banner-h) - var(--topbar-h) - var(--tabbar-h)); }
  .tab-it {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--slate-500); text-decoration: none; font-size: 10.5px; font-weight: 600;
    border: 0; background: none; font-family: inherit; position: relative; cursor: pointer; padding: 0;
  }
  .tab-it i { font-size: 20px; }
  .tab-it.active { color: var(--primary); }
  .tab-it:hover { text-decoration: none; }
  .tab-it .sb-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; }
  /* тосты и плашка новостей — над вкладками, а не под ними */
  body:not(.chat-in) #wbn-nudge { bottom: calc(var(--tabbar-h) + 8px) !important; }
}
.mp-sec { font-weight: 700; font-size: 13px; color: var(--slate-700); margin-top: 12px; }
.mp-row { display: flex; align-items: center; gap: 8px; }
.mp-row .spacer { flex: 1; }
.mp-ava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.mp-ava-net { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 26px; font-weight: 700; }
.mp-shagi { padding-left: 18px; line-height: 1.6; margin: 6px 0 8px; }
.mp-ustr { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--slate-100); }
img.chat-ava, img.sb-ava { object-fit: cover; }
@media (max-width: 768px) {
  body:not(.chat-in):not(.page-login) #toasts { bottom: calc(var(--tabbar-h) + 12px + var(--nudge-h, 0px)); }
}

/* «Последние поставки» на телефоне: юрлицо под номером, столбец ИП убираем —
   иначе статус уходил за край экрана */
.dash-ip-m { display: none; }
@media (max-width: 768px) {
  #dash-recent th:nth-child(2), #dash-recent td:nth-child(2) { display: none; }
  #dash-recent .dash-ip-m { display: block; margin-top: 3px; }
  #dash-recent .badge { white-space: normal; }
}
/* плашка новостей ВБ — над экраном, но ПОД окнами (иначе лежала поверх «Мои настройки») */
#wbn-nudge { z-index: 240 !important; }

/* ══ Звонки в чате (02.10.2026): окно звонка, входящий, свёрнутый ══ */
.chat-head-call { margin-left: auto; font-size: 19px; }
.zv { position: fixed; inset: 0; z-index: 420; background: #0f172a; color: #fff; display: flex; flex-direction: column; }
.zv[hidden] { display: none; }
.zv-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top)); }
.zv-t { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.zv-t b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }
.zv-t span { font-size: 13px; opacity: .7; }
.zv-grid { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 8px 12px; grid-template-columns: 1fr; align-content: center; position: relative; }
/* один на экране или звонок вдвоём — большая картинка на весь экран (вдвоём своя — окошком .zv-pip) */
.zv-grid[data-n="1"], .zv-grid[data-n="pip"] { display: block; padding: 0; }
.zv-grid[data-n="2"] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.zv-grid[data-n="3"], .zv-grid[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
.zv-grid[data-n="5"], .zv-grid[data-n="6"], .zv-grid[data-n="7"], .zv-grid[data-n="8"], .zv-grid[data-n="9"] { grid-template-columns: repeat(3, 1fr); }
.zv-tile { position: relative; background: #1e293b; border-radius: 14px; overflow: hidden; min-height: 140px; max-height: 70vh;
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 2px solid transparent; }
.zv-grid[data-n="1"] .zv-tile, .zv-grid[data-n="pip"] .zv-tile:not(.zv-pip) { position: absolute; inset: 0; aspect-ratio: auto;
  min-height: 0; max-height: none; border-radius: 0; border-width: 0; }
.zv-tile.zv-pip { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: min(30vw, 130px); aspect-ratio: 3 / 4;
  min-height: 0; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); touch-action: none; cursor: grab; }
@media (min-aspect-ratio: 1/1) { .zv-tile.zv-pip { width: 220px; aspect-ratio: 4 / 3; } }
.zv-tile.zv-pip.zv-tyanu { cursor: grabbing; }
.zv-tile.zv-pip video { pointer-events: none; }
.zv-tile.zv-pip .zv-ava .chat-ava { width: 48px; height: 48px; font-size: 20px; }
.zv-tile.zv-pip .zv-name { left: 6px; bottom: 5px; font-size: 11px; padding: 1px 6px; }
.zv-tile.zv-skryt { display: none !important; }
/* «говорящий на весь экран»: он большой, остальные лентой снизу */
.zv .zv-grid[data-vid="spiker"] { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; overflow-x: auto; }
.zv .zv-grid[data-vid="spiker"] .zv-tile:not(.zv-pip) { position: relative; inset: auto; flex: 0 0 96px; height: 96px; min-height: 0;
  max-height: none; aspect-ratio: auto; border-radius: 12px; border-width: 2px; }
.zv .zv-grid[data-vid="spiker"] .zv-tile.zv-glav { position: absolute; inset: 8px 12px 116px; height: auto; border-radius: 14px; }
.zv .zv-grid[data-vid="spiker"][data-n="1"] .zv-tile.zv-glav { inset: 8px 12px; }
.zv .zv-grid[data-vid="spiker"] .zv-tile:not(.zv-glav) .zv-ava .chat-ava { width: 48px; height: 48px; font-size: 20px; }
.zv .zv-grid[data-vid="spiker"] .zv-tile:not(.zv-glav) .zv-name { left: 4px; bottom: 4px; font-size: 11px; padding: 1px 5px; }
/* меню «вид звонка» */
.zv-menu { position: absolute; z-index: 5; right: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 50px); min-width: 260px;
  display: flex; flex-direction: column; padding: 6px; background: #1e293b; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.zv-menu button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 8px; background: none;
  color: #fff; font-size: 15px; text-align: left; cursor: pointer; }
.zv-menu button span { flex: 1; }
.zv-menu button:hover { background: rgba(255, 255, 255, .08); }
/* переписка во время звонка: звонок окошком поверх чата, тянется в любое место, нажатие — развернуть */
.zv.zv-plav { inset: auto; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 120px; height: 168px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); touch-action: none; cursor: pointer; }
@media (min-aspect-ratio: 1/1) { .zv.zv-plav { width: 240px; height: 150px; } }
.zv.zv-plav .zv-h, .zv.zv-plav .zv-bar, .zv.zv-plav .zv-menu { display: none; }
.zv .zv-grid[data-vid="plav"] { display: block; padding: 0; }
.zv .zv-grid[data-vid="plav"] .zv-tile { position: absolute; inset: 0; min-height: 0; max-height: none; aspect-ratio: auto;
  border-radius: 0; border-width: 0; }
.zv.zv-plav .zv-tile video { pointer-events: none; }
.zv.zv-plav .zv-ava .chat-ava { width: 56px; height: 56px; font-size: 24px; }
.zv.zv-plav .zv-name { left: 6px; bottom: 5px; font-size: 11px; padding: 1px 6px; }
.zv-tile.zv-speak { border-color: #22c55e; }
.zv-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zv-tile video.zv-mirror { transform: scaleX(-1); }
.zv-tile.zv-video .zv-ava { display: none; }
.zv-ava .chat-ava { width: 96px; height: 96px; font-size: 40px; }
.zv-name { position: absolute; left: 10px; bottom: 8px; font-size: 13px; background: rgba(0, 0, 0, .45); padding: 2px 8px; border-radius: 8px; }
.zv-bar { display: flex; justify-content: center; gap: 16px; padding: 14px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.zv-b { width: 58px; height: 58px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.zv-b.off { background: #fff; color: #0f172a; }
.zv-b-sm { width: 40px; height: 40px; font-size: 18px; }
.zv-b[hidden] { display: none; }
.zv-end { background: #ef4444; }
.zv-ok { background: #22c55e; }
.zv-mini { position: fixed; z-index: 410; left: 50%; transform: translateX(-50%); top: max(10px, env(safe-area-inset-top));
  border: 0; border-radius: 22px; background: #16a34a; color: #fff; padding: 9px 16px; font: inherit; font-size: 14px;
  display: flex; gap: 8px; align-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; max-width: calc(100vw - 32px); }
.zv-mini span { opacity: .85; }
.zv-in { position: fixed; z-index: 430; left: 50%; transform: translateX(-50%); top: max(12px, env(safe-area-inset-top));
  width: min(420px, calc(100vw - 24px)); background: #0f172a; color: #fff; border-radius: 18px; padding: 14px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.zv-in-ava .chat-ava { width: 48px; height: 48px; font-size: 20px; }
.zv-in-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zv-in-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zv-in-t span { font-size: 13px; opacity: .75; }
.zv-in-b { display: flex; gap: 8px; }
.zv-in-b .zv-b { width: 46px; height: 46px; font-size: 19px; }
.zv-plashka { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: #dcfce7; color: #166534;
  padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; flex: none; }
.zv-plashka span { flex: 1; text-align: left; }

/* перезапуск склада и обрыв связи: запрос повторяется сам, сверху плашка (02.10.2026) */
.api-obnov { position: fixed; z-index: 500; left: 50%; transform: translateX(-50%); top: max(10px, env(safe-area-inset-top));
  background: #1e293b; color: #fff; border-radius: 20px; padding: 8px 16px; font-size: 14px; display: flex; gap: 8px;
  align-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; }
.api-obnov i { animation: api-krug 1s linear infinite; }
@keyframes api-krug { to { transform: rotate(360deg); } }

/* просмотр таблиц и текстов из чата (02.10.2026) */
.chat-tabl-box { overflow: auto; background: #fff; flex: 1; min-height: 0; }
.chat-tabl { border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.chat-tabl th, .chat-tabl td { border: 1px solid var(--slate-200); padding: 4px 8px; text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.chat-tabl thead th { position: sticky; top: 0; background: var(--slate-100); color: var(--slate-500); font-weight: 600; z-index: 1; text-align: center; }
.chat-tabl tbody th { position: sticky; left: 0; background: var(--slate-100); color: var(--slate-500); font-weight: 500; text-align: right; }
.chat-tabl-listy { margin: 0; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--slate-200); flex: none; }
.chat-docv-pre { margin: 0; padding: 12px 14px; background: #fff; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.chat-docv-b .chat-tabl-box, .chat-docv-b .chat-docv-pre, .chat-docv-b .chat-tabl-listy { align-self: stretch; }
.chat-prof-ava-z { cursor: zoom-in; }
/* «Время в системе» календарём */
.kal-bar { flex-wrap: wrap; gap: 8px; }
.kal-vid { margin: 0 6px 0 0; }
.kal-pod { margin-left: 4px; }
.kal-pr { margin-bottom: 12px; }
.kal { display: flex; flex-direction: column; gap: 6px; min-width: 640px; }
.kal-r { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.kal-shk { border-bottom: 0; padding: 0; }
.kal-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kal-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-shkala { position: relative; height: 16px; font-size: 11px; color: var(--slate-500, #64748b); }
.kal-shkala span { position: absolute; transform: translateX(-50%); }
.kal-trek { position: relative; height: 30px; background: var(--slate-50, #f8fafc); border-radius: 6px; }
.kal-trek > i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border, #e2e8f0); }
.kal-otr { position: absolute; top: 13px; height: 4px; background: var(--slate-300, #cbd5e1); border-radius: 2px; }
.kal-blok { position: absolute; top: 5px; height: 20px; border: 0; padding: 0; border-radius: 3px; cursor: pointer; opacity: .92; }
.kal-blok:hover { opacity: 1; outline: 2px solid rgba(15, 23, 42, .35); z-index: 2; }
.kal-ustr { position: absolute; top: -13px; transform: translateX(-50%); font-size: 10px; color: var(--slate-500, #64748b); line-height: 1; }
.kal-sej { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ef4444; z-index: 3; }
.kal-gde { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12px; color: var(--slate-600, #475569); }
.kal-gde span { display: inline-flex; align-items: center; gap: 4px; }
.kal-gde i, .kal-tochka { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 2px; }
.kal-ned { display: grid; gap: 4px; min-width: 700px; align-items: stretch; }
.kal-ned-h { font-size: 12px; color: var(--slate-500, #64748b); text-align: center; padding-bottom: 2px; }
.kal-ned-n { font-weight: 600; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-ned-c { position: relative; height: 54px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font-size: 13px; }
.kal-ned-c b { position: relative; z-index: 1; }
.kal-ned-c i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(99, 102, 241, .16); }
.kal-ned-c.pusto { background: var(--slate-50, #f8fafc); cursor: default; }
.kal-ned-c.itog { cursor: default; background: var(--slate-50, #f8fafc); }
.kal-pop { max-width: 640px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; }
.kal-pop-i { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 3px; }
.kal-pop-l { overflow-y: auto; padding: 0 16px 14px; }
#kal-b { overflow-x: auto; }
@media (max-width: 700px) { .kal-r { grid-template-columns: 112px 1fr; gap: 8px; } .kal-ned { grid-template-columns: 96px repeat(7, minmax(56px, 1fr)) 64px !important; } }

/* «Товары» деревом (07.10.2026): уровни отступом, строки кликабельны */
.td-t .td-r { cursor: pointer; }
.td-t .td-r:hover td { background: var(--slate-50); }
.td-t .td-str { display: inline-block; width: 14px; color: var(--slate-500); font-size: 11px; }
.td-t .td-l0 td { background: var(--slate-100); }
.td-t .td-l1 td:first-child { padding-left: 28px; }
.td-t .td-l2 td:first-child { padding-left: 52px; }
.td-t .td-l3 td:first-child { padding-left: 76px; }