.hg-chart-shell { display: grid; gap: 14px; }
.hg-chart-shell__canvas {
  position: relative;
  min-height: 292px;
}
.hg-chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hg-chart-axis {
  stroke: var(--hg-color-chart-axis);
  stroke-width: 1.4;
}
.hg-chart-grid {
  stroke: rgba(173, 185, 198, 0.22);
  stroke-width: 1;
}
.hg-chart-label {
  fill: var(--hg-color-chart-label);
  font-family: var(--hg-font-sans);
  font-size: 13px;
  font-weight: 500;
}
.hg-chart-label--axis-y { fill: var(--hg-color-chart-label-strong); }
.hg-chart-area-fill { fill: var(--hg-color-chart-area-fill); }
.hg-chart-line-stroke {
  fill: none;
  stroke: var(--hg-color-chart-line);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hg-chart-dot { fill: var(--hg-color-chart-line); }
.hg-chart-bar { fill: var(--hg-color-chart-bar); }
.hg-donut-layout {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 30px;
  align-items: center;
}
.hg-donut {
  --donut-thickness: 52px;
  --donut-size: 168px;
  width: var(--donut-size);
  height: var(--donut-size);
  border-radius: 50%;
  background: var(--donut-gradient);
  position: relative;
}
.hg-donut::before {
  content: '';
  position: absolute;
  inset: var(--donut-thickness);
  border-radius: 50%;
  background: #ffffff;
}
@media (max-width: 1400px) {
  .hg-donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .hg-chart-shell__canvas { min-height: 250px; }
}