/* ============================================================
   Sparkix Dashboard v2 · 整合升级方案
   Phase 1 (微交互) + Phase 2 (核心升级) + Phase 4 (创意层)
   ============================================================ */

/* ---------- 粒子画布 ---------- */
#particleCanvas {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
}

/* ---------- 数字滚轮动画 ---------- */
.stat-value {
  display: inline-block;
  transition: none;
  font-variant-numeric: tabular-nums;
}
.stat-value.rolling {
  animation: rollNumber 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rollNumber {
  0% { transform: translateY(12px); opacity: 0; }
  60% { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- 卡片3D视差 ---------- */
.glass-card {
  transition: transform 0.15s ease-out, border-color var(--transition-normal), box-shadow var(--transition-normal);
  will-change: transform;
}
.glass-card.tilt-active {
  transition: transform 0.05s linear, border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* ---------- 骨架屏波光 ---------- */
.skeleton-pulse {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.02) 25%,
    rgba(255,138,0,0.08) 50%,
    rgba(255,255,255,0.02) 75%
  );
  background-size: 200% 100%;
  animation: skeletonWave 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeletonWave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.panel.skeleton .panel-body > * {
  height: 14px;
  margin-bottom: 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.02) 25%,
    rgba(255,138,0,0.08) 50%,
    rgba(255,255,255,0.02) 75%
  );
  background-size: 200% 100%;
  animation: skeletonWave 1.5s ease-in-out infinite;
  border-radius: 4px;
}
.panel.skeleton .panel-body > *:nth-child(2) { width: 85%; }
.panel.skeleton .panel-body > *:nth-child(3) { width: 70%; }
.panel.skeleton .panel-body > *:nth-child(4) { width: 90%; }

/* ---------- 环形图卡片 ---------- */
.stats-grid-v2 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 10px;
}
.stat-card-v2 {
  padding: 16px 18px;
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  animation: fadeUp .6s ease both;
  position: relative; overflow: hidden;
}
.stat-card-v2::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-faint), transparent);
  opacity: 0.15;
}
.donut-wrap {
  position: relative; width: 72px; height: 72px; flex-shrink: 0;
}
.donut-svg {
  width: 72px; height: 72px; transform: rotate(-90deg);
}
.donut-bg-circle {
  fill: none; stroke: rgba(255,255,255,0.04); stroke-width: 5;
}
.donut-fg-circle {
  fill: none; stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.donut-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.donut-center-value {
  font-size: 18px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink); line-height: 1;
}
.donut-center-unit {
  font-size: 9px; color: var(--ink-faint);
  display: block; margin-top: 1px;
}
.stat-card-v2 .stat-info-v2 {
  flex: 1; min-width: 0;
}
.stat-card-v2 .stat-label-v2 {
  font-size: 11px; color: var(--ink-dim); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.stat-card-v2 .stat-trend-v2 {
  font-size: 11px; color: var(--ink-faint); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.stat-card-v2 .stat-trend-v2 .trend-up { color: #10b981; }
.stat-card-v2 .stat-trend-v2 .trend-down { color: var(--o1); }
.stat-card-v2 .sparkline-wrap {
  width: 100%; height: 24px; margin-top: 4px; position: relative;
}
.stat-card-v2 .sparkline-wrap canvas {
  width: 100%; height: 100%; border-radius: 2px;
}

/* ---------- AI 智能摘要条 ---------- */
.summary-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(255,80,0,0.06), rgba(255,138,0,0.04));
  border: 1px solid rgba(255,138,0,0.12);
  border-radius: var(--radius-md);
  overflow: hidden; position: relative;
  min-height: 44px;
}
.summary-bar::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--o1), var(--o3));
  border-radius: 0 2px 2px 0;
}
.summary-icon {
  font-size: 18px; flex-shrink: 0; width: 28px; text-align: center;
}
.summary-text {
  flex: 1; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden;
  position: relative;
}
.summary-text-inner {
  display: inline-block;
  animation: summaryScroll 0.5s ease;
}
@keyframes summaryScroll {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.summary-dots {
  display: flex; gap: 4px; flex-shrink: 0;
}
.summary-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); opacity: 0.3;
  transition: all 0.3s;
}
.summary-dot.active {
  background: var(--o3); opacity: 1;
  box-shadow: 0 0 6px rgba(255,138,0,0.5);
}
.summary-close {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); cursor: pointer; border-radius: 4px;
  transition: all 0.2s;
}
.summary-close:hover { color: var(--ink); background: rgba(255,255,255,0.05); }

/* ---------- Widget 控制栏 ---------- */
.widget-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.widget-toolbar-left {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.widget-toolbar-title {
  font-size: 12px; color: var(--ink-faint);
  font-weight: 500; margin-right: 8px;
}
.widget-toolbar-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; font-size: 11px; font-weight: 500;
  border-radius: 6px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-edge);
  color: var(--ink-dim); cursor: pointer;
  font-family: inherit; transition: all 0.2s;
}
.widget-toolbar-btn:hover {
  border-color: rgba(255,138,0,0.3);
  color: var(--o3); background: rgba(255,138,0,0.05);
}
.widget-toolbar-btn.active {
  border-color: var(--o3);
  color: var(--o3); background: rgba(255,138,0,0.1);
}
.widget-toolbar-sep {
  width: 1px; height: 18px; background: var(--glass-edge);
}
.theme-toggle-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 14px;
  border-radius: 8px; border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,0.03);
  color: var(--ink-dim); cursor: pointer;
  transition: all 0.2s;
}
.theme-toggle-btn:hover {
  border-color: var(--o3); color: var(--o3);
  background: rgba(255,106,0,0.05);
}

/* ---------- Widget 菜单（添加面板弹出） ---------- */
.widget-menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.widget-menu-overlay.open { display: flex; }
.widget-menu-panel {
  width: 420px; max-height: 70vh;
  background: rgba(7,11,26,0.96); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.widget-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(140,160,220,0.08);
}
.widget-menu-header h3 { font-size: 15px; font-weight: 600; }
.widget-menu-header button {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); cursor: pointer;
  background: none; border: none; font-family: inherit;
  transition: all 0.2s;
}
.widget-menu-header button:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.widget-menu-list {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.widget-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s;
}
.widget-menu-item:hover {
  background: rgba(255,138,0,0.04);
  border-color: rgba(255,138,0,0.12);
}
.widget-menu-item.added {
  opacity: 0.5; pointer-events: none;
  border-color: rgba(255,138,0,0.08);
}
.widget-menu-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.widget-menu-info { flex: 1; }
.widget-menu-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.widget-menu-desc { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.widget-menu-status {
  font-size: 10px; color: var(--o3); font-weight: 500;
}

/* ---------- Widget 网格 ---------- */
.dashboard-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  min-height: 0;
  transition: grid-template-columns 0.3s;
}
.widget-panel {
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 180px;
  position: relative;
  transition: all 0.3s ease;
}
.widget-panel.dragging {
  opacity: 0.6;
  transform: scale(0.96);
  z-index: 50;
}
.widget-panel.sortable-chosen {
  border-color: var(--o3);
  box-shadow: 0 0 20px rgba(255,138,0,0.15);
}
.widget-panel.sortable-ghost {
  border-color: var(--o1);
  border-style: dashed;
  background: rgba(255,80,0,0.04);
  box-shadow: none;
}
.widget-panel.sortable-ghost > * { opacity: 0; }
.widget-panel.drag-over {
  border-color: var(--o1) !important;
  border-style: dashed;
  box-shadow: 0 0 16px rgba(255,80,0,0.12);
}
.widget-panel.dragging {
  opacity: 0.5;
  transform: scale(0.96);
  z-index: 50;
}
.widget-panel .widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
  cursor: grab;
  user-select: none;
}
.widget-panel .widget-header:active { cursor: grabbing; }
.widget-panel .widget-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.widget-panel .widget-title .widget-badge {
  font-size: 8px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(255,138,0,0.1); color: var(--o3);
}
.widget-panel .widget-actions {
  display: flex; gap: 2px;
}
.widget-panel .widget-action-btn {
  width: 24px; height: 24px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); cursor: pointer;
  background: none; border: none; font-family: inherit;
  font-size: 12px; transition: all 0.2s;
}
.widget-panel .widget-action-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
.widget-panel .widget-action-btn.close-btn:hover {
  color: var(--o1);
  background: rgba(255,80,0,0.1);
}
.widget-panel .widget-body {
  flex: 1; padding: 4px 16px 14px;
  overflow-y: auto;
  min-height: 0;
}
.widget-panel .widget-body::-webkit-scrollbar { width: 3px; }
.widget-panel .widget-body::-webkit-scrollbar-thumb {
  background: rgba(255,138,0,0.15);
  border-radius: 3px;
}

/* Widget 尺寸 */
.widget-panel[data-size="1x1"] { grid-column: span 1; grid-row: span 1; }
.widget-panel[data-size="2x1"] { grid-column: span 2; grid-row: span 1; }
.widget-panel[data-size="1x2"] { grid-column: span 1; grid-row: span 2; }
.widget-panel[data-size="2x2"] { grid-column: span 2; grid-row: span 2; }

/* 尺寸切换弹出 */
.size-picker {
  position: absolute; top: 100%; right: 12px; z-index: 30;
  background: rgba(7,11,26,0.96); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  border-radius: 8px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
  flex-direction: column; gap: 2px;
}
.size-picker.open { display: flex; }
.size-option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 4px;
  font-size: 11px; color: var(--ink-dim); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  background: none; border: none; font-family: inherit;
}
.size-option:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
.size-option.active { color: var(--o3); background: rgba(255,138,0,0.08); }
.size-grid-preview {
  display: inline-grid; gap: 1px; flex-shrink: 0;
}
.size-grid-preview span {
  width: 8px; height: 8px; border-radius: 1px;
  border: 1px solid currentColor; opacity: 0.4;
}
.size-grid-preview span.filled { opacity: 1; background: currentColor; }

/* ---------- 数据管道拓扑图 (Canvas) ---------- */
.topology-wrap {
  position: relative; width: 100%; flex: 1;
  min-height: 160px;
}
.topology-wrap canvas {
  width: 100%; height: 100%;
  border-radius: 6px;
}

/* ---------- 词云 (Canvas) ---------- */
.wordcloud-wrap {
  position: relative; width: 100%; flex: 1;
  min-height: 160px;
}
.wordcloud-wrap canvas {
  width: 100%; height: 100%;
  border-radius: 6px;
}

/* ---------- 生产指标 KPI ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 8px;
}
.kpi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border-radius: 10px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.kpi-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.kpi-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-deep);
}
.kpi-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kpi-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.kpi-label {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.kpi-footer {
  padding: 4px 12px 8px;
  text-align: right;
}
.kpi-time {
  font-size: 10px;
  color: var(--ink-faint);
}

/* ---------- 3D数据球 (Three.js 容器) ---------- */
.sphere-wrap {
  position: relative; width: 100%; flex: 1;
  min-height: 200px; overflow: hidden;
  border-radius: var(--radius-sm);
}
.sphere-wrap canvas {
  width: 100% !important; height: 100% !important;
  display: block;
}

/* ---------- 活动流增强 ---------- */
.activity-feed-v2 {
  display: flex; flex-direction: column; gap: 4px;
}
.af-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 8px; border-radius: 6px;
  transition: background 0.2s;
  animation: afFadeIn 0.4s ease;
}
@keyframes afFadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.af-item:hover { background: rgba(255,255,255,0.02); }
.af-item.new-item {
  background: rgba(255,138,0,0.04);
  border-left: 2px solid var(--o3);
}
.af-dot {
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: 5px; flex-shrink: 0;
}
.af-dot.dot-cyan { background: var(--o3); box-shadow: 0 0 6px rgba(255,138,0,0.4); }
.af-dot.dot-magenta { background: var(--o1); box-shadow: 0 0 6px rgba(255,80,0,0.4); }
.af-dot.dot-violet { background: var(--o2); box-shadow: 0 0 6px rgba(255,106,0,0.4); }
.af-dot.dot-amber { background: var(--o2); box-shadow: 0 0 6px rgba(255,106,0,0.4); }
.af-content { flex: 1; }
.af-content p { font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin: 0; }
.af-content strong { color: var(--ink); font-weight: 600; }
.af-time { font-size: 10px; color: var(--ink-faint); margin-left: 6px; }

/* ---------- 系统资源 Widget 增强 ---------- */
.sysres-v2 { padding: 2px 0; }
.sysres-v2-item { margin-bottom: 10px; }
.sysres-v2-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-dim); margin-bottom: 3px;
}
.sysres-v2-label .sysres-val {
  margin-left: auto; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink);
}
.sysres-v2-bar {
  height: 5px; background: rgba(255,255,255,0.04);
  border-radius: 3px; overflow: hidden; position: relative;
}
.sysres-v2-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sysres-v2-footer {
  font-size: 10px; color: var(--ink-faint);
  text-align: right; margin-top: 4px;
}

/* ---------- 智能体 Widget 增强 ---------- */
.agent-list-v2 { display: flex; flex-direction: column; gap: 3px; }

/* ---------- 快捷操作 Widget 增强 ---------- */
.quick-actions-v2 { display: flex; flex-direction: column; gap: 2px; }
.qa-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  transition: all 0.2s; cursor: pointer;
}
.qa-item:hover { background: rgba(255,138,0,0.04); }
.qa-item:active { transform: scale(0.98); }
.qa-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.qa-icon.qa-cyan { background: rgba(255,138,0,0.1); }
.qa-icon.qa-magenta { background: rgba(255,80,0,0.1); }
.qa-icon.qa-amber { background: rgba(255,106,0,0.1); }
.qa-icon.qa-violet { background: rgba(255,106,0,0.1); }
.qa-info { flex: 1; }
.qa-name { font-size: 12px; font-weight: 500; color: var(--ink); }
.qa-desc { font-size: 10px; color: var(--ink-faint); }

/* ---------- 仪表盘 v2 页面适配 ---------- */
#page-dashboard.active {
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
}
#page-dashboard.active .stats-grid-v2 { flex-shrink: 0; }
#page-dashboard.active .summary-bar { flex-shrink: 0; }
#page-dashboard.active .widget-toolbar { flex-shrink: 0; }
#page-dashboard.active .dashboard-grid-v2 {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-bottom: 8px;
}
#page-dashboard.active .dashboard-grid-v2::-webkit-scrollbar { width: 3px; }
#page-dashboard.active .dashboard-grid-v2::-webkit-scrollbar-thumb {
  background: rgba(255,138,0,0.15); border-radius: 3px;
}

/* ---------- 亮色主题 ---------- */
body.theme-light {
  --bg-0: #f5f2ef;
  --bg-1: #ebe6e0;
  --bg-deep: #ddd8d2;
  --bg-card: #f8f5f2;
  --ink: #1a1410;
  --ink-dim: #5a4e42;
  --ink-faint: #8a7c6e;
  --glass: rgba(255,255,255,0.7);
  --glass-edge: rgba(0,0,0,0.12);
  --card-bg: #ffffff;
  --border: #e2ddd8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --widget-bg: rgba(255,255,255,0.5);
  --widget-edge: rgba(0,0,0,0.08);
  /* 高亮色适配浅色 — 橙色系 */
  --o1: #db4d00;
  --o2: #e86600;
  --o3: #f08000;
  /* 兼容旧变量名 — 映射到橙色 */
  --cyan: var(--o3);
  --magenta: var(--o1);
  --violet: var(--o2);
  --gold: var(--o2);
}

/* 侧栏 + 导航 */
body.theme-light .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,243,252,0.95));
}
body.theme-light .nav-item:hover {
  background: rgba(0,0,0,0.04);
}
body.theme-light .nav-item.active {
  background: rgba(219,77,0,0.08);
  border-right-color: var(--o1);
}

/* 顶部栏 */
body.theme-light .topbar {
  background: rgba(255,255,255,0.85);
}

/* 弹窗/模态框 */
body.theme-light .notification-panel,
body.theme-light .user-menu,
body.theme-light .widget-menu-panel,
body.theme-light .size-picker {
  background: rgba(255,255,255,0.95);
}
body.theme-light .modal-content {
  background: rgba(248,250,252,0.98);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
body.theme-light .sparkix-modal-content {
  background: #f0f2f8;
}
body.theme-light .agent-modal {
  background: #f0f2f8;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* 全局搜索下拉 */
body.theme-light .search-dropdown {
  background: rgba(248,250,252,0.98);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* 阅读器 */
body.theme-light .reader-overlay {
  background: rgba(200,206,220,0.7);
}
body.theme-light .reader-modal {
  background: #f0f2f8;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 60px rgba(0,0,0,0.1);
}

/* select option 下拉选项 */
body.theme-light select option {
  background: #f5f7fc;
  color: #161a2e;
}

/* Toast */
body.theme-light .sparkix-toast {
  background: rgba(248,250,252,0.95);
  border-color: rgba(0,0,0,0.08);
  color: #161a2e;
}

/* 仪表盘 */
body.theme-light .donut-bg-circle {
  stroke: rgba(0,0,0,0.04);
}
body.theme-light .summary-bar {
  background: linear-gradient(135deg, rgba(219,77,0,0.04), rgba(240,128,0,0.03));
}

/* 背景装饰 */
body.theme-light .grid-floor { opacity: 0.15; }
body.theme-light .glow-1, body.theme-light .glow-2, body.theme-light .glow-3 { opacity: 0.2; }

/* 通用卡片 */
body.theme-light .glass-card {
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* 按钮 */
body.theme-light .btn-primary {
  box-shadow: 0 4px 14px rgba(219,77,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.15);
}
body.theme-light .btn-outline {
  border-color: rgba(0,0,0,0.12);
  color: var(--ink-dim);
}
body.theme-light .btn-outline:hover {
  border-color: var(--o3);
  color: var(--o3);
}
body.theme-light .btn-ghost {
  color: var(--ink-faint);
}
body.theme-light .btn-ghost:hover {
  background: rgba(0,0,0,0.04);
  color: var(--ink);
}

/* 输入框/表单 */
body.theme-light .form-input {
  background: #f0f2f8;
  border-color: rgba(0,0,0,0.1);
}
body.theme-light .settings-section {
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}
body.theme-light .settings-tab {
  color: var(--ink-faint);
}

/* 监测分组 */
body.theme-light .monitor-account-group {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}
body.theme-light .monitor-account-group:hover {
  border-color: rgba(0,0,0,0.14);
}
body.theme-light .monitor-account-header {
  background: rgba(0,0,0,0.015);
  border-bottom-color: rgba(0,0,0,0.05);
}
body.theme-light .monitor-account-header:hover {
  background: rgba(2,132,199,0.04);
}
body.theme-light .monitor-account-body .monitor-feed-item {
  border-bottom-color: rgba(0,0,0,0.03);
}
body.theme-light .ma-batch-bar {
  background: rgba(0,0,0,0.01);
  border-top-color: rgba(0,0,0,0.04);
}
body.theme-light .mf-deep-body {
  background: rgba(2,132,199,0.04);
  border-left-color: var(--cyan);
}
body.theme-light .mf-select-btn {
  border-color: rgba(0,0,0,0.12);
}

/* 侧边栏底部主题切换钮 */
body.theme-light .theme-toggle-sidebar {
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--ink-faint) !important;
}
body.theme-light .theme-toggle-sidebar:hover {
  border-color: var(--o3) !important;
  color: var(--o3) !important;
  background: rgba(219,77,0,0.06) !important;
}

/* ---------- 公众号管理 light ---------- */
body.theme-light .wechat-mgr-title { color: var(--ink); }
body.theme-light .wechat-mgr-desc { color: var(--ink-dim); }
body.theme-light .wechat-account-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .wechat-account-card:hover {
  border-color: rgba(255,106,0,0.25);
  box-shadow: 0 4px 16px rgba(255,106,0,0.08);
}
body.theme-light .wechat-account-card::before { opacity: 0.4; }
body.theme-light .wechat-account-header {
  border-bottom-color: var(--border);
}
body.theme-light .wechat-account-name { color: var(--ink); }
body.theme-light .wechat-account-status {
  background: rgba(0,0,0,0.03);
  color: var(--ink-faint);
  border-color: var(--border);
}
body.theme-light .wechat-info-item {
  background: rgba(0,0,0,0.02);
  border-color: var(--border);
}
body.theme-light .wechat-info-item:hover {
  background: rgba(99,102,241,0.04);
}
body.theme-light .wechat-info-label { color: var(--ink-faint); }
body.theme-light .wechat-info-value { color: var(--ink); }
body.theme-light .wechat-account-actions .btn-outline {
  background: rgba(0,0,0,0.02);
  border-color: var(--border);
  color: var(--ink-dim);
}
body.theme-light .wechat-account-actions .btn-outline:hover {
  background: rgba(99,102,241,0.06);
  border-color: var(--violet);
  color: var(--violet);
}
body.theme-light .wechat-account-actions .btn-ghost {
  border-color: var(--border);
  color: var(--ink-faint);
}
body.theme-light .wechat-account-actions .btn-ghost:hover {
  background: rgba(0,0,0,0.03);
  color: var(--ink);
}
body.theme-light .wechat-account-actions .btn-danger {
  color: #dc2626;
  border-color: rgba(220,38,38,0.25);
}
body.theme-light .wechat-account-actions .btn-danger:hover {
  background: rgba(220,38,38,0.06);
  border-color: #dc2626;
  color: #dc2626;
}
body.theme-light .wechat-account-actions.quick-links {
  border-top-color: var(--border);
}
body.theme-light .wechat-account-actions.quick-links .btn {
  background: rgba(0,0,0,0.02);
  border-color: var(--border);
  color: var(--ink-faint);
}
body.theme-light .wechat-account-actions.quick-links .btn:hover {
  background: rgba(99,102,241,0.06);
  border-color: rgba(99,102,241,0.25);
  color: var(--violet);
}
body.theme-light .wechat-account-qr {
  background: var(--bg-card);
  border-color: var(--border);
}
body.theme-light .wechat-account-qr .qr-placeholder { color: var(--ink-faint); }
body.theme-light .wechat-publish-section {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .wechat-section-header {
  border-bottom-color: var(--border);
}
body.theme-light .wechat-section-header h3 { color: var(--ink); }
body.theme-light .wechat-publish-item {
  background: rgba(0,0,0,0.015);
  border-color: var(--border);
}
body.theme-light .wechat-publish-title { color: var(--ink); }
body.theme-light .wechat-publish-meta { color: var(--ink-faint); }
body.theme-light .wechat-publish-account {
  background: rgba(0,0,0,0.03);
  color: var(--ink-dim);
}

/* ---------- 系统设置 light ---------- */
body.theme-light .users-form-card,
body.theme-light .role-form-card {
  background: var(--bg-card);
  border-color: rgba(99,102,241,0.2);
  box-shadow: var(--shadow-sm);
}
body.theme-light .users-form-header,
body.theme-light .role-form-header {
  border-bottom-color: var(--border);
}
body.theme-light .users-form-header h3,
body.theme-light .role-form-header h4 { color: var(--ink); }
body.theme-light .form-row label { color: var(--ink-dim); }
body.theme-light .form-row .form-input {
  background: #ffffff;
  border-color: var(--border);
  color: var(--ink);
}
body.theme-light .form-row .form-input:focus {
  background: #ffffff;
  border-color: var(--violet);
}
body.theme-light .permission-checkboxes label {
  background: rgba(0,0,0,0.02);
  border-color: var(--border);
  color: var(--ink-dim);
}
body.theme-light .permission-checkboxes label:hover {
  background: rgba(99,102,241,0.04);
  border-color: rgba(99,102,241,0.2);
}
body.theme-light .permission-checkboxes input[type="checkbox"] {
  accent-color: var(--violet);
}
body.theme-light .users-form-footer,
body.theme-light .role-form-footer {
  border-top-color: var(--border);
}
body.theme-light select.form-input option {
  background: #ffffff;
  color: var(--ink);
}
/* 权限角色卡片 light */
body.theme-light .role-permission-card {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .role-permission-name {
  color: var(--ink);
}
body.theme-light .role-delete-btn {
  color: var(--ink-faint) !important;
}
body.theme-light .role-delete-btn:hover {
  color: #dc2626 !important;
}
/* 用户管理卡片 light */
body.theme-light .user-settings-item {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .user-settings-name {
  color: var(--ink);
}
body.theme-light .user-settings-meta {
  color: var(--ink-dim);
}
body.theme-light .user-settings-toggle {
  color: var(--ink-dim);
}

/* ---------- 数据分析 light ---------- */
body.theme-light .metric-card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .analytics-card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .analytics-card-header {
  border-bottom-color: var(--border);
}
body.theme-light .account-dist-bar {
  background: var(--border);
}
body.theme-light .task-item {
  background: var(--card-bg);
}
body.theme-light .task-progress-bar {
  background: var(--border);
}
body.theme-light .log-item {
  border-bottom-color: var(--border);
}
body.theme-light .user-item {
  border-bottom-color: var(--border);
}
body.theme-light .user-status-badge.enabled {
  background: rgba(5,150,105,0.12);
  color: #059669;
}
body.theme-light .user-status-badge.disabled {
  background: rgba(220,38,38,0.12);
  color: #dc2626;
}

/* ---------- 生产中心 light ---------- */
body.theme-light .compose-card {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .compose-card-header {
  border-bottom-color: var(--border);
}
body.theme-light .compose-card-sidebar {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .compose-card-sidebar .tpl-opt {
  background: rgba(0,0,0,0.02);
}
body.theme-light .compose-card-sidebar .tpl-opt:hover {
  background: rgba(2,132,199,0.04);
  border-color: var(--cyan);
}
body.theme-light .compose-card-sidebar .tpl-opt.selected {
  background: rgba(99,102,241,0.08);
}
body.theme-light .compose-input,
body.theme-light .compose-textarea,
body.theme-light .compose-select,
body.theme-light .auto-select,
body.theme-light .auto-input-time,
body.theme-light .auto-input,
body.theme-light .history-select,
body.theme-light .batch-select,
body.theme-light .batch-input {
  background: #f0f2f8;
  border-color: var(--border);
}
body.theme-light .keyword-compose-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(2,132,199,0.04));
  border-color: rgba(124,58,237,0.15);
}
body.theme-light .tag-check {
  background: rgba(0,0,0,0.02);
}
body.theme-light .tag-check:has(input:checked) {
  background: rgba(2,132,199,0.08);
}
body.theme-light .batch-progress {
  background: #ffffff;
  border-color: rgba(2,132,199,0.15);
}
body.theme-light .bp-bar {
  background: var(--border);
}
body.theme-light .template-select-grid .tpl-opt {
  background: rgba(0,0,0,0.02);
}
body.theme-light .template-select-grid .tpl-opt:hover {
  background: rgba(2,132,199,0.04);
  border-color: var(--cyan);
}
body.theme-light .prod-steps {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-light .kb-status-bar {
  background: rgba(5,150,105,0.06);
  border-color: rgba(5,150,105,0.12);
  color: #059669;
}
body.theme-light .kb-status-text {
  color: var(--ink-dim);
}
body.theme-light .preview-toolbar {
  background: #ffffff;
  border: 1px solid var(--border);
}
body.theme-light .preview-content {
  background: var(--card-bg);
  border: 1px solid var(--border);
}

/* ---------- 通用 hover light 覆盖 ---------- */
body.theme-light .nav-item:hover { background: rgba(0,0,0,0.04); }
body.theme-light .sys-badge-btn:hover { background: rgba(0,0,0,0.04); }
body.theme-light .agent-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .workflow-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .backup-row:hover { background: rgba(0,0,0,0.02); }
body.theme-light .scraper-tab:hover { background: rgba(2,132,199,0.06); color: var(--cyan); }
body.theme-light .btn-ghost:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
body.theme-light .mode-btn:hover { background: rgba(0,0,0,0.03); color: var(--ink-dim); }
body.theme-light .hotlist-tab:hover { background: rgba(2,132,199,0.06); color: var(--cyan); }
body.theme-light .hl-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .tsr-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .search-dropdown .sd-item:hover { background: rgba(0,0,0,0.02); color: var(--ink); }
body.theme-light .nc-source-header:hover { background: rgba(0,0,0,0.02); }
body.theme-light .nc-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .top-article-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .monitor-account-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .monitor-feed-item:hover { background: rgba(0,0,0,0.02); }
body.theme-light .monitor-account-group:hover { border-color: var(--border); }

/* 输入框 light 补充 */
body.theme-light .keyword-input {
  background: #f0f2f8;
  border-color: rgba(124,58,237,0.2);
}
body.theme-light .monitor-input {
  background: #f0f2f8;
  border-color: var(--border);
}
body.theme-light .chat-input input {
  background: #f0f2f8;
  border-color: var(--border);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .stats-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid-v2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .stats-grid-v2 { grid-template-columns: 1fr 1fr; }
  .dashboard-grid-v2 { grid-template-columns: 1fr; }
  .donut-wrap { width: 56px; height: 56px; }
  .donut-svg { width: 56px; height: 56px; }
  .donut-center-value { font-size: 15px; }
  .widget-menu-panel { width: calc(100% - 32px); }
  .summary-text { font-size: 12px; }
}

/* ---------- Toast 提示 ---------- */
.sparkix-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 24px;
  background: rgba(7,11,26,0.92); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 10px;
  color: var(--ink); font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toastIn 0.3s ease;
  pointer-events: none;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sparkix-toast.fade-out {
  animation: toastOut 0.3s ease forwards;
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

/* ── 生产中心 - 线索选题库 ── */
.clue-topic-card {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  cursor: pointer;
  user-select: none;
}
.clue-topic-card:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
  background: rgba(139, 92, 246, 0.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12);
}
.clue-topic-card:active {
  transform: translateY(0) scale(0.98);
}
.clue-pick-badge {
  transition: all 0.2s ease;
}
.clue-topics-loading {
  animation: pulseGlow 1.5s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.clue-topics-empty a {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.clue-topics-grid {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,92,246,0.2) transparent;
}
.clue-topics-grid::-webkit-scrollbar {
  width: 4px;
}
.clue-topics-grid::-webkit-scrollbar-track {
  background: transparent;
}
.clue-topics-grid::-webkit-scrollbar-thumb {
  background: rgba(139,92,246,0.2);
  border-radius: 4px;
}

/* ── 线索采集面板原有样式补强 ── */
.clue-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .clue-layout { grid-template-columns: 1fr; }
}
.clue-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-light);
  margin: 0 0 8px 0;
}
.clue-topic-input {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  resize: vertical;
}
.clue-topic-input:focus {
  border-color: rgba(139,92,246,0.4);
  outline: none;
}
.clue-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.clue-progress {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 8px;
}
.clue-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ink-faint);
}
.clue-progress-step .clue-step-icon {
  width: 20px;
  text-align: center;
}
.clue-progress-step.done {
  color: var(--green);
}
.clue-history-list {
  max-height: 200px;
  overflow-y: auto;
}
.clue-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 12px;
}
.clue-history-item:hover {
  background: rgba(139,92,246,0.08);
}
.clue-history-item .h-topic {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-light);
}
.clue-history-item .h-count {
  color: var(--cyan);
  font-weight: 500;
  flex-shrink: 0;
}
.clue-history-item .h-time {
  color: var(--ink-faint);
  flex-shrink: 0;
}
.clue-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 12px;
}
.clue-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.clue-result-actions {
  display: flex;
  gap: 4px;
}
.clue-result-grid {
  max-height: 360px;
  overflow-y: auto;
}
.clue-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.clue-card .cc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.clue-card .cc-dim {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 4px;
}
.clue-card .cc-dim.dim-data { background: rgba(0,229,255,0.12); color: #00e5ff; }
.clue-card .cc-dim.dim-opinion { background: rgba(139,92,246,0.12); color: #a78bfa; }
.clue-card .cc-dim.dim-philosophy { background: rgba(255,193,7,0.12); color: #fbbf24; }
.clue-card .cc-dim.dim-culture { background: rgba(255,45,126,0.12); color: #ff2d7e; }
.clue-card .cc-dim.dim-logic { background: rgba(16,185,129,0.12); color: #34d399; }
.clue-card .cc-dim.dim-trend { background: rgba(255,184,0,0.12); color: #fbbf24; }
.clue-card .cc-dim.dim-visual { background: rgba(139,92,246,0.12); color: #a78bfa; }
.clue-card .cc-dim.dim-framework { background: rgba(0,212,255,0.12); color: #00d4ff; }
.clue-card .cc-dim.dim-authority { background: rgba(16,185,129,0.12); color: #34d399; }
.clue-card .cc-source { font-size: 11px; color: var(--ink-faint); }
.clue-card .cc-body { font-size: 12px; color: var(--ink-light); line-height: 1.5; margin-bottom: 4px; }
.clue-card .cc-meta { display: flex; gap: 8px; font-size: 11px; }
.clue-card .cc-conf { color: var(--ink-faint); }
.clue-card .cc-heat { color: #f59e0b; }
.cluster-result-card {
  background: rgba(139,92,246,0.05);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.cluster-result-card .cr-topic {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-light);
  margin-bottom: 4px;
}
.cluster-result-card .cr-reason {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.4;
}
.hl-pick-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.hl-pick-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.hl-pick-btn.picked {
  background: rgba(139,92,246,0.3);
  border-color: rgba(139,92,246,0.5);
  color: #fff;
}

/* ============================================================
   驾驶舱 v2 · 真实数据版补丁 (T-20260828-AD41)
   新增：Canvas 图表容器 / 无接口占位 / 空数据态 / 智能体真实列表
        服务端口列 / 动态流圆点 / 健康分降级色
   说明：驾驶舱面板基础样式在 style.css，本文件在其之后加载。
   ============================================================ */

/* Canvas 图表容器（替代未加载的 ECharts 容器） */
.cp-canvas-wrap { position: absolute; inset: 0; padding: 4px 8px 2px; }
.cp-canvas-wrap > canvas { display: block; width: 100%; height: 100%; }
.cp-ch-gauge > canvas { display: block; width: 100%; height: 100%; }

/* 无后端接口 / 无数据 占位 */
.cp-ph {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 10px;
  background: linear-gradient(160deg, rgba(46,26,12,.35), rgba(24,14,7,.3));
}
.cp-ph .cp-ph-ic { font-size: 20px; opacity: .55; filter: grayscale(.35); }
.cp-ph p { margin: 0; font-size: 12px; letter-spacing: 1.5px; color: var(--t3); }
.cp-ph em {
  font-style: normal; font-family: var(--num); font-size: 9px; letter-spacing: .5px;
  color: #7A6A58; border: 1px dashed rgba(255,138,0,.28); border-radius: 3px; padding: 1px 6px;
}

/* 接口失败 / 空数据 行内提示 */
.cp-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 40px; padding: 12px 8px;
  font-size: 11px; letter-spacing: 1px; color: var(--t3);
  border: 1px dashed rgba(255,138,0,.2); background: rgba(255,106,0,.03);
}

/* 智能体真实列表（名称/图标/标签/在线状态） */
.cp-rank-list {
  position: absolute; inset: 0; padding: 4px 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.cp-rank-item .r-ic { font-size: 14px; width: 20px; text-align: center; flex: none; }
.cp-rank-item .r-name { flex: 1; font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rank-item .r-tag {
  font-size: 9px; color: #D8B98A; border: 1px solid rgba(255,197,61,.22);
  padding: 0 5px; flex: none; letter-spacing: 1px;
}
.cp-rank-item .r-status { font-size: 9px; font-weight: 600; padding: 1px 6px; flex: none; letter-spacing: 1px; }
.cp-rank-item .r-status.on { color: #7FE8B8; background: rgba(61,220,151,.1); }
.cp-rank-item .r-status.off { color: #A9B6C4; background: rgba(143,160,181,.12); }

/* 服务状态：端口 + 已停止（灰） */
.cp-service-row .s-port { font-family: var(--num); font-size: 9px; color: var(--t3); margin-left: 6px; }
.cp-service-row .s-name { display: flex; align-items: baseline; }
.s-off { color: #A9B6C4; background: rgba(143,160,181,.12); }
.cp-service-list { justify-content: flex-start; overflow: hidden; }

/* 动态流真实条目圆点 */
.cp-f-amt { display: flex; align-items: center; justify-content: flex-end; }
.cp-f-dot { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cp-f-dot.p { background: #B98AFF; box-shadow: 0 0 6px rgba(185,138,255,.45); }
.cp-f-dot.g { background: #3DDC97; box-shadow: 0 0 6px rgba(61,220,151,.45); }
.cp-f-dot.c { background: #35D0E8; box-shadow: 0 0 6px rgba(53,208,232,.45); }

/* 数据墙：说明性 delta（非涨跌，不编造百分比） */
.cp-data-cell .dc-delta.info { color: var(--t3); font-weight: 600; letter-spacing: .3px; }

/* 健康分：高负载红色档 */
.cp-hstat i.down { color: #FF8A8A; border: 1px solid rgba(255,90,106,.3); background: rgba(255,90,106,.07); }
.cp-hstat i { color: var(--t3); border: 1px solid rgba(255,255,255,.1); }

/* 通知角标：0 条隐藏由 JS 控制，>99 时加宽 */
.notif-badge { min-width: 16px; width: auto; padding: 0 3px; }

/* 动态流列宽适配真实标题（原 44px 会截断"微信登录检测"等） */
.cp-feed-row { grid-template-columns: 46px 82px 1fr 22px; }
/* 服务列表 12 行紧凑排布，避免溢出裁切 */
.cp-service-row { padding: 3px 6px; }
.cp-rank-item { padding: 4px 10px; }

/* 面板内容溢出修正：服务列表 12 行 / 动态流 12 行会超出面板高度被裁切，
   改为紧凑行高 + 细滚动条（可滚动查看全部真实条目，不隐藏数据） */
.cp-service-list { overflow-y: auto; justify-content: flex-start; padding: 2px 6px 2px 10px; }
.cp-service-list::-webkit-scrollbar, .cp-feed::-webkit-scrollbar, .cp-rank-list::-webkit-scrollbar { width: 4px; }
.cp-service-list::-webkit-scrollbar-thumb, .cp-feed::-webkit-scrollbar-thumb, .cp-rank-list::-webkit-scrollbar-thumb {
  background: rgba(255,106,0,.28); border-radius: 2px;
}
.cp-service-list::-webkit-scrollbar-track, .cp-feed::-webkit-scrollbar-track, .cp-rank-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
}
.cp-service-row { padding: 1px 4px; font-size: 10.5px; min-height: 15px; }
.cp-service-row .s-dot { width: 5px; height: 5px; }
.cp-service-row .s-status { font-size: 8.5px; padding: 0 5px; }
.cp-service-row .s-port { font-size: 8.5px; margin-left: 5px; }

.cp-feed { overflow-y: auto; }
.cp-feed-row { grid-template-columns: 42px 78px 1fr 18px; height: auto; min-height: 19px; font-size: 10.5px; }
.cp-f-amt { min-width: 18px; }

.cp-rank-list { overflow-y: auto; justify-content: flex-start; padding: 2px 0; }
.cp-rank-item { padding: 3px 10px; }

/* 健康区：gauge 与统计行总高需 ≤ 面板高度 */
.cp-ch-gauge { height: 72px; }
.cp-health { padding: 2px 10px 4px; }
.cp-hstat { font-size: 10.5px; padding: 1px 2px; }
.cp-hstat b { font-size: 12px; }
.cp-risk { font-size: 10.5px; padding: 2px 4px; }

/* ── 面板标题栏重叠修复（唯一一处，T-20260828-7C2A）──────────────────
   根因：.cp-hd 是 flex 行且 overflow:visible，三个文字段（.cp-title /
   .cp-en / .cp-extra）既无 white-space:nowrap 也无 flex 收缩优先级，
   窄侧栏（右列 ~298px）下被挤压换行，行盒互相叠字压住标题。
   策略：中文标题与时间戳为必读信息 → flex 不收缩；英文副标题为装饰
   → 由它独占 min-width:0 + ellipsis 承担全部收缩；.cp-hd 加 overflow
   兜底，任何情况下都不再溢出到 .cp-body 与标题叠字。 */
.cp-hd { min-width: 0; overflow: hidden; }
.cp-hd .cp-title { flex: 0 0 auto; white-space: nowrap; }
.cp-hd .cp-en { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-hd .cp-extra { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }