/* Reference-led presentation for the existing two 1600 × 900 pages.
 * Generated raster assets supply atmosphere and the complete header only.
 * All data, copy, interactive controls, grid geometry and typography capacity
 * remain in their existing HTML/JS and console-refinement-v2 definitions.
 */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) {
  --dcc-bg-page: #030d29;
  --dcc-bg-panel: #061636;
  --dcc-bg-secondary: #102e61;
  --dcc-text-primary: #eaf6ff;
  --dcc-text-secondary: #9bb9d2;
  --dcc-text-panel-title: #ffe08c;
  --dcc-border-default: #256292;
  --dcc-cyan: #35d6f3;
  --dcc-blue: #4799f0;
  --dcc-chart-primary: #38e2f4;
  --dcc-chart-secondary: #72a8ff;
  --dcc-chart-comparison: #ffcf70;
  background: linear-gradient(180deg, rgba(2, 10, 31, .08), rgba(2, 10, 31, .17) 76%, rgba(2, 10, 31, .3)),
    url('./assets/command-center-v3/cobalt-atmosphere-v3.png') center / cover no-repeat, #030d29 !important;
}

/* A single, full-width raster header replaces the isolated central plate. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .topbar {
  background: #030c26 !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .topbar::before {
  display: block !important;
  top: -4px;
  left: 0;
  width: 1600px;
  height: 86.6667px;
  transform: none;
  background: url('./assets/command-center-v3/header-fullwidth-1920.png') center / 100% 100% no-repeat !important;
}
/* Center the ten-character title within the broad middle plate. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .header-title {
  left: 572px;
  top: 13px;
  width: 456px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .header-title h1 {
  margin: 0;
  padding-left: .1em;
  font-size: 34px !important;
  line-height: 44px;
  letter-spacing: .1em !important;
  color: #edf9ff !important;
  -webkit-text-fill-color: #edf9ff !important;
  -webkit-text-stroke: 0 !important;
  background: none !important;
  filter: none !important;
  text-shadow: 0 1px 0 #0b345d, 0 0 16px rgba(43, 167, 255, .33) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .main-nav {
  left: 376px;
  top: 23px;
  width: 848px;
  grid-template-columns: 112px 624px 112px;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .main-nav .nav-item {
  color: #a5c7e0;
  text-shadow: 0 1px 5px #020b25;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .main-nav .nav-item.active {
  color: #fff1be !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(54, 172, 239, .3), transparent 74%) !important;
  text-shadow: 0 0 13px rgba(56, 202, 254, .65), 0 1px 5px #020b25;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) > .console-perimeter {
  background-image: url('./assets/command-center-v3/screen-perimeter.svg');
}

/* Crisp blue glass: a nine-slice outline keeps all panel corners consistent. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel)::before {
  background: radial-gradient(ellipse at 100% 0, rgba(var(--panel-rgb, 47, 149, 225), .16), transparent 66%),
    linear-gradient(135deg, rgba(20, 66, 128, .31), transparent 50%),
    linear-gradient(180deg, rgba(5, 23, 57, .94), rgba(3, 15, 39, .96)) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel)::after {
  border-image: url('./assets/command-center-v3/panel-glass-frame.svg') 12 / 12px / 0 stretch;
  opacity: .93;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel-heading, .ops-panel-head) {
  background: url('./assets/command-center-v3/panel-heading-ribbon.svg') center / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(var(--panel-rgb, 47, 149, 225), .15), transparent 85%) !important;
  border-bottom-color: rgba(74, 154, 224, .4) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel-heading, .ops-panel-head) h2 {
  color: var(--dcc-text-panel-title) !important;
  text-shadow: 0 1px 3px rgba(0, 10, 33, .8), 0 0 10px rgba(236, 187, 87, .15) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel-heading, .ops-panel-head) h2::before {
  background: #4cdbf5;
  box-shadow: 4px 0 0 rgba(77, 192, 236, .22), 0 0 7px rgba(53, 195, 244, .28);
}

/* Metric values keep their established sizes and complete unit slots. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item::before {
  background: linear-gradient(90deg, rgba(var(--metric-rgb), .9), rgba(var(--metric-rgb), 0)) 18px 1px / calc(100% - 36px) 1px no-repeat,
    radial-gradient(ellipse at 88% 90%, rgba(var(--metric-rgb), .24), transparent 54%),
    radial-gradient(ellipse at 0 0, rgba(43, 102, 181, .35), transparent 74%),
    linear-gradient(115deg, #08224a, #04132f) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item::after {
  border-image: url('./assets/command-center-v3/panel-glass-frame.svg') 12 / 12px / 0 stretch;
  opacity: .95;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item:is(:hover, .ui-selected)::before {
  background: linear-gradient(90deg, rgba(var(--metric-rgb), 1), rgba(var(--metric-rgb), 0)) 18px 1px / calc(100% - 36px) 1px no-repeat,
    radial-gradient(ellipse at 85% 85%, rgba(var(--metric-rgb), .32), transparent 64%),
    linear-gradient(115deg, #0c3263, #071d43) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-label {
  color: #b9d5e9 !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-value strong {
  color: var(--metric-color, #71eaff) !important;
  text-shadow: 0 1px 0 rgba(2, 9, 24, .85), 0 0 16px rgba(var(--metric-rgb), .28) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .alarm-kpi .kpi-value strong {
  color: var(--dcc-state-warning) !important;
  text-shadow: none !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-primary-card::before {
  background: linear-gradient(90deg, #5deaff, transparent) 18px 1px / calc(100% - 36px) 1px no-repeat,
    radial-gradient(ellipse at 88% 85%, rgba(45, 216, 245, .3), transparent 64%),
    linear-gradient(115deg, #0b315b, #061b3c) !important;
}

/* Quiet internal rows leave the source values and state colors intact. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.quality-head, .order-head, .ops-table th) {
  background: rgba(25, 73, 130, .17);
  color: #98bdd9;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.quality-row, .parameter, .order-row, .ops-table td) {
  border-bottom-color: rgba(61, 121, 179, .16);
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.quality-row, .order-row, .ops-table tbody tr):hover {
  background: rgba(24, 99, 164, .16);
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.quality-row, .parameter, .order-row) b {
  color: #dceefb;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .mini-bar {
  background: rgba(20, 66, 116, .7);
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .mini-bar em {
  background: linear-gradient(90deg, #238acb, #3ad9e7);
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.donut, .ops-donut)::before {
  background: radial-gradient(circle at 50% 30%, #0d2b55, #051734 78%) !important;
  box-shadow: inset 0 0 0 1px rgba(54, 143, 206, .14) !important;
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.normal-pill, .saving-pill) {
  background: rgba(27, 121, 133, .15);
  border-color: rgba(73, 181, 183, .33);
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.view-all, .ghost-select) {
  background: linear-gradient(180deg, rgba(21, 61, 112, .45), rgba(8, 27, 57, .7));
  border-color: #245b88;
  color: #aacde5;
}

/* Model labels and toolbar are actual scene controls, never baked into art. */
#water-console.deep-blue-command-center:not([data-page]) .plant-label {
  background: linear-gradient(110deg, rgba(6, 31, 68, .94), rgba(3, 19, 44, .95)) !important;
  border-color: rgba(57, 151, 204, .7) !important;
  box-shadow: inset 0 1px rgba(91, 191, 236, .12), 0 4px 14px rgba(0, 7, 25, .32) !important;
}
#water-console.deep-blue-command-center:not([data-page]) .scene-toolbar {
  border-color: #266291 !important;
  background: rgba(5, 25, 58, .92) !important;
}
#water-console.deep-blue-command-center:not([data-page]) .scene-vignette {
  background: linear-gradient(180deg, rgba(2, 10, 31, .08), transparent 25%, transparent 79%, rgba(3, 13, 41, .12));
}

/* Compact process nodes leave room for the DOM-anchored flow ribbons. */
#water-console.deep-blue-command-center[data-page="energy"] .energy-nodes {
  width: 280px;
  max-width: 100%;
  justify-self: center;
}
#water-console.deep-blue-command-center[data-page="energy"] :is(.energy-node, .energy-source, .energy-output) {
  border-color: #286291 !important;
  background: linear-gradient(105deg, rgba(16, 54, 102, .95), rgba(5, 27, 61, .96)) !important;
  box-shadow: inset 2px 0 rgba(53, 157, 222, .75), inset 0 1px rgba(63, 135, 195, .12) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-node.active {
  border-color: #3cc5e7 !important;
  background: linear-gradient(100deg, #145482, #0b315f) !important;
  box-shadow: inset 3px 0 #6de7f4, 0 0 12px rgba(29, 131, 212, .13) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-node:hover {
  border-color: #4ca2d5 !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-unit-row.active {
  background: linear-gradient(90deg, rgba(26, 101, 165, .3), rgba(11, 48, 88, .2)) !important;
  border-color: rgba(57, 161, 217, .6) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] :is(.stat-box, .mini-metric, .energy-v10-insight-rail) {
  border-color: rgba(52, 109, 170, .48) !important;
  background: linear-gradient(125deg, rgba(16, 51, 94, .64), rgba(6, 27, 60, .65)) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-decision-card {
  border-color: #29547c !important;
  background: linear-gradient(130deg, rgba(14, 43, 84, .84), rgba(5, 23, 51, .86)) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .segmented {
  border-color: #275883;
  background: #051632;
}
#water-console.deep-blue-command-center[data-page="energy"] .segmented button.active {
  background: linear-gradient(180deg, #175081, #113b66) !important;
  box-shadow: inset 0 0 0 1px #337eae, inset 0 -1px #58d7eb !important;
}

/* Category colors identify metrics, not new equipment states or thresholds.
 * Icons are code-native decorative SVGs over the existing empty card space.
 * Their absolute placement does not alter the cards or number/unit slots. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item {
  --metric-rgb: 45, 216, 245;
  --metric-color: #65e9ff;
  --metric-icon: url('./assets/command-center-v3/color-detail/bolt-cyan.svg');
}
#water-console.deep-blue-command-center:not([data-page]) .kpi-sector--flow {
  --metric-icon: url('./assets/command-center-v3/color-detail/water-cyan.svg') !important;
}
#water-console.deep-blue-command-center:not([data-page]) .kpi-sector--load,
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(2) {
  --metric-rgb: 76, 154, 255;
  --metric-color: #8bbdff;
  --metric-icon: url('./assets/command-center-v3/color-detail/gauge-blue.svg');
}
#water-console.deep-blue-command-center:not([data-page]) .kpi-sector--quality,
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(5) {
  --metric-rgb: 66, 223, 184;
  --metric-color: #70f1c9;
  --metric-icon: url('./assets/command-center-v3/color-detail/shield-mint.svg');
}
#water-console.deep-blue-command-center:not([data-page]) .kpi-sector--online,
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(6) {
  --metric-rgb: 168, 141, 244;
  --metric-color: #c2acff;
  --metric-icon: url('./assets/command-center-v3/color-detail/devices-violet.svg');
}
#water-console.deep-blue-command-center:not([data-page]) .kpi-sector--energy,
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(3),
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(4) {
  --metric-rgb: 233, 191, 100;
  --metric-color: #ffda83;
  --metric-icon: url('./assets/command-center-v3/color-detail/bolt-gold.svg');
}
#water-console.deep-blue-command-center:not([data-page]) .kpi-sector--alarm {
  --metric-rgb: 243, 188, 104;
  --metric-color: var(--dcc-state-warning);
  --metric-icon: none;
}
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(3) {
  --metric-icon: url('./assets/command-center-v3/color-detail/coins-gold.svg');
}
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(5) {
  --metric-icon: url('./assets/command-center-v3/color-detail/leaf-mint.svg');
}
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(6) {
  --metric-icon: url('./assets/command-center-v3/color-detail/carbon-violet.svg');
}
#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(7) {
  --metric-rgb: 66, 223, 184;
  --metric-color: #70f1c9;
  --metric-icon: url('./assets/command-center-v3/color-detail/award-mint.svg');
}
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .kpi-label::after {
  content: '';
  position: absolute;
  right: 11px;
  bottom: 9px;
  width: 48px;
  height: 48px;
  display: block;
  background: var(--metric-icon) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(var(--metric-rgb), .24));
  pointer-events: none;
}
#water-console.deep-blue-command-center[data-page="energy"] .kpi-label::after {
  width: 36px;
  height: 36px;
  right: 9px;
  bottom: 12px;
}
#water-console.deep-blue-command-center:not([data-page]) .alarm-kpi .kpi-label .kpi-icon {
  color: #ffcd70;
  filter: drop-shadow(0 0 5px rgba(255, 184, 74, .5));
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-grade-mark strong {
  color: #8affd4;
  background: radial-gradient(circle at 40% 22%, rgba(78, 238, 195, .25), rgba(14, 70, 79, .2));
  border-color: #39ba9c;
  box-shadow: inset 0 0 8px rgba(58, 215, 178, .15), 0 0 9px rgba(43, 191, 162, .15) !important;
}

/* Individual glass tints create depth while all headings retain the same gold. */
#water-console.deep-blue-command-center:not([data-page]) :is(.water-quality, .weekly-panel) { --panel-rgb: 40, 203, 225; }
#water-console.deep-blue-command-center:not([data-page]) :is(.process-params, .sludge-panel) { --panel-rgb: 65, 205, 177; }
#water-console.deep-blue-command-center:not([data-page]) .equipment-panel { --panel-rgb: 134, 133, 236; }
#water-console.deep-blue-command-center:not([data-page]) .energy-panel { --panel-rgb: 215, 171, 79; }
#water-console.deep-blue-command-center:not([data-page]) .alarm-panel { --panel-rgb: 226, 152, 72; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-left > .ops-panel:first-child,
#water-console.deep-blue-command-center[data-page="energy"] .energy-right > .ops-panel:nth-child(2) { --panel-rgb: 226, 179, 88; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-center > .ops-panel:first-child { --panel-rgb: 142, 130, 239; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-center > .ops-panel:nth-child(2) { --panel-rgb: 45, 191, 225; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-right > .ops-panel:first-child { --panel-rgb: 64, 211, 181; }
#water-console.deep-blue-command-center:not([data-page]) .water-quality .quality-row:not(.quality-head) > span:nth-child(2) { color: #96baff; }
#water-console.deep-blue-command-center:not([data-page]) .water-quality .quality-row:not(.quality-head) > span:nth-child(3) { color: #66e7ec; }
#water-console.deep-blue-command-center:not([data-page]) .parameter b { color: #b1eddf !important; }
#water-console.deep-blue-command-center:not([data-page]) .energy-totals > div:first-child strong { color: #ffdb8c; }
#water-console.deep-blue-command-center:not([data-page]) .energy-totals > div:nth-child(2) strong { color: #79e9ff; }
#water-console.deep-blue-command-center:not([data-page]) .sludge-main > div:first-child > strong { color: #80eacc; }
#water-console.deep-blue-command-center:not([data-page]) .moisture strong { color: #b9afff; }
#water-console.deep-blue-command-center:not([data-page]) .moisture > i > b {
  background: linear-gradient(90deg, #5c78d9, #a8a1ff);
  box-shadow: 0 0 7px rgba(150, 134, 244, .23);
}
#water-console.deep-blue-command-center:not([data-page]) .energy-bars > i {
  background: linear-gradient(90deg, #2463b5, #5da9f3 55%, #2879ce) !important;
  box-shadow: inset 0 1px #a9ddff, 2px 2px 0 rgba(16, 62, 124, .65), 0 0 8px rgba(54, 141, 222, .18) !important;
}
#water-console.deep-blue-command-center:not([data-page]) .energy-bars > i.today {
  background: linear-gradient(90deg, #0aa0b4, #5de8e9 55%, #1ab9c7) !important;
  box-shadow: inset 0 1px #b1ffff, 2px 2px 0 rgba(4, 98, 121, .65), 0 0 9px rgba(47, 218, 231, .25) !important;
}
#water-console.deep-blue-command-center:not([data-page]) .donut {
  box-shadow: 0 4px 0 #093c64, 0 8px 15px rgba(0, 8, 25, .4), 0 0 16px rgba(46, 198, 235, .13);
}

/* Six process categories match flowPalette in devices-energy-image2-v1.js. */
#water-console.deep-blue-command-center[data-page="energy"] :is([data-energy-node="blower"], [data-i2-unit-node="blower"]) { --unit-rgb: 45, 216, 245; }
#water-console.deep-blue-command-center[data-page="energy"] :is([data-energy-node="inlet"], [data-i2-unit-node="inlet"]) { --unit-rgb: 76, 154, 255; }
#water-console.deep-blue-command-center[data-page="energy"] :is([data-energy-node="return"], [data-i2-unit-node="return"]) { --unit-rgb: 66, 223, 184; }
#water-console.deep-blue-command-center[data-page="energy"] :is([data-energy-node="advanced"], [data-i2-unit-node="advanced"]) { --unit-rgb: 168, 141, 244; }
#water-console.deep-blue-command-center[data-page="energy"] :is([data-energy-node="sludge"], [data-i2-unit-node="sludge"]) { --unit-rgb: 233, 191, 100; }
#water-console.deep-blue-command-center[data-page="energy"] :is([data-energy-node="auxiliary"], [data-i2-unit-node="auxiliary"]) { --unit-rgb: 114, 141, 248; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-node {
  border-color: rgba(var(--unit-rgb), .57) !important;
  background: linear-gradient(100deg, rgba(var(--unit-rgb), .22), rgba(var(--unit-rgb), .07)), #071b3b !important;
  box-shadow: inset 3px 0 rgba(var(--unit-rgb), .8), inset 0 1px rgba(var(--unit-rgb), .12) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-node.active {
  border-color: rgba(var(--unit-rgb), .96) !important;
  background: linear-gradient(100deg, rgba(var(--unit-rgb), .38), rgba(var(--unit-rgb), .11)), #082247 !important;
  box-shadow: inset 3px 0 rgb(var(--unit-rgb)), inset 0 1px rgba(var(--unit-rgb), .35), 0 0 10px rgba(var(--unit-rgb), .13) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-node > span::before {
  background: linear-gradient(180deg, #d5f8ff, rgb(var(--unit-rgb))) !important;
  box-shadow: 0 0 8px rgba(var(--unit-rgb), .4) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-node b { color: rgb(var(--unit-rgb)); }
#water-console.deep-blue-command-center[data-page="energy"] .energy-unit-row i b {
  background: linear-gradient(90deg, rgba(var(--unit-rgb), .46), rgb(var(--unit-rgb))) !important;
  box-shadow: 0 0 6px rgba(var(--unit-rgb), .18);
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-unit-row strong { color: rgb(var(--unit-rgb)); }
#water-console.deep-blue-command-center[data-page="energy"] .energy-unit-row.active {
  border-color: rgba(var(--unit-rgb), .7) !important;
  background: linear-gradient(90deg, rgba(var(--unit-rgb), .2), rgba(var(--unit-rgb), .04)) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] :is(.energy-source, .energy-output) {
  --unit-rgb: 45, 216, 245;
  border-color: rgba(var(--unit-rgb), .56) !important;
  background: linear-gradient(120deg, rgba(var(--unit-rgb), .2), rgba(var(--unit-rgb), .03)), #071b3b !important;
  box-shadow: inset 2px 0 rgba(var(--unit-rgb), .7), inset 0 1px rgba(var(--unit-rgb), .13) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-source:nth-child(2),
#water-console.deep-blue-command-center[data-page="energy"] .energy-output:nth-child(3) { --unit-rgb: 168, 141, 244; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-source:nth-child(3) { --unit-rgb: 66, 223, 184; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-output:nth-child(2) { --unit-rgb: 233, 191, 100; }
#water-console.deep-blue-command-center[data-page="energy"] :is(.energy-source, .energy-output) strong { color: rgb(var(--unit-rgb)); }
#water-console.deep-blue-command-center[data-page="energy"] .energy-decision-card {
  border-color: #526046 !important;
  background: radial-gradient(ellipse at 100% 0, rgba(223, 178, 80, .13), transparent 75%), linear-gradient(130deg, #102b4d, #071a36) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .energy-decision-card dd { color: #ffdb84; }

/* Series and their legends are recolored together; values and paths unchanged. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.grid-lines, .i2-chart-grid, .energy-v10-grid) { stroke: rgba(111, 157, 199, .19) !important; }
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.axis-text, .chart-axis, .i2-chart-axis, .energy-v10-axis) { fill: #aac7df !important; }
#water-console.deep-blue-command-center:not([data-page]) .teal-series {
  stroke: #3ae2f3 !important;
  filter: drop-shadow(0 0 3px rgba(48, 214, 238, .27));
}
#water-console.deep-blue-command-center:not([data-page]) .blue-series { stroke: #72a8ff !important; }
#water-console.deep-blue-command-center:not([data-page]) .amber-series { stroke: #ffcf70 !important; }
#water-console.deep-blue-command-center:not([data-page]) .line-key.teal { background: #3ae2f3 !important; }
#water-console.deep-blue-command-center:not([data-page]) .line-key.blue { background: #72a8ff !important; }
#water-console.deep-blue-command-center:not([data-page]) .line-key.amber { background: #ffcf70 !important; }
#water-console.deep-blue-command-center:not([data-page]) .weekly-panel .teal-series { stroke: #65e8bc !important; }
#water-console.deep-blue-command-center:not([data-page]) .weekly-panel .blue-series { stroke: #ebc269 !important; }
#water-console.deep-blue-command-center:not([data-page]) .weekly-panel .teal-points { fill: #65e8bc !important; }
#water-console.deep-blue-command-center:not([data-page]) .weekly-panel .line-key.teal { background: #65e8bc !important; }
#water-console.deep-blue-command-center:not([data-page]) .weekly-panel .line-key.blue { background: #ebc269 !important; }
#water-console.deep-blue-command-center[data-page="energy"] .i2-series.primary polyline { stroke: #3ae2f3 !important; filter: drop-shadow(0 0 3px rgba(48, 214, 238, .23)); }
#water-console.deep-blue-command-center[data-page="energy"] .i2-series.primary circle { fill: #77f3ff !important; }
#water-console.deep-blue-command-center[data-page="energy"] .i2-series.secondary polyline { stroke: #b39af4 !important; }
#water-console.deep-blue-command-center[data-page="energy"] .i2-series.secondary circle { fill: #b39af4 !important; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-series.is-energy { stroke: #ebc269 !important; filter: drop-shadow(0 0 3px rgba(235, 194, 105, .25)); }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-point.is-energy { fill: #ffe19c !important; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-series.is-water { stroke: #3cdaef !important; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-point.is-water { fill: #7befff !important; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-limit { stroke: #aaa0d6 !important; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-limit-label { fill: #c7bcf1 !important; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-bottom > .ops-panel:first-child .legend-row .status-pill:not(.info) { color: #ebc269 !important; border-color: rgba(235, 194, 105, .42); }
#water-console.deep-blue-command-center[data-page="energy"] .energy-bottom > .ops-panel:first-child .legend-row .status-pill.info { color: #3cdaef !important; border-color: rgba(60, 218, 239, .42); }
#water-console.deep-blue-command-center[data-page="energy"] .energy-bottom > .ops-panel:first-child .legend-row .status-pill::before { background: currentColor; }
#water-console.deep-blue-command-center[data-page="energy"] .energy-v10-insight-rail > strong { color: #ffdb84; }