.gq-wrap { display: grid; gap: 12px; }
.gq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.gq-stat {
  background: var(--surface, #10131c);
  border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 14px;
  padding: 12px 14px;
}
.gq-stat b { display: block; font-size: 1.25rem; letter-spacing: -.03em; }
.gq-stat span { color: var(--muted, #8b91a8); font-size: .78rem; }
.gq-bar { height: 8px; background: #1e2433; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.gq-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22d3ee, #34d399); }
.gq-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--muted, #8b91a8); }
.gq-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
@media (max-width: 800px) {
  .gq-grid { grid-template-columns: 1fr 1fr; }
}