@layer components {
  .cx-loading-state {
    overflow: hidden;
  }

  .cx-loading-state .cx-card-body,
  .cx-skeleton-state {
    display: grid;
    gap: 1rem;
  }

  .cx-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }

  .cx-skeleton-card {
    min-height: 116px;
    border-radius: var(--cx-radius-lg);
    border: 1px solid var(--cx-border);
  }

  .cx-skeleton-lines {
    display: grid;
    gap: .65rem;
  }

  .cx-skeleton-line {
    min-height: .9rem;
    width: 100%;
  }

  .cx-skeleton-line.sm { width: 46%; }
  .cx-skeleton-line.md { width: 68%; }
  .cx-skeleton-line.lg { width: 86%; }

  .cx-skeleton-table {
    display: grid;
    gap: .45rem;
  }

  .cx-skeleton-table-row {
    min-height: 44px;
    border-radius: var(--cx-radius-md);
    border: 1px solid var(--cx-border);
  }

  .cx-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(16,42,45,.055), rgba(16,42,45,.11), rgba(16,42,45,.055));
    background-size: 220% 100%;
    animation: cx-skeleton 1.2s ease-in-out infinite;
    color: transparent !important;
  }

  .cx-skeleton-message {
    color: var(--cx-muted);
    font-size: .92rem;
    margin: 0;
  }

  @keyframes cx-skeleton {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
  }
}


/* B-Design-1 — Feedback/loading state contract. */
@layer components {
  .cx-empty-state,
  .cx-state-box,
  .cx-loading-state,
  .cx-error-state {
    background: var(--cx-state-bg);
    border: 1px dashed var(--cx-state-border);
    color: var(--cx-state-text);
    border-radius: var(--cx-radius-lg);
  }
}