/* Nexus SCADA */
.hmi { width: min(520px, 100%); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.tank { position: relative; height: 240px; border: 3px solid #9aa3b2; border-radius: 16px 16px 10px 10px; background: #0b1220; overflow: hidden; }
.tank .lvl { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#22d3ee, #0e7490); transition: background .2s; }
.tank .lvl.hi, .tank .lvl.lo { background: linear-gradient(#ffb02e, #b45309); }
.tank .lvl.hh, .tank .lvl.ll { background: linear-gradient(#ff4d4d, #991b1b); }
.tank.trip { border-color: #ff4d4d; }
.tank .lim { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(255,255,255,.55); font: 600 10px var(--f-mono); color: #fff; padding-left: 4px; line-height: 1.4; }
.tank .lim.hh, .tank .lim.ll { border-color: #ff6b6b; color: #ff9b9b; }
.tank .pv { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); white-space: nowrap; font: 700 16px var(--f-mono); text-shadow: 0 1px 4px #000; }
.hmi-side { display: grid; gap: 10px; align-content: start; }
.pump { display: grid; gap: 2px; padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: #2a2d35; font-weight: 700; }
.pump small { font-family: var(--f-mono); color: var(--muted); }
.pump.on { border-color: #2fbf71; background: #173b29; }
.pump.on small { color: #8ee5a8; }
.hmi-tags { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hmi-tags div { padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.05); }
.hmi-tags dt { font-size: 11px; color: var(--muted); }
.hmi-tags dd { margin: 0; font-family: var(--f-mono); font-size: 13px; }
.trend { width: 100%; height: 70px; border-radius: 10px; background: #0b1220; border: 1px solid var(--line); }
.alarm-head, .alarm { display: grid; grid-template-columns: 74px minmax(0, 1fr) 70px; gap: 8px; align-items: center; text-align: left; }
.alarm-head { width: 100%; padding: 0 12px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.alarm-list { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; min-height: 200px; align-content: start; }
.alarm { width: 100%; min-height: 42px; padding: 6px 12px; border: 1px solid var(--line); border-left: 6px solid var(--a); border-radius: 10px; background: color-mix(in srgb, var(--a) 12%, transparent); animation: pop2 .15s; }
.alarm b { color: var(--a); font-size: 13px; }
.alarm span { font-family: var(--f-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm small { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.alarm.p1 { --a: #ff4d4d; }
.alarm.p2 { --a: #ff9f1c; }
.alarm.p3 { --a: #ffd84d; }
.alarm.p4 { --a: #5eb9ff; }
.vmap .rules { margin: 0; padding: 10px 14px; text-align: left; font-family: var(--f-mono); font-size: 13px; line-height: 1.7; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); }
.vmap .seq-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 430px) {
  .hmi { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .alarm-head, .alarm { grid-template-columns: 62px minmax(0, 1fr); }
  .alarm-head span:last-child, .alarm small { display: none; }
}