feat: restyle recovery page to match login split-panel layout

- Split-panel layout matching login page design
- Same CSS token system, input components, and admonition errors
- Form-actions row: 'Back to sign in' left, submit button right (auto-width)
- OTP label, autocomplete='email', proper field labels
- Dark mode support with inverted contrast scale

Author: Kzoeps

packages/auth-service/src/routes/login-page.ts

@@ -746,7 +746,7 @@ function renderLoginPage(opts: {
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4a8 8 0 1 0 4.21 14.804 1 1 0 0 1 1.054 1.7A9.958 9.958 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 1.104-.27 2.31-.949 3.243-.716.984-1.849 1.6-3.331 1.465a4.207 4.207 0 0 1-2.93-1.585c-.94 1.21-2.388 1.94-3.985 1.715-2.53-.356-4.04-2.91-3.682-5.458.358-2.547 2.514-4.586 5.044-4.23.905.127 1.68.536 2.286 1.126a1 1 0 0 1 1.964.368l-.515 3.545v.002a2.222 2.222 0 0 0 1.999 2.526c.75.068 1.212-.21 1.533-.65.358-.493.566-1.245.566-2.067a8 8 0 0 0-8-8Zm-.112 5.13c-1.195-.168-2.544.819-2.784 2.529-.24 1.71.784 3.03 1.98 3.198 1.195.168 2.543-.819 2.784-2.529.24-1.71-.784-3.03-1.98-3.198Z"/>
                   </svg>
                 </span>
-                <input type="email" id="email" name="email" class="input-field" required ${opts.initialStep === "email" ? "autofocus" : ""}
+                <input type="email" id="email" name="email" class="input-field" required ${opts.initialStep === 'email' ? 'autofocus' : ''}
                        autocomplete="email" placeholder="you@example.com"
                        value="${escapeHtml(opts.loginHint)}">
               </div>
@@ -780,7 +780,7 @@ function renderLoginPage(opts: {
                 </span>
                 <input type="text" id="code" name="code" class="input-field otp-input" required
                        maxlength="8" pattern="[0-9]{8}" inputmode="numeric"
-                       autocomplete="one-time-code" placeholder="00000000" ${opts.initialStep === "otp" ? "autofocus" : ""}>
+                       autocomplete="one-time-code" placeholder="00000000" ${opts.initialStep === 'otp' ? 'autofocus' : ''}>
               </div>
             </div>
           </div>