@layer components {
/* ── Empty state ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  text-align: center;
}
.empty-state-icon { font-size: 32px; color: var(--faint); }
.empty-state-text { font-size: 14px; color: var(--muted); }
}