feat(auth): redesign sign-in popups + modal in v3 design language

[ecto]

Summary

• Fixes Google sign-in regression on web: the OAuth callback popup at /auth/popup.html was hitting CSP because of an inline <script> block (script-src is 'self', no 'unsafe-inline'). Users got stuck on a blank "Completing sign-in…" screen. Extracted to a sibling popup.js, matching the existing desktop.html / desktop.js pattern.
• Redesigns the auth bridge pages (popup.html + desktop.html) and the in-app AuthModal to match the v3 design language from recent commits (02f9d8d1 "comb out Borland-era UI patterns", ed32703b "adopt v3 design system tokens").
• Inspired by Splash.tsx: large vcad. wordmark, brand-pink dot, indeterminate shimmer progress bar.

Auth bridge pages (popup.html + desktop.html)

• Drop Berkeley Mono (v3 reserves it for code surfaces). Body now Inter / SF Pro.
• Adopt v3 tokens: stage #0E0E10, chrome #1A1A1D, brand #F92672, 6px radii, opaque surfaces.
• Splash-style hero: 56px wordmark with brand-pink dot.
• Indeterminate shimmer progress bar while the postMessage / deep-link bridge runs.
• Brand-pink primary CTA on the fallback states ("Continue to vcad" / "Open vcad").
• popup.js now hides the progress bar once the success state is shown; desktop.js does the same on fallback.

AuthModal.tsx

• Wordmark text-3xl → text-5xl, mirrors Splash.
• Drop the idle pulse animation on the brand dot, the top-edge brand gradient, and the backdrop-blur glass effect — opaque bg-surface per v3 chrome.
• Square corners → rounded-xl on the dialog, rounded-md on buttons / input / error banner.
• Buttons h-11 → h-10, tighter typography.
• OR divider: drop Borland-era tracking-[0.18em] + 9.5px caps for plain lowercase 11px.
• Footer: title-cased "Terms · Privacy · Security" with text-text-tert dot separators.
• Close button: 12px X in 4px padding → 16px X in 28×28 rounded-md hit target.
• Sent state: rounded envelope badge, larger hierarchy.
• Colored brand logos: inline SVGs replace Phosphor monochrome icons. Google gets the official 4-color G; GitHub Octocat uses currentColor so it tracks the theme (white on dark, black on light).
• Email autofocus: onOpenAutoFocus on Dialog.Content overrides Radix's default (which focused the close button) and focuses the email field instead.

Screenshots

State	Dark	Light
Modal	Big wordmark, colored Google G, white GitHub Octocat, brand CTA when email valid	Modal flips to white surface with black GitHub Octocat
Popup loading	Wordmark + shimmer	Wordmark + shimmer
Popup complete	Wordmark + "Continue to vcad" brand CTA	Same

Test plan

• Sign in with Google in a web browser — verify the popup no longer blanks out on CSP, posts back to the opener, and closes itself.
• Sign in with GitHub — same.
• Email magic link → check "Check your email" state styling.
• Open the modal — email field is focused on mount.
• Toggle prefers-color-scheme — GitHub Octocat flips white ↔ black, Google G stays 4-color.
• Desktop magic-link → confirm the fallback page after 1.5s shows the brand-pink "Open vcad" + secondary "Continue in browser".

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

4 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
mecheval	Ignored		May 13, 2026 5:55pm
vcad	Ignored		May 13, 2026 5:55pm
vcad-docs	Ignored		May 13, 2026 5:55pm
vcad-mcp	Ignored		May 13, 2026 5:55pm