.circular-progress {
  position: relative;
  display: inline-block;
}

.circular-progress svg {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: #e2e8f0;
  transition: stroke 0.3s ease;
}

.progress-ring-circle {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-value {
  font-weight: 700;
  fill: var(--text-main);
  transform: rotate(90deg);
  transform-origin: center;
}

.progress-label {
  fill: var(--text-secondary);
  font-weight: 500;
  transform: rotate(90deg);
  transform-origin: center;
}

.progress-sublabel {
  fill: var(--text-light);
  font-weight: 400;
  transform: rotate(90deg);
  transform-origin: center;
}
