.engagement-overview {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid #dce4f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(29, 51, 84, .06);
}

.engagement-overview__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid #edf1f7;
}

.engagement-overview__heading p {
  margin: 0 0 6px;
  color: #397cff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.engagement-overview__heading h2 { margin: 0; color: #172033; font-size: 18px; }
.engagement-overview__heading span { display: block; margin-top: 4px; color: #8591a5; font-size: 12px; }
.engagement-overview__period { flex: 0 0 auto; padding: 7px 11px; border-radius: 9px; background: #f2f6ff; color: #4e6f9f; font-size: 12px; }
.engagement-overview__period i { margin-right: 6px; color: #397cff; }

.engagement-overview__body {
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  min-height: 230px;
}

.engagement-overview__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-right: 1px solid #edf1f7;
}
.engagement-overview__metrics article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 16px;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid #e4e9f1;
  border-radius: 10px;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.engagement-overview__metrics article:hover { background: #f6f9ff; transform: translateX(2px); }
.engagement-overview__metrics article.is-active { background: linear-gradient(90deg, #edf4ff 0%, rgba(237,244,255,0) 100%); }
.engagement-overview__metrics article.is-active::before { position: absolute; left: 0; width: 3px; height: 38px; border-radius: 4px; background: #397cff; content: ""; }
.engagement-overview__metrics article>span { color: #56647a; font-size: 13px; }
.engagement-overview__metrics article>span i { width: 22px; margin-right: 6px; color: #397cff; }
.engagement-overview__metrics article>strong { grid-column: 2; grid-row: 1 / span 2; color: #172033; font-size: 22px; }
.engagement-overview__metrics article>small { color: #929db0; font-size: 11px; }

.engagement-chart { min-width: 0; padding: 17px 22px 12px; background: linear-gradient(180deg, #fbfcff 0%, #fff 100%); }
.engagement-chart__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.engagement-chart__top span,.engagement-chart__top strong { display: block; }
.engagement-chart__top span { color: #7a879b; font-size: 12px; }
.engagement-chart__top strong { margin-top: 3px; color: #26344b; font-size: 16px; }
.engagement-chart__legend { color: #8793a7; font-size: 12px; }
.engagement-chart__legend i { display: inline-block; width: 18px; height: 3px; margin-right: 6px; border-radius: 3px; background: #397cff; vertical-align: middle; }
.engagement-chart__canvas { width: 100%; height: 155px; }
.engagement-chart__canvas svg { display: block; width: 100%; height: 100%; overflow: visible; }
.engagement-chart__grid { stroke: #e8edf5; stroke-width: 1; stroke-dasharray: 4 5; }
.engagement-chart__area { fill: url(#engagementArea); }
.engagement-chart__line { fill: none; stroke: #397cff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 4px rgba(57,124,255,.18)); }
.engagement-chart__dot { fill: #fff; stroke: #397cff; stroke-width: 3; }
.engagement-chart__empty-line { stroke: #b9c9e3; stroke-width: 2; stroke-dasharray: 5 6; }
.engagement-chart__dates { display: flex; justify-content: space-between; margin-top: 2px; color: #99a4b5; font-size: 11px; }

@media (max-width: 960px) {
  .engagement-overview__body { grid-template-columns: 1fr; }
  .engagement-overview__metrics { grid-template-columns: repeat(4, 1fr); border-right: 0; border-bottom: 1px solid #edf1f7; }
  .engagement-overview__metrics article { border: 1px solid #e4e9f1; }
}
@media (max-width: 600px) {
  .engagement-overview__heading { align-items: flex-start; flex-direction: column; padding: 20px; }
  .engagement-overview__metrics { grid-template-columns: repeat(2, 1fr); padding: 12px; }
  .engagement-chart { padding: 20px 16px; }
  .engagement-chart__canvas { height: 190px; }
}