.engagement-panel {
  margin-bottom: 22px;
}

.engagement-panel .metric-grid {
  margin: 18px 0;
}

.period-switch {
  display: flex;
  gap: 8px;
}

.period-switch button {
  border: 1px solid rgba(31, 213, 227, .4);
  border-radius: 999px;
  background: rgba(5, 25, 34, .8);
  color: #bceef4;
  padding: 8px 13px;
  font-weight: 800;
  cursor: pointer;
}

.period-switch button[aria-pressed="true"] {
  background: #20d5e3;
  color: #001116;
}

.engagement-detail {
  margin: 16px 0 0;
  color: #9ecbd2;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .engagement-panel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}