feat(17-05): add phone/desktop style branch to CredentialSheet (D-09)

- Add window.matchMedia('(max-width: 767px)') phone check
- Desktop branch: position fixed, top/left 50%, translate(-50%, -50%), maxWidth 480px, borderRadius 12px
- Phone branch: unchanged bottom-sheet (bottom 0, left 0, right 0, borderRadius 12px 12px 0 0)
- role=dialog, aria-modal, aria-label unchanged — only position CSS branched
- SettingsSheet, ChangePasswordSheet, LinkOidcSheet centering in prior commit (Task 1)

apps/pwa/src/components/CredentialSheet.tsx

@@ -153,6 +153,7 @@ export function CredentialSheet({
   const heading = headingFor(mode);
   const isPending = credentialMutation.isPending;
   const saveDisabled = isPending || password.trim().length === 0 || email.trim().length === 0;
+  const phone = window.matchMedia('(max-width: 767px)').matches;
 
   return (
     <>
@@ -173,7 +174,9 @@ export function CredentialSheet({
         role="dialog"
         aria-modal="true"
         aria-label={heading}
-        style={{
+        style={
+          phone
+            ? {
                 position: 'fixed',
                 bottom: 0,
                 left: 0,
@@ -184,9 +187,24 @@ export function CredentialSheet({
                 padding: 'var(--space-6, 24px)',
                 zIndex: 301,
                 fontFamily: 'var(--font-family-base)',
+              }
+            : {
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
                 maxWidth: '480px',
-          margin: '0 auto',
-        }}
+                width: 'calc(100% - var(--space-8, 32px))',
+                maxHeight: 'calc(100dvh - var(--space-8, 32px))',
+                overflowY: 'auto',
+                background: 'var(--color-surface)',
+                borderRadius: '12px',
+                boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
+                padding: 'var(--space-6, 24px)',
+                zIndex: 301,
+                fontFamily: 'var(--font-family-base)',
+              }
+        }
       >
         {/* Heading */}
         <h2