.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric.success { border-top-color: var(--green); }
.metric.premium { border-top-color: #d49a16; }
.metric.free { border-top-color: #7b8b97; }
.metric span { color: var(--muted); font-weight: 700; }
.metric strong { color: var(--text); font-size: 32px; }
.metric small { color: var(--muted); }

.connection-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

.connection-metrics div {
  background: #fff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.connection-metrics span { color: var(--muted); }
.connection-metrics strong { font-size: 25px; }
.green-text { color: var(--green); }
.red-text { color: var(--red); }
.analytics-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.rank-lists { padding: 4px 20px 20px; }
.rank-lists h3 { font-size: 14px; margin: 18px 0 8px; }
.rank-lists p { margin: 0; padding: 9px 0; border-bottom: 1px solid #e1ebf2; display: flex; justify-content: space-between; gap: 12px; }
.compact-table { min-width: 520px; }

@media (max-width: 850px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-columns { grid-template-columns: 1fr; }
  .connection-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .metric-grid { gap: 9px; }
  .metric { padding: 14px; }
  .metric strong { font-size: 26px; }
  .metric small { font-size: 11px; }
}