/* v3.8 — Shadow DOM реактора (см. AGENT_HANDOFF.md, п.6): хост-элемент с
   display:contents "исчезает" из раскладки — его контент из shadow root
   становится прямыми детьми родительского flex/grid-контейнера, как если
   бы Shadow DOM не было вовсе. Так исходная раскладка .console/
   .console-diagnostics/.console-thermal сохраняется без изменений, при
   этом сам DOM/CSS реактора физически изолирован в своём shadow root. */
.shadow-slot {
  display: contents;
}

/* ===== Токены ===== */
:root {
  --bg-deep: #14171a;
  --bg-panel: #1c2024;
  --bg-panel-raised: #23282d;
  --bg-panel-recessed: #171a1d;
  --border-hairline: #2f363c;
  --border-hairline-light: #3a4147;

  --text-primary: #e8ecef;
  --text-muted: #9aa4ad;  /* было #7c8791 (4.47:1, впритык) -> теперь 5.9-7.1:1 на всех фонах */
  --text-dim: #828c94;    /* было #4d565e (2.19:1, ПРОВАЛ) -> теперь 4.3-5.3:1 */

  --accent-green: #35e08a;
  --accent-green-dim: #1f7a4d;
  --accent-amber: #ffb020;
  --accent-red: #ff3b30;
  --accent-blue: #4fa3d1;

  --font-label: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-label);
  min-height: 100vh;
  line-height: 1.45; /* было не задано (браузерный дефолт ~1.2) — плотный текст слипался */
}

body {
  background-image:
    radial-gradient(ellipse at top, rgba(79, 163, 209, 0.04), transparent 60%);
  padding: 20px;
}

/* Полоса управления выровнена по левому краю блоков .console ниже
   (max-width + margin:0 auto — тот же приём, что и у .console), а не
   растянута по всей ширине экрана. Меню и Старт/Пауза сгруппированы
   слева, название — по центру (на месте бывших часов), скорость — справа. */
.title-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.title-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.title-bar-title .title-bar-suffix {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.reactor-select {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  cursor: pointer;
}

.reactor-select:hover:not(:disabled) { background: var(--border-hairline-light); }

.reactor-select:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.title-bar-title .version-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-green);
  vertical-align: middle;
  margin-left: 6px;
}

.main-menu {
  display: flex;
  gap: 6px;
}

.menu-item {
  position: relative;
}

/* v4.57 — по замечанию: пункт меню должен выглядеть как в обычном
   настольном приложении (File/Edit) — системный шрифт, обычное
   начертание, без CAPS LOCK и лишней жирности. Моноширинный шрифт (как у
   остальной панели) здесь неуместен — это навигация, а не показание
   прибора. */
.menu-item .menu-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.menu-item .menu-label::after {
  content: '▾';
  font-size: 8px;
  opacity: 0.6;
}

.menu-item:hover .menu-label,
.menu-item:focus .menu-label,
.menu-item:focus-within .menu-label {
  background: var(--border-hairline-light);
  color: var(--text-primary);
}

/* Выпадение — плоский список пунктов (без скруглений, без крупной тени
   и без просевшего внутреннего паддинга), тонкая рамка по контуру. */
.menu-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  /* top:100% вплотную к пункту меню — раньше здесь был зазор в 6px, из-за
     которого курсор при движении вниз выходил из зоны наведения .menu-item
     и меню закрывалось (пользователь: "выбирается с 4-5 попытки").
     Отступ теперь даёт padding-top самого выпадения, а не позиция —
     зазор больше не разрывает hover-область. */
  top: 100%;
  left: 0;
  min-width: 210px;
  padding-top: 4px;
  z-index: 30;
}

.menu-dropdown-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  border-radius: 0;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.menu-item:hover .menu-dropdown,
.menu-item:focus .menu-dropdown,
.menu-item:focus-within .menu-dropdown {
  display: flex;
}

/* v3.38 — после клика по кнопке внутри дропдаун должен закрыться сам
   (см. blur() в main.js), но если курсор мыши не двигался, правило
   .menu-item:hover .menu-dropdown выше продолжает держать его открытым —
   blur() снимает только фокус, а не hover. .js-closed форсирует закрытие
   поверх :hover; снимается в main.js по mouseleave с .menu-item, так что
   при следующем наведении дропдаун снова открывается как обычно. */
.menu-item.js-closed .menu-dropdown {
  display: none !important;
}

/* Пункты внутри выпадения — плоские строки списка, а не кнопки-панели:
   без рамки, без скругления, текст прижат влево, подсветка только на
   hover. Переопределяет базовый .btn (там центр/рамка/скругление —
   уместно для педали СБ и т.п., но не для строки меню). */
.menu-dropdown-inner .btn {
  margin-top: 0;
  width: auto;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.menu-dropdown-inner .btn:hover {
  background: var(--border-hairline-light);
}

.menu-dropdown-inner .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

/* v4.57 — настоящее вложенное подменю («Урок» -> список уроков), не плоский
   список вперемешку с «Сценарий»/«Состояние». Тот же язык, что у пункта
   верхнего уровня (.menu-item .menu-label), но раскрывается ВПРАВО
   (left:100%), а не вниз — стандартное поведение submenu в любом
   настольном приложении. */
.menu-subitem {
  position: relative;
}

.menu-subitem .menu-sublabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 400;
  padding: 7px 10px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.menu-subitem .menu-sublabel::after {
  content: '▸';
  font-size: 9px;
  opacity: 0.6;
}

.menu-subitem:hover .menu-sublabel,
.menu-subitem:focus-within .menu-sublabel {
  background: var(--border-hairline-light);
}

.menu-submenu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: -2px;
  left: 100%;
  min-width: 240px;
  padding-left: 4px;
  z-index: 40;
}

.menu-subitem:hover .menu-submenu,
.menu-subitem:focus-within .menu-submenu {
  display: flex;
}

.menu-submenu-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  padding: 2px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.menu-submenu-inner .btn {
  margin-top: 0;
  width: auto;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 400;
}

.menu-submenu-inner .btn:hover {
  background: var(--border-hairline-light);
}

.menu-submenu-empty {
  padding: 7px 10px;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto 18px auto;
  padding: 10px 4px 16px 4px;
  border-bottom: 1px solid var(--border-hairline);
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.speed-control .speed-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em; /* было 0.06em */
  margin-right: 4px;
}

.speed-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-muted);
  cursor: pointer;
}

.speed-btn:hover { color: var(--text-primary); }

.speed-btn.active {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: #eafff3;
  font-weight: 600;
}

.speed-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.run-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.run-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.run-btn:hover:not(:disabled) { color: var(--text-primary); }

.run-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.run-btn.btn-start-active {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: #eafff3;
}

.run-btn.btn-pause-active {
  background: #4a3208;
  border-color: var(--accent-amber);
  color: #ffe9bd;
}

/* Часы — теперь в стиле LCD (переиспользуют .lcd-screen/.lcd-value), но
   растянуты на всю ширину левой колонки и стоят над панелью
   «Активная зона», а не в строке заголовка. */
.left-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reactor-clock-lcd {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  padding: 7px 10px;
}

.reactor-clock-lcd .lcd-value {
  letter-spacing: 0.06em;
}

/* ===== Каркас панелей ===== */
canvas {
  /* v2.0 — без этого правила <canvas width="560"> внутри 2-колоночных
     grid-секций (см. .console-diagnostics ниже) не
     сжимался вместе с колонкой (min-width:auto по умолчанию у grid-треков
     "1fr" не даёт треку стать уже max-content содержимого) — это раздвигало
     ИМЕННО те панели с графиком (Уровни ядов, Доплер/Паровой ρ, термогидравлика) шире
     панелей без графика (Журнал событий/Сценарий) в соседней
     секции той же ширины. max-width:100% позволяет канве сжаться вместе с
     колонкой.

     v2.9.1 — единая высота графиков (100px, фикс. пиксели, не auto):
     графики в разных панелях лежат в контейнерах разной ширины
     (chart-row с легендой сбоку у́же, чем одиночный power-chart), поэтому
     height:auto с общим intrinsic width="560" давал разную высоту на
     экране. Фикс. height здесь ЕДИНСТВЕННЫЙ источник высоты — width
     всегда гибкий (max-width:100%).
  */
  max-width: 100%;
  width: 100%;
  height: 100px;
  display: block;
}

.console {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  /* v4.8 (этап 1 плана "рефакторинг вёрстки") — раньше 3 колонки
     заполнялись НЕЯВНО, по порядку DOM (через display:contents на
     shadow-слотах) — любой элемент, случайно оказавшийся вне своей
     .panel, съезжал по высоте СОСЕДНЕЙ колонки, а не своего содержимого
     (см. баг с кнопками АЗ-5 в v4.7). Явные area — тот же результат по
     виду, но позиция каждого блока не зависит от порядка/полноты разметки
     остальных. */
  grid-template-areas: "readouts params control";
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.left-col { grid-area: readouts; }
.panel-reactor-params { grid-area: params; }
.panel-rod-control { grid-area: control; }

@media (max-width: 900px) {
  .console {
    grid-template-columns: 1fr;
    grid-template-areas: "readouts" "params" "control";
  }
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 14px;
}

.panel-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em; /* было 0.16em — разрядка на мелком тексте вредит читаемости */
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
  line-height: 1.3;
}

/* ===== Активная зона: мнемосхема — УБРАНА в v4.7 (этап 3 плана
   "модернизация СУЗ"), см. dashboard.js/panel_template.js. % ввода теперь
   в ячейках гекс-карты (.hex-map-cell-pct ниже), перекос — на числовых
   табло. Блок правил (.mnemonic-wrap/.core-svg-cell/.rod-fill-rect/
   .gauge-track и т.д.) удалён вместе с разметкой — дальше сразу карта
   активной зоны · план. */

/* ===== Карта активной зоны · план (v4.1, 24-узловая сетка) =====
   Раньше была отдельной панелью (.plan-view-wrap) — уезжала во вторую
   строку CSS Grid, требовался скролл. Теперь — в одном ряду с картой
   групп стержней, см. .reactor-maps-row ниже. */
.reactor-maps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  row-gap: 12px;
  margin-bottom: 6px;
}
.reactor-map-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0; /* даёт flex-детям сжиматься ниже content-size вместо overflow */
}
/* v4.9 этап 3 (рефакторинг вёрстки) — раньше <svg> носили фиксированные
   px width/height прямо в атрибутах (не сжимались с контейнером). Теперь
   размер задаёт только CSS, а viewBox (в разметке) держит пропорции —
   ужимается вместе с окном вместо обрезания/наезда. max-width — это
   старый px-размер атрибута, теперь верхний потолок, не жёсткое значение. */
.reactor-map-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* v4.33 (починка карты СУЗ после расширения до 37 групп, см.
   AGENT_HANDOFF.md) — viewBox карты «Группы СУЗ» вырос со 240×220 до
   332×300, чтобы вместить кольцо 3 (см. panel_template.js). max-width
   поднят СТРОГО пропорционально (200×332/240≈277px), чтобы сохранить
   тот же масштаб SVG-единица→экранный px (~0.833), какой уже был
   откалиброван под текст в ячейках (шрифт 15 SVG-units/подложка 28
   SVG-units, см. dashboard.js buildHexMapSvg()) — эти числа НЕ менялись,
   т.к. при сохранённом масштабе они по-прежнему корректны. */
.reactor-map-svg--hex { max-width: 277px; }
.reactor-map-svg--plan { max-width: 184px; }
.reactor-map-svg--axial { max-width: 36px; }
.reactor-map-caption {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-dim);
  display: flex; align-items: center; gap: 3px;
}
.plan-view-cell {
  stroke: var(--bg-panel-recessed);
  stroke-width: 1.5;
  transition: fill 0.3s linear;
}
.plan-view-ring-label {
  font-family: var(--font-mono); font-size: 8px; fill: var(--text-dim);
}
.axial-view-cell {
  stroke: var(--bg-panel-recessed);
  stroke-width: 1.5;
  transition: fill 0.3s linear;
}
.axial-view-divider {
  stroke: var(--bg-panel-recessed);
  stroke-width: 2;
}

/* ===== Стержни: один контекстный контрол вместо 19 степперов (v4.7, этап 3) ===== */
.rod-mode-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.rod-mode-btn {
  flex: 1 1 0;
  padding: 6px 0;
  border-radius: 3px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.rod-mode-btn.rod-mode-active {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: var(--text-primary);
}
.rod-selected-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.4;
}
.hint-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.rod-ctrl-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 2px;
}

.rod-ctrl-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}


.rod-ctrl-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 36px;
  text-align: center;
}
.rod-ctrl-val.warn { color: var(--accent-amber); }
.rod-ctrl-val.scram { color: var(--accent-red); }

/* ===== Мнемопанель БЩУ (аварийные табло) ===== */
.annunciator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.annun-tile {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 4px;
  border-radius: 3px;
  border: 2px solid var(--border-hairline);
  background: var(--bg-panel-recessed);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.annun-tile.annun-caution {
  background: linear-gradient(180deg, #4a3208, #2c1e08);
  border-color: var(--accent-amber);
  color: #ffe9bd;
}

.annun-tile.annun-alarm {
  background: linear-gradient(180deg, #5c130e, #3a0d09);
  border-color: var(--accent-red);
  color: #ffd9d5;
}

.annun-tile.annun-disabled {
  opacity: 0.35;
  border-style: dashed;
}

/* ===== Значок-подсказка "?" в заголовке панели ===== */
.panel-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.info-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-hairline-light);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.info-icon:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

.info-icon.is-open {
  color: var(--text-primary);
  border-color: var(--accent-blue);
}

.info-tooltip {
  display: none;
  position: absolute;
  top: 22px;
  right: 0;
  width: 260px;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-hairline-light);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.info-icon.is-open .info-tooltip {
  display: block;
}

/* ===== Карта активной зоны · соты (v4.1, заменяет аналоговый индикатор мощности) ===== */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

.hex-map-cell {
  stroke: var(--bg-panel-recessed);
  stroke-width: 2;
  transition: fill 0.3s linear, stroke 0.15s linear;
  cursor: pointer; /* v4.7 (этап 3) — клик выбирает стержень/группу */
}
.hex-map-cell-selected {
  stroke: var(--accent-blue);
  stroke-width: 2.5;
}
/* v4.62 — «сюда кликнуть» (см. LESSON_FORMAT_SPEC.md, goal.highlightCellIds) —
   статичная зелёная обводка ячейки, которую нужно тронуть на ЭТОМ шаге
   урока. Без анимации (по замечанию пользователя — просилась обычная
   рамка, не мигающая). Отдельно от .hex-map-cell-selected (синяя — что
   выбрано СЕЙЧАС кликом пользователя): оба класса могут стоять на одной
   ячейке одновременно. */
.hex-map-cell-lesson-target {
  stroke: var(--accent-green);
  stroke-width: 3;
}
.hex-map-cell-pct-bg {
  fill: rgba(10, 12, 14, 0.72);
  pointer-events: none;
}
.hex-map-cell-pct {
  font-family: var(--font-mono);
  font-size: 15px; /* см. комментарий в dashboard.js buildHexMapSvg() — масштаб viewBox/max-width (v4.33) сохранён ~0.833, даёт ~12.5 экранных px, соблюдён минимум 12px */
  fill: #ffffff;
  pointer-events: none;
}

.gauge-readout {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  justify-content: center;
}

.readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.readout-label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Заглавные греческие ρ/β визуально неотличимы от латинских P/B — точечно
   отключаем uppercase только на этом символе внутри подписей, которые
   иначе капсятся целиком (readout-label, thermal-readout .label). */
.no-caps {
  text-transform: none;
}

.readout .lcd-screen {
  width: 92px;
  justify-content: center;
}

.gauge-readout-secondary {
  margin-top: 10px;
}

/* ===== ЖК-табло (общий стиль: центральная панель + левая панель) =====
   Единый размер шрифта 16pt для value/unit/trend на всех табло — раньше
   размер плавал (18/16/14/12px) в зависимости от панели. */
.lcd-screen {
  background: #aab89e;
  border-radius: 3px;
  padding: 3px 7px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.lcd-value,
.lcd-unit,
.lcd-trend {
  font-size: 16px;
}

.lcd-value {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #22281c;
}

.lcd-value.caution { color: #6b4a06; }
.lcd-value.alarm { color: #7a1f1a; }

/* Рамка вокруг табло при критическом/предупредительном значении — alarm
   красная, caution жёлтая. */
.lcd-screen:has(.lcd-value.alarm) {
  outline: 2px solid var(--accent-red);
  outline-offset: 1px;
}
.lcd-screen:has(.lcd-value.caution) {
  outline: 2px solid var(--accent-amber);
  outline-offset: 1px;
}

/* v4.62 — «сюда смотреть» (см. LESSON_FORMAT_SPEC.md,
   goal.highlightReadoutIds) — статичная зелёная рамка на конкретном
   цифровом табло. Тот же приём :has(), что у alarm/caution выше — класс
   .lesson-target вешается на .lcd-value (у него уже есть стабильный id,
   см. panel_template.js readout-power-pct и т.д.), а не заводится
   отдельный id на обёртке .lcd-screen. :not() — тревога/предупреждение
   важнее учебной подсказки, не перекрываем их цвет. Без анимации (по
   замечанию пользователя — нужна обычная рамка, не мигающая). */
.lcd-screen:has(.lcd-value.lesson-target):not(:has(.lcd-value.alarm)):not(:has(.lcd-value.caution)) {
  outline: 2px solid var(--accent-green);
  outline-offset: 1px;
}

.lcd-unit {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #22281c;
}

.lcd-trend {
  font-family: 'Courier New', monospace;
  color: #22281c;
}

/* v1.9 — "живой" индикатор (см. Dashboard._setAliveChevron): реактор застрял
   ниже порога отображения мощности, стрелка тренда была бы неотличима от
   реального зависания интерфейса. Анимация — на CSS, т.е. по РЕАЛЬНОМУ
   времени пользователя, а не по модельному/кадрам рендера — мигает ровно
   так же на ×1 и на ×3600. */
.lcd-trend.alive {
  color: var(--accent-green);
  animation: lcd-alive-blink 2.4s ease-in-out infinite;
}

@keyframes lcd-alive-blink {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* ===== ЖК-табло левой панели: Xe/Sm/Т топлива/паросодержание ===== */
.core-readouts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.core-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.core-readout-label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 60px;
}

.core-readout .lcd-screen {
  width: 108px;
  justify-content: flex-end;
}

/* ===== График ===== */
.chart-wrap {
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  background: var(--bg-panel-recessed);
  padding: 6px;
}

/* ===== Управление СУЗ: кнопки шага (заменили слайдер — см. AGENT_HANDOFF.md) ===== */
.rod-step-btn {
  width: 30px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.rod-step-btn:hover:not(:disabled) {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
}

.rod-step-btn:active:not(:disabled) { transform: translateY(1px); }

.rod-step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover { background: var(--border-hairline-light); }

.btn-scram {
  background: linear-gradient(180deg, #8a1f18, #5c130e);
  border-color: #a8291f;
  color: #ffd9d5;
  margin-top: 6px;
  padding: 16px 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.btn-scram:hover { background: linear-gradient(180deg, #a8291f, #6e180f); }

.btn-release-scram {
  margin-top: 8px;
  background: var(--bg-panel-recessed);
  border-color: var(--accent-amber);
  color: #ffe9bd;
}

.btn-release-scram:hover:not(:disabled) { background: #3a2c10; }

.btn-release-scram:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border-hairline-light);
  color: var(--text-dim);
}

/* v4.15 — АР (автоматический регулятор мощности), см. control_rods.js.
   is-on/is-off — оба ОСМЫСЛЕННЫЕ состояния (не "выключенная кнопка"),
   поэтому не переиспользуем .rod-mode-active/.speed-btn.active в чистом
   виде — нужен явный красный для "выключено", а не серый по умолчанию. */
.btn-ar,
.btn-avr {
  margin-top: 6px;
}

.btn-ar.is-on,
.btn-avr.is-on {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: #eafff3;
}

.btn-ar.is-off,
.btn-avr.is-off {
  background: linear-gradient(180deg, #8a1f18, #5c130e);
  border-color: #a8291f;
  color: #ffd9d5;
}

.btn-ar:disabled,
.btn-avr:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-reset {
  margin-top: 8px;
  background: var(--bg-panel-recessed);
}

.btn-save-log {
  margin-top: 10px;
  background: var(--bg-panel-recessed);
}

.status-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  min-height: 16px;
  line-height: 1.4;
}

.status-line.alarm { color: var(--accent-red); font-weight: 600; }

/* v2.3 — терминальная авария: обратный отсчёт (см. Dashboard.updateDangerCountdown()).
   Пустой div ничего не занимает (padding/border только когда .visible). */
.danger-countdown {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-red);
  letter-spacing: 0.02em;
}

.danger-countdown.visible {
  padding: 8px 16px;
  margin: 0 0 12px 0;
  border: 1px solid var(--accent-red);
  border-radius: 6px;
  background: rgba(255, 59, 48, 0.08);
  animation: danger-pulse 1s ease-in-out infinite;
}

@keyframes danger-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ===== Диагностика: сводка состояния + журнал событий ===== */
.console-diagnostics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "log side"; /* v4.8, тот же приём, что у .console выше */
  gap: 16px;
  max-width: 1180px;
  margin: 16px auto 0;
}
#event-log-panel { grid-area: log; }
.right-col { grid-area: side; }

@media (max-width: 900px) {
  .console-diagnostics {
    grid-template-columns: 1fr;
    grid-template-areas: "log" "side";
  }
}

.event-log {
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

.event-item {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.event-item:last-child { border-bottom: none; }

.event-time { color: var(--text-dim); flex-shrink: 0; }
.event-text { color: var(--text-primary); }

.event-item.caution .event-text { color: var(--accent-amber); }
.event-item.alarm .event-text { color: var(--accent-red); font-weight: 600; }

/* Полоса-скролл в фирменном стиле панели */
.event-log::-webkit-scrollbar { width: 8px; }
.event-log::-webkit-scrollbar-track { background: var(--bg-panel-recessed); }
.event-log::-webkit-scrollbar-thumb { background: var(--border-hairline-light); border-radius: 4px; }

/* ===== Сценарий (v1.17) — теперь правая панель в .console-diagnostics ===== */
.scenario-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.scenario-title .scenario-subtitle {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
}

/* v4.54 — кнопки быстрого перехода к состояниям урока (P50/P80/...), см.
   LESSON_FORMAT_SPEC.md states[]/dashboard.js renderStateBookmarks(). Пусто
   (нет и label), если урок не задаёт states[] — обычный сценарий/состояние. */
.scenario-state-bookmarks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.scenario-state-bookmarks:empty {
  display: none;
  margin-bottom: 0;
}

.scenario-state-bookmarks-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 2px;
}

.state-bookmark-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline-light);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  cursor: pointer;
}

.state-bookmark-btn:hover {
  background: var(--border-hairline-light);
}

.scenario-goals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scenario-goal-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 0;
}

/* v2.0 — «Порядок действий», лесонский блок инструкций (см. dashboard.js:
   renderScenarioPanel). Присутствует только у уроков (instructions[]),
   визуально отделён от списка целей рамкой/фоном полегче. */
.scenario-instructions {
  background: var(--bg-panel-recessed);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.scenario-instructions-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.scenario-instructions-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.scenario-instructions-list li {
  padding-left: 2px;
}

.scenario-goal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel-recessed);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 8px 10px;
}

.scenario-goal-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border-hairline-light);
}

/* exercise выполнен или task сейчас удовлетворён — закрашенный зелёный */
.scenario-goal.completed .scenario-goal-dot {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
}

/* task, ранее выполнявшийся и сейчас откатившийся (guarded-reach failed) —
   явно отличим от "ещё не начат", чтобы оператор видел именно срыв, а не
   безразличный серый кружок */
.scenario-goal.failed .scenario-goal-dot {
  border-color: var(--accent-red);
}

.scenario-goal-body { flex: 1; min-width: 0; }

.scenario-goal-text {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
}

.scenario-goal.completed .scenario-goal-text {
  color: var(--text-muted); /* выполненная цель — не привлекает внимание, но остаётся читаемой */
}

.scenario-goal-progress-track {
  background: var(--bg-panel);
  border-radius: 3px;
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
}

.scenario-goal-progress-fill {
  background: var(--accent-green);
  height: 100%;
}

.scenario-goal-meta {
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}

/* v2.0 — sequentialGoals ("одна цель за раз"), см. dashboard.js
   _renderSequentialGoals()/_renderGoalCard(). */

/* Персональная инструкция ОДНОЙ цели ("Как сделать") — визуально чуть
   компактнее общего лесонного .scenario-instructions (тот выше, на весь
   урок), т.к. живёт внутри тела карточки цели, а не отдельным блоком. */
.scenario-goal-instructions {
  background: var(--bg-panel-recessed);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
}

.scenario-goal-instructions .scenario-instructions-title {
  margin-bottom: 4px;
}

.scenario-goal-instructions .scenario-instructions-list {
  font-size: 12px;
}

/* История уже пройденных целей — короткие свёрнутые строки над активной
   целью, без текста задания/инструкции (чтобы не спойлерить и не грузить
   панель — сам текст цели больше не нужен, она уже выполнена). */
.scenario-goals-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.scenario-goal-collapsed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.scenario-goal-collapsed-dot {
  color: var(--accent-green);
  font-weight: 700;
  flex-shrink: 0;
}

.scenario-goal-collapsed-title {
  text-decoration: line-through;
  text-decoration-color: var(--border-hairline-light);
}

/* Баннер, когда пройдены ВСЕ цели урока (sequentialGoals) — заменяет собой
   карточку активной цели, т.к. активной цели больше нет. */
.scenario-complete-banner {
  background: var(--bg-panel-recessed);
  border: 1px solid var(--accent-green-dim);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--accent-green);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ===== Правая колонка .console-diagnostics: Сценарий + Топливная кампания
   сложены друг под другом, обе — сворачиваемые панели (нативный
   <details>/<summary>, без JS). ===== */
.right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* v4.42 — компактная закреплённая полоска "текущая цель" (см.
   index.html, Dashboard.renderScenarioPanel()). position:sticky, а не
   fixed — держится под верхним краем видимой области при скролле, но не
   выпадает из нормального потока документа (не перекрывает контент, пока
   страница не проскроллена; max-width/margin:0 auto — тот же приём
   центрирования, что у .console/.title-bar выше). hidden, пока нет
   активной цели (нет сценария, сценарий без целей, или non-sequential
   без единой "активной" цели — см. JS). */
.scenario-pin-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  border-top: none;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  font-size: 12.5px;
}

.scenario-pin-bar:hover { background: var(--bg-panel-recessed); }

/* v4.66 — стрелки ▲/▼ (см. dashboard.js _renderScenarioPinBar) — компактные
   квадратные кнопки по краям полоски, не растягиваются (flex:none), гасят
   клик через stopPropagation в JS, чтобы не срабатывал скролл-к-панели у
   родителя. disabled — дальше листать некуда (в начале истории или
   упёрлись в реально активный шаг). */
.scenario-pin-nav-btn {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hairline-light);
  border-radius: 3px;
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.scenario-pin-nav-btn:hover:not(:disabled) {
  background: var(--border-hairline-light);
}

.scenario-pin-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scenario-pin-body {
  flex: 1;
  min-width: 0; /* иначе flex-item не даёт .scenario-pin-text сжиматься/переносить строки */
}

.scenario-pin-step-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.scenario-pin-done-badge {
  color: var(--accent-green);
}

/* v4.65 — раньше одна строка с многоточием (white-space:nowrap +
   text-overflow:ellipsis) обрезала текст цели, если он не помещался — по
   замечанию пользователя это выглядело как "недоговорил". Теперь до 2
   строк целиком (-webkit-line-clamp — работает во всех актуальных
   движках, несмотря на префикс, это давно не только-webkit фича), дальше
   обрезаем только если совсем не влезло. align-items:flex-start на
   .scenario-pin-bar выше — чтобы прогресс-бар справа не растягивался по
   высоте вслед за двумя строками текста, а прижимался к первой строке. */
.scenario-pin-text {
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.scenario-pin-progress-track {
  background: var(--bg-panel-recessed);
  border-radius: 3px;
  height: 6px;
  width: 120px;
  flex: none;
  overflow: hidden;
  margin-top: 4px; /* v4.65 — выравнивание по первой строке после line-clamp:2 выше */
}

.scenario-pin-progress-fill {
  background: var(--accent-green);
  height: 100%;
}

.scenario-pin-pct {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  flex: none;
  margin-top: 2px; /* v4.65 — см. .scenario-pin-progress-track выше */
}

.panel-collapsible summary.panel-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.panel-collapsible summary.panel-summary::-webkit-details-marker { display: none; }
.panel-collapsible summary.panel-summary::marker { content: ""; }

.panel-collapsible summary.panel-summary::after {
  content: '▸';
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
  margin-left: 8px;
}

.panel-collapsible details[open] summary.panel-summary::after {
  transform: rotate(90deg);
}

.panel-collapsible-body {
  padding-top: 12px;
}

/* Панель Сценарий, пока ничего не загружено — свёрнута и приглушена;
   активируется/раскрывается автоматически, когда загружен урок, сценарий
   или демонстрация (см. главное меню «Загрузить»). */
.panel-inactive summary.panel-summary { color: var(--text-dim); }
.panel-state-tag { display: none; }
.panel-inactive .panel-state-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border: 1px solid var(--border-hairline-light);
  border-radius: 3px;
  padding: 2px 8px;
  margin-left: 10px;
}

/* Легенда — справа от графика, а не под ним: график сжимается (min-width:0),
   легенда становится узкой колонкой фиксированной ширины. */
.chart-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.chart-row .chart-wrap {
  flex: 1;
  min-width: 0;
}

.chart-row .chart-legend {
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  white-space: nowrap;
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  justify-content: center;
}

.legend-item {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.swatch-xe { background: #ff3b30; }
.swatch-pm { background: #ffb020; }
.swatch-sm { background: #4fa3d1; }
.swatch-tfuel { background: #ff8a3d; }
.swatch-doppler { background: #8a6fd1; }
.swatch-voidrho { background: #ffb020; }

/* ===== Термогидравлика (Stage 3) ===== */
.console-thermal {
  max-width: 1180px;
  margin: 16px auto 0;
}

.thermal-readouts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .thermal-readouts { grid-template-columns: repeat(2, 1fr); }
}

.thermal-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thermal-readout .label {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.thermal-readout .label .info-icon {
  margin-left: 4px;
  vertical-align: middle;
}

.thermal-readout .value {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-primary);
}

.thermal-readout .value.caution { color: var(--accent-amber); }
.thermal-readout .value.alarm { color: var(--accent-red); font-weight: 600; }

/* Та же рамка, что у .lcd-screen — alarm красная, caution жёлтая. */
.thermal-readout:has(.value.alarm) {
  outline: 2px solid var(--accent-red);
  outline-offset: 1px;
}
.thermal-readout:has(.value.caution) {
  outline: 2px solid var(--accent-amber);
  outline-offset: 1px;
}

.void-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  align-self: stretch; /* v4.1 — иначе схлопывается внутри .gauge-wrap (align-items:center) */
}

.void-gauge-wrap label {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.void-gauge {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: var(--bg-panel-recessed);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}

.void-gauge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4fa3d1, #ff8a3d);
  transition: width 0.2s;
}

.void-gauge-wrap .val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* v4.24 — панель "Контур циркуляции" (шаг 4 насосной подсистемы КМПЦ, см.
   AGENT_HANDOFF.md). Отдельная полноразмерная секция после термогидравлики,
   в том же shadow root (slot-console-thermal) — не отдельный слот. */
.panel-coolant-loops {
  margin-top: 16px;
}

.coolant-loops-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .coolant-loops-row { grid-template-columns: 1fr; }
}

.coolant-loop {
  background: var(--bg-panel-recessed);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  padding: 10px 12px;
}

.coolant-loop-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hairline-light);
}

.coolant-loop-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.coolant-loop-flow {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-primary);
}

.pump-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.pump-row + .pump-row {
  border-top: 1px dashed var(--border-hairline);
}

.pump-name {
  font-size: 12px;
  color: var(--text-primary);
}

/* Лампа состояния насоса — серая (off), зелёная (running), жёлтая
   (starting/stopping — разгон/останов, см. flowShare в coolant_pumps.js),
   красная (tripped). Тот же смысл, что у annun-tile, но как точка, не
   полноразмерная плитка — насосов 8, целая плитка на каждый была бы слишком
   тяжёлой для панели. */
.pump-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

.pump-status.pump-running {
  background: var(--accent-green);
  box-shadow: 0 0 4px var(--accent-green);
}

.pump-status.pump-transit {
  background: var(--accent-amber);
}

.pump-status.pump-tripped {
  background: var(--accent-red);
  box-shadow: 0 0 4px var(--accent-red);
}

.pump-toggle {
  width: auto;
  padding: 5px 10px;
  font-size: 10px;
}

.pump-toggle.is-on {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: #eafff3;
}

.pump-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Отдельная кнопка "сброс аварии" — сорванный насос обычным тумблером не
   запустить (см. coolant_pumps.js: startPump() игнорирует tripped). Кнопка
   появляется только при tripped=true (hidden-атрибут, см. controls_panel.js). */
.pump-reset-trip {
  width: auto;
  padding: 5px 10px;
  font-size: 10px;
  background: var(--bg-panel-recessed);
  border-color: var(--accent-amber);
  color: #ffe9bd;
}

.pump-reset-trip:hover {
  background: #3a2c10;
}

/* Полоса состава топлива (снимок, не время) */
.composition-bar {
  display: flex;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-hairline-light);
  margin: 10px 0 4px 0;
}

.composition-bar .seg {
  height: 100%;
}

.composition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.composition-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Управление топливной кампанией */
.burnup-mode-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.burnup-mode-toggle .btn {
  flex: 1;
  padding: 8px;
  font-size: 11.5px;
}

.burnup-mode-toggle .btn.active {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: #eafff3;
}

.preset-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

/* Раньше отсутствовало: JS проставлял .active на кнопки пресета
   (Свежее/Середина/Конец), но подсветка для них никогда не была задана в CSS
   — существовало только правило для .burnup-mode-toggle. Баг, найденный при
   тестировании v0.6. */
.preset-row .btn.active {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: #eafff3;
}

.preset-row .btn {
  flex: 1;
  padding: 7px;
  font-size: 11px;
}

.burnup-readout {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.4;
}

.burnup-readout .val { color: var(--text-primary); font-weight: 600; }