fix(web): consistent grid background + theme tokens across standalone pages

An audit of the standalone "misc" pages (auth / onboarding / utility / legal)
found verify-2fa's missing grid background was systemic, plus scattered
hardcoded colors. Bring them all in line with the canonical pattern:

- Restore the grid background (dot-grid + blueprint-grid overlays on a relative
  wrapper, card lifted via relative z-10, solid bg-card) on the six auth-card
  pages that were missing it: login, register, forgot-password, reset-password,
  add, unsubscribe — including their Suspense/loading states.
- Hardcoded text-white -> text-foreground (cli/authorize, unsubscribe);
  unsubscribe card bg-secondary -> bg-card.
- Legal pages (privacy, terms): text-white headings -> text-foreground,
  prose-invert -> dark:prose-invert (theme-ready), privacy gets bg-background.
- Polish: fix dead hover states, "Loading..." -> "loading...", and lowercase
  the 2fa/setup flow copy (titles/headings/buttons/labels) per the UI
  convention. Toast copy left as-is to stay consistent with the rest of the app.

Verified: lint, tsc, and the unit suite are green; the 2fa/auth e2e specs use
case-insensitive matchers, so the copy lowercasing doesn't break the gate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: dylanroscover

web/app/add/page.tsx

@@ -148,8 +148,10 @@ export default function AddMachinePage() {
 
   if (authLoading || loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-background">
-        <Loader2 className="h-8 w-8 animate-spin text-accent-cyan" />
+      <div className="relative flex items-center justify-center min-h-screen">
+        <div className="absolute inset-0 dot-grid opacity-30" />
+        <div className="absolute inset-0 blueprint-grid opacity-15" />
+        <Loader2 className="relative z-10 h-8 w-8 animate-spin text-accent-cyan" />
       </div>
     );
   }
@@ -159,8 +161,11 @@ export default function AddMachinePage() {
   // Success state
   if (isAuthorized) {
     return (
-      <div className="flex min-h-screen items-center justify-center p-4 bg-background">
-        <Card className="w-full max-w-md bg-card/50 border-border text-center">
+      <div className="relative flex min-h-screen items-center justify-center p-4">
+        {/* Grid background */}
+        <div className="absolute inset-0 dot-grid opacity-30" />
+        <div className="absolute inset-0 blueprint-grid opacity-15" />
+        <Card className="relative z-10 w-full max-w-md border-border bg-card text-center">
           <CardContent className="pt-10 pb-10 space-y-6">
             <div className="mx-auto w-20 h-20 rounded-full bg-emerald-500/20 flex items-center justify-center">
               <CheckCircle2 className="h-10 w-10 text-emerald-500" />
@@ -186,8 +191,11 @@ export default function AddMachinePage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4 bg-background">
-      <Card className="w-full max-w-lg bg-card/50 border-border">
+    <div className="relative flex min-h-screen items-center justify-center p-4">
+      {/* Grid background */}
+      <div className="absolute inset-0 dot-grid opacity-30" />
+      <div className="absolute inset-0 blueprint-grid opacity-15" />
+      <Card className="relative z-10 w-full max-w-lg border-border bg-card">
         <CardHeader className="space-y-4 flex flex-col items-center">
           <OwletteEyeIcon size={48} />
           <div className="space-y-1 text-center">
@@ -233,7 +241,7 @@ export default function AddMachinePage() {
               </Select>
             ) : (
               <p className="text-sm text-muted-foreground">
-                No sites available. Create a site on the dashboard first.
+                no sites available. create a site on the dashboard first.
               </p>
             )}
           </div>

web/app/cli/authorize/page.tsx

@@ -95,7 +95,7 @@ function CliAuthorizeInner() {
       <PageHeader currentPage="api keys" />
       <main className="max-w-xl mx-auto px-6 py-8">
         <div className="mb-6">
-          <h1 className="text-2xl font-semibold text-white flex items-center gap-2">
+          <h1 className="text-2xl font-semibold text-foreground flex items-center gap-2">
             <KeyRound className="h-5 w-5" /> authorise cli
           </h1>
           <p className="text-sm text-muted-foreground mt-1">
@@ -106,7 +106,7 @@ function CliAuthorizeInner() {
         {done ? (
           <Card className="border-green-500/50 bg-green-500/5 p-6 text-center space-y-3">
             <CheckCircle2 className="h-8 w-8 text-green-400 mx-auto" />
-            <p className="text-sm text-white">cli authorised</p>
+            <p className="text-sm text-foreground">cli authorised</p>
             <p className="text-xs text-muted-foreground">
               return to your terminal — the cli is polling and will pick up the key
               within a few seconds.
@@ -124,7 +124,7 @@ function CliAuthorizeInner() {
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="cliKeyName" className="text-white">
+              <Label htmlFor="cliKeyName" className="text-foreground">
                 key name
               </Label>
               <Input
@@ -133,20 +133,20 @@ function CliAuthorizeInner() {
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. laptop-dev, ci-runner"
-                className="bg-background border-border text-white"
+                className="bg-background border-border text-foreground"
                 disabled={submitting}
               />
             </div>
 
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-2">
-                <Label className="text-white">environment</Label>
+                <Label className="text-foreground">environment</Label>
                 <Select
                   value={environment}
                   onValueChange={(v) => setEnvironment(v as ApiKeyEnvironment)}
                   disabled={submitting}
                 >
-                  <SelectTrigger className="bg-background border-border text-white">
+                  <SelectTrigger className="bg-background border-border text-foreground">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -156,7 +156,7 @@ function CliAuthorizeInner() {
                 </Select>
               </div>
               <div className="space-y-2">
-                <Label htmlFor="cliTtlDays" className="text-white">
+                <Label htmlFor="cliTtlDays" className="text-foreground">
                   ttl (days)
                 </Label>
                 <Input
@@ -166,20 +166,20 @@ function CliAuthorizeInner() {
                   max={MAX_TTL_DAYS}
                   value={ttlDays}
                   onChange={(e) => setTtlDays(Number(e.target.value) || DEFAULT_TTL_DAYS)}
-                  className="bg-background border-border text-white"
+                  className="bg-background border-border text-foreground"
                   disabled={submitting}
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label className="text-white">scope preset</Label>
+              <Label className="text-foreground">scope preset</Label>
               <Select
                 value={preset}
                 onValueChange={(v) => setPreset(v as ApiKeyScopePreset)}
                 disabled={submitting}
               >
-                <SelectTrigger className="bg-background border-border text-white">
+                <SelectTrigger className="bg-background border-border text-foreground">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>

web/app/forgot-password/page.tsx

@@ -32,8 +32,11 @@ export default function ForgotPasswordPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <Card className="w-full max-w-md bg-card/50 border-border">
+    <div className="relative flex min-h-screen items-center justify-center p-4">
+      {/* Grid background */}
+      <div className="absolute inset-0 dot-grid opacity-30" />
+      <div className="absolute inset-0 blueprint-grid opacity-15" />
+      <Card className="relative z-10 w-full max-w-md border-border bg-card">
         <CardHeader className="space-y-4 flex flex-col items-center">
           <OwletteEyeIcon size={80} />
           <div className="space-y-1 text-center">

web/app/login/page.tsx

@@ -197,8 +197,11 @@ function LoginForm() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <Card className="w-full max-w-md bg-card/50 border-border">
+    <div className="relative flex min-h-screen items-center justify-center p-4">
+      {/* Grid background */}
+      <div className="absolute inset-0 dot-grid opacity-30" />
+      <div className="absolute inset-0 blueprint-grid opacity-15" />
+      <Card className="relative z-10 w-full max-w-md border-border bg-card">
         <CardHeader className="space-y-4 flex flex-col items-center">
           <OwletteEyeIcon size={80} />
           <div className="space-y-1 text-center">
@@ -251,7 +254,7 @@ function LoginForm() {
               <span className="w-full border-t border-border" />
             </div>
             <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-card/50 px-2 text-muted-foreground">
+              <span className="bg-card px-2 text-muted-foreground">
                 or continue with
               </span>
             </div>
@@ -313,8 +316,11 @@ function LoginForm() {
 export default function LoginPage() {
   return (
     <Suspense fallback={
-      <div className="flex min-h-screen items-center justify-center p-4">
-        <Card className="w-full max-w-md bg-card/50 border-border">
+      <div className="relative flex min-h-screen items-center justify-center p-4">
+        {/* Grid background */}
+        <div className="absolute inset-0 dot-grid opacity-30" />
+        <div className="absolute inset-0 blueprint-grid opacity-15" />
+        <Card className="relative z-10 w-full max-w-md border-border bg-card">
           <CardHeader className="space-y-4 flex flex-col items-center">
             <OwletteEyeIcon size={80} />
             <div className="space-y-1 text-center">

web/app/privacy/page.tsx

@@ -8,24 +8,24 @@ export default function PrivacyPage() {
   const router = useRouter();
 
   return (
-    <div className="min-h-screen py-12 px-4">
+    <div className="min-h-screen bg-background py-12 px-4">
       <div className="max-w-3xl mx-auto">
         <div className="mb-8">
           <button
             onClick={() => router.back()}
-            className="text-accent-cyan hover:text-accent-cyan text-sm cursor-pointer"
+            className="text-accent-cyan hover:text-accent-cyan-hover text-sm cursor-pointer"
           >
             &larr; back
           </button>
         </div>
 
-        <article className="prose prose-invert prose-slate max-w-none">
-          <h1 className="text-3xl font-bold text-white mb-2">privacy policy</h1>
+        <article className="prose dark:prose-invert prose-slate max-w-none">
+          <h1 className="text-3xl font-bold text-foreground mb-2">privacy policy</h1>
           <p className="text-muted-foreground text-sm mb-8">last updated: {lastUpdated}</p>
 
           <div className="space-y-8 text-muted-foreground">
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">1. introduction</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">1. introduction</h2>
               <p>
                 The Experiential Company, LLC (&quot;TEC,&quot; &quot;we,&quot; &quot;our,&quot; or &quot;us&quot;) operates owlette, a cloud-connected
                 process management and remote deployment system. this privacy policy explains how we
@@ -38,9 +38,9 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">2. information we collect</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">2. information we collect</h2>
 
-              <h3 className="text-lg font-medium text-white mt-6 mb-3">account information</h3>
+              <h3 className="text-lg font-medium text-foreground mt-6 mb-3">account information</h3>
               <p>when you create an account, we collect:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li>email address</li>
@@ -49,7 +49,7 @@ export default function PrivacyPage() {
                 <li>two-factor authentication secrets (encrypted)</li>
               </ul>
 
-              <h3 className="text-lg font-medium text-white mt-6 mb-3">machine data</h3>
+              <h3 className="text-lg font-medium text-foreground mt-6 mb-3">machine data</h3>
               <p>when you install the owlette agent on a machine, we collect:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li>machine hostname and unique identifiers</li>
@@ -59,7 +59,7 @@ export default function PrivacyPage() {
                 <li>agent heartbeat and online/offline status</li>
               </ul>
 
-              <h3 className="text-lg font-medium text-white mt-6 mb-3">usage data</h3>
+              <h3 className="text-lg font-medium text-foreground mt-6 mb-3">usage data</h3>
               <p>we automatically collect:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li>actions performed (process starts, stops, deployments)</li>
@@ -69,7 +69,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">3. how we use your information</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">3. how we use your information</h2>
               <p>we use the collected information to:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li>provide and maintain the owlette service</li>
@@ -83,7 +83,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">4. data storage and security</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">4. data storage and security</h2>
               <p>
                 your data is stored using Google Firebase and Google Cloud Platform infrastructure.
                 we implement industry-standard security measures including:
@@ -102,7 +102,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">5. data retention</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">5. data retention</h2>
               <p>we retain your data as follows:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li><strong>account data:</strong> until you delete your account</li>
@@ -116,7 +116,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">6. third-party services</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">6. third-party services</h2>
               <p>we use the following third-party services to operate owlette:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li><strong>Google Firebase:</strong> authentication, database, and hosting</li>
@@ -128,13 +128,13 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">7. your rights</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">7. your rights</h2>
               <p>
                 depending on your location, you may have certain rights regarding your personal
                 information:
               </p>
 
-              <h3 className="text-lg font-medium text-white mt-6 mb-3">California residents (CCPA)</h3>
+              <h3 className="text-lg font-medium text-foreground mt-6 mb-3">California residents (CCPA)</h3>
               <p>you have the right to:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li>know what personal information is collected</li>
@@ -143,7 +143,7 @@ export default function PrivacyPage() {
                 <li>non-discrimination for exercising your privacy rights</li>
               </ul>
 
-              <h3 className="text-lg font-medium text-white mt-6 mb-3">all users</h3>
+              <h3 className="text-lg font-medium text-foreground mt-6 mb-3">all users</h3>
               <p>you can:</p>
               <ul className="list-disc pl-6 mt-2 space-y-1">
                 <li>access your account data through the dashboard</li>
@@ -154,7 +154,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">8. cookies and tracking</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">8. cookies and tracking</h2>
               <p>
                 owlette uses cookies and similar technologies for authentication and session
                 management. these are essential for the service to function and cannot be
@@ -167,7 +167,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">9. children&apos;s privacy</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">9. children&apos;s privacy</h2>
               <p>
                 owlette is not intended for use by anyone under the age of 13. we do not knowingly
                 collect personal information from children under 13. if you are a parent or guardian
@@ -176,7 +176,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">10. changes to this policy</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">10. changes to this policy</h2>
               <p>
                 we may update this privacy policy from time to time. we will notify you of any
                 changes by posting the new privacy policy on this page and updating the
@@ -188,7 +188,7 @@ export default function PrivacyPage() {
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-white mb-4">11. contact us</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-4">11. contact us</h2>
               <p>
                 if you have any questions about this privacy policy or our data practices,
                 please contact us at:

web/app/register/page.tsx

@@ -90,8 +90,11 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <Card className="w-full max-w-md bg-card/50 border-border">
+    <div className="relative flex min-h-screen items-center justify-center p-4">
+      {/* Grid background */}
+      <div className="absolute inset-0 dot-grid opacity-30" />
+      <div className="absolute inset-0 blueprint-grid opacity-15" />
+      <Card className="relative z-10 w-full max-w-md border-border bg-card">
         <CardHeader className="space-y-4 flex flex-col items-center">
           <OwletteEyeIcon size={80} />
           <div className="space-y-1 text-center">
@@ -200,7 +203,7 @@ export default function RegisterPage() {
               <span className="w-full border-t border-border" />
             </div>
             <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-card/50 px-2 text-muted-foreground">
+              <span className="bg-card px-2 text-muted-foreground">
                 or continue with
               </span>
             </div>