:root {
  --ops-cyan: #63dcc4;
  --ops-blue: #72b9ed;
  --ops-amber: #f4ad45;
  --ops-orange: #ed7b43;
  --ops-red: #e76055;
  --ops-panel: rgba(9, 24, 32, .985);
  --ops-panel-2: rgba(13, 31, 40, .97);
  --ops-line: rgba(126, 218, 205, .2);
  --ops-muted: #8da2a7;
}

body[data-page] {
  background:
    radial-gradient(circle at 50% 32%, rgba(35, 116, 116, .12), transparent 38%),
    linear-gradient(180deg, #06131a 0%, #050d12 100%);
}

.detail-shell {
  display: grid;
  grid-template-rows: 62px 94px minmax(0, 1fr);
  gap: 10px;
  width: 100cqw;
  height: 100cqh;
  padding: 0 12px 12px;
  overflow: hidden;
}

.detail-shell .topbar { margin: 0 -12px; }
.page-kpi-rail { min-height: 0; }
.page-kpi-rail .kpi-item { padding-top: 11px; }
.page-kpi-rail .kpi-value strong { font-size: 29px; }
.page-kpi-rail .kpi-meta { margin-top: 5px; }
.page-kpi-rail .kpi-item.is-warning .kpi-value strong,
.page-kpi-rail .kpi-item.is-warning .kpi-meta strong { color: var(--ops-amber); }
.page-kpi-rail .kpi-item.is-danger .kpi-value strong { color: var(--ops-red); }
.page-kpi-rail .kpi-item.is-warning .progress i { background: linear-gradient(90deg, rgba(244,173,69,.25), var(--ops-amber)); }
.page-kpi-rail .kpi-item.is-danger .progress i { background: linear-gradient(90deg, rgba(231,96,85,.28), var(--ops-red)); }

.page-workspace {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.ops-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 218, 205, .22);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(99,220,196,.025), transparent 30% 70%, rgba(114,185,237,.02)),
    linear-gradient(155deg, var(--ops-panel-2), var(--ops-panel));
  box-shadow: inset 0 1px rgba(255,255,255,.022), 0 16px 34px rgba(0,0,0,.17);
}

.ops-panel::before,
.ops-panel::after {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  pointer-events: none;
  content: "";
}

.ops-panel::before {
  top: 3px;
  left: 3px;
  border-top: 1px solid rgba(99,220,196,.58);
  border-left: 1px solid rgba(99,220,196,.58);
}

.ops-panel::after {
  right: 3px;
  bottom: 3px;
  border-right: 1px solid rgba(99,220,196,.34);
  border-bottom: 1px solid rgba(99,220,196,.34);
}

.ops-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(126,218,205,.16);
  background: linear-gradient(90deg, rgba(17,38,48,.9), rgba(8,23,30,.72));
}

.ops-panel-head::after {
  position: absolute;
  right: 18%;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(99,220,196,.5), rgba(114,185,237,.12), transparent);
  content: "";
}

.ops-panel-head h2 {
  margin: 0;
  color: #f1f7f6;
  font-family: var(--font-ui-heading);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .035em;
}

.ops-panel-head small { color: #71898f; font-size: 10px; }
.ops-panel-body { height: calc(100% - 46px); min-height: 0; padding: 12px 14px; }
.ops-panel-body.is-flush { padding: 0; }
.ops-panel-body.is-tight { padding: 8px 12px; }

.head-actions,
.segmented,
.legend-row,
.inline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.segmented {
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(126,218,205,.14);
  border-radius: 4px;
  background: rgba(3,12,17,.38);
}

.segmented button,
.text-button,
.mini-action,
.primary-action,
.filter-chip {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #8ca0a5;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.segmented button { min-width: 42px; padding: 0 10px; }
.segmented button:hover,
.segmented button.active,
.filter-chip.active { color: #dff8f2; background: rgba(99,220,196,.09); }
.segmented button.active,
.filter-chip.active { border-color: rgba(99,220,196,.28); }
.text-button,
.mini-action { padding: 0 9px; border-color: rgba(126,218,205,.14); }
.text-button:hover,
.mini-action:hover { color: var(--ops-cyan); border-color: rgba(99,220,196,.36); background: rgba(99,220,196,.055); }
.primary-action { padding: 0 13px; border-color: rgba(99,220,196,.4); background: rgba(99,220,196,.1); color: #9bf0dd; }
.primary-action:hover { background: rgba(99,220,196,.17); color: #ecfffb; }
.mini-action.is-warning { border-color: rgba(244,173,69,.32); color: #f2bf6b; }
button:focus-visible { outline: 2px solid #8ce7d4; outline-offset: 2px; }

.status-pill,
.source-pill,
.severity-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(99,220,196,.18);
  border-radius: 10px;
  background: rgba(99,220,196,.065);
  color: #7fe2cf;
  font-size: 10px;
  white-space: nowrap;
}

.status-pill::before,
.severity-pill::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-pill.warning,
.severity-pill.warning { border-color: rgba(244,173,69,.26); background: rgba(244,173,69,.075); color: #f2b95f; }
.status-pill.danger,
.severity-pill.danger { border-color: rgba(231,96,85,.28); background: rgba(231,96,85,.08); color: #ee7c72; }
.status-pill.info,
.severity-pill.info { border-color: rgba(114,185,237,.26); background: rgba(114,185,237,.07); color: #82c4f3; }
.source-pill { border-radius: 3px; color: #91a8ad; }

.ops-table {
  width: 100%;
  border-collapse: collapse;
  color: #a7b8bb;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

.ops-table th {
  height: 31px;
  border-bottom: 1px solid rgba(126,218,205,.13);
  color: #718a90;
  font-size: 10px;
  font-weight: 520;
  text-align: left;
}

.ops-table td {
  height: 36px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.035);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-table tr:last-child td { border-bottom: 0; }
.ops-table tbody tr[data-selectable] { cursor: pointer; transition: background-color .18s ease; }
.ops-table tbody tr[data-selectable]:hover,
.ops-table tbody tr.selected { background: rgba(99,220,196,.045); }
.ops-table strong { color: #dce8e9; font-weight: 560; }
.ops-table .good { color: var(--ops-cyan); }
.ops-table .warn { color: var(--ops-amber); }
.ops-table .danger { color: var(--ops-red); }

.metric-list { display: grid; align-content: start; gap: 8px; min-height: 0; }
.metric-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(90px, 1.5fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 31px;
  color: #91a5aa;
  font-size: 11px;
}
.metric-row b { color: #d4e1e2; font-size: 12px; font-weight: 560; }
.metric-row small { color: #6e858b; font-size: 9px; }
.metric-track { position: relative; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.055); }
.metric-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(99,220,196,.3), var(--ops-cyan)); }
.metric-track i.warning { background: linear-gradient(90deg, rgba(244,173,69,.25), var(--ops-amber)); }
.metric-track i.danger { background: linear-gradient(90deg, rgba(231,96,85,.25), var(--ops-red)); }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-box { min-width: 0; padding: 9px 10px; border: 1px solid rgba(126,218,205,.1); border-radius: 4px; background: rgba(255,255,255,.018); }
.stat-box span { display: block; color: #738b90; font-size: 9px; }
.stat-box strong { display: block; margin-top: 4px; color: #dce9e9; font-size: 17px; font-weight: 620; font-variant-numeric: tabular-nums; }
.stat-box small { margin-left: 3px; color: #7e9398; font-size: 8px; font-weight: 400; }
.stat-box.teal strong { color: var(--ops-cyan); }
.stat-box.warning strong { color: var(--ops-amber); }

.chart-wrap { position: relative; width: 100%; height: 100%; min-height: 0; }
.chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: rgba(162,195,201,.11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { fill: #71878c; font-size: 10px; }
.chart-series { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.chart-series.teal { stroke: var(--ops-cyan); }
.chart-series.blue { stroke: var(--ops-blue); }
.chart-series.amber { stroke: var(--ops-amber); }
.chart-series.red { stroke: var(--ops-red); }
.chart-area { opacity: .16; }
.chart-point { stroke: #07161d; stroke-width: 2; }
.chart-threshold { fill: none; stroke: rgba(244,173,69,.75); stroke-width: 1; stroke-dasharray: 5 5; }
.chart-tooltip {
  position: absolute;
  z-index: 8;
  min-width: 110px;
  padding: 8px 9px;
  border: 1px solid rgba(99,220,196,.3);
  border-radius: 4px;
  background: rgba(4,14,19,.96);
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  color: #b8c9cc;
  font-size: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translate(10px, -50%);
  transition: opacity .12s ease;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip b { display: block; margin-bottom: 3px; color: #eff7f6; font-size: 11px; }

.bar-chart { display: grid; align-content: center; gap: 10px; height: 100%; }
.bar-row { display: grid; grid-template-columns: 88px minmax(0,1fr) 56px; align-items: center; gap: 10px; color: #8ea3a8; font-size: 10px; }
.bar-row strong { color: #d9e5e6; font-size: 11px; font-weight: 560; text-align: right; }
.bar-track { height: 8px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.05); }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(99,220,196,.28), var(--ops-cyan)); }
.bar-track i.blue { background: linear-gradient(90deg, rgba(114,185,237,.25), var(--ops-blue)); }
.bar-track i.amber { background: linear-gradient(90deg, rgba(244,173,69,.25), var(--ops-amber)); }
.bar-track i.red { background: linear-gradient(90deg, rgba(231,96,85,.25), var(--ops-red)); }

.donut-block { display: flex; align-items: center; justify-content: center; gap: 22px; height: 100%; }
.ops-donut { position: relative; display: grid; width: 132px; height: 132px; place-items: center; border-radius: 50%; }
.ops-donut::before { position: absolute; inset: 15px; border-radius: 50%; background: #0b1e27; box-shadow: inset 0 0 20px rgba(0,0,0,.32); content: ""; }
.ops-donut > div { position: relative; z-index: 1; text-align: center; }
.ops-donut strong { display: block; color: #f1f8f7; font-size: 25px; font-weight: 650; }
.ops-donut span { display: block; margin-top: 3px; color: #789096; font-size: 9px; }
.donut-legend { display: grid; gap: 9px; min-width: 128px; }
.donut-legend div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; color: #8fa3a8; font-size: 10px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; }
.donut-legend span { min-width: 0; white-space: nowrap; }
.donut-legend b { color: #d0ddde; font-weight: 520; }

.notice-list { display: grid; align-content: start; gap: 8px; }
.notice-item {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0,1fr) auto;
  gap: 9px;
  min-height: 68px;
  padding: 9px 8px;
  border: 1px solid rgba(126,218,205,.1);
  border-radius: 4px;
  background: rgba(255,255,255,.015);
}
.notice-item::before { width: 4px; height: 100%; border-radius: 2px; background: var(--ops-blue); content: ""; }
.notice-item.warning::before { background: var(--ops-amber); }
.notice-item.danger::before { background: var(--ops-red); }
.notice-copy { min-width: 0; }
.notice-copy b { display: block; overflow: hidden; color: #d7e3e4; font-size: 11px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.notice-copy p { margin: 4px 0 0; color: #81969b; font-size: 10px; line-height: 1.4; }
.notice-copy small { display: block; margin-top: 4px; color: #687f85; font-size: 9px; }

.process-layout { grid-template-columns: minmax(760px, 1.56fr) minmax(360px, .56fr); grid-template-rows: minmax(0, 1.45fr) minmax(0, .74fr); }
.process-flow-panel { grid-column: 1; grid-row: 1; }
.process-side { display: grid; grid-column: 2; grid-row: 1; grid-template-rows: .92fr 1.08fr; gap: 10px; min-height: 0; }
.process-bottom { display: grid; grid-column: 1 / 3; grid-row: 2; grid-template-columns: 1.15fr .85fr; gap: 10px; min-height: 0; }

.process-flow-body { position: relative; display: grid; grid-template-rows: minmax(210px, 1fr) 118px; gap: 10px; height: 100%; padding: 12px 16px; }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(9, minmax(82px, 1fr)); align-items: center; gap: 10px; min-height: 0; padding: 36px 2px 40px; }
.process-flow::before { position: absolute; top: 50%; right: 3%; left: 3%; height: 2px; background: linear-gradient(90deg, rgba(99,220,196,.14), var(--ops-cyan), rgba(99,220,196,.18)); box-shadow: 0 0 13px rgba(99,220,196,.14); content: ""; }
.process-flow::after { position: absolute; top: 50%; left: 3%; width: 16%; height: 2px; background: rgba(220,255,249,.8); content: ""; animation: flowPulse 3.2s linear infinite; }
@keyframes flowPulse { from { transform: translateX(0); opacity: .25; } 50% { opacity: 1; } to { transform: translateX(490%); opacity: .2; } }
.process-node { position: relative; z-index: 2; min-width: 0; min-height: 116px; padding: 10px 7px 8px; border: 1px solid rgba(99,220,196,.2); border-radius: 4px; background: rgba(5,18,24,.92); color: #8fa5aa; text-align: center; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.process-node:hover,
.process-node.active { transform: translateY(-4px); border-color: rgba(99,220,196,.62); background: rgba(11,34,42,.98); }
.process-node.warning { border-color: rgba(244,173,69,.5); }
.stage-symbol { position: relative; display: grid; width: 34px; height: 34px; margin: 0 auto 8px; place-items: center; border: 1px solid rgba(99,220,196,.34); border-radius: 5px; background: linear-gradient(145deg, rgba(99,220,196,.14), rgba(114,185,237,.04)); color: var(--ops-cyan); }
.stage-symbol svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.process-node.warning .stage-symbol { border-color: rgba(244,173,69,.5); color: var(--ops-amber); }
.process-node b { display: block; overflow: hidden; color: #dce8e9; font-size: 11px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.process-node span { display: block; margin-top: 6px; color: #8ea3a8; font-size: 10px; }
.process-node small { display: block; margin-top: 3px; color: #657d83; font-size: 9px; }
.return-line { position: absolute; z-index: 1; height: 42px; border-top: 1px dashed rgba(114,185,237,.55); border-right: 1px dashed rgba(114,185,237,.55); border-left: 1px dashed rgba(114,185,237,.55); border-radius: 8px 8px 0 0; color: #77bced; font-size: 9px; text-align: center; }
.return-line.inner { top: 14px; right: 20%; left: 43%; }
.return-line.sludge { right: 11%; bottom: 4px; left: 69%; height: 35px; border-top: 0; border-bottom: 1px dashed rgba(114,185,237,.45); border-radius: 0 0 8px 8px; }
.return-line span { position: relative; top: -7px; padding: 0 5px; background: #0b2029; }
.return-line.sludge span { top: 28px; }
.flow-detail { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 8px; }
.flow-detail .stat-box { display: flex; flex-direction: column; justify-content: center; }

.control-list { display: grid; gap: 5px; }
.control-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; min-height: 34px; border-bottom: 1px solid rgba(255,255,255,.035); color: #8ea2a7; font-size: 10px; }
.control-row:last-child { border-bottom: 0; }
.control-row b { color: #d9e5e6; font-size: 11px; font-weight: 560; }
.toggle { position: relative; width: 34px; height: 18px; border: 0; border-radius: 10px; background: rgba(255,255,255,.09); cursor: pointer; }
.toggle::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #6f8388; content: ""; transition: transform .18s ease, background-color .18s ease; }
.toggle.active { background: rgba(99,220,196,.18); }
.toggle.active::after { background: var(--ops-cyan); transform: translateX(16px); }

.quality-layout { grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.45fr) minmax(300px, .72fr); grid-template-rows: minmax(0, 1.28fr) minmax(0, .72fr); }
.quality-left { display: grid; grid-column: 1; grid-row: 1; grid-template-rows: 1.22fr .78fr; gap: 10px; min-height: 0; }
.quality-center { grid-column: 2; grid-row: 1; }
.quality-right { display: grid; grid-column: 3; grid-row: 1; grid-template-rows: .86fr 1.14fr; gap: 10px; min-height: 0; }
.quality-bottom { display: grid; grid-column: 1 / 4; grid-row: 2; grid-template-columns: 1.18fr .82fr; gap: 10px; min-height: 0; }
.quality-metric-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.quality-metric-tabs button { flex: 1; min-height: 34px; border: 1px solid rgba(126,218,205,.12); border-radius: 3px; background: rgba(255,255,255,.015); color: #81969b; font-size: 10px; cursor: pointer; }
.quality-metric-tabs button.active { border-color: rgba(99,220,196,.35); background: rgba(99,220,196,.075); color: #dff8f2; }
.quality-chart-layout { display: grid; grid-template-rows: 1fr 95px; gap: 9px; height: 100%; }
.quality-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.limit-list { display: grid; gap: 10px; }
.limit-row { display: grid; grid-template-columns: 48px 1fr 42px; align-items: center; gap: 8px; color: #889da2; font-size: 10px; }
.limit-track { position: relative; height: 11px; border-radius: 2px; background: linear-gradient(90deg, rgba(99,220,196,.12) 0 70%, rgba(244,173,69,.12) 70% 85%, rgba(231,96,85,.12) 85%); }
.limit-track i { display: block; height: 100%; border-radius: inherit; background: var(--ops-cyan); }
.limit-track i.warning { background: var(--ops-amber); }
.heatmap { display: grid; grid-template-columns: 52px repeat(30, 1fr); gap: 3px; align-content: center; height: 100%; }
.heatmap-label { display: flex; align-items: center; color: #8ea2a7; font-size: 9px; }
.heat-cell { aspect-ratio: 1; min-height: 8px; border-radius: 1px; background: rgba(99,220,196,.42); }
.heat-cell.mid { background: rgba(244,173,69,.62); }
.heat-cell.invalid { background: repeating-linear-gradient(135deg, #35464b 0 2px, #1d2d32 2px 4px); }

.devices-layout { grid-template-columns: minmax(300px, .68fr) minmax(650px, 1.45fr) minmax(340px, .75fr); grid-template-rows: minmax(0, 1.28fr) minmax(0, .72fr); }
.devices-left { display: grid; grid-column: 1; grid-row: 1; grid-template-rows: 1.16fr .84fr; gap: 10px; min-height: 0; }
.devices-center { grid-column: 2; grid-row: 1; }
.devices-right { display: grid; grid-column: 3; grid-row: 1; grid-template-rows: 1.15fr .85fr; gap: 10px; min-height: 0; }
.devices-bottom { display: grid; grid-column: 1 / 4; grid-row: 2; grid-template-columns: 1.48fr .52fr; gap: 10px; min-height: 0; }
.device-map { position: relative; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, rgba(25,75,82,.44), transparent 55%), linear-gradient(rgba(99,220,196,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(99,220,196,.025) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }
.device-map-core { position: absolute; inset: 9% 8%; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); gap: 18px; transform: perspective(900px) rotateX(52deg) rotateZ(-8deg); }
.facility-block { position: relative; border: 1px solid rgba(99,220,196,.23); border-radius: 3px; background: linear-gradient(145deg, rgba(33,70,78,.72), rgba(8,25,32,.9)); box-shadow: 10px 12px 0 rgba(2,10,14,.35); }
.facility-block.pool { border-radius: 50%; }
.facility-block.wide { grid-column: span 2; }
.facility-block::after { position: absolute; inset: 12%; border: 1px solid rgba(114,185,237,.18); content: ""; }
.device-pin { position: absolute; z-index: 4; display: flex; align-items: center; gap: 6px; min-width: 104px; padding: 6px 8px; border: 1px solid rgba(99,220,196,.3); border-radius: 3px; background: rgba(4,15,20,.9); color: #cbdadb; font-size: 10px; cursor: pointer; }
.device-pin::before { width: 7px; height: 7px; border-radius: 50%; background: var(--ops-cyan); box-shadow: 0 0 10px rgba(99,220,196,.45); content: ""; }
.device-pin.warning { border-color: rgba(244,173,69,.5); }
.device-pin.warning::before { background: var(--ops-amber); box-shadow: 0 0 12px rgba(244,173,69,.52); }
.device-pin.danger::before { background: var(--ops-red); }
.device-pin.active { border-color: var(--ops-cyan); transform: scale(1.08); }
.device-card-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.device-card-title span { color: #78dbc8; font-size: 9px; letter-spacing: .1em; }
.device-card-title h3 { margin: 4px 0 0; color: #eff7f6; font-size: 17px; font-weight: 650; }
.device-trend { height: 96px; margin-top: 6px; }
.devices-left > .ops-panel:nth-child(2) .donut-block { height: 92px; margin-bottom: 6px; gap: 14px; }
.devices-left > .ops-panel:nth-child(2) .ops-donut { width: 88px; height: 88px; }
.devices-left > .ops-panel:nth-child(2) .ops-donut::before { inset: 11px; }
.devices-left > .ops-panel:nth-child(2) .ops-donut strong { font-size: 20px; }
.devices-left > .ops-panel:nth-child(2) .donut-legend { min-width: 156px; }
.devices-left > .ops-panel:nth-child(2) .stats-grid { gap: 6px; }
.devices-left > .ops-panel:nth-child(2) .stat-box { padding: 5px 8px; }
.devices-left > .ops-panel:nth-child(2) .stat-box strong { margin-top: 2px; font-size: 14px; }
.devices-right > .ops-panel:first-child .stat-box { padding: 6px 8px; }
.devices-right > .ops-panel:first-child .stat-box strong { font-size: 15px; }
.devices-right > .ops-panel:nth-child(2) .notice-list { gap: 5px; }
.devices-right > .ops-panel:nth-child(2) .notice-item { min-height: 54px; padding: 6px; }
.devices-right > .ops-panel:nth-child(2) .notice-copy p { overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.devices-right > .ops-panel:nth-child(2) .notice-copy small { margin-top: 2px; }

.energy-layout { grid-template-columns: minmax(300px, .66fr) minmax(680px, 1.5fr) minmax(340px, .72fr); grid-template-rows: minmax(0, 1.26fr) minmax(0, .74fr); }
.energy-left { display: grid; grid-column: 1; grid-row: 1; grid-template-rows: .86fr 1.14fr; gap: 10px; min-height: 0; }
.energy-center { display: grid; grid-column: 2; grid-row: 1; grid-template-rows: 1.12fr .88fr; gap: 10px; min-height: 0; }
.energy-right { display: grid; grid-column: 3; grid-row: 1; grid-template-rows: .72fr 1.28fr; gap: 10px; min-height: 0; }
.energy-bottom { display: grid; grid-column: 1 / 4; grid-row: 2; grid-template-columns: 1.35fr .65fr; gap: 10px; min-height: 0; }
.energy-left > .ops-panel:first-child .donut-block { justify-content: space-around; gap: 14px; }
.energy-left > .ops-panel:first-child .donut-legend { min-width: 210px; }
.energy-sankey { position: relative; display: grid; grid-template-columns: .65fr 1.45fr .65fr; align-items: center; gap: 56px; height: 100%; padding: 10px 22px; }
.energy-source,
.energy-output { position: relative; z-index: 3; padding: 16px 12px; border: 1px solid rgba(99,220,196,.28); border-radius: 4px; background: rgba(5,18,24,.9); text-align: center; }
.energy-source strong,
.energy-output strong { display: block; color: #dff5f1; font-size: 20px; }
.energy-source span,
.energy-output span { display: block; margin-top: 5px; color: #7f969b; font-size: 10px; }
.energy-nodes { display: grid; gap: 7px; }
.energy-node { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 30px; padding: 0 9px; border: 1px solid rgba(114,185,237,.18); border-radius: 3px; background: rgba(8,28,36,.92); color: #91a6aa; font-size: 10px; cursor: pointer; }
.energy-node b { color: #d8e6e7; font-weight: 560; }
.energy-node::before,
.energy-node::after { position: absolute; top: 50%; width: 58px; height: var(--flow-width, 4px); background: rgba(99,220,196,.2); content: ""; transform: translateY(-50%); }
.energy-node::before { right: 100%; }
.energy-node::after { left: 100%; }
.energy-node:hover,
.energy-node.active { border-color: rgba(99,220,196,.52); background: rgba(12,43,50,.96); }
.opportunity-total { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 9px; }

.sludge-layout { grid-template-columns: minmax(300px, .68fr) minmax(680px, 1.5fr) minmax(340px, .72fr); grid-template-rows: minmax(0, 1.26fr) minmax(0, .74fr); }
.sludge-left { display: grid; grid-column: 1; grid-row: 1; grid-template-rows: 1.05fr .95fr; gap: 10px; min-height: 0; }
.sludge-center { grid-column: 2; grid-row: 1; }
.sludge-right { display: grid; grid-column: 3; grid-row: 1; grid-template-rows: 1.12fr .78fr 1.1fr; gap: 10px; min-height: 0; }
.sludge-bottom { display: grid; grid-column: 1 / 4; grid-row: 2; grid-template-columns: 1.12fr .88fr; gap: 10px; min-height: 0; }
.sludge-flow {
  --sludge-process: #65dac7;
  --sludge-logistics: #79bdf5;
  --sludge-risk: #d8b06c;
  --sludge-compliance: #a2a3f2;
  position: relative;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr) 76px;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 48%, rgba(121,189,245,.05), transparent 31%),
    radial-gradient(circle at 23% 40%, rgba(101,218,199,.035), transparent 28%),
    linear-gradient(rgba(121,189,245,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121,189,245,.014) 1px, transparent 1px),
    #06141b;
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
}
.sludge-flow-overview { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(137,179,197,.13); background: linear-gradient(90deg, rgba(11,31,39,.84), rgba(7,22,30,.66)); }
.sludge-overview-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto 1fr; align-items: center; gap: 1px 10px; min-width: 0; padding: 9px 14px; border-right: 1px solid rgba(126,218,205,.1); }
.sludge-overview-item::before { position: absolute; top: 0; left: 14px; width: 38px; height: 1px; background: var(--overview-accent); box-shadow: 0 0 8px var(--overview-glow); content: ""; }
.sludge-overview-item:last-child { border-right: 0; }
.sludge-overview-item > span { color: #748c92; font-size: 9px; }
.sludge-overview-item > strong { color: #edf8f6; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sludge-overview-item > strong small { margin-left: 3px; color: #789096; font-size: 9px; font-weight: 500; }
.sludge-overview-item.production { --overview-accent: var(--sludge-process); --overview-glow: rgba(101,218,199,.22); }
.sludge-overview-item.capacity { --overview-accent: var(--sludge-risk); --overview-glow: rgba(216,176,108,.2); }
.sludge-overview-item.logistics { --overview-accent: var(--sludge-logistics); --overview-glow: rgba(121,189,245,.2); }
.sludge-overview-item.closure { --overview-accent: var(--sludge-compliance); --overview-glow: rgba(162,163,242,.2); }
.sludge-overview-item.production > strong { color: #ddf7f2; }
.sludge-overview-item.capacity > strong { color: #ead4ad; }
.sludge-overview-item.logistics > strong { color: #d9ecfb; }
.sludge-mini-bars { display: flex; grid-column: 2; grid-row: 1 / 3; align-items: end; gap: 3px; width: 50px; height: 27px; }
.sludge-mini-bars i { flex: 1; min-height: 3px; background: linear-gradient(180deg, var(--sludge-process), rgba(101,218,199,.18)); }
.sludge-capacity-line { position: relative; grid-column: 2; grid-row: 1 / 3; width: 74px; height: 26px; padding-top: 17px; }
.sludge-capacity-line::before { position: absolute; right: 0; bottom: 3px; left: 0; height: 4px; background: rgba(255,255,255,.06); content: ""; }
.sludge-capacity-line i { position: absolute; bottom: 3px; left: 0; z-index: 1; height: 4px; background: linear-gradient(90deg, rgba(216,176,108,.28), var(--sludge-risk)); }
.sludge-capacity-line em { position: absolute; top: 0; right: 0; color: var(--sludge-risk); font-size: 8px; font-style: normal; }
.sludge-mini-route { position: relative; display: flex; grid-column: 2; grid-row: 1 / 3; align-items: center; justify-content: space-between; width: 70px; }
.sludge-mini-route::before { position: absolute; right: 5px; left: 5px; height: 1px; background: linear-gradient(90deg, rgba(121,189,245,.38), var(--sludge-logistics)); content: ""; }
.sludge-mini-route i { position: relative; z-index: 1; width: 6px; height: 6px; border: 1px solid var(--sludge-logistics); border-radius: 50%; background: #0a1b22; }
.sludge-mini-route i:nth-child(-n+3) { background: var(--sludge-logistics); box-shadow: 0 0 7px rgba(121,189,245,.23); }
.sludge-mini-ring { position: relative; display: grid; grid-column: 2; grid-row: 1 / 3; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: conic-gradient(var(--sludge-compliance) 0 96.8%, rgba(255,255,255,.07) 96.8% 100%); }
.sludge-mini-ring::before { width: 36px; height: 36px; border-radius: 50%; background: #091b22; content: ""; }
.sludge-mini-ring b { position: absolute; color: #e5e5ff; font-size: 9px; }
.sludge-overview-item.closure > em { align-self: end; color: #8aa1a6; font-size: 8px; font-style: normal; }

.sludge-flow-map { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(82px,1fr)); align-items: center; gap: 34px 18px; min-height: 0; padding: 24px 24px 18px; background: linear-gradient(180deg, rgba(28,74,74,.09) 0 46%, transparent 46% 54%, rgba(29,55,82,.1) 54% 100%); }
.sludge-route-path { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.sludge-route-path path { fill: none; vector-effect: non-scaling-stroke; }
.sludge-route-path .route-base { stroke: rgba(138,173,188,.13); stroke-width: 2; }
.sludge-route-path .route-process,
.sludge-route-path .route-logistics { stroke-width: 2; stroke-dasharray: 8 12; animation: sludge-route-flow 4.8s linear infinite; }
.sludge-route-path .route-process { stroke: rgba(101,218,199,.82); filter: drop-shadow(0 0 3px rgba(101,218,199,.18)); }
.sludge-route-path .route-risk { stroke: rgba(216,176,108,.62); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(216,176,108,.13)); }
.sludge-route-path .route-logistics { stroke: rgba(121,189,245,.82); filter: drop-shadow(0 0 3px rgba(121,189,245,.18)); animation-direction: reverse; }
.sludge-route-path .route-compliance { stroke: rgba(162,163,242,.72); stroke-width: 2; stroke-dasharray: 5 9; }
@keyframes sludge-route-flow { to { stroke-dashoffset: -80; } }
.sludge-lane-label { --label-accent: var(--sludge-process); position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; min-height: 18px; padding: 0; color: #71888f; font-size: 8px; pointer-events: none; }
.sludge-lane-label::before { width: 14px; height: 1px; background: var(--label-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--label-accent) 28%, transparent); content: ""; }
.sludge-lane-label b { color: var(--label-accent); font-size: 9px; font-weight: 620; letter-spacing: .025em; }
.sludge-lane-label.is-process { top: 4px; left: 24px; }
.sludge-lane-label.is-risk { --label-accent: var(--sludge-risk); top: 4px; right: 24px; }
.sludge-lane-label.is-logistics { --label-accent: var(--sludge-logistics); right: 24px; bottom: 3px; }
.sludge-lane-label.is-compliance { --label-accent: var(--sludge-compliance); bottom: 3px; left: 24px; }
.sludge-node { --node-accent: var(--sludge-process); --node-line: rgba(101,218,199,.22); --node-wash: rgba(101,218,199,.06); --node-active-wash: rgba(18,63,66,.96); position: relative; z-index: 2; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; min-width: 0; min-height: 84px; padding: 16px 10px 12px; overflow: hidden; border: 1px solid var(--node-line); border-radius: 4px; background: linear-gradient(145deg, var(--node-wash), rgba(5,18,24,.97) 58%); color: inherit; text-align: left; cursor: pointer; }
.sludge-node::before { position: absolute; top: 0; left: 0; width: 44%; height: 1px; background: linear-gradient(90deg, var(--node-accent), transparent); opacity: .62; content: ""; }
.sludge-node.is-process { --node-accent: var(--sludge-process); --node-line: rgba(101,218,199,.22); --node-wash: rgba(101,218,199,.065); --node-active-wash: rgba(17,62,64,.96); }
.sludge-node.is-risk { --node-accent: var(--sludge-risk); --node-line: rgba(216,176,108,.4); --node-wash: rgba(216,176,108,.09); --node-active-wash: rgba(69,52,28,.96); }
.sludge-node.is-logistics { --node-accent: var(--sludge-logistics); --node-line: rgba(121,189,245,.24); --node-wash: rgba(121,189,245,.065); --node-active-wash: rgba(18,47,70,.97); }
.sludge-node.is-compliance { --node-accent: var(--sludge-compliance); --node-line: rgba(162,163,242,.28); --node-wash: rgba(162,163,242,.07); --node-active-wash: rgba(42,43,82,.96); }
.sludge-stage-1 { grid-column: 1; grid-row: 1; }
.sludge-stage-2 { grid-column: 2; grid-row: 1; }
.sludge-stage-3 { grid-column: 3; grid-row: 1; }
.sludge-stage-4 { grid-column: 4; grid-row: 1; }
.sludge-stage-5 { grid-column: 4; grid-row: 2; }
.sludge-stage-6 { grid-column: 3; grid-row: 2; }
.sludge-stage-7 { grid-column: 2; grid-row: 2; }
.sludge-stage-8 { grid-column: 1; grid-row: 2; }
.sludge-stage-index { position: absolute; top: 5px; left: 8px; color: var(--node-accent); font-size: 8px; font-variant-numeric: tabular-nums; opacity: .64; }
.sludge-node-state { position: absolute; top: 5px; right: 7px; color: var(--node-accent); font-size: 8px; opacity: .86; }
.sludge-node-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--node-wash); box-shadow: inset 0 0 0 1px var(--node-line); }
.sludge-node.is-compliance .sludge-node-icon { border-radius: 8px; }
.sludge-node svg { width: 23px; height: 23px; fill: none; stroke: var(--node-accent); stroke-width: 1.5; }
.sludge-node-copy { min-width: 0; }
.sludge-node-copy b { display: block; overflow: hidden; color: #dce8e9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sludge-node-copy strong { display: block; margin-top: 3px; overflow: hidden; color: #ebf7f5; font-size: 12px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sludge-node.is-risk .sludge-node-copy strong { color: #ead3aa; }
.sludge-node.is-logistics .sludge-node-copy strong { color: #dcecf8; }
.sludge-node.is-compliance .sludge-node-copy strong { color: #e4e4fb; }
.sludge-node-copy small { display: block; margin-top: 2px; overflow: hidden; color: #71888e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sludge-node-meter { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(255,255,255,.035); }
.sludge-node-meter i { display: block; height: 100%; background: linear-gradient(90deg, transparent, var(--node-accent)); }
.sludge-node:hover,
.sludge-node:focus-visible { border-color: var(--node-accent); background: linear-gradient(145deg, var(--node-active-wash), rgba(6,21,28,.98) 62%); }
.sludge-node.warning { border-color: rgba(216,176,108,.58); box-shadow: inset 0 0 18px rgba(216,176,108,.035); }
.sludge-node.warning .sludge-node-state,
.sludge-node.warning .sludge-node-copy strong { color: var(--sludge-risk); }
.sludge-node.is-compliance .sludge-node-state { color: var(--sludge-risk); }
.sludge-node.active { border-color: var(--node-accent); background: linear-gradient(145deg, var(--node-active-wash), rgba(6,21,28,.98) 68%); box-shadow: 0 0 0 1px var(--node-line), 0 9px 24px rgba(0,0,0,.2); transform: translateY(-2px); }
.sludge-node.active .sludge-node-state { color: var(--node-accent); opacity: 1; }

.transport-card { position: relative; z-index: 3; display: grid; grid-template-columns: .8fr 1.55fr .8fr auto; align-items: center; gap: 16px; min-width: 0; padding: 8px 14px; border-top: 1px solid rgba(121,189,245,.2); background: linear-gradient(90deg, rgba(5,18,24,.96), rgba(16,37,52,.92), rgba(7,20,29,.96)); box-shadow: inset 0 1px rgba(121,189,245,.025); }
.transport-current,
.transport-document { min-width: 0; }
.transport-current > span,
.transport-document > span { display: block; color: #71898f; font-size: 8px; }
.transport-current > b,
.transport-document > b { display: block; margin-top: 2px; overflow: hidden; color: #dce9e8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.transport-current > small,
.transport-document > small { display: block; margin-top: 2px; overflow: hidden; color: #71898f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.transport-timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); min-width: 0; }
.transport-timeline::before { position: absolute; top: 8px; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, rgba(121,189,245,.72), rgba(121,189,245,.2)); content: ""; }
.transport-timeline > span { position: relative; display: grid; justify-items: center; min-width: 0; color: #71898f; font-size: 8px; text-align: center; }
.transport-timeline i { position: relative; z-index: 1; width: 7px; height: 7px; margin: 5px 0 3px; border: 1px solid rgba(114,185,237,.42); border-radius: 50%; background: #0a1b22; }
.transport-timeline b { color: #92a8ac; font-size: 8px; font-weight: 560; font-variant-numeric: tabular-nums; }
.transport-timeline small { margin-top: 1px; overflow: hidden; max-width: 100%; color: #647b81; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.transport-timeline .done i { border-color: var(--sludge-logistics); background: var(--sludge-logistics); }
.transport-timeline .done b { color: #a9d4f3; }
.transport-timeline .active i { border-color: var(--sludge-logistics); background: #0d2631; box-shadow: 0 0 0 4px rgba(121,189,245,.12); }
.transport-timeline .active b,
.transport-timeline .active small { color: #a8d9f5; }
.step-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 11px; }
.step-progress span { position: relative; padding-top: 17px; color: #6e858b; font-size: 9px; text-align: center; }
.step-progress span::before { position: absolute; top: 3px; right: 0; left: 0; height: 3px; background: rgba(255,255,255,.06); content: ""; }
.step-progress span.done { color: #a5cfc7; }
.step-progress span.done::before { background: var(--ops-cyan); }
.sludge-right > .ops-panel:first-child .donut-block { justify-content: space-around; gap: 12px; margin-bottom: 2px !important; }
.sludge-right > .ops-panel:first-child .ops-donut { width: 96px !important; height: 96px !important; }
.sludge-right > .ops-panel:first-child .ops-donut::before { inset: 12px; }
.sludge-right > .ops-panel:first-child .donut-legend { min-width: 180px; }
.sludge-right > .ops-panel:first-child .primary-action { min-height: 28px; margin-top: 4px !important; }
.sludge-right > .ops-panel:nth-child(2) .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.sludge-right > .ops-panel:nth-child(2) .stat-box { padding: 5px 6px; }
.sludge-right > .ops-panel:nth-child(2) .stat-box strong { margin-top: 2px; font-size: 14px; }
.sludge-right > .ops-panel:nth-child(2) .step-progress { margin-top: 6px; }
.sludge-right > .ops-panel:nth-child(3) .notice-list { gap: 5px; }
.sludge-right > .ops-panel:nth-child(3) .notice-item { min-height: 43px; padding: 5px 6px; }
.sludge-right > .ops-panel:nth-child(3) .notice-copy p { overflow: hidden; margin-top: 2px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sludge-right > .ops-panel:nth-child(3) .notice-copy small { display: none; }

.alarms-layout { grid-template-columns: minmax(300px, .64fr) minmax(680px, 1.38fr) minmax(380px, .78fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, .75fr); }
.alarms-left { display: grid; grid-column: 1; grid-row: 1; grid-template-rows: .82fr .82fr 1.06fr; gap: 10px; min-height: 0; }
.alarms-center { display: grid; grid-column: 2; grid-row: 1; grid-template-rows: 1.02fr .98fr; gap: 10px; min-height: 0; }
.alarms-right { display: grid; grid-column: 3; grid-row: 1; grid-template-rows: 1.4fr .6fr; gap: 10px; min-height: 0; }
.alarms-bottom { display: grid; grid-column: 1 / 4; grid-row: 2; grid-template-columns: 1.15fr .85fr; gap: 10px; min-height: 0; }
.alarm-topology { position: relative; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(2,1fr); gap: 16px 20px; align-items: center; height: 100%; padding: 18px 22px; }
.alarm-topology::before { position: absolute; top: 50%; right: 5%; left: 5%; height: 1px; background: rgba(99,220,196,.25); content: ""; }
.topology-node { position: relative; z-index: 2; min-height: 64px; padding: 9px 7px; border: 1px solid rgba(126,218,205,.18); border-radius: 4px; background: rgba(5,18,24,.94); color: #91a6aa; font-size: 10px; text-align: center; cursor: pointer; }
.topology-node b { display: block; margin-bottom: 5px; color: #d8e5e6; font-weight: 560; }
.topology-node .alarm-marker { position: absolute; top: -8px; right: -7px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--ops-amber); color: #071117; font-size: 9px; font-weight: 800; }
.topology-node.danger { border-color: rgba(231,96,85,.55); }
.topology-node.danger .alarm-marker { background: var(--ops-red); color: white; animation: alarmBreathe 1.8s ease-in-out infinite; }
@keyframes alarmBreathe { 50% { box-shadow: 0 0 0 8px rgba(231,96,85,0); transform: scale(1.08); } }
.topology-node.active { border-color: var(--ops-cyan); box-shadow: 0 0 18px rgba(99,220,196,.1); }
.alarm-detail-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 12px; height: 100%; }
.alarm-reading { padding: 12px; border: 1px solid rgba(231,96,85,.16); border-radius: 4px; background: rgba(231,96,85,.035); }
.alarm-reading h3 { margin: 0; color: #eef5f5; font-size: 15px; }
.alarm-reading strong { display: block; margin-top: 10px; color: var(--ops-red); font-size: 27px; }
.alarm-reading p { margin: 6px 0 0; color: #7d9398; font-size: 10px; line-height: 1.5; }
.cause-list { display: grid; gap: 7px; margin-top: 9px; }
.cause-row { display: grid; grid-template-columns: 1fr 44px; gap: 8px; color: #879ca1; font-size: 10px; }
.cause-row b { color: #d9e5e6; text-align: right; }
.alarm-queue { display: grid; align-content: start; gap: 5px; }
.alarm-queue-item { display: grid; grid-template-columns: 5px minmax(0,1fr) auto; gap: 8px; min-height: 54px; padding: 7px 5px; border: 1px solid transparent; border-bottom-color: rgba(255,255,255,.04); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.alarm-queue-item:hover,
.alarm-queue-item.active { border-color: rgba(99,220,196,.22); background: rgba(99,220,196,.035); }
.alarm-queue-item > i { width: 4px; height: 100%; border-radius: 2px; background: var(--ops-amber); }
.alarm-queue-item.danger > i { background: var(--ops-red); }
.alarm-queue-copy { min-width: 0; }
.alarm-queue-copy b { display: block; overflow: hidden; color: #d4e1e2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.alarm-queue-copy span { display: block; margin-top: 4px; color: #71888e; font-size: 9px; }
.alarm-queue-item em { align-self: center; color: #84999e; font-size: 9px; font-style: normal; }
.filter-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.filter-chip { min-height: 28px; padding: 0 8px; border-color: rgba(126,218,205,.1); }
.sla-funnel { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; align-items: end; height: 85px; }
.sla-step { display: flex; flex-direction: column; justify-content: flex-end; padding: 7px; border: 1px solid rgba(99,220,196,.12); background: rgba(99,220,196,.035); text-align: center; }
.sla-step strong { color: #d9e6e6; font-size: 16px; }
.sla-step span { margin-top: 4px; color: #728a90; font-size: 9px; }
.alarms-left > .ops-panel:first-child .donut-block { justify-content: space-around; gap: 12px; }
.alarms-left > .ops-panel:first-child .ops-donut { width: 96px; height: 96px; }
.alarms-left > .ops-panel:first-child .ops-donut::before { inset: 12px; }
.alarms-left > .ops-panel:first-child .donut-legend { min-width: 174px; gap: 6px; }
.alarms-right > .ops-panel:first-child .filter-row { gap: 4px; margin-bottom: 4px; }
.alarms-right > .ops-panel:first-child .filter-chip { min-height: 26px; padding: 0 7px; }
.alarms-right > .ops-panel:first-child .alarm-queue { gap: 2px; }
.alarms-right > .ops-panel:first-child .alarm-queue-item { min-height: 38px; padding: 4px 5px; }
.alarms-right > .ops-panel:first-child .alarm-queue-copy span { margin-top: 2px; }
.alarms-right > .ops-panel:nth-child(2) .sla-funnel { height: 78px; }
.alarms-right > .ops-panel:nth-child(2) .inline-meta { margin-top: 5px !important; }

.page-toast { position: fixed; right: 22px; bottom: 22px; z-index: 1000; max-width: 360px; padding: 12px 15px; border: 1px solid rgba(99,220,196,.38); border-radius: 4px; background: rgba(5,17,22,.96); box-shadow: 0 16px 38px rgba(0,0,0,.36); color: #d8e8e6; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; }
.page-toast.visible { opacity: 1; transform: translateY(0); }

@container console-screen (max-width: 1500px) {
  .detail-shell { gap: 9px; }
  .page-workspace { gap: 9px; }
  .ops-panel-head { min-height: 42px; padding: 0 11px; }
  .ops-panel-body { height: calc(100% - 42px); padding: 9px 11px; }
  .ops-panel-head h2 { font-size: 14px; }
  .process-layout,
  .quality-layout,
  .devices-layout,
  .energy-layout,
  .sludge-layout,
  .alarms-layout { grid-template-columns: 260px minmax(560px,1fr) 286px; }
  .process-layout { grid-template-columns: minmax(620px,1.5fr) minmax(300px,.62fr); }
  .process-node { min-height: 98px; padding-right: 4px; padding-left: 4px; }
  .process-node small { display: none; }
  .stage-symbol { width: 30px; height: 30px; }
  .process-flow { gap: 6px; }
  .bar-row { grid-template-columns: 74px minmax(0,1fr) 48px; }
  .ops-table { font-size: 10px; }
  .devices-left > .ops-panel:nth-child(2) .donut-block { gap: 8px; }
  .devices-left > .ops-panel:nth-child(2) .ops-donut { width: 78px; height: 78px; }
  .devices-left > .ops-panel:nth-child(2) .donut-legend { min-width: 132px; }
  .energy-left > .ops-panel:first-child .donut-block { gap: 6px; }
  .energy-left > .ops-panel:first-child .ops-donut { width: 72px; height: 72px; }
  .energy-left > .ops-panel:first-child .ops-donut::before { inset: 10px; }
  .energy-left > .ops-panel:first-child .ops-donut strong { font-size: 21px; }
  .energy-left > .ops-panel:first-child .donut-legend { min-width: 150px; gap: 6px; }
  .energy-left > .ops-panel:first-child .donut-legend div { gap: 5px; font-size: 9px; }
  .sludge-right > .ops-panel:first-child .donut-block { gap: 8px; }
  .sludge-right > .ops-panel:first-child .ops-donut { width: 76px !important; height: 76px !important; }
  .sludge-right > .ops-panel:first-child .donut-legend { min-width: 145px; }
  .sludge-overview-item { padding-right: 9px; padding-left: 9px; }
  .sludge-overview-item > strong { font-size: 17px; }
  .sludge-mini-bars { width: 42px; }
  .sludge-capacity-line,
  .sludge-mini-route { width: 58px; }
  .sludge-flow-map { gap: 28px 10px; padding-right: 16px; padding-left: 16px; }
  .sludge-node { grid-template-columns: 32px minmax(0,1fr); min-height: 78px; padding-right: 8px; padding-left: 8px; }
  .sludge-node-icon { width: 27px; height: 27px; }
  .sludge-node svg { width: 20px; height: 20px; }
  .transport-card { grid-template-columns: .75fr 1.5fr .78fr auto; gap: 8px; padding-right: 10px; padding-left: 10px; }
  .alarms-left > .ops-panel:first-child .donut-block { gap: 8px; }
  .alarms-left > .ops-panel:first-child .ops-donut { width: 76px; height: 76px; }
  .alarms-left > .ops-panel:first-child .donut-legend { min-width: 120px; }
}

@container console-screen (max-width: 1500px) and (max-height: 950px) {
  .detail-shell { grid-template-rows: 58px 84px minmax(0,1fr); }
  .page-kpi-rail .kpi-value strong { font-size: 24px; }
  .ops-panel-head { min-height: 38px; }
  .ops-panel-body { height: calc(100% - 38px); padding-top: 5px; padding-bottom: 5px; }
  .ops-panel-head h2 { font-size: 13px; }
  .notice-copy p { display: none; }

  .devices-left > .ops-panel:nth-child(2) .donut-block { height: 72px; margin-bottom: 4px; }
  .devices-left > .ops-panel:nth-child(2) .ops-donut { width: 68px; height: 68px; }
  .devices-left > .ops-panel:nth-child(2) .stats-grid { gap: 4px; }
  .devices-left > .ops-panel:nth-child(2) .stat-box { padding: 3px 6px; }
  .device-card-title { margin-bottom: 4px; }
  .device-card-title h3 { margin-top: 2px; font-size: 14px; }
  .devices-right > .ops-panel:first-child .stats-grid { gap: 4px; }
  .devices-right > .ops-panel:first-child .stat-box { padding: 4px 6px; }
  .devices-right > .ops-panel:first-child .stat-box strong { margin-top: 2px; font-size: 13px; }
  .device-trend { height: 62px; margin-top: 3px; }
  .devices-right > .ops-panel:nth-child(2) .notice-item { min-height: 38px; padding: 4px 5px; }
  .devices-right > .ops-panel:nth-child(2) .notice-copy small { margin-top: 1px; }

  .energy-right > .ops-panel:first-child .stats-grid { gap: 4px; }
  .energy-right > .ops-panel:first-child .stat-box { padding: 4px 6px; }
  .energy-right > .ops-panel:first-child .stat-box strong { margin-top: 2px; font-size: 14px; }
  .energy-right > .ops-panel:first-child .metric-list { display: none; }
  .energy-right > .ops-panel:nth-child(2) .notice-list { gap: 5px; }
  .energy-right > .ops-panel:nth-child(2) .notice-item { min-height: 45px; padding: 5px 6px; }
  .energy-right > .ops-panel:nth-child(2) .notice-copy small { margin-top: 2px; }
  .energy-right > .ops-panel:nth-child(2) .opportunity-total { gap: 5px; margin-top: 5px; }
  .energy-right > .ops-panel:nth-child(2) .opportunity-total .stat-box { padding: 4px 6px; }
  .energy-right > .ops-panel:nth-child(2) .opportunity-total strong { font-size: 14px; }
  .energy-nodes { gap: 3px; }
  .energy-node { min-height: 21px; font-size: 9px; }
  .energy-source,
  .energy-output { padding: 8px 6px; }
  .energy-source strong,
  .energy-output strong { font-size: 17px; }

  .sludge-left .control-row { min-height: 28px; gap: 5px; }
  .sludge-flow { grid-template-rows: 56px minmax(0,1fr) 62px; }
  .sludge-overview-item { padding-top: 6px; padding-bottom: 6px; }
  .sludge-overview-item > strong { font-size: 15px; }
  .sludge-mini-ring { width: 40px; height: 40px; }
  .sludge-mini-ring::before { width: 32px; height: 32px; }
  .sludge-flow-map { gap: 22px 9px; padding-top: 17px; padding-bottom: 13px; }
  .sludge-node { min-height: 70px; padding-top: 14px; padding-bottom: 9px; }
  .sludge-node-copy small { display: none; }
  .transport-current > small,
  .transport-document > small { display: none; }
  .transport-card { padding-top: 5px; padding-bottom: 5px; }
  .sludge-right > .ops-panel:first-child .ops-donut { width: 66px !important; height: 66px !important; }
  .sludge-right > .ops-panel:first-child .ops-donut::before { inset: 9px; }
  .sludge-right > .ops-panel:first-child .ops-donut strong { font-size: 19px; }
  .sludge-right > .ops-panel:first-child .primary-action { min-height: 24px; }
  .sludge-right > .ops-panel:nth-child(2) .stat-box { padding: 3px 4px; }
  .sludge-right > .ops-panel:nth-child(2) .stat-box strong { font-size: 12px; }
  .sludge-right > .ops-panel:nth-child(2) .step-progress { margin-top: 2px; }
  .sludge-right > .ops-panel:nth-child(2) .step-progress span { padding-top: 12px; }
  .sludge-right > .ops-panel:nth-child(3) .notice-list { gap: 3px; }
  .sludge-right > .ops-panel:nth-child(3) .notice-item { min-height: 29px; padding: 2px 4px; }
  .sludge-right > .ops-panel:nth-child(3) .mini-action { min-height: 23px; padding: 0 6px; font-size: 9px; }
  .sludge-right > .ops-panel:nth-child(3) .notice-copy small { display: none; }

  .alarms-left > .ops-panel:nth-child(2) .bar-chart { gap: 4px; }
  .alarms-left > .ops-panel:nth-child(2) .bar-row { gap: 6px; font-size: 9px; }
  .alarms-left > .ops-panel:nth-child(2) .bar-track { height: 6px; }
  .alarms-right > .ops-panel:first-child .filter-row { margin-bottom: 2px; }
  .alarms-right > .ops-panel:first-child .filter-chip { min-height: 22px; }
  .alarms-right > .ops-panel:first-child .alarm-queue { gap: 1px; }
  .alarms-right > .ops-panel:first-child .alarm-queue-item { min-height: 28px; padding: 1px 4px; }
  .alarms-right > .ops-panel:first-child .alarm-queue-copy span { margin-top: 0; font-size: 8px; }
  .alarms-right > .ops-panel:nth-child(2) .sla-funnel { height: 52px; }
  .alarms-right > .ops-panel:nth-child(2) .sla-step { padding: 4px 2px; }
  .alarms-right > .ops-panel:nth-child(2) .sla-step strong { font-size: 13px; }
  .alarms-right > .ops-panel:nth-child(2) .inline-meta { margin-top: 3px !important; }
  .alarms-right > .ops-panel:nth-child(2) .source-pill { min-height: 18px; padding: 1px 4px; font-size: 8px; }
  .alarm-detail-grid { gap: 8px; }
  .alarm-reading { padding: 8px; }
  .alarm-reading h3 { font-size: 13px; }
  .alarm-reading strong { margin-top: 6px; font-size: 22px; }
  .alarm-reading p { margin-top: 3px; font-size: 9px; }
  .alarm-detail-grid > div:nth-child(2) > div:first-child { height: 72px !important; }
  .cause-list { gap: 3px; margin-top: 3px; }
  .cause-row { font-size: 9px; }
  .cause-list .mini-action,
  .cause-list .primary-action { min-height: 24px; padding: 0 7px; font-size: 9px; }
}

@container console-screen (min-width: 1350px) and (max-width: 1500px) {
  body[data-page] .header-title { display: block; }
  body[data-page] .header-title h1 { font-size: 20px; letter-spacing: .035em; }
}

@container console-screen (max-height: 820px) {
  .detail-shell { grid-template-rows: 58px 84px minmax(0,1fr); }
  .page-kpi-rail .kpi-value strong { font-size: 24px; }
  .ops-panel-head { min-height: 38px; }
  .ops-panel-body { height: calc(100% - 38px); padding-top: 6px; padding-bottom: 6px; }
  .ops-panel-head h2 { font-size: 13px; }
  .ops-table th { height: 24px; }
  .ops-table td { height: 29px; }
  .process-flow-body { grid-template-rows: minmax(160px,1fr) 82px; }
  .process-node { min-height: 82px; }
  .process-node span { margin-top: 3px; }
  .process-node small { display: none; }
  .notice-item { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .notice-copy p { display: none; }
  .sludge-flow { grid-template-rows: 50px minmax(0,1fr) 56px; padding: 0; }
  .sludge-overview-item { padding: 5px 7px; }
  .sludge-overview-item > strong { font-size: 14px; }
  .sludge-overview-item.closure > em { display: none; }
  .sludge-mini-bars { width: 36px; height: 20px; }
  .sludge-capacity-line,
  .sludge-mini-route { width: 48px; }
  .sludge-mini-ring { width: 36px; height: 36px; }
  .sludge-mini-ring::before { width: 29px; height: 29px; }
  .sludge-flow-map { gap: 16px 8px; padding: 13px 13px 10px; }
  .sludge-lane-label { min-height: 15px; padding-right: 5px; padding-left: 5px; }
  .sludge-lane-label span { display: none; }
  .sludge-node { grid-template-columns: 28px minmax(0,1fr); min-height: 62px; padding: 12px 6px 8px; }
  .sludge-node-icon { width: 24px; height: 24px; }
  .sludge-node svg { width: 18px; height: 18px; }
  .sludge-node-copy b { font-size: 9px; }
  .sludge-node-copy strong { font-size: 10px; }
  .sludge-node-copy small { display: none; }
  .transport-card { min-height: 0; gap: 6px; padding: 4px 8px; }
  .transport-timeline small,
  .transport-current > small,
  .transport-document > small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .process-flow::after,
  .topology-node.danger .alarm-marker,
  .sludge-route-path .route-process,
  .sludge-route-path .route-logistics { animation: none; }
  .process-node,
  .device-pin,
  .page-toast,
  .segmented button,
  .alarm-queue-item { transition: none; }
}