/* ==========================================================================
   SingClan SCADA — 业务组件样式
   传感器行 · 模块卡 · 摄像头墙 · 仪表网格 · 流程动画 · 报警条目 · 加热器
   ========================================================================== */

/* =========================== 工具栏 =========================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.022);
  margin-bottom: 14px;
}

.toolbar .tb-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx-3);
  letter-spacing: 0.05em;
}

.toolbar .sep {
  width: 1px;
  height: 20px;
  background: var(--line-2);
  margin: 0 3px;
}

.seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(8, 13, 22, 0.6);
  gap: 2px;
}

.seg button {
  padding: 5px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--tx-3);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.seg button:hover { color: var(--tx-1); }
.seg button.on {
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  color: #fff;
  box-shadow: 0 3px 12px rgba(255, 122, 53, 0.34);
}

/* =========================== 传感器行 =========================== */
.sensor-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-1);
  transition: background 0.2s var(--ease);
}

.sensor-row:last-child { border-bottom: none; }
.sensor-row:hover { background: rgba(255, 255, 255, 0.03); }

.sensor-row.alarm { background: rgba(251, 191, 36, 0.07); }
.sensor-row.crit {
  background: rgba(244, 63, 94, 0.1);
  animation: critFlash 1.1s ease-in-out infinite;
}

.sensor-row .s-tag {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tx-3);
  letter-spacing: 0.02em;
}

.sensor-row .s-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx-2);
}

.sensor-row .s-val {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  font-family: "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.sensor-row .s-val .n {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-1);
  line-height: 1;
}

.sensor-row .s-val .u {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx-3);
  min-width: 34px;
}

.sensor-row.alarm .s-val .n { color: var(--st-warn-tx); }
.sensor-row.crit .s-val .n { color: var(--st-crit-tx); }

/* 传感器占位条 */
.s-gauge {
  position: relative;
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}
.s-gauge > i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--st-run);
  transition: width 0.5s var(--ease-out), background 0.3s var(--ease);
}
.sensor-row.warn .s-gauge > i { background: var(--st-warn); }
.sensor-row.alarm .s-gauge > i { background: var(--st-alarm); }
.sensor-row.crit .s-gauge > i { background: var(--st-crit); }

/* =========================== 模块卡 =========================== */
.mod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(34, 47, 74, 0.7), rgba(17, 25, 41, 0.82));
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.mod-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow: var(--sh-3);
}

/* 顶部配色条 */
.mod-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--mc, var(--brand));
}

/* 背景图标水印 */
.mod-card .mc-bg {
  position: absolute;
  right: -12px;
  bottom: -14px;
  width: 82px;
  height: 82px;
  color: var(--mc, var(--brand));
  opacity: 0.07;
  pointer-events: none;
}
.mod-card .mc-bg svg { width: 100%; height: 100%; }

.mc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mc-code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--tx-3);
}

.mc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.mc-title .mi {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mc, var(--brand)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, var(--brand)) 34%, transparent);
}
.mc-title .mi svg { width: 14px; height: 14px; color: var(--mc, var(--brand)); }

.mc-title h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tx-1);
  letter-spacing: -0.01em;
}

.mc-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tx-3);
  min-height: 34px;
}

.mc-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mc-metric {
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(8, 13, 22, 0.5);
  border: 1px solid var(--line-1);
}

.mc-metric .m-n {
  font-size: 10.5px;
  color: var(--tx-3);
  font-weight: 600;
}

.mc-metric .m-v {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 2px;
  font-family: "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.mc-metric .m-v b {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-1);
  line-height: 1;
}

.mc-metric .m-v span {
  font-size: 9.5px;
  color: var(--tx-3);
  font-weight: 600;
}

.mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-1);
  font-size: 11px;
  color: var(--tx-3);
}

/* 加大栅格间距，确保相邻模块之间始终留有清晰空隙 */
#mod-grid { gap: 20px; }

.mc-foot .cams {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 模块卡异常态 */
.mod-card.is-warn { border-color: rgba(251, 191, 36, 0.42); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.16), var(--sh-2); }
.mod-card.is-alarm { border-color: rgba(244, 63, 94, 0.45); box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.2), var(--sh-2); }
.mod-card.is-crit {
  border-color: rgba(255, 45, 85, 0.75);
  animation: critFlash 1s ease-in-out infinite;
}

/* =========================== 仪表网格 =========================== */
.gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.gauge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 13px 10px 11px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(31, 43, 68, 0.55), rgba(14, 21, 36, 0.65));
  transition: border-color 0.3s var(--ease);
}

.gauge-cell canvas { width: 100%; height: 92px; }

.gauge-cell .g-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx-2);
  text-align: center;
}

.gauge-cell .g-tag {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: var(--tx-4);
}

.gauge-cell.danger { border-color: rgba(244, 63, 94, 0.55); }

/* =========================== 摄像头墙 =========================== */
.cam-wall {
  display: grid;
  gap: 12px;
}
.cam-wall.n1 { grid-template-columns: minmax(0, 1fr); }
.cam-wall.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cam-wall.n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cam-wall.n16 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cam-wall.n25 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }

/* 预留通道占位（二十五分屏中未接入的槽位） */
.cam-tile.slot {
  cursor: default;
  border-style: dashed;
  opacity: 0.55;
}
.cam-tile.slot:hover {
  transform: none;
  border-color: var(--line-2);
  box-shadow: none;
}

.cam-tile {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #05080e;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.cam-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 53, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.cam-tile.sel {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(255, 122, 53, 0.3), var(--sh-2);
}

.cam-vp {
  position: relative;
  aspect-ratio: 16 / 9;
  background: radial-gradient(120% 100% at 50% 0%, #16233a 0%, #0a1120 60%, #05080e 100%);
  overflow: hidden;
}

/* 模拟车间场景 */
.cam-scene {
  position: absolute;
  inset: 0;
}

.cam-scene .floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, #1a2740 0%, #101a2c 100%);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.cam-scene .wall {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 66%;
  background:
    repeating-linear-gradient(90deg, rgba(148,163,184,.05) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #0e1727 0%, #131e33 100%);
}

/* 设备剪影 */
.cam-scene .eq {
  position: absolute;
  bottom: 34%;
  background: linear-gradient(180deg, #2b3a56 0%, #1b2740 100%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
}

.cam-scene .eq.vessel {
  width: 26%;
  height: 40%;
  left: 12%;
  border-radius: 13% 13% 4px 4px / 22% 22% 4px 4px;
}

.cam-scene .eq.box2 {
  width: 17%;
  height: 22%;
  left: 45%;
}

.cam-scene .eq.pipe {
  width: 34%;
  height: 5%;
  left: 45%;
  bottom: 52%;
}

/* 热成像辉光（裂解区） */
.cam-scene .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(13px);
  opacity: 0.62;
  animation: glowPulse 3.4s var(--ease) infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.94); }
  50% { opacity: 0.72; transform: scale(1.06); }
}

/* 扫描线 */
.cam-vp::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12%;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.09), transparent);
  animation: scanMove 4.6s linear infinite;
  pointer-events: none;
}

/* CRT 网格 */
.cam-vp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
  z-index: 2;
}

/* 摄像头 HUD */
.cam-hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: #ffffff;
}

.cam-hud .tl {
  position: absolute;
  top: 7px; left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cam-hud .tr {
  position: absolute;
  top: 7px; right: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cam-hud .bl {
  position: absolute;
  bottom: 7px; left: 8px;
}

.cam-hud .br {
  position: absolute;
  bottom: 7px; right: 8px;
}

.rec-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: ledBlink 1.1s steps(1, end) infinite;
}

/* 十字准星 */
.cam-cross {
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  opacity: 0.28;
  z-index: 3;
  pointer-events: none;
}
.cam-cross::before,
.cam-cross::after {
  content: "";
  position: absolute;
  background: rgba(226, 238, 255, 0.7);
}
.cam-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cam-cross::after { top: 50%; left: 0; right: 0; height: 1px; }

.cam-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(10, 16, 27, 0.92);
  border-top: 1px solid var(--line-1);
}

.cam-meta .cm-l { min-width: 0; }

.cam-meta .cm-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-1);
}

.cam-meta .cm-sub {
  font-size: 10px;
  color: var(--tx-3);
}

.cam-meta .cm-r {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
}

/* 离线 / 故障 */
.cam-tile.offline .cam-vp { background: repeating-linear-gradient(45deg, #0d1220 0 8px, #131a2b 8px 16px); }
.cam-tile.offline .cam-scene { display: none; }
.cam-tile.offline::after {
  content: "信号丢失";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  background: rgba(5, 8, 14, 0.72);
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* =========================== 流程动画 =========================== */
.flow-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.flow-svg { width: 100%; min-width: 1180px; height: auto; display: block; }

.flow-node rect { transition: stroke 0.3s var(--ease), fill 0.3s var(--ease); }
.flow-node:hover rect { stroke-width: 2.4; }

.flow-pipe {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
}

.flow-pipe.live { animation: flowDash 0.9s linear infinite; }
.flow-pipe.idle { opacity: 0.24; animation: none; }
.flow-pipe.fault { stroke: var(--red) !important; animation: flowDash 1.9s linear infinite; }

@keyframes flowDash { to { stroke-dashoffset: -32; } }

.flow-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; }

/* 流程图节点卡片底色（随主题切换） */
.flow-card { fill: var(--flow-node); }

/* SVG 等轴测/流程图文字（全局共享，避免个别页面未定义导致黑色不可读） */
.iso-code  { font-size: 9px;  font-weight: 800; fill: var(--tx-1); pointer-events: none; letter-spacing: 0.06em; }
.iso-label { font-size: 11px; font-weight: 700; fill: var(--tx-2); pointer-events: none; }
.iso-sub   { font-size: 9px;  font-weight: 600; fill: var(--tx-3); pointer-events: none; }

/* 设备旋转/往复动画 */
.eq-spin { transform-box: fill-box; transform-origin: center; animation: spin 2.6s linear infinite; }
.eq-spin.slow { animation-duration: 6s; }
.eq-idle { animation: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.eq-pulse { transform-box: fill-box; transform-origin: center; animation: eqPulse 1.5s var(--ease) infinite; }

@keyframes eqPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* 火焰动画 */
.flame-live { transform-box: fill-box; transform-origin: bottom center; animation: flameFlick 0.62s var(--ease) infinite alternate; }

@keyframes flameFlick {
  from { transform: scaleY(0.86) scaleX(1.04); opacity: 0.72; }
  to { transform: scaleY(1.1) scaleX(0.95); opacity: 1; }
}

/* =========================== 报警条目 =========================== */
.alarm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 3px;
}

.alarm-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 3px solid var(--tx-4);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
  transition: transform 0.22s var(--ease), background 0.22s var(--ease);
}

.alarm-item:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.05); }

.alarm-item.lv-crit {
  border-left-color: var(--st-crit);
  background: rgba(244, 63, 94, 0.12);
}
.alarm-item.lv-alarm {
  border-left-color: var(--st-alarm);
  background: rgba(244, 63, 94, 0.07);
}
.alarm-item.lv-warn {
  border-left-color: var(--st-warn);
  background: rgba(251, 191, 36, 0.07);
}
.alarm-item.acked { opacity: 0.56; }

.alarm-item .ai-b { flex: 1; min-width: 0; }

.alarm-item .ai-t {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.alarm-item .ai-tx {
  font-size: 12px;
  color: var(--tx-2);
  margin-top: 2px;
  line-height: 1.5;
}

.alarm-item .ai-m {
  font-size: 10px;
  color: var(--tx-4);
  margin-top: 3px;
  font-family: "SF Mono", Menlo, monospace;
}

/* 报警弹窗 */
.alarm-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 12, 0.7);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.24s var(--ease) both;
}

.alarm-modal {
  width: min(560px, 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 45, 85, 0.5);
  background: linear-gradient(160deg, #2a0d1c 0%, #14091a 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: modalIn 0.34s var(--ease-out) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.alarm-modal .am-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  background: rgba(255, 45, 85, 0.14);
  border-bottom: 1px solid rgba(255, 45, 85, 0.28);
}

.alarm-modal .am-hd .am-ic {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--st-crit), var(--red-d));
  color: #fff;
  animation: badgePulse 1s ease-in-out infinite;
}
.alarm-modal .am-hd .am-ic svg { width: 18px; height: 18px; }

.alarm-modal .am-bd { padding: 16px 18px; }
.alarm-modal .am-ft {
  display: flex;
  gap: 9px;
  padding: 0 18px 16px;
}

.am-kv {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.14);
  font-size: 12.5px;
}
.am-kv:last-child { border-bottom: none; }
.am-kv .k { width: 74px; flex: none; color: var(--tx-3); font-weight: 600; }
.am-kv .v { flex: 1; color: var(--tx-1); font-weight: 600; }

/* =========================== 加热器控制 =========================== */
.heater-zone {
  padding: 12px 14px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(31, 43, 68, 0.5), rgba(13, 20, 34, 0.6));
  transition: border-color 0.3s var(--ease);
}

.heater-zone.hot { border-color: rgba(255, 122, 53, 0.42); }

.hz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.hz-head .hz-n {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx-1);
  white-space: nowrap;
  flex-shrink: 0;
}

.hz-temp {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber-tx);
}

/* 加热器功率可视化条 */
.hz-bar {
  display: flex;
  gap: 2px;
  height: 22px;
  margin-top: 9px;
  align-items: flex-end;
}

.hz-bar i {
  flex: 1;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.16);
  transition: background 0.25s var(--ease), height 0.35s var(--ease-out);
}

.hz-bar i.on {
  background: linear-gradient(180deg, var(--brand), var(--brand-d));
  box-shadow: 0 0 8px rgba(255, 122, 53, 0.5);
}

/* =========================== 反应器剖面图 =========================== */
.reactor-viz { position: relative; width: 100%; }
.reactor-viz svg { width: 100%; height: auto; display: block; }

/* 反应器设备配色：统一走主题令牌，浅色底上不再出现深色块 */
.rv-nozzle { fill: var(--rx-nozzle); }
.rv-heater { fill: var(--rx-heater); }
.rv-frame  { stroke: var(--rx-rotor); }
.rv-vane   { stroke: var(--rx-rotor-2); }

/* 筒体渐变三段配色随主题切换（CSS 可覆盖 <stop> 的 stop-color） */
#rxBody stop:nth-of-type(1) { stop-color: var(--rx-body-1); }
#rxBody stop:nth-of-type(2) { stop-color: var(--rx-body-2); }
#rxBody stop:nth-of-type(3) { stop-color: var(--rx-body-3); }

.rv-heat { transform-box: fill-box; transform-origin: bottom center; }
.rv-heat.on { animation: flameFlick 0.7s var(--ease) infinite alternate; }

.rv-rotor { transform-box: fill-box; transform-origin: center; }
.rv-rotor.on { animation: spin 7s linear infinite; }

.rv-flow { stroke-dasharray: 8 6; }
.rv-flow.on { animation: flowDash 0.85s linear infinite; }

/* =========================== 状态条 / 提示条 =========================== */
.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.notice i { font-style: normal; }
.notice.ok { color: var(--green-tx); background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.28); }
.notice.warn { color: var(--amber-tx); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); }
.notice.err { color: var(--red-tx); background: rgba(244, 63, 94, 0.11); border-color: rgba(244, 63, 94, 0.32); }
.notice.info { color: var(--cyan-tx); background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.28); }

/* =========================== 空状态 =========================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 18px;
  text-align: center;
  color: var(--tx-4);
  font-size: 12.5px;
}
.empty svg { width: 38px; height: 38px; opacity: 0.42; }

/* =========================== 图例 =========================== */
.legend {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--tx-3);
}
.legend .lg {
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* =========================== 响应式 =========================== */
@media (max-width: 1280px) {
  .cam-wall.n16 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cam-wall.n25 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cam-wall.n9, .cam-wall.n16 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cam-wall.n25 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cam-wall.n4, .cam-wall.n9, .cam-wall.n16, .cam-wall.n25 { grid-template-columns: minmax(0, 1fr); }
  .sensor-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 7px; padding: 8px 9px; }
  .mc-metrics { grid-template-columns: minmax(0, 1fr); }
}