/* ═══════════════════════════════════
   CHARTS
   ═══════════════════════════════════ */
.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.hbar-label { font-size: 12px; color: var(--g500); width: 72px; text-align: right; flex-shrink: 0; font-weight: 500; }
.hbar-track { flex: 1; height: 18px; background: var(--g100); border-radius: 4px; overflow: hidden; }
.hbar-fill  { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.25,.46,.45,.94); }
.hbar-val   { font-size: 12px; font-weight: 600; color: var(--g600); width: 38px; flex-shrink: 0; }

.vbars-wrap { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding-bottom: 22px; position: relative; }
.vbar-col   { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; height: 100%; justify-content: flex-end; }
.vbar       { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .5s cubic-bezier(.25,.46,.45,.94); }
.vbar-lbl   { font-size: 9.5px; color: var(--g400); text-align: center; line-height: 1.2; white-space: nowrap; }
.vbar-num   { font-size: 10px; color: var(--g500); font-weight: 600; }

canvas { display: block; width: 100% !important; }

/* ═══════════════════════════════════
   STATS TABS
   ═══════════════════════════════════ */
.tabs-row {
  display: flex; gap: 2px;
  border-bottom: 2px solid var(--g150);
  margin-bottom: 18px;
}
.tab-btn {
  padding: 9px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--g400);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--t);
  border-radius: var(--r) var(--r) 0 0;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.tab-btn:hover { color: var(--g700); background: var(--g50); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-light); }