feat(auth): glassmorphism card + clearer register CTA

Give the login/register card a proper glassmorphism look (new .auth-glass:
more transparent so the clouds blur through, bright glassy edge, soft layered
shadow) while keeping a slate tint so the white form text stays legible.

Make the "no account? register" CTA stand out over the bright sky: a dark
frosted glass pill with an arrow, and dark slate prompt text with a soft white
halo instead of the washed-out white.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/app/globals.css

@@ -229,6 +229,21 @@ html.lenis body {
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+/* Glassmorphism card for the auth screens: more transparent than the landing
+   panel so the clouds blur through, a bright glassy edge highlight and a soft
+   layered shadow — kept on a slate tint so the white form text stays legible
+   over the bright sky. (See hype4 glassmorphism generator for the language.) */
+.auth-glass {
+  background: rgba(17, 25, 45, 0.32);
+  backdrop-filter: blur(22px) saturate(170%);
+  -webkit-backdrop-filter: blur(22px) saturate(170%);
+  border: 1px solid rgba(255, 255, 255, 0.30);
+  box-shadow:
+    0 12px 40px rgba(2, 6, 23, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.40),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .abrban-float,
   .abrban-scroll-hint,

frontend/src/components/auth/AuthShell.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
+import { ArrowLeft } from 'lucide-react';
 import { Link } from '@/i18n/Link';
 import { useT } from '@/i18n/I18nProvider';
 import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
@@ -58,15 +59,24 @@ export function AuthShell({
             <p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
           </div>
 
-          <div className="abrban-panel rounded-[1.75rem] p-6 sm:p-8">{children}</div>
+          <div className="auth-glass rounded-[1.75rem] p-6 sm:p-8">{children}</div>
 
           {altPrompt && altHref && altLabel && (
-            <p className="abrban-ink mt-6 text-center text-sm text-white/90">
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-2 gap-y-2">
-              {altPrompt}{' '}
+              <span
-              <Link href={altHref} className="font-bold text-primary-200 underline-offset-4 hover:text-white hover:underline">
+                className="text-base font-semibold text-slate-900"
+                style={{ textShadow: '0 1px 3px rgba(255,255,255,0.7)' }}
+              >
+                {altPrompt}
+              </span>
+              <Link
+                href={altHref}
+                className="inline-flex items-center gap-1.5 rounded-xl border border-white/45 bg-slate-900/45 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-black/25 backdrop-blur-md transition hover:border-white/70 hover:bg-slate-900/65"
+              >
                 {altLabel}
+                <ArrowLeft className="h-4 w-4 ltr:rotate-180" />
               </Link>
-            </p>
+            </div>
           )}
         </div>
       </main>