.monitor-range {
  display: flex;
  gap: 8px;
  margin: 2px 0 20px;
}

.monitor-range button {
  border: 1px solid #ded8cf;
  border-radius: 999px;
  padding: 8px 13px;
  color: #716a62;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.monitor-range button.is-active {
  background: #282720;
  border-color: #282720;
  color: #fff;
}

.metric-grid { margin-bottom: 22px; }
.metric strong { font-size: clamp(20px, 2.7vw, 31px); overflow-wrap: anywhere; }

.monitor-chart {
  background: #fff;
  border: 1px solid #e6e1d8;
  border-radius: 17px;
  padding: 19px 15px 11px;
  margin: 13px 0;
}

.monitor-chart-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px 15px;
  padding: 0 5px;
}

.monitor-chart-heading h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -.02em;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  color: #797269;
  font-size: 10px;
}

.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.chart-scroll { max-width: 100%; overflow-x: auto; margin-top: 13px; }
.chart-scroll svg { display: block; max-width: none; }
.chart-grid-line { stroke: #eae6df; stroke-width: 1; }
.chart-axis-label { fill: #999087; font-size: 10px; font-family: inherit; }

@media (max-width: 520px) {
  .monitor-chart { padding: 15px 10px 8px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}