fix(ui): polish auth glass layout

- tighten auth panel spacing for large screens
- apply glass styling to login and release panels
- improve contrast for light and dark themes

ui/components/auth/oss/auth-card.tsx

@@ -8,7 +8,7 @@ interface AuthCardProps {
 }
 
 const CARD_BASE =
-  "rounded-large border-divider shadow-small dark:bg-background/80 relative flex w-full flex-col border bg-white/85 backdrop-blur-xl";
+  "relative isolate flex w-full flex-col overflow-hidden rounded-3xl border border-black/8 bg-gradient-to-br from-white/78 via-white/70 to-white/58 shadow-2xl shadow-slate-300/35 ring-1 ring-white/55 backdrop-blur-2xl before:pointer-events-none before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/55 before:via-white/10 before:to-transparent before:content-[''] after:pointer-events-none after:absolute after:-top-16 after:right-10 after:h-36 after:w-36 after:rounded-full after:bg-emerald-400/8 after:blur-3xl after:content-[''] dark:border-white/10 dark:from-black/72 dark:via-black/64 dark:to-black/56 dark:shadow-black/45 dark:ring-white/6 dark:before:from-white/8 dark:before:via-transparent";
 
 export const AuthCard = ({ className, children }: AuthCardProps) => (
   <div className={cn(CARD_BASE, className)}>{children}</div>

ui/components/auth/oss/auth-layout.tsx

@@ -15,17 +15,14 @@ export const AuthLayout = ({ title, children }: AuthLayoutProps) => (
   <main className="relative min-h-screen w-full overflow-hidden">
     <AnimatedDotsBackground />
 
-    <div className="relative z-10 grid min-h-screen grid-cols-1 lg:grid-cols-2">
-      <div className="flex items-center justify-center px-6 py-10 sm:px-10">
+    <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6 py-10 sm:px-10">
+      <div className="flex w-full items-center justify-center gap-10 lg:justify-between xl:gap-16">
         <div className="flex w-full max-w-sm flex-col">
           <div className="mb-6 flex w-full justify-center">
-            <ProwlerExtended
-              width={300}
-              className="h-auto w-[220px] max-w-full"
-            />
+            <ProwlerExtended width={300} className="h-auto w-55 max-w-full" />
           </div>
 
-          <AuthCard className="gap-3 px-6 py-8">
+          <AuthCard className="gap-4 px-7 py-9">
             <div className="flex items-center justify-between">
               <p className="pb-1 text-lg font-medium">{title}</p>
               <ThemeSwitch aria-label="Toggle theme" />
@@ -34,9 +31,9 @@ export const AuthLayout = ({ title, children }: AuthLayoutProps) => (
             {children}
           </AuthCard>
         </div>
-      </div>
 
-      <AuthReleaseHighlights />
+        <AuthReleaseHighlights />
+      </div>
     </div>
   </main>
 );

ui/components/auth/oss/auth-release-highlights.tsx

@@ -1,6 +1,5 @@
 import { Icon } from "@iconify/react";
 
-import { AuthCard } from "@/components/auth/oss/auth-card";
 import { ProwlerShort } from "@/components/icons";
 import { Button } from "@/components/shadcn";
 
@@ -19,57 +18,78 @@ const HIGHLIGHTS: readonly string[] = [
 export const AuthReleaseHighlights = () => (
   <aside
     aria-label={`Prowler v${RELEASE.version} highlights`}
-    className="hidden items-center justify-center px-6 py-10 sm:px-10 lg:flex"
+    className="hidden w-full max-w-md lg:block"
   >
-    <div className="w-full max-w-md">
-      <AuthCard className="gap-6 px-7 py-8">
+    <div className="relative overflow-hidden rounded-3xl border border-black/8 bg-gradient-to-br from-white/78 via-white/70 to-white/58 p-8 shadow-2xl ring-1 shadow-slate-300/35 ring-white/55 backdrop-blur-2xl dark:border-white/10 dark:from-black/70 dark:via-black/62 dark:to-black/52 dark:shadow-black/45 dark:ring-white/6">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/55 via-white/10 to-transparent dark:from-white/8 dark:via-transparent"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-18 -right-12 h-40 w-40 rounded-full bg-emerald-400/8 blur-3xl dark:bg-emerald-400/8"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-16 left-8 h-28 w-28 rounded-full bg-cyan-400/8 blur-3xl dark:bg-cyan-400/6"
+      />
+
+      <div className="relative flex flex-col gap-6">
         <div
           aria-hidden="true"
-          className="absolute top-6 right-6 flex h-9 w-9 items-center justify-center rounded-md bg-emerald-400/15"
+          className="flex h-10 w-10 items-center justify-center rounded-xl border border-black/8 bg-emerald-400/18 shadow-lg shadow-emerald-400/15 dark:border-white/10 dark:bg-emerald-400/15 dark:shadow-emerald-950/30"
         >
           <ProwlerShort width={18} className="text-emerald-400" />
         </div>
 
-        <div className="pr-14">
-          <p className="text-xs font-semibold text-emerald-400">
+        <div>
+          <p className="text-xs font-semibold tracking-wide text-emerald-700 uppercase dark:text-emerald-300">
             Prowler v{RELEASE.version}
           </p>
-          <h2 className="mt-1 text-2xl leading-tight font-semibold">
+          <h2 className="mt-1 text-2xl leading-tight font-semibold text-slate-950 dark:text-white dark:drop-shadow-sm">
             Fresh off the branch
           </h2>
-          <p className="text-default-500 mt-2 text-sm">
+          <p className="mt-2 max-w-sm text-sm text-slate-600 dark:text-white/72">
             A quick look at what we just shipped in v{RELEASE.version}.
           </p>
         </div>
 
         <ul className="flex flex-col gap-3">
           {HIGHLIGHTS.map((label) => (
-            <li key={label} className="flex items-start gap-3">
+            <li
+              key={label}
+              className="flex items-start gap-3 text-slate-700 dark:text-white/90"
+            >
               <Icon
                 aria-hidden="true"
                 icon="mdi:check-circle"
                 width={20}
-                className="mt-0.5 shrink-0 text-emerald-400"
+                className="mt-0.5 shrink-0 text-emerald-600 drop-shadow-sm dark:text-emerald-300"
               />
-              <span className="text-sm">{label}</span>
+              <span className="text-sm leading-6">{label}</span>
             </li>
           ))}
         </ul>
 
-        <div className="flex items-center justify-center gap-3">
-          <Button asChild size="sm">
+        <div className="flex items-center gap-3">
+          <Button asChild size="sm" className="shadow-lg shadow-emerald-950/25">
             <a href={RELEASE.url} target="_blank" rel="noopener noreferrer">
               See full release notes
             </a>
           </Button>
-          <Button asChild variant="outline" size="sm">
+          <Button
+            asChild
+            variant="outline"
+            size="sm"
+            className="border-black/8 bg-white/45 text-slate-900 hover:bg-white/70 dark:border-white/12 dark:bg-white/6 dark:text-white dark:hover:bg-white/10"
+          >
             <a href={RELEASE.repoUrl} target="_blank" rel="noopener noreferrer">
               <Icon aria-hidden="true" icon="mdi:github" width={16} />
               GitHub
             </a>
           </Button>
         </div>
-      </AuthCard>
+      </div>
     </div>
   </aside>
 );