/* Единый вид с «Расчётами КП» (29.10.2026, одобрено Данилой по прототипу Проверка/UX/Единый вид (29.10)): шрифт Inter (файл отдаёт
   сервер — у всех одинаковый), токены цвета по роли, те же значения, что в kp/public/app.css; белые шапки блоков, одна синяя главная
   кнопка, недоступные — явным серым, рамка поля --line-strong, тёмно-синий --navy только у итога. Раскладка и высоты полей 29 / 24
   не менялись. Inter шире Segoe UI на 6–8 % — базовый кегль 14 (был 15), иначе подписи и плашки переносились. */
@font-face { font-family: Inter; font-weight: 100 900; src: url(/Inter.ttf) format('truetype'); font-display: swap; }
:root {
  --bg: #f7f8fa; --panel: #ffffff; --surface-2: #f1f3f7; --ink: #1f2430; --muted: #5b6475; --line: #e5e8ee; --line-strong: #c3cad8;
  --accent: #0672cb; --accent-hover: #055fa9; --accent-ink: #ffffff; --accent-soft: #e8f1fb; --accent-text: #0668b8; --navy: #2c4776;   /* --accent-text: синий текст на голубой подложке, 5,0 : 1 (сам --accent там 4,3 : 1) */
  --ok: #176c40; --ok-bg: #e8f6ee; --warn: #a15c07; --warn-bg: #fff6e5; --err: #b42318; --err-bg: #fdeceb; --info-bg: #e8f1fb;
  --dis-bg: #e9edf4; --dis-ink: #7b8396; --knob: #ffffff; --note-bg: #fffdf3; --manual-line: #e3a008; --toast-bg: #1f2430; --toast-ink: #ffffff;
  --focus-ring: 0 0 0 3px rgba(6, 114, 203, .18);
  --radius: 8px; --gap: 12px; --field-h: 32px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06); --sh-2: 0 8px 24px rgba(16, 24, 40, .12);
  /* стрелка списка и пометка «авто» — картинки, цвет под тему */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6475' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --auto-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Ctext x='0' y='11' font-family='Inter,system-ui,sans-serif' font-size='12' fill='%237b8396'%3E%D0%B0%D0%B2%D1%82%D0%BE%3C/text%3E%3C/svg%3E");
  font-family: Inter, Roboto, Arial, sans-serif; font-size: 14px; color: var(--ink); font-feature-settings: 'tnum' 1, 'cv11' 1;
}
/* тёмная тема: те же роли, значения подобраны к синему КП (у «Расчётов КП» тёмной темы нет) */
@media (prefers-color-scheme: dark) {
  :root { --bg: #111418; --panel: #1a1e25; --surface-2: #232831; --ink: #e6e9ee; --muted: #9aa3b2; --line: #2c323c; --line-strong: #3f4856;
    --accent: #5aa0ea; --accent-hover: #79b3f0; --accent-ink: #0d1117; --accent-soft: #1b2d47; --accent-text: #5aa0ea; --navy: #a7c6ee;
    --ok: #5ccb8f; --ok-bg: #11301f; --warn: #e8b04a; --warn-bg: #3a2b10; --err: #ff8a80; --err-bg: #3a1417; --info-bg: #1b2d47;
    --dis-bg: #232831; --dis-ink: #6f7889; --knob: #e6e9ee; --note-bg: #22211a; --manual-line: #a0772a; --toast-bg: #e6e9ee; --toast-ink: #111418;
    --focus-ring: 0 0 0 3px rgba(90, 160, 234, .28);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35); --sh-2: 0 8px 24px rgba(0, 0, 0, .5);
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --auto-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Ctext x='0' y='11' font-family='Inter,system-ui,sans-serif' font-size='12' fill='%239aa3b2'%3E%D0%B0%D0%B2%D1%82%D0%BE%3C/text%3E%3C/svg%3E"); }
}
* { transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s; }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
b, strong { font-weight: 600; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
[hidden] { display: none !important; }
h1 { font-size: 20px; margin: 0 0 8px; }

/* Все поля ввода и кнопки рядом с ними — одной высоты и одного вида,
   в какой бы группе они ни стояли. */
button, input, select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 6px; height: var(--field-h);
  padding: 0 10px; transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: #8a92a6; font-style: normal; }
/* Кнопки трёх уровней (как в КП): главная синяя — одна на экран («Сохранить»), вторичная белая с рамкой (.ghost),
   текстовая (.linkbtn). Недоступная — явным серым, а не прозрачностью: раньше читалась как сломанная (контраст 1,9 : 1). */
button { cursor: pointer; font-weight: 500; box-shadow: var(--shadow); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
button.ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }
input[type=date] { min-width: 128px; }
button:hover { border-color: var(--line-strong); }
button.small { height: 26px; padding: 0 8px; font-size: 13px; }
button:disabled, button.ghost:disabled, button.primary:disabled { opacity: 1; background: var(--dis-bg); border-color: var(--dis-bg); color: var(--dis-ink); box-shadow: none; cursor: default; }
input, select { width: 100%; min-width: 0; }
select { appearance: none; padding-right: 26px; cursor: pointer;
  background-image: var(--arrow); background-size: 14px 14px; background-repeat: no-repeat; background-position: right 8px center; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* flex-shrink: без него в узкой колонке (Металлоконструкция, Доставка до заказчика)
   квадратик галочки сминался почти до нуля — сам текст занимал всё место. */
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-width: 16px; flex-shrink: 0;
  margin: 0 6px 0 0; padding: 0; accent-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.row > *, .opt > *, .variant > * { min-width: 0; }
/* Галочка-«таблетка»: подпись в скруглённой рамке — больше места под текст,
   видно с первого взгляда, что отмечено, а не только тонкая обводка квадрата. */
label.check { flex-direction: row; align-items: center; color: var(--ink); font-size: 13px; height: auto;
  overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px 5px 8px;
  background: var(--panel); transition: border-color .12s, background .12s; }
label.check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
label.check:hover { border-color: var(--accent); }
.muted { color: var(--muted); }
.error-text { color: var(--err); min-height: 1em; }
/* Поле с расчётным значением: пока менеджер не кликнул — число серое и курсивом,
   это подсказка «посчитано само»; после клика становится обычным. */
input.auto-value { color: var(--muted); font-style: italic; border-style: dashed; }
input.auto-value:focus { color: var(--ink); font-style: normal; border-style: solid; }

.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: min(360px, 100%); display: grid; gap: 12px; }

.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 52px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-size: 17px; font-weight: 600; color: var(--ink); }
#calcTitle { font-size: 13px; }
/* отмена и возврат — значки без рамки; недоступные почти не видны, это верно */
.topbar button.icon { border: 0; background: none; box-shadow: none; color: var(--muted); width: 32px; padding: 0; }
.topbar button.icon:hover { background: var(--surface-2); }
.topbar button.icon:disabled { background: none; border: 0; color: var(--dis-ink); }
.spacer { flex: 1; }

.layout { display: grid; grid-template-columns: 1fr 420px; gap: 16px; padding: 16px; align-items: start; }
@media (min-width: 901px) { .results { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; grid-template-columns: 1fr; } }
@media (max-width: 1300px) { .layout { grid-template-columns: 1fr 340px; } }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 12px 12px 72px; }
  .topbar { padding: 8px 12px; } .topbar .muted { display: none; }
}
.mobilebar { display: none; }
@media (max-width: 900px) {
  .mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; gap: 8px; overflow-x: auto;
    padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--line); }
  .mobilebar button { white-space: nowrap; }
}

.card, .form fieldset { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
/* Форма — плотная раскладка в несколько колонок (сколько влезает), поля не прячутся
   за скролл: короткие разделы (Клиент, Экран) встают рядом с длинными. */
.form { column-width: 400px; column-gap: 14px; min-width: 0; }
.form fieldset { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 14px; display: grid; gap: 8px; min-width: 0; width: 100%; }
.form, .results, .result { min-width: 0; }
select { text-overflow: ellipsis; }
@media (max-width: 640px) { .form { column-width: 100%; } }
/* Название блока — внутри карточки заголовком, а не врезкой в рамку: float выводит
   legend из рамки в обычный поток. Под ним тонкая черта — блоки читаются как карточки. */
.form fieldset { padding: 0 14px 14px; gap: 10px; }
.form legend { float: left; width: calc(100% + 28px); margin: 0 -14px 2px; padding: 10px 14px 9px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); background: var(--panel);   /* белая шапка, без синей полоски — как шапки таблиц в КП (29.10.2026) */
  border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; gap: 8px; }
.form legend + * { clear: both; }
.form fieldset:focus-within { border-color: var(--line-strong); }
.variant { background: color-mix(in srgb, var(--ink) 2%, var(--panel)); }
.sysline { font-size: 13px; background: var(--info-bg); border-radius: 6px; padding: 6px 10px; line-height: 1.35; }
.result h3 { font-size: 16px; line-height: 1.3; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; align-items: end; }
.row.two { grid-template-columns: 1fr 1fr; }
/* Колонки фиксированной ширины — поля рядом с галочками одного размера
   в любой строке и в любой группе, а не «сколько влезло» под каждую строку своё. */
.opt { display: grid; grid-template-columns: 1fr 84px 84px; gap: 6px; align-items: center; }
.opt input:not([type=checkbox]) { width: 100%; }
@media (max-width: 420px) { .opt { grid-template-columns: 1fr 80px 80px; } }
.hint { font-size: 12px; color: var(--muted); }
.variant { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 6px; }
.sysinfo { font-size: 12px; color: var(--muted); }
/* NovaStar H: своя карта к набору — список, количество, убрать */
.hx-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em auto; gap: 6px; align-items: center; margin-top: 6px; }

.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--gap); }
.result { display: grid; gap: 10px; align-content: start; }
.result h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.price-big { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Подпись слева — фиксированной ширины, чтобы «Приёмных карт», «Блоков питания»
   не переламывались посреди слова; переносится, если нужно, только значение справа. 158 px: «Мощность макс. / ср.» в Inter */
.kv { display: grid; grid-template-columns: 158px 1fr; gap: 5px 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kv .k { color: var(--muted); line-height: 1.3; }
.kv .v { text-align: right; line-height: 1.3; }
.checks { display: grid; gap: 6px; }
.check-err { background: var(--err-bg); color: var(--err); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.check-info { background: var(--info-bg); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.badge { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }
.sizes { display: flex; gap: 6px; flex-wrap: wrap; }
table.kp { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.kp td { border-top: 1px solid var(--line); padding: 4px 2px; }
table.kp td.n { text-align: right; white-space: nowrap; }
details summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 3px 0; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--panel); z-index: 10;
  border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.12); }
.drawer-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
#listBody { overflow: auto; padding: 8px 12px; display: grid; gap: 8px; }
.calc-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.calc-item:hover { border-color: var(--accent); }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 8px 14px; border-radius: 8px; z-index: 20; }

/* старый расчёт — другой курс */
.rate-note { margin: 0 0 14px; background: var(--info-bg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; break-inside: avoid; }
/* сравнение вариантов над карточками */
.cmp-card { padding: 8px 10px; overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.cmp th, table.cmp td { padding: 4px 6px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
table.cmp tr:first-child th { border-top: 0; }
table.cmp .k, table.cmp th:first-child { text-align: left; color: var(--muted); font-weight: 400; }
table.cmp a { color: var(--accent); text-decoration: none; font-weight: 600; }
.price-big.muted { font-size: 18px; color: var(--err); }
.opt-head { font-size: 12px; color: var(--muted); margin-bottom: -4px; }
.opt-head span { padding-left: 2px; }
.mobilebar button.danger { border-color: var(--err); color: var(--err); }

/* закупка и продажа построчно */
table.buy { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
table.buy th, table.buy td { padding: 3px 4px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
table.buy th { font-weight: 500; color: var(--muted); border-top: 0; }
table.buy td:first-child, table.buy th:first-child { text-align: left; white-space: normal; }
table.buy tr.tot td { font-weight: 700; border-top: 1.5px solid var(--ink); }

/* ---- Всё на одном экране: плотнее, галочки по две в ряд, пояснения — в «?» ---- */
:root { --field-h: 29px; }
label { gap: 2px; font-size: 12px; }
.form { column-gap: 12px; }
.form fieldset { padding: 0 12px 10px; gap: 6px; margin-bottom: 10px; grid-template-columns: 1fr 1fr; }
.form fieldset > * { grid-column: 1 / -1; }
.form fieldset > label.check { grid-column: auto; }
.form legend { width: calc(100% + 24px); margin: 0 -12px 0; padding: 6px 12px; font-size: 13px; }
label.check { padding: 3px 8px 3px 7px; font-size: 13px; min-height: var(--field-h); }
.variant { padding: 6px 8px; gap: 5px; }
.hint { font-size: 12px; line-height: 1.3; }
.opt { gap: 5px; }
select.mini { width: auto; height: 26px; font-size: 12px; font-weight: 400; padding: 0 22px 0 6px; margin-left: auto;
  background-position: right 6px center; color: var(--muted); }
.info { display: inline-grid; place-items: center; width: 20px; height: 20px; position: relative; border-radius: 50%; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-text); cursor: pointer; flex-shrink: 0; }
.info::after { content: ''; position: absolute; inset: -3px; }   /* область нажатия 26×26 */
.info:hover, .info:focus-visible { background: var(--accent); color: var(--accent-ink); outline: none; }
.tip { position: fixed; z-index: 60; max-width: 360px; padding: 10px 12px; border-radius: 8px; background: var(--ink); color: var(--panel);
  font-size: 13px; line-height: 1.45; white-space: pre-line; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.with-info { display: flex; align-items: center; gap: 6px; }
.with-info label.check { flex: 1; }
.vhead { display: flex; align-items: center; justify-content: space-between; }
button.x { height: 20px; padding: 0 7px; font-size: 14px; line-height: 1; }
.result { gap: 7px; }
.kv { gap: 3px 10px; }
.price-big { font-size: 24px; }

/* Разбор цены — широкая выдвижная панель вместо раскрывашек в узкой колонке */
.drawer-wide { width: min(980px, 100%); }
.drawer-wide .drawer-head { align-items: center; }
.price-mid { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.breakdown { overflow: auto; padding: 12px 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-content: start; }
.breakdown section { min-width: 0; }
.breakdown section.wide { grid-column: 1 / -1; order: -1; }
.breakdown h4 { margin: 0 0 6px; font-size: 14px; }
.breakdown .kv { grid-template-columns: 1fr auto; }
@media (max-width: 720px) { .breakdown { grid-template-columns: 1fr; } }
button.wide { width: 100%; justify-content: center; }

/* цены поставщика */
.prices-body { overflow: auto; padding: 10px 16px 20px; }
table.prices { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.prices th, table.prices td { padding: 4px 6px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.prices th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--panel); }
table.prices td.nm, table.prices td.note, table.prices th:nth-child(2), table.prices th:last-child { text-align: left; white-space: normal; }
table.prices td.note { color: var(--muted); font-size: 12px; max-width: 260px; }
table.prices td.nm a { color: var(--ink); text-decoration: none; }
table.prices td.nm a:hover { color: var(--accent); }
table.prices td.up { color: var(--err); }
table.prices td.down { color: var(--ok); }
table.prices tr.bad td { background: var(--err-bg); }

/* поле только для чтения (пиксели в экране) — как поле ввода, но без рамки-приглашения */
output.ro { display: flex; align-items: center; height: var(--field-h); padding: 0 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, var(--panel)); color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }

/* справочник — на всю ширину окна */
.drawer-full { width: min(1500px, 100%); }
.cat-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.cat-bar input { width: 220px; } .cat-bar select { width: 150px; }
.cat-body { overflow: auto; padding: 8px 16px 20px; }
table.cattab, table.catlog { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.cattab th, table.catlog th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 500; text-align: left; padding: 4px 6px; z-index: 1; }
table.cattab td, table.catlog td { border-top: 1px solid var(--line); padding: 3px 6px; vertical-align: middle; }
table.cattab td.nm { min-width: 230px; } table.cattab td.nm a { color: var(--ink); text-decoration: none; } table.cattab td.nm a:hover { color: var(--accent); }
table.cattab td.c { text-align: center; } table.cattab td.n { text-align: right; white-space: nowrap; }
table.cattab tr.off td { color: var(--muted); } table.cattab tr.off td.nm { text-decoration: line-through; }
table.cattab td.edited { background: color-mix(in srgb, #f5b400 16%, var(--panel)); }
/* С Inter вкладка «Модули» вылезала за 1920 на 244 px (29.10.2026): поля — по наименьшей ширине и растут, где в таблице есть место
   («260 000 000» у систем); угол обзора чуть шире, имя для отображения и примечание уже — название позиции в две строки, не в три */
input.cell { height: 26px; font-size: 13px; padding: 0 5px; width: 100%; min-width: 80px; } input.cell.wide { min-width: 150px; }
input.cell.hub { min-width: 60px; } input.cell.angle { min-width: 190px; } input.cell.dname { min-width: 128px; } input.cell.note { min-width: 120px; }
.muted.small { font-size: 12px; }

/* справочник отдельной вкладкой: только он, на всю страницу */
body.catalog-page .layout, body.catalog-page .mobilebar { display: none; }
body.catalog-page #catPanel, body.catalog-page #pricesPanel, body.catalog-page #usersPanel { position: static; width: 100%; height: calc(100vh - 56px); box-shadow: none; border: 0; }
.badge.new { background: color-mix(in srgb, #f5b400 22%, transparent); color: #8a6100; }
th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--accent); }

/* кнопка в строке полей («Курс ЦБ») — той же высоты и по той же линии, что поля рядом */
button.field-btn { height: var(--field-h); align-self: end; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.row > button { align-self: end; }

/* «Стандартно: …» — опции, которые почти не меняют, одной строкой (идея A, 27.09) */
.std { border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: grid; gap: 6px; }
.std.changed { border: 1px solid #d99a00; background: color-mix(in srgb, #f5b400 7%, var(--panel)); }
.std-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.std-h > span:first-child { flex: 1; min-width: 0; color: var(--muted); }
.std-h b { color: var(--ink); font-weight: 600; }
.tag { display: inline-block; border-radius: 99px; padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
button.linkbtn { height: auto; border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; font-weight: 500; }
button.linkbtn:hover { text-decoration: underline; }
/* сообщение с «Отменить» (идея E) */
.toast { display: flex; align-items: center; gap: 12px; }
.toast button { height: auto; border: 0; background: none; color: #8fb3ff; font-weight: 600; padding: 0; }
.toast .kbd { font-size: 12px; opacity: .6; }

/* кнопки-сегменты */
/* как в КП (29.10.2026): белая рамка, кнопки через тонкую линию, выбранная — на голубой подложке синим */
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0; gap: 0; overflow: hidden; }
.seg button { height: 26px; border: 0; background: transparent; color: var(--muted); border-radius: 0; padding: 0 10px; font-size: 13px; font-weight: 500; box-shadow: none; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }

/* предпросмотр КП справа (идея F, 27.09): форма остаётся рядом, правки видны сразу */
.drawer-kp { z-index: 4; width: min(860px, 56vw); box-shadow: -6px 0 18px rgba(0,0,0,.10); }
body.kp-open .layout { padding-right: calc(min(860px, 56vw) + 16px); }
body.kp-open .results { display: none; }
body.kp-open .layout { grid-template-columns: 1fr; }
.drawer-kp .drawer-head { align-items: center; }
.kp-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ink) 8%, var(--bg)); padding: 12px; gap: 8px; }
#kpFrame { flex: 1; width: 100%; border: 0; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
@media (max-width: 900px) { .drawer-kp { width: 100%; } body.kp-open .layout { padding-right: 12px; } }

/* было / стало при открытии старого расчёта (идея D, 27.09) */
.price-diff { display: grid; gap: 6px; border-color: #d99a00; background: color-mix(in srgb, #f5b400 8%, var(--panel)); font-size: 14px; }
.price-diff .up { color: var(--err); font-weight: 600; } .price-diff .down { color: var(--ok); font-weight: 600; }
.pd-tab { border-collapse: collapse; } .pd-tab td { padding: 2px 10px 2px 0; vertical-align: top; } .pd-tab td.k { color: var(--muted); white-space: nowrap; }
.pd-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-why { display: grid; gap: 6px; margin: 6px 0 10px; } .pd-why ul { margin: 2px 0; padding-left: 18px; }
.pd-why blockquote { margin: 0; padding: 6px 10px; background: var(--panel); border-left: 3px solid var(--muted); user-select: text; }
table.diff th:first-child { text-align: left; }
.pd-why table.diff tr.tot td { border-top: 2px solid var(--line); }
body.partner .pd-why-box { display: none !important; }
.price-fixed { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); font-size: 14px; }
.fixed-badge { font-size: 12px; color: var(--accent); font-weight: 600; }
table.diff { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 4px; }
table.diff th { font-weight: 500; color: var(--muted); text-align: right; padding: 3px 4px; }
table.diff td { padding: 3px 4px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.diff td:first-child { text-align: left; white-space: normal; }

/* «уточнить у руководителя» (идея G, 27.09) */
:root { --ask: #7b4ddb; --ask-soft: #f1ebfd; }
@media (prefers-color-scheme: dark) { :root { --ask: #b69bff; --ask-soft: #271e40; } }
.askwrap { position: relative; display: block; min-width: 0; }
.askwrap > input { padding-right: 30px; }
.askbtn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px !important; padding: 0 !important; border-radius: 50% !important;
  font-size: 12px !important; line-height: 1; border: 1px solid transparent !important; background: transparent !important; color: var(--muted) !important; opacity: .7; }
.askwrap:hover .askbtn, .askbtn:focus-visible { opacity: 1; border-color: var(--line) !important; }
.askwrap.asked > input { border-color: var(--ask); background: var(--ask-soft); }
.askwrap.asked .askbtn { opacity: 1; background: var(--ask) !important; color: #fff !important; font-weight: 700; }
.askwrap.answered > input { border-color: var(--ok); }
.askwrap.answered .askbtn { opacity: 1; background: color-mix(in srgb, var(--ok) 15%, transparent) !important; color: var(--ok) !important; font-weight: 700; }
.tag.ask { background: var(--ask-soft); color: var(--ask); }
#btnList.asking { border-color: var(--ask); color: var(--ask); font-weight: 600; }
.ask-note { border-color: var(--ask); background: var(--ask-soft); font-size: 14px; }

/* система у варианта и схема экрана (идея C, 27.09) */
.sysfit { font-size: 13px; border-radius: 7px; padding: 4px 8px; }
.sysfit.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.sysfit.bad { background: var(--err-bg); color: var(--err); font-weight: 500; }
.sysfit:empty { display: none; }
details.scheme summary { font-size: 14px; }
.sch-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 8px 0 6px; }
.sch-svg svg { display: block; width: 100%; height: auto; }
.sch-big { padding: 8px 16px 20px; overflow: auto; }
.sch-big .sch-svg svg { max-height: calc(100vh - 200px); }

/* ===================== Часть 2 — мелкие улучшения (27.09.2026) ===================== */
/* 1. Строки через одну: списки значений и таблицы результата */
.kv { gap: 0; }
.kv > span { padding: 3px 6px; }
.kv > span:nth-child(4n+1), .kv > span:nth-child(4n+2) { background: color-mix(in srgb, var(--ink) 3.5%, var(--panel)); }
.kv > span.k { border-radius: 5px 0 0 5px; } .kv > span.v { border-radius: 0 5px 5px 0; }
table.kp tr:nth-child(even) td, table.cmp tr:nth-child(even) td, table.buy tr:nth-child(even) td,
table.diff tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3.5%, var(--panel)); }
.form fieldset > .opt:nth-child(even of .opt) { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); border-radius: 8px; }
.form fieldset > .opt { padding: 2px 4px; margin: 0 -4px; }

/* 2. Переключатели вместо галочек-таблеток: подпись слева, переключатель справа */
label.check { border: 0; border-radius: 8px; background: transparent; padding: 3px 4px; justify-content: space-between; gap: 8px; }
label.check:has(input:checked) { background: transparent; }
label.check:hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-color: transparent; }
label.check input[type=checkbox] { order: 2; appearance: none; -webkit-appearance: none; width: 32px; min-width: 32px; height: 18px; margin: 0;
  border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; border: 0; }
label.check input[type=checkbox]::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--knob); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
label.check input[type=checkbox]:checked { background: var(--accent); }
label.check input[type=checkbox]:checked::after { transform: translateX(14px); background: var(--accent-ink); }
label.check input[type=checkbox]:disabled { opacity: .4; cursor: default; }
label.check input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
label.check:has(input:not(:checked)) { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { label.check input[type=checkbox], label.check input[type=checkbox]::after { transition: none; } }

/* пересчёт идёт — результаты чуть бледнеют, а не мигают пустотой */
.results.busy { opacity: .55; transition: opacity .15s .15s; }

/* строки «галочка + поля»: кол-во узкое, сумма широкая — «113 000» и «?» помещаются (жалоба 27.09) */
.opt { grid-template-columns: minmax(0, 1fr) 64px 118px; }
@media (max-width: 420px) { .opt { grid-template-columns: minmax(0, 1fr) 56px 104px; } }

/* 3. поле с кнопками-сегментами — оформлено как подпись над полем */
.field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 0; }
.field .seg { align-self: flex-start; max-width: 100%; }
.form .seg { height: var(--field-h); align-items: stretch; }
.form .seg button { height: auto; font-size: 13px; padding: 0 9px; }
.seg.mini { height: 30px; margin-left: auto; font-weight: 400; }
.seg.mini button { height: 24px; font-size: 12px; padding: 0 8px; }

/* 4. единица внутри поля, «−/+» у количества */
.unit { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); height: var(--field-h); min-width: 0; overflow: hidden; }
.unit:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.unit > input { border: 0; height: 100%; box-shadow: none !important; background: transparent; text-align: right; padding-right: 4px; }
.unit > em { font-style: normal; color: var(--muted); font-size: 12px; padding: 0 9px 0 2px; white-space: nowrap; }
.unit.stepper > button { height: 100%; border: 0; border-radius: 0; width: 28px; padding: 0; background: var(--surface-2); color: var(--muted); font-size: 15px; box-shadow: none; }
.unit.stepper > button:hover { color: var(--accent); background: var(--accent-soft); }
.unit.stepper > input { text-align: center; padding: 0 4px; }

/* 5. своё значение вместо расчёта — жёлтое, «↺» возвращает расчёт */
input.manual { background: var(--warn-bg); border-color: var(--manual-line); }
/* своё значение принято (через 9 с после правки, 03.10.2026) — обычное поле, без подсветки и «↺» */
input.manual-ok { transition: background-color .6s, border-color .6s; }
.autowrap { position: relative; display: block; min-width: 0; }
.autowrap > input, .autowrap > .askwrap > input { padding-right: 30px; }
.autowrap:has(.askwrap) > .askwrap > input { padding-right: 56px; }
.resetbtn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px !important; padding: 0 !important;
  border: 0 !important; background: transparent !important; color: var(--warn) !important; font-size: 13px; font-weight: 700; z-index: 1; }
.autowrap:has(.askwrap) .resetbtn { right: 28px; }
.resetbtn:hover { color: var(--accent) !important; }

/* 6. разница цены после правки — держится до следующей правки, × убирает */
.delta { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 6px 2px 9px; margin-left: 6px;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
button.delta-x { height: 18px; width: 18px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; opacity: .6; }
button.delta-x:hover { opacity: 1; }
.delta.up { background: var(--err-bg); color: var(--err); }

/* 8. блок сворачивается; у свёрнутого в заголовке — что выбрано */
.form legend { cursor: default; }
button.fs-toggle { margin-left: auto; height: 32px; border: 0; background: transparent; padding: 0 2px 0 8px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 400; color: var(--muted); min-width: 0; max-width: 75%; }
button.fs-toggle:hover { color: var(--accent); }
.fs-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fs-ch { flex-shrink: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); transition: transform .15s, background .15s; }
.fs-ch.closed svg { transform: rotate(-90deg); }
button.fs-toggle:hover .fs-ch, button.fs-toggle:focus-visible .fs-ch { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .fs-ch { transition: none; } }
.form legend .seg.mini + .info, .form legend .info { margin-left: 6px; }
.form legend .seg.mini, .form legend select.mini { margin-left: 8px; }
.form fieldset.collapsed { padding-bottom: 0; }
.form fieldset.collapsed > :not(legend) { display: none !important; }
.form fieldset.collapsed legend { border-bottom: 0; border-radius: var(--radius); }
.form fieldset.collapsed legend .seg, .form fieldset.collapsed legend .info { display: none; }

/* 9. ошибка / предупреждение — кнопка «к полю» */
button.tofield { display: flex; width: 100%; height: auto; min-height: 0; text-align: left; justify-content: space-between; gap: 10px; align-items: baseline;
  font: inherit; font-size: 13px; font-weight: 400; border: 0; cursor: pointer; line-height: 1.35; }
button.check-err.tofield { color: var(--err); } button.check-info.tofield { color: var(--ink); }
button.tofield .go { white-space: nowrap; font-size: 12px; color: var(--accent); opacity: .9; }
button.tofield:hover .go { opacity: 1; text-decoration: underline; }
.flash { animation: flashBox 1.3s ease-out; border-radius: 8px; }
@keyframes flashBox { 0%, 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* 10. поиск Ctrl+K */
.cmdk-back { position: fixed; inset: 0; background: rgba(15, 20, 30, .28); z-index: 30; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.25); overflow: hidden; }
.cmdk input { height: 46px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 15px; padding: 0 16px; box-shadow: none !important; }
.cmdk-list { max-height: 50vh; overflow: auto; padding: 4px; display: grid; }
.cmdk-list button { height: auto; border: 0; background: transparent; text-align: left; padding: 7px 12px; border-radius: 8px; display: flex; justify-content: space-between; gap: 12px; font-weight: 400; }
.cmdk-list button small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cmdk-list button.act, .cmdk-list button:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.cmdk-foot { font-size: 12px; color: var(--muted); padding: 6px 14px 8px; border-top: 1px solid var(--line); }

/* 7. шапка: меню «КП ▾» и «⋯» */
.menu { position: relative; }
.menu-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 190px; display: grid; gap: 2px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 24, 40, .16); }
.menu-list.right { left: auto; right: 0; }
.menu-list button { width: 100%; text-align: left; border: 0; background: transparent; font-weight: 400; }
.menu-list button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.menu-list button.primary { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); font-weight: 600; }
.menu-user { padding: 4px 10px 6px; font-size: 13px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
#btnMore { font-size: 18px; line-height: 1; padding: 0 10px; position: relative; }
#btnMore.attn::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); }
#btnFind .kbd { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ============ отзыв Олеси 28.09 ============ */
/* 1. «Вариант N» крупно и жирно, варианты — отдельные карточки с цветной полосой слева */
.variant { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px;
  background: var(--panel); padding: 8px 10px 10px; gap: 6px; }
.variant + .variant { margin-top: 10px; }
.vhead { font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: 2px; }

/* окно-диалог */
.dlg-back { position: fixed; inset: 0; z-index: 40; background: rgba(15, 20, 30, .32); display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px; }
.dlg { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 16px 18px; display: grid; gap: 10px; }
.dlg h3 { margin: 0; font-size: 16px; }
.dlg p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.u-wrap { max-width: 1840px; margin: 0 auto; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.u-wrap > div { display: grid; gap: 14px; min-width: 0; }
.u-wrap > div > .card { overflow-x: auto; }   /* столбцов стало больше (31.10): на узком окне таблица прокручивается внутри карточки, не ломая страницу */
.u-wrap h3 { margin: 0 0 8px; font-size: 15px; }
.u-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.u-table th { color: var(--muted); font-weight: 500; text-align: left; padding: 6px 8px; white-space: nowrap; }
.u-table td { border-top: 1px solid var(--line); padding: 8px; vertical-align: middle; }
.u-table th.n, .u-table td.n { text-align: right; }
.u-table th.c, .u-table td.c { text-align: center; }
.u-table select { height: 32px; min-width: 140px; }
.u-table .u-off td { opacity: .55; }
.u-me, .u-tag { font-size: 11.5px; border-radius: 4px; padding: 1px 6px; margin-left: 4px; color: var(--accent-text); background: var(--accent-soft); white-space: nowrap; }
.u-tag { color: var(--err); background: var(--surface-2); }
.u-acts { white-space: nowrap; text-align: right; }
.u-acts button { margin-left: 4px; }
.u-partner { display: grid; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.u-partner label { display: grid; gap: 2px; }
.u-partner input { height: 30px; width: 140px; }
.u-edit { margin-top: 4px; }
.u-extras, .u-apps { display: grid; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.u-extras label, .u-apps label { flex-direction: row; align-items: center; gap: 5px; color: var(--muted); }
.u-extras input[type="number"] { height: 28px; width: 64px; }
.u-extras > span { align-self: center; }
.u-apps label:has(input:disabled) { opacity: .6; }
/* калькулятор человеку не открыт: ссылки на программы, которые открыты (31.10.2026) */
.u-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.u-links a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.u-links a:hover { background: var(--accent-hover); }
.u-levels { display: grid; gap: 10px; font-size: 13.5px; line-height: 1.4; }
.u-levels h3 { margin: 0; }
.u-levels b { display: block; }
.u-log { font-size: 13px; }
.u-log > div { padding: 5px 0; border-top: 1px solid var(--line); }
.pw-show { font: 600 18px/1.3 Consolas, monospace; background: var(--surface-2); border-radius: 8px; padding: 12px; text-align: center; overflow-wrap: anywhere; user-select: all; }
@media (max-width: 1100px) { .u-wrap { grid-template-columns: minmax(0, 1fr); } .u-wrap .card { overflow-x: auto; } }
.pw-form { display: grid; gap: 10px; }
.pw-form label { display: grid; gap: 4px; font-size: 14px; }
.pw-form input, .pw-form select { width: 100%; }
.pw-form .error-text { margin: 0; color: var(--err); }
/* окно «Договор» (29.10.2026, макет одобрил Данила): слева заказчик, справа — что берётся из расчёта */
#contractDlg { padding-top: 4vh; }
.dlg.contract { width: min(1240px, 100%); max-height: 92vh; overflow: auto; gap: 12px; }
.ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ct-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-content: start; }
.ct-form > b, .ct-form > .ct-found, .ct-form > .hint { grid-column: 1 / -1; }
.ct-f { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.ct-f.wide { grid-column: 1 / -1; }
.ct-f input { width: 100%; }
.ct-inn { display: flex; gap: 8px; } .ct-inn input { flex: 1; }
.ct-found { font-size: 13px; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, var(--panel)); }
.ct-found.ok { background: color-mix(in srgb, #1f9d55 12%, var(--panel)); }
.ct-found.warn { background: color-mix(in srgb, #d97706 14%, var(--panel)); }
.ct-side { display: grid; gap: 8px; align-content: start; padding-left: 18px; border-left: 1px solid var(--line); font-size: 13.5px; }
.ct-grid { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; }
.ct-k { color: var(--muted); }
.ct-tag { display: inline-block; font-size: 11.5px; padding: 0 6px; border-radius: 4px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ct-spec { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-spec td { border-top: 1px solid var(--line); padding: 4px 6px; } .ct-spec td.n { text-align: right; white-space: nowrap; }
.ct-note { margin-right: auto; align-self: center; }
@media (max-width: 900px) { .ct-body { grid-template-columns: 1fr; } .ct-side { padding-left: 0; border-left: 0; } }
.dlg-list { display: grid; gap: 2px; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.dlg-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink); }
.dlg-row:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.dlg-row:hover { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.dlg-row input[type=checkbox] { margin: 0; width: 17px; height: 17px; }
button.dlg-row.ver { height: auto; width: 100%; border: 0; text-align: left; font-weight: 400; justify-content: space-between; background: transparent; }
button.dlg-row.ver:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
button.dlg-row.ver b { font-variant-numeric: tabular-nums; }

/* ↶ ↷ в шапке, кнопки в списке расчётов */
button.icon { font-size: 18px; padding: 0 9px; line-height: 1; }
.calc-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* несколько устройств на экран — красным «3 шт.» (Олеся, О-5) */
.sysfit.multi { background: var(--err-bg); color: var(--err); font-weight: 600; }
.sysline.multi { background: var(--err-bg); }
.sysline .cnt { color: var(--err); }
.multi-note { color: var(--err); font-size: 13px; margin-top: 3px; }
.multi-cnt { color: var(--err); }
/* заметки менеджера в блоке «Клиент» (28.09) */
.form textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--note-bg); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 6px 10px; resize: vertical; min-height: 52px; width: 100%; line-height: 1.4; }
.form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.small-note { font-size: 12px; }

/* подсказка «система с запасом» (06.10) — жёлтая, как .sysfit.warn */
.check-info.check-warn { background: color-mix(in srgb, #f5b400 14%, var(--panel)); }

/* строка допов с наценкой в самой строке (06.10): название, кол-во, закупка, %, × */
.row.extra-row { grid-template-columns: minmax(0, 1.4fr) 52px minmax(108px, 1fr) 64px auto; }   /* 07.10: цена 1 250 000 целиком */
.row.extra-row .unit input { width: 100%; min-width: 0; border: 0; }

/* строка допов: в какие варианты входит и скрыта ли в КП (06.10) */
.extra-only { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; color: var(--muted); margin: -2px 0 6px; }
.extra-only label { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 6px; font-size: 12px; }
.extra-only > label { margin-left: 0; }
.extra-only.none { color: var(--bad, #c0392b); }

/* наценка по позициям «Дополнительно» (28.09) */
.itemmk { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; display: grid; gap: 3px; }
.itemmk-h { font-size: 13px; font-weight: 600; color: var(--ink); }
.itemmk-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 118px 22px; gap: 6px; align-items: center; padding: 2px 4px; border-radius: 6px; }
.itemmk-row:nth-child(even of .itemmk-row:not(.head)) { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.itemmk-row.head { font-size: 12px; color: var(--muted); padding-bottom: 0; }
.itemmk-row .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemmk-row .unit input.manual { background: color-mix(in srgb, #f5b400 14%, var(--panel)); }
.itemmk-row .unit input.auto-value { color: var(--muted); font-style: italic; }
.resetbtn.static { position: static; transform: none; }
/* что вписывать — закупку или цену в КП (Олеся, О-8) */
.price-rule { font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); border-radius: 8px; padding: 6px 9px; line-height: 1.4; }
.price-rule b { color: var(--ink); }
/* сколько каких кабинетов (Олеся, О-11) */
.cabtypes { display: grid; gap: 4px; font-size: 13px; }
.cabtypes:empty { display: none; }
.ct-h { font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.ct-h.ok { background: color-mix(in srgb, var(--ok) 11%, transparent); color: var(--ok); }
.ct-h.warn { background: color-mix(in srgb, #f5b400 16%, transparent); color: #8a6100; }
.ct-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ct { background: color-mix(in srgb, var(--ink) 5%, var(--panel)); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.ct-tips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--muted); }

/* UI/UX Pro Max, 28.09: цели нажатия не меньше 24×24, «?» контрастнее */
.form .seg { height: auto; min-height: var(--field-h); }
.form .seg button { min-height: 26px; }
.unit.stepper > button { flex: 0 0 28px; }
button.linkbtn { min-height: 24px; }
.info { color: var(--accent-text); }
/* надписи в переключателях не переносятся; «Печеньки» — переключатели по своей ширине, «значение» — остаток (28.09) */
.form .seg button { white-space: nowrap; }
.row.pech { display: flex; flex-wrap: wrap; align-items: flex-end; }   /* не влезает — «как» уходит на новую строку */
.row.pech > label { flex: 1 1 110px; }

/* нет связи — прежний результат затемнён, сверху пояснение (28.09) */
.results.stale > .card:not(.offline-note) { opacity: .5; }
.offline-note { border-color: var(--warn); background: color-mix(in srgb, #f5b400 12%, var(--panel)); font-size: 13px; font-weight: 500; }
/* ловушка ошибок (01.10.2026): плашка сверху поверх всего — catch.js */
.crash-note { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100; max-width: min(640px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--err);
  background: color-mix(in srgb, var(--err) 10%, var(--panel)); color: var(--ink); font-size: 14px; box-shadow: 0 4px 16px rgb(0 0 0 / .15); }
/* программа обновлена на сервере, а вкладка со старой (22.10.2026) — та же плашка, синяя, с кнопкой */
.crash-note.upd-note { align-items: center; border-color: var(--accent); background: var(--info-bg); }
.crash-note.upd-note button { height: auto; padding: 4px 12px; font-size: 14px; background: var(--accent); color: var(--accent-ink); border-radius: 6px; }
.crash-note button { border: 0; background: none; color: var(--ink); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; height: auto; }


/* справочник: фильтр в заголовке каждого столбца (28.09) */
table.cattab th { vertical-align: bottom; }
table.cattab th > span { display: block; margin-bottom: 4px; }
table.cattab .cf { display: block; width: 100%; min-width: 64px; height: 26px; font-size: 12px; font-weight: 400; padding: 0 6px; color: var(--ink); cursor: text; }
table.cattab select.cf { cursor: pointer; padding-right: 22px; }
table.cattab .cf.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }

/* справочник: «проверено» рядом с пометкой «новое» (28.09) */
.cattab .chk-btn { height: 24px; min-height: 24px; padding: 0 8px; font-size: 12px; margin-right: 4px; }

/* цены поставщика отдельной вкладкой: прокручивается вся страница, как обычная; строка с кнопками «Принять» — липкая
   под верхней панелью (её высота --topbar-h, в узком окне она в две строки) (28.09) */
body.prices-page #pricesPanel { height: auto; display: block; }
body.prices-page .prices-body { overflow: visible; }
/* верхняя панель программы на этой странице уезжает при прокрутке (её контейнер короткий) — строка кнопок липнет к самому верху */
body.prices-page #pricesPanel .drawer-head { position: sticky; top: 0; z-index: 6; background: var(--panel); }
/* меню «⋯» и «КП» живут внутри верхней панели — она должна быть выше липкой строки кнопок, иначе меню под неё уходит (02.10).
   Друг на друга они не наезжают: строка кнопок липнет, когда верхняя панель уже уехала вверх */
body.catalog-page .topbar { z-index: 7; }
body.prices-page table.prices th { position: static; }

/* цены поставщика: изменения больше 3 % — первыми и подсвечены, переключатель «только изменения / все» (29.09) */
table.prices tr.big td { background: color-mix(in srgb, #f5b400 12%, var(--panel)); }
/* дата последней проверки цен — своей строкой (22.10.2026); старше 8 дней — жёлтая */
.prices-info { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin: 4px 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--info-bg); font-size: 14px; }
.prices-info.old { background: color-mix(in srgb, #f5b400 22%, var(--panel)); }
.prices-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; }
table.prices tr.sec td { background: var(--bg); font-weight: 600; color: var(--ink); padding-top: 10px; border-top: 1px solid var(--line); }
table.prices tr.sec td { text-align: left; }
table.prices tr.sec.changed td { background: color-mix(in srgb, #f5b400 22%, var(--panel)); }
.sec-mark { margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: #b54708; color: #fff; font-size: 12px; font-weight: 600; }
.tab-mark { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: #b54708; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }

/* система не тянет, но программа подобрала сама — предупреждение, не ошибка (29.09) */
.sysfit.warn { background: color-mix(in srgb, #f5b400 14%, var(--panel)); color: #855900; font-weight: 500; }
@media (prefers-color-scheme: dark) { .sysfit.warn { color: #f0b429; } }
/* сравнение 3–4 вариантов — компактно, чтобы помещалось в колонку без прокрутки */
table.cmp.many { font-size: 12px; } table.cmp.many th, table.cmp.many td { padding: 3px 3px; }
table.cmp.many td.k { white-space: normal; }   /* 29.10.2026: в Inter четыре колонки цен не влезали в 420 px — подпись строки переносится, цены нет */
.vhead .vcopy { margin-left: auto; font-size: 12px; min-height: 24px; padding: 0 8px; }

/* «Как считать» (29.09) */
.help-body { overflow: auto; padding: 12px 16px 24px; display: grid; gap: 12px; }
.help-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; background: var(--panel); }
.help-card h3 { margin: 0; font-size: 16px; } .help-card p { margin: 0; }
.help-card ol, .help-card ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.help-card button { justify-self: start; }

/* Партнёр (29.09.2026): только цена — КП скачивает сам, но без разбора цены, «старой цены» и «показать коллеге» */
body.partner [data-breakdown],
body.partner [data-share], body.partner [data-fix-keep] { display: none !important; }
/* «☆ рекомендовать» у варианта (C2, 30.09.2026): стоит перед «⧉ копия» и забирает отступ справа */
.vhead .vrec { margin-left: auto; font-size: 12px; min-height: 24px; padding: 0 8px; }
.vhead .vrec + .vcopy { margin-left: 0; }
.vhead .vrec.on { color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ===================== Проверка удобства 06.10.2026 (12 пунктов, одобрены Данилой) ===================== */
/* 1. Блоки формы закреплены за колонками: добавили вариант или свернули блок — остальные стоят на месте.
   Три колонки: Клиент–Система | Модули, Опции экрана | Цена–Условия. Две: Клиент–Опции экрана | Цена–Условия.
   Модули — единственный блок, который растёт (до 4 вариантов), поэтому в трёх колонках у него своя (Данила, 06.10.2026). */
.form { column-count: 3; container-type: inline-size; }
@container (min-width: 1224px) { .form fieldset[data-fs="Модули"], .form fieldset[data-fs="Цена"] { break-before: column; } }
@container (min-width: 812px) and (max-width: 1223.98px) { .form fieldset[data-fs="Цена"] { break-before: column; } }
/* 20.10.2026: «+ вариант» — ссылкой в заголовке «Модули»; подзаголовки внутри «Редко нужного» */
.form legend .lg-link { margin-left: 4px; font-size: 12px; font-weight: 500; }
.form .sub { font-size: 12px; font-weight: 650; color: var(--muted); letter-spacing: .02em; margin: 4px 0 -4px; }
.form .sub:first-of-type { margin-top: 0; }

/* 3. «система подобрана сама» — одно жёлтое сообщение в строке «Управление» */
.sysline.auto { background: color-mix(in srgb, #f5b400 14%, var(--panel)); }
.sys-why { font-size: 13px; margin-top: 3px; }
/* 4. вопрос руководителю — значок сообщения */
.askbtn { display: grid; place-items: center; }
/* 09.10.2026: в кнопку было трудно попасть (кружок 24×24, щелчок по самому значку не срабатывал).
   Теперь это правый край поля во всю его высоту, 34 пикселя шириной, значок цветом вопроса. */
.askwrap > input { padding-right: 40px; }
.askwrap.noask > input { padding-right: 10px; }
.askbtn { right: 1px; top: 1px; bottom: 1px; transform: none; width: 34px; height: auto !important; border-radius: 0 7px 7px 0 !important;
  border-left: 1px solid var(--line) !important; color: var(--ask) !important; opacity: 1; cursor: pointer; }
.askbtn[hidden] { display: none; }
.askbtn svg { pointer-events: none; }
.askbtn:hover, .askbtn:focus-visible { background: var(--ask-soft) !important; border-color: transparent !important; border-left-color: var(--ask) !important; }
.askwrap.asked .askbtn { border-left-color: var(--ask) !important; }
.askwrap.asked .askbtn:hover { background: var(--ask) !important; filter: brightness(1.12); }
.askwrap.answered .askbtn { border-left-color: var(--ok) !important; }
.ask-note .linkbtn { font-size: 14px; font-weight: 700; color: var(--ask); }
.ask-note.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.ask-note.done .linkbtn { color: var(--ok); }
.tag.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
/* окно вопроса */
.ask-f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.ask-f textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; resize: vertical; min-height: 64px; }
.ask-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ask-q { margin: 0; padding: 7px 10px; border-left: 3px solid var(--ask); background: var(--ask-soft); border-radius: 0 8px 8px 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dlg p.ask-none { font-style: italic; }
.dlg p b { color: var(--ink); }

/* 5. значение считает программа — обычным шрифтом, слева пометка «авто» (раньше — серым курсивом в пунктире, читалось как «недоступно») */
input.auto-value, .itemmk-row .unit input.auto-value { color: var(--ink); font-style: normal; border-style: solid; padding-left: 42px;
  background-image: var(--auto-mark); background-repeat: no-repeat; background-position: left 8px center; }
.opt { grid-template-columns: minmax(0, 1fr) 64px 136px; }
@media (max-width: 420px) { .opt { grid-template-columns: minmax(0, 1fr) 56px 124px; } }

/* 6. сравнение вариантов: чем отличаются — под номером; одинаковые строки приглушены; карточка варианта короткая, остальное под «Подробнее» */
table.cmp th { vertical-align: top; }
.cmp-diff { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.cmp-more { font-size: 12px; font-weight: 400; color: var(--muted); }
table.cmp td { font-weight: 600; }
table.cmp td.k { font-weight: 400; }
table.cmp tr.same td { font-weight: 400; color: var(--muted); }
.more-body { display: grid; gap: 7px; margin-top: 6px; }

/* 7. список расчётов: «Удалить» — отдельно справа и красным */
.calc-acts .del { margin-left: auto; color: var(--err); border-color: transparent; background: transparent; }
.calc-acts .del:hover { border-color: var(--err); background: var(--err-bg); }

/* 8, 9. серым — только подписи над полями и пояснения: выключенная опция и названия строк результата — обычным цветом */
label.check:has(input:not(:checked)) { color: var(--ink); }
.kv .k, .std-h > span:first-child { color: var(--ink); }
.kv .v { font-weight: 500; }

/* 11. тёмная тема: полосы прокрутки и значок календаря перекрашивает браузер */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }

/* 12. разбор цены без закупки — узкая панель, форма рядом остаётся видна */
.drawer-narrow { width: min(520px, 100%); }
.drawer-narrow .breakdown { grid-template-columns: 1fr; }
.drawer-narrow .price-mid { white-space: nowrap; }
.zero-note { margin-top: 8px; }

/* 9. высот у полей и кнопок — две: 29 (поля, кнопки, переключатели-сегменты, заголовок блока) и 24 (мелкие кнопки и значки) */
button.small, select.mini, button.x, .vhead .vrec, .vhead .vcopy { height: 24px; min-height: 24px; }
.info { width: 24px; height: 24px; }
.info::after { inset: 0; }
button.fs-toggle { height: var(--field-h); }
.fs-ch { width: 24px; height: 24px; }
.seg, .form .seg, .seg.mini { height: var(--field-h); min-height: 0; padding: 1px; align-items: stretch; }
.seg button, .form .seg button, .seg.mini button { height: auto; min-height: 0; }

/* сравнение: одинаковое у всех вариантов — одной общей ячейкой (06.10.2026) */
table.cmp td.merged { text-align: center; }

/* 07.10.2026: наценка в строке допа — ячейка узкая, пометка «авто» съедала число; общую наценку видно по курсиву */
.row.extra-row .unit input.auto-value { padding-left: 4px; background-image: none; color: var(--muted); font-style: italic; }
/* окно «История расчёта»: сумма в одну строку */
.dlg:has(button.dlg-row.ver) { width: min(640px, 100%); }
button.dlg-row.ver b, button.dlg-row.ver > span:first-child { white-space: nowrap; flex: none; }
/* аудит UX 07.10.2026 */
.unit:has(input:disabled) { opacity: .55; background: color-mix(in srgb, var(--ink) 5%, var(--panel)); }
#orderForm .extra-only label { flex-direction: row; }
button.dlg-row.ver > span.muted { flex: 1; text-align: left; }
@media (max-width: 480px) { button.dlg-row.ver { flex-wrap: wrap; } button.dlg-row.ver b { margin-left: auto; } }
.cattab td.nm a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* 07.10.2026 (Данила: «всё поправить») — мелочи вёрстки
   «Наценка по позициям»: сумма от миллиона («авто 1 500 000 ₽») обрезалась в поле 118 px */
.itemmk-row { grid-template-columns: minmax(0, 1fr) 88px 140px 22px; }
@media (max-width: 420px) {
  /* телефон: название позиции — своей строкой, поля под ним */
  .itemmk-row { grid-template-columns: minmax(0, 1fr) 140px 22px; }
  .itemmk-row .nm { grid-column: 1 / -1; }
  .itemmk-row.head > span:first-child { display: none; }
  /* «Курс ЦБ» слипалась с датой: кнопка — отдельной строкой во всю ширину */
  .row:has(> .field-btn) { grid-template-columns: 1fr 1fr; }
  .row > .field-btn { grid-column: 1 / -1; }
  /* «Металлоконструкция», «Монтаж»: среднего поля нет — его место отдаём сумме («авто 1 086 000» обрезалось) */
  .opt:not(.opt-head):has(> span:empty) { grid-template-columns: minmax(0, 1fr) 0 150px; }
}
/* сравнение вариантов: «только отличия» — под таблицей, мелко */
.cmp-only { display: flex; flex-direction: row; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.cmp-only input { width: 14px; height: 14px; margin: 0; }

/* 09.10.2026: раскладка линий — число портов в кнопке и строка о выгоде под переключателем */
.form .seg[data-seg="portLayout"] { height: auto; min-height: var(--field-h); flex-wrap: wrap; }
.form .seg[data-seg="portLayout"] button { min-height: calc(var(--field-h) - 4px); display: inline-flex; align-items: center; }
/* 12.10.2026: цифра ровно по середине кружка (строка 15 + 1 снизу), кружок на 1px ниже — по середине букв слова */
.seg button .n { position: relative; top: 1px; margin-left: 6px; min-width: 8px; font-size: 11px; line-height: 15px; font-weight: 600; text-align: center; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--panel)); border-radius: 8px; padding: 0 5px 1px; }
.seg button .n.pick { color: var(--accent-ink); background: var(--ok); }
.seg button .n.bad { color: var(--accent-ink); background: var(--err); }
.layline { font-size: 12px; line-height: 1.35; color: var(--muted); }
.layline.bad { color: var(--err); }
.layline:empty { display: none; }

/* 20.10.2026: выбор модуля — где → шаг → частота → короткий список; кнопки шага переносятся на вторую строку */
.mpick { display: grid; gap: 6px; min-width: 0; }
.mprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; min-width: 0; }
.mprow .hint { align-self: center; }
.form .mpick .seg.wrap { flex: 1 1 200px; flex-wrap: wrap; height: auto; min-height: var(--field-h); }
.form .mpick .seg.wrap button { min-height: calc(var(--field-h) - 4px); }

/* ===================== Единый вид с «Расчётами КП» (29.10.2026) — остальное: что не легло в правила выше ===================== */
#btnFind .kbd { border-color: var(--line-strong); color: var(--muted); border-radius: 4px; }
.ask-f textarea { border-color: var(--line-strong); border-radius: 6px; }
.ask-f textarea:focus { box-shadow: var(--focus-ring); }
output.ro { background: var(--surface-2); border-radius: 6px; }
.hint, .sysinfo, .opt-head, .layline, .small-note, .itemmk-row.head, .extra-only, .extra-only label { font-size: 12px; }
.sysinfo, .sysfit, .check-info, .price-rule, .layline { font-size: 13px; }
/* у текстовых кнопок и значков тени нет */
button.linkbtn, .menu-list button, button.fs-toggle, button.x, .askbtn, .resetbtn, button.tofield, .cmdk-list button, button.delta-x,
button.dlg-row, .calc-acts .del, .toast button, .crash-note button { box-shadow: none; }
button.x { border-color: var(--line); color: var(--muted); }
.vhead .vrec.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }
.form .sub { color: var(--muted); letter-spacing: 0; }
label.check:hover { background: var(--surface-2); }
.seg button .n { background: var(--surface-2); color: var(--ink); }
/* сообщения: пара «текст / фон», без рамок; красный только у блокирующего */
.sysline.auto, .check-info.check-warn, .offline-note, .price-diff, .std.changed, .prices-info.old { background: var(--warn-bg); border-color: transparent; }
.std.changed { border-color: var(--manual-line); }
.sysfit.warn, .ct-h.warn { background: var(--warn-bg); color: var(--warn); }
.sysline.multi, .sysfit.multi, .sysfit.bad, .check-err { background: var(--err-bg); color: var(--err); }
.sysfit.ok, .tag.ok, .ct-h.ok, .delta { background: var(--ok-bg); color: var(--ok); }
.tag { border-radius: 4px; font-weight: 500; }
.check-info { background: var(--surface-2); border-radius: 6px; }
.price-rule { background: var(--surface-2); }
.itemmk-row .unit input.manual { background: var(--warn-bg); }
.price-big.muted { color: var(--err); }
table.buy tr.tot td { border-top-color: var(--navy); }
.ct { background: var(--surface-2); }
/* плашка «КП можно выпускать» и кнопки «Паспорт изделия», «Монтажная схема» — в одну строку (контейнер — div без класса) */
.result > div:has(> .badge) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.result > div:has(> .badge) > .badge { padding: 2px 6px; font-size: 12px; }
.result > div:has(> .badge) > button.small { font-size: 12px; padding: 0 6px; }
/* панели, меню, окна */
.drawer { box-shadow: -6px 0 18px rgba(44, 71, 118, .14); }
.calc-item { border-color: var(--line); border-radius: 6px; }
.calc-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.menu-list { border-radius: 8px; border-color: var(--line); box-shadow: var(--sh-2); }
.menu-list button:hover:not(:disabled) { background: var(--surface-2); }
.menu-list button.primary { background: var(--accent-soft); color: var(--accent-text); }
.dlg, .cmdk { border-radius: 10px; box-shadow: var(--sh-2); border-color: var(--line); }
.cmdk-list button.act, .cmdk-list button:hover, .dlg-row:hover { background: var(--accent-soft); }
.toast { background: var(--toast-bg); color: var(--toast-ink); border-radius: 6px; }
.toast button { color: var(--accent); }
.tip { background: var(--toast-bg); color: var(--toast-ink); }
.askbtn { border-radius: 0 5px 5px 0 !important; }

/* ===================== Карточка варианта — иерархия (29.10.2026, макет одобрил Данила: Проверка/UX/Колонка результата (29.10)) =====================
   Цена первая по весу, плашка рядом с ней; деньги одной строкой; действия одним рядом; строки под подписями «Экран» / «Комплект»;
   «Схема экрана» и «Строки КП» — одной строкой внизу. */
.r-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.r-head h3 { font-size: 15px; }
.r-head .vno { color: var(--muted); font-weight: 500; }
.r-sub { margin-top: -4px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.r-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.r-price .price-big { font-size: 30px; line-height: 1.1; }
.r-price .price-big.muted { font-size: 18px; }
.r-price .badge { padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.r-money { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: -4px; font-size: 12.5px; color: var(--muted); }
.r-money b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.r-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.r-acts button { height: 28px; min-height: 28px; font-size: 12px; padding: 0 8px; }
.grp { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -4px; }
.r-more { padding-top: 6px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.r-more details { min-width: 0; }
.r-more details[open] { flex-basis: 100%; }   /* раскрытая схема или строки КП — во всю ширину */
.r-more summary { padding: 2px 0; }
body.kp-open .r-price .price-big, .results.many .r-price .price-big { font-size: 26px; }

/* ===================== Состояния и клавиатура (29.10.2026) ===================== */
/* размер стёрт — спокойная строка вместо красной ошибки */
.r-start { padding: 10px 12px; font-size: 13.5px; }
/* список расчётов: заготовка строк при загрузке, пустой список, нет связи */
.calc-item.skel { height: 96px; cursor: default; border-color: var(--line);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--panel) 50%, var(--surface-2) 100%) 0 0 / 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .calc-item.skel { animation: none; } }
.list-empty { display: grid; gap: 6px; padding: 18px 14px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; text-align: center; justify-items: center; }
.list-empty b { font-size: 15px; font-weight: 600; color: var(--ink); }
.list-empty p { margin: 0; max-width: 380px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.list-empty .calc-acts { justify-content: center; margin-top: 6px; }
/* строка списка в фокусе — видно, где курсор (мышью строку не фокусируют: щелчок сразу открывает расчёт и закрывает список) */
.calc-item:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cmdk-foot { line-height: 1.6; }
.cmdk-foot span { white-space: nowrap; }