body {
  background: #f7f8fa;
}

.stat-card,
.quadrant,
.card {
  border-radius: 1rem;
}

.quadrant.q1 { border-top: 4px solid #dc3545; }
.quadrant.q2 { border-top: 4px solid #198754; }
.quadrant.q3 { border-top: 4px solid #fd7e14; }
.quadrant.q4 { border-top: 4px solid #6c757d; }

.donut-chart {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(#dc3545 calc(var(--pct) * 1%), #198754 0);
  position: relative;
}

.donut-chart::after {
  content: "";
  position: absolute;
  inset: 24px;
  background: white;
  border-radius: 50%;
}