/* ============================================================
   TCO-калькулятор Selectel — стили
   Токены: чернильный петроль #092433, красный #EB4247,
   серии: своё железо #0891B2 / облако #905BFF (палитра валидирована)
   Шрифты: Manrope (текст), IBM Plex Mono (данные, штампы)
   ============================================================ */

:root {
  --ink: #092433;
  --ink-60: #5A6E78;
  --ink-40: #8FA0A8;
  --paper: #FFFFFF;
  --surface: #F4F7F8;
  --hairline: #DBE4E8;
  --accent: #EB4247;
  --positive: #006300;        /* облако выгоднее — зелёный success (провалидирован dataviz) */
  --positive-soft: #E7F6EC;   /* пастельно-зелёный фон карточки «Разница» */
  --onprem: #0891B2;
  --onprem-soft: #E0F2F7;
  --cloud: #905BFF;
  --cloud-soft: #EFE8FF;
  --dedic: #B45309;           /* выделенные серверы — тёплый янтарный; тройка серий
                                 onprem/cloud/dedic провалидирована validate_palette (light PASS) */
  --dedic-soft: #F7ECDD;
  --radius: 14px;
  --font-body: 'Manrope', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }

/* ---------- Шапка ---------- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); z-index: 50;
}
/* min-height вместо height + wrap: на узких экранах ряд переносится, а не выдавливается */
.header-row { display: flex; align-items: center; justify-content: space-between;
  gap: 6px 18px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-link { font-size: 13px; color: var(--ink-60); text-decoration: none; white-space: nowrap; }
.header-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.brand-mark {
  width: 14px; height: 14px; background: var(--accent);
  transform: rotate(45deg); border-radius: 3px; display: inline-block;
}
.header-note { font-size: 12px; color: var(--ink-60); }
/* бейдж статуса у логотипа (только шапка — в print-header и футер не ставим) */
.beta-badge {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-60); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 3px 8px; margin-left: 6px; white-space: nowrap; align-self: center;
}

/* ---------- Название инструмента (заменило hero-обложку) ----------
   Инструмент для сейлов, а не лендинг: вместо экрана с оффером — строка названия
   и сразу форма. Отдельной строкой под шапкой, чтобы на мобилке переносилась сама. */
.page-title { border-bottom: 1px solid var(--hairline); padding: 22px 0 24px; }
.page-title h1 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 10px; font-family: var(--font-body);
  font-size: 15.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:focus-visible { outline: 3px solid var(--cloud); outline-offset: 2px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(9,36,51,.22); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 15px 34px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Карточки шагов ---------- */
.step-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 32px; margin: 28px 0; background: var(--paper);
}
.step-head { display: flex; gap: 20px; align-items: baseline; margin-bottom: 26px; }
.step-no {
  font-size: 15px; font-weight: 600; color: var(--ink-40);
  border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px; flex-shrink: 0;
}
.step-head h2 { font-size: 24px; }
.step-sub { color: var(--ink-60); font-size: 14.5px; margin-top: 2px; }

.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 13.5px; font-weight: 600; color: var(--ink-60); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.field input {
  font-family: var(--font-mono); font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--hairline); border-radius: 10px;
  padding: 11px 14px; background: var(--paper); width: 100%;
}
.field input:focus { outline: none; border-color: var(--ink); }
.field input.invalid { border-color: var(--accent); }
.field input::placeholder { color: var(--ink-40); opacity: 1; }

/* тумблеры Да/Нет */
.field-toggle { justify-content: flex-start; }
.toggle { display: inline-flex; border: 1.5px solid var(--hairline); border-radius: 10px; overflow: hidden; width: fit-content; }
.toggle-opt {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 700;
  padding: 10px 22px; background: var(--paper); color: var(--ink-60);
  border: none; cursor: pointer;
}
.toggle-opt.active { background: var(--ink); color: #fff; }
.toggle-opt:focus-visible { outline: 3px solid var(--cloud); outline-offset: -3px; }
/* горизонт: 6 опций — компактнее и без переносов внутри кнопок */
.field-horizon .toggle-opt { white-space: nowrap; padding: 10px 13px; }
@media (max-width: 560px) { .field-horizon .toggle-opt { padding: 10px 9px; font-size: 13.5px; } }

/* подсказки */
.hint {
  width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--ink-40);
  background: none; color: var(--ink-40); font-size: 11px; font-weight: 700;
  cursor: help; line-height: 1; position: relative; flex-shrink: 0;
}
.hint:hover::after, .hint:focus-visible::after {
  content: attr(data-hint);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: 260px; background: var(--ink); color: #fff; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left;
  padding: 10px 12px; border-radius: 8px; z-index: 60;
}

/* параметры расчёта */
.step-card-params { background: var(--surface); border-color: transparent; }
.params-grid { grid-template-columns: repeat(3, 1fr); }
.advanced { grid-column: 1 / -1; margin-top: 6px; }
.advanced summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-60);
  padding: 8px 0; list-style-position: inside;
}
.advanced[open] summary { margin-bottom: 16px; }
.advanced .field-grid { grid-template-columns: repeat(3, 1fr); }
.advanced .field input { background: var(--paper); }
/* допущение/якорь, изменённые пользователем: видно «что моё, а что дефолт»
   (после правила .advanced — чтобы фон работал и в «Тонких настройках») */
.field input.edited, .advanced .field input.edited {
  border-color: var(--ink-60); background: var(--surface);
}

.calc-cta { margin-top: 28px; text-align: center; }
.calc-note { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); }

/* ---------- Результат ---------- */
.results { margin-top: 40px; }

.verdict {
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 40px; position: relative; margin-bottom: 24px;
}
.verdict-stamp {
  position: absolute; top: -13px; left: 32px; background: var(--paper);
  padding: 2px 12px; font-size: 12px; letter-spacing: .22em; font-weight: 600;
  color: var(--ink-60);
}
.verdict-title { font-size: clamp(26px, 4vw, 40px); margin-bottom: 10px; letter-spacing: -0.02em; }
.verdict-title .verdict-accent { color: var(--accent); }
/* облако выгоднее → зелёный акцент заголовка (поощряем нужный исход);
   железо выгоднее → красный; дедики выгоднее → нейтральный чернильный
   (цвет/тексты дедик-победы — отдельное решение продакта, этап 6 плана) */
.verdict-positive .verdict-title .verdict-accent { color: var(--positive); }
.verdict-neutral .verdict-title .verdict-accent { color: var(--ink); }
.verdict-sub { color: var(--ink-60); font-size: 16px; max-width: 720px; margin-bottom: 30px; }
.verdict-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- Режим сравнения (компактный переключатель у заголовка) ----------
   В основном им управляет чат-ассистент; руками — редко, поэтому мелко и ненавязчиво. */
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.scenario-mini { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
/* тумблер-переключатель: две кнопки-половинки (DOM и классы .toggle/.toggle-opt сохранены
   ради JS-обвязки), визуально — дорожка с бегунком. Подписи скрыты, смысл — по наведению. */
.toggle-switch {
  position: relative; width: 42px; height: 23px; border: none; border-radius: 999px;
  background: var(--hairline); overflow: visible; transition: background .15s ease; cursor: pointer;
}
.toggle-switch .toggle-opt {
  position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; font-size: 0;
  background: none; border: none; z-index: 2;
}
.toggle-switch .toggle-opt[data-value="full"] { left: 0; }
.toggle-switch .toggle-opt[data-value="cloud-dedic"] { left: 50%; }
.toggle-switch .toggle-opt.active { background: none; }
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(9, 36, 51, .35);
  transition: left .15s ease; z-index: 1;
}
.toggle-switch:has(.toggle-opt[data-value="cloud-dedic"].active) { background: var(--cloud); }
.toggle-switch:has(.toggle-opt[data-value="cloud-dedic"].active)::after { left: 22px; }
.toggle-switch .toggle-opt:focus-visible { outline: 3px solid var(--cloud); outline-offset: 2px; border-radius: 999px; }
/* пояснение — по наведению на сам тумблер (отдельной «?» кнопки нет) */
.scenario-mini:hover::after, .scenario-mini:focus-within::after {
  content: attr(data-hint);
  position: absolute; left: 0; top: calc(100% + 8px);
  width: 280px; background: var(--ink); color: #fff; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left;
  padding: 10px 12px; border-radius: 8px; z-index: 60;
}
/* режим «только Selectel» (2 стороны): прячем колонку своего железа, on-prem-секции
   и сжимаем сетку вердикта до 2 колонок. 3-сторонний режим этих правил не касается. */
.results.mode-2way .verdict-figures { grid-template-columns: repeat(2, 1fr); }
.results.mode-2way #vfig-onprem,
.results.mode-2way .op-section { display: none; }
.vfig { border-top: 1px solid var(--hairline); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.vfig-label { font-size: 13px; font-weight: 700; color: var(--ink-60); display: flex; align-items: center; gap: 7px; }
.vfig-value { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; font-variant-numeric: tabular-nums; }
.vfig-note { font-size: 12.5px; color: var(--ink-40); }
.vfig-note .hint, .vfig-label .hint { vertical-align: middle; }
/* скидки сейла: компактные квадратные чипы в строке под цифрами вердикта
   (две независимые группы — облако и дедики; data-for указывает на поле) */
.verdict-disc-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
.vfig-disc { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vfig-disc-label {
  font-size: 12px; font-weight: 700; color: var(--ink-60);
  display: inline-flex; align-items: center; gap: 6px; margin-right: 4px;
}
.disc-chip {
  padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 7px;
  background: var(--paper); color: var(--ink-60); font-family: var(--font-mono);
  font-size: 12.5px; cursor: pointer; transition: all .12s;
}
.disc-chip:hover { border-color: var(--cloud); color: var(--cloud); }
.disc-chip.active { background: var(--cloud); border-color: var(--cloud); color: #fff; }
.disc-chip:focus-visible { outline: 3px solid var(--cloud); outline-offset: 2px; }
#dedic-disc-group .disc-chip:hover { border-color: var(--dedic); color: var(--dedic); }
#dedic-disc-group .disc-chip.active { background: var(--dedic); border-color: var(--dedic); color: #fff; }
#dedic-disc-group .disc-chip:focus-visible { outline-color: var(--dedic); }
.disc-custom {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; color: var(--ink-60); border: 1px solid var(--hairline);
  border-radius: 7px; padding: 1px 9px 1px 10px;
}
.disc-custom input {
  width: 36px; border: none; background: none; text-align: right;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); padding: 3px 0;
}
.disc-custom input:focus { outline: none; }
.disc-custom .disc-pct { color: var(--ink-40); }
.vfig-unavail .vfig-value { color: var(--ink-40); font-size: clamp(15px, 2vw, 19px); }

.verdict-chart { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.verdict-chart .res-note { margin-bottom: 10px; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dot-onprem { background: var(--onprem); }
.dot-cloud { background: var(--cloud); }
.dot-dedic { background: var(--dedic); }
.verdict-chart #v-breakeven { margin-top: 10px; margin-bottom: 0; }

/* Обратная связь в шапке → Telegram @vlamir (внутренний канал для сейлов; заменила штамп
   прайса — дата/пул остались в футере, в тексте расчёта и в PDF-штампе .print-header.
   .site-header целиком скрыт в @media print, поэтому в клиентский PDF ссылка не попадает) */
.header-feedback {
  font-size: 13px; color: var(--ink-60); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: color .15s ease;
}
.header-feedback:hover { color: var(--ink); }
.header-feedback:hover .hf-cta { text-decoration: underline; text-underline-offset: 2px; }
.header-feedback .hf-cta { color: var(--onprem); font-weight: 700; }
/* на узких экранах прячем описательную часть — остаётся «💬 → @vlamir», без переполнения */
@media (max-width: 560px) { .header-feedback .hf-full { display: none; } }

.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
/* сворачиваемые карточки деталей сайзинга: закрыты по умолчанию — справка для тех,
   кто хочет проверить цифры; align-items: start — закрытая карточка не растягивается
   до высоты открытой соседки */
.res-grid-sizing { align-items: start; }
.res-details summary { cursor: pointer; list-style-position: inside; user-select: none; }
.res-details summary::marker { color: var(--ink-40); }
.res-details summary h3 { display: inline; }
.res-details[open] summary { margin-bottom: 10px; }
.res-details .res-details-cue { font-size: 12.5px; font-weight: 500; color: var(--ink-40); margin-left: 8px; white-space: nowrap; }
.res-details .res-details-cue::after { content: "развернуть"; }
.res-details[open] .res-details-cue::after { content: "свернуть"; }
.res-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 28px; margin-bottom: 24px; background: var(--paper);
}
.res-grid .res-card { margin-bottom: 0; }
.res-card h3 { font-size: 18px; margin-bottom: 4px; }
.res-note { font-size: 13px; color: var(--ink-60); margin-bottom: 18px; }
.chart-box { width: 100%; }
.chart-box svg { display: block; width: 100%; height: auto; }

/* таблица */
.table-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.cmp-table th {
  text-align: left; font-family: var(--font-mono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-60);
  font-weight: 600; padding: 10px 14px 8px; border-bottom: 2px solid var(--ink);
}
.cmp-table td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.cmp-table td:nth-child(2), .cmp-table td:nth-child(3), .cmp-table td:nth-child(4) {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-table td:nth-child(5) { color: var(--ink-60); font-size: 13px; }
.cmp-table tr.total-row td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--ink); }
.cmp-table .total-npv { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-60); margin-top: 2px; white-space: nowrap; }
.cmp-table td.na { color: var(--ink-40); }

/* строка паритета по цене (экран-only): рычаг скидки для сейла */
.verdict-parity { margin-top: 12px; font-size: 13px; color: var(--ink-60); }
.verdict-parity b { color: var(--ink); }
.parity-apply {
  border: 1px solid var(--ink-40); background: none; border-radius: 6px;
  font-family: var(--font-mono); font-size: 12px; padding: 3px 10px;
  cursor: pointer; color: var(--ink); margin-left: 6px;
}
.parity-apply:hover { border-color: var(--ink); }

/* CTA из вердикта к ползунку роста */
.goto-growth { color: var(--onprem); text-decoration: underline; text-underline-offset: 2px; }
.growth-flash { animation: growth-flash 1.6s ease; }
@keyframes growth-flash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 3px var(--accent); }
}

/* преимущества облака и сайзинг */
.cfo-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
/* в карточке преимуществ маркеры зелёные (позитивная валентность), не красные */
.cloud-benefits .cfo-list li::before { background: var(--positive); }
.cfo-list li { padding-left: 22px; position: relative; font-size: 14.5px; }
.cfo-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); border-radius: 2px;
}
.cfo-list strong { font-family: var(--font-mono); font-weight: 600; }
.sizing-list { list-style: none; font-size: 13.5px; display: flex; flex-direction: column; gap: 9px; color: var(--ink-60); }
.sizing-list b { color: var(--ink); font-weight: 600; }

/* допущения */
.assumptions-body { font-size: 12.5px; color: var(--ink-60); columns: 2; column-gap: 40px; }
.assumptions-body p { margin-bottom: 6px; break-inside: avoid; }
.assumptions-body b { color: var(--ink); font-weight: 600; }
.disclaimer { margin-top: 18px; font-size: 12.5px; color: var(--ink-40); border-top: 1px solid var(--hairline); padding-top: 14px; }

/* PDF CTA */
.pdf-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 32px 36px; margin-bottom: 24px; flex-wrap: wrap;
}
.pdf-cta h3 { font-size: 20px; margin-bottom: 4px; }
.pdf-cta p { color: rgba(255,255,255,.65); font-size: 14.5px; max-width: 480px; }
.pdf-cta .btn-primary { background: var(--accent); }

/* ---------- Панель роста нагрузки ---------- */
.growth-panel {
  border: 1px solid var(--hairline); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 28px 32px; margin-bottom: 24px;
  background: linear-gradient(180deg, #FFF7F7 0%, var(--paper) 60%);
}
.growth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 18px; }
.growth-head h3 { font-size: 20px; margin-bottom: 4px; }
.growth-head .res-note { margin-bottom: 0; max-width: 560px; }
.growth-value { font-size: 30px; font-weight: 600; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.growth-panel input[type="range"] {
  width: 100%; appearance: none; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--hairline) 0%, var(--hairline) 100%);
  outline: none; margin: 8px 0 4px;
}
.growth-panel input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent); cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(235,66,71,.4); transform: rotate(45deg);
}
.growth-panel input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--cloud); }
.growth-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-40); margin-bottom: 14px; position: relative; }
/* диапазон ползунка асимметричный (−20…+50): настоящий ноль — на 20/70 ширины,
   а не в центре; подпись «0» ставим на его фактическое место под бегунком */
.growth-scale span:nth-child(2) { position: absolute; left: 28.57%; transform: translateX(-50%); }
.growth-insights { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.growth-insights li { font-size: 14px; color: var(--ink-60); padding-left: 20px; position: relative; }
.growth-insights li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); border-radius: 2px;
}
.growth-insights b { color: var(--ink); }

/* ЗИП: радиогруппа у CAPEX */
.field-zip { grid-column: 1 / -1; }
.choice-group { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--ink-60);
  border: 1.5px solid var(--hairline); border-radius: 10px; padding: 10px 14px;
}
.choice:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.choice input { accent-color: var(--ink); width: 15px; height: 15px; flex-shrink: 0; }
.zip-pct { max-width: 260px; margin-top: 4px; }
.field-note { font-size: 12.5px; color: var(--accent); font-weight: 600; line-height: 1.45; }
.field-note-muted { color: var(--ink-40); font-weight: 500; }
/* авто-оценка: цифру посчитали за клиента — заметнее ориентира, мягче предупреждения */
.field-note-auto { color: var(--ink-60); font-weight: 600; }

/* поля кредита */
.loan-fields {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px; padding: 18px 20px; border: 1px dashed var(--hairline);
  border-radius: 10px; background: var(--paper);
}
@media (max-width: 900px) { .loan-fields { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .loan-fields { grid-template-columns: 1fr; } }

/* селект */
.select {
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink);
  border: 1.5px solid var(--hairline); border-radius: 10px;
  padding: 11px 14px; background: var(--paper); width: 100%; cursor: pointer;
}
.select:focus { outline: none; border-color: var(--ink); }

/* кнопки в тёмном блоке */
.pdf-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { border-color: #fff; }
.btn-outline-light.copied { background: #fff; color: var(--ink); }

/* ---------- Методология ---------- */
.method { padding: 48px 0 72px; border-top: 1px solid var(--hairline); margin-top: 48px; }
.method h2 { font-size: 26px; margin-bottom: 24px; }
.method-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-bottom: 22px; }
.method h4 { font-size: 15px; margin-bottom: 10px; }
.method-formula {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-60);
  background: var(--surface); border-radius: 10px; padding: 16px 18px;
}
.method-note { font-size: 14px; color: var(--ink-60); max-width: 820px; }
.method-note a { color: var(--ink); }

/* ---------- Футер ---------- */
.site-footer { border-top: 1px solid var(--hairline); }
.footer-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand-footer { font-size: 17px; }
.footer-note { font-size: 12px; color: var(--ink-40); }

/* ---------- Модал ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(9,36,51,.55);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--paper); border-radius: var(--radius); padding: 36px;
  max-width: 440px; width: 100%; position: relative;
}
.modal h3 { font-size: 21px; margin-bottom: 8px; }
.modal-sub { font-size: 14px; color: var(--ink-60); margin-bottom: 22px; }
.modal .field { margin-bottom: 14px; }
.modal-close {
  position: absolute; top: 14px; right: 16px; border: none; background: none;
  font-size: 26px; color: var(--ink-40); cursor: pointer; line-height: 1;
}
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-60); margin: 4px 0 18px; cursor: pointer; }
.consent input { margin-top: 2px; }

/* ---------- Тултипы чартов ---------- */
.chart-tip {
  position: fixed; pointer-events: none; z-index: 80;
  background: var(--ink); color: #fff; border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  padding: 8px 11px; transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap; display: none;
}
.chart-tip .tip-title { color: rgba(255,255,255,.6); }

/* ---------- Печать (PDF-отчёт) ---------- */
.print-header { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { font-size: 12px; }
  .site-header, .page-title, .step-card, .method, .site-footer,
  .pdf-cta, .modal-overlay { display: none !important; }
  .results { margin-top: 0; }
  /* шапка PDF стоит первой в DOM — flex+order на body не нужны
     (flex-контейнер на body ломает разбиение на страницы) */
  .print-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px; font-size: 11px;
  }
  .res-grid { grid-template-columns: 1fr 1fr; page-break-inside: avoid; }
  /* детали сайзинга в PDF: во всю ширину (длинные mono-строки) и без интерактивных
     атрибутов раскрытия — сами details открываются в beforeprint (app.js) */
  .res-grid-sizing { grid-template-columns: 1fr; page-break-inside: auto; }
  .res-details summary { list-style: none; }
  .res-details .res-details-cue { display: none; }
  .growth-panel input[type="range"], .growth-scale { display: none; }
  .growth-panel { page-break-inside: avoid; }
  .res-card { page-break-inside: avoid; }
  .res-card, .verdict { border-color: #bbb; }
  /* вердикт НЕ запрещаем разрывать: он ~в целую страницу, и при чуть большей высоте
     (заголовок в 2 строки, строка скидки) целиком уезжал на стр. 2 — стр. 1 выходила
     пустой. Целыми держим только внутренние блоки. */
  .verdict-figures, .verdict-chart { page-break-inside: avoid; }
  /* компактнее в печати — чтобы заключение с графиком укладывалось на первую страницу */
  .verdict { padding: 24px; }
  .verdict-title { font-size: 26px; }
  .verdict-sub { margin-bottom: 20px; }
  .verdict-chart { margin-top: 18px; }
  .verdict-disc-row { display: none; } /* чипы скидок — интерактив, в PDF скидка видна в цифрах/таблице */
  /* сейловые элементы в клиентский PDF не печатаем */
  .verdict-parity, .cloud-benefits { display: none !important; }
  .goto-growth { color: inherit; text-decoration: none; }
  .assumptions-body { columns: 2; }
  .verdict-title .verdict-accent { color: var(--accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .verdict-positive .verdict-title .verdict-accent { color: var(--positive) !important; }
  .verdict-neutral .verdict-title .verdict-accent { color: var(--ink) !important; }
  .dot, .brand-mark, .cfo-list li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .field-grid, .params-grid, .advanced .field-grid { grid-template-columns: repeat(2, 1fr); }
  .res-grid, .method-cols { grid-template-columns: 1fr; }
  .verdict-figures { grid-template-columns: 1fr; gap: 16px; }
  .assumptions-body { columns: 1; }
}
@media (max-width: 560px) {
  .field-grid, .params-grid, .advanced .field-grid { grid-template-columns: 1fr; }
  .step-card { padding: 22px; }
  .verdict { padding: 26px 22px; }
  .pdf-cta { padding: 26px 22px; }
  .page-title { padding: 16px 0 18px; }
  .header-nav { gap: 12px; }
  .header-link, .header-feedback { font-size: 12px; }
}

/* ---------- Чат-ассистент (прототип) ---------- */
.assist-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90;
  background: var(--ink); color: #fff; border: none; border-radius: 12px;
  padding: 13px 20px; font: 700 15px var(--font-body); cursor: pointer;
  box-shadow: 0 6px 20px rgba(9,36,51,.3); }
.assist-panel { position: fixed; right: 22px; bottom: 76px; z-index: 95;
  width: 400px; max-width: calc(100vw - 44px); height: 560px; max-height: calc(100vh - 120px);
  transition: width .15s ease, height .15s ease;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px;
  display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(9,36,51,.25); }
.assist-panel-max { width: 780px; height: calc(100vh - 120px); }
.assist-panel-max .am { max-width: 92%; }
.am b { font-weight: 700; }
.am a { color: var(--onprem); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.assist-note { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-40); }
.assist-head { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.assist-badge { font: 500 11px var(--font-mono); color: var(--ink-40); margin-left: 8px; }
.assist-close { border: none; background: none; font-size: 22px; color: var(--ink-40); cursor: pointer; }
.assist-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.am { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.am-user { align-self: flex-end; background: var(--ink); color: #fff; }
.am-bot { align-self: flex-start; background: var(--surface); color: var(--ink); }
.assist-assumed { margin: 8px 0; font-size: 12.5px; color: var(--ink-60);
  border-left: 3px solid var(--accent); padding-left: 9px; }
.assist-apply { margin-top: 4px; padding: 8px 16px; font-size: 13.5px; }
.assist-done { color: var(--onprem); font-weight: 700; font-size: 13px; }
.assist-files { padding: 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.assist-chip { font: 500 11.5px var(--font-mono); background: var(--surface);
  border-radius: 7px; padding: 4px 8px; }
.assist-chip a { color: var(--accent); cursor: pointer; margin-left: 4px; }
.assist-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hairline); align-items: flex-end; }
.assist-input textarea { flex: 1; resize: none; max-height: 160px; overflow-y: auto; border: 1.5px solid var(--hairline);
  border-radius: 10px; padding: 9px 11px; font: 400 13.5px var(--font-body); }
.assist-input .btn { padding: 9px 14px; }
.assist-attach { cursor: pointer; font-size: 19px; padding: 6px 2px; }
.assist-filled { background: #FFF7ED !important; border-color: var(--accent) !important; }
@media print { .assist-fab, .assist-panel { display: none !important; } }