/* ============================================================
   Component · Empty State + Skeleton
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gio-space-9) var(--gio-space-6);
  gap: var(--gio-space-3);
}
.empty-state__icon {
  width: 64px; height: 64px;
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-bg-subtle);
  display: grid; place-items: center;
  color: var(--gio-color-text-muted);
  font-size: 28px;
  margin-bottom: var(--gio-space-2);
}
.empty-state__title {
  font-size: var(--gio-text-lg);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-strong);
  margin: 0;
}
.empty-state__sub {
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
  margin: 0;
  max-width: 36ch;
}
.empty-state__actions {
  margin-top: var(--gio-space-3);
  display: flex; gap: var(--gio-space-2);
}

.skeleton {
  background: linear-gradient(90deg,
    var(--gio-color-bg-subtle) 0%,
    var(--gio-color-border-muted) 50%,
    var(--gio-color-bg-subtle) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--gio-radius-sm);
}
.skeleton--text { height: 14px; }
.skeleton--title { height: 24px; border-radius: var(--gio-radius-md); }
.skeleton--card { height: 200px; border-radius: var(--gio-radius-xl); }
.skeleton--circle { border-radius: 50%; }

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}