/* ==========================================================
   数据图表主题 · 面板样式（chart-theme.css）
   ----------------------------------------------------------
   全部选择器以 .ct- 前缀作用域化，避免影响宿主既有样式。
   颜色一律走宿主 token（--text-* / --surface-* / --border / --accent-*），
   因此浅色与深色（body.theme-tech）自动成立，无需两套。
   ========================================================== */

.ct-preview{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  padding:8px 6px;
  margin-bottom:16px;
  overflow:hidden;
}
.ct-preview canvas{display:block;width:100%;height:auto;}

.ct-row{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;flex-wrap:wrap;
}
.ct-lab{
  font-size:12.5px;font-weight:700;color:var(--text-1);
  min-width:68px;flex-shrink:0;
}
.ct-val{
  font-size:12px;font-weight:700;color:var(--accent-a-ink);
  min-width:18px;text-align:right;
}
.ct-hint{
  font-size:11.5px;color:var(--text-3);line-height:1.75;
  margin:-6px 0 14px;
}

/* 系列取色：一排圆角小色块 + 序号 */
.ct-swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ct-sw{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;
}
.ct-sw input[type="color"]{
  width:34px;height:34px;border:1px solid var(--border);border-radius:9px;
  background:none;padding:0;cursor:pointer;
}
.ct-sw input[type="color"]:hover{border-color:var(--accent-line);}
.ct-sw span{font-size:10.5px;color:var(--text-3);line-height:1;}

/* 开关组 */
.ct-toggles{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.ct-tg{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--text-2);cursor:pointer;
}
.ct-tg input[type="checkbox"]{width:15px;height:15px;accent-color:var(--accent-a);cursor:pointer;}

/* 动作按钮 */
.ct-actions{display:flex;gap:10px;margin-top:4px;}

/* 范围滑块跟随强调色 */
#ctGlow{width:100%;accent-color:var(--accent-a);}

/* ---------- 面板自身也跟随所选图表配色 ----------
   为什么这么做：用户在面板里改色时，若页面上看不到任何变化，
   会以为"没生效"。让面板的主色/滑块/勾选/渐变条跟着 1~2 号系列色走，
   改动立刻可见。注意这是**作用域化**的：只影响 #ctCard 内部，
   不碰宿主其它 UI（宿主仍用品牌 --accent-*）。 */
#ctCard .ct-val{color:var(--ct-c1);}
#ctCard input[type="range"]{accent-color:var(--ct-c1);}
#ctCard .ct-tg input[type="checkbox"]{accent-color:var(--ct-c1);}
#ctCard .ct-sw input[type="color"]{border-color:var(--ct-c1);}
#ctCard .badge-green{
  background:linear-gradient(135deg,var(--ct-c1),var(--ct-c2));
  color:#fff;border:none;
}
#ctCard .ct-preview{
  border-color:var(--ct-c1);
  background:linear-gradient(135deg,var(--ct-c1),var(--ct-c2)) ,
             var(--surface-2);
  background-blend-mode:soft-light;
}
#ctCard .ct-actions .btn:first-child{
  border-color:var(--ct-c1);color:var(--ct-c1);
}
#ctCard .ct-actions .btn:first-child:hover{
  background:linear-gradient(135deg,var(--ct-c1),var(--ct-c2));
  color:#fff;border-color:transparent;
}