/* =====================================================================
   决策指挥舱（大屏）  web/css/cockpit.css
   内蒙古电力（集团）有限责任公司 全税种管理平台 —— 乐企申报平台

   约定（改动前务必先读）：
   1) 本文件**只服务指挥舱**，且**一个颜色都不写死**：全部取 themes.css 里的
      --ck-* 变量。--ck-* 是"恒深底 + 恒浅字"的一组键，四套主题的舱体都是深色
      （与 --login-bg 同理），所以这里不存在"浅色主题下要翻转"的情况。
      唯一允许的字面颜色是纯黑（阴影/遮罩），门禁对它白名单。
   2) 舱内的图表颜色走 `currentColor`：SVG 里 stroke/fill 都写 currentColor，
      由这里的类把 `color` 指到对应的 --ck-* 变量。换主题只改 CSS。
   3) 舱内会出现 ui.js 生成的通用件（表格 .tb、下拉 .select、按钮 .btn），
      它们默认用 --c-*（浅色主题下是深字），压在深舱底上会"深字压深底"。
      所以本文件必须用 `.ck` 前缀（特异度 0,2,0）把这些通用件覆盖一遍。
   ===================================================================== */

/* ---------------- 舱体 ---------------- */
.ck {
  position: relative; overflow: hidden;
  background: var(--ck-bg);
  border: 1px solid var(--ck-border);
  border-radius: 14px;
  box-shadow: var(--ck-shadow), inset 0 1px 0 rgba(var(--ck-accentRGB), .10);
  color: var(--ck-text);
  padding: 18px 20px 22px;
  font-size: 13px;
}
/* 底纹与光晕：纯装饰层，不吃事件 */
.ck-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ck-art .ck-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ck-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ck-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 92% 86% at 30% 8%, #000 34%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 86% at 30% 8%, #000 34%, transparent 100%);
}
.ck-art .ck-glow-a,
.ck-art .ck-glow-b { position: absolute; border-radius: 50%; filter: blur(8px); }
.ck-art .ck-glow-a {
  width: 620px; height: 620px; left: -200px; top: -260px;
  background: radial-gradient(circle, var(--ck-glow) 0%, transparent 70%);
}
.ck-art .ck-glow-b {
  width: 720px; height: 720px; right: -240px; bottom: -340px;
  background: radial-gradient(circle, var(--ck-glow) 0%, transparent 72%);
  opacity: .7;
}
.ck-in { position: relative; z-index: 1; }

/* ---------------- 舱头 ---------------- */
.ck-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--ck-border-2);
}
.ck-top-l { min-width: 0; }
.ck-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--ck-text);
}
.ck-title .ck-title-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  background: rgba(var(--ck-accentRGB), .18);
  box-shadow: inset 0 0 0 1px var(--ck-border), 0 0 14px rgba(var(--ck-accentRGB), .28);
  color: var(--ck-accent);
}
.ck-sub { margin: 6px 0 0; font-size: 12px; color: var(--ck-text-3); letter-spacing: .3px; }
.ck-top-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ck-clock { text-align: right; line-height: 1.25; }
.ck-clock .t {
  font-family: var(--font-mono); font-size: 19px; font-weight: 600;
  color: var(--ck-text); font-variant-numeric: tabular-nums; letter-spacing: .6px;
}
.ck-clock .d { font-size: 11px; color: var(--ck-text-3); margin-top: 2px; }

/* 舱内下拉/按钮：覆盖通用件（它们默认是浅底深字） */
.ck select.select {
  background: var(--ck-panel-2); color: var(--ck-text);
  border: 1px solid var(--ck-border); border-radius: 6px;
  height: 30px; padding: 0 26px 0 9px; font-size: 12.5px; font-family: var(--font);
}
.ck select.select option { background: var(--ck-panel-2); color: var(--ck-text); }
.ck .btn {
  background: var(--ck-panel-2); color: var(--ck-text);
  border: 1px solid var(--ck-border); border-radius: 6px;
}
.ck .btn:hover { background: rgba(var(--ck-accentRGB), .22); border-color: var(--ck-accent); color: var(--ck-text); }
.ck .btn.btn-primary {
  background: rgba(var(--ck-accentRGB), .9);
  border-color: transparent;
  color: var(--ck-on-accent); font-weight: 600;
}
.ck .btn.btn-primary:hover { background: var(--ck-accent); color: var(--ck-on-accent); }
.ck .field label { color: var(--ck-text-3); font-size: 11.5px; }

/* ---------------- KPI 大卡 ---------------- */
.ck-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ck-kpi {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--ck-panel);
  border: 1px solid var(--ck-border-2);
  border-radius: 10px; padding: 12px 13px 10px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.ck-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ck-accent); opacity: .85;
}
.ck-kpi::after {
  content: ''; position: absolute; right: -26px; top: -26px;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ck-accentRGB), .22) 0%, transparent 70%);
}
.ck-kpi:hover {
  transform: translateY(-2px); border-color: var(--ck-border);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
.ck-kpi-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-kpi-lb { font-size: 12px; color: var(--ck-text-3); letter-spacing: .3px; }
.ck-kpi-delta {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 16px;
  padding: 0 5px; border-radius: 8px; background: rgba(var(--ck-accentRGB), .16);
  color: var(--ck-accent); white-space: nowrap;
}
.ck-kpi-v {
  margin-top: 6px; display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.ck-kpi-v .n {
  font-size: 25px; font-weight: 700; line-height: 1.1; color: var(--ck-text);
  text-shadow: 0 0 16px rgba(var(--ck-accentRGB), .35);
}
.ck-kpi-v .u { font-size: 11.5px; color: var(--ck-text-3); }
.ck-kpi-spark { margin-top: 8px; height: 30px; }
.ck-kpi-foot { margin-top: 6px; font-size: 11px; color: var(--ck-text-3); }

/* 色调：只改"左边条 / 光斑 / 数字辉光"，不改文字色，保证对比度恒定 */
.ck-kpi.is-ok::before { background: var(--ck-ok); }
.ck-kpi.is-ok .ck-kpi-v .n { text-shadow: 0 0 16px rgba(var(--ck-okRGB), .34); }
.ck-kpi.is-warn::before { background: var(--ck-warn); }
.ck-kpi.is-warn .ck-kpi-v .n { text-shadow: 0 0 16px rgba(var(--ck-warnRGB), .34); }
.ck-kpi.is-danger::before { background: var(--ck-danger); }
.ck-kpi.is-danger .ck-kpi-v .n { text-shadow: 0 0 16px rgba(var(--ck-dangerRGB), .34); }
.ck-kpi.is-danger .ck-kpi-lb { color: var(--ck-text-2); }

/* ---------------- 面板与栅格 ---------------- */
.ck-row { display: grid; gap: 12px; margin-top: 12px; }
.ck-row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-row.c3 { grid-template-columns: minmax(0, 300px) minmax(0, 1.55fr) minmax(0, 1fr); }
.ck-row.c2-13 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.ck-panel {
  position: relative; min-width: 0;
  background: var(--ck-panel);
  border: 1px solid var(--ck-border-2);
  border-radius: 10px;
  display: flex; flex-direction: column;
}
.ck-panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--ck-border-2); flex-wrap: wrap;
}
.ck-panel-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ck-text); letter-spacing: .4px;
}
.ck-panel-t::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: var(--ck-accent); box-shadow: 0 0 8px rgba(var(--ck-accentRGB), .7);
}
.ck-panel-t .hint { font-size: 11px; font-weight: 400; color: var(--ck-text-3); }
.ck-panel-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ck-panel-bd { padding: 14px; flex: 1; min-width: 0; }
.ck-panel-bd.tight { padding: 0; }
.ck-empty { padding: 30px 0; text-align: center; font-size: 12.5px; color: var(--ck-text-3); }

/* ---------------- 环形仪表 ---------------- */
.ck-ring-wrap { display: flex; align-items: center; justify-content: center; padding: 4px 0 10px; }
.ck-ring { max-width: 208px; max-height: 208px; }
.ck-ring-track { fill: none; stroke: var(--ck-track); }
.ck-ring-arc {
  fill: none; stroke: var(--ck-accent); stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(var(--ck-accentRGB), .65));
  transition: stroke-dashoffset .6s ease;
}
.ck-ring-ticks line { stroke: var(--ck-text-3); opacity: .42; }
.ck-ring-num { fill: var(--ck-text); font-family: var(--font-mono); font-size: 34px; font-weight: 700; }
.ck-ring-unit { fill: var(--ck-text-3); font-size: 13px; }
.ck-ring-sub { fill: var(--ck-text-3); font-size: 11px; letter-spacing: .4px; }
.ck-ring.is-ok .ck-ring-arc { stroke: var(--ck-ok); filter: drop-shadow(0 0 6px rgba(var(--ck-okRGB), .6)); }
.ck-ring.is-warn .ck-ring-arc { stroke: var(--ck-warn); filter: drop-shadow(0 0 6px rgba(var(--ck-warnRGB), .6)); }
.ck-ring.is-danger .ck-ring-arc { stroke: var(--ck-danger); filter: drop-shadow(0 0 6px rgba(var(--ck-dangerRGB), .6)); }

/* 环旁读数：两列小指标 */
.ck-ring-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ck-mini {
  background: var(--ck-panel-2); border: 1px solid var(--ck-border-2);
  border-radius: 8px; padding: 8px 10px; min-width: 0;
}
.ck-mini .k { font-size: 11px; color: var(--ck-text-3); }
.ck-mini .v {
  margin-top: 3px; font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  color: var(--ck-text); font-variant-numeric: tabular-nums;
}
.ck-mini .v small { font-size: 11px; font-weight: 400; color: var(--ck-text-3); margin-left: 3px; }

/* ---------------- 折线图 ---------------- */
.ck-line { display: block; }
.ck-line-grid line { stroke: var(--ck-border-2); }
.ck-line-grid text { fill: var(--ck-text-3); font-size: 10.5px; font-family: var(--font-mono); }
.ck-line-x text { fill: var(--ck-text-3); font-size: 10.5px; }
.ck-line-s { color: var(--ck-accent); }
.ck-line-stroke {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(var(--ck-accentRGB), .5));
}
.ck-line-area { fill: currentColor; opacity: .16; }
.ck-line-dots circle { fill: var(--ck-panel-2); stroke: currentColor; stroke-width: 2; }
.ck-line-s.is-ok { color: var(--ck-ok); }
.ck-line-s.is-warn { color: var(--ck-warn); }
.ck-line-s.is-2 { color: var(--ck-accent-2); }

/* ---------------- 迷你折线 ---------------- */
.ck-spark { display: block; color: var(--ck-accent); }
.ck-spark-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ck-spark-area { fill: currentColor; opacity: .18; }
.ck-spark.is-ok { color: var(--ck-ok); }
.ck-spark.is-warn { color: var(--ck-warn); }
.ck-spark.is-danger { color: var(--ck-danger); }

/* ---------------- 横向条形排名 ---------------- */
.ck-rank { display: flex; flex-direction: column; gap: 7px; }
.ck-rank-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 7px;
  transition: background .15s;
}
.ck-rank-row:hover { background: rgba(var(--ck-accentRGB), .10); }
.ck-rk-i {
  font-family: var(--font-mono); font-size: 11px; color: var(--ck-text-3);
  text-align: center; letter-spacing: -.5px;
}
.ck-rank-row:nth-child(1) .ck-rk-i,
.ck-rank-row:nth-child(2) .ck-rk-i,
.ck-rank-row:nth-child(3) .ck-rk-i { color: var(--ck-accent); font-weight: 700; }
.ck-rk-body { min-width: 0; }
.ck-rk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ck-rk-name {
  font-size: 12.5px; color: var(--ck-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-rk-val { font-family: var(--font-mono); font-size: 12px; color: var(--ck-text); white-space: nowrap; }
.ck-rk-track {
  position: relative; height: 7px; margin-top: 5px; border-radius: 3.5px;
  /* 轨道要"退到后面去"：太亮会和填充条混在一起，看成分不清 1 条与 3 条的长度差 */
  background: var(--ck-track); overflow: hidden;
}
.ck-rk-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--ck-accentRGB), .55), var(--ck-accent));
  box-shadow: 0 0 10px rgba(var(--ck-accentRGB), .5);
  transition: width .5s ease;
}
.ck-rank-row.is-ok .ck-rk-fill { background: linear-gradient(90deg, rgba(var(--ck-okRGB), .5), var(--ck-ok)); box-shadow: 0 0 10px rgba(var(--ck-okRGB), .45); }
.ck-rank-row.is-warn .ck-rk-fill { background: linear-gradient(90deg, rgba(var(--ck-warnRGB), .5), var(--ck-warn)); box-shadow: 0 0 10px rgba(var(--ck-warnRGB), .45); }
.ck-rank-row.is-danger .ck-rk-fill { background: linear-gradient(90deg, rgba(var(--ck-dangerRGB), .5), var(--ck-danger)); box-shadow: 0 0 10px rgba(var(--ck-dangerRGB), .45); }
.ck-rk-rate {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ck-text-2);
  min-width: 46px; text-align: right; font-variant-numeric: tabular-nums;
}

/* ---------------- 分段占比条 ---------------- */
.ck-seg { display: flex; flex-direction: column; gap: 10px; }
.ck-seg-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--ck-track); }
.ck-seg-part { height: 100%; transition: width .5s ease; }
.ck-seg-part { background: var(--ck-accent); }
.ck-seg-part.is-2 { background: var(--ck-accent-2); }
.ck-seg-part.is-ok { background: var(--ck-ok); }
.ck-seg-part.is-warn { background: var(--ck-warn); }
.ck-seg-part.is-danger { background: var(--ck-danger); }
.ck-seg-part.is-mute { background: var(--ck-text-3); }
.ck-seg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ck-seg-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ck-text-2); }
.ck-seg-lg b { font-family: var(--font-mono); color: var(--ck-text); font-weight: 600; }
.ck-seg-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--ck-accent); flex: 0 0 8px; }
.ck-seg-dot.is-2 { background: var(--ck-accent-2); }
.ck-seg-dot.is-ok { background: var(--ck-ok); }
.ck-seg-dot.is-warn { background: var(--ck-warn); }
.ck-seg-dot.is-danger { background: var(--ck-danger); }
.ck-seg-dot.is-mute { background: var(--ck-text-3); }

/* ---------------- 线性量表 ---------------- */
.ck-gauge { display: flex; flex-direction: column; gap: 6px; }
.ck-gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ck-gauge-label { font-size: 11.5px; color: var(--ck-text-3); }
.ck-gauge-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ck-text); }
.ck-gauge-track {
  position: relative; height: 9px; border-radius: 5px;
  background: var(--ck-track); overflow: hidden;
}
.ck-gauge-ticks { position: absolute; inset: 0; display: flex; }
.ck-gauge-ticks i { flex: 1; border-right: 1px solid rgba(0, 0, 0, .28); }
.ck-gauge-ticks i:last-child { border-right: 0; }
.ck-gauge-fill {
  position: relative; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, rgba(var(--ck-accentRGB), .5), var(--ck-accent));
  box-shadow: 0 0 10px rgba(var(--ck-accentRGB), .45);
  transition: width .5s ease;
}
.ck-gauge.is-ok .ck-gauge-fill { background: linear-gradient(90deg, rgba(var(--ck-okRGB), .5), var(--ck-ok)); }
.ck-gauge.is-warn .ck-gauge-fill { background: linear-gradient(90deg, rgba(var(--ck-warnRGB), .5), var(--ck-warn)); }
.ck-gauge.is-danger .ck-gauge-fill { background: linear-gradient(90deg, rgba(var(--ck-dangerRGB), .5), var(--ck-danger)); }
.ck-gauge-list { display: grid; gap: 12px; }

/* ---------------- 状态灯带 ---------------- */
.ck-lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ck-lamp {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: var(--ck-panel-2); border: 1px solid var(--ck-border-2);
  border-radius: 8px; padding: 9px 11px;
}
.ck-lamp-dot {
  width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%;
  background: var(--ck-text-3);
}
.ck-lamp-txt { min-width: 0; }
.ck-lamp-label { font-size: 11px; color: var(--ck-text-3); }
.ck-lamp-value {
  font-size: 12.5px; color: var(--ck-text); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-lamp.is-ok .ck-lamp-dot { background: var(--ck-ok); box-shadow: 0 0 9px rgba(var(--ck-okRGB), .85); }
.ck-lamp.is-warn .ck-lamp-dot { background: var(--ck-warn); box-shadow: 0 0 9px rgba(var(--ck-warnRGB), .85); }
.ck-lamp.is-danger .ck-lamp-dot { background: var(--ck-danger); box-shadow: 0 0 9px rgba(var(--ck-dangerRGB), .85); }
.ck-lamp.is-danger { border-color: rgba(var(--ck-dangerRGB), .5); }
.ck-lamp.is-ok .ck-lamp-dot, .ck-lamp.is-warn .ck-lamp-dot, .ck-lamp.is-danger .ck-lamp-dot {
  animation: ckPulse 2.4s ease-in-out infinite;
}
@keyframes ckPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .ck-lamp.is-ok .ck-lamp-dot, .ck-lamp.is-warn .ck-lamp-dot, .ck-lamp.is-danger .ck-lamp-dot { animation: none; }
  .ck-kpi, .ck-rk-fill, .ck-gauge-fill, .ck-ring-arc, .ck-seg-part { transition: none; }
}

/* ---------------- 预警墙 ---------------- */
.ck-wall { display: flex; flex-direction: column; gap: 7px; max-height: 316px; overflow-y: auto; }
.ck-alert {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--ck-panel-2); border-left: 3px solid var(--ck-text-3);
}
.ck-alert.is-danger { border-left-color: var(--ck-danger); background: rgba(var(--ck-dangerRGB), .10); }
.ck-alert.is-warn { border-left-color: var(--ck-warn); background: rgba(var(--ck-warnRGB), .09); }
.ck-alert.is-ok { border-left-color: var(--ck-ok); background: rgba(var(--ck-okRGB), .09); }
.ck-alert-t { font-size: 12.5px; color: var(--ck-text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-alert-d { font-size: 11px; color: var(--ck-text-3); grid-column: 1 / 2; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-alert-v {
  grid-column: 2 / 3; grid-row: 1 / 3; align-self: center;
  font-family: var(--font-mono); font-size: 12px; white-space: nowrap;
  color: var(--ck-text-2); text-align: right;
}
.ck-alert.is-danger .ck-alert-v { color: var(--ck-danger); font-weight: 600; }
.ck-alert.is-warn .ck-alert-v { color: var(--ck-warn); font-weight: 600; }

/* ---------------- 舱内通用件覆盖 ----------------
   这些件由 ui.js 生成，默认用 --c-*（浅底深字）。压在深舱底上必须整体翻过来，
   否则就是"深字压深底"——不报错、测试也全绿，只是字看不见。 */
.ck .ck-panel-bd .table-wrap { max-height: 320px; overflow: auto; }
.ck table.tb { font-size: 12.5px; }
.ck table.tb th {
  background: var(--ck-panel-2); color: var(--ck-text-3);
  border-bottom: 1px solid var(--ck-border-2); font-size: 11.5px;
}
.ck table.tb td { color: var(--ck-text-2); border-bottom: 1px solid var(--ck-border-2); }
.ck table.tb tbody tr:hover,
.ck table.tb tbody tr:hover > td { background: rgba(var(--ck-accentRGB), .10); }
.ck table.tb .empty { color: var(--ck-text-3); }
.ck table.tb td.num, .ck table.tb td.mono { color: var(--ck-text); }
.ck table.tb th.act, .ck table.tb td.act {
  background: var(--ck-panel-2); box-shadow: inset 1px 0 0 var(--ck-border-2);
}
.ck table.tb tbody tr:hover > td.act { background: var(--ck-panel-2); }
.ck .tag { border-width: 1px; }
.ck .tag-blue { background: rgba(var(--ck-accentRGB), .18); color: var(--ck-text); border-color: var(--ck-border); }
.ck .tag-green { background: rgba(var(--ck-okRGB), .16); color: var(--ck-text); border-color: rgba(var(--ck-okRGB), .4); }
.ck .tag-orange { background: rgba(var(--ck-warnRGB), .16); color: var(--ck-text); border-color: rgba(var(--ck-warnRGB), .4); }
.ck .tag-red { background: rgba(var(--ck-dangerRGB), .16); color: var(--ck-text); border-color: rgba(var(--ck-dangerRGB), .42); }
.ck .tag-cyan { background: rgba(var(--ck-accentRGB), .16); color: var(--ck-text); border-color: var(--ck-border); }
.ck .tag-gray { background: var(--ck-track); color: var(--ck-text-2); border-color: var(--ck-border-2); }
.ck .bar-track { background: var(--ck-track); }
.ck .bar-track .bar-fill { background: var(--ck-accent); }
.ck .bar-track .bar-fill.ok { background: var(--ck-ok); }
.ck .bar-track .bar-fill.warn { background: var(--ck-warn); }
.ck .loading { color: var(--ck-text-3); }
.ck .alert { border: 1px solid var(--ck-border-2); background: var(--ck-panel-2); color: var(--ck-text); }

/* ---------------- 分档 ---------------- */
/* 中屏：KPI 由 6 列降为 3 列，三栏行转为两栏 */
@media (max-width: 1500px) {
  .ck-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-row.c3 { grid-template-columns: minmax(0, 260px) minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  .ck-row.c3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ck-row.c3 > .ck-panel:first-child { grid-column: 1 / -1; }
  .ck-row.c2-13 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .ck { padding: 14px 14px 18px; border-radius: 12px; }
  .ck-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-row.c2, .ck-row.c3 { grid-template-columns: minmax(0, 1fr); }
  .ck-title { font-size: 17px; }
  .ck-top { align-items: flex-start; }
  .ck-top-r { width: 100%; justify-content: space-between; }
}
@media (max-width: 620px) {
  .ck-kpis { grid-template-columns: minmax(0, 1fr); }
  .ck-kpi-v .n { font-size: 22px; }
  .ck-clock .t { font-size: 16px; }
  .ck-ring { max-width: 168px; max-height: 168px; }
  .ck-rank-row { grid-template-columns: 20px minmax(0, 1fr); }
  .ck-rk-rate { display: none; }
}