/* ══ SENSBAR (Датчики) ══ */
#sensbar { grid-row: 2; grid-column: 2; background: var(--bg); border-bottom: 2px solid var(--border); display: flex; align-items: stretch; overflow: hidden; }
.sb-card { display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(6px, calc(0.52 * var(--u)), 16px) clamp(14px, calc(1.15 * var(--u)), 34px); border-right: 1px solid var(--border); flex-shrink: 0; gap: clamp(4px, calc(0.36 * var(--u)), 10px); border-top: 6px solid transparent; }
/* Насос + Сектор — зелёный */
#sensbar .sb-card:nth-child(1) { border-top-color: var(--green); }
#sensbar .sb-card:nth-child(2) { border-top-color: var(--green); }
/* Датчики (pH+EC+T) — синий */
#sensbar .sb-card:nth-child(3) { border-top-color: var(--accent); }

/* Датчики: внутренняя сетка */
.sb-sens-grid { display: flex; align-items: center; gap: 0; margin-top: auto; }
.sb-sens-col { display: flex; flex-direction: column; gap: clamp(2px, calc(0.16 * var(--u)), 5px); }
.sb-sens-sep { width: 1px; background: var(--border); height: 50%; align-self: center; margin: 0 clamp(8px, calc(0.63 * var(--u)), 18px); flex-shrink: 0; }
.sb-title { font-family: var(--mono); font-size: clamp(12px, calc(0.94 * var(--u)), 28px); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); line-height: 1; }
.sb-title.active-green { color: var(--green); }
.sb-title.active-blue { color: var(--accent); }
.sb-rows { display: flex; flex-direction: column; gap: clamp(2px, calc(0.16 * var(--u)), 5px); margin-top: auto; }
.sb-row { display: flex; align-items: baseline; gap: clamp(5px, calc(0.42 * var(--u)), 12px); min-height: clamp(18px, calc(1.46 * var(--u)), 44px); }
.sb-key { font-family: var(--mono); font-size: clamp(9px, calc(0.63 * var(--u)), 18px); color: var(--text3); min-width: clamp(28px, calc(2.08 * var(--u)), 60px); flex-shrink: 0; }
/* Индикатор активного канала pH/EC/T — зелёный текст метки (рН/ЕС/Т). */
.sb-row.ch-active .sb-key { color: var(--green); font-weight: 700; }
.sb-val { font-family: var(--mono); font-size: clamp(18px, calc(1.46 * var(--u)), 44px); font-weight: 600; color: var(--text); line-height: 1; }
.sb-val[data-vs="err"] { color: var(--red); }
.sb-val[data-vs="no"]  { color: var(--text3); }
.sb-unit { font-family: var(--mono); font-size: clamp(8px, calc(0.57 * var(--u)), 17px); color: var(--text3); }
.sb-vol-reset { margin-left: clamp(6px, calc(0.42 * var(--u)), 12px); font-weight: 700; font-size: clamp(13px, calc(0.94 * var(--u)), 22px); line-height: 1; cursor: pointer; padding: 0; }
.sb-vol-reset.tl-ibtn { width: clamp(14px, calc(1.09 * var(--u)), 32px); height: clamp(14px, calc(1.09 * var(--u)), 32px); }
.sb-title-row { display: flex; align-items: center; gap: clamp(5px, calc(0.42 * var(--u)), 12px); }
.sb-dot-ph { width: clamp(10px, calc(0.83 * var(--u)), 24px); height: clamp(10px, calc(0.83 * var(--u)), 24px); flex-shrink: 0; }
.pump-led { width: clamp(10px, calc(0.83 * var(--u)), 24px); height: clamp(10px, calc(0.83 * var(--u)), 24px); border-radius: 50%; background: var(--border2); transition: all .3s; }
.pump-led.on { background: var(--green); box-shadow: 0 0 clamp(6px, calc(0.52 * var(--u)), 14px) rgba(13,168,106,.6); }
.sb-inline-sep { color: var(--border); font-family: var(--mono); font-size: clamp(11px, calc(0.83 * var(--u)), 25px); font-weight: 300; margin: 0 clamp(1px, calc(0.1 * var(--u)), 3px); }
.sb-val-w { min-width: 4ch; display: inline-block; }

/* Essence dosing units — обёртка для отдельных sb-card */
.sb-ess-wrap { display: contents; }
.sb-card-ess { border-top-color: #9b59b6 !important; }
.sb-ess-dot { width: clamp(10px, calc(0.83 * var(--u)), 24px); height: clamp(10px, calc(0.83 * var(--u)), 24px); border-radius: 50%; background: var(--border2); transition: all .3s; flex-shrink: 0; }
.sb-ess-dot.on { background: var(--green); box-shadow: 0 0 clamp(6px, calc(0.52 * var(--u)), 14px) rgba(13,168,106,.6); }
.sb-ess-dot.flash { animation: ess-flash 0.3s ease-out; }
@keyframes ess-flash { 0%{transform:scale(1)} 40%{transform:scale(1.8);box-shadow:0 0 12px #fff,0 0 20px var(--green);background:#fff} 100%{transform:scale(1)} }
/* Бутлоадер — синий мигание */
.sb-ess-dot.bootloader { background: var(--accent); box-shadow: 0 0 clamp(4px, calc(0.36 * var(--u)), 10px) rgba(26,110,245,.6); animation: ess-state-blink 1s ease-in-out infinite; }
/* Warning — оранжевый */
.sb-ess-dot.warning { background: var(--orange); box-shadow: 0 0 clamp(4px, calc(0.36 * var(--u)), 10px) rgba(224,120,32,.6); animation: ess-state-blink 1s ease-in-out infinite; }
/* Error — красный */
.sb-ess-dot.error { background: var(--red); box-shadow: 0 0 clamp(4px, calc(0.36 * var(--u)), 10px) rgba(224,48,48,.6); animation: ess-state-blink 1s ease-in-out infinite; }
@keyframes ess-state-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
/* Essence val/sub off state */
.sb-ess-val.off, .sb-ess-sub.off { color: var(--text3); }

/* Строка 2 бочки: позиция + расход. Desktop — в одну строку рядом;
   mobile (mobile.css) — колонкой (расход переносится 3-й строкой). */
.sb-ess-r2 { flex-wrap: wrap; }
.sb-ess-grp { display: inline-flex; align-items: baseline; gap: clamp(5px, calc(0.42 * var(--u)), 12px); }
.sb-ess-grp + .sb-ess-grp { margin-left: clamp(8px, calc(0.7 * var(--u)), 18px); }

/* Массовый расход г/мин — вторичное значение (цвет как у графика «Расход массы») */
.sb-ess-flow {
  font-family: var(--mono);
  font-size: clamp(11px, calc(0.83 * var(--u)), 24px);
  font-weight: 600; color: #06b6d4; line-height: 1;
}
.sb-ess-flow.off { color: var(--text3); }

/* Essence карточка: вертикальная полоска слева на всю высоту + содержимое справа */
.sb-card-ess { flex-direction: row !important; align-items: stretch; gap: clamp(6px, calc(0.5 * var(--u)), 14px); }
.sb-ess-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; gap: clamp(4px, calc(0.36 * var(--u)), 10px); }

/* Вертикальная полоска заполнения бочки — на всю высоту карточки */
.sb-ess-vbar {
  position: relative;
  width: clamp(27px, calc(2.025 * var(--u)), 54px);
  align-self: stretch;
  background: var(--border2, rgba(120,120,120,.2));
  border-radius: 3px;
  overflow: visible;
  flex-shrink: 0;
}
.sb-ess-vbar-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(to top, #0d47a1, #2196f3);
  border-radius: 3px;
  transition: height 0.4s, background 0.3s;
}
/* Состояния: переполнено (>100%) — розовый; ниже порога — оранжевый; <20% — жёлтый */
.sb-ess-vbar.state-over .sb-ess-vbar-fill { background: linear-gradient(to top, #ad1457, #ec407a); }
.sb-ess-vbar.state-low  .sb-ess-vbar-fill { background: linear-gradient(to top, #e65100, #ff9800); }
.sb-ess-vbar.state-warn .sb-ess-vbar-fill { background: linear-gradient(to top, #f57f17, #fbc02d); }
.sb-ess-vbar-thr {
  position: absolute; left: -2px; right: -2px;
  height: 2px; bottom: 0;
  background: var(--red, #e85050);
  z-index: 2; pointer-events: none;
  transition: bottom 0.4s;
  box-shadow: 0 0 3px rgba(232, 80, 80, 0.6);
}