@layer components {
  .flash-stack { position: fixed; top: 5rem; left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--gutter); pointer-events: none; }
  .flash { display: flex; align-items: center; gap: var(--space-sm); width: 100%; max-width: 44rem; padding: 0.875rem var(--space-md); border: var(--xf-border); border-radius: var(--xf-radius-md); box-shadow: var(--xf-shadow-md); color: var(--xf-ink); font-size: var(--text-base); font-weight: 600; pointer-events: auto; }
  .flash--alert { background: var(--xf-red-soft); }
  .flash--notice { background: var(--xf-green-soft); }
  .flash__icon { flex-shrink: 0; }
}