/* =======================
 * 拖拽式数据可视化画布样式
 * ======================= */

.dashboard-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 160px);   /* 原来的height→改min-height，避免撑不满外部时出现切割空白 */
  height: calc(100vh - 160px);       /* 同时保留height，让内部flex:1网格列按视口分配 */
  gap: 16px;
}

/* ========== 顶部工具栏 ========== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.dashboard-logo {
  font-size: 24px;
}

.dashboard-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  padding-left: 34px;
}

.dashboard-header-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========== 三栏主工作区 ========== */
.dashboard-body {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  gap: 16px;
  flex: 1;
  /* height:0 + flex:1 是经典套路：强制flex项按剩余空间分配高度，而不是被内容撑爆 */
  height: 0;
  min-height: 0;
}

.dashboard-sidebar {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  /* 严格约束grid子项高度=grid单元格高度，不允许内容撑高 — 这是滚动条出现的前提 */
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;        /* 必须是 hidden，不能是 clip，否则子容器滚动条失效 */
}

.sidebar-panel-header {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--panel-bg, #fff);
  flex-shrink: 0;
}

/* ========== 左侧：图表组件面板 ========== */
.dashboard-sidebar-left {
  /* 左栏：sidebar整体滚动（图表组件卡片多时可以上下滚动看完） */
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-gutter: stable;
}

.chart-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}

/* ========== 右侧：配置面板（可折叠后内部内容滚动） ========== */
.dashboard-sidebar-right {
  /* 右栏：整块是滚动容器，内容按普通block堆叠；覆盖dashboard-sidebar默认的flex column，避免子item被flex压缩 */
  display: block;
  overflow-y: auto;
  min-height: 0;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* 右侧accordion-item不要被压缩（所有折叠头+折叠内容按内容高度完整渲染，超出sidebar就出现滚动条） */
#configPanel > .accordion-item {
  flex: 0 0 auto;
}

/* 右侧 3 个可折叠面板（accordion-item）之间的分隔：保持原来的 dashboard-config-section 视觉 */
#configPanel .accordion-item + .accordion-item {
  border-top: 1px solid var(--border-color, #e5e7eb);
}

/* 让最后一个 accordion-body 的底部留点呼吸空间，滚动到底不贴边 */
#configPanel .accordion-item:last-child > .accordion-body {
  padding-bottom: 32px;
}

/* 第一个 accordion-item 的头部不要有顶边距（和sidebar-panel-header视觉对齐） */
#configPanel .accordion-item:first-child > .accordion-header {
  border-top: none;
}
.chart-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--input-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}

.chart-palette-item:hover {
  background: var(--panel-bg, #fff);
  border-color: var(--accent-color, #3b82f6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.chart-palette-item:active {
  cursor: grabbing;
}

.chart-palette-item.dragging {
  opacity: 0.5;
}

.chart-palette-icon {
  font-size: 28px;
  line-height: 1;
}

.chart-palette-name {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

/* ========== 中间：画布区域 ========== */
.dashboard-canvas-wrapper {
  display: flex;
  flex-direction: column;
  /* 整画布区域统一使用大屏主题背景：预览header + toolbar + canvas-outer 视觉连续无断层 */
  background:
    radial-gradient(1200px 700px at 20% 0%, color-mix(in srgb, var(--dash-accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--dash-accent-2) 18%, transparent), transparent 55%),
    linear-gradient(135deg, var(--dash-bg-start), var(--dash-bg-end));
  border: 1px solid color-mix(in srgb, var(--dash-accent) 28%, transparent);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dash-accent) 12%, transparent) inset,
    0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  min-width: 0;
}

[data-theme="dark"] .dashboard-canvas-wrapper {
  background:
    radial-gradient(1200px 700px at 20% 0%, color-mix(in srgb, var(--dash-accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--dash-accent-2) 18%, transparent), transparent 55%),
    linear-gradient(135deg, var(--dash-bg-start), var(--dash-bg-end));
}

.canvas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--dash-accent) 22%, transparent);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.canvas-hint {
  font-size: 12px;
  color: rgba(200, 220, 255, 0.68);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: rgba(15, 35, 70, 0.55);
  border: 1px solid color-mix(in srgb, var(--dash-accent) 28%, transparent);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.zoom-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: rgba(200, 220, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.zoom-btn:hover {
  background: color-mix(in srgb, var(--dash-accent) 30%, transparent);
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dash-accent) 50%, transparent) inset;
}

#zoomLevel {
  font-size: 12px;
  color: rgba(210, 225, 255, 0.85);
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dashboard-canvas-outer {
  flex: 1;
  overflow: auto;
  position: relative;
  /* 外层wrapper已经提供背景，这里用transparent防止渐变拼接断层 */
  background: transparent;
}

[data-theme="dark"] .dashboard-canvas-outer {
  background: transparent;
}

.dashboard-canvas {
  position: relative;
  min-width: 1200px;
  min-height: 800px;
  width: 100%;                       /* 宽度填满canvas-outer，防止横向滚动时露白 */
  height: 100%;                      /* 高度填满canvas-outer，上下背景连续无切割 */
  padding: 20px;
  transform-origin: top left;
  transition: transform 0.2s ease;
  box-sizing: border-box;            /* padding算在height/width里，防止100%+padding溢出 */
  /* ============ 常规画布自身也是主题背景（防止canvas比外层更高时露另一种色） ============ */
  background: transparent;
}

/* ========== 画布内固定布局槽位（用户先选布局才会出现） ========== */
.layout-slot {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed color-mix(in srgb, var(--dash-accent, #3b82f6) 40%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--dash-accent, #3b82f6) 4%, transparent),
      transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: color-mix(in srgb, var(--dash-accent, #8ab4ff) 70%, #fff);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  pointer-events: auto;          /* 必须允许接收拖拽事件 */
  z-index: 1;
  transition: all 0.18s ease;
  backdrop-filter: blur(2px);
}
.layout-slot::before {
  content: attr(data-slot-label);
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--dash-accent, #3b82f6) 10%, rgba(10,20,40,0.5));
  border: 1px solid color-mix(in srgb, var(--dash-accent, #3b82f6) 25%, transparent);
  pointer-events: none;
}
/* 槽位 drag-over（用户正拖图表到这个槽）*/
.layout-slot.drop-target-active {
  border-color: var(--dash-accent, #3b82f6);
  border-style: solid;
  background:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--dash-accent, #3b82f6) 18%, transparent),
      transparent 70%),
    color-mix(in srgb, var(--dash-accent, #3b82f6) 6%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dash-accent, #3b82f6) 35%, transparent) inset,
    0 0 20px color-mix(in srgb, var(--dash-accent, #3b82f6) 30%, transparent);
  transform: scale(1.01);
}
/* 槽位被图表占了之后，让槽位变成隐形的背景层（不抢事件） */
.layout-slot.slot-occupied {
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.dashboard-canvas.drag-over {
  outline: 2px dashed var(--accent-color, #3b82f6);
  outline-offset: -20px;
  background-color: rgba(59, 130, 246, 0.05);
}

/* 空画布提示 */
.canvas-empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.empty-hint-icon {
  font-size: 64px;
  opacity: 0.3;
  margin-bottom: 16px;
}

.empty-hint-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
}

.empty-hint-subtitle {
  font-size: 14px;
  color: var(--text-tertiary, #9ca3af);
}

/* ========== 画布中的图表卡片 ========== */
.canvas-chart-card {
  position: absolute;
  background: var(--panel-bg, #fff);
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: move;
  transition: box-shadow 0.2s ease;
}

.canvas-chart-card.selected {
  border-color: var(--accent-color, #3b82f6);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
  z-index: 10;
}

.canvas-chart-card:hover .chart-card-header,
.canvas-chart-card.selected .chart-card-header {
  opacity: 1;
}

.canvas-chart-card .chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--panel-bg, #fff);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  cursor: move;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #111827);
  opacity: 0.85;
  transition: opacity 0.2s;
}

.canvas-chart-card .chart-card-body {
  flex: 1;
  min-height: 0;
}

.canvas-chart-card .chart-card-body > div {
  width: 100%;
  height: 100%;
}

.chart-card-actions {
  display: flex;
  gap: 4px;
}

.chart-card-action-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.chart-card-action-btn:hover {
  background: var(--accent-color, #3b82f6);
  color: #fff;
}

.chart-card-type-icon {
  font-size: 14px;
  margin-right: 6px;
}

/* 右下角缩放控制点 */
.canvas-chart-card .resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--accent-color, #3b82f6) 50%);
  border-radius: 0 0 8px 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.canvas-chart-card:hover .resize-handle,
.canvas-chart-card.selected .resize-handle {
  opacity: 1;
}

/* ========== 右侧：配置面板 ========== */
.dashboard-sidebar-right {
  overflow-y: auto;
}

.config-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24px;
  gap: 12px;
}

.config-empty-icon {
  font-size: 40px;
  opacity: 0.4;
}

.config-empty-text {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}

.config-content {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
}

.input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--input-bg, #f9fafb);
  color: var(--text-primary, #111827);
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.input:focus {
  border-color: var(--accent-color, #3b82f6);
  background: var(--panel-bg, #fff);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.color-input-row {
  display: flex;
  gap: 6px;
}

.color-input-row input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  background: var(--panel-bg, #fff);
}

.color-input-row input[type="text"] {
  flex: 1;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary, #111827);
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

button.primary,
button.secondary,
button.danger {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

button.primary {
  background: var(--accent-color, #3b82f6);
  color: #fff;
}

button.primary:hover {
  background: #2563eb;
}

button.secondary {
  background: var(--input-bg, #f9fafb);
  color: var(--text-primary, #111827);
  border-color: var(--border-color, #e5e7eb);
}

button.secondary:hover {
  background: var(--panel-bg, #fff);
  border-color: var(--text-tertiary, #d1d5db);
}

button.danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

button.danger:hover {
  background: #fee2e2;
}

button.full-width {
  width: 100%;
}

/* ========== 响应式（移动端） ========== */
@media (max-width: 1024px) {
  .dashboard-app {
    height: auto;
    min-height: auto;
  }

  .dashboard-body {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar-left {
    order: 1;
  }

  .dashboard-canvas-wrapper {
    order: 2;
    min-height: 500px;
  }

  .dashboard-sidebar-right {
    order: 3;
  }

  .chart-palette-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-canvas-outer {
    max-width: 100%;
  }

  .dashboard-canvas {
    min-width: 100%;
    transform: scale(0.6);
  }
}

@media (max-width: 640px) {
  .chart-palette-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-header-right {
    width: 100%;
  }

  .dashboard-header-right button {
    flex: 1;
    min-width: 80px;
  }
}

/* =========================================================
 * 主题选择控件 + 看板配置区
 * ========================================================= */
.theme-select-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--input-bg, #f9fafb);
}

.theme-select-label {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
  padding-left: 6px;
}

.theme-select {
  appearance: none;
  background: transparent;
  border: none;
  padding: 7px 22px 7px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #111827);
  cursor: pointer;
  outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary, #6b7280) 50%),
    linear-gradient(135deg, var(--text-secondary, #6b7280) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.theme-select:focus {
  background-color: transparent;
}

/* 看板配置区：独立视觉，与下方单图配置区分开 */
.dashboard-config-section {
  border-bottom: 1px dashed var(--border-color, #e5e7eb);
  padding-bottom: 20px;
  margin-bottom: 18px;
}

.dashboard-config-section > .sidebar-panel-header {
  background: linear-gradient(90deg, rgba(59,130,246,0.10), transparent);
  font-size: 14px;
  padding: 14px 16px 12px;
  letter-spacing: 0.5px;
}

/* 看板配置内部：整体容器加 padding，防止贴着侧边栏 */
.dashboard-config-section .dashboard-config-body {
  padding: 16px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 看板配置里的 label：字号略大、对比度更高、底部留足间距 */
.dashboard-config-section .form-group {
  gap: 8px;
}
.dashboard-config-section .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin-bottom: 2px;
}

/* 看板配置里的 input/select：加高、padding 更大 */
.dashboard-config-section .input,
.dashboard-config-section select.input,
.dashboard-config-section .theme-select-wrapper {
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 10px;
}
.dashboard-config-section .theme-select-wrapper {
  padding: 2px 4px;
}
.dashboard-config-section .theme-select-wrapper .theme-select {
  padding: 8px 24px 8px 4px;
  font-size: 13px;
}
.dashboard-config-section .theme-select-wrapper .theme-select-label {
  padding-left: 8px;
  font-size: 13px;
  color: var(--text-primary, #111827);
}

/* 进入全屏大屏按钮：加高、主色背景、hover 明显 */
.dashboard-config-section button.primary.full-width {
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.22);
}

/* 画布布局配置：form-row-2 里的按钮等高、等宽、有hover反馈 */
.dashboard-config-section .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dashboard-config-section .form-row-2 button.secondary {
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--input-bg, #f9fafb);
  color: var(--text-primary, #111827);
  transition: all 0.15s ease;
}
.dashboard-config-section .form-row-2 button.secondary:hover {
  background: var(--accent-color, #3b82f6);
  color: #fff;
  border-color: var(--accent-color, #3b82f6);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
  transform: translateY(-1px);
}

/* 布局说明文字：柔和不抢戏，有足够行间距 */
.dashboard-config-section .form-hint {
  margin-top: -6px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-secondary, #6b7280);
  background: var(--input-bg, #f9fafb);
  border-radius: 8px;
  border-left: 3px solid var(--accent-color, #3b82f6);
}
.dashboard-config-section .form-hint code {
  padding: 1px 6px;
  background: #fff;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--accent-color, #3b82f6);
  font-weight: 600;
}

/* =========================================================
 * 主题变量：4 套预设
 * 画布常规模式 & 大屏全屏模式 统一走同一套变量
 * ========================================================= */
:root,
body.dashboard-theme-techBlue {
  --dash-bg-start: #0a1a3f;
  --dash-bg-end: #06102a;
  --dash-panel-bg: rgba(12, 27, 68, 0.72);
  --dash-panel-border: rgba(120, 200, 255, 0.55);
  --dash-panel-shadow: 0 0 22px rgba(60, 160, 255, 0.28), inset 0 0 22px rgba(30, 100, 210, 0.22);
  --dash-title-main: #f0f7ff;
  --dash-title-sub: rgba(240, 247, 255, 0.84);
  --dash-title: #f0f7ff;                /* 卡片标题条用：主字色 1.0α，保证在玻璃拟态上看清 */
  --dash-card-title-bg: rgba(8, 22, 60, 0.82);  /* 卡片标题条背景：稍深+不透明，让字有依托 */
  --dash-title-glow: 0 0 26px rgba(120, 200, 255, 0.65);
  --dash-accent: #3aa0ff;
  --dash-accent-2: #00e5ff;
  --dash-divider: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.82), transparent);
  --dash-text: #eaf4ff;
  --dash-text-sub: rgba(234, 244, 255, 0.86);
  --dash-grid-line: rgba(120, 200, 255, 0.18);
  --dash-axis-line: rgba(120, 200, 255, 0.50);
  --dash-tooltip-bg: rgba(8, 22, 60, 0.96);
  --dash-palette: #3aa0ff,#00e5ff,#22d3ee,#a855f7,#ec4899,#f472b6,#f59e0b,#84cc16;
}

body.dashboard-theme-luxuryGold {
  --dash-bg-start: #141110;
  --dash-bg-end: #0a0706;
  --dash-panel-bg: rgba(32, 22, 10, 0.78);
  --dash-panel-border: rgba(230, 195, 90, 0.58);
  --dash-panel-shadow: 0 0 22px rgba(230, 195, 90, 0.28), inset 0 0 24px rgba(180, 140, 40, 0.2);
  --dash-title-main: #fff2c8;
  --dash-title-sub: rgba(255, 242, 200, 0.84);
  --dash-title: #fff2c8;
  --dash-card-title-bg: rgba(26, 18, 8, 0.86);
  --dash-title-glow: 0 0 30px rgba(232, 195, 90, 0.65);
  --dash-accent: #eac55a;
  --dash-accent-2: #f8de7e;
  --dash-divider: linear-gradient(90deg, transparent, rgba(230, 195, 90, 0.82), transparent);
  --dash-text: #faecc4;
  --dash-text-sub: rgba(250, 236, 196, 0.84);
  --dash-grid-line: rgba(230, 195, 90, 0.14);
  --dash-axis-line: rgba(230, 195, 90, 0.50);
  --dash-tooltip-bg: rgba(26, 18, 8, 0.96);
  --dash-palette: #d4af37,#f5cf5c,#f59e0b,#ef4444,#8b5cf6,#06b6d4,#ec4899,#84cc16;
}

body.dashboard-theme-cyberNeon {
  --dash-bg-start: #0b0222;
  --dash-bg-end: #050015;
  --dash-panel-bg: rgba(26, 6, 58, 0.72);
  --dash-panel-border: rgba(240, 120, 200, 0.58);
  --dash-panel-shadow: 0 0 26px rgba(139, 92, 246, 0.40), 0 0 40px rgba(240, 120, 200, 0.22), inset 0 0 26px rgba(139, 92, 246, 0.16);
  --dash-title-main: #fff5ff;
  --dash-title-sub: rgba(255, 245, 255, 0.84);
  --dash-title: #fff5ff;
  --dash-card-title-bg: rgba(14, 2, 40, 0.84);
  --dash-title-glow: 0 0 34px rgba(236, 72, 153, 0.78), 0 0 56px rgba(139, 92, 246, 0.5);
  --dash-accent: #ec4899;
  --dash-accent-2: #b983ff;
  --dash-divider: linear-gradient(90deg, transparent, rgba(240, 120, 200, 0.82), rgba(139, 92, 246, 0.82), transparent);
  --dash-text: #fff0ff;
  --dash-text-sub: rgba(255, 240, 255, 0.84);
  --dash-grid-line: rgba(139, 92, 246, 0.18);
  --dash-axis-line: rgba(240, 120, 200, 0.50);
  --dash-tooltip-bg: rgba(14, 2, 40, 0.96);
  --dash-palette: #ec4899,#8b5cf6,#22d3ee,#f472b6,#a855f7,#06b6d4,#f59e0b,#84cc16;
}

body.dashboard-theme-businessLight {
  --dash-bg-start: #f7f9fc;
  --dash-bg-end: #eef1f8;
  --dash-panel-bg: rgba(255, 255, 255, 0.98);
  --dash-panel-border: rgba(100, 116, 139, 0.22);
  --dash-panel-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  --dash-title-main: #0b1220;
  --dash-title-sub: rgba(11, 18, 32, 0.70);
  --dash-title: #0b1220;
  --dash-card-title-bg: rgba(248, 250, 252, 0.96);
  --dash-title-glow: none;
  --dash-accent: #2563eb;
  --dash-accent-2: #0891b2;
  --dash-divider: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.45), transparent);
  --dash-text: #0b1220;
  --dash-text-sub: rgba(15, 23, 42, 0.68);
  --dash-grid-line: rgba(15, 23, 42, 0.08);
  --dash-axis-line: rgba(15, 23, 42, 0.30);
  --dash-tooltip-bg: rgba(255, 255, 255, 0.98);
  --dash-palette: #2563eb,#0891b2,#10b981,#f59e0b,#ef4444,#8b5cf6,#ec4899,#84cc16;
}

/* =========================================================
 * 浅色商务主题（深色字白底）专属修补：
 *   大屏/画布默认有 text-shadow（给深色玻璃拟态增可读性）
 *   但在白底+黑字时会让字边缘有一圈"黑雾"导致发糊
 *   → 统一关掉所有文字 text-shadow，保证锐利清晰
 *   → 卡片背景不透明，backdrop-filter:blur 会让 canvas/ECharts 文字发虚 → 关闭
 * ========================================================= */
body.dashboard-theme-businessLight .bigscreen-title,
body.dashboard-theme-businessLight .canvas-preview-header .bigscreen-title,
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card .chart-card-title,
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card .chart-card-title > .chart-card-type-icon,
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card .chart-card-title > .chart-card-title-text,
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card .chart-card-title span,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card .chart-card-title,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card .chart-card-title > .chart-card-type-icon,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card .chart-card-title > .chart-card-title-text,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card .chart-card-title span,
body.dashboard-theme-businessLight .bigscreen-subtitle,
body.dashboard-theme-businessLight .bigscreen-clock {
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 浅色：卡片是纯白（不透明），backdrop-filter 会让 canvas 文字整体被 GPU 做插值，导致发糊 → 必须关掉 */
body.dashboard-theme-businessLight .canvas-chart-card,
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* 浅色主题的阴影不要做发光扩散（避免黑色晕影感） */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* =========================================================
 * 大屏全屏覆盖层
 * ========================================================= */
.big-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  background:
    radial-gradient(ellipse at top, var(--dash-bg-start) 0%, var(--dash-bg-end) 100%);
  color: var(--dash-text);
  overflow: hidden;
}

.big-screen-overlay.visible {
  display: block;
}

.big-screen-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) 0 0 / 60px 60px;
  opacity: 0.5;
}

.big-screen-inner {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 14px 24px 8px;
  box-sizing: border-box;
  z-index: 1;
}

/* 顶部标题栏 */
.big-screen-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 0 14px;
  position: relative;
}

.big-screen-header::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2px;
  height: 2px;
  background: var(--dash-divider);
  border-radius: 2px;
}

.bigscreen-header-decoration {
  height: 36px;
  position: relative;
}

.bigscreen-header-decoration.left::before,
.bigscreen-header-decoration.left::after,
.bigscreen-header-decoration.right::before,
.bigscreen-header-decoration.right::after {
  content: "";
  position: absolute;
  background: var(--dash-accent);
  opacity: 0.85;
  box-shadow: 0 0 10px var(--dash-accent);
}

.bigscreen-header-decoration.left::before {
  left: 0; top: 0; width: 60%; height: 2px;
}
.bigscreen-header-decoration.left::after {
  left: 0; top: 0; width: 2px; height: 100%;
}
.bigscreen-header-decoration.right::before {
  right: 0; top: 0; width: 60%; height: 2px;
}
.bigscreen-header-decoration.right::after {
  right: 0; top: 0; width: 2px; height: 100%;
}

.bigscreen-titles {
  text-align: center;
  user-select: none;
}

.bigscreen-title {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--dash-title-main);
  text-shadow: var(--dash-title-glow);
  background: linear-gradient(180deg, var(--dash-title-main) 0%, var(--dash-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.bigscreen-subtitle {
  margin: 6px 0 0;
  font-size: clamp(12px, 1.1vw, 16px);
  color: var(--dash-title-sub);
  letter-spacing: 2px;
}

.bigscreen-header-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.bigscreen-clock {
  font-family: "Courier New", Consolas, monospace;
  font-size: clamp(14px, 1.3vw, 20px);
  color: var(--dash-accent-2);
  letter-spacing: 3px;
  padding: 6px 14px;
  border: 1px solid var(--dash-panel-border);
  border-radius: 6px;
  background: var(--dash-panel-bg);
  box-shadow: var(--dash-panel-shadow);
}

.bigscreen-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--dash-panel-border);
  background: var(--dash-panel-bg);
  color: var(--dash-text);
  cursor: pointer;
  font-size: 14px;
  box-shadow: var(--dash-panel-shadow);
  transition: all 0.2s;
}

.bigscreen-exit-btn:hover {
  border-color: var(--dash-accent);
  color: var(--dash-accent);
  transform: translateY(-1px);
}

.bigscreen-exit-icon {
  font-size: 14px;
}

/* 图表主舞台 */
.big-screen-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* ========== 大屏：固定布局槽位（和设置页布局一一对应，空位置保留不合并） ========== */
.bigscreen-slot {
  position: absolute;
  box-sizing: border-box;
  padding: 6px;
}
/* 大屏中不要显示 1234... 数字标签 */
.bigscreen-slot .bigscreen-slot-label {
  display: none !important;
}
/* 大屏：空槽位完全透明 —— 不显示斜线、不显示边框、不显示任何占位装饰（和背景融合） */
.bigscreen-slot.slot-empty {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
}
.bigscreen-slot.slot-empty::before,
.bigscreen-slot.slot-empty::after {
  display: none !important;
  content: none !important;
}

/* 大屏里的图表卡片样式重写（移除拖拽把手、绝对定位改为网格内自适应） */
.big-screen-stage .canvas-chart-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--dash-panel-bg);
  border: 1px solid var(--dash-panel-border);
  border-radius: 10px;
  box-shadow: var(--dash-panel-shadow);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.big-screen-stage .canvas-chart-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  border-left: 2px solid var(--dash-accent);
  border-top: 2px solid var(--dash-accent);
  border-top-left-radius: 10px;
  pointer-events: none;
  z-index: 3;
}
.big-screen-stage .canvas-chart-card::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  border-right: 2px solid var(--dash-accent);
  border-bottom: 2px solid var(--dash-accent);
  border-bottom-right-radius: 10px;
  pointer-events: none;
  z-index: 3;
}

.big-screen-stage .chart-card-controls,
.big-screen-stage .card-resize-handle {
  display: none !important;
}

/* ============================================================
 * 大屏模式下卡片header/title/body的统一覆盖：
 * 必须加 .canvas-chart-card 前缀，才能压住基础样式（基础是2个类）
 * ============================================================ */

/* ① 卡片header容器（最外面那层，默认L292是白底）：大屏下必须用主题色，并且不透明 */
.big-screen-stage .canvas-chart-card .chart-card-header {
  background: var(--dash-card-title-bg) !important;
  border-bottom: 1px solid var(--dash-grid-line) !important;
  color: var(--dash-title) !important;          /* ← 新增：容器本体色也改成主题淡字，防止子元素没覆盖到 */
  font-weight: 700 !important;                  /* ← 新增：整体加粗，和内部title统一口径 */
  opacity: 1 !important;                        /* 大屏下必须100%不透明，不然透过去会糊 */
  cursor: default;
}

/* ①-2 大屏下隐藏编辑/复制/删除按钮（之前选择器写错：.chart-card-controls→实际是.chart-card-actions） */
.big-screen-stage .canvas-chart-card .chart-card-actions,
.big-screen-stage .canvas-chart-card .chart-card-controls,
.big-screen-stage .canvas-chart-card .card-resize-handle {
  display: none !important;
}

/* ② 卡片标题文字（"雷达图"/"品牌销售"这一行字）：加深选择器层级 → 优先级压过 L300 的基础样式 */
.big-screen-stage .canvas-chart-card .chart-card-title {
  color: var(--dash-title) !important;
  background: transparent !important;        /* 背景由外层 header 负责，这里不要再叠一层底 */
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  letter-spacing: 0.4px;
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
  position: relative;
  z-index: 2;
  border-bottom: none !important;            /* 边框由外层header统一出 */
}

/* ②-1 关键补漏：直接命中内部 span 节点（原DOM是 <div class="chart-card-title"><span class="chart-card-type-icon">📊</span><span class="chart-card-title-text">圆环图</span></div>）
   外层div的color继承可能被子元素上的内联/单独样式重置为深黑色，所以必须直接命中内部span强制主题色 */
.big-screen-stage .canvas-chart-card .chart-card-title > .chart-card-type-icon,
.big-screen-stage .canvas-chart-card .chart-card-title > .chart-card-title-text,
.big-screen-stage .canvas-chart-card .chart-card-title span {
  color: var(--dash-title) !important;   /* 内部任何span都直接用主题色，防止某一个span单独写了color覆盖父元素 */
  background: transparent !important;
  font-weight: 700 !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
}

/* ③ 图表body区域（echarts渲染容器）：透明，让主题玻璃拟态透出来 */
.big-screen-stage .canvas-chart-card .chart-card-body {
  background: transparent !important;
}

/* ④ 图表echarts容器：必须完全透明，不能有意外的白底 */
.big-screen-stage .canvas-chart-card .chart-card-body > div,
.big-screen-stage .canvas-chart-card .chart-echarts {
  background: transparent !important;
}

/* 大屏网格自动布局 */
.big-screen-stage {
  display: grid;
  gap: 18px;
}

/* 根据图表数量自动分栏 */
.big-screen-stage[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 18px 60px;
}
.big-screen-stage[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.big-screen-stage[data-count="3"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.big-screen-stage[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.big-screen-stage[data-count="5"],
.big-screen-stage[data-count="6"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.big-screen-stage[data-count="7"],
.big-screen-stage[data-count="8"],
.big-screen-stage[data-count="9"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.big-screen-stage[data-count="10"],
.big-screen-stage[data-count="11"],
.big-screen-stage[data-count="12"] {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.big-screen-stage[data-count-more="13+"] {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, 1fr);
}

/* 底部装饰 */
.big-screen-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  opacity: 0.7;
}

.bigscreen-footer-decoration {
  height: 8px;
  position: relative;
}

.bigscreen-footer-decoration.left::after {
  content: "";
  position: absolute;
  right: 0; bottom: 2px;
  width: 55%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--dash-accent));
}
.bigscreen-footer-decoration.right::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 55%; height: 2px;
  background: linear-gradient(90deg, var(--dash-accent), transparent);
}

.bigscreen-footer-text {
  text-align: center;
  font-size: 11px;
  color: var(--dash-text-sub);
  letter-spacing: 1px;
}

/* ============================================================
 * 2026-08-01 大重构：
 * 常规画布（.dashboard-canvas）和大屏（.big-screen-stage）统一视觉：
 *   - 卡片都是玻璃拟态 + 主题色边框阴影
 *   - 卡片header都是主题色背景和淡字
 *   - 4角都有装饰线
 * 只有两点差异：
 *   - 画布：卡片 position:absolute（可拖拽）+ chart-card-actions 显示（可编辑）
 *   - 大屏：卡片 position:relative（网格流式）+ chart-card-actions 隐藏（只读）
 * ============================================================ */

/* ① 画布内卡片：玻璃拟态主体 */
.dashboard-canvas .canvas-chart-card,
.big-screen-stage .canvas-chart-card {
  background: var(--dash-panel-bg);
  border: 1px solid var(--dash-panel-border);
  border-radius: 10px;
  box-shadow: var(--dash-panel-shadow);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dashboard-canvas .canvas-chart-card:hover {
  box-shadow:
    var(--dash-panel-shadow),
    0 0 12px color-mix(in srgb, var(--dash-accent) 45%, transparent);
  transform: translateY(-1px);
}

/* ② 画布内卡片 4 角装饰线（和大屏一致，原来只给大屏加的） */
.dashboard-canvas .canvas-chart-card::before,
.big-screen-stage .canvas-chart-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  border-left: 2px solid var(--dash-accent);
  border-top: 2px solid var(--dash-accent);
  border-top-left-radius: 10px;
  pointer-events: none;
  z-index: 3;
}
.dashboard-canvas .canvas-chart-card::after,
.big-screen-stage .canvas-chart-card::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  border-right: 2px solid var(--dash-accent-2);
  border-bottom: 2px solid var(--dash-accent-2);
  border-bottom-right-radius: 10px;
  pointer-events: none;
  z-index: 3;
}

/* ③ 画布内卡片 header 容器：主题色背景 + 淡字 */
.dashboard-canvas .canvas-chart-card .chart-card-header,
.big-screen-stage .canvas-chart-card .chart-card-header {
  background: var(--dash-card-title-bg) !important;
  border-bottom: 1px solid var(--dash-grid-line) !important;
  color: var(--dash-title) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  cursor: default;
}

/* ④ 画布内卡片标题文字（含内部span）：统一主题淡字 */
.dashboard-canvas .canvas-chart-card .chart-card-title,
.big-screen-stage .canvas-chart-card .chart-card-title {
  color: var(--dash-title) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  letter-spacing: 0.4px;
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
  position: relative;
  z-index: 2;
  border-bottom: none !important;
}
.dashboard-canvas .canvas-chart-card .chart-card-title > .chart-card-type-icon,
.dashboard-canvas .canvas-chart-card .chart-card-title > .chart-card-title-text,
.dashboard-canvas .canvas-chart-card .chart-card-title span,
.big-screen-stage .canvas-chart-card .chart-card-title > .chart-card-type-icon,
.big-screen-stage .canvas-chart-card .chart-card-title > .chart-card-title-text,
.big-screen-stage .canvas-chart-card .chart-card-title span {
  color: var(--dash-title) !important;
  background: transparent !important;
  font-weight: 700 !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
}

/* ⑤ 画布内卡片 body：透明，让玻璃拟态透出来 */
.dashboard-canvas .canvas-chart-card .chart-card-body,
.big-screen-stage .canvas-chart-card .chart-card-body {
  background: transparent !important;
}
.dashboard-canvas .canvas-chart-card .chart-card-body > div,
.dashboard-canvas .canvas-chart-card .chart-echarts,
.big-screen-stage .canvas-chart-card .chart-card-body > div,
.big-screen-stage .canvas-chart-card .chart-echarts {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

/* ============================================================================
 * 主题差异化：形状 · 卡形状 / 背景纹理 / Header装饰 / 分割线（整体大变样）
 *   每个主题通过 body.dashboard-theme-<key> 隔离，
 *   不影响其他主题，后期扩展新增主题时在下面加对应选择器即可。
 * ========================================================================== */

/* ---------- 公共：对齐历史遗留变量，让卡片/头/大背景统一用 dash-* 变量 ---------- */
.dashboard-canvas .canvas-chart-card,
.big-screen-stage .canvas-chart-card {
  --panel-bg:     var(--dash-panel-bg,   #fff);
  --border-color:  var(--dash-panel-border, #e5e7eb);
  background:      var(--dash-panel-bg) !important;
  border-color:  transparent !important;
  border-width:  2px !important;
  border-style:  solid !important;
  box-shadow:    var(--dash-panel-shadow) !important;
  border-image:  var(--dash-panel-border) !important;
  background-clip:   padding-box !important;
}
.dashboard-canvas .canvas-chart-card {
  border-radius: 10px !important;
}
.big-screen-stage .canvas-chart-card {
  border-radius: 12px !important;
}

/* 让标题文字如果给的是 linear-gradient → 自动转成真正的渐变字（全息量子用） */
.bigscreen-title.gradient-text,
body .canvas-preview-header .bigscreen-title.gradient-text {
  background: var(--dash-title-main) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          text-fill-color: transparent !important;
  color: transparent !important;
}

/* ============================================================================
 * ① dashboard-theme-techBlue 🔬 深蓝科技：科技网格 + 圆角玻璃 + 4角L线
 * ========================================================================== */
body.dashboard-theme-techBlue .big-screen-stage,
body.dashboard-theme-techBlue .canvas-preview-header.big-screen-header {
  background-image:
    linear-gradient(rgba(64, 156, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 156, 255, 0.12) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(30, 111, 255, 0.18), transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
body.dashboard-theme-techBlue .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-techBlue .dashboard-canvas .canvas-chart-card::after,
body.dashboard-theme-techBlue .big-screen-stage .canvas-chart-card::before,
body.dashboard-theme-techBlue .big-screen-stage .canvas-chart-card::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--dash-accent-2);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(64, 156, 255, 0.9));
}
body.dashboard-theme-techBlue .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-techBlue .big-screen-stage .canvas-chart-card::before {
  top: 4px; left: 4px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 6px;
}
body.dashboard-theme-techBlue .dashboard-canvas .canvas-chart-card::after,
body.dashboard-theme-techBlue .big-screen-stage .canvas-chart-card::after {
  bottom: 4px; right: 4px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 6px;
}

/* ============================================================================
 * ② dashboard-theme-luxuryGold 👑 黑金炫酷：左右金竖条 + 金色暗点背景
 * ========================================================================== */
body.dashboard-theme-luxuryGold .big-screen-stage,
body.dashboard-theme-luxuryGold .canvas-preview-header.big-screen-header {
  background-image:
    radial-gradient(circle, rgba(212, 175, 55, 0.14) 1.2px, transparent 1.2px),
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.22), transparent 64%);
  background-size: 30px 30px, 100% 100%;
}
body.dashboard-theme-luxuryGold .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-luxuryGold .dashboard-canvas .canvas-chart-card::after,
body.dashboard-theme-luxuryGold .big-screen-stage .canvas-chart-card::before,
body.dashboard-theme-luxuryGold .big-screen-stage .canvas-chart-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #fde68a 0%, #d4af37 40%, #b8860b 100%);
  pointer-events: none;
  z-index: 4;
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.75),
    inset 0 0 4px rgba(255, 248, 200, 0.6);
}
body.dashboard-theme-luxuryGold .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-luxuryGold .big-screen-stage .canvas-chart-card::before { left: 0;  border-radius: 10px 0 0 10px; }
body.dashboard-theme-luxuryGold .dashboard-canvas .canvas-chart-card::after,
body.dashboard-theme-luxuryGold .big-screen-stage .canvas-chart-card::after  { right: 0; border-radius: 0 10px 10px 0; }
body.dashboard-theme-luxuryGold .dashboard-canvas .canvas-chart-card .chart-card-header,
body.dashboard-theme-luxuryGold .big-screen-stage .canvas-chart-card .chart-card-header {
  border-bottom: 1px solid rgba(212, 175, 55, 0.6) !important;
}

/* ============================================================================
 * ③ dashboard-theme-cyberNeon 🌈 赛博霓虹：右上+左下切角 + 霓虹外发光 + 错位故障
 * ========================================================================== */
body.dashboard-theme-cyberNeon .big-screen-stage,
body.dashboard-theme-cyberNeon .canvas-preview-header.big-screen-header {
  background-image:
    radial-gradient(circle, rgba(255, 40, 180, 0.14) 1px, transparent 1px),
    radial-gradient(circle, rgba(152, 80, 255, 0.12) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 10%, rgba(255, 40, 180, 0.22), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(152, 80, 255, 0.22), transparent 55%);
  background-size: 24px 24px, 42px 42px, 100% 100%, 100% 100%;
  background-position: 0 0, 12px 12px, 0 0, 0 0;
}
body.dashboard-theme-cyberNeon .dashboard-canvas .canvas-chart-card,
body.dashboard-theme-cyberNeon .big-screen-stage .canvas-chart-card {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  border-radius: 0 !important;
  box-shadow:
    0 0 0 2px #ff2cb4,
    0 0 16px rgba(255, 44, 180, 0.85),
    0 0 28px rgba(152, 80, 255, 0.6) !important;
  background:
    linear-gradient(135deg, rgba(30, 6, 42, 0.94), rgba(18, 6, 38, 0.94)) padding-box,
    linear-gradient(135deg, #ff2cb4, #9850ff, #22d3ee) border-box !important;
  border: 2px solid transparent !important;
}
body.dashboard-theme-cyberNeon .bigscreen-title {
  text-shadow:
    2px 0 rgba(255, 44, 180, 0.75),
   -2px 0 rgba(110, 231, 255, 0.75),
    0 0 14px rgba(255, 44, 180, 0.9) !important;
}

/* ============================================================================
 * ④ dashboard-theme-businessLight 💼 浅色商务：极简细边 + 顶蓝色横条 + 纯白
 * ========================================================================== */
body.dashboard-theme-businessLight .big-screen-stage,
body.dashboard-theme-businessLight .canvas-preview-header.big-screen-header {
  background-image: none;
}
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card {
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  clip-path: none !important;
  background: #ffffff !important;
}
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #0891b2);
  border-radius: 10px 10px 0 0;
  z-index: 4;
}
body.dashboard-theme-businessLight .dashboard-canvas .canvas-chart-card .chart-card-header,
body.dashboard-theme-businessLight .big-screen-stage .canvas-chart-card .chart-card-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body.dashboard-theme-businessLight .bigscreen-header-decoration.left::before,
body.dashboard-theme-businessLight .bigscreen-header-decoration.left::after,
body.dashboard-theme-businessLight .bigscreen-header-decoration.right::before,
body.dashboard-theme-businessLight .bigscreen-header-decoration.right::after {
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ============================================================================
 * ⑤ dashboard-theme-mintGreen 🌿 薄荷青绿：左上角丝带 + 圆点
 * ========================================================================== */
body.dashboard-theme-mintGreen .big-screen-stage,
body.dashboard-theme-mintGreen .canvas-preview-header.big-screen-header {
  background-image:
    radial-gradient(circle, rgba(16, 185, 129, 0.10) 1.4px, transparent 1.4px),
    radial-gradient(ellipse at 100% 0%, rgba(52, 211, 153, 0.18), transparent 60%);
  background-size: 26px 26px, 100% 100%;
}
body.dashboard-theme-mintGreen .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-mintGreen .big-screen-stage .canvas-chart-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 120px; height: 26px;
  background: linear-gradient(135deg, #10b981, #14b8a6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.28);
}
body.dashboard-theme-mintGreen .dashboard-canvas .canvas-chart-card,
body.dashboard-theme-mintGreen .big-screen-stage .canvas-chart-card {
  border: 1px solid rgba(16, 185, 129, 0.18) !important;
  box-shadow:
    0 8px 22px rgba(5, 150, 105, 0.10) !important;
}

/* ============================================================================
 * ⑥ dashboard-theme-holoQuantum 🧠 神经漫游 Neuromancer（赛博朋克 · 数据空间）
 *   彻底抛弃所有传统dashboard框架：
 *   · 背景：3D透视网格深渊 + 数字雨矩阵 + 神经网络节点脉冲
 *   · 卡片：六边形切角 + 霓虹描边脉冲 + 全息扫描线
 *   · 标题：RGB故障偏移 + 数据注入闪烁 + 切割字体感
 *   · Header 装饰：电路板走线 + 数据包流动 + 节点连接
 *   · 分割线：数据流注入 + 节点脉冲 + 霓虹渐变
 * ========================================================================== */

/* --- 动画关键帧 --- */
@keyframes neuro-grid-perspective {
  0%   { background-position: 0 0; }
  100% { background-position: 0 30px; }
}
@keyframes neuro-digital-rain {
  0%   { transform: translateY(-30%); }
  100% { transform: translateY(30%); }
}
@keyframes neuro-scan-line {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}
@keyframes neuro-glitch-text {
  0%, 100% {
    text-shadow: 2px 0 rgba(255,0,110,0.7), -2px 0 rgba(0,245,255,0.7);
    transform: translate(0);
  }
  20% {
    text-shadow: -3px 1px rgba(255,0,110,0.6), 3px -1px rgba(0,245,255,0.6);
    transform: translate(2px, -1px);
  }
  40% {
    text-shadow: 1px -2px rgba(255,0,110,0.8), -1px 2px rgba(0,245,255,0.8);
    transform: translate(-1px, 1px);
  }
  60% {
    text-shadow: 0 0 rgba(255,0,110,0), 0 0 rgba(0,245,255,0);
    transform: translate(1px, 0);
  }
  80% {
    text-shadow: -2px -1px rgba(255,0,110,0.5), 2px 1px rgba(0,245,255,0.5);
    transform: translate(-2px, -1px);
  }
}
@keyframes neuro-neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(0,245,255,0.4),
      0 0 20px rgba(0,245,255,0.2),
      0 0 40px rgba(255,0,110,0.15),
      inset 0 0 15px rgba(0,245,255,0.05);
  }
  50% {
    box-shadow:
      0 0 15px rgba(0,245,255,0.7),
      0 0 35px rgba(0,245,255,0.4),
      0 0 60px rgba(255,0,110,0.25),
      inset 0 0 25px rgba(0,245,255,0.1);
  }
}
@keyframes neuro-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.6); opacity: 1; }
}
@keyframes neuro-data-flow {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}
@keyframes neuro-flicker {
  0%, 19%, 22%, 63%, 65%, 70%, 100% { opacity: 1; }
  20%, 21%, 64%, 66%, 69% { opacity: 0.3; }
}
@keyframes neuro-border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes neuro-card-hover {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.01); }
}

/* --- 背景 1/6：3D透视网格深渊 + 数字雨 + 神经网络节点 --- */
body.dashboard-theme-holoQuantum .big-screen-stage,
body.dashboard-theme-holoQuantum .canvas-preview-header.big-screen-header {
  background-color: #0a0014;
  background-image:
    radial-gradient(ellipse 800px 400px at 50% 100%, rgba(255, 0, 110, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 600px 300px at 20% 80%, rgba(0, 245, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 500px 250px at 80% 90%, rgba(57, 255, 20, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #0a0014 0%, #0d0221 40%, #120428 70%, #0a0014 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  position: relative;
  overflow: hidden;
}

/* 透视网格层 - 3D网格地面效果 */
body.dashboard-theme-holoQuantum .big-screen-stage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65%;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 29px,
      rgba(0, 245, 255, 0.12) 29px,
      rgba(0, 245, 255, 0.12) 30px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 49px,
      rgba(255, 0, 110, 0.08) 49px,
      rgba(255, 0, 110, 0.08) 50px
    );
  transform: perspective(500px) rotateX(65deg);
  transform-origin: bottom center;
  opacity: 0.6;
  animation: neuro-grid-perspective 1.5s linear infinite;
}

/* 数字雨层 */
body.dashboard-theme-holoQuantum .big-screen-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0,245,255,0.15) 30%, rgba(57,255,20,0.25) 60%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255,0,110,0.1) 25%, rgba(0,245,255,0.2) 55%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(57,255,20,0.12) 40%, rgba(0,245,255,0.18) 70%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,245,255,0.08) 20%, rgba(255,0,110,0.15) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(57,255,20,0.1) 35%, rgba(0,245,255,0.12) 65%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255,0,110,0.08) 15%, rgba(57,255,20,0.2) 45%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,245,255,0.1) 30%, rgba(255,0,110,0.1) 60%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(57,255,20,0.15) 25%, rgba(0,245,255,0.2) 55%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255,0,110,0.12) 20%, rgba(57,255,20,0.08) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,245,255,0.2) 35%, rgba(255,0,110,0.1) 70%, transparent 100%);
  background-size:
    2px 180px, 2px 150px, 2px 200px, 2px 120px, 2px 160px,
    2px 140px, 2px 170px, 2px 130px, 2px 190px, 2px 110px;
  background-repeat: repeat-y;
  background-position:
    5% 0, 12% 20%, 20% -10%, 28% 15%, 35% -20%,
    45% 10%, 55% -15%, 65% 5%, 75% -5%, 85% 25%;
  opacity: 0.4;
  animation: neuro-digital-rain 6s linear infinite;
}

/* --- 卡片 2/6：六边形切角 + 霓虹描边脉冲 + 全息扫描线 --- */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card {
  border-radius: 0 !important;
  border: none !important;
  background: rgba(10, 0, 25, 0.7) !important;
  clip-path: polygon(
    16px 0, calc(100% - 16px) 0,
    100% 16px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%,
    0 calc(100% - 16px), 0 16px
  );
  position: relative;
  overflow: hidden;
  animation: neuro-neon-pulse 3s ease-in-out infinite;
}

/* 霓虹渐变边框 - 用伪元素实现 */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card::before,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px;
  background: linear-gradient(135deg,
    #00f5ff 0%,
    #ff006e 30%,
    #39ff14 50%,
    #ffd60a 70%,
    #00f5ff 100%);
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
  animation: neuro-border-flow 4s ease-in-out infinite;
  clip-path: polygon(
    16px 0, calc(100% - 16px) 0,
    100% 16px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%,
    0 calc(100% - 16px), 0 16px
  );
}

/* 全息扫描线 */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card::after,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 245, 255, 0.1) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 5;
  animation: neuro-scan-line 3s linear infinite;
}

/* 卡片内部内容层 */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card .chart-card-body,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card .chart-card-body {
  position: relative;
  z-index: 2;
}

/* --- 卡片标题栏 3/6：数据流标题 + 霓虹节点 --- */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card .chart-card-header,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card .chart-card-header {
  background:
    linear-gradient(90deg,
      rgba(0, 245, 255, 0.15) 0%,
      rgba(255, 0, 110, 0.08) 50%,
      transparent 100%) !important;
  border-bottom: 1px solid rgba(0, 245, 255, 0.2) !important;
  position: relative;
  padding-left: 28px !important;
  padding-right: 20px !important;
}

/* 标题前霓虹节点 */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card .chart-card-header::before,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card .chart-card-header::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f5ff;
  box-shadow:
    0 0 8px #00f5ff,
    0 0 16px rgba(0, 245, 255, 0.6),
    0 0 24px rgba(0, 245, 255, 0.3);
  animation: neuro-node-pulse 2s ease-in-out infinite;
}

/* 标题栏右侧数据流指示 */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card .chart-card-header::after,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card .chart-card-header::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg,
    transparent,
    #39ff14 30%,
    #00f5ff 60%,
    #ff006e 100%);
  opacity: 0.7;
  filter: blur(0.5px);
  animation: neuro-flicker 2s linear infinite;
}

/* 标题文字 - 霓虹发光 */
body.dashboard-theme-holoQuantum .dashboard-canvas .canvas-chart-card .chart-card-title,
body.dashboard-theme-holoQuantum .big-screen-stage .canvas-chart-card .chart-card-title {
  padding-left: 8px !important;
  color: #00f5ff !important;
  text-shadow:
    0 0 10px rgba(0, 245, 255, 0.8),
    0 0 20px rgba(0, 245, 255, 0.5),
    1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  font-family: "Consolas", "Monaco", monospace !important;
}

/* --- 标题 4/6：RGB故障偏移 + 数据注入闪烁 --- */
body.dashboard-theme-holoQuantum .bigscreen-title,
body.dashboard-theme-holoQuantum .canvas-preview-header .bigscreen-title {
  background: linear-gradient(90deg,
    #00f5ff 0%,
    #ff006e 30%,
    #39ff14 50%,
    #ffd60a 70%,
    #00f5ff 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          text-fill-color: transparent !important;
  color: transparent !important;
  filter:
    drop-shadow(0 0 15px rgba(0, 245, 255, 0.6))
    drop-shadow(0 0 30px rgba(255, 0, 110, 0.4)) !important;
  text-shadow: none !important;
  position: relative;
  letter-spacing: 10px !important;
  font-weight: 900 !important;
  font-family: "Impact", "Arial Black", sans-serif !important;
  animation: neuro-glitch-text 4s ease-in-out infinite, neuro-border-flow 6s ease-in-out infinite;
}

/* --- Header 左右装饰 5/6：电路板走线 + 数据包流动 --- */
body.dashboard-theme-holoQuantum .bigscreen-header-decoration {
  width: 320px !important;
  position: relative;
  height: 80px !important;
}

/* 主装饰：电路板走线风格 */
body.dashboard-theme-holoQuantum .bigscreen-header-decoration::before {
  content: "";
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 2px !important;
  width: 280px !important;
  opacity: 1 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    #00f5ff 20%,
    #ff006e 50%,
    #39ff14 80%,
    transparent 100%) !important;
  box-shadow:
    0 0 8px rgba(0, 245, 255, 0.6),
    0 0 16px rgba(255, 0, 110, 0.4) !important;
  clip-path: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* 左侧装饰左端 */
body.dashboard-theme-holoQuantum .bigscreen-header-decoration.left::before {
  left: 0 !important;
  right: auto !important;
}

/* 右侧装饰右端 */
body.dashboard-theme-holoQuantum .bigscreen-header-decoration.right::before {
  right: 0 !important;
  left: auto !important;
}

/* 内层：节点 + 数据包 */
body.dashboard-theme-holoQuantum .bigscreen-header-decoration::after {
  content: "";
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 20px !important;
  opacity: 1 !important;
  clip-path: none !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 10% 50%, #00f5ff 4px, transparent 8px),
    radial-gradient(circle at 35% 50%, #ff006e 3px, transparent 7px),
    radial-gradient(circle at 60% 50%, #39ff14 3.5px, transparent 7px),
    radial-gradient(circle at 85% 50%, #ffd60a 3px, transparent 6px),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 245, 255, 0.3) 50%,
      transparent 100%);
  background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%, 200% 100%;
  animation: neuro-border-flow 5s linear infinite;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 6px rgba(0, 245, 255, 0.5));
}

body.dashboard-theme-holoQuantum .bigscreen-header-decoration.left::after {
  left: 0 !important;
  right: auto !important;
  width: 280px !important;
}
body.dashboard-theme-holoQuantum .bigscreen-header-decoration.right::after {
  right: 0 !important;
  left: auto !important;
  width: 280px !important;
  background:
    radial-gradient(circle at 15% 50%, #ffd60a 3px, transparent 6px),
    radial-gradient(circle at 40% 50%, #39ff14 3.5px, transparent 7px),
    radial-gradient(circle at 65% 50%, #ff006e 3px, transparent 7px),
    radial-gradient(circle at 90% 50%, #00f5ff 4px, transparent 8px),
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 0, 110, 0.3) 50%,
      transparent 100%);
  background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%, 200% 100%;
}

/* --- 分割线 6/6：数据流注入 + 节点脉冲 --- */
body.dashboard-theme-holoQuantum .bigscreen-divider-h,
body.dashboard-theme-holoQuantum .bigscreen-divider-v {
  background: linear-gradient(90deg,
    transparent 0%,
    #00f5ff 20%,
    #ff006e 40%,
    #39ff14 50%,
    #ff006e 60%,
    #00f5ff 80%,
    transparent 100%) !important;
  background-size: 200% 100% !important;
  box-shadow:
    0 0 10px rgba(0, 245, 255, 0.5),
    0 0 20px rgba(255, 0, 110, 0.3) !important;
  position: relative;
  height: 2px !important;
  animation: neuro-border-flow 4s linear infinite;
  filter: none;
}

body.dashboard-theme-holoQuantum .bigscreen-divider-h::before,
body.dashboard-theme-holoQuantum .bigscreen-divider-h::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #00f5ff 40%, transparent 70%);
  transform: translateY(-50%);
  animation: neuro-node-pulse 2s ease-in-out infinite;
  box-shadow:
    0 0 10px #00f5ff,
    0 0 20px rgba(0, 245, 255, 0.5);
}

body.dashboard-theme-holoQuantum .bigscreen-divider-h::before {
  left: 20%;
  animation-delay: 0s;
}
body.dashboard-theme-holoQuantum .bigscreen-divider-h::after {
  right: 20%;
  background: radial-gradient(circle, #fff 0%, #ff006e 40%, transparent 70%);
  box-shadow:
    0 0 10px #ff006e,
    0 0 20px rgba(255, 0, 110, 0.5);
  animation-delay: 1s;
}

/* 中心数据节点 */
body.dashboard-theme-holoQuantum .bigscreen-divider-h {
  background-image:
    radial-gradient(circle at 50% 50%, #fff 2px, #39ff14 5px, rgba(0,245,255,0.5) 10px, transparent 16px),
    linear-gradient(90deg,
      transparent 0%,
      #00f5ff 20%,
      #ff006e 40%,
      #39ff14 50%,
      #ff006e 60%,
      #00f5ff 80%,
      transparent 100%) !important;
  background-size: 100% 100%, 200% 100% !important;
}

/* --- 时钟：赛博朋克数字风格 --- */
body.dashboard-theme-holoQuantum .bigscreen-clock {
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
  color: #00f5ff !important;
  letter-spacing: 4px !important;
  padding: 10px 24px !important;
  border: 1px solid rgba(0, 245, 255, 0.4) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(0,245,255,0.1), rgba(0,0,0,0.3)) !important;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0,
    100% 10px, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 10px 100%,
    0 calc(100% - 10px), 0 10px
  );
  box-shadow:
    0 0 15px rgba(0, 245, 255, 0.4),
    inset 0 0 10px rgba(0, 245, 255, 0.1) !important;
  text-shadow:
    0 0 10px rgba(0, 245, 255, 0.8),
    0 0 20px rgba(0, 245, 255, 0.5) !important;
  position: relative;
  font-weight: 700 !important;
  animation: neuro-flicker 4s linear infinite;
}
body.dashboard-theme-holoQuantum .bigscreen-clock::before,
body.dashboard-theme-holoQuantum .bigscreen-clock::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff006e;
  box-shadow: 0 0 8px #ff006e, 0 0 16px rgba(255,0,110,0.6);
  animation: neuro-node-pulse 1.5s ease-in-out infinite;
}
body.dashboard-theme-holoQuantum .bigscreen-clock::before {
  top: -3px; left: 15px;
}
body.dashboard-theme-holoQuantum .bigscreen-clock::after {
  bottom: -3px; right: 15px;
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14, 0 0 16px rgba(57,255,20,0.6);
  animation-delay: 0.75s;
}

/* --- 退出大屏按钮：赛博朋克风格 --- */
body.dashboard-theme-holoQuantum .bigscreen-exit-btn {
  border: 1px solid rgba(255, 0, 110, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255,0,110,0.15), rgba(0,0,0,0.4)) !important;
  color: #ff6b9d !important;
  border-radius: 0 !important;
  padding: 6px 16px !important;
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0 calc(100% - 8px), 0 8px
  );
  box-shadow:
    0 0 10px rgba(255, 0, 110, 0.3),
    inset 0 0 8px rgba(255, 0, 110, 0.1) !important;
  text-shadow: 0 0 8px rgba(255, 0, 110, 0.6) !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  font-family: "Consolas", monospace !important;
}
body.dashboard-theme-holoQuantum .bigscreen-exit-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 20px rgba(255, 0, 110, 0.5),
    0 0 40px rgba(255, 0, 110, 0.3),
    inset 0 0 12px rgba(255, 0, 110, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255,0,110,0.25), rgba(0,0,0,0.5)) !important;
  color: #fff !important;
}

/* --- 副标题：赛博朋克数据感 --- */
body.dashboard-theme-holoQuantum .bigscreen-subtitle,
body.dashboard-theme-holoQuantum .canvas-preview-header .bigscreen-subtitle {
  color: rgba(0, 245, 255, 0.8) !important;
  text-shadow:
    0 0 10px rgba(0, 245, 255, 0.5),
    1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 6px !important;
  font-weight: 400 !important;
  font-family: "Consolas", "Monaco", monospace !important;
  opacity: 0.9;
}


/* ⑥ 画布内卡片选中态：主题色高亮边框（原蓝色在暗色主题上也能用，但用主题色更统一） */
.dashboard-canvas .canvas-chart-card.selected {
  border-color: var(--dash-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--dash-accent) 40%, transparent),
    var(--dash-panel-shadow),
    0 0 16px color-mix(in srgb, var(--dash-accent) 50%, transparent);
}

/* ⑦ 画布内卡片拖拽手柄：暗底上也要看清（原蓝色也可以，换主题色更搭） */
.dashboard-canvas .canvas-chart-card .resize-handle {
  background:
    linear-gradient(135deg, transparent 50%, var(--dash-accent) 50%);
  opacity: 0.85;
}
.dashboard-canvas .canvas-chart-card:hover .resize-handle,
.dashboard-canvas .canvas-chart-card.selected .resize-handle {
  opacity: 1;
}

/* ⑧ 大屏独有样式：卡片变网格流式 + 隐藏编辑按钮 */
.big-screen-stage .canvas-chart-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
}
.big-screen-stage .canvas-chart-card .chart-card-actions,
.big-screen-stage .canvas-chart-card .chart-card-controls,
.big-screen-stage .canvas-chart-card .card-resize-handle {
  display: none !important;
}

/* ============================================================
 * 可折叠 accordion：右侧配置面板 3 段（看板/布局/图表配置）
 * 约束：只有父元素有 class="accordion-item" 时，accordion-header 才触发折叠
 *       accordion-header 右侧显示 '+'，展开时变 '−'
 * ============================================================ */
.accordion-item {
  border-bottom: 1px dashed var(--border-color, #e5e7eb);
  padding-bottom: 2px;
  margin-bottom: 10px;
}
.accordion-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.accordion-item.dashboard-config-section {
  /* 原来的 dashboard-config-section 底部虚线已经由 accordion-item 提供，避免重复 */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}
.accordion-item.chart-config-section {
  padding: 0;
}

/* accordion-header = sidebar-panel-header，但按钮样式+右边'+'符号 */
.accordion-item > .accordion-header.sidebar-panel-header {
  /* 复用 sidebar-panel-header 的 gradient/font-size/padding，只覆盖按钮行为 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: linear-gradient(90deg, rgba(59,130,246,0.10), transparent);
  font-size: 14px;
  padding: 14px 16px 12px;
  letter-spacing: 0.5px;
  color: var(--text-primary, #111827);
  font-weight: 600;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
  position: relative;
}
.accordion-item > .accordion-header.sidebar-panel-header:hover {
  background: linear-gradient(90deg, rgba(59,130,246,0.18), transparent);
}
.accordion-item > .accordion-header::after {
  /* 约束：右侧 '+' 符号，font-size:16px，font-weight:300  */
  content: '+';
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary, #6b7280);
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}
.accordion-item.open > .accordion-header::after {
  content: '−';                /* 展开：减号（视觉比'×'稳，和'+'是一对）*/
  color: var(--accent-color, #3b82f6);
}

/* accordion-body：默认折叠（max-height:0 + overflow），展开后由 JS 测量实际高度并设置 */
.accordion-item > .accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item.open > .accordion-body {
  /* 展开态：由 JS 设置精确 max-height（或直接 'none'，但为了动画用实际值更好）*/
  max-height: 4000px;     /* 足够大的上限，保证任何内容都能显示；配合过渡动画 */
}

/* 图表配置块：里面的 config-empty/config-content 不需要额外 padding（沿用原样式）*/
.chart-config-section > .accordion-body {
  padding: 0 0 8px;
}

/* ============================================================
 * 设置页画布顶部的看板标题预览（canvas-preview-header）
 * 复用 big-screen-header 样式，只是在小容器里字号稍微缩小
 * ============================================================ */
.canvas-preview-header.big-screen-header {
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 18px 28px 14px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent;
}
.canvas-preview-header.big-screen-header::before {
  display: none;
}
/* 保留大标题底部的渐变发光分割线（完全和大屏一致） */
.canvas-preview-header.big-screen-header::after {
  display: block;
  left: 6%;
  right: 6%;
  bottom: 0;
}
.canvas-preview-header .bigscreen-title {
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: 4px;
}
.canvas-preview-header .bigscreen-subtitle {
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 1.5px;
}
.canvas-preview-header .bigscreen-clock {
  font-size: clamp(12px, 1.05vw, 16px);
  letter-spacing: 2px;
  padding: 5px 12px;
}