:root {
  --screen-width: 2564;
  --screen-height: 1608;
  --panel-bg: rgba(5, 17, 31, 0.88);
  --panel-border: rgba(77, 196, 255, 0.34);
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --text-main: #d7f5ff;
  --text-muted: rgba(215, 245, 255, 0.66);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, rgba(21, 87, 126, 0.28), transparent 45%),
    linear-gradient(180deg, #07101d 0%, #040a14 100%);
  color: var(--text-main);
  font-family:
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

body.is-fullscreen .control-panel {
  display: none;
}

button,
input {
  font: inherit;
}

.app-shell {
  position: relative;
  min-height: 100vh;
}

.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.screen-stage {
  position: relative;
  overflow: visible;
}

.screen-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--screen-width) * 1px);
  height: calc(var(--screen-height) * 1px);
  transform-origin: center center;
  filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.5));
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 72%, rgba(22, 74, 118, 0.24), transparent 36%),
    linear-gradient(180deg, #071322 0%, #06111f 48%, #030914 100%);
}

.reference-layer,
.fixed-shell-layer,
.map-layer,
.screen__component-layer {
  position: absolute;
  inset: 0;
}

.reference-layer {
  z-index: 2;
  display: none;
}

.fixed-shell-layer {
  z-index: 4;
  pointer-events: none;
  display: block;
}

.fixed-shell-layer .info-card,
.fixed-shell-layer .duty-card {
  position: absolute;
}

.fixed-shell-layer__patch {
  position: absolute;
  display: block;
  pointer-events: none;
}

.fixed-shell-layer__mask {
  position: absolute;
  border-radius: 10px;
  background: rgba(8, 23, 40, 0.995);
  pointer-events: none;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(76, 182, 255, 0.16),
    inset 0 0 100px rgba(0, 0, 0, 0.16);
}

.screen.state-warning {
  background:
    radial-gradient(circle at 50% 78%, rgba(29, 102, 148, 0.36), transparent 40%),
    linear-gradient(180deg, #0a1a28 0%, #06111f 44%, #041019 100%);
}

.screen.state-danger {
  background:
    radial-gradient(circle at 50% 78%, rgba(107, 25, 18, 0.24), transparent 38%),
    linear-gradient(180deg, #0a1722 0%, #07111b 42%, #040b13 100%);
}

.map-layer {
  overflow: hidden;
  opacity: 1;
}

#amapContainer {
  width: 100%;
  height: 100%;
  background: #06111f;
  filter: brightness(1.05) saturate(1.1) contrast(1.05)
          drop-shadow(0 0 2px rgba(87, 213, 255, 0.35));
}

.map-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(10, 50, 140, 0.35) 0%, rgba(3, 15, 50, 0.55) 85%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

.map-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(4, 10, 20, 0.35) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ── HUD 科技感叠层 ── */

/* 暗角晕染 */
.map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 38%,
    rgba(2, 8, 22, 0.38) 68%,
    rgba(2, 8, 22, 0.65) 100%);
}


/* HUD 坐标显示 */
.map-hud-coord {
  position: absolute;
  bottom: 12px;
  left: 14px;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.map-hud-coord__item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.2;
}
.map-hud-coord__lbl {
  color: rgba(0, 200, 255, 0.55);
  font-size: 9px;
  letter-spacing: 0.08em;
  min-width: 28px;
}
.map-hud-coord__val {
  color: rgba(0, 220, 255, 0.85);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(0, 220, 255, 0.6);
}

/* 网格扫描线 */
.map-hud-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background-image:
    linear-gradient(rgba(0, 200, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}


/* HUD 四角框 */
.map-hud-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.map-hud-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(0, 220, 255, 0.75);
  border-style: solid;
  animation: corner-pulse 3s ease-in-out infinite;
}

.map-hud-corner--tl { top: 8px;    left: 8px;    border-width: 2px 0 0 2px; }
.map-hud-corner--tr { top: 8px;    right: 8px;   border-width: 2px 2px 0 0; animation-delay: 0.75s; }
.map-hud-corner--bl { bottom: 8px; left: 8px;    border-width: 0 0 2px 2px; animation-delay: 1.5s; }
.map-hud-corner--br { bottom: 8px; right: 8px;   border-width: 0 2px 2px 0; animation-delay: 2.25s; }

@keyframes corner-pulse {
  0%, 100% { opacity: 0.75; box-shadow: 0 0 4px rgba(0, 220, 255, 0.4); }
  50%       { opacity: 1;    box-shadow: 0 0 10px rgba(0, 220, 255, 0.8); }
}

/* 地图外框青色辉光 */
.map-layer {
  box-shadow: inset 0 0 30px rgba(0, 180, 255, 0.12);
}

.map-canvas {
  position: absolute;
  inset: 80px 0 90px;
  transform-origin: center center;
  transition: transform 320ms ease, filter 320ms ease;
}

.screen.state-normal .map-canvas {
  transform: scale(1);
}

.screen.state-warning .map-canvas,
.screen.state-danger .map-canvas {
  transform: perspective(1400px) rotateX(60deg) scale(1.32) translateY(150px);
  filter: saturate(1.15) brightness(1.08);
}

.map-water {
  position: absolute;
  inset: 68% -8% -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(40, 127, 173, 0.48), rgba(7, 34, 54, 0.12) 48%, transparent 72%);
  filter: blur(10px);
}

.map-district {
  position: absolute;
  border-radius: 12px;
  background: rgba(28, 60, 92, 0.34);
  border: 1px solid rgba(65, 107, 141, 0.26);
  box-shadow: inset 0 0 32px rgba(9, 18, 32, 0.28);
}

.map-road {
  position: absolute;
  border-radius: 999px;
  transform-origin: left center;
}

.map-road--primary {
  height: 9px;
  background:
    linear-gradient(90deg, rgba(147, 110, 33, 0.22), rgba(255, 178, 61, 0.82), rgba(161, 118, 24, 0.2));
  box-shadow: 0 0 18px rgba(248, 177, 41, 0.18);
}

.map-road--secondary {
  height: 5px;
  background:
    linear-gradient(90deg, rgba(75, 143, 221, 0.1), rgba(79, 171, 255, 0.54), rgba(75, 143, 221, 0.08));
  box-shadow: 0 0 12px rgba(70, 177, 255, 0.14);
}

.map-road--ring {
  border: 4px solid rgba(82, 174, 255, 0.6);
  background: transparent;
  box-shadow: 0 0 18px rgba(67, 181, 255, 0.14);
}

.map-grid-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(51, 126, 181, 0.2), transparent);
}

.map-grid-line--v {
  width: 1px;
  height: 100%;
}

.map-grid-line--h {
  width: 100%;
  height: 1px;
}

.map-label {
  position: absolute;
  color: rgba(24, 210, 227, 0.82);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 16px rgba(4, 166, 212, 0.2);
}

.screen__masks,
.header-layer,
.overview-layer,
.duty-layer,
.top-stats,
.unit-panel,
.message-layer,
.ai-notification-layer,
.alert-queue-layer,
.leader-lines-layer,
.marker-layer,
.bottom-metrics {
  position: absolute;
  inset: 0;
}

.screen__component-layer {
  opacity: 1;
  pointer-events: none;
  z-index: 5;
}

.screen__masks {
  z-index: 6;
}

.header-layer {
  z-index: 7;
}

.overview-layer,
.duty-layer,
.top-stats {
  z-index: 8;
}

.message-layer,
.ai-notification-layer,
.alert-queue-layer,
.leader-lines-layer,
.marker-layer,
.bottom-metrics {
  z-index: 7;
}

.header-layer,
.overview-layer,
.duty-layer,
.top-stats,
.message-layer,
.ai-notification-layer,
.alert-queue-layer,
.leader-lines-layer,
.marker-layer,
.bottom-metrics {
  pointer-events: none;
}

.header-layer > *,
.overview-layer > *,
.duty-layer > *,
.top-stats > *,
.message-layer > *,
.alert-layer > *,
.ai-notification-layer > *,
.alert-queue-layer > *,
.marker-layer > *,
.bottom-metrics > * {
  pointer-events: auto;
}

.mask {
  position: absolute;
  background:
    linear-gradient(180deg, rgba(4, 10, 17, 0.92), rgba(4, 10, 17, 0.7));
  border: 1px solid rgba(48, 98, 125, 0.28);
  border-radius: 18px;
  box-shadow: inset 0 0 36px rgba(4, 12, 22, 0.8);
}

.header-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 170px;
  background: url("./1_slices/1_slices/标题.png") center top/100% 100% no-repeat;
}

.header-bar__location,
.header-bar__timebox,
.header-bar__weather {
  position: absolute;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(167, 240, 255, 0.78);
  font-size: 20px;
  font-weight: 700;
}

.header-bar__location {
  left: 24px;
  top: calc(50% - 40px);
  transform: translateY(-50%);
  font-size: 26px;
}

.header-bar__weather {
  right: 280px;
  top: 28px;
}

.header-bar__title {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  color: #bdf6ff;
  font-size: 63px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 22px rgba(88, 218, 255, 0.42),
    0 0 48px rgba(43, 155, 255, 0.24);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header-bar__weather-icon {
  width: 34px;
  height: 33px;
}

.header-bar__time {
  position: absolute;
  top: 20px;
  right: 550px;
  color: #79d9ff;
  font-size: 33px;
  font-weight: 800;
}

.header-bar__date {
  position: absolute;
  top: 28px;
  right: 380px;
  color: rgba(173, 231, 255, 0.76);
  font-size: 26px;
  font-weight: 800;
}

.header-bar__temp {
  color: rgba(173, 231, 255, 0.76);
  font-size: 20px;
}

.header-bar__sms-btn,
.header-bar__link-btn {
  font-family: var(--term-mono, monospace);
  font-size: 18px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(215,245,255,0.25);
  color: rgba(215,245,255,0.65);
  cursor: pointer;
  border-radius: 3px;
  transition: all 120ms ease;
}
.header-bar__sms-btn:hover,
.header-bar__link-btn:hover {
  border-color: rgba(215,245,255,0.6);
  color: rgba(215,245,255,1);
}

/* 角落容器：底左（连接状态+数据来源）/ 底右（快捷按钮） */
.corner-bottom-left,
.corner-bottom-right {
  position: absolute;
  bottom: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.corner-bottom-left  { left: 120px; }
.corner-bottom-right { right: 18px; }

/* S6 通用浮层面板 */
.s6-panel {
  position: absolute;
  bottom: 70px;
  right: 20px;
  width: 520px;
  max-height: 460px;
  background: rgba(4,18,35,0.96);
  border: 1px solid rgba(0,220,255,0.3);
  border-radius: 4px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  font-family: var(--term-mono, monospace);
  box-shadow: 0 0 20px rgba(0,180,255,0.15);
}
.s6-panel--sms  { right: 20px; }
.s6-panel--link { right: 20px; width: 600px; }
.s6-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.s6-panel__title { font-size: 18px; color: rgba(215,245,255,0.7); }
.s6-panel__close {
  background: none;
  border: none;
  color: rgba(215,245,255,0.5);
  font-size: 18px;
  cursor: pointer;
}
.s6-panel__close:hover { color: rgba(215,245,255,1); }
.s6-panel__body {
  overflow-y: auto;
  padding: 10px 12px;
  flex: 1;
  font-size: 17px;
  color: rgba(215,245,255,0.75);
}
.s6-panel__loading { color: rgba(215,245,255,0.4); }
/* 短信记录列表 */
.s6-sms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.s6-sms-item { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.07); }
.s6-sms-item__status { width: 20px; text-align: center; font-weight: bold; }
.s6-sms-item--success .s6-sms-item__status { color: #4ecb71; }
.s6-sms-item--failed  .s6-sms-item__status { color: #ff6b6b; }
.s6-sms-item--dead    .s6-sms-item__status { color: #ff4d4d; }
.s6-sms-item--pending .s6-sms-item__status { color: #ffa24b; }
.s6-sms-item__phone { width: 130px; color: rgba(215,245,255,0.9); }
.s6-sms-item__role  { width: 80px; color: rgba(215,245,255,0.5); font-size: 15px; }
.s6-sms-item__time  { width: 130px; color: rgba(215,245,255,0.45); font-size: 15px; }
.s6-sms-item__err   { flex: 1; color: #ff9999; font-size: 14px; }
/* 链路节点链 */
.s6-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.s6-chain__node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 70px; }
.s6-chain__dot   { font-size: 22px; }
.s6-chain__label { font-size: 16px; color: rgba(215,245,255,0.75); }
.s6-chain__status { font-size: 13px; }
.s6-chain__arrow { font-size: 22px; color: rgba(215,245,255,0.3); }
.header-bar__user {
  position: absolute;
  top: 28px;
  right: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: rgba(167, 240, 255, 0.78);
  font-size: 26px;
  font-weight: 700;
}

.header-bar__user:hover {
  color: #7ddfff;
}

.header-bar__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(40, 160, 255, 0.6), rgba(20, 100, 180, 0.6));
  border: 1px solid rgba(80, 200, 255, 0.4);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}

.header-bar__username {
  font-size: 26px;
}

.info-card {
  position: absolute;
  width: 320px;
  height: 116px;
  padding: 16px 20px 16px 98px;
  background: url("./1_slices/1_slices/图层 12.png") center/100% 100% no-repeat;
  color: #d9f6ff;
}

.info-card--wide {
  width: 320px;
}

.info-card__icon,
.duty-card__icon {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.info-card__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  color: #fff;
  font-size: 43px;
  font-weight: 800;
  line-height: 1;
}

.info-card__unit {
  font-size: 22px;
  color: #c3f4ff;
}

.info-card__label {
  margin-top: 8px;
  color: rgba(116, 229, 255, 0.9);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.duty-card {
  position: absolute;
  width: 320px;
  height: 116px;
  padding: 20px 16px 16px 98px;
  background: url("./1_slices/1_slices/图层 12.png") center/100% 100% no-repeat;
  color: #dff9ff;
}

.duty-card--wide {
  width: 320px;
}

.duty-card__title {
  margin-top: 4px;
  color: #f1fcff;
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duty-card__subtitle {
  margin-top: 6px;
  color: rgba(86, 232, 255, 0.86);
  font-size: 22px;
  font-weight: 700;
}

.top-stat-card {
  position: absolute;
  width: 320px;
  height: 112px;
  padding: 16px 20px 16px 98px;
  background: url("./1_slices/1_slices/图层 12.png") center/100% 100% no-repeat;
  isolation: isolate;
}

.top-stat-card::before,
.top-stat-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 4px;
}

/* 四角 L 型角标（所有卡通用）*/
.top-stat-card::after {
  inset: 3px;
  background:
    linear-gradient(currentColor, currentColor) top left / 10px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 1.4px 10px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 10px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 1.4px 10px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 10px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 1.4px 10px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 10px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 1.4px 10px no-repeat;
  opacity: 0.75;
  z-index: 2;
}

/* ===== 黄色：与橙/红同样的顶底流动，只变颜色 ===== */
.top-stat-card--yellow {
  color: #f9e955;
  text-shadow: 0 0 12px rgba(236, 220, 58, 0.36);
}

.top-stat-card--yellow {
  border: 1px solid rgba(249, 233, 85, 0.55);
  border-radius: 4px;
}

.top-stat-card--yellow.has-alerts::before {
  inset: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent, #fff6a0, transparent) top / 45% 1.6px no-repeat,
    linear-gradient(90deg, transparent, #fff6a0, transparent) bottom / 45% 1.6px no-repeat;
  filter: drop-shadow(0 0 3px #f9e955);
  animation: tsFlowHorizontal 2s linear infinite;
  z-index: 1;
}

/* ===== 橙色：流动扫光 ===== */
.top-stat-card--orange {
  color: #ffa24b;
  text-shadow: 0 0 12px rgba(255, 132, 56, 0.4);
  box-shadow: 0 0 10px rgba(255, 122, 51, 0.3);
}

.top-stat-card--orange {
  border: 1px solid rgba(255, 162, 75, 0.55);
  border-radius: 4px;
}

.top-stat-card--orange.has-alerts::before {
  inset: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent, #ffd28a, transparent) top / 45% 1.6px no-repeat,
    linear-gradient(90deg, transparent, #ffd28a, transparent) bottom / 45% 1.6px no-repeat;
  filter: drop-shadow(0 0 3px #ff7a33);
  animation: tsFlowHorizontal 2s linear infinite;
  z-index: 1;
}

.top-stat-card--orange.has-alerts::after {
  animation: tsCornerBlink 1.2s ease-in-out infinite;
}

/* ===== 红色：与黄/橙同样的顶底流动，只变颜色 ===== */
.top-stat-card--red {
  color: #ff534f;
  text-shadow: 0 0 14px rgba(255, 75, 75, 0.5);
  border: 1px solid rgba(255, 83, 79, 0.55);
  border-radius: 4px;
}

.top-stat-card--red.has-alerts::before {
  inset: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent, #ffb6b6, transparent) top / 45% 1.6px no-repeat,
    linear-gradient(90deg, transparent, #ffb6b6, transparent) bottom / 45% 1.6px no-repeat;
  filter: drop-shadow(0 0 3px #ff0055);
  animation: tsFlowHorizontal 2s linear infinite;
  z-index: 1;
}

.top-stat-card--red.has-alerts::after {
  animation: tsCornerFlash 0.5s ease-in-out infinite;
}

.top-stat-card.is-current {
  transform: scale(1.05);
  transition: transform 200ms ease;
}

@keyframes tsBreathYellow {
  0%, 100% { text-shadow: 0 0 8px rgba(236, 220, 58, 0.25); }
  50% { text-shadow: 0 0 16px rgba(236, 220, 58, 0.65); }
}

@keyframes tsBreathBorder {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes tsFlowHorizontal {
  0% {
    background-position: -45% top, 145% bottom;
  }
  100% {
    background-position: 145% top, -45% bottom;
  }
}

@keyframes tsFlowFourEdges {
  0% {
    background-position: -45% top, 145% bottom, left 145%, right -45%;
  }
  100% {
    background-position: 145% top, -45% bottom, left -45%, right 145%;
  }
}

@keyframes tsCornerBlink {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes tsCornerFlash {
  0%, 70%, 100% { opacity: 0.35; }
  20%, 50% { opacity: 1; }
}

@keyframes tsHeartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.012); }
  60% { transform: scale(1); }
}

@keyframes tsHeartbeatScale {
  0%, 100% { transform: scale(1.05); }
  30% { transform: scale(1.065); }
  60% { transform: scale(1.05); }
}

.top-stat-card__icon {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: radial-gradient(circle, rgba(255, 198, 82, 0.24), rgba(255, 124, 0, 0.06));
  box-shadow: inset 0 0 20px rgba(255, 206, 120, 0.14);
}

.top-stat-card__label {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.top-stat-card__value {
  margin-top: 4px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.top-stat-card__unit {
  margin-left: 6px;
  font-size: 22px;
}

/* 单位列表面板：默认收起，点击「当前接入单位」展开 */
.unit-panel {
  pointer-events: none;
}
.unit-panel.is-open {
  pointer-events: auto;
}
.unit-panel .unit-panel__shell {
  opacity: 0;
  transform: translateY(-12px) scaleY(0.96);
  transform-origin: top left;
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.unit-panel.is-open .unit-panel__shell {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.unit-panel__shell {
  position: absolute;
  left: 24px;
  top: 180px;
  width: 472px;
  height: 876px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(55, 182, 255, 0.36);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(5, 17, 27, 0.9), rgba(2, 9, 18, 0.86)),
    radial-gradient(circle at top, rgba(24, 132, 197, 0.18), transparent 38%);
  box-shadow:
    inset 0 0 0 1px rgba(94, 212, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.unit-panel__shell::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(82, 219, 255, 0.18);
  border-radius: 10px;
  pointer-events: none;
}

.unit-panel__title {
  margin-bottom: 12px;
  font-size: 28px;
  font-weight: 800;
  color: #97f3ff;
}

.unit-panel__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(59, 183, 255, 0.32);
  border-radius: 6px;
  background: rgba(3, 18, 33, 0.95);
}

.unit-panel__search-icon {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.unit-panel__search input {
  width: 100%;
  color: #bdeeff;
  background: transparent;
  border: 0;
  outline: none;
}

.unit-panel__search-action {
  flex: none;
  color: #23d8ff;
  font-size: 19px;
  font-weight: 700;
}

.unit-panel__header,
.unit-panel__row {
  display: grid;
  grid-template-columns: 22px 44px 1fr 96px;
  align-items: center;
}

.unit-panel__header {
  height: 52px;
  margin-top: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(67, 168, 214, 0.22);
  color: rgba(133, 200, 230, 0.8);
  font-size: 19px;
  font-weight: 700;
}

.unit-panel__body {
  height: 670px;
  overflow-y: auto;
  overflow-x: hidden;
}
.unit-panel__body::-webkit-scrollbar {
  width: 4px;
}
.unit-panel__body::-webkit-scrollbar-track {
  background: rgba(0, 30, 60, 0.4);
}
.unit-panel__body::-webkit-scrollbar-thumb {
  background: rgba(76, 182, 255, 0.35);
  border-radius: 2px;
}
.unit-panel__body::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 182, 255, 0.6);
}

.unit-panel__row {
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(34, 92, 121, 0.18);
  color: rgba(214, 243, 255, 0.88);
  font-size: 19px;
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}

.unit-panel__row:nth-child(odd) {
  background: rgba(8, 27, 41, 0.35);
}

.unit-panel__row.is-active {
  background: linear-gradient(90deg, rgba(14, 79, 122, 0.78), rgba(7, 31, 52, 0.6));
  box-shadow: inset 3px 0 0 rgba(112, 237, 255, 0.88);
}

.unit-panel__row.is-dimmed {
  opacity: 0.45;
}

.unit-panel__empty {
  display: grid;
  place-items: center;
  height: 120px;
  color: rgba(146, 205, 229, 0.6);
  font-size: 19px;
}

.unit-panel__index {
  color: #7ddfff;
  font-variant-numeric: tabular-nums;
}

.unit-panel__company,
.unit-panel__location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-panel__location {
  color: rgba(160, 215, 240, 0.72);
}

.unit-panel__third-party-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
  color: rgba(125, 223, 255, 0.55);
  border: 1px solid rgba(125, 223, 255, 0.25);
  border-radius: 2px;
  vertical-align: middle;
  white-space: nowrap;
}

/* 单位列表告警等级圆点 */
.unit-panel__alarm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: rgba(100, 140, 160, 0.3);
  border: 1px solid rgba(100, 140, 160, 0.25);
}

.unit-panel__alarm-dot--yellow {
  background: rgba(255, 213, 60, 0.85);
  border-color: rgba(255, 213, 60, 0.5);
  box-shadow: 0 0 6px rgba(255, 213, 60, 0.55);
}

.unit-panel__alarm-dot--orange {
  background: rgba(255, 140, 30, 0.9);
  border-color: rgba(255, 140, 30, 0.5);
  box-shadow: 0 0 6px rgba(255, 140, 30, 0.6);
  animation: dot-breathe-orange 2.4s ease-in-out infinite;
}

@keyframes dot-breathe-orange {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 140, 30, 0.5); }
  50%       { box-shadow: 0 0 12px rgba(255, 140, 30, 1), 0 0 20px rgba(255, 140, 30, 0.45); }
}

.unit-panel__alarm-dot--red {
  background: rgba(255, 60, 60, 0.95);
  border-color: rgba(255, 80, 60, 0.6);
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.8);
  animation: dot-pulse-red 1.2s ease-in-out infinite;
}

@keyframes dot-pulse-red {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 50, 50, 0.7); }
  50%       { box-shadow: 0 0 14px rgba(255, 50, 50, 1), 0 0 22px rgba(255, 50, 50, 0.4); }
}

.unit-panel__alarm-dot--none {
  background: rgba(80, 110, 130, 0.25);
  border-color: rgba(80, 110, 130, 0.2);
}

/* header 中的占位列对齐圆点列 */
.unit-panel__header-dot {
  width: 10px;
}

.message-card {
  position: absolute;
  width: 500px;
  padding: 24px 26px 20px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 18, 28, 0.94), rgba(3, 10, 18, 0.92));
  border: 1px solid rgba(100, 160, 40, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.message-card--yellow {
  border-color: rgba(228, 194, 61, 0.3);
}

.message-card--orange {
  border-color: rgba(255, 145, 46, 0.3);
}

.message-card--red {
  border-color: rgba(255, 74, 74, 0.3);
}

.message-card__title {
  color: #e7d74d;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.message-card--orange .message-card__title {
  color: #ff9e40;
}

.message-card--red .message-card__title {
  color: #ff6161;
}

.message-card__meta {
  margin-top: 8px;
  color: rgba(165, 212, 220, 0.72);
  font-size: 19px;
}

.message-card__bubbles {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.message-card__bubble {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 19px;
  line-height: 1.4;
}

.message-card--yellow .message-card__bubble {
  color: rgba(255, 210, 70, 0.92);
  background: linear-gradient(90deg, rgba(139, 108, 18, 0.55), rgba(106, 86, 17, 0.28));
}

.message-card--orange .message-card__bubble {
  color: rgba(255, 173, 83, 0.92);
  background: linear-gradient(90deg, rgba(164, 78, 18, 0.55), rgba(123, 63, 22, 0.25));
}

.message-card--red .message-card__bubble {
  color: rgba(255, 120, 120, 0.92);
  background: linear-gradient(90deg, rgba(143, 29, 29, 0.55), rgba(120, 20, 20, 0.25));
}

.message-card__footer {
  margin-top: 10px;
  color: rgba(214, 243, 255, 0.6);
  font-size: 17px;
}

.message-card.is-active {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 155, 0.12),
    0 0 24px rgba(255, 179, 74, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.3);
}

.message-card.is-dimmed {
  opacity: 0.36;
}

.alert-card {
  position: absolute;
  width: 660px;
  height: 520px;
  padding: 26px 28px 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.alert-card--yellow {
  background-image: url("./1_slices/1_slices/tc-bg.png");
  color: #f0d928;
}

.alert-card--orange {
  background-image: url("./1_slices/1_slices/tc-bg.png");
  color: #ff8c33;
  filter: hue-rotate(15deg);
}

.alert-card--red {
  background-image: url("./1_slices/1_slices/tc-红色.png");
  color: #ff3b38;
}

.alert-card__title {
  position: absolute;
  top: 22px;
  left: 32px;
  right: 32px;
  height: 44px;
  display: flex;
  align-items: center;
  color: inherit;
  font-size: 23px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-card__content {
  position: absolute;
  inset: 76px 30px 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}

.alert-card__section-title {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 800;
  color: inherit;
}

.alert-card__event-list {
  display: grid;
  gap: 5px;
}

.alert-card__event-item {
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
  font-size: 19px;
}

.alert-card__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 10px;
}

.alert-card__summary-item {
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
}

.alert-card__summary-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
}

.alert-card__summary-value {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 700;
  word-break: break-all;
}

.alert-card__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.alert-card__tag {
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

.alert-card__monitor {
  margin-top: 8px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  max-width: 180px;
  height: 70px;
}

.alert-card__monitor {
  position: relative;
}

.alert-card__monitor-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.alert-card__monitor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.alert-card__monitor-live {
  font-size: 16px;
  font-weight: 800;
  color: #ff3333;
  animation: liveBlink 1.2s infinite;
}

.alert-card__monitor-time {
  font-size: 16px;
  color: rgba(200, 230, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.alert-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.alert-card__action {
  flex: 1 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.alert-card.is-active {
  transform: translateY(-6px);
  filter: drop-shadow(0 0 24px rgba(255, 197, 66, 0.18));
}

.alert-card.is-dimmed {
  opacity: 0.3;
}

.marker {
  position: absolute;
  width: 56px;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.marker__pin {
  width: 70px;
  height: 130px;
  object-fit: contain;
}

.marker__label {
  min-width: 80px;
  max-width: 200px;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(6, 14, 24, 0.82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}

.marker__label--yellow {
  color: #f0d928;
}

.marker__label--orange {
  color: #ff8c33;
}

.marker__label--red {
  color: #ff4d4a;
}

.marker.is-active {
  transform: translate(-50%, -104%);
  filter: drop-shadow(0 0 18px rgba(255, 207, 87, 0.28));
}

.marker.is-dimmed {
  opacity: 0.34;
}

.metric-card {
  position: absolute;
  width: 258px;
  height: 110px;
  padding: 8px 18px 0;
  background: url("./1_slices/1_slices/组 198.png") center/100% 100% no-repeat;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
}

.metric-card__title {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid rgba(249, 233, 85, 0.55);
  border-radius: 4px;
  color: rgba(255, 246, 160, 0.95);
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(30, 25, 5, 0.55);
}

.metric-card__chart {
  display: none; /* 图表区已移除，保留占位不影响其他引用 */
}

.mc-pulse-a {
  transform-origin: 84px 13px;
  transform-box: fill-box;
  animation: mcPulseA 2.2s ease-out infinite;
}

.mc-pulse-b {
  transform-origin: 84px 13px;
  transform-box: fill-box;
  animation: mcPulseB 2.2s ease-out infinite 0.25s;
}

.mc-warn-scan {
  animation: mcWarnScan 3s linear infinite;
}

@keyframes mcPulseA {
  0% { transform: scale(0.55); opacity: 0.7; }
  80% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes mcPulseB {
  0% { transform: scale(0.65); opacity: 0.9; }
  75% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes mcWarnScan {
  0% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

.metric-card__value {
  margin-top: 10px;
  color: #fff8d0;
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 14px rgba(249, 233, 85, 0.4);
  letter-spacing: 0.02em;
}

/* glowbar 颜色覆盖时用此 class，防止 state 主题色冲突 */
.metric-card__value--glow {
  /* color and text-shadow set inline per-card */
}


/* ========== 三态图表颜色主题（颜色由 SVG 内联，此处只调文字/边框）========== */

.screen.state-warning .metric-card__chart .mc-svg {
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.6));
}
.screen.state-warning .metric-card__value {
  text-shadow: 0 0 14px rgba(255, 170, 60, 0.4);
}
.screen.state-warning .metric-card__title {
  border-color: rgba(255, 170, 60, 0.55);
  color: rgba(255, 210, 140, 0.95);
}

.screen.state-danger .metric-card__chart .mc-svg {
  filter: drop-shadow(0 0 7px rgba(255, 60, 90, 0.65));
}
.screen.state-danger .metric-card__value:not(.metric-card__value--glow) {
  color: #fff3f3;
  text-shadow: 0 0 14px rgba(255, 60, 90, 0.55);
  animation: mcDangerTextPulse 0.9s ease-in-out infinite;
}
.screen.state-danger .metric-card__title {
  border-color: rgba(255, 80, 110, 0.65);
  color: rgba(255, 200, 210, 0.95);
  background: rgba(60, 10, 18, 0.65);
}

/* ECG 心电波滚动 */
.mc-ecg-scroll {
  animation: mcEcgScroll 1.1s linear infinite;
}
.mc-ecg-cursor {
  animation: mcEcgCursor 1.1s linear infinite;
}

/* Radar 雷达扫描 */
.mc-radar-sweep {
  animation: mcRadarSweep 1.4s linear infinite;
}
.mc-radar-target {
  animation: mcTargetBlink 0.6s ease-in-out infinite;
}

/* Alarm 告警闪烁 */
.mc-alarm-icon {
  animation: mcAlarmIcon 0.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.mc-alarm-pulse {
  animation: mcAlarmPulse 0.8s ease-in-out infinite;
}
.mc-alarm-scan {
  animation: mcAlarmScan 0.9s linear infinite;
}
.mc-alarm-end {
  animation: mcTargetBlink 0.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Shockwave 冲击波 */
.mc-shock-a, .mc-shock-b, .mc-shock-c {
  transform-origin: 84px 13px;
  transform-box: fill-box;
  opacity: 0;
}
.mc-shock-a { animation: mcShockwave 1.2s ease-out infinite; }
.mc-shock-b { animation: mcShockwave 1.2s ease-out infinite 0.4s; }
.mc-shock-c { animation: mcShockwave 1.2s ease-out infinite 0.8s; }
.mc-shock-core {
  animation: mcCoreBlink 0.7s ease-in-out infinite;
  transform-origin: 84px 13px;
  transform-box: fill-box;
}

/* Sonar 声呐扇形波 */
.mc-sonar-wave {
  animation: mcSonarPulse 1s ease-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}

@keyframes mcDangerTextPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes mcEcgScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(168px); }
}

@keyframes mcEcgCursor {
  0% { transform: translateX(6px); opacity: 0.3; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(162px); opacity: 0.3; }
}

@keyframes mcRadarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes mcTargetBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes mcAlarmIcon {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  25% { transform: scale(1.15) rotate(-4deg); }
  50% { opacity: 0.55; }
  75% { transform: scale(1.15) rotate(4deg); }
}

@keyframes mcAlarmPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes mcAlarmScan {
  0% { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}

@keyframes mcShockwave {
  0% { transform: scale(0.35); opacity: 0.9; stroke-width: 1.6; }
  80% { transform: scale(1.5); opacity: 0; stroke-width: 0.4; }
  100% { transform: scale(1.5); opacity: 0; stroke-width: 0.4; }
}

@keyframes mcCoreBlink {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

@keyframes mcSonarPulse {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

.control-panel {
  display: none;
}

.control-panel__title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.control-panel__desc {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.5;
}

.state-buttons {
  display: grid;
  gap: 8px;
}

.state-button,
.fullscreen-button {
  min-height: 40px;
  border: 1px solid rgba(73, 202, 255, 0.35);
  border-radius: 10px;
  color: var(--text-main);
  background:
    linear-gradient(180deg, rgba(10, 48, 73, 0.95), rgba(7, 24, 40, 0.95));
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
}

.state-button:hover,
.fullscreen-button:hover {
  transform: translateY(-1px);
  border-color: rgba(98, 228, 255, 0.7);
  box-shadow: 0 0 20px rgba(34, 199, 255, 0.18);
}

.state-button.is-active {
  color: #04101b;
  border-color: rgba(147, 249, 255, 0.95);
  background:
    linear-gradient(180deg, rgba(126, 250, 255, 0.96), rgba(41, 208, 255, 0.92));
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(67, 239, 255, 0.22);
}

.fullscreen-button {
  width: 100%;
  margin-top: 12px;
}

/* === 地区选择器 === */
.header-bar__location {
  cursor: pointer;
  user-select: none;
}

.header-bar__location:hover {
  color: #7ddfff;
}

.region-dropdown {
  position: absolute;
  top: 38px;
  left: 24px;
  display: flex;
  gap: 2px;
  background: rgba(4, 14, 26, 0.98);
  border: 1px solid rgba(55, 182, 255, 0.4);
  border-radius: 8px;
  padding: 8px;
  z-index: 100;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
}

.region-dropdown__col {
  width: 140px;
  max-height: 300px;
  overflow-y: auto;
  border-right: 1px solid rgba(55, 182, 255, 0.15);
  padding-right: 6px;
}

.region-dropdown__col:last-child {
  border-right: none;
  padding-right: 0;
}

.region-dropdown__item {
  padding: 8px 12px;
  color: rgba(180, 230, 255, 0.8);
  font-size: 19px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}

.region-dropdown__item:hover {
  background: rgba(40, 140, 220, 0.2);
  color: #7ddfff;
}

.region-dropdown__item.is-active {
  background: rgba(40, 160, 255, 0.3);
  color: #4dd8ff;
  font-weight: 700;
}

.region-dropdown__header {
  padding: 6px 12px;
  color: rgba(100, 180, 220, 0.6);
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid rgba(55, 182, 255, 0.15);
  margin-bottom: 4px;
}

.region-dropdown__confirm {
  margin-top: 6px;
  padding: 8px 12px;
  color: #4dd8ff;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border-top: 1px solid rgba(55, 182, 255, 0.15);
  border-radius: 4px;
}

.region-dropdown__confirm:hover {
  background: rgba(40, 160, 255, 0.2);
}

/* === 单位下拉列表 === */
.unit-dropdown {
  position: absolute;
  width: 340px;
  max-height: 500px;
  overflow-y: auto;
  background: rgba(4, 14, 26, 0.96);
  border: 1px solid rgba(55, 182, 255, 0.4);
  border-radius: 8px;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.unit-dropdown__item {
  padding: 10px 14px;
  color: rgba(180, 230, 255, 0.85);
  font-size: 19px;
  border-radius: 4px;
  cursor: default;
}

.unit-dropdown__item:nth-child(odd) {
  background: rgba(8, 27, 41, 0.35);
}

.unit-dropdown__item:hover {
  background: rgba(40, 140, 220, 0.25);
  color: #7ddfff;
}

/* === 弹窗遮罩 === */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 16, 0.7);
  display: grid;
  place-items: center;
  z-index: 30;
  backdrop-filter: blur(4px);
}

/* === 单位列表弹窗 === */
.modal-panel {
  width: 1400px;
  max-height: 1100px;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0.98), rgba(3, 12, 24, 0.98));
  border: 1px solid rgba(55, 182, 255, 0.35);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-panel__title {
  font-size: 31px;
  font-weight: 800;
  color: #97f3ff;
}

.modal-panel__close {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(55, 182, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 30, 50, 0.8);
  color: #7ddfff;
  font-size: 22px;
  cursor: pointer;
}

.modal-panel__close:hover {
  background: rgba(255, 80, 80, 0.3);
  border-color: rgba(255, 80, 80, 0.5);
  color: #ff6b6b;
}

.modal-panel__search {
  margin-bottom: 16px;
}

.modal-panel__search input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(55, 182, 255, 0.3);
  border-radius: 6px;
  background: rgba(3, 18, 33, 0.95);
  color: #bdeeff;
  font-size: 22px;
  outline: none;
}

.modal-panel__table-header {
  display: grid;
  grid-template-columns: 80px 1fr 200px 100px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(55, 182, 255, 0.2);
  color: rgba(133, 200, 230, 0.8);
  font-size: 20px;
  font-weight: 700;
}

.modal-panel__body {
  max-height: 700px;
  overflow-y: auto;
}

.modal-unit-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px 100px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(34, 92, 121, 0.18);
  color: rgba(214, 243, 255, 0.88);
  font-size: 20px;
}

.modal-unit-row:nth-child(odd) {
  background: rgba(8, 27, 41, 0.35);
}

.modal-unit-row__index {
  color: #7ddfff;
}

.modal-unit-row__status--online {
  color: #4dff88;
}

.modal-unit-row__status--offline {
  color: #ff5555;
}

/* === 确认对话框 === */
.modal-confirm {
  width: 600px;
  padding: 40px;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0.98), rgba(3, 12, 24, 0.98));
  border: 1px solid rgba(55, 182, 255, 0.35);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-confirm__title {
  font-size: 30px;
  font-weight: 800;
  color: #97f3ff;
  margin-bottom: 16px;
}

.modal-confirm__text {
  font-size: 22px;
  color: rgba(180, 230, 255, 0.8);
  margin-bottom: 28px;
  line-height: 1.5;
}

.modal-confirm__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.modal-confirm__btn {
  min-width: 180px;
  height: 56px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.modal-confirm__btn--cancel {
  border: 1px solid rgba(55, 182, 255, 0.3);
  background: rgba(10, 30, 50, 0.8);
  color: #7ddfff;
}

.modal-confirm__btn--ok {
  border: 1px solid rgba(55, 220, 255, 0.6);
  background: linear-gradient(180deg, rgba(30, 140, 220, 0.8), rgba(20, 100, 180, 0.8));
  color: #fff;
}

.modal-confirm__btn--ok:hover {
  background: linear-gradient(180deg, rgba(40, 160, 240, 0.9), rgba(30, 120, 200, 0.9));
}
.modal-confirm__btn--ok:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === 闭环处置 Modal 扩展 === */
.modal-confirm--close {
  width: 660px;
  text-align: left;
}
.modal-confirm--close .modal-confirm__title {
  text-align: center;
}
.modal-confirm__meta {
  text-align: center;
  font-size: 19px;
  margin-bottom: 16px;
  margin-top: -8px;
}
.close-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.close-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
  background: rgba(255,255,255,0.03);
}
.close-option:hover {
  border-color: var(--opt-color, #56c0f8);
  background: rgba(255,255,255,0.06);
}
.close-option.is-selected {
  border-color: var(--opt-color, #56c0f8);
  background: color-mix(in srgb, var(--opt-color, #56c0f8) 12%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--opt-color, #56c0f8) 30%, transparent);
}
.close-option__check {
  font-size: 22px;
  color: var(--opt-color, #56c0f8);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.close-option__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.close-option__label {
  font-size: 20px;
  font-weight: 700;
  color: var(--opt-color, #56c0f8);
}
.close-option__sub {
  font-size: 17px;
  color: rgba(180,230,255,0.55);
}
.modal-confirm__hint {
  text-align: center;
}

/* === 闭环按钮（终端风格，橙色） === */
.term-btn--close {
  margin-top: 6px;
  --ai-color: #ffa24b;
  --ai-glow: rgba(255, 162, 75, 0.08);
}
.term-btn--close .term-btn__arrow {
  color: #ffa24b;
}

/* === hover效果 === */
.info-card:hover {
  transform: scale(1.02);
  transition: transform 150ms ease;
}

@media (max-width: 900px) {
  .viewport {
    padding: 10px;
  }
}

/* ============================================================ */
/* AI 通知卡 + 圆锥体 + 引导线 + 告警队列                       */
/* ============================================================ */

.ai-notification-layer { z-index: 9; }
.alert-queue-layer { z-index: 9; }
.leader-lines-layer { z-index: 8; pointer-events: none; }

/* -------- AI 机器人头像 -------- */
.ai-robot {
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}
.ai-robot__body {
  transform-origin: 12px 13px;
  transform-box: fill-box;
  animation: aiRobotBreath 2.5s ease-in-out infinite;
}
.ai-robot__eye {
  animation: aiRobotBlink 3.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.ai-robot__eye--right { animation-delay: 0.05s; }
@keyframes aiRobotBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes aiRobotBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 97%      { transform: scaleY(0.1); }
}

/* -------- 圆锥体定位标记 -------- */
.cone-marker-wrap {
  position: relative;
  transform: none;
}
.cone-marker {
  position: relative;
  filter: drop-shadow(0 0 8px var(--cone-color));
  animation: coneFloat 2.4s ease-in-out infinite;
}
.cone-marker__body { transform-origin: 30px 55px; transform-box: fill-box; }
.cone-marker__ring ellipse {
  transform-origin: 30px 62px;
  transform-box: fill-box;
  animation: coneRing 2.4s ease-out infinite;
}
.cone-marker__ring ellipse:nth-child(2) { animation-delay: 0.7s; }
.cone-marker__label {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 2px 8px;
  background: rgba(10, 20, 32, 0.85);
  border: 1px solid var(--cone-color, #F9E955);
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  border-radius: 2px;
}
.cone-marker--yellow + .cone-marker__label,
.cone-marker__label--yellow { border-color: #F9E955; color: #F9E955; }
.cone-marker--orange + .cone-marker__label,
.cone-marker__label--orange { border-color: #FFA24B; color: #FFA24B; }
.cone-marker--red + .cone-marker__label,
.cone-marker__label--red { border-color: #FF3D3D; color: #FF3D3D; }
@keyframes coneFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes coneRing {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* -------- AI 通知卡 -------- */
/* ============================================
   AI 对话卡（终端 + 对话气泡 · 方向 A）
   ============================================ */
.ai-card {
  --term-mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
  position: absolute;
  width: 520px;
  padding: 20px 22px 22px;
  background:
    linear-gradient(180deg, rgba(8, 16, 28, 0.88) 0%, rgba(4, 10, 20, 0.88) 100%);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 14px;
  border: none;
  color: #dfeef9;
  font-size: 19px;
  line-height: 1.55;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ai-color) 22%, transparent),
    0 0 40px var(--ai-glow, rgba(249, 233, 85, 0.25)),
    0 8px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: aiCardEnter 400ms ease-out;
}
/* 顶部微亮光晕（取代实线扫描线）*/
.ai-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ai-color), transparent);
  opacity: 0.7;
  filter: blur(0.5px);
}
/* 底部对角高光（气泡感）*/
.ai-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(
    circle at var(--hl-x, 20%) 100%,
    color-mix(in srgb, var(--ai-color) 8%, transparent) 0%,
    transparent 55%
  );
  pointer-events: none;
}
.ai-card--cone-bl { --hl-x: 15%; }
.ai-card--cone-br { --hl-x: 85%; }
.ai-card--yellow { --ai-color: #F9E955; --ai-glow: rgba(249, 233, 85, 0.35); }
.ai-card--orange { --ai-color: #FFA24B; --ai-glow: rgba(255, 162, 75, 0.4); }
.ai-card--red    { --ai-color: #FF3D3D; --ai-glow: rgba(255, 61, 61, 0.45); }
@keyframes aiCardEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -------- 终端头部 -------- */
.term-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--term-mono);
  font-size: 17px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  color: rgba(223, 238, 249, 0.7);
  flex-wrap: wrap;
}
.term-head__title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ai-color);
  font-weight: 700;
}
.term-head__robot { display: inline-flex; align-items: center; line-height: 0; }
.term-head__name { letter-spacing: 0.06em; }
.term-head__session {
  color: rgba(223, 238, 249, 0.5);
}
.term-head__status {
  margin-left: auto;
  color: var(--ai-color);
}
.term-head__status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--ai-color);
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--ai-color);
  animation: termStatusDot 1.2s ease-in-out infinite;
}
@keyframes termStatusDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}

/* -------- 元数据块 -------- */
.term-meta {
  font-family: var(--term-mono);
  font-size: 18px;
  line-height: 1.7;
  padding: 4px 6px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--ai-color);
}
.term-meta__line {
  color: rgba(223, 238, 249, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-meta__line span { color: #fff; font-weight: 600; }
.term-meta__bar {
  color: var(--ai-color) !important;
  letter-spacing: -1px;
  text-shadow: 0 0 6px var(--ai-glow);
}

/* -------- 视频折叠区 -------- */
.term-video {
  margin-bottom: 8px;
}
.term-video__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(223, 238, 249, 0.65);
  font-family: var(--term-mono);
  font-size: 17px;
  cursor: pointer;
  transition: all 150ms ease;
}
.term-video__toggle:hover {
  border-color: var(--ai-color);
  color: var(--ai-color);
  background: rgba(255, 255, 255, 0.06);
}
.term-video__toggle-icon {
  color: var(--ai-color);
  width: 10px;
  display: inline-block;
}
.term-video__toggle-state {
  margin-left: auto;
  color: rgba(223, 238, 249, 0.5);
}
.term-video__content {
  position: relative;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  background: #000;
}
.term-video__canvas { display: block; width: 100%; height: 90px; }
.term-video__overlay {
  position: absolute;
  top: 4px; left: 6px;
  padding: 1px 6px;
  background: rgba(255, 61, 61, 0.85);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 2px;
  animation: liveBlink 1.5s ease-in-out infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* -------- 升级轨迹（已废弃，保留兼容）-------- */
.term-trace {
  padding: 4px 8px 6px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  font-family: var(--term-mono);
  font-size: 17px;
}
.term-trace__item {
  color: rgba(223, 238, 249, 0.75);
  line-height: 1.65;
}

/* -------- 元数据容器（含首警徽标）-------- */
.term-meta-wrap {
  position: relative;
  margin-bottom: 0;
}
.term-meta-wrap .term-meta {
  padding-right: 134px;
}

/* -------- 首警信息徽标 -------- */
.term-first-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--term-mono);
  font-size: 17px;
  line-height: 1.5;
  background: rgba(249, 233, 85, 0.07);
  border: 1px solid rgba(249, 233, 85, 0.28);
  border-radius: 4px;
  padding: 5px 9px;
  max-width: 130px;
  text-align: right;
}
.term-first-badge__label {
  display: block;
  color: #F9E955;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin-bottom: 1px;
}
.term-first-badge__loc {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 112px;
}
.term-first-badge__time {
  display: block;
  color: rgba(249, 233, 85, 0.55);
  font-size: 16px;
}

/* -------- 中间历史告警 -------- */
.term-history {
  padding: 5px 8px 6px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid rgba(255, 162, 75, 0.35);
  font-family: var(--term-mono);
  font-size: 17px;
}
.term-history__item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(223, 238, 249, 0.7);
  line-height: 1.7;
}
.term-history__dot { flex-shrink: 0; font-size: 16px; }
.term-history__level {
  color: var(--ai-color);
  font-size: 17px;
  flex-shrink: 0;
}
.term-history__loc {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-history__time {
  color: rgba(255, 255, 255, 0.38);
  font-size: 16px;
  flex-shrink: 0;
}

/* -------- 自动展开视频（红色告警）-------- */
.term-video--auto {
  margin-top: 8px;
  margin-bottom: 0;
}
.term-video--auto .term-video__label {
  font-family: var(--term-mono);
  font-size: 16px;
  color: rgba(223, 238, 249, 0.45);
  margin-bottom: 4px;
  padding-left: 2px;
}
.term-video--auto .term-video__content {
  display: block;
  margin-top: 0;
  border-top: 0;
}

/* -------- 代码注释标签 -------- */
.term-comment {
  font-family: var(--term-mono);
  font-size: 17px;
  color: rgba(223, 238, 249, 0.4);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* -------- 对话流 -------- */
.term-chat {
  margin-bottom: 10px;
}

.chat-bubble {
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(8px);
  animation: chatBubbleIn 400ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
}
.chat-bubble:last-child { margin-bottom: 0; }
@keyframes chatBubbleIn {
  to { opacity: 1; transform: translateY(0); }
}
.chat-bubble__head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--term-mono);
  font-size: 18px;
  color: rgba(223, 238, 249, 0.55);
  margin-bottom: 3px;
  padding-left: 2px;
}
.chat-bubble__avatar {
  display: inline-flex;
  color: var(--ai-color);
  line-height: 0;
}
.chat-bubble__avatar-img {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px var(--ai-color));
  animation: avatarPulse 1.4s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--ai-color)); opacity: 1; }
  50%       { filter: drop-shadow(0 0 9px var(--ai-color)); opacity: 0.85; }
}
.chat-bubble__time { color: rgba(223, 238, 249, 0.7); }
.chat-bubble__status {
  color: var(--ai-color);
  font-weight: 600;
  animation: chatStatusBlink 1.2s ease-in-out infinite;
}
@keyframes chatStatusBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.chat-bubble__body {
  position: relative;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  font-size: 19px;
  color: #e4f0f9;
  line-height: 1.55;
}
.chat-bubble--active .chat-bubble__body {
  background: color-mix(in srgb, var(--ai-color) 10%, transparent);
  border-left-color: var(--ai-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ai-color) 20%, transparent);
  animation: chatActivePulse 2s ease-in-out infinite;
}
@keyframes chatActivePulse {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--ai-color) 20%, transparent); }
  50%      { box-shadow: 0 0 14px color-mix(in srgb, var(--ai-color) 35%, transparent); }
}
.chat-bubble--active .chat-bubble__text { color: var(--ai-color); }

/* Braille spinner */
.braille-spinner {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--term-mono);
  color: var(--ai-color);
  width: 1ch;
}
.braille-spinner::before {
  content: "⠋";
  animation: brailleSpin 0.8s steps(1, end) infinite;
}
@keyframes brailleSpin {
  0%     { content: "⠋"; }
  12.5%  { content: "⠙"; }
  25%    { content: "⠹"; }
  37.5%  { content: "⠸"; }
  50%    { content: "⠼"; }
  62.5%  { content: "⠴"; }
  75%    { content: "⠦"; }
  87.5%  { content: "⠧"; }
  100%   { content: "⠇"; }
}

/* pending 条目（无气泡） */
.chat-pending {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0 2px 4px;
  font-family: var(--term-mono);
  font-size: 16px;
  color: rgba(223, 238, 249, 0.38);
  font-style: italic;
  opacity: 0;
  animation: chatBubbleIn 400ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
}
.chat-pending__dot { color: rgba(255, 255, 255, 0.35); }
.chat-pending__time { color: rgba(223, 238, 249, 0.3); }
.chat-pending__text { flex: 1; }

/* -------- AI 同区判定 -------- */
.term-ai-judge {
  padding: 8px 0 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-family: var(--term-mono);
}
.term-ai-judge__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 6px;
}
.term-ai-judge__verdict {
  font-size: 17px;
  letter-spacing: 0.06em;
}
.term-ai-judge--same .term-ai-judge__verdict { color: #4ecb71; }
.term-ai-judge--diff .term-ai-judge__verdict { color: #ffb86b; }
.term-ai-judge__conf {
  font-size: 13px;
  color: rgba(215,245,255,0.55);
}
.term-ai-judge__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(215,245,255,0.45);
  margin-bottom: 4px;
}
.term-ai-judge__reasoning {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(223,238,249,0.78);
  padding: 4px 0 2px;
}

/* -------- 终端风按钮 -------- */
.term-feedback {
  padding: 8px 0 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.term-feedback__btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.term-feedback__btn {
  flex: 1;
  padding: 5px 0;
  font-family: var(--term-mono);
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.3);
  color: rgba(215,245,255,0.75);
  transition: all 120ms ease;
}
.term-feedback__btn--correct:hover { border-color: #4ecb71; color: #4ecb71; }
.term-feedback__btn--wrong:hover   { border-color: #ff6b6b; color: #ff6b6b; }
.term-feedback__btn--skip:hover    { border-color: rgba(215,245,255,0.5); color: rgba(215,245,255,0.9); }
.term-feedback__btn:disabled       { opacity: 0.4; cursor: not-allowed; }
.term-feedback__done {
  font-family: var(--term-mono);
  font-size: 13px;
  color: rgba(215,245,255,0.5);
  padding: 4px 0;
}
.term-foot {
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.term-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), var(--ai-glow));
  border: 1px solid var(--ai-color);
  color: var(--ai-color);
  font-family: var(--term-mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 150ms ease;
}
.term-btn:hover {
  background: linear-gradient(90deg, var(--ai-glow), var(--ai-color));
  color: #0a1420;
  box-shadow: 0 0 14px var(--ai-color);
}
.term-btn__arrow { color: var(--ai-color); }
.term-btn:hover .term-btn__arrow { color: #0a1420; }
.term-btn__label { flex: 1; text-align: left; }
.term-btn__cursor {
  display: inline-block;
  width: 0.6em;
  text-align: center;
  animation: cursorBlink 1s steps(2, end) infinite;
}
@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ── 下行控制指令面板 ─────────────────────────────────── */
.term-ctrl {
  padding: 6px 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.term-ctrl__label {
  display: block;
  font-size: 10px;
  color: rgba(215, 245, 255, 0.3);
  font-family: "Courier New", monospace;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.term-ctrl__btns {
  display: flex;
  gap: 6px;
}
.cmd-btn {
  flex: 1;
  padding: 5px 4px;
  background: rgba(255, 162, 75, 0.08);
  border: 1px solid rgba(255, 162, 75, 0.35);
  border-radius: 3px;
  color: rgba(255, 200, 120, 0.9);
  font-size: 11px;
  font-family: "Courier New", monospace;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.cmd-btn:hover:not(:disabled) {
  background: rgba(255, 162, 75, 0.22);
  border-color: rgba(255, 162, 75, 0.7);
  color: #ffd080;
}
.cmd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cmd-btn--sending {
  background: rgba(86, 192, 248, 0.1);
  border-color: rgba(86, 192, 248, 0.4);
  color: rgba(86, 192, 248, 0.8);
}
.cmd-btn--success {
  background: rgba(80, 220, 140, 0.12);
  border-color: rgba(80, 220, 140, 0.5);
  color: #50dc8c;
}
.cmd-btn--error {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 80, 80, 0.5);
  color: #ff7070;
}

.ai-card.is-active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ai-color) 40%, transparent),
    0 0 48px var(--ai-glow),
    0 10px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ai-card.is-dimmed { opacity: 0.45; }

/* -------- 卡片角锥（气泡尾巴）-------- */
.ai-card__cone {
  position: absolute;
  bottom: -48px;
  width: 42px;
  height: 54px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 12px var(--ai-glow));
  animation: coneFloat 2.4s ease-in-out infinite;
}
.ai-card--cone-bl .ai-card__cone {
  left: 10px;
}
.ai-card--cone-br .ai-card__cone {
  right: 10px;
}
.ai-card__cone svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ai-card__cone .card-cone__ring {
  transform-origin: 24px 50px;
  animation: coneRingPulse 2s ease-out infinite;
}
@keyframes coneFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes coneRingPulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  80%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* -------- 告警队列（右侧，主级别溢出）-------- */
.alert-queue-layer {
  left: auto;
  right: 20px;
  top: 210px;
  bottom: 200px;
  width: 480px;
  pointer-events: auto;
}

/* -------- 次级告警队列（左侧，黄色+橙色列）-------- */
.lower-queue-layer {
  position: absolute;
  left: 20px;
  right: auto;
  top: 210px;
  bottom: 200px;
  width: 480px;
  z-index: 9;
  pointer-events: auto;
  display: none;
}
.state-yellow  .lower-queue-layer,
.state-warning .lower-queue-layer,
.state-danger  .lower-queue-layer {
  display: block;
}

/* -------- 多列布局（左侧面板内黄/橙并排）-------- */
.queue-columns {
  display: flex;
  gap: 6px;
  height: calc(100% - 48px); /* 减去 tab 头高度 */
}
.queue-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.queue-col-header {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  text-align: center;
  border-radius: 3px 3px 0 0;
  flex-shrink: 0;
}
.queue-col-header--yellow {
  background: rgba(255, 210, 0, 0.12);
  color: #ffd200;
  border: 1px solid rgba(255, 210, 0, 0.35);
}
.queue-col-header--orange {
  background: rgba(255, 130, 0, 0.12);
  color: #ff8800;
  border: 1px solid rgba(255, 130, 0, 0.35);
}
.queue-col-header--red {
  background: rgba(255, 60, 60, 0.12);
  color: #ff3d3d;
  border: 1px solid rgba(255, 60, 60, 0.35);
}
.queue-list--col {
  flex: 1;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: unset;
  height: 100%;
}
.queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(10, 22, 38, 0.9), rgba(6, 14, 26, 0.85));
  border: 1px solid rgba(90, 200, 255, 0.4);
  border-radius: 4px 4px 0 0;
  color: #dfeef9;
}
.queue-head__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #73dfff;
}
.queue-head__count {
  padding: 2px 8px;
  background: rgba(115, 223, 255, 0.15);
  border-radius: 10px;
  font-size: 17px;
  color: #73dfff;
  font-weight: 700;
}
.queue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background: rgba(6, 14, 26, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(90, 200, 255, 0.2);
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.queue-list::-webkit-scrollbar { width: 4px; }
.queue-list::-webkit-scrollbar-track { background: transparent; }
.queue-list::-webkit-scrollbar-thumb { background: rgba(115, 223, 255, 0.3); border-radius: 2px; }
.queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 150ms ease;
}
.queue-item { cursor: pointer; }
.queue-item:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: inset 3px 0 0 currentColor;
  padding-left: 12px;
  transition: background 150ms ease, box-shadow 150ms ease, padding-left 150ms ease;
}
.queue-item:hover .queue-item__unit { color: #fff; }
.queue-item:active { opacity: 0.7; }
.queue-item__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.queue-item--yellow { color: #F9E955; }
.queue-item--orange { color: #FFA24B; }
.queue-item--red    { color: #FF3D3D; }
.queue-item__dot { background: currentColor; }
.queue-item__body { flex: 1; min-width: 0; }
.queue-item__unit {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.queue-item__type {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.queue-item__type--FIRE_ALARM       { background: rgba(255,60,60,0.22); color: #FF6B6B; border: 1px solid rgba(255,60,60,0.4); }
.queue-item__type--FIRE_TROUBLE     { background: rgba(255,200,60,0.18); color: #FFC83C; border: 1px solid rgba(255,200,60,0.4); }
.queue-item__type--FIRE_SUPERVISORY { background: rgba(100,180,255,0.18); color: #64B4FF; border: 1px solid rgba(100,180,255,0.4); }
.queue-item__meta {
  display: flex;
  gap: 8px;
  font-size: 20px;
  color: rgba(223, 238, 249, 0.55);
  margin-top: 2px;
}
.queue-empty {
  padding: 24px 12px;
  text-align: center;
  color: rgba(223, 238, 249, 0.45);
  font-size: 22px;
  background: rgba(6, 14, 26, 0.7);
  border: 1px solid rgba(90, 200, 255, 0.15);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

/* -------- 引导线 -------- */
.leader-lines-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.leader-line {
  animation: leaderFlow 1.5s linear infinite;
}
.leader-line__dot {
  animation: leaderDot 1.2s ease-in-out infinite;
}
@keyframes leaderFlow {
  to { stroke-dashoffset: -20; }
}
@keyframes leaderDot {
  0%, 100% { r: 3; opacity: 1; }
  50%      { r: 5; opacity: 0.6; }
}

/* ======================================================
   ① 地图雷达扫描叠加层
   ====================================================== */
.radar-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;    /* 在地图之上、但在 component-layer 之下 */
  opacity: 0.72;
}

/* ======================================================
   ② 大屏帧边装饰动效 — 边框辉光 + 游走光点
   ====================================================== */
.screen-frame {
  /* 默认状态辉光（蓝） */
  --frame-glow-color: rgba(77, 184, 255, 0.55);
}
.screen-frame[data-state="warning"] {
  --frame-glow-color: rgba(255, 162, 75, 0.6);
}
.screen-frame[data-state="danger"] {
  --frame-glow-color: rgba(255, 60, 60, 0.65);
}
/* 边框辉光动画 */
@keyframes frameGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 18px var(--frame-glow-color))
                     drop-shadow(0 0 6px var(--frame-glow-color)); }
  50%       { filter: drop-shadow(0 0 38px var(--frame-glow-color))
                     drop-shadow(0 0 14px var(--frame-glow-color)); }
}
.screen-frame {
  animation: frameGlowPulse 3s ease-in-out infinite;
}

/* 游走光点 */
.frame-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px var(--frame-glow-color, rgba(77,184,255,0.9));
  pointer-events: none;
  z-index: 1;
  /* offset-path 路径与 screen-frame 内边缘对齐 */
  offset-path: path('M 6,6 L 2558,6 L 2558,1602 L 6,1602 Z');
  offset-rotate: 0deg;
  animation: frameDotTravel 12s linear infinite;
}
.screen-frame[data-state="warning"] .frame-dot {
  background: #ffa24b;
  box-shadow: 0 0 14px 5px rgba(255, 162, 75, 0.9);
}
.screen-frame[data-state="danger"] .frame-dot {
  background: #ff3c3c;
  box-shadow: 0 0 16px 6px rgba(255, 60, 60, 0.9);
}
@keyframes frameDotTravel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* ======================================================
   ④ 数字滚动计数器（插槽滚入效果）
   ====================================================== */
@keyframes slotRollIn {
  from {
    transform: translateY(60%);
    opacity: 0;
    filter: blur(2px);
  }
  to {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}
.slot-roll {
  display: inline-block;
  animation: slotRollIn 0.55s cubic-bezier(0.22, 0.8, 0.44, 1) both;
}

/* ======================================================
   ⑤ 全屏闪帧（状态切换时）
   ====================================================== */
@keyframes stateFlashFade {
  0%   { opacity: 0.62; }
  18%  { opacity: 0.46; }
  55%  { opacity: 0.18; }
  100% { opacity: 0; }
}
.state-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  animation: stateFlashFade 0.7s ease-out forwards;
}
.state-flash--normal  { background: rgba(77, 184, 255, 0.38); }
.state-flash--warning { background: rgba(255, 140, 20, 0.45); }
.state-flash--danger  { background: rgba(220, 30, 30, 0.5); }

/* ======================================================
   ⑧ AI弹框信号强度（像素风5格）
   ====================================================== */
.sig-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
  vertical-align: middle;
  margin: 0 6px;
}
.sig-bars i {
  display: block;
  width: 3px;
  border-radius: 0;        /* 像素风：无圆角 */
  background: rgba(255, 255, 255, 0.12);
  image-rendering: pixelated;
  flex-shrink: 0;
}
.sig-bars i:nth-child(1) { height: 3px; }
.sig-bars i:nth-child(2) { height: 5px; }
.sig-bars i:nth-child(3) { height: 8px; }
.sig-bars i:nth-child(4) { height: 10px; }
.sig-bars i:nth-child(5) { height: 13px; }

.sig-bars--yellow i.lit { background: #f9e955; box-shadow: 0 0 3px rgba(249,233,85,0.7); }
.sig-bars--orange i.lit { background: #ffa24b; box-shadow: 0 0 3px rgba(255,162,75,0.7); }
.sig-bars--red    i.lit { background: #ff3d3d; box-shadow: 0 0 4px rgba(255,61,61,0.8);  }

/* ======================================================
   ⑨ 告警队列飞入动画
   ====================================================== */
@keyframes queueSlideIn {
  from { transform: translateX(115%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes queue-slide-in {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes queueFlash {
  0%   { background: rgba(255, 130, 0, 0.30); box-shadow: inset 3px 0 0 rgba(255,130,0,0.7); }
  100% { background: transparent;              box-shadow: none; }
}
.queue-item--new {
  animation:
    queue-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both,
    queueFlash     0.75s 0.44s ease-out both;
}

/* ======================================================
   ⑦ 底部指标历史趋势 overlay
   ====================================================== */
.metric-trend-overlay {
  position: absolute;
  left: 282px;
  right: 40px;
  bottom: 0;
  height: 360px;
  background: rgba(4, 13, 26, 0.96);
  border: 1px solid rgba(77, 196, 255, 0.28);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  z-index: 30;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.44s cubic-bezier(0.22, 0.8, 0.44, 1);
  pointer-events: auto;
  overflow: hidden;
}
.metric-trend-overlay.is-visible {
  transform: translateY(0);
}
.metric-trend-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 10px;
  border-bottom: 1px solid rgba(77, 196, 255, 0.14);
}
.metric-trend-overlay__title {
  font-size: 19px;
  font-weight: 700;
  color: rgba(215, 245, 255, 0.9);
  letter-spacing: 0.06em;
}
.metric-trend-overlay__close {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: rgba(77, 196, 255, 0.12);
  border: 1px solid rgba(77, 196, 255, 0.35);
  border-radius: 17px;
  color: rgba(180, 230, 255, 0.9);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.metric-trend-overlay__close::before {
  content: "▼";
  font-size: 16px;
  opacity: 0.75;
}
.metric-trend-overlay__close:hover {
  background: rgba(77, 196, 255, 0.26);
  border-color: rgba(77, 196, 255, 0.65);
  color: #fff;
}
.metric-trend-overlay__chart {
  width: 100%;
  height: 296px;
}

/* ======================================================
   ⑫ 视觉双联动告警脉冲
   ====================================================== */
@keyframes alertBorderPulse {
  0%   { opacity: 0.9; }
  16%  { opacity: 0.1; }
  32%  { opacity: 0.9; }
  50%  { opacity: 0.1; }
  66%  { opacity: 0.85; }
  82%  { opacity: 0.3; }
  100% { opacity: 0; }
}
.alert-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  border-radius: 10px;
  animation: alertBorderPulse 2.2s ease-in-out forwards;
}
.alert-pulse--warning {
  box-shadow:
    inset 0 0 0 3px rgba(255, 162, 75, 0.85),
    inset 0 0 90px rgba(255, 162, 75, 0.18);
}
.alert-pulse--danger {
  box-shadow:
    inset 0 0 0 4px rgba(255, 50, 50, 0.95),
    inset 0 0 110px rgba(255, 50, 50, 0.22);
}

/* ======================================================
   ⑩ 全局回放时间轴
   ====================================================== */
.timeline-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: rgba(3, 9, 20, 0.97);
  border-top: 1px solid rgba(77, 196, 255, 0.28);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.44, 1);
  pointer-events: auto;
}
.timeline-bar.is-visible {
  transform: translateY(0);
}
.timeline-btn {
  background: rgba(77, 196, 255, 0.1);
  border: 1px solid rgba(77, 196, 255, 0.3);
  color: rgba(215, 245, 255, 0.9);
  border-radius: 6px;
  font-size: 22px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.timeline-btn:hover {
  background: rgba(77, 196, 255, 0.22);
  color: #fff;
}
.timeline-btn--close {
  font-size: 22px;
  color: rgba(215, 245, 255, 0.55);
}
.timeline-time {
  font-size: 20px;
  font-weight: 700;
  color: rgba(77, 196, 255, 0.9);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 52px;
}
.timeline-track {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(77, 196, 255, 0.14);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.timeline-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(77, 196, 255, 0.7);
  border-radius: 3px;
  pointer-events: none;
  transition: width 0.1s linear;
}
.screen-frame[data-state="warning"] .timeline-fill { background: rgba(255, 162, 75, 0.75); }
.screen-frame[data-state="danger"]  .timeline-fill { background: rgba(255, 60, 60, 0.75); }
.timeline-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4db8ff;
  border: 2px solid rgba(215, 245, 255, 0.9);
  pointer-events: none;
  transition: left 0.1s linear;
  box-shadow: 0 0 8px rgba(77, 196, 255, 0.6);
}
.screen-frame[data-state="warning"] .timeline-handle { background: #ffa24b; box-shadow: 0 0 8px rgba(255,162,75,0.6); }
.screen-frame[data-state="danger"]  .timeline-handle { background: #ff3c3c; box-shadow: 0 0 8px rgba(255,60,60,0.7); }
.timeline-tick {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.timeline-tick__line {
  width: 1px;
  height: 10px;
  background: rgba(77, 196, 255, 0.5);
  margin-bottom: 2px;
}
.timeline-tick__label {
  font-size: 16px;
  color: rgba(215, 245, 255, 0.55);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.timeline-tag {
  font-size: 16px;
  color: rgba(215, 245, 255, 0.45);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* 控制面板额外按钮 */
.control-panel .fullscreen-button + .fullscreen-button {
  margin-top: 6px;
}
.ctrl-btn-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* === SSE 连接状态指示 === */
.sse-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}
.sse-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #555;
}
.sse-status__dot--connecting {
  background: #888;
  animation: ssePulse 1.2s ease-in-out infinite;
}
.sse-status__dot--connected {
  background: #4ecb71;
  box-shadow: 0 0 6px #4ecb71;
  animation: ssePulse 2.4s ease-in-out infinite;
}
.sse-status__dot--reconnecting {
  background: #ffa24b;
  animation: ssePulse 0.7s ease-in-out infinite;
}
.sse-status__dot--error {
  background: #ff4b4b;
  box-shadow: 0 0 6px #ff4b4b;
}
@keyframes ssePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.sse-status__label {
  font-size: 16px;
  color: rgba(180,230,255,0.6);
  letter-spacing: 0.03em;
}

/* === 数据来源标识 === */
.data-source-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: 8px;
}
.data-source-tag--mock {
  background: rgba(255,162,75,0.18);
  border: 1px solid rgba(255,162,75,0.5);
  color: #ffa24b;
}
.data-source-tag--fallback {
  background: rgba(255,80,80,0.18);
  border: 1px solid rgba(255,80,80,0.5);
  color: #ff5050;
  animation: data-tag-pulse 2s ease-in-out infinite;
}
@keyframes data-tag-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* === 音频解锁横幅 === */
.audio-unlock-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 16px;
  background: linear-gradient(90deg, rgba(6,20,36,0.97), rgba(10,30,55,0.97));
  border: 1px solid rgba(55,182,255,0.4);
  border-radius: 10px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.5), 0 0 20px rgba(55,182,255,0.15);
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.audio-unlock-banner--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.audio-unlock-banner__icon {
  font-size: 22px;
  animation: ssePulse 1.5s ease-in-out infinite;
}
.audio-unlock-banner__text {
  font-size: 19px;
  color: rgba(180,230,255,0.9);
  letter-spacing: 0.03em;
}
.audio-unlock-banner__close {
  margin-left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(180,230,255,0.7);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.audio-unlock-banner__close:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ======================================================
   告警队列 — 双 Tab（实时告警 / 今日已处置）
   ====================================================== */
.queue-tabs {
  display: flex;
  gap: 0;
  background: rgba(6, 14, 26, 0.9);
  border: 1px solid rgba(90, 200, 255, 0.4);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.queue-tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(215, 245, 255, 0.55);
  background: transparent;
  border: none;
  border-right: 1px solid rgba(90, 200, 255, 0.2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.queue-tab:last-child { border-right: none; }
.queue-tab:hover { background: rgba(77, 196, 255, 0.1); color: rgba(215,245,255,0.8); }
.queue-tab--active {
  background: rgba(77, 196, 255, 0.14);
  color: #73dfff;
  border-bottom: 2px solid #73dfff;
}
.queue-tab__badge {
  padding: 1px 5px;
  background: rgba(115, 223, 255, 0.18);
  border-radius: 8px;
  font-size: 20px;
  color: #73dfff;
  font-weight: 700;
}
.queue-tab--active .queue-tab__badge {
  background: rgba(115, 223, 255, 0.28);
}

/* 今日已处置列表 */
.resolved-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.resolved-list::-webkit-scrollbar { width: 4px; }
.resolved-list::-webkit-scrollbar-track { background: transparent; }
.resolved-list::-webkit-scrollbar-thumb { background: rgba(115, 223, 255, 0.3); border-radius: 2px; }
.resolved-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(77, 196, 255, 0.08);
  background: rgba(8, 20, 36, 0.72);
  transition: background 0.12s;
}
.resolved-item:hover { background: rgba(20, 50, 80, 0.55); }
.resolved-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  background: rgba(100, 140, 160, 0.4);
}
.resolved-item--yellow .resolved-item__dot { background: #F9E955; box-shadow: 0 0 5px rgba(249,233,85,0.6); }
.resolved-item--orange .resolved-item__dot { background: #FFA24B; box-shadow: 0 0 5px rgba(255,162,75,0.6); }
.resolved-item--red    .resolved-item__dot { background: #FF3D3D; box-shadow: 0 0 6px rgba(255,61,61,0.7); }
.resolved-item__body { flex: 1; min-width: 0; }
.resolved-item__unit {
  font-size: 17px;
  font-weight: 600;
  color: rgba(215, 245, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resolved-item__loc {
  font-size: 16px;
  color: rgba(160, 215, 240, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.resolved-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 3px;
}
.resolved-item__time {
  font-size: 16px;
  color: rgba(160, 215, 240, 0.5);
  letter-spacing: 0.02em;
}
.resolved-item__badge {
  font-size: 16px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.resolved-item__badge--resolved   { background: rgba(86,192,248,0.18); color: #56c0f8; }
.resolved-item__badge--false_alarm { background: rgba(78,203,113,0.18); color: #4ecb71; }
.resolved-item__badge--transferred { background: rgba(255,162,75,0.18); color: #ffa24b; }

/* ======================================================
   底部指标光条进度 (glowbar)
   ====================================================== */
.metric-glowbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.metric-glowbar__fill {
  height: 100%;
  border-radius: 0 2px 2px 0;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

/* 扫光动画：光点从左到右划过 */
.metric-glowbar__fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  filter: blur(3px);
  animation: glowbar-sweep 3s ease-in-out infinite;
}

@keyframes glowbar-sweep {
  0%   { opacity: 0; right: 40%; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; right: -8px; }
}

/* ── Feature A: Typewriter cursor ── */
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.tw-cursor {
  display: inline-block;
  color: inherit;
  opacity: 1;
  animation: tw-blink 0.7s step-end infinite;
  margin-left: 1px;
  font-size: 0.9em;
}

/* ── Feature E: AI card level-change flash ── */
@keyframes card-flash-orange {
  0%   { box-shadow: inset 0 0 0 2px rgba(255,140,30,0), 0 0 0 rgba(255,140,30,0); }
  30%  { box-shadow: inset 0 0 0 2px rgba(255,140,30,0.9), 0 0 40px rgba(255,140,30,0.5); }
  100% { box-shadow: inset 0 0 0 2px rgba(255,140,30,0), 0 0 0 rgba(255,140,30,0); }
}
@keyframes card-flash-red {
  0%   { box-shadow: inset 0 0 0 2px rgba(255,60,60,0), 0 0 0 rgba(255,60,60,0); }
  30%  { box-shadow: inset 0 0 0 2px rgba(255,60,60,0.95), 0 0 50px rgba(255,60,60,0.6); }
  100% { box-shadow: inset 0 0 0 2px rgba(255,60,60,0), 0 0 0 rgba(255,60,60,0); }
}
.ai-card--flash-orange {
  animation: card-flash-orange 0.7s ease-out forwards;
}
.ai-card--flash-red {
  animation: card-flash-red 0.7s ease-out forwards;
}

/* ── Feature C: Floating particle canvas ── */
.particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 10;          /* 浮于所有 UI 层之上 */
  pointer-events: none;
}

/* ── Feature D: Panel border light sweep ── */
@keyframes panel-sweep {
  0%   { left: -70%; }
  100% { left: 170%; }
}

.info-card,
.duty-card {
  overflow: hidden;
}

.info-card::after,
.duty-card::after,
.metric-card::after {
  content: "";
  position: absolute;
  top: -5%;
  left: -70%;
  width: 50%;
  height: 110%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(110, 220, 255, 0.07) 45%,
    rgba(160, 240, 255, 0.14) 50%,
    rgba(110, 220, 255, 0.07) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: panel-sweep 5.5s ease-in-out infinite;
  animation-delay: var(--sweep-delay, 0s);
  pointer-events: none;
  z-index: 10;
}

.metric-card--1 { --sweep-delay: 0s;   }
.metric-card--2 { --sweep-delay: 1.1s; }
.metric-card--3 { --sweep-delay: 2.2s; }
.metric-card--4 { --sweep-delay: 3.3s; }
.metric-card--5 { --sweep-delay: 4.4s; }

/* info-card 先扫（0s 起） */
.info-card:nth-child(1) { --sweep-delay: 0s;   }
.info-card:nth-child(2) { --sweep-delay: 0.7s; }
.info-card:nth-child(3) { --sweep-delay: 1.4s; }
.info-card:nth-child(4) { --sweep-delay: 2.1s; }
.info-card:nth-child(5) { --sweep-delay: 2.8s; }
.info-card:nth-child(6) { --sweep-delay: 3.5s; }
.info-card:nth-child(7) { --sweep-delay: 4.2s; }
.info-card:nth-child(8) { --sweep-delay: 4.9s; }

/* duty-card 接力（info-card 结束后约 0.2s 开始） */
.duty-card:nth-child(1) { --sweep-delay: 0.4s; }
.duty-card:nth-child(2) { --sweep-delay: 1.1s; }
.duty-card:nth-child(3) { --sweep-delay: 1.8s; }
.duty-card:nth-child(4) { --sweep-delay: 2.5s; }

/* ── Feature F: Digit flip ── */
@keyframes digit-flip {
  0%   { transform: perspective(400px) rotateX(90deg) scaleY(0.4); opacity: 0; }
  55%  { transform: perspective(400px) rotateX(-12deg) scaleY(1.04); opacity: 1; }
  100% { transform: perspective(400px) rotateX(0deg)   scaleY(1);    opacity: 1; }
}

.flip-digit {
  display: inline-block;
}

.flip-digit--change {
  animation: digit-flip 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 逐字错开：每个字延迟 60ms，产生接力翻滚感 */
.flip-digit--change:nth-child(1) { animation-delay: 0ms;   }
.flip-digit--change:nth-child(2) { animation-delay: 60ms;  }
.flip-digit--change:nth-child(3) { animation-delay: 120ms; }
.flip-digit--change:nth-child(4) { animation-delay: 180ms; }
.flip-digit--change:nth-child(5) { animation-delay: 240ms; }
.flip-digit--change:nth-child(6) { animation-delay: 300ms; }

.metric-card__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* ============================================================
   AI 值守态（state-duty）专属样式
   ============================================================ */

/* 值守态：隐藏非必要面板，保留地图 + 圆锥 + 统计栏 */
.state-duty .lower-queue-layer  { display: none !important; }
.state-duty .alert-queue-layer  { display: none !important; }
.state-duty .ai-notification-layer { display: none; }
.state-duty .message-layer      { display: none; }

/* 机器人值守卡片在火警态加「返回」提示边框 */
.duty-card--return {
  border: 1px solid rgba(77, 196, 255, 0.5) !important;
  box-shadow: 0 0 16px rgba(77, 196, 255, 0.25) !important;
  transition: box-shadow 0.25s;
}
.duty-card--return:hover {
  box-shadow: 0 0 28px rgba(77, 196, 255, 0.55) !important;
}
.duty-card__back-label {
  font-size: 15px;
  color: #4dc8ff;
  letter-spacing: 0.05em;
}

/* 火警态：空态提示居中 */
.fire-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  pointer-events: none;
}
.fire-empty-state__icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 20px;
  opacity: 0.6;
}
.fire-empty-state--yellow .fire-empty-state__icon { color: #ffd200; }
.fire-empty-state--orange .fire-empty-state__icon { color: #ff8800; }
.fire-empty-state--red    .fire-empty-state__icon { color: #ff3d3d; }
.fire-empty-state__text {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.fire-empty-state__sub {
  font-size: 22px;
  color: var(--text-muted);
}

/* ============================================================
   单位圆锥地图标记（渲染在 AMap 上）
   ============================================================ */
.unit-cone {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.18s;
  user-select: none;
}
.unit-cone:hover { transform: scale(1.18); }

/* 脉冲光环（橙/红） */
.unit-cone__ring {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  pointer-events: none;
}
.unit-cone__pulse {
  animation: conePulse 2s ease-out infinite;
}
.unit-cone--none   .unit-cone__ring { border: 2px solid rgba(77, 184, 255, 0.7); animation: conePulse 3s ease-out infinite; }
.unit-cone--yellow .unit-cone__ring { border: 2px solid rgba(255, 210, 0, 0.7);  animation: conePulse 2.5s ease-out infinite; }
.unit-cone--red    .unit-cone__ring { border: 2px solid rgba(255, 61, 61, 0.7);  }
.unit-cone--orange .unit-cone__ring { border: 2px solid rgba(255, 136, 0, 0.7);  }

@keyframes conePulse {
  0%   { transform: translateX(-50%) scale(1);   opacity: 0.8; }
  70%  { transform: translateX(-50%) scale(2.2); opacity: 0; }
  100% { transform: translateX(-50%) scale(2.2); opacity: 0; }
}

/* 值守中心标记（青色菱形，anchor=center） */
.unit-cone--duty-center {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(0, 220, 220, 0.65));
}
.unit-cone__sc-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0, 210, 210, 0.75);
  pointer-events: none;
  animation: scPulse 2.8s ease-out infinite;
}
.unit-cone__sc-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #7fffff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px rgba(0, 220, 220, 0.9);
  white-space: nowrap;
}
@keyframes scPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
  70%  { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* 总部专属标记（anchor=center，div 尺寸 = SVG 尺寸，五边形中心对齐坐标点） */
.unit-cone--hq {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(255, 190, 40, 0.7));
}
/* 脉冲环以 div 中心为圆心展开 */
.unit-cone__hq-ring-inner,
.unit-cone__hq-ring-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.unit-cone__hq-ring-inner {
  border: 2px solid rgba(255, 200, 50, 0.8);
  width: 36px;
  height: 36px;
  animation: hqPulseInner 2.4s ease-out infinite;
}
.unit-cone__hq-ring-outer {
  border: 1.5px solid rgba(255, 180, 30, 0.5);
  width: 36px;
  height: 36px;
  animation: hqPulseOuter 2.4s ease-out infinite 0.8s;
}
/* 标签悬于标记正下方，不影响 div 高度 */
.unit-cone__hq-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #ffe080;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(255, 200, 50, 0.9);
  white-space: nowrap;
}
@keyframes hqPulseInner {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
  70%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes hqPulseOuter {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  70%  { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* ============================================================
   圆锥弹窗（点击圆锥后显示在地图上方）
   ============================================================ */
.cone-popup {
  --ai-color: #4db8ff;
  --ai-glow: rgba(77, 184, 255, 0.3);
  position: absolute;
  width: 480px;
  max-height: 560px;
  overflow-y: auto;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.95) 0%, rgba(4, 10, 20, 0.95) 100%);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ai-color) 30%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ai-color) 18%, transparent),
    0 0 40px var(--ai-glow),
    0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 200;
  animation: aiCardEnter 300ms ease-out;
  color: #dfeef9;
  font-size: 18px;
}
.cone-popup--yellow { --ai-color: #ffd200; --ai-glow: rgba(255, 210, 0, 0.28); }
.cone-popup--orange { --ai-color: #ff8800; --ai-glow: rgba(255, 136, 0, 0.32); }
.cone-popup--red    { --ai-color: #ff3d3d; --ai-glow: rgba(255, 61, 61, 0.38); }
.cone-popup--none   { --ai-color: #4db8ff; --ai-glow: rgba(77, 184, 255, 0.22); }

.cone-popup__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cone-popup__level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ai-color);
  box-shadow: 0 0 8px var(--ai-color);
  flex-shrink: 0;
}
.cone-popup__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cone-popup__badge {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--ai-color) 18%, transparent);
  color: var(--ai-color);
  border: 1px solid color-mix(in srgb, var(--ai-color) 40%, transparent);
  white-space: nowrap;
}
.cone-popup__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.cone-popup__close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.cone-popup__body { font-size: 17px; }
.cone-popup__foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 8px;
  align-items: center;
}
.cone-popup__cam-btn {
  background: rgba(77, 196, 255, 0.1);
  border: 1px solid rgba(77, 196, 255, 0.4);
  color: #4dc8ff;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cone-popup__cam-btn:hover {
  background: rgba(77, 196, 255, 0.2);
  border-color: #4dc8ff;
}

/* 无火警正常状态 — 顶部状态栏 + 内嵌摄像头 */
.cone-popup__normal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0 10px;
}
.cone-popup__normal-check {
  color: #4dc8ff;
  font-size: 15px;
  flex-shrink: 0;
}
.cone-popup__normal-label {
  color: #4dc8ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cone-popup__normal-loc {
  font-size: 11px;
  color: rgba(160, 212, 255, 0.45);
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
/* 内嵌摄像头区域 */
.cone-popup__cam-embed {
  position: relative;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(77, 196, 255, 0.15);
  aspect-ratio: 16 / 9;
}
.cone-popup__cam-embed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s;
}
.cone-popup__cam-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(77, 196, 255, 0.55);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

/* ============================================================
   火警态右侧队列 → 左侧详情面板
   ============================================================ */
.left-detail-panel {
  z-index: 30;
  animation: slideInLeft 300ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  max-height: 1100px;
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}

.left-detail-panel__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  z-index: 5;
}
.left-detail-panel__close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }


/* ──────────────────────────────────────────────────────────
   地图自定义缩放按钮
────────────────────────────────────────────────────────── */
.map-zoom-ctrl {
  position: absolute;
  right: 24px;
  bottom: 120px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: all;
}
.map-zoom-ctrl__btn {
  width: 52px;
  height: 52px;
  background: rgba(6, 20, 44, 0.82);
  border: 1px solid rgba(77, 216, 255, 0.45);
  border-radius: 8px;
  color: #4dd8ff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.map-zoom-ctrl__btn:hover {
  background: rgba(77, 216, 255, 0.18);
  border-color: #4dd8ff;
}
.map-zoom-ctrl__btn:active { transform: scale(0.92); }

/* ============================================================
   监控画面面板（萤石云 HLS 播放）
   ============================================================ */
.camera-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 880px;
  background: rgba(4, 14, 30, 0.97);
  border: 1px solid rgba(77, 196, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 0 80px rgba(0, 80, 180, 0.45), 0 0 0 1px rgba(77,196,255,0.08);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.camera-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(77, 196, 255, 0.15);
  flex-shrink: 0;
}
.camera-panel__icon {
  font-size: 15px;
}
.camera-panel__title {
  flex: 1;
  color: #a0d8ff;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.camera-panel__unit {
  color: #4db8ff;
  font-weight: 600;
}
.camera-panel__close {
  background: none;
  border: none;
  color: rgba(160, 216, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.camera-panel__close:hover {
  color: #fff;
  background: rgba(255, 80, 80, 0.18);
}
.camera-panel__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.camera-cell {
  position: relative;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(77, 196, 255, 0.12);
  aspect-ratio: 16 / 9;
}
.camera-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.camera-cell__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.camera-cell__status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(77, 196, 255, 0.55);
  font-size: 12px;
  text-align: center;
  line-height: 1.8;
}
/* 视频加载中转圈动画 */
@keyframes cam-spin {
  to { transform: rotate(360deg); }
}
.camera-cell__spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(77, 196, 255, 0.2);
  border-top-color: #4db8ff;
  border-radius: 50%;
  animation: cam-spin 0.8s linear infinite;
  margin-bottom: 6px;
}