/* icubix — design system. Token-driven: every value comes from a scale below.
   Visual language: rounded, geometric, monochrome — matched to the logo. */

/* Onest — self-hosted (woff2), чтобы текст не прыгал при переходах: шрифт с того же домена,
   не зависит от Google Fonts (в РФ часто тормозит/режется). Подсеты грузятся по unicode-range. */
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/static/fonts/onest-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/static/fonts/onest-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/static/fonts/onest-400-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/static/fonts/onest-400-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/static/fonts/onest-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/static/fonts/onest-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/static/fonts/onest-500-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/static/fonts/onest-500-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/static/fonts/onest-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/static/fonts/onest-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/static/fonts/onest-600-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/static/fonts/onest-600-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/static/fonts/onest-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/static/fonts/onest-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/static/fonts/onest-700-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/static/fonts/onest-700-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap;
  src:url(/static/fonts/onest-800-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap;
  src:url(/static/fonts/onest-800-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap;
  src:url(/static/fonts/onest-800-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap;
  src:url(/static/fonts/onest-800-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  /* -- Color -------------------------------------------------------------- */
  --paper:   #EDEAE2;
  --surface: #FBFAF6;
  --ink:     #272727;
  --ink-2:   #565551;
  --muted:   #615E56;              /* WCAG AA: 5.39:1 on --paper даже для мелкого bold (было #6E6B62=4.43, fail) */
  --line:    rgba(39,39,39,.13);
  --line-2:  rgba(39,39,39,.075);
  --wash:    rgba(39,39,39,.04);
  --on-ink:  rgba(255,255,255,.22);  /* subtle layer on dark ink (e.g. nav count) */

  /* -- Semantic state (desaturated, tuned to warm paper — accent, not noise) */
  --ok:        #3F7A55;  --ok-bg:     rgba(63,122,85,.13);  --ok-ink:   #2E5A3F;  /* текст по --ok-bg: AA 5.6:1 (сам --ok как текст по -bg = 3.6, fail) */
  --warn:      #9A6B1E;  --warn-bg:   rgba(154,107,30,.14);  --warn-ink: #6F4E15;  /* текст по --warn-bg: AA 5.4:1 (--warn по -bg = 3.3, fail) */
  --danger:    #9B3B36;  --danger-bg: rgba(155,59,54,.12);

  /* -- Breakpoints (literal — CSS @media can't read vars; keep these two only)
        --bp-md 760px (tablet: collapse multi-column)
        --bp-sm 560px (phone: stack tables into cards) ------------------------ */

  /* -- Elevation ---------------------------------------------------------- */
  --e-1: 0 1px 2px rgba(39,39,39,.05), 0 14px 34px -16px rgba(39,39,39,.16);
  --e-2: 0 8px 18px -6px rgba(39,39,39,.45);

  /* -- Radius / borders --------------------------------------------------- */
  --r-sm: 10px; --r-el: 14px; --r-card: 22px; --r-pill: 999px;
  --bw: 1px; --bw-2: 1.5px;
  --header-h: 76px;   /* sticky masthead height — sticky sidebars clear it */
  --page-top: var(--s-6);  /* единый отступ первого элемента контента от шапки (стандартизация) */

  /* -- Spacing scale ------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 56px;

  /* -- Typography --------------------------------------------------------- */
  --font-display: 'Onest', sans-serif;
  --font-body: 'Onest', sans-serif;
  --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 12px; --fs-base: 13px; /* подняты до ≥10px (a11y читаемость), xs→12 */
  --fs-md: 14px;  --fs-lg: 15px;  --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 21px;
  --fs-4xl: 25px; --fs-5xl: 30px;
  --fs-display-md: clamp(26px, 4vw, 38px);
  --fs-display-lg: clamp(34px, 6vw, 58px);
  /* Только для H1 первого экрана главной: там заголовок — единственный носитель
     впечатления, и display-lg (58px) на широком мониторе теряется в пустоте. */
  --fs-display-xl: clamp(32px, 4.2vw, 80px);
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --tracking-label: .1em;

  /* -- Motion ------------------------------------------------------------- */
  --dur: .12s; --dur-slow: .25s; --ease: ease; --ease-out: cubic-bezier(.2,.7,.2,1);

  /* -- Focus -------------------------------------------------------------- */
  --focus-ring: 2px solid var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { touch-action: manipulation; scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }  /* tap-delay + резерв под скроллбар (меню не прыгает между длинными/короткими страницами) + без серой вспышки на тап (нативный отклик даём через :active) */
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-weight: var(--fw-medium); -webkit-font-smoothing: antialiased;
}
body::before {  /* faint paper grain */
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Accessibility: one global focus treatment for every interactive element. */
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-7); }
/* Кабинет/админка (app_shell) — рабочее приложение: шире под таблицы/дашборды.
   Публичная витрина остаётся 1200 (ширина для чтения). На обычных мониторах ≈ во весь
   экран, на ультравайде — щедрый потолок (строки таблиц не растягиваются бесконечно). */
.wrap--app { max-width: 1680px; }
.topbar { height: 6px; background: var(--ink); }
.hx-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: var(--accent, var(--ink)); opacity: 0; pointer-events: none;
  transition: width .3s var(--ease-out, ease), opacity .2s ease; }
.hx-bar.on { opacity: 1; }
a { color: inherit; text-decoration: none; }

/* == Masthead + nav ======================================================= */
/* sticky so navigation + global search stay reachable while scrolling long pages.
   iOS viewport-fit=cover: на iPhone с вырезом верхний safe-area не учитывался — sticky-шапка
   (top:0) прилипала ПОД статус-бар/вырез, и контент лез в зону выреза («шапка не перекрывает
   верхний бар»). Добавляем env(safe-area-inset-top) в padding-top: --paper-фон шапки заполняет
   вырез, контент уходит ниже. env()=0 на устройствах без выреза → десктоп/Android не меняются. */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: calc(var(--s-5) + env(safe-area-inset-top, 0px)) 0 var(--s-5); flex-wrap: wrap; position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: var(--bw) solid var(--line);
  transition: padding var(--dur) var(--ease); }
/* tagline вынесен из потока (absolute) — высота .brand = высота логотипа,
   поэтому меню в .masthead центрируется по логотипу, а не по «логотип+тэглайн». */
.brand { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.logo { height: 30px; width: auto; display: block; transition: height var(--dur) var(--ease); }
.tagline { position: absolute; top: calc(100% + 4px); left: 0; white-space: nowrap;
  font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.brand-social { display: flex; gap: var(--s-2); margin-top: var(--s-1); }
/* Compact-sticky: при скролле прячем тэглайн+соцсети и ужимаем шапку — навигация остаётся,
   но шапка не отъедает экран (особенно на длинных страницах: блог, статья). Класс на <body>
   ставит app.js по scrollY. tagline/social скрываем через max-height (анимируемо, не display:none). */
.tagline { overflow: hidden;
  transition: opacity .2s var(--ease), max-height .25s var(--ease), margin .25s var(--ease); max-height: 40px; }
body.scrolled .masthead { padding-top: calc(var(--s-2) + env(safe-area-inset-top, 0px)); padding-bottom: var(--s-2); }
body.scrolled .logo { height: 24px; }
body.scrolled .tagline {
  opacity: 0; max-height: 0; margin-top: 0; pointer-events: none; }
/* Хит-таргет ≥40×40 (WCAG 2.5.8): иконка 19px центрируется, визуально не меняется, но по кубику
   легко попасть пальцем. -6px margin гасит прибавку, чтобы ряд не «раздувался». */
.brand-social a { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; margin: -6px; color: var(--muted); transition: color var(--dur) var(--ease); }
.brand-social a:hover { color: var(--ink); }
.brand-social svg { width: 19px; height: 19px; display: block; }
/* Кабинет: название компании рядом с логотипом. margin-right:auto прижимает чип влево
   (к бренду), nav уезжает вправо. Разделитель-черта отделяет от логотипа. */
.cab-co { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: auto;
  padding-left: var(--s-4); margin-left: var(--s-4); border-left: var(--bw) solid var(--line);
  color: var(--ink); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  text-decoration: none; transition: color var(--dur) var(--ease); }
.cab-co:hover { color: var(--accent, var(--ink)); }
.cab-co-name { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .cab-co { display: none; } }
.nav { display: flex; gap: var(--s-2); align-items: center; }
/* Меню + утилиты держатся у правого края во всех контекстах: у гостя space-between и так
   прижимает nav вправо; у авторизованного рядом появился .masthead-actions — auto-распорка
   слева от nav толкает «меню + иконки» вправо (в кабинете вместе с cab-co margin-right:auto).
   На мобиле nav = order:3 width:100% (уходит на 2-ю строку) → margin-left:auto без эффекта. */
.masthead > .nav { margin-left: auto; }
/* Утилиты (курс, колокольчик, поддержка, лампочка) — в тулбаре, видны и на мобиле рядом
   с бургером (иконки .nav-bulb уже несут свой размер/hover). */
.masthead-actions { display: flex; align-items: center; gap: var(--s-2); }
/* бургер — только на телефонах (ниже в @media), на десктопе скрыт */
.nav-toggle { display: none; align-items: center; justify-content: center; padding: var(--s-2);
  min-width: 44px; min-height: 44px;  /* iOS HIG touch-target ≥44px */
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  color: var(--ink); cursor: pointer; }
.nav-toggle .ic { width: 24px; height: 24px; }
.nav-toggle:hover { background: var(--wash); }
.nav a { font-weight: var(--fw-bold); font-size: var(--fs-base); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill); color: var(--ink-2); border: var(--bw) solid transparent; transition: all var(--dur) var(--ease);
  display: inline-flex; align-items: center; gap: var(--s-2); }
.nav a .ic { width: 18px; height: 18px; flex: none; }
.ic-xs { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.lockbar span { display: inline-flex; align-items: center; gap: var(--s-2); }
.nav a:hover { background: var(--wash); }
.nav a.is-active { background: var(--ink); color: var(--surface); }
.nav .count { font-family: var(--font-display); font-weight: var(--fw-bold); margin-left: var(--s-2);
  background: var(--surface); color: var(--ink); border-radius: var(--r-pill); padding: 0 var(--s-2); font-size: var(--fs-sm); }
.nav a.is-active .count { background: var(--on-ink); color: var(--surface); }
/* Выпадашка «Партнёрам»: нативный <details> (тач/мышь/клавиатура, без JS).
   Десктоп — popover как .notif-pop; мобилка (бургер) — инлайн-список (ниже в @media). */
.nav-drop { position: relative; }
.nav-drop > summary { display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: var(--fw-bold); font-size: var(--fs-base); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm); cursor: pointer; list-style: none; white-space: nowrap; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary .ic { width: 18px; height: 18px; flex: none; }
.nav-drop > summary:hover, .nav-drop[open] > summary { background: var(--wash); }
.nav-drop__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9001;
  display: flex; flex-direction: column; min-width: 232px; padding: var(--s-2);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  box-shadow: 0 12px 32px rgba(39, 39, 39, .16); }
.nav-drop__menu a { display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-weight: var(--fw-bold); font-size: var(--fs-base); }
.nav-drop__menu a .ic { width: 18px; height: 18px; flex: none; }
.nav-drop__menu a:hover { background: var(--wash); }
/* Хедер-меню сворачивается в бургер уже на планшетах: полный горизонтальный nav
   (8 пунктов + соцсети) не влезал ниже ~960px и распирал вьюпорт (гориз. скролл). */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .brand { flex: 1; }
  .nav { display: none; flex-direction: column; align-items: stretch; gap: var(--s-1);
    width: 100%; order: 3; margin-top: var(--s-1); padding-top: var(--s-2);
    border-top: var(--bw) solid var(--line); }
  /* Раскрытый бургер = выезжающая панель справа (off-canvas drawer) — позиция/фон/тень
     в глобальном правиле .nav.is-open ниже. Здесь только показываем его. */
  .nav.is-open { display: flex; }
  /* Кабинет/админка: сайдбар разделов (.cab-side) уезжает В БУРГЕР (JS relocateCabNav
     переносит его в #siteNav). Поэтому колонка сайдбара схлопывается в одну, а in-shell
     копия скрыта (JS перенесёт её в #siteNav, где она покажется внутри drawer). */
  .cab-shell { grid-template-columns: 1fr; }
  .cab-shell > .cab-side { display: none; }
  .nav a { padding: var(--s-3); font-size: var(--fs-base); border-radius: var(--r-sm);
    min-height: 44px; display: flex; align-items: center; }  /* touch-target ≥44px на мобиле */
  .nav-sep { display: none; }
  .nav-drop, .nav-drop > summary { width: 100%; }
  .nav-drop > summary { padding: var(--s-3); }
  .nav-drop__menu { position: static; min-width: 0; padding: var(--s-1) 0 var(--s-1) var(--s-6);
    border: none; box-shadow: none; background: transparent; }
}

/* Индустриальный сворачиватель шапки (замена магических px-порогов 1120/1500). JS
   `fitHeaderNav` (app.js) РЕАЛЬНО меряет, влезает ли горизонтальный nav, и ставит
   .nav-collapsed на .masthead, когда НЕ влезает — единый механизм для гостя,
   авторизованного и любого контента/локали, без угадывания ширины. Класс переводит nav
   в бургер на ЛЮБОЙ ширине. Блок @media (max-width:960px) ВЫШЕ остаётся no-JS/mobile
   фолбэком (и держит кабинетный .cab-shell, который не про nav). Drawer-стили открытого
   меню — в глобальном .nav.is-open ниже. */
.masthead.nav-collapsed .nav-toggle { display: inline-flex; }
.masthead.nav-collapsed .brand { flex: 1; }
.masthead.nav-collapsed .nav { display: none; flex-direction: column; align-items: stretch;
  gap: var(--s-1); width: 100%; order: 3; margin-top: var(--s-1); padding-top: var(--s-2);
  border-top: var(--bw) solid var(--line); }
.masthead.nav-collapsed .nav.is-open { display: flex; }
.masthead.nav-collapsed .nav a { padding: var(--s-3); font-size: var(--fs-base);
  border-radius: var(--r-sm); min-height: 44px; display: flex; align-items: center; }
.masthead.nav-collapsed .nav-sep { display: none; }
.masthead.nav-collapsed .nav-drop,
.masthead.nav-collapsed .nav-drop > summary { width: 100%; }
.masthead.nav-collapsed .nav-drop > summary { padding: var(--s-3); }
.masthead.nav-collapsed .nav-drop__menu { position: static; min-width: 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-6); border: none; box-shadow: none; background: transparent; }

/* Бургер на мобиле/планшете = выезжающая панель СПРАВА (off-canvas drawer), как в
   витрине RackCore. Глобально (is-open бывает только когда бургер показан, т.е. на
   мобиле/планшете). В кабинете JS relocateCabNav переносит сюда .cab-side (разделы),
   утилиты (колокольчик/чат/лампочка/курс) идут ниже. Фон затемняет .nav-backdrop. */
.nav.is-open {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: min(86vw, 340px); margin: 0; border-top: 0;
  flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--paper); box-shadow: -8px 0 32px rgba(39, 39, 39, .18);
  z-index: 70; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--s-4) + env(safe-area-inset-top, 0px)) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
/* Бэкдроп лежит ВНУТРИ .masthead (stacking-context z-50, см. base.html), поэтому z-index
   здесь — относительно шапки: 60 = выше её содержимого (лого/бургер), но НИЖЕ drawer
   #siteNav (z-70), чтобы тапы по пунктам меню попадали в drawer, а не в бэкдроп. Весь
   context шапки (z-50) выше контента (z-0) → бэкдроп затемняет страницу. */
.nav-backdrop { position: fixed; inset: 0; background: rgba(15, 17, 21, .45);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }   /* фон не скроллится, пока открыт drawer */
/* Разделы кабинета внутри drawer — вертикальный grouped-список (как на десктопе);
   мелкие тап-таргеты утилит — отступ сверху, чтобы отделить от пунктов. */
.nav.is-open .cab-side { width: 100%; margin: 0; }
.nav.is-open .cab-nav { gap: 2px; }
/* Тап-таргет пунктов drawer — 44px (палец, а не курсор): при padding var(--s-3) пункты
   выходили 40px, и это единственное, к чему придирался мобильный аудит на главной
   (Вебмастер: NOT_MOBILE_FRIENDLY). Задаём высотой, а не padding'ом — иконка+текст
   остаются по центру, вёрстка пунктов не меняется. */
.nav.is-open a,
.nav.is-open .cab-nav a { min-height: 44px; }
/* ✕ закрыть в drawer — виден только когда меню раскрыто как off-canvas (мобайл/бургер). */
.nav-close { display: none; }
.nav.is-open .nav-close { display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-end; margin: calc(var(--s-1) * -1) calc(var(--s-1) * -1) var(--s-1) 0;
  min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-sm); color: var(--ink-2); }
.nav.is-open .nav-close:hover { background: var(--wash); color: var(--ink); }
.nav.is-open .nav-close .ic { width: 24px; height: 24px; }

/* == Headings ============================================================= */
.page-title { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display-md);
  letter-spacing: -.01em; margin: var(--page-top) 0 var(--s-1); overflow-wrap: anywhere; }
.page-sub { font-weight: var(--fw-medium); font-size: var(--fs-lg); color: var(--ink-2); margin: 0 0 var(--s-7); }

/* == Buttons ==============================================================
   Block .btn · variants --dark / --ghost / --quiet · sizes --lg / --xs
   states :disabled, .is-selected */
.btn { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); cursor: pointer;
  border-radius: var(--r-pill); padding: var(--s-3) var(--s-6); border: var(--bw) solid var(--ink);
  background: transparent; color: var(--ink); white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn--dark { background: var(--ink); color: var(--surface); }
.btn--dark:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.btn--ghost:hover { background: var(--wash); }
.btn--quiet { border-color: var(--line); color: var(--ink-2); }
.btn--quiet:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn--lg { font-size: var(--fs-lg); padding: var(--s-3) var(--s-8); }
/* OAuth соц-вход (Google/Яндекс/СберБизнес): 3 кнопки в ряд внутри узкой карточки (~382px).
   Компактный horizontal padding — иначе длинная подпись «СберБизнес» не влезает и съезжает.
   Переносятся (wrap) на совсем узких. */
.oauth-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.oauth-btn { flex: 1; min-width: 90px; text-align: center; padding-left: var(--s-3); padding-right: var(--s-3); }
.oauth-btn img { margin-right: 5px; vertical-align: -3px; }
.btn--xs { font-size: var(--fs-xs); padding: var(--s-1) var(--s-3); }
.btn.is-selected { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
/* Иконка внутри кнопки: без явного размера SVG (viewBox 0 0 256 256) раздувается
   до intrinsic-размера и ломает кнопку. Страхуем все .btn — иконку держим
   вровень с текстом независимо от того, передан класс 'ic' или 'ic-xs'. */
.btn .ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* == App-feel: тактильность + скролл + нативная высота ===================== */
/* Нажатие слегка «вдавливает» интерактив — нативный тактильный отклик (:disabled исключён). */
.btn:not(:disabled):active { transform: translateY(1px) scale(.99); }
.cab-link:active, .fchip:active { transform: scale(.97); }
/* Тактильный отклик на тап по навигационным строкам/карточкам списков (дриллдаун в detail,
   data-vt-src): инлайн-ссылки строк слегка гаснут, карточка-строка (заявки) — вдавливается. */
[data-vt-src]:active { opacity: .5; }
.lrow[data-vt-src]:active { opacity: 1; transform: scale(.985); }
/* Honest feedback: пока htmx-запрос в полёте — инициатор/сабмит «занят» (нет двойных кликов). */
.btn.htmx-request, button.htmx-request, form.htmx-request [type="submit"] { pointer-events: none; opacity: .6; }
/* Строки-ссылки списков (заказы/КП): вся строка — крупная цель drill-down, без дубль-кнопки. */
tr.row-link { cursor: pointer; }
tr.row-link:hover, tr.row-link:hover > td { background: var(--wash); }
/* Скролл-контейнеры не «протягивают» жест на родителя/страницу: нет случайного
   pull-to-refresh и «резинки» под списком (как в нативном приложении). */
.modal-card, .mpthread-msgs, .msg-feed, .msg-list, .catdrop-opts, .mp-list, .sidebar {
  overscroll-behavior: contain; }
/* Динамическая высота вьюпорта на мобильном — адресбар не режет layout. vh — фолбэк. */
@supports (height: 100dvh) {
  .msg-shell { height: calc(100dvh - 220px); }
  .sidebar { max-height: calc(100dvh - var(--header-h) - var(--s-5)); }
}

/* == Командная палитра (Cmd/Ctrl+K) ======================================= */
#cmdk { position: fixed; inset: 0; z-index: 80; }
.cmdk-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .32);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk-box { width: min(560px, 92vw); background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-2); box-shadow: var(--e-2); overflow: hidden; }
.cmdk-input { width: 100%; border: 0; border-bottom: var(--bw) solid var(--line); background: transparent;
  padding: var(--s-4) var(--s-5); font-family: inherit; font-size: var(--fs-lg); color: var(--ink); outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2); }
.cmdk-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3);
  border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: var(--fs-md); }
.cmdk-item .cmdk-ic { width: 18px; height: 18px; flex: none; opacity: .8; }
.cmdk-item .cmdk-grp { margin-left: auto; font-size: var(--fs-2xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--tracking-label); }
.cmdk-item.is-active, .cmdk-item:hover { background: var(--ink); color: var(--surface); }
.cmdk-item.is-active .cmdk-ic, .cmdk-item:hover .cmdk-ic { opacity: 1; }
.cmdk-hint { padding: var(--s-2) var(--s-5); border-top: var(--bw) solid var(--line);
  font-size: var(--fs-2xs); color: var(--muted); }

/* == Panels & KPIs ======================================================== */
.panel { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--e-1); padding: var(--s-6) var(--s-7); margin-bottom: var(--s-4); }
.panel-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); margin: 0 0 var(--s-1); }
.panel-h .ic { width: 1em; height: 1em; flex: none; vertical-align: -2px; opacity: .7; }
.panel-sub { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s-4); }

/* Настройки экономики МП (/cabinet/mp-economics): ровная сетка полей.
   Метки бывают в 1–2 строки — фиксируем высоту метки и выравниваем её по низу,
   чтобы инпуты/селекты во всех колонках стояли на одной линии (без «косых» рядов). */
.mp-econ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-4); align-items: end; margin-top: var(--s-4); }
.mp-econ-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mp-econ-label { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-end; }
.mp-econ-field .adm-search { width: 100%; max-width: none; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.kpi { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--e-1); padding: var(--s-5); }
.kpi .label { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); }
.kpi .value { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-5xl); margin-top: var(--s-2); }
.kpi .unit { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--muted); margin-left: var(--s-1); }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--s-4); }
  /* Длинные числа (1.3M карточек в админке) не должны распирать колонку */
  .kpi .value { font-size: var(--fs-4xl); overflow-wrap: anywhere; }
}

/* == Switcher (fake login) ================================================ */
.switcher { display: inline-flex; align-items: center; gap: var(--s-3); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); box-shadow: var(--e-1); }
.switcher .who { font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.switcher select { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); border: 0;
  background: var(--wash); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); color: var(--ink); cursor: pointer; }

/* == Tables =============================================================== */
table { width: 100%; border-collapse: collapse; }
thead th { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); text-align: left; padding: var(--s-2) var(--s-3) var(--s-3) 0; border-bottom: var(--bw) solid var(--line); }
tbody td { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: var(--bw) solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.cell-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.cell-sub { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
.cell-mono { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--ink-2); }
/* numeric cell — shared by cabinet tables and offer rows */
.cell-num, .price-cell { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); white-space: nowrap; }
.stock-cell { font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; }
/* Убыток в МП-таблицах (прибыль/маржа < 0): бордо, чтобы продавец сразу видел минусовую позицию/площадку. */
.cell-neg { color: var(--danger); }

/* == Badge — the one small-pill primitive ================================
   Neutral by default (labels: тип, формат, раздел). A tone modifier turns it
   into a status pill (stronger emphasis + colour). */
/* Пилюли uppercase: padding-top на 1px больше bottom — оптическая компенсация. align-items
   центрирует line-box, но заглавные глифы (без descender) сидят в его верхней части → текст
   визуально уезжает вверх; +1px сверху сажает его в оптический центр. */
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: 3px var(--s-2) 2px; color: var(--muted); }
.badge--link { cursor: pointer; }
.badge--link:hover { border-color: var(--ink); color: var(--ink); }
/* toned variants = status pills: stronger weight + a touch more padding */
.badge--solid, .badge--ghost, .badge--ok, .badge--warn, .badge--danger {
  font-weight: var(--fw-extrabold); letter-spacing: .06em; padding: 3px var(--s-3) 2px; }
.badge--solid  { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.badge--ghost  { background: transparent; color: var(--ink-2); border-color: var(--line); }
.badge--ok     { background: var(--ok-bg);     color: var(--ok-ink);   border-color: transparent; }
/* verified-поставщик (действующее юрлицо по ЕГРЮЛ) — позитивный бейдж в выдаче/карточке */
.badge-ver { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); color: var(--ok); background: var(--ok-bg);
  border-radius: var(--r-pill); padding: 1px var(--s-2); margin-left: 4px;
  vertical-align: middle; white-space: nowrap; }
.badge-ver svg { width: 12px; height: 12px; }
/* мини-витрина товаров на профиле поставщика (за auth) */
.sup-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.sup-prod { display: flex; flex-direction: column; border: var(--bw) solid var(--line); border-radius: var(--r-2); overflow: hidden; text-decoration: none; color: var(--ink); }
.sup-prod:hover { border-color: var(--ink); }
.sup-prod-img { aspect-ratio: 1 / 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.sup-prod-img img { width: 100%; height: 100%; object-fit: contain; }
.sup-prod-t { font-size: var(--fs-xs); padding: var(--s-2) var(--s-2) 0; line-height: 1.3; max-height: 2.7em; overflow: hidden; }
.sup-prod-p { font-weight: var(--fw-bold); padding: 4px var(--s-2) var(--s-2); }
/* проверка контрагента — форма ИНН + итоговый вердикт-баннер */
.cp-form { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.cp-form .inp { flex: 1; min-width: 220px; }
.verdict-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; border-left: 4px solid var(--line); }
.verdict-banner--ok { border-left-color: var(--ok); }
.verdict-banner--warn { border-left-color: var(--warn); }
.verdict-banner--danger { border-left-color: var(--danger); }
.verdict-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); }
.verdict-score { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); white-space: nowrap; }
.verdict-reasons { margin: var(--s-2) 0 0; padding-left: var(--s-4); color: var(--muted); font-size: var(--fs-sm); }
.cp-cases { margin-top: var(--s-3); }
.cp-cases summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: var(--s-2) 0; }
.cp-cases summary:hover { color: var(--ink); }
.cp-hist { display: flex; flex-direction: column; gap: 2px; }
.cp-hist-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left; background: none; border: none; padding: var(--s-2); border-radius: var(--r-1); cursor: pointer; font: inherit; color: var(--ink); }
.cp-hist-item:hover { background: var(--surface-2); }
.cp-hist-name { font-weight: var(--fw-medium); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-hist-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.cp-hist-dot--ok { background: var(--ok); }
.cp-hist-dot--warn { background: var(--warn); }
.cp-hist-dot--danger { background: var(--danger); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn-ink); border-color: transparent; }
/* danger — ЕДИНСТВЕННЫЙ «громкий» статус: solid бренд-бордо + тёплый off-white (AA 6.5:1).
   Ошибка/отмена = продавец теряет деньги → бейдж должен ловить взгляд в столбце статусов;
   остальные статусы тихие (пастель). Бордо #9B3B36 благородный, не алый — не кричит «как у всех». */
.badge--danger { background: var(--danger);    color: var(--surface);  border-color: var(--danger); }

/* round source markers — trust encoded by fill, not colour. Modifier = data enum. */
.mark { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.mark--primary { background: var(--ink); }
.mark--own_warehouse { border: var(--bw-2) solid var(--ink); background: linear-gradient(135deg, var(--ink) 0 50%, transparent 50%); }
.mark--transmitted { border: var(--bw-2) solid var(--ink); background: transparent; }
.mark--on_order { border: var(--bw-2) dotted var(--muted); }
.mark--transit { border: var(--bw-2) solid var(--muted); background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50%); }
/* По-складная разбивка оффера (OCS: склады-города + транзит) */
.wh { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wh-chip { font-size: var(--fs-xs, 11px); padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.wh-chip--stock { background: var(--ink); color: var(--paper); }
.wh-chip--transit { border: var(--bw-1, 1px) solid var(--muted); color: var(--muted); }
.src { display: flex; align-items: center; gap: var(--s-2); }
.src-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* == Misc ================================================================= */
.empty-box, .search-empty { text-align: center; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.empty-box { padding: var(--s-9) 0; }
/* Пустое состояние поиска — явный блок в {% else %} цикла результатов (виден всегда, когда рендерится). */
.search-empty { display: block; padding: var(--s-9) 0; }
.search-empty-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink); margin-top: var(--s-3); }
.search-empty-p { font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--muted); margin: var(--s-2) auto var(--s-4); max-width: 46ch; }
/* Панель поиска (счётчик+сортировка+вид) и фасеты — переиспользуют каталог-стили; небольшие отступы. */
.search-bar { margin-top: var(--s-5); }
.search-facets { margin-bottom: var(--s-5); }
/* Мост к AI под выдачей. */
.search-ai-cta { display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-7); padding: var(--s-4); border: var(--bw) dashed var(--line); border-radius: var(--r-card);
  color: var(--ink-2); font-weight: var(--fw-semibold); font-size: var(--fs-base); }
/* Routing-гейт: баннер «разговорный запрос → ИИ-подбор» поверх лексической выдачи (монохром-бренд) */
.search-aihint { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4); background: var(--wash); border: var(--bw) solid var(--line);
  border-left: 3px solid var(--ink); border-radius: var(--r-card); }
.search-aihint-ic { flex: none; display: inline-flex; color: var(--ink); }
.search-aihint-ic svg { width: 22px; height: 22px; }
.search-aihint-t { flex: 1 1 auto; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.search-aihint-t b { color: var(--ink); font-weight: var(--fw-bold); }
.search-aihint-go { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap;
  padding: var(--s-2) var(--s-4); border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--ink); color: var(--paper); font-family: var(--font-display);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.search-aihint-go svg { width: 14px; height: 14px; }
@media (hover: hover) { .search-aihint-go:hover { background: var(--ink-2); } }
@media (max-width: 560px) { .search-aihint { flex-wrap: wrap; } .search-aihint-go { width: 100%; justify-content: center; } }
.qty { display: inline-flex; align-items: center; border: var(--bw) solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.qty button { border: 0; background: transparent; cursor: pointer; font-family: var(--font-display);
  font-weight: var(--fw-bold); font-size: var(--fs-lg); width: 30px; height: 30px; color: var(--ink); }
.qty button:hover { background: var(--wash); }
.qty span { font-family: var(--font-display); font-weight: var(--fw-bold); min-width: 30px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: var(--s-7); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--surface); font-weight: var(--fw-bold); font-size: var(--fs-base);
  padding: var(--s-3) var(--s-6); border-radius: var(--r-pill); box-shadow: var(--e-1); opacity: 0;
  transition: all var(--dur-slow) var(--ease); pointer-events: none; z-index: 10000; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-footer { margin: var(--s-10) 0 var(--s-9); padding-top: var(--s-8); border-top: var(--bw) solid var(--line);
  font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: var(--s-6) var(--s-7); margin-bottom: var(--s-8); }
.foot-brand .logo { height: 24px; width: auto; display: block; }
.foot-about { margin: var(--s-4) 0 var(--s-5); max-width: 38ch; font-size: var(--fs-sm);
  color: var(--ink-2); line-height: 1.55; }
.foot-brand .brand-social { margin-top: 0; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.foot-col .foot-h { margin: 0 0 var(--s-1); font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.foot-col a { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5);
  padding-top: var(--s-5); border-top: var(--bw) solid var(--line-2); font-size: var(--fs-xs); }
.foot-contact a { color: var(--ink-2); font-weight: var(--fw-semibold); }
.foot-contact a:hover { color: var(--ink); }
/* Колонка «Контакты» в футере: телефон + мессенджеры/почта с бренд-глифом */
.foot-contacts a { display: inline-flex; align-items: center; gap: var(--s-2); }
.foot-contacts a svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .foot-brand { grid-column: 1 / -1; }
}

/* == Search page ========================================================== */
.hero { padding: var(--s-9) 0 var(--s-7); }
.hero h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); line-height: 1.02; letter-spacing: -.01em;
  margin: 0 0 var(--s-4); font-size: var(--fs-display-lg); max-width: 15ch; }
.hero p { font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--ink-2); margin: 0 0 var(--s-8); max-width: 52ch; line-height: 1.5; }
.search { display: flex; align-items: center; gap: var(--s-2); background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-el); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); box-shadow: var(--e-1);
  margin-bottom: var(--s-4); }
.search:focus-within { border-color: var(--ink); }
.search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--ink);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-xl); padding: var(--s-2) 0; }
.search input::placeholder { font-weight: var(--fw-medium); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chips-label { align-self: center; font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.hero-row { display: flex; align-items: center; gap: var(--s-9); }
.hero-text { flex: 1; min-width: 0; }
.hero-art { flex: none; width: 184px; }
.hero-art img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .hero-row { display: block; } .hero-art { display: none; } }
/* Hero-плитки масштаба (продающее соц-доказательство — реальные цифры из stats) */
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-7); margin-top: var(--s-7); }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat__n { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-2xl); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.hero-stat__l { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); margin-top: var(--s-1); }
@media (max-width: 640px) { .hero-stats { gap: var(--s-5); } .hero-stat__n { font-size: var(--fs-xl); } }

/* Карусель логотипов дистрибьюторов (trust-полоса, бесшовный CSS-marquee) */
.dist-strip { margin-top: var(--s-9); }
.dist-strip__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-4); }
.dist-marquee { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dist-track { display: flex; align-items: center; gap: var(--s-8); width: max-content;
  animation: dist-marquee 60s linear infinite; }
.dist-marquee:hover .dist-track { animation-play-state: paused; }
.dist-logo { flex: none; display: inline-flex; align-items: center; height: 56px; }
.dist-logo img { height: 46px; width: auto; max-width: 200px; object-fit: contain;
  filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.dist-logo:hover img { filter: grayscale(0); opacity: 1; }
@keyframes dist-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dist-track { animation: none; flex-wrap: wrap; } }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--ink-2); border: var(--bw) solid var(--line); background: transparent;
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); cursor: pointer; transition: all var(--dur) var(--ease); }
.chip:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ledger { display: none; margin: var(--s-4) 0 var(--s-7); font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); }
.ledger b { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); }
.ledger .flag { background: var(--ink); color: var(--surface); border-radius: var(--r-pill); padding: 3px var(--s-3); white-space: nowrap; }
.ledger .flag b { color: var(--surface); }
.results { display: flex; flex-direction: column; gap: var(--s-3); }
.results--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--s-4); align-items: start; }
.card { border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-1);
  overflow: hidden; animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card-head { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: start; gap: var(--s-5);
  padding: var(--s-5) var(--s-6); }
.card-thumb { width: 76px; height: 76px; border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.card-thumb img { width: 72%; height: 72%; object-fit: contain; opacity: .85; }
.title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;  /* длинный артикул/MPN в названии не распирает грид (горизонт. скролл каталога) */
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); letter-spacing: -.005em; }
.title:hover { text-decoration: underline; }
.subtitle { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--muted); margin-top: var(--s-1); }
.attrs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.attrs:empty { display: none; }
.attr { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink-2); background: var(--wash); border-radius: var(--r-sm); padding: var(--s-1) var(--s-3); }
.metrics { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); margin-top: var(--s-3); }
.metrics b { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); }
.price-side { text-align: right; white-space: nowrap; }
.price-cap { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.price { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-4xl); margin-top: 1px; }
.orig-price { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-top: 1px; }
.price-na { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--muted); white-space: nowrap; }
.toggle { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-body);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-3); }
.toggle:hover { color: var(--ink); }
.offers { display: none; padding: var(--s-1) var(--s-7) var(--s-6) var(--s-7); overflow-x: auto; }
.offers tbody td { vertical-align: top; padding: var(--s-4) var(--s-3) var(--s-4) 0; }
.offers td.cell-mono { min-width: 130px; }
.sup-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.sup-type { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 2px var(--s-2); margin-left: var(--s-2); }
/* Дистрибьютор (закупка через нас) vs самостоятельный продавец (прямой контакт) */
.sup-type--distributor { color: var(--ink); border-color: var(--ink); }
.sup-type--seller { color: var(--ok); border-color: var(--ok); }
.sup-contact { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-2xs); }
.sup-contact a { color: var(--ink); text-decoration: none; border-bottom: var(--bw) dotted var(--line); }
.sup-contact a:hover { border-bottom-color: var(--ink); }
.quote-done { color: var(--ok); font-weight: var(--fw-bold); font-size: var(--fs-2xs); }
.sup-type--reseller { color: var(--ink-2); border-color: var(--line); }
.sup-type--manufacturer_ru { color: var(--accent, #b4530a); border-color: var(--accent, #b4530a); }

/* Раздел «Поставщики» */
.sup-facets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.chip-n { font-size: var(--fs-2xs); opacity: .7; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.sup-card { display: flex; gap: var(--s-3); padding: var(--s-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-2); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.sup-card:hover { border-color: var(--ink); }
.sup-mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-weight: var(--fw-bold);
  font-family: var(--font-display); background: var(--paper-2, #f4f2ee); border-radius: var(--r-1); color: var(--ink-2); }
.sup-mark--lg { width: 64px; height: 64px; font-size: var(--fs-lg); }
.sup-mark--logo { background: #fff; border: var(--bw) solid var(--line); padding: 5px; overflow: hidden; }
.sup-mark--logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sup-card-name { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.sup-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: 2px; }
.sup-card-offers { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.sup-region { font-size: var(--fs-2xs); color: var(--muted); }
.sup-verified { color: var(--ok); }
.sup-head { display: flex; gap: var(--s-3); align-items: center; }
.sup-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.sup-site { font-size: var(--fs-2xs); color: var(--ink); text-decoration: none; border-bottom: var(--bw) dotted var(--line); }
.sup-brands { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) 0; }
.claim-form { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Единый стиль поля ввода: фон --paper (на белой панели --surface поле читается как
   «вдавленное» — контраст с контейнером; surface-поле слилось бы с панелью). Радиус
   --r-el, semibold — как .field/.fb-input. Раньше .inp был прозрачный + малый радиус (#31).
   Геометрию (padding) не трогаем — высота полей та же, .rq-inp-sm не ломается. */
.inp { flex: 1 1 220px; padding: var(--s-2) var(--s-3); background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: var(--r-el); font-size: var(--fs-base);
  font-weight: var(--fw-semibold); font-family: inherit; color: var(--ink); }
.inp:focus { outline: none; border-color: var(--ink); }
.raw { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); max-width: 44ch; }
.updated { font-weight: var(--fw-medium); font-size: var(--fs-2xs); color: var(--muted); margin-top: var(--s-1); }
/* Обратная связь по офферу: тихая кнопка «ошибка?» + мини-форма жалобы в строке. */
.offer-flag { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-2);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-weight: var(--fw-semibold); font-size: var(--fs-2xs); color: var(--muted);
  transition: color var(--dur) var(--ease); }
.offer-flag:hover { color: var(--warn); }
.offer-report { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2);
  min-width: 200px; max-width: 260px; padding: var(--s-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-md, 8px); background: var(--warn-bg); }
.offer-report-h { display: flex; align-items: center; gap: 4px; font-weight: var(--fw-bold);
  font-size: var(--fs-xs); color: var(--warn); margin-bottom: var(--s-1); }
.offer-report-opt { display: flex; align-items: flex-start; gap: var(--s-1); cursor: pointer;
  font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.3; }
.offer-report-opt input { margin-top: 2px; flex: 0 0 auto; }
.offer-report-txt { padding: var(--s-1) var(--s-2); font-size: var(--fs-xs); resize: vertical; }
.offer-report-act { display: flex; gap: var(--s-1); justify-content: flex-end; margin-top: var(--s-1); }
.offer-report-done { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-2);
  font-weight: var(--fw-semibold); font-size: var(--fs-2xs); color: var(--ok, #2E7D32); }
/* Админ: сводка «поставщики с пачкой жалоб» + действия по жалобе. */
.or-top { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.or-top-item { display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  text-decoration: none; color: var(--ink); transition: border-color var(--dur) var(--ease); }
.or-top-item:hover { border-color: var(--warn); }
.or-top-cnt { font-weight: var(--fw-extrabold); font-size: var(--fs-md); color: var(--warn); }
.or-top-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.or-top-tags { display: inline-flex; gap: 4px; }
.or-acts { display: flex; gap: var(--s-1); }
/* Админ: приглашение незарегистрированного поставщика (гибрид-канал заявок). */
.adm-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.adm-invite-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.adm-invite-mail { font-size: var(--fs-sm); color: var(--ink-2); font-weight: var(--fw-medium); }
.adm-invite-done { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ok); }
.excluded { font-weight: var(--fw-extrabold); font-size: var(--fs-3xs); letter-spacing: .12em; border: var(--bw-2) solid var(--muted); color: var(--muted);
  border-radius: var(--r-pill); padding: 2px var(--s-2); display: inline-block; margin-top: var(--s-2); }
.note { font-weight: var(--fw-semibold); font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s-2); }
tr.row--transmitted td { color: var(--muted); }
tr.row--transmitted { background: var(--wash); }
.row--on-order td { color: var(--muted); }
.struck { text-decoration: line-through; color: var(--muted); }

/* == Catalog page ========================================================= */
/* Каталог/категория: на мобайле и планшете (<900px) фильтры — горизонтальный ряд дропдаунов
   сверху. На десктопе (≥900px) — вертикальный сайдбар СПРАВА от списка товаров (grid-раскладка
   ниже, в @media min-width:900px). */
.catalog { display: block; margin-top: var(--s-1); }
.catfilters { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
/* Лейбл-подпись (со стрелкой «назад») — в первой строке, ряд чипов переносится под него
   на всю ширину (flex-basis:100% у .catchips). Иначе на десктопе чипы прижимались вправо
   под лейбл, а вся левая колонка пустовала. */
.catfilter-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.catfilter-label { flex: none; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.catfilter-line .catchips { flex-basis: 100%; }
.catchips { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.catchip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); color: var(--ink-2); border: var(--bw) solid var(--line); background: var(--surface);
  border-radius: var(--r-pill); padding: 6px var(--s-3); cursor: pointer; text-decoration: none;
  /* Длинные лейблы («Шестерни, валы, узлы переноса») переносятся внутри чипа, а не вылезают за вьюпорт
     на узких экранах. flex-wrap позволяет счётчику (.chip-n) уйти под лейбл, когда в строку не помещается.
     Короткие чипы на десктопе всё равно остаются в одну строку (переноса нет при наличии места). */
  max-width: 100%; white-space: normal; text-align: left; flex-wrap: wrap; overflow-wrap: anywhere;
  transition: background .12s, color .12s, border-color .12s; }
.catchip:hover { border-color: var(--ink); color: var(--ink); }
.catchip.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.catchip .chip-n { font-family: var(--font-display); font-size: var(--fs-2xs); opacity: .65; }
.catchip.is-active .chip-n { opacity: .8; }
/* «Ещё бренды» — inline-раскрытие хвоста брендов прямо в ряду. */
.catmore { display: contents; }
.catchip--more { list-style: none; }
.catchip--more::-webkit-details-marker { display: none; }
.catmore[open] > .catchip--more { background: var(--wash); border-color: var(--ink-2); }
.catchips--tail { margin-top: var(--s-2); flex-basis: 100%; }

/* Выпадающие multi-select фильтры каталога (категория / бренд / откуда). Триггер-«пилюля»
   раскрывает <details>-панель с тогл-чекбоксами + поиском. JS (app.js): закрытие по клику
   вне + фильтр-поиск по пунктам. Старые .catchip/.catfilter-* остаются для /search. */
.catdrops { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0 var(--s-5); min-width: 0; }
.catdrop { position: relative; min-width: 0; max-width: 100%; }
.catdrop-trigger { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2);
  border: var(--bw) solid var(--line); background: var(--surface); border-radius: var(--r-pill);
  padding: 6px var(--s-3); white-space: nowrap; list-style: none; user-select: none; max-width: 100%; min-width: 0;
  transition: background .12s, color .12s, border-color .12s; }
.catdrop-trigger::-webkit-details-marker { display: none; }
.catdrop-trigger:hover { border-color: var(--ink); color: var(--ink); }
.catdrop[open] > .catdrop-trigger { border-color: var(--ink); color: var(--ink); background: var(--wash); }
.catdrop-name { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.catdrop-val { flex: none; color: var(--ink); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

/* Фильтры тендеров: нативные select (регион/категория/НМЦК/срок) в стиле catdrop-триггеров. */
.tender-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0 var(--s-4); }
.tender-filters select { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  color: var(--ink-2); border: var(--bw) solid var(--line); background: var(--surface);
  border-radius: var(--r-pill); padding: 6px var(--s-3); cursor: pointer; max-width: 100%; min-width: 0;
  transition: border-color .12s, color .12s; }
.tender-filters select:hover { border-color: var(--ink); color: var(--ink); }
.tender-filters select:focus { outline: none; border-color: var(--ink); color: var(--ink); }

/* Расширенные срезы (только авторизованным): сегмент-кнопки topic/scope над фильтрами. */
.tender-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 var(--s-3); }
.tender-toggles .tt-label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .04em; }
.tender-toggles .tt-group { display: inline-flex; border: var(--bw) solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.tender-toggles .tt-btn { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  color: var(--ink-2); background: var(--surface); padding: 6px var(--s-3); cursor: pointer; white-space: nowrap;
  border-right: var(--bw) solid var(--line); transition: background .12s, color .12s; }
.tender-toggles .tt-group .tt-btn:last-child { border-right: 0; }
.tender-toggles .tt-btn:hover { color: var(--ink); }
.tender-toggles .tt-btn.is-active { background: var(--ink); color: var(--surface); }
.tender-toggles .tt-btn .ic-xs { vertical-align: -2px; }

/* Кнопка-закладка «Сохранить» в карточке тендера (toggle избранного). */
.tender-save { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-body);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 8px var(--s-4); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s; }
.tender-save:hover { border-color: var(--ink); color: var(--ink); }
.tender-save.is-saved { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Бейдж стадии в строке ленты + итог разыгранной закупки. */
.lrow-stage { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-2);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  padding: 1px var(--s-2); margin-left: var(--s-1); vertical-align: middle; text-transform: none; letter-spacing: 0; }
.lrow-won { display: inline-flex; align-items: baseline; gap: var(--s-1); white-space: nowrap;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }

/* Панель «Итог закупки» — лёгкий акцент (победитель определён). */
.panel--win { border-left: 3px solid var(--ok); }

/* Состав закупки: лоты + таблица позиций (наименование/ОКПД2/кол-во/цена). */
.tender-lot + .tender-lot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--bw) solid var(--line); }
.tender-lot-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.tender-lot-num { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em;
  color: var(--paper); background: var(--ink); border-radius: var(--r-pill); padding: 1px var(--s-2); }
.tender-lot-name { font-weight: var(--fw-bold); color: var(--ink); }
.tender-lot-price { margin-left: auto; font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; }
/* Таблица состава закупки (Наименование/ОКПД2/Кол-во/Цена) на узком экране шире вьюпорта
   (колонка «Цена» — nowrap) → скроллим ВНУТРИ обёртки, иначе распирает всю страницу. */
.tender-items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tender-items { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tender-items th { text-align: left; font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; font-size: var(--fs-xs); padding: 4px var(--s-2); border-bottom: var(--bw) solid var(--line); }
.tender-items td { padding: 6px var(--s-2); border-bottom: var(--bw) solid var(--line-2, var(--line)); vertical-align: top; }
.tender-items .ta-r { text-align: right; white-space: nowrap; }
.tender-items tr:last-child td { border-bottom: 0; }

/* Документы тендера: список файлов со ссылками на ЕИС (ТЗ/проект договора/обоснование). */
.tender-docs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.tender-docs li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tender-docs a { display: inline-flex; align-items: center; gap: var(--s-1); }
.tender-doc-meta { color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; }
.catdrop-caret { flex: none; font-size: var(--fs-2xs); opacity: .55; transition: transform .12s; }
.catdrop[open] > .catdrop-trigger .catdrop-caret { transform: rotate(180deg); }
.catdrop-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 240px; max-width: 320px;
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: var(--s-2); }
.catdrop-search { width: 100%; box-sizing: border-box; margin-bottom: var(--s-2);
  font-family: var(--font-body); font-size: var(--fs-sm); padding: 7px 10px; color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.catdrop-opts { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.catopt { display: flex; align-items: center; gap: var(--s-2); padding: 7px 8px; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--ink-2);
  text-decoration: none; cursor: pointer; }
.catopt:hover { background: var(--wash); color: var(--ink); }
.catopt.is-active { color: var(--ink); font-weight: var(--fw-bold); }
.catopt-box { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); font-size: 12px;
  color: var(--surface); background: var(--surface); }
.catopt.is-active .catopt-box { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.catopt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catopt .chip-n { flex: none; font-family: var(--font-display); font-size: var(--fs-2xs); opacity: .6; }
@media (max-width: 640px) {
  .catdrop-trigger, .catdrop-search { font-size: 16px; }  /* ≥16px: iOS не зумит при фокусе */
  /* Чип во всю ширину ряда: длинное имя фичи усекается ellipsis'ом внутри, не вылезает за вьюпорт. */
  .catdrop { flex: 1 1 100%; }
  .catdrop-trigger { width: 100%; justify-content: flex-start; }
  .catdrop-name { flex: 1 1 auto; }
  .catdrop-panel { left: 0; right: 0; min-width: 0; max-width: none; }
}
/* Десктоп (≥900px): каталог/категория в 2 колонки — список товаров слева, фильтры
   вертикальным сайдбаром СПРАВА (sticky). Дропдауны раскрываются inline-аккордеоном (не
   overlay), чтобы панель не вылезала за узкую колонку. Ниже 900px — контейнер остаётся block,
   .catdrops — горизонтальный ряд сверху (правила выше), мобайл не затрагивается.
   .catalog — HTMX-каталог (catalog.html: .catdrops + main); .catalog-cols — icecat-категории
   (icecat_catalog.html: .catdrops + .cc-main); сайдбар включается только когда есть .catdrops. */
@media (min-width: 900px) {
  .catalog,
  .catalog-cols:has(> .catdrops) {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--cat-aside, 264px);
    gap: var(--s-6); align-items: start; }
  .catalog > main, .catalog-cols > .cc-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .catalog > .catdrops, .catalog-cols > .catdrops {
    grid-column: 2; grid-row: 1; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: var(--s-2); margin: 0;
    position: sticky; top: calc(var(--header-h) + var(--s-3)); }
  .catalog > .catdrops::before, .catalog-cols > .catdrops::before {
    content: "Фильтры"; font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); padding: 0 2px var(--s-1); }
  .catalog > .catdrops .catdrop, .catalog-cols > .catdrops .catdrop { width: 100%; max-width: none; }
  .catalog > .catdrops .catdrop-trigger,
  .catalog-cols > .catdrops .catdrop-trigger { width: 100%; justify-content: flex-start; }
  /* Название тянется на всю ширину → каретка прижата к правому краю, значение (если
     выбрано) — компактным бейджем перед кареткой; невыбранные без «любое» (меньше шума). */
  .catalog > .catdrops .catdrop-name, .catalog-cols > .catdrops .catdrop-name { flex: 1 1 auto; }
  .catalog > .catdrops .catdrop-panel, .catalog-cols > .catdrops .catdrop-panel {
    position: static; min-width: 0; max-width: none; box-shadow: none; margin-top: var(--s-2); }
  .catalog-cols > .catdrops .catdrops-reset { width: 100%; justify-content: center; }
}
.sidebar { position: sticky; top: calc(var(--header-h) + var(--s-3)); display: flex; flex-direction: column; gap: var(--s-4); }
/* Мобильный drawer фильтров: кнопка/крестик/оверлей скрыты на десктопе, включаются в @media. */
.filters-btn { display: none; align-items: center; gap: var(--s-2); }
.fgroup { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-1); padding: var(--s-3); }
.fgroup h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); margin: 0 0 var(--s-2); padding: 2px var(--s-2);
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fitem.is-active { background: var(--ink); color: var(--surface); }
.fitem--sub.is-active > span:first-child::before { color: var(--surface); }
.fitem .c { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--muted); }
.fitem.is-active .c { color: var(--surface); opacity: .85; }
.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
.catalog-bar .cnt { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-xl); }
/* В тендерах счётчик («527 тендеров») идёт сразу за рядом чипов-фильтров —
   добавляем воздух, чтобы не прилипал. В каталоге перед .catalog-bar стоит .catfilters, селектор там не срабатывает. */
.chips + .catalog-bar { margin-top: var(--s-3); }
.sortsel { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-base); border: var(--bw) solid var(--line); background: var(--surface);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); color: var(--ink); cursor: pointer; box-shadow: var(--e-1); }
/* Фильтр-тоггл «В реестре Минпромторга» в каталог-баре */
.mpt-chip { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); border: var(--bw) solid var(--line); background: var(--surface);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-3); color: var(--ink-2); cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.mpt-chip:hover { border-color: var(--ink); color: var(--ink); }
.mpt-chip .mpt-chip-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: var(--bw) solid var(--line); border-radius: var(--r-xs); font-size: 11px; line-height: 1; color: var(--surface); }
.mpt-chip.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.mpt-chip.is-active .mpt-chip-box { background: var(--surface); color: var(--ink); border-color: var(--surface); }
@media (max-width: 760px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); z-index: 9300;
    margin: 0; padding: var(--s-4); background: var(--paper); box-shadow: var(--e-3, var(--e-2));
    flex-direction: column; flex-wrap: nowrap; overflow-y: auto; gap: var(--s-3);
    transform: translateX(-100%); transition: transform .25s var(--ease-out, ease); }
  body.filters-open .sidebar { transform: translateX(0); }
  body.filters-open .filters-overlay { opacity: 1; pointer-events: auto; }
  .fgroup { flex: none; min-width: 0; }
  .sortsel { font-size: 16px; }  /* >=16px: не даём iOS зумить при фокусе */
  /* bar-right (вид+сортировка) — своя строка во всю ширину; select сжимается (длинная
     опция «Сначала с большим числом источников» = min-content 385px распирала страницу на 92px). */
  .catalog-bar .bar-right { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .catalog-bar .sortsel { flex: 1 1 auto; min-width: 0; max-width: 100%; }
}

/* == Section landing (/catalog/{section}) — паритет с icube-store ========== */
.sec-head { margin-top: var(--page-top); }
.sec-stats { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); margin-top: var(--s-2); }
.sec-stats b { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); }
.sec-desc { max-width: 72ch; font-weight: var(--fw-medium); font-size: var(--fs-base); line-height: 1.55; color: var(--muted); margin-top: var(--s-3); }
.sec-brands { margin-top: var(--s-5); }
/* Лендинг /catalog: компактный hero с поиском над кластерами разделов. */
.cat-hero { margin: var(--s-6) 0 var(--s-9); }
.cat-hero .page-sub { max-width: 720px; }
.cat-hero .search { max-width: 640px; margin-top: var(--s-5); }
.sec-block { margin-top: var(--s-8); }
.sec-block-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); letter-spacing: -.01em; margin: 0 0 var(--s-4); }
.sec-block-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.sec-block-bar .sec-block-h { margin: 0; }
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-5) var(--s-4); }
/* Без оконтовки: кураторская иллюстрация (прозрачный фон) сидит прямо на странице. */
.cat-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1);
  padding: var(--s-2); border-radius: var(--r-card); transition: transform var(--dur) var(--ease); }
.cat-tile:hover { transform: translateY(-3px); }
.cat-tile:hover .cat-tile-name { text-decoration: underline; }
.cat-tile-img { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-tile-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); line-height: 1.18; color: var(--ink); margin-top: var(--s-1); }
.cat-tile-c { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 760px) { .cat-tiles { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--s-4) var(--s-3); } }
/* Подкатегории внутри левой колонки категории (icecat_catalog): компактные карточки
   с рамкой — выровнены по сетке товаров, не «ступенькой» рядом с фильтр-сайдбаром. Скоуп
   .cc-main не затрагивает крупные плитки лендингов (catalog_landing / catalog_section). */
.cc-main .cat-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-5); }
.cc-main .cat-tile { align-items: flex-start; text-align: left; gap: 2px; padding: var(--s-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--e-1); }
.cc-main .cat-tile:hover { transform: translateY(-2px); border-color: var(--ink); }
.cc-main .cat-tile:hover .cat-tile-name { text-decoration: none; }
.cc-main .cat-tile-name { font-size: var(--fs-sm); line-height: 1.25; margin-top: 0; }
.cc-main .cat-tile-c { font-size: var(--fs-xs); }

/* == Карта каталога (/categories): компактная многоколоночная перелинковка на весь каталог == */
.cat-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-6); }
.cat-map-col { break-inside: avoid; }
.cat-map-h { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.cat-map-h a { color: var(--ink); }
.cat-map-h a:hover { text-decoration: underline; }
.cat-map-c { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; flex: none; }
.cat-map-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cat-map-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.cat-map-list a { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; }
.cat-map-list a:hover { color: var(--ink); text-decoration: underline; }
.cat-map-cc { font-size: var(--fs-xs); color: var(--muted); flex: none; }

/* == Catalog v2: accordion sidebar · honest count · list/grid toggle ======= */
/* Sidebar gets its own scroll so it never exceeds the viewport (was ~22000px). */
.sidebar { max-height: calc(100vh - var(--header-h) - var(--s-5)); overflow-y: auto; overflow-x: hidden;
  padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
.fitem--all.is-active > span:first-child::before { color: var(--surface); }

/* "Показать все бренды" — top-N visible, rest behind a disclosure. */
.fmore { margin-top: var(--s-1); }

/* Honest count: "Топ-N из M" + why it's a slice. */
.catalog-bar .cnt .cnt-of { font-family: var(--font-body); font-weight: var(--fw-semibold); color: var(--muted);
  font-size: var(--fs-base); margin-left: var(--s-1); }
.catalog-bar .cnt-note { display: block; font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; letter-spacing: 0; text-transform: none; }

/* List/grid view switch. */
.viewtog { display: inline-flex; gap: 2px; border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  padding: 2px; background: var(--surface); box-shadow: var(--e-1); }
.viewtog button { display: inline-grid; place-items: center; width: 32px; height: 26px; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: transparent; color: var(--muted); transition: all var(--dur) var(--ease); }
.viewtog button:hover { color: var(--ink); }
.viewtog button.is-active { background: var(--ink); color: var(--surface); }
.viewtog .ic { width: 16px; height: 16px; }

/* Grid tiles: image-forward, single column inside the card. */
.results--grid .card-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); }
.results--grid .card-thumb { width: 100%; height: 140px; }
.results--grid .card-thumb img { width: 44%; height: 64%; }
.results--grid .title { min-height: 2.5em; }
.results--grid .price-side { text-align: left; white-space: normal; }
.results--grid .attrs { display: none; }
.results--grid .toggle, .results--grid .offers { display: none; }

/* == Product page ========================================================= */
.crumbs { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); margin: var(--page-top) 0 var(--s-5); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.product { display: grid; grid-template-columns: 420px 1fr; gap: var(--s-7); align-items: start; }
.gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.gallery-main { aspect-ratio: 4 / 3; background: #fff; border: var(--bw) solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e-1); display: grid; place-items: center;
  overflow: hidden; padding: var(--s-5); position: relative; }
/* Фото — absolute inset:0: бокс = контейнер (content-box, минус padding), object-fit:contain
   вписывает целиком. height/max-height:100% в aspect-ratio-контейнере НЕ резолвится (Chrome) —
   фото перерастало и низ резался overflow:hidden; absolute от inset не зависит от % высоты. */
.gallery-main img { object-fit: contain; }
/* width/height:100% обязательны: <img> — replaced element, при absolute+inset:0 без них
   берёт intrinsic-размер (перерастал контейнер, низ резался), а не растягивается как <div>. */
.gallery-main img.is-zoom { cursor: zoom-in; position: absolute; inset: 0; width: 100%; height: 100%; }  /* клик → лайтбокс */

/* Лайтбокс — превью фото поверх страницы (надёжнее window.open: попап-блокеры его глушат). */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.86);
  display: none; place-items: center; padding: var(--s-5); cursor: zoom-out; }
.lightbox[aria-hidden="false"] { display: grid; }
.lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; border-radius: var(--r-card); }
.gallery-main img.is-ph { width: 46%; height: 46%; opacity: .85; padding: 0; }  /* заглушка категории */
/* превью: горизонтальный ряд с переносом; клик меняет главное фото */
.gallery-thumbs { display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent; padding-bottom: var(--s-1); }
.gallery-thumbs::-webkit-scrollbar { height: 6px; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
.gthumb { scroll-snap-align: start; }
.gthumb { width: 64px; height: 64px; flex: none; padding: 6px; background: #fff; cursor: pointer; overflow: hidden;
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); display: grid; place-items: center;
  transition: border-color var(--dur) var(--ease); }
.gthumb:hover { border-color: var(--ink-2); }
.gthumb.is-active { border-color: var(--ink); border-width: var(--bw-2); }
.gthumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-note { font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--muted); }
.pinfo h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-4xl);
  letter-spacing: -.01em; margin: 0 0 var(--s-2); }
.meta-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
/* flex-wrap: на узком экране широкий диапазон цены переносит текст, а РРЦ раньше «липла» к
   первой строке (баг выравнивания). С wrap РРЦ уходит на свою строку под цену; десктоп (влезает) не меняется. */
.price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); }
.price-block .p { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-5xl); }
.rrp-cap { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); white-space: nowrap; }
.avail { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); margin-bottom: var(--s-5); }
.avail b { color: var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.spec { width: 100%; }
.spec td { padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--line-2); vertical-align: top; }
.spec tr:last-child td { border-bottom: 0; }
.spec td:first-child { color: var(--muted); font-weight: var(--fw-semibold); font-size: var(--fs-base); width: 44%; padding-right: var(--s-4); }
.spec td:last-child { font-weight: var(--fw-semibold); }
/* группы характеристик (как отдаёт дистрибьютор): заголовок группы + таблица */
.spec-group + .spec-group { margin-top: var(--s-5); }
.spec-group-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted);
  padding-bottom: var(--s-2); margin-bottom: var(--s-1); border-bottom: var(--bw) solid var(--line); }
/* описание товара: короткое — подзаголовок под названием, длинное — в табе «Описание» */
.prod-subtitle { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--fs-1); line-height: 1.5; }
/* Счётчик товаров под H1 категории — вторичная подпись (не сливается с заголовком). */
.cat-count { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--fs-1); }
.cat-count .num { font-weight: var(--fw-semibold); color: var(--ink); }
.prod-desc { margin: 0; color: var(--ink); line-height: 1.6; font-size: var(--fs-1); }
/* длинный список характеристик схлопываем; кнопка раскрывает полностью */
.spec-body.is-collapsed { max-height: 360px; overflow: hidden; position: relative; }
.spec-body.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  pointer-events: none; background: linear-gradient(transparent, var(--surface)); }
.spec-more { margin-top: var(--s-4); }
.spec-src { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2);
  color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.spec-src-links a { color: var(--muted); font-weight: var(--fw-semibold); padding: 0 var(--s-1);
  text-decoration: underline; }
/* вкладка «Документы»: PDF-инструкции/datasheet Icecat, ленивый S3-прокси (tender-doc) */
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.doc-item a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--line); border-radius: var(--r-el); color: var(--ink);
  text-decoration: none; transition: border-color .15s, background .15s; }
.doc-item a:hover { border-color: var(--ink); background: var(--surface-2); }
.doc-item .ic { color: var(--muted); flex: none; }
.doc-name { flex: 1 1 auto; font-size: var(--fs-1); }
.doc-size { color: var(--muted); font-size: var(--fs-sm); flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .product { grid-template-columns: minmax(0, 1fr); } .gallery { max-width: 100%; } }

/* -- Совместимые аналоги (блок на /product) -------------------------------- */
.analog-section + .analog-section { margin-top: var(--s-6); }
.analog-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.analog-note { display: flex; align-items: baseline; gap: var(--s-2); color: var(--muted);
  font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
.analog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); }
.analog-card { display: flex; gap: var(--s-3); padding: var(--s-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.analog-card:hover { border-color: var(--ink-2); box-shadow: var(--e-1); }
.analog-thumb { flex: 0 0 56px; width: 56px; height: 56px; border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); background: var(--wash); display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.analog-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.analog-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.analog-brand { font-weight: var(--fw-bold); font-size: var(--fs-sm); display: flex;
  align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.analog-tag { font-size: var(--fs-2xs); }
.analog-title { font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.analog-price { font-weight: var(--fw-extrabold); font-size: var(--fs-md); margin-top: auto; }

/* -- Product tabs (Предложения / Характеристики / Габариты) ---------------- */
.ptab-bar { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: 0 0 var(--s-4);
  border-bottom: var(--bw) solid var(--line); }
.ptab { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg);
  color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: var(--s-2) var(--s-3); cursor: pointer; display: inline-flex;
  align-items: center; gap: var(--s-2); transition: color var(--dur) var(--ease); }
.ptab:hover { color: var(--ink-2); }
.ptab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.ptab-n { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted);
  background: var(--wash); border-radius: var(--r-pill); padding: 1px var(--s-2); }
.ptab.is-active .ptab-n { color: var(--ink); }

/* == Auth / price lock ==================================================== */
.authbox { display: inline-flex; align-items: center; gap: var(--s-3); margin-left: var(--s-2); }
/* thin divider splitting browse axes from the personal zone (positioned by renderAuth) */
.nav-sep { flex: none; width: var(--bw); height: 22px; background: var(--line);
  border-radius: var(--r-pill); margin: 0 var(--s-1); }
/* Гость: «Войти» — тихая ссылка; «Присоединиться» — залитый CTA. Селекторы `.nav a.*` нужны,
   чтобы побить специфичность `.nav a` (его `border: transparent` гасил пилюлю — это был баг). */
.nav a.authlink { color: var(--ink-2); border-color: transparent; }
.nav a.authlink:hover { background: var(--wash); color: var(--ink); }
.nav a.authjoin { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: var(--fw-bold); }
.nav a.authjoin:hover { filter: brightness(1.18); }
.authuser { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--ink); }
.authout { border: 0; background: transparent; cursor: pointer; font-family: var(--font-body);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); }
.authout:hover { color: var(--ink); }
.lock { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
a.lock:hover { color: var(--ink); text-decoration: underline; }
.lockbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-1);
  padding: var(--s-4) var(--s-6); font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2);
  margin-bottom: var(--s-4); }
.lockbar-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* == Login page =========================================================== */
.login-wrap { max-width: 420px; margin: var(--s-10) auto 0; }
.login-card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--e-1); padding: var(--s-7); }
.login-card h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xl); margin: 0 0 var(--s-2); }
.login-card .sub { font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--muted); margin: 0 0 var(--s-6); }
.field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); }
.field[hidden] { display: none; }  /* [hidden] перебивался display:flex выше */
.field label { font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-3) var(--s-4); outline: none; }
.field input:focus { border-color: var(--ink); }
/* Поле пароля с кнопкой «Показать/Скрыть» (login/forgot): кнопка абсолютом справа, инпут — с
   правым отступом под неё. Кнопка — комфортный тап-таргет (min-height 36). */
.pw-field { position: relative; display: flex; }
.pw-field input { flex: 1 1 auto; padding-right: 92px; }
.pw-toggle { position: absolute; right: var(--s-1); top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); font-family: var(--font-body);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); cursor: pointer;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); min-height: 36px; }
.pw-toggle:hover { color: var(--ink); background: var(--wash); }
/* .inp задаёт flex:1 1 220px для горизонтальных тулбаров (220px = ширина-basis). Внутри
   .field (flex-column) тот же basis становится ВЫСОТОЙ → input раздувался до ~220px
   (деталь КП: поля получателя). Сбрасываем flex в колоночном контексте — высота по контенту. */
.field .inp { flex: 0 0 auto; }
/* select в форме — тот же вид, что у .field input, + единый caret (как у select.fb-input). */
.field select { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-3) var(--s-4);
  outline: none; appearance: none; -webkit-appearance: none; padding-right: var(--s-6); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236E6B62'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 12px; }
.field select:focus { border-color: var(--ink); }
.login-err { display: none; color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  background: var(--wash); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
/* Регистрация компании: hero с маскотом (aside) + форма (login-card) */
.reg-hero { display: flex; gap: var(--s-8); align-items: center; max-width: 880px;
  margin: var(--s-10) auto 0; padding: 0 var(--s-4); }
.reg-hero .login-card { flex: 0 1 440px; margin: 0; }
.reg-aside { flex: 1 1 0; min-width: 0; }
.reg-mascot { width: 180px; height: 180px; display: block; margin-bottom: var(--s-4); }
.reg-aside__h { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-2xl); margin: 0 0 var(--s-4); line-height: 1.1; }
.reg-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.reg-bullets li { position: relative; padding-left: var(--s-6); font-weight: var(--fw-medium);
  font-size: var(--fs-md); color: var(--ink-2); line-height: 1.4; }
.reg-bullets li::before { content: "→"; position: absolute; left: 0; color: var(--muted); font-weight: var(--fw-bold); }
@media (max-width: 720px) {
  .reg-hero { flex-direction: column; gap: var(--s-5); max-width: 440px; align-items: stretch; }
  .reg-aside { text-align: center; }
  .reg-mascot { width: 112px; height: 112px; margin: 0 auto var(--s-2); }
  .reg-bullets { text-align: left; max-width: 320px; margin: 0 auto; }
}

/* Регистрация компании: карточка реквизитов из DaData + подсказки */
.reg-hint { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); min-height: 1em; }
.reg-opt { font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; color: var(--muted); }
.reg-party { background: var(--wash); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-3); margin-bottom: var(--s-4); }
.reg-party__name { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--ink); margin-bottom: var(--s-1); }
.reg-party__row { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); line-height: 1.5; }
.reg-party__row:empty { display: none; }
.reg-card { flex: 0 1 480px; }

/* Онбординг-визард (/register): прогресс, AI-профиль, рекламные блоки */
.wel-prog { margin-bottom: var(--s-5); }
.wel-prog__bar { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.wel-prog__bar i { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill);
  transition: width var(--dur) var(--ease); }
.wel-prog__steps { list-style: none; display: flex; justify-content: space-between; gap: var(--s-2);
  margin: var(--s-3) 0 0; padding: 0; }
.wel-prog__step { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); color: var(--muted); min-width: 0; }
.wel-prog__n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  flex: none; border-radius: var(--r-pill); border: var(--bw-2) solid var(--line); font-size: var(--fs-2xs);
  background: var(--paper); }
.wel-prog__step.is-active .wel-prog__n { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wel-prog__step.is-done .wel-prog__n { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wel-prog__step.is-active { color: var(--ink); }
.wel-prog__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .wel-prog__l { display: none; } }

.wel-ok, .wel-done-ic { color: var(--ink); }
.wel-ok { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent, var(--ink));
  margin-bottom: var(--s-2); }
.wel-ta { width: 100%; resize: vertical; }
.wel-chips { margin-top: var(--s-3); }
.wel-spin { display: none; }
.htmx-request .wel-spin, .wel-spin.htmx-request { display: inline-block; width: 12px; height: 12px;
  margin-left: var(--s-2); border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -1px; animation: wel-rot .6s linear infinite; }
@keyframes wel-rot { to { transform: rotate(360deg); } }

.wel-done-head { display: flex; align-items: center; gap: var(--s-3); }
.wel-done-ic { font-size: 26px; }
.wel-result { background: var(--wash); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-4); margin: var(--s-4) 0; }
.wel-result__big { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-4xl); color: var(--ink); line-height: 1.1; }
.wel-result__sub { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted);
  margin-bottom: var(--s-1); }

.wel-promo { margin-top: var(--s-5); }
.wel-promo__h { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.wel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 480px) { .wel-cards { grid-template-columns: 1fr; } }
.wel-card { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wel-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.wel-card__ic { font-size: 20px; line-height: 1; }
.wel-card__t { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--ink); }
.wel-card__d { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); line-height: 1.45; }
.wel-card__cta { margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
@media (max-width: 480px) { }
.wel-prof .wel-chips { margin-top: var(--s-3); }

/* Плавная смена шагов визарда */
.wel-step { animation: wel-step-in .28s var(--ease, ease) both; }
@keyframes wel-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wel-step { animation: none; } }

/* Промо-карточки: SVG-иконка вместо эмодзи */
.wel-card__ic { display: inline-flex; color: var(--ink); }
.wel-card__ic .ic { width: 22px; height: 22px; }

/* Категории-плитки (шаг профиля) */
.wel-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
@media (max-width: 480px) { .wel-tiles { grid-template-columns: repeat(2, 1fr); } }
.wel-tile { display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  padding: var(--s-2) var(--s-1); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); cursor: pointer; text-align: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wel-tile:hover { border-color: var(--ink); transform: translateY(-1px); }
.wel-tile__img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.wel-tile__l { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-2); line-height: 1.2; }
.wel-tile.is-on { border-color: var(--ink); background: var(--wash); box-shadow: inset 0 0 0 var(--bw) var(--ink); }
.wel-tile.is-on .wel-tile__l { color: var(--ink); }

/* Живое превью каталога под профиль */
.wel-prev-slot:empty { display: none; }
.wel-prev { background: var(--ink); color: var(--paper); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-3); animation: wel-step-in .25s var(--ease, ease) both; }
.wel-prev__big { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-3xl); line-height: 1.05; font-variant-numeric: tabular-nums; }
.wel-prev__sub { font-size: var(--fs-sm); font-weight: var(--fw-medium); opacity: .8; margin-top: 2px; }

.demo { margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--bw) solid var(--line);
  font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); line-height: 1.9; }
.demo b { color: var(--ink-2); font-weight: var(--fw-bold); }
.demo code { font-family: var(--font-body); background: var(--wash); border-radius: 6px; padding: 1px 7px;
  font-weight: var(--fw-bold); color: var(--ink); cursor: pointer; }

/* == Requests (RFQ ↔ supplier response) =================================== */
.req-list { display: flex; flex-direction: column; gap: var(--s-3); }
.req { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-4) var(--s-5); background: var(--paper); }
.req-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.req-buyer { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.req-date { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); }
.req-items { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-2); }
.req-note { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s-3); }
.req-in { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-2) var(--s-3); outline: none; width: 130px; }
.req-in:focus { border-color: var(--ink); }
.req-in--sm { width: 96px; }
.req-in--grow { flex: 1; min-width: 180px; width: auto; }
/* === Нативные form-контролы под дизайн-систему === */
/* Переключатели (checkbox/radio): брендовый цвет вместо системного синего. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent, var(--ink)); }
/* Кнопка «Выберите файл» — оформляем нативную ::file-selector-button под наши токены. */
input[type="file"]::file-selector-button {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3); margin-right: var(--s-3); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
input[type="file"]::file-selector-button:hover { background: var(--wash); border-color: var(--ink); }
/* Кастомная стрелка для всех select-ов сайта (фильтры, сортировка, админка) — убираем нативную,
   рисуем единый caret (--muted). Только select (не input/textarea с тем же классом). */
select.req-in, select.adm-search, select.sortsel, select.fb-input {
  appearance: none; -webkit-appearance: none; padding-right: var(--s-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236E6B62'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 12px; }
.req-response { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.req-resp-h { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-1); }
.req-resp-line { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); }
.req-resp-line b { font-family: var(--font-display); color: var(--ink); }
.req-msg { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-1); }
.req-wait { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-2); }

/* Open requests — board + create */
.open-create { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.open-resp { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); padding: var(--s-1) 0; }
.open-resp-sup { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); }
.open-resp b { font-family: var(--font-display); color: var(--ink); }
.quota { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); background: var(--wash);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); }

/* == Cabinet tabs ========================================================= */
.tabs { display: flex; gap: var(--s-4); align-items: center; margin: var(--s-2) 0 var(--s-6);
  border-bottom: var(--bw) solid var(--line); }
.tab { border: 0; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); color: var(--muted); padding: var(--s-3) var(--s-1); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color var(--dur) var(--ease); }
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* sticky tab-nav for the admin console (sits under the sticky masthead) */
.adm-tabs { position: sticky; top: var(--header-h); z-index: 40; background: var(--paper);
  margin-bottom: var(--s-5); padding-top: var(--s-2); }
.adm-toolbar--row { display: flex; gap: var(--s-3); align-items: center; }
.adm-toolbar--row .adm-search { flex: 1; }
@media (max-width: 560px) { .adm-tabs { position: static; flex-wrap: wrap; } }

/* == Marketplaces ========================================================= */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.mp-card { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-4); background: var(--paper); }
/* Тир наценки: строка-«шапка» + раскрывающаяся форма правки (<details>, без JS). */
.tier-row summary.tier-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); cursor: pointer; list-style: none; }
.tier-row summary.tier-head::-webkit-details-marker { display: none; }
.tier-actions { display: flex; align-items: center; gap: var(--s-1); flex: none; }
/* Карандаш — часть summary: клик по нему раскрывает форму штатным поведением details,
   отдельный обработчик не нужен. Курсор/hover как у соседней кнопки удаления. */
.tier-edit { display: inline-flex; align-items: center; }
.tier-row[open] .tier-edit { color: var(--ink); }
.tier-form { flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3);
  padding-top: var(--s-3); border-top: var(--bw) solid var(--line); }
.mp-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.mp-stat { margin-top: var(--s-2); }
.mp-count { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-2); }
.mp-webhook { margin-top: var(--s-3); }
.mp-webhook > summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
/* .ic не имеет базового размера → без явной ширины колокольчик раздувался (как .mp-guide summary .ic). */
.mp-webhook > summary .ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.mp-webhook-url { width: 100%; margin-top: var(--s-2); font-family: var(--font-mono, monospace); font-size: var(--fs-sm); }
.mp-act { margin-top: var(--s-3); }
/* Дашборд: период, график (фикс. высота при maintainAspectRatio:false), алерты */
.mp-period { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.mp-chart { position: relative; height: 280px; }
.mp-chart canvas { width: 100% !important; }
/* KPI дашборда МП: цифры компактнее глобальных .kpi (умещаются длинные суммы) */
.mp-kpis .value { font-size: var(--fs-3xl); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-kpis .unit { font-size: var(--fs-sm); }

.mp-alerts { display: flex; flex-direction: column; }
/* Строка-алерт кликабельна целиком: ведёт к товарам/на площадку. Стрелка-аффорданс справа. */
.mp-alert { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-2);
  border-bottom: var(--bw) solid var(--line); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
a.mp-alert:hover { background: var(--wash); }
.mp-alert:last-child { border-bottom: none; }
.mp-alert .ic { width: 20px; height: 20px; color: var(--warn); flex: none; }
.mp-alert--ok .ic { color: var(--ok); }
.mp-alert .mp-alert-txt { flex: 1; min-width: 0; }
.mp-alert .mp-alert-go { color: var(--muted); font-weight: var(--fw-bold); flex: none; }
.mp-alert b { font-weight: var(--fw-bold); }
/* «Показать все» — нативный details, без JS */
.mp-more { margin-top: var(--s-2); }
.mp-more > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); list-style: none; padding: var(--s-2) 0; }
.mp-more > summary::-webkit-details-marker { display: none; }
.mp-more > summary:hover { color: var(--ink); }
/* Сводка каталога по площадкам (когда продаж ещё нет — показываем что есть) */
.mp-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.mp-cat-item { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-4); background: var(--paper); }
/* Финансы — поток «куда ушла выручка»: выручка → минус удержания → чистая прибыль. */
/* Воронка продаж WB: горизонтальные бары показы→корзина→заказ→выкуп. */
.funnel { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.funnel-step { display: flex; flex-direction: column; gap: 2px; }
.funnel-bar { min-width: 40px; height: 30px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--s-3); background: var(--ink); color: var(--surface); border-radius: var(--r-sm);
  transition: width var(--dur) var(--ease); }
.funnel-step:nth-child(2) .funnel-bar { background: #4a7c59; }
.funnel-step:nth-child(3) .funnel-bar { background: #6b8e23; }
.funnel-step:nth-child(4) .funnel-bar { background: #b8860b; }
.funnel-v { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.funnel-l { font-size: var(--fs-sm); color: var(--muted); }
.fin-flow { display: flex; flex-direction: column; }
.fin-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) 0; border-bottom: var(--bw) dashed var(--line); }
.fin-row:last-child { border-bottom: 0; }
.fin-k { color: var(--ink); }
.fin-v { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.fin-neg .fin-k, .fin-neg .fin-v { color: var(--muted); }
.fin-total { margin-top: var(--s-1); border-top: var(--bw) solid var(--ink); padding-top: var(--s-3); }
.fin-total .fin-k { font-family: var(--font-display); font-weight: var(--fw-bold); }
.fin-total .fin-v { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.fb-stars { color: #f5a623; font-size: var(--fs-sm); letter-spacing: 1px; line-height: 1; }
.fb-stars-off { color: var(--line); }
.fb-ai { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm);
  color: var(--accent, var(--ink)); text-decoration: none; font-weight: var(--fw-semibold); }
.fb-ai:hover { text-decoration: underline; }
/* Инлайн-форма ответа на отзыв/вопрос (WB). summary=.fb-ai (как кнопка-ссылка). */
.fb-reply { margin-left: auto; }
.fb-reply > summary { list-style: none; cursor: pointer; }
.fb-reply > summary::-webkit-details-marker { display: none; }
.fb-reply-form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2);
  align-items: flex-end; }
.fb-reply-ta { width: 100%; resize: vertical; }
.fb-reply-res { margin-top: var(--s-2); }
/* Карточки отзывов/вопросов — единый стиль с чатами: бренд-аватар + тело. */
.fbcard-list { display: flex; flex-direction: column; gap: var(--s-2); }
.fbcard { display: flex; gap: var(--s-3); padding: var(--s-4); background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: var(--r-md, 12px); }
.fbcard--open { border-left: 3px solid var(--danger, #e5484d); }
.fbcard-body { min-width: 0; flex: 1; }
.fbcard-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.fbcard-prod { font-size: var(--fs-sm); color: var(--ink-2); font-weight: var(--fw-semibold); }
.fbcard-date { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.fbcard-text { margin-top: var(--s-2); color: var(--ink); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fbcard-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.fbcard-author { font-size: var(--fs-sm); }
.fbcard-foot .fb-reply, .fbcard-foot .fbcard-replylink { margin-left: auto; }
/* Лента чатов МП — строки как в мессенджере: бренд-аватар (монограмма) + тело + мета.
   Растровые логотипы площадок мутнели на 22px → монограмма в бренд-цвете (чётко, по токенам). */
.mpchat-list { display: flex; flex-direction: column; gap: var(--s-2); }
.mpchat { display: flex; gap: var(--s-3); padding: var(--s-4); background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: var(--r-md, 12px);
  transition: border-color .12s ease, background .12s ease; }
.mpchat:hover { border-color: var(--ink); }
.mpchat--need { border-left: 3px solid var(--danger, #e5484d); }
.mpchat-ava { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; user-select: none; color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-2xs); letter-spacing: .03em; }
.mpchat-ava--ozon { background: #005bff; }
.mpchat-ava--wb { background: #cb11ab; }
.mpchat-ava--ym { background: #ffcc00; color: #1a1a1a; }
.mpchat-ava--mm { background: #e6107a; }
.mpchat-ava--def { background: var(--wash); color: var(--muted); }
.mpchat-body { min-width: 0; flex: 1; }
.mpchat-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.mpchat-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--ink); }
.mpchat-ctx { font-size: var(--fs-xs); color: var(--muted); }
.mpchat-date { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.mpchat-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--danger, #e5484d); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center; }
.mpchat-prev { margin-top: 3px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Экран переписки чатов: две панели (список слева + тред справа), пузыри как в мессенджере. */
.mpchat[role="button"] { cursor: pointer; }
.mpchat.is-open { border-color: var(--ink); background: var(--wash); }
/* Фикс-высота 2-pane (как .msg-shell): список слева скроллится внутри своей колонки,
   тред справа во всю высоту — длинная лента чатов больше не тянет всю страницу вниз. */
.mpchat-shell { display: flex; gap: var(--s-4); align-items: stretch; height: calc(100dvh - 220px); min-height: 440px; }
.mpchat-col { flex: none; width: 380px; max-width: 42%; overflow-y: auto; }
.mpchat-col .mpchat-list { margin-top: var(--s-2); }
.mpchat-thread { flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: var(--bw) solid var(--line); border-radius: var(--r-md, 12px); background: var(--paper); }
.mpchat-thread-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); min-height: 440px; color: var(--muted); text-align: center; padding: var(--s-5); }
/* у .ic нет базового размера (задаётся в контексте) → в пустой панели иконка раздувалась */
.mpchat-thread-empty .ic { width: 56px; height: 56px; opacity: .45; }
.mpchat-thread-empty p { max-width: 280px; margin: 0; }
.mpthread { display: flex; flex-direction: column; min-height: 440px; max-height: 72vh; }
.mpthread-head { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line); }
.mpthread-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); }
.mpthread-sub { font-size: var(--fs-xs); color: var(--muted); }
.mpthread-msgs { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.mbubble { max-width: 78%; align-self: flex-start; background: var(--wash); border-radius: 14px;
  padding: var(--s-2) var(--s-3); }
.mbubble--mine { align-self: flex-end; background: var(--ink); color: var(--surface); }
.mbubble-text { white-space: pre-wrap; line-height: 1.45; font-size: var(--fs-sm); word-break: break-word; }
.mbubble-time { font-size: var(--fs-2xs); opacity: .6; margin-top: 2px; text-align: right; }
.mpthread-reply { display: flex; gap: var(--s-2); align-items: flex-end; padding: var(--s-3) var(--s-4);
  border-top: var(--bw) solid var(--line); }
.mpthread-reply textarea { flex: 1; resize: vertical; min-height: 38px; }
.mpthread-noreply { padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--line); font-size: var(--fs-sm); }
@media (max-width: 860px) {
  .mpchat-shell { flex-direction: column; height: auto; }
  .mpchat-col { width: 100%; max-width: none; overflow: visible; }
  .mpchat-thread { width: 100%; }
}
.mp-cat-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.mp-cat-val { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xl); margin-top: var(--s-1); }
.mp-cat-sub { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.mp-note { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--s-4); }
.mp-note .ic { width: 18px; height: 18px; flex: none; }
/* Мастер «где взять ключ» — аккордеоны по площадкам в форме подключения */
.mp-guide { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 560px; }
.mp-guide details { border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.mp-guide summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; padding: var(--s-3) var(--s-4);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); list-style: none; }
.mp-guide summary::-webkit-details-marker { display: none; }
.mp-guide summary .ic { width: 16px; height: 16px; flex: none; color: var(--muted); }
.mp-guide details[open] summary { border-bottom: var(--bw) solid var(--line); }
.mp-guide ol { margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-7); font-size: var(--fs-sm);
  color: var(--ink-2); font-weight: var(--fw-medium); line-height: 1.6; }
.mp-guide code { background: var(--wash); padding: 0 4px; border-radius: 4px; font-size: var(--fs-xs); }
.cab-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.cab-sync { margin: 0; }

/* == Переходы между страницами витрины (cross-document View Transitions) ===
   Полная MPA-навигация (обычные ссылки витрины, без hx-boost) → нативный плавный
   переход БЕЗ JS. Шапка/футер получают свой view-transition-name → стоят на месте,
   плавно сменяется только контент. Прогрессивно: Safari/Firefox без поддержки
   переходят как раньше. keyframes vt-in/vt-out — общие с переходами кабинета ниже. */
@view-transition { navigation: auto; }
.masthead { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
::view-transition-old(root) { animation: vt-out .12s ease both; }
::view-transition-new(root) { animation: vt-in .18s ease both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* == Cabinet shell (sidebar + main) ====================================== */
.cab-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s-7); align-items: start;
  /* Воздух между нижней границей sticky-шапки и контентом: иначе и сайдбар, и колонка
     «прижаты к полоске» (фидбек #1566). */
  padding-top: var(--s-6); }
/* Меню в обычном потоке (не sticky): при скролле уезжает ВМЕСТЕ с контентом — скроллится
   страница целиком, а не контентная область отдельно от прилипшего меню. */
.cab-side { align-self: start; }
.cab-nav { display: flex; flex-direction: column; gap: 2px; }
/* App-like переходы между разделами: hx-boost на .cab-nav оборачивает своп #appMain
   (hx-swap ...transition:true) в View Transitions. Анимируем ТОЛЬКО контентную область
   (свой view-transition-name) — статичный сайдбар/шапка не мигают. Прогрессивно:
   браузеры без поддержки свопают мгновенно, как раньше. */
#appMain { view-transition-name: appmain; }
::view-transition-old(appmain) { animation: vt-out .12s ease both; }
::view-transition-new(appmain) { animation: vt-in .18s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(appmain), ::view-transition-new(appmain) { animation: none; }
}
/* ── Shared-element морфинг: строка списка → заголовок detail (drill-down) ──
   Кликнутая ссылка-источник (data-vt-src) получает имя cab-hero через app.js; заголовок
   detail несёт тот же (.vt-hero). При hx-boost-свопе #appMain (transition:true) браузер
   морфит «#123» в «Заказ #123» — разворачивание карточки, как в нативном приложении.
   Прогрессивно: без View Transitions — обычный мгновенный своп. */
.vt-hero { view-transition-name: cab-hero; }
::view-transition-group(cab-hero) { animation-duration: .26s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(cab-hero) { animation: none; } }
/* Группа-аккордеон: заголовок = кнопка-тоггл с кареткой; пункты в .cab-grp-items. */
.cab-grp-wrap { display: flex; flex-direction: column; gap: 2px; }
.cab-grp { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted);
  padding: var(--s-4) var(--s-3) var(--s-2); border-radius: var(--r-el); }
.cab-grp:hover { color: var(--ink); }
.cab-grp-wrap:first-child .cab-grp { padding-top: 0; }
.cab-grp-caret { width: 13px; height: 13px; flex: none; opacity: .55; transition: transform .15s ease; }
.cab-grp[aria-expanded="true"] .cab-grp-caret { transform: rotate(90deg); }
.cab-grp-items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cab-grp-wrap.is-collapsed .cab-grp-items { display: none; }
.cab-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--ink-2);
  text-decoration: none; transition: background var(--t-fast, .12s), color var(--t-fast, .12s); }
.cab-link:hover { background: var(--wash); color: var(--ink); }
.cab-link.is-active { background: var(--ink); color: var(--surface); font-weight: var(--fw-bold); }
.cab-link .cab-ic { width: 18px; height: 18px; flex: none; opacity: .85; }
.cab-link.is-active .cab-ic { opacity: 1; }
.cab-link--soon { color: var(--muted); cursor: default; }
.cab-link--soon:hover { background: transparent; color: var(--muted); }
.cab-soon { margin-left: auto; font-style: normal; font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--wash);
  border-radius: var(--r-pill); padding: 1px var(--s-2); }
/* ↗ у ссылок на витрину (новая вкладка) — приглушённая стрелка, прижата вправо. */
.cab-ext { margin-left: auto; font-style: normal; color: var(--muted); opacity: .7; }
.cab-link--ext.is-active .cab-ext { color: var(--surface); opacity: .85; }
/* Нижний отступ под плавающий .chat-fab (≈80px), чтобы кнопка-ассистент в правом
   нижнем углу не накрывала действия последней строки таблиц (Скрыть/Открыть/прайс). */
.cab-main { min-width: 0; padding-bottom: 96px; }
/* Заголовок-первенец колонки выравниваем по верху с сайдбаром (у .page-title есть margin-top
   --s-7, из-за него заголовок висел на ~28px ниже пункта меню «Обзор» → меню «не ровно»).
   Ловим и прямой .page-title, и обёрнутый в .cab-head (Обзор: cab-head > div > h1). */
.cab-main > .page-title:first-child,
.cab-main > .cab-head:first-child .page-title,
.cab-main > .tabs:first-child { margin-top: 0; }  /* хаб-вкладки первыми — единый отступ, не +s-2 */
/* Upsell-заглушка: блок не подключён для типа компании (гейтинг по прямой ссылке). */
.cab-locked { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3); max-width: 440px; margin: var(--s-7) auto; padding: var(--s-6) var(--s-5);
  border: var(--bw) solid var(--line); border-radius: var(--r-2); background: var(--wash); }
.cab-locked-ic { display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: var(--r-pill); background: var(--paper); border: var(--bw) solid var(--line); }
.cab-locked-ic .ic { width: 26px; height: 26px; opacity: .6; }
.cab-locked-ttl { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.cab-locked-txt { color: var(--muted); margin: 0; }
.cab-locked-act { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; justify-content: center; }

/* --- Склады продавца (/cabinet/company, карточка «Склады», мультисклад) --- */
.wh-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.wh-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-el); }
.wh-item-title { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semibold); }
.wh-item-title .ic { opacity: .7; flex: none; }
.wh-city { color: var(--muted); font-weight: var(--fw-normal); }
.wh-item-meta { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.wh-item-act { display: flex; gap: var(--s-2); flex: none; }
.wh-form { margin-top: var(--s-3); }
.wh-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.wh-check { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-normal); cursor: pointer; }
/* Кастом-чекбокс в стиле дизайн-системы (вместо нативного): рамка --line, при отметке — --ink + галочка. */
.wh-check input[type="checkbox"] { flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  width: 18px; height: 18px; border: var(--bw) solid var(--line); border-radius: 6px; background: var(--paper);
  cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.wh-check input[type="checkbox"]:hover { border-color: var(--ink); }
.wh-check input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.wh-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 2px;
  width: 5px; height: 9px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wh-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.wh-req { color: var(--danger, #c0392b); }
.wh-form-act { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 560px) { .wh-checks { grid-template-columns: 1fr; } .wh-item { flex-wrap: wrap; } }

/* --- Под-табы раздела (/cabinet/company): клиентский переключатель панелей --- */
.ptabs { display: flex; gap: var(--s-1); flex-wrap: wrap; border-bottom: var(--bw) solid var(--line); margin-bottom: var(--s-4); }
.ptab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--s-3); font: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-md);
  color: var(--muted); cursor: pointer; white-space: nowrap; }
.ptab:hover { color: var(--ink); }
.ptab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.ptab-panel { display: none; }
.ptab-panel.is-active { display: block; }

/* --- B2B-чат /cabinet/messages: список диалогов + активный тред --- */
.msg-shell { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-4);
  height: calc(100vh - 220px); min-height: 420px; margin-top: var(--s-4); }
.msg-list { border: var(--bw) solid var(--line); border-radius: var(--r-2);
  overflow-y: auto; background: var(--paper); }
.msg-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3);
  border-bottom: var(--bw) solid var(--line); text-decoration: none; color: var(--ink); }
.msg-item:hover { background: var(--wash); }
.msg-item.is-active { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); }
.msg-item.is-unread .msg-item-peer { font-weight: var(--fw-bold); }
.msg-item-body { min-width: 0; flex: 1; }
.msg-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.msg-item-peer { font-weight: var(--fw-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-time { font-size: var(--fs-3xs); color: var(--muted); flex: none; }
.msg-item-prev { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ink); flex: none; }
.msg-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-2); padding: var(--s-5); }
.msg-empty .ic { width: 28px; height: 28px; opacity: .5; }

/* Аватар-инициалы (список + лента) */
.msg-ava { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; user-select: none; }
.msg-ava--sm { width: 30px; height: 30px; font-size: var(--fs-3xs); align-self: flex-end; }
/* МП-аватар в едином инбоксе (Task 1, /cabinet/inbox) — переиспользует цвета монограмм
   .mpchat-ava--* (выше), но с размером .msg-ava--sm. Compound-селектор (2 класса, выше
   специфичность одиночного .msg-ava) — перебивает background:var(--ink) НЕЗАВИСИМО от
   порядка правил в файле (без него .msg-ava, объявленный позже .mpchat-ava--*, выигрывал
   бы кассированием при равной специфичности). */
.msg-ava.mpchat-ava--ozon { background: #005bff; }
.msg-ava.mpchat-ava--wb { background: #cb11ab; }
.msg-ava.mpchat-ava--ym { background: #ffcc00; color: #1a1a1a; }
.msg-ava.mpchat-ava--def { background: var(--wash); color: var(--muted); }

/* Активный тред */
.msg-main { display: flex; flex-direction: column; border: var(--bw) solid var(--line);
  border-radius: var(--r-2); background: var(--paper); min-width: 0; overflow: hidden; }
.msg-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s-2); padding: var(--s-6); }
.msg-blank .ic { width: 32px; height: 32px; opacity: .5; }
.msg-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line); }
.msg-head-main { min-width: 0; }
.msg-head-peer { font-weight: var(--fw-bold); }
.msg-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: var(--fs-3xs); color: var(--muted); background: var(--wash);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 1px var(--s-2); }
.msg-chip .ic { width: 12px; height: 12px; opacity: .7; }
.msg-feed { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.msg-day { text-align: center; margin: var(--s-3) 0 var(--s-2); }
.msg-day span { font-size: var(--fs-3xs); color: var(--muted); background: var(--wash);
  border-radius: var(--r-pill); padding: 2px var(--s-3); }
.msg-row { display: flex; align-items: flex-end; gap: var(--s-2); }
.msg-row--me { justify-content: flex-end; }
.msg-row--them { justify-content: flex-start; }
.msg-bubble { max-width: 72%; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); }
.msg-row--them .msg-bubble { background: var(--wash); border: var(--bw) solid var(--line);
  border-bottom-left-radius: var(--r-1); }
.msg-row--me .msg-bubble { background: var(--ink); color: var(--paper); border-bottom-right-radius: var(--r-1); }
.msg-sender { font-size: var(--fs-3xs); font-weight: var(--fw-bold); opacity: .7; margin-bottom: 2px; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
/* Вложения в пузыре (T5): картинки — превью-миниатюра, прочее — файл-строка. color:inherit/
   currentColor — работает и на тёмном .msg-row--me (color:paper), и на светлом --them бабле. */
.msg-atts { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-2); }
.msg-att-img { display: block; }
.msg-att-img img { display: block; max-width: 220px; max-height: 220px; width: 100%; height: auto;
  border-radius: var(--r-1); object-fit: cover; }
.msg-att-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-xs); color: inherit;
  text-decoration: none; border: var(--bw) solid color-mix(in srgb, currentColor 25%, transparent);
  background: color-mix(in srgb, currentColor 6%, transparent); transition: background .12s; }
.msg-att-file:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.msg-att-file-ic { flex: 0 0 auto; display: inline-flex; opacity: .75; }
.msg-att-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-medium); }
.msg-att-file-size { flex: 0 0 auto; opacity: .65; font-size: var(--fs-3xs); }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; }
.msg-time { font-size: var(--fs-3xs); opacity: .55; }
.msg-check { font-size: var(--fs-3xs); opacity: .55; letter-spacing: -3px; padding-right: 2px; }
.msg-check.is-read { opacity: 1; color: #5ab0ff; }
.msg-compose { display: flex; gap: var(--s-2); padding: var(--s-3); border-top: var(--bw) solid var(--line);
  align-items: flex-end; }
.msg-input { flex: 1; padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-1); font: inherit; resize: none; max-height: 120px; line-height: 1.4; }
.msg-input:focus { outline: none; border-color: var(--ink); }
.msg-send { flex: none; padding: var(--s-2) var(--s-3); }
.msg-send .ic { width: 18px; height: 18px; }
/* Скрепка композера: вложения оператора (раньше отправить файл клиенту было нельзя вовсе). */
.msg-clip { flex: none; background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: var(--s-2); border-radius: var(--r-1); line-height: 0;
  transition: color var(--dur) var(--ease); }
.msg-clip:hover { color: var(--ink); }
.msg-clip .ic { width: 18px; height: 18px; }
/* Имя выбранного файла под композером; flex-basis 100% — переносится на свою строку. */
.msg-files-hint { flex-basis: 100%; padding: 0 var(--s-1); }
/* Бейдж непрочитанных в пункте сайдбара «Сообщения» */
.cab-badge-slot { margin-left: auto; }
.cab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 1; }
@media (max-width: 860px) {
  .msg-shell { grid-template-columns: 1fr; height: auto; }
  .msg-list { max-height: 220px; }
  .msg-main { min-height: 420px; }
}

@media (max-width: 860px) {
  /* Мобильная шапка КОМПАКТНЕЕ десктопной: реальная высота .masthead при скролле
     ~61px, а не 76px. Поэтому на мобиле занижаем --header-h — иначе sticky-таббары
     (.cab-side кабинета, .adm-tabs админки) липнут на top:76px и под шапкой остаётся
     ~15px-зазор, сквозь который при скролле ПРОСВЕЧИВАЕТ контент. Значение с запасом
     ≤ компактной шапки: лишний нахлёст перекрывается шапкой (z-50), зазора нет. */
  :root { --header-h: 56px; }
  .cab-shell { grid-template-columns: 1fr; gap: var(--s-4); }
  /* Навигация кабинета на мобиле уехала В БУРГЕР (off-canvas drawer, см. .nav.is-open):
     горизонтальная скролл-полоса .cab-nav убрана. Внутри drawer .cab-side — обычный
     вертикальный grouped-список (десктопные стили .cab-nav/.cab-grp/.cab-link). */
}
.empty-box--cta { text-align: center; line-height: 1.6; padding: var(--s-6) var(--s-4); font-size: var(--fs-md); }
.mp-form { max-width: 460px; }
.mp-form select { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md);
  color: var(--ink); padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); }
.mp-form select:focus { border-color: var(--ink); }

/* == Flash messages ======================================================= */
.flash { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: var(--fw-semibold);
  font-size: var(--fs-base); margin: var(--s-4) 0; border: var(--bw) solid var(--line); }
.flash--ok { background: color-mix(in srgb, var(--ok, #18794e) 12%, var(--paper)); border-color: var(--ok, #18794e); }
.flash--err { background: color-mix(in srgb, var(--danger, #c0392b) 12%, var(--paper)); border-color: var(--danger, #c0392b); }
.flash--warn { background: color-mix(in srgb, var(--warn, #b7791f) 12%, var(--paper)); border-color: var(--warn, #b7791f); }

/* == Cabinet bits (КП total, data-quality) ================================ */
.kp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-5); flex-wrap: wrap; }
.q-note { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); margin-top: var(--s-3); }

/* == Brand pages ========================================================== */
.brand-head { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-7); }
.brand-head .page-title, .brand-head .page-sub { margin-top: 0; }
.brand-head .page-title { margin-bottom: var(--s-1); }
.brand-mark { flex: none; width: 64px; height: 64px; border-radius: var(--r-el); background: var(--ink);
  color: var(--surface); display: grid; place-items: center; font-family: var(--font-display);
  font-weight: var(--fw-extrabold); font-size: var(--fs-3xl); letter-spacing: -.02em; }
.group-h { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-7) 0 var(--s-4); }
.group-h > span:first-child { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-2xl); }
.group-c { color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.subtitle-link { color: inherit; font-weight: var(--fw-bold); }
.subtitle-link:hover { color: var(--ink); text-decoration: underline; }

/* brands index grid */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.brand-card { display: flex; min-width: 0; align-items: center; gap: var(--s-4); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-1);
  padding: var(--s-5); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.brand-card:hover { transform: translateY(-2px); box-shadow: var(--e-2); border-color: var(--ink); }
.brand-card .brand-mark { width: 48px; height: 48px; border-radius: var(--r-sm); font-size: var(--fs-xl); }
.brand-mark--logo { background: #fff; border: var(--bw) solid var(--line); padding: 6px; overflow: hidden; }
/* width/height:100% (а не max-*) — html-атрибут height=48 + max-height:100% не ужимался
   под 6px padding (36px бокс), лого 48px переполняло вниз и обрезалось overflow:hidden,
   логотип «не по центру». 100% = ровно контент-бокс, object-fit:contain центрирует. */
.brand-mark--logo img { width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .85; transition: filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.brand-card:hover .brand-mark--logo img { filter: grayscale(0); opacity: 1; }
.brand-inline { display: inline-flex; align-items: center; gap: 5px; }
.brand-logo-inline { height: 14px; width: auto; max-width: 56px; object-fit: contain; vertical-align: middle; }
.brand-card-body { min-width: 0; }  /* flex-item сжимаем → длинное имя не распирает карточку */
.brand-card-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-card-meta { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); margin-top: 1px;
  font-variant-numeric: tabular-nums; }

/* brands index — editorial header + поиск */
.brands-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8);
  flex-wrap: wrap; margin-top: var(--page-top); padding-bottom: var(--s-5); border-bottom: var(--bw-2) solid var(--ink); margin-bottom: var(--s-7); }
.brands-head .page-title, .brands-head .page-sub { margin: 0; }
.brands-head .page-sub { margin-top: var(--s-2); }
.brands-head-r { display: flex; align-items: flex-end; gap: var(--s-6); }
.brands-count { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xl);
  line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.brands-count small { display: block; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); font-weight: var(--fw-bold); margin-top: 3px; }
.brands-search { display: flex; align-items: center; gap: var(--s-3); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 11px 18px; min-width: 280px;
  box-shadow: var(--e-1); transition: border-color var(--dur) var(--ease); }
.brands-search:focus-within { border-color: var(--ink); }
.brands-search svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.brands-search.htmx-request svg { animation: spin .7s linear infinite; color: var(--ink); }
.brands-search input { border: 0; background: transparent; font-family: var(--font-body); font-size: var(--fs-lg);
  font-weight: var(--fw-semibold); color: var(--ink); width: 100%; outline: none; }
.brands-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* brands index — секционные рейлы */
.brands-rail { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-8) 0 var(--s-4); }
.brands-rail b { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-xl); }
.brands-rail span { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-bold); }
.brands-rail .ln { flex: 1; height: 1px; background: var(--line); }

/* brands index — featured «полки» */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.feat-tile { display: flex; flex-direction: column; background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--e-1); text-decoration: none; color: var(--ink);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease); }
.feat-tile:hover { transform: translateY(-3px); box-shadow: var(--e-2); border-color: var(--ink); }
.feat-shelf { height: 116px; display: grid; place-items: center; background: #fff; padding: 22px;
  border-bottom: var(--bw) solid var(--line-2); }
.feat-shelf img { max-width: 78%; max-height: 60px; object-fit: contain;
  filter: grayscale(1); opacity: .82; transition: filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.feat-tile:hover .feat-shelf img { filter: grayscale(0); opacity: 1; }
.feat-mono { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-4xl);
  color: var(--ink); letter-spacing: -.02em; }
.feat-b { padding: var(--s-4) var(--s-5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.feat-b .nm { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); }
.feat-b .ct { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-head-r { width: 100%; justify-content: space-between; }
  .brands-search { flex: 1; min-width: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.adm-flags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.adm-flag { font-weight: var(--fw-extrabold); font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase;
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-pill); padding: 2px var(--s-2); color: var(--ink); white-space: nowrap; }
.adm-flag--soft { border: var(--bw) solid var(--line); color: var(--muted); }
.adm-sec { font-weight: var(--fw-bold); font-size: var(--fs-3xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.adm-name-btn { border: 0; background: transparent; cursor: pointer; padding: 0; text-align: left;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink); }
.adm-name-btn:hover { text-decoration: underline; }
.adm-detail { border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--paper);
  padding: var(--s-5) var(--s-6); }
.adm-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.adm-detail .adm-sec { margin-top: var(--s-4); }
.adm-num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.adm-num small { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); }
.adm-q { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); }
.adm-q-item { border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-4); background: var(--paper); }
.adm-q-item .v { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-4xl); }
.adm-q-item .l { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-1); }
.adm-q-item .h { font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s-2); line-height: 1.4; }
/* clickable signal (filters the clusters table) */
button.adm-q-item { width: 100%; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
button.adm-q-item:hover { border-color: var(--ink); }
.adm-q-item.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--wash); }
.adm-filter { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink-2); }
.adm-filter b { font-family: var(--font-display); color: var(--ink); }
/* table toolbar (search) + pagination */
.adm-toolbar { margin-bottom: var(--s-4); }
.adm-search { width: 100%; max-width: 360px; font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-base); color: var(--ink); background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); outline: none; }
.adm-search::placeholder { font-weight: var(--fw-medium); color: var(--muted); }
.adm-search:focus { border-color: var(--ink); }
.adm-pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--bw) solid var(--line-2); }
.adm-pager-info { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* == Utilities ============================================================ */
.t-scroll { overflow-x: auto; }           /* wrapper for wide tables */
.is-hidden { display: none !important; }   /* JS-toggled visibility */
/* visually-hidden but readable by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* == Loading skeletons ==================================================== */
@keyframes shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.skeleton { border-radius: var(--r-sm); background: var(--wash);
  background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size: 460px 100%; background-repeat: no-repeat; animation: shimmer 1.15s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.sk-line { height: 12px; margin: var(--s-2) 0; }
.sk-card { height: 96px; margin-bottom: var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--r-card); }
.sk-row { height: 44px; margin-bottom: var(--s-2); }
.sk-kpi { height: 92px; border-radius: var(--r-card); } .sk-w-60 { width: 60%; } .sk-w-80 { width: 80%; }

/* == Empty state ========================================================== */
.empty { text-align: center; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-md);
  padding: var(--s-9) var(--s-4); border: var(--bw-2) dashed var(--line); border-radius: var(--r-card); }
.empty .empty-emoji { font-size: var(--fs-3xl); opacity: .5; display: block; margin-bottom: var(--s-2); }
.empty .empty-emoji .ic { width: 34px; height: 34px; }

/* == Mobile (phones) ====================================================== */
@media (max-width: 560px) {
  .wrap { padding: 0 var(--s-4); }
  /* бургер: nav свёрнут в выпадающее меню — на первом экране только лого + кнопка */
  .masthead { gap: var(--s-3); }                 /* компактный хедер — sticky из базового правила сохраняется */
  .brand { flex: 1; }                            /* лого слева, кнопка-бургер уходит вправо (space-between) */
  .nav-toggle { display: inline-flex; }
  .nav { display: none; flex-direction: column; align-items: stretch; gap: var(--s-1);
    width: 100%; order: 3; margin-top: var(--s-1); padding-top: var(--s-2);
    border-top: var(--bw) solid var(--line); }
  .nav.is-open { display: flex; }                /* раскрытое меню */
  .nav a { padding: var(--s-3); font-size: var(--fs-base); border-radius: var(--r-sm);
    min-height: 44px; display: flex; align-items: center; }  /* touch-target ≥44px на мобиле */
  .nav-sep { display: none; }
  .authbox { width: 100%; margin-left: 0; padding-left: 0; border-left: 0;
    border-top: var(--bw) solid var(--line); padding-top: var(--s-2); margin-top: var(--s-2); }
  /* search stacks: input over a full-width button */
  .search { flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-3); }
  .search input { flex: none; }
  .search .btn { width: 100%; }
  /* product/result card: drop the price column under the title, shrink thumb */
  .card-head { grid-template-columns: 40px minmax(0, 1fr); }
  .title { overflow-wrap: anywhere; }  /* длинный артикул/слово в названии не распирает карточку */
  .card-thumb { width: 40px; height: 40px; }
  .price-side { grid-column: 1 / -1; text-align: left; margin-top: var(--s-2); }
  /* dense tables (.t-stack) become stacked «label: value» cards — no horizontal scroll */
  table.t-stack thead { display: none; }
  table.t-stack { min-width: 0; }  /* сброс desktop min-width (.prod-table) — карточки во всю ширину */
  table.t-stack tbody, table.t-stack tr, table.t-stack td { display: block; width: 100%; }
  table.t-stack tr { border: var(--bw) solid var(--line); border-radius: var(--r-sm);
    padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); background: var(--paper); }
  table.t-stack td { border-bottom: 0; padding: 3px 0; min-width: 0; white-space: normal; }
  table.t-stack td[data-label]:not([data-label=""])::before { content: attr(data-label) ": "; color: var(--muted);
    font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; margin-right: var(--s-1); }
  table.t-stack .cell-num, table.t-stack .stock-cell, table.t-stack .cell-mono { white-space: normal; }
  table.t-stack td:first-child { padding-bottom: var(--s-2); margin-bottom: var(--s-2);
    border-bottom: var(--bw) solid var(--line-2); }
  table.t-stack .raw { max-width: none; }
  table.t-stack .src { display: inline-flex; }
}

/* == Blog ================================================================= */
.blog-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-5); }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e-1); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.blog-cover { display: block; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-cover.is-empty { display: grid; place-items: center; background: var(--wash); }
.blog-cover .blog-ph { width: 42px; height: 42px; color: rgba(39, 39, 39, .17); }
.blog-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1; }
.blog-cat { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.blog-card h2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-2xl); line-height: 1.2; margin: 0; }
.blog-card h2 a:hover { text-decoration: underline; }
.blog-excerpt { font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--ink-2); line-height: 1.5; }
.blog-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s-3); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); }
.pager { display: flex; gap: var(--s-4); align-items: center; justify-content: center; margin: var(--s-9) 0; }
.pager-info { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* article (single post) */
.article { max-width: 760px; margin: 0 auto; }
.article-kicker { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.article h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-5xl);
  line-height: 1.08; letter-spacing: -.01em; margin: var(--s-3) 0 var(--s-4); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  color: var(--muted); padding-bottom: var(--s-5); border-bottom: var(--bw) solid var(--line); }
.article-meta b { color: var(--ink); }
.article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); margin: var(--s-6) 0; }
.article-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--bw) solid var(--line); }

/* article body — markdown-rendered HTML (no utility classes), styled by element */
.article-body { font-size: var(--fs-xl); line-height: 1.75; color: var(--ink); font-weight: var(--fw-medium); }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: 1.2; margin: var(--s-8) 0 var(--s-3); }
.article-body h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); margin: var(--s-6) 0 var(--s-2); }
.article-body p { margin: 0 0 var(--s-5); }
.article-body ul, .article-body ol { margin: 0 0 var(--s-5) var(--s-6); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--s-2); }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--ink-2); }
.article-body strong { font-weight: var(--fw-bold); }
.article-body blockquote { margin: var(--s-6) 0; padding: var(--s-1) var(--s-5); font-style: italic;
  border-left: var(--bw-2) solid var(--ink); color: var(--ink-2); }
.article-body code { background: var(--wash); padding: 1px var(--s-2); border-radius: 6px; font-size: .9em; }
.article-body img { max-width: 100%; border-radius: var(--r-el); }
/* display:block + overflow-x:auto — широкая таблица из markdown скроллится внутри,
   а не распирает страницу на мобиле (узкие таблицы остаются по ширине контента). */
.article-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; margin: 0 0 var(--s-5); }
.article-body th, .article-body td { border: var(--bw) solid var(--line); padding: var(--s-2) var(--s-3); text-align: left; }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* == Tenders ==============================================================
   Карточка госзакупки: закон-бейдж · заголовок · заказчик · НМЦК + срок.
   Структурные данные (цена, дедлайн) — акцент; заголовок/заказчик клампятся
   для ровной сетки. Вся карточка кликабельна (stretched-link через ::after). */
.tender-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s-5); }
.tender-law { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); color: var(--ink); }
.tender-law::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--muted); }
.tender-law--fz44::before  { background: var(--ok); }
.tender-law--fz223::before { background: var(--warn); }
.tender-law--comm::before  { background: var(--ink-2); }
.tender-deadline { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-bold); white-space: nowrap; }
.tender-deadline .tender-days { display: inline-block; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none;
  font-weight: var(--fw-bold); color: var(--ink-2); padding: 2px var(--s-2); border-radius: var(--r-pill);
  background: var(--wash); }
.tender-deadline.is-warn .tender-days { color: var(--warn); background: var(--warn-bg); }
.tender-deadline.is-soon .tender-days { color: var(--danger); background: var(--danger-bg); }

@media (max-width: 560px) { }

/* ── Доска заявок на поставку (B2B-биржа спроса) ───────────────────────── */
.page-head-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }

.rq-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.rq-cat { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold);
  color: var(--ink); }
.rq-cat::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--ok); }
.rq-region { color: var(--muted); font-weight: var(--fw-bold); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-company { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Деталь заявки */
.rq-num { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--muted); }
.rq-detail .rq-head { margin-bottom: var(--s-3); }
.rq-detail-meta { display: flex; gap: var(--s-7); flex-wrap: wrap; margin: var(--s-3) 0; }
.rq-detail-meta > div { display: flex; flex-direction: column; gap: 2px; }
.rq-detail-meta .muted { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.rq-detail-meta strong { font-size: var(--fs-lg); }
.rq-desc { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.55; margin: var(--s-3) 0; white-space: pre-line; }

/* Таблицы позиций и откликов */
.rq-items { margin-top: var(--s-4); }
/* Таблица позиций (5 колонок) шире узкого экрана — скроллим её ВНУТРИ обёртки, иначе
   таблица распирает всю страницу по горизонтали (мобильный overflow формы запроса). */
.rq-items-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rq-items-tbl, .rq-resp-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: var(--s-2); }
@media (max-width: 560px) { .rq-items-tbl { min-width: 440px; } }
.rq-items-tbl th, .rq-resp-tbl th { text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); font-weight: var(--fw-bold); padding: var(--s-2) var(--s-3);
  border-bottom: var(--bw) solid var(--line); }
.rq-items-tbl td, .rq-resp-tbl td { padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--line-2);
  vertical-align: top; }
.rq-items-tbl td .inp { width: 100%; }
.rq-resp-comment { color: var(--ink-2); max-width: 320px; }
.rq-resp-tbl tr.is-accepted { background: var(--ok-bg); }
.rq-resp-tbl tr.is-rejected { opacity: .55; }
.rq-resp-actions { display: inline-flex; gap: var(--s-2); }

/* Формы заявки/отклика */
.rq-form { display: flex; flex-direction: column; gap: var(--s-4); }
.rq-form-author { font-size: var(--fs-md); color: var(--ink-2); }
.rq-form-row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.rq-form-row .rq-fld { flex: 1 1 200px; }
.rq-fld { display: flex; flex-direction: column; gap: var(--s-2); }
.rq-fld-l { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-bold); }
/* .inp задаёт flex:1 1 220px (для flex-ROW). В .rq-fld (flex-COLUMN) basis 220px ушёл бы в
   ВЫСОТУ → поле раздувалось до ~220px. flex:none возвращает нормальную высоту по контенту. */
.rq-fld .inp, .rq-fld textarea.inp { width: 100%; flex: none; }
.rq-inp-sm { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); }
.rq-form-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

/* Вложения (файлы заявки/отклика) */
.rq-files { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.rq-files a { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); color: var(--ink-2); }
.rq-files a:hover { color: var(--ink); text-decoration: underline; }
input[type="file"].inp { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); cursor: pointer; }

@media (max-width: 560px) { .rq-items-tbl, .rq-resp-tbl { font-size: var(--fs-2xs); } }

/* ── Плотный строчный список (тендеры · биржа заявок · входящие заявки) ──────
   Одна запись = одна строка: [тег] заголовок/мета … цена · срок/статус. Скан-режим
   вместо сетки карточек. Вся строка кликабельна (stretched-link через ::after).
   Общий компонент для витрины и кабинета (одни партиалы). */
.lrows { display: flex; flex-direction: column; background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--e-1); }
.lrow { position: relative; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line-2); color: inherit;
  transition: background var(--dur) var(--ease); }
.lrow:last-child { border-bottom: 0; }
.lrow:hover, .lrow:focus-within { background: var(--wash); }
/* Тег слева (закон/категория) — фикс-колонка для выравнивания заголовков */
.lrow-tag { flex: 0 0 auto; min-width: 96px; max-width: 200px; display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-tag::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--muted); }
.lrow-tag:empty::before { display: none; } /* пустой тег-слот (нет категории) — без точки, ширина сохраняется для выравнивания */
.lrow-tag--fz44::before  { background: var(--ok); }
.lrow-tag--fz223::before { background: var(--warn); }
.lrow-tag--comm::before  { background: var(--ink-2); }
.lrow-tag--cat::before   { background: var(--ok); }
/* Центр: заголовок + мета (заказчик/регион/контакт) под ним, обе в одну строку */
.lrow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lrow-title { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-title a { color: inherit; }
.lrow-title a:hover { text-decoration: underline; }
.lrow-title a::after { content: ""; position: absolute; inset: 0; } /* stretched-link: клик по всей строке */
.lrow-sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Право: цена (НМЦК/бюджет/оценка) — моноширинная колонка, дальше срок/статус */
.lrow-price { flex: 0 0 auto; min-width: 96px; text-align: right; font-family: var(--font-display);
  font-weight: var(--fw-extrabold); font-size: var(--fs-lg); letter-spacing: -.01em; white-space: nowrap; }
.lrow-price.is-empty { color: var(--muted); font-family: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.lrow-end { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-2); min-width: 116px; }
/* Пилюля срока подачи (до DD.MM · N дн) — тон по срочности */
.lrow-deadline { display: inline-flex; align-items: baseline; gap: var(--s-2); white-space: nowrap;
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-bold); }
.lrow-deadline .lrow-days { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm);
  color: var(--ink-2); padding: 1px var(--s-2); border-radius: var(--r-pill); background: var(--wash); }
.lrow-deadline.is-warn .lrow-days { color: var(--warn); background: var(--warn-bg); }
.lrow-deadline.is-soon .lrow-days { color: var(--danger); background: var(--danger-bg); }
/* Телефон: строка переносится — центр на всю ширину, цена/срок ниже слева */
@media (max-width: 640px) {
  .lrow { flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-3); }
  .lrow-tag { flex: 0 0 auto; min-width: 0; max-width: none; order: 1; }
  .lrow-main { flex: 1 1 100%; order: 3; }
  .lrow-end { order: 2; min-width: 0; margin-left: auto; }
  .lrow-price { order: 4; min-width: 0; font-size: var(--fs-md); }
  .lrow-price.is-empty { display: none; }
}

/* ── Админка: Емайлы / общение ─────────────────────────────────────────── */
/* под-табы внутри раздела (Почта / Диалоги) */
.subtabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.subtab { font-weight: var(--fw-bold); font-size: var(--fs-sm); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill); color: var(--ink-2); background: transparent;
  border: var(--bw) solid var(--line); cursor: pointer; transition: all var(--dur) var(--ease); }
.subtab:hover { border-color: var(--ink); }
.subtab.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* строка письма/диалога в списке */
.mail-row { cursor: pointer; }
.mail-row:hover { background: var(--wash); }
.mail-sub { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--ink); }
.mail-unread .mail-sub::before { content: "●"; color: var(--danger); font-size: .7em;
  vertical-align: middle; margin-right: var(--s-2); }
.mail-snip { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }

/* лента треда / диалога — пузыри */
.thread { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-4) 0; }
.bubble { max-width: 78%; border: var(--bw) solid var(--line); border-radius: var(--r-el);
  padding: var(--s-3) var(--s-4); background: var(--surface); }
.bubble--in { align-self: flex-start; border-bottom-left-radius: var(--r-sm); }
.bubble--out { align-self: flex-end; background: var(--ink); color: var(--surface);
  border-color: var(--ink); border-bottom-right-radius: var(--r-sm); }
.bubble--sys { align-self: center; max-width: 90%; background: var(--wash);
  color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.bubble-meta { font-weight: var(--fw-bold); font-size: var(--fs-3xs); letter-spacing: .06em;
  text-transform: uppercase; opacity: .7; margin-bottom: var(--s-1); }
.bubble-body { font-size: var(--fs-base); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bubble-att { margin-top: var(--s-2); font-size: var(--fs-sm); opacity: .85; }

/* форма ответа / нового письма */
.mail-form { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: var(--bw) solid var(--line); }
.mail-form input, .mail-form textarea, .mail-form select {
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3); width: 100%; box-sizing: border-box; }
.mail-form textarea { min-height: 100px; resize: vertical; }
.mail-form input:focus, .mail-form textarea:focus, .mail-form select:focus {
  outline: none; border-color: var(--ink); }
.mail-form-row { display: flex; gap: var(--s-3); align-items: center; }
.mail-chan { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }

/* -- Feedback: лампочка 💡 в шапке + modal (багрепорт) --------------------- */
.nav-bulb { display: inline-flex; align-items: center; justify-content: center; padding: var(--s-2);
  border-radius: var(--r-pill); border: var(--bw) solid transparent; background: transparent;
  color: var(--ink-2); cursor: pointer; transition: all var(--dur) var(--ease); }
.nav-bulb:hover { background: var(--wash); color: var(--ink); }
.nav-bulb .ic { width: 18px; height: 18px; flex: none; }
.fb-overlay { position: fixed; inset: 0; z-index: 9001; display: grid; place-items: center;
  padding: var(--s-4); background: rgba(39, 39, 39, .45); }
.fb-overlay[hidden] { display: none; }
.fb-card { width: 100%; max-width: 460px; background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-card);
  padding: var(--s-6); box-shadow: var(--e-2); max-height: 90vh; overflow-y: auto; }
/* Со скриншотом карточка шире, чтобы холст рисования был удобным. */
.fb-card:has(#fbShot:not([hidden])) { max-width: 760px; }
.fb-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl);
  color: var(--ink); margin: 0; }
.fb-sub { font-size: var(--fs-sm); color: var(--muted); margin: var(--s-1) 0 var(--s-3); }
.fb-page { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--s-5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-page span { font-weight: var(--fw-semibold); color: var(--ink-2); }
.fb-opt { font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; color: var(--muted); }
.fb-file { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-2); }
.fb-input { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md);
  color: var(--ink); background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-el); padding: var(--s-3) var(--s-4); outline: none; width: 100%; }
.fb-input:focus { border-color: var(--ink); }
textarea.fb-input { resize: vertical; min-height: 88px; }
.fb-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-5); }
/* Авто-скриншот + холст рисования (карандаш). */
.fb-shot-load { display: flex; align-items: center; gap: var(--s-2); color: var(--muted);
  font-size: var(--fs-sm); padding: var(--s-5) 0; margin: 0 0 var(--s-3); }
.fb-shot-load[hidden] { display: none; }
.fb-spin { animation: spin .8s linear infinite; }
.fb-shot-btn { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-4); }
.fb-shot-btn[hidden] { display: none; }
.fb-shot-btn .ic { width: 16px; height: 16px; }
.fb-shot { margin: 0 0 var(--s-4); }
.fb-shot[hidden] { display: none; }
.fb-shot-bar { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1);
  margin-bottom: var(--s-2); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  background: var(--wash); }
.fb-tool { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; background: transparent; color: var(--ink-2); border-radius: var(--r-sm);
  cursor: pointer; }
.fb-tool .ic { width: 17px; height: 17px; }
.fb-tool:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.fb-tool.is-active { background: var(--ink); color: var(--surface); }
.fb-tool:disabled { opacity: .4; cursor: default; }
.fb-tool--end { margin-left: auto; }
.fb-tool-sep { width: var(--bw); height: 18px; background: var(--line); margin: 0 var(--s-1); }
.fb-shot-stage { position: relative; overflow: hidden; line-height: 0;
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--wash); }
#fbCanvasBase { display: block; width: 100%; height: auto; }
#fbCanvasDraw { position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: crosshair; touch-action: none; }
/* Универсальная модалка (overlay+card) — общий паттерн для HTMX-фрагментов (жалоба на оффер
   и т.п.); на мобиле превращается в bottom-sheet (см. @media ниже). Образец — .fb-overlay. */
.modal-overlay { position: fixed; inset: 0; z-index: 9001; display: grid; place-items: center;
  padding: var(--s-4); background: rgba(39, 39, 39, .45); }
.modal-card { position: relative; width: 100%; max-width: 460px; background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s-6);
  box-shadow: var(--e-2); max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: var(--s-3); right: var(--s-3); border: none; background: none;
  cursor: pointer; font-size: var(--fs-lg); line-height: 1; color: var(--muted); padding: var(--s-1); }
.modal-close:hover { color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-5); }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 480px) { .form-row2 { grid-template-columns: 1fr; } }

/* ── Bottom-sheet на телефоне: модалки/feedback липнут к низу как нативный sheet ──
   Десктоп — карточка по центру (правила выше); ≤640px — выезжает снизу, скруглён сверху,
   «ручка»-аффорданс, отступ под жест-бар (safe-area). Закрытие — тап по фону / кнопкой
   (как было), без JS. Прогрессивно: на десктопе ничего не меняется. (перенос PR #1360) */
@media (max-width: 640px) {
  .fb-overlay, .modal-overlay { place-items: end center; padding: 0; }
  .fb-card, .modal-card {
    max-width: none; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
    max-height: 88vh; padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
    animation: sheet-up .26s var(--ease-out, ease) both;
  }
  .fb-card::before, .modal-card::before {
    content: ""; display: block; width: 36px; height: 4px;
    margin: calc(-1 * var(--s-2)) auto var(--s-4); border-radius: 999px; background: var(--line);
  }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .fb-card, .modal-card { animation: none; }
}

/* product thumbnail in cabinet tables */
.prod-thumb { display: block; width: 40px; height: 40px; object-fit: contain;
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: #fff; }
.prod-thumb--empty { background: var(--wash); }

/* product photo picker (upload + Yandex search) */
.ph-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.ph-grid:empty { display: none; }
.ph-chip { position: relative; width: 64px; height: 64px; border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.ph-chip img { width: 100%; height: 100%; object-fit: contain; }
.ph-rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px;
  border: 0; border-radius: 50%; background: rgba(39,39,39,.78); color: #fff; font-size: 11px;
  cursor: pointer; padding: 0; }
.ph-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ph-upload { position: relative; overflow: hidden; }
.ph-status { font-size: var(--fs-xs); color: var(--muted); }
.ya-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2);
  max-height: 50vh; overflow-y: auto; }
.ya-cell { aspect-ratio: 1; border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: #fff; cursor: pointer; padding: 0; transition: border-color .12s; }
.ya-cell:hover { border-color: var(--ink); }
.ya-cell img { width: 100%; height: 100%; object-fit: contain; }
.ya-cell.is-busy { opacity: .5; pointer-events: none; }
/* Сгруппированный фото-поиск: блоки по источнику, заливка из одного источника */
.ya-wrap { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3);
  max-height: 60vh; overflow-y: auto; }
.ya-src { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-2);
  transition: opacity .15s; }
.ya-src .ya-grid { max-height: none; overflow: visible; }
.ya-src-h { font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-2); font-weight: 600; }
.ya-src-h .ya-rec { color: var(--ink); margin-left: var(--s-1); }
.ya-src.is-locked { opacity: .3; pointer-events: none; }
.ya-cell.is-sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.ya-bar { position: sticky; bottom: 0; background: var(--paper); padding: var(--s-2) 0;
  display: flex; justify-content: flex-end; gap: var(--s-2); }

.cab-head-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* Кабинет — дашборд обзора (cabinet.html): сетки виджетов, список заказов, стат-плитки, онбординг */
.cab-grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
.cab-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cab-grid .panel { margin-bottom: 0; }
/* Список свежих заказов */
.cab-list { display: flex; flex-direction: column; }
.cab-list-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: var(--bw) solid var(--line); color: var(--ink); }
.cab-list-row:last-child { border-bottom: 0; }
.cab-list-row .clr-id { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-display);
  font-weight: var(--fw-bold); color: var(--ink-2); flex: none; }
.cab-list-row .clr-id .ic-xs { width: 14px; height: 14px; color: var(--muted); }
.cab-list-row .clr-main { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-list-row .clr-sum { flex: none; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; }
/* Строка-заявка: имя компании в clr-id длинное (АО «…»), а не короткий #id как у заказов
   — даём ему забрать ширину и усекаться, статус·дату прижимаем по контенту, чтобы сумма
   не наезжала на название (фидбек #1561). */
.cab-list-row--lead .clr-id { flex: 1 1 auto; min-width: 0; }
.cab-list-row--lead .clr-id .clr-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-list-row--lead .clr-main { flex: none; }
.panel-link { display: inline-block; margin-top: var(--s-3); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); color: var(--ink-2); }
.panel-link:hover { color: var(--ink); }
.cab-empty { color: var(--muted); font-size: var(--fs-sm); padding: var(--s-4) 0; }
/* Быстрые стат-плитки (сообщения/заявки/товары) — кликабельные .panel */
.cab-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  text-decoration: none; color: var(--ink); transition: border-color .15s; }
.cab-stat:hover { border-color: var(--ink); }
.cab-stat-ic .ic { width: 22px; height: 22px; color: var(--muted); margin-bottom: var(--s-1); }
.cab-stat-n { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-4xl);
  font-variant-numeric: tabular-nums; line-height: 1; }
.cab-stat-l { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
/* Нулевая/пустая метрика демоутируется, чтобы не конкурировать за фокус с реальными (Von Restorff). */
.cab-stat--muted { opacity: .6; }
.cab-stat--muted .cab-stat-n { color: var(--muted); }
/* КП-воронка на Обзоре: компактные счётчики-ссылки (черновики/отправлено). */
.kpis-inline { display: flex; gap: var(--s-6); margin-top: var(--s-2); }
.kpi-inline { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.kpi-inline .num { display: block; font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-3xl); color: var(--ink); line-height: 1.1; }
.kpi-inline:hover .num { color: var(--accent, var(--ink)); }
/* Hero Обзора: одна главная цифра компании (выручка МП / товары / тендеры). Крупнее
   прочих метрик намеренно — это якорь страницы, с него начинается чтение. */
.dash-hero { margin-bottom: var(--s-4); }
.dash-hero-main { display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-5) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--wash); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.dash-hero-main:hover { border-color: var(--ink); }
.dash-hero-l { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.dash-hero-v { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-5xl); font-variant-numeric: tabular-nums; line-height: 1; }
.dash-hero-s { font-size: var(--fs-sm); color: var(--ink-2); }
/* Рейтинг продавца: звёзды + среднее + ссылка на отзывы. */
.dash-rating { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--muted); }
.dash-stars { letter-spacing: 1px; color: var(--line); }
.dash-stars .is-on { color: var(--warn, #e0a300); }
.dash-rating .num { font-weight: var(--fw-bold); color: var(--ink); }
/* Воронка продаж по стадиям. Ширина бара — доля от САМОЙ ПОЛНОЙ стадии, не от суммы:
   иначе длинная воронка схлопывает хвост в невидимую нить. */
.dash-funnel { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.dash-fn-row { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center;
  gap: var(--s-3); text-decoration: none; color: var(--ink); }
.dash-fn-l { font-size: var(--fs-sm); color: var(--ink-2); }
.dash-fn-bar { height: 10px; border-radius: var(--r-pill); background: var(--wash); overflow: hidden; }
.dash-fn-bar > span { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill);
  transition: width .2s; min-width: 2px; }
.dash-fn-row:hover .dash-fn-bar > span { background: var(--accent, var(--ink)); }
.dash-fn-v { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 640px) { .dash-fn-row { grid-template-columns: 110px 1fr 40px; gap: var(--s-2); } }
/* Онбординг (привязан, товаров нет) */
.onb { margin-top: var(--s-4); }
.onb-steps { margin: var(--s-3) 0 var(--s-5); padding-left: var(--s-5); display: flex; flex-direction: column;
  gap: var(--s-2); font-size: var(--fs-md); color: var(--ink-2); line-height: 1.5; }
.onb-steps b { font-family: var(--font-display); color: var(--ink); }

/* Настройки уведомлений продавца (Компания → Уведомления): строка-тумблер. */
.pref-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: var(--bw) solid var(--line-2); cursor: pointer; }
.pref-row:last-of-type { border-bottom: none; }
.pref-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); flex: none; cursor: pointer; }
.pref-ic { color: var(--muted); display: inline-flex; flex: none; }
.pref-txt { display: flex; flex-direction: column; gap: 1px; }
.pref-hint { font-size: var(--fs-sm); color: var(--muted); }

/* «Начните продавать» — hero-баннер онбординга продавца (Обзор, состояние без товаров). */
.sell-hero { display: flex; align-items: center; gap: var(--s-7); margin-top: var(--s-4);
  padding: var(--s-7); background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e-1); position: relative; overflow: hidden; }
.sell-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--ink); opacity: .9; }
.sell-hero__text { flex: 1; min-width: 0; }
.sell-hero__badge { display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.sell-hero__title { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 var(--s-2); }
.sell-hero__sub { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.5;
  margin: 0 0 var(--s-4); max-width: 54ch; }
.sell-hero__feats { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); }
.sell-hero__feats li { display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.sell-hero__feats svg { color: var(--ok); flex: none; }
.sell-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.sell-hero__alt { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.sell-hero__art { flex: none; width: 168px; align-self: stretch;
  display: flex; align-items: center; justify-content: center; }
.sell-hero__art img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .sell-hero { flex-direction: column-reverse; align-items: flex-start; padding: var(--s-6) var(--s-5); }
  .sell-hero__art { width: 120px; align-self: center; }
  .sell-hero__title { font-size: var(--fs-3xl); }
}

@media (max-width: 760px) {
  /* minmax(0,1fr), НЕ голый 1fr (=minmax(auto,1fr)): иначе min-content неразрывного
     контента (длинные названия заявок) раздувает колонку → горизонтальный скролл всего
     кабинета на мобиле (UI-ревью: .page 801px при viewport 375px). */
  .cab-grid--2, .cab-grid--3 { grid-template-columns: minmax(0, 1fr); }
  /* KPI-плитки: 2 в ряд (4×~70px на телефоне нечитаемо), min 0 — без overflow. */
  .cab-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.imp-result { font-size: var(--fs-sm); color: var(--ink-2); min-height: 20px; margin: var(--s-3) 0; }
.imp-result b { font-family: var(--font-display); color: var(--ink); }
/* Импорт товаров: предпросмотр-таблица (HTMX-фрагмент _import_preview.html) */
.imp-summary { font-size: var(--fs-sm); color: var(--ink-2); margin: var(--s-2) 0 var(--s-3); }
.imp-summary b { font-family: var(--font-display); }
.imp-tbl-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-el); }
.imp-tbl { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.imp-tbl th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 600;
  color: var(--ink-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.imp-tbl td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.imp-tbl tr:last-child td { border-bottom: 0; }
.imp-tbl .ar, .imp-tbl th.ar { text-align: right; white-space: nowrap; }
.imp-tbl .mono { font-family: var(--font-mono, monospace); font-size: var(--fs-xs); }
.imp-errors { margin-top: var(--s-3); font-size: var(--fs-sm); }
.imp-errors summary { cursor: pointer; color: var(--danger); }
.imp-errors ul { max-height: 160px; overflow: auto; margin: var(--s-2) 0 0; padding-left: var(--s-5); color: var(--ink-2); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.err-text { color: var(--danger); }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
/* ── Инфографика: вкладка генерации (тексты слайдов → картинки + трекер ₽) ── */
.ig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ig-head-l { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ig-head-r { display: flex; align-items: center; gap: var(--s-2); }
.ig-cost { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm);
  background: var(--wash); border-radius: var(--r-pill); padding: 2px var(--s-2); white-space: nowrap; }
.ig-cost b { font-family: var(--font-display); }
/* секция «Контент слайдов» */
.ig-slides-box { margin-top: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-md);
  background: var(--wash); padding: var(--s-3); }
.ig-slides-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.ig-slides-title { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
/* карточка одного слайда: текст слева, превью+кнопка справа */
.ig-slide { display: flex; gap: var(--s-3); justify-content: space-between; background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); }
.ig-slide + .ig-slide { margin-top: var(--s-2); }
.ig-slide-body { flex: 1 1 auto; min-width: 0; }
.ig-slide-meta { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 4px; }
.ig-slide-n { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ink); color: var(--surface); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.ig-slide-type { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }
.ig-slide-ph { display: inline-flex; color: var(--muted); }
.ig-slide-title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ig-slide-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.ig-slide-points { margin: var(--s-1) 0 0; padding-left: var(--s-4); font-size: var(--fs-xs); color: var(--ink-2); }
.ig-slide-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px var(--s-3); margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--ink-2); }
.ig-slide-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ig-mini { width: 54px; height: 72px; object-fit: cover; border: var(--bw) solid var(--line); border-radius: var(--r-sm); display: block; }
.ig-mini--empty { background: var(--wash); border-style: dashed; }
.ig-mini--busy { background: var(--wash); border-style: dashed; animation: igpulse 1s ease-in-out infinite; }
@keyframes igpulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
/* грид больших превью */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.ig-card { position: relative; aspect-ratio: 3/4; border: var(--bw) solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--wash); }
.ig-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-card-n { position: absolute; left: 6px; bottom: 6px; background: rgba(39,39,39,.6); color: #fff;
  font-size: var(--fs-2xs); border-radius: var(--r-sm); padding: 1px 6px; }
.ig-card-rm { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 18px;
  border: 0; border-radius: 50%; background: rgba(39,39,39,.78); color: #fff; font-size: 12px; cursor: pointer; padding: 0; }
@media (max-width: 600px) { .ig-slide-specs { grid-template-columns: 1fr; } }
/* пайплайн инфографики: правка текстов (contenteditable) перед рендером + шаги */
.ig-slides-actions { display: inline-flex; align-items: center; gap: var(--s-2); }
.ig-hint { font-weight: var(--fw-normal); font-size: var(--fs-2xs); }
.ig-step2 { margin-top: var(--s-5); }
.ig-slide-title[contenteditable], .ig-slide-sub[contenteditable],
.ig-slide-points li[contenteditable], .ig-spec-val[contenteditable] {
  outline: none; border-radius: var(--r-sm); cursor: text; transition: background .12s, box-shadow .12s; }
.ig-slide-title[contenteditable]:hover, .ig-slide-sub[contenteditable]:hover,
.ig-slide-points li[contenteditable]:hover, .ig-spec-val[contenteditable]:hover { background: var(--wash); }
.ig-slide-title[contenteditable]:focus, .ig-slide-sub[contenteditable]:focus,
.ig-slide-points li[contenteditable]:focus, .ig-spec-val[contenteditable]:focus {
  background: var(--surface); box-shadow: 0 0 0 2px rgba(99, 102, 241, .55); padding: 0 3px; }
.ig-slide-sub[contenteditable]:empty::before { content: attr(data-ph); color: var(--muted); opacity: .55; }
.ig-webnote { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; padding: var(--s-2) var(--s-3);
  font-size: var(--fs-xs); color: #92400e; background: #fffbeb; border: var(--bw) solid #fde68a; border-radius: var(--r-sm); }
.ig-webnote svg { flex: none; color: #d97706; }
.ig-count { font-size: var(--fs-xs); padding: 2px 6px; border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; }

/* == Cabinet product card — CSS radio tabs (без JS) ====================== */
.pt-radio { position: absolute; opacity: 0; pointer-events: none; }
.pt-bar { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-4);
  border-bottom: var(--bw) solid var(--line); }
.pt-tab { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md);
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--s-2) var(--s-3); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast, .12s); }
.pt-tab:hover { color: var(--ink-2); }
.pt-panel { display: none; }
/* активная вкладка: radio:checked → подсветка label + показ панели */
#pt-main:checked   ~ .pt-bar label[for="pt-main"],
#pt-dim:checked    ~ .pt-bar label[for="pt-dim"],
#pt-seo:checked    ~ .pt-bar label[for="pt-seo"],
#pt-photo:checked  ~ .pt-bar label[for="pt-photo"],
#pt-ig:checked     ~ .pt-bar label[for="pt-ig"],
#pt-specs:checked  ~ .pt-bar label[for="pt-specs"],
#pt-mp:checked     ~ .pt-bar label[for="pt-mp"] { color: var(--ink); border-bottom-color: var(--ink); }
#pt-main:checked  ~ #pp-main,
#pt-dim:checked   ~ #pp-dim,
#pt-seo:checked   ~ #pp-seo,
#pt-photo:checked ~ #pp-photo,
#pt-ig:checked    ~ #pp-ig,
#pt-specs:checked ~ #pp-specs,
#pt-mp:checked    ~ #pp-mp { display: block; }
.form-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
/* Кнопка «Сохранить» в обычном потоке внизу формы (не sticky — иначе при скролле
   рамка наезжала на контент). Скроллится вместе со страницей. */
.form-actions-sticky { display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: var(--bw) solid var(--line); }
@media (max-width: 640px) { .form-row3 { grid-template-columns: 1fr; } .pt-bar { gap: 0; } .pt-tab { font-size: var(--fs-sm); padding: var(--s-2); } }

/* == Filter chips (toggle) ============================================== */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fchip { display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; user-select: none;
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink-2);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3);
  background: var(--paper); transition: background var(--t-fast, .12s), color var(--t-fast, .12s), border-color var(--t-fast, .12s); }
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip.is-active,
.fchip:has(input:checked) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* галочка-индикатор у выбранного чипа — мгновенный отклик на клик (без сервера) */
.fchip:has(input:checked)::before { content: "✓"; font-weight: var(--fw-bold); margin-right: 1px; }
.fchips-count { margin-left: auto; }
.fchips-reset { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  text-decoration: none; padding: var(--s-1) var(--s-2); }
.fchips-reset:hover { color: var(--ink); text-decoration: underline; }

/* == Мои товары: дашборд-сводка, полнота карточки, бейджи МП ============= */
/* auto-fit, НЕ repeat(5): карточек 4 или 6 (по has_mp) — фикс-5 оставлял 6-ю одну во 2-м ряду. */
.prodstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.statcard { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--t-fast, .12s), background var(--t-fast, .12s); }
a.statcard:hover { border-color: var(--ink); }
.statcard.is-active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.statcard.is-active .statcard-l, .statcard.is-active .statcard-n small { color: var(--surface); }
.statcard--info { cursor: default; }
.statcard-n { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg); line-height: 1.1; }
.statcard-n small { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); }
.statcard-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); }
@media (max-width: 880px) { .prodstat { grid-template-columns: repeat(2, 1fr); } }

/* полнота карточки — точки (заполненные = зелёные) */
.cmpl { display: inline-flex; gap: 3px; align-items: center; }
.cmpl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.cmpl-dot.is-on { background: var(--ok); box-shadow: none; }

/* бейджи маркетплейсов */
.mpbadges { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.mpbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px;
  padding: 0 6px; border-radius: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .02em; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
/* Статусные (старые, для карточки товара) — оставлены для совместимости. */
.mpbadge--ok { background: var(--ok-bg); color: var(--ok-ink); }
.mpbadge--warn { background: var(--warn-bg); color: var(--warn-ink); }
.mpbadge--err { background: var(--danger); color: var(--surface); }
.mpbadge--ghost { background: var(--wash); color: var(--muted); }
/* Фирменные плитки площадок — сигнатурные цвета брендов (квадратные, узнаваемые). */
.mpbadge--ozon { background: #005bff; color: #fff; }
.mpbadge--wb { background: #cb11ab; color: #fff; }
.mpbadge--ym { background: #fc0; color: #1a1a1a; }
.mpbadge--mm { background: #21a038; color: #fff; }
.mpbadge--avito { background: #00aaff; color: #fff; }
.mpbadge--mvideo { background: #e30613; color: #fff; }
.mpbadge--other { background: var(--wash); color: var(--muted); }
/* ICU = на витрине icubix (бейдж-ссылка, брендовый тёмный). */
.mpbadge--icu { background: var(--ink); color: var(--paper); text-decoration: none; font-weight: var(--fw-bold); }
/* «Что докрутить» — тексты ошибок карточки, которые вернул сам МП при отправке. */
.mp-issues { margin: var(--s-1) 0 0; padding-left: var(--s-4); list-style: disc; }
.mp-issues li { font-size: var(--fs-xs); color: var(--warn-ink); line-height: 1.35; }
/* «Карточки к доработке» (bulk-вью цикла ремедиации): бакет аккаунт-ошибок + список fixable. */
.rem-warn { border: var(--bw) solid var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-md); padding: var(--s-4); }
.rem-warn-hd { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); color: var(--warn-ink); }
.rem-list { display: flex; flex-direction: column; gap: var(--s-2); }
.rem-card { display: block; border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s-3); text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.rem-card:hover { border-color: var(--ink); background: var(--surface-2); }
.rem-card-hd { display: flex; align-items: center; gap: var(--s-2); }
.rem-title { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-base); }
.rem-go { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
.mpbadge--icu:hover { background: var(--accent, var(--ink)); }
.mpbadge.is-dim { opacity: .45; }  /* снят/архив */
/* Плитка с фавиконкой площадки (официальный квадратный значок на белом фоне). */
.mptile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); overflow: hidden;
  text-decoration: none; flex: none; }
.mptile img { width: 18px; height: 18px; object-fit: contain; display: block; }
.mptile--icu { background: var(--ink); }
.mptile.is-dim { opacity: .4; }

/* компактная таблица товаров — table-layout:fixed держит фикс-ширины колонок; обёртка
   .prod-table-wrap даёт горизонтальный скролл, когда панель уже min-width. Без этого 11
   колонок не влезали в узкую панель кабинета и гибкий «Товар» схлопывался в 1 символ. */
.prod-table-wrap { overflow-x: auto; }
.prod-table { width: 100%; min-width: 880px; table-layout: fixed; }
.prod-table td { overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
/* Заголовки не обрезаем + без tracking (узкие колонки: с letter-spacing «ПОЛНОТА»
   обрезалась в «ПОЛНО…», а соседние «ОСТАТОК»/«ПОЛНОТА» слипались). */
.prod-table th { white-space: nowrap; vertical-align: top; letter-spacing: 0; }
.prod-table .cell-name { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0;
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.prod-table .cell-name a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.25; }
.prod-table .cell-sub { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.prod-table .cell-brand { font-weight: var(--fw-semibold); color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.prow--hidden { opacity: .6; }
/* счётчик результата над таблицей — обновляется вместе с ней (HTMX) */
.prodfound { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  margin-bottom: var(--s-2); }
.prodfound b { color: var(--ink); font-weight: var(--fw-bold); }

/* ⋯-меню действий в строке (CSS-only, на <details>, без JS) */
.rowmenu { position: relative; display: inline-block; }

/* характеристики в карточке: группы + строки имя/значение (компактный список) */
.spec-list { display: flex; flex-direction: column; }
.spec-item { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0;
  border-bottom: var(--bw) solid var(--line); font-size: var(--fs-sm); }
.spec-item:last-child { border-bottom: 0; }
.spec-k { flex: 0 0 42%; color: var(--muted); }
.spec-v { flex: 1 1 auto; font-weight: var(--fw-semibold); }
@media (max-width: 600px) { .spec-item { flex-direction: column; gap: 2px; } .spec-k { flex: none; } }

/* SEO-раздел карточки (read-only, заполняется обогащением) */
.seo-block + .seo-block { margin-top: var(--s-4); }
.seo-lbl { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); margin-bottom: var(--s-2); }
.seo-ro { font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; background: var(--wash);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); max-height: 240px; overflow-y: auto; }
.seo-kw { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.seo-chip { font-size: var(--fs-xs); background: var(--wash); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: 2px var(--s-2); color: var(--ink-2); }

/* блок «Маркетплейсы» в карточке товара */
.mp-rows { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.mp-row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.mp-row-name { font-weight: var(--fw-semibold); text-transform: capitalize; }
.mp-row-st { color: var(--ink-2); }
.mp-card-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }

/* == Карточка товара: крошки, шапка, счётчики вкладок, главное фото ====== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); margin-bottom: var(--s-3); }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .ic-xs.crumbs-back { transform: rotate(180deg); }
.crumbs-sep { color: var(--line-2); }
.crumbs-cur { color: var(--ink); }
.prod-head-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
/* счётчик на вкладке */
.pt-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--r-pill); background: var(--wash); color: var(--ink-2);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-bold); vertical-align: middle; }
/* статус обогащения над формой «Основное» */
.enrich-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--line); }
/* главное фото */
.ph-chip--main { outline: 2px solid var(--ink); outline-offset: 1px; }
.ph-main { position: absolute; left: 0; bottom: 0; right: 0; background: var(--ink); color: var(--surface);
  font-size: 9px; font-weight: var(--fw-bold); text-align: center; padding: 1px 0; letter-spacing: .03em; }
.prod-dates { margin-left: auto; }

/* массовый выбор: чекбоксы + sticky-панель действий */
.col-check { width: 32px; text-align: center; }
.prow-check, #prodAll { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.bulkbar { position: sticky; top: var(--s-3); z-index: 40; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-2) var(--s-3);
  background: var(--ink); color: var(--surface); border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.bulkbar[hidden] { display: none; }
.bulkbar-n { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-right: auto; }
.bulkbar-n b { font-family: var(--font-display); font-weight: var(--fw-extrabold); }

/* == Key-value list + totals (карточки заказа/КП/заявки) ================= */
.kv { display: flex; flex-direction: column; gap: var(--s-2); }
.kv > div { display: flex; gap: var(--s-3); font-size: var(--fs-md); }
.kv-k { flex: none; width: 140px; font-weight: var(--fw-bold); font-size: var(--fs-xs);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.kv-v { font-weight: var(--fw-semibold); color: var(--ink); }
.ord-total { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--bw) solid var(--line);
  text-align: right; font-size: var(--fs-lg); }
.ord-total b { font-family: var(--font-display); font-weight: var(--fw-extrabold); }
.lead-act { font-size: var(--fs-sm); color: var(--ink-2); padding: var(--s-1) 0; border-bottom: var(--bw) solid var(--line-2); }
@media (max-width: 640px) { .kv > div { flex-direction: column; gap: 2px; } .kv-k { width: auto; } }

/* == Key-value list + totals (карточки заказа/КП/заявки) ================= */
.kv { display: flex; flex-direction: column; gap: var(--s-2); }
.kv > div { display: flex; gap: var(--s-3); font-size: var(--fs-md); }
.kv-k { flex: none; width: 140px; font-weight: var(--fw-bold); font-size: var(--fs-xs);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.kv-v { font-weight: var(--fw-semibold); color: var(--ink); }
.ord-total { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--bw) solid var(--line);
  text-align: right; font-size: var(--fs-lg); }
.ord-total b { font-family: var(--font-display); font-weight: var(--fw-extrabold); }
.lead-act { font-size: var(--fs-sm); color: var(--ink-2); padding: var(--s-1) 0; border-bottom: var(--bw) solid var(--line-2); }
@media (max-width: 640px) { .kv > div { flex-direction: column; gap: 2px; } .kv-k { width: auto; } }

/* == Cabinet mobile polish ============================================== */
@media (max-width: 640px) {
  .cab-head { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .cab-head-actions { width: 100%; }
  .cab-head-actions .btn { flex: 1; justify-content: center; }
  /* фильтры товаров в столбик, каждый на всю ширину */
  .adm-toolbar--row { flex-direction: column; align-items: stretch; }
  .adm-toolbar--row > * { width: 100%; max-width: none; }
  .adm-toolbar--row .adm-pager-info { margin-left: 0; text-align: left; }
  .fchips-count { margin-left: 0; width: 100%; }
  .modal-card { padding: var(--s-5); }
  .ya-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .adm-pager { flex-wrap: wrap; gap: var(--s-2); }
}

/* == AI-ассистент закупок (чат-панель справа) ============================== */
/* ИИ-ассистент: вырезанный маскот-кубик «сидит» на плашке + мелкая подпись под ним.
   Без кнопки-пилюли — сам кубик и есть кнопка (прозрачный фон). */
.chat-fab { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 9100;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; box-shadow: none; padding: 0; cursor: grab; font-family: var(--font-body);
  user-select: none; touch-action: none; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab.is-dragging { cursor: grabbing; transition: none; transform: none; }
.chat-fab svg { flex: none; }
.chat-fab-stage { position: relative; display: block; line-height: 0; }
/* плашка-подставка, на которой «сидит» кубик */
.chat-fab-stage::after { content: ""; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 48px; height: 11px; border-radius: 50%; background: var(--ink); opacity: .78; z-index: 0; }
.chat-fab-mascot { position: relative; z-index: 1; width: 58px; height: 58px; display: block;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.22)); pointer-events: none; }
/* Подпись «ИИ-ассистент» — всегда видимой пилюлей ПОД маскотом (в потоке flex-колонки
   .chat-fab): белым на чёрной подложке. FAB остаётся компактным кубиком, подпись по центру. */
.chat-fab-label { font-size: 11px; font-weight: var(--fw-bold); color: var(--paper);
  letter-spacing: .01em; white-space: nowrap; pointer-events: none; text-align: center;
  background: var(--ink); border-radius: var(--r-pill); padding: 2px 10px; }
/* На мобиле — ещё компактнее. Подпись — тот же tooltip (по тапу/наведению). */
@media (max-width: 760px) {
  .chat-fab { right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .chat-fab-mascot { width: 46px; height: 46px; }
  .chat-fab-stage::after { width: 38px; height: 9px; }
}

.chat-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9200;
  width: clamp(360px, 35vw, 500px); display: flex; flex-direction: column;
  background: var(--paper); border-left: var(--bw) solid var(--line); box-shadow: var(--e-3, var(--e-2));
  animation: chatPanelIn .28s var(--ease, ease) both; }
/* Въезд панели ИИ-ассистента справа (проигрывается при показе, т.к. display none→flex) */
@keyframes chatPanelIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.chat-fab:active { transform: scale(.94); }
/* Не мешать контенту: FAB «уезжает» вниз при скролле ВНИЗ (читаешь — кнопка ушла), возвращается
   при скролле вверх / у верха страницы (body.fab-tuck ставит app.js). Прячем полностью при
   открытом drawer (иначе висел над меню, z9100 > drawer z70), при открытой панели чата и на печати.
   Юзер: «этот FAB ездит по контенту». */
body.fab-tuck .chat-fab { transform: translateY(calc(100% + var(--s-6))); opacity: 0; pointer-events: none; }
body.nav-open .chat-fab { opacity: 0; visibility: hidden; pointer-events: none; }
body:has(#chatPanel:not([hidden])) .chat-fab { opacity: 0; pointer-events: none; }
/* Пока висит cookie-баннер (тоже bottom-right/full-width) — FAB прячем, чтобы кубик не
   налезал на баннер и его ссылку согласия. Баннер одноразовый → FAB вернётся после «Принять». */
body:has(#cookieBanner:not([hidden])) .chat-fab { opacity: 0; pointer-events: none; }
@media print { .chat-fab, .chat-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .chat-fab { transition: opacity var(--dur) var(--ease); }
  body.fab-tuck .chat-fab { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
@media (max-width: 760px) { .chat-panel { width: 100vw; } }

.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: var(--bw) solid var(--line); background: var(--surface); }
.chat-head-title { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: var(--fs-lg); }
.chat-dot-live { width: 8px; height: 8px; border-radius: 50%; background: #2bbb6a; box-shadow: 0 0 0 0 rgba(43,187,106,.5); animation: chatpulse 2s infinite; }
@keyframes chatpulse { 0% { box-shadow: 0 0 0 0 rgba(43,187,106,.45); } 70% { box-shadow: 0 0 0 7px rgba(43,187,106,0); } 100% { box-shadow: 0 0 0 0 rgba(43,187,106,0); } }
.chat-head-title { flex: 1; }
.chat-x { border: 0; background: transparent; cursor: pointer; color: var(--ink-2); padding: var(--s-1); border-radius: var(--r-sm); display: grid; place-items: center; }
.chat-x:hover { background: var(--wash); color: var(--ink); }
.chat-x svg { width: 22px; height: 22px; }
/* Кнопки-иконки в шапке (список чатов / новый чат / поделиться) */
.chat-icon-btn { border: 0; background: transparent; cursor: pointer; color: var(--ink-2); padding: var(--s-1); border-radius: var(--r-sm); display: grid; place-items: center; }
.chat-icon-btn:hover { background: var(--wash); color: var(--ink); }
/* Тост в шапке чата (скопирована ссылка и т.п.) */
.chat-head { position: relative; }
.chat-toast { position: absolute; left: var(--s-4); right: var(--s-4); top: calc(100% + 6px); z-index: 5;
  background: var(--ink); color: var(--paper); font-size: var(--fs-sm); text-align: center;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); opacity: 0; transform: translateY(-4px);
  pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chat-toast.is-on { opacity: 1; transform: translateY(0); }
/* Публичная страница расшаренного диалога (read-only) */
.chat-share-wrap { max-width: 760px; padding-top: var(--s-6); padding-bottom: var(--s-8); }
.chat-share-head h1 { margin: 0 0 var(--s-1); }
.chat-share-head .muted { margin: 0 0 var(--s-5); }
.chat-log--shared { display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.chat-share-empty { text-align: center; padding: var(--s-8) var(--s-2); }
.chat-share-cta { margin-top: var(--s-5); text-align: center; }
.chat-icon-btn svg { width: 20px; height: 20px; }
/* Выпадающий список чатов (мультичат) */
.chat-sessions { border-bottom: var(--bw) solid var(--line); background: var(--surface); padding: var(--s-3) var(--s-4); max-height: 46vh; overflow-y: auto; }
.chat-sessions[hidden] { display: none; }
.chat-session-new { width: 100%; border: var(--bw) dashed var(--line); background: var(--paper); cursor: pointer; padding: var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink); margin-bottom: var(--s-2); }
.chat-session-new:hover { border-color: var(--ink); }
.chat-session-list { display: flex; flex-direction: column; gap: 2px; }
.chat-session-row { display: flex; align-items: center; gap: var(--s-2); border-radius: var(--r-sm); }
.chat-session-row:hover { background: var(--wash); }
.chat-session-row.is-active { background: var(--wash); }
.chat-session-name { flex: 1; text-align: left; border: 0; background: transparent; cursor: pointer; padding: var(--s-2); font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-session-row.is-active .chat-session-name { font-weight: var(--fw-bold); }
.chat-session-del { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.chat-session-del:hover { color: var(--err, #c0392b); }
.chat-session-empty { color: var(--muted); font-size: var(--fs-sm); padding: var(--s-2); }

.chat-log { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.chat-empty { margin: auto 0; text-align: center; padding: var(--s-5) var(--s-2); }
/* Маскот-коробочка в пустом окне ИИ-ассистента: мягкое покачивание (живость). */
.chat-empty-mascot { width: 92px; height: auto; display: block; margin: 0 auto var(--s-3);
  transform-origin: 50% 92%; animation: chatMascotBob 3.2s ease-in-out infinite; }
@keyframes chatMascotBob {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-9px) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) { .chat-empty-mascot { animation: none; } }
.chat-empty-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); }
.chat-empty-sub { color: var(--muted); font-size: var(--fs-base); margin-top: var(--s-2); }
.chat-suggest { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }
.chat-suggest button { border: var(--bw) solid var(--line); background: var(--surface); cursor: pointer;
  border-radius: var(--r-card); padding: var(--s-3) var(--s-4); text-align: left; font-family: var(--font-body);
  font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink-2); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.chat-suggest button:hover { border-color: var(--ink); color: var(--ink); }

.chat-msg { display: flex; }
.chat-msg--user { justify-content: flex-end; }
.chat-msg--ai { justify-content: flex-start; }
.chat-bubble { max-width: 88%; padding: var(--s-3) var(--s-4); border-radius: var(--r-card);
  font-size: var(--fs-base); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--user .chat-bubble { background: var(--ink); color: var(--surface); border-bottom-right-radius: var(--r-sm); }
.chat-msg--ai .chat-bubble { background: var(--surface); border: var(--bw) solid var(--line); border-bottom-left-radius: var(--r-sm); white-space: normal; }
/* Аватар ассистента слева от ответа */
.chat-msg--ai { gap: var(--s-2); align-items: flex-start; }
.chat-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wash);
  border: var(--bw) solid var(--line); padding: 3px; object-fit: contain; margin-top: 2px; }
/* Markdown в ответе ассистента */
.chat-msg--ai .chat-text strong { font-weight: var(--fw-bold); }
.chat-msg--ai .chat-text em { font-style: italic; }
.chat-msg--ai .chat-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg--ai .chat-text code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; background: var(--wash); border: var(--bw) solid var(--line); border-radius: 5px; padding: 1px 5px; }
.chat-msg--ai .chat-text .chat-pre { background: var(--wash); border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-3); margin: var(--s-2) 0; overflow-x: auto; }
.chat-msg--ai .chat-text .chat-pre code { background: none; border: 0; padding: 0; font-size: var(--fs-sm); }
.chat-msg--ai .chat-text ul, .chat-msg--ai .chat-text ol { margin: var(--s-2) 0; padding-left: var(--s-6); }
.chat-msg--ai .chat-text li { margin: 2px 0; }
.chat-msg--ai .chat-text .chat-h { font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: var(--s-3) 0 var(--s-1); }
.chat-tool { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--ink-2); margin-top: var(--s-2); background: var(--wash);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill, 999px); padding: 3px 10px;
  animation: chat-tool-pulse 1.4s ease-in-out infinite; }
.chat-tool__ic { width: 14px; height: 14px; flex: none; }
@keyframes chat-tool-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-tool { animation: none; } }

.chat-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chatdot 1.2s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: .2s; }
.chat-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes chatdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-cards { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.chat-card { display: flex; gap: var(--s-3); align-items: center; text-decoration: none; color: inherit;
  border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: var(--s-2) var(--s-3);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (hover: hover) { .chat-card:hover { border-color: var(--ink); transform: translateY(-1px); } }
.chat-card-thumb { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.chat-card-thumb img { width: 86%; height: 86%; object-fit: contain; }
.chat-card-body { display: flex; flex-direction: column; min-width: 0; }
.chat-card-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; }  /* длинные артикулы (X1504VA-BQ4056) переносим, иначе распирают карточку на мобайле */
.chat-card-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.chat-card-price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); margin-top: 2px; }

.chat-input { display: flex; align-items: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--line); background: var(--surface); }
.chat-input textarea { flex: 1; resize: none; max-height: 120px; border: var(--bw) solid var(--line); border-radius: var(--r-el, var(--r-card));
  padding: var(--s-3) var(--s-4); font-family: var(--font-body); font-size: 16px; color: var(--ink); outline: none; background: var(--paper); }
.chat-input textarea:focus { border-color: var(--ink); }
.chat-send { flex: none; border: 0; cursor: pointer; background: var(--ink); color: var(--surface); border-radius: 50%;
  width: 42px; height: 42px; display: grid; place-items: center; transition: opacity var(--dur) var(--ease); }
.chat-send svg { width: 20px; height: 20px; }
.chat-send[disabled] { opacity: .5; cursor: default; }
.chat-clip { flex: none; border: var(--bw) solid var(--line); background: var(--surface); cursor: pointer;
  color: var(--ink-2); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center;
  transition: all var(--dur) var(--ease); }
.chat-clip:hover { border-color: var(--ink); color: var(--ink); }
.chat-clip svg { width: 19px; height: 19px; }
.chat-attach-bar { padding: var(--s-2) var(--s-4) 0; background: var(--surface); }
.chat-chip { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2);
  background: var(--wash); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip--load { opacity: .7; }
.chat-chip--err { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.chat-chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: var(--fs-md);
  line-height: 1; padding: 0 2px; }
.chat-chip-x:hover { color: var(--ink); }
.chat-chip-img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; margin-right: 2px; }
/* Подсветка зоны при перетаскивании файла в окно чата */
.chat-panel.is-dragover { outline: 2px dashed var(--ink); outline-offset: -8px; }
.chat-panel.is-dragover::after { content: "Отпустите файл — приложу к чату"; position: absolute; inset: 0;
  display: grid; place-items: center; background: rgba(251,250,246,.86); color: var(--ink);
  font-weight: var(--fw-bold); font-size: var(--fs-lg); z-index: 5; pointer-events: none; }
/* Режимы ассистента: чипы Закупки/Юрист/Бухгалтер над полем ввода */
.chat-modes { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-4) 0; background: var(--surface); }
.chat-mode__ic { width: 13px; height: 13px; flex: none; }
.chat-mode { flex: none; display: inline-flex; align-items: center; gap: 4px;
  border: var(--bw) solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; font-size: var(--fs-2xs); padding: 4px 10px; border-radius: var(--r-pill, 999px);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.chat-mode:hover { border-color: var(--ink); color: var(--ink); }
.chat-mode.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* Ссылки на нормы под ответом юриста/бухгалтера */
.chat-refs { display: flex; flex-wrap: wrap; gap: var(--s-1, 4px); margin-top: var(--s-2); }
.chat-ref { font-size: var(--fs-2xs); color: var(--ink-2); background: var(--surface-2, var(--surface));
  border: var(--bw) solid var(--line); border-radius: var(--r-pill, 999px); padding: 2px 8px; }
/* Карточка контрагента (режим Контрагент) */
.chat-contractor { border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s-3);
  display: grid; gap: 4px; background: var(--surface); }
.chat-contractor.is-risk { border-color: #c0392b; }
.cc-name { font-weight: 600; color: var(--ink); }
.cc-status { justify-self: start; font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-pill, 999px); }
.cc-status.is-ok { background: #e6f4ea; color: #1e7e34; }
.cc-status.is-risk { background: #fde7e6; color: #c0392b; }
.cc-row { font-size: var(--fs-sm); color: var(--ink-2); }
.cc-row b { color: var(--ink); font-weight: 600; }
.cc-req { font-size: var(--fs-2xs); color: var(--muted); }
.cc-flag { font-size: var(--fs-2xs); color: #c0392b; }
.cc-foot { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
/* Список тендеров (режим Тендеры) */
.chat-tenders { display: grid; gap: var(--s-2); }
.tnd { display: block; text-decoration: none; border: var(--bw) solid var(--line); border-radius: var(--r-card);
  padding: var(--s-2) var(--s-3); transition: border-color var(--dur) var(--ease); }
.tnd:hover { border-color: var(--ink); }
.tnd-title { font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.tnd-meta { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.tnd-price { font-size: var(--fs-2xs); color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.chat-foot { padding: 0 var(--s-4) var(--s-3); font-size: var(--fs-2xs); color: var(--muted); text-align: center; background: var(--surface); }
.chat-foot a { color: var(--ink-2); text-decoration: underline; }
body.chat-on { overflow: hidden; }
.chat-panel[hidden] { display: none; }  /* [hidden] перебивался display:flex выше */
.chat-text { display: block; }
/* Оценка ответа ассистента 👍/👎 — сигнал качества. Появляется под готовым ответом. */
.chat-react { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.chat-react__b { border: var(--bw) solid var(--line); background: var(--surface);
  border-radius: var(--r-xs); padding: 2px 8px; font-size: 13px; line-height: 1.5; cursor: pointer;
  opacity: .5; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.chat-react__b:hover { opacity: 1; background: var(--wash); }
.chat-react__b.is-on { opacity: 1; background: var(--wash); border-color: var(--ink); }
/* Карточки НМЦК / КП в чате (табличные расчёты) */
.calc-card { border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; margin-top: var(--s-3); }
.calc-head { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line); display: flex; align-items: center; gap: var(--s-2); }
.calc-tag { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .06em; color: var(--surface); background: var(--ink); border-radius: var(--r-pill); padding: 1px var(--s-2); }
.calc-scroll { overflow-x: auto; }  /* узкий drawer: таблица скроллится, а не сжимает колонку названия */
.calc-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* колонка «Позиция» не должна схлопываться до буквы-в-строку — даём минимум и перенос по словам */
.calc-tbl th:first-child, .calc-tbl td:first-child { min-width: 116px; overflow-wrap: anywhere; }
.calc-tbl th { text-align: left; font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: var(--s-2) var(--s-4); white-space: nowrap; }
.calc-tbl td { padding: var(--s-2) var(--s-4); border-top: var(--bw) solid var(--line); vertical-align: top; }
.calc-tbl td.num { text-align: right; white-space: nowrap; font-family: var(--font-display); font-weight: var(--fw-semibold); }
.calc-tbl .calc-sub { display: block; font-size: var(--fs-2xs); color: var(--muted); font-weight: var(--fw-medium); }
.calc-tbl .calc-warn { display: block; font-size: var(--fs-2xs); color: #b4690e; margin-top: 2px; }
.calc-total { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: var(--bw-2, 2px) solid var(--ink); }
.calc-total span { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.calc-total b { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-xl); }
.calc-note { padding: 0 var(--s-4) var(--s-3); font-size: var(--fs-2xs); color: var(--muted); }
.sup-name--link { color: var(--ink); text-decoration: none; border-bottom: var(--bw) dotted var(--line); }
.sup-name--link:hover { border-bottom-color: var(--ink); }

/* -- Динамика цены (таб карточки товара, Chart.js) ------------------------- */
.ic-sm { width: 17px; height: 17px; flex: none; vertical-align: -3px; }
.spin { animation: ph-spin 0.8s linear infinite; transform-origin: center; }
@keyframes ph-spin { to { transform: rotate(360deg); } }

.ph-load { display: flex; align-items: center; gap: var(--s-2); color: var(--muted);
  font-weight: var(--fw-medium); font-size: var(--fs-sm); padding: var(--s-5) 0; }
.ph-gate { display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  text-align: center; padding: var(--s-6) var(--s-4); color: var(--muted); }
.ph-gate svg { color: var(--ink-2); }
.ph-gate p { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--ink-2); max-width: 30ch; }
.ph-empty { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); padding: var(--s-5) 0; }

.ph-head { margin-bottom: var(--s-4); }
.ph-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); }
.ph-sub { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.ph-stats { display: flex; gap: var(--s-5); margin-bottom: var(--s-4); }
.ph-stats .ph-k, .ph-now .ph-k { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-semibold); }
.ph-stats .ph-v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.ph-v.is-down { color: #1f8a4c; }
.ph-v.is-up { color: #b4690e; }

.ph-chart { position: relative; height: 240px; }
.ph-now { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--bw) solid var(--line-2); }
.ph-now .ph-v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); }
@media (max-width: 640px) {
}
.adm-ph-box:not(:empty) { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--bw) solid var(--line); }

/* -- Команда компании (кабинет) ------------------------------------------- */
.team-list { margin-top: var(--s-4); }
.team-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0;
  border-top: var(--bw) solid var(--line-2); }
.team-row:first-child { border-top: 0; }
.team-id { flex: 1 1 auto; min-width: 0; }
.team-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.team-you { font-size: var(--fs-2xs); color: var(--muted); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: 0 var(--s-2); margin-left: var(--s-1); }
.team-email { font-size: var(--fs-sm); color: var(--muted); }
.team-role { flex: none; }
.team-act { flex: none; min-width: 80px; text-align: right; }
.team-inline { margin: 0; }
.team-row--pending .team-name { color: var(--ink-2); }
.team-invite { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: var(--bw) solid var(--line); }
/* Мобильная раскладка команды: три flex-колонки (имя | роль | действия) не влезают в узкий
   экран — сжатая колонка имени ужимается уже неразрывного слова, и длинная фамилия наезжает
   на badge роли. На мобиле складываем строку в колонку: имя → роль → кнопки друг под другом. */
@media (max-width: 640px) {
  .team-row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .team-act { text-align: left; min-width: 0; }
}

/* -- Страница принятия приглашения ---------------------------------------- */
.auth-wrap { max-width: 460px; margin: var(--s-6) auto; }
.invite-card .invite-lead { font-size: var(--fs-md); margin: var(--s-3) 0 var(--s-4); }
.invite-form { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.invite-form label { display: flex; flex-direction: column; gap: var(--s-1);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }

/* -- Инфо-страницы (about/contacts/help/clients/payment-delivery/legal) ----- */
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 760px) { .cards-2, .cards-3 { grid-template-columns: 1fr; } }

/* /branding — карточки brand-kit (логотипы/иконки/favicon). Префикс bk- (не конфликтует с .brand-* списка брендов). */
.bk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-3); }
.bk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .bk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .bk-grid, .bk-grid--3 { grid-template-columns: 1fr; } }
.bk-card { border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--e-1); overflow: hidden; }
.bk-prev { display: flex; align-items: center; justify-content: center; height: 140px;
  border-bottom: var(--bw) solid var(--line); }
.bk-prev img { max-height: 40px; width: auto; }
.bk-prev .bk-ico { max-height: 88px; max-width: 88px; }
.bk-prev .bk-ico.is-rounded { border-radius: var(--r-lg); }
.bk-prev .bk-mascot { max-height: 100px; max-width: 100px; }
.bk-prev--light { background: var(--paper); }
.bk-prev--dark { background: var(--ink); }
.bk-prev--muted { background: var(--bg-soft, #f3f3f1); }
.bk-meta { padding: var(--s-4); }
.bk-meta h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); margin: 0; }
.bk-meta p { margin: var(--s-1) 0 var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.bk-meta--row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.bk-dl { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Палитра фирменных цветов (/branding): свотч-кнопка с click-to-copy HEX */
.bk-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--s-3); }
.bk-sw { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden;
  border: var(--bw) solid var(--line); border-radius: var(--r-el); background: var(--surface);
  cursor: pointer; font: inherit; text-align: left; transition: border-color var(--dur) var(--ease), transform .1s; }
.bk-sw:hover { border-color: var(--ink-2); }
.bk-sw:active { transform: scale(.98); }
.bk-sw::before { content: ""; display: block; height: 64px; background: var(--c); }
.bk-sw--light::before { box-shadow: inset 0 0 0 var(--bw) var(--line); }
.bk-sw-name { padding: var(--s-3) var(--s-3) 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.bk-sw code { padding: 2px var(--s-3) 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-sm); color: var(--ink-2); letter-spacing: .02em; }
.bk-sw small { padding: 2px var(--s-3) var(--s-3); font-size: var(--fs-xs); color: var(--muted); }
.bk-sw.copied { border-color: var(--ok); }
.bk-sw.copied .bk-sw-name::after { content: " · скопировано"; color: var(--ok); font-weight: var(--fw-normal, 400); }
.reqs { width: 100%; border-collapse: collapse; margin-top: var(--s-3); }
.reqs td { padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--line); vertical-align: top; line-height: 1.45; }
.reqs td:first-child { color: var(--muted); width: 42%; padding-right: var(--s-4); }
.reqs tr:last-child td { border-bottom: 0; }
.contact-big { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink); }
.contact-big:hover { text-decoration: underline; }
/* Строка мессенджера на /contacts — бренд-глиф + название/хэндл */
.cmsg { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cmsg:hover { border-color: var(--ink-2); background: var(--surface); }
.cmsg .contact-big { font-size: var(--fs-lg); }
.cmsg-ic { display: inline-flex; flex: 0 0 auto; }
.cmsg-ic svg { width: 26px; height: 26px; display: block; }
.cmsg-ic--max { color: #0077FF; }
.cmsg-ic--telegram { color: #2AABEE; }
.faq-item { border-bottom: var(--bw) solid var(--line); padding: var(--s-1) 0; }
.faq-item:last-child { border-bottom: 0; }
/* Вертикальный padding у самого <summary> — тап-таргет ~40px (был ~21px, высота строки). */
.faq-item > summary { cursor: pointer; font-weight: var(--fw-semibold); list-style: none; display: flex; gap: var(--s-2); padding: var(--s-3) 0; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: "+"; color: var(--muted); font-weight: var(--fw-bold); }
.faq-item[open] > summary::before { content: "\2212"; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s-5); text-align: center; box-shadow: var(--e-1); }
.stat-v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); }
.stat-l { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
.logo-wall { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.logo-chip { border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); background: var(--paper); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-3); }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; min-height: 32px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: var(--fw-bold); }
.steps > li b { display: block; }
.steps > li span { color: var(--ink-2); line-height: 1.5; }
.bullets { margin: var(--s-2) 0 0; padding-left: var(--s-5); color: var(--ink-2); line-height: 1.6; }
.mini b { display: block; }
.mini span { color: var(--muted); font-size: var(--fs-sm); }
.legal-body { color: var(--ink-2); line-height: 1.6; }
.legal-body ul { padding-left: var(--s-5); margin: var(--s-2) 0; }
.legal-body p { margin: var(--s-2) 0; }

/* -- Категорийные SEO-лендинги (servers/storage/workstations) --------------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-5); }
.trust-item { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); background: var(--paper); }
.lp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-3); }
.lp-cat { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-1); }
.lp-cat:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
.lp-cat-name { font-weight: var(--fw-bold); }
.lp-cat-c { font-size: var(--fs-sm); color: var(--muted); }
.lp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.lp-prod { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-1); }
.lp-prod:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
.lp-prod-img { height: 120px; display: grid; place-items: center; background: #fff; border-radius: var(--r-sm); overflow: hidden; }
.lp-prod-img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.lp-prod-brand { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-semibold); text-transform: uppercase; }
.lp-prod-title { font-size: var(--fs-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.lp-prod-price { margin-top: auto; font-weight: var(--fw-bold); }
.brands-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.brand-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-weight: var(--fw-semibold); }
.brand-pill:hover { box-shadow: var(--e-1); }
.brand-pill img { height: 18px; width: auto; max-width: 64px; object-fit: contain; }
.brand-pill .brand-c { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold); }
.use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 760px) { .use-cases { grid-template-columns: 1fr; } }
.use-case { padding: var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.use-case b { display: block; margin-bottom: var(--s-1); }
.use-case span { color: var(--ink-2); line-height: 1.5; font-size: var(--fs-sm); }
.dark-cta { margin: var(--s-7) 0 var(--s-8); padding: var(--s-7); border-radius: var(--r-card); background: var(--ink); color: #fff; }
.dark-cta-h { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-2xl); margin: var(--s-1) 0 var(--s-2); }
.dark-cta p { color: rgba(255,255,255,.78); line-height: 1.55; margin: 0 0 var(--s-4); max-width: 60ch; }

/* -- Колокольчик уведомлений (HTMX polling + поповер) ---------------------- */
/* -- Курс ЦБ РФ в шапке (HTMX-фрагмент, рядом с колокольчиком) -------------- */
.fx-rate { display: inline-flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-1);
  white-space: nowrap; }
.fx-cur { display: inline-flex; align-items: baseline; gap: 3px; font-size: var(--fs-xs);
  color: var(--ink-2); line-height: 1; }
.fx-sym { font-weight: var(--fw-bold); color: var(--muted); }
.fx-val { font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-arr { font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1; }
.fx-up { color: var(--danger); }   /* валюта дорожает — закупка дороже */
.fx-down { color: var(--ok); }     /* валюта дешевеет — закупка дешевле */
@media (max-width: 720px) { .fx-rate { display: none; } }  /* в мобильном меню курс прячем */

.nav-notif { position: relative; display: inline-flex; }
.nav-bell { position: relative; }
.notif-badge { position: absolute; top: 1px; right: 1px; pointer-events: none; }
.notif-dot { display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  line-height: 1; border: 1.5px solid var(--paper); }
.notif-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9001;
  width: min(340px, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  box-shadow: 0 12px 32px rgba(39, 39, 39, .16); }
.notif-pop[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line);
  position: sticky; top: 0; background: var(--surface); }
.notif-h-title { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.notif-readall { background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: 0; }
.notif-readall:hover { color: var(--ink); text-decoration: underline; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: flex; gap: var(--s-3); align-items: flex-start; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line-2); cursor: pointer;
  transition: background var(--dur) var(--ease); }
.notif-item:hover { background: var(--wash); }
.notif-item--unread { background: var(--danger-bg); }
.notif-item--unread:hover { background: var(--danger-bg); }
.notif-i-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-i-title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
.notif-i-body { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; overflow: hidden;
  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-i-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); flex: none; }
.notif-i-time { font-size: var(--fs-3xs); color: var(--muted); white-space: nowrap; }
.notif-i-go { color: var(--ink-2); font-weight: var(--fw-bold); text-decoration: none; font-size: var(--fs-md); line-height: 1; }
.notif-i-go:hover { color: var(--ink); }
.notif-empty { margin: 0; padding: var(--s-6) var(--s-4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
/* Ссылка на полную ленту: поповер показывает только последние 20. */
.notif-all { display: block; padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--line);
  text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.notif-all:hover { color: var(--ink); }

/* -- Техподдержка: кнопка в шапке + поповер-чат + админ-инбокс ----------- */
.nav-support { position: relative; display: inline-flex; }
.nav-support-btn { position: relative; }
.support-badge-slot { position: absolute; top: 1px; right: 1px; pointer-events: none; }
.support-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  line-height: 1; border: 1.5px solid var(--paper); }
.support-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9001;
  width: min(360px, 94vw); background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-el); box-shadow: 0 12px 32px rgba(39, 39, 39, .16);
  display: flex; flex-direction: column; max-height: min(560px, 80vh); }
.support-pop[hidden] { display: none; }
.support-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line); }
.support-h-title { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.support-h-expand { color: var(--muted); display: inline-flex; }
.support-h-expand:hover { color: var(--ink); }
/* Лента сообщений */
.support-feed { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.support-msgs { overflow-y: auto; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column;
  gap: var(--s-2); flex: 1 1 auto; max-height: 380px; }
.support-feed--page .support-msgs, .support-feed--admin .support-msgs { max-height: min(56vh, 520px); }
.support-day { text-align: center; margin: var(--s-2) 0; }
.support-day span { font-size: var(--fs-3xs); color: var(--muted); background: var(--wash);
  padding: 2px var(--s-2); border-radius: var(--r-pill); }
.support-msg { display: flex; gap: var(--s-2); max-width: 86%; }
.support-msg--me { align-self: flex-end; flex-direction: row-reverse; }
.support-msg--admin { align-self: flex-start; }
.support-ava { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--ink); color: var(--surface); margin-top: 2px; }
.support-bubble { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-el); font-size: var(--fs-sm); line-height: 1.4; }
.support-msg--me .support-bubble { background: var(--ink); color: var(--surface); border-bottom-right-radius: var(--s-1); }
.support-msg--admin .support-bubble { background: var(--wash); color: var(--ink); border-bottom-left-radius: var(--s-1); }
.support-from { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--muted); }
.support-text { white-space: pre-wrap; word-break: break-word; }
.support-time { align-self: flex-end; font-size: var(--fs-3xs); opacity: .7; }
.support-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--muted); font-size: var(--fs-sm);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.support-empty p { margin: 0; max-width: 34ch; }
/* Форма ввода */
.support-form { display: flex; gap: var(--s-2); align-items: flex-end; padding: var(--s-3) var(--s-4);
  border-top: var(--bw) solid var(--line); }
.support-input { flex: 1 1 auto; resize: none; padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
.support-send { flex: 0 0 auto; }
/* Страница /cabinet/support — чат во всю доступную высоту (как .msg-shell), а не короткое
   окошко с пустотой под ним: лента сообщений заполняет и скроллится, форма прижата к низу. */
.support-page { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  height: calc(100dvh - var(--header-h) - 160px); min-height: 440px; }
.support-page .support-msgs { padding: var(--s-4); max-height: none; }
@media (max-width: 760px) { .support-page { height: auto; min-height: 70vh; } }
/* Админ-инбокс two-pane */
.support-admin { display: grid; grid-template-columns: 300px 1fr; min-height: 480px;
  border: var(--bw) solid var(--line); border-radius: var(--r-el); overflow: hidden; }
.support-admin-list { border-right: var(--bw) solid var(--line); overflow-y: auto; max-height: 70vh; background: var(--surface); }
.support-thread { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line-2); cursor: pointer; text-decoration: none; color: var(--ink);
  transition: background var(--dur) var(--ease); }
.support-thread:hover { background: var(--wash); }
.support-thread.is-active { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); }
.support-thread-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.support-thread-co { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.support-thread.is-unread .support-thread-co { font-weight: var(--fw-bold); }
.support-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; }
.support-thread-prev { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-thread-when { font-size: var(--fs-3xs); color: var(--muted); }
.support-admin-thread { display: flex; flex-direction: column; min-width: 0; }
.support-admin-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: var(--bw) solid var(--line); }
.support-admin-co { font-weight: var(--fw-bold); font-size: var(--fs-md); }
@media (max-width: 720px) {
  .support-admin { grid-template-columns: 1fr; }
  .support-admin-list { max-height: 240px; }
}

/* -- Главная: AI-лендинг ------------------------------------------------- */
/* Секция-обёртка: вертикальный ритм + тонкий разделитель между блоками. */
.lp-sec { padding: var(--s-10) 0; border-top: var(--bw) solid var(--line-2); }
.lp-sec > .tagline { margin: 0 0 var(--s-2); }
.lp-sec > .page-title { margin: 0 0 var(--s-3); }
.lp-sec > .page-title + .page-sub { margin-bottom: var(--s-6); }

/* AI-витрина: текст слева, мок диалога справа. */
.lp-ai { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-9); align-items: center; }
.lp-ai .page-title { line-height: 1.05; }
.lp-ai .page-sub { margin-bottom: var(--s-5); }
@media (max-width: 860px) { .lp-ai { grid-template-columns: 1fr; gap: var(--s-7); } .lp-ai .lp-demo { order: -1; } }

/* Мок окна чата — иллюстрация, не интерактив (aria-hidden). */
.lp-demo { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--e-1); overflow: hidden; }
.lp-demo-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.lp-demo-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.lp-bubble { max-width: 86%; padding: var(--s-3) var(--s-4); border-radius: var(--r-el); line-height: 1.5;
  font-size: var(--fs-sm); }
.lp-bubble--user { align-self: flex-end; background: var(--ink); color: var(--surface);
  border-bottom-right-radius: var(--s-1); }
.lp-bubble--ai { align-self: flex-start; background: var(--paper); color: var(--ink);
  border-bottom-left-radius: var(--s-1); }
.lp-demo-card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-3); margin-top: var(--s-2); }
.lp-demo-card__brand { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .04em; }
.lp-demo-card__name { font-weight: var(--fw-semibold); margin: 2px 0; }
.lp-demo-card__meta { font-size: var(--fs-sm); color: var(--ink-2); }
.lp-demo-card__meta b { color: var(--ink); }
.lp-demo-foot { margin-top: var(--s-3); font-weight: var(--fw-bold); color: var(--ink); }

/* Шаги — на крупных экранах в три колонки. */
@media (min-width: 761px) { .lp-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }

/* Режимы ассистента — кликабельные карточки (reset кнопки). */
.lp-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.lp-mode { text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-5); border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--e-1); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lp-mode:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
.lp-mode b { font-size: var(--fs-xl); }
.lp-mode-i { display: inline-flex; }
.lp-mode-i .ic { width: 26px; height: 26px; }
.lp-mode-d { color: var(--ink-2); line-height: 1.5; font-size: var(--fs-sm); }
/* Статичная карточка-выгода (не кнопка): без hover-лифта и курсора-указателя. */
.lp-mode--static { cursor: default; }
.lp-mode--static:hover { box-shadow: var(--e-1); transform: none; }
/* Переключатель аудитории в hero главной: тихая ссылка «для поставщиков». */
.hero-switch { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: var(--bw) solid var(--line);
  color: var(--ink-2); font-size: var(--fs-sm); }
.hero-switch a { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Кнопки поверх тёмного CTA-блока. */
.btn--on-dark { background: #fff; color: var(--ink); border-color: #fff; }
.btn--on-dark:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.btn--on-dark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--on-dark-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.lp-faq { max-width: 70ch; }

/* ── Канбан-CRM: воронка сделок (drag-n-drop, /cabinet/crm) ─────────────────── */
.kanban-board { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); align-items: flex-start; }
.kanban-col { flex: 0 0 280px; background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: var(--s-3); min-height: 120px; }
.kanban-col-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.kanban-col-n { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-semibold); }
.kanban-col-sum { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s-2); }
.kanban-cards { display: flex; flex-direction: column; gap: var(--s-2); min-height: 40px; }
.kanban-card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  padding: var(--s-3); cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card-t { display: block; font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none;
  font-size: var(--fs-sm); line-height: 1.3; }
.kanban-card-t:hover { text-decoration: underline; }
.kanban-card-s { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-1); }
.kanban-card-f { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.kanban-card-v { font-weight: var(--fw-bold); font-size: var(--fs-xs); color: var(--ink); }
.kanban-card-d { font-size: var(--fs-3xs); color: var(--muted); margin-left: auto; }
.sortable-ghost { opacity: .4; }
/* форма ручного создания сделки + смена стадии/заметка в детали */
.crm-create { margin-bottom: var(--s-4); }
.crm-create > summary { display: inline-flex; list-style: none; cursor: pointer; }
.crm-create > summary::-webkit-details-marker { display: none; }
.crm-create-form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); align-items: center; }
.crm-create-form .req-in { flex: 1 1 160px; }
.crm-move-form { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ── CRM: переписка по сделке (письма в карточке) ──────────────────────────── */
.crm-mails { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.crm-mail { border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-3);
  background: var(--surface); }
.crm-mail--outbound { background: var(--wash); }
.crm-mail-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-2); }
.crm-mail-dir { font-weight: var(--fw-semibold); color: var(--muted); }
.crm-mail-subj { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin: var(--s-1) 0; }
.crm-mail-body { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; white-space: pre-wrap;
  max-height: 9em; overflow: auto; }
.crm-mail-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; }
.crm-mail-form .req-in { flex: 1 1 220px; }
.crm-mail-form textarea.req-in { flex: 1 1 100%; resize: vertical; font: inherit; }

/* ── CRM: диалоги/чаты в карточке сделки ───────────────────────────────────── */
.crm-dlg { border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-3); margin-bottom: var(--s-2); }
.crm-dlg-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.crm-dlg-msgs { display: flex; flex-direction: column; gap: var(--s-1); }
.crm-msg { font-size: var(--fs-sm); line-height: 1.5; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); }
.crm-msg--customer { background: var(--wash); }
.crm-msg--admin, .crm-msg--bot { background: transparent; }
.crm-msg-who { font-weight: var(--fw-semibold); color: var(--ink-2); }
.crm-msg-d { margin-left: var(--s-2); }
.crm-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) 0;
  border-bottom: var(--bw) solid var(--line); }
.crm-link-subj { flex: 1 1 200px; font-size: var(--fs-sm); }

/* ── Калькулятор маржи МП (вкладка /cabinet/marketplaces?tab=calculator) ── */
.tnum { font-variant-numeric: tabular-nums; }
.calc-form { margin-top: var(--s-2); }
.calc-seg { display: inline-flex; gap: 0; border: var(--bw) solid var(--line); border-radius: var(--r-el);
  overflow: hidden; margin-bottom: var(--s-5); }
.calc-seg-btn { cursor: pointer; font-weight: var(--fw-bold); font-size: var(--fs-sm); padding: var(--s-2) var(--s-4);
  color: var(--muted); background: var(--paper); user-select: none; }
.calc-seg-btn + .calc-seg-btn { border-left: var(--bw) solid var(--line); }
.calc-seg-btn.is-on { background: var(--ink); color: var(--surface); }
.calc-seg-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4); }
.calc-grid .field { margin-bottom: 0; }
/* Поля калькулятора — по ширине ячейки грида (иначе select.req-in=130px обрезал длинные
   опции, напр. «rFBS / DBS — везу сам (СДЭК)» → «FBS — мой ск…»). */
.calc-grid .field .req-in, .calc-grid .field .inp { width: 100%; }
.calc-hint { text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); color: var(--muted); }
.calc-slider { display: flex; flex-direction: column; gap: var(--s-2); }
.calc-slider input[type="range"] { width: 100%; accent-color: var(--ink); }
.calc-result { margin-top: var(--s-5); }
.calc-placeholder { padding: var(--s-4) 0; }
.calc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3);
  margin-bottom: var(--s-4); }
.calc-stat { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); background: var(--paper); }
.calc-stat-l { display: block; font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-1); }
.calc-stat-v { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums; }
.calc-pos { color: var(--ok); }
.calc-neg { color: var(--danger); }
.calc-bd { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--s-2) var(--s-4); background: var(--surface); }
.calc-bd-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm);
  padding: var(--s-2) 0; color: var(--ink-2, var(--ink)); }
.calc-bd-sub { font-weight: var(--fw-semibold); color: var(--ink); }
.calc-bd-sep { height: var(--bw); background: var(--line); margin: var(--s-1) 0; }
.calc-bd-total { font-weight: var(--fw-extrabold); font-size: var(--fs-base); padding: var(--s-3) 0; }
.calc-verdict { margin-top: var(--s-3); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm);
  border: var(--bw) solid transparent; }
.calc-verdict--ok { background: var(--ok-bg); color: var(--ok); }
.calc-verdict--bad { background: var(--danger-bg); color: var(--danger); }
.calc-prefill { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-2); }
.calc-sku { flex: 1; min-width: 220px; }
.calc-lookup:not(:empty) { margin-bottom: var(--s-3); }
.calc-found { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm);
  color: var(--ok); background: var(--ok-bg); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
.calc-found-mp { margin-left: auto; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--muted); }
.calc-notfound { padding: var(--s-2) 0; }
.calc-publish { margin-top: var(--s-3); }
.calc-pub-flash { margin-top: var(--s-3); }
.calc-bulk-panel { margin-top: var(--s-4); }
.calc-bulk-sum { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.calc-bulk-tbl { overflow-x: auto; }
.calc-bulk-tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.calc-bulk-tbl th, .calc-bulk-tbl td { text-align: right; padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--line); white-space: nowrap; }
.calc-bulk-tbl th:first-child, .calc-bulk-tbl td:first-child { text-align: left; }
.calc-bulk-name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.calc-bulk-more { padding: var(--s-2) 0; font-size: var(--fs-sm); }
.calc-bulk-apply { margin-top: var(--s-3); }

/* Импорт-флоу v2: инлайн-маппинг колонок + прогресс фонового импорта */
.imp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); margin: var(--s-2) 0; }
.imp-sample { margin-top: var(--s-2); padding-left: var(--s-2); border-left: 2px solid var(--line); }
.imp-progress { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); background: var(--paper-2); border-radius: 8px; margin-top: var(--s-2); }
.imp-spin { width: 16px; height: 16px; flex: none; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: imp-spin 0.7s linear infinite; }
@keyframes imp-spin { to { transform: rotate(360deg); } }

/* ── Приёмка фото own-товаров (/cabinet/products/photo-review) ── */
.pr-list { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-3) 0; }
.pr-row { display: grid; grid-template-columns: 230px 1fr; gap: var(--s-3); align-items: start;
  padding: var(--s-3); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.pr-info { min-width: 0; }
.pr-title { font-weight: 600; font-size: var(--fs-1); line-height: 1.3; }
.pr-sub { display: flex; gap: var(--s-2); align-items: baseline; margin-top: 4px; flex-wrap: wrap; }
.pr-brand { font-size: var(--fs-0); font-weight: 600; color: var(--ink); }
.pr-query { margin-top: var(--s-2); overflow-wrap: anywhere; }
.pr-cands { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pr-cand { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  width: 130px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-2);
  transition: border-color .12s, box-shadow .12s; }
.pr-cand > input { position: absolute; opacity: 0; pointer-events: none; }
.pr-cand-img { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; background: #fff; }
.pr-cand-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pr-cand-meta { display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 3px 4px; font-size: 11px; color: var(--muted); }
.pr-zoom { display: inline-flex; color: var(--muted); }
.pr-zoom:hover { color: var(--ink); }
.pr-cand:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pr-cand--skip { width: 96px; }
.pr-cand--skip:has(input:checked) { border-color: var(--warn, #b45309); box-shadow: 0 0 0 1px var(--warn, #b45309); }
.pr-actionbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; margin-top: var(--s-2); border-top: 1px solid var(--line); flex-wrap: wrap; }
.pr-empty { text-align: center; }
@media (max-width: 720px) {
  .pr-row { grid-template-columns: 1fr; }
}

/* Приёмка фото: мультивыбор галочками — индикатор выбранной картинки */
.pr-cand-check { position: absolute; top: 5px; right: 5px; display: none; color: var(--ink);
  background: var(--paper); border-radius: 50%; line-height: 0; }
.pr-cand:has(input:checked) .pr-cand-check { display: inline-flex; }
/* opacity:.75 гасил выверенный --muted (#615E56, AA 5.39) до 3.23 — убрано (#17). */
.pr-hint { margin-top: var(--s-2); }

/* Редактор КП (/cabinet/quotes/{id}): компактные инпуты в таблице позиций + итоги */
.qp-table td { vertical-align: middle; }
.qp-table input { width: 100%; padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); }
.qp-table .qp-qty, .qp-table .qp-price { max-width: 120px; margin-left: auto; text-align: right; }
.qp-line { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qp-del { color: var(--muted); }
.qp-del:hover { color: var(--danger, #c0392b); }
.qp-totals { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline;
  margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.qp-totals .qp-grand { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.qp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Импорт прайса: drag-n-drop зона загрузки файла (без либ — обработчики в app.js). */
.dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  border: var(--bw) dashed var(--line); border-radius: var(--r-card); background: var(--wash);
  padding: var(--s-5) var(--s-6); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.dropzone.is-drag { border-color: var(--ink); background: var(--surface); }
.dropzone-ic { color: var(--ink-2); display: inline-flex; }
.dropzone-ic svg { width: 22px; height: 22px; }
.dropzone-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* Согласие на обработку ПДн (152-ФЗ): чекбокс + ссылки на оферту/политику под формами сбора ПДн. */
.consent { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm);
  color: var(--ink-2, var(--ink)); line-height: 1.4; margin: var(--s-2) 0; }
.consent input[type="checkbox"] { flex: none; margin-top: 2px; width: 16px; height: 16px; cursor: pointer; }
.consent a { text-decoration: underline; }

/* Cookie-баннер (152-ФЗ): фикс снизу, поверх контента, до согласия на аналитику. */
.cookie-banner { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; justify-content: center;
  max-width: 880px; margin: 0 auto; padding: var(--s-3) var(--s-4); background: var(--ink);
  color: var(--paper); border-radius: var(--r-md, 12px); box-shadow: 0 8px 30px rgba(0,0,0,.25);
  font-size: var(--fs-sm); line-height: 1.4; }
.cookie-banner[hidden] { display: none; }  /* [hidden] перебивался display:flex выше → «Принять» не прятал баннер */
.cookie-banner__txt { flex: 1 1 320px; }
.cookie-banner a { color: var(--paper); text-decoration: underline; }

/* Юр-ссылки в подвале (оферта/политика/возврат) — на всех страницах. */
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center;
  padding: var(--s-3) 0; border-top: var(--bw) solid var(--line); font-size: var(--fs-sm); }
.foot-legal a { color: var(--ink-2); }
.foot-legal a:hover { color: var(--ink); }

/* ── Отзывы о продавце (seller_reviews): рейтинг-виджет, форма, карточки ─────── */
.rev-flash { margin: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-el);
  font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s-2); }
.rev-flash--ok  { background: var(--ok-bg);     color: var(--ok); }
.rev-flash--err { background: var(--danger-bg); color: var(--danger); }

/* Сводка: крупная оценка + бары распределения */
.rev-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5);
  align-items: center; padding: var(--s-3) var(--s-3) var(--s-4); }
.rev-score { text-align: center; min-width: 96px; }
.rev-score-num { font-size: var(--fs-5xl); font-weight: var(--fw-bold); line-height: 1; }
.rev-score-cnt { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-1); }
.rev-bars { display: flex; flex-direction: column; gap: var(--s-1); }
.rev-bar-row { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--muted); }
.rev-bar { height: 8px; background: var(--wash); border-radius: var(--r-pill); overflow: hidden; }
.rev-bar-fill { display: block; height: 100%; background: #f5a623; border-radius: var(--r-pill); }
.rev-bar-n { text-align: right; }

/* Звёзды отображения (свои, крупнее .fb-stars) */
.rev-stars { color: #f5a623; font-size: var(--fs-lg); letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.rev-stars-off { color: var(--line); }

/* Форма отзыва */
.rev-form { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3);
  border-top: var(--bw) solid var(--line); }
.rev-form-h { font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); }
.rev-verified { font-size: var(--fs-2xs); }

/* Звёздный ввод оценки (radio): row-reverse → визуально 1..5 слева направо */
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-input input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-input label { color: var(--line); font-size: 30px; line-height: 1; cursor: pointer;
  transition: color var(--dur) var(--ease); }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: #f5a623; }
.star-input input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* Карточки отзывов */
.revcard-list { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); }
.revcard { border: var(--bw) solid var(--line); border-radius: var(--r-el); padding: var(--s-3); }
.revcard--hidden { opacity: .6; }
.revcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.revcard-title { font-weight: var(--fw-semibold); }
.revcard-date { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.revcard-text { margin-top: var(--s-2); font-size: var(--fs-md); line-height: 1.5; white-space: pre-line; }
.revcard-author { margin-top: var(--s-2); font-size: var(--fs-xs); }
.revcard-reply { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--wash);
  border-radius: var(--r-el); border-left: 2px solid var(--line); }
.revcard-reply-h { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2);
  display: flex; align-items: center; gap: var(--s-1); }
.revcard-reply-t { margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-line; }
.revcard-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }

@media (max-width: 560px) {
  .rev-summary { grid-template-columns: 1fr; gap: var(--s-3); }
  /* iOS Safari зумит при фокусе на input/select/textarea с font-size <16px → ВСЕ
     текстовые форм-контролы на мобиле получают 16px (--fs-xl). Универсально, без
     перечисления классов: раньше список конкретных селекторов промахивался (textarea
     уже ловили на этом). `:not(:disabled)` у textarea/select поднимает специфичность
     до (0,1,1) — перебивает одноклассовые мелкие шрифты (.fb-input 0,1,0) и за счёт
     порядка в файле — равноспецифичный `.tender-filters select` (0,1,1). Наши форм-поля
     ≤15px по дизайну, так что это всегда подъём до 16, а не уменьшение. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  textarea:not(:disabled), select:not(:disabled), .support-input {
    font-size: var(--fs-xl);
  }
}

/* Рейтинг продавца в карточке списка поставщиков + чипы сортировки */
.sup-sort { align-items: center; margin-top: var(--s-2); }
.sup-sort-lbl { font-size: var(--fs-sm); margin-right: var(--s-1); }
.sup-card-rating { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1);
  font-size: var(--fs-sm); }
.sup-card-rating .rev-stars { font-size: var(--fs-sm); }

/* Рейтинг продавца в строке оффера (карточка товара) — компактный inline */
.offer-rating { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs);
  white-space: nowrap; vertical-align: middle; }
.offer-rating .rev-stars { font-size: var(--fs-xs); }

/* Live-обновление офферов карточки (SSE): короткая подсветка изменившейся таблицы */
@keyframes liveFlash { from { background: var(--wash, #f4f6fb); } to { background: transparent; } }
.t-stack tbody.live-flash { animation: liveFlash .9s ease-out; }

/* Привязка личного бота MAX (cabinet_company «Уведомления») */
.bot-link { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.bot-link-row { display: flex; align-items: center; gap: var(--s-3); }
.bot-code {
  display: inline-block; margin: var(--s-2) 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: .18em;
  padding: var(--s-2) var(--s-3); background: var(--wash, #f4f6fb);
  border: 1px solid var(--line); border-radius: var(--r-el);
}

/* ─── Лендинг /catalog: hero «инженерный разворот» ──────────────────────────
   Масштаб как герой: число-плашка + поиск + быстрые входы. Фон — тонкая
   инженерная сетка из --line с radial-маской (атмосфера, не шум). */
.cat-hero { position: relative; margin: var(--s-7) 0 var(--s-10); padding: var(--s-9) 0 var(--s-2); overflow: hidden; }
.cat-hero-grid {
  position: absolute; inset: -40% -20% auto -20%; height: 200%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask: radial-gradient(120% 70% at 28% 12%, #000 0%, rgba(0,0,0,.5) 45%, transparent 72%);
          mask: radial-gradient(120% 70% at 28% 12%, #000 0%, rgba(0,0,0,.5) 45%, transparent 72%);
}
.cat-hero-in { position: relative; z-index: 1; max-width: 760px; }
.cat-hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-5);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
}
.cat-hero-title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-lg); line-height: 1.04; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 var(--s-4); text-wrap: balance;
}
.cat-hero-num {
  display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--ink); color: var(--paper); padding: 0 .14em; border-radius: var(--r-sm);
  box-shadow: var(--e-1);
}
.cat-hero-sub { font-weight: var(--fw-medium); font-size: var(--fs-lg); color: var(--ink-2); max-width: 620px; margin: 0 0 var(--s-6); }
.cat-hero-search { max-width: 640px; margin: 0; }
/* Мобильный геро-H1 лендингов: на узких экранах --fs-display-lg упирался в min 34px и длинный
   заголовок расползался на 5–6 строк, отжимая контент под фолд. Даём scale-down (cap 34px — не
   больше текущего), 320px→28px / 393px→~31px. Только фраза-геро, только ≤480px; десктоп цел. */
@media (max-width: 480px) {
  .hero h1, .cat-hero-title { font-size: clamp(28px, 8vw, 34px); }
}
@media (max-width: 760px) {
  .cat-hero { padding-top: var(--s-7); }
  .cat-hero-grid { background-size: 26px 26px; }
}

/* ─── Reveal: staggered появление секций на скролле (прогрессивно) ─────────── */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: var(--rd, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ─── Каталог в цифрах ─────────────────────────────────────────────────────── */
.cat-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  margin: var(--s-8) 0; padding: var(--s-6);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card);
}
.cat-stat { display: flex; flex-direction: column; gap: var(--s-1); padding: 0 var(--s-2);
  border-left: var(--bw-2) solid var(--line); }
.cat-stat:first-child { border-left: 0; }
.cat-stat-n {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-4xl); line-height: 1; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cat-stat-l { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); }
@media (max-width: 760px) {
  .cat-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); padding: var(--s-5); }
  .cat-stat:nth-child(3) { border-left: 0; }
  .cat-stat-n { font-size: var(--fs-3xl); }
}

/* ─── Плитки категорий/разделов: БЕЗ подложки — прозрачная иллюстрация висит прямо
   на фоне страницы (кураторские рендеры с вырезанным фоном). Только hover-зум обложки. ─── */
.cat-tile {
  padding: var(--s-3) var(--s-2); gap: var(--s-2);
  background: transparent; border: 0; border-radius: var(--r-el);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat-tile:hover { transform: translateY(-4px); }
.cat-tile:hover .cat-tile-name { text-decoration: none; }
.cat-tile-img { overflow: hidden; border-radius: var(--r-sm); }
.cat-tile-img img { transition: transform var(--dur-slow) var(--ease-out); }
.cat-tile:hover .cat-tile-img img { transform: scale(1.07); }

/* ─── Бренд-сетка: название + число позиций (вместо плоских чипов) ──────────── */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.brand-cell {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease-out);
}
.brand-cell:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--e-1); }
.brand-cell-n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink); line-height: 1.2; }
.brand-cell-c { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .brand-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); } }

/* ─── dark-CTA: инженерная сетка на тёмном + eyebrow ───────────────────────── */
.dark-cta { position: relative; overflow: hidden; }
.dark-cta-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask: radial-gradient(85% 130% at 92% 6%, #000 0%, transparent 68%);
          mask: radial-gradient(85% 130% at 92% 6%, #000 0%, transparent 68%);
}
.dark-cta-in { position: relative; z-index: 1; }
.dark-cta-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: rgba(255,255,255,.85); margin: 0 0 var(--s-3);
  padding: var(--s-1) var(--s-3); background: rgba(255,255,255,.10); border-radius: var(--r-pill);
}

/* ─── Скелетон карточек ленивого блока «Популярные товары» ──────────────────── */
.prod-skel { display: flex; flex-direction: column; }
.prod-skel-img { aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.prod-skel-line { height: 13px; margin-top: var(--s-2); border-radius: var(--r-sm); }
.prod-skel-line--short { width: 55%; }

/* ─── Единое пустое состояние (макрос empty_state) ─────────────────────────── */
.empty-mascot { display: block; margin: 0 auto var(--s-3); width: 120px; height: auto; opacity: .9; }
.empty-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink); }
.empty-hint { font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--muted); margin: var(--s-2) auto 0; max-width: 46ch; }
.empty-cta { margin-top: var(--s-4); }
.results--grid > .empty { grid-column: 1 / -1; }

/* ─── Страница ошибки (404) — на токенах ДС вместо inline ───────────────────── */
.err-page { display: flex; align-items: center; justify-content: center; gap: var(--s-10); flex-wrap: wrap; padding: var(--s-10) 0; }
.err-mascot { width: 180px; height: auto; }
.err-body { max-width: 420px; }
.err-eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--warn); margin: 0; }
.err-h { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-4xl); line-height: 1.08; margin: var(--s-2) 0 var(--s-3); color: var(--ink); }
.err-sub { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--s-6); }

/* ─── Login: блочная кнопка + центрированные ссылки (вместо inline) ─────────── */
.btn--block { width: 100%; }
.login-links { text-align: center; margin-top: var(--s-2); }

/* ─── A-Z указатель брендов (/brands/letter/{X}) ───────────────────────────── */
.az-nav { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-5) 0 var(--s-7); }
.az-letter {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 var(--s-2);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--ink-2);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.az-letter:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); transform: translateY(-2px); }
.az-letter.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ── AI-поиск-лендинг (/lab/ai) ──────────────────────────────── */
.ai-search { margin-top: var(--s-5); max-width: 560px; }
.ai-chips { margin-top: var(--s-3); }
/* ── Сканер «ИИ перебирает рынок»: радар-локатор + бегущий луч + меняющийся статус ── */
.ai-busy { display: none; margin: var(--s-10) auto var(--s-9); width: 100%; }
.ai-busy.htmx-request { display: flex; justify-content: center; }
/* во время сканирования прячем низ и подсказки — фокус на процессе */
.ai-stage:has(.ai-busy.htmx-request) .ai-extra,
.ai-stage:has(.ai-busy.htmx-request) .ai-chips,
.ai-stage:has(.ai-busy.htmx-request) .ai-stage-stats,
.ai-stage:has(.ai-busy.htmx-request) .ai-status { display: none; }

.ai-scan { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.ai-scan-radar { position: relative; width: 132px; height: 132px; }
/* концентрические кольца-локатор */
.ai-scan-radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 21px, var(--line) 21px 22px, transparent 22px 44px); }
/* пульс-волна, расходящаяся наружу */
.ai-scan-radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--ink); opacity: 0; animation: ai-scan-wave 1.8s var(--ease-out) infinite; }
@keyframes ai-scan-wave { 0% { transform: scale(.22); opacity: .5; } 100% { transform: scale(1); opacity: 0; } }
/* бегущий луч-сектор внутри круга */
.ai-scan-sweep { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  -webkit-mask: radial-gradient(circle, #000 0 64px, transparent 65px); mask: radial-gradient(circle, #000 0 64px, transparent 65px); }
.ai-scan-sweep::before { content: ''; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(39,39,39,.20) 40deg, transparent 62deg);
  animation: ai-scan-spin 1.5s linear infinite; }
@keyframes ai-scan-spin { to { transform: rotate(360deg); } }
/* центр-куб (бренд) */
.ai-scan-core { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%,-50%);
  background: var(--ink); border-radius: 3px; box-shadow: 0 0 0 5px var(--wash); }
.ai-scan-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink);
  letter-spacing: -.01em; min-height: 1.4em; text-align: center; }
.ai-scan-label::after { content: '▋'; margin-left: 2px; color: var(--muted); animation: ai-scan-blink 1s step-end infinite; }
@keyframes ai-scan-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ai-scan-radar::after, .ai-scan-sweep::before, .ai-scan-label::after { animation: none; }
  .ai-scan-radar::after { opacity: .3; transform: scale(.7); } }
#aiResults:not(:empty) { margin-top: var(--s-6); }
.ai-summary { max-width: 820px; margin: 0 auto var(--s-5); font-size: var(--fs-lg);
  line-height: 1.5; color: var(--ink); font-weight: var(--fw-medium); }
.ai-note { max-width: 820px; margin: 0 auto var(--s-4); color: var(--warn-ink); font-size: var(--fs-sm); }
.ai-reason { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); color: var(--ok-ink); background: var(--ok-bg);
  padding: 3px var(--s-2); border-radius: var(--r-pill); margin-bottom: var(--s-2); }
/* ── Chat-first /lab/ai (inline AI-ассистент) ─────────────────── */
.lab-chat { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-h) - 2px);
  max-width: 920px; margin: 0 auto; width: 100%; }
.lab-log { flex: 1; padding: var(--s-5) var(--s-4); overflow-x: hidden; min-width: 0; }
/* Пустое состояние — по центру ленты (как новый чат) */
.lab-empty { margin: auto; max-width: 600px; text-align: center; padding: var(--s-6) var(--s-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.lab-empty-mascot { width: 96px; height: 96px; }
.lab-empty-h { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); line-height: 1.15; }
.lab-empty-sub { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.5; max-width: 48ch; }
.lab-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.lab-suggest button { padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lab-suggest button:hover { border-color: var(--ink); background: var(--paper); }
/* Строка ввода закреплена внизу */
.lab-input { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: var(--s-2);
  margin: 0 var(--s-4) var(--s-3); background: var(--surface); border: var(--bw-2) solid var(--line);
  border-radius: var(--r-card); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  padding-bottom: max(var(--s-2), env(safe-area-inset-bottom)); }
.lab-input:focus-within { border-color: var(--ink); }
.lab-input textarea { flex: 1; border: 0; background: transparent; outline: none; resize: none;
  font: inherit; font-size: var(--fs-md); color: var(--ink); max-height: 160px; padding: var(--s-2) 0; }
.lab-foot { text-align: center; color: var(--muted); font-size: var(--fs-2xs); padding: 0 var(--s-4) var(--s-4); }
/* Крупные вертикальные карточки в ответе ассистента на /lab/ai */
.lab-chat .chat-bubble { max-width: 100%; }
.lab-chat .chat-cards { width: 100%; }
.lab-chat .chat-card { width: 100%; padding: var(--s-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-el); background: var(--surface); }
.lab-chat .chat-card-thumb { width: 72px; height: 72px; }
.lab-chat .chat-card-title { font-size: var(--fs-md); }

/* ── Товарная панель-drawer (детали товара из карточек чата) ──── */
.product-drawer { position: fixed; inset: 0; z-index: 9300; }
.product-drawer[hidden] { display: none; }
.pd-overlay { position: absolute; inset: 0; background: rgba(39,39,39,.42); animation: pd-fade .2s; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }
.pd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(680px, 96vw); background: var(--surface);
  box-shadow: var(--e-1); overflow-y: auto; overflow-x: hidden; animation: pd-slide-right .25s var(--ease-out); }
@keyframes pd-slide-right { from { transform: translateX(100%); } to { transform: none; } }
.pd-inner { padding: var(--s-5) var(--s-4) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.pd-close { position: sticky; top: 0; align-self: flex-end; background: var(--surface); border: 0; cursor: pointer;
  padding: var(--s-2); border-radius: var(--r-pill); color: var(--ink-2); line-height: 0; }
.pd-close:hover { background: var(--wash); color: var(--ink); }
.pd-close svg { width: 22px; height: 22px; display: block; }  /* иконка ✕ — иначе svg без класса = 0×0 (невидима) */
.pd-head { display: flex; gap: var(--s-3); }
.pd-thumb { width: 96px; height: 96px; flex: none; display: grid; place-items: center; background: #fff;
  border: var(--bw) solid var(--line); border-radius: var(--r-el); overflow: hidden; }
.pd-thumb img { width: 88%; height: 88%; object-fit: contain; }
.pd-meta { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.pd-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.25; overflow-wrap: anywhere; }
.pd-sub { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.pd-price { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); margin-top: var(--s-1); }
.pd-section-h { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.pd-specgroup { margin-bottom: var(--s-3); }
.pd-specgroup-h { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); margin: 0 0 var(--s-1); }
.pd-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); margin: 0; }
.pd-attr { display: flex; flex-direction: column; gap: 1px; padding: var(--s-2) 0;
  border-top: var(--bw) solid var(--line); min-width: 0; }
.pd-attr dt { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pd-attr dd { font-size: var(--fs-sm); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pd-attrs { grid-template-columns: 1fr; } }
.pd-full { margin-top: var(--s-2); text-align: center; }
.pd-loading { padding: var(--s-8) var(--s-4); text-align: center; color: var(--muted); }
@media (max-width: 760px) {
  .pd-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 90vh;
    border-radius: var(--r-card) var(--r-card) 0 0; animation: pd-slide-up .28s var(--ease-out); }
  @keyframes pd-slide-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .pd-panel, .pd-overlay { animation: none; } }

/* ── Chat UX additions ─────────────────────────────────────────────────── */
.chat-card-stock { display: block; font-size: var(--fs-xs); color: var(--ok);
  font-weight: var(--fw-medium, 500); margin-top: 2px; }
.pd-stock { font-size: var(--fs-sm); color: var(--ok); font-weight: var(--fw-medium, 500);
  margin-top: var(--s-1); }
.chat-retry { display: inline-block; margin-top: var(--s-1); padding: 2px 10px;
  font-size: var(--fs-xs); color: var(--ink); background: none;
  border: 1px solid currentColor; border-radius: var(--r-sm, 4px); cursor: pointer; opacity: 0.75; }
.chat-retry:hover { opacity: 1; }
.chat-stream-err { font-size: var(--fs-xs); color: var(--muted, #888); opacity: 0.8; }
.chat-quick { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.chat-quick button { padding: 4px 12px; font-size: var(--fs-xs); border: 1px solid var(--line, #ddd);
  border-radius: var(--r-sm, 4px); background: var(--paper); color: var(--ink); cursor: pointer;
  white-space: nowrap; }
.chat-quick button:hover { border-color: var(--ink); color: var(--ink); }
.chat-skel { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.chat-skel-card { height: 80px; border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--surface, #f0f0f0) 25%, var(--line, #e0e0e0) 50%, var(--surface, #f0f0f0) 75%);
  background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .chat-skel-card { animation: none; background: var(--surface, #f0f0f0); } }

/* ── Сцена ИИ-поиска /lab/ai: живая строка-консультант + радар «сканирую рынок» ── */
.ai-stage { position: relative; overflow: hidden; padding: 0 var(--s-4) var(--s-9); }

/* Радар: концентрические дуги расходятся из-под строки («ИИ сканирует рынок») + мягкий wash */
.ai-stage-atmos { position: absolute; inset: 0 0 auto 0; height: 92vh; z-index: 0; pointer-events: none; }
.ai-stage-atmos::before { content: ''; position: absolute; left: 50%; top: 32%; width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle at center,
    transparent 0 58px, rgba(39,39,39,.05) 58px 59px, transparent 59px 118px);
  -webkit-mask: radial-gradient(circle at center, #000 0%, transparent 42%);
  mask: radial-gradient(circle at center, #000 0%, transparent 42%);
  animation: ai-radar 7s var(--ease) infinite; }
@keyframes ai-radar { 0% { transform: translate(-50%,-50%) scale(.8); opacity: 0; }
  35% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.1); opacity: 0; } }
.ai-stage-atmos::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(46% 40% at 50% 22%, var(--wash), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .ai-stage-atmos::before { animation: none; opacity: .45; } }

.ai-stage-hero { width: 100%; max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1;
  padding-top: clamp(var(--s-8), 11vh, var(--s-10)); padding-bottom: var(--s-9); }

/* Embed (кабинет /cabinet/search, узкая колонка #appMain с сайдбаром): тот же distinctive-вид,
   но компактнее — заголовок мельче, вертикальные отступы сжаты, радар-атмосфера короче. */
.ai-stage--embed { padding-bottom: var(--s-7); }
.ai-stage--embed .ai-stage-hero { padding-top: var(--s-7); padding-bottom: var(--s-7); max-width: 640px; }
.ai-stage--embed .ai-stage-h { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ai-stage--embed .ai-status { margin-bottom: var(--s-4); }
.ai-stage--embed .ai-stage-atmos { height: 60vh; }

/* Home (главная = поисковик): первый экран целиком отдан поиску — строка по центру вьюпорта,
   как у Google. Когда появляется выдача (#searchResults наполнен) — схлоп к обычной раскладке,
   чтобы результаты были сразу видны без скролла. */
/* safe center: на коротком вьюпорте, если контент выше экрана, прижимаемся к верху
   (а не центрируем с обрезкой верха H1/статуса) — первый экран всегда читается сверху. */
.ai-stage--home { display: flex; flex-direction: column; justify-content: safe center; min-height: 84vh; min-height: 84svh; }
.ai-stage--home .ai-stage-hero { padding-top: var(--s-6); padding-bottom: var(--s-7); }
/* Заголовок главной с подзаголовком — чуть умереннее глобального clamp, чтобы 3 строки + sub
   уверенно влезали в фолд на ноутбучных высотах. */
.ai-stage--home .ai-stage-h { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.ai-stage--home:has(#searchResults .results) { min-height: 0; justify-content: flex-start; }
.ai-stage--home:has(#searchResults .results) .ai-stage-hero { padding-top: clamp(var(--s-8), 11vh, var(--s-10)); }
/* /search (не главная, не кабинет-embed): когда пришла выдача — прячем маркетинговый заголовок,
   подзаголовок, статус-пилюлю, статы и tz-ссылку и поднимаем результаты к первому экрану (раньше
   полный геро повторялся и «N товаров» уходило под фолд). Тот же :has(.results)-механизм, что у главной. */
.ai-stage:not(.ai-stage--home):not(.ai-stage--embed):has(#searchResults .results) .ai-status,
.ai-stage:not(.ai-stage--home):not(.ai-stage--embed):has(#searchResults .results) .ai-stage-h,
.ai-stage:not(.ai-stage--home):not(.ai-stage--embed):has(#searchResults .results) .ai-stage-sub,
.ai-stage:not(.ai-stage--home):not(.ai-stage--embed):has(#searchResults .results) .ai-stage-stats,
.ai-stage:not(.ai-stage--home):not(.ai-stage--embed):has(#searchResults .results) .tz-link { display: none; }
.ai-stage:not(.ai-stage--home):not(.ai-stage--embed):has(#searchResults .results) .ai-stage-hero { padding-top: var(--s-3); padding-bottom: var(--s-4); }

/* Живой статус-индикатор с пульсирующей точкой */
.ai-status { display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--muted);
  padding: var(--s-1) var(--s-3) var(--s-1) calc(var(--s-2) + 2px); margin-bottom: var(--s-6);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-pill); }
.ai-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); position: relative; flex: none; }
.ai-status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ok);
  animation: ai-pulse 2s var(--ease) infinite; }
@keyframes ai-pulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ai-status-dot::after { animation: none; opacity: 0; } }

/* Editorial мега-заголовок + акцент-подчёркивание инженерной линией (рисуется при загрузке) */
.ai-stage-h { font-family: var(--font-display); font-size: clamp(2.1rem, 6vw, 3.9rem);
  font-weight: var(--fw-extrabold); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.ai-stage-h-em { position: relative; }
.ai-stage-h-em::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em;
  background: var(--ink); transform-origin: left; transform: scaleX(0); border-radius: 2px;
  animation: ai-underline .7s var(--ease-out) .55s forwards; }
@keyframes ai-underline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ai-stage-h-em::after { transform: scaleX(1); animation: none; } }

/* C2: заголовок-герой собирается по словам на загрузке. Активно только там, где H1 разбит
   на .w-спаны (главная, search_hero_title) — на /search без .w заголовок появляется сразу.
   nth-of-type считает только спаны, игнорируя <br>. */
.ai-stage-h .w { display: inline-block; opacity: 0; transform: translateY(.4em);
  animation: ai-word-in .5s var(--ease-out) both; }
.ai-stage-h .w:nth-of-type(1) { animation-delay: .12s; }
.ai-stage-h .w:nth-of-type(2) { animation-delay: .20s; }
.ai-stage-h .w:nth-of-type(3) { animation-delay: .28s; }
.ai-stage-h .w:nth-of-type(4) { animation-delay: .36s; }
.ai-stage-h .w:nth-of-type(5) { animation-delay: .44s; }
.ai-stage-h .w:nth-of-type(6) { animation-delay: .52s; }
.ai-stage-h .w:nth-of-type(7) { animation-delay: .60s; }
.ai-stage-h .w:nth-of-type(8) { animation-delay: .68s; }
@keyframes ai-word-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-stage-h .w { opacity: 1; transform: none; animation: none; } }

/* Подзаголовок-ценность под H1 (главная): проявляется после сборки слов. */
.ai-stage-sub { max-width: 600px; margin: var(--s-4) auto 0; color: var(--ink-2);
  font-size: var(--fs-2xl); line-height: 1.5; text-wrap: balance;
  opacity: 0; animation: ai-sub-in .55s var(--ease-out) .9s forwards; }
@keyframes ai-sub-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-stage-sub { opacity: 1; animation: none; } }

/* Переключатель режима поиска: ИИ-подбор / обычный (segment-control) */
.search-mode { display: inline-flex; gap: 2px; margin: var(--s-5) auto var(--s-1); padding: 3px;
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-pill); }
.sm-opt { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sm-opt--on { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .sm-opt:not(.sm-opt--on):hover { color: var(--ink); } }
.sm-opt svg { width: 15px; height: 15px; }
/* на каталожном /search — переключатель слева под подзаголовком (а не по центру, как в ИИ-герое) */
.page-sub + .search-mode { margin: var(--s-2) 0 var(--s-4); }

/* Строка-герой: парит, на фокусе приподнимается с glow-кольцом */
.ai-stage .ai-search { display: flex; align-items: center; gap: var(--s-3); width: 100%; max-width: 680px;
  margin: var(--s-7) auto 0; background: var(--surface); border: var(--bw-2) solid var(--line);
  border-radius: var(--r-pill); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  box-shadow: 0 24px 50px -28px rgba(39,39,39,.6), var(--e-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ai-stage .ai-search:focus-within { border-color: var(--ink); transform: translateY(-2px);
  box-shadow: 0 0 0 5px rgba(39,39,39,.06), 0 30px 58px -28px rgba(39,39,39,.62); }
.ai-search-spark { flex: none; display: grid; place-items: center; color: var(--ink-2); }
.ai-search-spark svg { width: 22px; height: 22px; }
.ai-stage .ai-search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit;
  font-size: var(--fs-xl); color: var(--ink); min-width: 0; padding: var(--s-2) 0; }
.ai-stage .ai-search input::placeholder { color: var(--muted); opacity: .9; }
.ai-search-go { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper); display: grid; place-items: center;
  transition: transform var(--dur) var(--ease); }
.ai-search-go:hover { transform: translateX(2px) scale(1.04); }
.ai-search-go svg { width: 20px; height: 20px; }

/* Чипы-примеры: тонкие контурные, hover-lift */
.ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-5); }
.ai-chip { font-size: var(--fs-sm); color: var(--ink-2); background: transparent;
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease), background var(--dur) var(--ease); }
@media (hover: hover) { .ai-chip:hover { transform: translateY(-2px); border-color: var(--ink);
  color: var(--ink); background: var(--surface); } }

/* Недавние поиски (вместо featured-«толмута» на пустом /search) */
.search-recent { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s-2); margin-top: var(--s-5); }
.search-recent-label { font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--muted); margin-right: var(--s-1); }

/* Плавающая корзина заявки (ИИ-подбор → биржа): pill-панель снизу по центру */
.req-bar { position: fixed; left: 50%; bottom: var(--s-4); transform: translateX(-50%);
  z-index: 40; display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--e-1); animation: req-bar-in .25s var(--ease-out) both; max-width: 94vw; }
@keyframes req-bar-in { from { transform: translateX(-50%) translateY(12px); opacity: 0; } }
.req-bar-n { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.req-bar-n .num { font-weight: var(--fw-extrabold); color: var(--ink); }
.req-bar-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--r-sm);
  font-size: var(--fs-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) { .req-bar-x:hover { background: var(--wash); color: var(--ink); } }
@media (max-width: 560px) { .req-bar { left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
  transform: none; width: auto; justify-content: space-between; } @keyframes req-bar-in { from { opacity: 0; } } }
/* Кнопка «+ в заявку» под карточкой ИИ-выдачи */
.add-to-request.is-selected { color: var(--ok); border-color: var(--ok); }

/* Загрузка ТЗ → массовый подбор (/requests/from-file) */
/* Ссылка-вход «Подбор по ТЗ» под строкой поиска */
.tz-link { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line);
  padding-bottom: 1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
@media (hover: hover) { .tz-link:hover { color: var(--ink); border-color: var(--ink-2); } }
.tz-link svg { width: 15px; height: 15px; }

.tz-form { width: 100%; max-width: 560px; margin: var(--s-5) auto 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tz-drop { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); cursor: pointer;
  padding: var(--s-7) var(--s-4); background: var(--surface); border: 1.5px dashed var(--line-2);
  border-radius: var(--r-el); text-align: center; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tz-drop.is-drag, .tz-drop:hover { border-color: var(--ink-2); background: var(--wash); }
.tz-drop-ic { color: var(--ink-2); display: grid; place-items: center; }
.tz-drop-ic svg { width: 30px; height: 30px; }
.tz-drop-t { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.tz-drop-h { font-size: var(--fs-2xs); color: var(--muted); }
.tz-or { text-align: center; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--muted); }

.tz-results { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.tz-results-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); }
.tz-row { display: grid; grid-template-columns: 1fr auto 1.4fr; align-items: center; gap: var(--s-3);
  padding: var(--s-3); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-el); }
.tz-row-q-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.tz-row-q-qty { font-size: var(--fs-2xs); color: var(--muted); }
.tz-row-arrow { color: var(--muted); font-size: var(--fs-lg); }
.tz-row-m-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; }
.tz-row-m-name:hover { text-decoration: underline; }
.tz-row-m-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: 2px 0 var(--s-2); }
.tz-row-m-price { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tz-row-m-reason { font-size: var(--fs-2xs); color: var(--muted); }
.tz-row-m-none { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 640px) { .tz-row { grid-template-columns: 1fr; } .tz-row-arrow { display: none; } }

/* Прогресс + строка-плейсхолдер (SSE-стрим подбора) */
.tz-progress { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.tz-row--loading { opacity: .7; }
.tz-row-m-wait { font-size: var(--fs-sm); color: var(--muted); }
.tz-spinner { display: inline-block; width: 14px; height: 14px; margin-right: var(--s-1); vertical-align: -2px;
  border: 2px solid var(--line); border-top-color: var(--ink-2); border-radius: 50%; animation: tz-spin .7s linear infinite; }
@keyframes tz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tz-spinner { animation-duration: 2s; } }

/* Inline-статистика: инженерный ритм через тонкие слэши */
.ai-stage-stats { margin-top: var(--s-7); font-size: var(--fs-sm); color: var(--muted); }
.ai-stage-stats b { color: var(--ink); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ai-stage-stats i { font-style: normal; color: var(--line); margin: 0 var(--s-2); }

/* Вторая дверь главной — биржа запросов (RFQ): не нашёл в поиске → размести заявку,
   поставщики откликнутся. Ядро позиционирования наравне с поиском. */
.home-board { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 680px; margin: var(--s-7) auto 0; padding: var(--s-4) var(--s-5); text-align: left;
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); }
.home-board-ic { flex: none; display: grid; place-items: center; color: var(--ink-2); }
.home-board-ic svg { width: 26px; height: 26px; }
.home-board-t { flex: 1 1 240px; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4; }
.home-board-t b { color: var(--ink); font-weight: var(--fw-semibold); }
.home-board-act { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.home-board-link { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
@media (hover: hover) { .home-board-link:hover { color: var(--ink-2); } }

/* ── Низ: процесс-поток + альт-поиск (скрываются при подборе) ── */
.ai-extra { max-width: 980px; margin: 0 auto; position: relative; z-index: 1; }
.ai-stage:has(#aiResults:not(:empty)) .ai-extra { display: none; }
.ai-stage:has(#aiResults:not(:empty)) .ai-stage-hero { padding-top: var(--s-7); padding-bottom: var(--s-6); }
.ai-stage:has(#aiResults:not(:empty)) .ai-chips,
.ai-stage:has(#aiResults:not(:empty)) .ai-stage-stats,
.ai-stage:has(#aiResults:not(:empty)) .ai-status { display: none; }

/* Процесс-поток: 3 шага, соединённые пунктирной линией (не отдельные карточки) */
.ai-flow { list-style: none; margin: var(--s-10) 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); position: relative; }
.ai-flow::before { content: ''; position: absolute; top: 22px; left: 14%; right: 14%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 15px); }
.ai-flow-step { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.ai-flow-n { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-lg);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: var(--bw-2) solid var(--ink); margin-bottom: var(--s-2); }
.ai-flow-t { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); }
.ai-flow-d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* Альт-поиск: тонкая полоса, без тяжёлого dark-блока */
.ai-altsearch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  margin: var(--s-9) 0 var(--s-4); padding: var(--s-6) var(--s-7);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); }
.ai-altsearch-q { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); margin-right: auto; }
.ai-altsearch-a { display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink);
  padding: var(--s-2) var(--s-4); border: var(--bw-2) solid var(--ink); border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ai-altsearch-a:hover { background: var(--ink); color: var(--paper); }
.ai-altsearch-a--ghost { border-color: var(--line); color: var(--ink-2); }
.ai-altsearch-a--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

@media (max-width: 760px) { .ai-flow { grid-template-columns: 1fr; gap: var(--s-6); }
  .ai-flow::before { display: none; } .ai-altsearch-q { margin-right: 0; flex-basis: 100%; } }
@media (max-width: 640px) { .ai-stage .ai-search input { font-size: var(--fs-md); } }

/* Каскадный вход hero */
@keyframes ai-stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ai-stage-hero > * { animation: ai-stage-in .55s var(--ease-out) both; }
.ai-stage-hero > *:nth-child(1) { animation-delay: .02s; }
.ai-stage-hero > *:nth-child(2) { animation-delay: .10s; }
.ai-stage-hero > *:nth-child(3) { animation-delay: .20s; }
.ai-stage-hero > *:nth-child(4) { animation-delay: .30s; }
.ai-stage-hero > *:nth-child(5) { animation-delay: .40s; }
@media (prefers-reduced-motion: reduce) { .ai-stage-hero > * { animation: none; } }
.ai-results-h { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 auto var(--s-3); max-width: 820px; }

/* ─────────────────────────────────────────────────────────────────────────
   Корп-почта ФЕРМО (/cabinet/mail) — трёхпанельный ящик: рейл папок · список ·
   чтение. Монохром paper/ink; HTMX-свопы #mailList/#mailThread. Мобайл —
   master-detail (класс .is-reading переключает список↔чтение).
   ───────────────────────────────────────────────────────────────────────── */
.mailbox { display: flex; flex-direction: column;
  height: calc(100dvh - var(--header-h, 76px) - var(--s-6)); min-height: 520px; }
.mailbox-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--s-3);
  margin: 0 0 var(--s-4); }
.mailbox-title { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xl); }
.mailbox-title-ic { width: 24px; height: 24px; opacity: .85; }
.mailbox-unread { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--paper);
  background: var(--ink); padding: 3px var(--s-2); border-radius: var(--r-pill); }
.mailbox-hint { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }

/* Вкладки брендов/витрин (ось «домен») */
.mail-brands { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.mail-brand { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--s-3);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--muted); text-decoration: none; transition: background .12s, color .12s; }
.mail-brand:hover { background: rgba(39,39,39,.05); color: var(--ink); }
.mail-brand.is-active { background: var(--ink); color: var(--paper); }
.mail-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mail-brand-n { min-width: 16px; text-align: center; font-size: var(--fs-3xs); font-weight: var(--fw-bold);
  padding: 1px 5px; border-radius: var(--r-pill); background: #2f5fd0; color: #fff; }
.mail-brand.is-active .mail-brand-n { background: var(--paper); color: var(--ink); }

.mail { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: 208px minmax(300px, 380px) 1fr; grid-template-rows: minmax(0, 1fr);
  gap: var(--s-4); align-items: stretch; }

/* Рейл папок */
.mail-folders { min-height: 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; padding-right: var(--s-1); }
.mail-folders-sep { flex: 0 0 auto; height: 1px; background: var(--line); margin: var(--s-2); }
.mail-folder { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-md);
  font-weight: var(--fw-medium); transition: background .12s; }
.mail-folder:hover { background: rgba(39,39,39,.05); }
.mail-folder.is-active { background: var(--ink); color: var(--paper); font-weight: var(--fw-semibold); }
.mail-folder:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mail-folder-ic { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
.mail-folder-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folder-n { flex: 0 0 auto; min-width: 18px; text-align: center; background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill); font-size: var(--fs-3xs); font-weight: var(--fw-bold); padding: 1px 6px; }
.mail-folder.is-active .mail-folder-n { background: var(--paper); color: var(--ink); }
.mail-folder-t { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-2xs); }
.mail-folder.is-active .mail-folder-t { color: rgba(237,234,226,.7); }

/* Колонка списка */
.mail-list-col { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.mail-toolbar { display: flex; gap: var(--s-2); align-items: center; padding: 0 var(--s-3) var(--s-3); }
.mail-search { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 var(--s-3);
  transition: border-color .12s; }
.mail-search:focus-within { border-color: var(--ink); }
.mail-search-ic { flex: 0 0 auto; color: var(--muted); }
.mail-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: var(--s-2) 0; font: inherit; font-size: var(--fs-sm); color: var(--ink); }
.mail-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  cursor: pointer; white-space: nowrap; transition: color .12s, background .12s, border-color .12s; }
.mail-toggle:hover { color: var(--ink); border-color: var(--ink); }
.mail-toggle.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mail-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mail-list { flex: 1 1 auto; overflow-y: auto; }
.mail-rows { list-style: none; margin: 0; padding: 0; }
.mail-row { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3);
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); cursor: pointer;
  transition: background .12s; }
.mail-row:hover { background: rgba(39,39,39,.045); }
.mail-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mail-row.is-open { background: rgba(39,39,39,.07); }
.mail-row.is-open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.mail-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-row-top { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; }
.mail-row-from { font-weight: var(--fw-semibold); font-size: var(--fs-sm); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-unread .mail-row-from { font-weight: var(--fw-extrabold); }
.mail-row-at { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-2xs); }
.mail-row-subj { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-unread .mail-row-subj { font-weight: var(--fw-bold); }
.mail-row-out { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.mail-row-out .ic-xs { width: 12px; height: 12px; }
.mail-row-snip { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2f5fd0; margin-top: 15px; }
.mail-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-8) var(--s-4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.mail-empty-ic { width: 40px; height: 40px; opacity: .3; }

/* Аватар-кружок (инициалы, мягкий оттенок из адреса) */
.mail-ava { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .01em; user-select: none;
  background: hsl(var(--hue, 220), 32%, 86%); color: hsl(var(--hue, 220), 42%, 30%); }
.mail-ava--sm { width: 34px; height: 34px; font-size: var(--fs-xs); }

/* Область чтения */
.mail-read { min-width: 0; min-height: 0; overflow-y: auto; padding: 0 var(--s-2) var(--s-6) var(--s-4); }
.mail-read-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); height: 100%; min-height: 320px; text-align: center; color: var(--muted); padding: var(--s-6); }
.mail-read-empty-art { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(39,39,39,.05); margin-bottom: var(--s-2); }
.mail-read-empty-ic { width: 40px; height: 40px; opacity: .4; }
.mail-read-empty-t { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink); }
.mail-read-empty-s { margin: 0; font-size: var(--fs-sm); max-width: 260px; }
.mail-back { display: none; }
.mail-thread { animation: mailFade .18s ease-out; }
.mail-thread-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.mail-thread-subj { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-2xl); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mail-msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-el);
  padding: var(--s-4); margin-bottom: var(--s-3); }
.mail-msg--outbound { background: rgba(39,39,39,.035); }
.mail-msg-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.mail-msg-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-msg-from { font-weight: var(--fw-bold); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg-to { color: var(--muted); font-size: var(--fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg-at { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-2xs); }
.mail-msg-body { font-size: var(--fs-md); line-height: 1.55; }
.mail-frame { width: 100%; border: 0; min-height: 120px; background: #fff; border-radius: var(--r-sm); }
.mail-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; margin: 0; font-size: var(--fs-md); }
.mail-msg-empty { color: var(--muted); }

/* Вложения */
.mail-atts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4);
  padding-top: var(--s-3); border-top: 1px solid var(--line); }
.mail-att { display: inline-flex; align-items: center; gap: 6px; max-width: 280px;
  padding: 5px var(--s-3); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--ink); text-decoration: none;
  transition: border-color .12s, box-shadow .12s; }
.mail-att:hover { border-color: var(--ink); box-shadow: 0 2px 8px rgba(39,39,39,.08); }
.mail-att:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mail-att-ic { flex: 0 0 auto; color: var(--muted); display: inline-flex; }
.mail-att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.mail-att-size { flex: 0 0 auto; color: var(--muted); }
.mail-att-dl { flex: 0 0 auto; color: var(--muted); display: inline-flex; opacity: 0; transition: opacity .12s; }
.mail-att:hover .mail-att-dl { opacity: 1; }

/* Ответ + композер + нотисы */
.mail-reply { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.mail-reply-head { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2);
  font-size: var(--fs-sm); color: var(--muted); }
.mail-reply-head b { color: var(--ink); font-weight: var(--fw-semibold); }
.mail-reply-ic { transform: scaleX(-1); opacity: .7; }
.mail-reply-text, .mail-input { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-3); font: inherit; font-size: var(--fs-md); color: var(--ink);
  background: var(--surface); outline: none; transition: border-color .12s; }
.mail-reply-text { resize: vertical; min-height: 76px; }
.mail-reply-text:focus, .mail-input:focus { border-color: var(--ink); }
.mail-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.mail-reply-from { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--fs-xs); }
.mail-note { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); margin: var(--s-2) 0; }
.mail-note--ok { background: rgba(46,160,90,.13); color: #1a7a43; }
.mail-note--err { background: rgba(192,57,43,.13); color: #a5281b; }
.mail-compose { position: relative; flex: 0 0 auto; }
.mail-compose-btn { list-style: none; cursor: pointer; }
.mail-compose-btn::-webkit-details-marker { display: none; }
.mail-compose-form { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 30;
  width: min(420px, 88vw); display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-el);
  box-shadow: var(--e-2); padding: var(--s-4); animation: mailFade .14s ease-out; }
.mail-compose-h { display: flex; align-items: center; gap: 5px; font-weight: var(--fw-bold);
  font-size: var(--fs-sm); margin-bottom: var(--s-1); }
.mail-field { display: flex; flex-direction: column; gap: 2px; }
.mail-field-lbl { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mail-compose-text { resize: vertical; }
.mail-compose-foot { display: flex; justify-content: flex-end; }

/* Быстрые действия из строки (ховер/курсор) + курсор клавнавигации */
.mail-li { position: relative; }
.mail-row.is-cursor { background: rgba(39,39,39,.06); }
.mail-row.is-cursor::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid rgba(39,39,39,.32); border-radius: var(--r-sm); }
.mail-li:hover .mail-dot, .mail-row.is-cursor .mail-dot { visibility: hidden; }
.mail-row-actions { position: absolute; top: 50%; right: var(--s-2); transform: translateY(-50%);
  display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.mail-li:hover .mail-row-actions, .mail-row.is-cursor + .mail-row-actions { opacity: 1; }
.mail-act { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s; }
.mail-act:hover { color: var(--ink); border-color: var(--ink); background: var(--surface); }
.mail-act:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mail-act .ic-xs { width: 14px; height: 14px; }
.mail-act-spam:hover, .mail-act-unspam:hover { color: #a5281b; border-color: #a5281b; }

/* Подсказка горячих клавиш (пустое состояние) */
.mail-keyhint { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: center;
  margin-top: var(--s-5); max-width: 300px; }
.mail-keyhint span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--muted); }
.mail-keyhint kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-3xs);
  font-weight: var(--fw-bold); min-width: 15px; text-align: center; padding: 1px 4px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; }

/* Чекбокс выделения (поверх аватара; виден на ховер/при выделении) + бар массовых действий */
.mail-check { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); z-index: 2;
  width: 18px; height: 18px; margin: 0; cursor: pointer; opacity: 0; accent-color: var(--ink); transition: opacity .12s; }
.mail-li:hover .mail-check, .mail-rows.has-selection .mail-check, .mail-check:checked { opacity: 1; }
.mail-li:hover .mail-ava, .mail-rows.has-selection .mail-ava { opacity: .25; }
.mail-li.is-selected { background: rgba(47,95,208,.07); }
.mail-li.is-selected .mail-row:hover { background: transparent; }
.mail-bulkbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 var(--s-3) var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper); animation: mailFade .14s ease-out; }
.mail-bulkbar[hidden] { display: none; }
.mail-bulk-count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mail-bulk-acts { display: flex; gap: var(--s-1); margin-left: auto; }
.mail-bulkbar .btn { color: var(--paper); }
.mail-bulkbar .btn:hover { background: rgba(237,234,226,.16); }

/* Прикрепление файлов (компоузер/ответ) */
.mail-attach { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: var(--fs-xs); color: var(--muted); }
.mail-attach:hover { color: var(--ink); }
.mail-attach input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.mail-attach-n { font-size: var(--fs-2xs); color: var(--muted); }
.mail-compose-foot, .mail-reply-foot { flex-wrap: wrap; }
.mail-compose-foot > .btn, .mail-reply-foot > .btn { margin-left: auto; }

/* «Показать ещё» (сентинел пагинации) */
.mail-more { display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-4); color: var(--muted); font-size: var(--fs-sm); }
.mail-more-spin { animation: mailSpin 1s linear infinite; }
@keyframes mailSpin { to { transform: rotate(360deg); } }

@keyframes mailFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mail-thread, .mail-compose-form, .mail-more-spin { animation: none; } }

@media (max-width: 900px) {
  .mailbox { height: auto; }
  .mail { grid-template-columns: 1fr; gap: var(--s-3); }
  .mailbox-hint { display: none; }
  .mail-folders { flex-direction: row; overflow-x: auto; gap: var(--s-1); padding-bottom: var(--s-2); }
  .mail-folder { flex: 0 0 auto; }
  .mail-folders-sep { display: none; }
  .mail-list-col { border: 0; }
  .mail-read { padding: 0; }
  .mail-back { display: inline-flex; }
  .mail-row-actions { opacity: 1; }  /* нет ховера на тач — показываем всегда */
  .mail-row { padding-right: 72px; }  /* резерв под всегда-видимые действия — тема/время не наезжают */
  .mail-dot { display: none; }        /* действия видны всегда → индикатор-точка лишний (непрочитанное = жирный шрифт) */
  .mail-toolbar { flex-wrap: wrap; }  /* тулбар в 2 ряда: поиск во всю ширину сверху, тоггл+«Написать» — вторым */
  .mail-search { flex: 1 1 100%; order: -1; }
  .mail.is-reading .mail-folders, .mail.is-reading .mail-list-col { display: none; }
  .mail:not(.is-reading) .mail-read { display: none; }
}

/* Click-to-call в карточке заказа (Exolve): Exolve соединяет продавца и клиента по телефону */
.order-call { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-3); }
.order-call input { flex: 1 1 220px; min-width: 0; }
.call-msg { font-size: var(--fs-sm); color: var(--muted); }
.call-msg.ok { color: #0a7d32; }
.call-msg.err { color: #c0392b; }

/* ── Мобильный нижний таб-бар КАБИНЕТА (thumb-зона) ─────────────────────────────────────
   Только ≤860px (на десктопе — сайдбар). Роле-зависимая разметка в _cabinet_bottom_nav.html,
   инжектится в base.html лишь для /cabinet/* у не-админа. Иконки currentColor → цвет из
   .cabnav-i. Полное меню остаётся в бургер-drawer. */
.cabnav { display: none; }
@media (max-width: 860px) {
  .cabnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
    background: var(--surface); border-top: var(--bw) solid var(--line);
    box-shadow: 0 -2px 14px rgba(39, 39, 39, .07); padding-bottom: env(safe-area-inset-bottom); }
  .cabnav-i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 0 6px; min-height: 52px; text-decoration: none; color: var(--muted);
    font-size: 10px; font-weight: var(--fw-bold); -webkit-tap-highlight-color: transparent; }
  .cabnav-i.on { color: var(--ink); }
  .cabnav-i .cbn-ic { width: 23px; height: 23px; }
  .cabnav-l { line-height: 1; }
  .cabnav-icw { position: relative; display: inline-flex; }
  /* бейдж-слот (наполняется поллером /cabinet/nav-badges) поверх иконки */
  .cabnav-n { position: absolute; top: -7px; left: 13px; }
  .cabnav-n .cab-badge { min-width: 16px; height: 16px; padding: 0 4px; background: var(--danger);
    color: #fff; font-size: 9px; }
  /* AI-куб .chat-fab приподнимаем над баром — только когда бар в DOM (= кабинет) */
  body:has(.cabnav) .chat-fab { bottom: calc(var(--s-5) + 60px + env(safe-area-inset-bottom)); }
}


/* == Глобальный сайдбар витрины (.ss) + chat-first главная (.hs) =========== */
/* Единая оболочка ВСЕХ публичных страниц (паттерн ChatGPT): постоянная левая колонка,
   контент сдвинут отступом у <body class="has-side">. Сдвиг именно на body, а не на .wrap —
   тогда шаблоны страниц (каталог, товар, блог, лендинги) не переверстываются вообще, а
   .wrap продолжает центрировать контент внутри оставшейся ширины.
   Разметка — _site_side.html; кабинет/админка (app_shell) сюда не попадают, у них свой
   сайдбар внутри контента. */
:root { --side-w: 264px; --side-w-min: 64px; }

body.has-side { padding-left: var(--side-w); transition: padding-left var(--dur-slow) var(--ease-out); }
html[data-side="off"] body.has-side { padding-left: var(--side-w-min); }

.ss-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: var(--side-w);
  display: flex; flex-direction: column; background: var(--surface);
  border-right: var(--bw) solid var(--line);
  padding: calc(var(--s-4) + env(safe-area-inset-top, 0px)) var(--s-3) var(--s-3);
  transition: width var(--dur-slow) var(--ease-out); }
html[data-side="off"] .ss-side { width: var(--side-w-min); padding-left: var(--s-2); padding-right: var(--s-2); }

/* Шапка панели: логотип + кнопка сворачивания (в свёрнутом виде остаётся одна кнопка). */
.ss-head { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) var(--s-4); }
.ss-logo { display: block; flex: 1; min-width: 0; }
.ss-logo img { height: 26px; width: auto; display: block; }
.ss-toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--r-el); background: none; color: var(--ink-2); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
/* Пальцем нужно 44px, мышью хватает 36 — растим только на тач-устройствах, чтобы не
   раздувать плотную боковую панель на десктопе. */
@media (pointer: coarse) { .ss-toggle { width: 44px; height: 44px; } }
.ss-toggle:hover { background: var(--wash); color: var(--ink); }
.ss-toggle .ic { width: 20px; height: 20px; }
html[data-side="off"] .ss-logo { display: none; }
html[data-side="off"] .ss-head { justify-content: center; padding-left: 0; padding-right: 0; }

.ss-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--s-4); }

/* Первичное действие панели — как «New chat» у ChatGPT. */
.ss-cta { display: flex; align-items: center; gap: var(--s-3); min-height: 42px;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface);
  font-weight: var(--fw-bold); font-size: var(--fs-base);
  transition: opacity var(--dur) var(--ease); }
.ss-cta:hover { opacity: .88; }
.ss-cta .ic { width: 18px; height: 18px; flex: none; }

.ss-nav, .ss-group, .ss-foot { display: flex; flex-direction: column; gap: 2px; }
.ss-h { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); padding: var(--s-2) var(--s-3) var(--s-1); }
.ss-link { display: flex; align-items: center; gap: var(--s-3); min-height: 40px;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-el); color: var(--ink-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-base);
  border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ss-link .ic { width: 18px; height: 18px; flex: none; opacity: .78; }
.ss-link:hover { background: var(--wash); color: var(--ink); }
.ss-link.is-on { background: var(--wash); color: var(--ink); font-weight: var(--fw-bold); }
.ss-link.is-on .ic { opacity: 1; }
.ss-link--strong { color: var(--ink); font-weight: var(--fw-bold); }
.ss-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-sessions { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 34vh; }
.ss-foot { margin-top: auto; padding-top: var(--s-3); border-top: var(--bw) solid var(--line-2); }

/* Свёрнутый режим: только иконки по центру, подписи и заголовки групп скрыты. */
html[data-side="off"] .ss-t,
html[data-side="off"] .ss-h,
html[data-side="off"] .ss-sessions { display: none; }
html[data-side="off"] .ss-link,
html[data-side="off"] .ss-cta { justify-content: center; padding-left: 0; padding-right: 0; }

/* Разделы продублированы в сайдбаре — из верхней шапки их убираем, оставляя утилиты
   и кнопки авторизации (справа, как в ChatGPT). Шапка становится тонкой полосой. */
body.has-side .nav-dup,
body.has-side .nav-drop,
body.has-side #navCabinet { display: none; }
/* Логотип теперь в сайдбаре — в шапке он дублировался бы вторым. */
body.has-side .masthead > .brand { display: none; }
/* Бургер шапки — тоже дубль, пока сайдбар стоит колонкой: он открывает те же разделы,
   которые уже видны слева (и .nav-dup выше всё равно скрыт — меню под ним пустое).
   Ловится в зазоре 860-960px: сайдбар ещё колонка (мобильный режим только с 860px,
   см. @media ниже), а .nav-toggle включается уже с 960px — на экране два бургера.
   Селектор с .nav-collapsed обязателен: JS-правило .masthead.nav-collapsed .nav-toggle
   (0-3-0) перебило бы одиночное body.has-side .nav-toggle (0-2-1). */
body.has-side .masthead.nav-collapsed .nav-toggle,
body.has-side .nav-toggle { display: none; }

/* -- Мобайл: панель уезжает за край, открывается бургером шапки ------------- */
.ss-backdrop { display: none; }
@media (max-width: 860px) {
  body.has-side, html[data-side="off"] body.has-side { padding-left: 0; }
  body.has-side .masthead > .brand { display: flex; }   /* логотип возвращается в шапку */
  /* Панель уехала в drawer — бургер снова единственный вход в разделы, возвращаем. */
  body.has-side .masthead.nav-collapsed .nav-toggle,
  body.has-side .nav-toggle { display: inline-flex; }
  .ss-side, html[data-side="off"] .ss-side { width: min(84vw, 300px); padding: var(--s-4) var(--s-3);
    z-index: 9300; box-shadow: var(--e-2); transform: translateX(-102%); visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow); }
  body.side-open .ss-side { transform: none; visibility: visible; }
  body.side-open { overflow: hidden; }
  /* В drawer подписи нужны всегда, даже если на десктопе панель была свёрнута. */
  html[data-side="off"] .ss-t, html[data-side="off"] .ss-h { display: block; }
  html[data-side="off"] .ss-logo { display: block; }
  html[data-side="off"] .ss-link, html[data-side="off"] .ss-cta {
    justify-content: flex-start; padding-left: var(--s-3); padding-right: var(--s-3); }
  .ss-backdrop { display: block; position: fixed; inset: 0; z-index: 9250;
    background: rgba(39, 39, 39, .38); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease); }
  body.side-open .ss-backdrop { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-side, .ss-backdrop, body.has-side { transition: none; }
}

/* == Chat-first главная (.hs) ============================================== */
/* Центральная колонка «/»: диалог с ассистентом на первый экран, SEO-лендинг ниже сгиба.
   Разделы слева даёт общий .ss-side (выше), поэтому здесь только сам чат.
   Классы .chat-log/.chat-input/.chat-modes переиспользуются из drawer-ассистента. */
.hs { display: flex; flex-direction: column; min-height: 0; position: relative; isolation: isolate;
  height: calc(100dvh - var(--header-h) - var(--s-4)); padding-top: var(--s-4); }
/* Свет за композицией: два мягких пятна, медленно «дышат». Палитра монохромная, поэтому
   объём даём светом, а не цветом. Слой под контентом (isolate + z-index), не кликается. */
.hs::before { content: ''; position: absolute; inset: -10% -20% auto; height: 70%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 28% 30%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(38% 50% at 72% 18%, rgba(39,39,39,.055), transparent 72%);
  animation: hs-breathe 22s var(--ease) infinite alternate; }
@keyframes hs-breathe { to { transform: translate3d(0, 2%, 0) scale(1.06); } }
/* Пока диалога нет — вся композиция по центру экрана: раньше заголовок липнул к верху,
   композер к низу, а между ними зияла пустота (.hs-log:empty схлопнут в ноль). */
/* container-type — чтобы H1 мерился от ширины КОЛОНКИ, а не вьюпорта (см. .hs-h). */
.hs-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1;
  container-type: inline-size; }
.hs-chat:not(:has(.chat-msg)) { justify-content: center; }
.hs-hero { text-align: center; padding: var(--s-6) var(--s-4) var(--s-5); }
.hs-h { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -.03em; margin: 0 auto;
  /* Переносы задаёт <br>, поэтому ни max-width, ни balance не нужны — нужно лишь, чтобы
     длинная строка влезала по ширине. Считаем кегль от ширины КОЛОНКИ (cqi), а не вьюпорта:
     колонка чата растёт медленнее экрана и на 1920 упирается в свой максимум, из-за чего
     vw-кегль перерастал её и рвал заголовок на четыре строки. 6.2cqi — с запасом под самую
     длинную строку. Строка выше остаётся фолбэком для браузеров без container-units. */
  font-size: clamp(32px, 6.2cqi, 84px); }
/* Росчерк под акцентной строкой масштабируется в em — на 78px кегле .07em читается
   как жирная плашка. Здесь тоньше и мягче, чем в общем правиле .ai-stage-h-em. */
.hs-h .ai-stage-h-em::after { height: .035em; bottom: -.04em; opacity: .85; }
.hs-sub { max-width: 60ch; margin: var(--s-5) auto 0; color: var(--ink-2);
  font-weight: var(--fw-medium); font-size: var(--fs-lg); line-height: 1.5; text-wrap: balance;
  opacity: 0; animation: hs-rise .6s var(--ease-out) .62s both; }

/* Метрики каталога: три крупных числа вместо строки мелким серым. */
.hs-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5) var(--s-8);
  margin-top: var(--s-6); opacity: 0; animation: hs-rise .6s var(--ease-out) .74s both; }
.hs-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hs-metric b { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-2xl); line-height: 1; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.hs-metric span { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); }
@keyframes hs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Лента: пока пусто — не занимает место (hero по центру); с сообщениями — растёт и скроллится. */
.hs-log { flex: 1 1 auto; min-height: 0; padding: var(--s-4) 0; }
.hs-log:empty { flex: 0 0 auto; padding: 0; }
.hs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4); }
.hs-chip { border: var(--bw) solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.hs-chip:hover { border-color: var(--ink); color: var(--ink); }
.hs-chips { opacity: 0; animation: hs-rise .6s var(--ease-out) .98s both; }
/* Движение — украшение, а не смысл: при reduce всё показываем сразу, в конечном состоянии. */
@media (prefers-reduced-motion: reduce) {
  .hs-sub, .hs-metrics, .hs-chips, .hs-composer { opacity: 1; animation: none; }
  .hs::before { animation: none; }
}
/* Как только диалог начался, приветствие и примеры уходят — остаётся чистая лента (ChatGPT).
   H1 при этом ОСТАЁТСЯ в DOM: краулер видит заголовок страницы в исходном HTML. */
.hs-chat:has(.chat-msg) .hs-hero,
.hs-chat:has(.chat-msg) .hs-chips { display: none; }

/* Композер: карточка с режимами, полем и подписью — прижата к низу колонки. */
.hs-composer { flex: none; border: var(--bw) solid var(--line); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--e-1); overflow: hidden;
  opacity: 0; animation: hs-rise .6s var(--ease-out) .86s both;
  transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease-out); }
/* Фокус в поле — карточка приподнимается и подсвечивается: единственный интерактивный
   элемент первого экрана должен отзываться, иначе он читается как статичная картинка. */
.hs-composer:focus-within { border-color: color-mix(in srgb, var(--ink) 34%, var(--line));
  box-shadow: var(--e-1), 0 22px 48px -22px rgba(39,39,39,.42);
  transform: translateY(-2px); }
.hs-modes { flex-wrap: wrap; padding: var(--s-3) var(--s-4) 0; background: transparent; }
.hs-input { border-top: 0; background: transparent; padding: var(--s-3) var(--s-4); }
.hs-foot { padding: 0 var(--s-4) var(--s-3); font-size: var(--fs-2xs); color: var(--muted);
  text-align: center; }
.hs-foot a { color: var(--ink-2); text-decoration: underline; }
.hs-quota b { font-family: var(--font-display); color: var(--ink); }
/* Стена регистрации под ответом (гостевая квота исчерпана) — CTA в пузыре ассистента. */
.chat-gate { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* Ассистент отдельным разделом кабинета (/cabinet/assistant). Композер прижат к низу,
   лента растёт вверх — как на главной, но внутри оболочки кабинета (свой сайдбар и шапка,
   поэтому вычитаем только высоту шапки). Ширину не режем: ответы содержат карточки
   товаров и таблицы НМЦК/КП, ради которых раздел и заведён вместо узкой панели. */
.cab-assist { display: flex; flex-direction: column; min-height: 0;
  height: calc(100dvh - var(--header-h) - var(--s-8)); }
.cab-assist-log { flex: 1 1 auto; min-height: 0; padding: var(--s-4) 0; }
.cab-assist-log:empty { flex: 0 0 auto; padding: 0; }
.cab-assist-chips { padding: 0 0 var(--s-4); justify-content: flex-start; }
/* Диалог начался — примеры уходят, остаётся чистая лента (тот же приём, что на главной). */
.cab-assist:has(.chat-msg) .cab-assist-chips { display: none; }
@media (max-width: 860px) { .cab-assist { height: auto; min-height: 60dvh; } }

@media (max-width: 860px) {
  /* height→min-height: на узком экране hero+чипы+композер выше вьюпорта, и жёсткая высота
     давала переполнение — композер наезжал на лендинг под шеллом. */
  .hs { height: auto; min-height: calc(100dvh - var(--header-h) - var(--s-2)); }
  /* Примеры запросов — одной строкой со свайпом вместо четырёх строк на всю высоту. */
  .hs-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; padding: 0 0 var(--s-3); }
  .hs-chips::-webkit-scrollbar { display: none; }
  .hs-chip { flex: none; }
  .hs-hero { padding: var(--s-5) 0 var(--s-3); }
  .hs-sub { font-size: var(--fs-base); }
}

/* -- Коммуникации: инбокс — заметка коллегам + голосовые вложения (_storefront_inbox_msg_row.html) */
.msg-row--note { justify-content: center; }
.msg-note { max-width: 92%; width: 100%; padding: var(--s-3); border-radius: var(--r-2);
  background: color-mix(in srgb, #F5C94C 14%, var(--paper)); border: var(--bw) dashed color-mix(in srgb, #F5C94C 55%, var(--line)); }
.msg-note-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.msg-note-author { font-size: var(--fs-3xs); font-weight: var(--fw-bold); }
.msg-note-tag { font-size: var(--fs-3xs); color: var(--muted); font-style: italic; }
.msg-note .msg-time { margin-left: auto; }
.msg-att-audio { display: flex; align-items: center; gap: 6px; }
.msg-att-audio audio { height: 32px; max-width: 240px; width: 100%; }
.msg-row--me .msg-att-audio audio { filter: invert(1) hue-rotate(180deg); }
.msg-mode-toggle { display: flex; gap: 6px; padding: 6px var(--s-3) 0; }
.msg-mode-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--paper);
  font-size: var(--fs-3xs); font-weight: var(--fw-medium); color: var(--muted); cursor: pointer; }
.msg-mode-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.msg-compose--note { background: color-mix(in srgb, #F5C94C 10%, transparent); }

/* -- Коммуникации: инбокс — меню сообщения (copy/edit/delete) + товар-пикер -------------- */
.msg-actions { position: relative; flex: none; align-self: flex-start; }
.msg-actions summary { list-style: none; }
.msg-actions summary::-webkit-details-marker { display: none; }
.msg-act-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px;
  height: 22px; border-radius: 50%; color: var(--muted); cursor: pointer; opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.msg-row:hover .msg-act-toggle, .msg-actions[open] .msg-act-toggle { opacity: 1; }
.msg-act-toggle:hover { background: var(--wash); color: var(--ink); }
.msg-actions-panel { position: absolute; top: 24px; right: 0; z-index: 5; min-width: 168px;
  padding: 4px; border: var(--bw) solid var(--line); border-radius: var(--r-el);
  background: var(--paper); box-shadow: var(--e-2); display: grid; gap: 1px; }
.msg-row--them .msg-actions-panel { right: auto; left: 0; }
.msg-act-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0;
  background: none; border-radius: var(--r-1); font-size: var(--fs-sm); color: var(--ink);
  cursor: pointer; text-align: left; width: 100%; }
.msg-act-item:hover { background: var(--wash); }
.msg-act-item--danger { color: var(--danger); }
.msg-act-item--danger:hover { background: var(--danger-bg); }
.msg-edited { font-size: var(--fs-3xs); opacity: .55; font-style: italic; }
.msg-edit-input { width: 100%; min-width: 180px; font: inherit; color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent); border: var(--bw) solid currentColor;
  border-radius: var(--r-1); padding: 4px 6px; resize: vertical; }
.msg-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
.msg-picker { position: relative; }
.msg-picker-panel { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 6; width: 320px;
  max-width: 80vw; padding: var(--s-2); border: var(--bw) solid var(--line); border-radius: var(--r-el);
  background: var(--paper); box-shadow: var(--e-2); }
.msg-picker-q { width: 100%; padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-el); font-size: var(--fs-md); }
.msg-picker-q:focus { outline: none; border-color: var(--ink); }
.msg-picker-results { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.msg-picker-list { display: grid; gap: 2px; }
.msg-picker-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px;
  border: 0; background: none; border-radius: var(--r-1); cursor: pointer; text-align: left; }
.msg-picker-item:hover { background: var(--wash); }
.msg-picker-thumb { flex: none; width: 32px; height: 32px; border-radius: var(--r-1); object-fit: cover;
  background: var(--wash); }
.msg-picker-thumb--empty { display: inline-block; }
.msg-picker-body { flex: 1; min-width: 0; display: grid; }
.msg-picker-t { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-picker-sub { font-size: var(--fs-3xs); color: var(--muted); }
.msg-picker-price { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.msg-picker-oos { flex: none; font-size: var(--fs-3xs); color: var(--danger); }
.msg-picker-empty { padding: var(--s-3); text-align: center; font-size: var(--fs-sm); }

/* -- Коммуникации: доводка чатов МП (_mp_chat_thread.html), баннеры товар/заказ ------ */
.mpthread-banners { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line); }
.mpthread-banner { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: var(--bw) solid var(--line); border-radius: var(--r-el); background: var(--paper);
  font-size: var(--fs-sm); color: var(--ink-2); transition: border-color var(--dur) var(--ease); }
.mpthread-banner:hover { border-color: var(--ink); color: var(--ink); }
.mpthread-banner-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-medium); }
.mpthread-banner-price { flex: none; font-weight: var(--fw-semibold); color: var(--ink); }
.mpthread-banner-stock { flex: none; font-size: var(--fs-xs); color: var(--ok, #2f9e44); }
.mpthread-banner-stock.is-out { color: var(--danger, #e5484d); }
.mpthread-banner-status { flex: none; font-size: var(--fs-xs); color: var(--muted); }

/* == Кабинет: «Компания и вход» (домен, реверс Flutter→HTMX) ============= */
/* Деструктивная кнопка (удаление аккаунта) — вариант .btn на var(--danger). */
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover:not(:disabled) { background: var(--danger); color: var(--surface); }
.btn--danger:disabled { opacity: .45; cursor: not-allowed; }

/* Мини-карточка команды на /cabinet/company (счётчики + ссылка на /cabinet/team,
   БЕЗ мутаций — сами формы живут только на полной странице команды). */
.company-team-mini { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.company-team-mini__stats { display: flex; gap: var(--s-5); font-size: var(--fs-sm); color: var(--ink-2); }
.company-team-mini__stats b { color: var(--ink); font-family: var(--font-display); }

/* Email/Push два независимых тумблера в одной pref-row (было — вся строка = 1 label/email). */
.pref-toggles { display: flex; gap: var(--s-4); margin-left: auto; flex: none; }
.pref-toggle { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs);
  color: var(--muted); cursor: pointer; }
.pref-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }

/* == Кабинет: внутренний чат «Коллеги» (реверс Flutter→HTMX) =============
   Список/тред переиспользуют .msg-* классы (_messages_list.html/_messages_thread.html) —
   тот же визуальный язык, что у клиентского B2B-чата. Здесь только то, чего там нет:
   бейдж «Общий»/группа в заголовке ряда + пикер «Написать коллеге». */
.msg-item-badge { font-size: var(--fs-2xs); color: var(--muted); font-weight: var(--fw-medium); }

.staff-picker-list { display: flex; flex-direction: column; gap: var(--s-1); max-height: 320px;
  overflow-y: auto; margin-top: var(--s-3); }
.staff-picker-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); cursor: pointer; }
.staff-picker-row:hover { background: var(--wash); }
.staff-picker-row input { flex: none; }
.staff-picker-row__name { font-weight: var(--fw-medium); }
.staff-picker-row__email { color: var(--muted); font-size: var(--fs-sm); }

/* -- Коммуникации: уведомления — иконка по kind + toast-оверлей (_notif_icon.html/_notif_toast.html) */
.notif-i-ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--wash); color: var(--ink-2); }
.toast-stack { position: fixed; top: calc(var(--s-4) + env(safe-area-inset-top, 0px)); right: var(--s-4);
  z-index: 9500; display: flex; flex-direction: column; gap: var(--s-2); width: min(360px, calc(100vw - var(--s-6))); }
.toast-card { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-el); background: var(--paper);
  box-shadow: var(--e-3, var(--e-2)); position: relative; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  .toast-card { animation: toastIn .25s var(--ease-out) both; }
}
.toast-ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--wash); color: var(--ink-2); }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit;
  text-decoration: none; }
.toast-title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
.toast-text { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast-x { flex: none; background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 2px; margin: -2px -2px 0 0; }
.toast-x:hover { color: var(--ink); }
@media (max-width: 640px) {
  .toast-stack { left: var(--s-4); right: var(--s-4); width: auto; }
}