/* Empty + loading panels */
.empty-state {
  @apply flex-1 flex items-center justify-center p-12;
}

.empty-state-content {
  @apply text-center max-w-sm;
}

.empty-state-content h3 {
  font-size: var(--font-size-xl);
  margin-bottom: 12px;
}

.empty-state-content p {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin-bottom: 16px;
}

.empty-state-content ul {
  list-style: none;
  padding: 0;
  @apply flex flex-col gap-2;
}

.empty-state-content li {
  font-size: var(--font-size-base);
  color: var(--text-muted);
}

.empty-state-content code {
  background-color: var(--surface-code);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-family-mono);
  font-size: 13px;
}

.loading-state {
  @apply flex-1 flex flex-col items-center justify-center gap-4 p-12;
}

.spinner {
  @apply w-8 h-8 border-2 border-t-transparent rounded-full;
  border-color: var(--border-base);
  border-top-color: var(--accent-primary);
  animation: spin 1s linear infinite;
}
