/* 【创作数据 · 页签样式】只用 var(--token)，禁一切颜色字面量 */
.cs-bar{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.cs-bar .sel{
  max-width:280px;
}
.cs-range{
  display:inline-flex;
  gap:var(--space-2);
  margin-left:var(--space-2);
}
.cs-rbtn{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--meta);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-sm);
  cursor:pointer;
}
.cs-rbtn.on{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-dim);
}
.cs-cells{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.cs-cell{
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
}
.cs-num{
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--fg);
  line-height:1.3;
}
.cs-lab{
  margin-top:var(--space-1);
  font-size:var(--text-sm);
  color:var(--meta);
}
.cs-sub{
  margin-top:var(--space-1);
  font-size:var(--text-xs);
  color:var(--meta);
}
.cs-warn{
  border:1px solid var(--warn);
  background:var(--accent-dim);
  color:var(--warn);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);
  margin-bottom:var(--space-4);
}
.cs-chart{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-4);
}
.cs-empty{
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
  color:var(--meta);
  padding:var(--space-8) var(--space-4);
  text-align:center;
  font-size:var(--text-md);
}
@media (max-width:640px){
  .cs-cells{ grid-template-columns:repeat(2,1fr); }
}