feat(ui): restyle auth shell to match admin brand

AI-Co-Authored-By: Grok

src/frontend/auth/AuthApp.tsx

@@ -144,9 +144,9 @@ export function AuthApp() {
 
   return (
     <main className="auth-page">
-      <section className="auth-brand-panel">
+      <section className="auth-brand-panel" aria-label="MailHub">
         <div className="auth-brand-top">
-          <div className="brand-logo auth-logo">MH</div>
+          <div className="brand-logo auth-logo" aria-hidden="true">MH</div>
           <div>
             <Typography.Title level={1}>MailHub</Typography.Title>
             <Typography.Text>{t('auth.subtitle')}</Typography.Text>

src/frontend/styles.css

@@ -441,8 +441,9 @@ body {
 
 .auth-page {
   background:
-    radial-gradient(circle at 8% 8%, rgba(79, 70, 229, 0.12), transparent 28%),
-    linear-gradient(135deg, var(--mh-canvas) 0%, var(--mh-primary-soft) 48%, #f8fafc 100%);
+    radial-gradient(circle at 12% 10%, rgba(79, 70, 229, 0.14), transparent 30%),
+    radial-gradient(circle at 88% 82%, rgba(99, 102, 241, 0.08), transparent 26%),
+    linear-gradient(135deg, var(--mh-canvas) 0%, var(--mh-primary-soft) 52%, var(--mh-canvas) 100%);
   display: grid;
   grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
   min-height: 100vh;
@@ -476,7 +477,10 @@ body {
   color: rgba(255, 255, 255, 0.72);
 }
 
+/* Inherits admin .brand-logo gradient; oversized for auth hero */
 .auth-logo {
+  border-radius: var(--mh-radius-control);
+  font-size: 16px;
   height: 52px;
   width: 52px;
 }
@@ -489,9 +493,9 @@ body {
 
 .auth-signal-item {
   align-items: center;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--mh-radius-card);
   display: flex;
   gap: 14px;
   padding: 16px;
@@ -499,10 +503,10 @@ body {
 
 .auth-signal-item > span {
   align-items: center;
-  background: rgba(22, 119, 255, 0.18);
-  border: 1px solid rgba(96, 165, 250, 0.34);
-  border-radius: 10px;
-  color: #93c5fd;
+  background: rgba(79, 70, 229, 0.22);
+  border: 1px solid rgba(165, 180, 252, 0.28);
+  border-radius: var(--mh-radius-control);
+  color: #c7d2fe;
   display: inline-flex;
   font-size: 22px;
   height: 42px;
@@ -534,15 +538,21 @@ body {
 }
 
 .auth-card {
+  background: var(--mh-surface);
+  border-color: var(--mh-border);
+  border-radius: var(--mh-radius-card);
+  box-shadow: var(--mh-shadow-card);
   max-width: 456px;
+  overflow: hidden;
   width: 100%;
 }
 
 .auth-card .ant-card-body {
-  padding: 34px;
+  padding: 36px;
 }
 
 .auth-heading h2 {
+  color: var(--mh-ink);
   margin: 6px 0 0 !important;
 }