.config-dialog {
  width: min(1380px, calc(100% - 24px));
  height: min(940px, calc(100vh - 24px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #605e5c;
  border-radius: 2px;
  box-shadow: 0 20px 70px #0006;
}

.config-dialog-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  background: #f3f3f3;
}

.config-dialog-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  color: #fff;
  background: var(--office-blue);
}
.config-dialog-header h2 { margin: 0 0 2px; font-size: 16px; }
.config-dialog-header p { margin: 0; color: #fff; font-size: 11px; opacity: .9; }
.config-dialog-header .secondary { border-color: #ffffff80; background: transparent; color: #fff; }
.config-dialog-header .secondary:hover { background: #ffffff18; }

.config-dialog-toolbar {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 0;
  background: #fff;
  border-bottom: 1px solid var(--office-line);
}
.config-dialog-toolbar button { min-height: 30px; }
.config-dialog-toolbar .tab-button { border-color: transparent; border-radius: 0; background: transparent; }
.config-dialog-toolbar .tab-button:hover { background: var(--office-gray); }
.config-dialog-toolbar .active-tab { color: var(--office-blue); border-bottom: 3px solid var(--office-blue); }
.config-toolbar-spacer { flex: 1; }
.config-object-counts { color: var(--muted); font-size: 11px; white-space: nowrap; }

.config-section-tabs {
  min-height: 36px;
  display: flex;
  align-items: end;
  gap: 1px;
  padding: 3px 8px 0;
  overflow-x: auto;
  background: var(--office-gray);
  border-bottom: 1px solid var(--office-line-dark);
}
.config-section-tabs button {
  min-width: 92px;
  min-height: 32px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}
.config-section-tabs button:hover { background: #fff; color: var(--office-blue-dark); }
.config-section-tabs button.active-tab {
  color: var(--office-blue-dark);
  border-color: var(--office-line-dark);
  background: #fff;
}
.config-tab-panel { min-height: 100%; }

.config-error-summary { margin: 0; padding: 6px 10px; border-bottom: 1px solid #d8797e; background: var(--danger-pale); font-family: inherit; font-size: 11px; }
.config-error-summary:empty { display: none; }

.config-dialog-body { overflow: auto; padding: 8px; background: #f3f3f3; }
.config-dialog-footer {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 6px 10px;
  background: #fff;
  border-top: 1px solid var(--office-line);
}
.footer-hint { margin-right: auto; color: var(--muted); font-size: 11px; }
#config-editor { min-height: calc(100vh - 190px); font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.4; tab-size: 2; }

.config-section {
  margin: 0 0 7px;
  border: 1px solid var(--office-line);
  background: #fff;
}
.config-section > summary {
  min-height: 31px;
  padding: 6px 9px;
  cursor: pointer;
  color: #323130;
  background: var(--office-gray);
  border-bottom: 1px solid transparent;
  font-weight: 600;
  user-select: none;
}
.config-section[open] > summary { color: var(--office-blue-dark); border-bottom-color: var(--office-line); }
.config-section > .config-grid { padding: 0; }

.config-grid { display: block; }
.config-field-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(160px, 280px) minmax(260px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-bottom: 1px solid #edebe9;
  background: #fff;
  font-size: 12px;
  font-weight: 400;
}
.config-field-row:nth-child(even) { background: #faf9f8; }
.config-field-row:hover { background: var(--office-blue-pale); }
.config-field-name { font-weight: 600; }
.config-field-control { min-width: 0; }
.config-field-control input, .config-field-control select { min-height: 25px; padding: 2px 5px; }
.config-field-control input[type="checkbox"] { width: 16px; min-height: 16px; accent-color: var(--office-blue); }
.field-help { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.25; }
.config-field-row.field-invalid { border-left: 4px solid var(--danger); background: var(--danger-pale); }
.config-field-row.field-invalid .config-field-control input,
.config-field-row.field-invalid .config-field-control select { border: 2px solid var(--danger); }
.config-inline-error { grid-column: 2 / 4; color: var(--danger); font-size: 11px; font-weight: 600; }

.config-note {
  display: grid;
  gap: 2px;
  margin: 7px;
  padding: 7px 9px;
  border: 1px solid #8aadd5;
  background: var(--office-blue-pale);
  color: #323130;
  font-size: 11px;
}
.config-note strong { color: var(--office-blue-dark); }
.config-note.compact-note { margin: 0; border-left-width: 4px; }

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 37px;
  padding: 4px 7px;
  background: #faf9f8;
  border-bottom: 1px solid var(--office-line);
}
.section-actions .muted { font-size: 11px; }
.section-actions button { min-height: 26px; padding: 2px 8px; }

.config-cards { display: grid; gap: 7px; padding: 7px; }
.config-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-card { min-width: 0; border: 1px solid var(--office-line-dark); background: #fff; }
.config-card-title {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 7px;
  color: #fff;
  background: var(--office-blue-dark);
}
.config-card-title button { min-height: 22px; padding: 1px 7px; }
.config-card .config-field-row { grid-template-columns: minmax(135px, 185px) minmax(135px, 220px) minmax(180px, 1fr); }

.calibration-tool {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) repeat(2, minmax(260px, 1fr)) minmax(190px, .7fr);
  align-items: stretch;
  gap: 7px;
  padding: 8px;
  border-top: 1px solid var(--office-line);
  background: var(--warning-pale);
}
.calibration-heading, .calibration-step, .calibration-finish {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 7px;
  border: 1px solid #d6c36a;
  background: #fffdf2;
}
.calibration-heading strong { color: var(--office-blue-dark); font-size: 13px; }
.calibration-heading span, .calibration-finish span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.calibration-step label { display: grid; gap: 2px; font-size: 10px; font-weight: 600; }
.calibration-tool input { min-height: 25px; }
.calibration-finish { align-content: center; }
.calibration-status {
  grid-column: 1 / -1;
  min-height: 29px;
  padding: 6px 8px;
  border: 1px solid #c8c6c4;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
}
.calibration-status.warning { color: #6b5200; border-color: #d6b656; background: #fff8ce; }
.calibration-status.success { color: #0b5a20; border-color: #67a878; background: #e6f4ea; }
.calibration-status.error { color: var(--danger); border-color: #d8797e; background: var(--danger-pale); }
.small { min-height: 23px; padding: 1px 6px; font-size: 11px; }

.hmi-panel { display: grid; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--office-line-dark); background: #fff; }
.hmi-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid var(--office-line); background: var(--office-gray); }
.hmi-heading div { display: grid; gap: 2px; }
.hmi-heading .hmi-heading-actions { display: flex; align-items: center; gap: 6px; }
.hmi-heading strong { color: var(--office-blue-dark); }
.hmi-heading span { font-size: 11px; }
.hmi-canvas { min-height: 660px; overflow: hidden; background: #dce3e8; }
.hmi-process-overview { min-height: 660px; display: grid; grid-template-rows: auto minmax(560px, 1fr) auto; background-color: #eef3f6; background-image: linear-gradient(#cfd9df 1px, transparent 1px), linear-gradient(90deg, #cfd9df 1px, transparent 1px); background-size: 20px 20px; }
.hmi-status-strip { min-height: 37px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 5px 8px; border-bottom: 1px solid #9aa7af; background: #243846; box-shadow: 0 2px 5px #0002; }
.hmi-status-chip { --state-color: #107c10; display: inline-flex; min-height: 24px; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid #647985; background: #f8fbfc; color: #24323a; font-size: 11px; font-weight: 600; }
.hmi-status-chip i, .hmi-state-dot { width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; background: var(--state-color); box-shadow: 0 0 0 1px var(--state-color), 0 0 7px color-mix(in srgb, var(--state-color) 60%, transparent); }
.hmi-process-scroll { width: 100%; min-height: 560px; overflow: auto; scrollbar-color: #728894 #dfe6ea; }
.hmi-process-line { display: flex; width: max-content; min-width: 100%; height: 560px; align-items: center; justify-content: center; padding: 4px 30px 0; }
.hmi-stage { --state-color: #107c10; --state-pale: #e7f5e7; position: relative; z-index: 1; flex: 0 0 154px; width: 154px; height: 550px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #18252d; text-align: center; transition: filter .15s ease, opacity .15s ease; }
.hmi-stage::before { position: absolute; z-index: 0; top: 270px; right: 0; left: 0; height: 15px; border: 2px solid #2e6f8e; border-right: 0; border-left: 0; background: #5cb6db; content: ""; box-shadow: inset 0 2px #a6e4f5, 0 2px 3px #0003; }
.hmi-stage:not(.editing) { cursor: pointer; }
.hmi-stage:not(.editing):hover, .hmi-stage:not(.editing):focus-visible { outline: 0; filter: drop-shadow(0 0 5px #185abd99); }
.hmi-stage.editing { outline: 2px dashed #c88700; outline-offset: -3px; background: #fff9dccc; cursor: grab; }
.hmi-stage.editing:active { cursor: grabbing; opacity: .65; }
.hmi-stage.running, .hmi-status-chip.running { --state-color: #00a651; --state-pale: #e0f6e9; }
.hmi-stage.cleaning, .hmi-status-chip.cleaning { --state-color: #0078d4; --state-pale: #e5f2fb; }
.hmi-stage.warning, .hmi-status-chip.warning { --state-color: #c88700; --state-pale: #fff4ce; }
.hmi-stage.alarm, .hmi-status-chip.alarm { --state-color: #d13438; --state-pale: #fde7e9; }
.hmi-stage.offline, .hmi-status-chip.offline { --state-color: #737b80; --state-pale: #e5e8ea; }
.hmi-stage.offline { filter: grayscale(1); opacity: .72; }
.hmi-pipe-segment { position: relative; flex: 0 0 48px; width: 48px; height: 15px; border-top: 2px solid #2e6f8e; border-bottom: 2px solid #2e6f8e; background: #5cb6db; box-shadow: inset 0 2px #a6e4f5, 0 2px 3px #0003; }
.hmi-pipe-segment i { position: absolute; top: 2px; right: 7px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #0f587a; }
.hmi-pipe-segment.flowing, .hmi-process-line.flowing .hmi-stage::before { background-image: repeating-linear-gradient(90deg, #44a4ce 0, #44a4ce 20px, #85d5eb 20px, #85d5eb 38px); background-size: 76px 100%; animation: hmi-water-flow 1.2s linear infinite; }
.hmi-pipe-segment.offline, .hmi-process-line.offline .hmi-stage::before { border-color: #6f777b; background: #aeb8bd; box-shadow: none; animation: none; }
.hmi-component-slot { position: relative; z-index: 1; flex: 0 0 170px; width: 170px; height: 550px; }
.hmi-component-slot.sensor-only-slot { flex-basis: 100px; width: 100px; }
.hmi-component-slot::before { position: absolute; z-index: 0; top: 270px; right: 0; left: 0; height: 15px; border: 2px solid #2e6f8e; border-right: 0; border-left: 0; background: #5cb6db; content: ""; box-shadow: inset 0 2px #a6e4f5, 0 2px 3px #0003; }
.hmi-process-line.flowing .hmi-component-slot::before { background-image: repeating-linear-gradient(90deg, #44a4ce 0, #44a4ce 20px, #85d5eb 20px, #85d5eb 38px); background-size: 76px 100%; animation: hmi-water-flow 1.2s linear infinite; }
.hmi-process-line.offline .hmi-component-slot::before { border-color: #6f777b; background: #aeb8bd; box-shadow: none; animation: none; }
.hmi-component-slot .hmi-stage { position: absolute; inset: 0; width: 170px; height: 550px; flex: none; }
.hmi-component-slot .hmi-sensor-stage { top: 0; right: auto; bottom: 0; left: 50%; width: 90px; transform: translateX(-50%); }
.hmi-component-slot .hmi-stage::before { display: none; }
.hmi-component-slot .lane-above { clip-path: inset(0 0 50% 0); }
.hmi-component-slot .lane-below { clip-path: inset(50% 0 0 0); }
.hmi-instrument { position: absolute; z-index: 3; top: 31px; left: 50%; width: 72px; height: 72px; display: grid; place-items: center; transform: translateX(-50%); border: 5px solid #f8fbfc; border-radius: 50%; outline: 4px solid var(--state-color); background: radial-gradient(circle at 35% 30%, #fff 0 25%, var(--state-pale) 70%); box-shadow: 0 4px 8px #0004; }
.hmi-instrument-tag { color: #162a35; font-family: Consolas, monospace; font-size: 17px; font-weight: 700; letter-spacing: -.5px; }
.hmi-instrument .hmi-state-dot { position: absolute; top: -6px; right: -6px; }
.hmi-sensor-stem { position: absolute; z-index: 2; top: 105px; left: calc(50% - 3px); width: 6px; height: 92px; border-right: 1px solid #344c58; border-left: 1px solid #344c58; background: #d7e0e4; }
.hmi-pipe-tap { position: absolute; z-index: 3; top: 264px; left: calc(50% - 10px); width: 20px; height: 28px; border: 3px solid #344c58; border-radius: 3px; background: #dce5e9; }
.hmi-digital-panel, .hmi-equipment-panel { position: absolute; z-index: 4; right: 5px; left: 5px; border: 1px solid #6d7e87; background: #f9fbfc; box-shadow: 0 3px 7px #0003; text-align: left; }
.hmi-digital-panel { top: 231px; min-height: 134px; padding: 6px; }
.hmi-digital-panel > strong, .hmi-equipment-panel > strong { display: block; overflow: hidden; margin-bottom: 4px; color: #123f5a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hmi-digital-panel > span:not(.hmi-digital-empty) { display: grid; grid-template-columns: 35px minmax(40px, 1fr) auto; align-items: baseline; gap: 3px; margin-top: 2px; padding: 2px 3px; border-left: 4px solid var(--state-color); background: #17242b; color: #b7f3c5; font-family: Consolas, monospace; }
.hmi-digital-panel span small { color: #c4d2d8; font-size: 9px; text-transform: uppercase; }
.hmi-digital-panel span b { font-size: 14px; text-align: right; }
.hmi-digital-panel span em { color: #eef5f7; font-size: 9px; font-style: normal; }
.hmi-digital-empty { display: block; padding: 15px 3px; color: var(--muted); text-align: center; }
.hmi-digital-panel.has-totalizer { top: 220px; min-height: 181px; }
.hmi-flow-totalizer { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 3px; margin-top: 5px; padding: 4px 5px; border: 2px solid #53646d; border-radius: 2px; background: #151d20; color: #eff8e7; box-shadow: inset 0 0 0 1px #ffffff18; font-family: Consolas, monospace; }
.hmi-flow-totalizer > span { grid-column: 1 / -1; color: #a9c5d2; font-size: 8px; font-weight: 700; letter-spacing: .4px; }
.hmi-flow-totalizer > b { color: #d7ff9c; font-size: 15px; text-align: right; }
.hmi-flow-totalizer > em { color: #fff; font-size: 9px; font-style: normal; }
.hmi-flow-totalizer > small { grid-column: 1 / -1; color: #a9b6bb; font-size: 8px; text-align: right; }
.hmi-live-time { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; text-align: right; }
.hmi-sensor-stage .hmi-digital-panel { padding: 4px; }
.hmi-sensor-stage .hmi-digital-panel > strong { margin-bottom: 2px; font-size: 9px; }
.hmi-sensor-stage .hmi-digital-panel > span:not(.hmi-digital-empty) { grid-template-columns: 15px minmax(26px, 1fr) auto; gap: 1px; padding: 2px; }
.hmi-sensor-stage .hmi-digital-panel span small { font-size: 6px; }
.hmi-sensor-stage .hmi-digital-panel span b { font-size: 11px; }
.hmi-sensor-stage .hmi-digital-panel span em { font-size: 6px; }
.hmi-sensor-stage .hmi-flow-totalizer { gap: 1px; margin-top: 3px; padding: 3px 2px; }
.hmi-sensor-stage .hmi-flow-totalizer > span { font-size: 6px; letter-spacing: 0; }
.hmi-sensor-stage .hmi-flow-totalizer > b { font-size: 11px; }
.hmi-sensor-stage .hmi-flow-totalizer > em { font-size: 7px; }
.hmi-sensor-stage .hmi-flow-totalizer > small, .hmi-sensor-stage .hmi-live-time { font-size: 6px; }
.hmi-sensor-stage.lane-above .hmi-instrument { top: 16px; }
.hmi-sensor-stage.lane-above .hmi-sensor-stem { top: 84px; height: 187px; }
.hmi-sensor-stage.lane-above .hmi-digital-panel { top: 105px; min-height: 136px; max-height: 145px; overflow: hidden; }
.hmi-sensor-stage.lane-above .hmi-digital-panel.has-totalizer { top: 96px; min-height: 157px; max-height: 157px; }
.hmi-sensor-stage.lane-below .hmi-instrument { top: 462px; }
.hmi-sensor-stage.lane-below .hmi-sensor-stem { top: 281px; height: 186px; }
.hmi-sensor-stage.lane-below .hmi-digital-panel { top: 304px; min-height: 136px; max-height: 145px; overflow: hidden; }
.hmi-sensor-stage.lane-below .hmi-digital-panel.has-totalizer { top: 296px; min-height: 157px; max-height: 157px; }
.hmi-injection-nozzle { position: absolute; z-index: 5; top: 187px; left: calc(50% - 10px); width: 20px; height: 28px; border: 3px solid #344c58; border-radius: 3px 3px 50% 50%; background: #dce5e9; }
.hmi-injection-line { position: absolute; z-index: 2; top: 211px; left: calc(50% - 3px); width: 6px; height: 42px; border-right: 1px solid #344c58; border-left: 1px solid #344c58; background: #d7e0e4; }
.hmi-injection-line.dosing { background-image: repeating-linear-gradient(0deg, #184fbd 0, #184fbd 8px, #9cc7ff 8px, #9cc7ff 15px); background-size: 100% 30px; animation: hmi-dose-flow .65s linear infinite; }
.hmi-dose-skid { position: absolute; z-index: 3; top: 249px; left: calc(50% - 60px); width: 120px; height: 77px; border-bottom: 5px solid #455a64; }
.hmi-chemical-tank { position: absolute; bottom: 5px; left: 2px; width: 41px; height: 60px; overflow: hidden; border: 3px solid #50636d; border-radius: 5px 5px 10px 10px; background: #eef3f5; }
.hmi-chemical-tank::before { position: absolute; top: -5px; left: 8px; width: 20px; height: 8px; border: 2px solid #50636d; background: #d7e0e4; content: ""; }
.hmi-chemical-tank span { position: absolute; right: 2px; bottom: 2px; left: 2px; height: 65%; background: linear-gradient(#b3d7ff, #397dcc); }
.hmi-pump-symbol { position: absolute; right: 3px; bottom: 7px; width: 58px; height: 58px; border: 6px solid #f6f8f9; border-radius: 50%; outline: 4px solid var(--state-color); background: var(--state-pale); box-shadow: 0 3px 7px #0004; }
.hmi-pump-symbol::before, .hmi-pump-symbol::after, .hmi-pump-symbol i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--state-color); content: ""; box-shadow: 0 -16px 0 var(--state-color); }
.hmi-pump-symbol::after { transform: translate(-50%, -50%) rotate(120deg); }
.hmi-pump-symbol i { transform: translate(-50%, -50%) rotate(240deg); }
.hmi-pump-stage.running .hmi-pump-symbol { animation: hmi-pump-rotate 1.1s linear infinite; }
.hmi-dose-skid > .hmi-state-dot { position: absolute; top: 1px; right: -2px; }
.hmi-equipment-panel { top: 337px; min-height: 66px; padding: 5px 6px; text-align: center; }
.hmi-equipment-panel small, .hmi-equipment-panel b, .hmi-equipment-panel span { display: block; }
.hmi-equipment-panel small { color: var(--muted); font-size: 9px; }
.hmi-equipment-panel b { color: var(--state-color); font-size: 13px; }
.hmi-equipment-panel span { color: #3d4c54; font-size: 9px; }
.hmi-pump-stage.lane-above .hmi-injection-nozzle { top: 258px; }
.hmi-pump-stage.lane-above .hmi-injection-line { top: 176px; height: 83px; }
.hmi-pump-stage.lane-above .hmi-dose-skid { top: 100px; }
.hmi-pump-stage.lane-above .hmi-equipment-panel { top: 12px; min-height: 70px; }
.hmi-pump-stage.lane-below .hmi-injection-nozzle { top: 276px; }
.hmi-pump-stage.lane-below .hmi-injection-line { top: 300px; height: 61px; }
.hmi-pump-stage.lane-below .hmi-dose-skid { top: 360px; }
.hmi-pump-stage.lane-below .hmi-equipment-panel { top: 465px; min-height: 70px; }
.hmi-filter-stage { flex: 0 0 230px; width: 230px; }
.hmi-filter-bank { position: absolute; z-index: 3; top: 140px; right: 20px; left: 20px; display: flex; align-items: start; justify-content: center; gap: 20px; }
.hmi-filter-unit { --state-color: inherit; position: relative; width: 86px; display: grid; justify-items: center; }
.hmi-filter-head { position: relative; z-index: 4; width: 76px; height: 49px; padding-top: 5px; border: 3px solid #334854; border-radius: 12px 12px 4px 4px; background: linear-gradient(#435f6d, #253b46); color: #fff; box-shadow: 0 3px 6px #0005; font-size: 8px; font-weight: 700; }
.hmi-filter-head i { display: inline-block; width: 8px; height: 8px; margin: 6px 2px 0; border: 1px solid #c8d1d5; border-radius: 50%; background: var(--state-color); box-shadow: 0 0 4px var(--state-color); }
.hmi-filter-count { position: absolute; top: -10px; right: -17px; min-width: 32px; padding: 3px 5px; border: 2px solid #fff; border-radius: 13px; background: #185abd; color: #fff; box-shadow: 0 2px 5px #0005; font: 700 12px/1 Consolas, monospace; }
.hmi-filter-vessel { position: relative; z-index: 3; width: 74px; height: 176px; overflow: hidden; border: 4px solid #657780; border-radius: 13px 13px 25px 25px; background: #e7edf0; box-shadow: inset 8px 0 12px #fff9, inset -8px 0 12px #0002, 0 5px 8px #0003; }
.hmi-filter-vessel::before { position: absolute; z-index: 3; top: 81px; right: -10px; left: -10px; height: 15px; border-top: 2px solid #2e6f8e; border-bottom: 2px solid #2e6f8e; background: #5cb6db; content: ""; }
.hmi-filter-water { position: absolute; right: 2px; bottom: 2px; left: 2px; height: 75%; background: linear-gradient(#9edcf0aa, #4fa4c9cc); }
.hmi-filter-media { position: absolute; right: 5px; bottom: 5px; left: 5px; height: 43%; border-radius: 0 0 18px 18px; background: radial-gradient(circle, #7b633d 0 2px, transparent 3px) 0 0/9px 9px, #bca477; }
.hmi-filter-unit > strong { width: 100px; margin-top: 4px; overflow: hidden; color: #263c47; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hmi-filter-unit > small { color: var(--state-color); font-size: 9px; font-weight: 700; }
.hmi-filter-stage.cleaning .hmi-filter-water { background-image: repeating-linear-gradient(0deg, #187bb0aa 0, #187bb0aa 10px, #8adcf2cc 10px, #8adcf2cc 22px); background-size: 100% 44px; animation: hmi-backwash 1s linear infinite; }
.hmi-filter-stage.alarm .hmi-filter-head, .hmi-filter-stage.warning .hmi-filter-head { outline: 3px solid var(--state-color); }
.hmi-filter-manifold { position: absolute; z-index: 2; right: 5px; left: 5px; height: 15px; border: 2px solid #2e6f8e; background: #5cb6db; box-shadow: inset 0 2px #a6e4f5; }
.hmi-filter-manifold.upper { top: 262px; }
.hmi-filter-manifold.lower { display: none; }
.hmi-filter-summary { position: absolute; z-index: 4; right: 15px; bottom: 10px; left: 15px; min-height: 76px; padding: 5px; border: 1px solid #657780; background: #f9fbfc; box-shadow: 0 3px 7px #0002; }
.hmi-filter-summary strong, .hmi-filter-summary span, .hmi-filter-summary small { display: block; }
.hmi-filter-summary strong { color: #123f5a; }
.hmi-filter-summary span { color: var(--state-color); font-weight: 700; }
.hmi-filter-summary small { color: var(--muted); }
.hmi-filter-summary .hmi-filter-names { overflow: hidden; margin: 2px 0; color: #344a55; text-overflow: ellipsis; white-space: nowrap; }
.hmi-terminal-stage { flex-basis: 118px; width: 118px; }
.hmi-terminal-symbol { position: absolute; z-index: 3; top: 215px; left: calc(50% - 43px); width: 86px; height: 82px; overflow: hidden; border: 4px solid #405760; background: #e8eef1; box-shadow: inset 7px 0 10px #fff9, inset -7px 0 10px #0002, 0 4px 8px #0004; }
.hmi-terminal-symbol::before, .hmi-terminal-symbol::after { position: absolute; z-index: 4; top: 49px; width: 15px; height: 15px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); content: ""; }
.hmi-terminal-symbol::before { left: 22px; }
.hmi-terminal-symbol::after { left: 40px; }
.hmi-terminal-water { position: absolute; right: 0; bottom: 0; left: 0; height: 58%; background: #4badd3; }
.hmi-terminal-symbol i { position: absolute; z-index: 5; top: 5px; right: 0; left: 0; color: #243846; font-family: Consolas, monospace; font-size: 12px; font-style: normal; font-weight: 700; }
.hmi-terminal-stage > strong { position: absolute; top: 306px; right: 0; left: 0; color: #123f5a; }
.hmi-terminal-stage > small { position: absolute; top: 326px; right: 0; left: 0; color: #3d4c54; font-size: 10px; }
.hmi-legend { min-height: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding: 5px 9px; border-top: 1px solid #9aa7af; background: #f8fafb; font-size: 10px; }
.hmi-legend span { display: inline-flex; align-items: center; gap: 4px; }
.hmi-legend i { width: 10px; height: 10px; border-radius: 50%; background: #107c10; }
.hmi-legend i.running { background: #00a651; box-shadow: 0 0 5px #00a651; }
.hmi-legend i.warning { background: #c88700; }
.hmi-legend i.alarm { background: #d13438; box-shadow: 0 0 5px #d13438; }
.hmi-legend i.offline { background: #737b80; }
.hmi-legend small { margin-left: auto; color: var(--muted); }
@keyframes hmi-water-flow { to { background-position: 76px 0; } }
@keyframes hmi-dose-flow { to { background-position: 0 -30px; } }
@keyframes hmi-pump-rotate { to { transform: rotate(360deg); } }
@keyframes hmi-backwash { to { background-position: 0 -44px; } }
.active-station-tool { box-shadow: inset 0 -3px var(--office-blue); }

.permission-actions { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 5px; border-bottom: 1px solid var(--office-line); background: #fff; }
.permission-table td:first-child { min-width: 260px; }
.permission-table td:first-child small { display: block; margin-top: 2px; color: var(--muted); }
.permission-category th { color: var(--office-blue-dark); background: var(--office-blue-pale); text-align: left; }
.permission-check { width: 100px; text-align: center; }
.permission-check input { width: 16px; height: 16px; accent-color: var(--office-blue); }
.hmi-detail-dialog { width: min(760px, calc(100% - 24px)); }
.hmi-detail-dialog #hmi-detail-content { max-height: 60vh; overflow: auto; }

@media (max-width: 1050px) {
  .config-cards.two { grid-template-columns: 1fr; }
  .config-field-row, .config-card .config-field-row { grid-template-columns: minmax(150px, 210px) minmax(150px, 240px) 1fr; }
  .calibration-tool { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .config-dialog { width: 100%; height: 100%; border: 0; }
  .config-dialog-header { align-items: flex-start; }
  .config-dialog-toolbar { flex-wrap: wrap; padding-bottom: 4px; }
  .config-toolbar-spacer { display: none; }
  .config-dialog-body { padding: 4px; }
  .footer-hint { display: none; }
  .config-field-row, .config-card .config-field-row { grid-template-columns: minmax(110px, 1fr) minmax(135px, 1.2fr); }
  .config-field-row .field-help { grid-column: 1 / -1; padding-bottom: 3px; }
  .config-inline-error { grid-column: 1 / -1; }
  .calibration-tool { grid-template-columns: repeat(2, 1fr); }
  .calibration-heading, .calibration-finish, .calibration-status { grid-column: 1 / -1; }
  .hmi-heading { align-items: flex-start; flex-direction: column; }
  .hmi-heading .hmi-heading-actions { width: 100%; display: flex; flex-wrap: wrap; }
  .hmi-canvas, .hmi-process-overview { min-height: 650px; }
  .hmi-process-line { justify-content: flex-start; padding-right: 16px; padding-left: 16px; }
  .hmi-status-strip { align-items: stretch; }
  .hmi-status-chip { flex: 1 1 145px; }
  .hmi-legend small { flex: 1 1 100%; margin-left: 0; }
}