/* =============================================================================
 *  tl.css — trade-lens надстройка над дизайн-системой merchant-lens (tokens.css)
 *  Здесь только то, чего нет в базовой системе:
 *   · Лего-блоки (единый контракт, drag-reorder, collapse, hide)
 *   · Inline-ввод в стиле 1С (редактируемые ячейки, строка-черновик)
 *   · Индикаторы правдивости данных (🟢 / 💀)
 *   · Плотность таблиц, видимость SQL-тегов, стиль индикаторов (Tweaks)
 *   · WIP / awaiting состояния разделов-заглушек
 * ============================================================================= */

/* ----------------------------------------------------- раздел (page) ------ */
.page-fade { animation: fadeIn .28s ease; }

/* ============ СВОРАЧИВАЮЩИЙСЯ RAIL (иконки → раскрытие по наведению) ====== */
.app { grid-template-columns: 98px 1fr; }
.app > .main { grid-column: 2; min-width: 0; }
.rail {
  position: fixed; top: 14px; left: 14px; width: 72px; height: calc(100vh - 28px); z-index: 60;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  transition: width .24s cubic-bezier(.2,0,0,1), box-shadow .24s, background .2s;
}
.rail:hover, .rail:focus-within { width: 248px; box-shadow: var(--shadow-lg); background: var(--surface); }
.rail::after { display: none !important; content: none !important; }

/* бренд: логотип (загрузка) + редактируемое название */
.rail .brand { display: flex; align-items: center; gap: 11px; padding: 2px 2px 18px; }
.rail .brand .mark {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--c-violet));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 16px; letter-spacing: -0.04em;
  box-shadow: var(--shadow-sm); border: 0; cursor: pointer; overflow: hidden; padding: 0;
}
.rail .brand .mark img { width: 100%; height: 100%; object-fit: cover; }
.rail .brand .mark:hover { filter: brightness(1.05); }
.rail .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rail .brand-text .name {
  font-size: 14px; font-weight: 600; letter-spacing: -0.018em; cursor: pointer; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 5px;
}
.rail .brand-text .name .brand-edit { opacity: 0; color: var(--ink-4); transition: opacity .14s; }
.rail .brand-text .name:hover .brand-edit { opacity: 1; }
.rail .brand-text .sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-name-input { font: inherit; font-size: 14px; font-weight: 600; width: 150px; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--ink-1); outline: 0; }

/* пункты разделов */
.rail a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.rail a:hover { background: var(--surface-2); color: var(--ink-1); }
.rail a.active { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-sm); }
.rail a .r-ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink-2); }
.rail a.active .r-ic { color: var(--accent); }
.rail a .r-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.rail a .r-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail a .r-hint { font-size: 10px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail a.active .r-hint { color: var(--ink-3); }
.rail a .badge { flex: 0 0 auto; font-size: 10px; padding: 1px 7px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); font-weight: 600; letter-spacing: .04em; }

/* rail: раздел + его таблицы (блоки). Свёрнуто — символы, раскрыто — названия. */
.rail .rail-group { display: flex; flex-direction: column; }
.rail a.rail-sec { font-weight: 600; }
.rail .rail-subs { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px; }
.rail a.rail-sub { padding: 6px 9px; gap: 12px; }
.rail a.rail-sub .r-ic { color: var(--ink-3); }
.rail a.rail-sub .r-title { font-size: 12.5px; font-weight: 450; color: var(--ink-2); }
.rail a.rail-sub:hover .r-title { color: var(--ink-1); }
.rail a.rail-sub.active { background: var(--surface-2); box-shadow: none; }
.rail a.rail-sub.active .r-ic { color: var(--accent); }
.rail a.rail-sub.active .r-title { color: var(--ink-1); font-weight: 550; }
/* раскрытый rail: лёгкий отступ подпунктов + направляющая линия */
.rail:hover .rail-subs, .rail:focus-within .rail-subs { margin-left: 13px; padding-left: 10px; border-left: 1px solid var(--line); }

.rail .section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 14px 8px 6px; font-weight: 600; }
.rail .foot { margin-top: auto; padding: 14px 8px 4px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); display: flex; flex-direction: column; gap: 6px; }
.rail .foot .live { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.rail .foot .live .ping { position: relative; width: 7px; height: 7px; border-radius: 99px; background: var(--pos); flex: 0 0 auto; }

/* скрытое в свёрнутом виде — проявляется при раскрытии */
.rail .brand-text, .rail .section-label, .rail a .r-body, .rail a .badge, .rail .foot .mono {
  opacity: 0; transition: opacity .12s ease; white-space: nowrap;
}
.rail:hover .brand-text, .rail:hover .section-label, .rail:hover a .r-body, .rail:hover a .badge, .rail:hover .foot .mono,
.rail:focus-within .brand-text, .rail:focus-within .section-label, .rail:focus-within a .r-body, .rail:focus-within a .badge, .rail:focus-within .foot .mono {
  opacity: 1; transition-delay: .06s;
}


/* ----------------------------------------------------- ЛЕГО-БЛОК ---------- */
/* Единый контракт блока: header (grip · num · title/hint · truth · actions),
   body, footer (source). Любой блок одинаков по структуре — «подобие». */
.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  scroll-margin-top: 78px;
  transition: box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.block.dragging { opacity: .5; box-shadow: var(--shadow-lg); }
.block.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.block.collapsed .block-body,
.block.collapsed .block-foot { display: none; }

.block-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px 15px 12px;
  border-bottom: 1px solid var(--line);
}
.block.collapsed .block-head { border-bottom: 0; }

.block-grip {
  width: 22px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-4);
  cursor: grab;
  border-radius: var(--r-xs);
  transition: color .15s, background .15s;
}
.block-grip:hover { color: var(--ink-2); background: var(--surface-2); }
.block-grip:active { cursor: grabbing; }

.block-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--ink-3);
  letter-spacing: .04em; font-weight: 500;
  white-space: nowrap;
}
.block.collapsed .block-num,
.block .block-num { align-self: center; }

.block-titles { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.block-titles .t {
  font-size: 16px; font-weight: 600; letter-spacing: -0.018em;
  display: flex; align-items: center; gap: 9px;
}
.block-titles .s { font-size: 11px; color: var(--ink-3); font-weight: 400; }

.block-actions { display: flex; align-items: center; gap: 6px; }
.block-body { padding: 16px 18px; }
.block-body.flush { padding: 0; }

.block-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-size: 11px; color: var(--ink-3);
}
.block-foot .spacer { flex: 1; }
.block-foot .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.block-foot .mono { font-family: 'Geist Mono', monospace; }

/* фикс-высота тела с внутренним скроллом (карточка не растягивает страницу).
   overscroll-behavior: auto — на краю внутренней таблицы скролл «сцепляется»
   с общей прокруткой дашборда (scroll chaining). */
.scrollbox { max-height: 50vh; overflow-y: auto; overscroll-behavior: auto; }
.scrollbox.tall { max-height: 62vh; }

/* ----------------------------------------------- ИНДИКАТОР ПРАВДИВОСТИ ---- */
/* Минимализм: подтверждено → зелёная галочка. Не подтверждено → ничего не рисуем. */
.truth {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
  cursor: help;
  white-space: nowrap;
}
.truth.ok  { background: var(--pos-bg); color: var(--pos); }
.truth.ok svg { display: block; }

/* индикатор в ячейке таблицы — узкая колонка, только галочка без фона */
td.truth-cell { width: 40px; text-align: center; }
td.truth-cell .truth { padding: 0; background: none; color: var(--pos); justify-content: center; }
td.truth-cell .truth .label-txt { display: none; }

/* ----------------------------------------------------- INLINE-ВВОД (1С) -- */
/* Редактируемая ячейка: на hover тонкая рамка accent, курсор text. */
td.edit, .cell-edit {
  position: relative;
  cursor: text;
  border-radius: var(--r-xs);
}
td.edit::after {
  content: '';
  position: absolute; inset: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  pointer-events: none;
  transition: border-color .12s;
}
tr:hover td.edit::after { border-color: var(--accent-soft); }
td.edit.editing::after { border-color: var(--accent); }

td.edit .cell-val { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }
td.edit .cell-empty { color: var(--ink-4); }

.cell-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink-1);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: 0;
}
.cell-input.num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'Geist Mono', monospace; }
.cell-input.invalid { border-color: var(--neg); box-shadow: 0 0 0 3px var(--neg-bg); }
select.cell-input { cursor: pointer; }

/* пульсация после сохранения / пересчёта */
@keyframes savePulse { 0% { background: var(--pos-bg); } 100% { background: transparent; } }
@keyframes calcPulse { 0% { background: var(--info-bg); } 100% { background: transparent; } }
td.saved { animation: savePulse .6s ease; }
td.recalc { animation: calcPulse .4s ease; }

/* ячейка-вывод формулы: фон surface-2, не кликабельна, формула в tooltip */
td.computed {
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: default;
  font-variant-numeric: tabular-nums;
}

/* спиннер в углу ячейки на время «запроса» */
td.busy { opacity: .6; }
td.busy::before {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 99px;
  border: 1.5px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* черновик-строка нового документа (1С-стиль ввода) */
tr.draft-row td { background: var(--accent-soft); }
:root[data-theme="dark"] tr.draft-row td { background: rgba(93,165,224,.08); }
tr.draft-row .draft-tag {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--accent); letter-spacing: .08em; font-weight: 600;
}

/* ----------------------------------------------------- drill-down -------- */
tr.drillable { cursor: pointer; }
tr.drill-sub > td { background: var(--surface-2); padding: 0; }
.drill-inner { padding: 6px 14px 12px 14px; }
.drill-inner .tbl thead th { background: var(--surface-2); }
.chev {
  display: inline-flex; transition: transform .18s ease; color: var(--ink-3);
}
.chev.open { transform: rotate(90deg); color: var(--accent); }

/* ----------------------------------------------------- pairs unit -------- */
.u-pairs { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 3px; }

/* ----------------------------------------------------- плотность таблиц -- */
/* разворот блока почти на весь экран: таблица растягивается, тулбары/операции доступны */
.modal.block-modal {
  width: 96vw; max-width: 1560px; height: 92vh;
  display: flex; flex-direction: column;
}
.modal.block-modal .modal-body {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 18px 22px 22px;
}
.modal.block-modal .modal-body > .col,
.modal.block-modal .modal-body > * {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.modal.block-modal .scrollbox,
.modal.block-modal .scrollbox.tall {
  flex: 1; min-height: 0; max-height: none;
}
/* подсветка блока, на который перешли из «Сводки» */
.block-flash > .block {
  animation: blockFlash 1.5s cubic-bezier(.2,0,0,1);
}
@keyframes blockFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent), var(--shadow-sm); }
  18%  { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent), var(--shadow-md); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow-sm); }
}

/* модалка-форма: сетка полей */
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 26px; border-top: 1px solid var(--line);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-lbl { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.field-check { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-2); }
.form-err { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--accent); font-size: 11px; }
/* импорт */
.import-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.import-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 30px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--ink-3); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.import-drop:hover { border-color: var(--accent); color: var(--ink-2); background: var(--surface-2); }
.import-done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 8px; text-align: center; font-size: 13px; color: var(--ink-1); }
.import-done-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* артикул товара: продавца (primary) + SKU площадки (secondary, скрываем тумблером) */
.art-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.art-cell.inline { flex-direction: row; align-items: baseline; gap: 8px; }
.art-cell .art-vendor { font-weight: 500; color: var(--ink-1); }
.art-cell .art-sku { font-size: 10px; color: var(--ink-3); letter-spacing: -0.01em; }
:root[data-skump="off"] .sku-mp { display: none !important; }
/* скругление таблиц внутри блоков — единая парадигма со всем дашбордом */
.block-body .scrollbox {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.block-body .tbl thead th:first-child { border-top-left-radius: var(--r-md); }
.block-body .tbl thead th:last-child  { border-top-right-radius: var(--r-md); }
.block-body .scrollbox .tbl tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-md); }
.block-body .scrollbox .tbl tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--r-md); }
:root[data-density="compact"] .tbl tbody td { padding: 7px 12px; }
:root[data-density="compact"] .tbl thead th { padding: 7px 12px; }
:root[data-density="spacious"] .tbl tbody td { padding: 16px 16px; }
:root[data-density="spacious"] .tbl thead th { padding: 13px 16px; }

/* ----------------------------------------------------- SQL-тег видимость - */
:root[data-sql="off"] .sql-tag { display: none !important; }

/* ----------------------------------------------------- WIP / awaiting ---- */
.awaiting {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 64px 24px; text-align: center;
}
.awaiting .ring {
  width: 56px; height: 56px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--warn-bg); color: var(--warn);
  border: 1px dashed var(--warn);
}
.awaiting .a-ttl { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.awaiting .a-sub { font-size: 13px; color: var(--ink-2); max-width: 460px; }
.awaiting .a-meta {
  font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px;
}

/* «добавить блок» — пунктирный плейсхолдер в конце списка (лего-расширяемость) */
.block-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--ink-3);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  background: transparent;
  transition: all .15s;
}
.block-add:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* список скрытых блоков (после hide) */
.hidden-blocks {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 4px 0 4px;
}
.hidden-blocks .hb-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.hidden-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-2); cursor: pointer;
}
.hidden-chip:hover { border-color: var(--accent-soft); color: var(--ink-1); }

/* ----------------------------------------------------- search input ------ */
.inp {
  font: inherit; font-size: 13px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-1);
  outline: 0;
}
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp.search { padding-left: 30px; background-image: none; min-width: 200px; }
.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-wrap > .icon { position: absolute; left: 9px; color: var(--ink-3); pointer-events: none; }

/* checkbox-пилюля */
.chk {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none;
  padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface);
}
.chk input { accent-color: var(--accent); }
.chk.on { border-color: var(--accent-soft); color: var(--ink-1); background: var(--accent-soft); }

/* ----------------------------------------------------- connector dot ----- */
.conn-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.conn-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.conn-dot.on  { background: var(--pos); }
.conn-dot.off { background: var(--neg); }
.conn-dot.idle{ background: var(--ink-4); }

/* ----------------------------------------------------- мини KPI footer --- */
.kpi-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-3); margin-top: 8px;
}

/* ----------------------------------------------------- Tweaks panel ------ */
.tweaks {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fadeIn .2s ease;
}
.tweaks-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.tweaks-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.tw-group { display: flex; flex-direction: column; gap: 7px; }
.tw-label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; }
.tw-seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px;
}
.tw-seg button {
  flex: 1; font: inherit; font-size: 11px; font-weight: 500;
  border: 0; background: transparent; color: var(--ink-2);
  padding: 5px 8px; border-radius: 99px; cursor: pointer;
  transition: all .14s;
}
.tw-seg button.on { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-sm); font-weight: 600; }

/* ----------------------------------------------------- responsive -------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 120;
    width: 248px; height: 100%; transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.16,1,.3,1);
    box-shadow: var(--shadow-xl);
  }
  .rail.open { transform: translateX(0); }
  /* на мобильном rail раскрыт → подписи всегда видны */
  .rail .brand-text, .rail .section-label, .rail a .r-body, .rail a .badge, .rail .foot .mono { opacity: 1; }
  .rail.open .rail-subs { margin-left: 13px; padding-left: 10px; border-left: 1px solid var(--line); }
  .rail-scrim {
    position: fixed; inset: 0; z-index: 110; background: rgba(20,20,30,.34);
    backdrop-filter: blur(2px); animation: fadeIn .2s ease;
  }
  .topbar { padding: 11px 16px; gap: 8px; flex-wrap: wrap; }
  .content { padding: 22px 16px 64px; gap: 30px; }
  .hamburger { display: inline-flex !important; }

  /* сетки KPI/карточек — меньше колонок на планшете */
  .g-6, .g-12 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* широкие таблицы (Приходы/Отгрузки/Себестоимость/Остатки) — горизонтальный
     скролл вместо сжатия. Таблица держит минимальную ширину, контейнер катится. */
  .drill-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .block-body .scrollbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .drill-inner .tbl, .block-body .scrollbox .tbl { min-width: 640px; }
}

/* ----- ТЕЛЕФОН ----- */
@media (max-width: 640px) {
  /* свотчи акцента и фона прячем в шапке — они доступны в Tweaks */
  .topbar .tint-pick { display: none; }
  .topbar { padding: 10px 12px; gap: 6px; }
  .content { padding: 16px 12px 72px; gap: 24px; }

  /* KPI — в одну колонку, читаемо */
  .g-4, .g-3, .g-2, .g-6, .g-12 { grid-template-columns: 1fr; }

  /* шапка раздела компактнее */
  .tl-sechead { gap: 11px; }
  .tl-sechead .ic { width: 36px; height: 36px; border-radius: 10px; }
  .tl-sechead h2 { font-size: 21px; }
  .tl-sechead .s { font-size: 12px; }

  /* мета карточки-группы переносится, не ломая строку */
  .cost-group-head { flex-wrap: wrap; row-gap: 6px; }
  .cost-group-meta { flex-wrap: wrap; }

  /* drag-ручка крупнее для пальца */
  .cg-grip { padding: 2px; touch-action: none; }
}
.hamburger { display: none; }

/* ================== заголовок раздела (непрерывный скролл) =============== */
.rail-section { scroll-margin-top: 76px; }
.tl-sechead {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 2px 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.tl-sechead .ic {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.tl-sechead h2 { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.05; }
.tl-sechead .s { font-size: 13px; color: var(--ink-3); margin-top: 3px; }

/* ===================== ПОЛЬЗОВАТЕЛЬСКИЕ ОБОИ ========================= */
:root[data-bg="custom"] body { background: var(--bg) !important; }
:root[data-bg="custom"] body::before {
  background: var(--tl-bg-image) center center / cover no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}
/* На обоях заголовок раздела лежит на картинке — даём матовую подложку,
   чтобы текст читался на любом фоне. Без обоев правило не активно. */
:root[data-bg="custom"] .tl-sechead {
  padding: 12px 18px; margin-bottom: 22px; border-bottom: 0;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
:root[data-theme="dark"][data-bg="custom"] .tl-sechead {
  background: rgba(26,24,20,.62);
  border-color: rgba(255,255,255,.14);
}
:root[data-bg="custom"] .tl-sechead h2 { color: var(--ink-1); }
:root[data-bg="custom"] .tl-sechead .s { color: var(--ink-2); }

/* ===================== ТЕМА «СТЕКЛО» (Apple Liquid Glass) =============== */
/* ============================== ВСТРОЕННЫЙ ЧАТ ========================== */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 130;
  width: 54px; height: 54px; border: 0; cursor: pointer;
  background: transparent; color: var(--accent);
  display: grid; place-items: center;
  transition: transform .15s, filter .15s;
  filter: drop-shadow(0 4px 10px rgba(20,20,30,.22));
}
.chat-fab:hover { transform: translateY(-2px) scale(1.06); }
.chat-fab svg { width: 30px; height: 30px; }
.chat-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; background: var(--neg); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--bg); font-variant-numeric: tabular-nums;
}

.chat-panel {
  position: fixed; right: 14px; top: 14px; bottom: 14px; z-index: 131;
  width: 380px; max-width: calc(100vw - 28px);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: chatIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes chatIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-title { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-handler { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; }
.chat-handler.ai { color: var(--c-violet); }
.chat-handler.human { color: var(--pos); }

.chat-icon-btn { width: 32px; height: 32px; border-radius: 99px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.chat-icon-btn:hover { background: var(--surface-2); color: var(--ink-1); }

.chat-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chat-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 500; border: 0; background: var(--surface-2); color: var(--ink-2); padding: 8px; border-radius: var(--r-sm); cursor: pointer; }
.chat-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.chat-new { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.chat-new:hover { border-color: var(--accent); color: var(--accent); }

.chat-conv { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; text-align: left; }
.chat-conv:hover { background: var(--surface-2); }
.chat-conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-conv-top .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-top .tm { font-size: 10px; color: var(--ink-3); flex: 0 0 auto; }
.chat-conv-last { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }

.chat-av { width: 36px; height: 36px; border-radius: 99px; flex: 0 0 auto; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--surface-hi); color: var(--ink-2); }
.chat-av.bot { background: var(--c-violet-soft); color: var(--c-violet); }

.chat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 18px; }
.chat-empty .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; }
.chat-empty .t { font-size: 14px; font-weight: 600; }
.chat-empty .s { font-size: 12px; color: var(--ink-3); max-width: 280px; }

.chat-escalate { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--warn-bg); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.chat-escalate .btn { white-space: nowrap; padding: 5px 10px; font-size: 11px; }

.chat-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-bub-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-msg.mine .chat-bub-wrap { align-items: flex-end; }
.chat-bub { padding: 8px 11px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-sm); }
.chat-bub.mine { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.chat-bub.ai { background: var(--c-violet-soft); border-color: transparent; }
.chat-body-text, .chat-bub .chat-body { white-space: pre-wrap; word-break: break-word; }
.chat-ai-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--c-violet); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.chat-time { font-size: 10px; color: var(--ink-4); padding: 0 4px; }
.chat-sys { align-self: center; font-size: 11px; color: var(--ink-3); background: var(--surface-2); padding: 5px 12px; border-radius: 99px; text-align: center; max-width: 90%; }

.chat-att-img { display: block; margin-top: 6px; border-radius: 10px; overflow: hidden; max-width: 220px; }
.chat-att-img img { display: block; width: 100%; height: auto; }
.chat-att-file { display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-1); text-decoration: none; max-width: 240px; }
.chat-bub.mine .chat-att-file { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.chat-att-file .ic { flex: 0 0 auto; color: var(--ink-2); }
.chat-att-file .fn { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-att-file .fs { font-size: 10px; color: var(--ink-3); }

.chat-composer { border-top: 1px solid var(--line); padding: 10px 12px; background: var(--surface); position: relative; }
.chat-composer.drag { outline: 2px dashed var(--accent); outline-offset: -6px; }
.chat-input-row { display: flex; align-items: flex-end; gap: 6px; }
.chat-ta { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; background: var(--surface-2); color: var(--ink-1); outline: 0; max-height: 120px; line-height: 1.4; }
.chat-ta:focus { border-color: var(--accent); }
.chat-send { width: 36px; height: 36px; border-radius: 99px; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.chat-send:disabled { opacity: .4; cursor: default; }
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-pend-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.chat-pend-chip button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; padding: 0; }
.chat-drop { position: absolute; inset: 8px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 600; pointer-events: none; }
.chat-foot { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 10px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }

@media (max-width: 480px) { .chat-panel { width: 100vw; } }

/* период вверху — в тон акцента, а не чёрная плашка (живёт в общей гамме) */
.app { position: relative; z-index: 1; }
.period-picker { box-shadow: none; }
.period-picker button.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.period-picker button.active:hover { filter: none; }
/* активные WB/Ozon и вкладки — в общей палитре */
.tabs button.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: 600; }
/* кнопка масштаба — аккуратная пилюля с процентом */
.zoom-btn { min-width: 52px; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===================== 3D-ГЛУБИНА ЗАДНЕГО ФОНА ========================= */
/* куполообразный свет сверху + затемнение к краям = изогнутая 3D-поверхность;
   мягкие «сферы» в ::before создают парящую глубину. */
body {
  background: var(--bg);
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(150% 115% at 50% -22%, rgba(255,255,255,.92), transparent 46%),
    radial-gradient(1100px 760px at 6% 4%, rgba(216,150,176,.22), transparent 60%),
    radial-gradient(1000px 700px at 104% 0%, rgba(140,198,224,.18), transparent 58%),
    radial-gradient(1000px 900px at 62% 122%, rgba(158,196,150,.16), transparent 60%),
    radial-gradient(130% 120% at 50% 125%, rgba(70,55,35,.12), transparent 55%),
    var(--bg);
}
:root[data-theme="dark"] body {
  background: var(--bg);
}
:root[data-theme="dark"] body::before {
  opacity: .6;
  background:
    radial-gradient(150% 115% at 50% -22%, rgba(255,255,255,.06), transparent 46%),
    radial-gradient(1100px 760px at 6% 4%, rgba(188,161,229,.16), transparent 60%),
    radial-gradient(1000px 700px at 104% 0%, rgba(111,181,239,.13), transparent 58%),
    radial-gradient(1000px 900px at 62% 122%, rgba(95,215,186,.11), transparent 60%),
    radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.5), transparent 55%),
    var(--bg);
}
/* блоки и KPI заметно «парят» над объёмным фоном (мягкая многослойная тень) */
:root[data-theme="light"] .block,
:root[data-theme="dark"] .block {
  box-shadow: 0 1px 2px rgba(60,50,30,.05), 0 14px 34px -16px rgba(40,35,25,.30);
}
:root[data-theme="light"] .block:hover,
:root[data-theme="dark"] .block:hover {
  box-shadow: 0 2px 4px rgba(60,50,30,.06), 0 22px 46px -18px rgba(40,35,25,.36);
}
:root[data-theme="light"] .kpi,
:root[data-theme="dark"] .kpi {
  box-shadow: 0 1px 2px rgba(60,50,30,.05), 0 10px 26px -14px rgba(40,35,25,.28);
}
.block { transition: box-shadow .22s ease, border-color .18s ease, opacity .18s ease, transform .22s ease; }
.tl-sechead .ic { box-shadow: 0 6px 16px -8px var(--accent); }


/* =============================================================================
 *  07 СЕБЕСТОИМОСТЬ (costs.jsx)
 * ============================================================================= */

/* --- палитра групп: цветной левый маркер (8 токенов проекта, циклично) --- */
:root{
  --grp-0:var(--ink-4);
  --grp-1:var(--c-sky); --grp-2:var(--c-rose); --grp-3:var(--c-sage); --grp-4:var(--c-amber);
  --grp-5:var(--c-violet); --grp-6:var(--c-coral); --grp-7:var(--c-mint); --grp-8:var(--c-blue);
  --grp-9:var(--c-rose); --grp-10:var(--c-sky);
}
.cost-group.grp-0 { --gc: var(--grp-0); }
.cost-group.grp-1 { --gc: var(--grp-1); } .cost-group.grp-2 { --gc: var(--grp-2); }
.cost-group.grp-3 { --gc: var(--grp-3); } .cost-group.grp-4 { --gc: var(--grp-4); }
.cost-group.grp-5 { --gc: var(--grp-5); } .cost-group.grp-6 { --gc: var(--grp-6); }
.cost-group.grp-7 { --gc: var(--grp-7); } .cost-group.grp-8 { --gc: var(--grp-8); }
.cost-group.grp-9 { --gc: var(--grp-9); } .cost-group.grp-10 { --gc: var(--grp-10); }

/* --- toolbar контролы --- */
.cost-search { position: relative; display: flex; align-items: center; min-width: 240px; }
.cost-search .ic { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.cost-search .inp { padding-left: 32px; width: 100%; }
.cost-datepick { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); }
.cost-datepick .ic { color: var(--ink-3); }
.cost-datepick input { border: none; background: none; color: var(--ink-1); font: inherit; font-size: 13px; outline: none; }

/* --- баннер режима истории --- */
.cost-history-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--info-bg); border: 1px solid color-mix(in oklab, var(--info) 35%, transparent);
  border-radius: var(--r-md); color: var(--ink-1); font-size: 13.5px;
}
.cost-history-banner .ic { color: var(--info); }
.cost-history-banner .btn.sm { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.col.cost-locked { position: relative; }
.col.cost-locked .cost-table-wrap { background: color-mix(in oklab, var(--info) 5%, var(--surface)); }

/* --- список групп (уровень 1) --- */
.cost-groups { display: flex; flex-direction: column; gap: 10px; }
.cost-group { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface);
  border-left: 3px solid var(--gc); }
.cost-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
  user-select: none; transition: background .14s; }
.cost-group-head:hover { background: var(--surface-2); }
.cost-group-head .chev { color: var(--ink-3); transition: transform .18s; flex: none; }
.cost-group-head .chev.open { transform: rotate(90deg); }
.cost-group-marker { width: 9px; height: 9px; border-radius: 3px; background: var(--gc); flex: none; }
.cost-group-name { font-size: 15px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
/* перестановка строк-групп мышью (Остатки/Перечень/Себестоимость) */
.cost-group.dragging { opacity: .45; }
.cost-group.drop-target { box-shadow: 0 0 0 2px var(--accent); }
.cg-grip { display: inline-flex; align-items: center; color: var(--ink-4); cursor: grab; flex: none; }
.cg-grip:hover { color: var(--ink-2); }
.cg-grip:active { cursor: grabbing; }
/* Остатки #5 — плоская карточка (без раскрытия), остаток крупно справа */
.cost-group--flat .cost-group-head--static { cursor: default; }
.stock-qty { display: inline-flex; align-items: baseline; gap: 6px; flex: none; }
.stock-qty b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.stock-qty .u { font-size: 12px; color: var(--ink-3); }
.cost-group-meta { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  background: color-mix(in oklab, var(--gc) 18%, transparent); color: var(--ink-1); white-space: nowrap; }
.mini-badge.ghost { background: var(--surface-3); color: var(--ink-3); font-weight: 500; }

/* --- таблица комплектностей (уровень 2) --- */
.cost-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
/* #1 скролл больших drill-таблиц: внутренний скролл первичен, на краю →
   подхватывает прокрутку страницы (overscroll auto). Шапка липкая. */
.cost-table-wrap { max-height: 60vh; overflow-y: auto; overscroll-behavior: auto; }
.cost-table-wrap .tbl thead th { position: sticky; top: 0; z-index: 1; }
@media (max-height: 760px) { .cost-table-wrap { max-height: 50vh; } }
table.cost-tbl { min-width: 1100px; }
table.cost-tbl thead th { white-space: nowrap; font-size: 11.5px; }
/* #13 ФБС синий / ФБО зелёный: «С ФФ ФБС»(6)+«ФФ ФБС»(8); «С ФФ ФБО»(7)+«ФФ ФБО»(9) */
table.cost-tbl thead th:nth-child(6), table.cost-tbl thead th:nth-child(8) { color: var(--info); }
table.cost-tbl thead th:nth-child(7), table.cost-tbl thead th:nth-child(9) { color: var(--pos); }
table.cost-tbl tbody td:nth-child(6) .cell-val, table.cost-tbl tbody td:nth-child(8) .cell-val { color: var(--info); }
table.cost-tbl tbody td:nth-child(7) .cell-val, table.cost-tbl tbody td:nth-child(9) .cell-val { color: var(--pos); }
table.cost-tbl tbody td:nth-child(6), table.cost-tbl tbody td:nth-child(8) { background: color-mix(in oklab, var(--info) 5%, transparent); }
table.cost-tbl tbody td:nth-child(7), table.cost-tbl tbody td:nth-child(9) { background: color-mix(in oklab, var(--pos) 5%, transparent); }
.cost-pairs-row.zebra > td { background: var(--surface-2); }
.cost-pairs-row.open > td { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.cost-expander { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-3); padding-left: 14px; }
.cost-expander .chev { transition: transform .18s; }
.cost-expander .chev.open { transform: rotate(90deg); color: var(--accent); }
.cost-expander .sku-count { font-size: 11px; font-weight: 600; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-3); }

/* ячейки */
.cost-cell { font-variant-numeric: tabular-nums; }
.cost-cell.computed { color: var(--ink-2); background: color-mix(in oklab, var(--ink-4) 6%, transparent); }
.cost-cell.computed.strong { color: var(--ink-1); font-weight: 600; }
.cost-cell.edit { cursor: text; position: relative; transition: background .12s, box-shadow .12s; }
.cost-cell.edit:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.cost-cell.edit.editing { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.cost-cell.edit.locked { cursor: default; }
.cost-cell.edit.locked:hover { background: none; }
.cost-cell.cell-error { box-shadow: inset 0 0 0 2px var(--neg); background: var(--neg-bg); }
.cost-cell .u { font-size: 10px; color: var(--ink-3); margin-left: 2px; }
.cost-cell .cell-input { width: 100%; border: none; background: none; font: inherit; outline: none; color: var(--ink-1);
  font-variant-numeric: tabular-nums; }
.cost-cell .cell-input.num { text-align: right; }
.cost-cell .cell-empty { color: var(--ink-4); }
.cell-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: tlspin .6s linear infinite; vertical-align: middle; }
.cell-spin.big { width: 26px; height: 26px; border-width: 3px; }
@keyframes tlspin { to { transform: rotate(360deg); } }

/* --- привязанные SKU (уровень 3) --- */
.cost-sku-wrap > td { padding: 0 !important; background: var(--surface-2); }
.cost-skus { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 10px 48px; }
.cost-skus.empty { flex-direction: row; align-items: center; gap: 14px; }
.cost-sku-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.cost-sku-row .sku-name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- ошибки импорта --- */
.cost-errors { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.cost-errors .h4 { color: var(--neg); font-size: 13px; }
.cost-err-row { font-size: 12.5px; color: var(--ink-2); }
.cost-err-row .mono { color: var(--ink-3); }

/* --- toast --- */
.tl-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2147483646;
  background: var(--ink-1); color: var(--surface); padding: 11px 20px; border-radius: 99px;
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .28s cubic-bezier(.16,1,.3,1); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =============================================================================
 *  Итерация 2.1 — переиспользуемые кубики (обобщение паттернов Себестоимости)
 *  gmark — маркер группы (обобщение .cost-group-marker) с standalone --gc;
 *  gp-*  — выпадающий выбор группы с поиском; chip — пилюля-пресет;
 *  pl-*  — секции блока Перечень (Pending / Привязанные).
 * ============================================================================= */
/* standalone-палитра групп: --gc доступен на любом элементе с .grp-N (не только в .cost-group) */
.grp-0{--gc:var(--grp-0);} .grp-1{--gc:var(--grp-1);} .grp-2{--gc:var(--grp-2);}
.grp-3{--gc:var(--grp-3);} .grp-4{--gc:var(--grp-4);} .grp-5{--gc:var(--grp-5);}
.grp-6{--gc:var(--grp-6);} .grp-7{--gc:var(--grp-7);} .grp-8{--gc:var(--grp-8);}
.grp-9{--gc:var(--grp-9);} .grp-10{--gc:var(--grp-10);}
.gmark { width: 9px; height: 9px; border-radius: 3px; background: var(--gc, var(--ink-4)); flex: none; }

/* выпадающий выбор группы (тот же визуальный язык, что .inp + .mini-badge) */
.gp { position: relative; width: 100%; }
.gp-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-1); }
.gp-btn:hover { border-color: var(--ink-3); }
.gp-btn .chev { color: var(--ink-3); transition: transform .18s; }
.gp-btn .chev.open { transform: rotate(90deg); }
.gp-pop { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.gp-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.gp-search .inp { flex: 1; border: none; padding: 2px 0; background: transparent; }
.gp-search .inp:focus { box-shadow: none; }
.gp-list { max-height: 240px; overflow: auto; padding: 4px; }
.gp-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; background: none; border: none; border-radius: var(--r-sm); color: var(--ink-1); }
.gp-item:hover { background: var(--surface-3); }
.gp-item.sel { background: var(--accent-soft); color: var(--ink-1); font-weight: 600; }

/* пилюля-пресет (выбор комплектности) */
.chip { padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--surface-3); border: 1px solid transparent; border-radius: 99px; color: var(--ink-2); }
.chip:hover { border-color: var(--ink-3); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink-1); }

/* секции блока Перечень */
.pl-section { display: flex; flex-direction: column; gap: 10px; }
.pl-head { display: flex; align-items: center; gap: 9px; }
.pl-head .icon { color: var(--ink-3); }
.pl-title { font-size: 13.5px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }

/* === v2 UI: truth_score индикаторы СКРЫТЫ до починки кросс-сверки источников ===
   Прячем 🟢/💀 в строках таблиц (RowTruth) и в шапке блока (TruthPill).
   Тост "сохранено" в Подключениях НЕ затронут. meta.truth_score на бэке считается.
   ВЕРНУТЬ — удалить этот блок. */
td.truth-cell .truth,
.block-actions .truth { display: none !important; }

/* === Экран входа /v2/#login — видимые поля + иконки (фикс после Path 1) === */
.login-card .login-field { position: relative; display: block; width: 100%; }
.login-card .login-field .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.login-card .login-field .inp {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px 12px 38px; font-size: 14px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--ink-3);   /* контрастная рамка — поле видно на любом светлом фоне */
  border-radius: var(--r-md, 10px); color: var(--ink-1);
}
.login-card .login-field .inp::placeholder { color: var(--ink-4); }
.login-card .login-field .inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-card .btn.primary { width: 100%; padding: 11px; }

/* ---- остатки: цветовая индикация по диапазону qty ---- */
:root {
  --stock-neg:  #C04848;
  --stock-low:  #C57E1F;
  --stock-mid:  #3478A0;
  --stock-high: #4A8F6E;
}
.stock-tint-neg  { border-left-color: var(--stock-neg)  !important; }
.stock-tint-low  { border-left-color: var(--stock-low)  !important; }
.stock-tint-mid  { border-left-color: var(--stock-mid)  !important; }
.stock-tint-high { border-left-color: var(--stock-high) !important; }
.stock-tint-neg  .cost-group-marker { background: var(--stock-neg)  !important; }
.stock-tint-low  .cost-group-marker { background: var(--stock-low)  !important; }
.stock-tint-mid  .cost-group-marker { background: var(--stock-mid)  !important; }
.stock-tint-high .cost-group-marker { background: var(--stock-high) !important; }
.stock-tint-neg  .stock-qty b { color: var(--stock-neg);  }
.stock-tint-low  .stock-qty b { color: var(--stock-low);  }
.stock-tint-mid  .stock-qty b { color: var(--stock-mid);  }
.stock-tint-high .stock-qty b { color: var(--stock-high); }
td.stock-tint-neg  { color: var(--stock-neg);  font-weight: 600; }
td.stock-tint-low  { color: var(--stock-low);  font-weight: 600; }
td.stock-tint-mid  { color: var(--stock-mid);  font-weight: 600; }
td.stock-tint-high { color: var(--stock-high); font-weight: 600; }

/* ─── Прозрачность плашек блоков только для custom-bg (обои) ─── */
:root[data-bg="custom"] .block {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  will-change: backdrop-filter;
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.3);
}
:root[data-theme="dark"][data-bg="custom"] .block {
  background: rgba(26,24,20,.22);
  border-color: rgba(255,255,255,.14);
}