/* ============================================================================
 * V2 · 主页大屏色彩优化（覆盖层，非替换）
 * ----------------------------------------------------------------------------
 * 目标：把主页大屏从「青绿 teal / 亮绿 spring-green 两套配色叠加」收敛为
 *       单一「青绿 teal」品牌主色，与侧栏、登录页、--nav 保持一致。
 * 用法：本文件在 styles.css 之后引入，靠级联顺序覆盖主页暗色主题。
 *       确定方案后，应把本层合并进 styles.css 并删除本文件，避免双份叠加。
 * 注意：不动 styles.css 一个字节，旧版本完整保留。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. 主页暗色主题语义 token（作用域：仅在主页激活时生效）
 *    以后调色只改这里；各组件统一引用，禁止再写裸 hex。
 * ------------------------------------------------------------------------ */
.app-shell[data-active-page="home"] {
  /* 背景层级 */
  --home-bg-deepest: #021314;
  --home-bg-deep: #041f20;
  --home-bg-mid: #06302e;
  --home-panel-bg: rgba(5, 38, 36, 0.66);
  --home-card-bg: linear-gradient(135deg, rgba(5, 45, 42, 0.92), rgba(3, 30, 31, 0.82));

  /* 线条 */
  --home-line: rgba(99, 213, 198, 0.24);
  --home-line-strong: rgba(99, 213, 198, 0.46);

  /* 文字（soft/muted 已在暗底上满足 WCAG AA 对比度） */
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #a6d0cb;
  --home-text-muted: #7fa8a4;

  /* 状态语义 */
  --home-accent: #63d5c6;        /* 主强调 / 在线 / 成功 */
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, 0.14);
  --home-warning: #f0a54a;       /* 告警 / 延迟 */
  --home-danger: #ff8f83;        /* 危险 / 离线 */
  --home-neutral: #8fa9a6;       /* 停运 / 无数据 */

  /* 数据系列（图表/圆点/图例共用同一色，消除「同指标两套色」） */
  --home-electricity: #63d5c6;   /* 电力 / 耗电 */
  --home-cooling: #4eb8ff;       /* 冷量 / 供冷当量 */
  --home-eer: #a6f57e;           /* 系统 EER 专用 */
  --home-carbon: #8ee6a8;        /* 碳排放 */
  --home-carbon-reduction: #63d5c6; /* 减碳量 */
  --home-carbon-intensity: #4eb8ff; /* 碳强度 */

  /* 峰平谷（预留：调峰价值板块；平=蓝，避免与「成功=绿」混淆） */
  --home-peak: #f08519;
  --home-flat: #4e9bd4;
  --home-valley: #7c6fb0;
}

/* --------------------------------------------------------------------------
 * 2. 页面骨架与顶栏
 * ------------------------------------------------------------------------ */
.app-shell[data-active-page="home"] .dashboard {
  background: var(--home-bg-deepest);
}

.app-shell[data-active-page="home"] .platform-header {
  background: linear-gradient(180deg, var(--home-bg-mid) 0%, var(--home-bg-deep) 100%);
  border-bottom-color: var(--home-line-strong);
  box-shadow: inset 0 -1px rgba(0, 14, 14, 0.35);
}

.app-shell[data-active-page="home"] .platform-brand strong {
  color: var(--home-text-strong);
  text-shadow: 0 1px 2px rgba(0, 12, 11, 0.55);
}

.app-shell[data-active-page="home"] .platform-meta .weather-strip,
.app-shell[data-active-page="home"] .platform-meta .status-strip {
  background: rgba(3, 28, 28, 0.68);
  border-color: var(--home-line);
  box-shadow: inset 0 0 0 1px rgba(150, 245, 230, 0.05), 0 0 12px rgba(99, 213, 198, 0.12);
}

.app-shell[data-active-page="home"] .platform-meta .status-strip .pulse {
  background: var(--home-accent);
}

/* --------------------------------------------------------------------------
 * 3. 驾驶舱画布背景
 * ------------------------------------------------------------------------ */
#homePage .home-command-center {
  background: var(--refinement-canvas, #071f20);
}

#homePage .home-command-center::before,
#homePage .home-command-center::after {
  content: none;
}

/* --------------------------------------------------------------------------
 * 4. KPI 卡片
 * ------------------------------------------------------------------------ */
#homePage .cockpit-kpi {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

#homePage .cockpit-kpi::after {
  content: none;
}

#homePage .cockpit-kpi-icon {
  color: var(--home-accent);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cockpit-kpi span:not(.cockpit-kpi-icon) { color: var(--home-text-soft); }
.cockpit-kpi strong { color: var(--home-text-strong); }
.cockpit-kpi small { color: var(--home-text-muted); }

/* 季节/能效/减碳卡片的图标色调：蓝=季节、绿=能效、青绿=减碳，保持可区分 */
.cockpit-kpi-seasonal .cockpit-kpi-icon {
  color: var(--home-cooling);
  background: rgba(78, 184, 255, 0.14);
}
.cockpit-kpi-efficiency .cockpit-kpi-icon {
  color: var(--home-carbon);
  background: rgba(142, 230, 168, 0.14);
}
.cockpit-kpi-carbon .cockpit-kpi-icon {
  color: var(--home-carbon-reduction);
  background: rgba(99, 213, 198, 0.16);
}

/* --------------------------------------------------------------------------
 * 5. 数字孪生舞台
 * ------------------------------------------------------------------------ */
.home-page .home-system-stage {
  background: var(--home-bg-deep);
}

.home-page .home-system-stage::before {
  background:
    linear-gradient(90deg, rgba(1, 20, 20, 0.68), transparent 23%, transparent 77%, rgba(1, 20, 20, 0.68)),
    linear-gradient(180deg, rgba(3, 31, 29, 0.05), transparent 60%, rgba(1, 14, 14, 0.52));
}

.home-page .home-system-stage plant-twin-3d {
  filter: saturate(1.08) contrast(1.04);
}

/* --------------------------------------------------------------------------
 * 6. 标题栏与视角切换
 * ------------------------------------------------------------------------ */
#homePage .home-twin-titlebar {
  background: var(--refinement-surface, #0d302f);
  border-color: transparent;
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

#homePage .home-twin-heading-icon {
  color: var(--home-accent-strong);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-twin-heading h1 { color: var(--home-text-strong); }
.home-twin-heading p { color: var(--home-text-muted); }

.home-page .twin-view-switch button {
  color: var(--home-text-soft);
  background: rgba(3, 40, 39, 0.58);
  border-color: var(--home-line);
  box-shadow: 0 0 7px rgba(99, 213, 198, 0.06);
}
.home-page .twin-view-switch button:hover {
  color: var(--home-text-strong);
  border-color: var(--home-line-strong);
}
.home-page .twin-view-switch button[aria-pressed="true"] {
  color: #06312c;
  background: var(--home-accent);
  border-color: var(--home-accent);
}
.home-page .twin-view-state {
  color: var(--home-text-soft);
  background: rgba(255, 255, 255, 0.08);
}
.home-page .twin-view-switch button[aria-pressed="true"] .twin-view-state {
  color: #174245;
  background: rgba(3, 33, 37, 0.12);
}

/* --------------------------------------------------------------------------
 * 7. 孪生舞台叠加标签（状态 / 季节 / 图例 / 提示）
 * ------------------------------------------------------------------------ */
.home-page .twin-status,
.home-page .twin-season-state,
.home-page .twin-legend,
.home-page .twin-hint {
  color: var(--home-text-soft);
  background: rgba(3, 34, 33, 0.72);
  border-color: var(--home-line);
  box-shadow: 0 0 11px rgba(99, 213, 198, 0.1);
}
.home-page .twin-status { color: var(--home-text); }
.home-page .twin-status .status-dot { background: var(--home-accent); }
.home-page .twin-status[data-state="warning"] .status-dot { background: var(--home-warning); }
.home-page .twin-status[data-state="fault"] .status-dot { background: var(--home-danger); }
.home-page .twin-status[data-state="stopped"] .status-dot,
.home-page .twin-status[data-state="waiting"] .status-dot { background: var(--home-neutral); }
.home-page .twin-season-state { color: var(--home-text-soft); }
.home-page .twin-season-state .season-state-dot { background: var(--home-accent); }
.home-page .twin-hint { color: var(--home-text-muted); }

/* 管路物理语义图例：冷冻水=蓝系、冷却水=绿系，保持清晰区分 */
.home-page .twin-legend .is-chilled-supply { background: #3fa0e8; }
.home-page .twin-legend .is-chilled-return { background: #7fc4f0; }
.home-page .twin-legend .is-cooling-supply { background: #3fae8f; }
.home-page .twin-legend .is-cooling-return { background: #8fd6b0; }
.home-page .twin-legend .is-hp-inactive {
  background: repeating-linear-gradient(90deg, #5f7a78 0 5px, #8fa9a6 5px 8px);
}

/* 数字孪生贴附式实时参数：锚定三维设备与管口，随镜头同步移动。 */
.home-page .twin-telemetry-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-page .twin-equipment-anchor-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-page [data-twin-anchor],
.home-page .twin-storage-probe {
  opacity: 0;
  visibility: hidden;
}

.home-page [data-twin-anchor][data-anchor-visible="true"],
.home-page .twin-storage-probe[data-anchor-visible="true"] {
  opacity: 1;
  visibility: visible;
}

.home-page [data-twin-anchor] {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition: opacity 180ms ease-out;
}

.home-page .twin-machine-state-tag,
.home-page .twin-storage-state-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 3px 7px 3px 4px;
  color: var(--home-text-strong);
  background: rgba(1, 25, 25, .92);
  border: 1px solid rgba(108, 224, 207, .58);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(69, 232, 193, .22);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate3d(var(--anchor-x, 0), var(--anchor-y, 0), 0) translate(-50%, -100%) translateY(-11px);
}

.home-page .twin-storage-state-tag {
  transform: translate3d(var(--anchor-x, 0), var(--anchor-y, 0), 0) translate(10px, -100%) translateY(-11px);
}
.home-page .twin-storage-state-tag::after { left: -10px; }

.home-page .twin-machine-state-tag::after,
.home-page .twin-storage-state-tag::after,
.home-page .twin-pipe-reading::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 10px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  content: "";
  opacity: .72;
}

.home-page .twin-device-index {
  display: grid;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  place-items: center;
  color: var(--home-cooling);
  background: rgba(78, 184, 255, .13);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}
.home-page .twin-device-index.is-storage { color: var(--home-carbon-reduction); background: var(--home-accent-dim); }
.home-page .twin-equipment-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--home-neutral); font-size: 9px; font-weight: 700; white-space: nowrap; }
.home-page .twin-equipment-state i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.home-page .twin-equipment-state.is-running,
.home-page .twin-equipment-state.is-live { color: var(--home-accent-strong); }
.home-page .twin-equipment-state.is-stopped,
.home-page .twin-equipment-state.is-waiting { color: var(--home-neutral); }
.home-page .twin-equipment-state.is-delayed,
.home-page .twin-equipment-state.is-stale { color: var(--home-warning); }
.home-page .twin-equipment-state.is-fault { color: var(--home-danger); }

.home-page .twin-pipe-reading {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 23px;
  padding: 3px 6px;
  color: #77d9c0;
  background: rgba(1, 24, 25, .93);
  border: 1px solid currentColor;
  border-radius: 6px;
  box-shadow: 0 0 7px var(--pipe-glow, rgba(86, 224, 190, .34));
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.home-page .twin-pipe-reading > span { color: var(--home-text-soft); font-weight: 650; }
.home-page .twin-pipe-reading b { display: inline-flex; align-items: baseline; gap: 2px; color: currentColor; font-weight: 750; }
.home-page .twin-pipe-reading strong { color: currentColor; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 0 7px currentColor; }
.home-page .twin-pipe-reading small { color: currentColor; font-size: 7px; opacity: .86; }
.home-page .twin-pipe-reading.is-cooling-supply,
.home-page .twin-pipe-reading.is-terminal-supply {
  transform: translate3d(var(--anchor-x, 0), var(--anchor-y, 0), 0) translate(-100%, -100%) translateX(-7px);
}
.home-page .twin-pipe-reading.is-cooling-return,
.home-page .twin-pipe-reading.is-terminal-return {
  transform: translate3d(var(--anchor-x, 0), var(--anchor-y, 0), 0) translate(7px, -100%);
}
.home-page .twin-pipe-reading.is-cooling-supply,
.home-page .twin-pipe-reading.is-cooling-return {
  --pipe-glow: rgba(98, 231, 182, .38);
  color: #62e7b6;
  margin-top: -4px;
}
.home-page .twin-pipe-reading.is-terminal-supply,
.home-page .twin-pipe-reading.is-terminal-return {
  --pipe-glow: rgba(103, 201, 255, .38);
  color: #67c9ff;
  margin-top: -28px;
}
.home-page .twin-pipe-reading.is-terminal-supply::after,
.home-page .twin-pipe-reading.is-terminal-return::after { height: 32px; }

.home-page .twin-telemetry-layer[data-view="overview"] .twin-machine-name { display: none; }

.home-page .twin-storage-probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  height: var(--probe-height, 120px);
  color: var(--home-accent-strong);
  pointer-events: auto;
  transform: translate3d(var(--probe-x, 0), var(--probe-y, 0), 0);
  transform-origin: 0 0;
  transition: opacity 180ms ease-out;
  will-change: transform, height;
}

.home-page .twin-storage-probe[data-orientation="tank-parallel"] {
  transform: translate3d(var(--probe-x, 0), var(--probe-y, 0), 0) rotate(var(--probe-angle, 0deg));
}

.home-page .twin-storage-cable {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #c8fff0, #47e7ba 52%, #38b6ff);
  border-radius: 999px;
  box-shadow: 0 0 4px #65f6ce, 0 0 8px rgba(68, 230, 191, .82);
  transform: rotate(0deg);
  transform-origin: 50% 0;
}

.home-page .twin-storage-profile {
  position: absolute;
  inset: 0;
}

.home-page .twin-storage-point {
  position: absolute;
  bottom: calc(var(--level, 0) * 6.25%);
  left: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--temp-color, var(--home-accent-strong));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: translateY(50%);
  white-space: nowrap;
}
.home-page .twin-storage-point i {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: currentColor;
  border: 1px solid #d8fff5;
  border-radius: 50%;
  box-shadow: 0 0 7px currentColor;
}
.home-page .twin-storage-point-label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  transform: rotate(var(--probe-angle-inverse, 0deg));
  transform-origin: 0 50%;
}
.home-page .twin-storage-point em {
  color: #dcfff7;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(115, 255, 221, .9);
}
.home-page .twin-storage-point b {
  color: currentColor;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .01em;
  text-shadow: 0 0 5px currentColor, 0 0 8px currentColor;
}
.home-page .twin-storage-point small { color: #effffb; font-size: 9px; font-weight: 750; opacity: 1; }
.home-page .twin-storage-point.is-missing { color: var(--home-neutral); opacity: .5; }
.home-page .twin-telemetry-layer[data-view="overview"] .twin-storage-point:not(.is-major) em,
.home-page .twin-telemetry-layer[data-view="overview"] .twin-storage-point:not(.is-major) b,
.home-page .twin-telemetry-layer[data-view="overview"] .twin-storage-point:not(.is-major) small { display: none; }

.home-page .twin-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-page .twin-telemetry-layer[data-view="plant"] .twin-storage-telemetry,
.home-page .twin-telemetry-layer[data-view="tank"] .twin-chiller-telemetry { display: none; }
.home-page .twin-telemetry-layer[data-view="hp"] { display: none; }

@media (max-width: 800px) {
  .home-page .twin-machine-state-tag,
  .home-page .twin-storage-state-tag { font-size: 9px; }
  .home-page .twin-pipe-reading { font-size: 8px; }
  .home-page .twin-pipe-reading strong { font-size: 11px; }
  .home-page .twin-telemetry-layer[data-view="overview"] .twin-pipe-reading { display: none; }
  .home-page .twin-storage-probe { width: 90px; }
  .home-page .twin-storage-point-label { gap: 2px; }
  .home-page .twin-storage-point em { font-size: 7px; }
  .home-page .twin-storage-point b { font-size: 11px; }
  .home-page .twin-storage-point small { font-size: 6px; }
}

@media (min-width: 2560px) {
  .home-page .twin-machine-state-tag,
  .home-page .twin-storage-state-tag { min-height: 34px; padding: 4px 9px 4px 5px; font-size: 13px; }
  .home-page .twin-pipe-reading { min-height: 29px; padding: 4px 8px; font-size: 12px; }
  .home-page .twin-pipe-reading strong { font-size: 17px; }
  .home-page .twin-pipe-reading small { font-size: 9px; }
  .home-page .twin-storage-probe { width: 132px; }
  .home-page .twin-storage-point em { font-size: 12px; }
  .home-page .twin-storage-point b { font-size: 20px; }
  .home-page .twin-storage-point small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page [data-twin-anchor],
  .home-page .twin-storage-probe { transition: none; }
}

/* --------------------------------------------------------------------------
 * 8. 能耗 / 能碳浮动面板
 * ------------------------------------------------------------------------ */
#homePage .home-float-panel {
  background: linear-gradient(155deg, rgba(4, 42, 40, 0.5), rgba(2, 26, 28, 0.5));
  border-color: var(--refinement-line, rgba(166, 208, 203, .16));
  border-radius: 14px;
  box-shadow: none;
  animation: none;
}

#homePage .home-panel-icon {
  color: var(--home-accent-strong);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-float-panel-header h2 { color: var(--home-text-strong); }
.home-panel-live { color: var(--home-text-soft); }
.home-panel-live i {
  background: var(--home-accent);
  box-shadow: 0 0 0 4px rgba(99, 213, 198, 0.1);
}
.home-panel-live.is-unavailable i {
  background: var(--home-neutral);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
 * 9. 周期切换
 * ------------------------------------------------------------------------ */
#homePage .home-period-switch {
  background: rgba(0, 20, 20, 0.54);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  animation: none;
}
.home-period-switch button { color: var(--home-text-soft); }
.home-period-switch button:hover { color: var(--home-text-strong); }
#homePage .home-period-switch button[aria-pressed="true"] {
  color: var(--home-text-strong);
  background: var(--refinement-selected, #205650);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
 * 10. 分析表格（消除「同指标两套色」：圆点与下方图例一致）
 * ------------------------------------------------------------------------ */
.home-panel-section-title span { color: var(--home-text-soft); }
.home-panel-section-title small { color: var(--home-text-muted); }

#homePage .home-analysis-table > div { border-bottom-color: var(--refinement-line, rgba(166, 208, 203, .16)); }
#homePage .home-analysis-table dt { color: var(--home-text-soft); font-size: 14px; font-weight: 500; }
#homePage .home-analysis-table dd strong {
  color: var(--home-text-strong);
  font-size: 24px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  letter-spacing: -.02em;
}
#homePage .home-analysis-table dd small { color: var(--home-text-soft); font-size: 12px; font-weight: 400; }

/* Changfeng reference: one quiet metric band and a clear type hierarchy.
 * Retain the JHS one-screen scene, telemetry anchors and panel transparency. */
#homePage .home-kpi-ribbon {
  gap: 0;
  border-bottom: 1px solid var(--refinement-line, rgba(166, 208, 203, .16));
  box-shadow: none;
}
#homePage .cockpit-kpi + .cockpit-kpi {
  border-left: 1px solid var(--refinement-line, rgba(166, 208, 203, .16));
}
#homePage .cockpit-kpi > div > span { font-size: 14px; font-weight: 500; }
#homePage .cockpit-kpi > div > strong {
  font-size: clamp(26px, 1.8vw, 36px);
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
#homePage .cockpit-kpi small { color: var(--home-text-soft); font-size: 12px; font-weight: 400; }
#homePage :is(.cockpit-kpi-art, .home-section-art) { filter: none; }
#homePage .home-float-panel-header h2,
#homePage .home-twin-heading h1 { font-weight: 650; text-shadow: none; }
#homePage .home-twin-heading p { color: var(--home-text-soft); font-size: 12px; letter-spacing: .06em; }
#homePage .home-panel-section-title span { color: var(--home-text); font-size: 14px; font-weight: 500; }
#homePage :is(.home-panel-section-title small, .home-panel-live, .home-chart-legend, .home-carbon-market-source) {
  color: var(--home-text-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
#homePage .home-period-switch button {
  min-height: 34px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 7px;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}
#homePage .home-period-switch button:hover { background: var(--refinement-raised, #163c3a); }
#homePage .home-period-switch button[aria-pressed="true"] { background: var(--refinement-selected, #1a5249); }
#homePage .twin-view-switch button {
  min-height: 34px;
  border-radius: 8px;
  border-color: transparent;
  background: rgba(0, 20, 20, .54);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}
#homePage .twin-view-switch button[aria-pressed="true"] {
  color: var(--home-text-strong);
  background: var(--refinement-selected, #1a5249);
  border-color: transparent;
}
#homePage :is(.home-period-switch, .twin-view-switch) button:focus-visible {
  outline: 2px solid var(--home-accent-strong);
  outline-offset: 3px;
}

@media (min-width: 1181px) and (max-height: 820px) {
  #homePage .cockpit-kpi > div > strong { font-size: clamp(22px, 1.7vw, 28px); }
  #homePage .home-analysis-table dd strong { font-size: 21px; }
  #homePage .home-analysis-table dt { font-size: 13px; }
}
@media (max-width: 1180px) {
  #homePage .cockpit-kpi:nth-child(odd) { border-left: 0; }
  #homePage .cockpit-kpi:nth-child(n+3) { border-top: 1px solid var(--refinement-line, rgba(166, 208, 203, .16)); }
}
@media (max-width: 760px) {
  #homePage .cockpit-kpi > div > span { font-size: 13px; }
  #homePage .home-period-switch button { min-height: 44px; }
}
@media (max-width: 380px) {
  #homePage .cockpit-kpi + .cockpit-kpi { border-left: 0; border-top: 1px solid var(--refinement-line, rgba(166, 208, 203, .16)); }
}
@media (prefers-reduced-motion: reduce) {
  #homePage .home-period-switch button { transition: none; }
}

/* 电力=青绿、冷量=蓝、能效=EER黄绿（与图例、组合图同色） */
.home-analysis-table .energy-electricity { background: var(--home-electricity); }
.home-analysis-table .energy-cooling { background: var(--home-cooling); }
.home-analysis-table .energy-efficiency { background: var(--home-eer); }
.home-analysis-table .energy-heating { background: var(--home-peak); }
.home-analysis-table .energy-water { background: var(--home-flat); }

/* 碳：排放=绿、减碳=青绿、强度=蓝（三者可区分） */
.home-analysis-table .carbon-emission { background: var(--home-carbon); }
.home-analysis-table .carbon-reduction { background: var(--home-carbon-reduction); }
.home-analysis-table .carbon-intensity { background: var(--home-carbon-intensity); }

/* --------------------------------------------------------------------------
 * 11. 图表（组合图 / 蜡烛图 / 图例）
 * ------------------------------------------------------------------------ */
.home-combo-grid { stroke: rgba(99, 213, 198, 0.14); stroke-width: 1; }
.home-combo-axisline { stroke: rgba(126, 240, 226, 0.34); stroke-width: 1; }
.home-combo-axis { fill: var(--home-text-soft); }
.home-combo-axis.is-eer { fill: var(--home-eer); }
.home-combo-bar.is-electricity { fill: var(--home-electricity); }
.home-combo-bar.is-cooling { fill: var(--home-cooling); }
.home-combo-line { stroke: var(--home-eer); }
.home-combo-point { fill: var(--home-bg-deepest); stroke: var(--home-eer); }
.home-energy-panel .home-combo-line.is-electricity { stroke: var(--home-electricity); }
.home-energy-panel .home-combo-point.is-electricity { stroke: var(--home-electricity); }

/* 图例：耗电=青绿、供冷当量=蓝、EER=黄绿（与表格圆点、柱子同色） */
.home-chart-legend { color: var(--home-text-soft); }
.home-chart-legend i.is-electricity { background: var(--home-electricity); }
.home-chart-legend i.is-cooling { background: var(--home-cooling); }
.home-chart-legend i.is-eer { background: var(--home-eer); }
.home-chart-legend i.is-eer::after {
  background: var(--home-bg-deepest);
  border-color: var(--home-eer);
}

/* 碳价蜡烛图：涨=青绿（正面）、跌=警示橙（负面），替换原「涨绿跌紫」 */
.carbon-market-candle.is-up line,
.carbon-market-candle.is-up rect { fill: var(--home-accent); stroke: var(--home-accent-strong); }
.carbon-market-candle.is-down line,
.carbon-market-candle.is-down rect { fill: var(--home-warning); stroke: #f6c07d; }

/* --------------------------------------------------------------------------
 * 12. 空态与碳价文案
 * ------------------------------------------------------------------------ */
.home-cockpit-empty { color: var(--home-text-muted); }
.home-cockpit-empty strong { color: var(--home-text-soft); }
.home-cockpit-empty span { color: var(--home-text-muted); }

.home-carbon-market-reference { color: var(--home-eer) !important; }
.home-carbon-market-source { color: var(--home-text-muted); }
.home-carbon-market-source:hover { color: var(--home-accent-strong); }

/* --------------------------------------------------------------------------
 * 13. 呼吸描边动画重定义：把绿色辉光换成青绿辉光
 * ------------------------------------------------------------------------ */
@keyframes cockpitEdgeGlow {
  0%, 100% {
    border-color: rgba(99, 213, 198, 0.4);
    box-shadow: inset 0 0 0 1px rgba(190, 245, 236, 0.055), inset 0 1px rgba(210, 250, 242, 0.14), 0 0 12px rgba(99, 213, 198, 0.16);
  }
  50% {
    border-color: rgba(126, 240, 226, 0.85);
    box-shadow: inset 0 0 0 1px rgba(190, 245, 236, 0.08), inset 0 1px rgba(210, 250, 242, 0.18), 0 0 22px rgba(99, 213, 198, 0.48), 0 0 6px rgba(126, 240, 226, 0.45);
  }
}

@keyframes titlebarEdgeGlow {
  0%, 100% {
    border-color: rgba(99, 213, 198, 0.5);
    box-shadow: inset 0 0 0 1px rgba(205, 250, 240, 0.045), 0 0 15px rgba(99, 213, 198, 0.18);
  }
  50% {
    border-color: rgba(126, 240, 226, 0.95);
    box-shadow: inset 0 0 0 1px rgba(205, 250, 240, 0.08), 0 0 26px rgba(99, 213, 198, 0.5), 0 0 6px rgba(126, 240, 226, 0.45);
  }
}

@keyframes panelEdgeGlow {
  0%, 100% {
    border-color: rgba(99, 213, 198, 0.46);
    box-shadow: inset 0 0 0 1px rgba(210, 250, 240, 0.035), inset 0 1px rgba(210, 250, 240, 0.08), 0 0 16px rgba(99, 213, 198, 0.16);
  }
  50% {
    border-color: rgba(126, 240, 226, 0.9);
    box-shadow: inset 0 0 0 1px rgba(210, 250, 240, 0.07), inset 0 1px rgba(210, 250, 240, 0.12), 0 0 28px rgba(99, 213, 198, 0.46), 0 0 6px rgba(126, 240, 226, 0.42);
  }
}

@keyframes switchEdgeGlow {
  0%, 100% {
    border-color: rgba(99, 213, 198, 0.24);
    box-shadow: inset 0 0 9px rgba(99, 213, 198, 0.06), 0 0 8px rgba(99, 213, 198, 0.08);
  }
  50% {
    border-color: rgba(126, 240, 226, 0.7);
    box-shadow: inset 0 0 10px rgba(99, 213, 198, 0.12), 0 0 16px rgba(99, 213, 198, 0.32);
  }
}

/* ==========================================================================
 * 实时监测页面（暗色驾驶舱，复用主页 token）
 * ======================================================================== */
.app-shell[data-active-page="monitor"] {
  --home-bg-deepest: #021314;
  --home-bg-deep: #041f20;
  --home-bg-mid: #06302e;
  --home-line: rgba(99, 213, 198, .24);
  --home-line-strong: rgba(99, 213, 198, .46);
  --home-accent: #63d5c6;
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, .14);
  --home-warning: #f0a54a;
  --home-electricity: #63d5c6;
  --home-cooling: #4eb8ff;
  --home-eer: #a6f57e;
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #a6d0cb;
  --home-text-muted: #7fa8a4;
  --home-card-bg: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82));
}
.app-shell[data-active-page="monitor"] .dashboard { background: var(--home-bg-deepest); }
.app-shell[data-active-page="monitor"] .platform-header {
  background: linear-gradient(180deg, var(--home-bg-mid) 0%, var(--home-bg-deep) 100%);
  border-bottom-color: var(--home-line-strong);
  box-shadow: inset 0 -1px rgba(0, 14, 14, .35);
}
.app-shell[data-active-page="monitor"] .platform-brand strong { color: var(--home-text-strong); text-shadow: 0 1px 2px rgba(0, 12, 11, .55); }
.app-shell[data-active-page="monitor"] .platform-meta .weather-strip,
.app-shell[data-active-page="monitor"] .platform-meta .status-strip {
  background: rgba(3, 28, 28, .68);
  border-color: var(--home-line);
  box-shadow: inset 0 0 0 1px rgba(150, 245, 230, .05), 0 0 12px rgba(99, 213, 198, .12);
}

.monitor-page { max-width: none; margin: 0 calc(-1 * var(--shell-content-gutter)); }
.monitor-command-center {
  position: relative;
  min-height: calc(100dvh - var(--shell-header-height));
  padding: 18px 22px 22px;
  color: var(--home-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 213, 198, .1), transparent 42%),
    linear-gradient(180deg, var(--home-bg-deep) 0%, var(--home-bg-deepest) 100%);
}
.monitor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.monitor-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.monitor-heading-icon { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; color: var(--home-accent); background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 10px; }
.monitor-heading-icon .icon { width: 22px; height: 22px; }
.monitor-heading h1 { margin: 0; color: var(--home-text-strong); font-size: 24px; font-weight: 700; }
.monitor-heading p { margin: 3px 0 0; color: var(--home-text-muted); font-family: "Segoe UI", sans-serif; font-size: 9px; letter-spacing: .12em; }
.monitor-head-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; color: var(--home-text-soft); background: rgba(3, 28, 28, .68); border: 1px solid var(--home-line); border-radius: 999px; font-size: 11px; font-weight: 600; }
.monitor-head-status strong { color: var(--home-text-strong); font-variant-numeric: tabular-nums; }
.monitor-tabbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; margin-bottom: 16px; background: rgba(5, 38, 36, .66); border: 1px solid var(--home-line); border-radius: 12px; }
.monitor-tab { min-height: 34px; padding: 0 16px; color: var(--home-text-soft); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.monitor-tab:hover { color: var(--home-text-strong); background: var(--home-accent-dim); border-color: var(--home-line); }
.monitor-tab.is-active { color: #03201e; background: var(--home-accent); border-color: var(--home-accent); }
.monitor-tab:focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }
.monitor-panel { display: none; }
.monitor-panel.is-active { display: block; animation: monitor-panel-in 200ms cubic-bezier(.22, 1, .36, 1); }
@keyframes monitor-panel-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.monitor-kpi-ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.monitor-kpi-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-width: 0; min-height: 92px; padding: 15px 18px; align-items: center; gap: 14px; background: var(--home-card-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .055), inset 0 1px rgba(210, 250, 242, .14), 0 0 14px rgba(99, 213, 198, .18); }
.monitor-kpi-icon { display: grid; width: 48px; height: 48px; place-items: center; background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 11px; box-shadow: inset 0 0 8px rgba(99, 213, 198, .09), 0 0 9px rgba(99, 213, 198, .12); }
.monitor-kpi-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.monitor-kpi-card > div { min-width: 0; }
.monitor-kpi-card span:not(.monitor-kpi-icon) { display: block; margin-bottom: 5px; color: var(--home-text-soft); font-size: 12px; }
.monitor-kpi-card strong { color: var(--home-text-strong); font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.monitor-kpi-card small { margin-left: 7px; color: var(--home-text-muted); font-size: 10px; white-space: nowrap; }
.monitor-system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.monitor-system-pane { min-width: 0; background: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82)); border: 1px solid var(--home-line-strong); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .05), 0 0 12px rgba(99, 213, 198, .14); }
.monitor-system-head { display: flex; min-height: 48px; padding: 0 16px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--home-line); }
.monitor-system-head-icon { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.monitor-system-head h2 { margin: 0; color: var(--home-text-strong); font-size: 15px; font-weight: 700; }
.monitor-system-head span { color: var(--home-text-muted); font-family: "Segoe UI", sans-serif; font-size: 8px; letter-spacing: .12em; }
.monitor-system-stage { position: relative; height: 480px; min-height: 360px; background: var(--home-bg-deepest); }
.monitor-system-stage plant-twin-3d,
.monitor-system-stage changfeng-twin-3d,
.monitor-system-stage changfeng-twin-2d { display: block; width: 100%; height: 100%; }
.monitor-system-stage .monitor-empty { height: 100%; min-height: 0; }
.monitor-system-2d { isolation: isolate; overflow: hidden; }
.monitor-system-diagram-figure { position: absolute; inset: 0; z-index: 0; margin: 0; background: #031f20; }
.monitor-system-diagram-figure img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(1.04) contrast(1.03); }
.monitor-system-diagram-figure .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.monitor-system-diagram-status,
.monitor-system-diagram-source { position: absolute; z-index: 2; display: inline-flex; align-items: center; color: var(--home-text-soft); background: rgba(3, 28, 28, .86); border: 1px solid var(--home-line); border-radius: 999px; font-size: 10px; font-weight: 700; }
.monitor-system-diagram-status { top: 12px; left: 12px; gap: 7px; min-height: 30px; padding: 0 11px; }
.monitor-system-diagram-status span { width: 7px; height: 7px; background: var(--home-neutral); border-radius: 50%; }
.monitor-system-diagram-status.is-live { color: var(--home-accent-strong); border-color: rgba(99, 213, 198, .38); }
.monitor-system-diagram-status.is-live span { background: var(--home-accent); box-shadow: 0 0 7px rgba(99, 213, 198, .62); }
.monitor-system-diagram-status.is-delayed { color: #ffd18a; border-color: rgba(240, 165, 74, .36); }
.monitor-system-diagram-status.is-delayed span { background: var(--home-warning); }
.monitor-system-diagram-source { right: 12px; bottom: 12px; min-height: 28px; padding: 0 10px; color: var(--home-text-muted); }
/* 系统总览的数据分层：二维保留拓扑摘要，三维复用主页设备锚点。 */
.monitor-system-2d .monitor-system-diagram-figure { bottom: 92px; height: auto; }
.monitor-system-2d .monitor-system-diagram-source { top: 12px; right: 12px; bottom: auto; }
.monitor-system-2d-telemetry {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 7px;
  height: 76px;
  pointer-events: none;
}
.monitor-system-2d-card {
  min-width: 0;
  padding: 8px 9px;
  overflow: hidden;
  color: var(--home-text-soft);
  background: linear-gradient(145deg, rgba(2, 32, 33, .96), rgba(4, 49, 45, .9));
  border: 1px solid rgba(78, 184, 255, .34);
  border-radius: 8px;
  box-shadow: inset 0 1px rgba(220, 255, 248, .08), 0 0 8px rgba(78, 184, 255, .12);
}
.monitor-system-2d-card.is-storage { border-color: rgba(99, 213, 198, .38); box-shadow: inset 0 1px rgba(220, 255, 248, .08), 0 0 8px rgba(99, 213, 198, .14); }
.monitor-system-2d-card header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.monitor-system-2d-card header > strong { overflow: hidden; color: var(--home-text-strong); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.monitor-system-2d-card > div { display: flex; margin-top: 8px; align-items: baseline; justify-content: space-between; gap: 7px; }
.monitor-system-2d-card > div > span { min-width: 0; color: var(--home-text-muted); font-size: 8px; font-weight: 650; white-space: nowrap; }
.monitor-system-2d-card b { margin-left: 3px; color: #67c9ff; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; text-shadow: 0 0 7px rgba(103, 201, 255, .42); }
.monitor-system-2d-card.is-storage b { color: var(--home-accent-strong); text-shadow: 0 0 7px rgba(99, 213, 198, .42); }
.monitor-system-2d-card small { margin-left: 2px; color: currentColor; font-size: 7px; }
.monitor-system-2d-card .twin-equipment-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--home-neutral); font-size: 8px; font-weight: 750; white-space: nowrap; }
.monitor-system-2d-card .twin-equipment-state i { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.monitor-system-2d-card .twin-equipment-state.is-running,
.monitor-system-2d-card .twin-equipment-state.is-live { color: var(--home-accent-strong); }
.monitor-system-2d-card .twin-equipment-state.is-delayed,
.monitor-system-2d-card .twin-equipment-state.is-stale { color: var(--home-warning); }
.monitor-system-2d-card .twin-equipment-state.is-fault { color: var(--home-danger); }
.monitor-system-2d-card .twin-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.monitor-system-3d.home-page { max-width: none !important; margin: 0 !important; }
.monitor-system-3d .twin-telemetry-layer { z-index: 5; }

@media (max-width: 620px) {
  .monitor-system-2d .monitor-system-diagram-figure { bottom: 104px; }
  .monitor-system-2d-telemetry { height: 90px; overflow-x: auto; grid-template-columns: repeat(3, minmax(190px, 1fr)); pointer-events: auto; scrollbar-width: thin; }
  .monitor-system-2d-card { padding: 9px 10px; }
}
.monitor-overview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.monitor-overview-card { display: flex; gap: 12px; min-height: 96px; padding: 15px; align-items: center; background: var(--home-card-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .055), inset 0 1px rgba(210, 250, 242, .14), 0 0 14px rgba(99, 213, 198, .18); }
.monitor-overview-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: var(--home-accent); background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 10px; }
.monitor-overview-icon .icon { width: 20px; height: 20px; }
.monitor-overview-card h3 { margin: 0; color: var(--home-text-soft); font-size: 13px; font-weight: 700; }
.monitor-overview-card p { margin: 5px 0 0; color: var(--home-text-muted); font-size: 10px; }
.monitor-overview-card strong { display: block; margin-top: 6px; color: var(--home-text-strong); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-overview-card small { color: var(--home-text-muted); font-size: 10px; }
.monitor-device-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.monitor-device-card { min-width: 0; padding: 15px; background: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82)); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .05), 0 0 12px rgba(99, 213, 198, .14); }
.monitor-device-head { display: flex; gap: 10px; min-width: 0; align-items: center; }
.monitor-device-icon { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; color: var(--home-accent); background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 9px; }
.monitor-device-icon .icon { width: 18px; height: 18px; }
.monitor-device-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.monitor-device-head > div { min-width: 0; }
.monitor-device-head h3 { margin: 0; overflow: hidden; color: var(--home-text-strong); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.monitor-device-head p { margin: 3px 0 0; color: var(--home-text-muted); font-size: 10px; }
.monitor-device-state { margin-left: auto; padding: 3px 8px; color: var(--home-neutral); background: rgba(143, 169, 166, .14); border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.monitor-device-state.is-live { color: var(--home-accent-strong); background: rgba(99, 213, 198, .16); }
.monitor-device-metrics { display: grid; margin: 12px 0 0; }
.monitor-device-metrics > div { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--home-line); }
.monitor-device-metrics > div:last-child { border-bottom: 0; }
.monitor-device-metrics dt { color: var(--home-text-soft); font-size: 11px; font-weight: 600; }
.monitor-device-metrics dd { display: flex; margin: 0; align-items: baseline; gap: 5px; }
.monitor-device-metrics dd strong { color: var(--home-text-strong); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-device-metrics dd small { color: var(--home-text-muted); font-size: 9px; }
.monitor-empty { display: grid; min-height: 160px; place-content: center; justify-items: center; gap: 6px; color: var(--home-text-muted); }
.monitor-empty strong { color: var(--home-text-soft); font-size: 13px; }
.monitor-empty span { font-size: 10px; }

@media (max-width: 1380px) {
  .monitor-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .monitor-device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .monitor-command-center { padding: 14px 16px; }
  .monitor-kpi-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-overview-grid, .monitor-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .monitor-kpi-ribbon, .monitor-overview-grid, .monitor-device-grid { grid-template-columns: 1fr; }
}

/* 边框与字体对齐主页大屏 */
.monitor-kpi-card span:not(.monitor-kpi-icon) { font-size: 13px; }
.monitor-kpi-card strong { font-size: 31px; }
.monitor-kpi-icon { border-radius: 11px; }
.monitor-device-card { box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), inset 0 1px rgba(210, 250, 240, .08), 0 0 18px rgba(99, 213, 198, .16); }
.monitor-device-metrics dt { font-size: 12px; }
.monitor-device-metrics dd strong { font-size: 20px; }

/* 电表子界面：电量统计内容暗色化（实时监测风格） */
.monitor-meter-body { display: grid; gap: 14px; }
.monitor-meter-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.monitor-meter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.monitor-meter-body .panel {
  background: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82));
  border: 1px solid var(--home-line-strong);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .05), 0 0 14px rgba(99, 213, 198, .14);
}
.monitor-meter-body .panel-heading { border-bottom-color: var(--home-line); }
.monitor-meter-body .section-title h2,
.monitor-meter-body .section-title h3,
.monitor-meter-body .ranking h3,
.monitor-meter-body .chart-heading h3 { color: var(--home-text-strong); }
.monitor-meter-body .section-title p,
.monitor-meter-body .ranking-period-note,
.monitor-meter-body .chart-heading p,
.monitor-meter-body .trend-note { color: var(--home-text-muted); }
.monitor-meter-body .section-icon { color: var(--home-accent); background: var(--home-accent-dim); }
.monitor-meter-body .meter-card { background: rgba(6, 48, 46, .6); border-color: var(--home-line); }
.monitor-meter-body .meter-card strong { color: var(--home-text-strong); }
.monitor-meter-body .meter-card span, .monitor-meter-body .meter-card small { color: var(--home-text-soft); }
.monitor-meter-body table { color: var(--home-text-soft); }
.monitor-meter-body th { background: rgba(5, 38, 36, .6); color: var(--home-text-strong); border-color: var(--home-line); }
.monitor-meter-body td { border-color: var(--home-line); }
.monitor-meter-body .trend-summary > div { border-color: var(--home-line); }
.monitor-meter-body .trend-summary span { color: var(--home-text-muted); }
.monitor-meter-body .trend-summary strong { color: var(--home-text-strong); }
.monitor-meter-body .ghost-button {
  color: #03201e;
  background: var(--home-accent);
  border-color: var(--home-accent);
  font-weight: 700;
}
.monitor-meter-body .ghost-button:hover {
  color: #03201e;
  background: var(--home-accent-strong);
  border-color: var(--home-accent-strong);
}
.monitor-meter-body .range-badge { color: var(--home-text-soft); background: var(--home-accent-dim); border-color: var(--home-line); }
.monitor-meter-body .donut-legend,
.monitor-meter-body .donut-center span,
.monitor-meter-body .ranking-list { color: var(--home-text-soft); }
.monitor-meter-body .ranking-list .rank-item { border-color: var(--home-line); }
.monitor-meter-body .chart-canvas svg text { fill: var(--home-text-soft); }
.monitor-meter-body .chart-canvas svg .grid line { stroke: rgba(99, 213, 198, .14); }
.monitor-meter-body .equipment-image { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) saturate(.9) brightness(1.12) contrast(1.14); }
.monitor-meter-body .equipment-image-heatpump,
.monitor-meter-body .equipment-image-pump,
.monitor-meter-body .equipment-image-snowflake,
.monitor-meter-body .equipment-image-fan,
.monitor-meter-body .equipment-image-droplet { mix-blend-mode: normal; filter: none; }
.monitor-meter-body .meter-heading strong { color: var(--home-text-strong); }
.monitor-meter-body .meter-total { color: var(--home-text-strong); }
.monitor-meter-body .meter-total small { color: var(--home-text-muted); }
.monitor-meter-body .ratio-chip { color: #f0a54a; background: rgba(240, 165, 74, .14); }
.monitor-meter-body .live-label { color: var(--home-accent-strong); }
.monitor-meter-body .meter-type-icon { color: var(--home-accent); background: var(--home-accent-dim); }
.monitor-meter-body .donut-center strong { color: var(--home-text-strong); }
.monitor-meter-body .donut-center span { color: var(--home-text-muted); }
.monitor-meter-body .donut-legend b { color: var(--home-text-soft); }
.monitor-meter-body .donut-legend em { color: var(--home-text-muted); }
.monitor-meter-body .rank-item strong { color: var(--home-text-soft); }
.monitor-meter-body .rank-item > span:last-child { color: var(--home-text-strong); }
.monitor-meter-body .rank-no { color: #03201e; background: var(--home-accent); }
.monitor-meter-body .rank-line { background: rgba(99, 213, 198, .14); }
.monitor-meter-body .rank-line span { background: var(--home-accent); }
.monitor-meter-body .bar-track { background: rgba(99, 213, 198, .14); }
.monitor-meter-body .chart-axis-line { stroke: rgba(99, 213, 198, .2); }
.monitor-meter-body .chart-axis-label { fill: var(--home-text-soft); }
.monitor-meter-body .phase-row span,
.monitor-meter-body .phase-row b { color: var(--home-text-soft); }

/* 电表子界面：字体/色彩/边框完善对齐主页大屏 */
.monitor-meter-kpis .monitor-kpi-card { animation: cockpitEdgeGlow 3.6s ease-in-out infinite; }
.monitor-meter-kpis .monitor-kpi-card:nth-child(2) { animation-delay: .4s; }
.monitor-meter-kpis .monitor-kpi-card:nth-child(3) { animation-delay: .8s; }
.monitor-meter-kpis .monitor-kpi-card:nth-child(4) { animation-delay: 1.2s; }
.monitor-meter-body .panel {
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), inset 0 1px rgba(210, 250, 240, .08), 0 0 18px rgba(99, 213, 198, .16);
  animation: panelEdgeGlow 4.6s ease-in-out infinite;
}
.monitor-meter-body .meter-card {
  background: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82));
  border: 1px solid var(--home-line-strong);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .055), inset 0 1px rgba(210, 250, 242, .14), 0 0 14px rgba(99, 213, 198, .18);
}
.monitor-meter-body .meter-card:hover { background: linear-gradient(135deg, rgba(6, 50, 47, .95), rgba(4, 34, 35, .85)); border-color: var(--home-accent-strong); }
.monitor-meter-body .panel-heading .section-title h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.monitor-meter-body .ranking h3 { font-size: 14px; font-weight: 700; }
.monitor-meter-body .meter-heading strong { font-size: 14px; font-weight: 700; }
.monitor-meter-body .meter-total { font-size: 20px; }
.monitor-meter-body .meter-total small { font-size: 9px; }
@media (prefers-reduced-motion: reduce) {
  .monitor-meter-kpis .monitor-kpi-card,
  .monitor-meter-body .panel { animation: none; }
}

/* 电表子界面：清除白底与白字 */
.monitor-meter-body table { background: transparent; }
.monitor-meter-body .table-wrap { border-color: var(--home-line); }
.monitor-meter-body tbody tr:hover { background: rgba(99, 213, 198, .08); }
.monitor-meter-body td { color: var(--home-text-soft); }
.monitor-meter-body .table-device strong { color: var(--home-text-strong); }
.monitor-meter-body .device-id { color: var(--home-text-muted); }
.monitor-meter-body .ranking-period-switch { background: rgba(0, 20, 20, .54); border-color: var(--home-line); }
.monitor-meter-body .ranking-period-switch button { color: var(--home-text-soft); }
.monitor-meter-body .ranking-period-switch button:hover { color: var(--home-text-strong); background: var(--home-accent-dim); }
.monitor-meter-body .ranking-period-switch button[aria-pressed="true"] { color: #03201e; background: var(--home-accent); box-shadow: 0 0 10px rgba(99, 213, 198, .4); }
.monitor-meter-body .trend-granularity { background: rgba(0, 20, 20, .54); border-color: var(--home-line); }
.monitor-meter-body .trend-granularity button { color: var(--home-text-soft); }
.monitor-meter-body .trend-granularity button:hover { color: var(--home-text-strong); background: var(--home-accent-dim); }
.monitor-meter-body .trend-granularity button[aria-pressed="true"] { color: #03201e; background: var(--home-accent); box-shadow: 0 0 10px rgba(99, 213, 198, .4); }
.monitor-meter-body .trend-controls select { color: var(--home-text-soft); background: rgba(6, 48, 46, .92); border-color: var(--home-line); }
.monitor-meter-body .trend-controls label { color: var(--home-text-soft); }
.monitor-meter-body .trend-summary { background: rgba(5, 38, 36, .4); }
.monitor-meter-body .donut::after { background: #06302e; box-shadow: inset 0 0 0 1px var(--home-line); }
.monitor-meter-body .donut-legend > span { background: rgba(5, 38, 36, .5); border: 1px solid var(--home-line); }

/* 流量表子界面：能量表计内容暗色化 */
.monitor-meter-body .energy-meter-visual { position: relative; grid-template-rows: 1fr; background: transparent; border: 0; }
.monitor-meter-body .energy-meter-image-frame { height: 100%; min-height: 0; padding: 0; }
.monitor-meter-body .energy-meter-image-frame img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: normal; }
.monitor-meter-body .energy-meter-visual figcaption {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  width: auto;
  padding: 4px 9px;
  justify-content: center;
  background: rgba(3, 22, 22, .72);
  border: 1px solid rgba(99, 213, 198, .3);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.monitor-meter-body .energy-meter-visual figcaption strong { color: #63d5c6; font-size: 12px; }
.monitor-meter-body .equipment-state { color: var(--home-text-soft); background: rgba(143, 169, 166, .16); }
.monitor-meter-body .equipment-state.is-live { color: var(--home-accent-strong); background: rgba(99, 213, 198, .16); }
.monitor-meter-body .equipment-state.is-delayed { color: var(--home-warning, #f0a54a); background: rgba(240, 165, 74, .14); }
.monitor-meter-body .equipment-state.is-stale { color: var(--home-danger, #ff8f83); background: rgba(255, 143, 131, .14); }
.monitor-meter-body .energy-data-item {
  background: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82));
  border: 1px solid var(--home-line-strong);
  box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .05), 0 0 12px rgba(99, 213, 198, .14);
}
.monitor-meter-body .energy-data-icon { background: rgba(99, 213, 198, .12); border: 1px solid var(--home-line-strong); }
.monitor-meter-body .energy-data-item .metric-card-title { color: var(--home-text-soft); }
.monitor-meter-body .energy-data-item strong { color: var(--home-text-strong); }
.monitor-meter-body .energy-data-item .metric-card-unit { color: var(--home-text-muted); }
.monitor-meter-body .device-facts { border-color: var(--home-line); background: rgba(5, 38, 36, .4); }
.monitor-meter-body .device-facts > div + div { border-left-color: var(--home-line); }
.monitor-meter-body .device-facts dt { color: var(--home-text-muted); }
.monitor-meter-body .device-facts dd { color: var(--home-text-strong); }

/* 流量表子界面：字体大小对齐主页大屏 */
.monitor-meter-body .energy-data-item strong { font-size: 20px; }
.monitor-meter-body .energy-data-item .metric-card-title { font-size: 12px; font-weight: 600; }
.monitor-meter-body .energy-data-item .metric-card-unit { font-size: 9px; }
.monitor-meter-body .energy-meter-visual figcaption strong { font-size: 13px; }
.monitor-meter-body .device-facts dt { font-size: 11px; }
.monitor-meter-body .device-facts dd { font-size: 14px; }
.monitor-meter-body .energy-data-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 流量表图表色彩优化（青绿 teal 色板） */
.monitor-meter-body .energy-chart-line.line-cooling,
.monitor-meter-body .energy-chart-latest.line-cooling { stroke: #4eb8ff; }
.monitor-meter-body .energy-chart-line.line-heat,
.monitor-meter-body .energy-chart-latest.line-heat { stroke: #f08519; }
.monitor-meter-body .energy-chart-line.line-supply,
.monitor-meter-body .energy-chart-latest.line-supply { stroke: #63d5c6; }
.monitor-meter-body .energy-chart-line.line-return,
.monitor-meter-body .energy-chart-latest.line-return { stroke: #a6f57e; }
.monitor-meter-body .chart-legend i.line-cooling { background: #4eb8ff; }
.monitor-meter-body .chart-legend i.line-heat { background: #f08519; }
.monitor-meter-body .chart-legend i.line-supply { background: #63d5c6; }
.monitor-meter-body .chart-legend i.line-return { background: #a6f57e; }
.monitor-meter-body .chart-grid-line { stroke: rgba(99, 213, 198, .14); }

/* 水泵子界面卡片 */
.monitor-pump-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.monitor-pump-card { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 0%, rgba(99, 213, 198, .13), transparent 34%), var(--home-card-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .055), inset 0 1px rgba(210, 250, 242, .14), 0 0 14px rgba(99, 213, 198, .18); animation: cockpitEdgeGlow 3.6s ease-in-out infinite; }
.monitor-pump-card::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(126, 240, 226, .6), transparent); pointer-events: none; }
.monitor-pump-visual { position: relative; height: 200px; margin: 0; background: rgba(6, 48, 46, .55); border-bottom: 1px solid var(--home-line); }
.monitor-pump-visual img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.monitor-pump-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--home-line); }
.monitor-pump-heading h3 { margin: 0; color: var(--home-text-strong); font-size: 15px; font-weight: 700; }
.monitor-pump-brand { flex: 0 0 auto; padding: 3px 10px; color: #63d5c6; background: rgba(99, 213, 198, .14); border: 1px solid rgba(99, 213, 198, .4); border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.monitor-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 14px; margin: 0; }
.monitor-spec-card { padding: 10px 12px; background: rgba(6, 48, 46, .5); border: 1px solid var(--home-line); border-radius: 8px; }
.monitor-spec-card dt { color: var(--home-text-muted); font-size: 10px; }
.monitor-spec-card dd { display: flex; margin: 4px 0 0; align-items: baseline; gap: 4px; color: var(--home-accent); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-spec-card dd small { color: var(--home-text-muted); font-size: 10px; }
.monitor-storage-grid { display: grid; grid-template-columns: minmax(680px, 820px); }
.monitor-storage-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 176px; overflow: hidden; background: radial-gradient(circle at 88% 0%, rgba(99, 213, 198, .13), transparent 34%), var(--home-card-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .055), inset 0 1px rgba(210, 250, 242, .14), 0 0 14px rgba(99, 213, 198, .18); animation: cockpitEdgeGlow 3.6s ease-in-out infinite; }
.monitor-storage-card::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(126, 240, 226, .6), transparent); pointer-events: none; }
.monitor-storage-main { display: flex; flex-direction: column; min-width: 0; }
.monitor-storage-kpis { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-left: 1px solid var(--home-line); }
.monitor-storage-kpis .monitor-spec-grid { grid-template-columns: 1fr; align-content: stretch; flex: 1; gap: 8px; padding: 0; }
.monitor-storage-kpis .monitor-spec-card { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 12px 14px; }
.monitor-storage-top { display: grid; grid-template-columns: minmax(0, 1fr) 132px; border-bottom: 1px solid var(--home-line); }
.monitor-storage-visual { position: relative; height: 320px; margin: 0; background: rgba(6, 48, 46, .55); }
.monitor-storage-visual img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.monitor-storage-temps { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--home-line); }
.monitor-storage-temps header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--home-line); color: var(--home-text-soft); font-size: 11px; font-weight: 700; }
.monitor-storage-temps header small { color: var(--home-text-muted); font-size: 9px; font-weight: 600; }
.monitor-temp-column { display: flex; flex: 1; flex-direction: column-reverse; gap: 5px; padding: 10px 12px; }
.monitor-temp-layer { display: flex; flex: 1; min-height: 22px; align-items: center; gap: 7px; }
.monitor-temp-swatch { flex: 0 0 auto; width: 5px; height: 14px; border-radius: 999px; }
.monitor-temp-value { flex: 0 0 auto; color: var(--home-text-strong); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-temp-height { flex: 1; color: var(--home-text-muted); font-size: 9px; text-align: right; }
.monitor-temp-loading, .monitor-temp-error { display: grid; flex: 1; place-content: center; color: var(--home-text-muted); font-size: 10px; }
.monitor-storage-charging { border-bottom: 1px solid var(--home-line); }
.monitor-storage-charging-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px 4px; }
.monitor-storage-charging-head strong { color: var(--home-text-strong); font-size: 13px; }
.monitor-storage-charging-head small { color: var(--home-text-muted); font-size: 9px; }
.monitor-storage-chart { padding: 4px 12px 12px; }
.monitor-storage-chart svg { display: block; width: 100%; height: auto; }
.monitor-storage-chart .chart-bar { fill: var(--home-accent); transition: fill 160ms ease; }
.monitor-storage-chart .chart-bar.is-storage { fill: #76e8b4; }
.monitor-storage-chart .chart-bar.is-electricity { fill: #45bdf0; }
.monitor-storage-chart .chart-bar.is-storage:hover { fill: #9dffcc; }
.monitor-storage-chart .chart-bar.is-electricity:hover { fill: #7ad6ff; }
.monitor-storage-chart .chart-grid-line { stroke: rgba(99, 213, 198, .14); }
.monitor-storage-chart .chart-axis-line { stroke: rgba(99, 213, 198, .2); }
.monitor-storage-chart .chart-axis-label { fill: var(--home-text-soft); }
.monitor-storage-chart .chart-empty { color: var(--home-text-muted); min-height: 100px; }
.monitor-storage-temphist { border-bottom: 1px solid var(--home-line); }
.monitor-storage-temphist-chart { padding: 4px 12px 12px; }
.monitor-storage-temphist-chart svg { display: block; width: 100%; height: auto; }
.monitor-temp-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.monitor-temp-line.is-top { stroke: #f0a54a; }
.monitor-temp-line.is-bottom { stroke: #4ea8ff; }
.monitor-temp-dot { fill: var(--home-bg-deepest); stroke-width: 1.5; }
.monitor-temp-dot.is-top { stroke: #f0a54a; }
.monitor-temp-dot.is-bottom { stroke: #4ea8ff; }
.monitor-storage-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--home-line); }
.monitor-storage-heading h3 { margin: 0; color: var(--home-text-strong); font-size: 15px; font-weight: 700; }
.monitor-storage-mode { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.monitor-storage-mode.is-charging { color: var(--home-accent-strong); background: rgba(99, 213, 198, .16); }
.monitor-storage-mode.is-discharging { color: #7cb8ff; background: rgba(78, 168, 255, .16); }
.monitor-storage-mode.is-idle { color: var(--home-neutral); background: rgba(143, 169, 166, .14); }
@media (prefers-reduced-motion: reduce) {
  .monitor-pump-card, .monitor-storage-card { animation: none; }
}

/* 实时监测主界面与子界面：完整对齐主页大屏视觉体系 */
.app-shell[data-active-page="monitor"] .monitor-command-center {
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
.app-shell[data-active-page="monitor"] .monitor-head { margin-bottom: 18px; }
.app-shell[data-active-page="monitor"] .monitor-heading-icon {
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .09));
  border-radius: 12px;
  box-shadow: inset 0 0 8px rgba(99, 213, 198, .1), 0 0 8px rgba(99, 213, 198, .18);
}
.app-shell[data-active-page="monitor"] .monitor-heading-art { display: block; width: 42px; height: 42px; object-fit: contain; }
.app-shell[data-active-page="monitor"] .monitor-heading h1 { font-size: 26px; font-weight: 800; letter-spacing: .01em; text-wrap: balance; }
.app-shell[data-active-page="monitor"] .monitor-heading p { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.app-shell[data-active-page="monitor"] .monitor-head-status { min-height: 34px; padding: 7px 13px; font-size: 12px; }

.app-shell[data-active-page="monitor"] .monitor-tabbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  background: rgba(0, 24, 24, .7);
  border: 1px solid var(--home-line-strong);
  box-shadow: inset 0 0 8px rgba(99, 213, 198, .05);
}
.app-shell[data-active-page="monitor"] .monitor-tab {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #b8ddd8;
  background: rgba(4, 41, 40, .34);
  border: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.app-shell[data-active-page="monitor"] .monitor-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell[data-active-page="monitor"] .monitor-tab img {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 2px;
  object-fit: contain;
  opacity: .82;
  background: rgba(99, 213, 198, .07);
  border: 0;
  border-radius: 9px;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1), background-color 180ms ease;
}
.app-shell[data-active-page="monitor"] .monitor-tab:hover { color: var(--home-text-strong); background: rgba(17, 105, 82, .28); }
.app-shell[data-active-page="monitor"] .monitor-tab:hover img,
.app-shell[data-active-page="monitor"] .monitor-tab.is-active img { opacity: 1; transform: translateY(-1px); background: rgba(195, 255, 223, .1); }
.app-shell[data-active-page="monitor"] .monitor-tab.is-active {
  color: #f4fffc;
  background: linear-gradient(90deg, rgba(27, 190, 112, .68), rgba(16, 139, 103, .72));
  box-shadow: 0 0 8px rgba(64, 239, 137, .2);
}

.app-shell[data-active-page="monitor"] [data-monitor-panel="cooling"] .monitor-pump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell[data-active-page="monitor"] [data-monitor-panel="cooling"] .monitor-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell[data-active-page="monitor"] [data-monitor-panel="heating"] .monitor-device-grid,
.app-shell[data-active-page="monitor"] [data-monitor-panel="valve"] .monitor-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell[data-active-page="monitor"] [data-monitor-panel="heating"] .monitor-device-metrics,
.app-shell[data-active-page="monitor"] [data-monitor-panel="valve"] .monitor-device-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.app-shell[data-active-page="monitor"] .monitor-storage-grid { grid-template-columns: minmax(0, 1fr); }
.app-shell[data-active-page="monitor"] .monitor-storage-card { grid-template-columns: minmax(0, 1fr) 260px; }
.app-shell[data-active-page="monitor"] .monitor-storage-kpis .monitor-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell[data-active-page="monitor"] .monitor-storage-kpis { display: block; }

.app-shell[data-active-page="monitor"] .monitor-kpi-card {
  min-height: 104px;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 16px 18px;
  gap: 16px;
  box-shadow: inset 0 0 0 1px rgba(190, 245, 236, .055), inset 0 1px rgba(210, 250, 242, .14), 0 0 12px rgba(99, 213, 198, .18);
  animation: cockpitEdgeGlow 3.6s ease-in-out infinite;
}
.app-shell[data-active-page="monitor"] .monitor-kpi-card:nth-child(2) { animation-delay: .4s; }
.app-shell[data-active-page="monitor"] .monitor-kpi-card:nth-child(3) { animation-delay: .8s; }
.app-shell[data-active-page="monitor"] .monitor-kpi-card:nth-child(4) { animation-delay: 1.2s; }
.app-shell[data-active-page="monitor"] .monitor-kpi-icon { width: 56px; height: 56px; }
.app-shell[data-active-page="monitor"] .monitor-kpi-card span:not(.monitor-kpi-icon) { margin-bottom: 7px; color: var(--home-text-soft); font-size: 14px; font-weight: 600; }
.app-shell[data-active-page="monitor"] .monitor-kpi-card strong { font-size: 31px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-kpi-card small { color: var(--home-text-soft); font-size: 11px; }
.app-shell[data-active-page="monitor"] .monitor-kpi-card:nth-child(2) .monitor-kpi-icon { background: rgba(166, 245, 126, .12); border-color: rgba(166, 245, 126, .42); }
.app-shell[data-active-page="monitor"] .monitor-kpi-card:nth-child(3) .monitor-kpi-icon { background: rgba(78, 184, 255, .12); border-color: rgba(78, 184, 255, .42); }
.app-shell[data-active-page="monitor"] .monitor-kpi-card:nth-child(4) .monitor-kpi-icon { background: rgba(240, 165, 74, .12); border-color: rgba(240, 165, 74, .42); }

.app-shell[data-active-page="monitor"] .monitor-system-pane,
.app-shell[data-active-page="monitor"] .monitor-device-card,
.app-shell[data-active-page="monitor"] .monitor-pump-card,
.app-shell[data-active-page="monitor"] .monitor-storage-card,
.app-shell[data-active-page="monitor"] .monitor-meter-body .panel {
  border-color: var(--home-line-strong);
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), inset 0 1px rgba(210, 250, 240, .08), 0 0 12px rgba(99, 213, 198, .16);
}
.app-shell[data-active-page="monitor"] .monitor-system-head {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr);
  min-height: 64px;
  padding: 0 16px;
  justify-content: initial;
}
.app-shell[data-active-page="monitor"] .monitor-system-head-icon { width: 38px; height: 38px; }
.app-shell[data-active-page="monitor"] .monitor-system-head h2 { font-size: 17px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-system-head span { justify-self: end; font-size: 10px; font-weight: 600; }

.app-shell[data-active-page="monitor"] .monitor-device-card { padding: 16px; }
.app-shell[data-active-page="monitor"] .monitor-device-icon { width: 46px; height: 46px; border-radius: 11px; }
.app-shell[data-active-page="monitor"] .monitor-device-head h3 { font-size: 16px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-device-head p { font-size: 11px; }
.app-shell[data-active-page="monitor"] .monitor-device-state { padding: 4px 9px; font-size: 11px; }
.app-shell[data-active-page="monitor"] .monitor-device-metrics > div { min-height: 40px; }
.app-shell[data-active-page="monitor"] .monitor-device-metrics dt { color: var(--home-text-soft); font-size: 12px; font-weight: 600; }
.app-shell[data-active-page="monitor"] .monitor-device-metrics dd strong { font-size: 20px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-device-metrics dd small { font-size: 10px; }

.app-shell[data-active-page="monitor"] .monitor-pump-heading h3,
.app-shell[data-active-page="monitor"] .monitor-storage-heading h3 { font-size: 17px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-pump-visual { height: 220px; }
.app-shell[data-active-page="monitor"] .monitor-spec-card dt { color: var(--home-text-soft); font-size: 11px; font-weight: 600; }
.app-shell[data-active-page="monitor"] .monitor-spec-card dd { font-size: 18px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-storage-mode,
.app-shell[data-active-page="monitor"] .monitor-pump-brand { font-size: 12px; }
.app-shell[data-active-page="monitor"] .monitor-storage-charging-head strong { font-size: 15px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-storage-charging-head small,
.app-shell[data-active-page="monitor"] .monitor-storage-temps header small { font-size: 10px; }
.app-shell[data-active-page="monitor"] .monitor-storage-temps header,
.app-shell[data-active-page="monitor"] .monitor-temp-value { font-size: 12px; }
.app-shell[data-active-page="monitor"] .monitor-temp-height { font-size: 10px; }

.app-shell[data-active-page="monitor"] .monitor-section-icon { width: 42px; height: 42px; overflow: hidden; background: rgba(99, 213, 198, .12); border: 1px solid var(--home-line-strong); border-radius: 10px; }
.app-shell[data-active-page="monitor"] .monitor-section-icon img { display: block; width: 38px; height: 38px; object-fit: contain; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .panel-heading { min-height: 68px; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .panel-heading .section-title h2 { color: var(--home-text-strong); font-size: 17px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .panel-heading .section-title p { color: var(--home-text-muted); font-size: 11px; line-height: 1.5; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .ranking h3,
.app-shell[data-active-page="monitor"] .monitor-meter-body .chart-heading h3 { font-size: 15px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .chart-heading p,
.app-shell[data-active-page="monitor"] .monitor-meter-body .ranking-period-note,
.app-shell[data-active-page="monitor"] .monitor-meter-body .trend-note { font-size: 11px; line-height: 1.55; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .ghost-button,
.app-shell[data-active-page="monitor"] .monitor-meter-body .ranking-period-switch button,
.app-shell[data-active-page="monitor"] .monitor-meter-body .trend-granularity button { min-height: 36px; font-size: 12px; }
.app-shell[data-active-page="monitor"] .monitor-meter-body th { color: var(--home-text-strong); font-size: 12px; font-weight: 700; }
.app-shell[data-active-page="monitor"] .monitor-meter-body td { color: var(--home-text-soft); font-size: 12px; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .energy-data-item strong { font-size: 22px; font-weight: 800; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .energy-data-item .metric-card-title { font-size: 13px; }
.app-shell[data-active-page="monitor"] .monitor-meter-body .energy-data-item .metric-card-unit { font-size: 10px; }

@media (max-width: 1200px) {
  .app-shell[data-active-page="monitor"] .monitor-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] .monitor-meter-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] .monitor-system-grid,
  .app-shell[data-active-page="monitor"] .monitor-meter-grid { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] .monitor-storage-grid { grid-template-columns: minmax(0, 1fr); }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="cooling"] .monitor-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .app-shell[data-active-page="monitor"] .monitor-command-center { padding: 14px 12px 20px; }
  .app-shell[data-active-page="monitor"] .monitor-tabbar { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; }
  .app-shell[data-active-page="monitor"] .monitor-tab { flex: 0 0 142px; }
  .app-shell[data-active-page="monitor"] .monitor-system-stage { height: 420px; min-height: 320px; }
  .app-shell[data-active-page="monitor"] .monitor-storage-card { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-storage-kpis { border-top: 1px solid var(--home-line); border-left: 0; }
  .app-shell[data-active-page="monitor"] .monitor-storage-kpis .monitor-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="cooling"] .monitor-pump-grid,
  .app-shell[data-active-page="monitor"] [data-monitor-panel="heating"] .monitor-device-grid,
  .app-shell[data-active-page="monitor"] [data-monitor-panel="valve"] .monitor-device-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .app-shell[data-active-page="monitor"] .monitor-head { align-items: flex-start; flex-wrap: wrap; }
  .app-shell[data-active-page="monitor"] .monitor-heading { width: 100%; }
  .app-shell[data-active-page="monitor"] .monitor-heading-icon { width: 44px; height: 44px; }
  .app-shell[data-active-page="monitor"] .monitor-heading-art { width: 38px; height: 38px; }
  .app-shell[data-active-page="monitor"] .monitor-heading h1 { font-size: 23px; white-space: nowrap; }
  .app-shell[data-active-page="monitor"] .monitor-head-status { width: auto; margin-left: 56px; justify-content: flex-start; }
  .app-shell[data-active-page="monitor"] .monitor-device-grid { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-system-head { grid-template-columns: 36px minmax(0, 1fr); }
  .app-shell[data-active-page="monitor"] .monitor-system-head span { display: none; }
  .app-shell[data-active-page="monitor"] .monitor-system-head-icon { width: 34px; height: 34px; }
  .app-shell[data-active-page="monitor"] .monitor-storage-top { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-storage-temps { min-height: 260px; border-top: 1px solid var(--home-line); border-left: 0; }
  .app-shell[data-active-page="monitor"] .monitor-storage-kpis .monitor-spec-grid { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-meter-kpis { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-meter-body .panel-heading { align-items: flex-start; }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="cooling"] .monitor-spec-grid,
  .app-shell[data-active-page="monitor"] [data-monitor-panel="heating"] .monitor-device-metrics,
  .app-shell[data-active-page="monitor"] [data-monitor-panel="valve"] .monitor-device-metrics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell[data-active-page="monitor"] .monitor-kpi-card,
  .app-shell[data-active-page="monitor"] .monitor-panel,
  .app-shell[data-active-page="monitor"] .monitor-tab img { animation: none; transition: none; }
}

/* ========================================================================== 
 * 能耗分析页面（暗色驾驶舱）
 * ======================================================================== */
.app-shell[data-active-page="energy-analysis"],
.app-shell[data-active-page="carbon-analysis"],
.app-shell[data-active-page="analysis"] {
  --home-bg-deepest: #021314;
  --home-bg-deep: #041f20;
  --home-bg-mid: #06302e;
  --home-line: rgba(99, 213, 198, .24);
  --home-line-strong: rgba(99, 213, 198, .46);
  --home-accent: #63d5c6;
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, .14);
  --home-warning: #f0a54a;
  --home-danger: #ff8f83;
  --home-neutral: #8fa9a6;
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #b8ddd8;
  --home-text-muted: #89b2ad;
  --home-electricity: #63d5c6;
  --home-cooling: #4eb8ff;
  --home-eer: #a6f57e;
  --home-carbon-baseline: #f0a54a;
  --home-carbon-actual: #63d5c6;
  --home-carbon-reduction: #8ee6a8;
  --home-carbon-revenue: #a6f57e;
  --home-report-cost: #f0a54a;
  --home-peak: #f08519;
  --home-flat: #4e9bd4;
  --home-valley: #7c6fb0;
  --home-card-bg: linear-gradient(135deg, rgba(5, 45, 42, .94), rgba(3, 30, 31, .88));
}
.app-shell[data-active-page="energy-analysis"] .dashboard,
.app-shell[data-active-page="carbon-analysis"] .dashboard,
.app-shell[data-active-page="analysis"] .dashboard { background: var(--home-bg-deepest); }
.app-shell[data-active-page="energy-analysis"] .platform-header,
.app-shell[data-active-page="carbon-analysis"] .platform-header,
.app-shell[data-active-page="analysis"] .platform-header {
  background: linear-gradient(180deg, var(--home-bg-mid) 0%, var(--home-bg-deep) 100%);
  border-bottom-color: var(--home-line-strong);
  box-shadow: inset 0 -1px rgba(0, 14, 14, .35);
}
.app-shell[data-active-page="energy-analysis"] .platform-brand strong,
.app-shell[data-active-page="carbon-analysis"] .platform-brand strong,
.app-shell[data-active-page="analysis"] .platform-brand strong { color: var(--home-text-strong); text-shadow: 0 1px 2px rgba(0, 12, 11, .55); }
.app-shell[data-active-page="energy-analysis"] .platform-meta .weather-strip,
.app-shell[data-active-page="energy-analysis"] .platform-meta .status-strip,
.app-shell[data-active-page="carbon-analysis"] .platform-meta .weather-strip,
.app-shell[data-active-page="carbon-analysis"] .platform-meta .status-strip,
.app-shell[data-active-page="analysis"] .platform-meta .weather-strip,
.app-shell[data-active-page="analysis"] .platform-meta .status-strip {
  background: rgba(3, 28, 28, .68);
  border-color: var(--home-line);
}
.energy-analysis-center {
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 213, 198, .11), transparent 42%),
    linear-gradient(180deg, var(--home-bg-deep) 0%, var(--home-bg-deepest) 100%);
}
.energy-analysis-center .monitor-head { margin-bottom: 18px; }
.energy-analysis-center .monitor-heading-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .09));
  box-shadow: inset 0 0 8px rgba(99, 213, 198, .1), 0 0 10px rgba(99, 213, 198, .14);
}
.energy-analysis-center .monitor-heading-art { display: block; width: 42px; height: 42px; object-fit: contain; }
.energy-analysis-center .monitor-heading h1 { font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.energy-analysis-center .monitor-heading p { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.energy-analysis-center .monitor-head-status { font-size: 12px; }

.energy-quality-strip {
  display: flex;
  min-height: 42px;
  margin-bottom: 12px;
  padding: 9px 13px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--home-text-soft);
  background: rgba(4, 40, 39, .72);
  border: 1px solid var(--home-line);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .025);
}
.energy-quality-strip strong { color: var(--home-text-strong); font-size: 13px; }
.energy-quality-strip span { color: var(--home-text-muted); font-size: 11px; font-weight: 600; }
.energy-quality-strip span + span { padding-left: 16px; border-left: 1px solid var(--home-line); }
.energy-quality-strip[data-status="complete"] #eaCoverageStatus { color: var(--home-accent); }
.energy-quality-strip[data-status="collecting"] #eaCoverageStatus { color: var(--home-accent); }
.energy-quality-strip[data-status="partial"] #eaCoverageStatus,
.energy-quality-strip[data-status="data_quality_issue"] #eaCoverageStatus { color: var(--home-warning); }
.energy-quality-strip[data-status="no_data"] #eaCoverageStatus { color: var(--home-danger); }
.energy-quality-strip[data-reconciliation="warning"] #eaReconciliation { color: var(--home-warning); }

.energy-kpi-ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.energy-kpi-ribbon .monitor-kpi-card {
  --energy-kpi-tone: var(--home-electricity);
  min-height: 104px;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 16px 18px;
  gap: 16px;
  animation: cockpitEdgeGlow 3.6s ease-in-out infinite;
}
.energy-kpi-ribbon .monitor-kpi-icon {
  width: 56px;
  height: 56px;
  color: var(--energy-kpi-tone);
  background: color-mix(in srgb, var(--energy-kpi-tone) 16%, transparent);
  border-color: color-mix(in srgb, var(--energy-kpi-tone) 56%, transparent);
}
.energy-kpi-ribbon .monitor-kpi-icon img { width: 50px; height: 50px; }
.energy-kpi-ribbon .monitor-kpi-card > div > span { margin-bottom: 7px; color: var(--home-text-soft); font-size: 14px; font-weight: 600; }
.energy-kpi-ribbon .monitor-kpi-card strong { font-size: 31px; font-weight: 800; }
.energy-kpi-ribbon .monitor-kpi-card small { color: var(--home-text-soft); font-size: 11px; }
.energy-kpi-ribbon .energy-kpi-peak { --energy-kpi-tone: var(--home-peak); }
.energy-kpi-ribbon .energy-kpi-flat { --energy-kpi-tone: var(--home-flat); }
.energy-kpi-ribbon .energy-kpi-valley { --energy-kpi-tone: var(--home-valley); }
.energy-kpi-ribbon .monitor-kpi-card:nth-child(2) { animation-delay: .4s; }
.energy-kpi-ribbon .monitor-kpi-card:nth-child(3) { animation-delay: .8s; }
.energy-kpi-ribbon .monitor-kpi-card:nth-child(4) { animation-delay: 1.2s; }

.energy-main-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 14px; margin-bottom: 14px; }
.energy-panel { min-width: 0; overflow: hidden; background: radial-gradient(circle at 88% 0%, rgba(99, 213, 198, .13), transparent 34%), var(--home-card-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), inset 0 1px rgba(210, 250, 240, .08), 0 0 18px rgba(99, 213, 198, .16); animation: panelEdgeGlow 4.6s ease-in-out infinite; }
.energy-panel-head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px 11px; border-bottom: 1px solid var(--home-line); }
.energy-panel-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.energy-panel-title > div { min-width: 0; }
.energy-panel-icon { width: 42px; height: 42px; }
.energy-panel-icon img { width: 38px; height: 38px; }
.energy-panel-head h2 { margin: 0; color: var(--home-text-strong); font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.energy-panel-head p { margin: 4px 0 0; color: var(--home-text-muted); font-size: 12px; font-weight: 500; }
.energy-analysis-center .monitor-pump-granularity { display: inline-grid; grid-template-columns: repeat(4, minmax(42px, 1fr)); gap: 3px; padding: 3px; background: rgba(0, 20, 20, .58); border: 1px solid var(--home-line); border-radius: 9px; }
.energy-analysis-center .monitor-pump-granularity button { min-height: 32px; padding: 0 13px; color: var(--home-text-soft); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; transition: color 180ms ease, background-color 180ms ease; }
.energy-analysis-center .monitor-pump-granularity button:hover { color: var(--home-text-strong); background: var(--home-accent-dim); }
.energy-analysis-center .monitor-pump-granularity button.is-active { color: #03201e; background: var(--home-accent); }
.energy-analysis-center .monitor-pump-granularity button:focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }
.energy-chart { padding: 12px 16px 16px; }
.energy-chart svg { display: block; width: 100%; height: auto; }
.energy-chart .chart-bar { fill: var(--home-accent); transition: fill 160ms ease; }
.energy-chart .chart-bar:hover { fill: var(--home-accent-strong); }
.energy-chart .chart-bar.is-weekend { fill: #4ea8ff; }
.energy-chart .chart-bar.is-weekend:hover { fill: #7fc8f8; }
.energy-chart .chart-grid-line { stroke: rgba(99, 213, 198, .14); }
.energy-chart .chart-axis-line { stroke: rgba(99, 213, 198, .2); }
.energy-chart .chart-axis-label { fill: var(--home-text-soft); font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; font-size: 11px; font-weight: 600; }
.energy-chart .chart-axis-label.is-weekend { fill: #7fc8f8; font-weight: 800; }
.energy-chart .chart-empty { color: var(--home-text-muted); min-height: 140px; }
.energy-chart .chart-empty strong { color: var(--home-text-soft); font-size: 14px; }
.energy-chart .chart-empty .icon { color: var(--home-accent); }
#energyAnalysisPage .chart-empty {
  color: var(--home-text-muted);
  background: rgba(3, 30, 31, .46);
  border-color: var(--home-line);
}
#energyAnalysisPage .chart-empty strong { color: var(--home-text-soft); }
#energyAnalysisPage .chart-empty .icon { color: var(--home-accent); }

.energy-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.energy-ranking { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-height: 430px; overflow: auto; }
.energy-rank-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.energy-rank-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; color: var(--home-accent); background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .08)); border: 1px solid var(--home-line-strong); border-radius: 9px; }
.energy-rank-icon .icon { width: 17px; height: 17px; }
.energy-rank-main { flex: 1; min-width: 0; }
.energy-rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.energy-rank-top strong { overflow: hidden; color: var(--home-text-soft); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.energy-rank-top span { flex: 0 0 auto; color: var(--home-text-strong); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.energy-rank-line { height: 6px; overflow: hidden; background: rgba(99, 213, 198, .14); border-radius: 999px; }
.energy-rank-line span { display: block; height: 100%; background: linear-gradient(90deg, rgba(99, 213, 198, .55), var(--home-accent)); border-radius: 999px; }

.energy-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.energy-group-grid .energy-panel[hidden] { display: none; }
.energy-group-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 14px 0; }
.energy-group-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--home-text-soft); font-size: 12px; font-weight: 700; }
.energy-group-legend i { width: 8px; height: 8px; border-radius: 50%; }
.energy-group-grid .energy-chart { padding-top: 6px; }

@media (min-width: 1201px) {
  .energy-group-grid[data-season="heating"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .energy-main-grid { grid-template-columns: 1fr; }
  .energy-group-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .energy-analysis-center { padding: 14px; }
  .energy-analysis-center .monitor-head { align-items: flex-start; }
  .energy-analysis-center .monitor-head-status { margin-top: 7px; }
  .energy-analysis-center .monitor-heading h1 { font-size: 22px; }
  .energy-kpi-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .energy-kpi-ribbon .monitor-kpi-card { min-height: 94px; grid-template-columns: 48px minmax(0, 1fr); padding: 13px; gap: 11px; }
  .energy-kpi-ribbon .monitor-kpi-icon { width: 48px; height: 48px; }
  .energy-kpi-ribbon .monitor-kpi-icon img { width: 43px; height: 43px; }
  .energy-kpi-ribbon .monitor-kpi-card strong { font-size: 25px; }
}
@media (max-width: 560px) {
  .energy-analysis-center .monitor-head { flex-direction: column; }
  .energy-kpi-ribbon { grid-template-columns: 1fr; }
  .energy-panel-head { align-items: flex-start; flex-direction: column; }
  .energy-panel-title { width: 100%; }
  .energy-analysis-center .monitor-pump-granularity { width: 100%; }
  .energy-chart { padding-right: 10px; padding-left: 8px; overflow-x: auto; }
  .energy-chart svg { min-width: 520px; }
  .energy-quality-strip { align-items: flex-start; flex-direction: column; }
  .energy-quality-strip span + span { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .energy-panel, .energy-kpi-ribbon .monitor-kpi-card { animation: none; }
}

/* 能碳分析页面 */
.app-shell[data-active-page="carbon-analysis"] {
  --home-text-soft: #a6d0cb;
  --home-text-muted: #7fa8a4;
  --carbon-panel-surface: linear-gradient(155deg, rgba(4, 42, 40, .9), rgba(2, 26, 28, .88));
  --carbon-edge: rgba(99, 213, 198, .46);
  --carbon-edge-active: rgba(126, 240, 226, .72);
}
.carbon-analysis-center {
  color: var(--home-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 213, 198, .12), transparent 40%),
    linear-gradient(180deg, var(--home-bg-deep) 0%, var(--home-bg-deepest) 100%);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
}
.carbon-analysis-center .monitor-heading h1 { font-size: 27px; letter-spacing: 0; }
.carbon-analysis-center .monitor-heading p { color: var(--home-text-muted); }
.carbon-analysis-center .carbon-kpi-baseline { --energy-kpi-tone: var(--home-carbon-baseline); }
.carbon-analysis-center .carbon-kpi-actual { --energy-kpi-tone: var(--home-carbon-actual); }
.carbon-analysis-center .carbon-kpi-reduction { --energy-kpi-tone: var(--home-carbon-reduction); }
.carbon-analysis-center .carbon-kpi-revenue { --energy-kpi-tone: var(--home-carbon-revenue); }
.carbon-analysis-center .energy-kpi-ribbon .monitor-kpi-card {
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--energy-kpi-tone) 12%, transparent), transparent 36%),
    var(--home-card-bg);
  border-color: color-mix(in srgb, var(--energy-kpi-tone) 52%, var(--carbon-edge));
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), 0 0 8px color-mix(in srgb, var(--energy-kpi-tone) 18%, transparent);
  animation: carbon-edge-pulse 3.8s cubic-bezier(.22, 1, .36, 1) infinite;
}
.carbon-analysis-center .energy-kpi-ribbon .monitor-kpi-card > div > span { color: var(--home-text-soft); font-size: 14px; font-weight: 700; }
.carbon-analysis-center .energy-kpi-ribbon .monitor-kpi-card strong { font-size: 32px; letter-spacing: -.02em; }
.carbon-analysis-center .energy-kpi-ribbon .monitor-kpi-card small { color: var(--home-text-muted); font-size: 11px; }
.carbon-analysis-center .monitor-pump-granularity { grid-template-columns: repeat(3, minmax(50px, 1fr)); }
.carbon-analysis-center .energy-panel {
  background: var(--carbon-panel-surface);
  border-color: var(--carbon-edge);
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), inset 0 1px rgba(210, 250, 240, .08), 0 0 8px rgba(99, 213, 198, .18);
  animation: none;
}
.carbon-analysis-center .energy-panel-head {
  border-bottom-color: rgba(99, 213, 198, .28);
}
.carbon-analysis-center .energy-panel-head h2 { font-size: 18px; letter-spacing: 0; }
.carbon-analysis-center .energy-panel-head p { color: var(--home-text-muted); font-size: 12px; line-height: 1.5; }
.carbon-standard-panel { margin-bottom: 14px; }
.carbon-standard-title-row { display: flex; min-width: 0; align-items: baseline; gap: 12px; }
.carbon-standard-title-row h2 { flex: 0 0 auto; }
.carbon-standard-title-row p { min-width: 0; margin: 0; overflow: hidden; color: var(--home-accent-strong); font-size: 12px; font-weight: 700; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.carbon-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.carbon-chart-card { display: grid; min-height: clamp(390px, 46vh, 480px); grid-template-rows: 78px minmax(0, 1fr); }
.carbon-chart-card .energy-panel-head { min-height: 0; height: 78px; }
.carbon-chart-card .energy-chart { display: flex; min-height: 312px; padding: 14px 16px 18px; align-items: stretch; }
.carbon-chart-card .energy-chart svg { width: 100%; height: 100%; }
.carbon-standard-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 14px 16px 16px; list-style: none; }
.carbon-standard-list li { position: relative; min-height: 38px; padding: 9px 14px 9px 31px; color: var(--home-text-soft); background: rgba(6, 48, 46, .5); border: 1px solid var(--home-line); border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.carbon-standard-list li::before { content: "✓"; position: absolute; left: 12px; color: var(--home-accent-strong); font-size: 14px; font-weight: 800; }
.carbon-price-now { flex: 0 0 auto; padding: 7px 13px; color: #261400; background: var(--home-warning); border-radius: 999px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carbon-price-now.is-stale { color: var(--home-text-soft); background: rgba(240, 165, 74, .14); border: 1px solid rgba(240, 165, 74, .42); }
.carbon-today-revenue { flex: 0 0 auto; color: var(--home-text-soft); font-size: 13px; font-weight: 700; }
.carbon-today-revenue strong { color: var(--home-carbon-revenue); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
#carbonAnalysisPage .chart-empty { color: var(--home-text-muted); background: rgba(3, 30, 31, .46); border-color: var(--home-line); }
#carbonAnalysisPage .chart-empty strong { color: var(--home-text-soft); }
#carbonAnalysisPage .chart-empty .icon { color: var(--home-accent); }
#carbonAnalysisPage .energy-chart .chart-axis-label { fill: var(--home-text-soft); font-size: 12px; font-weight: 700; }
#carbonAnalysisPage .energy-chart .chart-grid-line { stroke: rgba(99, 213, 198, .18); }
#carbonAnalysisPage .energy-chart .chart-axis-line { stroke: rgba(126, 240, 226, .34); }
#carbonSeriesChart .energy-line, #carbonPriceChart .energy-line { stroke-width: 2.5; }
#carbonRevenueChart .chart-bar { fill: var(--home-carbon-revenue); }
#carbonRevenueChart .chart-bar.is-negative { fill: #ff876f; }
#carbonRevenueChart .chart-bar:hover { fill: #c0ff9d; }

@keyframes carbon-edge-pulse {
  0%, 100% { border-color: color-mix(in srgb, var(--energy-kpi-tone) 48%, var(--carbon-edge)); box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), 0 0 6px color-mix(in srgb, var(--energy-kpi-tone) 14%, transparent); }
  50% { border-color: color-mix(in srgb, var(--energy-kpi-tone) 68%, var(--carbon-edge-active)); box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .07), 0 0 8px color-mix(in srgb, var(--energy-kpi-tone) 24%, transparent); }
}

@media (max-width: 1440px) {
  .carbon-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .carbon-chart-grid { grid-template-columns: 1fr; }
  .carbon-standard-title-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .carbon-standard-title-row p { overflow: visible; white-space: normal; }
}

@media (max-width: 560px) {
  .carbon-chart-card { min-height: 0; grid-template-rows: auto auto; }
  .carbon-chart-card .energy-panel-head { height: auto; min-height: 64px; }
  .carbon-chart-card .energy-chart { min-height: 250px; }
  .carbon-standard-list { display: grid; grid-template-columns: 1fr; }
  .carbon-standard-list li { width: 100%; }
  .carbon-price-now, .carbon-today-revenue { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .carbon-analysis-center .energy-kpi-ribbon .monitor-kpi-card { animation: none; }
}

/* ==========================================================================
 * 模型算法页：优化模型驾驶舱（暗色大屏）
 * ======================================================================== */
.app-shell[data-active-page="algorithm"] {
  --home-bg-deepest: #021314;
  --home-bg-deep: #041f20;
  --home-bg-mid: #06302e;
  --home-line: rgba(99, 213, 198, .24);
  --home-line-strong: rgba(99, 213, 198, .46);
  --home-accent: #63d5c6;
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, .14);
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #a6d0cb;
  --home-text-muted: #7fa8a4;
  --home-card-bg: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82));
  --home-neutral: #8fa9a6;
}
.app-shell[data-active-page="algorithm"] .dashboard { background: var(--home-bg-deepest); }
.app-shell[data-active-page="algorithm"] .platform-header {
  background: linear-gradient(180deg, var(--home-bg-mid) 0%, var(--home-bg-deep) 100%);
  border-bottom-color: var(--home-line-strong);
  box-shadow: inset 0 -1px rgba(0, 14, 14, .35);
}
.app-shell[data-active-page="algorithm"] .platform-brand strong { color: var(--home-text-strong); text-shadow: 0 1px 2px rgba(0, 12, 11, .55); }
.app-shell[data-active-page="algorithm"] .platform-meta .weather-strip,
.app-shell[data-active-page="algorithm"] .platform-meta .status-strip { background: rgba(3, 28, 28, .68); border-color: var(--home-line); }
.app-shell[data-active-page="algorithm"] .algorithm-page {
  max-width: none;
  margin: 0 calc(-1 * var(--shell-content-gutter));
  padding: 18px 22px 26px;
  color: var(--home-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 213, 198, .1), transparent 42%),
    linear-gradient(180deg, var(--home-bg-deep) 0%, var(--home-bg-deepest) 100%);
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
.app-shell[data-active-page="algorithm"] .algorithm-topbar { align-items: center; margin-bottom: 18px; background: transparent; border: 0; }
.algorithm-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.algorithm-heading-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .09));
  border: 1px solid var(--home-line-strong);
  border-radius: 12px;
  box-shadow: inset 0 0 8px rgba(99, 213, 198, .1), 0 0 12px rgba(99, 213, 198, .18);
}
.algorithm-heading-icon img { display: block; width: 42px; height: 42px; object-fit: contain; }
.app-shell[data-active-page="algorithm"] .panel {
  background: linear-gradient(135deg, rgba(5, 45, 42, .92), rgba(3, 30, 31, .82));
  border-color: var(--home-line-strong);
  color: var(--home-text);
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), 0 0 18px rgba(99, 213, 198, .14);
}
.app-shell[data-active-page="algorithm"] .panel-heading { border-bottom-color: var(--home-line); }
.app-shell[data-active-page="algorithm"] .section-title h2,
.app-shell[data-active-page="algorithm"] .section-title h3 { color: var(--home-text-strong); }
.app-shell[data-active-page="algorithm"] .section-title p { color: var(--home-text-muted); }
.app-shell[data-active-page="algorithm"] .section-icon { color: var(--home-accent); background: var(--home-accent-dim); }
.app-shell[data-active-page="algorithm"] .mode-badge,
.app-shell[data-active-page="algorithm"] .algorithm-connection-state { min-height: 30px; color: var(--home-text-soft); background: rgba(3, 28, 28, .68); border: 1px solid var(--home-line); font-size: 11px; font-weight: 700; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-head span { color: var(--home-text-muted); font-size: 11px; font-weight: 600; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-head h2 { margin-top: 2px; color: var(--home-text-strong); font-size: 18px; font-weight: 800; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-head .algorithm-assistant-state { color: var(--home-text-soft); background: var(--home-accent-dim); }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-head .algorithm-assistant-state.is-online { color: var(--home-accent-strong); background: rgba(99, 213, 198, .16); }
.app-shell[data-active-page="algorithm"] .algorithm-conversation { background: rgba(3, 30, 31, .7); border-color: var(--home-line); }
.app-shell[data-active-page="algorithm"] .algorithm-message p { color: var(--home-text-soft); background: rgba(6, 48, 46, .7); border-color: var(--home-line); font-size: 12px; line-height: 1.65; }
.app-shell[data-active-page="algorithm"] .algorithm-message.is-user p { color: var(--home-text-strong); background: rgba(99, 213, 198, .22); border-color: rgba(99, 213, 198, .4); }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form > label,
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form > small { color: var(--home-text-muted); }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form > label { font-size: 11px; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form > small { font-size: 10px; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form input { color: var(--home-text); background: rgba(6, 48, 46, .7); border-color: var(--home-line-strong); font-size: 13px; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form button { color: #05241f; background: var(--home-accent-strong); border-color: var(--home-accent-strong); font-size: 12px; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form button:hover { color: #021313; background: #a2fff3; }
.app-shell[data-active-page="algorithm"] .algorithm-assistant-form input:disabled { color: var(--home-text-muted); background: rgba(3, 30, 31, .6); }
.algorithm-assistant-avatar { overflow: hidden; color: var(--home-accent); background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .09)); border-color: var(--home-line-strong); box-shadow: 0 0 12px rgba(99, 213, 198, .17); }
.algorithm-assistant-avatar img { display: block; width: 40px; height: 40px; object-fit: contain; }

.opt-dashboard { display: grid; gap: 14px; margin-bottom: 18px; }
.opt-kpi-ribbon { margin-bottom: 0; }
.opt-kpi-ribbon .monitor-kpi-icon { color: var(--home-accent); }
.opt-kpi-ribbon .monitor-kpi-icon .icon { width: 22px; height: 22px; }
.opt-kpi-ribbon .monitor-kpi-card { animation: cockpitEdgeGlow 3.6s ease-in-out infinite; }
.opt-kpi-ribbon .monitor-kpi-card:nth-child(2) { animation-delay: .4s; }
.opt-kpi-ribbon .monitor-kpi-card:nth-child(3) { animation-delay: .8s; }
.opt-kpi-ribbon .monitor-kpi-card:nth-child(4) { animation-delay: 1.2s; }
.opt-kpi-ribbon .algorithm-kpi-model { --energy-kpi-tone: var(--home-accent); }
.opt-kpi-ribbon .algorithm-kpi-advice { --energy-kpi-tone: var(--home-cooling); }
.opt-kpi-ribbon .algorithm-kpi-saving { --energy-kpi-tone: var(--home-warning); }
.opt-kpi-ribbon .algorithm-kpi-execution { --energy-kpi-tone: var(--home-eer); }

.opt-source-strip {
  display: grid;
  grid-template-columns: 1.35fr 1fr .85fr .8fr auto;
  align-items: stretch;
  overflow: hidden;
  background: rgba(3, 30, 31, .68);
  border: 1px solid var(--home-line);
  border-radius: 10px;
}
.opt-source-strip > div { min-width: 0; padding: 10px 13px; border-right: 1px solid var(--home-line); }
.opt-source-strip span,
.opt-source-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-source-strip span { color: var(--home-text-muted); font-size: 10px; }
.opt-source-strip strong { margin-top: 4px; color: var(--home-text-soft); font-size: 12px; }
.opt-source-strip time { display: flex; padding: 10px 13px; align-items: center; color: var(--home-text-muted); font-size: 10px; white-space: nowrap; }

.opt-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.opt-module-card { min-width: 0; overflow: hidden; background: radial-gradient(circle at 88% 0%, rgba(99, 213, 198, .13), transparent 34%), var(--home-card-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), inset 0 1px rgba(210, 250, 240, .08), 0 0 18px rgba(99, 213, 198, .16); animation: panelEdgeGlow 4.6s ease-in-out infinite; }
.opt-module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px 10px; border-bottom: 1px solid var(--home-line); }
.opt-module-head h3 { margin: 0; color: var(--home-text-strong); font-size: 17px; font-weight: 800; }
.opt-module-state { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.opt-module-state.is-running, .opt-module-state.is-charging { color: var(--home-accent-strong); background: rgba(99, 213, 198, .16); }
.opt-module-state.is-discharging { color: #7cb8ff; background: rgba(78, 168, 255, .16); }
.opt-module-state.is-idle { color: var(--home-neutral); background: rgba(143, 169, 166, .14); }
.opt-module-state.is-provisional { color: #ffd28a; background: rgba(240, 165, 74, .15); }
.opt-module-state.is-blocked { color: #ffb4a8; background: rgba(211, 86, 72, .16); }
.opt-module-advice { margin: 0; padding: 12px 16px; color: var(--home-text-soft); border-bottom: 1px solid var(--home-line); font-size: 13px; line-height: 1.7; }
.opt-module-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px 14px 14px; }
.opt-module-metrics > div { padding: 10px 12px; background: rgba(6, 48, 46, .5); border: 1px solid var(--home-line); border-radius: 8px; }
.opt-module-metrics dt { color: var(--home-text-muted); font-size: 11px; font-weight: 600; }
.opt-module-metrics dd { display: flex; flex-wrap: wrap; margin: 4px 0 0; align-items: baseline; gap: 4px 8px; }
.opt-module-metrics dd strong { color: var(--home-accent); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.opt-module-metrics dd small { color: var(--home-text-muted); font-size: 10px; }

.opt-forecast-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.opt-forecast-state { flex: 0 0 auto; padding: 5px 8px; color: var(--home-accent); background: var(--home-accent-dim); border-radius: 6px; font-size: 10px; font-weight: 700; }
.opt-chart-legend { display: flex; padding: 10px 16px 0; align-items: center; justify-content: flex-end; gap: 14px; color: var(--home-text-muted); font-size: 10px; }
.opt-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.opt-chart-legend i { width: 14px; height: 3px; background: var(--home-accent); border-radius: 2px; }
.opt-chart-legend i.is-forecast { background: #ffd28a; }
.opt-chart-legend i.is-range { height: 8px; background: rgba(255, 210, 138, .22); border: 1px solid rgba(255, 210, 138, .52); }
.opt-load-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.opt-load-line.is-actual { stroke: var(--home-accent-strong); }
.opt-load-line.is-forecast { stroke: #ffd28a; }
.opt-load-line.is-bridge { stroke: rgba(255, 210, 138, .62); stroke-dasharray: 5 4; }
.opt-load-point { vector-effect: non-scaling-stroke; }
.opt-load-point.is-actual { fill: var(--home-bg-deep); stroke: var(--home-accent-strong); stroke-width: 1.5; }
.opt-load-point.is-forecast { fill: #ffd28a; stroke: #6c4a18; stroke-width: 1; }
.opt-forecast-band { fill: rgba(255, 210, 138, .12); stroke: rgba(255, 210, 138, .28); stroke-width: 1; }
.opt-forecast-split { stroke: rgba(255, 255, 255, .24); stroke-dasharray: 3 4; }
.opt-forecast-split-label { fill: var(--home-text-muted); font-size: 9px; }
.opt-policy-panel {
  --opt-peak: #b94337;
  --opt-peak-soft: rgba(185, 67, 55, .16);
  --opt-flat: #2f78b7;
  --opt-flat-soft: rgba(47, 120, 183, .17);
  --opt-valley: #23845a;
  --opt-valley-soft: rgba(35, 132, 90, .18);
  --opt-sharp: #872b23;
  --opt-deep-valley: #126443;
}
.opt-policy-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); }
.opt-policy-schedule, .opt-rate-policy { min-width: 0; padding: 16px; }
.opt-rate-policy { border-left: 1px solid var(--home-line); }
.opt-policy-section-head { display: flex; min-height: 44px; align-items: flex-start; justify-content: space-between; gap: 16px; }
.opt-policy-section-head h3 { margin: 0; color: var(--home-text-strong); font-size: 14px; line-height: 1.4; }
.opt-policy-section-head p { margin: 4px 0 0; color: var(--home-text-muted); font-size: 10px; line-height: 1.55; }
.opt-policy-section-head > span { flex: 0 0 auto; max-width: 48%; padding: 5px 8px; color: var(--home-text-soft); background: rgba(99, 213, 198, .1); border-radius: 5px; font-size: 10px; font-weight: 700; line-height: 1.4; text-align: right; }
.opt-price-bands { display: grid; gap: 12px; padding: 14px 0 18px; }
.opt-band-grid { display: flex; width: 100%; height: 42px; overflow: hidden; background: rgba(3, 28, 28, .72); border-radius: 8px; }
.opt-band { position: relative; display: grid; min-width: 0; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }
.opt-band + .opt-band { box-shadow: inset 1px 0 rgba(255, 255, 255, .28); }
.opt-band b { font-size: 13px; }
.opt-band.is-valley { background: var(--opt-valley); }
.opt-band.is-flat { background: var(--opt-flat); }
.opt-band.is-peak { background: var(--opt-peak); }
.opt-band.is-sharp { background: var(--opt-sharp); }
.opt-band.is-deep-valley { background: var(--opt-deep-valley); }
.opt-band.is-current { box-shadow: inset 0 0 0 3px #fff; }
.opt-band.is-current::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; background: #fff; border-radius: 50%; transform: translateX(-50%); }
.opt-band-detail-list { display: flex; flex-wrap: wrap; gap: 7px 8px; }
.opt-band-detail { display: inline-flex; min-height: 30px; padding: 5px 8px; align-items: center; gap: 5px; color: var(--home-text-soft); background: rgba(4, 37, 36, .58); border-radius: 5px; font-size: 10px; line-height: 1.35; }
.opt-band-detail i, .opt-season-periods i, .opt-rate-policy-row span i { width: 8px; height: 8px; flex: 0 0 auto; background: var(--home-neutral); border-radius: 50%; }
.opt-band-detail b { color: var(--home-text-strong); font-size: 10px; }
.opt-band-detail time { color: var(--home-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-band-detail em { color: #fff; font-size: 9px; font-style: normal; font-weight: 800; }
.opt-band-detail.is-peak { background: var(--opt-peak-soft); }
.opt-band-detail.is-flat { background: var(--opt-flat-soft); }
.opt-band-detail.is-valley { background: var(--opt-valley-soft); }
.opt-band-detail.is-peak i, .opt-season-periods .is-peak i, .opt-rate-policy-row .is-peak i { background: var(--opt-peak); }
.opt-band-detail.is-flat i, .opt-season-periods .is-flat i { background: var(--opt-flat); }
.opt-band-detail.is-valley i, .opt-season-periods .is-valley i, .opt-rate-policy-row .is-valley i { background: var(--opt-valley); }
.opt-band-detail.is-sharp i, .opt-season-periods .is-sharp i, .opt-rate-policy-row .is-sharp i { background: var(--opt-sharp); }
.opt-band-detail.is-deep-valley i, .opt-season-periods .is-deep-valley i, .opt-rate-policy-row .is-deep-valley i { background: var(--opt-deep-valley); }
.opt-annual-title { min-height: 0; padding-top: 14px; border-top: 1px solid var(--home-line); }
.opt-season-schedule-list { display: grid; margin-top: 10px; }
.opt-season-schedule { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 12px 0; align-items: start; border-top: 1px solid var(--home-line); }
.opt-season-schedule:first-child { border-top: 0; }
.opt-season-schedule > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.opt-season-schedule > div:first-child strong { width: 100%; color: var(--home-text-strong); font-size: 12px; }
.opt-season-schedule > div:first-child small { color: var(--home-text-muted); font-size: 9px; line-height: 1.45; }
.opt-season-schedule > div:first-child em { padding: 2px 5px; color: var(--home-accent-strong); background: var(--home-accent-dim); border-radius: 4px; font-size: 8px; font-style: normal; font-weight: 800; }
.opt-season-periods { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.opt-season-periods span { display: inline-flex; min-width: 116px; align-items: center; gap: 5px; color: var(--home-text-soft); font-size: 9px; line-height: 1.45; }
.opt-season-periods b { color: var(--home-text-strong); }
.opt-season-periods time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-rate-policy-list { display: grid; margin-top: 8px; }
.opt-rate-policy-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; padding: 12px 0; align-items: start; border-top: 1px solid var(--home-line); }
.opt-rate-policy-row:first-child { border-top: 0; }
.opt-rate-policy-row > span { display: inline-flex; align-items: center; gap: 6px; color: var(--home-text-strong); font-size: 11px; font-weight: 800; }
.opt-rate-policy-row p { margin: 0; color: var(--home-text-soft); font-size: 10px; line-height: 1.6; text-wrap: pretty; }
.opt-rate-policy-row.is-reference-rate { grid-template-columns: minmax(90px, 1fr) auto; min-height: 62px; align-items: center; }
.opt-rate-policy-row.is-reference-rate > span { font-size: 12px; }
.opt-rate-policy-row.is-reference-rate p { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; text-align: right; }
.opt-rate-policy-row.is-reference-rate p strong { color: var(--home-text-strong); font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; }
.opt-rate-policy-row.is-reference-rate p small { color: var(--home-text-muted); font-size: 9px; white-space: nowrap; }
.opt-rate-policy-row.is-reference-rate.is-peak p strong { color: #ff938a; }
.opt-rate-policy-row.is-reference-rate.is-flat p strong { color: #82c6ff; }
.opt-rate-policy-row.is-reference-rate.is-valley p strong { color: #75dda9; }
.opt-rate-boundary { padding: 11px 12px; background: rgba(240, 165, 74, .1); border-radius: 7px; }
.opt-rate-boundary strong { color: #ffd28a; font-size: 11px; }
.opt-rate-boundary p { margin: 4px 0 0; color: var(--home-text-soft); font-size: 10px; line-height: 1.6; }
.opt-policy-empty { padding: 18px 0; color: var(--home-text-muted); font-size: 11px; text-align: center; }
.opt-policy-state { flex: 0 0 auto; padding: 5px 8px; color: var(--home-accent-strong); background: var(--home-accent-dim); border-radius: 6px; font-size: 10px; font-weight: 700; }
.opt-policy-meta { border-top: 1px solid var(--home-line); }
.opt-policy-source { display: flex; padding: 12px 16px 10px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.opt-policy-source > div { min-width: 0; }
.opt-policy-source strong { display: block; color: var(--home-text-soft); font-size: 12px; line-height: 1.5; }
.opt-policy-source small { display: block; margin-top: 3px; color: var(--home-text-muted); font-size: 10px; }
.opt-policy-source a { flex: 0 0 auto; padding: 4px 7px; color: var(--home-accent-strong); border: 1px solid var(--home-line-strong); border-radius: 5px; font-size: 10px; font-weight: 700; text-decoration: none; }
.opt-policy-source a:hover { color: #05241f; background: var(--home-accent); }
.opt-policy-source a:focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }
.opt-policy-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 16px 10px; }
.opt-policy-facts > div { min-width: 0; padding: 7px 9px; border-top: 1px solid var(--home-line); }
.opt-policy-facts dt { color: var(--home-text-muted); font-size: 9px; }
.opt-policy-facts dd { margin: 3px 0 0; color: var(--home-text-soft); font-size: 10px; font-weight: 700; line-height: 1.45; }
.opt-standard-applicability { margin: 0; padding: 9px 16px; color: var(--home-text-soft); border-top: 1px solid var(--home-line); font-size: 10px; line-height: 1.6; }
.opt-special-rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; margin: 0; padding: 0 16px; list-style: none; }
.opt-special-rule-list li { display: flex; padding: 9px 0; align-items: flex-start; justify-content: space-between; gap: 10px; border-top: 1px solid var(--home-line); }
.opt-special-rule-list li > div { min-width: 0; }
.opt-special-rule-list strong, .opt-special-rule-list span, .opt-special-rule-list small { display: block; }
.opt-special-rule-list strong { color: var(--home-text-soft); font-size: 11px; }
.opt-special-rule-list span { margin-top: 2px; color: var(--home-text-muted); font-size: 9px; line-height: 1.45; }
.opt-special-rule-list small { margin-top: 3px; color: var(--home-text-muted); font-size: 8px; line-height: 1.45; }
.opt-special-rule-list b { flex: 0 0 auto; padding: 3px 6px; color: #ffd28a; background: rgba(240, 165, 74, .15); border-radius: 4px; font-size: 8px; white-space: nowrap; }
.opt-special-rule-list li.is-applied b { color: #eafffb; background: rgba(19, 127, 117, .55); }
.opt-special-rule-list li.is-not_applicable b { color: var(--home-text-muted); background: rgba(143, 169, 166, .1); }
.opt-policy-note { margin: 0; padding: 10px 16px 12px; color: var(--home-text-muted); border-top: 1px solid var(--home-line); font-size: 10px; line-height: 1.6; }

.opt-decision-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 14px; }
.opt-decision-list { display: grid; margin: 0; padding: 2px 16px 10px; list-style: none; }
.opt-decision-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; padding: 13px 0; align-items: start; border-top: 1px solid var(--home-line); }
.opt-decision-list li:first-child { border-top: 0; }
.opt-decision-index { display: grid; width: 32px; height: 32px; place-items: center; color: var(--home-accent); background: var(--home-accent-dim); border-radius: 7px; font-size: 10px; font-weight: 800; }
.opt-decision-list strong { color: var(--home-text-strong); font-size: 13px; }
.opt-decision-list p { margin: 4px 0 0; color: var(--home-text-soft); font-size: 12px; line-height: 1.55; }
.opt-decision-list small { display: block; margin-top: 4px; color: var(--home-text-muted); font-size: 10px; line-height: 1.5; }
.opt-decision-list li > b { padding: 4px 7px; color: var(--home-accent-strong); background: var(--home-accent-dim); border-radius: 5px; font-size: 9px; white-space: nowrap; }
.opt-decision-list li.is-blocked > b { color: #ffb4a8; background: rgba(211, 86, 72, .16); }
.opt-decision-list li.is-warning > b { color: #ffd28a; background: rgba(240, 165, 74, .15); }
.opt-readiness-list { display: grid; margin: 0; padding: 4px 16px 12px; list-style: none; }
.opt-readiness-list li { display: flex; min-height: 42px; padding: 7px 0; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--home-line); }
.opt-readiness-list li:first-child { border-top: 0; }
.opt-readiness-list li > span { display: flex; min-width: 0; align-items: center; gap: 8px; }
.opt-readiness-list i { width: 8px; height: 8px; flex: 0 0 auto; background: #d35648; border-radius: 50%; }
.opt-readiness-list i.is-ready { background: var(--home-accent-strong); box-shadow: 0 0 6px rgba(126, 240, 226, .55); }
.opt-readiness-list strong { color: var(--home-text-soft); font-size: 11px; }
.opt-readiness-list small { max-width: 54%; color: var(--home-text-muted); font-size: 10px; line-height: 1.4; text-align: right; }

.opt-schedule-panel .table-wrap,
.opt-formulas-panel .table-wrap { max-height: 420px; overflow: auto; }
.opt-schedule-table,
.opt-formula-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.opt-schedule-table th,
.opt-formula-table th { position: sticky; z-index: 1; top: 0; padding: 10px 12px; color: var(--home-text-muted); text-align: left; background: #06302e; border-bottom: 1px solid var(--home-line-strong); font-size: 10px; font-weight: 700; }
.opt-schedule-table td,
.opt-formula-table td { padding: 10px 12px; color: var(--home-text-soft); border-bottom: 1px solid var(--home-line); font-size: 11px; line-height: 1.45; vertical-align: top; }
.opt-schedule-table tbody tr:hover td,
.opt-formula-table tbody tr:hover td { background: rgba(99, 213, 198, .055); }
.opt-schedule-table td:first-child { color: var(--home-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-tariff-tag,
.opt-formula-state { display: inline-flex; min-width: 38px; padding: 4px 7px; justify-content: center; border-radius: 5px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.opt-tariff-tag.is-valley { color: #d9ffeb; background: rgba(35, 132, 90, .5); }
.opt-tariff-tag.is-flat { color: #e5f4ff; background: rgba(47, 120, 183, .5); }
.opt-tariff-tag.is-peak { color: #fff0ed; background: rgba(185, 67, 55, .56); }
.opt-tariff-tag.is-sharp { color: #fff7f4; background: rgba(135, 43, 35, .78); }
.opt-tariff-tag.is-deep-valley { color: #eafff3; background: rgba(18, 100, 67, .72); }
.opt-tariff-tag.is-unknown { color: var(--home-text-muted); background: rgba(143, 169, 166, .1); }
.opt-formula-table code { color: #dff7f2; font-family: "Cascadia Code", "Microsoft YaHei UI", monospace; font-size: 10px; white-space: normal; }
.opt-formula-state.is-running { color: var(--home-accent-strong); background: rgba(99, 213, 198, .15); }
.opt-formula-state.is-provisional { color: #ffd28a; background: rgba(240, 165, 74, .15); }
.opt-formula-state.is-blocked { color: #ffb4a8; background: rgba(211, 86, 72, .16); }

.opt-models-panel { margin-bottom: 0; }
.opt-model-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px 16px 16px; list-style: none; }
.opt-model-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; padding: 11px 12px; background: rgba(6, 48, 46, .5); border: 1px solid var(--home-line); border-radius: 8px; }
.opt-model-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-neutral); }
.opt-model-dot.is-running { background: var(--home-accent-strong); box-shadow: 0 0 8px rgba(126, 240, 226, .7); }
.opt-model-dot.is-provisional { background: #ffd28a; box-shadow: 0 0 7px rgba(240, 165, 74, .48); }
.opt-model-dot.is-blocked { background: #d35648; }
.opt-model-name { grid-column: 2; min-width: 0; }
.opt-model-name strong { display: block; overflow: hidden; color: var(--home-text-soft); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.opt-model-name small { display: block; margin-top: 2px; overflow: hidden; color: var(--home-text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.opt-model-version { grid-row: 1 / 3; grid-column: 3; color: var(--home-accent); font-size: 11px; font-weight: 700; }
.opt-model-last { grid-column: 2; color: var(--home-text-muted); font-size: 10px; }

@media (max-width: 1200px) {
  .opt-module-grid { grid-template-columns: 1fr; }
  .opt-forecast-grid { grid-template-columns: 1fr; }
  .opt-policy-layout { grid-template-columns: 1fr; }
  .opt-rate-policy { border-top: 1px solid var(--home-line); border-left: 0; }
  .opt-decision-grid { grid-template-columns: 1fr; }
  .opt-source-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-source-strip > div { border-bottom: 1px solid var(--home-line); }
  .opt-source-strip time { grid-column: 1 / -1; }
  .opt-model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .app-shell[data-active-page="algorithm"] .algorithm-page { padding: 14px 12px 20px; }
  .app-shell[data-active-page="algorithm"] .algorithm-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-right: max(14px, env(safe-area-inset-right));
    margin-left: max(14px, env(safe-area-inset-left));
  }
  .algorithm-heading-icon { width: 44px; height: 44px; }
  .algorithm-heading-icon img { width: 38px; height: 38px; }
  .app-shell[data-active-page="algorithm"] .topbar-status { width: 100%; flex-wrap: wrap; }
  .opt-source-strip { grid-template-columns: 1fr; }
  .opt-source-strip > div { border-right: 0; }
  .opt-source-strip time { grid-column: auto; }
  .opt-model-list { grid-template-columns: 1fr; }
  .opt-module-metrics { grid-template-columns: 1fr; }
  .opt-policy-source { flex-direction: column; }
  .opt-policy-facts { grid-template-columns: 1fr; }
  .opt-policy-section-head { flex-direction: column; gap: 8px; }
  .opt-policy-section-head > span { max-width: none; text-align: left; }
  .opt-season-schedule { grid-template-columns: 1fr; gap: 8px; }
  .opt-rate-policy-row { grid-template-columns: 1fr; gap: 5px; }
  .opt-rate-policy-row.is-reference-rate { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .opt-rate-policy-row.is-reference-rate p { justify-content: flex-start; text-align: left; }
  .opt-special-rule-list { grid-template-columns: 1fr; }
  .opt-decision-list li { grid-template-columns: 30px minmax(0, 1fr); }
  .opt-decision-list li > b { grid-column: 2; justify-self: start; }
  .opt-readiness-list li { align-items: flex-start; flex-direction: column; gap: 4px; }
  .opt-readiness-list small { max-width: none; padding-left: 16px; text-align: left; }
  .algorithm-assistant-head { grid-template-columns: 44px minmax(0, 1fr); }
  .algorithm-assistant-head .algorithm-assistant-state { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .opt-module-card, .opt-kpi-ribbon .monitor-kpi-card { animation: none; }
}

/* 报告导出页面 */
.report-analysis-center .report-kpi-electricity { --energy-kpi-tone: var(--home-electricity); }
.report-analysis-center .report-kpi-cooling { --energy-kpi-tone: var(--home-cooling); }
.report-analysis-center .report-kpi-efficiency { --energy-kpi-tone: var(--home-eer); }
.report-analysis-center .report-kpi-cost { --energy-kpi-tone: var(--home-report-cost); }
.report-range-panel { margin-bottom: 14px; }
.report-range-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 16px 6px; }
.report-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.report-presets button { min-height: 38px; padding: 0 15px; color: var(--home-text-soft); background: rgba(6, 48, 46, .58); border: 1px solid var(--home-line); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.report-presets button:hover { color: var(--home-text-strong); background: var(--home-accent-dim); border-color: var(--home-line-strong); }
.report-presets button.is-active { color: #05241f; background: var(--home-accent-strong); border-color: var(--home-accent-strong); }
.report-presets button:focus-visible, .report-export-button:focus-visible, .report-field input:focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }
.report-field { display: flex; flex-direction: column; gap: 6px; }
.report-field span { color: var(--home-text-soft); font-size: 12px; font-weight: 600; }
.report-field input { min-height: 40px; padding: 0 11px; color: var(--home-text-strong); background: rgba(6, 48, 46, .72); border: 1px solid var(--home-line-strong); border-radius: 8px; color-scheme: dark; font-family: inherit; font-size: 13px; font-weight: 600; }
.report-sep { padding-bottom: 10px; color: var(--home-text-muted); font-size: 12px; }
.report-export-button { display: inline-flex; min-height: 40px; padding: 0 18px; align-items: center; gap: 8px; color: #05241f; background: var(--home-accent-strong); border: 1px solid var(--home-accent-strong); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 800; transition: background-color 180ms ease, transform 180ms ease; }
.report-export-button:hover { background: #9cf8ea; transform: translateY(-1px); }
.report-export-button:active { transform: translateY(0); }
.report-export-button .icon { width: 17px; height: 17px; }
.report-range-note { margin: 11px 16px 15px; color: var(--home-text-muted); font-size: 11px; line-height: 1.5; }
.report-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 14px 16px 16px; }
.report-summary-grid > div { padding: 12px 13px; background: rgba(6, 48, 46, .55); border: 1px solid var(--home-line); border-radius: 8px; }
.report-summary-grid dt { color: var(--home-text-muted); font-size: 11px; font-weight: 600; }
.report-summary-grid dd { margin: 5px 0 0; color: var(--home-text-strong); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.report-sections { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px 16px; list-style: none; }
.report-sections li { display: flex; gap: 12px; align-items: center; padding: 12px 13px; background: rgba(6, 48, 46, .55); border: 1px solid var(--home-line); border-radius: 8px; }
.report-sections b { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; color: #05241f; background: var(--home-accent); border-radius: 8px; font-size: 12px; font-weight: 800; }
.report-sections strong { display: block; color: var(--home-text-strong); font-size: 14px; }
.report-sections small { display: block; margin-top: 3px; color: var(--home-text-muted); font-size: 11px; }

@media (max-width: 820px) {
  .report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-range-body { align-items: stretch; }
  .report-presets { width: 100%; }
}
@media (max-width: 560px) {
  .report-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-field { width: calc(50% - 14px); }
  .report-sep { align-self: flex-end; }
  .report-export-button { width: 100%; justify-content: center; }
  .report-summary-grid { grid-template-columns: 1fr; }
}

/* 数据质量中心：与主页大屏统一的深色驾驶舱主题 */
.app-shell[data-active-page="quality"] {
  --home-bg-deepest: #021314;
  --home-bg-deep: #041f20;
  --home-bg-mid: #06302e;
  --home-panel-bg: rgba(5, 38, 36, .76);
  --home-card-bg: linear-gradient(135deg, rgba(5, 45, 42, .94), rgba(3, 30, 31, .88));
  --home-line: rgba(99, 213, 198, .24);
  --home-line-strong: rgba(99, 213, 198, .46);
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #a6d0cb;
  --home-text-muted: #7fa8a4;
  --home-accent: #63d5c6;
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, .14);
  --home-warning: #f0a54a;
  --home-danger: #ff8f83;
  --home-cooling: #4eb8ff;
  --home-purple: #a996ff;
}
.app-shell[data-active-page="quality"] .dashboard { background: var(--home-bg-deepest); }
.app-shell[data-active-page="quality"] .platform-header { background: linear-gradient(180deg, var(--home-bg-mid), var(--home-bg-deep)); border-bottom-color: var(--home-line-strong); }
.app-shell[data-active-page="quality"] .platform-brand strong { color: var(--home-text-strong); }
.app-shell[data-active-page="quality"] .platform-meta .weather-strip,
.app-shell[data-active-page="quality"] .platform-meta .status-strip { color: var(--home-text); background: rgba(3, 28, 28, .7); border-color: var(--home-line); box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), 0 0 8px rgba(99, 213, 198, .12); }
.app-shell[data-active-page="quality"] .quality-page {
  max-inline-size: none;
  margin: 0 calc(-1 * var(--shell-content-gutter)) -34px;
  padding: 18px 22px 28px;
  color: var(--home-text);
  background:
    linear-gradient(rgba(99, 213, 198, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 213, 198, .025) 1px, transparent 1px),
    radial-gradient(circle at 48% 30%, rgba(99, 213, 198, .09), transparent 38%),
    var(--home-bg-deepest);
  background-size: 44px 44px, 44px 44px, auto, auto;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
.quality-topbar { align-items: center; min-height: 0; margin-bottom: 18px; }
.quality-heading { display: flex; min-width: 0; align-items: center; gap: 13px; }
.quality-heading > div { min-width: 0; }
.quality-heading-icon { display: grid; flex: 0 0 auto; width: 52px; height: 52px; place-items: center; background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .06)); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), 0 0 8px rgba(99, 213, 198, .16); }
.quality-heading-icon img { display: block; width: 46px; height: 46px; object-fit: contain; }
.app-shell[data-active-page="quality"] .quality-topbar .context-line { margin-bottom: 3px; color: var(--home-accent); font-size: 11px; letter-spacing: .04em; }
.app-shell[data-active-page="quality"] .quality-topbar h1 { margin: 0; color: var(--home-text-strong); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.app-shell[data-active-page="quality"] .quality-topbar .page-summary { margin-top: 4px; color: var(--home-text-muted); font-size: 12px; }
.app-shell[data-active-page="quality"] .quality-topbar .mode-badge,
.app-shell[data-active-page="quality"] .quality-topbar .status-strip { min-height: 34px; color: var(--home-text-soft); background: rgba(3, 28, 28, .72); border: 1px solid var(--home-line); border-radius: 8px; font-size: 11px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035); }
.app-shell[data-active-page="quality"] .quality-topbar .mode-badge.is-live { color: var(--home-accent-strong); background: rgba(99, 213, 198, .12); }
.app-shell[data-active-page="quality"] .quality-topbar .mode-badge.is-delayed { color: #ffd18a; background: rgba(240, 165, 74, .12); border-color: rgba(240, 165, 74, .34); }
.app-shell[data-active-page="quality"] .quality-topbar .mode-badge.is-error { color: #ffc0ba; background: rgba(255, 143, 131, .12); border-color: rgba(255, 143, 131, .34); }
.app-shell[data-active-page="quality"] .quality-topbar .status-strip span,
.app-shell[data-active-page="quality"] .quality-topbar .status-strip strong { color: inherit; }

.app-shell[data-active-page="quality"] .quality-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.app-shell[data-active-page="quality"] .quality-kpi {
  --quality-tone: var(--home-accent);
  display: grid;
  min-width: 0;
  min-height: 108px;
  padding: 14px;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  overflow: hidden;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--quality-tone) 15%, transparent), transparent 46%), var(--home-card-bg);
  border: 1px solid color-mix(in srgb, var(--quality-tone) 55%, transparent);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), 0 0 8px color-mix(in srgb, var(--quality-tone) 15%, transparent);
}
.quality-kpi-good { --quality-tone: #7ef0e2 !important; }
.quality-kpi-anomaly { --quality-tone: var(--home-warning) !important; }
.quality-kpi-duplicate { --quality-tone: var(--home-purple) !important; }
.quality-kpi-backfill { --quality-tone: var(--home-cooling) !important; }
.quality-kpi-index { --quality-tone: #8ee6a8 !important; }
.quality-kpi > div { min-width: 0; }
.quality-kpi-icon { display: grid; width: 46px; height: 46px; place-items: center; background: color-mix(in srgb, var(--quality-tone) 13%, transparent); border: 1px solid color-mix(in srgb, var(--quality-tone) 34%, transparent); border-radius: 10px; }
.quality-kpi-icon img { display: block; width: 42px; height: 42px; object-fit: contain; }
.app-shell[data-active-page="quality"] .quality-kpi > div > span { color: var(--home-text-soft); font-size: 12px; font-weight: 700; }
.app-shell[data-active-page="quality"] .quality-kpi strong { margin: 5px 0 4px; color: var(--home-text-strong); font-size: clamp(21px, 1.6vw, 28px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.app-shell[data-active-page="quality"] .quality-kpi small { overflow: hidden; color: var(--home-text-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.app-shell[data-active-page="quality"] .quality-layout { grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 14px; margin-bottom: 14px; }
.app-shell[data-active-page="quality"] .quality-page .panel { overflow: hidden; background: radial-gradient(circle at 92% 0, rgba(99, 213, 198, .09), transparent 34%), var(--home-panel-bg); border: 1px solid var(--home-line-strong); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), 0 0 8px rgba(99, 213, 198, .14); }
.app-shell[data-active-page="quality"] .quality-page .panel-heading { margin: -2px -2px 16px; padding: 0 2px 13px; border-bottom: 1px solid var(--home-line); }
.app-shell[data-active-page="quality"] .quality-page .section-title h2 { margin-bottom: 3px; color: var(--home-text-strong); font-size: 18px; font-weight: 800; }
.app-shell[data-active-page="quality"] .quality-page .section-title p { color: var(--home-text-muted); font-size: 11px; font-weight: 600; line-height: 1.45; }
.app-shell[data-active-page="quality"] .quality-section-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; overflow: hidden; place-items: center; background: rgba(99, 213, 198, .12); border: 1px solid var(--home-line-strong); border-radius: 10px; box-shadow: 0 0 8px rgba(99, 213, 198, .13); }
.quality-section-icon img { display: block; width: 38px; height: 38px; object-fit: contain; }
.app-shell[data-active-page="quality"] .status-pill { padding: 6px 9px; background: rgba(143, 169, 166, .1); border: 1px solid rgba(143, 169, 166, .24); border-radius: 999px; font-size: 11px; }
.app-shell[data-active-page="quality"] .status-pill.status-live { color: var(--home-accent-strong); background: rgba(99, 213, 198, .12); border-color: rgba(99, 213, 198, .34); }
.app-shell[data-active-page="quality"] .status-pill.status-stale { color: #ffc0ba; background: rgba(255, 143, 131, .12); border-color: rgba(255, 143, 131, .34); }
.app-shell[data-active-page="quality"] .status-pill.status-waiting { color: var(--home-text-muted); }
.app-shell[data-active-page="quality"] .quality-facts { background: rgba(3, 28, 28, .4); border-color: var(--home-line); border-radius: 9px; }
.app-shell[data-active-page="quality"] .quality-facts div { min-height: 68px; padding: 12px 13px; background: rgba(6, 48, 46, .34); }
.app-shell[data-active-page="quality"] .quality-facts div:not(:nth-child(4n + 1)) { border-left-color: var(--home-line); }
.app-shell[data-active-page="quality"] .quality-facts div:nth-child(n + 5) { border-top-color: var(--home-line); }
.app-shell[data-active-page="quality"] .quality-facts dt { margin-bottom: 6px; color: var(--home-text-muted); font-size: 11px; font-weight: 600; }
.app-shell[data-active-page="quality"] .quality-facts dd { color: var(--home-text-strong); font-size: 14px; font-weight: 800; }
.app-shell[data-active-page="quality"] .quality-notice { margin-top: 12px; padding: 10px 12px; color: #d4c09f; background: rgba(240, 165, 74, .08); border: 1px solid rgba(240, 165, 74, .24); border-radius: 8px; font-size: 11px; line-height: 1.65; }
.app-shell[data-active-page="quality"] .quality-flag-list { min-height: 150px; gap: 14px; padding: 2px 2px 4px; align-content: start; }
.app-shell[data-active-page="quality"] .quality-flag-item > div:first-child { margin-bottom: 8px; }
.app-shell[data-active-page="quality"] .quality-flag-item strong { color: var(--home-text-soft); font-size: 12px; }
.app-shell[data-active-page="quality"] .quality-flag-item span { color: var(--home-text-muted); font-size: 11px; }
.app-shell[data-active-page="quality"] .quality-flag-bar { height: 7px; background: rgba(127, 168, 164, .13); }
.app-shell[data-active-page="quality"] .quality-flag-bar span { background: linear-gradient(90deg, var(--home-warning), #ffd18a); box-shadow: 0 0 8px rgba(240, 165, 74, .24); }
.app-shell[data-active-page="quality"] .ghost-button { min-height: 36px; color: var(--home-accent-strong); background: rgba(99, 213, 198, .1); border-color: var(--home-line-strong); font-size: 11px; font-weight: 700; }
.app-shell[data-active-page="quality"] .ghost-button:hover { color: #05241f; background: var(--home-accent-strong); border-color: var(--home-accent-strong); }
.app-shell[data-active-page="quality"] .ghost-button:focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }
.app-shell[data-active-page="quality"] .empty-state { color: var(--home-text-muted); background: rgba(6, 48, 46, .3); border-color: var(--home-line); font-size: 11px; }

.app-shell[data-active-page="quality"] .quality-event-panel { padding-bottom: 12px; }
.app-shell[data-active-page="quality"] .formula-hint { color: var(--home-text-soft); background: rgba(99, 213, 198, .09); border: 1px solid var(--home-line); border-radius: 8px; font-size: 10px; }
.app-shell[data-active-page="quality"] .formula-hint .icon { color: var(--home-accent); }
.app-shell[data-active-page="quality"] .table-wrap { background: rgba(3, 28, 28, .44); border-color: var(--home-line); border-radius: 9px; }
.app-shell[data-active-page="quality"] .quality-table { color: var(--home-text-soft); background: rgba(3, 28, 28, .72); font-size: 12px; }
.app-shell[data-active-page="quality"] .quality-table thead { background: rgba(99, 213, 198, .1); }
.app-shell[data-active-page="quality"] .quality-table tbody tr { background: transparent; }
.app-shell[data-active-page="quality"] .quality-table th { color: var(--home-text-soft); background: #07302e; border-bottom-color: var(--home-line-strong); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.app-shell[data-active-page="quality"] .quality-table td { color: var(--home-text-soft); border-bottom-color: var(--home-line); }
.app-shell[data-active-page="quality"] .quality-table tbody tr:hover { background: rgba(99, 213, 198, .055); }
.app-shell[data-active-page="quality"] .quality-table td:nth-child(2) strong { color: var(--home-text-strong); font-size: 12px; }
.app-shell[data-active-page="quality"] .quality-table td:nth-child(2) small { color: var(--home-text-muted); font-size: 10px; }
.app-shell[data-active-page="quality"] .quality-tags span { color: #ffd6a0; background: rgba(240, 165, 74, .13); border: 1px solid rgba(240, 165, 74, .24); font-size: 10px; }
.app-shell[data-active-page="quality"] .quality-severity { padding: 5px 8px; font-size: 10px; }
.app-shell[data-active-page="quality"] .quality-severity.is-warning { color: #ffd18a; background: rgba(240, 165, 74, .13); }
.app-shell[data-active-page="quality"] .quality-severity.is-invalid { color: #ffc0ba; background: rgba(255, 143, 131, .13); }
.app-shell[data-active-page="quality"] .quality-event-id { color: var(--home-text-muted); font-size: 10px; }

@media (max-width: 1480px) {
  .app-shell[data-active-page="quality"] .quality-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  .app-shell[data-active-page="quality"] .quality-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell[data-active-page="quality"] .quality-page { padding: 14px 12px 22px; }
  .app-shell[data-active-page="quality"] .quality-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .app-shell[data-active-page="quality"] .quality-topbar .topbar-status { width: 100%; justify-content: flex-start; }
  .app-shell[data-active-page="quality"] .quality-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="quality"] .quality-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="quality"] .quality-facts div { border-top: 1px solid var(--home-line); border-left: 0 !important; }
  .app-shell[data-active-page="quality"] .quality-facts div:nth-child(-n + 2) { border-top: 0; }
  .app-shell[data-active-page="quality"] .quality-facts div:nth-child(even) { border-left: 1px solid var(--home-line) !important; }
  .app-shell[data-active-page="quality"] .quality-event-panel .panel-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .quality-heading-icon { width: 46px; height: 46px; }
  .quality-heading-icon img { width: 40px; height: 40px; }
  .app-shell[data-active-page="quality"] .quality-topbar h1 { font-size: 23px; }
  .app-shell[data-active-page="quality"] .quality-kpi-grid { grid-template-columns: 1fr; }
  .app-shell[data-active-page="quality"] .quality-kpi { min-height: 96px; }
  .app-shell[data-active-page="quality"] .quality-page .panel-heading { align-items: flex-start; flex-direction: column; }
  .app-shell[data-active-page="quality"] .quality-facts { grid-template-columns: 1fr; }
  .app-shell[data-active-page="quality"] .quality-facts div,
  .app-shell[data-active-page="quality"] .quality-facts div:nth-child(even) { border-top: 1px solid var(--home-line); border-left: 0 !important; }
  .app-shell[data-active-page="quality"] .quality-facts div:first-child { border-top: 0; }
  .app-shell[data-active-page="quality"] .formula-hint { white-space: normal; }
}

/* ========================================================================== 
 * 全平台视觉规范：所有界面以主页大屏为唯一字体、颜色与图标基线
 * 字体层级：H1 26 / H2 17 / H3 15 / 标签 13 / 正文 12 / 辅助 11 / 单位 10
 * 图标层级：导航与操作使用线性 SVG；页面、模块、KPI 使用素材库三维 PNG
 * ======================================================================== */
.app-shell[data-active-page] {
  --home-bg-deepest: #021314;
  --home-bg-deep: #041f20;
  --home-bg-mid: #06302e;
  --home-panel-bg: rgba(5, 38, 36, .76);
  --home-card-bg: linear-gradient(135deg, rgba(5, 45, 42, .94), rgba(3, 30, 31, .88));
  --home-line: rgba(99, 213, 198, .24);
  --home-line-strong: rgba(99, 213, 198, .46);
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #a6d0cb;
  --home-text-muted: #7fa8a4;
  --home-accent: #63d5c6;
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, .14);
  --home-warning: #f0a54a;
  --home-danger: #ff8f83;
  --home-neutral: #8fa9a6;
  --home-electricity: #63d5c6;
  --home-cooling: #4eb8ff;
  --home-eer: #a6f57e;
  --home-carbon: #8ee6a8;
  --home-peak: #f08519;
  --home-flat: #4e9bd4;
  --home-valley: #7c6fb0;
  color: var(--home-text);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
.app-shell[data-active-page] .dashboard { color: var(--home-text); background: var(--home-bg-deepest); }
.app-shell[data-active-page] .platform-header {
  color: var(--home-text-strong);
  background: linear-gradient(180deg, var(--home-bg-mid), var(--home-bg-deep));
  border-bottom-color: var(--home-line-strong);
  box-shadow: inset 0 -1px rgba(0, 14, 14, .35);
}
.app-shell[data-active-page] .platform-brand img { display: none; }
.app-shell[data-active-page] .platform-brand strong { color: var(--home-text-strong); font-size: 22px; font-weight: 800; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0, 12, 11, .55); }
.app-shell[data-active-page] .platform-meta :is(.weather-strip, .status-strip) { color: var(--home-text-soft); background: rgba(3, 28, 28, .7); border-color: var(--home-line); box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), 0 0 8px rgba(99, 213, 198, .12); }
.app-shell[data-active-page] .platform-meta :is(.weather-strip, .status-strip) :is(span, strong, small) { color: inherit; }
.app-shell:not([data-active-page="home"]) .platform-meta .status-strip { display: none; }
.app-shell[data-active-page] :is(.monitor-command-center, .algorithm-page, .quality-page) { color: var(--home-text); font-family: inherit; }

/* 页面标题系统 */
.app-shell[data-active-page] :is(.monitor-heading-icon, .algorithm-heading-icon, .quality-heading-icon) {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  place-items: center;
  background: linear-gradient(145deg, rgba(99, 213, 198, .2), rgba(99, 213, 198, .08));
  border: 1px solid var(--home-line-strong);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .04), 0 0 8px rgba(99, 213, 198, .14);
}
.app-shell[data-active-page] :is(.monitor-heading-icon, .algorithm-heading-icon, .quality-heading-icon) img { display: block; width: 42px; height: 42px; object-fit: contain; }
.app-shell[data-active-page] :is(.monitor-heading h1, .algorithm-topbar h1, .quality-topbar h1) { margin: 0; color: var(--home-text-strong); font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.app-shell[data-active-page] :is(.monitor-heading p, .algorithm-topbar .page-summary, .quality-topbar .page-summary) { margin-top: 4px; color: var(--home-text-muted); font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: .08em; }
.app-shell[data-active-page] :is(.algorithm-topbar .context-line, .quality-topbar .context-line) { color: var(--home-accent); font-size: 11px; font-weight: 700; letter-spacing: .03em; }

/* KPI 系统 */
.app-shell[data-active-page] :is(.monitor-kpi-card, .quality-kpi) { color: var(--home-text); background: var(--home-card-bg); border-radius: 12px; }
.app-shell[data-active-page] :is(.monitor-kpi-card, .quality-kpi) > div > span { color: var(--home-text-soft); font-size: 13px; font-weight: 700; line-height: 1.35; }
.app-shell[data-active-page] :is(.monitor-kpi-card, .quality-kpi) strong { color: var(--home-text-strong); font-size: 29px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-shell[data-active-page] :is(.monitor-kpi-card, .quality-kpi) small { color: var(--home-text-muted); font-size: 10px; font-weight: 600; }
.app-shell[data-active-page] :is(.monitor-kpi-icon, .quality-kpi-icon) { overflow: hidden; background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 11px; }
.app-shell[data-active-page] :is(.monitor-kpi-icon, .quality-kpi-icon) img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 面板、模块和层级文字 */
.app-shell[data-active-page] :is(.energy-panel, .opt-module-card, .monitor-system-pane, .monitor-device-card, .monitor-pump-card, .monitor-storage-card, .monitor-meter-body .panel, .quality-page .panel) {
  color: var(--home-text);
  background: radial-gradient(circle at 90% 0, rgba(99, 213, 198, .1), transparent 34%), var(--home-card-bg);
  border-color: var(--home-line-strong);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(210, 250, 240, .035), 0 0 8px rgba(99, 213, 198, .14);
}
.app-shell[data-active-page] :is(.energy-panel-head h2, .opt-module-head h3, .section-title h2, .monitor-system-head h2) { color: var(--home-text-strong); font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.app-shell[data-active-page] :is(.energy-panel-head p, .section-title p) { color: var(--home-text-muted); font-size: 11px; font-weight: 600; line-height: 1.5; }
.app-shell[data-active-page] :is(.chart-heading h3, .ranking h3, .monitor-device-head h3, .monitor-pump-heading h3, .monitor-storage-heading h3) { color: var(--home-text-strong); font-size: 15px; font-weight: 800; }
.app-shell[data-active-page] :is(.chart-heading p, .ranking-period-note, .trend-note, .monitor-device-head p) { color: var(--home-text-muted); font-size: 11px; line-height: 1.55; }
.app-shell[data-active-page] :is(.monitor-section-icon, .quality-section-icon) { display: grid; flex: 0 0 auto; width: 42px; height: 42px; overflow: hidden; place-items: center; background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 10px; box-shadow: 0 0 8px rgba(99, 213, 198, .12); }
.app-shell[data-active-page] :is(.monitor-section-icon, .quality-section-icon) img { display: block; width: 38px; height: 38px; object-fit: contain; }

/* 动态设备图标统一使用素材库三维资产 */
.app-shell[data-active-page] :is(.monitor-overview-icon, .monitor-device-icon, .energy-rank-icon) { overflow: hidden; background: var(--home-accent-dim); border: 1px solid var(--home-line-strong); border-radius: 10px; }
.app-shell[data-active-page] :is(.monitor-overview-icon, .monitor-device-icon, .energy-rank-icon) img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-shell[data-active-page] .energy-rank-icon .equipment-image { width: 30px; height: 30px; object-fit: contain; }

/* 控件与状态语义 */
.app-shell[data-active-page] :is(.ghost-button, .report-presets button, .monitor-pump-granularity button, .ranking-period-switch button, .trend-granularity button) { min-height: 36px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.app-shell[data-active-page] :is(.mode-badge, .status-pill, .range-badge, .monitor-head-status, .algorithm-connection-state) { font-size: 11px; font-weight: 700; }
.app-shell[data-active-page] :is(.status-live, .is-online, .is-running) { color: var(--home-accent-strong); }
.app-shell[data-active-page] :is(.status-delayed, .is-warning) { color: #ffd18a; }
.app-shell[data-active-page] :is(.status-stale, .is-error, .is-invalid) { color: #ffc0ba; }
.app-shell[data-active-page] :is(input, select, textarea, button) { font-family: inherit; }
.app-shell[data-active-page] :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }

/* 图表与表格 */
.app-shell[data-active-page] :is(.chart-axis-label, .energy-chart .chart-axis-label) { fill: var(--home-text-soft); font-family: inherit; font-size: 11px; font-weight: 600; }
.app-shell[data-active-page] :is(.table-wrap, table) { color: var(--home-text-soft); background: rgba(3, 28, 28, .72); border-color: var(--home-line); }
.app-shell[data-active-page] th { color: var(--home-text-soft); background: #07302e; border-bottom-color: var(--home-line-strong); font-size: 11px; font-weight: 700; }
.app-shell[data-active-page] td { color: var(--home-text-soft); border-bottom-color: var(--home-line); font-size: 12px; }
.app-shell[data-active-page] tbody tr { background: transparent; }
.app-shell[data-active-page] tbody tr:hover { background: rgba(99, 213, 198, .055); }

/* 侧栏和登录页同源字体及状态色 */
.app-shell .nav-item { min-height: 46px; color: #b8d8d0; font-size: 14px; font-weight: 600; }
.app-shell .nav-item .icon { width: 19px; height: 19px; }
.app-shell .session-card small,
.app-shell .session-card div span { font-size: 10px; }
.app-shell .session-card strong { font-size: 12px; }
.login-screen { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
.login-panel { border-radius: 14px; box-shadow: 0 0 8px rgba(0, 25, 22, .28); }
.login-panel h2 { color: #143b37; font-size: 24px; font-weight: 800; }
.login-panel > p { color: #506d68; font-size: 12px; }
.login-role-button strong { font-size: 13px; }
.login-role-button small { font-size: 10px; }
.login-field > span { color: #365a55; font-size: 12px; }
.login-field input { font-size: 14px; }
.login-field input::placeholder { color: #687f7b; }
.login-submit { box-shadow: 0 0 8px rgba(0, 85, 75, .2); font-size: 14px; font-weight: 800; }
.login-submit:hover { box-shadow: 0 0 8px rgba(0, 85, 75, .28); }
.login-permission-note { color: #506d68; background: #f1f7f5; border: 1px solid #d4e5e1; border-radius: 9px; }
.login-permission-note strong { color: #284c47; font-size: 12px; }
.login-permission-note span,
.login-panel footer { font-size: 10px; }

@media (max-width: 820px) {
  .app-shell[data-active-page] .platform-brand strong { font-size: 18px; }
  .app-shell[data-active-page] :is(.monitor-heading h1, .algorithm-topbar h1, .quality-topbar h1) { font-size: 23px; }
  .app-shell[data-active-page] :is(.monitor-kpi-card, .quality-kpi) strong { font-size: 26px; }
}
@media (max-width: 560px) {
  .app-shell[data-active-page] .platform-brand { width: 100%; min-width: 0; overflow: hidden; justify-content: flex-start; }
  .app-shell[data-active-page] .platform-brand strong { display: -webkit-box; width: 100%; max-width: 100%; overflow: hidden; font-size: 13px; line-height: 1.3; text-align: left; overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .app-shell[data-active-page] :is(.monitor-heading-icon, .algorithm-heading-icon, .quality-heading-icon) { width: 44px; height: 44px; }
  .app-shell[data-active-page] :is(.monitor-heading-icon, .algorithm-heading-icon, .quality-heading-icon) img { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell[data-active-page] *,
  .login-screen * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 实时监测 · 蓄能罐：上方设备与 KPI、下方双图表；稳定刷新不重播动效 */
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-grid {
  display: block;
  width: 100%;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  animation: none;
  contain: layout paint;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-overview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-width: 0;
  border-bottom: 1px solid var(--home-line);
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-visual-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  min-width: 0;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-visual {
  height: 320px;
  overflow: hidden;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-equipment-image {
  display: block;
  width: 100%;
  height: 100%;
  padding: 7px 12px;
  object-fit: contain;
  transform: scale(1.04);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4));
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-visual plant-twin-3d {
  display: block;
  width: 100%;
  height: 100%;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-visual canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-temps {
  min-width: 0;
  border-left: 1px solid var(--home-line);
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-temp-column {
  gap: 2px;
  padding: 6px 10px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-temp-layer {
  min-height: 0;
  gap: 5px;
  line-height: 1;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-temp-swatch {
  height: 10px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-temp-value {
  font-size: 11px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-temp-height {
  font-size: 9px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis {
  display: block;
  min-width: 0;
  padding: 12px;
  border-top: 0;
  border-left: 1px solid var(--home-line);
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis .monitor-spec-grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, 1fr);
  align-content: stretch;
  gap: 8px;
  padding: 0;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis .monitor-spec-card {
  display: flex;
  min-width: 0;
  min-height: 84px;
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis .monitor-spec-card dd {
  min-width: 0;
  overflow-wrap: normal;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis .monitor-spec-card.has-kpi-icon {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  row-gap: 2px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-spec-icon {
  display: block;
  width: 42px;
  height: 42px;
  grid-row: 1 / 3;
  align-self: center;
  object-fit: contain;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .has-kpi-icon :is(dt, dd) {
  min-width: 0;
  grid-column: 2;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-spec-card.has-kpi-icon.is-calculated {
  border-color: rgba(99, 213, 198, .42);
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-spec-card.has-kpi-icon.is-unavailable .monitor-spec-icon {
  filter: saturate(.72);
  opacity: .78;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-process-temp dt {
  display: grid;
  gap: 4px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-process-temp dt small {
  color: var(--home-text-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-charts-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] :is(.monitor-storage-charging, .monitor-storage-temphist) {
  min-width: 0;
  border-bottom: 0;
  contain: layout paint;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-temphist {
  border-left: 1px solid var(--home-line);
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] :is(.monitor-storage-chart, .monitor-storage-temphist-chart) {
  display: grid;
  min-height: 210px;
  align-items: center;
  padding: 4px 14px 14px;
}
.app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] :is(.monitor-storage-chart, .monitor-storage-temphist-chart) svg {
  width: 100%;
  height: 190px;
}

@media (max-width: 1200px) {
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-overview {
    grid-template-columns: 1fr;
  }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis {
    border-top: 1px solid var(--home-line);
    border-left: 0;
  }
}
@media (max-width: 760px) {
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-visual-zone,
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-charts-row {
    grid-template-columns: 1fr;
  }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-visual { height: 260px; }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-temps {
    min-height: 230px;
    border-top: 1px solid var(--home-line);
    border-left: 0;
  }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis .monitor-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-temphist {
    border-top: 1px solid var(--home-line);
    border-left: 0;
  }
}
@media (max-width: 480px) {
  .app-shell[data-active-page="monitor"] [data-monitor-panel="storage"] .monitor-storage-kpis .monitor-spec-grid {
    grid-template-columns: 1fr;
  }
}

/* 供热设备：左侧设备图、右侧 KPI 卡片，与主页大屏视觉规则一致。 */
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-line-strong);
  background: linear-gradient(135deg, rgba(6, 53, 50, 0.78), rgba(2, 30, 32, 0.88));
  box-shadow: inset 0 1px rgba(210, 250, 242, 0.08), 0 0 8px rgba(99, 213, 198, 0.14);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-card.is-live {
  border-color: rgba(101, 244, 198, 0.64);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-card.is-stale {
  border-color: rgba(255, 117, 104, 0.44);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--home-line);
  background: rgba(3, 48, 48, 0.58);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-heading h3 {
  margin: 0;
  color: var(--home-text-strong);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-heading p {
  margin: 4px 0 0;
  color: var(--home-text-muted);
  font-size: 11px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-body {
  display: grid;
  grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-visual {
  display: grid;
  min-width: 0;
  min-height: 230px;
  margin: 0;
  padding: 20px;
  place-content: center;
  justify-items: center;
  border-right: 1px solid var(--home-line);
  background:
    linear-gradient(rgba(45, 205, 188, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 205, 188, 0.07) 1px, transparent 1px),
    rgba(1, 37, 39, 0.48);
  background-size: 24px 24px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-visual img {
  width: min(190px, 76%);
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.34));
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-visual .monitor-heatpump-product-image {
  width: min(300px, 92%);
  max-height: 205px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-visual figcaption {
  margin-top: 10px;
  color: var(--home-text-muted);
  font-size: 11px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  align-content: stretch;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi {
  display: grid;
  min-width: 0;
  min-height: 106px;
  padding: 14px;
  align-content: center;
  border: 1px solid rgba(99, 213, 198, 0.28);
  background: rgba(3, 58, 57, 0.48);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi.is-fault {
  border-color: rgba(255, 112, 96, 0.58);
  background: rgba(103, 27, 29, 0.42);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi.is-fault strong { color: #ff8d7f; }
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi dt {
  color: var(--home-text-soft);
  font-size: 13px;
  font-weight: 600;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi dd {
  display: flex;
  margin: 9px 0 5px;
  align-items: baseline;
  gap: 6px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi strong {
  color: var(--home-accent-strong);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi dd span,
.app-shell[data-active-page="monitor"] .monitor-equipment-kpi small {
  color: var(--home-text-muted);
  font-size: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-layout-card > footer {
  padding: 9px 14px;
  border-top: 1px solid var(--home-line);
  color: var(--home-text-muted);
  font-size: 11px;
}

/* 水泵：IoTDA 五类、十三台控制器实时参数。 */
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-pump-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 232, 210, 0.38);
  background: rgba(0, 36, 38, 0.62);
}
.app-shell[data-active-page="monitor"] .monitor-pump-group-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(85, 213, 196, 0.2);
  background: rgba(3, 53, 53, 0.64);
}
.app-shell[data-active-page="monitor"] .monitor-pump-group-heading h3 {
  margin: 0;
  color: #f1fffd;
  font-size: 17px;
  line-height: 1.25;
}
.app-shell[data-active-page="monitor"] .monitor-pump-group-heading p {
  margin: 3px 0 0;
  color: #70aaa6;
  font-size: 11px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-group-heading > span {
  color: #75e2d2;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-pump-controller-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-card {
  min-width: 0;
  border: 1px solid rgba(67, 194, 180, 0.26);
  background:
    linear-gradient(145deg, rgba(7, 67, 65, 0.58), rgba(1, 35, 38, 0.78)),
    rgba(0, 32, 34, 0.76);
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-card.is-live {
  border-color: rgba(101, 244, 198, 0.58);
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-card.is-stale {
  border-color: rgba(255, 117, 104, 0.42);
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(85, 213, 196, 0.16);
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-identity { min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-identity h4 {
  margin: 0;
  overflow: hidden;
  color: #effffc;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-wrap: balance;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-identity p {
  margin: 3px 0 0;
  color: #6ca9a4;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-body {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-visual {
  display: grid;
  min-width: 0;
  min-height: 126px;
  margin: 0;
  padding: 12px 8px;
  place-content: center;
  justify-items: center;
  border-right: 1px solid rgba(85, 213, 196, 0.16);
  background:
    linear-gradient(rgba(45, 205, 188, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 205, 188, 0.06) 1px, transparent 1px),
    rgba(1, 40, 41, 0.44);
  background-size: 20px 20px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-visual img {
  width: 104px;
  max-height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.34));
}
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-visual figcaption {
  margin-top: 5px;
  color: var(--home-text-muted);
  font-size: 9px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-kpi-zone { min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-pump-parameters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter {
  display: grid;
  min-width: 0;
  min-height: 78px;
  padding: 9px 10px;
  align-content: center;
  border: 1px solid rgba(99, 213, 198, 0.24);
  background: rgba(1, 52, 52, 0.5);
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter dt {
  overflow: hidden;
  color: #9ccac5;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter dd {
  display: flex;
  min-width: 0;
  margin: 6px 0 3px;
  align-items: baseline;
  gap: 5px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter dd strong {
  color: #63ebd5;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter dd span {
  color: #7dbdb7;
  font-size: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter small {
  overflow: hidden;
  color: #527f7d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter.is-fault {
  background: rgba(103, 27, 29, 0.42);
  outline: 1px solid rgba(255, 112, 96, 0.5);
}
.app-shell[data-active-page="monitor"] .monitor-pump-parameter.is-fault dd strong { color: #ff8d7f; }
.app-shell[data-active-page="monitor"] .monitor-pump-realtime-card > footer {
  padding: 8px 11px;
  border-top: 1px solid rgba(85, 213, 196, 0.14);
  color: #6eaaa6;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-pump-source {
  display: flex;
  justify-content: flex-end;
  color: #6eaaa6;
  font-size: 11px;
}
@media (max-width: 1180px) {
  .app-shell[data-active-page="monitor"] .monitor-pump-controller-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell[data-active-page="monitor"] .monitor-equipment-layout-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .app-shell[data-active-page="monitor"] .monitor-pump-controller-grid { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-layout-body,
  .app-shell[data-active-page="monitor"] .monitor-pump-realtime-body { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-layout-visual,
  .app-shell[data-active-page="monitor"] .monitor-pump-realtime-visual {
    border-right: 0;
    border-bottom: 1px solid var(--home-line);
  }
}
@media (max-width: 420px) {
  .app-shell[data-active-page="monitor"] .monitor-pump-realtime-heading { align-items: flex-start; flex-direction: column; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-layout-kpis { grid-template-columns: 1fr; }
}

/* 阀门：IoTDA EV / ETV 共十七个设备，按物模型完整呈现实时参数。 */
.app-shell[data-active-page="monitor"] [data-monitor-panel="valve"] #monitorValve {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-valve-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 232, 210, 0.38);
  background: rgba(0, 36, 38, 0.62);
}
.app-shell[data-active-page="monitor"] .monitor-valve-group-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(85, 213, 196, 0.2);
  background: rgba(3, 53, 53, 0.64);
}
.app-shell[data-active-page="monitor"] .monitor-valve-group-heading h3 {
  margin: 0;
  color: var(--home-text-strong);
  font-size: 17px;
  line-height: 1.25;
}
.app-shell[data-active-page="monitor"] .monitor-valve-group-heading p {
  margin: 3px 0 0;
  color: var(--home-text-muted);
  font-size: 11px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-group-heading > span {
  color: var(--home-accent-strong);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-valve-controller-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-card {
  min-width: 0;
  border: 1px solid rgba(67, 194, 180, 0.26);
  background: linear-gradient(145deg, rgba(7, 67, 65, 0.58), rgba(1, 35, 38, 0.78));
}
.app-shell[data-active-page="monitor"] .monitor-valve-card.is-live { border-color: rgba(101, 244, 198, 0.58); }
.app-shell[data-active-page="monitor"] .monitor-valve-card.is-delayed { border-color: rgba(240, 165, 74, 0.52); }
.app-shell[data-active-page="monitor"] .monitor-valve-card.is-stale,
.app-shell[data-active-page="monitor"] .monitor-valve-card.is-fault { border-color: rgba(255, 117, 104, 0.56); }
.app-shell[data-active-page="monitor"] .monitor-valve-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(85, 213, 196, 0.16);
}
.app-shell[data-active-page="monitor"] .monitor-valve-heading > div { min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-valve-heading h4 {
  margin: 0;
  overflow: hidden;
  color: var(--home-text-strong);
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-valve-heading p {
  margin: 3px 0 0;
  color: var(--home-text-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.app-shell[data-active-page="monitor"] .monitor-valve-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-valve-visual {
  display: grid;
  min-width: 0;
  min-height: 132px;
  margin: 0;
  padding: 10px 8px;
  place-content: center;
  justify-items: center;
  border-right: 1px solid rgba(85, 213, 196, 0.16);
  background:
    linear-gradient(rgba(45, 205, 188, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 205, 188, 0.06) 1px, transparent 1px),
    rgba(1, 40, 41, 0.44);
  background-size: 20px 20px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-visual img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.32));
}
.app-shell[data-active-page="monitor"] .monitor-valve-visual figcaption {
  margin-top: 3px;
  color: var(--home-text-muted);
  font-size: 9px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-position {
  display: grid;
  margin-top: 7px;
  justify-items: center;
  gap: 2px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-position strong { color: var(--home-neutral); font-size: 14px; }
.app-shell[data-active-page="monitor"] .monitor-valve-position span { color: var(--home-text-muted); font-size: 9px; }
.app-shell[data-active-page="monitor"] .monitor-valve-position.is-open strong { color: #7ef0b3; }
.app-shell[data-active-page="monitor"] .monitor-valve-position.is-partial strong,
.app-shell[data-active-page="monitor"] .monitor-valve-position.is-transition strong { color: var(--home-warning); }
.app-shell[data-active-page="monitor"] .monitor-valve-position.is-fault strong { color: var(--home-danger); }
.app-shell[data-active-page="monitor"] .monitor-valve-parameters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-parameter {
  display: grid;
  min-width: 0;
  min-height: 82px;
  padding: 9px 10px;
  align-content: center;
  border: 1px solid rgba(99, 213, 198, 0.24);
  background: rgba(1, 52, 52, 0.5);
}
.app-shell[data-active-page="monitor"] .monitor-valve-parameter dt {
  overflow: hidden;
  color: var(--home-text-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-valve-parameter dd {
  display: flex;
  min-width: 0;
  margin: 6px 0 3px;
  align-items: baseline;
  gap: 5px;
}
.app-shell[data-active-page="monitor"] .monitor-valve-parameter dd strong {
  color: var(--home-accent-strong);
  font-size: 19px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-valve-parameter dd span { color: var(--home-text-muted); font-size: 10px; }
.app-shell[data-active-page="monitor"] .monitor-valve-parameter small {
  overflow: hidden;
  color: #638d89;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-valve-parameter.is-missing dd strong { color: var(--home-neutral); }
.app-shell[data-active-page="monitor"] .monitor-valve-card > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 11px;
  border-top: 1px solid rgba(85, 213, 196, 0.14);
  color: var(--home-text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-valve-card > footer b { color: var(--home-text-soft); font-weight: 600; }
.app-shell[data-active-page="monitor"] .monitor-valve-page-source {
  display: flex;
  justify-content: flex-end;
  color: var(--home-text-muted);
  font-size: 11px;
}
@media (max-width: 1320px) {
  .app-shell[data-active-page="monitor"] .monitor-valve-controller-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell[data-active-page="monitor"] .monitor-valve-controller-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .app-shell[data-active-page="monitor"] .monitor-valve-heading { align-items: flex-start; flex-direction: column; }
  .app-shell[data-active-page="monitor"] .monitor-valve-body { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-valve-visual { border-right: 0; border-bottom: 1px solid var(--home-line); }
}

/* 供冷设备：IoTDA MCC1 / MCC2 双机组实时参数。 */
.app-shell[data-active-page="monitor"] .monitor-mcc-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 232, 210, 0.42);
  background:
    linear-gradient(135deg, rgba(8, 63, 61, 0.66), rgba(1, 31, 34, 0.82)),
    rgba(0, 30, 32, 0.72);
  box-shadow: inset 0 0 22px rgba(43, 225, 195, 0.04), 0 0 12px rgba(43, 225, 195, 0.08);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-card.is-live {
  border-color: rgba(101, 244, 198, 0.68);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-heading,
.app-shell[data-active-page="monitor"] .monitor-mcc-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-heading {
  border-bottom: 1px solid rgba(85, 213, 196, 0.2);
  background: rgba(1, 39, 40, 0.52);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(86, 236, 207, 0.44);
  background: linear-gradient(145deg, rgba(21, 153, 139, 0.38), rgba(6, 66, 69, 0.48));
}
.app-shell[data-active-page="monitor"] .monitor-mcc-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-identity h3 {
  margin: 0;
  color: #f4fffd;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-identity p {
  margin: 4px 0 0;
  color: #73cfc5;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-state {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-state time {
  color: #79bdb8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9cc8c4;
  font-size: 12px;
  font-weight: 700;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #708c8b;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-status.is-live { color: #75f4c8; }
.app-shell[data-active-page="monitor"] .monitor-mcc-status.is-live i {
  background: #45edae;
  box-shadow: 0 0 9px rgba(69, 237, 174, 0.76);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-status.is-delayed { color: #ffd27a; }
.app-shell[data-active-page="monitor"] .monitor-mcc-status.is-delayed i { background: #f2b84b; }
.app-shell[data-active-page="monitor"] .monitor-mcc-status.is-stale { color: #ff9b8d; }
.app-shell[data-active-page="monitor"] .monitor-mcc-status.is-stale i { background: #ff7568; }
.app-shell[data-active-page="monitor"] .monitor-mcc-body {
  display: grid;
  grid-template-columns: minmax(270px, 30%) minmax(0, 1fr);
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-visual {
  display: grid;
  min-width: 0;
  margin: 0;
  min-height: 260px;
  padding: 22px 18px 14px;
  align-content: center;
  justify-items: center;
  border-right: 1px solid rgba(85, 213, 196, 0.18);
  background:
    linear-gradient(rgba(27, 180, 161, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 180, 161, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-visual img {
  width: min(260px, 88%);
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36));
}
.app-shell[data-active-page="monitor"] .monitor-mcc-visual .monitor-chiller-product-image {
  width: min(340px, 96%);
  max-height: 220px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-visual figcaption {
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  color: #6eaaa6;
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-parameter-stack {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 12px;
  padding: 12px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-unit-section,
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-group {
  min-width: 0;
  border: 1px solid rgba(67, 194, 180, 0.22);
  background: rgba(0, 39, 41, 0.38);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-section-heading {
  display: flex;
  min-height: 38px;
  padding: 9px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(67, 194, 180, 0.2);
  background: rgba(9, 70, 68, 0.32);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-section-heading strong {
  color: var(--home-text-strong);
  font-size: 14px;
  font-weight: 800;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-section-heading span {
  color: var(--home-text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-details {
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-toggle {
  display: flex;
  min-height: 48px;
  padding: 10px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(67, 194, 180, 0.28);
  background: rgba(9, 70, 68, 0.32);
  color: var(--home-text-strong);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-toggle::-webkit-details-marker {
  display: none;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-toggle::marker {
  content: "";
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-toggle:hover {
  border-color: rgba(101, 235, 213, 0.5);
  background: rgba(12, 87, 82, 0.42);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-toggle:focus-visible {
  outline: 2px solid var(--home-accent-strong);
  outline-offset: 2px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-summary {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-summary strong {
  font-size: 14px;
  font-weight: 800;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-summary small {
  color: var(--home-text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: #75f4c8;
  font-size: 12px;
  font-weight: 800;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-action .is-expanded {
  display: none;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-action i {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-details[open] .monitor-mcc-compressor-action .is-collapsed {
  display: none;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-details[open] .monitor-mcc-compressor-action .is-expanded {
  display: inline;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-details[open] .monitor-mcc-compressor-action i {
  transform: translateY(2px) rotate(225deg);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  min-width: 0;
  gap: 12px;
  padding-top: 12px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-params {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-compressor-params {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param {
  display: grid;
  min-width: 0;
  min-height: 94px;
  padding: 12px;
  align-content: center;
  border: 1px solid rgba(67, 194, 180, 0.25);
  background: rgba(1, 48, 49, 0.48);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param dt {
  overflow: hidden;
  color: #a8d6d1;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param dd {
  display: flex;
  min-width: 0;
  margin: 7px 0 4px;
  align-items: baseline;
  gap: 6px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param dd strong {
  color: #63ebd5;
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param dd span {
  color: #7dbdb7;
  font-size: 11px;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param small {
  overflow: hidden;
  color: #568f8b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param.is-fault {
  border-color: rgba(255, 112, 96, 0.62);
  background: rgba(103, 27, 29, 0.4);
}
.app-shell[data-active-page="monitor"] .monitor-mcc-param.is-fault dd strong { color: #ff8d7f; }
.app-shell[data-active-page="monitor"] .monitor-mcc-footer {
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid rgba(85, 213, 196, 0.18);
  color: #76aaa6;
  font-size: 11px;
}
@media (max-width: 1380px) {
  .app-shell[data-active-page="monitor"] .monitor-mcc-unit-params {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .app-shell[data-active-page="monitor"] .monitor-mcc-body { grid-template-columns: 210px minmax(0, 1fr); }
  .app-shell[data-active-page="monitor"] .monitor-mcc-unit-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .app-shell[data-active-page="monitor"] .monitor-mcc-heading,
  .app-shell[data-active-page="monitor"] .monitor-mcc-footer { align-items: flex-start; flex-direction: column; }
  .app-shell[data-active-page="monitor"] .monitor-mcc-state { justify-items: start; }
  .app-shell[data-active-page="monitor"] .monitor-mcc-body { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-mcc-visual { border-right: 0; border-bottom: 1px solid rgba(85, 213, 196, 0.18); }
}
@media (max-width: 430px) {
  .app-shell[data-active-page="monitor"] .monitor-mcc-unit-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] .monitor-mcc-compressor-params,
  .app-shell[data-active-page="monitor"] .monitor-mcc-compressor-list { grid-template-columns: 1fr; }
  .app-shell[data-active-page="monitor"] .monitor-mcc-compressor-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell[data-active-page="monitor"] .monitor-mcc-compressor-action i { transition: none; }
}

/* 实时刷新稳定性：保留静态描边与发光，关闭持续呼吸动画，避免被误认为数据刷新闪烁。 */
:is(
  .cockpit-kpi,
  .home-twin-titlebar,
  .home-float-panel,
  .home-period-switch,
  .monitor-meter-kpis .monitor-kpi-card,
  .monitor-meter-body .panel,
  .monitor-pump-card,
  .monitor-pump-realtime-card,
  .monitor-mcc-card,
  .monitor-storage-card,
  .energy-panel,
  .energy-kpi-ribbon .monitor-kpi-card,
  .opt-kpi-ribbon .monitor-kpi-card,
  .opt-module-card
) {
  animation: none !important;
}

/* 图表更新限制在各自绘制区域内，避免一次数据变化触发整页重绘。 */
:is(
  .home-cockpit-chart,
  .energy-chart,
  .monitor-storage-chart,
  .monitor-storage-temphist-chart,
  .opt-load-chart
) {
  contain: layout paint;
}

/* 浏览器断网时保留上一轮有效数据，只把连接状态明确标成中断。 */
.platform-meta .status-strip.is-client-offline,
.monitor-head-status.is-client-offline {
  color: #ffd28a;
  border-color: rgba(255, 174, 64, 0.58);
  background: rgba(74, 43, 8, 0.78);
}

.platform-meta .status-strip.is-client-offline .pulse,
.monitor-head-status.is-client-offline .pulse {
  background: #ffad42;
  box-shadow: 0 0 0 4px rgba(255, 173, 66, 0.14);
  animation: none;
}

/* 运维管理：按告警优先级组织闭环任务，复用全平台描边、字体和图标语言。 */
.operations-center { --operations-critical: #ff746a; --operations-warning: #f2b35c; --operations-info: #63d5c6; }
.operations-kpi-ribbon .operations-kpi-alarm { --energy-kpi-tone: var(--operations-critical); }
.operations-kpi-ribbon .operations-kpi-ack { --energy-kpi-tone: var(--operations-warning); }
.operations-kpi-ribbon .operations-kpi-workorder { --energy-kpi-tone: #65d8ff; }
.operations-kpi-ribbon .operations-kpi-overdue { --energy-kpi-tone: #9df480; }

.operations-source-strip {
  display: grid;
  margin-bottom: 14px;
  padding: 12px 16px;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  align-items: center;
  gap: 10px 16px;
  border: 1px solid var(--home-line-strong);
  border-radius: 10px;
  background: rgba(1, 42, 42, 0.72);
  box-shadow: inset 0 1px rgba(210, 250, 240, 0.05);
}
.operations-source-strip div { min-width: 0; }
.operations-source-strip span { display: block; margin-bottom: 3px; color: var(--home-text-muted); font-size: 11px; font-weight: 600; }
.operations-source-strip strong { display: block; overflow: hidden; color: var(--home-text-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.operations-source-strip time { color: var(--home-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.operations-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.operations-alert-panel { min-width: 0; }
.operations-module-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; align-items: stretch; }
.operations-module-grid > .energy-panel { height: 100%; }
.operations-panel-head { gap: 16px; }
.operations-filter {
  display: inline-grid;
  flex: 0 0 auto;
  padding: 3px;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
  gap: 3px;
  border: 1px solid var(--home-line);
  border-radius: 9px;
  background: rgba(0, 20, 20, 0.58);
}
.operations-filter button {
  min-height: 32px;
  padding: 0 12px;
  color: var(--home-text-soft);
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: color 180ms ease, background-color 180ms ease;
}
.operations-filter button:hover { color: var(--home-text-strong); background: rgba(99, 213, 198, 0.1); }
.operations-filter button:focus-visible { outline: 2px solid var(--home-accent); outline-offset: 2px; }
.operations-filter button.is-active { color: #03201e; background: var(--home-accent); }

.operations-table-wrap { height: 238px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.operations-table-wrap:focus-visible { outline: 2px solid var(--home-accent); outline-offset: -2px; }
.operations-alert-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.operations-alert-table th { position: sticky; top: 0; z-index: 1; padding: 9px 13px; color: var(--home-text-muted); background: #022f30; border-bottom: 1px solid var(--home-line); font-size: 11px; font-weight: 700; text-align: left; }
.operations-alert-table th:nth-child(1) { width: 76px; }
.operations-alert-table th:nth-child(2) { width: 34%; }
.operations-alert-table th:nth-child(3) { width: 130px; }
.operations-alert-table th:nth-child(4) { width: 134px; }
.operations-alert-table th:nth-child(5) { width: 86px; }
.operations-alert-table th:nth-child(6) { width: 78px; }
.operations-alert-table td { padding: 9px 13px; color: var(--home-text-soft); border-bottom: 1px solid rgba(85, 213, 196, 0.14); font-size: 12px; vertical-align: middle; }
.operations-alert-table tbody tr:last-child td { border-bottom: 0; }
.operations-alert-table tbody tr:hover { background: rgba(99, 213, 198, 0.045); }
.operations-alert-table td strong, .operations-alert-table td small { display: block; }
.operations-alert-table td strong { overflow: hidden; color: var(--home-text-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.operations-alert-table td small { margin-top: 4px; overflow: hidden; color: var(--home-text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.operations-alert-table time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.operations-severity, .operations-state, .operations-source-chip, .operations-standard-badge, .operations-interface-tag {
  display: inline-flex;
  min-height: 26px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.operations-severity.is-critical { color: #ffd4d0; border-color: rgba(255, 116, 106, 0.48); background: rgba(136, 37, 36, 0.4); }
.operations-severity.is-warning { color: #ffe5b5; border-color: rgba(242, 179, 92, 0.48); background: rgba(113, 70, 15, 0.4); }
.operations-state.is-new { color: #b6fff0; border-color: rgba(99, 213, 198, 0.42); background: rgba(33, 112, 101, 0.26); }
.operations-source-chip { max-width: 120px; overflow: hidden; color: var(--home-text-soft); text-overflow: ellipsis; }
.operations-empty { display: grid; min-height: 160px; place-items: center; color: var(--home-text-muted); font-size: 13px; text-align: center; }

.operations-standard-badge { color: var(--home-accent-strong); background: rgba(99, 213, 198, 0.08); }
.operations-interface-tag { color: var(--home-warning); border-color: rgba(240, 165, 74, 0.38); background: rgba(240, 165, 74, 0.08); }
.operations-workflow { display: grid; margin: 0; padding: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; list-style: none; }
.operations-workflow li { position: relative; min-width: 0; padding: 8px 4px; text-align: center; }
.operations-workflow li:not(:last-child)::after { position: absolute; top: 23px; right: -6px; width: 12px; height: 1px; background: rgba(99, 213, 198, 0.38); content: ""; }
.operations-workflow li:nth-child(4)::after { display: none; }
.operations-workflow li > span { display: grid; width: 32px; height: 32px; margin: 0 auto 8px; place-items: center; color: #042522; border: 1px solid #a4f8e8; border-radius: 50%; background: var(--home-accent); box-shadow: 0 0 12px rgba(99, 213, 198, 0.22); font-size: 12px; font-weight: 900; }
.operations-workflow strong, .operations-workflow small { display: block; }
.operations-workflow strong { color: var(--home-text-strong); font-size: 13px; }
.operations-workflow small { margin-top: 4px; color: var(--home-text-muted); font-size: 10px; }

.operations-stage-list { display: grid; margin: 0; padding: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.operations-stage-list div { display: flex; min-height: 56px; padding: 11px 12px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--home-line); border-radius: 8px; background: rgba(4, 54, 53, 0.38); }
.operations-stage-list dt { color: var(--home-text-soft); font-size: 12px; font-weight: 700; }
.operations-stage-list dd { margin: 0; color: var(--home-accent-strong); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.operations-empty-copy { margin: 0; padding: 0 14px 16px; color: var(--home-text-muted); font-size: 11px; line-height: 1.6; }

.operations-evidence-list, .operations-channel-list { margin: 0; padding: 8px 14px 14px; list-style: none; }
.operations-evidence-list li { display: grid; min-height: 62px; padding: 10px 0; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid rgba(85, 213, 196, 0.14); }
.operations-evidence-list li:last-child { border-bottom: 0; }
.operations-evidence-icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--home-accent-strong); border: 1px solid var(--home-line-strong); border-radius: 8px; background: rgba(99, 213, 198, 0.08); font-size: 11px; font-weight: 800; }
.operations-evidence-list strong, .operations-evidence-list small { display: block; }
.operations-evidence-list strong { color: var(--home-text-strong); font-size: 12px; }
.operations-evidence-list small { margin-top: 3px; color: var(--home-text-muted); font-size: 10px; line-height: 1.4; }
.operations-evidence-list b { color: var(--home-accent-strong); font-size: 16px; font-variant-numeric: tabular-nums; }

.operations-channel-list li { display: grid; min-height: 44px; padding: 9px 0; grid-template-columns: minmax(0, 1fr) auto 82px; align-items: center; gap: 10px; border-bottom: 1px solid rgba(85, 213, 196, 0.14); }
.operations-channel-list li:last-child { border-bottom: 0; }
.operations-channel-list span { color: var(--home-text-soft); font-size: 12px; font-weight: 700; }
.operations-channel-list strong { color: var(--home-warning); font-size: 11px; }
.operations-channel-list strong.is-online { color: var(--home-accent-strong); }
.operations-channel-list small { color: var(--home-text-muted); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1380px) {
  .operations-module-grid { gap: 12px; }
}
@media (max-width: 1080px) {
  .operations-source-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-source-strip time { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .operations-panel-head { align-items: stretch; }
  .operations-filter { width: 100%; }
  .operations-module-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .operations-source-strip { grid-template-columns: 1fr; }
  .operations-source-strip time { grid-column: auto; }
}
@media (max-width: 520px) {
  .operations-stage-list { grid-template-columns: 1fr; }
  .operations-channel-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .operations-channel-list small { grid-column: 1 / -1; text-align: left; }
}