refactor(web): resolve Mantine/CSS rule violations in mid-session auth UI

- App.tsx: replace the inline `style={{}}` on the re-auth banner wrapper with
  Mantine style props (pos/top/bg) plus a `.reauth-banner-bar` class for the
  z-index/box-shadow that have no Mantine shorthand.
- App.tsx: extract the ~100-line inline `onAuthorize` and the inline `onCancel`
  step-up handlers into named `handleStepUpAuthorize`/`handleStepUpCancel`.
- ReAuthBanner: move the flat `styles={{ root }}` (background/border) into a
  `reauth` Alert theme variant; replace the raw `<span>` with `<Text>`.
- StepUpAuthModal: extract the inline `onClick` wrapper into `handleAuthorize`.

No behavior change; validate + integration green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DZyeWManYTvcXxjcrhxSQc

clients/web/src/components/groups/ReAuthBanner/ReAuthBanner.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Group } from "@mantine/core";
+import { Alert, Button, Group, Text } from "@mantine/core";
 
 export interface ReAuthBannerProps {
   message: string;
@@ -14,19 +14,15 @@ export function ReAuthBanner({
   return (
     <Alert
       color="red"
-      variant="light"
+      variant="reauth"
       title="Re-authentication required"
       withCloseButton
       onClose={onDismiss}
-      styles={{
-        root: {
-          backgroundColor: "var(--mantine-color-body)",
-          border: "1px solid var(--mantine-color-red-3)",
-        },
-      }}
     >
       <Group justify="space-between" align="center" wrap="nowrap" gap="md">
-        <span>{message}</span>
+        <Text component="span" size="sm">
+          {message}
+        </Text>
         <Button size="xs" variant="filled" onClick={onReauthenticate}>
           Re-authenticate
         </Button>