.admin-state {
  --state-accent: var(--color-text-muted);
  --state-surface: var(--color-surface-muted);
  --state-indicator-size: 2.5rem;
  --state-pulse-duration: 1.8s;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--state-surface);
  color: var(--color-text);
}
.admin-state[hidden] { display: none; }
.admin-state__indicator {
  display: grid;
  place-items: center;
  flex: 0 0 var(--state-indicator-size);
  width: var(--state-indicator-size);
  height: var(--state-indicator-size);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--state-accent);
}
.admin-state__indicator::after { content: '—'; }
.admin-state__content { min-width: 0; overflow-wrap: anywhere; }
.admin-state__content strong { display: block; }
.admin-state__content p { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.admin-state__content p:empty { display: none; }
.admin-state[data-kind='loading'], .admin-state[data-kind='waiting'] {
  --state-accent: var(--color-primary);
  --state-surface: var(--color-primary-soft);
}
.admin-state[data-kind='loading'] .admin-state__indicator::after,
.admin-state[data-kind='waiting'] .admin-state__indicator::after {
  content: '';
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  background: currentColor;
  animation: admin-state-pulse var(--state-pulse-duration) ease-in-out infinite;
}
.admin-state[data-kind='success'] { --state-accent: var(--color-success); --state-surface: var(--color-success-soft); }
.admin-state[data-kind='success'] .admin-state__indicator::after { content: '✓'; }
.admin-state[data-kind='error'] { --state-accent: var(--color-danger); --state-surface: var(--color-danger-soft); }
.admin-state[data-kind='error'] .admin-state__indicator::after { content: '!'; }
@keyframes admin-state-pulse { 0%, 100% { opacity: .35; transform: scale(.65); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .admin-state[data-kind] .admin-state__indicator::after { animation: none; }
}