move towards this

ui/src/layout/AppLayout.tsx

@@ -36,11 +36,15 @@ export function AppLayout() {
   }, [theme]);
 
   return (
-    <div className="app">
+    <div className="mx-auto max-w-7xl p-4">
-      <header className="topbar">
+      <header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1>Wakey Operator UI</h1>
+          <h1 className="text-2xl font-semibold tracking-tight">
-          <p>Find devices fast and wake them reliably</p>
+            Wakey Operator UI
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Find devices fast and wake them reliably
+          </p>
         </div>
         <Button
           type="button"
@@ -54,13 +58,20 @@ export function AppLayout() {
         </Button>
       </header>
 
-      <nav className="tabs">
+      <nav className="mb-3 flex flex-wrap gap-2">
         {navItems.map(([to, label]) => (
           <NavLink
             key={to}
             to={to}
             end={to === "/"}
-            className={({ isActive }) => `tab ${isActive ? "active" : ""}`}
+            className={({ isActive }) =>
+              [
+                "rounded-full border px-3 py-1.5 text-sm transition-colors",
+                isActive
+                  ? "border-primary/60 bg-primary/10 text-foreground"
+                  : "border-border bg-card text-muted-foreground hover:text-foreground",
+              ].join(" ")
+            }
           >
             {label}
           </NavLink>

ui/src/pages/AgentsPage.tsx

@@ -1,4 +1,6 @@
 import type { Agent } from "@/api";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 type Props = {
   agents: Agent[];
@@ -8,21 +10,34 @@ type Props = {
 
 export function AgentsPage({ agents, selectedAgentId, onSelectAgent }: Props) {
   return (
-    <section className="card">
+    <Card>
-      <h2>Agents</h2>
+      <CardHeader>
-      <div className="list">
+        <CardTitle>Agents</CardTitle>
-        {agents.map((agent) => (
+      </CardHeader>
-          <button
+      <CardContent>
-            key={agent.agent_id}
+        <div className="grid gap-2">
-            className={`row ${selectedAgentId === agent.agent_id ? "selected" : ""}`}
+          {agents.map((agent) => (
-            onClick={() => onSelectAgent(agent.agent_id)}
+            <Button
-          >
+              key={agent.agent_id}
-            <span>{agent.agent_id}</span>
+              variant={
-            <span>{agent.connected ? "connected" : "offline"}</span>
+                selectedAgentId === agent.agent_id ? "secondary" : "outline"
-          </button>
+              }
-        ))}
+              className="flex h-auto w-full items-center justify-between px-3 py-2 text-left"
-        {!agents.length && <div className="empty">No agents enrolled</div>}
+              onClick={() => onSelectAgent(agent.agent_id)}
-      </div>
+            >
-    </section>
+              <span>{agent.agent_id}</span>
+              <span className="text-xs text-muted-foreground">
+                {agent.connected ? "connected" : "offline"}
+              </span>
+            </Button>
+          ))}
+          {!agents.length && (
+            <div className="px-1 py-2 text-sm text-muted-foreground">
+              No agents enrolled
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
   );
 }

ui/src/pages/CommandsPage.tsx

@@ -53,9 +53,9 @@ export function CommandsPage({
         <CardTitle>Command Runner</CardTitle>
       </CardHeader>
       <CardContent>
-        <form className="form" onSubmit={submit}>
+        <form className="grid gap-3" onSubmit={submit}>
-          <label>
+          <label className="grid gap-1 text-sm text-muted-foreground">
-            Agent
+            <span>Agent</span>
             <Select
               value={selectedAgentId}
               onValueChange={(value) => {
@@ -76,8 +76,8 @@ export function CommandsPage({
             </Select>
           </label>
 
-          <label>
+          <label className="grid gap-1 text-sm text-muted-foreground">
-            Command
+            <span>Command</span>
             <Select
               value={kind}
               onValueChange={(value) => setKind(value as CommandKind)}
@@ -94,8 +94,8 @@ export function CommandsPage({
             </Select>
           </label>
 
-          <label>
+          <label className="grid gap-1 text-sm text-muted-foreground">
-            Query
+            <span>Query</span>
             <Input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
@@ -108,7 +108,11 @@ export function CommandsPage({
           </Button>
         </form>
 
-        <Textarea className="output" value={output} readOnly />
+        <Textarea
+          className="mt-3 max-h-80 min-h-48 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs"
+          value={output}
+          readOnly
+        />
       </CardContent>
     </Card>
   );

ui/src/pages/DashboardPage.tsx

@@ -1,4 +1,12 @@
 import type { Agent, Alert, AlertTransition } from "@/api";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 type Props = {
   agents: Agent[];
@@ -17,35 +25,50 @@ export function DashboardPage({
 }: Props) {
   const connected = agents.filter((a) => a.connected).length;
   return (
-    <section className="card-grid">
+    <section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-      <div className="card stat">
+      <Card>
-        <h3>Agents</h3>
+        <CardHeader className="pb-2">
-        <strong>{agents.length}</strong>
+          <CardDescription>Agents</CardDescription>
-      </div>
+          <CardTitle className="text-2xl">{agents.length}</CardTitle>
-      <div className="card stat">
+        </CardHeader>
-        <h3>Connected</h3>
+      </Card>
-        <strong>{connected}</strong>
+      <Card>
-      </div>
+        <CardHeader className="pb-2">
-      <div className="card stat">
+          <CardDescription>Connected</CardDescription>
-        <h3>Active Alerts</h3>
+          <CardTitle className="text-2xl">{connected}</CardTitle>
-        <strong>{alerts.length}</strong>
+        </CardHeader>
-      </div>
+      </Card>
-      <div className="card stat">
+      <Card>
-        <h3>Transitions</h3>
+        <CardHeader className="pb-2">
-        <strong>{transitions.length}</strong>
+          <CardDescription>Active Alerts</CardDescription>
-      </div>
+          <CardTitle className="text-2xl">{alerts.length}</CardTitle>
-      <div className="card span-full">
+        </CardHeader>
-        <div className="row-head">
+      </Card>
-          <h2>Overview</h2>
+      <Card>
-          <button onClick={onRefresh} disabled={loading}>
+        <CardHeader className="pb-2">
+          <CardDescription>Transitions</CardDescription>
+          <CardTitle className="text-2xl">{transitions.length}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card className="sm:col-span-2 lg:col-span-4">
+        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
+          <CardTitle>Overview</CardTitle>
+          <Button
+            onClick={onRefresh}
+            disabled={loading}
+            variant="outline"
+            size="sm"
+          >
             {loading ? "Refreshing..." : "Refresh"}
-          </button>
+          </Button>
-        </div>
+        </CardHeader>
-        <p className="muted">
+        <CardContent>
-          Use tabs to run commands, inspect audits, and monitor alerts in real
+          <p className="text-sm text-muted-foreground">
-          time.
+            Use tabs to run commands, inspect audits, and monitor alerts in real
-        </p>
+            time.
-      </div>
+          </p>
+        </CardContent>
+      </Card>
     </section>
   );
 }

ui/src/pages/DevicesPage.tsx

@@ -288,9 +288,9 @@ export function DevicesPage({
   }
 
   return (
-    <section className="two-col">
+    <section className="grid gap-3 xl:grid-cols-[2fr_1fr]">
       <Card>
-        <CardHeader className="row-head">
+        <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
           <CardTitle>Devices</CardTitle>
           <Button
             variant="outline"
@@ -303,9 +303,9 @@ export function DevicesPage({
         </CardHeader>
 
         <CardContent>
-          <div className="grid-3 compact">
+          <div className="mt-2 grid gap-2 sm:grid-cols-3">
-            <label>
+            <label className="grid gap-1 text-sm text-muted-foreground">
-              Agent
+              <span>Agent</span>
               <Select
                 value={selectedAgentId}
                 onValueChange={(value) => {
@@ -326,8 +326,8 @@ export function DevicesPage({
               </Select>
             </label>
 
-            <label className="span-2">
+            <label className="grid gap-1 text-sm text-muted-foreground sm:col-span-2">
-              Search
+              <span>Search</span>
               <Input
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
@@ -404,13 +404,21 @@ export function DevicesPage({
             >
               Clear selection
             </Button>
-            {copyStatus && <span className="muted">{copyStatus}</span>}
+            {copyStatus && (
+              <span className="text-sm text-muted-foreground">
+                {copyStatus}
+              </span>
+            )}
           </div>
 
-          <p className="muted">
+          <p className="text-sm text-muted-foreground">
             Showing {filtered.length} of {rows.length}
           </p>
-          {error && <pre className="error">{error}</pre>}
+          {error && (
+            <pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
+              {error}
+            </pre>
+          )}
 
           <DeviceInventoryTable
             rows={filtered}

ui/src/pages/TokensPage.tsx

@@ -6,6 +6,17 @@ import {
   issueEnrollToken,
   revokeEnrollToken,
 } from "@/api";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 function formatUnix(unix: number): string {
   return new Date(unix * 1000).toLocaleString();
@@ -77,74 +88,103 @@ export function TokensPage() {
   }, [includeExpired]);
 
   return (
-    <section className="two-col">
+    <section className="grid gap-3 xl:grid-cols-2">
-      <div className="card">
+      <Card>
-        <div className="row-head">
+        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
-          <h2>Enroll Tokens</h2>
+          <CardTitle>Enroll Tokens</CardTitle>
-          <button onClick={() => void load()} disabled={busy}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void load()}
+            disabled={busy}
+          >
             Refresh
-          </button>
+          </Button>
-        </div>
+        </CardHeader>
-        <div className="form">
+        <CardContent className="space-y-3">
-          <label>
+          <label className="grid gap-1 text-sm text-muted-foreground">
-            Include expired
+            <span>Include expired</span>
-            <select
+            <Select
               value={includeExpired ? "yes" : "no"}
-              onChange={(e) => setIncludeExpired(e.target.value === "yes")}
+              onValueChange={(value) => setIncludeExpired(value === "yes")}
             >
-              <option value="no">No</option>
+              <SelectTrigger className="w-full">
-              <option value="yes">Yes</option>
+                <SelectValue placeholder="Choose option" />
-            </select>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="no">No</SelectItem>
+                <SelectItem value="yes">Yes</SelectItem>
+              </SelectContent>
+            </Select>
           </label>
-        </div>
+          <p className="text-sm text-muted-foreground">
-        <p className="muted">
+            {activeCount} active, {tokens.length} shown
-          {activeCount} active, {tokens.length} shown
+          </p>
-        </p>
+          <div className="grid gap-2">
-        <div className="list">
+            {tokens.map((token) => (
-          {tokens.map((token) => (
+              <div
-            <div className="row" key={token.enroll_token}>
+                className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
-              <div>
+                key={token.enroll_token}
-                <strong>{token.enroll_token}</strong>
+              >
-                <div className="muted">
+                <div>
-                  expires: {formatUnix(token.expires_at_unix)}
+                  <strong>{token.enroll_token}</strong>
+                  <div className="text-xs text-muted-foreground">
+                    expires: {formatUnix(token.expires_at_unix)}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge variant={token.expired ? "destructive" : "secondary"}>
+                    {token.expired ? "expired" : "active"}
+                  </Badge>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void onRevoke(token.enroll_token)}
+                    disabled={busy}
+                  >
+                    Revoke
+                  </Button>
                 </div>
               </div>
-              <div className="token-actions">
+            ))}
-                <span className={`pill ${token.expired ? "error" : "ready"}`}>
+            {!tokens.length && (
-                  {token.expired ? "expired" : "active"}
+              <div className="px-1 py-2 text-sm text-muted-foreground">
-                </span>
+                No tokens found
-                <button
-                  onClick={() => void onRevoke(token.enroll_token)}
-                  disabled={busy}
-                >
-                  Revoke
-                </button>
               </div>
-            </div>
+            )}
-          ))}
+          </div>
-          {!tokens.length && <div className="empty">No tokens found</div>}
+        </CardContent>
-        </div>
+      </Card>
-      </div>
 
-      <div className="card">
+      <Card>
-        <h2>Issue Token</h2>
+        <CardHeader>
-        <div className="form">
+          <CardTitle>Issue Token</CardTitle>
-          <label>
+        </CardHeader>
-            TTL seconds
+        <CardContent className="grid gap-3">
-            <input
+          <label className="grid gap-1 text-sm text-muted-foreground">
+            <span>TTL seconds</span>
+            <Input
               type="number"
               min={1}
               value={ttlSeconds}
               onChange={(e) => setTtlSeconds(e.target.value)}
             />
           </label>
-          <button onClick={() => void onIssue()} disabled={busy}>
+          <Button onClick={() => void onIssue()} disabled={busy}>
             Issue
-          </button>
+          </Button>
-        </div>
+          {status && (
-        {status && <pre className="output">{status}</pre>}
+            <pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 text-xs">
-        {error && <pre className="error">{error}</pre>}
+              {status}
-      </div>
+            </pre>
+          )}
+          {error && (
+            <pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
+              {error}
+            </pre>
+          )}
+        </CardContent>
+      </Card>
     </section>
   );
 }

ui/src/pages/devices/DeviceInventoryTable.tsx

@@ -43,8 +43,8 @@ export function DeviceInventoryTable({
   onCopyValue,
 }: Props) {
   return (
-    <div className="list device-list">
+    <div className="device-list grid gap-2">
-      <div className="row plain device-row device-header">
+      <div className="device-row device-header rounded-md border bg-muted/60 px-3 py-2 text-sm">
         <span className="device-cell device-select">
           <input
             type="checkbox"
@@ -83,7 +83,10 @@ export function DeviceInventoryTable({
       </div>
 
       {rows.map((row) => (
-        <div className="row plain device-row" key={row.id}>
+        <div
+          className="device-row rounded-md border bg-card px-3 py-2 text-sm"
+          key={row.id}
+        >
           <span className="device-cell device-select" data-label="Pick">
             <input
               type="checkbox"
@@ -96,14 +99,14 @@ export function DeviceInventoryTable({
             {row.name}
           </span>
           <span
-            className="device-cell muted"
+            className="device-cell text-muted-foreground"
             data-label="IP"
             title={row.ips.join(", ") || "-"}
           >
             {summarize(row.ips)}
           </span>
           <span
-            className="device-cell muted"
+            className="device-cell text-muted-foreground"
             data-label="MAC"
             title={row.macs.join(", ") || "-"}
           >
@@ -157,7 +160,11 @@ export function DeviceInventoryTable({
         </div>
       ))}
 
-      {!rows.length && <div className="empty">No devices found</div>}
+      {!rows.length && (
+        <div className="px-1 py-2 text-sm text-muted-foreground">
+          No devices found
+        </div>
+      )}
     </div>
   );
 }

ui/src/pages/devices/WakeHistoryCard.tsx

@@ -13,28 +13,30 @@ type Props = {
 export function WakeHistoryCard({ events, onClear }: Props) {
   return (
     <Card>
-      <CardHeader className="row-head">
+      <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
         <CardTitle>Recent Wake Actions</CardTitle>
         <Button variant="outline" size="sm" onClick={onClear}>
           Clear
         </Button>
       </CardHeader>
       <CardContent>
-        <div className="list">
+        <div className="grid gap-2">
           {events.map((event, idx) => (
             <div
-              className="row plain"
+              className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
               key={`${event.ts}-${event.target}-${idx}`}
             >
               <div>
                 <strong>{event.target}</strong>
-                <div className="muted">
+                <div className="text-xs text-muted-foreground">
                   {new Date(event.ts).toLocaleString()} on {event.agentId}
                 </div>
-                <div className="muted">{event.detail}</div>
+                <div className="text-xs text-muted-foreground">
+                  {event.detail}
+                </div>
                 {event.requestId && (
                   <Link
-                    className="muted linkish"
+                    className="linkish text-xs text-muted-foreground"
                     to={`/audit?q=${encodeURIComponent(event.requestId)}`}
                   >
                     View related audit ({event.requestId})
@@ -48,7 +50,11 @@ export function WakeHistoryCard({ events, onClear }: Props) {
               </Badge>
             </div>
           ))}
-          {!events.length && <div className="empty">No wake actions yet</div>}
+          {!events.length && (
+            <div className="px-1 py-2 text-sm text-muted-foreground">
+              No wake actions yet
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

ui/src/pages/devices/devices.css

@@ -60,7 +60,6 @@
   position: sticky;
   top: 0;
   z-index: 2;
-  background: var(--surface-strong);
 }
 
 .device-cell {

ui/src/styles.css

@@ -6,18 +6,8 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --bg: #f5f8f2;
-  --bg-accent: #e7efe4;
   --card: oklch(1 0 0);
-  --line: #ced7ce;
-  --text: #1c2620;
   --muted: oklch(0.96 0.004 145);
-  --surface: #ffffff;
-  --surface-muted: #f3f7f2;
-  --surface-strong: #e8f0e7;
-  --card-bg-a: rgba(255, 255, 255, 0.98);
-  --card-bg-b: rgba(243, 248, 242, 0.9);
-  --tab-active-border: #6a9a7f;
   --background: oklch(1 0 0);
   --foreground: oklch(0.23 0.02 155);
   --card-foreground: oklch(0.23 0.02 155);
@@ -50,232 +40,6 @@
   --sidebar-ring: oklch(0.62 0.08 156);
 }
 
-* {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
-  color: var(--text);
-  background: radial-gradient(circle at 20% 10%, var(--bg-accent) 0%, var(--bg) 45%);
-  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-}
-
-.app {
-  padding: 1rem;
-}
-.topbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.topbar h1 {
-  margin: 0;
-}
-.topbar p {
-  margin: 0.35rem 0 0;
-  color: var(--muted-foreground);
-}
-
-.tabs {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-bottom: 0.8rem;
-}
-
-.tab {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 0.35rem 0.65rem;
-  text-decoration: none;
-  color: var(--muted-foreground);
-  background: var(--surface-muted);
-}
-
-.tab.active {
-  color: var(--text);
-  border-color: var(--tab-active-border);
-}
-
-.pill {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 0.35rem 0.7rem;
-  font-size: 0.82rem;
-}
-.pill.ready {
-  color: #86efac;
-  border-color: #14532d;
-}
-.pill.loading {
-  color: #fde68a;
-  border-color: #713f12;
-}
-.pill.error {
-  color: #fca5a5;
-  border-color: #7f1d1d;
-}
-
-.stats {
-  display: grid;
-  gap: 0.8rem;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  margin-bottom: 1rem;
-}
-
-.card-grid {
-  display: grid;
-  gap: 0.8rem;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
-.stat h3 {
-  margin: 0;
-  color: var(--muted-foreground);
-  font-weight: 500;
-}
-.stat strong {
-  font-size: 1.5rem;
-}
-
-.grid {
-  display: grid;
-  gap: 0.8rem;
-  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
-}
-
-.two-col {
-  display: grid;
-  gap: 0.8rem;
-  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
-}
-.card {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: linear-gradient(180deg, var(--card-bg-a), var(--card-bg-b));
-  padding: 0.8rem;
-}
-.span-2 {
-  grid-column: 1 / -1;
-}
-.span-full {
-  grid-column: 1 / -1;
-}
-.row-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-.muted {
-  color: var(--muted-foreground);
-}
-
-button,
-input,
-select {
-  border-radius: 8px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  color: var(--text);
-}
-button {
-  padding: 0.45rem 0.65rem;
-  cursor: pointer;
-}
-button:hover {
-  border-color: var(--tab-active-border);
-}
-input,
-select {
-  width: 100%;
-  padding: 0.45rem 0.55rem;
-}
-
-.form {
-  display: grid;
-  gap: 0.65rem;
-}
-.form label {
-  display: grid;
-  gap: 0.35rem;
-  color: var(--muted-foreground);
-  font-size: 0.9rem;
-}
-
-.grid-3 {
-  display: grid;
-  gap: 0.6rem;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-}
-
-.grid-3.compact {
-  margin-top: 0.65rem;
-}
-
-.grid-3 label {
-  display: grid;
-  gap: 0.35rem;
-  color: var(--muted-foreground);
-  font-size: 0.9rem;
-}
-
-.list {
-  display: grid;
-  gap: 0.4rem;
-  margin-top: 0.55rem;
-}
-.row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.6rem;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: 8px;
-  padding: 0.45rem 0.55rem;
-  text-align: left;
-}
-.row.selected {
-  border-color: var(--tab-active-border);
-}
-.row.plain {
-  cursor: default;
-}
-.token-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-}
-@media (max-width: 720px) {
-}
-.empty {
-  color: var(--muted-foreground);
-  padding: 0.35rem 0.2rem;
-}
-
-.output {
-  margin: 0.65rem 0 0;
-  background: var(--surface-muted);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 0.7rem;
-  max-height: 360px;
-  overflow: auto;
-  font-size: 0.84rem;
-}
-.output.small {
-  max-height: 230px;
-}
-.error {
-  border: 1px solid #7f1d1d;
-  background: rgba(127, 29, 29, 0.2);
-  border-radius: 10px;
-  padding: 0.7rem;
-  overflow: auto;
-}
-
 @theme inline {
   --font-heading: var(--font-sans);
   --font-sans: 'Inter Variable', sans-serif;
@@ -320,17 +84,7 @@ select {
 }
 
 .dark {
-  --bg: #0f1712;
-  --bg-accent: #1a271f;
-  --line: #2d3d33;
-  --text: #e7edf7;
   --muted: oklch(0.25 0.01 156);
-  --surface: #122119;
-  --surface-muted: #15271d;
-  --surface-strong: #1a2d21;
-  --card-bg-a: rgba(20, 33, 25, 0.92);
-  --card-bg-b: rgba(20, 33, 25, 0.72);
-  --tab-active-border: #63a47f;
   --background: oklch(0.19 0.02 156);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.24 0.015 156);
@@ -369,6 +123,12 @@ select {
   }
   body {
     @apply bg-background text-foreground;
+    background-image: radial-gradient(
+      circle at 20% 10%,
+      color-mix(in oklab, var(--primary) 12%, var(--background)) 0%,
+      var(--background) 45%
+    );
+    margin: 0;
   }
   html {
     @apply font-sans;