/* =====================================================
   Состояния загрузки: скелетоны-заглушки и плашка
   «не удалось загрузить» с кнопкой повтора.
   ===================================================== */

/* ----------------- Скелетоны загрузки ----------------- */
/* Мягкое «дыхание» + бегущий блик: пока грузятся показатели, вместо нулей
   видно дружелюбную анимацию, и не кажется, что что-то сломалось. */
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
.skel {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--fill-track);
  border-radius: var(--r-sm);
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--surface) 70%, transparent),
    transparent
  );
  animation: skel-shimmer 1.3s var(--ease) infinite;
}
.skel-ring-num { width: 60px; height: 30px; border-radius: 8px; }
.goal-skel-row { display: flex; flex-direction: column; }
.skel-row { display: flex; align-items: center; gap: 12px; }
.skel-circle { border-radius: 50%; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
}

/* Мягкая плашка «не удалось загрузить» с кнопкой повтора. */
.load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 16px;
  color: var(--text-secondary);
}
.load-error i { width: 30px; height: 30px; color: var(--text-muted); }
.load-error-t { font-size: 14px; font-weight: 600; }
.load-error .btn-primary { padding: 10px 20px; }