Update styling on confirmation failed page

src/pages/confirm-error.html

@@ -1,34 +1,63 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Confirmation Failed</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Email Confirmation Failed</title>
     <style>
+      * { box-sizing: border-box; }
       body {
-        font-family: system-ui, sans-serif;
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 100vh;
         margin: 0;
-        background: #f5f5f5;
+        background: #f0f2f5;
+        color: #1e293b;
       }
       .container {
+        width: 100%;
+        max-width: 480px;
+        margin: 16px;
         text-align: center;
-        padding: 2rem;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        padding: 40px 32px;
+        background: #ffffff;
+        border-radius: 12px;
+        border: 1px solid #e2e8f0;
+      }
+      .logo { height: 40px; width: auto; margin: 0 auto 16px; display: block; }
+      .brand {
+        font-size: 24px;
+        font-weight: 700;
+        margin: 0 0 28px;
+        color: {{brandAccent}};
+      }
+      .title {
+        font-size: 20px;
+        font-weight: 700;
+        margin: 0 0 12px;
+        color: #dc2626;
       }
       .message {
-        margin-top: 1rem;
-        color: #e74c3c;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #64748b;
+        margin: 0;
       }
+      .message a { color: {{brandAccent}}; text-decoration: none; font-weight: 600; }
     </style>
   </head>
   <body>
     <div class="container">
-      <h2>Confirmation Failed</h2>
-      <div class="message">{{message}}</div>
+      {{#brandLogo}}<img class="logo" src="{{brandLogo}}" alt="{{brandName}}" />{{/brandLogo}}
+      <div class="brand">{{brandName}}</div>
+      <h1 class="title">Email not confirmed</h1>
+      <p class="message">
+        {{message}}
+        <br /><br />
+        Visit <a href="{{settingsUrl}}">{{brandName}}</a> to try again or manage your subscription.
+      </p>
     </div>
   </body>
-</html>
+</html>