.ui-skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 200% 100%;
  animation: ui-skel-shine 1.4s ease-in-out infinite;
  border-radius: 8px;
  display: block;
}

@keyframes ui-skel-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ui-skel-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(15,23,42,.6);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}

.ui-skel-line {
  height: 14px;
  margin-bottom: 10px;
}

.ui-skel-line.short  { width: 40%; }
.ui-skel-line.medium { width: 70%; }
.ui-skel-line.long   { width: 90%; }

.ui-skel-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.ui-skel-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ui-skel-row > div { flex: 1; }