/* ══════════════════════════════════════════════════════════
   WBLackey — дизайн-система приложения «Графит»

   Сдержанно: почти монохром, один тёмный акцент (кнопки, выбранное), цвет —
   только у статусов (ошибка, внимание, норма). Без цветов разделов, градиентов
   и декоративных значков: значки остались там, где помогают узнать действие, —
   на плитках, в строках и на кнопках, и все они одной тонкой линией.
   Светлая и тёмная тема — вслед за Telegram (html[data-theme]).

   Слои: токены → компоненты (шапка, карточка, плитки, строки, цифры, кнопки,
   чипы, переключатели, поля, шторка, таблица, графики, тосты) → блоки разделов.
   Классы прежние: экраны не переписывались, система легла поверх.
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:         #F4F4F3;
  --surface:    #FFFFFF;
  --surface-2:  #F5F5F4;
  --surface-3:  #ECECEA;
  --line:       rgba(20, 20, 18, .08);
  --line-2:     rgba(20, 20, 18, .13);
  --text:       #121212;
  --text-2:     #5E5E5B;
  --text-3:     #9A9A96;

  --acc:        #161616;          /* главный акцент — графит */
  --acc-2:      #161616;
  --acc-ink:    #161616;
  --acc-soft:   #EFEFED;
  --acc-line:   #D6D6D2;
  --acc-glow:   transparent;
  --on-acc:     #FFFFFF;

  --ok:   #2E9E5B;  --ok-ink:   #1B7A43;  --ok-soft:   #E8F4EC;
  --warn: #D08A1E;  --warn-ink: #9A5B0B;  --warn-soft: #FAF0DF;
  --bad:  #D9483B;  --bad-ink:  #B42318;  --bad-soft:  #FAE9E7;

  /* шкала долей (полосы, легенды): от акцента к фону */
  --q1: #161616; --q2: #A3A3A0; --q3: #CFCFCB; --q4: #E6E6E3;

  --sh-1: none;
  --sh-2: 0 1px 2px rgba(20, 20, 18, .05), 0 8px 24px -14px rgba(20, 20, 18, .22);
  --sh-3: 0 24px 60px -20px rgba(20, 20, 18, .38);

  /* Высота элементов управления: обычная и малая. Всё, что стоит в одной строке, берёт одну из них */
  --h: 3.125rem;  --h-sm: 2.375rem;
  --r-xs: .5rem;  --r-sm: .75rem;  --r: .875rem;  --r-lg: 1.125rem;  --r-xl: 1.5rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t: .16s var(--ease);

  --font: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* прежние имена — их ещё зовут графики и подсветки в разделах */
  --card: var(--surface); --bg-secondary: var(--surface-2); --border: var(--line-2);
  --secondary: var(--text-2); --muted: var(--text-3);
  --accent: var(--acc); --accent-light: var(--acc-soft); --accent-hover: var(--acc-ink);
  --success: var(--ok); --success-bg: var(--ok-soft); --success-dark: var(--ok-ink);
  --warning: var(--warn); --warning-bg: var(--warn-soft); --warning-dark: var(--warn-ink);
  --danger: var(--bad); --danger-bg: var(--bad-soft); --danger-dark: var(--bad-ink);
  --radius-sm: var(--r-xs); --radius: var(--r-sm); --radius-lg: var(--r-lg);
  --shadow-sm: var(--sh-1); --shadow-md: var(--sh-2); --transition: var(--t);
  color-scheme: light;
}

/* Тёмный графит */
:root[data-theme="dark"] {
  --bg:         #0F0F0F;
  --surface:    #181818;
  --surface-2:  #1F1F1F;
  --surface-3:  #282828;
  --line:       rgba(255, 255, 255, .075);
  --line-2:     rgba(255, 255, 255, .13);
  --text:       #F1F1EF;
  --text-2:     #A9A9A4;
  --text-3:     #707069;
  --acc:        #F1F1EF;
  --acc-2:      #F1F1EF;
  --acc-ink:    #F1F1EF;
  --acc-soft:   #262626;
  --acc-line:   #3A3A38;
  --on-acc:     #141414;
  --ok-ink: #5BC98A;   --ok-soft:   rgba(46, 158, 91, .16);
  --warn-ink: #E9AE4F; --warn-soft: rgba(208, 138, 30, .16);
  --bad-ink: #F07A6E;  --bad-soft:  rgba(217, 72, 59, .17);
  --q1: #F1F1EF; --q2: #8C8C87; --q3: #555552; --q4: #333331;
  --sh-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -12px rgba(0, 0, 0, .7);
  --sh-3: 0 30px 70px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

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

/* Масштаб всего приложения — две строки ниже: все размеры в rem, поэтому от размера корня
   зависят и шрифты, и элементы. Растёт вместе с окном: растянули — всё крупнее, до потолка.
   Формула: нижняя граница, основание + доля ширины окна, верхняя граница. На телефоне
   основание больше, чтобы попадать пальцем. Рамки в 1 px и полосы прокрутки — в пикселях */
html { font-size: 11.5px; font-size: clamp(11.5px, 10.8px + .17vw, 15px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) { html { font-size: 12.5px; font-size: clamp(12.5px, 11.8px + .2vw, 15px); } }
body { font-size: 1.031rem; }
html, body {
  min-height: 100vh;
  font-family: var(--font); line-height: 1.5; letter-spacing: -.005em;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';
}
body { padding-bottom: env(safe-area-inset-bottom, 0); transition: background .3s ease; }
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

/* Полосы прокрутки таблиц, шторок и любых прокручиваемых блоков: без дорожки и стрелок,
   тонкий бегунок цвета текста, при наведении — чуть толще и темнее. Chromium (Telegram
   Desktop, Android, браузеры) рисует их через ::-webkit-scrollbar; стандартные
   scrollbar-width / scrollbar-color выключили бы эти правила, поэтому они только для Firefox.
   Страница целиком по-прежнему без полосы (правила html выше точнее). */
:root { --sb: rgba(20, 20, 18, .20); --sb-hover: rgba(20, 20, 18, .38); }
:root[data-theme="dark"] { --sb: rgba(255, 255, 255, .18); --sb-hover: rgba(255, 255, 255, .34); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb {
  min-width: 36px; min-height: 36px; border-radius: 999px;
  border: 3px solid transparent; background: var(--sb) padding-box;
}
*::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:active {
  border-width: 2px; background-color: var(--sb-hover);
}
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
  html { scrollbar-width: none; }
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { border: none; background: none; cursor: pointer; }
::selection { background: var(--acc-soft); }

/* ── иконки ── */
.i { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em;
     stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.i.fill { fill: currentColor; stroke: none; }

#app { width: 100%; margin: 0 auto; min-height: 100vh; }
#page {
  padding: .5rem clamp(.75rem, 2.4vw, 2.5rem) 2rem;
  padding-top: calc(.5rem + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}

/* ── вертикальный ритм: отступ задаёт контейнер ── */
#page, #page > #res, .stack { display: flex; flex-direction: column; gap: .75rem; }
#page > *, #page > #res > *, .stack > * { flex: none; min-width: 0; margin-top: 0 !important; margin-bottom: 0 !important; }
#page > .head { padding-bottom: .125rem; }
#page > .fold, #page > .form-sec, #page > #res > .fold { padding: .5rem .25rem 0; }
#page > .ev-sub, #page > .mass-nm, #page > .more-tg { padding: 0 .25rem; }

/* Вход на экран: блоки поднимаются по очереди (только при переходе, не при обновлении) */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
#page.enter > * { animation: rise .42s var(--ease) both; }
#page.enter > *:nth-child(2) { animation-delay: .03s; }
#page.enter > *:nth-child(3) { animation-delay: .06s; }
#page.enter > *:nth-child(4) { animation-delay: .09s; }
#page.enter > *:nth-child(5) { animation-delay: .12s; }
#page.enter > *:nth-child(n+6) { animation-delay: .15s; }
#page.enter .tiles > .tile { animation: rise .45s var(--ease) both; }
#page.enter .tiles > .tile:nth-child(2) { animation-delay: .04s; }
#page.enter .tiles > .tile:nth-child(3) { animation-delay: .08s; }
#page.enter .tiles > .tile:nth-child(4) { animation-delay: .12s; }
#page.enter .tiles > .tile:nth-child(n+5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ══════════ шапка экрана ══════════ */
.head { display: flex; align-items: center; gap: .75rem; padding: 1.125rem .25rem .375rem; }
.head-txt { flex: 1; min-width: 0; }
.head h1 { font-size: 1.629rem; line-height: 1.12; font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; }
.head .sub { margin-top: .25rem; font-size: .975rem; color: var(--text-2); }
.head .act {
  flex: none; display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .812rem; border-radius: 62.438rem;
  background: var(--surface); box-shadow: var(--sh-1); border: 1px solid var(--line);
  font-size: .956rem; font-weight: 600; color: var(--acc-ink); transition: transform var(--t);
}
.head .act:active { transform: scale(.96); }

/* ══════════ карточка ══════════ */
.card {
  background: var(--surface); border-radius: var(--r-lg); padding: 1rem;
  box-shadow: var(--sh-1); border: 1px solid var(--line);
}
.card + .card { margin-top: .75rem; }
/* Плашка внутри карточки: одинаковый воздух до соседей сверху и снизу */
.card .card { margin-top: 1rem; margin-bottom: 1rem; }
.card .card:first-child { margin-top: 0; }
.card .card:last-child { margin-bottom: 0; }
.card-title {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
  font-size: 1.013rem; font-weight: 650; letter-spacing: -.01em; color: var(--text);
}


/* ══════════ плитки разделов ══════════ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); gap: .625rem; }
@media (max-width: 400px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  min-width: 0; min-height: 6rem; padding: .875rem; text-align: left;
  background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--sh-1); overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.tile::after {                                   /* стрелка «зайти» в углу */
  content: ''; position: absolute; top: 1.125rem; right: 1rem; width: .438rem; height: .438rem;
  border-top: .125rem solid var(--text-3); border-right: .125rem solid var(--text-3); transform: rotate(45deg);
  opacity: .6;
}
.tile:hover { border-color: var(--line-2); }
.tile:active { transform: scale(.975); }
.tile .ico { flex: none; display: grid; place-items: center; font-size: 1.358rem; color: var(--text-2); }
.tile .ico .i { stroke-width: 1.6; }
.tile .body { min-width: 0; width: 100%; margin-top: auto; }
.tile .nm { display: block; font-size: 1.031rem; font-weight: 650; letter-spacing: -.015em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .hint { display: block; margin-top: 1px; font-size: .938rem; color: var(--text-2);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подсказка плитки — до двух строк: «FBS, автопополнение, …» обрезалась на первом слове */
.tile .hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.tile[disabled] { opacity: .45; }

/* ══════════ строки списка ══════════ */
.list { display: flex; flex-direction: column; }
.item {
  position: relative; display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .75rem .125rem; text-align: left; border-top: 1px solid var(--line);
  transition: background var(--t);
}
.item:first-child { border-top: none; padding-top: .25rem; }
.list > .item:last-child { padding-bottom: .25rem; }
button.item { border-radius: 0; }
button.item:active { background: var(--surface-2); }
.item .ico {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; flex: none; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); font-size: 1.194rem;
}
.item .body { flex: 1; min-width: 0; }
.item .nm { display: block; font-size: 1.031rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.item .hint {
  display: block; margin-top: .125rem; font-size: .938rem; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Подпись строки — до двух строк, дальше многоточие: в одну строку от «4 FBS / 4 FBW · за месяц»
   оставалось «4 FBS / 4 F…». Многострочные .wrap и .kv — как были, без ограничения */
.item .hint:not(.wrap):not(.kv) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.item .hint.kv { white-space: normal; font-size: .994rem; color: var(--text-2); margin: 0; }
/* подсказка в несколько строк: перенос по 
 и по ширине, без обрезки */
.item .hint.wrap { white-space: pre-line; overflow-wrap: anywhere; }
.item .go { flex: none; width: 1.125rem; height: 1.125rem; font-size: 0; position: relative; transition: transform var(--t); }
.item .go::before {
  content: ''; position: absolute; left: .25rem; top: .312rem; width: .438rem; height: .438rem;
  border-top: .125rem solid var(--text-3); border-right: .125rem solid var(--text-3); transform: rotate(45deg);
}
.item .go.open { transform: rotate(90deg); }
.item .qty { flex: none; max-width: 62%; text-align: right; overflow-wrap: anywhere;
             font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.item .qty.bad { color: var(--bad-ink); }
.item .qty em.sub { display: block; margin-top: 1px; font-style: normal; font-size: .9rem; font-weight: 500; color: var(--text-3); }
.item .qty.ok  { color: var(--ok-ink); }
.item .of { flex: none; min-width: 2.125rem; font-size: .919rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.item.grp { cursor: pointer; }
.item .chip { flex: none; }
.sizes { margin: 0 0 .375rem .875rem; padding-left: .75rem; border-left: .125rem solid var(--line-2); }
.sizes .item { padding-left: .125rem; }
.sizes .item.sub .nm { font-size: .994rem; }
.item.fresh { animation: fresh 2.4s ease-out; border-radius: var(--r-xs); }
@keyframes fresh { 0%, 35% { background: var(--acc-soft); } 100% { background: transparent; } }

/* ══════════ цифры (KPI) ══════════
   Одна система для трёх прежних: .nums/.num в карточке, .tots/.tot и .fin-card отдельно */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr)); gap: .5rem; }
/* Четыре цифры в ряд на телефоне не помещаются (пятизначные обрезались) — сеткой 2×2 */
@media (max-width: 420px) { .nums:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.num {
  min-width: 0; padding: .75rem .625rem .625rem; text-align: left; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid transparent; transition: transform var(--t), border-color var(--t);
}
button.num:active { transform: scale(.97); }
button.num:hover { border-color: var(--acc-line); }
.num b { display: block; font-size: 1.412rem; line-height: 1.1; font-weight: 700; letter-spacing: -.03em;
         font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num span { display: block; margin-top: .25rem; font-size: .919rem; color: var(--text-2); }
.num.warn b { color: var(--warn-ink); }
.num.bad b  { color: var(--bad-ink); }

.tots { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .625rem; margin-bottom: .625rem; }
.tot { min-width: 0; padding: .812rem .875rem; background: var(--surface); border-radius: var(--r-lg);
       border: 1px solid var(--line); box-shadow: var(--sh-1); }
.tot span { display: block; font-size: .919rem; color: var(--text-2); letter-spacing: 0; }
.tot b { display: block; margin-top: .25rem; font-weight: 700; line-height: 1.5rem; font-size: 1.303rem;
         font-variant-numeric: tabular-nums; letter-spacing: -.03em;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Подписи в цифрах переносятся, а не распирают карточку: «Ближайший конец» в две строки */
.tot span, .num span, .fin-card span { overflow-wrap: anywhere; hyphens: auto; }
.gt-n b, .srow .val b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tot em { display: block; margin-top: .125rem; font-size: .9rem; font-style: normal; color: var(--text-3); }

/* ══════════ кнопки ══════════ */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: var(--h); padding: .75rem 1rem; border-radius: var(--r);
  font-size: 1.058rem; font-weight: 600; letter-spacing: -.01em; color: var(--on-acc);
  background: var(--acc); transition: transform var(--t), opacity var(--t);
}
.btn .i { font-size: 1.194rem; }
.btn:active { transform: scale(.985); opacity: .88; }
.btn:disabled { background: var(--surface-3); color: var(--text-3); box-shadow: none; }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
.btn-ghost .i { color: var(--text-2); }
.btn-ghost:active { background: var(--surface-2); opacity: 1; }
.btn-danger { background: var(--bad-soft); color: var(--bad-ink); }
.btn-danger .i { color: var(--bad-ink); }
/* Тихая кнопка: только текст. Удаления — красным текстом в самом низу, отдельно
   от рабочих кнопок, чтобы не нажать их рядом с «QR» и «Передать в доставку» */
.btn-quiet { background: none; color: var(--text-2); font-size: .994rem; }
.btn.btn-quiet, .btn + .btn.btn-quiet { margin-top: .875rem; }
.btn-quiet .i { color: inherit; }
.btn-quiet.bad { color: var(--bad-ink); }
.btn-quiet:active { background: var(--surface-2); }
.btn + .btn { margin-top: .625rem; }
.card + .btn { margin-top: .75rem; }
.row .btn + .btn { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: .625rem; }
.row > * { flex: 1 1 7rem; min-width: 0; }
/* В половину и треть ширины подпись из двух слов иначе ломается на две строки */
.row > .btn { padding-left: .75rem; padding-right: .75rem; font-size: 1.013rem; }

/* Кнопки подряд — один гибкий ряд: на широком окне всё в строку, на узком дробится на ряды.
   Экраны пишут кнопки столбиком, ряд собирает core.js (flexRows). Ряд всегда занят целиком и
   симметричен: ширина у кнопок одна (длинная подпись переносится), высота равна самой высокой */
.acts { display: flex; flex-wrap: wrap; gap: .625rem; }
/* Воздух вокруг ряда задаёт сам ряд: у соседа может не быть своего поля, а между ними стоять скрытый блок */
* + .acts, .acts + * { margin-top: .75rem; }
.acts > .row { display: contents; }
.acts > .btn, .acts > .row > .btn { flex: 1 1 11rem; width: auto; min-width: 0; margin: 0 !important;
             padding-left: .875rem; padding-right: .875rem; font-size: 1.028rem; }

/* Кнопка-значок в строке: удалить то, рядом с чем стоит */
.ico-x { width: var(--h-sm); height: var(--h-sm); flex: none; display: grid; place-items: center; border-radius: .688rem;
         background: var(--bad-soft); color: var(--bad-ink); transition: transform var(--t); }
.ico-x:active { transform: scale(.92); }

/* Имя сотрудника: ведёт к его профилю (core.js, person) */
.person { cursor: pointer; text-decoration: underline; text-decoration-color: var(--text-3);
          text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* ══════════ бейджи и чипы ══════════ */
.badge {
  display: inline-flex; align-items: center; gap: .312rem; padding: .188rem .562rem; border-radius: 62.438rem;
  font-size: .9rem; font-weight: 650; white-space: nowrap; letter-spacing: 0;
}
.badge-ok   { background: var(--ok-soft);   color: var(--ok-ink); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-bad  { background: var(--bad-soft);  color: var(--bad-ink); }
.badge-mp   { background: var(--surface-3); color: var(--text); }
.badge-off  { background: var(--surface-3); color: var(--text-3); }
button.badge { cursor: pointer; }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .625rem; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem; padding: .438rem .812rem; border-radius: 62.438rem;
  font-size: .956rem; font-weight: 600; background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line-2); transition: background var(--t), color var(--t), border-color var(--t);
}
.chip.on { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.chip.bad { background: var(--bad-soft); color: var(--bad-ink); border-color: transparent; }
.chip i { font-style: normal; font-size: 1.031rem; line-height: 1; opacity: .7; margin-left: .125rem; }

/* ══════════ переключатели ══════════ */
/* Булев параметр — тумблер: включён — графитовый, выключен — светлый с рамкой */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 2.625rem; height: 1.625rem; border-radius: 62.438rem; cursor: pointer;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t);
}
input[type="checkbox"]::after {
  content: ''; position: absolute; top: .188rem; left: .188rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform var(--t);
}
input[type="checkbox"]:checked { background: var(--acc); box-shadow: none; }
:root[data-theme="dark"] input[type="checkbox"]:checked::after { background: #141414; }
input[type="checkbox"]:checked::after { transform: translateX(1rem); }
input[type="checkbox"]:disabled { opacity: .45; }

.seg {
  display: flex; gap: .188rem; margin-bottom: .625rem; padding: .25rem; border-radius: var(--r);
  background: var(--surface-3); border: 1px solid var(--line);
}
.seg button {
  flex: 1; padding: .5rem .625rem; border-radius: .75rem; font-size: .975rem; font-weight: 600; color: var(--text-2);
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
:root[data-theme="dark"] .seg button.on { background: var(--surface-3); }
.card .seg { background: var(--surface-2); }

.check {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem; padding: .75rem .875rem;
  background: var(--surface); border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: var(--sh-1); font-size: 1.013rem; color: var(--text);
}
.check input { order: 2; margin-left: auto; }

/* Выбор одного из нескольких — метки (core.js cycle) */
.cyc-chips .chip b { font-weight: 700; }
/* Массовая настройка строкой: статус слева, «Изменить» справа */
.mass-row .hint.kv { font-size: .994rem; color: var(--text); }
.mass-row .nm + .hint.kv { font-size: .938rem; color: var(--text-2); }
.mass-go { flex: none; padding: .375rem .75rem; border-radius: 62.438rem; border: 1px solid var(--line-2);
           font-size: .956rem; font-weight: 600; color: var(--text-2); }
.mass-row:active .mass-go { background: var(--surface-2); }

/* ══════════ поля ══════════ */
.search, .input, .qty-input, .step input, .fin-chart select {
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.search:focus, .input:focus, .qty-input:focus, .step input:focus {
  outline: none; border-color: var(--acc); background: var(--surface); box-shadow: 0 0 0 4px var(--acc-soft);
}
.search {
  width: 100%; min-height: var(--h); margin: 0 0 .625rem; padding: .5rem .875rem .5rem 2.625rem; border-radius: var(--r); font-size: 1.031rem;
  background: var(--surface) no-repeat .875rem 50% / 1.125rem 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23969FAF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  box-shadow: var(--sh-1);
}
.search::placeholder, .input::placeholder { color: var(--text-3); }
.field { display: block; margin-bottom: .75rem; }
.field > span, .field > label { display: block; margin-bottom: .375rem; font-size: .938rem; font-weight: 550; color: var(--text-2); }
.field .req { color: var(--bad-ink); }
.input { width: 100%; min-height: var(--h); padding: .5rem .875rem; border-radius: var(--r); font-size: 1.086rem; }
.input.empty-req { border-color: var(--bad); background: var(--bad-soft); }
textarea.input { display: block; resize: vertical; min-height: 6.5rem; padding: .75rem .875rem; line-height: 1.5; }
.qty-input { width: 4.375rem; height: var(--h-sm); flex: none; padding: 0 .562rem; text-align: center; border-radius: var(--r-sm);
             font-size: 1.086rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.form-sec { margin: 1rem .125rem .5rem; font-size: .956rem; font-weight: 650; color: var(--text-2); }

/* Поля подряд — так же, как кнопки: сколько влезает в строку. Большой текст и составное поле — на всю ширину */
.fields { display: flex; flex-wrap: wrap; gap: .75rem; }
.fields > .row, .fields > .erp-2 { display: contents; }
.fields > *, .fields > .row > *, .fields > .erp-2 > * { flex: 1 1 16rem; min-width: 0; margin: 0 !important; }
/* Поля, поставленные парой: числа и даты. Им хватает меньшего, и на телефоне они остаются рядом */
.fields > .row > *, .fields > .erp-2 > * { flex-basis: 9rem; }
.fields > .field:has(textarea, .erp-rows, .chips, .seg, .row, .list) { flex-basis: 100%; }

/* ══════════ шторка снизу ══════════ */
.sheet-bg {
  position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 10, 18, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: relative; width: 100%; max-width: 36.25rem; max-height: 90%; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 1.625rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0));
  box-shadow: var(--sh-3); animation: sheet-up .32s var(--ease);
}
.sheet::before {                                  /* ручка шторки */
  content: ''; position: absolute; top: .562rem; left: 50%; width: 2.375rem; height: .312rem; margin-left: -1.188rem;
  border-radius: 62.438rem; background: var(--line-2);
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet h2 { display: flex; align-items: center; gap: .625rem; font-size: 1.249rem; font-weight: 700;
            letter-spacing: -.025em; margin-bottom: .875rem; }
.sheet-x {
  margin-left: auto; width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2); font-size: .994rem; transition: background var(--t);
}
.sheet-x:active { background: var(--surface-3); }
.sheet-txt { margin-bottom: 1rem; font-size: 1.013rem; color: var(--text-2); white-space: pre-line; }
/* Поиск в выборе из списка (core.js pick) — остаётся сверху, пока список листают. Липнет к самому
   краю шторки (top — минус её верхний отступ), иначе в полосе над полем просвечивает список */
.pick-find { position: sticky; top: -1.625rem; z-index: 1; margin: -.75rem -1rem 0; padding: .75rem 1rem .5rem;
             background: var(--surface); }

/* ══════════ подписи и группы ══════════ */
.ev-sub { margin: -.25rem 0 .625rem; font-size: .956rem; color: var(--text-2); }
/* Длинное пояснение свёрнуто до двух строк (core.js foldNotes); кнопка раскрывает */
.ev-sub.folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.more-tg { display: block; margin: .125rem 0 .625rem; padding: .125rem 0; font-size: .938rem; font-weight: 600;
           color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2);
           text-underline-offset: .188rem; }
.more-tg:last-child { margin-bottom: 0; }
.card.ev { border-left: .25rem solid var(--line-2); }
.ev-in   { border-left-color: var(--ok)   !important; }
.ev-out  { border-left-color: var(--acc)  !important; }
.ev-off  { border-left-color: var(--bad)  !important; }
.ev-move { border-left-color: var(--warn) !important; }
.mass-nm { margin-bottom: .375rem; font-size: .938rem; color: var(--text-2); }
.mass-nm + .seg { margin-bottom: 0; }
.seg + .item { border-top: none; padding-top: .75rem; }

.fold {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .875rem .25rem .5rem; text-align: left;
  font-size: .994rem; font-weight: 650; letter-spacing: -.01em; color: var(--text);
}
.fold .chev { font-size: .844rem; color: var(--text-3); transition: transform var(--t); }
.fold .chev.off { transform: rotate(-90deg); }
.fold .cnt { margin-left: auto; padding: .125rem .562rem; border-radius: 62.438rem; background: var(--surface-3);
             color: var(--text-2); font-size: .919rem; font-weight: 600; }

/* ══════════ таблица ══════════ */
.tbl-box { position: relative; }
.card .tbl-box { margin-left: -.75rem; margin-right: -.75rem; }
.tbl-box::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1.625rem; pointer-events: none;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(to left, rgba(20, 20, 18, .09), transparent);
  transition: opacity var(--t);
}
.tbl-box.end::after { opacity: 0; }
/* Вертикальная полоса забирала у таблицы 10 px справа: шапка и строки обрывались, не доходя
   до края. Вниз таблицу листают колесом и пальцем, полоса снизу для листания вбок осталась */
.tbl-wrap::-webkit-scrollbar:vertical { width: 0; }
.tbl-wrap {
  overflow: auto; -webkit-overflow-scrolling: touch; max-height: 78vh;
  background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.card .tbl-wrap { border: none; box-shadow: none; }
.tbl { width: 100%; border-collapse: collapse; font-size: .956rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl th {
  position: sticky; top: 0; z-index: 2; padding: .625rem .75rem; text-align: left; background: var(--surface-2);
  font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: var(--text-2);
  box-shadow: inset 0 -1px 0 var(--line-2);
}
.tbl td { padding: .625rem .75rem; border-top: 1px solid var(--line); }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl td.n { font-weight: 700; color: var(--text); }
.tbl td.dim { color: var(--text-3); }
.tbl td.nmc { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
.tbl td.zero { color: var(--text-3); font-weight: 600; }
.tbl td.low  { color: var(--bad-ink);  font-weight: 700; }
.tbl td.mid  { color: var(--warn-ink); font-weight: 650; }

/* ══════════ сетка часов ══════════ */
.hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: .375rem; }
.hr {
  padding: .625rem 0; border-radius: .688rem; font-size: .938rem; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-3); border: 1px solid var(--line);
  transition: background var(--t), color var(--t);
}
.hr.on { background: var(--acc); color: var(--on-acc); border-color: transparent; }

/* ══════════ статистика ══════════ */
.hd { display: flex; align-items: center; gap: .5rem; margin: 0 .125rem .75rem; min-height: 1.625rem; }
.hd h2 { flex: 1; margin: 0; font-size: 1.013rem; font-weight: 650; letter-spacing: -.01em; color: var(--text);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd .chip { margin: 0; padding: .188rem .625rem; font-size: .919rem; }
.hd .chip i { font-size: .919rem; margin-left: .188rem; }

/* Строка таблицы, ведущая в карточку */
.tbl tr.tap { cursor: pointer; }
.tbl tr.tap:hover td { background: var(--surface-2); }
.tbl tr.tap:active td { background: var(--surface-3); }
/* Строка, выделенная первым нажатием: фон ячеек гаснет, поверх встаёт «Открыть»
   (core.js, armRow). Название товара остаётся читаемым — видно, что открываем */
.tbl td { transition: background-color var(--t), color var(--t); }
.tbl tr.armed td { background: var(--surface) !important; color: var(--text-3); }
.tbl tr.armed td.nmc { color: var(--text); }
.row-open {
  position: absolute; z-index: 6; transform: translate(-50%, -50%);
  padding: .562rem 1.625rem; border-radius: 62.438rem; font-size: 1.013rem; font-weight: 650;
  color: var(--on-acc); background: var(--acc); box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  animation: row-open-in var(--t);
}
.row-open:active { opacity: .88; }
@keyframes row-open-in { from { opacity: 0; transform: translate(-50%, -30%); } }

.chart svg { display: block; width: 100%; height: auto; }
.chart .gl  { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .lbl { font-size: clamp(9.5px, .77rem, 10.5px); fill: var(--text-3); }
.chart .seg-bar { transition: opacity var(--t); }
.chart .seg-bar.dim { opacity: .25; }
.chart .hit { fill: transparent; cursor: pointer; }

/* Товар склада на площадках: легенда, выбранный день, таблица по площадкам */
.mkt .seg { margin-bottom: .625rem; }
.mkt-legend, .mkt-day { display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .938rem; color: var(--text-2); }
.mkt-legend { margin-bottom: .375rem; }
.mkt-legend i, .mkt-day i, .mkt-h i { display: inline-block; width: .562rem; height: .562rem; border-radius: .188rem;
                                     margin-right: .312rem; vertical-align: 0; }
.mkt-day { min-height: 1.25rem; margin: .375rem 0 .75rem; align-items: baseline; }
.mkt-day > b { color: var(--text); }
.mkt-day span b { color: var(--text); font-variant-numeric: tabular-nums; }
.mkt-day .hint { color: var(--text-3); }
.mkt-grid { display: grid; gap: 0; font-size: .956rem; border-top: 1px solid var(--line); }
.mkt-grid > * { padding: .5rem .25rem; border-bottom: 1px solid var(--line); min-width: 0; }
.mkt-grid > b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mkt-h { text-align: right; font-size: .919rem; font-weight: 650; color: var(--text-2); overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.mkt-c { color: var(--text-2); }
.mkt-own { margin-top: .625rem; font-size: .956rem; color: var(--text-2); line-height: 1.45; }
.mkt-own b { color: var(--text); }
.mkt-bad { color: var(--bad-ink, #B42318); }
.mkt-warn { color: var(--warn-ink, #9A5B0B); }

.srow {
  display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; align-items: center; gap: .625rem;
  padding: .625rem; border-radius: var(--r); cursor: pointer; transition: background var(--t);
}
.srow:hover { background: var(--surface-2); }
.srow.on { background: var(--surface-3); }
.srow.head { padding: .125rem .625rem .375rem; cursor: default; background: none; }
.srow.head div { font-size: .9rem; color: var(--text-3); }
.srow .rank { font-size: .9rem; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.srow .nm { display: flex; gap: .438rem; font-size: 1.013rem; font-weight: 600; }
.srow .nm span { min-width: 0; overflow-wrap: anywhere; }
.srow .dot { width: .625rem; height: .625rem; border-radius: .25rem; flex: none; margin-top: .312rem; }
.srow .arr { margin-left: .25rem; color: var(--text-3); font-size: .881rem; font-weight: 400; }
.srow .mt { margin-top: .125rem; font-size: .938rem; color: var(--text-2); 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: 1.058rem; font-weight: 700; letter-spacing: -.02em; }
.srow .val span { display: block; font-size: .9rem; color: var(--text-2); }
.srow .val.zero b { color: var(--text-3); font-weight: 500; }
.srow .line { grid-column: 2 / -1; height: .25rem; border-radius: 62.438rem; background: var(--surface-3); overflow: hidden; }
.srow .line i { display: block; height: 100%; border-radius: 62.438rem; background: var(--acc); }
.srow .sizes { grid-column: 2 / -1; margin: .25rem 0 .125rem; border-left: none; padding-left: 0; }

.sz { display: flex; align-items: center; gap: .375rem; padding: .312rem .125rem; font-size: .938rem; font-variant-numeric: tabular-nums; }
.sz .s-dot { width: .438rem; height: .438rem; border-radius: .125rem; flex: none; }
.sz .s-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz .s-pc { flex: none; font-size: .9rem; color: var(--text-2); }
.sz .s-v  { margin-left: auto; font-weight: 650; }
.sz .s-v, .sz .s-l, .sz .s-b, .sz .s-w { min-width: 2.5rem; text-align: right; white-space: nowrap; }
.sz .s-l, .sz .s-w { color: var(--text-2); }
.sz .s-b  { font-weight: 650; }
.sz.head { padding-bottom: .125rem; font-size: .862rem; color: var(--text-3); }
/* Размер ведёт в карточку (stats.js): выделенный гаснет, поверх «Открыть» (core.js, armRow) */
.srow { position: relative; }
.sz.tap { cursor: pointer; border-radius: .375rem; transition: color var(--t), background var(--t); }
.sz.tap:active { background: var(--surface-2); }
.sz.armed, .sz.armed .s-pc, .sz.armed .s-l, .sz.armed .s-w { color: var(--text-3); }
.sz.armed .s-nm { color: var(--text); }
.sz.head .s-v, .sz.head .s-l, .sz.head .s-b, .sz.head .s-w { font-weight: 400; }

/* Период графиков продаж (core.js, periodSeg): второй ряд под показом — мельче, чтобы не спорил с ним */
.seg.per button { padding: .375rem .25rem; font-size: .938rem; }
.st-since { margin-top: .375rem; font-size: .919rem; color: var(--text-3); }
/* Доска «Статистики» в карточке товара (stats.js, A.salesBoard): плитки на белом — серые,
   размеры под графиком без отступа списка, размер этой карточки выделен */
.card .tot { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.sales .sizes { position: relative; margin: .75rem 0 0; padding-left: 0; border-left: none; }
.sz.cur .s-nm { font-weight: 700; color: var(--text); }

/* ══════════ переписка с покупателем ══════════ */
.talk { display: flex; flex-direction: column; gap: .625rem; }
.bub { max-width: 88%; padding: .625rem .875rem; border-radius: var(--r-lg); font-size: 1.013rem; line-height: 1.5; overflow-wrap: anywhere; }
.bub.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); border-bottom-left-radius: .375rem; }
.bub.us { align-self: flex-end; border-bottom-right-radius: .375rem; background: var(--surface-3); }
.bub .who { display: block; margin-bottom: .25rem; font-size: .919rem; font-weight: 650; color: var(--text-2); }
.bub.us .who { color: var(--text); }
.bub .txt { white-space: pre-wrap; }
.bub.us[role=button] { cursor: pointer; }
.bub.us[role=button]:active { filter: brightness(.96); }
.bub .part { display: block; margin-top: .375rem; font-size: .975rem; }
.bub .part b { font-weight: 650; color: var(--text-2); }
.bub .none { color: var(--text-3); font-style: italic; }
.shots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.shots img { width: 4.75rem; height: 4.75rem; object-fit: cover; border-radius: .75rem; background: var(--surface-2); }

/* ══════════ поставка Lamoda ══════════ */
.pick {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .75rem .25rem; border-top: 1px solid var(--line); transition: background var(--t);
}
.pick:first-child { border-top: none; }
.pick.on { background: var(--surface-3); border-radius: var(--r); }
.pick.done { opacity: .6; }
.ph { width: 3rem; height: 3rem; flex: none; border-radius: .812rem; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.ph.empty { display: grid; place-items: center; font-size: 1.303rem; color: var(--text-3); padding: 0; }
.pick .sku { font-size: 1.013rem; font-weight: 650; overflow-wrap: anywhere; }
.pick .meta { margin-top: .125rem; font-size: .938rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.step { display: flex; align-items: center; gap: .5rem; flex: none; }
.step button {
  width: var(--h-sm); height: var(--h-sm); flex: none; border-radius: .688rem; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 1.194rem; font-weight: 600; color: var(--text);
  transition: transform var(--t);
}
.step button:active { transform: scale(.92); }
.step button:disabled { opacity: .35; }
.step input { width: 3.125rem; height: var(--h-sm); padding: 0 .125rem; text-align: center; border-radius: .688rem; font-size: 1.031rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.boxes { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .375rem; }
.boxes .box { padding: .188rem .562rem; border-radius: 62.438rem; font-size: .9rem; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.boxes .box b { color: var(--text); }
.boxes .box.none { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.boxes .box.kiz { background: var(--surface-3); color: var(--text); border-color: transparent; }
.boxes .box.kiz b { color: inherit; }
.boxes .box.more { color: var(--acc-ink); }
.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: .5rem; margin-top: .375rem; }
.adjust .lock { font-size: .9rem; color: var(--text-2); white-space: nowrap; }
/* «Убрать» и «Привязать» — в рост счётчика рядом, а не узкой меткой: это кнопки */
.adjust .badge { height: var(--h-sm); padding: 0 .75rem; border-radius: .688rem; font-size: .938rem; }

/* Списание со склада из раздела площадки: товар и его короба-кнопки */
.take-g { padding: .688rem .125rem; border-top: 1px solid var(--line); }
.card-title + .take-g { border-top: none; padding-top: .125rem; }
.take-g .nm { font-size: 1.013rem; font-weight: 650; overflow-wrap: anywhere; }
.take-g .hint { margin-top: .125rem; font-size: .938rem; color: var(--text-2); }
.take-g .boxes { margin-top: .5rem; gap: .5rem; }
.take-g button.box { padding: .438rem .75rem; font-size: .956rem; color: var(--text); cursor: pointer; }
.take-g button.box:active { background: var(--surface-3); }
.item.take-pick { background: var(--surface-3); border-radius: var(--r); padding-left: .5rem; padding-right: .5rem; }

.scan-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; }
.scan-row .code, .code { font-family: var(--mono); font-size: .919rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.scan-row .code { margin-top: .188rem; }
.chz { margin-bottom: .875rem; font-size: .975rem; }
.chz .ok   { color: var(--ok-ink); font-weight: 650; }
.chz .warn { color: var(--warn-ink); font-weight: 650; }
.chz .wait { color: var(--text-2); }
.chz .who  { margin-top: .125rem; font-size: .938rem; color: var(--text-2); }

/* ══════════ финансовые отчёты ══════════ */
.fin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.375rem, 1fr)); gap: .625rem; margin-bottom: .625rem; }
.fin-card { min-width: 0; padding: .75rem .812rem; background: var(--surface); border-radius: var(--r-lg);
            border: 1px solid var(--line); box-shadow: var(--sh-1); }
.fin-card span { display: block; font-size: .919rem; color: var(--text-2); }
.fin-card b { display: block; margin-top: .188rem; font-size: 1.14rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
              font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.fin-card.ok b  { color: var(--ok-ink); }
.fin-card.bad b { color: var(--bad-ink); }
.fin-card.acc b { color: var(--text); }
.fin-card.dim b { color: var(--text-3); }
.fin-chart { margin-bottom: .625rem; padding: .875rem .75rem .75rem; background: var(--surface); border-radius: var(--r-lg);
             border: 1px solid var(--line); box-shadow: var(--sh-1); }
.fin-chart .top { display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem; }
.fin-chart .top h3 { flex: 1; min-width: 0; font-size: 1.013rem; font-weight: 650; }
.fin-chart select { max-width: 10rem; padding: .375rem .562rem; border-radius: .625rem; font-size: .938rem; }
.fin-chart .sw { display: flex; align-items: center; gap: .5rem; font-size: .938rem; color: var(--text-2); 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(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.fin-svg .grid.zero { stroke: var(--text-3); stroke-dasharray: none; opacity: .5; }
.fin-svg .ax { fill: var(--text-3); font-size: clamp(10.5px, .83rem, 12px); }
.fin-svg .mark { stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 2 3; }
.fin-svg .cur { stroke: var(--text-3); stroke-width: 1; }
.fin-tip { position: absolute; top: .25rem; z-index: 5; min-width: 10rem; padding: .562rem .688rem; background: var(--surface);
           border: 1px solid var(--line-2); border-radius: .75rem; box-shadow: var(--sh-2); font-size: .919rem; pointer-events: none; }
.fin-tip .tt { margin-bottom: .25rem; font-weight: 700; }
.fin-tip i { display: inline-block; width: .5rem; height: .5rem; margin-right: .375rem; border-radius: 50%; }
.fin-tip b { float: right; margin-left: .75rem; font-variant-numeric: tabular-nums; }
.fin-legend { display: flex; flex-wrap: wrap; gap: .375rem .875rem; margin-top: .5rem; }
.fin-legend .lg { display: inline-flex; align-items: center; gap: .375rem; font-size: .919rem; color: var(--text-2); }
.fin-legend .lg.off { opacity: .4; }
.fin-legend .lg i { display: inline-block; width: 1.125rem; }
.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(--text); text-decoration: underline; text-underline-offset: .188rem; }
.tbl.fin th.lead, .tbl.fin td.lead { position: sticky; left: 0; text-align: left; white-space: normal;
  min-width: 8.75rem; max-width: 17.5rem; background: var(--surface); }
.tbl.fin th.lead { z-index: 3; background: var(--surface-2); cursor: default; }
.tbl.fin td.lead { z-index: 1; box-shadow: 1px 0 0 var(--line-2); }
.tbl.fin td { border-top: 1px solid var(--line); }
.tbl.fin td.b { font-weight: 700; }
.tbl.fin .dim, .tbl.fin td .dim { color: var(--text-3); }
.tbl.fin tr.grp.has { cursor: pointer; }
.tbl.fin tr.kid td { font-size: .938rem; }
.tbl.fin tr.kid td.lead { padding-left: 1.75rem; border-left: .125rem solid var(--line-2); }
.tbl.fin tr.has td.lead { padding-left: 1.5rem; }
.tbl.fin tr.tail td { color: var(--text-2); background: var(--surface-2); }
/* Выделенная строка отчёта (см. .tbl tr.armed): товар или период в первом столбце читаем */
.tbl.fin tr.armed td.lead { color: var(--text); }
.tbl.fin .chev { position: absolute; left: .5rem; top: 50%; color: var(--text-3); transform: translateY(-50%); transition: transform var(--t); }
.tbl.fin .chev.open { transform: translateY(-50%) rotate(90deg); }
.tbl.fin .nm2 { display: block; color: var(--text-2); font-size: .9rem; font-weight: 400; }
.tbl.fin .pill { display: inline-block; padding: .125rem .5rem; border-radius: .438rem; font-size: .9rem; font-weight: 650;
                 background: var(--surface-3); color: var(--text); }

/* ══════════ КИЗы склада ══════════ */
.kiz-bar { display: flex; height: .625rem; margin: .875rem 0 .5rem; border-radius: 62.438rem; overflow: hidden; background: var(--surface-3); }
.kiz-bar i { display: block; height: 100%; min-width: 0; }
.kiz-bar .f, .kiz-legend .f { background: var(--q1); }
.kiz-bar .p, .kiz-legend .p { background: var(--q2); }
.kiz-bar .b, .kiz-legend .b { background: var(--q3); }
.kiz-bar .u, .kiz-legend .u { background: var(--q4); }
.kiz-legend { display: flex; flex-wrap: wrap; gap: .375rem .875rem; font-size: .919rem; color: var(--text-2); }
.kiz-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.kiz-legend i { width: .5rem; height: .5rem; border-radius: .188rem; display: inline-block; }
.drop {
  display: flex; align-items: center; gap: .875rem; width: 100%; padding: 1rem; text-align: left;
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface);
  transition: transform var(--t), border-color var(--t);
}
.drop:active { transform: scale(.985); }
.drop .ico { width: 2.875rem; height: 2.875rem; border-radius: .812rem; display: grid; place-items: center; flex: none; font-size: 1.358rem;
             color: var(--text); background: var(--surface-2); }
.drop b { display: block; font-size: 1.058rem; font-weight: 650; letter-spacing: -.015em; }
.drop span { display: block; margin-top: .125rem; font-size: .938rem; color: var(--text-2); }
.gt { padding: .75rem .125rem; border-top: 1px solid var(--line); width: 100%; text-align: left; display: block; }
.gt:first-child { border-top: none; padding-top: .125rem; }
.gt-top { display: flex; align-items: flex-start; gap: .625rem; }
.gt-nm { flex: 1; min-width: 0; font-size: 1.013rem; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.gt-nm.none { color: var(--text); }
.gt-n { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.gt-n b { display: block; font-size: 1.14rem; font-weight: 700; letter-spacing: -.02em; }
.gt-n span { display: block; font-size: .9rem; color: var(--text-3); }
.gt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .625rem; margin-top: .375rem; font-size: .919rem; color: var(--text-2); }
.gtin { font-family: var(--mono); font-size: .9rem; padding: .125rem .438rem; border-radius: .438rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.gt .kiz-bar { height: .375rem; margin: .5rem 0 0; }

/* ══════════ служебное ══════════ */
.empty { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: 1.875rem 1rem;
         text-align: center; color: var(--text-2); font-size: .994rem; }
.empty > .i:first-child { width: 2.75rem; height: 2.75rem; padding: .688rem; border-radius: .875rem; background: var(--surface-2); color: var(--text-3); }
.err { padding: 1.375rem .875rem; text-align: center; color: var(--bad-ink); font-size: .994rem; }

/* Загрузка: не белая пелена на весь экран, а матовая «таблетка» по центру и полоса сверху */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: transparent; }
#loader::before {
  content: ''; position: fixed; top: 0; left: 0; height: .188rem; width: 40%;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  animation: bar 1s var(--ease) infinite;
}
@keyframes bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
#loader i {
  width: 3.25rem; height: 3.25rem; border-radius: 1.125rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sh-2);
}
#loader i::after {
  content: ''; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  border: .156rem solid var(--surface-3); border-top-color: var(--acc); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed; left: .875rem; right: .875rem; bottom: calc(1.125rem + env(safe-area-inset-bottom, 0)); z-index: 60;
  max-width: 33.75rem; margin: 0 auto; padding: .812rem 1rem; display: flex; align-items: center; gap: .625rem;
  border-radius: var(--r); box-shadow: var(--sh-3);
  background: #10131C; color: #fff; font-size: .994rem; font-weight: 500;
  animation: toast-in .3s var(--ease);
}
:root[data-theme="dark"] #toast { background: #EEF1F7; color: #10131C; }
#toast::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); flex: none; }
#toast.bad::before { background: var(--bad); }
#toast.bad { background: var(--bad-ink); color: #fff; }
@keyframes toast-in { from { transform: translateY(14px); opacity: 0; } }

/* ══════════ задержка кнопок в окнах и окно-уведомление ══════════ */
.btn.cool { opacity: .6; overflow: hidden; pointer-events: none; }
.btn.cool::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .188rem;
  background: currentColor; opacity: .55; transform-origin: left;
  animation: cool var(--cool, 1s) linear forwards;
}
@keyframes cool { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.notice { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: .25rem 0 1.125rem; text-align: center; }
.notice > .i { width: 3rem; height: 3rem; padding: .75rem; border-radius: 1rem; background: var(--surface-2); color: var(--text-2); }
.notice.ok > .i   { background: var(--ok-soft);   color: var(--ok-ink); }
.notice.warn > .i { background: var(--warn-soft); color: var(--warn-ink); }
.notice.bad > .i  { background: var(--bad-soft);  color: var(--bad-ink); }
.notice .sheet-txt { margin: 0; color: var(--text); font-size: 1.031rem; }
.item.warn-item .nm, .item.warn-item .ico { color: var(--bad-ink); }

/* ══════════ таблицы: сортировка и закреплённая шапка ══════════ */
.tbl th.sortable { cursor: pointer; user-select: none; -webkit-user-select: none; }
.tbl th.sortable:active { background: var(--surface-3); }
.tbl th.asc, .tbl th.desc { color: var(--text); }
.tbl th.asc::after, .tbl th.desc::after {
  content: ''; display: inline-block; margin-left: .312rem; vertical-align: .125rem;
  border-left: .25rem solid transparent; border-right: .25rem solid transparent;
}
.tbl th.asc::after  { border-bottom: .312rem solid currentColor; }
.tbl th.desc::after { border-top: .312rem solid currentColor; }
.tbl-float { position: fixed; z-index: 30; overflow: hidden; background: var(--surface-2);
             box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .35); }
.tbl-float[hidden] { display: none; }
.tbl-float table { border-collapse: collapse; }
.tbl-float th { position: static; }
.tbl.fin th.lead.sortable { cursor: pointer; }
.fin-tip .tt2 { margin: .375rem 0 .188rem; padding-top: .375rem; border-top: 1px solid var(--line); font-weight: 650; color: var(--text-2); }
.fin-tip .tg { font-size: .9rem; max-width: 16.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-tip { max-height: 22.5rem; overflow: hidden; }

/* ══════════ FBS поставки ══════════ */
/* Раздел стоит (магазин ещё у MPScan, раздел выключен) — первым делом на экране */
.fbs-banner { padding: .75rem .875rem; font-size: .975rem; font-weight: 600; line-height: 1.35;
              color: var(--warn-ink); background: var(--warn-soft); border-color: transparent; }
.fbs-fresh { margin-top: .625rem; font-size: .938rem; color: var(--text-2); }
.fbs-fresh .bad { color: var(--bad-ink); }
.fbs-fresh + .list { margin-top: .625rem; }
.erp-rows + .chips { margin-top: .625rem; }
.fbs-badges { display: flex; flex-wrap: wrap; gap: .312rem; margin-top: .375rem; }
/* Плитка шага, где ждут действия: цифры подсказки — цветом, как у итогов */
.tile.warn .hint { color: var(--warn-ink); font-weight: 600; }
.tile.bad .hint  { color: var(--bad-ink); font-weight: 600; }
/* Фильтр метками внутри карточки списка */
.fbs-flt { margin-bottom: .5rem; }
.fbs-flt .chip { padding: .375rem .688rem; }
.fbs-flt .chip b { font-weight: 700; }
.fbs-flt + .chip { margin-bottom: .5rem; }   /* «Все сотрудники» в истории — не впритык к списку */
/* Свёрнутые настройки этикетки: строка-заголовок, по нажатию раскрывается */
.fbs-cfg-head { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; color: var(--text); }
.fbs-cfg-head > .i { width: 1.25rem; height: 1.25rem; color: var(--text-2); flex: none; }
.fbs-cfg-head .body { flex: 1; min-width: 0; }
.fbs-cfg-head .nm { display: block; font-size: 1.013rem; font-weight: 650; }
.fbs-cfg-head .hint { display: block; margin-top: 1px; font-size: .938rem; color: var(--text-2); }
.fbs-cfg-head .chev { font-size: .919rem; color: var(--text-3); }
.fbs-cfg.open .fbs-cfg-head { margin-bottom: .75rem; }
.fbs-nav { gap: .375rem; }
.fbs-nav .chip { flex: 1 0 0; justify-content: center; gap: .188rem; padding: .5rem .5rem;
                white-space: nowrap; font-size: .919rem; }
.fbs-nav .chip .i { width: .812rem; height: .812rem; flex: none; }
/* Пять кнопок в ряд на узком телефоне помещаются только подписями */
@media (max-width: 320px) { .fbs-nav .chip .i { display: none; } }
.fbs-grp .pick .meta { white-space: normal; }
.fbs-nav .chip b { font-weight: 700; color: var(--text); }
/* ход задачи (перенос на сборку, отгрузка) */
.fbs-prog { height: .5rem; border-radius: 62.438rem; background: var(--surface-3); overflow: hidden; margin: .25rem 0 .5rem; }
.fbs-prog i { display: block; height: 100%; background: var(--acc); border-radius: inherit; transition: width .4s ease; }
.fbs-jobbar { display: flex; gap: .5rem; align-items: center; width: 100%; padding: .75rem .875rem; text-align: left;
              font-size: .975rem; font-weight: 600; color: var(--text); }
/* группа заданий: справа — бейджи и стрелка, под ней — задания */
.fbs-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .312rem; }
.fbs-right .chev { font-size: .919rem; color: var(--text-3); width: .875rem; text-align: center; }
.fbs-age { font-size: .9rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fbs-grp + .fbs-grp { border-top: 1px solid var(--line); }
.fbs-grp .pick { border-top: none; cursor: pointer; }
.fbs-mono { font-family: var(--mono, ui-monospace, monospace); font-size: .938rem; overflow-wrap: anywhere; }
.fbs-dim { opacity: .55; }
/* сканер привязки: карточка внизу поверх камеры (тёмное стекло) — три шага,
   что сканировать сейчас и общий счёт */
.fbs-flow { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
.fbs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fbs-step { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; padding: .625rem .375rem .5rem;
            border-radius: 1rem; background: rgba(255,255,255,.08); color: rgba(255,255,255,.62);
            text-align: center; transition: background var(--t), color var(--t); }
.fbs-step b { width: 1.625rem; height: 1.625rem; display: grid; place-items: center; border-radius: 50%;
              background: rgba(255,255,255,.14); font-size: .956rem; font-weight: 700; }
.fbs-step span { font-size: .956rem; font-weight: 650; }
.fbs-step i { max-width: 100%; font-style: normal; font-size: .9rem; opacity: .85;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbs-step.on { background: #fff; color: #111; }
.fbs-step.on b { background: #111; color: #fff; }
.fbs-step.run { background: rgba(255,255,255,.55); color: #111; }
.fbs-step.run b { background: rgba(17,17,17,.75); color: #fff; animation: fbs-pulse 1s ease-in-out infinite; }
.fbs-step.ok { background: rgba(46,160,90,.88); color: #fff; }
.fbs-step.ok b { background: rgba(255,255,255,.22); }
.fbs-step.bad { background: rgba(200,60,50,.92); color: #fff; }
@keyframes fbs-pulse { 50% { opacity: .45; } }
.fbs-say { display: flex; flex-direction: column; align-items: center; gap: .125rem; text-align: center;
           font-size: 1.031rem; font-weight: 650; line-height: 1.3; }
.fbs-say small { font-size: .919rem; font-weight: 500; opacity: .65; }
.fbs-flow-foot { display: flex; align-items: center; gap: .625rem; font-size: .956rem; font-variant-numeric: tabular-nums; }
.fbs-prog { flex: 1; height: .375rem; border-radius: .188rem; background: rgba(255,255,255,.16); overflow: hidden; }
.fbs-prog i { display: block; height: 100%; border-radius: .188rem; background: #3ecf7b; transition: width .3s ease; }
.fbs-reset { padding: .375rem .688rem; border: none; border-radius: 62.438rem; background: rgba(255,255,255,.14);
             color: #fff; font: inherit; font-size: .938rem; font-weight: 600; cursor: pointer; }
.fbs-log { font-size: .919rem; opacity: .7; line-height: 1.4; text-align: center; }
.fbs-flow-meta { font-size: .938rem; opacity: .85; }
.fbs-confirm { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .875rem; }
.fbs-confirm .fbs-flow-meta { opacity: 1; color: var(--text-2); }
#kizchk { display: flex; flex-wrap: wrap; gap: .375rem; }
.fbs-right.fbs-col { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }
.pick .meta.fbs-wrap { white-space: normal; }

/* ══════════ производство (ERP склада) ══════════ */
.erp-find { padding: .5rem; margin-bottom: .75rem; }
.erp-find + .card { margin-top: 0; }
.erp-form .field:last-child { margin-bottom: 0; }
.erp-pick { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; cursor: pointer; color: var(--text); }
.erp-pick span:first-child { min-width: 0; overflow-wrap: anywhere; }
.erp-pick i { font-style: normal; color: var(--text-3); }
.erp-pick .go { flex: none; color: var(--text-3); }
.erp-note { display: block; margin-top: .312rem; font-size: .938rem; line-height: 1.35; font-weight: 400; color: var(--text-3); }
.field > span.erp-note { margin-bottom: 0; font-size: .938rem; font-weight: 400; color: var(--text-3); }
.erp-check { padding-left: 0; padding-right: 0; }
.erp-upload { margin-top: .5rem; }
.erp-hist { font-weight: 450; white-space: normal; }
.erp-rows { display: flex; flex-direction: column; gap: .625rem; }
.erp-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; padding: .625rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.erp-line .field { margin-bottom: 0; }
.erp-line-x { min-height: var(--h); }
.erp-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .625rem; }
.erp-2 .field { margin-bottom: 0; }
.erp-comp { grid-template-columns: 4.5rem minmax(0, 1fr); }
.erp-excel { margin: .625rem 0 .75rem; }
.erp-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.erp-sub { margin: -.375rem .125rem .625rem; }
.erp-size-row { grid-template-columns: minmax(0, 1fr) 6rem; align-items: center; }
.erp-size-row .hint { display: block; font-weight: 400; }
.erp-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.erp-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .625rem; align-items: center; }
.erp-pay-open { display: block; min-width: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
.erp-pay-open .body { display: block; }
.erp-pay-open .nm, .erp-pay-open .hint { display: block; }
.erp-pay-side { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; font-variant-numeric: tabular-nums; }
.erp-pay-side .btn { min-height: var(--h-sm); padding: .375rem .625rem; font-size: .956rem; width: auto; }
.erp-sel-row { display: flex; align-items: center; gap: .5rem; }
.erp-sel-row > .item { flex: 1; min-width: 0; }
.erp-choose { flex: none; }
.erp-sum { display: flex; justify-content: space-between; gap: .75rem; padding: .625rem .125rem 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.erp-sizes { display: flex; flex-wrap: wrap; gap: .25rem .375rem; margin-top: .25rem; }
.erp-size { font-size: .938rem; padding: 1px .438rem; border-radius: 62.438rem; background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; }
.erp-thumb { width: 3rem; height: 3rem; flex: none; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-2); margin-right: .625rem; }
.erp-photos { display: flex; gap: .5rem; padding-bottom: .125rem; }
.erp-photo { position: relative; flex: none; width: 7rem; }
.erp-photo img { display: block; width: 7rem; height: 8.75rem; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.erp-photo button { display: block; width: 100%; margin-top: .25rem; font-size: .938rem; color: var(--text-2); background: none; border: 0; padding: .25rem 0; }
.erp-bar { display: flex; height: .5rem; border-radius: 62.438rem; overflow: hidden; background: var(--q4); }
.erp-bar i { display: block; background: var(--q1); }
.erp-bar i.warn { background: var(--warn); }
.erp-bar i.bad { background: var(--bad); }
.erp-bar i.mid { background: var(--q2); }

/* ══════════ строки, которым тесно ══════════ */
/* Вкладки, фильтры и переключатели не переносятся: лишнее едет по X, страница стоит.
   На телефоне — пальцем, с мышью — колесом, перетаскиванием и за тонкую полосу (core.js, strip) */
.erp-tabs, .cyc-chips, .fbs-flt, .fbs-nav, .seg, .erp-photos {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  user-select: none; -webkit-user-select: none;
}
.erp-tabs > *, .cyc-chips > *, .fbs-flt > *, .erp-photos > * { flex: none; }
.seg button { flex: 1 0 0; white-space: nowrap; }
.erp-tabs::-webkit-scrollbar, .cyc-chips::-webkit-scrollbar, .fbs-flt::-webkit-scrollbar,
.fbs-nav::-webkit-scrollbar, .seg::-webkit-scrollbar, .erp-photos::-webkit-scrollbar { height: 6px; }
.erp-tabs::-webkit-scrollbar-thumb, .cyc-chips::-webkit-scrollbar-thumb, .fbs-flt::-webkit-scrollbar-thumb,
.fbs-nav::-webkit-scrollbar-thumb, .seg::-webkit-scrollbar-thumb, .erp-photos::-webkit-scrollbar-thumb { border-width: 1px; min-width: 24px; }
@media (pointer: coarse) {
  .erp-tabs::-webkit-scrollbar, .cyc-chips::-webkit-scrollbar, .fbs-flt::-webkit-scrollbar,
  .fbs-nav::-webkit-scrollbar, .seg::-webkit-scrollbar, .erp-photos::-webkit-scrollbar { display: none; }
}