/* Дизайн-токены: см. docs/superpowers/specs в репозитории */
:root {
  --bg: #FAFAFA;
  --fg: #171717;
  --muted: #666666;
  --nav: #4D4D4D;
  --surface: #FFFFFF;
  --line: rgba(0, 0, 0, 0.08);
  --line-solid: #EBEBEB;
  --u: 6px;                 /* базовый шаг сетки */
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-c: 100px;        /* «таблетки» */
  --container: 1450px;
  --ring: 0 0 0 1px var(--line);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Geist — субсеты с кириллицей, self-hosted */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/geist-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: "Geist";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/geist-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/geist-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: "Geist";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/geist-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;
}

/* Geist Mono — субсеты с кириллицей, self-hosted */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/geist-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/geist-mono-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;
}

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden должен побеждать любой display из наших правил */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 calc(var(--u) * 4);   /* 24px */
}

h1, h2, h3, p, ul { margin: 0; }

:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 7);      /* 42px ~ шаблонные 40 */
  padding: 0 calc(var(--u) * 3);   /* 18px */
  border: none;                    /* <button> иначе рисует свою рамку outset 2px */
  border-radius: var(--radius-c);
  font-family: inherit;            /* <button> не наследует шрифт документа — был Arial */
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
  background: var(--fg);
  color: var(--surface);
}
.btn--primary:hover { background: #383838; }

.btn--secondary {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--line-solid);
}
.btn--secondary:hover { box-shadow: 0 0 0 1px var(--muted); }

/* ---------- Шапка ---------- */
.header { flex: none; }

.header__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  height: calc(var(--u) * 11);     /* 66px */
}

.logo {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--u)) calc(var(--u) * 2) calc(var(--u)) 0;
}
.logo img { height: 16px; width: auto; }

.nav {
  display: flex;
  align-items: center;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px 6px 12px;
  font-size: 14px;
  color: var(--nav);
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav__link:hover { color: var(--fg); }

.nav__link svg { display: block; }

.btn-nd {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  height: calc(var(--u) * 5 + 2px);  /* 32px */
  padding: 0 calc(var(--u) * 2);
  border-radius: var(--radius-m);
  background: var(--fg);
  color: var(--surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-nd:hover { background: #383838; }

.burger {
  display: none;
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  padding: 0;
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-c);
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
}
.burger span {
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.2s ease;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Hero (один экран) ---------- */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 8) 0;
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.hero__text {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);         /* 30px ~ шаблонные 32 */
  align-items: flex-start;
}

.hero__title {
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.059em;        /* −3.8px на 64px */
  line-height: 1;
  white-space: nowrap;
}

.hero__subtitle {                   /* используется на 404 */
  margin-top: calc(var(--u) * 4);
  max-width: 560px;
  font-size: 20px;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
}

.hero__logo {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.hero__logo img { width: min(100%, 620px); }

.hero__list {
  flex: none;
  width: 364px;
  list-style: none;
  padding: calc(var(--u) * 5) calc(var(--u) + 2px);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2 + 4px);   /* 16px */
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.15;
}
.hero__list strong { font-weight: 600; }

/* ---------- Страница 404 ---------- */
.notfound {
  flex: 1;
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 12) 0;
}

.notfound__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.notfound__text {
  flex: 1 1 420px;
  min-width: 0;
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: calc(var(--u) * 3);
}

.notfound__title {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.notfound__lead {
  margin-top: calc(var(--u) * 4);
  max-width: 46ch;
  font-size: 18px;
  color: var(--muted);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 7);
}

.notfound__art {
  flex: 0 1 480px;
  display: flex;
  justify-content: flex-end;
}
.notfound__art img { width: 100%; max-width: 480px; height: auto; }

/* ---------- Страница подбора комплектующих ---------- */
.nav__link--active { color: var(--fg); font-weight: 500; }

.picker {
  flex: 1;
  padding: calc(var(--u) * 14) 0 calc(var(--u) * 18);
}
.picker > .container { max-width: 1200px; }

.picker__title {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.05;
  text-align: center;
  margin-bottom: calc(var(--u) * 9);
}

.picker__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--u) * 3);
}

.picker__field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) + 2px);
  width: 260px;
  transition: opacity 0.22s ease;
}
.picker__field.is-locked { opacity: 0.45; }

.picker__label {
  font-size: 12px;
  color: var(--muted);
  padding-left: 2px;
}

.picker__select { position: relative; }
.picker__select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.picker__select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: calc(var(--u) * 7);
  padding: 0 calc(var(--u) * 5) 0 calc(var(--u) * 2);
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-overflow: ellipsis;
}
.picker__select select:hover:not(:disabled) { border-color: var(--muted); }
.picker__select select:focus-visible {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08);
}
.picker__select select:disabled { cursor: not-allowed; color: var(--muted); background: var(--bg); }

@keyframes pickerPulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 23, 23, 0.16); }
  100% { box-shadow: 0 0 0 8px rgba(23, 23, 23, 0); }
}
.picker__field.is-pulse .picker__select select { animation: pickerPulse 0.5s ease-out; }

.picker__submit { white-space: nowrap; }
.picker__submit:disabled { opacity: 0.35; cursor: not-allowed; }

.picker__hint {
  margin-top: calc(var(--u) * 4);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  min-height: 1.4em;
}
.picker__hint.is-error { color: #b3261e; }

/* ---------- Результаты подбора ---------- */
.results {
  margin-top: calc(var(--u) * 10);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.results.is-visible { opacity: 1; transform: none; }

.results__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 3);
}
.results__headings {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
}
.results__title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.results__meta { font-size: 13px; color: var(--muted); }

/* Кнопка выгрузки живёт в шапке блока результатов и появляется вместе с ним:
   отдельная анимация не нужна — блок уже проявляется плавно. */
.results__xlsx {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .results__head { flex-direction: column; }
  .results__xlsx { width: 100%; }
}

.results__wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.results__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.results__table th {
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.results__table td {
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.results__table tbody tr { transition: background-color 0.15s ease; }
.results__table tbody tr:hover { background: var(--surface); }

.results__table .c-code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.results__table .c-qty { text-align: right; white-space: nowrap; color: var(--muted); }
.results__table .c-price,
.results__table .c-sum { text-align: right; white-space: nowrap; }
.results__table .c-sum { font-weight: 500; }
.results__table .c-link { text-align: right; white-space: nowrap; }
.results__table .c-link.is-empty { color: var(--muted); }
.results__table .c-name { min-width: 260px; }

.b2b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
  transition: color 0.15s ease;
}
.b2b:hover { color: var(--fg); }
.b2b__arrow { transition: transform 0.15s ease; }
.b2b:hover .b2b__arrow { transform: translateX(3px); }

.results__table tfoot td {
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
  background: var(--surface);
  border-bottom: none;
}
.results__table .c-total-label { text-align: right; color: var(--muted); font-size: 13px; white-space: nowrap; }
.results__table .c-total { text-align: right; font-weight: 600; white-space: nowrap; }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.results.is-visible tbody tr { animation: rowIn 0.32s ease both; }

@media (prefers-reduced-motion: reduce) {
  .results, .results.is-visible tbody tr, .picker__field, .b2b__arrow,
  .docs__sections, .sec__body, .sec__chev, .card { transition: none; animation: none; }
}

/* ---------- Чат «Нейро-Даня» ---------- */
.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(23, 23, 23, 0.24);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.chat-overlay.is-open { opacity: 1; }

.chat {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 400px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.chat.is-open { transform: translateX(0); }

.chat__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.chat__title { font-weight: 600; font-size: 16px; }
.chat__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-c);
  padding: 1px 8px;
}
.chat__actions { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 2); }
.chat__reset {
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}
.chat__reset:hover { color: var(--fg); }
.chat__close {
  border: 1px solid var(--line-solid);
  background: var(--surface);
  border-radius: var(--radius-c);
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}
.chat__close:hover { border-color: var(--muted); }

.chat__body {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.chat__hello { font-size: 14px; color: var(--muted); margin-bottom: calc(var(--u) * 3); }
.chat__empty { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-top: auto; }
.chat__sugg {
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.chat__sugg:hover { border-color: var(--muted); }

.chat__msg { max-width: 100%; font-size: 14px; line-height: 1.5; overflow-wrap: break-word; }
.chat__msg--user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--fg);
  color: var(--surface);
  border-radius: 14px 14px 4px 14px;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  white-space: pre-wrap;
}
.chat__msg--bot { align-self: flex-start; color: var(--fg); }
.chat__msg--bot p { margin: 0 0 calc(var(--u) * 2); }
.chat__msg--bot p:last-child { margin-bottom: 0; }
.chat__msg--bot ul { margin: 0 0 calc(var(--u) * 2); padding-left: 20px; }
.chat__msg--bot code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-s);
  padding: 0 4px;
}
.chat__msg--bot a { color: var(--fg); text-decoration: underline; }
.chat__msg--bot .chat__tablewrap { overflow-x: auto; margin: 0 0 calc(var(--u) * 2); }
.chat__msg--bot table { border-collapse: collapse; font-size: 13px; background: var(--surface); }
.chat__msg--bot th, .chat__msg--bot td { border: 1px solid var(--line-solid); padding: 4px 8px; text-align: left; }
.chat__msg--bot th { font-weight: 600; }

.chat__status { font-size: 13px; color: var(--muted); align-self: flex-start; }
.chat__status::after { content: '…'; }

.chat__form {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  font: inherit;
  font-size: 14px;
  padding: calc(var(--u) * 2);
  background: var(--bg);
  color: var(--fg);
}
.chat__input:focus { outline: none; border-color: var(--muted); }
.chat__send {
  width: 42px;
  height: 42px;
  flex: none;
  border: none;
  border-radius: var(--radius-c);
  background: var(--fg);
  color: var(--surface);
  font-size: 18px;
  cursor: pointer;
}
.chat__send:disabled { opacity: 0.4; cursor: default; }

/* ---------- Страница «Документы» ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.docs {
  flex: 1;
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 16);
}
.docs > .container { max-width: 1120px; }

.docs__title {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.docs__lead {
  margin-top: calc(var(--u) * 3);
  max-width: 640px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}
.docs__total {
  margin-top: calc(var(--u) * 2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9b9b9b;
}

/* Поиск по серии */
.finder { margin-top: calc(var(--u) * 7); }

.finder__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  height: calc(var(--u) * 9);        /* 54px */
  padding: 0 calc(var(--u) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.finder__box:focus-within {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.finder__icon { display: flex; color: var(--muted); flex: none; }

.finder__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--fg);
}
.finder__input::placeholder { color: #9b9b9b; }

.finder__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  padding: 0;
  border: 0;
  border-radius: var(--radius-c);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.finder__clear:hover { background: #ededed; color: var(--fg); }

.finder__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: calc(var(--u)) 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
.finder__group {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5) calc(var(--u) * 0.5);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b9b9b;
}
.finder__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  font-size: 15px;
  cursor: pointer;
}
.finder__opt:hover,
.finder__opt[aria-selected="true"] { background: var(--bg); }
.finder__opt-count { flex: none; font-size: 12px; color: var(--muted); }
.finder__opt--free { border-top: 1px solid var(--line); margin-top: calc(var(--u)); padding-top: calc(var(--u) * 2); }
.finder__opt--free .finder__opt-label { color: var(--muted); }
.finder__none {
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  font-size: 14px;
  color: var(--muted);
}

.finder__quick {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  margin-top: calc(var(--u) * 3);
}
.chip {
  height: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 2);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-c);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--nav);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { border-color: var(--muted); color: var(--fg); }
.chip.is-active { background: var(--fg); border-color: var(--fg); color: var(--surface); }

.docs__state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 4);
  font-size: 14px;
  color: var(--muted);
}
.docs__reset {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.docs__reset:hover { color: var(--muted); }

/* Разделы-гармошка */
.docs__sections {
  margin-top: calc(var(--u) * 6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.docs__sections.is-ready { opacity: 1; transform: none; }

.sec { border-top: 1px solid var(--line-solid); }
.sec:last-child { border-bottom: 1px solid var(--line-solid); }
.sec.is-empty { display: none; }

.sec__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  width: 100%;
  padding: calc(var(--u) * 3.5) 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  color: var(--fg);
  cursor: pointer;
}
.sec__head:hover .sec__title { color: var(--muted); }
.sec__chev { display: flex; flex: none; color: var(--muted); transition: transform 0.25s ease; }
.sec.is-open .sec__chev { transform: rotate(90deg); }
.sec__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.15s ease;
}
.sec__count { flex: none; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

.sec__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.sec.is-open .sec__body { grid-template-rows: 1fr; }
.sec__inner { overflow: hidden; min-height: 0; }
.sec__hint {
  padding-bottom: calc(var(--u) * 3);
  font-size: 14px;
  color: var(--muted);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 5);
}

.card {
  position: relative;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.card.is-hidden { display: none; }
.card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.card:focus-within { border-color: var(--muted); }

.card__main {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  width: 100%;
  padding: calc(var(--u) * 4);
}
/* Растягиваем область клика на всю карточку */
.card__main::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }

.card__icon { display: flex; color: var(--fg); }
.card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.5;
}
.card__desc { font-size: 13px; line-height: 1.54; color: var(--muted); }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: calc(var(--u));
}
.tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-c);
  background: #e9f4ff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1;
  color: #005ff2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tag:hover { background: #d3e8ff; }
.tag.is-active { background: #005ff2; color: #fff; }
.tag--muted { background: #f2f2f2; color: var(--muted); }
.tag--muted:hover { background: #e8e8e8; }
.tag--muted.is-active { background: var(--fg); color: var(--surface); }

/* Хвост длинного списка серий прячем под «+N» */
.card__tags:not(.is-open) .tag--extra { display: none; }
.card__tags.is-open .tag--more { display: none; }
.tag--more { background: #f2f2f2; color: var(--muted); font-family: var(--font-mono); }
.tag--more:hover { background: #e8e8e8; color: var(--fg); }

.card__meta { font-family: var(--font-mono); font-size: 11px; color: #9b9b9b; }

.card__open {
  position: absolute;
  z-index: 2;
  top: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.card:hover .card__open,
.card__open:focus-visible { opacity: 1; }
.card__open:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.docs__empty {
  margin: calc(var(--u) * 8) auto 0;
  max-width: 520px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.docs__error { font-size: 15px; color: #b3261e; }

.docs__foot {
  margin-top: calc(var(--u) * 10);
  padding: calc(var(--u) * 6);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: 12px;
  text-align: center;
}
.docs__foot-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.docs__foot-text {
  margin-top: calc(var(--u) * 1.5);
  font-size: 14px;
  color: var(--muted);
}
.docs__foot-btn { margin-top: calc(var(--u) * 3); }

/* ---------- Техническая библиотека ---------- */
.lib {
  flex: 1;
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 16);
}
.lib > .container { max-width: 1320px; }

.lib__title {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.lib__lead {
  margin-top: calc(var(--u) * 3);
  max-width: 640px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}
.lib__total {
  margin-top: calc(var(--u) * 2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9b9b9b;
}

.lib__body {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 7);
}

/* Рельс: тип + серии */
.lib-rail {
  flex: none;
  width: 216px;
  position: sticky;
  top: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  max-height: calc(100vh - var(--u) * 8);
}
.lib-rail__block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Блок «Серии»: занимает весь остаток высоты рельса и прокручивается САМ —
   без этого длинный список (29 серий) не помещался в max-height рельса и
   просто вываливался за нижний край экрана без возможности прокрутки (рельс
   sticky, но overflow-y:auto на .lib-rail__series бездействовал: высота блока
   равнялась высоте контента, скроллить было нечего). min-height:0 обязателен —
   без него флекс-потомок не сжимается меньше своего контента и оверфлоу не
   включается. На ≤900px .lib-rail переходит на flex-direction:row и это правило
   не мешает (см. медиа-запрос ниже, где .lib-rail__series получает свой
   фиксированный max-height). */
.lib-rail__block--scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.lib-rail__label {
  padding: 0 calc(var(--u) * 2) calc(var(--u));
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b9b9b;
}
.lib-rail__series {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 2px;
  overflow-y: auto;
  padding-right: 2px;
}
.lib-rail__sep {
  height: 1px;
  flex: none;
  background: var(--line-solid);
  margin: calc(var(--u) * 0.5) 0;
}
.lib-rail__btn {
  display: flex;
  align-items: center;
  gap: calc(var(--u));
  min-height: calc(var(--u) * 6);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border: 0;
  border-radius: var(--radius-m);
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  color: var(--nav);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lib-rail__btn:hover { background: var(--surface); color: var(--fg); }
.lib-rail__btn.is-active { background: var(--fg); color: var(--surface); }

/* Поиск */
.lib-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  height: calc(var(--u) * 9);
  padding: 0 calc(var(--u) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lib-search:focus-within {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.lib-search__icon { display: flex; color: var(--muted); flex: none; }
.lib-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--fg);
}
.lib-search__input::placeholder { color: #9b9b9b; }
.lib-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  padding: 0;
  border: 0;
  border-radius: var(--radius-c);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lib-search__clear:hover { background: #ededed; color: var(--fg); }

.lib-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 3);
  font-size: 14px;
  color: var(--muted);
}
.lib-state__reset {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lib-state__reset:hover { color: var(--muted); }

/* Результаты */
.lib-results {
  margin-top: calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lib-results.is-ready { opacity: 1; transform: none; }

.lib-group.is-empty { display: none; }
.lib-group__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--line-solid);
  margin-bottom: calc(var(--u) * 4);
}
.lib-group__title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.lib-group__count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: calc(var(--u) * 3);
}

.lib-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: 12px;
  padding: calc(var(--u) * 4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.lib-card.is-hidden { display: none; }
.lib-card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.lib-card:focus-visible { border-color: var(--muted); }

.lib-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-c);
  background: #f2f2f2;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--muted);
}
.lib-card__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.lib-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  /* 4 строки, не 2: с тегами признаков (тип · рекуператор · нагрев · расход,
     см. buildCardTags() в library.js) у самых насыщенных карточек (UniMAX и
     т.п., до 77 символов) текст на самой узкой карточке сетки (261px — пол
     minmax() в .lib-grid, встречается при ширине окна около 1130–1150px)
     занимает все четыре строки. При двух-трёх строках обрезался бы как раз
     диапазон расхода, который по брифу должен быть виден всегда. */
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-card__meta {
  margin-top: auto;
  padding-top: calc(var(--u));
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9b9b9b;
}

.lib-empty {
  margin: calc(var(--u) * 8) auto 0;
  max-width: 520px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* Карточка серии /library/<id>, комплектующего /library/parts/<id> и автоматики
   /library/automation/<id> — рельс и результаты общие с /library (.lib, .lib__body, .lib-rail*) */
.lib-main.unit, .lib-main.part, .lib-main.automation { flex: 1 1 0%; min-width: 0; width: 100%; }

.unit-empty { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Заметка внутри «Назначения» (абзац исходника вида «> текст») — например,
   пояснение, что SRC-500/2 или TPC не закреплены за конкретной серией. */
.unit-note {
  border-left: 2px solid var(--line-solid);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  background: var(--surface);
  color: var(--muted);
}

/* Хлебные крошки */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: calc(var(--u) * 4);
}
.crumbs a { color: var(--muted); transition: color 0.15s ease; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--fg); font-weight: 500; }
.crumbs__sep { color: #c8c8c8; }

/* Заголовок серии */
.unit-hero { margin-bottom: calc(var(--u) * 5); }
.unit-hero h1 {
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.unit-hero__sub {
  margin-top: calc(var(--u) * 2);
  max-width: 680px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* Переключатель типоразмера */
.size-switch {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 6);
}
.size-switch button {
  height: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 2.5);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-c);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.size-switch button:hover { border-color: var(--muted); }
.size-switch button.is-active { background: var(--fg); color: var(--surface); border-color: var(--fg); }

/* Коммерческий блок */
.unit-commerce {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 4);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: 12px;
  margin-bottom: calc(var(--u) * 6);
}
.unit-liq {
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: var(--radius-m);
  background: #fdecea;
  color: #b3261e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.unit-commerce__row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); }
.unit-commerce__row--meta { font-size: 14px; color: var(--muted); }

.unit-code {
  position: relative;
  height: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 2.5);
  border: 1px dashed var(--line-solid);
  border-radius: var(--radius-m);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.unit-code:hover { border-color: var(--muted); }
.unit-code::after {
  content: 'Скопировано';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  padding: 4px 10px;
  border-radius: var(--radius-s);
  background: var(--fg);
  color: var(--surface);
  font-family: var(--font);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.unit-code.is-copied::after { opacity: 1; transform: translate(-50%, 0); }

.unit-price { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.unit-price--conflict { max-width: 380px; font-size: 14px; font-weight: 400; line-height: 1.4; color: #b3261e; }
/* A9 аудита библиотеки: остаток при конфликте НС-кода — тот же тон
   предупреждения, что и у цены (.unit-price--conflict); своего font-size не
   нужно — .unit-commerce__row--meta (родитель .unit-stock) уже даёт 14px. */
.unit-stock--conflict { color: #b3261e; }

.unit-status {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-c);
  background: #f2f2f2;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.unit-status--ok { background: #e6f4ea; color: #1e7a34; }
.unit-status--order { background: #eef2fb; color: #2952a3; }
.unit-status--liq { background: #fdecea; color: #b3261e; }

/* Плитки ключевых цифр */
.unit-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: calc(var(--u) * 2.5);
  margin-bottom: calc(var(--u) * 7);
}
.unit-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: calc(var(--u) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: 10px;
}
.unit-tile__label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.unit-tile__value { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* Разделы карточки */
.unit-section { margin-top: calc(var(--u) * 8); }
.unit-section h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: calc(var(--u) * 3); }
.unit-section h3 { font-size: 16px; font-weight: 600; margin: calc(var(--u) * 4) 0 calc(var(--u) * 2); }
.unit-section p { max-width: 760px; font-size: 15px; line-height: 1.6; margin-bottom: calc(var(--u) * 2); }
.unit-section__hint { margin-top: calc(var(--u) * -1.5); margin-bottom: calc(var(--u) * 3); font-size: 13px; color: var(--muted); }
/* Ссылки внутри текста разделов (например, «назначение» с упоминанием другой
   карточки автоматики) — иначе базовое a{color:inherit;text-decoration:none}
   делает их неотличимыми от обычного текста, см. task-6 review находка 4. */
.unit-section p a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.unit-section p a:hover { color: var(--muted); }

/* Таблица ТТХ колонками по типоразмерам */
/* Таблица ТТХ шире контейнера почти всегда (у CAU это 19 колонок — ярлык
   параметра плюс 18 типоразмеров, +3500 px за краем). Прокрутка работала и
   раньше, но признака её не было: на десктопе полоса прокрутки в Windows
   всплывает только при наведении, и колонка просто обрывалась по краю — со
   стороны это читается как сломанная вёрстка. Ниже — приём «теней
   прокрутки» на чистом CSS: два слоя `local` едут вместе с содержимым и
   закрывают тень у того края, до которого уже долистали, два слоя `scroll`
   стоят на месте и эту тень рисуют. Работает без JS и без замера ширины.
   Из-за этого фон переехал с .spec-table на обёртку: непрозрачный фон
   таблицы перекрывал бы слои. Ячейкам, которым фон нужен свой (липкий
   первый столбец, активная колонка), он задан отдельно и ниже по каскаду. */
.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-solid);
  border-radius: 12px;
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--surface), transparent),
    linear-gradient(to left, var(--surface), transparent),
    linear-gradient(to right, rgba(0, 0, 0, 0.13), transparent),
    linear-gradient(to left, rgba(0, 0, 0, 0.13), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.spec-table th, .spec-table td {
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.spec-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table th:first-child, .spec-table td:first-child {
  position: sticky;
  left: 0;
  min-width: 220px;
  white-space: normal;
  font-weight: 500;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line-solid);
}
.spec-table th[data-index].is-active, .spec-table td[data-index].is-active { background: var(--bg); font-weight: 600; }
/* Модель без единой характеристики — одна ячейка на rowspan вместо колонки из «—».
   Без границы слева и с выравниванием по центру такая ячейка висела в пустоте:
   строки таблицы обрывались на предыдущей колонке, а текст оказывался посреди
   белого поля — колонка переставала читаться как колонка (см. /library/
   unimax-r-ce, типоразмер 1000 CE-A). Граница возвращает столбцу край,
   выравнивание по верху ставит текст на одну линию с первой строкой. */
.spec-table td.unit-empty {
  max-width: 240px;
  white-space: normal;
  vertical-align: top;
  border-left: 1px solid var(--line);
}

/* A3 аудита: сноска звёздочки под таблицей ТТХ — готовый текст для посетителя
   («не сверено с паспортом» либо «максимум при нулевом напоре», см.
   tools/build-library.py: NOTE_TEXT_UNVERIFIED/NOTE_TEXT_ZERO_PRESSURE_MAX),
   рендерится в render-library-pages.py: render_specs_notes(). Раньше сноска
   терялась при выгрузке в library.json целиком — посетитель видел «450 *» без
   единого объяснения, что значит знак; после этого сноску по ошибке довели до
   страницы дословной копией служебной пометки составителя базы (с именем
   файла-паспорта и словами «исходный файл») — оба дефекта исправлены. */
.unit-specs__note {
  margin-top: calc(var(--u) * 2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.unit-specs__note + .unit-specs__note { margin-top: calc(var(--u) * 1); }
.unit-specs__note b { color: var(--fg); font-weight: 600; }

/* Обвязка и фильтры — переиспользуют .results__table с /components */
.unit-kit__foot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
.unit-kit__total-label { font-size: 14px; color: var(--muted); }
.unit-kit__total-label b { margin-left: 4px; font-size: 18px; font-weight: 600; color: var(--fg); }
.results__table .c-size { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Автоматика */
.unit-automation { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); padding: 0; list-style: none; }
.unit-automation a {
  display: inline-flex;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  background: var(--surface);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius-m);
  font-size: 14px;
  transition: border-color 0.15s ease;
}
.unit-automation a:hover { border-color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* Документы */
.unit-doclist { display: flex; flex-direction: column; border-top: 1px solid var(--line-solid); }
.unit-doclist__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u));
  border-bottom: 1px solid var(--line-solid);
  transition: background-color 0.15s ease;
}
.unit-doclist__item:hover { background: var(--surface); }
.unit-doclist__title { flex: 1 1 260px; font-size: 15px; font-weight: 500; }
.unit-doclist__desc { flex: 2 1 320px; font-size: 13px; color: var(--muted); }
.unit-doclist__meta { flex: none; font-family: var(--font-mono); font-size: 11px; color: #9b9b9b; white-space: nowrap; }

/* ---------- Адаптив ---------- */
@media (max-width: 1280px) {
  .hero__inner { gap: calc(var(--u) * 6); }
  .hero__title { font-size: 56px; }
  .hero__list { width: 320px; }
}

@media (max-width: 992px) {
  .hero { padding: calc(var(--u) * 10) 0; }
  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--u) * 10);
  }
  .hero__logo { width: 100%; justify-content: flex-start; }
  .hero__logo img { width: min(100%, 480px); }
  .hero__list { width: auto; padding: 0; }

  .nav {
    display: none;
    position: absolute;
    top: calc(var(--u) * 11);
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: calc(var(--u) * 2) 0;
  }
  .nav.is-open { display: flex; }
  .nav__link { padding: calc(var(--u) * 2) calc(var(--u) * 4); }
  .header__inner { position: relative; }
  .burger { display: flex; margin-left: calc(var(--u) * 2); }
  .btn-nd { margin-left: auto; }
}

@media (max-width: 900px) {
  .notfound__inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: calc(var(--u) * 8);
  }
  .notfound__art { flex: none; width: 100%; justify-content: flex-start; }
  .notfound__art img { max-width: 380px; }
  .notfound__title { font-size: 38px; }
  .notfound__lead { font-size: 17px; }

  .picker__title { font-size: 40px; }
  .picker { padding: calc(var(--u) * 9) 0 calc(var(--u) * 12); }
  .picker__field { width: 100%; max-width: 420px; }
  .picker__form { flex-direction: column; align-items: stretch; }
  .picker__submit { width: 100%; max-width: 420px; align-self: center; }
  .picker__form > .picker__field { align-self: center; }

  /* таблица → карточки: заголовки колонок уходят в подписи строк */
  .results__wrap { overflow-x: visible; border-top: none; }
  .results__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .results__table tbody tr {
    display: block;
    border: 1px solid var(--line-solid);
    border-radius: var(--radius-m);
    background: var(--surface);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
    margin-bottom: calc(var(--u) * 2);
  }
  .results__table tbody td {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u)) 0;
    border-bottom: none;
    text-align: right;
  }
  .results__table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    flex: none;
  }
  .results__table tbody td.c-name {
    display: block;
    min-width: 0;
    font-weight: 500;
    text-align: left;
    padding-bottom: calc(var(--u) * 2);
  }
  .results__table tbody td.c-name::before { display: none; }
  .results__table tfoot { display: block; }
  .results__table tfoot tr { display: flex; justify-content: space-between; border-radius: var(--radius-m); }
  .results__table tfoot td.c-name { display: none; }
  .results__table tfoot td { padding: calc(var(--u) * 3); }

  .docs { padding: calc(var(--u) * 8) 0 calc(var(--u) * 12); }
  .docs__title { font-size: 40px; }
  .docs__lead { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .card__open { opacity: 1; }

  .lib { padding: calc(var(--u) * 8) 0 calc(var(--u) * 12); }
  .lib__title { font-size: 40px; }
  .lib__lead { font-size: 16px; }
  .lib__body { flex-direction: column; gap: calc(var(--u) * 5); }
  .lib-rail {
    width: 100%;
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .lib-rail__block { flex: 1 1 240px; }
  .lib-rail__series { max-height: 220px; }
  .lib-rail__sep { display: none; }
  .lib-grid { grid-template-columns: 1fr; }

  .unit-hero h1 { font-size: 34px; }
  .unit-commerce { padding: calc(var(--u) * 3); }
  .unit-price { font-size: 20px; }
  .unit-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .unit-kit__foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .hero__title { font-size: 46px; }
  .hero__subtitle { font-size: 18px; }
  .chat { width: 100%; border-left: none; }
  .picker__title { font-size: 32px; }

  .docs__title { font-size: 32px; }
  .docs__lead { font-size: 15px; }
  .finder__box { height: calc(var(--u) * 8); }
  .finder__input { font-size: 16px; }
  .sec__title { font-size: 16px; }
  .card__main { padding: calc(var(--u) * 3); }
  .docs__foot { padding: calc(var(--u) * 4); }

  .lib__title { font-size: 32px; }
  .lib__lead { font-size: 15px; }
  .lib-search { height: calc(var(--u) * 8); }
  .lib-search__input { font-size: 16px; }
  .lib-rail__block { flex: 1 1 100%; }
  .lib-group__title { font-size: 17px; }
  .lib-card { padding: calc(var(--u) * 3); }

  .unit-hero h1 { font-size: 28px; }
  .unit-hero__sub { font-size: 15px; }
  .size-switch button { font-size: 13px; }
  .unit-commerce__row { gap: calc(var(--u) * 2); }
  .unit-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .spec-table th, .spec-table td { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); font-size: 13px; }
  .spec-table th:first-child, .spec-table td:first-child { min-width: 160px; }
}