/* ══════════════════════════════════════════════════════════
   WBLackey — единое приложение
   Палитра и компоненты взяты из MPScan: белый фон, мягкий
   фиолетовый акцент, Inter. Одна система на все разделы,
   чтобы склад, поставки и магазины перестали выглядеть как
   три разных продукта.
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:            #FFFFFF;
  --bg-secondary:  #F7F8FA;
  --card:          #FFFFFF;
  --text:          #1A1A2E;
  --secondary:     #6B7280;
  --muted:         #9CA3AF;
  --accent:        #7C5CFC;
  --accent-light:  #EDE9FE;
  --accent-hover:  #6B4FD8;
  --success:       #34D399;
  --success-bg:    #ECFDF5;
  --success-dark:  #059669;
  --warning:       #FBBF24;
  --warning-bg:    #FFFBEB;
  --warning-dark:  #D97706;
  --danger:        #F87171;
  --danger-bg:     #FEF2F2;
  --danger-dark:   #DC2626;
  --border:        #E5E7EB;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,.08);
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     16px;
  --transition:    .2s ease;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* Прокручивается сама страница, как в обычном сайте. Свой контейнер
   высотой в --tg-viewport-stable-height я уже пробовал: при сворачивании
   и разворачивании окна переменная меняется, и содержимое пропадало —
   оставался кусок высотой в старое значение. */
html, body {
  min-height: 100vh;
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  color: var(--text); background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body { padding-bottom: env(safe-area-inset-bottom, 0); }
/* Полосу прокрутки прячем. На телефоне она и так рисуется поверх содержимого,
   а в окне на компьютере занимала свои пикселы справа — и поля переставали
   быть одинаковыми: слева десять, справа восемнадцать. Прокрутка при этом
   никуда не девается, колесом и пальцем всё работает. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
button, input, select { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }

/* Приложение занимает всё окно: на телефоне это те же 100%, а в большом окне Telegram
   Desktop таблицы, графики и карточки растягиваются, а не сидят узкой колонкой по центру.
   Внутри всё перестраивается само (грид с auto-fit, flex), поля по бокам растут вместе с окном. */
#app { width: 100%; margin: 0 auto; min-height: 100vh; }
/* Сверху к отступу прибавляем то, что занял сам Telegram: вырез экрана
   и свою шапку с названием бота. На части клиентов она лежит поверх
   страницы, и заголовку экрана срезает верх. Сколько занято — клиент
   сообщает сам, эти переменные и есть его ответ. */
#page {
  padding: 12px clamp(10px, 2.2vw, 36px) 24px;
  padding-top: calc(12px + var(--tg-safe-area-inset-top, 0px)
                         + var(--tg-content-safe-area-inset-top, 0px));
}

/* ── вертикальный ритм ────────────────────────────────────
   Отступ между блоками экрана задаёт контейнер, а не сами блоки. Раньше каждый
   блок нёс свой margin-bottom, и стоило поставить рядом два блока без такой
   пары правил («карточка + плитки», «поиск + карточка», «плитки + кнопка») —
   они слипались. Теперь любой прямой потомок страницы (и результата поиска #res)
   отделён от соседей одним и тем же промежутком, а старые поля у него сняты,
   чтобы они не складывались с промежутком. Новый блок отступ получает сам. */
#page, #page > #res, .stack { display: flex; flex-direction: column; gap: 10px; }
#page > *, #page > #res > *, .stack > * {
  flex: none; min-width: 0;
  /* !important: у части блоков отступ прописан прямо в разметке (style="margin-top:10px"),
     и он складывался бы с промежутком — получалось двадцать пикселей вместо десяти */
  margin-top: 0 !important; margin-bottom: 0 !important;
}
/* Шапка и подписи несут отступ в паддинге: промежуток уже даёт воздух */
#page > .head { padding-bottom: 0; }
#page > .fold, #page > .form-sec, #page > #res > .fold { padding: 6px 6px 0; }
#page > .ev-sub, #page > .mass-nm { padding: 0 4px; }

/* ── шапка экрана ─────────────────────────────────────── */
.head { display: flex; align-items: center; gap: 8px; padding: 14px 6px 10px; }
.head-txt { flex: 1; min-width: 0; }
.head .act {
  flex: none; padding: 7px 12px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.head h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.head .sub { margin-top: 2px; font-size: 13px; color: var(--secondary); }

/* ── карточка ─────────────────────────────────────────── */
.card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 14px 12px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 10px; }
.card-title {
  font-size: 11px; font-weight: 600; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}

/* ── плитки разделов ──────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
/* Значок слева, текст справа: столбиком плитка выходила в 110 пикселей, и
   меню из девяти разделов занимало весь экран, не оставляя места тому, ради
   чего в него зашли. Теперь вдвое ниже при тех же размерах шрифта. */
.tile {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--card); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  /* Клетка грида по умолчанию не умеет быть уже своего содержимого: длинная
     подпись распирала колонку, и вторая половина плиток уезжала за край
     окна. Ноль здесь разрешает ей сжаться, а многоточие ниже — обрезать. */
  min-width: 0;
}
.tile .body { min-width: 0; }
.tile:active { transform: scale(.98); box-shadow: none; }
.tile .ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); font-size: 17px;
}
.tile .nm  {
  display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile .hint {
  display: block; font-size: 12px; color: var(--secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile[disabled] { opacity: .45; }

/* ── строки списка ────────────────────────────────────── */
.list { display: flex; flex-direction: column; }
.item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 4px; text-align: left; border-top: 1px solid var(--border);
}
.item:first-child { border-top: none; }
.item .ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); font-size: 17px;
}
.item .body { flex: 1; min-width: 0; }
/* Имя и подпись — блоки: строчными они слипались в одну строку */
.item .nm { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.item .hint {
  display: block; margin-top: 1px; font-size: 12.5px; color: var(--secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .go { color: var(--muted); font-size: 18px; flex: none; }
/* Подпись в строке «свойство — значение» переносится: обрезать её многоточием
   нельзя, из «Больше всего на складе» получалось «Больше всего н…» */
.item .hint.kv { white-space: normal; }

/* ── цифры склада ─────────────────────────────────────── */
.nums { display: flex; gap: 6px; }
.num { flex: 1; text-align: center; }
.num b { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.num span { display: block; margin-top: 1px; font-size: 11px; color: var(--secondary); }
.num.ok b   { color: var(--success-dark); }
.num.warn b { color: var(--warning-dark); }
.num.bad b  { color: var(--danger-dark); }

.item .qty { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Число, на которое надо посмотреть: переплата, перерасход, превышенная цель */
.item .qty.bad { color: var(--danger-dark); }
.item .qty.ok  { color: var(--success-dark); }
.qty-input {
  width: 66px; flex: none; padding: 8px; text-align: center;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.qty-input:focus { outline: none; border-color: var(--accent); background: var(--card); }

/* Булев параметр — зелёный или красный кружок, как в кнопках бота. Галочка
   молчит о том, что значит её отсутствие: пусто — это «выключено» или «ещё не
   трогали»? Красный кружок отвечает сам. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; border-radius: 50%;
  background: var(--danger); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: background var(--transition);
}
input[type="checkbox"]:checked  { background: var(--success); }
input[type="checkbox"]:disabled { opacity: .45; }

.search {
  width: 100%; margin: 0 0 10px; padding: 11px 12px;
  background: var(--card); color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px;
}
.search:focus { outline: none; border-color: var(--accent); }

/* ── бейджи ───────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-ok   { background: var(--success-bg); color: var(--success-dark); }
.badge-warn { background: var(--warning-bg); color: var(--warning-dark); }
.badge-bad  { background: var(--danger-bg);  color: var(--danger-dark); }
.badge-mp   { background: var(--accent-light); color: var(--accent-hover); }
.badge-off  { background: var(--bg-secondary); color: var(--muted); }

/* Модель, раскрывающаяся в размеры: размеры идут под ней со сдвигом */
.item.grp { cursor: pointer; }
.item .go { transition: transform .2s ease; }
.item .go.open { transform: rotate(90deg); }
.sizes { margin: 0 0 4px 12px; padding-left: 10px; border-left: 2px solid var(--border); }
.sizes .item { padding-left: 2px; }
.sizes .item.sub .nm { font-size: 14px; }
.item .of { flex: none; min-width: 34px; font-size: 12px; color: var(--secondary); font-variant-numeric: tabular-nums; }

/* ── кнопки ───────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
  transition: opacity var(--transition);
}
.btn:active { opacity: .8; }
.btn:disabled { background: var(--border); color: var(--muted); }
/* На сером фоне страницы серая кнопка не читалась — даём ей контур */
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:active { background: var(--bg-secondary); }
.btn-danger { background: var(--danger-bg); color: var(--danger-dark); }
.btn + .btn { margin-top: 8px; }
.card + .btn { margin-top: 10px; }


/* ── шторка снизу ─────────────────────────────────────── */
.sheet-bg {
  position: fixed; inset: 0; z-index: 150; background: rgba(17,17,39,.35);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 560px; max-height: 88%; overflow-y: auto;
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -8px 30px rgba(0,0,0,.16); animation: sheet-up .22s ease;
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 700; margin-bottom: 12px;
}
.sheet-x {
  margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--bg-secondary); color: var(--secondary); font-size: 14px;
}
.sheet-txt {
  margin-bottom: 14px; font-size: 14px; color: var(--secondary);
  white-space: pre-line;  /* перечень списываемого приходит строками */
}

/* ── поля формы ───────────────────────────────────────── */
.field { display: block; margin-bottom: 10px; }
.field > span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--secondary); }
.input {
  width: 100%; padding: 11px 12px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 16px;
}
.input:focus { outline: none; border-color: var(--accent); background: var(--card); }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }

/* ── чипы-фильтры ─────────────────────────────────────── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--card); color: var(--secondary); border: 1px solid var(--border);
}
.chip.on { background: var(--accent-light); color: var(--accent-hover); border-color: #DDD6FE; }
/* Действие в строке списка: не растягивается и не переносится */
.item .chip { flex: none; }
.chip.bad { background: var(--danger-bg); color: var(--danger-dark); border-color: #FECACA; }

/* Полоса слева называет вид события быстрее подписи */
.card.ev { border-left: 3px solid var(--border); }
.ev-sub { margin: -6px 0 10px; font-size: 12.5px; color: var(--secondary); }
.ev-in   { border-left-color: var(--success) !important; }
.ev-out  { border-left-color: var(--accent)  !important; }
.ev-off  { border-left-color: var(--danger)  !important; }
.ev-move { border-left-color: var(--warning) !important; }


/* ── таблица ──────────────────────────────────────────── */
/* Тень у правого края — единственный признак, что таблица едет вбок.
   Гаснет, когда доехали до конца. */
/* Таблице тесно: колонок много, и каждый отнятый пиксель — это ещё один
   столбец, уехавший под прокрутку. Поэтому она выходит за поля своей
   карточки до краёв. Таблице вне карточки (под сворачиваемым разделом) выходить не
   за что: она встала бы вплотную к краю экрана, шире соседних блоков. */
.tbl-box { position: relative; }
.card .tbl-box { margin-left: -10px; margin-right: -10px; }
.tbl-box::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  pointer-events: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(to left, rgba(26,26,46,.13), rgba(26,26,46,0));
  transition: opacity var(--transition);
}
.tbl-box.end::after { opacity: 0; }
/* Длинная таблица прокручивается внутри себя, а не страницей: только так
   шапка может остаться на месте — «липкость» считается от той рамки, что
   прокручивается, а рамка здесь эта. Короткие таблицы в высоту не упираются
   и ведут себя как раньше. */
.tbl-wrap {
  overflow: auto; -webkit-overflow-scrolling: touch; max-height: 78vh;
  scrollbar-width: thin;
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.tbl th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-secondary);
  padding: 9px 10px; text-align: left; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; color: var(--secondary);
  /* Под шапкой у строк своя граница сверху, а у самой шапки её нет:
     при прокрутке первая строка наезжала бы на буквы без разделителя. */
  box-shadow: inset 0 -1px 0 var(--border);
}
.tbl td { padding: 9px 10px; border-top: 1px solid var(--border); }
.tbl td.n { font-weight: 700; color: var(--accent-hover); font-variant-numeric: tabular-nums; }
.tbl td.dim { color: var(--muted); }
/* Название длиннее всего и съедает экран: обрезаем его, чтобы рядом
   поместились размер и цвет — именно ими строки и отличаются. */
.tbl td.nmc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tbl td.zero { color: var(--muted); font-weight: 600; }
/* Запас на исходе — то, ради чего таблицу открывают: он должен бросаться
   в глаза, а не теряться серым */
.tbl td.low  { color: var(--danger-dark);  font-weight: 700; }
.tbl td.mid  { color: var(--warning-dark); font-weight: 600; }

/* ── сворачиваемый раздел ─────────────────────────────── */
.fold {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 14px 6px 8px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--secondary);
}
.fold .chev { font-size: 10px; transition: transform .2s ease; }
.fold .chev.off { transform: rotate(-90deg); }
.fold .cnt { margin-left: auto; color: var(--muted); letter-spacing: 0; }

/* ── строка-галочка ───────────────────────────────────── */
.check {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  padding: 10px 12px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-size: 14px; color: var(--secondary);
}
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* Кнопки в ряд: вертикальный отступ здесь не нужен */
.row .btn + .btn { margin-top: 0; }


/* ── массовая настройка ───────────────────────────────── */
/* Настройка ложится сразу на все товары магазина, поэтому вместо галочки —
   две кнопки и честный счёт, у скольких товаров она сейчас включена. */
.mass-nm { margin-bottom: 6px; font-size: 12px; color: var(--secondary); }
.mass-nm + .seg { margin-bottom: 0; }
.seg + .item { border-top: none; padding-top: 12px; }


/* ── сетка часов ──────────────────────────────────────── */
/* Сутки должны читаться одним взглядом, поэтому часы стоят сеткой, а не
   списком: видно и сколько включено, и где ночная дыра. */
.hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.hr {
  padding: 9px 0; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: var(--bg-secondary); color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition);
}
.hr.on { background: var(--accent-light); color: var(--accent-hover); }

/* ══════════ статистика ══════════ */
/* Переключатель показа: штуки, выручка, выкуп */
.seg {
  display: flex; gap: 2px; margin-bottom: 10px; padding: 3px;
  background: var(--border); border-radius: var(--radius);
}
.seg button {
  flex: 1; padding: 7px 4px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--secondary);
  transition: background var(--transition), color var(--transition);
}
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }

/* Плитки итогов: подпись, число и пояснение под ним */
/* Плиток бывает и шесть — в одну строку они не влезают и обрезаются */
.tots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tot {
  flex: 1 1 28%; min-width: 0; background: var(--card);
  border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-sm);
}
.tot span {
  display: block; font-size: 10px; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .5px;
}
/* Высота строки постоянная: миллионам кегль уменьшают, чтобы влезли, и без
   этого плитки подпрыгивали при каждом переключении показа. */
.tot b {
  display: block; margin-top: 2px; font-weight: 700; line-height: 22px;
  font-variant-numeric: tabular-nums; letter-spacing: -.4px;
}
.tot em { display: block; margin-top: 1px; font-size: 11px; font-style: normal; color: var(--secondary); }

/* Шапка карточки со сбросом выбора */
/* Высота строки постоянная: плашка выбранного дня выше заголовка, и без
   этого от каждого выбора дня карточка с графиком меняла рост. */
.hd { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; min-height: 24px; }
.hd h2 {
  flex: 1; margin: 0; font-size: 11px; font-weight: 600; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Плашка выбранного дня стоит в строке с заголовком карточки и была вдвое
   выше него: строка распухала, а вместе с ней прыгала высота графика при
   каждом выборе дня. Здесь она ростом с заголовок. */
.hd .chip { margin: 0; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.chip i { font-style: normal; font-size: 15px; line-height: 1; opacity: .7; margin-left: 4px; }
.hd .chip i { font-size: 12px; margin-left: 3px; }

/* ── переписка с покупателем ──────────────────────────────
   Отзыв и ответ — это разговор, и читать его надо как разговор: слева
   пришедшее, справа наше. Ровно так же он выглядит в мессенджере, откуда
   продавец сюда и приходит, и объяснять ничего не нужно. */
.talk { display: flex; flex-direction: column; gap: 8px; }
.bub {
  max-width: 88%; padding: 9px 12px; border-radius: var(--radius-lg);
  font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere;
}
.bub.them {
  align-self: flex-start; background: var(--card);
  box-shadow: var(--shadow-sm); border-bottom-left-radius: 6px;
}
.bub.us {
  align-self: flex-end; background: var(--accent-light);
  border-bottom-right-radius: 6px;
}
.bub .who {
  display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600;
  color: var(--secondary);
}
.bub.us .who { color: var(--accent-hover); }
.bub .txt { white-space: pre-wrap; }
.bub .part { display: block; margin-top: 6px; font-size: 13.5px; }
.bub .part b { font-weight: 600; color: var(--secondary); }
.bub .none { color: var(--muted); font-style: italic; }
/* Фото из отзыва: показываем, а не прячем за ссылкой — по ним и понятно,
   о каком браке речь. Крупное открывается в браузере. */
.shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shots img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
  background: var(--bg-secondary);
}

/* ── график ── */
.chart svg { display: block; width: 100%; height: auto; }
.chart .gl  { stroke: var(--border); stroke-width: 1; }
.chart .lbl { font-size: 9px; fill: var(--secondary); }
.chart .seg-bar { transition: opacity var(--transition); }
.chart .seg-bar.dim { opacity: .3; }
.chart .hit { fill: transparent; cursor: pointer; }

/* ── список товаров ── */
/* Разделителя между строками нет: их и так делит полоска доли под каждой. */
/* Боковой отступ не декоративный: у выбранной строки он становится полем
   подсветки, и без него числа упирались в её край. */
.srow {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; padding: 8px;
  cursor: pointer; transition: background var(--transition);
}
.srow.on { background: var(--accent-light); border-radius: var(--radius); }
.srow.head { padding: 2px 8px 6px; cursor: default; }
.srow.head div {
  font-size: 10px; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .4px;
}
.srow .rank { font-size: 11px; color: var(--secondary); text-align: right; font-variant-numeric: tabular-nums; }
.srow .nm { display: flex; gap: 6px; font-size: 14px; font-weight: 600; }
.srow .nm span { min-width: 0; overflow-wrap: anywhere; }
.srow .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; margin-top: 4px; }
.srow .arr { margin-left: 4px; color: var(--secondary); font-size: 11px; font-weight: 400; }
.srow .mt {
  margin-top: 2px; font-size: 12px; color: var(--secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srow .val { text-align: right; font-variant-numeric: tabular-nums; }
.srow .val b { display: block; font-size: 15px; font-weight: 700; }
.srow .val span { display: block; font-size: 11px; color: var(--secondary); }
.srow .val.zero b { color: var(--secondary); font-weight: 500; }
/* Полоска доли: глазом видно, где кончаются ходовые позиции */
.srow .line {
  grid-column: 2 / -1; height: 3px; border-radius: 2px;
  background: var(--border); overflow: hidden;
}
.srow .line i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* ── размеры под товаром ── */
.sizes { grid-column: 2 / -1; margin: 4px 0 2px; }
.sz {
  display: flex; align-items: center; gap: 5px; padding: 4px 2px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.sz .s-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.sz .s-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Доля выкупа своим элементом: внутри имени её съедало многоточие */
.sz .s-pc { flex: none; font-size: 11px; color: var(--secondary); }
.sz .s-v  { margin-left: auto; font-weight: 600; }
.sz .s-v, .sz .s-l, .sz .s-b, .sz .s-w { min-width: 40px; text-align: right; white-space: nowrap; }
.sz .s-l, .sz .s-w { color: var(--secondary); }
.sz .s-b  { font-weight: 600; }
.sz.head { padding-bottom: 2px; font-size: 9.5px; color: var(--secondary);
           text-transform: uppercase; letter-spacing: .2px; }
.sz.head .s-v, .sz.head .s-l, .sz.head .s-b, .sz.head .s-w { font-weight: 400; }

/* ══════════ поставка Lamoda ══════════ */
/* Строка товара: фото, что это, и сколько берём */
.pick {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 10px 4px;
  border-top: 1px solid var(--border);
}
.pick:first-child { border-top: none; }
.pick.on { background: var(--accent-light); border-radius: var(--radius); }
.pick.done { opacity: .62; }
.ph {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  object-fit: cover; background: var(--bg-secondary);
}
.ph.empty { display: flex; align-items: center; justify-content: center; font-size: 19px; }
.pick .sku { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.pick .meta {
  margin-top: 2px; font-size: 12px; color: var(--secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Счётчик количества */
.step { display: flex; align-items: center; gap: 4px; flex: none; }
.step button {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: var(--bg-secondary); font-size: 17px; font-weight: 600; color: var(--text);
}
.step button:disabled { opacity: .35; }
.step input {
  width: 46px; padding: 6px 2px; text-align: center;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 8px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.step input:focus { outline: none; border-color: var(--accent); background: var(--card); }

/* Короба, где лежит товар: пять самых полных, остальные под кнопкой */
.boxes { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.boxes .box {
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  background: var(--bg-secondary); color: var(--secondary);
}
.boxes .box b { color: var(--text); }
.boxes .box.none { background: var(--warning-bg); color: var(--warning-dark); }
.boxes .box.kiz { background: var(--accent-light); color: var(--accent-hover); }
.boxes .box.kiz b { color: inherit; }
.boxes .box.more { color: var(--accent); }
.boxes .box.extra { display: none; }
.boxes.open .box.extra { display: inline; }

/* Правка позиции под строкой */
.adjust {
  grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: 4px;
}
/* Пояснение не даём сжимать: в узкой колонке оно вставало по слову в строку */
.adjust .lock { font-size: 11px; color: var(--secondary); white-space: nowrap; }

/* Поля реквизитов УПД */
.form-sec {
  margin: 14px 2px 6px; font-size: 11px; font-weight: 600; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .5px;
}
.field > label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--secondary); }
.field .req { color: var(--danger-dark); }
.input.empty-req { border-color: var(--danger); background: var(--danger-bg); }

/* Итог привязки и подтверждение — внутри окна сканера */
.scan-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.scan-row .code {
  margin-top: 3px; font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.chz { margin-bottom: 12px; font-size: 13px; }
.chz .ok   { color: var(--success-dark); font-weight: 600; }
.chz .warn { color: var(--warning-dark); font-weight: 600; }
.chz .wait { color: var(--secondary); }
.chz .who  { margin-top: 2px; font-size: 12px; color: var(--secondary); }

/* ── служебное ────────────────────────────────────────── */
.empty { padding: 28px 12px; text-align: center; color: var(--secondary); font-size: 14px; }
.err   { padding: 20px 12px; text-align: center; color: var(--danger-dark); font-size: 14px; }

#loader {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; background: rgba(255,255,255,.6);
}
#loader i {
  width: 30px; height: 30px; border-radius: 50%; display: block;
  border: 3px solid var(--accent-light); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed; left: 12px; right: 12px; bottom: 20px; z-index: 60;
  max-width: 536px; margin: 0 auto; padding: 12px 14px;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  background: var(--text); color: #fff; font-size: 14px;
}
#toast.bad { background: var(--danger-dark); }


/* ══════════ финансовые отчёты ══════════ */
.seg { display: flex; gap: 2px; padding: 3px; margin-bottom: 10px; background: var(--card);
  border-radius: 11px; box-shadow: var(--shadow-sm); }
.seg button { flex: 1; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--secondary); transition: background var(--transition), color var(--transition); }
.seg button.on { background: var(--accent); color: #fff; }
/* Внутри белой карточки белая плашка терялась — там переключатель серый */
.card .seg { background: var(--bg-secondary); box-shadow: none; }
.card .seg button.on { background: var(--accent); color: #fff; }

/* Показатели периода: девять карточек сеткой, цвет — по смыслу (деньги, расход, реклама) */
.fin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px;
  margin-bottom: 10px; }
.fin-card { min-width: 0; padding: 10px 11px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); }
.fin-card span { display: block; font-size: 11px; color: var(--secondary); }
.fin-card b { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.fin-card.ok b  { color: var(--success-dark); }
.fin-card.bad b { color: var(--danger-dark); }
.fin-card.acc b { color: var(--accent-hover); }
.fin-card.dim b { color: var(--muted); }

/* График динамики */
.fin-chart { margin-bottom: 10px; padding: 12px 10px 10px; background: var(--card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fin-chart .top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fin-chart .top h3 { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.fin-chart select { max-width: 150px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); font-size: 12.5px; }
.fin-chart .sw { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--secondary);
  white-space: nowrap; }
.fin-plot { position: relative; touch-action: pan-y; user-select: none; }
.fin-svg { display: block; width: 100%; height: auto; }
.fin-svg .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.fin-svg .grid.zero { stroke: var(--muted); stroke-dasharray: none; opacity: .6; }
.fin-svg .ax { fill: var(--secondary); font-size: 10.5px; }
.fin-svg .mark { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 3; }
.fin-svg .cur { stroke: var(--muted); stroke-width: 1; }
.fin-tip { position: absolute; top: 4px; z-index: 5; min-width: 150px; padding: 7px 9px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md); font-size: 11.5px; pointer-events: none; }
.fin-tip .tt { margin-bottom: 3px; font-weight: 700; }
.fin-tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.fin-tip b { float: right; margin-left: 12px; font-variant-numeric: tabular-nums; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.fin-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--secondary); }
.fin-legend .lg.off { opacity: .4; }
.fin-legend .lg i { display: inline-block; width: 18px; }

/* Цветная таблица: первый столбец не уезжает, раскрытые размеры — со смещением */
.tbl.fin { border-collapse: separate; border-spacing: 0; }
.tbl.fin th, .tbl.fin td { text-align: right; font-variant-numeric: tabular-nums; }
.tbl.fin th { cursor: pointer; }
.tbl.fin th.on { color: var(--accent-hover); }
.tbl.fin th.lead, .tbl.fin td.lead { position: sticky; left: 0; text-align: left; white-space: normal;
  min-width: 136px; max-width: 280px; background: var(--card); }
.tbl.fin th.lead { z-index: 3; background: var(--bg-secondary); cursor: default; }
.tbl.fin td.lead { z-index: 1; box-shadow: 1px 0 0 var(--border); }
.tbl.fin td { border-top: 1px solid var(--border); }
.tbl.fin td.b { font-weight: 700; }
.tbl.fin .dim, .tbl.fin td .dim { color: var(--muted); }
.tbl.fin tr.grp.has { cursor: pointer; }
.tbl.fin tr.kid td { font-size: 12px; }
.tbl.fin tr.kid td.lead { padding-left: 26px; border-left: 2px solid var(--accent-light); }
.tbl.fin tr.has td.lead { padding-left: 22px; }
.tbl.fin tr.tail td { color: var(--secondary); background: var(--bg-secondary); }
.tbl.fin .chev { position: absolute; left: 7px; top: 50%; color: var(--muted);
  transform: translateY(-50%); transition: transform .15s ease; }
.tbl.fin .chev.open { transform: translateY(-50%) rotate(90deg); }
.tbl.fin .nm2 { display: block; color: var(--secondary); font-size: 11px; font-weight: 400; }
.tbl.fin .pill { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px;
  font-weight: 600; background: var(--accent-light); color: var(--accent-hover); }

/* Только что отсканированный товар в составе: короткая подсветка, чтобы было видно, что скан прошёл */
.item.fresh { animation: fresh 2.4s ease-out; border-radius: var(--radius-sm); }
@keyframes fresh { 0%, 35% { background: var(--accent-light); } 100% { background: transparent; } }