@layer components {
  .flash-region { display: grid; gap: var(--space-3); margin: var(--space-4) auto 0; max-width: var(--content-public); padding-inline: var(--space-4); }
  .notice { align-items: start; border: 1px solid currentColor; border-radius: var(--radius-lg); display: flex; gap: var(--space-4); justify-content: space-between; padding: var(--space-3) var(--space-4); }
  .notice p { color: var(--color-text); }
  .notice--success { background: var(--success-soft); color: var(--success-strong); }
  .notice--info { background: var(--info-soft); color: var(--info-strong); }
  .notice--warning { background: var(--warning-soft); color: var(--warning-strong); }
  .notice--danger { background: var(--danger-soft); color: var(--danger-strong); }
  .notice__dismiss { color: currentColor; flex: 0 0 auto; }
  .empty-state { align-items: center; background: var(--color-surface); border: 1px dashed var(--neutral-400); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; }
  .empty-state p { color: var(--color-text-secondary); max-width: 40rem; }
  .empty-state__mark { align-items: center; background: var(--accent-100); border-radius: var(--radius-md); color: var(--accent-800); display: inline-flex; font-size: var(--text-h2); height: 3rem; justify-content: center; width: 3rem; }
  .empty-state-note { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-4); text-align: center; }
  .quiet-state { align-items: center; color: var(--color-text-secondary); display: flex; gap: var(--space-4); padding-block: var(--space-6); }
  .quiet-state > span { align-items: center; background: var(--success-soft); border-radius: 50%; color: var(--success-strong); display: flex; flex: 0 0 auto; height: 2.75rem; justify-content: center; width: 2.75rem; }
  .quiet-state > div { min-width: 0; overflow-wrap: anywhere; }
  .quiet-state h3 { color: var(--color-text); }
}