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/theme/Alert.ts

@@ -4,4 +4,17 @@ export const ThemeAlert = Alert.extend({
   defaultProps: {
     radius: "md",
   },
+  styles: (_theme, props) => {
+    // Re-auth banner: body-colored surface with a red hairline border, used
+    // for the persistent mid-session re-authentication banner.
+    if (props.variant === "reauth") {
+      return {
+        root: {
+          backgroundColor: "var(--mantine-color-body)",
+          border: "1px solid var(--mantine-color-red-3)",
+        },
+      };
+    }
+    return { root: {} };
+  },
 });