/* Smart Electric — Mini App
   =========================================================================
   Дизайн-система. Принцип: красота достигается композицией, типографикой,
   пропорциями и иерархией — а не цветом, тенями и декором.

   Три правила, из которых выведено всё остальное:

   1. Цвет несёт смысл, а не украшает. Синий — только интерактив, ссылки и
      активные состояния. Зелёный — только успешная проверка. Красный —
      только ошибка. Жёлтый — только предупреждение. Декоративных цветов нет.
   2. Разделяет не тень, а фон, белая поверхность и граница. Единственная
      допустимая тень — 0 1px 2px rgba(23,26,28,.06).
   3. Цифры — IBM Plex Mono с tabular-nums: разряды встают друг под друга,
      и столбец 1,5 / 10,0 / 120,0 читается как ряд, а не как россыпь.
   ========================================================================= */

:root {
  /* --- Base ------------------------------------------------------------- */
  --bg: #F3F1EC;
  --surface: #FFFFFF;
  --surface-2: #EAE7E0;
  --ink: #171A1C;
  --muted: #62686C;
  --muted-2: #858B8F;
  --border: #D5D1C8;
  --border-strong: #B8B4AA;
  --accent: #1769AA;
  --accent-soft: #E8F2FA;
  --header: #202427;

  /* --- Семантика результата: мягкий фон + линия/иконка ------------------ */
  --ok: #287A4A;
  --ok-bg: #EAF5EE;
  --bad: #BA3636;
  --bad-bg: #FBECEC;
  --warn: #A66A00;
  --warn-bg: #FFF4D9;

  /* --- Скругления ------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* --- Тень (единственная допустимая) ----------------------------------- */
  --shadow: 0 1px 2px rgba(23, 26, 28, 0.06);

  /* --- Шрифты ----------------------------------------------------------- */
  --font: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
          Consolas, "Liberation Mono", monospace;

  /* --- Шкала отступов --------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
}

* { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 21px;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

body { min-height: 100dvh; }

button { font-family: inherit; }

/* Иконка как обёртка вокруг SVG: инлайновый флекс убирает лишний interline. */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.ic svg { display: block; }

/* =========================================================================
   ШАПКА
   ========================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-bottom: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--header);
  color: #FFFFFF;
}

/* Кнопка «назад» — только на внутренних экранах (управляется атрибутом hidden). */
.header__back {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.12s ease;
}

.header__back:active { background: rgba(255, 255, 255, 0.12); }

/* Иконка текущего раздела: сразу видно, где находишься. */
.header__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
}

.header__text { min-width: 0; }

.header__title {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__subtitle {
  margin: 1px 0 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
  color: #A9AEB2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
   КОНТЕЙНЕР
   ========================================================================= */

.main {
  max-width: 430px;
  margin: 0 auto;
  padding-top: var(--s4);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* =========================================================================
   ЗАГОЛОВКИ СЕКЦИЙ
   В DOM текст остаётся в исходном регистре («Расчёты»), верхний — только CSS.
   ========================================================================= */

.section-title {
  margin: var(--s6) 0 var(--s3);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.main > div > .section-title:first-child { margin-top: 0; }

.subsection__title {
  margin: var(--s4) 0 var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.subsection { margin-top: var(--s4); }

/* Метки блока «Ввод в щит»: тот же шаг «метка → поле», что и в остальных формах. */
.subsection > label {
  display: block;
  margin: var(--s3) 0 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
}

.subsection > .subsection__title { margin-top: 0; }

/* =========================================================================
   ГЛАВНЫЙ ЭКРАН: ПЛИТКИ
   ========================================================================= */

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  min-height: 118px;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.tile:active { border-color: var(--accent); background: var(--accent-soft); }

.tile__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: var(--s2);
  color: var(--accent);
}

.tile__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.tile__sub {
  font-size: 12px;
  line-height: 16px;
  font-weight: 450;
  color: var(--muted);
  padding-right: 14px;
}

/* Стрелка «перейти» в правом нижнем углу — без цветных фонов. */
.tile__arrow {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--muted-2);
  line-height: 0;
}

/* =========================================================================
   КАРТОЧКИ
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.card h2 {
  margin: 0 0 var(--s4);
  font-size: 17px;
  line-height: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.card > p.field__hint:first-child { margin-top: 0; }

/* =========================================================================
   ФОРМЫ
   ========================================================================= */

.field { margin-bottom: var(--s3); }

.field:last-child { margin-bottom: 0; }

.field > label,
.group-box > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
}

.field__hint {
  margin: var(--s2) 0 var(--s3);
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
  color: var(--muted);
}

input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  height: 46px;
  padding: 0 var(--s3);
  font-family: inherit;
  font-size: 15px;
  font-weight: 450;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Числовые поля — моноширинные: значения читаются как показания прибора. */
input[inputmode="decimal"],
input[type="number"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

input::placeholder, textarea::placeholder { color: var(--muted-2); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2362686C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* Переключатель: строка 46px, label слева, трек 42×24 справа. */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 46px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.switch > span:first-child {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.switch input { display: none; }

.switch .track {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.switch .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.16s ease;
}

.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); border-color: transparent; }

/* =========================================================================
   КНОПКИ
   ========================================================================= */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}

.btn:active { background: #135C94; border-color: #135C94; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Второстепенное действие — пунктирная рамка, без заливки. */
.btn--ghost {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--accent);
  font-weight: 500;
}

.btn--ghost:active { background: var(--accent-soft); border-style: dashed; }

/* =========================================================================
   ЗАГРУЗКА И УВЕДОМЛЕНИЯ
   ========================================================================= */

.spinner {
  width: 20px;
  height: 20px;
  margin: var(--s5) auto;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: min(400px, calc(100vw - 32px));
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--header);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 18px;
  z-index: 50;
}

/* =========================================================================
   РЕЗУЛЬТАТ: КЛЮЧЕВЫЕ ЧИСЛА
   Сетка «как у прибора»: ячейки разделены линиями, а не отступами.
   ========================================================================= */

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  /* column-reverse: в DOM подпись идёт первой, но по спецификации
     значение стоит сверху, а подпись — под ним. */
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* Первая строка — без верхней линии, первый столбец — без левой. */
.stat:nth-child(-n + 2) { border-top: none; }
.stat:nth-child(odd) { border-left: none; }

.stat__value {
  font-family: var(--mono);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Одно главное значение выделяется акцентом — остальные остаются чёрными. */
.stat__value--lg { color: var(--accent); }

.stat__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 450;
  color: var(--muted);
}

/* =========================================================================
   ВЕРДИКТ
   ========================================================================= */

.verdict {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
}

.verdict__icon { margin-top: 1px; line-height: 0; }

.verdict__body { min-width: 0; }

.verdict__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.verdict__note {
  margin-top: 1px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
}

.verdict--ok { background: var(--ok-bg); border-left-color: var(--ok); }
.verdict--ok .verdict__icon, .verdict--ok .verdict__title { color: var(--ok); }
.verdict--ok .verdict__note { color: #1F5C39; }

.verdict--bad { background: var(--bad-bg); border-left-color: var(--bad); }
.verdict--bad .verdict__icon, .verdict--bad .verdict__title { color: var(--bad); }
.verdict--bad .verdict__note { color: #8C2A2A; }

/* Нейтральная плашка: расчёт во что-то упирается, но ничего не нарушено.
   Цвета намеренно не семантические (ни зелёный, ни красный, ни жёлтый):
   это не оценка, а название ограничения, которое определило ответ. */
.verdict--info { background: var(--surface-2); border-left-color: var(--muted); }
.verdict--info .verdict__icon, .verdict--info .verdict__title { color: var(--ink); }
.verdict--info .verdict__note { color: var(--muted); }

/* =========================================================================
   ОТЧЁТ: КОНТЕЙНЕР И ВКЛАДКИ
   ========================================================================= */

.report-box { margin-top: var(--s4); }

.report-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: var(--s3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

/* Активная вкладка — белая, а не ярко-синяя: синий оставлен интерактиву. */
.report-tab {
  flex: 1 1 0;
  height: 34px;
  padding: 0 var(--s3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.report-tab--active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  box-shadow: var(--shadow);
}

.report-body-slot { min-width: 0; }

.report-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* =========================================================================
   ВКЛАДКА «СТРУКТУРА»: ЧЕК-ЛИСТ
   Один общий блок, строки разделены линией, а не карточками.
   ========================================================================= */

.rcheck-list { background: var(--surface); }

.rcheck {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
}

.rcheck:first-child { border-top: none; }

.rcheck__icon { margin-top: 1px; line-height: 0; }
.rcheck__icon--ok { color: var(--ok); }
.rcheck__icon--bad { color: var(--bad); }
.rcheck__icon--info { color: var(--muted); }

.rcheck__body { min-width: 0; }

.rcheck__name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

.rcheck__detail {
  margin-top: 1px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ВКЛАДКА «СТРУКТУРА»: ТАБЛИЦА ВАРИАНТОВ
   ========================================================================= */

.rtable-wrap { border-top: 1px solid var(--border); }

.rtable-title {
  padding: var(--s3) var(--s4) var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.rtable {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rtable th {
  padding: 0 var(--s2) var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.rtable th:first-child { padding-left: var(--s4); text-align: left; }
.rtable th:last-child { padding-right: var(--s4); }

.rtable td {
  padding: var(--s2);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 18px;
  text-align: right;
  color: var(--ink);
}

.rtable td:first-child { padding-left: var(--s4); text-align: left; font-family: var(--font); }
.rtable td:last-child { padding-right: var(--s4); }

/* Выбранный вариант — акцентная строка (синий = выбор). Проблемный вариант
   заливкой не помечаем: заливка во всю ширину читается как «выбрано», а
   красный здесь значит «не проходит». Поэтому — красные числа и тонкая
   полоса слева, то есть метка, а не фон. */
.rtable-row--chosen td { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rtable-row--bad td { color: var(--bad); background: none; }
.rtable-row--bad td:first-child { box-shadow: inset 2px 0 0 var(--bad); }

.rtable-mark { width: 20px; padding-right: 0 !important; }
.rtable-mark svg { vertical-align: middle; }
.rtable-row--chosen .rtable-mark { color: var(--accent); }
.rtable-row--bad .rtable-mark { color: var(--bad); }

.rtable-reason {
  padding: 0 var(--s4) var(--s2) calc(var(--s4) + 26px) !important;
  border-top: none !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  line-height: 17px !important;
  color: var(--muted) !important;
  text-align: left !important;
}

/* =========================================================================
   ВКЛАДКА «СТРУКТУРА»: ПРЕДУПРЕЖДЕНИЯ, НОРМЫ, СПИСКИ, ИСХОДНЫЕ ДАННЫЕ
   ========================================================================= */

.rwarn {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
}

.rwarn-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
  color: var(--warn);
}

.rwarn-item {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #6E4A05;
}

.rrefs { border-top: 1px solid var(--border); }

/* Внутри общей белой рамки отчёта верхняя линия у первого блока не нужна —
   она дублирует границу самого контейнера. Порядок блоков произвольный
   (проверки, таблица вариантов, ссылки, предупреждения), поэтому правило
   общее, а не перечисление конкретных классов. */
.report-body > :first-child { border-top: none; }

.rrefs-title {
  padding: var(--s3) var(--s4) var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Ссылка на норму — синяя: это интерактив/источник, а не украшение. */
.rref-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  padding: 10px var(--s4);
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 18px;
  color: var(--accent);
}

.rref-item .ic { margin-top: 2px; color: var(--muted-2); }

.rbullets { border-top: 1px solid var(--border); }

.rbullets-title {
  padding: var(--s3) var(--s4) var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.rbullet-item {
  position: relative;
  padding: 6px var(--s4) 6px calc(var(--s4) + 14px);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}

.rbullet-item::before {
  content: "•";
  position: absolute;
  left: var(--s4);
  color: var(--muted-2);
}

/* Исходные данные: пары «метка — значение». */
.rinfo { border-top: 1px solid var(--border); }

.rinfo-p { margin: 0; }

.rinfo-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 8px var(--s4);
  border-top: 1px solid var(--border);
}

.rinfo-row:first-child { border-top: none; }

.rinfo-row__label {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.rinfo-row__value {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ВКЛАДКА «ТЕКСТ»
   Технический документ: обычный IBM Plex Sans, без <pre> и без моноширинного
   на всём тексте. Моноширинными остаются только числа.
   ========================================================================= */

.report-text {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
}

.report-text h2 {
  margin: 0 0 var(--s3);
  font-size: 19px;
  line-height: 24px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.report-text h3 {
  margin: var(--s5) 0 var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.report-text h3:first-child { margin-top: 0; }

.rt-rule {
  height: 0;
  margin: var(--s4) 0;
  border: none;
  border-top: 1px solid var(--border);
}

.rt-line {
  font-size: 15px;
  line-height: 22px;
  font-weight: 450;
  color: var(--ink);
}

.rt-bullet {
  position: relative;
  padding-left: 14px;
}

.rt-bullet::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--muted-2);
}

.rt-label {
  margin-top: var(--s4);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Числа внутри текста — моноширинные, но текст остаётся текстом. */
.rt-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.rt-candidate {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rt-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.rt-check--ok .rt-ic { color: var(--ok); }
.rt-check--bad .rt-ic { color: var(--bad); }

.rt-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--warn);
}

.rt-ic { margin-top: 3px; line-height: 0; flex: 0 0 auto; }

/* =========================================================================
   СХЕМА ЩИТА
   ========================================================================= */

.group-box {
  padding: var(--s4);
  margin-bottom: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}

.group-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 650;
  color: var(--ink);
}

/* Удаление группы — иконка корзины цветом ошибки, без заливки. */
.group-del {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--bad);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.group-del .ic { line-height: 0; }

.group-box > label { margin-top: var(--s3); }
.group-box > label:first-of-type { margin-top: 0; }
.group-box > input, .group-box > select { margin-bottom: 0; }
.group-box > .switch { margin-top: var(--s3); }

.board-incoming {
  padding: var(--s4);
  margin-top: var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.board-incoming__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-incoming__item {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.board-incoming__source {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--muted);
}

.board-warnings {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
}

.board-warnings__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
  color: var(--warn);
}

.board-warnings__item {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #6E4A05;
}

.board-warn-mark { flex: 0 0 auto; line-height: 0; }

/* =========================================================================
   ТАБЛИЦЫ СМЕТЫ
   Белые, без цветных строк; единицы измерения — в шапке столбца.
   ========================================================================= */

.estimate {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.estimate th {
  padding: 0 var(--s2) var(--s2);
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.estimate td {
  padding: 9px var(--s2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  vertical-align: top;
}

.estimate td:first-child { padding-left: 0; }
.estimate td:last-child, .estimate th:last-child { padding-right: 0; }

.estimate td.num {
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
}

.estimate tr.total td {
  border-top: 1px solid var(--border-strong);
  border-bottom: none;
  font-weight: 650;
}

/* =========================================================================
   СПИСКИ (СПРАВОЧНИКИ, ПРЕЙСКУРАНТ)
   ========================================================================= */

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) 0;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
}

.list-item:first-child { border-top: none; }

.list-item .price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Вариант строки без действия (позиция прейскуранта). */
.list-item--static { cursor: default; }

/* =========================================================================
   МЕЛКИЕ УТИЛИТЫ
   ========================================================================= */

.result { min-width: 0; }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 359px) {
  .stat__value { font-size: 24px; line-height: 28px; }
  .home-grid { gap: var(--s2); }
}