/* ==========================================================================
   CRIT 储能云 · 运营大屏
   固定 1920×1080 舞台，由 wall.js 按视口等比缩放。
   颜色只在本文件的 :root 定义；页面与 scenes.js 一律引用变量（规范 §6.1）。
   ========================================================================== */

@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/chakra-petch-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* 规范 §6.1 的核心 token */
  --bg:   #07111d;
  --p1:   #0b1a29;
  --p2:   #091624;
  --ln:   #173047;
  --ln2:  #142838;
  --ink:  #eaf3ff;
  --dim:  #6483a0;
  --dim2: #5c7792;
  --acc:  #4A9BD1;
  --ok:   #4FAE84;
  --warn: #D99A3D;
  --bad:  #D9574A;
  --trk:  #1b3145;

  /* 由 v3 原型抽出、供外壳与后续场景复用的派生色 */
  --acc-2:  #2b6d9c;  /* 次级蓝：选中边框、未达峰条形 */
  --edge:   #1c3348;  /* 舞台描边、角落装饰 */
  --sel:    #12314a;  /* 选中 tab 底色 */
  --text-2: #9db4cb;  /* 列表正文 */
  --track-2:#24415c;  /* 深一档的条形轨道 */
  --top-sheen:  rgba(18, 49, 74, .50);
  --foot-sheen: rgba(18, 49, 74, .30);
  --ok-glow:    rgba(79, 174, 132, .15);
  --acc-glow:   rgba(74, 155, 209, .12);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

/* ── 舞台 ─────────────────────────────────────────────────────────────── */
.wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--acc) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--acc) 3%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid var(--edge);
  border-radius: 8px;
}

.wall::before,
.wall::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--acc-2);
  opacity: .5;
  pointer-events: none;
}
.wall::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.wall::after  { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--ln2);
  background: linear-gradient(180deg, var(--top-sheen), transparent);
}

.brand {
  font-family: "Chakra Petch", "PingFang SC", sans-serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .13em;
  font-size: 28px;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { color: var(--acc); }

.tabs { display: flex; gap: 8px; }

.tab {
  font: inherit;
  font-size: 20px;
  line-height: 1.4;
  padding: 5px 22px;
  border-radius: 4px;
  color: var(--dim);
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.on {
  color: var(--ink);
  background: var(--sel);
  border-color: var(--acc-2);
}

.meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  color: var(--dim);
  white-space: nowrap;
}

.live {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 6px var(--ok-glow);
}

.live.warn { background: var(--warn); box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 12%, transparent); }
.net-status { color: var(--warn); font-size: 18px; }

/* 演示数据徽标：随快照 isDemo 由 wall.js 在顶栏 .meta 内渲染，四场景共用。 */
.meta .demo-badge {
  font-size: 16px;
  line-height: 1.4;
  padding: 1px 8px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

/* ── KPI 带 ───────────────────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-bottom: 1px solid var(--ln2);
  background: var(--p2);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 22px;
  border-right: 1px solid var(--ln2);
}
.kpi:last-child { border-right: 0; }

.k-l {
  font-size: 15px;
  letter-spacing: .07em;
  color: var(--dim2);
  white-space: nowrap;
}

.k-v {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.k-v em {
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 4px;
}

.k-d {
  font-size: 14px;
  color: var(--dim2);
  white-space: nowrap;
}
.k-d.up { color: var(--ok); }
.k-d.down { color: var(--bad); }

/* ── 场景主体 ─────────────────────────────────────────────────────────── */
.scene {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: scene-in .2s ease-out;
}

@keyframes scene-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.body {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 16px;
  padding: 16px 28px;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* ── 面板 ─────────────────────────────────────────────────────────────── */
.p {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 14px 18px;
  border: 1px solid var(--ln);
  border-radius: 8px;
  background: linear-gradient(160deg, var(--p1), var(--p2));
}

.lbl {
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--dim);
  white-space: nowrap;
}

.num {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.num em {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 4px;
}

.sub {
  font-size: 13px;
  line-height: 1.4;
  color: var(--dim2);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sep {
  height: 1px;
  background: var(--ln2);
  margin: 8px 0;
}

/* ── 列表 / 条形 / 标签 ───────────────────────────────────────────────── */
.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lr {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-2);
  white-space: nowrap;
}
.lr b {
  font-weight: 500;
  color: var(--ink);
}

.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.bar {
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--trk);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 6px;
  border-radius: 3px;
}

.chip {
  font-size: 12px;
  line-height: 1.5;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  white-space: nowrap;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ── 底栏 ─────────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 32px;
  border-top: 1px solid var(--ln2);
  background: linear-gradient(0deg, var(--foot-sheen), transparent);
  font-size: 14px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
}
.foot .r {
  margin-left: auto;
  display: flex;
  gap: 28px;
}

/* ── 数据热条 ─────────────────────────────────────────────────────────── */
.heat {
  height: 16px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--ok) 0 7px,
    var(--trk) 7px 12px
  );
  opacity: .85;
}

/* ── 空态 ─────────────────────────────────────────────────────────────── */
.empty {
  position: absolute;
  inset: 78px 0 52px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
}
.empty[hidden] { display: none; }

.empty-title {
  font-size: 52px;
  font-weight: 600;
  color: var(--ink);
}

.empty-hint {
  font-size: 20px;
  color: var(--dim);
}

.empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  padding: 8px 18px;
  color: var(--acc);
  border: 1px solid var(--ln);
  border-radius: 6px;
  background: var(--p1);
}

/* ── 场景 A：规模与覆盖 ───────────────────────────────────────────────── */
.scene-a,
.scene-b,
.scene-c,
.scene-d {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.empty-line { margin-top: 10px; }

.warn-chip { color: var(--warn); }

/* 纵向柱图（月产出 / 7 日事件 / 建档节奏共用单元） */
.bar-cell {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 5px;
}

.bar-fill {
  align-self: end;
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--acc-2);
}
.bar-cell.now .bar-fill { background: var(--acc); }

.bar-lbl {
  font-size: 10px;
  line-height: 1.2;
  color: var(--dim2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
/* 12 个月柱只有约 29px 宽，年月分两行才放得下 */
.bar-lbl.multi {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.prod-panel,
.event-panel {
  display: flex;
  flex-direction: column;
}

.prod-bars,
.event-bars {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
  min-height: 0;
  margin-top: 8px;
}

.event-bars .bar-fill { background: var(--warn); }

.year-bars {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: none;
  height: 52px;
  margin-top: 8px;
}

/* 横向条形（区域 / 客户） */
.hrow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hrow .row { gap: 8px; }
.hrow .lr { min-width: 0; }
.hname { overflow: hidden; text-overflow: ellipsis; }

.hbar {
  height: 6px;
  border-radius: 3px;
  background: var(--trk);
  overflow: hidden;
}
.hbar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--acc-2);
}
.list .hrow:first-child .hbar i { background: var(--acc); }

/* 站点状态 */
.site-status {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.status-cell { flex: 1; min-width: 0; }
.status-cell .num { font-size: 30px; }

/* 站点地图 */
.map-panel {
  display: flex;
  flex-direction: column;
}
.map {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
/* 62° 经差 × 36° 纬差，按中纬 cos36°≈.809 压缩 → 宽高比≈1.393。
   固定比例后 SVG 不再随面板高度被压扁，剩余空间左右留白。 */
.map-plane {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc(100cqh * 1.393);
  max-height: calc(100cqw / 1.393);
}
.map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-contour {
  fill: none;
  stroke: color-mix(in srgb, var(--acc) 88%, transparent);
  stroke-width: 1;
}
.map-province {
  fill: none;
  stroke: color-mix(in srgb, var(--acc) 38%, transparent);
  stroke-width: .7;
}
.map-graticule {
  fill: none;
  stroke: color-mix(in srgb, var(--acc) 9%, transparent);
  stroke-width: .5;
}
.map-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--acc);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc) 12%, transparent);
}
.map-dot.warn {
  background: var(--warn);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--warn) 12%, transparent);
}
.map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 站点卡片 */
.site-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  flex: none;
  height: 112px;
}
.site-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}
.site-card .lbl { overflow: hidden; text-overflow: ellipsis; }
.site-card .num { font-size: 22px; line-height: 1.1; }
.site-card .sub { overflow: hidden; text-overflow: ellipsis; }
.site-card .dot {
  display: inline-block;
  margin-right: 4px;
  background: var(--dim);
}
.site-card .dot.on { background: var(--ok); }
.site-cards-empty {
  flex: none;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 设备状态环形 */
.ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}
.ring {
  width: 112px;
  height: 112px;
  flex: none;
  border-radius: 50%;
  background: var(--trk);
  mask: radial-gradient(closest-side, transparent 62%, currentColor 64%);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, currentColor 64%);
}
.ring-center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 112px;
  transform: translateY(-50%);
  text-align: center;
}
.ring-center .num { font-size: 26px; }
.ring-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ring-legend .lr { justify-content: space-between; }

/* 数据覆盖热条 */
.heat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: 18px;
  margin-top: 12px;
}
.heat-cell {
  border-radius: 2px;
  background: var(--trk);
}
.heat-cell.on { background: var(--ok); }
.heat-cell.warn { background: var(--warn); }

.coverage-note { margin-top: 8px; }

/* 数据质量 */
.quality {
  margin-top: 8px;
  gap: 8px;
}
.quality .lr {
  justify-content: space-between;
  min-height: 24px;
  font-size: 14px;
}
.quality .q-name { flex: 1; min-width: 0; }

/* ── 场景 B：运行与可靠 ───────────────────────────────────────────────── */

/* 运行状态分布 */
.scene-b .running-states {
  margin-top: 8px;
  gap: 5px;
}
.scene-b .running-states .row { gap: 8px; }
.scene-b .running-states .lr { min-height: 0; }
.scene-b .running-states .bar { margin-top: 2px; }
.scene-b .running-states .lr:last-child { color: var(--dim2); }

/* 设备实时状态 */
.scene-b .dev-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 7px;
}
.scene-b .dev-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 36px 38px 44px 54px;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 12px;
  white-space: nowrap;
}
.scene-b .dev-sn {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-b .dev-site {
  color: var(--dim2);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-b .dev-state { color: var(--text-2); }
.scene-b .dev-soc {
  color: var(--ink);
  text-align: right;
}
.scene-b .dev-temp {
  color: var(--warn);
  text-align: right;
}
.scene-b .dev-time {
  color: var(--dim2);
  font-size: 12px;
  text-align: right;
}

/* 温度 / 压差 sparkline */
.scene-b .trend-row { display: flex; flex-direction: column; gap: 2px; }
.scene-b .trend-row + .trend-row { margin-top: 7px; }
.scene-b .trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.scene-b .trend-head b {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.scene-b .trend-head b em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 3px;
}
.scene-b .spark {
  width: 100%;
  height: 20px;
  display: block;
}
.scene-b .spark polyline {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.scene-b .spark-empty { margin-top: 2px; }

/* 充放电功率柱 */
.scene-b .power-panel { display: flex; flex-direction: column; }
.scene-b .power-bars {
  display: flex;
  gap: 4px;
  flex: 1;
  min-height: 0;
  margin-top: 8px;
}
.scene-b .power-cell {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3px;
}
.scene-b .power-track { position: relative; min-height: 0; margin: 11px 0; }
.scene-b .power-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ln2);
}
.scene-b .power-bar {
  position: absolute;
  left: 14%;
  right: 14%;
  border-radius: 2px;
}
.scene-b .power-bar.pos { background: var(--ok); }
.scene-b .power-bar.neg { background: var(--warn); }
.scene-b .power-val {
  position: absolute;
  left: -6px;
  right: -6px;
  text-align: center;
  font-size: 10px;
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
}
.scene-b .power-lbl {
  font-size: 10px;
  line-height: 1.2;
  color: var(--dim2);
  text-align: center;
  white-space: nowrap;
}

/* 四仪表 */
.scene-b .gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  flex: none;
  height: 116px;
}
.scene-b .gauge {
  display: flex;
  flex-direction: column;
  padding: 9px 10px;
}
.scene-b .gauge-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 2px;
}
.scene-b .gauge-track {
  fill: none;
  stroke: var(--trk);
  stroke-width: 5;
  stroke-linecap: round;
}
.scene-b .gauge-value {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}
.scene-b .gauge-val {
  margin-top: -13px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* 24H SOC 与功率 */
.scene-b .hourly-panel { display: flex; flex-direction: column; }
.scene-b .legend-dot {
  display: inline-block;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  margin: 0 5px 2px 12px;
  vertical-align: middle;
}
.scene-b .legend-dot.soc { background: var(--acc); }
.scene-b .legend-dot.power { background: var(--ok); }
.scene-b .chart-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 6px;
}
.scene-b .chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-b .chart-grid {
  stroke: var(--ln2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.scene-b .line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.scene-b .line.soc { stroke: var(--acc); }
.scene-b .line.power { stroke: var(--ok); }
.scene-b .line-dot.soc { fill: var(--acc); }
.scene-b .line-dot.power { fill: var(--ok); }
.scene-b .chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-b .chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 10px;
  color: var(--dim2);
}

/* 告警时间轴 */
.scene-b .timeline-panel { display: flex; flex-direction: column; }
.scene-b .timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: 20px;
  margin-top: 9px;
}
.scene-b .timeline-cell {
  border-radius: 2px;
  background: var(--trk);
}
.scene-b .timeline-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  margin-top: 3px;
  font-size: 10px;
  color: var(--dim2);
}
.scene-b .timeline-labels span { white-space: nowrap; }

/* 事件类型 */
.scene-b .event-types { margin-top: 7px; gap: 7px; }
.scene-b .event-types .lr { min-height: 0; }

/* 事件级别分布 */
.scene-b .level-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.scene-b .level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.scene-b .level-name {
  flex: none;
  width: 58px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  white-space: nowrap;
}
.scene-b .level-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--trk);
  overflow: hidden;
}
.scene-b .level-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.scene-b .level-count {
  flex: none;
  width: 32px;
  text-align: right;
  font-weight: 500;
  color: var(--ink);
}

/* 最近事件 */
.scene-b .recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.scene-b .recent-row {
  display: grid;
  grid-template-columns: 88px 46px 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  font-size: 13px;
}
.scene-b .recent-time {
  color: var(--dim2);
  font-size: 12px;
  white-space: nowrap;
}
.scene-b .recent-level {
  text-align: center;
  font-size: 11px;
}
.scene-b .recent-rack {
  color: var(--text-2);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-b .recent-summary {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-b .recent-closed { color: var(--ok); font-size: 11px; }
.scene-b .recent-closed.open { color: var(--warn); }

/* 运维响应 */
.scene-b .resp { margin-top: 10px; gap: 10px; }
.scene-b .resp .lr { justify-content: space-between; min-height: 24px; }
.scene-b .resp-name { flex: 1; min-width: 0; }

/* ── 场景 C：产品与溯源 ───────────────────────────────────────────────── */

/* 实时指标 2×3 */
.scene-c .live-panel { display: flex; flex-direction: column; }
.scene-c .live-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px 12px;
  margin-top: 8px;
}
.scene-c .live-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scene-c .live-v {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.scene-c .live-v em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 3px;
}

/* 单体电压分布 */
.scene-c .volt-panel { display: flex; flex-direction: column; }
.scene-c .volt-panel .row { align-items: baseline; }
.scene-c .volt-bars {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 8px;
}
.scene-c .volt-cell {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.scene-c .volt-fill {
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--acc-2);
}
.scene-c .volt-fill.peak { background: var(--acc); }
.scene-c .volt-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--dim2);
  white-space: nowrap;
}

/* 电压异常 Top5 */
.scene-c .outlier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.scene-c .outlier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 58px 52px;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 11.5px;
}
.scene-c .outlier-sn {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-c .outlier-pos {
  color: var(--dim2);
  white-space: nowrap;
}
.scene-c .outlier-v {
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}
.scene-c .outlier-dev {
  text-align: right;
  color: var(--warn);
  white-space: nowrap;
}

/* 温度探点 Top4 */
.scene-c .temp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.scene-c .temp-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 78px 52px;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 11.5px;
}
.scene-c .temp-no { color: var(--dim); font-size: 11px; }
.scene-c .temp-sn {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-c .temp-pos { color: var(--dim2); white-space: nowrap; }
.scene-c .temp-val {
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}

/* 全链层级 */
.scene-c .hier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.scene-c .hier-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scene-c .hier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.scene-c .hier-name { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.scene-c .hier-count { font-size: 16px; font-weight: 500; color: var(--ink); }
.scene-c .hier-note {
  font-size: 11px;
  color: var(--dim2);
  text-align: right;
  white-space: nowrap;
}

/* 单柜档案时间线 */
.scene-c .timeline-nodes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}
.scene-c .timeline-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 10px;
}
.scene-c .timeline-node::before {
  content: "";
  position: absolute;
  left: 0;
  right: -10px;
  top: 4px;
  height: 1px;
  background: var(--ln2);
}
.scene-c .timeline-node:last-child::before { right: 0; }
.scene-c .timeline-dot {
  position: absolute;
  left: 0;
  top: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
}
.scene-c .timeline-node.pending .timeline-dot { background: var(--dim); }
.scene-c .timeline-name { font-size: 12px; color: var(--dim); white-space: nowrap; }
.scene-c .timeline-time {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
.scene-c .timeline-node.pending .timeline-time { color: var(--dim2); }

/* 一致性指标 */
.scene-c .cons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.scene-c .cons-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scene-c .cons-v {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.scene-c .cons-v em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 3px;
}

/* 档案覆盖明细 */
.scene-c .arch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.scene-c .arch-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scene-c .arch-row .row { gap: 8px; }
.scene-c .arch-row .lr { min-width: 0; min-height: 0; font-size: 12px; }

/* 追溯链 */
.scene-c .trace-panel { display: flex; flex-direction: column; }
.scene-c .trace-tree {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-2);
}
.scene-c .trace-rack {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-c .trace-pack,
.scene-c .trace-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-c .trace-cell { color: var(--dim2); }

/* 全链健康 */
.scene-c .health-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.scene-c .health-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 22px;
  font-size: 11.5px;
  white-space: nowrap;
}
.scene-c .health-name { color: var(--text-2); }
.scene-c .health-metric {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: var(--ink);
}
.scene-c .health-metric span { font-size: 10.5px; color: var(--dim2); }

/* 关键事件 */
.scene-c .key-event-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}
.scene-c .key-event-row {
  display: grid;
  grid-template-columns: 6px 74px 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 22px;
  font-size: 11.5px;
}
.scene-c .key-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.scene-c .key-event-time {
  color: var(--dim2);
  font-size: 11px;
  white-space: nowrap;
}
.scene-c .key-event-level { font-size: 11px; white-space: nowrap; }
.scene-c .key-event-summary {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 数据覆盖 */
.scene-c .coverage-num {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.scene-c .coverage-num em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
  margin-left: 6px;
}
.scene-c .coverage-bar { margin-top: 6px; }

/* ── 场景 D：客户与项目 ───────────────────────────────────────────────── */

/* 3 桶 / 4 桶横条 */
.scene-d .hist-list { margin-top: 8px; gap: 7px; }
.scene-d .hist-list .lr { min-height: 0; font-size: 13px; }

/* 榜单行紧凑化：5 行在 1080 高度内完整可见 */
.scene-d .list { gap: 4px; }
.scene-d .hrow { gap: 3px; }
.scene-d .hrow .lr { min-height: 24px; font-size: 13px; }
.scene-d .hbar { height: 4px; border-radius: 2px; }
.scene-d .hbar i { border-radius: 2px; }

/* 项目状态（三行恒输出） */
.scene-d .project-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.scene-d .status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  font-size: 14px;
  color: var(--text-2);
}
.scene-d .status-line b { font-weight: 500; color: var(--ink); }
.scene-d .status-name {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.scene-d .status-line .dot { background: var(--dim); }
.scene-d .status-line.active .dot { background: var(--ok); }
.scene-d .status-line.no-site .dot { background: var(--warn); }

/* 区域 chips */
.scene-d .region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.scene-d .region-chip {
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
}

/* 重点项目 2×2 */
.scene-d .proj-grid { margin-top: 8px; gap: 8px; }
.scene-d .proj-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--ln2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--acc) 5%, transparent);
}
.scene-d .proj-name {
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-d .proj-customer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-d .proj-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--text-2);
  white-space: nowrap;
}

/* 最近建档站点 */
.scene-d .recent-sites {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.scene-d .site-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px auto;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}
.scene-d .site-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.scene-d .site-name {
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-d .site-meta {
  font-size: 11px;
  color: var(--dim2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-d .site-month {
  font-size: 12px;
  color: var(--dim);
  text-align: right;
  white-space: nowrap;
}
.scene-d .site-counts {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

/* 客户结构堆叠条 */
.scene-d .mix-bar {
  display: flex;
  height: 14px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--trk);
  overflow: hidden;
}
.scene-d .mix-seg { display: block; height: 100%; }
.scene-d .mix-seg.single { background: var(--acc); }
.scene-d .mix-seg.multi { background: var(--ok); }
.scene-d .mix-seg.without { background: var(--dim); }
.scene-d .mix-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.scene-d .mix-legend .lr {
  justify-content: space-between;
  min-height: 0;
  font-size: 12.5px;
}
.scene-d .mix-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.scene-d .mix-dot.single { background: var(--acc); }
.scene-d .mix-dot.multi { background: var(--ok); }
.scene-d .mix-dot.without { background: var(--dim); }

/* 全局健康 / 数据完整性 */
.scene-d .health-list,
.scene-d .integrity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.scene-d .health-list .lr,
.scene-d .integrity-list .lr {
  justify-content: space-between;
  min-height: 24px;
  font-size: 13px;
}
.scene-d .health-name { color: var(--text-2); white-space: nowrap; }
.scene-d .integrity-list b.warn { color: var(--warn); }
.scene-d .ok-line {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ok);
}

/* ── 无障碍 ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}