.crm-skeleton-line,
.crm-skeleton-block,
.crm-media-loading[data-loading-media] {
  background-color: var(--skeleton-fill, #e3e9ed);
}

.crm-media-loading[data-loading-media] img[data-loading-image] {
  background-color: transparent;
}

.crm-skeleton-line,
.crm-skeleton-block {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.crm-skeleton-line { height: .75rem; }
.crm-skeleton-line--short { width: 35%; }
.crm-skeleton-line--medium { width: 65%; }
.crm-skeleton-block { min-height: 4rem; }
.crm-skeleton-block--chart { min-height: 11rem; }
.crm-skeleton-stack { display: grid; gap: .75rem; min-width: 0; }
.crm-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
}

.crm-skeleton-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.crm-loading-page > .crm-skeleton-stack { gap: 1.25rem; }
.crm-loading-page .crm-skeleton-block { min-height: 7rem; }
.crm-loading-page--cards .crm-skeleton-block { aspect-ratio: 1.65; }
.crm-loading-page--list .crm-skeleton-block { min-height: 2.75rem; }
.crm-loading-page--list .crm-skeleton-grid { grid-template-columns: 1fr; }
.crm-loading-heading { max-width: 23rem; }
.crm-loading-heading > .crm-skeleton-line:first-child { height: 1.25rem; }
.crm-loading-card { padding: .9rem; background: var(--surface, #fff); border-radius: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .crm-loading-page { animation: crm-skeleton-reveal 120ms step-end both; }
}

@keyframes crm-skeleton-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}