Refine VPN client instructions and subscription refresh flow

.codex/skills/design-vpn-client-ui/SKILL.md

@@ -28,6 +28,8 @@ Preserve the repo's focused one-screen VPN client language: a centered primary a
 - Let visible cycles finish. Never stop a spinner mid-turn or remount a list before its exit animation completes.
 - Prefer one clear value over unsupported detail. Hide subscription fields the provider does not supply.
 - Keep client UI compact and calm. Do not introduce dashboard cards, decorative chrome, or admin-console density.
+- Do not use a modal, popup, or blocking backdrop unless the user explicitly asks for one. Prefer inline disclosure or a non-modal layer that preserves the main screen.
+- Avoid borders, divider lines, and framed regions by default. Build hierarchy with spacing, typography, subtle surface changes, light, and depth; use a line only when it communicates an essential state.
 
 ## Acceptance pass
 

.codex/skills/design-vpn-client-ui/references/visual-language.md

@@ -11,7 +11,8 @@ Design for a macOS user glancing at a small VPN control surface in a quiet deskt
 - Build the left flow vertically: power icon, stable connection copy, proxy address, copy actions.
 - Place subscription identity, usage, expiry, and servers in a compact column to the right.
 - Collapse to one centered column on narrow screens.
-- Avoid cards and enclosing frames. Use spacing, type, thin rules, and state color for hierarchy.
+- Avoid enclosing frames, borders, and divider lines. Use spacing, type, subtle surface changes, light, depth, and state color for hierarchy.
+- Do not introduce popups or modals without an explicit user request. Prefer inline disclosure or a non-modal side layer when supporting content must coexist with the main control surface.
 - Keep server rows vertical and narrow. Underlines should be only slightly wider than the server label and ping.
 
 ## Geometry and alignment