.chartContainer { margin-bottom: 28px; }
.chartHeader    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.chartTitle     { font-size: 14px; font-weight: 700; color: var(--text); }

.chartBox {
  position: relative; height: 280px;
  background: var(--card-bg); border-radius: 10px;
  padding: 16px; border: 1px solid var(--border);
}
@media (max-width: 768px) { .chartBox { height: 220px; } }

.chartTabsWrap { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.chartTabBtn {
  padding: 7px 14px; border-radius: 7px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text-light);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.12s; white-space: nowrap;
}
.chartTabBtn:hover  { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.chartTabBtn.active { background: var(--primary); border-color: var(--primary); color: white; }