Add shared critical confirmation popup for destructive actions

.codex/skills/design-vpn-client-ui/references/motion-and-interaction.md

@@ -87,7 +87,14 @@ Use exponential ease-out curves such as `cubic-bezier(0.16, 1, 0.3, 1)` for arri
 - When an existing subscription is being edited and the field is idle, use the mode-accent underline as a five-second timeout indicator: start bright, fade to quiet, then restore display mode.
 - Pause the timeout once the user enters content.
 - Close and clear unfinished input on outside click or Escape.
-- Animate the trash lid independently on hover. Open an inline, non-blocking confirmation surface instead of a browser-native confirm dialog.
+- Animate the trash lid independently on hover. Use the shared critical confirmation popup instead of a browser-native confirm dialog.
+
+## Critical confirmation popup
+
+- Reserve the blocking popup for explicit destructive or data-loss confirmation. It must cover the viewport, make the background inert, and use `alertdialog` with `aria-modal`.
+- Fade and blur the backdrop first, resolve the popup from the center, then reveal its title, description, and actions in a short sequence.
+- Put initial focus on the safe action, trap Tab within the popup, let Escape and backdrop click choose the safe action, and restore the invoking focus on close.
+- Reuse the same component and motion vocabulary for every critical confirmation. Reduced motion presents the final state immediately.
 
 ## First-run initialization