@tangle-network/sandbox-ui 0.45.0 → 0.46.0

package/dist/pages.js

@@ -4,7 +4,7 @@ import {
   PricingPage,
   TemplateCard,
   UsageChart
-} from "./chunk-2XNT74ZX.js";
+} from "./chunk-OMUIPJQZ.js";
 import {
   Badge,
   Button,
@@ -24,10 +24,11 @@ import {
   Switch,
   Textarea
 } from "./chunk-4ZZUMXPX.js";
-import "./chunk-3RNYDTQ3.js";
+import "./chunk-LQHTCM56.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
+import "./chunk-U67V476Y.js";
 
 // src/pages/auth-page.tsx
 import { useState } from "react";
@@ -271,7 +272,7 @@ function BillingPageSkeleton({
       /* @__PURE__ */ jsx2(SkeletonCard, {}),
       /* @__PURE__ */ jsx2(SkeletonCard, {})
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "space-y-4 rounded-xl border border-border bg-card p-6", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-4 rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container p-6", children: [
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-6 w-48" }),
       /* @__PURE__ */ jsx2("div", { className: "h-48", children: /* @__PURE__ */ jsx2(Skeleton, { className: "h-full w-full" }) })
     ] })
@@ -448,7 +449,7 @@ function BillingPage({
         title: "Credit Usage History",
         unit: "credits"
       }
-    ) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center rounded-xl border border-border bg-card p-12 text-center", children: [
+    ) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container p-12 text-center", children: [
       /* @__PURE__ */ jsxs2(
         "svg",
         {
@@ -584,7 +585,7 @@ function AddSshKeyDialog({
             placeholder: "My laptop",
             autoComplete: "off",
             "aria-invalid": errors.name ? true : void 0,
-            className: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         errors.name && /* @__PURE__ */ jsx3("p", { className: "text-xs text-destructive", children: errors.name })
@@ -609,7 +610,7 @@ function AddSshKeyDialog({
             autoComplete: "off",
             spellCheck: false,
             "aria-invalid": errors.publicKey ? true : void 0,
-            className: "min-h-24 w-full resize-y rounded-md border border-border bg-card px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "min-h-24 w-full resize-y rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         errors.publicKey && /* @__PURE__ */ jsx3("p", { className: "text-xs text-destructive", children: errors.publicKey })
@@ -624,7 +625,7 @@ function AddSshKeyDialog({
           type: "button",
           onClick: () => onOpenChange(false),
           disabled: isSaving,
-          className: "rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50",
+          className: "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors disabled:opacity-50",
           children: "Cancel"
         }
       ),
@@ -652,7 +653,7 @@ var VALID_DRIVERS = /* @__PURE__ */ new Set([
   "firecracker",
   "tangle"
 ]);
-var SECTION_CARD_CLASS = "rounded-lg border border-border bg-card p-5 shadow-sm";
+var SECTION_CARD_CLASS = "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-sm";
 var FIELD_LABEL_CLASS = "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]";
 var STACK_DISPLAY = {
   universal: {
@@ -851,7 +852,7 @@ function SshAccessStep({ config }) {
           },
           className: cn(
             "group p-3 text-left rounded-lg border transition-colors duration-200",
-            selected ? "bg-primary/5 border-primary ring-1 ring-primary/20" : "bg-card border-border hover:border-primary/30 active:scale-[0.99]"
+            selected ? "bg-primary/5 border-primary ring-1 ring-primary/20" : "bg-surface-container border-[var(--md3-outline-variant)] hover:border-primary/30 active:scale-[0.99]"
           ),
           children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
@@ -868,7 +869,7 @@ function SshAccessStep({ config }) {
                 "aria-hidden": "true",
                 className: cn(
                   "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border-2 transition-colors duration-200",
-                  selected ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
+                  selected ? "border-primary bg-primary" : "border-[var(--md3-outline-variant)] group-hover:border-primary/40"
                 ),
                 children: selected && /* @__PURE__ */ jsx4(Check, { className: "h-2.5 w-2.5 text-primary-foreground" })
               }
@@ -1210,17 +1211,17 @@ function ProvisioningWizard({
                 onClick: () => setSelectedEnv(env.id),
                 className: cn(
                   "group p-3.5 rounded-lg text-left border transition-colors duration-200",
-                  selectedEnv === env.id ? "bg-primary/5 border-primary ring-1 ring-primary/20" : "bg-card border-border hover:border-primary/30 active:scale-[0.99]"
+                  selectedEnv === env.id ? "bg-primary/5 border-primary ring-1 ring-primary/20" : "bg-surface-container border-[var(--md3-outline-variant)] hover:border-primary/30 active:scale-[0.99]"
                 ),
                 children: [
                   /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-start mb-2.5", children: [
-                    /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 rounded-full flex items-center justify-center bg-muted/50 border border-border", children: env.icon }),
+                    /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 rounded-full flex items-center justify-center bg-surface-container-high border border-[var(--md3-outline-variant)]", children: env.icon }),
                     /* @__PURE__ */ jsx4(
                       "div",
                       {
                         className: cn(
                           "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors duration-200",
-                          selectedEnv === env.id ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
+                          selectedEnv === env.id ? "border-primary bg-primary" : "border-[var(--md3-outline-variant)] group-hover:border-primary/40"
                         ),
                         children: selectedEnv === env.id && /* @__PURE__ */ jsx4(Check, { className: "h-2.5 w-2.5 text-primary-foreground" })
                       }
@@ -1250,7 +1251,7 @@ function ProvisioningWizard({
                     disabled: p.locked,
                     className: cn(
                       "p-2.5 rounded-lg transition-colors duration-200 text-center group border relative",
-                      active ? "bg-primary/5 border-primary ring-1 ring-primary/20" : p.locked ? "bg-muted/30 border-border opacity-60 cursor-not-allowed" : "bg-card border-border hover:border-primary/30 active:scale-[0.99]"
+                      active ? "bg-primary/5 border-primary ring-1 ring-primary/20" : p.locked ? "bg-muted/30 border-border opacity-60 cursor-not-allowed" : "bg-surface-container border-[var(--md3-outline-variant)] hover:border-primary/30 active:scale-[0.99]"
                     ),
                     children: [
                       p.locked && /* @__PURE__ */ jsx4("div", { className: "absolute -top-1.5 -right-1.5 bg-primary text-primary-foreground text-[9px] font-semibold px-1.5 py-0.5 rounded-full uppercase tracking-wider", children: p.unlockLabel }),
@@ -1471,7 +1472,7 @@ function ProvisioningWizard({
                       }
                     )
                   ] }, env.uid)),
-                  envVars.length === 0 && /* @__PURE__ */ jsx4("div", { className: "text-center p-3 border border-dashed border-border rounded-lg text-muted-foreground/60 text-xs italic", children: "No environment variables set" })
+                  envVars.length === 0 && /* @__PURE__ */ jsx4("div", { className: "text-center p-3 border border-dashed border-[var(--md3-outline-variant)] rounded-lg text-muted-foreground/60 text-xs italic", children: "No environment variables set" })
                 ] })
               ] }),
               availableScripts.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
@@ -1483,7 +1484,7 @@ function ProvisioningWizard({
                   return /* @__PURE__ */ jsxs4(
                     "label",
                     {
-                      className: "flex items-start gap-3 cursor-pointer group rounded-lg border border-border p-3 transition-colors hover:border-primary/30",
+                      className: "flex items-start gap-3 cursor-pointer group rounded-lg border border-[var(--md3-outline-variant)] p-3 transition-colors hover:border-primary/30",
                       children: [
                         /* @__PURE__ */ jsx4(
                           "input",
@@ -1495,7 +1496,7 @@ function ProvisioningWizard({
                                 (id) => id !== script.id
                               ) : [...prev, script.id]
                             ),
-                            className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/30"
+                            className: "mt-0.5 h-4 w-4 rounded border-[var(--md3-outline-variant)] text-primary focus:ring-primary/30"
                           }
                         ),
                         /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
@@ -1504,7 +1505,7 @@ function ProvisioningWizard({
                           script.injectSecrets.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1 mt-1.5", children: script.injectSecrets.map((s) => /* @__PURE__ */ jsxs4(
                             "span",
                             {
-                              className: "inline-flex items-center gap-0.5 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground",
+                              className: "inline-flex items-center gap-0.5 rounded-full bg-surface-container-high px-2 py-0.5 text-[10px] text-muted-foreground",
                               children: [
                                 /* @__PURE__ */ jsxs4(
                                   "svg",
@@ -1542,7 +1543,7 @@ function ProvisioningWizard({
                   );
                 }) })
               ] }),
-              /* @__PURE__ */ jsxs4("div", { className: "pt-3 border-t border-border flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "pt-3 border-t border-[var(--md3-outline-variant)] flex items-start justify-between gap-3", children: [
                 /* @__PURE__ */ jsxs4("div", { children: [
                   /* @__PURE__ */ jsx4(
                     "label",
@@ -1564,13 +1565,13 @@ function ProvisioningWizard({
                   }
                 )
               ] }),
-              sshAccess && /* @__PURE__ */ jsx4("div", { className: "pt-3 border-t border-border", children: /* @__PURE__ */ jsx4(SshAccessStep, { config: sshAccess }) })
+              sshAccess && /* @__PURE__ */ jsx4("div", { className: "pt-3 border-t border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsx4(SshAccessStep, { config: sshAccess }) })
             ] })
           ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "col-span-12 xl:col-span-4 sticky top-4 space-y-4", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-border bg-card p-5 shadow-sm", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-sm", children: [
           /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center mb-3", children: [
             /* @__PURE__ */ jsx4("span", { className: FIELD_LABEL_CLASS, children: "Run Cost" }),
             /* @__PURE__ */ jsxs4(
@@ -1578,7 +1579,7 @@ function ProvisioningWizard({
               {
                 role: "group",
                 "aria-label": "Pricing view",
-                className: "inline-flex items-center rounded-md border border-border bg-muted/50 p-0.5",
+                className: "inline-flex items-center rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low p-0.5",
                 children: [
                   /* @__PURE__ */ jsx4(
                     "button",
@@ -1588,7 +1589,7 @@ function ProvisioningWizard({
                       onClick: () => setPricingView("hourly"),
                       className: cn(
                         "rounded px-2.5 py-0.5 text-[10px] font-medium transition-all",
-                        pricingView === "hourly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                        pricingView === "hourly" ? "bg-surface-container-high text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                       ),
                       children: "Per Hour"
                     }
@@ -1601,7 +1602,7 @@ function ProvisioningWizard({
                       onClick: () => setPricingView("perSecond"),
                       className: cn(
                         "rounded px-2.5 py-0.5 text-[10px] font-medium transition-all",
-                        pricingView === "perSecond" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                        pricingView === "perSecond" ? "bg-surface-container-high text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                       ),
                       children: "Per Second"
                     }
@@ -1627,7 +1628,7 @@ function ProvisioningWizard({
             ),
             /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground text-sm", children: pricingSuffix })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "space-y-2 rounded-md border border-border bg-muted/30 p-3", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "space-y-2 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high p-3", children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex justify-between text-xs font-mono tracking-wide text-muted-foreground", children: [
               /* @__PURE__ */ jsx4("span", { children: "COMPUTE" }),
               /* @__PURE__ */ jsxs4("span", { className: "text-foreground", children: [
@@ -1652,7 +1653,7 @@ function ProvisioningWizard({
                 rateSuffix
               ] })
             ] }),
-            hourlyCostBreakdown.floorApplies && /* @__PURE__ */ jsxs4("div", { className: "flex justify-between text-xs font-mono tracking-wide text-primary border-t border-border pt-2", children: [
+            hourlyCostBreakdown.floorApplies && /* @__PURE__ */ jsxs4("div", { className: "flex justify-between text-xs font-mono tracking-wide text-primary border-t border-[var(--md3-outline-variant)] pt-2", children: [
               /* @__PURE__ */ jsx4("span", { children: "MIN CHARGE" }),
               /* @__PURE__ */ jsxs4("span", { children: [
                 "$",
@@ -1812,9 +1813,9 @@ function StandalonePricingPage({
         loading: state.selectingTier
       }
     ),
-    /* @__PURE__ */ jsxs5("div", { className: "mx-auto max-w-2xl space-y-4 border-t border-border pt-12", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "mx-auto max-w-2xl space-y-4 border-t border-[var(--md3-outline-variant)] pt-12", children: [
       /* @__PURE__ */ jsx5("h2", { className: "text-center text-xl font-bold text-foreground mb-6", children: "Frequently Asked Questions" }),
-      FAQ.map(({ q, a }) => /* @__PURE__ */ jsxs5("details", { className: "group rounded-xl border border-border bg-card overflow-hidden", children: [
+      FAQ.map(({ q, a }) => /* @__PURE__ */ jsxs5("details", { className: "group rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: [
         /* @__PURE__ */ jsxs5("summary", { className: "flex cursor-pointer items-center justify-between px-6 py-4 font-medium text-foreground text-sm", children: [
           q,
           /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 text-muted-foreground transition-transform group-open:rotate-180" })
@@ -2068,7 +2069,7 @@ function ProfileCard({
   return /* @__PURE__ */ jsxs6(
     Card,
     {
-      className: "cursor-pointer p-4 transition-colors hover:border-border/80",
+      className: "cursor-pointer p-4 transition-colors hover:border-[var(--md3-outline)]",
       onClick: onView,
       children: [
         /* @__PURE__ */ jsxs6("div", { className: "flex items-start justify-between", children: [
@@ -2110,7 +2111,7 @@ function ProfileCard({
           ] }),
           profile.model && /* @__PURE__ */ jsx6(Badge2, { variant: "outline", className: "text-xs", children: profile.model.split("/").pop() })
         ] }),
-        profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs6("div", { className: "mt-3 flex gap-4 border-border border-t pt-3 text-muted-foreground text-xs", children: [
+        profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs6("div", { className: "mt-3 flex gap-4 border-[var(--md3-outline-variant)] border-t pt-3 text-muted-foreground text-xs", children: [
           /* @__PURE__ */ jsxs6("span", { children: [
             profile.metrics.total_runs,
             " runs"
@@ -2248,7 +2249,7 @@ function ProfileFormDialog({
           {
             value: formData.extends,
             onChange: (e) => setFormData((d) => ({ ...d, extends: e.target.value })),
-            className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
+            className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm",
             children: [
               /* @__PURE__ */ jsx6("option", { value: "", children: "None (start from scratch)" }),
               builtinProfiles.map((p) => /* @__PURE__ */ jsxs6("option", { value: p.name, children: [
@@ -2281,7 +2282,7 @@ function ProfileFormDialog({
             onChange: (e) => setFormData((d) => ({ ...d, system_prompt: e.target.value })),
             placeholder: "Custom system prompt for the agent...",
             rows: 4,
-            className: "w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm"
+            className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 font-mono text-sm"
           }
         )
       ] }),
@@ -2308,7 +2309,7 @@ function ProfileFormDialog({
             id: "is_public",
             checked: formData.is_public,
             onChange: (e) => setFormData((d) => ({ ...d, is_public: e.target.checked })),
-            className: "rounded border-border"
+            className: "rounded border-[var(--md3-outline-variant)]"
           }
         ),
         /* @__PURE__ */ jsx6("label", { htmlFor: "is_public", className: "text-sm", children: "Make this profile public (visible to other users)" })
@@ -2413,7 +2414,7 @@ function ProfileDetailDialog({
       profile.system_prompt && /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx6("label", { className: "font-medium text-muted-foreground text-xs", children: "System Prompt" }),
         /* @__PURE__ */ jsxs6("div", { className: "relative mt-1", children: [
-          /* @__PURE__ */ jsx6("pre", { className: "max-h-48 overflow-auto rounded-lg bg-muted p-3 font-mono text-sm", children: profile.system_prompt }),
+          /* @__PURE__ */ jsx6("pre", { className: "max-h-48 overflow-auto rounded-lg bg-surface-container-low p-3 font-mono text-sm", children: profile.system_prompt }),
           /* @__PURE__ */ jsx6(
             Button2,
             {
@@ -2434,7 +2435,7 @@ function ProfileDetailDialog({
           inst
         ] }, i)) })
       ] }),
-      profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-border p-4", children: [
+      profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-high p-4", children: [
         /* @__PURE__ */ jsx6("label", { className: "font-medium text-muted-foreground text-xs", children: "Performance Metrics" }),
         /* @__PURE__ */ jsxs6("div", { className: "mt-2 grid grid-cols-2 gap-4 sm:grid-cols-4", children: [
           /* @__PURE__ */ jsxs6("div", { children: [
@@ -2737,7 +2738,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
             {
               type: "button",
               onClick: () => setIsImportOpen(true),
-              className: "inline-flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-muted transition-colors active:scale-[0.97]",
+              className: "inline-flex items-center gap-2 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-surface-container-high transition-colors active:scale-[0.97]",
               children: [
                 /* @__PURE__ */ jsx7(Upload, { className: "h-4 w-4" }),
                 "Import .env"
@@ -2759,7 +2760,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
         ] })
       }
     ),
-    teamSecretsHint && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-[var(--accent-surface-soft)]/40 px-4 py-3", children: [
+    teamSecretsHint && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 rounded-lg border border-[var(--md3-outline-variant)] bg-[var(--accent-surface-soft)]/40 px-4 py-3", children: [
       /* @__PURE__ */ jsx7(Users, { className: "h-5 w-5 shrink-0 text-[var(--accent-text)]", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs7("div", { className: "flex-1 text-sm", children: [
         /* @__PURE__ */ jsx7("p", { className: "font-semibold text-foreground", children: "Setting up secrets for a team?" }),
@@ -2774,7 +2775,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
         {
           type: "button",
           onClick: teamSecretsHint.onNavigate,
-          className: "inline-flex shrink-0 items-center gap-1 rounded-md border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-muted transition-colors",
+          className: "inline-flex shrink-0 items-center gap-1 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-surface-container-high transition-colors",
           children: [
             teamSecretsHint.label ?? "Manage team secrets",
             /* @__PURE__ */ jsx7(ArrowRight, { className: "h-3 w-3", "aria-hidden": "true" })
@@ -2783,11 +2784,11 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
       )
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-4", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsx7("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Total Active Secrets" }),
         /* @__PURE__ */ jsx7("div", { className: "mt-2 flex items-baseline gap-2", children: /* @__PURE__ */ jsx7("span", { className: "font-display text-2xl font-extrabold text-foreground", children: secrets.length }) })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsx7("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Status" }),
         /* @__PURE__ */ jsxs7("div", { className: "mt-2 flex items-center gap-2", children: [
           /* @__PURE__ */ jsx7(CheckCircle, { className: "h-4 w-4 text-[var(--surface-success-text,#047857)]" }),
@@ -2842,7 +2843,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
                   placeholder: "MY_SECRET_KEY",
                   autoComplete: "off",
-                  className: "w-full rounded-md border border-border bg-card px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 }
               )
             ] }),
@@ -2859,7 +2860,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                     onChange: (e) => setNewValue(e.target.value),
                     placeholder: "Enter secret value...",
                     autoComplete: "new-password",
-                    className: "w-full rounded-md border border-border bg-card px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   }
                 ),
                 /* @__PURE__ */ jsx7(
@@ -2891,7 +2892,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
               setNewValue("");
               setCreateError(null);
             },
-            className: "rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+            className: "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors",
             children: "Cancel"
           }
         ),
@@ -2940,7 +2941,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
               {
                 type: "button",
                 onClick: () => fileInputRef.current?.click(),
-                className: "inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted transition-colors",
+                className: "inline-flex items-center gap-2 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-xs font-semibold text-foreground hover:bg-surface-container-high transition-colors",
                 children: [
                   /* @__PURE__ */ jsx7(Upload, { className: "h-3.5 w-3.5" }),
                   "Choose .env file"
@@ -2967,7 +2968,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
               onChange: (e) => setImportText(e.target.value),
               rows: 6,
               spellCheck: false,
-              className: "w-full rounded-md border border-border bg-card px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             }
           ),
           /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
@@ -3017,7 +3018,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
           /* @__PURE__ */ jsx7("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: importResult.rows.map((row, index) => {
             const status = rowStatus[index];
             const message = rowMessages[index];
-            return /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2 rounded-md border border-border bg-muted/30 p-2", children: [
+            return /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-high p-2", children: [
               /* @__PURE__ */ jsx7(
                 "input",
                 {
@@ -3026,7 +3027,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   value: row.key,
                   onChange: (e) => updateRowKey(index, e.target.value),
                   disabled: isImportSaving,
-                  className: "w-2/5 rounded border border-border bg-card px-2 py-1.5 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-60"
+                  className: "w-2/5 rounded border border-[var(--md3-outline-variant)] bg-surface-container-low px-2 py-1.5 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-60"
                 }
               ),
               /* @__PURE__ */ jsx7(
@@ -3037,7 +3038,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   value: row.value,
                   onChange: (e) => updateRowValue(index, e.target.value),
                   disabled: isImportSaving,
-                  className: "w-2/5 rounded border border-border bg-card px-2 py-1.5 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-60"
+                  className: "w-2/5 rounded border border-[var(--md3-outline-variant)] bg-surface-container-low px-2 py-1.5 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-60"
                 }
               ),
               /* @__PURE__ */ jsxs7("div", { className: "flex w-1/5 flex-col items-end gap-1", children: [
@@ -3076,7 +3077,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
               resetImportState();
             },
             disabled: isImportSaving,
-            className: "rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none",
+            className: "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors disabled:opacity-50 disabled:pointer-events-none",
             children: "Cancel"
           }
         ),
@@ -3109,7 +3110,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
           {
             type: "button",
             onClick: () => setDeleteTarget(null),
-            className: "rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+            className: "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors",
             children: "Cancel"
           }
         ),
@@ -3125,8 +3126,8 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-lg border border-border bg-card shadow-[var(--shadow-card)]", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "border-b border-border px-6 py-4 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "border-b border-[var(--md3-outline-variant)] px-6 py-4 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx7("div", { className: "flex gap-6", children: /* @__PURE__ */ jsx7("button", { type: "button", className: "text-xs font-bold uppercase tracking-widest text-foreground border-b-2 border-foreground pb-1", children: "All Secrets" }) }),
         /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground font-mono", children: [
           secrets.length,
@@ -3152,18 +3153,18 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
           }
         )
       ] }) : /* @__PURE__ */ jsxs7("table", { className: "w-full text-left border-collapse", children: [
-        /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "bg-muted/30 border-b border-border", children: [
+        /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: [
           /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Secret Name" }),
           /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Encrypted Value" }),
           /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-right", children: "Created" }),
           /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 w-12" })
         ] }) }),
-        /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-border", children: secrets.map((secret) => /* @__PURE__ */ jsxs7("tr", { className: "hover:bg-muted/20 transition-colors", children: [
+        /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-border", children: secrets.map((secret) => /* @__PURE__ */ jsxs7("tr", { className: "hover:bg-surface-container-high transition-colors", children: [
           /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsx7(Key, { className: "h-4 w-4 text-muted-foreground" }),
             /* @__PURE__ */ jsx7("span", { className: "text-sm font-bold font-mono text-foreground", children: secret.name })
           ] }) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx7("code", { className: "text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) }),
+          /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx7("code", { className: "text-xs font-mono text-muted-foreground bg-surface-container-high px-2 py-1 rounded", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) }),
           /* @__PURE__ */ jsx7("td", { className: "px-6 py-4 text-right", children: /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: formatDate(secret.createdAt) }) }),
           /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx7(
             "button",
@@ -3179,14 +3180,14 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 mb-3", children: [
           /* @__PURE__ */ jsx7("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-[var(--brand-primary,hsl(var(--primary)))] text-[var(--btn-primary-text)]", children: /* @__PURE__ */ jsx7(Shield, { className: "h-5 w-5" }) }),
           /* @__PURE__ */ jsx7("h3", { className: "text-sm font-bold text-foreground", children: "Encryption Standard" })
         ] }),
         /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground leading-relaxed", children: "Your secrets are encrypted using AES-256-GCM at rest and TLS 1.3 in transit. Hardware Security Modules manage all root keys." })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 mb-3", children: [
           /* @__PURE__ */ jsx7("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-[var(--brand-primary,hsl(var(--primary)))] text-[var(--btn-primary-text)]", children: /* @__PURE__ */ jsx7(Lock, { className: "h-5 w-5" }) }),
           /* @__PURE__ */ jsx7("h3", { className: "text-sm font-bold text-foreground", children: "Access Policy" })
@@ -3207,7 +3208,7 @@ function TemplatesPage({ templates, loading = false, onUseTemplate, className })
       /* @__PURE__ */ jsx8("h1", { className: "font-bold text-3xl text-foreground", children: "Templates" }),
       /* @__PURE__ */ jsx8("p", { className: "mt-1 text-muted-foreground", children: "Pre-configured environments to get started quickly" })
     ] }),
-    loading || !templates ? /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx8(Skeleton3, { className: "h-56 rounded-2xl" }, i)) }) : templates.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "rounded-2xl border border-border bg-card p-16 text-center", children: [
+    loading || !templates ? /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx8(Skeleton3, { className: "h-56 rounded-2xl" }, i)) }) : templates.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "rounded-2xl border border-[var(--md3-outline-variant)] bg-surface-container p-16 text-center", children: [
       /* @__PURE__ */ jsx8(Layers2, { className: "mx-auto mb-3 h-10 w-10 text-muted-foreground" }),
       /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-foreground mb-1", children: "No templates available" }),
       /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground", children: "Check back later for pre-configured environments." })
@@ -3594,11 +3595,11 @@ function StartupScriptsPage({ apiClient, className }) {
       }
     ),
     /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-4", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Total Scripts" }),
         /* @__PURE__ */ jsx9("div", { className: "mt-2 flex items-baseline gap-2", children: /* @__PURE__ */ jsx9("span", { className: "font-display text-2xl font-extrabold text-foreground", children: scripts.length }) })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-5 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Active" }),
         /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex items-baseline gap-2", children: [
           /* @__PURE__ */ jsx9("span", { className: "font-display text-2xl font-extrabold text-foreground", children: activeCount }),
@@ -3643,7 +3644,7 @@ function StartupScriptsPage({ apiClient, className }) {
                   {
                     type: "button",
                     onClick: () => openBlankScript(type),
-                    className: "rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-medium text-foreground hover:border-primary/30 hover:bg-muted/50 transition-colors",
+                    className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2.5 text-sm font-medium text-foreground hover:border-primary/30 hover:bg-surface-container-high transition-colors",
                     children: meta.label
                   },
                   type
@@ -3656,16 +3657,16 @@ function StartupScriptsPage({ apiClient, className }) {
                   {
                     type: "button",
                     onClick: () => openFromTemplate(tmpl),
-                    className: "w-full text-left rounded-lg border border-border bg-card p-4 hover:border-primary/30 hover:bg-muted/30 transition-colors group",
+                    className: "w-full text-left rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-4 hover:border-primary/30 hover:bg-surface-container-high transition-colors group",
                     children: [
                       /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
                         /* @__PURE__ */ jsxs9("div", { children: [
                           /* @__PURE__ */ jsx9("h4", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors", children: tmpl.name }),
                           /* @__PURE__ */ jsx9("p", { className: "mt-0.5 text-xs text-muted-foreground", children: tmpl.description })
                         ] }),
-                        /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted rounded px-1.5 py-0.5", children: SCRIPT_TYPE_META[tmpl.scriptType].label })
+                        /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-mono text-muted-foreground bg-surface-container-high rounded px-1.5 py-0.5", children: SCRIPT_TYPE_META[tmpl.scriptType].label })
                       ] }),
-                      tmpl.injectSecrets.length > 0 && /* @__PURE__ */ jsx9("div", { className: "mt-2 flex flex-wrap gap-1", children: tmpl.injectSecrets.map((s) => /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: [
+                      tmpl.injectSecrets.length > 0 && /* @__PURE__ */ jsx9("div", { className: "mt-2 flex flex-wrap gap-1", children: tmpl.injectSecrets.map((s) => /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-surface-container-high px-2 py-0.5 text-[10px] text-muted-foreground", children: [
                         /* @__PURE__ */ jsx9(Lock2, { className: "h-2.5 w-2.5" }),
                         s
                       ] }, s)) })
@@ -3702,7 +3703,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, name: e.target.value })),
                     placeholder: "Install Claude Code",
                     maxLength: 64,
-                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   }
                 )
               ] }),
@@ -3716,7 +3717,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, description: e.target.value })),
                     placeholder: "Sets up Claude Code with authentication",
                     maxLength: 256,
-                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   }
                 )
               ] }),
@@ -3737,7 +3738,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     },
                     className: cn(
                       "rounded-lg px-3 py-1.5 text-xs font-medium border transition-colors",
-                      formData.scriptType === type ? "bg-primary/10 border-primary/30 text-primary" : "bg-background border-border text-muted-foreground hover:border-primary/20"
+                      formData.scriptType === type ? "bg-primary/10 border-primary/30 text-primary" : "bg-surface-container-low border-[var(--md3-outline-variant)] text-muted-foreground hover:border-primary/20"
                     ),
                     children: meta.label
                   },
@@ -3753,7 +3754,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, content: e.target.value })),
                     rows: 12,
                     spellCheck: false,
-                    className: "mt-1.5 w-full rounded-lg border border-border bg-[var(--depth-1,hsl(var(--muted)))] px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y"
+                    className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y"
                   }
                 ),
                 /* @__PURE__ */ jsxs9("p", { className: "mt-1 text-xs text-muted-foreground", children: [
@@ -3775,7 +3776,7 @@ function StartupScriptsPage({ apiClient, className }) {
                       onClick: () => toggleSecret(secret.name),
                       className: cn(
                         "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium border transition-colors",
-                        selected ? "bg-primary/10 border-primary/30 text-primary" : "bg-muted border-border text-muted-foreground hover:border-primary/20"
+                        selected ? "bg-primary/10 border-primary/30 text-primary" : "bg-surface-container-low border-[var(--md3-outline-variant)] text-muted-foreground hover:border-primary/20"
                       ),
                       children: [
                         /* @__PURE__ */ jsx9(Lock2, { className: "h-3 w-3" }),
@@ -3799,7 +3800,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     ]
                   }
                 ),
-                showConditions && /* @__PURE__ */ jsxs9("div", { className: "mt-3 space-y-4 rounded-lg border border-border bg-muted/30 p-4", children: [
+                showConditions && /* @__PURE__ */ jsxs9("div", { className: "mt-3 space-y-4 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-high p-4", children: [
                   /* @__PURE__ */ jsxs9("div", { children: [
                     /* @__PURE__ */ jsxs9("label", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5", children: [
                       /* @__PURE__ */ jsx9(Layers3, { className: "h-3.5 w-3.5" }),
@@ -3815,7 +3816,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onClick: () => toggleEnvironment(env.id),
                           className: cn(
                             "rounded-full px-3 py-1 text-xs font-medium border transition-colors",
-                            selected ? "bg-primary/10 border-primary/30 text-primary" : "bg-background border-border text-muted-foreground hover:border-primary/20"
+                            selected ? "bg-primary/10 border-primary/30 text-primary" : "bg-surface-container-low border-[var(--md3-outline-variant)] text-muted-foreground hover:border-primary/20"
                           ),
                           children: env.name || env.id
                         },
@@ -3841,7 +3842,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           placeholder: "Any",
                           min: 0.5,
                           step: 0.5,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       )
                     ] }),
@@ -3862,7 +3863,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           placeholder: "Any",
                           min: 1,
                           step: 1,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       )
                     ] })
@@ -3881,7 +3882,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onChange: (e) => setFormData((p) => ({ ...p, runOrder: e.target.value ? Math.max(0, Number(e.target.value)) : 0 })),
                           min: 0,
                           max: 9999,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       ),
                       /* @__PURE__ */ jsx9("p", { className: "mt-1 text-xs text-muted-foreground", children: "Lower runs first" })
@@ -3899,7 +3900,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onChange: (e) => setFormData((p) => ({ ...p, timeoutSeconds: e.target.value ? Math.max(5, Number(e.target.value)) : 300 })),
                           min: 5,
                           max: 3600,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       )
                     ] })
@@ -3971,7 +3972,7 @@ function StartupScriptsPage({ apiClient, className }) {
                 {
                   type: "button",
                   onClick: () => goToStep("picker"),
-                  className: "inline-flex items-center gap-1.5 rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+                  className: "inline-flex items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-surface-container-high transition-colors",
                   children: [
                     /* @__PURE__ */ jsx9("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "m15 18-6-6 6-6" }) }),
                     "Back"
@@ -3984,7 +3985,7 @@ function StartupScriptsPage({ apiClient, className }) {
                   {
                     type: "button",
                     onClick: () => setIsDialogOpen(false),
-                    className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+                    className: "rounded-lg border border-[var(--md3-outline-variant)] px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors",
                     children: "Cancel"
                   }
                 ),
@@ -4020,7 +4021,7 @@ function StartupScriptsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: () => setDeleteTarget(null),
-            className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+            className: "rounded-lg border border-[var(--md3-outline-variant)] px-4 py-2 text-sm font-medium text-foreground hover:bg-surface-container-high transition-colors",
             children: "Cancel"
           }
         ),
@@ -4036,8 +4037,8 @@ function StartupScriptsPage({ apiClient, className }) {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-lg border border-border bg-card shadow-[var(--shadow-card)]", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "border-b border-border px-6 py-4 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "overflow-hidden rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "border-b border-[var(--md3-outline-variant)] px-6 py-4 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx9("button", { className: "text-xs font-bold uppercase tracking-widest text-foreground", children: "All Scripts" }) }),
         /* @__PURE__ */ jsxs9("span", { className: "text-xs text-muted-foreground font-mono", children: [
           scripts.length,
@@ -4062,11 +4063,11 @@ function StartupScriptsPage({ apiClient, className }) {
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsx9("div", { className: "divide-y divide-border", children: scripts.map((script) => /* @__PURE__ */ jsxs9(
+      ] }) : /* @__PURE__ */ jsx9("div", { className: "divide-y divide-[var(--md3-outline-variant)]", children: scripts.map((script) => /* @__PURE__ */ jsxs9(
         "div",
         {
           className: cn(
-            "group flex items-center gap-4 px-6 py-4 transition-colors hover:bg-muted/30",
+            "group flex items-center gap-4 px-6 py-4 transition-colors hover:bg-surface-container-high",
             !script.enabled && "opacity-60"
           ),
           children: [
@@ -4086,8 +4087,8 @@ function StartupScriptsPage({ apiClient, className }) {
             /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx9("h4", { className: "text-sm font-bold text-foreground truncate", children: script.name }),
-                /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted rounded px-1.5 py-0.5", children: SCRIPT_TYPE_META[script.scriptType ?? "bash"].label }),
-                script.runOrder !== 100 && /* @__PURE__ */ jsxs9("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted rounded px-1.5 py-0.5", children: [
+                /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-mono text-muted-foreground bg-surface-container-high rounded px-1.5 py-0.5", children: SCRIPT_TYPE_META[script.scriptType ?? "bash"].label }),
+                script.runOrder !== 100 && /* @__PURE__ */ jsxs9("span", { className: "text-[10px] font-mono text-muted-foreground bg-surface-container-high rounded px-1.5 py-0.5", children: [
                   "#",
                   script.runOrder
                 ] })
@@ -4095,7 +4096,7 @@ function StartupScriptsPage({ apiClient, className }) {
               script.description && /* @__PURE__ */ jsx9("p", { className: "mt-0.5 text-xs text-muted-foreground truncate", children: script.description }),
               /* @__PURE__ */ jsxs9("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: [
                 script.environments.map((env) => /* @__PURE__ */ jsx9("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary", children: env }, env)),
-                script.injectSecrets.map((s) => /* @__PURE__ */ jsxs9("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex items-center gap-0.5", children: [
+                script.injectSecrets.map((s) => /* @__PURE__ */ jsxs9("span", { className: "rounded-full bg-surface-container-high px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex items-center gap-0.5", children: [
                   /* @__PURE__ */ jsx9(Lock2, { className: "h-2.5 w-2.5" }),
                   s
                 ] }, s)),
@@ -4114,7 +4115,7 @@ function StartupScriptsPage({ apiClient, className }) {
                 {
                   type: "button",
                   onClick: () => openEdit(script),
-                  className: "rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+                  className: "rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-surface-container-high transition-colors",
                   "aria-label": `Edit ${script.name}`,
                   children: /* @__PURE__ */ jsx9(Pencil, { className: "h-4 w-4" })
                 }
@@ -4136,14 +4137,14 @@ function StartupScriptsPage({ apiClient, className }) {
       )) })
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 mb-3", children: [
           /* @__PURE__ */ jsx9("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-[var(--brand-primary,hsl(var(--primary)))] text-[var(--btn-primary-text)]", children: /* @__PURE__ */ jsx9(Play, { className: "h-5 w-5" }) }),
           /* @__PURE__ */ jsx9("h3", { className: "text-sm font-bold text-foreground", children: "How Scripts Run" })
         ] }),
         /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: 'Scripts execute in order after the container starts but before the AI agent. They run as bash scripts with full access to mounted tools (Nix profile) and workspace. Failed scripts abort sandbox creation unless "continue on failure" is enabled.' })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 mb-3", children: [
           /* @__PURE__ */ jsx9("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-[var(--brand-primary,hsl(var(--primary)))] text-[var(--btn-primary-text)]", children: /* @__PURE__ */ jsx9(Shield2, { className: "h-5 w-5" }) }),
           /* @__PURE__ */ jsx9("h3", { className: "text-sm font-bold text-foreground", children: "Security & Secrets" })