create-authenik8-app 2.4.14 → 2.4.15

package/templates/fullstack/apps/web/src/pages/DashboardPage.tsx

@@ -1,48 +1,188 @@
+import type { ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Activity, ArrowRight, CheckCircle2, FolderKanban, MonitorSmartphone, ShieldCheck } from "lucide-react";
-import { Link } from "react-router-dom";
-import { Badge, Card, EmptyState, Spinner } from "@authenik8/ui";
+import {
+  Activity,
+  ArrowRight,
+  CheckCircle2,
+  FolderKanban,
+  MonitorSmartphone,
+  Plus,
+  ShieldCheck,
+} from "lucide-react";
+import { Badge } from "@astryxdesign/core/Badge";
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { StatusDot } from "@astryxdesign/core/StatusDot";
+import { Link, useNavigate } from "react-router";
+import { EmptyState, Spinner } from "@authenik8/ui";
 import { accountApi, healthApi, projectApi } from "@authenik8/api-client";
-import { PageHeader, ErrorNotice } from "../components/Page";
+import { ErrorNotice } from "../components/Page";
 import { useAuth } from "../auth/AuthProvider";
 
 export function DashboardPage() {
   const { user } = useAuth();
+  const navigate = useNavigate();
   const projects = useQuery({ queryKey: ["projects"], queryFn: projectApi.list });
   const sessions = useQuery({ queryKey: ["sessions"], queryFn: accountApi.sessions });
   const health = useQuery({ queryKey: ["health"], queryFn: healthApi.status, refetchInterval: 60_000 });
+  const firstName = user?.name.trim().split(/\s+/)[0] || "there";
+  const projectCount = projects.data?.projects.length;
+  const sessionCount = sessions.data?.sessions.length;
+  const healthLabel = health.isPending
+    ? "Checking"
+    : health.isError
+      ? "Unavailable"
+      : health.data?.status ?? "Unknown";
 
   return (
-    <>
-      <PageHeader title={`Good to see you, ${user?.name.split(" ")[0]}`} description="Your workspace and identity services at a glance." />
+    <div className="dashboard-page">
+      <header className="dashboard-hero">
+        <div className="hero-copy">
+          <div className="eyebrow">
+            <StatusDot
+              variant={health.isError ? "error" : health.isPending ? "warning" : "success"}
+              label={`API status: ${healthLabel}`}
+              isPulsing={health.isPending}
+            />
+            <span>Protected workspace</span>
+          </div>
+          <h1>Good to see you, {firstName}</h1>
+          <p>Your projects, active identity sessions, and account security in one place.</p>
+        </div>
+        <div className="hero-actions">
+          <Button
+            label="Security settings"
+            variant="secondary"
+            onClick={() => navigate("/settings/security")}
+          />
+          <Button
+            label="New project"
+            variant="primary"
+            icon={<Plus size={17} />}
+            onClick={() => navigate("/projects/new")}
+          />
+        </div>
+      </header>
+
       <div className="stat-grid">
-        <Card className="stat-card"><span className="stat-icon cyan"><FolderKanban size={19} /></span><div><span>Projects</span><strong>{projects.data?.projects.length ?? "-"}</strong></div></Card>
-        <Card className="stat-card"><span className="stat-icon violet"><MonitorSmartphone size={19} /></span><div><span>Active sessions</span><strong>{sessions.data?.sessions.length ?? "-"}</strong></div></Card>
-        <Card className="stat-card"><span className="stat-icon green"><ShieldCheck size={19} /></span><div><span>Email security</span><strong>{user?.verified ? "Verified" : "Pending"}</strong></div></Card>
-        <Card className="stat-card"><span className="stat-icon amber"><Activity size={19} /></span><div><span>API status</span><strong>{health.data?.status ?? "Checking"}</strong></div></Card>
+        <MetricCard
+          icon={<FolderKanban size={20} />}
+          tone="cyan"
+          label="Projects"
+          value={projectCount ?? "-"}
+          detail={projectCount === 1 ? "Owned resource" : "Owned resources"}
+        />
+        <MetricCard
+          icon={<MonitorSmartphone size={20} />}
+          tone="violet"
+          label="Active sessions"
+          value={sessionCount ?? "-"}
+          detail="Across your devices"
+        />
+        <MetricCard
+          icon={<ShieldCheck size={20} />}
+          tone="green"
+          label="Email security"
+          value={user?.verified ? "Verified" : "Pending"}
+          detail={user?.verified ? "Identity confirmed" : "Action required"}
+        />
+        <MetricCard
+          icon={<Activity size={20} />}
+          tone="amber"
+          label="API status"
+          value={healthLabel}
+          detail="Checked every minute"
+        />
       </div>
 
       <div className="dashboard-grid">
-        <section className="panel">
-          <div className="panel-heading"><div><h2>Recent projects</h2><p>Latest workspace activity</p></div><Link className="text-link" to="/projects">View all <ArrowRight size={15} /></Link></div>
-          {projects.isPending ? <div className="panel-loading"><Spinner /></div> : projects.error ? <ErrorNotice error={projects.error} /> : projects.data!.projects.length === 0 ? (
-            <EmptyState icon={<FolderKanban />} title="No projects yet" action={<Link className="button button-primary" to="/projects/new">Create project</Link>}>Create the first owned resource in this workspace.</EmptyState>
+        <Card padding={0} className="dashboard-panel">
+          <div className="panel-heading">
+            <div><h2>Recent projects</h2><p>Your latest workspace activity</p></div>
+            <Link className="text-link" to="/projects">View all <ArrowRight size={15} /></Link>
+          </div>
+          {projects.isPending ? (
+            <div className="panel-loading"><Spinner /></div>
+          ) : projects.error ? (
+            <div className="panel-error"><ErrorNotice error={projects.error} /></div>
+          ) : projects.data!.projects.length === 0 ? (
+            <EmptyState
+              icon={<FolderKanban />}
+              title="No projects yet"
+              action={<Link className="button button-primary" to="/projects/new">Create project</Link>}
+            >
+              Create the first owned resource in this workspace.
+            </EmptyState>
           ) : (
-            <div className="table-wrap"><table><thead><tr><th>Name</th><th>Status</th><th>Updated</th></tr></thead><tbody>
-              {projects.data!.projects.slice(0, 5).map((project) => <tr key={project.id}><td><Link className="table-link" to={`/projects/${project.id}`}>{project.name}</Link></td><td><Badge tone={project.status === "ACTIVE" ? "success" : project.status === "ARCHIVED" ? "neutral" : "warning"}>{project.status}</Badge></td><td>{new Date(project.updatedAt).toLocaleDateString()}</td></tr>)}
-            </tbody></table></div>
+            <div className="table-wrap">
+              <table>
+                <caption className="sr-only">Recently updated projects</caption>
+                <thead><tr><th>Name</th><th>Status</th><th>Updated</th></tr></thead>
+                <tbody>
+                  {projects.data!.projects.slice(0, 5).map((project) => (
+                    <tr key={project.id}>
+                      <td><Link className="table-link" to={`/projects/${project.id}`}>{project.name}</Link></td>
+                      <td><Badge variant={projectStatusVariant(project.status)} label={formatLabel(project.status)} /></td>
+                      <td>{new Date(project.updatedAt).toLocaleDateString()}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           )}
-        </section>
-        <aside className="panel security-panel">
-          <div className="panel-heading"><div><h2>Security posture</h2><p>Account checks</p></div></div>
+        </Card>
+
+        <Card padding={0} className="dashboard-panel security-panel">
+          <div className="panel-heading">
+            <div><h2>Security posture</h2><p>Live account checks</p></div>
+            <Badge variant={user?.verified ? "success" : "warning"} label={user?.verified ? "Protected" : "Review"} />
+          </div>
           <ul className="check-list">
             <li><CheckCircle2 /><span><strong>Rotating session</strong><small>Refresh cookie protected</small></span></li>
             <li className={user?.verified ? "" : "pending"}><CheckCircle2 /><span><strong>Email verification</strong><small>{user?.verified ? "Identity confirmed" : "Action required"}</small></span></li>
             <li><CheckCircle2 /><span><strong>API authorization</strong><small>Role and owner policies active</small></span></li>
           </ul>
-          <Link className="button button-secondary full-width" to="/settings/security">Review account security</Link>
-        </aside>
+          <div className="security-action">
+            <Button
+              label="Review account security"
+              variant="secondary"
+              width="100%"
+              onClick={() => navigate("/settings/security")}
+            />
+          </div>
+        </Card>
       </div>
-    </>
+    </div>
   );
 }
+
+interface MetricCardProps {
+  icon: ReactNode;
+  tone: "cyan" | "violet" | "green" | "amber";
+  label: string;
+  value: string | number;
+  detail: string;
+}
+
+function MetricCard({ icon, tone, label, value, detail }: MetricCardProps) {
+  return (
+    <Card padding={0} className="stat-card">
+      <span className={`stat-icon ${tone}`}>{icon}</span>
+      <div className="stat-copy">
+        <span>{label}</span>
+        <strong>{value}</strong>
+        <small>{detail}</small>
+      </div>
+    </Card>
+  );
+}
+
+function projectStatusVariant(status: string): "success" | "neutral" | "warning" {
+  if (status === "ACTIVE") return "success";
+  if (status === "ARCHIVED") return "neutral";
+  return "warning";
+}
+
+function formatLabel(value: string) {
+  return value.toLowerCase().replaceAll("_", " ");
+}

package/templates/fullstack/apps/web/src/pages/StatusPages.tsx

@@ -1,5 +1,5 @@
 import { ArrowLeft, LockKeyhole, SearchX } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 function StatusPage({ icon, title, message }: { icon: React.ReactNode; title: string; message: string }) {
   return <main className="status-page"><div className="status-icon">{icon}</div><h1>{title}</h1><p>{message}</p><Link className="button button-primary" to="/"><ArrowLeft size={17} /> Return to dashboard</Link></main>;

package/templates/fullstack/apps/web/src/pages/auth/LoginPage.tsx

@@ -1,12 +1,27 @@
-import { useState, type FormEvent } from "react";
-import { Github, KeyRound } from "lucide-react";
-import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import { Button, Input } from "@authenik8/ui";
+import {
+  useState,
+  type ComponentProps,
+  type ComponentType,
+  type FormEvent,
+  type InputHTMLAttributes,
+} from "react";
+import { Github, KeyRound, LockKeyhole, Mail } from "lucide-react";
+import { Banner } from "@astryxdesign/core/Banner";
+import { Button } from "@astryxdesign/core/Button";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
 import { AuthShell } from "../../components/AuthShell";
-import { ErrorNotice, Field } from "../../components/Page";
+import { getErrorMessage } from "../../components/Page";
 import { useAuth } from "../../auth/AuthProvider";
 import { enabledOAuthProviders } from "../../auth/providers";
 
+type CredentialInputProps = ComponentProps<typeof TextInput> &
+  Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete">;
+
+// Astryx 0.1.7 forwards native input attributes at runtime but does not yet
+// declare autoComplete. Keep that browser and password-manager contract here.
+const CredentialInput = TextInput as ComponentType<CredentialInputProps>;
+
 export function LoginPage() {
   const { login } = useAuth();
   const navigate = useNavigate();
@@ -33,19 +48,80 @@ export function LoginPage() {
   }
 
   return (
-    <AuthShell title="Welcome back" subtitle="Sign in to your workspace" footer={<>New to Authenik8? <Link to="/register">Create an account</Link></>}>
-      {params.has("oauthError") && <ErrorNotice error={new Error("OAuth sign-in could not be completed")} />}
-      {error !== undefined && <ErrorNotice error={error} />}
-      <form className="form-stack" onSubmit={submit}>
-        <Field label="Email address" htmlFor="email"><Input id="email" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} required /></Field>
-        <Field label="Password" htmlFor="password"><Input id="password" type="password" autoComplete="current-password" value={password} onChange={(event) => setPassword(event.target.value)} required /></Field>
-        <div className="form-row end"><Link to="/forgot-password">Forgot password?</Link></div>
-        <Button type="submit" disabled={pending}><KeyRound size={17} /> {pending ? "Signing in..." : "Sign in"}</Button>
+    <AuthShell
+      title="Welcome back"
+      subtitle="Sign in to your workspace"
+      footer={<>New to Authenik8? <Link to="/register">Create an account</Link></>}
+    >
+      {params.has("oauthError") && (
+        <Banner
+          className="login-alert"
+          status="error"
+          title="OAuth sign-in failed"
+          description="The provider could not complete sign-in. Please try again."
+        />
+      )}
+      {error !== undefined && (
+        <Banner
+          className="login-alert"
+          status="error"
+          title="Unable to sign in"
+          description={getErrorMessage(error)}
+        />
+      )}
+      <form className="form-stack login-form" onSubmit={submit}>
+        <CredentialInput
+          label="Email address"
+          type="email"
+          htmlName="email"
+          autoComplete="email"
+          value={email}
+          onChange={setEmail}
+          startIcon={<Mail size={17} />}
+          size="lg"
+          width="100%"
+          isRequired
+        />
+        <CredentialInput
+          label="Password"
+          type="password"
+          htmlName="password"
+          autoComplete="current-password"
+          value={password}
+          onChange={setPassword}
+          startIcon={<LockKeyhole size={17} />}
+          size="lg"
+          width="100%"
+          isRequired
+        />
+        <div className="login-recovery"><Link to="/forgot-password">Forgot password?</Link></div>
+        <Button
+          type="submit"
+          label="Sign in"
+          variant="primary"
+          icon={<KeyRound size={17} />}
+          width="100%"
+          isLoading={pending}
+          isDisabled={pending}
+        />
       </form>
-      {enabledOAuthProviders.length > 0 && <><div className="divider"><span>or continue with</span></div>
-        <div className="oauth-grid">
-          {enabledOAuthProviders.map((provider) => <Button key={provider} variant="secondary" onClick={() => window.location.assign(`/api/auth/oauth/${provider}`)}>{provider === "google" ? <span className="provider-g">G</span> : <Github size={18} />} {provider === "google" ? "Google" : "GitHub"}</Button>)}
-        </div></>}
+      {enabledOAuthProviders.length > 0 && (
+        <>
+          <div className="divider"><span>or continue with</span></div>
+          <div className="oauth-grid">
+            {enabledOAuthProviders.map((provider) => (
+              <Button
+                key={provider}
+                label={provider === "google" ? "Google" : "GitHub"}
+                variant="secondary"
+                width="100%"
+                icon={provider === "google" ? <span className="provider-g">G</span> : <Github size={18} />}
+                onClick={() => window.location.assign(`/api/auth/oauth/${provider}`)}
+              />
+            ))}
+          </div>
+        </>
+      )}
     </AuthShell>
   );
 }

package/templates/fullstack/apps/web/src/pages/auth/OAuthCallbackPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import { Spinner } from "@authenik8/ui";
 import { useAuth } from "../../auth/AuthProvider";
 import { AuthShell } from "../../components/AuthShell";

package/templates/fullstack/apps/web/src/pages/auth/RecoveryPages.tsx

@@ -1,6 +1,6 @@
 import { useState, type FormEvent } from "react";
 import { ArrowLeft, Mail, RotateCcw } from "lucide-react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
 import { Button, Input } from "@authenik8/ui";
 import { authApi } from "@authenik8/api-client";
 import { AuthShell } from "../../components/AuthShell";

package/templates/fullstack/apps/web/src/pages/auth/RegisterPage.tsx

@@ -1,6 +1,6 @@
 import { useState, type FormEvent } from "react";
 import { UserPlus } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { registerSchema, type RegisterInput } from "@authenik8/contracts";
 import { ApiError, authApi } from "@authenik8/api-client";
 import { Button, Input } from "@authenik8/ui";

package/templates/fullstack/apps/web/src/pages/auth/VerifyEmailPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
 import { Spinner } from "@authenik8/ui";
 import { authApi } from "@authenik8/api-client";
 import { AuthShell } from "../../components/AuthShell";

package/templates/fullstack/apps/web/src/styles.css

@@ -20,6 +20,37 @@
   --amber-light: #fff1ce;
   --red: #bd384c;
   --red-light: #fde8ec;
+  --color-background-surface: #ffffff;
+  --color-background-body: #f3f5f2;
+  --color-background-card: #ffffff;
+  --color-background-popover: #ffffff;
+  --color-background-muted: #eef2ee;
+  --color-accent: #218653;
+  --color-accent-muted: #e4f4e9;
+  --color-neutral: #edf1ee;
+  --color-overlay: rgba(11, 35, 23, .58);
+  --color-overlay-hover: rgba(18, 53, 36, .06);
+  --color-overlay-pressed: rgba(18, 53, 36, .11);
+  --color-text-primary: #27302b;
+  --color-text-secondary: #69736c;
+  --color-text-disabled: #98a099;
+  --color-text-accent: #176a46;
+  --color-on-accent: #ffffff;
+  --color-icon-primary: #27302b;
+  --color-icon-secondary: #69736c;
+  --color-icon-accent: #218653;
+  --color-success: #246a43;
+  --color-success-muted: #e2f3e7;
+  --color-warning: #9a6512;
+  --color-warning-muted: #fff1ce;
+  --color-error: #bd384c;
+  --color-error-muted: #fde8ec;
+  --color-border: #dce3dd;
+  --color-border-emphasized: #bdc9bf;
+  --radius-element: 6px;
+  --radius-container: 10px;
+  --radius-page: 14px;
+  --shadow-low: 0 1px 2px rgba(18, 53, 36, .05), 0 6px 18px rgba(18, 53, 36, .04);
 }
 
 * { box-sizing: border-box; letter-spacing: 0; }
@@ -98,56 +129,90 @@ code { overflow-wrap: anywhere; color: #246a43; font-family: "SFMono-Regular", C
 .screen-loader { min-height: 50vh; display: grid; place-items: center; }
 .panel-loading, .center-status { min-height: 180px; display: grid; place-items: center; }
 
-.app-layout { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
-.sidebar, .mobile-sidebar { background: var(--navy); color: #e2eee6; }
-.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 14px 16px; display: flex; flex-direction: column; }
-.brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; }
-.brand:hover { color: #fff; }
-.brand img { width: 44px; height: 44px; margin: -5px; flex: 0 0 auto; }
-.brand span { min-width: 0; display: grid; font-size: 15px; }
-.brand small { color: #93b5a1; font-size: 10px; font-weight: 600; }
-.side-nav { margin-top: 32px; display: grid; gap: 4px; }
-.nav-label { margin: 18px 10px 5px; color: #769583; font-size: 10px; font-weight: 800; text-transform: uppercase; }
-.side-nav a { min-height: 42px; padding: 10px 11px; border-radius: 5px; display: flex; align-items: center; gap: 11px; color: #b3c9bb; font-size: 13px; font-weight: 650; }
-.side-nav a:hover { color: #fff; background: #19472f; }
-.side-nav a.active { color: #fff; background: #20563a; box-shadow: inset 3px 0 0 #7ce8aa; }
-.sidebar-account { min-width: 0; margin-top: auto; padding: 13px 7px 0; border-top: 1px solid #28533a; display: flex; align-items: center; gap: 10px; }
-.avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; color: #17492f; background: #a7dfbf; font-size: 11px; font-weight: 900; }
+.workspace-shell { background: var(--navy); }
+.workspace-topbar { min-height: 68px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); }
+.brand-logo { width: 43px; height: 43px; margin: -6px; display: block; }
+.current-section { min-width: 0; display: flex; align-items: center; gap: 8px; color: #626d65; font-size: 13px; font-weight: 700; }
+.current-section svg { color: var(--green); }
+.workspace-sidebar {
+  --color-background-surface: var(--navy);
+  --color-background-muted: var(--navy-soft);
+  --color-text-primary: #dcebe1;
+  --color-text-secondary: #8fad9a;
+  --color-text-disabled: #64806e;
+  --color-icon-primary: #dcebe1;
+  --color-icon-secondary: #9eb9a8;
+  --color-icon-accent: #7ce8aa;
+  --color-neutral: #20563a;
+  --color-overlay-hover: #19472f;
+  --color-overlay-pressed: #20563a;
+  --color-border: #28533a;
+  background: var(--navy);
+  border-right: 1px solid #28533a;
+}
+.workspace-sidebar button:focus-visible { outline: 2px solid #7ce8aa; outline-offset: -2px; }
+.sidebar-account { min-width: 0; display: flex; align-items: center; gap: 10px; }
 .sidebar-account > div:last-child { min-width: 0; display: grid; gap: 2px; }
 .sidebar-account strong, .sidebar-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sidebar-account strong { color: #f2faf5; font-size: 12px; }
 .sidebar-account span { color: #8fad9a; font-size: 10px; }
-.mobile-sidebar, .mobile-scrim { display: none; }
-
-.app-main { min-width: 0; }
-.topbar { height: 64px; padding: 0 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.95); position: sticky; top: 0; z-index: 20; }
-.breadcrumb { min-width: 0; display: flex; align-items: center; gap: 8px; color: #626d65; font-size: 13px; font-weight: 700; }
-.breadcrumb svg { color: var(--green); }
-.topbar > .icon-button:last-child { margin-left: auto; }
-.menu-button { display: none; }
 .page { width: 100%; max-width: 1480px; margin: 0 auto; padding: 32px; }
 .page-header { min-height: 62px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
 .page-header p { margin-bottom: 0; font-size: 14px; }
 .page-actions, .action-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
 
-.stat-grid { margin-bottom: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
-.stat-card { min-height: 92px; padding: 17px; display: flex; align-items: center; gap: 14px; }
-.stat-card > div { min-width: 0; display: grid; gap: 5px; }
-.stat-card span { color: #717c74; font-size: 12px; font-weight: 650; }
-.stat-card strong { overflow-wrap: anywhere; color: #27302b; font-size: 21px; line-height: 1.1; }
-.stat-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; }
+.dashboard-page { display: grid; gap: 22px; }
+.dashboard-hero {
+  min-height: 210px;
+  padding: 34px 38px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #285f41;
+  border-radius: 12px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 28px;
+  color: #ffffff;
+  background:
+    radial-gradient(circle at 86% 8%, rgba(124, 232, 170, .2), transparent 34%),
+    linear-gradient(135deg, #123524 0%, #16452d 68%, #1a5134 100%);
+  box-shadow: 0 18px 45px rgba(18, 53, 36, .14);
+  --color-accent: #a7dfbf;
+  --color-on-accent: #123524;
+  --color-text-primary: #123524;
+  --color-border: rgba(255, 255, 255, .42);
+}
+.dashboard-hero::after { content: ""; width: 190px; height: 190px; position: absolute; top: -112px; right: 14%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 78px rgba(255,255,255,.02); pointer-events: none; }
+.hero-copy, .hero-actions { position: relative; z-index: 1; }
+.hero-copy { max-width: 700px; }
+.hero-copy h1 { margin-bottom: 10px; color: #ffffff; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.025em; }
+.hero-copy p { max-width: 610px; margin-bottom: 0; color: #b9cebf; font-size: 15px; }
+.eyebrow { margin-bottom: 17px; display: flex; align-items: center; gap: 8px; color: #9fc5ac; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
+.hero-actions button:first-child { color: #eef8f1; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
+.hero-actions button:first-child:hover { background: rgba(255,255,255,.14); }
+
+.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
+.stat-card { min-height: 116px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-low); }
+.stat-copy { min-width: 0; display: grid; gap: 4px; }
+.stat-copy > span { color: #717c74; font-size: 12px; font-weight: 650; }
+.stat-copy strong { overflow-wrap: anywhere; color: #27302b; font-size: 23px; line-height: 1.1; letter-spacing: -.02em; }
+.stat-copy small { margin-top: 2px; overflow: hidden; color: #8a938c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.stat-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; }
 .stat-icon.cyan { color: #1d7549; background: var(--cyan-light); }
 .stat-icon.violet { color: #46647b; background: var(--violet-light); }
 .stat-icon.green { color: #246a43; background: var(--green-light); }
 .stat-icon.amber { color: #8a5a0f; background: var(--amber-light); }
 .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr); gap: 18px; align-items: start; }
+.dashboard-panel { min-width: 0; overflow: hidden; box-shadow: var(--shadow-low); }
 .panel { min-width: 0; overflow: hidden; }
 .panel-heading { min-height: 72px; padding: 18px 20px; border-bottom: 1px solid #e8eaf0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
 .panel-heading h2, .panel-heading p { margin-bottom: 0; }
 .panel-heading p { margin-top: 2px; font-size: 12px; }
 .text-link, .back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; }
 .back-link { margin-bottom: 13px; }
-.security-panel { padding-bottom: 18px; }
+.panel-error { padding: 18px 20px; }
 .check-list { margin: 0; padding: 8px 20px 18px; list-style: none; }
 .check-list li { padding: 14px 0; border-bottom: 1px solid #eceef3; display: flex; align-items: center; gap: 11px; }
 .check-list svg { color: var(--green); }
@@ -155,7 +220,7 @@ code { overflow-wrap: anywhere; color: #246a43; font-family: "SFMono-Regular", C
 .check-list span { display: grid; gap: 3px; }
 .check-list strong { font-size: 13px; }
 .check-list small { color: var(--muted); font-size: 11px; }
-.security-panel > .button { margin: 0 20px; width: calc(100% - 40px); }
+.security-action { padding: 0 20px 20px; }
 
 .table-wrap { max-width: 100%; overflow-x: auto; }
 table { width: 100%; border-collapse: collapse; font-size: 13px; }
@@ -210,6 +275,11 @@ tbody tr:hover { background: #fbfcfd; }
 
 .auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .8fr) minmax(500px, 1.2fr); background: #fff; }
 .auth-brand-panel { min-height: 100vh; padding: 34px 42px; position: relative; overflow: hidden; display: flex; flex-direction: column; color: #fff; background: var(--navy); border-right: 1px solid #286342; }
+.auth-top-brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: #ffffff; font-size: 15px; font-weight: 800; }
+.auth-top-brand:hover { color: #ffffff; }
+.auth-top-brand img { width: 44px; height: 44px; margin: -5px; flex: 0 0 auto; }
+.auth-top-brand span { min-width: 0; display: grid; }
+.auth-top-brand small { color: #93b5a1; font-size: 10px; font-weight: 600; }
 .auth-brand-copy { max-width: 470px; margin: auto 0; position: relative; z-index: 1; }
 .auth-logo { width: 220px; height: 220px; margin: 0 0 2px -34px; display: block; }
 .security-mark { margin-bottom: 18px; display: block; color: #7ce8aa; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 800; }
@@ -217,14 +287,18 @@ tbody tr:hover { background: #fbfcfd; }
 .auth-brand-copy p { max-width: 390px; margin: 17px 0 0; color: #b4cbbb; font-size: 15px; }
 .auth-signal { display: flex; align-items: center; gap: 8px; color: #93b29f; font-size: 11px; }
 .signal-dot { width: 8px; height: 8px; border-radius: 50%; background: #7ce8aa; box-shadow: 0 0 0 4px rgba(124,232,170,.12); }
-.auth-form-panel { min-width: 0; padding: 50px 7vw; display: grid; place-items: center; }
-.auth-form-wrap { width: min(100%, 440px); }
+.auth-form-panel { min-width: 0; padding: 50px 7vw; display: grid; place-items: center; background: radial-gradient(circle at 100% 0%, rgba(33, 134, 83, .08), transparent 32%), #f8faf8; }
+.auth-form-card { width: min(100%, 480px); box-shadow: 0 20px 55px rgba(18, 53, 36, .1); }
+.auth-form-wrap { width: 100%; padding: 34px; }
 .auth-form-wrap > header { margin-bottom: 27px; }
 .auth-form-wrap > header h2 { margin-bottom: 6px; font-size: 26px; }
 .auth-form-wrap > header p { margin: 0; font-size: 14px; }
 .auth-form-wrap > footer { margin-top: 24px; color: #71788a; font-size: 13px; text-align: center; }
 .auth-form-wrap > footer a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
 .auth-form-wrap .notice { margin-bottom: 17px; }
+.login-alert { margin-bottom: 17px; }
+.login-form { gap: 18px; }
+.login-recovery { margin-top: -7px; display: flex; justify-content: flex-end; font-size: 13px; font-weight: 700; }
 .divider { margin: 22px 0; display: flex; align-items: center; gap: 12px; color: #9197a5; font-size: 11px; }
 .divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #e2e5eb; }
 .oauth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@@ -240,21 +314,19 @@ tbody tr:hover { background: #fbfcfd; }
   .auth-brand-copy h1 { font-size: 32px; }
 }
 
-@media (max-width: 760px) {
-  .app-layout { display: block; }
-  .sidebar { display: none; }
-  .mobile-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(11,35,23,.58); }
-  .mobile-sidebar { width: min(84vw, 280px); padding: 20px 14px; position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; transform: translateX(-105%); transition: transform 180ms ease; }
-  .mobile-sidebar.is-open { transform: translateX(0); }
-  .topbar { height: 58px; padding: 0 16px; }
-  .menu-button { display: inline-flex; }
+@media (max-width: 768px) {
+  .workspace-topbar { min-height: 58px; }
+  .current-section { display: none; }
   .page { padding: 22px 16px 36px; }
   .page-header { min-height: 0; margin-bottom: 18px; display: grid; }
   .page-header h1 { font-size: 24px; }
   .page-actions { justify-content: flex-start; }
+  .dashboard-page { gap: 16px; }
+  .dashboard-hero { min-height: 230px; padding: 26px 24px; display: grid; align-content: end; }
+  .hero-actions { justify-content: flex-start; }
   .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
-  .stat-card { min-height: 86px; padding: 13px; }
-  .stat-card strong { font-size: 17px; }
+  .stat-card { min-height: 104px; padding: 14px; }
+  .stat-copy strong { font-size: 19px; }
   .settings-layout { grid-template-columns: 1fr; gap: 16px; }
   .settings-nav { grid-template-columns: 1fr 1fr; }
   .settings-nav a { border-left: 0; border-bottom: 3px solid transparent; text-align: center; }
@@ -270,11 +342,15 @@ tbody tr:hover { background: #fbfcfd; }
   .auth-signal { display: none; }
   .security-mark { margin-bottom: 10px; }
   .auth-form-panel { min-height: calc(100vh - 220px); padding: 34px 20px; align-items: start; }
+  .auth-form-wrap { padding: 28px 24px; }
   th, td { padding: 12px 14px; }
 }
 
 @media (max-width: 480px) {
   .stat-grid { grid-template-columns: 1fr; }
+  .dashboard-hero { padding: 24px 20px; }
+  .hero-copy h1 { font-size: 27px; }
+  .hero-actions { display: grid; }
   .oauth-grid { grid-template-columns: 1fr; }
   .form-panel, .settings-panel { padding: 18px; }
   .form-actions, .action-row { justify-content: stretch; }