/* Мини-приложение «ИНГ-СЕРВИС · 1С». Всегда тёмная графитовая тема (этап 1 редизайна, 03.11.2026) — не зависит от темы
   Telegram, чтобы магазин выглядел одинаково у всех. Все цвета, размеры и отступы — только через токены ниже. */

:root {
  color-scheme: dark;

  /* поверхности: фон → карточка → поле/вложенный блок */
  --bg: #121418;
  --surface: #1b1e24;
  --surface-2: #242830;
  --surface-3: #2d323b;
  --line: rgba(255, 255, 255, 0.07);       /* тонкие границы и разделители */
  --line-strong: rgba(255, 255, 255, 0.12);

  /* текст */
  --text: #eceef2;
  --text-2: #a4abb7;                          /* второстепенный, читаемый (контраст ≥ 4.5 на карточке) */
  --text-3: #8d94a0;                          /* третий уровень: подписи у иконок, неактивные вкладки (контраст ≥ 5) */
  --hint: var(--text-2);

  /* один акцент — мягкий синий: основные действия и выбранное */
  --accent: #4f8ef7;
  --accent-hover: #6a9ff8;
  --accent-press: #3f7be0;
  --accent-text: #ffffff;
  --accent-soft: rgba(79, 142, 247, 0.14);
  --link: #7aaaf9;

  /* состояния */
  --good: #3cc47a;                            /* в наличии, успех */
  --good-soft: rgba(60, 196, 122, 0.14);
  --danger: #f2626a;
  --danger-soft: rgba(242, 98, 106, 0.14);
  --warn: #f2a93b;
  --warn-soft: rgba(242, 169, 59, 0.15);

  /* старые имена — на новые токены */
  --soft: var(--accent-soft);
  --muted-fill: var(--surface-2);

  /* текст: размеры */
  /* иерархия: заголовок экрана 22 · заголовок товара 20 · раздел 17 · название/цена в списке 15–17 · текст 16 ·
     пояснение 14 · подпись 13 · мельче 12 нет нигде */
  --fs-xs: 12px; --fs-sm: 13px; --fs-hint: 14px; --fs-md: 15px; --fs-base: 16px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 22px; --fs-num: 36px;
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;
  --lh-tight: 1.22; --lh: 1.4;

  /* отступы: 4 / 8 / 12 / 16 / 24 / 32 (+20 там, где 16 мало, а 24 много) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* радиусы */
  --r-card: 16px; --r-ctl: 12px; --r-sm: 10px; --r-pill: 999px;

  /* иконки */
  --ico-sm: 16px; --ico-md: 20px; --ico-lg: 24px;

  /* кнопки */
  --btn-h: 46px; --btn-h-sm: 34px; --btn-h-lg: 52px;
  --disabled: 0.45;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);  /* только для плавающих панелей */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tabs-h: 64px;
  --safe-b: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --safe-t: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --nav-gap: 12px;                            /* зазор между последним элементом и нижней панелью */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-base)/1.4 var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: var(--tg-viewport-stable-height, 100vh); padding-top: var(--safe-t);
  padding-bottom: calc(10px + var(--tabs-h) + var(--safe-b) + var(--nav-gap)); overscroll-behavior-y: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
svg { width: var(--ico-md); height: var(--ico-md); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- шапка ---------- */
.top { position: sticky; top: var(--safe-t); z-index: 5; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s2); background: var(--bg); }
.top h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-back { width: 36px; height: 36px; margin-left: -8px; display: grid; place-items: center; border-radius: 50%; color: var(--link); }
.top-back:active { background: var(--muted-fill); }
.top-back[hidden], [hidden] { display: none !important; }
.tg .top-back { display: none; } /* в Telegram — его собственная кнопка «Назад» */

/* Единый вертикальный ритм: между любыми соседними блоками экрана — 12 px (var(--s3)), в том числе
   внутри контейнеров, которые экраны заполняют сами (результаты поиска, списки). Пустые контейнеры не дают лишнего шага. */
main, .stack, #res, #lst, #items, #sres { display: flex; flex-direction: column; gap: var(--s3); }
main { padding: 0 var(--s4); }
main > :empty, .stack > :empty, #res > :empty, #lst > :empty, #items:empty { display: none; }

/* строка фильтра: переключатель и счётчик на одной средней линии */
.filter-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.filter-row .hint { font-variant-numeric: tabular-nums; }

/* ---------- блоки ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); }
.card.flush { padding: var(--s1) 0; }
.card h2 { margin: 0 0 var(--s3); font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.card.flush h2 { margin: var(--s3) var(--s4) var(--s1); }
.hint { color: var(--text-2); font-size: var(--fs-hint); line-height: 1.45; }
.empty { color: var(--hint); text-align: center; padding: var(--s6) var(--s4); }

/* крупная цифра — главный акцент экрана */
.big { font-size: var(--fs-num); line-height: 1.05; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.big small { font-size: 20px; font-weight: 600; color: var(--hint); letter-spacing: 0; margin-left: 4px; }
.big.bad { color: var(--danger); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); font-size: 14px; color: var(--hint); }
.stat-row b { color: var(--text); font-weight: 600; }
.delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.delta.up { color: var(--good); background: var(--good-soft); }
.delta.down { color: var(--danger); background: var(--danger-soft); }

/* ---------- строки списков ---------- */
.row { width: 100%; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); text-align: left; position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; border-top: 1px solid var(--line); }
/* у строк с иконкой разделитель начинается от текста, а не от края — как в списках iOS */
.row.with-ico + .row.with-ico::before { left: calc(var(--s4) + 36px + var(--s3)); }
button.row:active { background: var(--muted-fill); }
.row .main { flex: 1; min-width: 0; }
.row .name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.row .sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.row .end { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; white-space: nowrap; }
.row .end .sub { font-weight: 400; }
.per { font-weight: 400; color: var(--hint); font-size: 0.8em; }
.big .per { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.row .chev { color: var(--text-3); width: var(--ico-sm); height: var(--ico-sm); }
.row .ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--soft); color: var(--accent); flex: none; }
.row .ico svg { width: 20px; height: 20px; }
.out { color: var(--hint); font-weight: 500; }
.pill { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.pill.ok { background: var(--good-soft); color: var(--good); }

/* полоска «остаток против продаж» */
.meter { height: 4px; border-radius: 4px; background: var(--muted-fill); margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--danger); border-radius: 4px; }

/* ---------- поиск, чипы, переключатели ---------- */
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: var(--ico-md); height: var(--ico-md); }
.search input { width: 100%; height: 48px; border: 1px solid var(--line); outline: 0; border-radius: var(--r-ctl); padding: 0 var(--s4) 0 44px;
  background: var(--surface); font-size: var(--fs-base); }
.search input:focus { border-color: var(--accent); }
.search input::placeholder { color: var(--text-3); }

.chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.chip svg { width: 16px; height: 16px; stroke-width: 2.2; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.seg { display: flex; padding: 3px; gap: 3px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.seg button { flex: 1; height: 38px; border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.seg button.on { background: var(--surface-3); color: var(--text); }

.crumbs { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: var(--fs-hint); color: var(--text-2); }
.crumbs button { color: var(--link); }

/* Период «с … по …»: две равные колонки с подписями. В Safari у поля даты своя минимальная ширина — гасим её
   (appearance: none, min-width: 0), иначе правое поле вылезает за край карточки. */
.dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); margin-top: var(--s3); }
.dates label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); }
.dates input { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
  height: 42px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text);
  padding: 0 10px; font: 500 15px/42px var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.dates input::-webkit-date-and-time-value { text-align: center; margin: 0; }
.dates input::-webkit-calendar-picker-indicator { opacity: 0.5; margin-left: 2px; }
/* чипы внутри карточки — на подложке, иначе сливаются с фоном карточки */
.card .chip { background: var(--surface-2); border-color: transparent; }
.card .chip.on { background: var(--accent); color: var(--accent-text); }

.btn { height: var(--btn-h); padding: 0 var(--s5); border-radius: var(--r-ctl); background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: var(--fs-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); transition: background-color .15s; }
.btn svg { width: var(--ico-md); height: var(--ico-md); }
.btn:active { background: var(--accent-press); }
@media (hover: hover) { .btn:hover { background: var(--accent-hover); } .btn.ghost:hover { background: rgba(79, 142, 247, 0.2); } }
.btn:disabled, .add:disabled { opacity: var(--disabled); pointer-events: none; }
.btn.ghost { background: var(--accent-soft); color: var(--link); }
.btn.ghost:active { background: rgba(79, 142, 247, 0.24); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 0; box-shadow: var(--focus); }
.btn.danger-solid { background: var(--danger); color: #fff; }
.hint.warn { color: var(--danger); }
.btn.small { height: var(--btn-h-sm); padding: 0 var(--s3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn.wide { width: 100%; }
.actions { display: flex; gap: var(--s2); }

/* ---------- товар ---------- */
.photo { border-radius: var(--r-card); overflow: hidden; background: #fff; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.photo img { width: 100%; height: 100%; object-fit: contain; }
.title { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.28; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.price { background: var(--surface-2); border-radius: var(--r-ctl); padding: var(--s3); }
.price .t { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.price .t svg { width: 14px; height: 14px; }
.price .v { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.price.private { background: var(--warn-soft); }

/* ---------- график ---------- */
.chart { margin-top: var(--s2); }
.chart svg { width: 100%; height: auto; display: block; stroke: none; }
.chart .bar { fill: var(--accent); }
.chart .bar.hi { fill: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.chart .bar.prev { fill: color-mix(in srgb, var(--text) 12%, transparent); }
.chart .bar.sel { fill: color-mix(in srgb, var(--accent) 55%, var(--text)); }
.chart .lbl { fill: var(--text-2); font-size: 11px; font-family: var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart-cap { min-height: 20px; font-size: 13px; color: var(--hint); }
.chart-cap b { color: var(--text); font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: var(--s4); font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--accent); }
.legend i.prev { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* ---------- нижняя панель ---------- */
.tabs { position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 10; height: var(--tabs-h);
  display: flex; justify-content: space-around; align-items: center; padding: 0 6px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.tabs button { flex: 1; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 16px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); }
.tabs button.on { color: var(--link); background: rgba(79, 142, 247, 0.18); }
.tabs button.on svg { stroke-width: 2.2; }
.tabs button.on span:last-child { font-weight: var(--fw-bold); }
.tabs button:active { background: var(--surface-2); }
.tabs button .dot { position: absolute; margin: -16px 0 0 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---------- нижний лист (поиск клиента для монтажников) ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.55); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 82vh; overflow: auto; background: var(--bg);
  border-radius: 22px 22px 0 0; padding: var(--s4) var(--s4) calc(var(--s6) + var(--safe-b)); display: flex; flex-direction: column; gap: var(--s3); }
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto var(--s1); }

/* ---------- магазин ---------- */
.tabs button { position: relative; }
.tabs .badge { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: var(--fs-xs); line-height: 18px; font-weight: 700; }
.shop-row { align-items: flex-start; cursor: pointer; }
.shop-row:active { background: var(--muted-fill); }
.row-cart { margin-top: 8px; }
.row .sub.ok-text, .ok-text { color: var(--good); }
.stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: var(--r-ctl); background: var(--accent-soft); }
.stepper button { width: 38px; height: 34px; display: grid; place-items: center; color: var(--link); border-radius: var(--r-ctl); }
.stepper button:active { background: rgba(79, 142, 247, 0.24); }
.stepper svg { width: var(--ico-sm); height: var(--ico-sm); }
.stepper span { min-width: 30px; text-align: center; font-weight: 700; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.buy .stepper button { width: 46px; height: 44px; }
.buy .btn.small, .buy > .btn { height: 44px; }
.empty-state { text-align: center; padding: var(--s8) var(--s4); }
.empty-state .btn { margin-top: var(--s2); }
.success { background: var(--surface); border-color: rgba(60, 196, 122, 0.35); }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }
.st-new { color: var(--danger); font-weight: 600; }
details { margin-top: var(--s2); }
details summary { cursor: pointer; color: var(--link); font-size: 14px; padding: 4px 0; }
details .card.flush { padding: 0; background: transparent; }
.card > .btn.small { margin-top: var(--s3); }
.link { color: var(--link); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link svg { width: 16px; height: 16px; }

/* ---------- витрина магазина ---------- */
.hero { position: relative; border-radius: var(--r-card); padding: var(--s5) var(--s4); background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); }
.hero-t { position: relative; font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; max-width: 80%; }
.hero-s { position: relative; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-2); max-width: 92%; }
.hero-s b { color: var(--text); }

.tiles { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4);
  scroll-snap-type: x proximity; scroll-padding-inline: var(--s4); }
.tiles::-webkit-scrollbar { display: none; }
.tile { flex: none; width: 104px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s3) var(--s1) var(--s2);
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); scroll-snap-align: start; text-align: center; }
.tile:active { transform: scale(0.97); }
.tile-ico { width: 48px; height: 48px; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--soft); color: var(--accent); }
.tile-ico svg { width: 26px; height: 26px; }
.tile-name { max-width: 100%; font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.44em; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
.tile-n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.sec-title { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s1) var(--s1) 0; }
.sec-title h2 { margin: 0; font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.01em; }

.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 560px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: var(--s2) var(--s2) var(--s3); border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.pcard:active { transform: scale(0.985); }
.pimg { position: relative; aspect-ratio: 1; border-radius: var(--r-ctl); overflow: hidden; background: #fff; margin-bottom: 2px; }
.pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); background: var(--surface-2); }
.noimg svg { width: 42%; height: 42%; stroke-width: 1.3; }
.badge-disc { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--danger); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; }
.pname { padding: 0 var(--s1); font-size: var(--fs-hint); line-height: 1.3; min-height: 3.9em; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--text); }
.pstock { padding: 0 var(--s1); font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.pstock i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.pstock.on { color: var(--good); }
.pstock.on i { background: var(--good); }
.pfoot { margin-top: auto; padding: 2px var(--s1) 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.pprice { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; min-width: 0; line-height: 1.15; }
.pprice .per { font-size: 12px; }
.pprice s { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
.add { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); }
.add svg { width: 20px; height: 20px; stroke-width: 2.2; }
.add:active { background: var(--accent-press); }
.stepper.mini { flex: none; }
.stepper.mini button { width: 30px; height: 32px; }
.stepper.mini span { min-width: 20px; font-size: 14px; }

.photo .noimg.big-ico svg { width: 30%; height: 30%; }
.photo { position: relative; }

/* плавающая панель корзины над вкладками */
.cartbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b) + var(--tabs-h) + 8px); z-index: 9;
  height: 52px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); border-radius: var(--r-card);
  background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow); }
.cartbar:active { background: var(--accent-press); }
.cartbar svg { width: 20px; height: 20px; }
.cartbar .cb-text { flex: 1; text-align: left; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartbar .cb-go { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 15px; }
.cartbar .cb-go svg { width: 18px; height: 18px; }
body.has-cartbar { padding-bottom: calc(10px + var(--tabs-h) + var(--safe-b) + 8px + 52px + var(--nav-gap)); }
/* клавиатура открыта — нижние панели не закрывают поле ввода */
body.kb .tabs, body.kb .cartbar { display: none; }
body.kb, body.kb.has-cartbar { padding-bottom: var(--s6); }
@media (min-width: 700px) { .cartbar { max-width: 620px; margin: 0 auto; } }

/* корзина и заказы */
.cart-line { align-items: flex-start; }
.cthumb { width: 56px; height: 56px; flex: none; border-radius: var(--r-ctl); background: var(--surface-2); overflow: hidden; }
.cthumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.total-card .big { margin-top: 2px; }
.big-btn { height: var(--btn-h-lg); font-size: var(--fs-base); border-radius: var(--r-ctl); }
.opt { color: var(--hint); font-weight: 400; }
.field-hint { font-size: var(--fs-sm); color: var(--text-2); }
.form select { height: 44px; border: 1px solid var(--line); outline: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text);
  padding: 0 12px; font: 16px var(--font); width: 100%; min-width: 0; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%), linear-gradient(135deg, var(--hint) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: var(--s3); }
.steps span { font-size: var(--fs-xs); color: var(--text-3); padding-top: 8px; border-top: 3px solid var(--surface-3); text-align: center; }
.steps span.on { color: var(--text); border-top-color: var(--accent); font-weight: 600; }
.order .hint { margin-top: 4px; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: 15px; }
.order .btn.small { margin-top: var(--s3); }
.empty-ico { width: 64px; height: 64px; margin: 0 auto var(--s3); border-radius: var(--r-card); display: grid; place-items: center; background: var(--soft); color: var(--accent); }
.empty-ico svg { width: 30px; height: 30px; }
.empty-state .title { margin-bottom: 4px; }

/* ---------- избранное, распродажа, кабинет монтажника ---------- */
.fav { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(18, 20, 24, 0.72); color: var(--text-2); border: 1px solid var(--line-strong); }
.fav.on { color: var(--danger); }
.fav.on svg { fill: currentColor; }
.badge-disc.sale { background: var(--warn); color: #1b1e24; }
.link-btn { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-size: var(--fs-sm); font-weight: 600; }
.link-btn svg { width: 16px; height: 16px; }
.order-actions { margin-top: var(--s3); }
.order-actions .btn.small { margin-top: 0; }
.aging { display: flex; gap: 4px; margin-top: var(--s3); min-width: 0; }
.aging { flex-wrap: wrap; }
.aging .ag { flex: 1 1 76px; overflow-wrap: anywhere; }
.kit-result { display: flex; flex-direction: column; gap: var(--s3); }
.kit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.kit-cta { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.kit-cta > svg { width: 28px; height: 28px; flex: none; }
.kit-cta > span { flex: 1; min-width: 0; }
.kit-cta small { display: block; color: var(--hint); margin-top: 4px; }
.sale-stock-row > .btn { margin: 0 var(--s3) var(--s3); }
.debt-detail .row { padding: 0; }
#kitForm > .btn, #saleForm > .btn, #digestNow { margin-top: var(--s3); }
.ag { min-width: 64px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); }
.ag b { color: var(--text); font-size: 14px; }
.ag.warn { background: var(--warn-soft); }
.ag.bad { background: var(--danger-soft); }
.recon { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s3); }
.recon div { display: flex; justify-content: space-between; gap: var(--s3); font-size: 15px; }
.recon span { color: var(--hint); }
.recon .total { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; }
.recon .total span { color: var(--text); }

/* ---------- отчёты администратора ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); min-width: 0; }
.kpi .t { font-size: var(--fs-sm); color: var(--text-2); }
.kpi .v { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.kpi.good .v { color: var(--good); }
.kpi.bad .v { color: var(--danger); }
.bad-text { color: var(--danger); }
.place { width: 32px; flex: none; text-align: center; font-size: 20px; line-height: 1; }
.rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px;
  background: var(--muted-fill); color: var(--hint); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row .sub .pill { margin-left: 4px; vertical-align: 1px; }
.card .card.flush.inner { background: var(--surface-2); border: 0; margin: 0 0 var(--s3); border-radius: var(--r-ctl); }
.card .card.flush.inner .row { padding-left: var(--s3); padding-right: var(--s3); }

/* ---------- формы ---------- */
.form label, label.form { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s3); }
.form h2 + label { margin-top: 0; }
.form input, .form textarea, label.form input { height: 44px; border: 1px solid var(--line); outline: 0; border-radius: var(--r-ctl); background: var(--surface-2);
  padding: 0 12px; font-size: var(--fs-base); color: var(--text); width: 100%; min-width: 0; }
.form textarea { height: auto; padding: 10px 12px; resize: vertical; font-family: inherit; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); box-shadow: none; }
.form input::placeholder, .form textarea::placeholder { color: var(--text-3); }
.with-btn { display: flex; gap: var(--s2); }
.with-btn .btn { flex: none; height: 44px; }
.inv-line { align-items: flex-start; }
.inv-inputs { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: var(--s2); margin-top: 8px; align-items: end; }
.inv-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hint); }
.inv-inputs input { height: 40px; border: 0; border-radius: 10px; background: var(--muted-fill); padding: 0 10px; font-size: 16px; width: 100%; min-width: 0; color: var(--text); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--danger); background: var(--danger-soft); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- загрузка и ошибки ---------- */
.invoice-editor { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.invoice-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.invoice-actions .btn { flex: 1 1 130px; }
.invoice-line-head { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; }
.invoice-line-head h2 { margin: 0; }
.invoice-line-head .icon-btn { flex: none; }
.invoice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.invoice-fields label { margin-top: var(--s3); min-width: 0; }
.invoice-line-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); font-size: 14px; }
.invoice-pick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.invoice-editor .recon div { flex-wrap: wrap; }
.invoice-editor .recon b { margin-left: auto; }
.invoice-line input[readonly] { color: var(--hint); }
.invoice-detail-row .name, .invoice-pick-row .name { display: block; overflow: visible; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
.invoice-editor textarea { box-sizing: border-box; }
.skel { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); height: 120px; position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 5%, transparent), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.error { border-radius: var(--r-card); background: var(--surface); border: 1px solid rgba(242, 98, 106, 0.35); padding: var(--s4); color: var(--text); }
.error p { margin: 0 0 var(--s3); }

@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
@media (min-width: 700px) { main, .top { max-width: 640px; margin: 0 auto; } .tabs { max-width: 620px; margin: 0 auto; } }
/* упрощённая строка накладной: количество кнопками, цена, сумма — в одну строку */
.invoice-line-head > input { flex: 1; min-width: 0; }
.invoice-line-head .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.invoice-quick { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.invoice-quick .stepper input { width: 56px; height: 34px; box-shadow: none; text-align: center; font-weight: 700; padding: 6px 2px; margin: 0; border: 0; background: transparent; }
.invoice-quick input.price { width: 110px; margin: 0; }
.invoice-quick .sum { margin-left: auto; white-space: nowrap; }
.invoice-line details summary { font-size: 13px; }
.invoice-editor details.card > summary { font-weight: 600; color: var(--text); font-size: 15px; }
.invoice-editor details.card .form label:first-child { margin-top: var(--s2); }
.invoice-actions .btn:first-child { flex-basis: 100%; }
.invoice-actions .btn:not(:first-child) { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: 14px; white-space: nowrap; gap: 4px; }

/* этап 2: цифры в ценах и суммах — моноширинные, чтобы столбцы не прыгали */
.pprice, .big, .row .end, .price .v, .kpi .v, .recon b, .sum { font-variant-numeric: tabular-nums; }
.pcard .pprice { color: var(--text); }

/* ---------- этап 3: главная магазина ---------- */
/* на главной нет шапки (название магазина уже в шапке Telegram) — сверху закреплённый поиск */
body.home .top { display: none; }
body.home main { padding-top: var(--s2); }
body.home .search { position: sticky; top: var(--safe-t); z-index: 4; margin: calc(-1 * var(--s2)) calc(-1 * var(--s4)) 0;
  padding: var(--s2) var(--s4); background: var(--bg); }
body.home .search svg { left: calc(var(--s4) + 14px); }
.home-note { margin: 0 var(--s1); }

/* короткий блок помощи с подбором — одна строка */
.kit-cta { padding: var(--s3) var(--s4); gap: var(--s3); }
.kit-cta b { font-size: var(--fs-md); }
.kit-cta small { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); }
.kit-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--link); }
.kit-cta > .chev { color: var(--text-3); width: var(--ico-sm); height: var(--ico-sm); }

/* главные разделы: 2 × 2, иконка и название в строку — названия целиком, без переносов */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cat { display: flex; align-items: center; gap: var(--s3); min-width: 0; height: 56px; padding: 0 var(--s3); border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); text-align: left; }
.cat:active { background: var(--surface-2); }
.cat-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--link); }
.cat-ico svg { width: var(--ico-md); height: var(--ico-md); }
.cat-name { min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.all-cats { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.all-cats .ico { width: 34px; height: 34px; }
.kit-cta > .kit-ico { flex: none; }
.cat { gap: 10px; padding: 0 10px; }
.cat-name { font-size: var(--fs-hint); }

/* ---------- этап 4: профиль ---------- */
.profile-head { display: flex; align-items: center; gap: var(--s3); }
.profile-head .main { min-width: 0; }
.profile-head .meta { align-items: center; }
.avatar { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft);
  color: var(--link); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
a.row { color: inherit; text-decoration: none; }
a.row:active { background: var(--surface-2); }

/* подбор комплекта: правка состава */
.kit-edit { display: flex; flex-direction: column; }
.kit-line { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.kit-edit h2 + .kit-line, .kit-edit h2 + p { border-top: 0; padding-top: 0; }
.kit-line .main { min-width: 0; flex: 1; }
.kit-line .name { font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.kit-line .sub { font-size: var(--fs-sm); color: var(--text-2); }
.kit-line .invoice-line-head > input { height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); padding: 0 12px; color: var(--text); font-size: var(--fs-base); }
.kit-line input.price { height: 40px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); padding: 0 10px; color: var(--text); font-size: var(--fs-base); }
.kit-swap { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.kit-swap select { height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text); padding: 0 10px; font: var(--fs-hint) var(--font); width: 100%; min-width: 0; }

/* Накладные: спокойные карточки, подписанные поля и доступное основное действие. */
.invoice-intro { display: flex; flex-direction: column; gap: var(--s2); }
.invoice-intro-head, .invoice-section-title { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.invoice-intro p { margin: 0; }
.invoice-section-title h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.invoice-edit-fields { padding: 0; margin: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.invoice-edit-fields:disabled { opacity: var(--disabled); }
.invoice-add-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.invoice-add-actions .btn { min-width: 0; padding-inline: var(--s2); font-size: var(--fs-md); }
.invoice-editor .invoice-line { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); }
.invoice-line-caption { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.invoice-number { display: grid; place-items: center; min-width: 28px; height: 28px; background: var(--surface-3); color: var(--text); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.invoice-line .icon-btn { width: 44px; height: 44px; background: transparent; color: var(--text-3); }
.invoice-line .icon-btn:active { color: var(--danger); background: var(--danger-soft); }
.invoice-name { font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh); overflow-wrap: anywhere; }
.invoice-line-controls { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s3); }
.invoice-editor .invoice-line label { margin: 0; min-width: 0; }
.invoice-line-controls .stepper { width: 100%; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.invoice-line-controls .stepper button { width: 36px; height: 44px; flex: none; }
.invoice-line-controls .stepper input { width: 0; flex: 1; min-width: 0; padding: 0; text-align: center; border: 0; background: transparent; border-radius: 0; }
.invoice-line-controls > label > input { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-line-amount { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.invoice-line-amount span { font-size: var(--fs-sm); color: var(--text-2); }
.invoice-line-amount b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.invoice-line details { border-top: 1px solid var(--line); padding-top: var(--s3); }
.invoice-line details summary { color: var(--text-2); cursor: pointer; font-size: var(--fs-hint); }
.invoice-line details .invoice-fields { padding-top: var(--s3); }
.invoice-line-actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s3); }
.invoice-line-actions .btn { font-size: var(--fs-sm); min-height: 40px; }
.invoice-extra > summary { cursor: pointer; display: list-item; font-size: var(--fs-md); }
.invoice-extra > summary .hint { display: block; font-weight: var(--fw-regular); }
.invoice-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--s2) var(--s3); background: var(--surface-2); font-size: var(--fs-hint); }
.invoice-savebar { position: sticky; bottom: calc(10px + var(--tabs-h) + var(--safe-b) + var(--nav-gap)); z-index: 6; display: flex; flex-direction: column; gap: var(--s3); border-color: var(--line-strong); box-shadow: var(--shadow); }
.invoice-savebar > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.invoice-savebar b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.invoice-savebar .btn { width: 100%; min-height: var(--btn-h-lg); }
body.kb .invoice-savebar { position: static; box-shadow: none; }
.invoice-editor input[aria-invalid="true"] { border-color: var(--danger); }
.invoice-editor input, .invoice-editor textarea { scroll-margin-block: var(--s8); }
.invoice-list-tools { display: flex; flex-direction: column; gap: var(--s3); }
.invoice-list-tools .hint { margin: 0; }
.invoice-pick-footer { position: sticky; bottom: calc(10px + var(--tabs-h) + var(--safe-b) + var(--nav-gap)); z-index: 6; box-shadow: var(--shadow); }
body.kb .invoice-pick-footer { position: static; box-shadow: none; }

.invoice-savebar .invoice-undo .btn { width: auto; min-height: var(--btn-h-sm); }