/* ============================================================================
   系统运行数据中心（可视化大屏）
   路由：/admin/data-center
   —— 深空蓝底 + 青蓝光晕 + 网格纹理，全部用纯 CSS 装饰（不使用 SVG 背景）
   ========================================================================== */

.kx-dc {
  position: relative;
  flex: 1;
  min-height: calc(100vh - 64px);
  margin: calc(var(--kx-page-padding-top) * -1) calc(var(--kx-page-padding) * -1) -40px;
  padding: 20px var(--kx-page-padding) 34px;
  overflow: hidden;
  color: #cbd5e1;
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(14, 116, 144, .30), transparent 62%),
    radial-gradient(900px 520px at 94% -6%, rgba(79, 70, 229, .20), transparent 64%),
    radial-gradient(700px 420px at 50% 110%, rgba(8, 145, 178, .14), transparent 70%),
    linear-gradient(180deg, #040c1a 0%, #030a14 100%);
}

/* ---------------------------------------------------------------- 背景装饰 */
.kx-dc__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.kx-dc__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
}
.kx-dc__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  animation: kx-dc-float 14s ease-in-out infinite alternate;
}
.kx-dc__orb.is-cyan { width: 380px; height: 380px; left: -120px; top: -140px; background: rgba(34, 211, 238, .35); }
.kx-dc__orb.is-violet { width: 320px; height: 320px; right: -100px; top: -120px; background: rgba(139, 92, 246, .30); animation-delay: -4s; }
.kx-dc__orb.is-blue { width: 420px; height: 300px; right: 20%; bottom: -180px; background: rgba(37, 99, 235, .28); animation-delay: -8s; }
@keyframes kx-dc-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(24px, 18px, 0) scale(1.08); }
}

/* ---------------------------------------------------------------- 头部 */
.kx-dc__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(56, 189, 248, .14);
}
.kx-dc__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.kx-dc__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  color: #67e8f9;
  background: linear-gradient(145deg, rgba(34, 211, 238, .22), rgba(59, 130, 246, .10));
  border: 1px solid rgba(34, 211, 238, .35);
  box-shadow: 0 0 26px rgba(34, 211, 238, .28), inset 0 0 18px rgba(34, 211, 238, .14);
}
.kx-dc__eyebrow {
  font-size: 10px;
  letter-spacing: 2.4px;
  color: #38bdf8;
  opacity: .85;
  margin-bottom: 4px;
}
.kx-dc__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #f1f7ff;
  text-shadow: 0 0 22px rgba(56, 189, 248, .35);
}
.kx-dc__title-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, .6);
  animation: kx-dc-pulse 2s ease-out infinite;
}
@keyframes kx-dc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .55); }
  70% { box-shadow: 0 0 0 9px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.kx-dc__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kx-dc__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .18);
  background: rgba(8, 24, 46, .72);
  color: #94a3b8;
  font-size: 11px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kx-dc__chip--scope {
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, .3);
  background: rgba(8, 47, 73, .55);
}
.kx-dc__clock {
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 12px;
  letter-spacing: .6px;
  color: #67e8f9;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.kx-dc__range {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(8, 24, 46, .72);
}
.kx-dc__range-btn {
  min-width: 26px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.kx-dc__range-btn:hover { color: #bae6fd; }
.kx-dc__range-btn.is-active {
  background: linear-gradient(135deg, rgba(34, 211, 238, .28), rgba(59, 130, 246, .22));
  color: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35);
}
.kx-dc__range-unit { padding-right: 4px; color: #475569; font-size: 10px; }
.kx-dc__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, .18);
  background: rgba(8, 24, 46, .72);
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.kx-dc__btn:hover {
  color: #e0f2fe;
  border-color: rgba(34, 211, 238, .45);
  background: rgba(8, 47, 73, .55);
}
.kx-dc__btn.is-on {
  color: #67e8f9;
  border-color: rgba(34, 211, 238, .42);
  background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(59, 130, 246, .12));
  box-shadow: 0 0 16px rgba(34, 211, 238, .18);
}

/* ---------------------------------------------------------------- TAB */
.kx-dc__tabs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kx-dc__tabs::-webkit-scrollbar { display: none; }
.kx-dc__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.kx-dc__tab:hover { color: #bae6fd; background: rgba(34, 211, 238, .05); }
.kx-dc__tab.is-active {
  color: #67e8f9;
  border-bottom-color: #22d3ee;
  background: linear-gradient(180deg, rgba(34, 211, 238, .10), transparent);
  text-shadow: 0 0 14px rgba(34, 211, 238, .45);
}

/* ---------------------------------------------------------------- 内容区 */
.kx-dc__body {
  position: relative;
  z-index: 1;
  margin-top: 14px;
}
.kx-dc__tab-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------------------------------------------------------------- KPI */
.kx-dc__kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.kx-dc__kpi {
  position: relative;
  overflow: hidden;
  padding: 13px 14px 15px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, .14);
  background: linear-gradient(155deg, rgba(13, 32, 56, .92) 0%, rgba(7, 18, 34, .92) 100%);
  box-shadow: inset 0 0 30px rgba(34, 211, 238, .035), 0 12px 26px rgba(0, 0, 0, .28);
  transition: transform .2s ease, border-color .2s ease;
}
.kx-dc__kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, .36);
}
.kx-dc__kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .7), transparent);
  opacity: .7;
}
.kx-dc__kpi.is-green::before { background: linear-gradient(180deg, transparent, rgba(52, 211, 153, .7), transparent); }
.kx-dc__kpi.is-violet::before { background: linear-gradient(180deg, transparent, rgba(167, 139, 250, .7), transparent); }
.kx-dc__kpi.is-blue::before { background: linear-gradient(180deg, transparent, rgba(96, 165, 250, .7), transparent); }
.kx-dc__kpi-idx {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(148, 163, 184, .35);
  font-family: "JetBrains Mono", Consolas, monospace;
}
.kx-dc__kpi-label {
  font-size: 11px;
  color: #7c8da6;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.kx-dc__kpi-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.kx-dc__kpi-value em {
  font-style: normal;
  font-size: 24px;
  font-weight: 600;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(34, 211, 238, .28);
}
.kx-dc__kpi-value span {
  font-size: 10px;
  color: #64748b;
}
.kx-dc__kpi-line {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .5), transparent 70%);
  opacity: .5;
}

/* ---------------------------------------------------------------- 异常条 */
.kx-dc__alerts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.kx-dc__alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, .12);
  background: rgba(9, 22, 40, .72);
}
.kx-dc__alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  color: #fbbf24;
  background: rgba(251, 191, 36, .12);
}
.kx-dc__alert.is-red .kx-dc__alert-icon { color: #fb7185; background: rgba(251, 113, 133, .12); }
.kx-dc__alert.is-violet .kx-dc__alert-icon { color: #a78bfa; background: rgba(167, 139, 250, .12); }
.kx-dc__alert.is-blue .kx-dc__alert-icon { color: #60a5fa; background: rgba(96, 165, 250, .12); }
.kx-dc__alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kx-dc__alert-label { font-size: 10px; color: #7c8da6; }
.kx-dc__alert-value {
  font-size: 17px;
  font-weight: 600;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 面板网格 */
.kx-dc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.kx-dc__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px 14px 12px;
  border-radius: 13px;
  border: 1px solid rgba(56, 189, 248, .13);
  background: linear-gradient(158deg, rgba(12, 28, 50, .92) 0%, rgba(6, 16, 31, .94) 100%);
  box-shadow: inset 0 0 40px rgba(34, 211, 238, .03), 0 16px 34px rgba(0, 0, 0, .30);
}
/* 左上 / 右下角科技感描边 */
.kx-dc__panel::before,
.kx-dc__panel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(34, 211, 238, .55);
  border-style: solid;
  pointer-events: none;
}
.kx-dc__panel::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; border-radius: 13px 0 0 0; }
.kx-dc__panel::after { right: -1px; bottom: -1px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 13px 0; }
.kx-dc__panel.span-2 { grid-column: span 2; }
.kx-dc__panel.span-3 { grid-column: span 3; }
.kx-dc__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 18px;
}
.kx-dc__panel-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #22d3ee, rgba(34, 211, 238, .15));
  box-shadow: 0 0 10px rgba(34, 211, 238, .55);
}
.kx-dc__panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: #dbeafe;
}
.kx-dc__panel-tag {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .18);
  background: rgba(8, 47, 73, .4);
  color: #7dd3fc;
  font-size: 10px;
}
.kx-dc__panel-body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.kx-dc__chart { width: 100%; }

/* ---------------------------------------------------------------- 副指标条 */
.kx-dc__strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.kx-dc__strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, .10);
  background: rgba(9, 22, 40, .68);
}
.kx-dc__strip-label { font-size: 10px; color: #7c8da6; white-space: nowrap; }
.kx-dc__strip-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.kx-dc__strip-value em {
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
}
.kx-dc__strip-value span { font-size: 10px; color: #64748b; }
.kx-dc__strip-item.is-green .kx-dc__strip-value em { color: #6ee7b7; }
.kx-dc__strip-item.is-cyan .kx-dc__strip-value em { color: #67e8f9; }
.kx-dc__strip-item.is-violet .kx-dc__strip-value em { color: #c4b5fd; }
.kx-dc__strip-item.is-amber .kx-dc__strip-value em { color: #fcd34d; }
.kx-dc__strip-item.is-red .kx-dc__strip-value em { color: #fda4af; }
.kx-dc__strip-item.is-blue .kx-dc__strip-value em { color: #93c5fd; }
.kx-dc__strip-item.is-pink .kx-dc__strip-value em { color: #f9a8d4; }
.kx-dc__strip-item.is-gray .kx-dc__strip-value em { color: #cbd5e1; }

/* ---------------------------------------------------------------- 表格 */
.kx-dc__table-wrap {
  max-height: 330px;
  overflow: auto;
  border-radius: 8px;
}
.kx-dc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kx-dc__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  color: #64748b;
  background: rgba(4, 13, 28, .97);
  border-bottom: 1px solid rgba(56, 189, 248, .14);
  white-space: nowrap;
}
.kx-dc__table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
  vertical-align: middle;
}
.kx-dc__table tbody tr { transition: background .16s; }
.kx-dc__table tbody tr:hover { background: rgba(34, 211, 238, .045); }
.kx-dc__table .is-right { text-align: right; }
.kx-dc__td-main {
  color: #e2e8f0;
  font-size: 12px;
  max-width: 260px;
}
.kx-dc__td-sub {
  color: #64748b;
  font-size: 10px;
  max-width: 220px;
}
.kx-dc__mono {
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 10px;
  color: #7dd3fc;
  letter-spacing: .3px;
}
.kx-dc__num {
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
  font-size: 12px;
}
.kx-dc__num.is-green { color: #6ee7b7; }
.kx-dc__num.is-red { color: #fda4af; }
.kx-dc__num.is-amber { color: #fcd34d; }
.kx-dc__num.is-violet { color: #c4b5fd; }

/* ---------------------------------------------------------------- 胶囊 */
.kx-dc__pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.kx-dc__pill.is-gray { color: #94a3b8; background: rgba(148, 163, 184, .10); border-color: rgba(148, 163, 184, .18); }
.kx-dc__pill.is-green { color: #6ee7b7; background: rgba(52, 211, 153, .10); border-color: rgba(52, 211, 153, .22); }
.kx-dc__pill.is-cyan { color: #67e8f9; background: rgba(34, 211, 238, .10); border-color: rgba(34, 211, 238, .24); }
.kx-dc__pill.is-blue { color: #93c5fd; background: rgba(96, 165, 250, .10); border-color: rgba(96, 165, 250, .22); }
.kx-dc__pill.is-red { color: #fda4af; background: rgba(251, 113, 133, .10); border-color: rgba(251, 113, 133, .22); }
.kx-dc__pill.is-amber { color: #fcd34d; background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .22); }

/* ---------------------------------------------------------------- 进度 */
.kx-dc__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}
.kx-dc__progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  overflow: hidden;
}
.kx-dc__progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee);
  box-shadow: 0 0 10px rgba(34, 211, 238, .45);
  transition: width .4s ease;
}
.kx-dc__progress-text {
  flex: 0 0 auto;
  font-size: 10px;
  color: #7dd3fc;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 排行 / 列表 */
.kx-dc__rank-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.kx-dc__rank-no {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 10px;
  color: #38bdf8;
  opacity: .8;
}
.kx-dc__mini-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
  overflow: hidden;
  margin-top: 5px;
}
.kx-dc__mini-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.kx-dc__mini-bar.is-red { background: linear-gradient(90deg, #e11d48, #fb7185); }
.kx-dc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 330px;
  overflow: auto;
}
.kx-dc__list-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
}
.kx-dc__list-item:last-child { border-bottom: 0; }
.kx-dc__list-item.is-col {
  align-items: flex-start;
  justify-content: space-between;
}
.kx-dc__list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  color: #94a3b8;
  background: rgba(148, 163, 184, .10);
}
.kx-dc__list-icon.is-warn { color: #fcd34d; background: rgba(251, 191, 36, .12); }
.kx-dc__list-body { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- 实时流水 */
.kx-dc__live-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, .22);
  background: linear-gradient(90deg, rgba(8, 47, 73, .62), rgba(9, 22, 40, .55));
  box-shadow: inset 0 0 34px rgba(34, 211, 238, .05);
}
.kx-dc__live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, .6);
  animation: kx-dc-pulse 1.6s ease-out infinite;
}
.kx-dc__live-text {
  font-size: 11px;
  letter-spacing: 1.8px;
  color: #67e8f9;
}
.kx-dc__live-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-left: auto;
}
.kx-dc__live-num + .kx-dc__live-num { margin-left: 0; }
.kx-dc__live-num em {
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
}
.kx-dc__live-num span { font-size: 10px; color: #64748b; }

.kx-dc__stream {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow: auto;
}
.kx-dc__panel-body.is-scroll { min-height: 0; }
/* 表头：与数据行同一套列宽 */
.kx-dc__stream-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 46px 8px minmax(0, 1.4fr) 86px 54px auto;
  gap: 9px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(56, 189, 248, .12);
  background: rgba(6, 16, 31, .96);
  color: #5b6b82;
  font-size: 9px;
  letter-spacing: .6px;
}
.kx-dc__stream-head .is-right { text-align: right; }
.kx-dc__stream-item {
  display: grid;
  grid-template-columns: 46px 8px minmax(0, 1.4fr) 86px 54px auto;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border-bottom: 1px dashed rgba(148, 163, 184, .09);
  font-size: 11px;
}
.kx-dc__stream-time {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 10px;
  color: #64748b;
}
.kx-dc__stream-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, .7);
}
.kx-dc__stream-action {
  color: #67e8f9;
  font-size: 11px;
  white-space: nowrap;
}
.kx-dc__stream-dev { min-width: 0; }
.kx-dc__stream-device-name {
  color: #e2e8f0;
  font-size: 11.5px;
}
.kx-dc__stream-device-no {
  color: #64748b;
  font-size: 9px;
  letter-spacing: .3px;
}
.kx-dc__stream-count {
  color: #67e8f9;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kx-dc__stream-platform {
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .2);
  color: #7dd3fc;
  font-size: 9px;
  height: 16px;
  line-height: 14px;
}

.kx-dc__running {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}
.kx-dc__running-item {
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .10);
  background: rgba(8, 20, 38, .6);
}
.kx-dc__running-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.kx-dc__running-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #e2e8f0;
}
.kx-dc__running-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  color: #64748b;
}

/* ---------------------------------------------------------------- 资产面板 */
.kx-dc__assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
}
.kx-dc__asset { padding: 4px 0; }
.kx-dc__asset-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.kx-dc__asset-label { font-size: 11px; color: #7c8da6; }
.kx-dc__asset-value { display: flex; align-items: baseline; gap: 3px; }
.kx-dc__asset-value em {
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
}
.kx-dc__asset-value span { font-size: 9px; color: #64748b; }
.kx-dc__asset-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
  overflow: hidden;
}
.kx-dc__asset-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0891b2, #22d3ee);
}
.kx-dc__asset-bar.is-blue { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.kx-dc__asset-bar.is-violet { background: linear-gradient(90deg, #6d28d9, #a78bfa); }
.kx-dc__asset-bar.is-green { background: linear-gradient(90deg, #047857, #34d399); }
.kx-dc__asset-bar.is-amber { background: linear-gradient(90deg, #b45309, #fbbf24); }
.kx-dc__asset-bar.is-pink { background: linear-gradient(90deg, #be185d, #f472b6); }
.kx-dc__asset-bar.is-red { background: linear-gradient(90deg, #be123c, #fb7185); }

/* ---------------------------------------------------------------- 空态 / 骨架 / 错误 */
.kx-dc__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  color: #475569;
  font-size: 12px;
}
.kx-dc__skeleton {
  min-height: 180px;
  justify-content: center;
  gap: 10px;
}
.kx-dc__sk-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(56, 189, 248, .06), rgba(56, 189, 248, .16), rgba(56, 189, 248, .06));
  background-size: 200% 100%;
  animation: kx-dc-shimmer 1.4s ease-in-out infinite;
}
.kx-dc__sk-line.is-title { width: 42%; height: 13px; }
.kx-dc__sk-line.is-short { width: 64%; }
@keyframes kx-dc-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}
.kx-dc__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
  color: #fb7185;
}
.kx-dc__error-title { font-size: 15px; color: #fecdd3; }
.kx-dc__error-desc { font-size: 12px; color: #64748b; }
.kx-dc__error .kx-dc__btn { margin-top: 6px; }

/* ---------------------------------------------------------------- 滚动条 */
.kx-dc ::-webkit-scrollbar { width: 6px; height: 6px; }
.kx-dc ::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(56, 189, 248, .22); }
.kx-dc ::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1500px) {
  .kx-dc__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kx-dc__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .kx-dc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-dc__panel.span-3 { grid-column: span 2; }
  .kx-dc__alerts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .kx-dc { margin-left: calc(var(--kx-page-padding) * -1); margin-right: calc(var(--kx-page-padding) * -1); }
  .kx-dc__grid { grid-template-columns: minmax(0, 1fr); }
  .kx-dc__panel.span-2,
  .kx-dc__panel.span-3 { grid-column: span 1; }
  .kx-dc__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kx-dc__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kx-dc__meta { width: 100%; }
  .kx-dc__clock { display: none; }
}
@media (max-width: 640px) {
  .kx-dc__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-dc__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-dc__alerts { grid-template-columns: minmax(0, 1fr); }
  .kx-dc__stream-item { grid-template-columns: 44px 6px minmax(0, 1fr) 64px; }
  .kx-dc__stream-head { display: none; }
  .kx-dc__stream-count,
  .kx-dc__stream-platform { display: none; }
}

/* 全屏时补满背景 */
.kx-dc:fullscreen {
  margin: 0;
  padding: 24px 32px 32px;
  min-height: 100vh;
  overflow: auto;
}