/* ============================================================
   BARMINATOR — Программа подбора насосов · Compact App Shell
   Полноэкранный адаптивный интерфейс по референсу Pencil EKMPY.
   Шрифты: Geist / JetBrains Mono. Всё содержимое — на русском.
   ============================================================ */

:root {
  --bg-1: #F4F8FE; --bg-2: #ECF2FB; --bg-3: #FFFFFF;
  --card: #FFFFFF; --card-soft: #F7FAFE;
  --fg: #16243A; --fg-strong: #0E1A2C; --muted: #5B6B82; --muted-soft: #8595AC;
  --border: #D6E0EC; --border-soft: #E5ECF4;
  --primary: #2F80D8; --primary-weak: #EAF2FC; --primary-deep: #1B62B4;
  --c-qh: #2F80D8; --c-eff: #2BA86A; --c-npsh: #E8870E; --c-limit: #2A3A5A; --c-p2: #9B59B6;
  --ok: #1F9D57; --ok-bg: #E6F6ED; --warn: #C77400; --warn-bg: #FBF1DF;
  --danger: #D93C15; --danger-bg: #FBE9E4; --locked: #5B6B82; --locked-bg: #EEF2F7;
  --violet: #5B53D6; --violet-bg: #ECEBFB;
  --radius: 14px; --radius-sm: 10px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,40,80,.06);
  --shadow-md: 0 8px 24px -12px rgba(47,128,216,.22);
  --shadow-card: 0 1px 2px rgba(20,40,80,.05), 8px 12px 22px -10px rgba(20,40,80,.15), 16px 22px 44px -20px rgba(20,40,80,.16);
  --shadow-pop: 0 16px 40px -16px rgba(20,40,80,.35);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --sidebar-w: 344px;
  --topbar-h: 64px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a8aa5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}

/* ---------- Тёмная тема ---------- */
body.theme-dark {
  --bg-1: #0E1726; --bg-2: #111C2E; --bg-3: #0B1320;
  --card: #15213400; --card: #152134; --card-soft: #1B2940;
  --fg: #E7EEF8; --fg-strong: #FFFFFF; --muted: #9DB0C8; --muted-soft: #6F829C;
  --border: #27374F; --border-soft: #213047; --primary-weak: #16263F;
  --ok-bg:#13301F; --warn-bg:#3A2A12; --danger-bg:#3A1B12; --locked-bg:#1E2A3D; --violet-bg:#211F3E;
  --shadow-card: 0 2px 4px rgba(0,0,0,.35), 8px 12px 26px -10px rgba(0,0,0,.5), 18px 26px 50px -24px rgba(0,0,0,.5);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23aebfd6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%) fixed;
  color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); }
a { color: inherit; }
/* единые авто-скрывающиеся скроллбары одинакового размера во ВСЕХ блоках
   (webkit-only — без стандартного scrollbar-width, который в Chromium перебивает webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
:hover::-webkit-scrollbar-thumb, :focus-within::-webkit-scrollbar-thumb { background: #C3D2E4; background-clip: content-box; }
body.theme-dark :hover::-webkit-scrollbar-thumb, body.theme-dark :focus-within::-webkit-scrollbar-thumb { background: #3A4F6E; background-clip: content-box; }

/* ============================================================
   APP SHELL — на весь экран, без пустых мест
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ---------- Левый сайдбар ---------- */
.sidebar {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.6);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
body.theme-dark .sidebar { background: rgba(17,28,46,.6); }
.sb-host { flex: 1; min-height: 0; display: flex; padding: 10px; }
/* панель параметров в сайдбаре: вид карточки как у остальных блоков (скругление + тень) */
.sidebar .card.params { flex: 1; display: flex; flex-direction: column; min-height: 0;
  overflow: hidden; }
.sidebar .card.params > .card-head { position: sticky; top: 0; background: var(--card); z-index: 2; }
.sidebar .card.params > .card-body { flex: 1; overflow-y: auto; min-height: 0; }
/* брендовая шапка в левом сайдбаре — логотип в освободившемся месте над «Параметры подбора» */
.sidebar > .brand {
  position: relative;
  flex: 0 0 var(--topbar-h); height: var(--topbar-h);
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 12px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: none; cursor: pointer;
}
.sidebar > .brand img,
.sidebar > .brand svg.brand-logo { height: 60px; width: auto; display: block; }
/* Логотип: в тёмной теме «загорается» голубым неоном, тёмные части светлеют */
.brand-logo { transition: filter .6s ease; }
.brand-logo [fill="#0B2A4A"], .brand-logo [fill="#1E63E6"] { transition: fill .6s ease; }
.brand-logo #pgrad stop { transition: stop-color .6s ease; }
body.theme-dark .brand-logo [fill="#0B2A4A"] { fill: #CFEFFF; }
body.theme-dark .brand-logo [fill="#1E63E6"] { fill: #3FB0FF; }
body.theme-dark .brand-logo #pgrad stop:nth-child(1) { stop-color: #86E4FF; }
body.theme-dark .brand-logo #pgrad stop:nth-child(2) { stop-color: #5FCBFF; }
body.theme-dark .brand-logo #pgrad stop:nth-child(3) { stop-color: #46B0FF; }
body.theme-dark .brand-logo {
  filter: drop-shadow(0 0 4px rgba(130, 225, 255, .95))
          drop-shadow(0 0 13px rgba(70, 190, 255, .65))
          drop-shadow(0 0 26px rgba(50, 160, 255, .4));
}

/* Анимация капли по клику: падение → брызги → сборка обратно в каплю с городом */
.brand-logo { overflow: visible; }
.logo-icon { cursor: pointer; }
.logo-drop { transform-box: fill-box; transform-origin: 50% 100%; }
.logo-splash { pointer-events: none; }
.splash-bit { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.logo-icon.playing .logo-drop { animation: dropFall 1.5s cubic-bezier(.45, .05, .3, 1) both; }
.logo-icon.playing .splash-bit { animation: splashBit 1.5s ease both; }

@keyframes dropFall {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  12%  { transform: translateY(4px) scale(.94, 1.1); }
  26%  { transform: translateY(12px) scale(1.35, .52); opacity: 1; }
  36%  { transform: translateY(12px) scale(.25); opacity: 0; }
  64%  { transform: translateY(0) scale(.2); opacity: 0; }
  76%  { transform: translateY(0) scale(.5); opacity: 1; }
  88%  { transform: translateY(0) scale(1.12); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes splashBit {
  0%, 24%  { opacity: 0; transform: translate(0, 0) scale(.2); }
  32%      { opacity: 1; transform: translate(0, 0) scale(1); }
  52%      { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(.85); }
  68%      { opacity: .85; transform: translate(calc(var(--tx) * .55), calc(var(--ty) + 14px)) scale(.6); }
  82%      { opacity: .4; transform: translate(0, 0) scale(.3); }
  90%, 100% { opacity: 0; transform: translate(0, 0) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-icon.playing .logo-drop, .logo-icon.playing .splash-bit { animation: none; }
}
.nav-group { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.nav-item {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  color: var(--muted); text-decoration: none; cursor: pointer;
}
.nav-item .ic { font-size: 18px; opacity: .85; }
.nav-item:hover { background: var(--primary-weak); color: var(--primary); }
.nav-item.active { background: var(--fg-strong); color: #fff; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px solid var(--border-soft); }

/* ---------- Основная область ---------- */
.main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 10px 12px 10px 24px; min-width: 0; }

/* ---------- Топ-бар ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
body.theme-dark .topbar { background: rgba(17,28,46,.82); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .03em; color: var(--fg-strong); }
.brand .logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: radial-gradient(circle at 30% 30%, #4D9BEE, #2F80D8 70%);
  box-shadow: var(--shadow-md); display: grid; place-items: center; color: #fff; font-size: 15px;
}
.brand small { display: block; font-weight: 500; font-size: 10px; color: var(--muted-soft); letter-spacing: .1em; text-transform: uppercase; }
.topnav {
  position: relative; display: inline-flex; gap: 2px; margin-left: 10px;
  padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--card-soft);
}
.topnav a {
  position: relative; z-index: 1;
  padding: 6px 13px; border-radius: var(--radius-pill); color: var(--muted);
  text-decoration: none; font-weight: 500; font-size: 13px; cursor: pointer;
  transition: color .2s ease;
}
.topnav:not(.seg-enhanced) a.active,
.topnav:not(.seg-enhanced) a[aria-current="page"] { background: var(--primary); color: #fff; font-weight: 600; }
.topnav a:hover:not(.active) { color: var(--primary); }
.topbar-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px; width: 320px;
  padding: 8px 14px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--muted-soft); box-shadow: var(--shadow-sm);
  position: relative;
}
.topbar-search input { border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 13px; color: var(--fg); width: 100%; }

/* Разворачивающийся поиск: схлопнут в круглую кнопку, раскрывается влево по клику/фокусу */
.topbar-search--expand {
  width: 38px; height: 38px; padding: 0; gap: 0; cursor: pointer;
  justify-content: center;
  transition: width .25s ease, padding .25s ease, box-shadow .15s ease;
}
.topbar-search--expand .topbar-search-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; color: var(--muted);
}
.topbar-search--expand .topbar-search-icon svg {
  width: 26px; height: 26px; display: block;
}
.topbar-search--expand input {
  width: 0; opacity: 0; padding: 0; pointer-events: none;
  transition: width .25s ease, opacity .2s ease;
}
.topbar-search--expand:focus-within,
.topbar-search--expand.open {
  width: 320px; padding: 0 14px 0 0; cursor: text;
}
.topbar-search--expand:focus-within .topbar-search-icon,
.topbar-search--expand.open .topbar-search-icon { color: var(--primary); }
.topbar-search--expand:focus-within input,
.topbar-search--expand.open input { width: 100%; opacity: 1; pointer-events: auto; }
.site-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(560px, calc(100vw - 48px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  color: var(--fg);
  z-index: 120;
  display: none;
}
.site-search-panel.open { display: block; }
.site-search-title {
  padding: 6px 8px 7px;
  color: var(--muted-soft);
  font: 700 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-search-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
}
.site-search-item:hover,
.site-search-item.active { background: var(--primary-weak); }
.site-search-item .ssi-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--card-soft);
  color: var(--primary);
  font-weight: 700;
}
.site-search-item b {
  display: block;
  color: var(--fg-strong);
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-search-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-search-item .ssi-icon {
  display: grid;
  margin-top: 0;
  color: var(--primary);
}
.site-search-item em {
  color: var(--muted-soft);
  font-style: normal;
  font-size: 11px;
  white-space: nowrap;
}
.site-search-empty {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13px;
}
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; box-shadow: var(--shadow-sm); position: relative; }
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn .badge-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
/* --- Переключатель языка интерфейса (RU / EN / 中文) --- */
.lang-switch { position: relative; display: inline-flex; }
.lang-toggle { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 38px; gap: 5px; padding: 0 10px; }
.lang-toggle .lang-cur { line-height: 1; }
.lang-toggle .lang-cur { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: inherit; }
.lang-toggle.is-loading { opacity: .6; pointer-events: none; }
.lang-toggle.is-loading::after { content: ""; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border: 2px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: lang-spin .7s linear infinite; }
@keyframes lang-spin { to { transform: rotate(360deg); } }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 100; min-width: 136px; margin: 0; padding: 5px; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.lang-menu[hidden] { display: none; }
.lang-menu li { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--fg); }
.lang-menu li:hover { background: var(--primary-weak); color: var(--primary); }
.lang-menu li[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.lang-menu li[aria-selected="true"]::after { content: "✓"; font-size: 12px; }
/* i18n: при смене языка длина текста меняется — не даём переносам ломать
   навигацию и сегменты; ширины пересчитываются (resize) после перевода. */
.topnav a, .seg button { white-space: nowrap; }
.theme-toggle-btn { border-radius: 50%; border-color: rgba(145, 168, 205, .58); background: linear-gradient(145deg, #fff 0%, #F7FAFF 100%); color: #082F6E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 22px rgba(44, 76, 124, .16); overflow: hidden; }
.theme-toggle-btn:hover { border-color: rgba(47, 128, 216, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 14px 28px rgba(44, 76, 124, .22); transform: translateY(-1px); }
.theme-toggle-icon { width: 30px; height: 30px; display: block; filter: drop-shadow(0 1px 2px rgba(8, 37, 84, .18)); }
.theme-state-sun { display: none; transform: translateX(-6px); }
.theme-state-moon { display: block; }
.theme-moon-crescent { fill: url(#themeMoonGoldGradient); stroke: #9B5A00; stroke-width: 3.8; stroke-linejoin: round; }
.theme-sun-rays { fill: none; stroke: #A45200; stroke-width: 4.2; stroke-linecap: round; }
.theme-sun-core { fill: url(#themeSunGoldGradient); stroke: #A45200; stroke-width: 3.8; }
body.theme-dark .theme-toggle-btn { border-color: var(--border); background: linear-gradient(145deg, var(--card) 0%, var(--card-soft) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 22px rgba(0, 0, 0, .35); }
body.theme-dark .theme-state-moon { display: none; }
body.theme-dark .theme-state-sun { display: block; }
body.theme-dark .theme-moon-crescent { stroke: #C98A2E; }
body.theme-dark .theme-sun-rays { stroke: #C98A2E; }
body.theme-dark .theme-sun-core { stroke: #C98A2E; }
/* --- Кластер «Настройки»: панель (вода/тема/язык) раскрывается влево по клику на шестерёнку --- */
.settings-cluster { display: inline-flex; align-items: center; }
.settings-panel {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 0; margin-right: 0; padding: 0; opacity: 0; visibility: hidden; overflow: hidden;
  border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent;
  pointer-events: none;
  transition: max-width .28s ease, margin-right .28s ease, padding .28s ease,
    border-color .28s ease, background-color .28s ease, opacity .2s ease, visibility .28s;
}
.settings-cluster.open .settings-panel {
  max-width: 320px; margin-right: 10px; padding: 0 8px; opacity: 1; visibility: visible; overflow: visible;
  border-color: var(--border); background: var(--card-soft); box-shadow: var(--shadow-sm);
  pointer-events: auto;
}
.settings-toggle svg { transition: transform .28s ease; }
.settings-cluster.open .settings-toggle { color: var(--primary); border-color: var(--primary); }
.settings-cluster.open .settings-toggle svg { transform: rotate(90deg); }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(145, 168, 205, .58); background: linear-gradient(145deg, #fff 0%, #F7FAFF 100%); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 22px rgba(44, 76, 124, .16); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.avatar:hover { border-color: rgba(47, 128, 216, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 14px 28px rgba(44, 76, 124, .22); transform: translateY(-1px); }
.avatar-icon { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 3px rgba(8, 37, 84, .18)); }
.avatar-head-ring { fill: rgba(255, 255, 255, .08); stroke: #082F6E; stroke-width: 4.8; }
.avatar-body-shape { fill: url(#avatarBodyGradient); stroke: #082F6E; stroke-width: 4.8; stroke-linejoin: round; }
body.theme-dark .avatar { border-color: var(--border); background: linear-gradient(145deg, var(--card) 0%, var(--card-soft) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 22px rgba(0, 0, 0, .35); }
body.theme-dark .avatar-head-ring { stroke: #6FA8FF; }
body.theme-dark .avatar-body-shape { stroke: #6FA8FF; }

/* ---------- Hero ---------- */
.hero {
  margin: 22px 0 18px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(47,128,216,.10), rgba(91,83,214,.06));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.hero h1 { margin: 0 0 6px; font-size: 24px; font-weight: 650; letter-spacing: -.01em; color: var(--fg-strong); }
.hero p { margin: 0; color: var(--muted); max-width: 620px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* верхние вкладки центрального контента */
.hero-tabs {
  position: relative; display: flex; width: fit-content; flex-wrap: nowrap; gap: 2px; margin-bottom: 16px;
  padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--card-soft); box-shadow: var(--shadow-sm);
}
.hero-tab {
  position: relative; z-index: 1;
  padding: 8px 15px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: color .2s ease;
}
.hero-tabs:not(.seg-enhanced) .hero-tab.active { background: var(--primary); color: #fff; }
.hero-tab:hover:not(.active) { color: var(--primary); }

/* ============================================================
   Карточки и общие компоненты
   ============================================================ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.card-head h2, .card-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--fg-strong); }
.card-body { padding: 14px 16px; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft); }

/* === Кнопки: по умолчанию прозрачные с границей, наполняются «водой» по сигналу крана === */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--fg-strong); cursor: pointer; text-decoration: none;
  /* Длинные локализованные подписи (DE/FR) переносятся, а не обрезаются overflow:hidden. */
  white-space: normal; word-break: break-word; line-height: 1.25; text-align: center; min-width: 0;
  border: 1px solid rgba(125, 150, 185, .34);
  background: linear-gradient(180deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(8px) saturate(1.35);
  backdrop-filter: blur(8px) saturate(1.35);
  box-shadow:
    0 1px 2px rgba(20, 40, 80, .07),
    0 9px 20px -8px rgba(20, 40, 80, .30),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 7px -3px rgba(30, 60, 110, .10);
  transition: color .3s ease, border-color .25s ease, transform .15s ease, box-shadow .2s ease, background .55s ease;
}
.btn:hover { transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(20,40,80,.06), 0 12px 22px -7px rgba(20,40,80,.28), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 7px -3px rgba(30,60,110,.10); }
.btn:active { transform: translateY(0); }
.btn-accent { color: var(--primary); border-color: rgba(47, 128, 216, .42); }
.btn-ghost { color: var(--muted); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-block { width: 100%; }
body.theme-dark .btn {
  color: #EAF3FF; border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  box-shadow:
    0 2px 6px -2px rgba(0, 0, 0, .5),
    0 12px 24px -10px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -3px 8px -3px rgba(0, 0, 0, .35);
}
body.theme-dark .btn-accent { color: #9FD0FF; border-color: rgba(90, 160, 240, .42); }
body.theme-dark .btn-ghost { color: var(--muted); }

/* ============================================================
   «ВОДА» — кнопки наполняются водой по сигналу крана
   ============================================================ */
.water-toggle {
  position: relative; isolation: isolate; overflow: hidden; color: var(--muted);
  border: 1px solid rgba(125, 150, 185, .34);
  background: linear-gradient(180deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(8px) saturate(1.35); backdrop-filter: blur(8px) saturate(1.35);
  box-shadow: 0 1px 1px rgba(20,40,80,.05), 0 6px 14px -6px rgba(20,40,80,.22),
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 7px -3px rgba(30,60,110,.10);
  transition: color .3s ease, border-color .25s ease, box-shadow .2s ease, background .55s ease;
}
body.theme-dark .water-toggle {
  color: var(--muted); border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.5), 0 12px 24px -10px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 8px -3px rgba(0,0,0,.35);
}
.water-toggle:hover { color: var(--primary); }
/* реалистичный вентиль (латунь + красный штурвал): штурвал крутится при включении/выключении воды */
.valve-icon { width: 26px; height: 26px; display: block; }
.valve-wheel { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.32, 0, .2, 1); }
body.water-on .water-toggle .valve-wheel { transform: rotate(540deg); }

/* брызги воды — выплёскиваются за рельсу при остановке пилюли в крайнем положении */
.water-splash {
  position: fixed; z-index: 200; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #D2ECFD, #3A8BDD 78%);
  box-shadow: 0 0 3px rgba(58, 139, 221, .45);
  animation: splashFly .75s cubic-bezier(.25, .6, .4, 1) forwards;
  will-change: transform, opacity;
}
@keyframes splashFly {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(var(--dx) * .55), var(--dy)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 34px)) scale(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .water-splash { display: none; } }

/* цвет воды по умолчанию (голубой) + каскадная задержка --wd на элемент */
.btn, .water-toggle, .topnav, .hero-tabs, .seg, .gallery-quick {
  --wd: 0s; --water-top: #8CC9F9; --water-mid: #3A8BDD; --water-bot: #1E66B6;
}
/* затонированные (раньше цветные/тёмные): accent, primary и активная пилюля сегментов — темнее стекло и вода */
.btn-accent, .btn-primary,
.topnav .seg-indicator, .hero-tabs .seg-indicator, .seg .seg-indicator, .gallery-quick .seg-indicator {
  --water-top: #6BA6E2; --water-mid: #2C63AE; --water-bot: #16478A;
}
.btn-accent, .btn-primary {
  background: rgba(86, 136, 208, .24);
  border-color: rgba(70, 120, 200, .44);
}
.btn-accent { color: var(--primary-deep); }
.btn-primary { color: var(--fg-strong); }
body.theme-dark .btn-accent, body.theme-dark .btn-primary {
  background: rgba(100, 150, 225, .17);
  border-color: rgba(110, 160, 230, .32);
}
body.theme-dark .btn-accent { color: #AED0FF; }

/* тело воды (гладкое, без волн) — обычные кнопки и кран */
.btn::after, .water-toggle::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 0; z-index: -2;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, var(--water-top) 0%, var(--water-mid) 42%, var(--water-bot) 100%);
  transition: height .85s cubic-bezier(.33, .7, .25, 1) var(--wd);
}
/* пузырьки — мелкие и хаотичные */
.btn::before, .water-toggle::before, .seg-indicator::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 0; z-index: -1;
  pointer-events: none; border-radius: inherit; opacity: 0;
  background-image:
    radial-gradient(circle at 11% 86%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 67%, rgba(255,255,255,.36) 0 .8px, transparent 1.2px),
    radial-gradient(circle at 44% 91%, rgba(255,255,255,.46) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 59% 73%, rgba(255,255,255,.3) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 73% 83%, rgba(255,255,255,.42) 0 .9px, transparent 1.4px),
    radial-gradient(circle at 87% 62%, rgba(255,255,255,.32) 0 .8px, transparent 1.2px),
    radial-gradient(circle at 37% 77%, rgba(255,255,255,.26) 0 .6px, transparent 1px);
  background-size: 100% 76px; background-repeat: repeat;
  transition: height .85s cubic-bezier(.33, .7, .25, 1) var(--wd), opacity .55s ease;
}
@keyframes bubbleRise { from { background-position: 0 0; } to { background-position: 0 -76px; } }

/* состояние «вода включена» (наливаются обычные кнопки, кран и активная пилюля сегментов) */
body.water-on .btn::after, body.water-on .water-toggle::after { height: calc(100% + 4px); box-shadow: inset 0 3px 6px -2px rgba(255, 255, 255, .42); }
body.water-on .btn::before, body.water-on .water-toggle::before { height: calc(100% + 4px); animation: bubbleRise 1.25s linear infinite var(--wd); }
/* пилюля сегментов: вода — полное тело, уровень и наклон через clip-path (низ всегда ровный) */
.seg-indicator::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, var(--water-top) 0%, var(--water-mid) 46%, var(--water-bot) 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path .8s cubic-bezier(.33, .7, .25, 1) var(--wd);
}
body.water-on .seg-indicator::after { clip-path: polygon(0 13%, 100% 13%, 100% 100%, 0 100%); }
body.water-on .seg-indicator::before { height: 84%; animation: bubbleRise 1.25s linear infinite var(--wd); }
/* пузырьки видны пока наливается; после — всплывают и исчезают */
body.water-anim .btn::before, body.water-anim .water-toggle::before, body.water-anim .seg-indicator::before { opacity: 1; }

/* наведение курсора — в кнопке поднимаются пузырьки */
.btn:hover::before, .water-toggle:hover::before {
  height: calc(100% + 4px); opacity: 1;
  animation: bubbleRise 1.05s linear infinite;
}

/* клик по кнопке — еле заметная рябь, как от упавшей капли */
.btn-drop {
  position: absolute; z-index: -1; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .45);
  transform: scale(.3); opacity: .4;
  animation: btnDrop .55s ease-out forwards;
}
@keyframes btnDrop {
  0%   { transform: scale(.3); opacity: .4; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* физика воды: при движении пилюли наклоняется ТОЛЬКО поверхность (низ ровный), оседает с инерцией */
.seg-indicator.slosh-r::after { animation: sloshR .95s cubic-bezier(.34, .66, .31, 1); }
.seg-indicator.slosh-l::after { animation: sloshL .95s cubic-bezier(.34, .66, .31, 1); }
.seg-indicator.slosh-r::before, .seg-indicator.slosh-l::before { opacity: 1; }
@keyframes sloshR {
  0%   { clip-path: polygon(0 13%, 100% 13%, 100% 100%, 0 100%); }
  20%  { clip-path: polygon(0 4%, 100% 21%, 100% 100%, 0 100%); }
  45%  { clip-path: polygon(0 19%, 100% 7%, 100% 100%, 0 100%); }
  68%  { clip-path: polygon(0 9%, 100% 15%, 100% 100%, 0 100%); }
  85%  { clip-path: polygon(0 14%, 100% 11%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 13%, 100% 13%, 100% 100%, 0 100%); }
}
@keyframes sloshL {
  0%   { clip-path: polygon(0 13%, 100% 13%, 100% 100%, 0 100%); }
  20%  { clip-path: polygon(0 21%, 100% 4%, 100% 100%, 0 100%); }
  45%  { clip-path: polygon(0 7%, 100% 19%, 100% 100%, 0 100%); }
  68%  { clip-path: polygon(0 15%, 100% 9%, 100% 100%, 0 100%); }
  85%  { clip-path: polygon(0 11%, 100% 14%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 13%, 100% 13%, 100% 100%, 0 100%); }
}

body.water-on .btn, body.water-on .water-toggle { background: transparent; }
body.water-on .btn, body.water-on .water-toggle {
  color: #fff;
  /* рамка в тон градиента воды: светлая сверху, тёмная снизу — не контрастит ни вверху, ни внизу */
  border-top-color: var(--water-top);
  border-right-color: var(--water-mid);
  border-bottom-color: var(--water-bot);
  border-left-color: var(--water-mid);
  transition: color .3s ease calc(var(--wd) + .35s), background .5s ease var(--wd), border-color .3s ease calc(var(--wd) + .35s);
}
/* капля во время переключения воды: темнеет (светлая тема) и пульсирует */
.brand-logo #dropg stop { transition: stop-color .35s ease; }
body.water-anim .logo-drop { transform-origin: 50% 55%; animation: dropPulse .5s ease-in-out infinite; }
@keyframes dropPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
body.water-anim:not(.theme-dark) .brand-logo #dropg stop:nth-child(1) { stop-color: #1C4C86; }
body.water-anim:not(.theme-dark) .brand-logo #dropg stop:nth-child(2) { stop-color: #0E2E58; }

@media (prefers-reduced-motion: reduce) {
  body.water-anim .logo-drop { animation: none; }
  body.water-on .btn::before, body.water-on .water-toggle::before,
  body.water-on .topnav::before, body.water-on .hero-tabs::before, body.water-on .seg::before { animation: none; }
  .btn:hover::before, .water-toggle:hover::before { animation: none; }
  .btn-drop { display: none; }
}

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.violet { background: var(--violet-bg); color: var(--violet); }
.tag.locked { background: var(--locked-bg); color: var(--locked); }
.tag.danger { background: var(--danger-bg); color: var(--danger); }

/* поля ввода */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { margin: 0; line-height: 1.25; }
.field > label { font-size: 12px; color: var(--muted); font-weight: 500; }
.input, select.input, textarea.input {
  box-sizing: border-box;
  display: block;
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-soft); color: var(--fg); font-family: var(--font); font-size: 13px; outline: none;
  line-height: 1.2;
}
.input:focus { border-color: var(--primary); }
/* единый шеврон для нативных select (вместо браузерной стрелки) */
select.input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 30px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 12px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: start; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg); cursor: pointer; }
.seg { position: relative; display: inline-flex; background: var(--card-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 6px 12px; border-radius: var(--radius-pill); font: 600 12px var(--font); color: var(--muted); cursor: pointer; transition: color .2s ease; }
.seg:not(.seg-enhanced) button.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.seg button:hover:not(.active) { color: var(--fg); }

/* ── Сегмент-контролы: единый трек + переезжающая синяя пилюля (Apple-style) ── */
.topnav, .hero-tabs, .seg, .gallery-quick { --seg-dur: .42s; }
.seg-indicator {
  position: absolute; left: 0; top: 0; z-index: 2; isolation: isolate;
  border-radius: var(--radius-pill); opacity: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(88, 142, 214, .60), rgba(52, 102, 176, .64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30);
  transition: transform var(--seg-dur) cubic-bezier(.34, 1.3, .5, 1),
              width var(--seg-dur) cubic-bezier(.34, 1.3, .5, 1),
              opacity .2s ease;
  will-change: transform, width;
}
.seg-indicator-inner { z-index: 1; }
/* «бегущая маска»: белая копия подписей внутри пилюли — текст активной кнопки не мигает при перекате */
.seg-indicator-inner { position: absolute; left: 0; top: 0; display: flex; flex-wrap: nowrap; }
.seg-indicator-inner a, .seg-indicator-inner button {
  color: #fff !important; font-weight: 600;
  background: transparent !important; box-shadow: none !important; border-color: transparent !important; cursor: default;
}
.seg-noanim .seg-indicator, .seg-noanim .seg-indicator-inner,
.seg-noanim a, .seg-noanim button { transition: none !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-soft); font-size: 12px; color: var(--muted); cursor: pointer; box-shadow: 0 1px 2px rgba(20,40,80,.06), 0 4px 9px -5px rgba(20,40,80,.22); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.multi-select { position: relative; }
.multi-select summary {
  box-sizing: border-box;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--fg-strong);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select summary::after {
  content: ""; flex: 0 0 12px; width: 12px; height: 12px;
  background: var(--chevron) center / 12px 12px no-repeat;
  transition: transform .2s ease;
}
.multi-select[open] summary { border-color: var(--primary); }
.multi-select[open] summary::after { transform: rotate(180deg); }
.multi-select-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.multi-select-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-size: 12px;
  cursor: pointer;
}
.multi-select-menu label:hover { background: var(--card-soft); }
.multi-select-menu input { margin: 0; }
.multi-select-count { color: var(--muted); font-size: 11px; }
.multi-select-empty { padding: 8px; color: var(--muted); font-size: 12px; }

.brand-combobox {
  position: relative;
  border-radius: var(--radius-sm);
  display: block;
  overflow: visible;
}

.brand-combobox .brand-selected {
  min-height: 0;
  margin: 0 8px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brand-combobox .brand-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card-soft);
  color: var(--fg-strong);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-combobox .brand-pill-empty {
  color: var(--muted);
  border-style: dashed;
}

.brand-combobox .brand-pill-more {
  color: var(--muted);
  border-color: var(--border-soft);
  background: transparent;
}

.brand-accordion {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 2px;
}

.brand-accordion .brand-search-input {
  border: 0;
  border-radius: calc(var(--radius-sm) - 6px);
  box-shadow: none;
  background: transparent;
  outline: none;
  margin: 0;
}

.brand-accordion .brand-search-input:focus {
  box-shadow: none;
}

.brand-more-btn {
  width: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 6px);
  background: var(--card-soft) var(--chevron) center / 12px 12px no-repeat;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.brand-dropdown {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  display: none;
  padding: 8px;
  position: relative;
  z-index: 3;
}

.brand-dropdown.open {
  display: block;
}

.brand-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.brand-filter-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-soft);
  color: var(--fg);
  font: 600 12px var(--font);
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 1.25;
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(20,40,80,.06), 0 4px 9px -5px rgba(20,40,80,.20);
}

.brand-filter-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.brand-dropdown-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}

/* ============================================================
   Рабочая сетка: параметры | центр | карточка/новости
   ============================================================ */
.workspace { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; align-items: stretch; flex: 1; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* центральная колонка («основной контент») скроллится сама */
.workspace > .col:not(.cardcol) { overflow-y: auto; overflow-x: hidden; min-height: 0; }

/* ---------- Левая панель «Параметры подбора» ---------- */
.params .card-head { flex-direction: column; align-items: stretch; gap: 10px; }
.section { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.section:last-child { border-bottom: 0; }
.section > .eyebrow { display: block; margin: 0 0 8px; }
.section > .field + .field,
.section > .field + .row2,
.section > .field + .row3,
.section > .row2 + .field,
.section > .row3 + .field { margin-top: 8px; }
.mode-pane { display: none; }
.mode-pane.active { display: block; }
.params-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-soft); }

.params-foot .btn.btn-block {
  width: auto;
  flex: 1;
}

/* ---------- График ---------- */
.chart-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.graph-layout-toggle {
  display: inline-grid;
  grid-template-columns: 22px 34px 22px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 96px;
  height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.graph-layout-toggle:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.layout-track {
  position: relative;
  width: 34px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}
.layout-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
  transition: transform .16s ease;
}
.graph-layout-toggle[aria-pressed="true"] .layout-thumb { transform: translateX(18px); }
.layout-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 18px;
  color: var(--muted);
}
.layout-icon i {
  position: absolute;
  display: block;
  border-radius: 2px;
  background: currentColor;
}
.layout-icon-combined i:nth-child(1) { left: 3px; right: 3px; top: 8px; height: 2px; transform: rotate(-12deg); }
.layout-icon-combined i:nth-child(2) { left: 4px; right: 5px; top: 8px; height: 2px; transform: rotate(18deg); opacity: .78; }
.layout-icon-combined i:nth-child(3) { left: 5px; right: 6px; top: 8px; height: 2px; transform: rotate(2deg); opacity: .62; }
.layout-icon-split i { left: 3px; right: 3px; height: 2px; }
.layout-icon-split i:nth-child(1) { top: 3px; }
.layout-icon-split i:nth-child(2) { top: 8px; opacity: .78; }
.layout-icon-split i:nth-child(3) { top: 13px; opacity: .62; }
.graph-pointer-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.graph-pointer-toggle:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.graph-pointer-toggle[aria-pressed="false"] { opacity: .46; }
.graph-pointer-toggle svg { display: block; width: 25px; height: 18px; overflow: visible; }
.pointer-icon-curve,
.pointer-icon-guide {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pointer-icon-curve { stroke-width: 2.2; }
.pointer-icon-guide { stroke-width: 1.35; stroke-dasharray: 3 3; opacity: .82; }
.pointer-icon-point { fill: var(--primary); stroke: var(--card); stroke-width: 1.2; }
.toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); font-size: 12px; font-weight: 600; color: var(--fg); cursor: pointer; user-select: none; }
.toggle .dash { width: 14px; height: 3px; border-radius: 2px; }
.toggle[aria-pressed="false"] { opacity: .42; }
.toggle.qh .dash { background: var(--c-qh); } .toggle.eff .dash { background: var(--c-eff); }
.toggle.npsh .dash { background: var(--c-npsh); } .toggle.limit .dash { background: var(--c-limit); }
.toggle.p2 .dash { background: var(--c-p2); }
.chart-menus { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 0; }
.chart-menus { position: relative; }
.menu-pop { position: absolute; z-index: 30; top: 44px; min-width: 220px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 6px; display: none; }
.menu-pop.open { display: block; }
.menu-pop .mi-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--fg); cursor: pointer; }
.menu-pop .mi-opt:hover { background: var(--primary-weak); color: var(--primary); }
.menu-pop .mi-opt input { pointer-events: none; }
.menu-pop .mi-opt .mi-label { flex: 1 1 auto; min-width: 0; }
.menu-pop .mi-visibility { flex: 0 0 auto; width: 34px; height: 20px; border: 1px solid var(--border); border-radius: 999px; background: #E7EDF5; padding: 2px; cursor: pointer; transition: background .16s ease, border-color .16s ease, opacity .16s ease; }
.menu-pop .mi-visibility span { display: block; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); transition: transform .16s ease; }
.menu-pop .mi-visibility.is-ready { border-color: rgba(47, 128, 216, .38); background: #DDEAF8; }
.menu-pop .mi-visibility.is-on { border-color: var(--primary); background: var(--primary); }
.menu-pop .mi-visibility.is-on span { transform: translateX(14px); }
.menu-pop .mi-visibility:disabled { cursor: default; opacity: .55; }
.toggle.p2 .dash { background: var(--c-p2); }
.toggle.p2[aria-pressed="false"], .toggle[aria-pressed="false"] { opacity: .42; }
.chart-wrap { position: relative; padding: 8px 12px 0; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-wrap.chart-pointer-enabled > svg { cursor: crosshair; }
.chart-wrap.split-graphs { padding-bottom: 4px; }
.graph-hover-tooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 25;
  min-width: 122px;
  max-width: 190px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(13, 28, 52, .93);
  color: #fff;
  box-shadow: var(--shadow-pop);
  font: 600 11px var(--mono);
  line-height: 1.5;
}
.graph-hover-tooltip strong {
  display: block;
  margin-bottom: 2px;
  font: 700 10px var(--font);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.graph-hover-tooltip .ghv-line { display: block; }
.graph-hover-tooltip .ghv-line.active { font-weight: 700; }
.graph-sub-stack { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.graph-sub { border: 1px solid var(--border-soft); border-radius: 8px; background: var(--card); overflow: hidden; }
.graph-sub svg { display: block; width: 100%; height: auto; }
.wp-chip { position: absolute; display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 9px; background: var(--card); border: 1px solid var(--primary); box-shadow: var(--shadow-md); font-size: 11px; color: var(--primary); font-weight: 600; line-height: 1.25; pointer-events: none; }
.wp-chip b { font-family: var(--mono); color: var(--fg-strong); font-size: 13px; }
.char-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--border-soft); }
.char-badge { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--card-soft); padding: 9px 10px; }
.char-badge .k { font-size: 11px; color: var(--muted); } .char-badge .v { font-family: var(--mono); font-weight: 700; color: var(--fg-strong); font-size: 14px; margin-top: 2px; }
.char-badge.good .v { color: var(--ok); } .char-badge.warn .v { color: var(--warn); }

/* содержимое вкладок hero */
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.subtab { padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-soft); font: 600 12px var(--font); color: var(--muted); cursor: pointer; }
.subtab.active { background: var(--card); color: var(--fg-strong); box-shadow: var(--shadow-sm); border-color: var(--primary); }

.frame-box { height: 320px; border-radius: var(--radius-sm); border: 1px dashed var(--border); background: var(--card-soft); display: grid; place-items: center; color: var(--muted-soft); overflow: hidden; padding: 10px; text-align: center; }
.frame-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.frame-box .frame-empty { max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.tab-pane[data-tabpane="dims"] .card-body {
  padding: 16px;
}
.tab-pane[data-tabpane="dims"] #dimsFrame {
  position: relative;
  width: 100%;
  height: clamp(560px, 68vh, 860px);
  min-height: 560px;
  padding: 16px;
  align-items: center;
  justify-items: center;
}
.tab-pane[data-tabpane="dims"] #dimsFrame img {
  display: block;
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}
.dims-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 24px; }
.dims-list .di { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.dims-list .di b { font-family: var(--mono); color: var(--fg-strong); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.file-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--card-soft); display: flex; flex-direction: column; gap: 8px; }
.file-card .ficon { font-size: 26px; } .file-card .fname { font-size: 13px; font-weight: 600; color: var(--fg-strong); } .file-card .fmeta { font-size: 11px; color: var(--muted-soft); }
.file-card .btn { margin-top: auto; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.stock-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--card-soft); }
.stock-card .sc-city { font-weight: 600; color: var(--fg-strong); } .stock-card .sc-qty { font-family: var(--mono); font-size: 20px; color: var(--ok); margin: 4px 0; }
.stock-card.total .sc-qty { color: var(--primary); }
.stock-card.zero .sc-qty { color: var(--muted-soft); }
.doc-group + .doc-group { margin-top: 18px; }

/* ---------- Панель параметров агрегата (внутри центра) ---------- */
.param-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.param-row:last-child { border-bottom: 0; }
.param-row .pk { display: flex; flex-direction: column; } .param-row .pk b { font-size: 13px; color: var(--fg-strong); font-weight: 600; } .param-row .pk span { font-size: 11px; color: var(--muted-soft); }
.param-row .pv { font-family: var(--mono); font-weight: 700; color: var(--fg-strong); }

/* ---------- Таблица результатов ---------- */
.tbl-scroll { overflow-x: auto; width: 100%; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
table.results-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; }
table.results-table th, table.results-table td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
table.results-table th { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--card-soft); cursor: pointer; position: sticky; top: 0; }
table.results-table th .sortcue { color: var(--muted-soft); font-size: 9px; }
table.results-table th:first-child, table.results-table td:first-child { text-align: left; }
section.analog-equipment-card .results-table th:first-child,
section.analog-equipment-card .results-table td:first-child { width: 14%; min-width: 120px; white-space: normal; }
section.analog-equipment-card .results-table { font-size: 11.9px; transform: scale(0.95); transform-origin: top left; }
section.analog-equipment-card .results-table th, section.analog-equipment-card .results-table td { padding: 9px 11.5px; }
section.analog-equipment-card .results-table td.num { font-size: 11px; }
section.analog-equipment-card .results-table td:first-child .model-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.4em;
  line-height: 1.2;
}
section.analog-equipment-card .results-table td:first-child .model-cell b,
section.analog-equipment-card .results-table td:first-child .model-cell span { white-space: normal; }
table.results-table th:last-child,
table.results-table td:last-child { white-space: normal; max-width: 300px; min-width: 130px; }
table.results-table td.num { font-family: var(--mono); color: var(--fg-strong); }
table.results-table tbody tr { cursor: pointer; } table.results-table tbody tr:hover { background: var(--primary-weak); }
table.results-table tbody tr.sel { background: var(--primary-weak); } table.results-table tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.model-cell { display: flex; flex-direction: column; } .model-cell b { color: var(--fg-strong); } .model-cell span { font-size: 11px; color: var(--muted-soft); }
.dev-bar { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ok), var(--warn)); vertical-align: middle; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; }
.result-foot-left { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-width: 0; }
.page-size-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.page-size-control select.input { width: auto; min-width: 70px; height: 30px; padding: 4px 26px 4px 10px; border-radius: 8px; font-size: 12px; }
.pager { display: flex; gap: 6px; max-width: 55%; overflow-x: auto; padding-bottom: 2px; } .pager button { flex: 0 0 auto; min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--fg); font-family: var(--mono); font-size: 12px; cursor: pointer; } .pager button.active { background: var(--primary); border-color: var(--primary); color: #fff; } .pager button:disabled { opacity: .45; cursor: default; }

/* ---------- Карточка товара (правая колонка) ---------- */
.gallery { height: 180px; border-radius: var(--radius-sm); background: radial-gradient(circle at 60% 35%, var(--primary-weak), transparent 65%), repeating-linear-gradient(90deg, #F2F6FB 0 10px, #EDF3FA 10px 20px); border: 1px solid var(--border-soft); display: grid; place-items: center; color: var(--muted-soft); margin-bottom: 10px; }
body.theme-dark .gallery { background: var(--card-soft); }
/* рельса-сегмент в 2 ряда: общий трек + переезжающая пилюля (как .seg/.hero-tabs) */
.gallery-quick {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-soft);
  box-shadow: var(--shadow-sm);
}
.gallery-quick button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: 600 11px var(--font);
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
  min-height: 31px;
  transition: color .2s ease;
}
.gallery-quick:not(.seg-enhanced) button.active { background: var(--primary); color: #fff; }
.gallery-quick button:hover:not(.active) { color: var(--primary); }
.meta-list .mi { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.meta-list .mi span { color: var(--muted); } .meta-list .mi b { color: var(--fg-strong); font-weight: 600; text-align: right; }
.price { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--fg-strong); }
.commerce-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.commerce-actions .span2 { grid-column: 1/-1; }

/* ---------- Карточка товара: статичная колонка с собственным скроллом (как «Параметры подбора») ---------- */
.cardcol { align-self: stretch; min-height: 0; gap: 0; }
.cardcol > .card { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cardcol > .card > .card-body { flex: 1; overflow-y: auto; min-height: 0; }
/* подвал с кнопками — как «Применить/Сбросить» у параметров: прижат вниз, 2 ряда, компактнее */
.cardcol .commerce-actions {
  margin: 0; padding: 12px 16px; border-top: 1px solid var(--border-soft);
  background: var(--card); grid-template-columns: 1fr 1fr; gap: 8px;
}
.cardcol .commerce-actions .btn { padding: 8px 10px; font-size: 12px; }
.accordion .acc-item { border-bottom: 1px solid var(--border-soft); }
.accordion .acc-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; cursor: pointer; font-weight: 600; color: var(--fg-strong); }
.accordion .acc-head .chev {
  flex: 0 0 13px; width: 13px; height: 13px; font-size: 0; color: transparent;
  background: var(--chevron) center / 13px 13px no-repeat;
  transition: transform .2s ease;
}
.accordion .acc-body { display: none; padding-bottom: 12px; color: var(--muted); font-size: 13px; }
.accordion .acc-item.open .acc-body { display: block; }
.accordion .acc-item.open .acc-head .chev { transform: rotate(180deg); }
.tech-list { display: grid; gap: 7px; }
.tech-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(76px, 1fr); gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.tech-row:last-child { border-bottom: 0; }
.tech-row span { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.tech-row b { color: var(--fg-strong); font-family: var(--mono); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.tech-empty { color: var(--muted); line-height: 1.45; }

/* ---------- Мини-кривые ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.mini .card-head { padding: 12px 14px; } .mini .card-head b { font-size: 13px; color: var(--fg-strong); } .mini svg { display: block; width: 100%; height: auto; padding: 6px 6px 0; }
.mini-stats { display: flex; justify-content: space-between; padding: 10px 14px 14px; } .mini-stats div { display: flex; flex-direction: column; } .mini-stats .k { font-size: 10.5px; color: var(--muted-soft); } .mini-stats .v { font-family: var(--mono); font-weight: 700; color: var(--fg-strong); }

/* ---------- Новости / карусели ---------- */
.news-carousel .carousel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.carousel-nav { display: flex; gap: 6px; } .carousel-nav button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-soft); cursor: pointer; color: var(--muted); }
.news-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); } .news-item:last-child { border-bottom: 0; }
.news-thumb { width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--primary-weak); flex: none; display: grid; place-items: center; color: var(--primary); }
.news-item b { display: block; color: var(--fg-strong); font-size: 13px; } .news-item span { font-size: 12px; color: var(--muted); } .news-item time { font-size: 11px; color: var(--muted-soft); }

/* ---------- Тёмная CTA ---------- */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(135deg, #16243A 0%, #1E3354 60%, #20284A 100%); color: #fff; box-shadow: 0 20px 40px -22px rgba(20,40,80,.6); }
.cta h3 { margin: 0 0 4px; font-size: 17px; font-weight: 650; } .cta p { margin: 0; color: #B9C7DD; font-size: 13px; max-width: 560px; }
.cta-actions { display: flex; gap: 10px; flex: none; }

/* ============================================================
   Модальные окна
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(14,26,44,.45); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--card); }
.modal-head h3 { margin: 0; font-size: 16px; color: var(--fg-strong); }
.modal-head > h3 { position: absolute; top: 50%; left: 50%; max-width: calc(100% - 112px); transform: translate(-50%, -50%); text-align: center; }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.modal-foot[hidden] { display: none; }
.modal .close { cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; background: none; border: 0; }
.modal-head > .close { position: relative; z-index: 1; margin-left: auto; }
.modal-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.modal-list { display: flex; flex-direction: column; gap: 10px; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--card-soft); }
.modal-row.cols-2 { grid-template-columns: 1fr auto; }
.modal-row.plain { padding: 0; border: 0; background: transparent; }
.modal-row .field { min-width: 0; }
.modal-row .row-del { min-width: 36px; padding-left: 10px; padding-right: 10px; }
.modal-row .btn { min-width: 36px; padding-left: 10px; padding-right: 10px; }
.modal-section { display: flex; flex-direction: column; gap: 8px; }
.modal-section-title { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.menu-pop .mi-opt.mi-action::before { content: "›"; color: var(--primary); font-weight: 700; }
.calc-titlebar { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 34px; }
.calc-titlebar h3 { position: absolute; top: 50%; left: 50%; max-width: calc(100% - 128px); min-width: 0; transform: translate(-50%, -50%); text-align: center; }
.calc-back { position: relative; z-index: 1; justify-content: center; width: 40px; min-width: 40px; height: 34px; padding: 0; font-size: 24px; line-height: 1; }
.calc-back[hidden] { display: none; }
.calc-screen { display: none; flex-direction: column; gap: 12px; }
.calc-screen.active { display: flex; }
.tool-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-links :is(a, button) { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-soft); text-decoration: none; color: var(--fg); font: 600 13px var(--font); text-align: left; cursor: pointer; }
.tool-links :is(a, button):hover { border-color: var(--primary); color: var(--primary); }
.chem-ref-summary { min-height: 38px; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--card-soft); color: var(--fg); font-size: 12.5px; line-height: 1.35; }
.chem-ref-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chem-ref-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--card-soft); }
.chem-ref-item b { min-width: 0; color: var(--fg-strong); font-size: 13px; }
.chem-ref-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.chem-ref-badge { white-space: nowrap; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; border: 1px solid var(--border-soft); background: var(--card); color: var(--muted); }
.chem-ref-excellent { border-color: rgba(31, 143, 83, .3); background: rgba(31, 143, 83, .12); color: #1f8f53; }
.chem-ref-good { border-color: rgba(47, 128, 216, .3); background: rgba(47, 128, 216, .12); color: var(--primary); }
.chem-ref-fair { border-color: rgba(193, 138, 16, .34); background: rgba(193, 138, 16, .13); color: #a36f00; }
.chem-ref-poor,
.chem-ref-not-recommended { border-color: rgba(209, 75, 75, .32); background: rgba(209, 75, 75, .12); color: var(--danger); }
.brand-filter-empty { color: var(--muted); font-size: 13px; }

/* ============================================================
   ИИ-помощник
   ============================================================ */
/* плавающий робот скрыт — запуск помощника теперь из иконки в шапке (#aiLaunch) */
.ai-fab { display: none !important; }
.ai-launch svg { display: block; }
.ai-fab:hover { transform: scale(1.06); }
.ai-fab-robot { width: 53px; height: 53px; display: block; filter: drop-shadow(0 3px 6px rgba(5, 25, 70, .34)); pointer-events: none; }
.ai-head-icon { width: 22px; height: 22px; flex: 0 0 auto; padding: 2px; border-radius: 50%; background: #2f80d8; }
.ai-head b { display: flex; align-items: center; gap: 8px; }
.ai-robot-body { fill: #f8fbff; stroke: rgba(7, 48, 135, .55); stroke-width: 2.3; }
.ai-robot-side { fill: #bfe4ff; stroke: rgba(7, 48, 135, .55); stroke-width: 2.2; }
.ai-robot-face { fill: #082d68; stroke: rgba(255, 255, 255, .72); stroke-width: 1.4; }
.ai-robot-eye { fill: none; stroke: #f7fbff; stroke-width: 3.8; stroke-linecap: round; }
.ai-robot-antenna,
.ai-robot-circuit { fill: none; stroke: #f7fbff; stroke-width: 3.2; stroke-linecap: round; }
.ai-robot-antenna-dot,
.ai-robot-circuit-dot { fill: #f8fbff; stroke: rgba(7, 48, 135, .55); stroke-width: 1.6; }
.ai-panel { position: fixed; right: 16px; top: calc(var(--topbar-h) + 8px); bottom: auto; z-index: 95; width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - var(--topbar-h) - 24px); display: none; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.ai-panel.open { display: flex; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.ai-head b { color: var(--fg-strong); } .ai-head .ai-tools { display: flex; gap: 6px; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13px; }
.ai-msg.bot { background: var(--primary-weak); color: var(--fg); border-bottom-left-radius: 4px; }
.ai-msg.me { background: var(--fg-strong); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; } .ai-quick button { padding: 6px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-soft); font: 500 12px var(--font); color: var(--muted); cursor: pointer; }
.ai-model { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin: 0 16px 10px; background: var(--card-soft); } .ai-model b { color: var(--fg-strong); font-size: 13px; } .ai-model .am-actions { display: flex; gap: 6px; margin-top: 8px; }
.ai-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.ai-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-soft); color: var(--fg); outline: none; font-family: var(--font); }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1320px) {
  .workspace { grid-template-columns: 1fr; flex: none; min-height: 0; }
  /* узкие экраны: возвращаем обычный страничный скролл (без фикс-колонок) */
  .scroll { overflow: visible auto; display: block; padding-bottom: 40px; }
  .workspace > .col:not(.cardcol) { overflow: visible; }
  .cardcol { align-self: auto; }
  .cardcol > .card { display: block; overflow: visible; }
  .cardcol > .card > .card-body { overflow: visible; }
}
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 248px; z-index: 80; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-pop); }
  .app.nav-open .sidebar { transform: none; }
  .workspace { grid-template-columns: 1fr; }
  .char-badges { grid-template-columns: repeat(3,1fr); }
  .mini-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topnav, .topbar-search { display: none; }
  .scroll { padding: 0 14px 32px; }
  .cta { flex-direction: column; align-items: flex-start; }
  .char-badges { grid-template-columns: repeat(2,1fr); }
  .commerce-actions, .tool-links { grid-template-columns: 1fr; }
  .chem-ref-list { grid-template-columns: 1fr; }
}
.menu-toggle { display: none; }
@media (max-width: 1024px) { .menu-toggle { display: grid; } }

/* ---- Кнопка закрытия панели параметров (моб.) ---- */
.sb-close { display: none; position: absolute; top: 10px; right: 10px; z-index: 90;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 18px; cursor: pointer; }
/* ---- Затемнение под выехавшей панелью (моб.) ---- */
.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(14,26,44,.45); backdrop-filter: blur(2px); }
@media (max-width: 1024px) {
  .app.nav-open .nav-backdrop { display: block; }
  .app.nav-open .sb-close { display: grid; }
}

/* ---- Классификационные фильтры (мультивыбор) ---- */
#classFilters .section .eyebrow { display: block; margin-bottom: 6px; }

.scroll { padding-top: 10px; }

/* ---- Футер ---- */
.site-footer { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 22px; }
.footer-col h4 { margin: 0 0 12px; font-size: 13px; color: var(--fg-strong); }
.footer-col a, .footer-col span { display: block; color: var(--muted); text-decoration: none; font-size: 13px; padding: 4px 0; cursor: pointer; }
.footer-col a:hover { color: var(--primary); }
.footer-col.brandcol p { color: var(--muted); font-size: 13px; margin: 10px 0 0; max-width: 320px; }
.footer-col.brandcol .brand .logo { width: 30px; height: 30px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 28px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } }

/* ── Кнопка панели управления (только superadmin) ── */
.admin-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.admin-panel-btn:hover { background: #15803d; transform: translateY(-1px); }
.admin-panel-btn[hidden] { display: none; }

/* ============================================================
   UX-ПОЛИРОВКА (ревью UI/UX Pro Max)
   ============================================================ */

/* 1. Видимое кольцо фокуса для клавиатурной навигации (a11y, приоритет №1).
   :focus-visible — только для tab-навигации, мышь не подсвечивает. */
:where(a, button, input, select, textarea, summary,
  .chip, .toggle, .seg button, .hero-tab, .icon-btn, .avatar,
  .gallery-quick button, .nav-item, .close, .sb-close, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
body.theme-dark :where(a, button, input, select, textarea, summary,
  .chip, .toggle, .seg button, .hero-tab, .icon-btn, .avatar,
  .gallery-quick button, .nav-item, .close, .sb-close, [tabindex]):focus-visible {
  outline-color: #6FB6FF;
}

/* 2. Скрытый заголовок h1 для иерархии/SEO и скринридеров */
.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;
}

/* 3. Иконки-спрайт (замена эмодзи): единый стиль, цвет наследуется (currentColor) */
.ic-svg {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.file-card .ficon .ic-svg { width: 26px; height: 26px; color: var(--primary); }
.news-thumb .ic-svg { width: 24px; height: 24px; }
.tool-links .ic-svg { width: 20px; height: 20px; }
.frame-box .ic-svg, .gallery .ic-svg { width: 46px; height: 46px; opacity: .75; }
.menu-toggle .ic-svg { width: 20px; height: 20px; }
.close .ic-svg, .sb-close .ic-svg { width: 15px; height: 15px; }

/* 4. Тёмная тема графика: сетка/оси рисуются JS светло-серым — переопределяем
   через CSS (CSS перебивает presentation-атрибуты SVG), без правок JS. */
body.theme-dark .chart-wrap [data-layer="grid"] line { stroke: #27374F; }
body.theme-dark .chart-wrap [data-layer="axes"] line { stroke: #3C5172; }
body.theme-dark .chart-wrap [data-layer="axes"] text { fill: var(--muted); }

/* 5. Полное уважение prefers-reduced-motion: гасим все анимации/переходы,
   а не только каплю и брызги (приоритет: a11y / вестибулярные расстройства). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 6. Мобильные тач-таргеты ≥44px и инпуты 16px (без iOS auto-zoom) */
@media (max-width: 720px) {
  .input, select.input, textarea.input { font-size: 16px; }
  .chips { gap: 8px; }
  .chip { padding: 10px 14px; font-size: 13px; }
  .btn-sm { padding: 10px 14px; font-size: 13px; }
  .seg button { padding: 10px 14px; }
  .icon-btn, .avatar { width: 44px; height: 44px; }
  .multi-select summary { min-height: 44px; }
  .gallery-quick button { min-height: 44px; }
  .pw-toggle { min-width: 44px; min-height: 44px; }
  .results-table th, .results-table td { padding-top: 10px; padding-bottom: 10px; }
}