.pg-skeleton-shell,
.pg-skeleton-grid,
.pg-skeleton-stack,
.pg-skeleton-row {
  display: grid;
  gap: 14px;
}

.pg-skeleton-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pg-skeleton-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pg-skeleton-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.pg-skeleton-card.compact {
  padding: 14px;
  border-radius: 16px;
}

.pg-skeleton-card::after,
.pg-skeleton-thumb::after,
.pg-skeleton-line::after,
.pg-skeleton-chip::after,
.pg-skeleton-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.68) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: pg-skeleton-shimmer 1.15s infinite;
}

.pg-skeleton-thumb,
.pg-skeleton-line,
.pg-skeleton-chip,
.pg-skeleton-circle {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e7edf8, #dbe7fb);
}

.pg-skeleton-thumb {
  width: 100%;
  height: 168px;
  border-radius: 16px;
}

.pg-skeleton-thumb.short {
  height: 96px;
}

.pg-skeleton-line {
  height: 14px;
  border-radius: 999px;
}

.pg-skeleton-line.lg {
  height: 22px;
}

.pg-skeleton-line.md {
  height: 18px;
}

.pg-skeleton-line.short {
  width: 38%;
}

.pg-skeleton-line.mid {
  width: 62%;
}

.pg-skeleton-line.wide {
  width: 82%;
}

.pg-skeleton-line.full {
  width: 100%;
}

.pg-skeleton-chip {
  width: 110px;
  height: 34px;
  border-radius: 999px;
}

.pg-skeleton-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.pg-skeleton-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pg-skeleton-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.pg-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow: auto;
  padding: 18px 14px 28px;
  background: linear-gradient(160deg, rgba(238, 244, 255, 0.97), rgba(255, 244, 224, 0.97));
  backdrop-filter: blur(6px);
}

.pg-transition-overlay.visible {
  display: block;
}

.pg-transition-inner {
  max-width: 1120px;
  margin: 0 auto;
}

@keyframes pg-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 900px) {
  .pg-skeleton-grid.two,
  .pg-skeleton-grid.three {
    grid-template-columns: 1fr;
  }
}