fix(ui): premium settings page with env docs

Surface server env vars and auth links in glass cards so Settings
matches the rest of the app shell.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/settings/page.tsx

@@ -1,11 +1,70 @@
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+const envVars = [
+  {
+    name: "DATABASE_URL",
+    desc: "PostgreSQL connection string for scans, users, and monitors.",
+  },
+  {
+    name: "REDIS_URL",
+    desc: "Redis for scan queue workers (optional on small VPS).",
+  },
+  {
+    name: "NEXTAUTH_SECRET",
+    desc: "Session encryption secret — rotate after deploy if leaked.",
+  },
+  {
+    name: "NEXTAUTH_URL",
+    desc: "Public app URL (e.g. http://your-server-ip).",
+  },
+  {
+    name: "IPINFO_TOKEN",
+    desc: "Optional token for richer geo/IP enrichment.",
+  },
+  {
+    name: "SCAN_RATE_LIMIT_PER_HOUR",
+    desc: "Per-IP scan throttle (default from .env.example).",
+  },
+];
+
 export default function SettingsPage() {
   return (
-    <div className="mx-auto max-w-2xl px-4 pb-24 pt-24">
-      <h1 className="text-4xl font-bold">Settings</h1>
-      <p className="mt-4 text-zinc-400">
-        Configure IPINFO_TOKEN, SCAN_RATE_LIMIT_PER_HOUR, and database URLs via environment
-        variables on your server. Theme toggle is in the header.
+    <div className="mx-auto max-w-3xl px-4 pb-24 pt-24">
+      <h1 className="text-4xl font-bold tracking-tight md:text-5xl">Settings</h1>
+      <p className="mt-2 text-zinc-400">
+        Server configuration lives in environment variables. Theme toggle is in the header.
       </p>
+
+      <div className="mt-10 space-y-4">
+        {envVars.map((v) => (
+          <Card key={v.name} className="glass">
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 font-mono text-base">
+                {v.name}
+                <Badge variant="default">.env</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-zinc-400">{v.desc}</CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card className="glass mt-8">
+        <CardHeader>
+          <CardTitle>Account & monitoring</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-3">
+          <Button asChild>
+            <Link href="/login">Sign in / Register</Link>
+          </Button>
+          <Button variant="secondary" asChild>
+            <Link href="/monitoring">Monitors</Link>
+          </Button>
+        </CardContent>
+      </Card>
     </div>
   );
 }