/* حلقه‌ی گرافیکیِ نمایش درصد/وضعیت کارنامه (ضعیف/متوسط/خوب/عالی) */
.score-ring {
  --size: 96px;
  --thickness: 10px;
  --ring-color: var(--color-primary);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(
    var(--ring-color) calc(var(--pct) * 1%),
    var(--color-divider) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr; /* conic-gradient باید از بالا و به‌صورت ساعت‌گرد شروع شود */
}

.score-ring__inner {
  width: calc(var(--size) - var(--thickness) * 2);
  height: calc(var(--size) - var(--thickness) * 2);
  border-radius: 50%;
  background: var(--color-body-bg, white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  direction: rtl;
}

.score-ring__pct {
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ring-color);
}

.score-ring__label {
  font-size: 1.1rem;
  color: var(--color-caption);
}

.score-ring--sm {
  --size: 64px;
  --thickness: 7px;
}
.score-ring--sm .score-ring__pct {
  font-size: 1.2rem;
}
.score-ring--sm .score-ring__label {
  font-size: 0.95rem;
}

.score-ring--lg {
  --size: 140px;
  --thickness: 14px;
}
.score-ring--lg .score-ring__pct {
  font-size: 2.2rem;
}
.score-ring--lg .score-ring__label {
  font-size: 1.3rem;
}

.score-ring.status--weak {
  --ring-color: #e53e3e;
}
.score-ring.status--medium {
  --ring-color: #dd8b00;
}
.score-ring.status--good {
  --ring-color: #3182ce;
}
.score-ring.status--excellent {
  --ring-color: #2f9e44;
}