/* Кабинет оцифровки WB — стили.
   Без фреймворков: 16 экранов таблиц не стоят сборщика.

   Характер взят с HTML-дашборда директора за сентябрь 2026, который владелец
   одобрил: тёплый серо-зелёный фон, почти чёрный текст, шрифт Golos Text,
   плитки без теней, внутри одной панели, полоса «куда ушёл рубль».
   Все цвета — токены наверху: светлая тема по умолчанию, тёмная — по
   настройке системы или атрибуту data-theme="dark" на <html> (для будущего
   переключателя; data-theme="light" перебивает тёмную систему). */

/* Шрифт лежит файлами рядом — без обращения к Google Fonts: кабинет должен
   открываться и там, где внешние загрузки закрыты, и не светить посетителей. */
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/golos-text-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/golos-text-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --bg:          #eff1ee;
  --surface:     #fbfcfa;
  --surface-2:   #f3f5f1;
  --surface-3:   #e8ebe5;
  --line:        #dfe2dc;
  --line-soft:   #e9ebe6;
  --line-2:      #c6cac1;

  --ink:         #131613;
  --ink-2:       #4b5049;
  --ink-3:       #6f756c;

  /* «Бренд» — это главное действие и активная вкладка. Почти чёрный, как
     заголовки образца: без фирменного фиолета, который спорил с цифрами. */
  --brand:       #131613;
  --brand-hover: #2e342e;
  --brand-ink:   #fbfcfa;
  --brand-soft:  #e4e7e2;

  --accent:      #2a6fc4;
  --accent-soft: #e4eefa;

  --good:        #006300;
  --good-soft:   #e2efdf;
  --bad:         #b3261e;
  --bad-soft:    #f7e3e0;
  --warn:        #875800;
  --warn-soft:   #f8eed6;

  /* Статусы зон цены: метки рядом всегда подписаны словами, цвет не один. */
  --st-good:     #0ca30c;
  --st-warn:     #fab219;
  --st-crit:     #d03b3b;

  --bar:         #56636b;
  --bar-track:   #e4e7e2;

  /* Статьи «куда ушёл рубль». Порядок и шаги проверены валидатором палитры
     на различимость при дальтонизме (соседние пары). */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;

  --tip-bg:      #131613;
  --tip-ink:     #f4f6f2;

  /* Боковая панель: тёмная в обеих темах. Текст пунктов светлый (не серый —
     владелец: «чёрный блок с серыми буквами, всё сливается»), открытый пункт —
     светлая плашка с тёмным текстом. */
  --side-bg:     #151915;
  --side-ink:    #dde1d9;
  --side-ink-2:  #a9b0a5;
  --side-hover:  #222822;
  --side-active: #eef1ea;
  --side-active-ink: #131613;
  --side-line:   #262c26;
  --side-field:  #1e231e;
  --side-field-line: #3a413a;
  --side-mark:   #eda100;
  --mark:        #9a6500;   /* «WB» в логотипе на светлом фоне — тот же янтарь, темнее */

  /* Цвета разделов — те же, что у блоков отчёта в форме компании (образец
     WB_сентябрь_2026_прибыль_деньги_активы.html): Деньги — зелёный «Прибыль»,
     Пульс — жёлтый «Деньги», Поставки — синий «Активы», Операции — бирюзовый
     «Юнит-экономика», Система — нейтральный. Меню и панели экрана красятся
     одним и тем же токеном — это и есть единообразие. */
  --sec-money:  #3cae2a;
  --sec-pulse:  #f2c531;
  --sec-supply: #3b82d6;
  --sec-ops:    #2a9d8f;
  --sec-sys:    #8a9087;
  --sec:        var(--sec-sys);
  /* светлые заливки итоговых строк в блоках формы */
  --green-soft:  #dff0d8;
  --yellow-soft: #fbf1cf;
  --blue-soft:   #dbe8f8;
  --teal-soft:   #d7efeb;

  --scrim: rgba(10, 12, 10, .5);

  --r:   12px;
  --r-s: 8px;
  --r-l: 14px;
  --shadow: 0 1px 2px rgba(19, 22, 19, .04);

  --sidebar-w: 232px;
  --topbar-h:  56px;

  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Тёмная тема: свои ступени тех же оттенков, а не автоматическая инверсия.
   Объявлена дважды — по системной настройке и по атрибуту, чтобы будущий
   переключатель побеждал в обе стороны. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0f0d; --surface: #171a17; --surface-2: #1d211d; --surface-3: #262b26;
    --line: #2b2f2a; --line-soft: #232723; --line-2: #3a3f39;
    --ink: #f3f5f1; --ink-2: #c2c7be; --ink-3: #969c92;
    --brand: #eef1ea; --brand-hover: #d6dad2; --brand-ink: #131613; --brand-soft: #2b2f2a;
    --accent: #6aa6ee; --accent-soft: #172638;
    --good: #52c152; --good-soft: #15291a; --bad: #ef7b74; --bad-soft: #3a1d1b;
    --warn: #e7b23f; --warn-soft: #33280f;
    --bar: #a3b0b8; --bar-track: #2b2f2a;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --tip-bg: #f3f5f1; --tip-ink: #131613;
    --side-bg: #0a0c0a; --side-ink: #d8dcd4; --side-ink-2: #9aa196; --side-hover: #181c18;
    --side-active: #e6e9e2; --side-active-ink: #131613; --side-line: #1f241f;
    --side-field: #141814; --side-field-line: #353b35;
    --scrim: rgba(0, 0, 0, .6);
    --shadow: none;
    --mark: #eda100;
    --sec-money: #4fc23c; --sec-pulse: #f2c531; --sec-supply: #5b9ae6; --sec-ops: #3bb3a4;
    --sec-sys: #7f867c;
    --green-soft: #1f3a1a; --yellow-soft: #3d3413; --blue-soft: #182b45; --teal-soft: #153431;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f0d; --surface: #171a17; --surface-2: #1d211d; --surface-3: #262b26;
  --line: #2b2f2a; --line-soft: #232723; --line-2: #3a3f39;
  --ink: #f3f5f1; --ink-2: #c2c7be; --ink-3: #969c92;
  --brand: #eef1ea; --brand-hover: #d6dad2; --brand-ink: #131613; --brand-soft: #2b2f2a;
  --accent: #6aa6ee; --accent-soft: #172638;
  --good: #52c152; --good-soft: #15291a; --bad: #ef7b74; --bad-soft: #3a1d1b;
  --warn: #e7b23f; --warn-soft: #33280f;
  --bar: #a3b0b8; --bar-track: #2b2f2a;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --tip-bg: #f3f5f1; --tip-ink: #131613;
  --side-bg: #0a0c0a; --side-ink: #d8dcd4; --side-ink-2: #9aa196; --side-hover: #181c18;
  --side-active: #e6e9e2; --side-active-ink: #131613; --side-line: #1f241f;
  --side-field: #141814; --side-field-line: #353b35;
  --scrim: rgba(0, 0, 0, .6);
  --shadow: none;
  --mark: #eda100;
  --sec-money: #4fc23c; --sec-pulse: #f2c531; --sec-supply: #5b9ae6; --sec-ops: #3bb3a4;
  --sec-sys: #7f867c;
  --green-soft: #1f3a1a; --yellow-soft: #3d3413; --blue-soft: #182b45; --teal-soft: #153431;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
.hidden { display: none !important; }

/* ─── ВХОД ─────────────────────────────────────────── */

.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.login__card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 28px 26px; box-shadow: var(--shadow);
}
.login__logo { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.login__logo span { color: var(--mark); margin-left: 2px; }
.login__hint { margin: 4px 0 22px; color: var(--ink-3); font-size: 13px; }
.login__err {
  background: var(--bad-soft); color: var(--bad); border-radius: var(--r-s);
  padding: 9px 11px; font-size: 13px; margin-bottom: 12px;
}
.login__demo { margin: 16px 0 0; text-align: center; color: var(--ink-3); font-size: 12px; }
.login__demo code {
  font-family: var(--mono); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; font-size: 12px; color: var(--ink-2);
  margin-bottom: 5px; font-weight: 500;
}
.field input, .select, .input {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-s); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .select:focus, .input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ─── КНОПКИ ───────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--wide { width: 100%; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--side-ink); }
.btn--ghost:hover { background: var(--side-hover); color: #fff; border-color: var(--side-line); }
/* Тихая кнопка внутри экрана (не в тёмной боковой панели). */
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

/* ─── КАРКАС ───────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--side-bg); color: var(--side-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 40;
}
/* Логотип: три столбика из favicon слева, чтобы шапка панели не была просто
   строкой текста на чёрном. */
.sidebar__brand {
  padding: 18px 18px 14px; font-size: 16px; font-weight: 700; color: #fff;
  letter-spacing: -.2px; display: flex; align-items: center; gap: 9px;
}
.sidebar__brand::before {
  content: ""; width: 22px; height: 22px; border-radius: 5px; flex: none;
  background:
    linear-gradient(var(--side-mark), var(--side-mark)) 4px 12px / 3px 6px no-repeat,
    linear-gradient(var(--side-mark), var(--side-mark)) 9.5px 8px / 3px 10px no-repeat,
    linear-gradient(var(--side-mark), var(--side-mark)) 15px 4px / 3px 14px no-repeat,
    #2a302a;
}
.sidebar__brand span { color: var(--side-mark); margin-left: 2px; }

.sidebar__shop { padding: 0 14px 14px; border-bottom: 1px solid var(--side-line); }
.sidebar__shop-label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--side-ink-2); margin-bottom: 5px; font-weight: 600;
}
.sidebar__shop .select {
  background: var(--side-field); border-color: var(--side-field-line); color: #f0f2ee;
  font-size: 13px;
}
.sidebar__shop .select:focus { border-color: var(--side-ink-2); box-shadow: none; }
.sidebar__sync { margin-top: 7px; font-size: 11.5px; color: var(--side-ink-2); }

.nav { flex: 1; overflow-y: auto; padding: 6px 8px 16px; overscroll-behavior: contain; }
/* Раздел меню: свой цвет (--sec из data-sec), воздух и тонкая линия между разделами. */
.nav__sec { padding: 8px 0 10px; border-top: 1px solid var(--side-line); }
.nav__sec:first-child { border-top: 0; }
.nav__sec[data-sec="money"]  { --sec: var(--sec-money); }
.nav__sec[data-sec="pulse"]  { --sec: var(--sec-pulse); }
.nav__sec[data-sec="supply"] { --sec: var(--sec-supply); }
.nav__sec[data-sec="ops"]    { --sec: var(--sec-ops); }
.nav__sec[data-sec="sys"]    { --sec: var(--sec-sys); }
.nav__group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--side-ink-2); padding: 6px 10px 6px 24px; font-weight: 700;
  position: relative;
}
/* цветной маркер раздела слева от заголовка */
.nav__group::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px;
  border-radius: 2px; background: var(--sec); transform: translateY(-50%);
}
.nav__item {
  display: block; padding: 7px 10px 7px 24px; border-radius: var(--r-s);
  color: var(--side-ink); cursor: pointer; font-size: 13.5px; position: relative;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
/* display:block выше перебивает атрибут hidden — без этого пункт «Пользователи
   и заявки» (data-admin) видели все, а не только админ */
.nav__item[hidden] { display: none; }
.nav__item:hover { background: var(--side-hover); color: #fff; }
.nav__item:focus-visible { outline: 2px solid var(--sec); outline-offset: -2px; }
/* Открытый пункт — светлая плашка с тёмным текстом и полосой цвета раздела. */
.nav__item.is-active {
  background: var(--side-active); color: var(--side-active-ink); font-weight: 600;
}
.nav__item::before {
  content: ""; position: absolute; left: 10px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 2px; background: var(--sec); opacity: 0; transform: scaleY(.4);
  transition: opacity .18s ease, transform .18s ease;
}
.nav__item.is-active::before { opacity: 1; transform: none; }
.nav__item.is-soon { opacity: .45; }
/* Окно ниже 1000 px (ноутбук, 1080p с панелями браузера): 21 пункт с обычными
   отступами не влезал, всё ниже «CRM закупки» уходило за край. Тут пункты
   плотнее при том же шрифте; на телефоне меню — выезжающая шторка, там
   отступы прежние (крупнее под палец). Не влезло и так — меню прокручивается,
   открытый пункт app.js докручивает в видимую зону. */
@media (min-width: 761px) and (max-height: 1000px) {
  .nav { padding: 2px 8px 10px; }
  .nav__sec { padding: 4px 0 6px; }
  .nav__group { padding: 5px 10px 3px 24px; line-height: 1.3; }
  .nav__item { padding: 4px 10px 4px 24px; line-height: 1.35; }
  .nav__item::before { top: 6px; bottom: 6px; }
}

.sidebar__foot {
  padding: 12px 14px; border-top: 1px solid var(--side-line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; gap: 8px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Цвет раздела открытого экрана (app.js ставит data-sec на #shell): его берут
   заголовок в шапке и полоса слева у панелей. */
.shell[data-sec="money"]  { --sec: var(--sec-money); }
.shell[data-sec="pulse"]  { --sec: var(--sec-pulse); }
.shell[data-sec="supply"] { --sec: var(--sec-supply); }
.shell[data-sec="ops"]    { --sec: var(--sec-ops); }
.shell[data-sec="sys"]    { --sec: var(--sec-sys); }

.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  position: sticky; top: 0; z-index: 30;
}
.topbar__title {
  font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 10px;
}
.topbar__title::before {
  content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--sec);
  flex: none; transition: background .25s ease;
}
.topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

.burger {
  display: none; background: none; border: none; font-size: 19px;
  cursor: pointer; color: var(--ink-2); padding: 4px 6px;
}

/* Экран появляется плавно: контейнер пересоздаётся при каждом открытии
   (app.js), так что анимация срабатывает сама, без скриптов. */
.content { padding: 20px; flex: 1; min-width: 0; animation: screen-in .2s ease-out both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.scrim {
  display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 35;
}

/* ─── ЭЛЕМЕНТЫ ЭКРАНОВ ─────────────────────────────── */

/* Карточка и панель: полоса цвета раздела слева — та же, что у пункта меню
   и у блоков отчёта в форме компании. */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--sec);
  border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 16px;
}
.card__head {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card__title { font-size: 14px; font-weight: 650; margin: 0; }
.card__sub { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }

.kpis {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 14px; box-shadow: var(--shadow);
}
.kpi__label { font-size: 12px; color: var(--ink-2); margin-bottom: 5px; font-weight: 500; }
.kpi__value {
  font-size: 21px; font-weight: 650; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.kpi__delta { font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi--accent { border-color: var(--line-2); box-shadow: inset 0 3px 0 var(--ink); }

.up   { color: var(--good); }
.down { color: var(--bad); }
.flat { color: var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 20px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.chip--good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.chip--bad  { background: var(--bad-soft);  border-color: transparent; color: var(--bad); }
.chip--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
a.chip { text-decoration: none; }
a.chip:hover { border-color: currentColor; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  padding: 5px 11px; border-radius: 20px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  white-space: nowrap; user-select: none;
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-3);
  padding: 9px 12px; border-bottom: 1px solid var(--line-2);
  background: var(--surface); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tbl td {
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.tbl tbody td { transition: background .12s ease; }
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl .muted { color: var(--ink-3); }
/* Шапка переносится по словам: «Хранение и приёмка» одной строкой держала
   колонку в 140 px, и на экране 1280 «Влияние» уезжало за край. Таблица
   шириной 100 % переносит шапку, только когда иначе не влезает. */
table.tbl thead th, table.tbl thead th.num { white-space: normal; vertical-align: bottom; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  border-radius: 0 0 var(--r) var(--r); }

.pnl-row td:first-child { color: var(--ink-2); }
.pnl-row--total td { font-weight: 650; background: var(--surface-2); }
.pnl-row--sub td:first-child { padding-left: 28px; color: var(--ink-3); font-size: 12.5px; }

.prod { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.prod__img {
  width: 30px; height: 40px; border-radius: 4px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--line); flex: 0 0 auto;
}
.prod__name { font-size: 12.8px; line-height: 1.25; }
.prod__code { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }

.note {
  padding: 10px 13px; border-radius: var(--r-s); font-size: 12.8px;
  margin-bottom: 12px; border: 1px solid transparent;
}
.note--warn { background: var(--warn-soft); color: var(--ink); border-color: transparent;
  box-shadow: inset 3px 0 0 var(--st-warn); }
.note--info { background: var(--accent-soft); color: var(--ink); border-color: transparent;
  box-shadow: inset 3px 0 0 var(--accent); }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.spinner {
  width: 22px; height: 22px; margin: 40px auto; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--tip-bg); color: var(--tip-ink); padding: 10px 16px; border-radius: var(--r-s);
  font-size: 13px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  max-width: calc(100vw - 32px);
}
.toast--bad { background: var(--bad); color: #fff; }

.grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.grid-2 > * { min-width: 0; }

svg.chart { display: block; width: 100%; height: auto; }
svg.chart text { font: 11px var(--font); fill: var(--ink-3); }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.legend i.ln { height: 2px; width: 14px; border-radius: 1px; vertical-align: middle; }

/* ─── СВЕРКА ПО ОТЧЁТАМ ────────────────────────────── */

/* Полоса недель. Горизонтальная прокрутка вместо переноса: недель под сотню,
   а перенос превратил бы шапку экрана в стену плиток. */
.wk-strip {
  display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;
  scrollbar-width: thin;
}
.wk {
  flex: 0 0 auto; padding: 7px 12px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); min-width: 118px;
}
.wk:hover { background: var(--surface-2); }
.wk__dates { font-size: 11.5px; color: var(--ink-3); }
.wk__val {
  font-size: 13px; font-weight: 600; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.wk.is-active { border-color: var(--ink); background: var(--surface-2); }
.wk.is-active .wk__val { color: var(--ink); }
/* Неделя без отчёта остаётся в списке, но не кликается: пропуск в ряду
   читался бы как потеря данных, а не как ожидание отчёта от WB. */
.wk.is-pending { cursor: default; border-style: dashed; background: var(--surface-2); }
.wk.is-pending .wk__val { color: var(--ink-3); font-weight: 500; font-size: 12px; }

.caret {
  cursor: pointer; color: var(--ink-3); user-select: none;
  font-size: 11px; margin-left: auto;
}
.pnl-row .caret { margin-left: 0; margin-right: 2px; }

.gap-row {
  display: grid; grid-template-columns: 1fr 128px; gap: 12px;
  align-items: center; margin-bottom: 11px;
}
.gap-row__top {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12.5px; margin-bottom: 4px;
}
.gap-bar {
  height: 7px; background: var(--bar-track); border-radius: 4px; overflow: hidden;
}
.gap-bar > div { height: 100%; border-radius: 4px; }
.gap-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 11px;
  font-size: 13px; font-weight: 600;
}

.kpi--bad  { background: var(--bad-soft); }
.kpi--good { background: var(--good-soft); }

/* ═══ ВОЛНА 1: сводка директора, юнит-экономика, юнит P&L, алерты ═══════ */

/* Экран — колонка блоков с ровным шагом. Ширина ограничена: строка
   длиннее ~1300 px читается хуже, а таблицы всё равно прокручиваются. */
.screen { display: flex; flex-direction: column; gap: 18px; max-width: 1320px; }
.screen > * { min-width: 0; }

.eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 500;
}
.lead { margin: 4px 0 0; color: var(--ink-2); max-width: 78ch; }
.h-cap {
  margin: 0; font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-2);
}
.fine { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: 110ch; }
.fine b { font-weight: 600; color: var(--ink); }
.hint { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* Строка управления: период, сравнение, кабинеты. Переносится, а не
   уезжает вбок — на телефоне это две-три строки кнопок. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.toolbar__label { font-size: 12px; color: var(--ink-3); }
.toolbar .select, .toolbar .input {
  width: auto; padding: 5px 9px; font-size: 12.5px; border-radius: 20px;
}
.toolbar .input[type="date"] { border-radius: var(--r-s); max-width: 150px; }

/* Панель: один лист с внутренними линиями вместо россыпи карточек. */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--sec);
  border-radius: var(--r-l); overflow: hidden; min-width: 0;
}
.panel__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 18px 20px 12px;
}
.panel__head h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.panel__head .sub { color: var(--ink-3); font-size: 13.5px; }
.panel__head .aside { margin-left: auto; }
.panel__block {
  padding: 16px 20px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.panel__head + .panel__block { border-top: 0; padding-top: 4px; }
.panel h2.plain { margin: 0; font-size: 19px; font-weight: 650; }
/* Широкая панель с одной таблицей: строки на всю ширину 1000+ px не читаются —
   ограничиваем содержимое разумной колонкой. */
.panel--narrow .panel__block > * { max-width: 820px; }

/* Плитки: сетка ячеек, разделённых линиями, внутри одной панели. */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
/* Итог сверху — ровно три колонки (шесть плиток = два ряда), строка плиток
   экрана — сколько влезет, но без одинокой плитки в хвосте на широком экране. */
.tiles--sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile {
  padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  margin: -1px 0 0 -1px;
}
.tile__label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.tile__value {
  font-size: 25px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tile__value small { font-size: .56em; font-weight: 500; color: var(--ink-2); }
.tile__sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.tile--neg .tile__value { color: var(--bad); }
.delta { font-size: 12.5px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--ink-3); font-weight: 500; }

/* Итог сверху: большое число слева, плитки справа. */
.summary {
  display: grid; grid-template-columns: minmax(250px, 1fr) 2.2fr;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--sec);
  border-radius: var(--r-l); overflow: hidden;
}
.summary > .tiles { border-left: 1px solid var(--line); margin-left: -1px; }
.hero { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero__label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.hero__value {
  font-size: clamp(38px, 5vw, 56px); font-weight: 650; line-height: 1.02;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero__value small { font-size: .5em; font-weight: 500; color: var(--ink-2); }
.hero__split {
  margin: 6px 0 2px; display: flex; flex-direction: column; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.hero__split div {
  display: flex; justify-content: space-between; gap: 12px; max-width: 340px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.hero__split dt { color: var(--ink-2); font-size: 13.5px; }
.hero__split dd { margin: 0; font-weight: 600; font-size: 14px; }
.hero__sub { color: var(--ink-3); font-size: 13px; }

.key-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px;
  max-width: 110ch; }
.key-list li::marker { color: var(--ink-3); }
.key-list b { font-weight: 650; }
/* Пункт-предупреждение в «Главном»: сравнение периодов сдвинуло разовое
   удержание WB (подписка за месяц одной строкой). Не тревога — пояснение
   к стрелкам, поэтому мягкая янтарная плашка, а не красный. */
.key-list .warn-mark { display: block; padding: 6px 10px; border-radius: var(--r-s);
  background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--st-warn); color: var(--ink); }
/* Пометка под стрелкой изменения: цифра верная, но её сдвинуло разовое списание. */
.delta-note { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.delta-note::before { content: "* "; color: var(--st-warn); font-weight: 700; }
/* Строка про прочие удержания WB в итоге юнит-экономики — рядом с прибылью. */
.note-line { padding-left: 10px; box-shadow: inset 3px 0 0 var(--st-warn); }

/* Два кабинета рядом, на узком экране — друг под другом. */
.cabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  align-items: start; }
.cabs--one { grid-template-columns: minmax(0, 1fr); }

/* «Куда ушёл рубль» — полоса долей и таблица под ней. */
.split { display: flex; gap: 2px; height: 28px; width: 100%; }
.split .seg { display: block; min-width: 4px; flex-basis: 0; outline-offset: 2px; }
.split .seg:first-child { border-radius: 6px 0 0 6px; }
.split .seg:last-child { border-radius: 0 6px 6px 0; }
.split .seg:only-child { border-radius: 6px; }
.split .seg:hover, .split .seg:focus-visible { filter: brightness(1.08) saturate(1.1); }
.split .seg:focus-visible { outline: 2px solid var(--ink); }
.c-s1 { background: var(--s1); } .c-s2 { background: var(--s2); }
.c-s3 { background: var(--s3); } .c-s4 { background: var(--s4); }
.c-s5 { background: var(--s5); } .c-s6 { background: var(--s6); }
.c-s7 { background: var(--s7); } .c-s8 { background: var(--s8); }
.c-n  { background: var(--bar); }
.sw { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }

table.split-t { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.split-t th, .split-t td { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.split-t thead th { font-size: 12px; color: var(--ink-3); font-weight: 500; text-align: right;
  border-bottom-color: var(--line-2); }
.split-t thead th:first-child { text-align: left; }
.split-t tbody th { text-align: left; font-weight: 500; }
.split-t tbody th > span.lbl { display: inline-flex; align-items: center; gap: 9px; }
.split-t td { text-align: right; padding-left: 12px; white-space: nowrap; }
.split-t td:last-child { width: 72px; color: var(--ink-2); }
.split-t tr.total th, .split-t tr.total td { font-weight: 650; color: var(--ink); border-bottom: 0; }
.split-t td.neg, .split-t tr.total td.neg { color: var(--bad); }

/* Таблицы в стиле образца: без заливки шапки, тонкие линии, цифры по правому краю.
   Широкая таблица прокручивается внутри своей обёртки, страница — никогда.

   Ширины подобраны под ноутбук 1280 px: за вычетом боковой панели, отступов
   и полосы прокрутки таблице остаётся ~990 px. При отступах 10 px и шапке не
   уже 64 px таблица на 14 колонок была шире на 300+ px, и правые колонки
   («k», «К начислению») уходили за край. Узкие колонки теперь по содержимому,
   первая — не шире 180 px (название обрезается многоточием, полное — в
   подсказке). */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  overscroll-behavior-x: contain; }
table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.data th, .data td {
  padding: 8px 7px; border-bottom: 1px solid var(--line); font-size: 13px;
  white-space: nowrap; text-align: right;
}
.data thead th {
  font-size: 11.5px; color: var(--ink-3); font-weight: 500; border-bottom-color: var(--line-2);
  vertical-align: bottom; white-space: normal; min-width: 44px; line-height: 1.3;
}
/* строка под курсором подсвечивается — в широкой таблице глаз не теряет строку */
.data tbody th, .data tbody td { transition: background .12s ease; }
.data tbody tr:hover > th, .data tbody tr:hover > td { background: var(--surface-2); }
.data th:first-child, .data td:first-child { padding-left: 0; text-align: left; }
.data th:last-child, .data td:last-child { padding-right: 0; }
.data tbody th { font-weight: 500; text-align: left; }
.data .l { text-align: left; }
.data .neg { color: var(--bad); }
.data .pos { color: var(--good); }
.data .mute { color: var(--ink-3); }
.data tr.total th, .data tr.total td { font-weight: 650; border-bottom: 0; }
.data .sub { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400;
  white-space: normal; }
.data td .sub { white-space: nowrap; }
.data--pad th:first-child, .data--pad td:first-child { padding-left: 20px; }
.data--pad th:last-child, .data--pad td:last-child { padding-right: 20px; }
.cellbar { height: 4px; background: var(--bar-track); border-radius: 2px; margin: 0 0 4px auto;
  width: 100%; min-width: 56px; overflow: hidden; }
.cellbar span { display: block; height: 100%; background: var(--bar); border-radius: 2px; }

/* Первая колонка остаётся на месте при прокрутке таблицы вбок —
   иначе на телефоне непонятно, чья это строка. */
.data--sticky th:first-child, .data--sticky td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}
.data--sticky tbody th:first-child { white-space: normal; min-width: 130px; max-width: 180px; }
/* название товара — одной строкой с многоточием: полное есть в подсказке */
.data--sticky tbody th:first-child .sub { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* График по дням в стиле образца. */
svg.dchart { width: 100%; height: auto; display: block; overflow: visible; }
.dchart .grid { stroke: var(--line); stroke-width: 1; }
.dchart .base { stroke: var(--line-2); stroke-width: 1; }
.dchart .ax { fill: var(--ink-3); font-size: 11px; font-family: var(--font); }
.dchart .lbl { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-family: var(--font); }
.dchart .bar { fill: var(--bar); }
.dchart .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round;
  stroke-linecap: round; }
.dchart .dot { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.dchart .hit { fill: transparent; cursor: crosshair; outline: none; }
.dchart .hit:hover, .dchart .hit:focus-visible { fill: var(--ink); fill-opacity: .06; }
.legend .k-bar { background: var(--bar); }
.legend .k-line { background: var(--s1); }

/* Всплывающая подсказка у графиков и полос. */
.tip {
  position: fixed; z-index: 90; pointer-events: none; background: var(--tip-bg);
  color: var(--tip-ink); padding: 8px 11px; border-radius: 8px; font-size: 13px;
  line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 260px;
}
.tip b { font-weight: 650; display: block; }
.tip .m { opacity: .72; }

/* «?» — три пункта о том, что на экране и что с этим делать. Работает на
   <details> без скриптов; окно фиксируется под шапкой, чтобы его не обрезала
   прокрутка панели инструментов на телефоне. */
.help { position: relative; }
.help > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 650; font-size: 14px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface);
  user-select: none;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover { color: var(--ink); border-color: var(--ink-3); }
.help > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help[open] > summary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.help__pop {
  position: fixed; top: calc(var(--topbar-h) + 6px); right: 16px; z-index: 60;
  width: min(390px, calc(100vw - 32px)); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 16px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); color: var(--ink);
}
.help__pop h3 { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.help__pop ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; color: var(--ink-2); }
.help__pop li::marker { color: var(--ink-3); }
.help__pop b { color: var(--ink); font-weight: 600; }

/* Плашка макета: заметная, но не тревожная — это не ошибка, а стройка. */
.mock-flag {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-s);
  border: 1.5px dashed var(--warn); background: var(--warn-soft); color: var(--ink);
  font-size: 13px;
}
.mock-flag b { letter-spacing: .06em; color: var(--warn); font-weight: 700; }

/* Зоны цены: точка + слово, цвет никогда не говорит один. */
.zone {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; color: var(--ink);
}
.zone::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.zone--red::before { background: var(--st-crit); }
.zone--yellow::before { background: var(--st-warn); }
.zone--green::before { background: var(--st-good); }
.zone--info::before { background: var(--accent); }
.zone--red { color: var(--bad); }
.count.zone { color: var(--ink); }

/* Шкала цены: где сейчас цена относительно красной, жёлтой и целевой. */
.zscale { position: relative; padding: 24px 0 20px; min-width: 0; }
.zscale__track { position: relative; height: 10px; border-radius: 5px; overflow: hidden;
  display: flex; background: var(--bar-track); }
.zscale__track span { display: block; height: 100%; }
.zscale__track .z-r { background: var(--st-crit); opacity: .85; }
.zscale__track .z-y { background: var(--st-warn); opacity: .9; }
.zscale__track .z-g { background: var(--st-good); opacity: .75; }
.zscale__tick { position: absolute; top: 20px; height: 18px; width: 0;
  border-left: 1.5px solid var(--ink-3); }
.zscale__tick i { position: absolute; top: 19px; transform: translateX(-50%); font-style: normal;
  font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zscale__tick--target { border-left-style: dashed; }
.zscale__now { position: absolute; top: 0; transform: translateX(-50%); display: flex;
  flex-direction: column; align-items: center; }
.zscale__now b { font-size: 12px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--ink); color: var(--surface); border-radius: 4px; padding: 1px 6px; }
.zscale__now::after { content: ""; width: 2px; height: 16px; background: var(--ink); }

/* Карточка SKU в юнит-экономике. */
.sku-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.sku-card { padding: 16px 20px 14px; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  margin: -1px 0 0 -1px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sku-card__head { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.sku-card__head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.sku-card__head .sub { color: var(--ink-3); font-size: 12.5px; }
.sku-card__head .zone { margin-left: auto; }
.sku-card__verdict { margin: 0; font-size: 13px; color: var(--ink-2); }
.sku-card__verdict b { color: var(--ink); font-weight: 600; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Калькулятор цены. */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 28px;
  align-items: start; }
.calc__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calc__form .field { margin: 0; }
.calc__form .field--wide { grid-column: 1 / -1; }
.calc__form .input, .calc__form .select { font-variant-numeric: tabular-nums; }
.calc__out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.calc__big { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.calc__big div { display: flex; flex-direction: column; }
.calc__big span { font-size: 12.5px; color: var(--ink-2); }
.calc__big strong { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; }
.calc__formula { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Юнит P&L: в ячейке три числа — сумма, доля от GMV, изменение к прошлой неделе. */
.chain td { vertical-align: top; }
.chain .v { display: block; font-weight: 500; }
.chain .s { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
/* Вторая строка ячейки («27,7 % · эквайринг 2 029 ₽ · +16 %») — пояснение, она
   переносится по словам, а не растягивает неделю: иначе на 1280 px «Итого»
   уезжает за край. Главное число над ней остаётся одной строкой. */
.chain td .s { white-space: normal; }
.chain tr.key th, .chain tr.key td { background: var(--surface-2); }
.chain tr.key .v { font-weight: 650; }
.chain tr.minus th { padding-left: 14px; color: var(--ink-2); font-weight: 400; }
.chain tbody th { white-space: normal; min-width: 150px; }
.chain td.tot { background: var(--surface-2); }
.chain tr.key td.tot { background: var(--surface-3); }

.rate { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px;
  border-radius: 10px; white-space: nowrap; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); }
.rate--loss { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.rate--weak { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.rate--good { color: var(--good); background: var(--good-soft); border-color: transparent; }
.rate--loco { color: var(--brand-ink); background: var(--brand); border-color: transparent; }
.rate--rise { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
/* нет себестоимости — класс не посчитать; приглушённо, чтобы не спорить с тревогами */
.rate--none { color: var(--ink-3); background: transparent; border-style: dashed; }

/* Алерты. */
.counts { display: flex; flex-wrap: wrap; gap: 8px; }
.count { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.count b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.count span { font-size: 12.5px; color: var(--ink-2); }
.count.zone::before { align-self: center; }
.alert-list { display: flex; flex-direction: column; }
.alert { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 0 16px;
  padding: 14px 20px 14px 0; border-top: 1px solid var(--line); }
.alert:first-child { border-top: 0; }
.alert__bar { border-radius: 0 3px 3px 0; background: var(--line-2); }
.alert--red .alert__bar { background: var(--st-crit); }
.alert--yellow .alert__bar { background: var(--st-warn); }
.alert--info .alert__bar { background: var(--accent); }
.alert__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alert__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.alert__title { margin: 0; font-size: 15px; font-weight: 650; }
.alert__detail { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.alert__todo { margin: 2px 0 0; font-size: 13.5px; }
.alert__todo b { font-weight: 600; }
.alert__meta { font-size: 12px; color: var(--ink-3); }
.alert__act { display: flex; align-items: flex-start; }
.alert.is-dismissed { opacity: .6; }
.calm { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; gap: 8px;
  align-items: center; }
.calm h2 { margin: 0; font-size: 22px; font-weight: 650; }
.calm p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.calm__mark { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--st-good);
  position: relative; }
.calm__mark::after { content: ""; position: absolute; left: 14px; top: 9px; width: 10px; height: 18px;
  border: solid var(--st-good); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.method ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px;
  color: var(--ink-2); font-size: 13.5px; max-width: 110ch; }

/* ═══ ФОРМА ОТЧЁТА КОМПАНИИ (Сводка директора) ═══════════════════════════
   Один в один с одобренным образцом ПЕРЕДАЧА_2026-09-29\reference\html\
   WB_сентябрь_2026_прибыль_деньги_активы.html: четыре блока с широкой цветной
   полосой слева (зелёный «Прибыль», бирюзовый «Юнит-экономика», жёлтый «Деньги»,
   синий «Активы на WB»), итоговые строки залиты светлым, строка «Прибыль после
   налога» крупно, «Как считалось» и подвал. Широкая таблица прокручивается
   внутри блока, страница — никогда. */
.fblk {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px 6px; border-left: 10px solid var(--line-2); min-width: 0;
}
.fblk--green  { border-left-color: var(--sec-money); }
.fblk--teal   { border-left-color: var(--sec-ops); }
.fblk--yellow { border-left-color: var(--sec-pulse); }
.fblk--blue   { border-left-color: var(--sec-supply); }
.fblk h2 {
  font-size: 17px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: baseline; font-weight: 650;
}
.fblk h2 .note { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.fblk .wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
table.ftbl { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px;
  font-variant-numeric: tabular-nums; }
/* одна колонка цифр (один кабинет): таблица не шире 720 px, число рядом с названием */
table.ftbl--one { max-width: 720px; min-width: 0; }
.ftbl--one td.n { width: 150px; }
@media (max-width: 520px) { .ftbl--one td.n { width: 96px; } }
.ftbl th, .ftbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left;
  vertical-align: top; transition: background .12s ease; }
.ftbl thead th { font-size: 13px; color: var(--ink-2); font-weight: 600;
  border-bottom: 2px solid var(--line); }
.ftbl thead th:not(:first-child) { text-align: right; }
.ftbl td.n { text-align: right; white-space: nowrap; }
.ftbl tbody th { font-weight: 400; padding-left: 24px; }
.ftbl tr.head th, .ftbl tr.total th { font-weight: 600; padding-left: 10px; }
.ftbl tr.head td, .ftbl tr.total td { font-weight: 600; }
.fblk--green  tr.total > * { background: var(--green-soft); }
.fblk--yellow tr.total > * { background: var(--yellow-soft); }
.fblk--blue   tr.total > * { background: var(--blue-soft); }
.fblk--teal   tr.total > * { background: var(--teal-soft); }
.ftbl tr.big td { font-size: 18px; }
.ftbl tr.big th { font-size: 16px; }
.ftbl tr.dim th, .ftbl tr.dim td { color: var(--ink-2); }
.ftbl tbody tr:not(.total):hover > * { background: var(--surface-2); }
.ftbl .sub { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400;
  line-height: 1.3; white-space: normal; }
.ftbl td.neg { color: var(--bad); }
.frules { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sec);
  border-radius: var(--r); padding: 14px 18px; }
.frules h2 { font-size: 15px; margin: 0 0 8px; font-weight: 650; }
.frules ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px;
  color: var(--ink-2); font-size: 13.5px; }
.frules b { color: var(--ink); font-weight: 600; }
.ffoot { margin: 0; font-size: 12.5px; color: var(--ink-3); }
/* Подробности (плитки, раскладка рубля, по дням, по товарам) — свёрнуты под
   формой: нужны не каждому, а форма должна читаться с первого экрана. */
.fmore { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 0 16px; }
.fmore > summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14px;
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.fmore > summary::-webkit-details-marker { display: none; }
.fmore > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--ink-3);
  border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .18s ease;
  margin: 0 4px 0 2px; }
.fmore[open] > summary::before { transform: rotate(45deg); }
.fmore > summary:hover { color: var(--ink); }
.fmore > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fmore > summary .hint { font-weight: 400; margin-left: 4px; }
.fmore__body { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 16px;
  animation: screen-in .2s ease-out both; }
.fmore__body > * { min-width: 0; }

/* ─── МОБИЛЬНАЯ ВЕРСИЯ ─────────────────────────────── */

@media (max-width: 1100px) {
  .cabs { grid-template-columns: minmax(0, 1fr); }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .summary > .tiles { border-left: 0; margin-left: 0; border-top: 1px solid var(--line); }
  .calc { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .gap-row { grid-template-columns: 1fr 104px; }
  .wk { min-width: 104px; }
  .burger { display: block; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .shell.is-open .sidebar { transform: translateX(0); }
  .shell.is-open .scrim { display: block; }
  .content { padding: 14px; }
  /* Инструменты экрана не должны растягивать шапку шире телефона:
     шапка переносится во вторую строку, вкладки прокручиваются внутри. */
  .topbar { padding: 8px 14px; height: auto; min-height: var(--topbar-h); flex: 0 0 auto;
    flex-wrap: wrap; row-gap: 6px; }
  .topbar__tools { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topbar__tools::-webkit-scrollbar { display: none; }
  .topbar__tools .tabs { flex-wrap: nowrap; }
  .topbar__title { font-size: 16px; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
  .kpi__value { font-size: 18px; }
  .help__pop { right: 12px; width: calc(100vw - 24px); }
}

@media (max-width: 520px) {
  .screen { gap: 14px; }
  .hero { padding: 16px; }
  .panel__head { padding: 16px 16px 10px; }
  .panel__head h2 { font-size: 19px; }
  .panel__block { padding: 14px 16px; }
  .tiles, .tiles--sum, .tiles--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 12px 14px; }
  .tile__value { font-size: 21px; }
  .sku-grid { grid-template-columns: minmax(0, 1fr); }
  .sku-card { padding: 14px 16px; }
  .calc__form { grid-template-columns: minmax(0, 1fr); }
  .alert { padding-right: 16px; gap: 0 12px; grid-template-columns: 4px minmax(0, 1fr); }
  .count { padding: 6px 10px; gap: 6px; }
  .count b { font-size: 18px; }
  .alert__act { grid-column: 2; margin-top: 8px; }
  .data--pad th:first-child, .data--pad td:first-child { padding-left: 16px; }
  .data--pad th:last-child, .data--pad td:last-child { padding-right: 16px; }
  .split-t th, .split-t td { font-size: 13px; }
  .data--sticky tbody th:first-child { min-width: 118px; max-width: 150px; }
  .fblk { padding: 12px 12px 4px; border-left-width: 8px; }
  .fblk h2 { font-size: 16px; }
  .ftbl th, .ftbl td { padding: 6px 8px; font-size: 13px; }
  .ftbl tbody th { padding-left: 18px; }
  .ftbl tr.big td { font-size: 16px; } .ftbl tr.big th { font-size: 15px; }
  .frules { padding: 12px 14px; }
  .fmore { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01ms !important; }
}