@tangle-network/sandbox-ui 0.4.0 → 0.5.0

package/dist/{chunk-MVYFNPAH.js → chunk-ZOZX2U6I.js}

@@ -11,16 +11,16 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-IW2JZCOC.js";
+} from "./chunk-WBQ7VULC.js";
 import {
   Skeleton
-} from "./chunk-FRGMMANX.js";
+} from "./chunk-YYGECNZZ.js";
 import {
   Badge
-} from "./chunk-MXCSSOGH.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   Button
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TSE423UF.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -182,7 +182,7 @@ function SidebarRailFooter({ children, className }) {
 function RailSeparator({ className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-sidebar-border", className) });
 }
-function RailButton({ icon: Icon, label, isActive, badge, onClick, className }) {
+function RailButton({ icon: Icon2, label, isActive, badge, onClick, className }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -199,7 +199,7 @@ function RailButton({ icon: Icon, label, isActive, badge, onClick, className })
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2(Icon, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5" }),
         badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-sidebar-primary text-[10px] font-medium text-white px-1", children: badge > 99 ? "99+" : badge })
       ]
     }
@@ -282,7 +282,7 @@ function ProfileAvatar({
       /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-3", children: [
         /* @__PURE__ */ jsxs(Avatar, { className: "h-12 w-12 shrink-0", children: [
           user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
-          /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-sm bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
+          /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-sm bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]", children: getInitials(user?.name, user?.email) })
         ] }),
         /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-24 mb-1" }),
@@ -307,7 +307,7 @@ function ProfileAvatar({
       ] }) }),
       onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-red-400", onClick: onLogout, children: [
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-[var(--surface-danger-text)]", onClick: onLogout, children: [
           /* @__PURE__ */ jsx2(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
           "Sign Out"
         ] })
@@ -318,37 +318,36 @@ function ProfileAvatar({
 
 // src/dashboard/cluster-status-bar.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function MaterialIcon({ name, className }) {
-  return /* @__PURE__ */ jsx3("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
-}
 function ClusterStatusBar({ items, latency, className }) {
   return /* @__PURE__ */ jsxs2(
     "footer",
     {
       className: cn(
-        "fixed bottom-0 left-0 lg:left-64 right-0 h-10 bg-surface-container-highest/80 backdrop-blur-md border-t border-outline-variant/5 flex items-center justify-between px-6 z-30",
+        "fixed bottom-0 left-0 lg:left-64 right-0 h-9 bg-[var(--depth-1)] border-t border-[var(--border-subtle)] flex items-center justify-between px-6 z-30",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-6 overflow-x-auto whitespace-nowrap", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx3(MaterialIcon, { name: item.icon, className: "text-[14px] text-md3-primary" }),
-          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-on-surface-variant", children: [
+        /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-6 overflow-x-auto whitespace-nowrap", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+          item.icon && /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-muted)] [&_svg]:h-3 [&_svg]:w-3", children: item.icon }),
+          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-[var(--text-muted)]", children: [
             item.label,
-            ": ",
-            /* @__PURE__ */ jsx3("span", { className: cn("text-white", item.valueClass), children: item.value })
+            ":",
+            " ",
+            /* @__PURE__ */ jsx3("span", { className: cn("text-[var(--text-secondary)]", item.valueClass), children: item.value })
           ] })
         ] }, i)) }),
         latency && /* @__PURE__ */ jsxs2("div", { className: "hidden sm:flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-on-surface-variant", children: [
-            "System Latency: ",
-            /* @__PURE__ */ jsx3("span", { className: "text-white", children: latency })
+          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-[var(--text-muted)]", children: [
+            "Latency:",
+            " ",
+            /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-secondary)]", children: latency })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "flex gap-0.5 h-3 items-end", children: [
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1 bg-md3-primary" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2 bg-md3-primary" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1.5 bg-md3-primary" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-3 bg-md3-primary" }),
-            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2.5 bg-md3-primary" })
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1 bg-[var(--brand-cool)]" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2 bg-[var(--brand-cool)]" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-1.5 bg-[var(--brand-cool)]" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-3 bg-[var(--brand-cool)]" }),
+            /* @__PURE__ */ jsx3("div", { className: "w-0.5 h-2.5 bg-[var(--brand-cool)]" })
           ] })
         ] })
       ]
@@ -367,24 +366,24 @@ function CreditBalance({
   className
 }) {
   const [topUpValue, setTopUpValue] = React2.useState("50.00");
-  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-gradient-to-br from-surface-container to-surface-container-high p-8 rounded-xl flex flex-col justify-between border border-md3-primary/10", className), children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-[var(--depth-2)] p-8 rounded-xl flex flex-col justify-between border border-[var(--border-subtle)]", className), children: [
     /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4("h3", { className: "text-lg font-bold text-white tracking-tight mb-1", children: "Available Credits" }),
-      /* @__PURE__ */ jsxs3("div", { className: "text-5xl font-extrabold text-md3-primary tracking-tighter mb-4", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-[var(--text-muted)] uppercase tracking-widest mb-2", children: "Available Credits" }),
+      /* @__PURE__ */ jsxs3("div", { className: "text-5xl font-extrabold text-[var(--brand-cool)] tracking-tighter mb-3", children: [
         "$",
         amount.toFixed(2)
       ] }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-on-surface-variant leading-relaxed", children: description })
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-[var(--text-muted)] leading-relaxed", children: description })
     ] }),
-    onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-4 mt-8", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "bg-surface-container-lowest p-1 rounded-lg flex items-center", children: [
+    onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-3 mt-8", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "bg-[var(--depth-1)] border border-[var(--border-subtle)] p-1 rounded-lg flex items-center", children: [
         /* @__PURE__ */ jsx4(
           "input",
           {
             type: "text",
             value: `$${topUpValue}`,
             onChange: (e) => setTopUpValue(e.target.value.replace(/[^0-9.]/g, "")),
-            className: "bg-transparent border-none text-white font-mono text-lg w-full focus:ring-0 px-4"
+            className: "bg-transparent border-none text-[var(--text-primary)] font-mono text-lg w-full focus:ring-0 px-4 outline-none"
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -392,7 +391,7 @@ function CreditBalance({
           {
             type: "button",
             onClick: () => onTopUp(Number.parseFloat(topUpValue)),
-            className: "bg-md3-primary text-on-primary px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform",
+            className: "bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--accent-text)] px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform hover:bg-[var(--accent-surface-strong)]",
             children: "Top Up"
           }
         )
@@ -405,7 +404,7 @@ function CreditBalance({
             setTopUpValue(String(qa));
             onTopUp(qa);
           },
-          className: "flex-1 py-2 text-[10px] font-mono text-on-surface-variant border border-outline-variant/30 rounded-md hover:bg-surface-variant transition-colors uppercase",
+          className: "flex-1 py-2 text-[10px] font-mono text-[var(--text-muted)] border border-[var(--border-subtle)] rounded-md hover:bg-[var(--depth-3)] hover:text-[var(--text-secondary)] transition-colors uppercase",
           children: [
             "+$",
             qa
@@ -418,77 +417,73 @@ function CreditBalance({
 }
 
 // src/dashboard/invoice-table.tsx
+import { Download, FileText } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function MaterialIcon2({ name, className }) {
-  return /* @__PURE__ */ jsx5("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
-}
 var statusStyle = {
-  paid: "bg-md3-primary/10 text-md3-primary",
-  pending: "bg-yellow-500/10 text-yellow-400",
-  failed: "bg-red-500/10 text-red-400"
+  paid: "bg-[var(--accent-surface-soft)] text-[var(--brand-cool)] border border-[var(--border-accent)]",
+  pending: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border border-[var(--surface-warning-border)]",
+  failed: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border border-[var(--surface-danger-border)]"
 };
 function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMore, className }) {
   return /* @__PURE__ */ jsxs4("section", { className, children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center mb-6 px-2", children: [
-      /* @__PURE__ */ jsx5("h2", { className: "text-2xl font-bold text-white tracking-tight", children: "Invoice History" }),
-      onExportAll && /* @__PURE__ */ jsxs4("button", { type: "button", onClick: onExportAll, className: "text-[10px] font-mono text-md3-primary uppercase tracking-widest flex items-center gap-2 hover:underline", children: [
-        /* @__PURE__ */ jsx5(MaterialIcon2, { name: "download", className: "text-sm" }),
+      /* @__PURE__ */ jsx5("h2", { className: "text-2xl font-bold text-[var(--text-primary)] tracking-tight", children: "Invoice History" }),
+      onExportAll && /* @__PURE__ */ jsxs4("button", { type: "button", onClick: onExportAll, className: "text-[10px] font-mono text-[var(--brand-cool)] uppercase tracking-widest flex items-center gap-2 hover:underline", children: [
+        /* @__PURE__ */ jsx5(Download, { className: "h-3.5 w-3.5" }),
         "Export All"
       ] })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10", children: /* @__PURE__ */ jsxs4("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "bg-surface-container-high", children: [
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Invoice ID" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Date" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Amount" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest", children: "Status" }),
-        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-on-surface-variant uppercase tracking-widest text-right", children: "Action" })
+    /* @__PURE__ */ jsx5("div", { className: "bg-[var(--depth-2)] rounded-xl overflow-hidden border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs4("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Invoice ID" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Date" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Amount" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest", children: "Status" }),
+        /* @__PURE__ */ jsx5("th", { className: "px-6 py-4 font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-widest text-right", children: "Action" })
       ] }) }),
-      /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-outline-variant/5", children: invoices.map((inv) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-surface-container-low/50 transition-colors", children: [
-        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 font-mono text-xs text-white", children: inv.id }),
-        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-sm text-on-surface-variant", children: inv.date }),
-        /* @__PURE__ */ jsxs4("td", { className: "px-6 py-5 text-sm font-bold text-white", children: [
+      /* @__PURE__ */ jsx5("tbody", { className: "divide-y divide-[var(--border-subtle)]", children: invoices.map((inv) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-[var(--depth-3)] transition-colors", children: [
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 font-mono text-xs text-[var(--text-primary)]", children: inv.id }),
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-sm text-[var(--text-secondary)]", children: inv.date }),
+        /* @__PURE__ */ jsxs4("td", { className: "px-6 py-5 text-sm font-bold text-[var(--text-primary)]", children: [
           "$",
           inv.amount.toFixed(2)
         ] }),
         /* @__PURE__ */ jsx5("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsx5("span", { className: cn("px-2 py-1 text-[10px] font-mono rounded uppercase", statusStyle[inv.status] ?? statusStyle.paid), children: inv.status }) }),
-        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-on-surface-variant hover:text-white transition-colors", children: /* @__PURE__ */ jsx5(MaterialIcon2, { name: "description" }) }) })
+        /* @__PURE__ */ jsx5("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors", children: /* @__PURE__ */ jsx5(FileText, { className: "h-4 w-4" }) }) })
       ] }, inv.id)) })
     ] }) }),
-    hasMore && onLoadMore && /* @__PURE__ */ jsx5("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: onLoadMore, className: "px-8 py-2 text-[10px] font-mono text-on-surface-variant border border-outline-variant/30 rounded-full hover:bg-surface-container transition-colors uppercase tracking-widest", children: "Load More History" }) })
+    hasMore && onLoadMore && /* @__PURE__ */ jsx5("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: onLoadMore, className: "px-8 py-2 text-[10px] font-mono text-[var(--text-muted)] border border-[var(--border-subtle)] rounded-full hover:bg-[var(--depth-3)] transition-colors uppercase tracking-widest", children: "Load More History" }) })
   ] });
 }
 
 // src/dashboard/plan-cards.tsx
+import { Check } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function MaterialIcon3({ name, className }) {
-  return /* @__PURE__ */ jsx6("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
-}
 function PlanCards({ plans, className }) {
   return /* @__PURE__ */ jsxs5("section", { className, children: [
-    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-white tracking-tight mb-8 px-2", children: "Subscription Plans" }),
+    /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-8 px-2", children: "Subscription Plans" }),
     /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs5(
       "div",
       {
         className: cn(
-          "p-8 rounded-xl transition-all",
-          plan.popular ? "bg-surface-container-highest border-2 border-md3-primary/30 relative overflow-hidden" : "bg-surface-container-low group hover:bg-surface-container"
+          "p-8 rounded-xl transition-all relative overflow-hidden border",
+          plan.popular ? "bg-[var(--depth-3)] border-[var(--border-accent)]" : "bg-[var(--depth-2)] border-[var(--border-subtle)] hover:bg-[var(--depth-3)] hover:border-[var(--border-default)]"
         ),
         children: [
-          plan.popular && /* @__PURE__ */ jsx6("div", { className: "absolute top-0 right-0 bg-md3-primary px-4 py-1 text-[10px] font-bold text-on-primary uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
+          plan.popular && /* @__PURE__ */ jsx6("div", { className: "absolute top-0 right-0 bg-[var(--accent-surface-soft)] border-l border-b border-[var(--border-accent)] px-4 py-1 text-[10px] font-bold text-[var(--accent-text)] uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
           /* @__PURE__ */ jsxs5("div", { className: "mb-6", children: [
-            /* @__PURE__ */ jsx6("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-md3-primary" : "text-on-surface-variant"), children: plan.name }),
-            /* @__PURE__ */ jsxs5("div", { className: "text-3xl font-bold text-white", children: [
+            /* @__PURE__ */ jsx6("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-[var(--brand-cool)]" : "text-[var(--text-muted)]"), children: plan.name }),
+            /* @__PURE__ */ jsxs5("div", { className: "text-3xl font-bold text-[var(--text-primary)]", children: [
               "$",
               plan.price,
-              /* @__PURE__ */ jsxs5("span", { className: "text-sm font-normal text-on-surface-variant tracking-normal", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "text-sm font-normal text-[var(--text-muted)] tracking-normal", children: [
                 "/",
                 plan.period ?? "mo"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx6("ul", { className: "space-y-3 mb-8 text-sm text-on-surface-variant", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx6(MaterialIcon3, { name: "check", className: "text-sm text-md3-primary" }),
+          /* @__PURE__ */ jsx6("ul", { className: "space-y-3 mb-8 text-sm text-[var(--text-muted)]", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(Check, { className: "h-3.5 w-3.5 text-[var(--brand-cool)] shrink-0" }),
             f.text
           ] }, i)) }),
           /* @__PURE__ */ jsx6(
@@ -497,8 +492,8 @@ function PlanCards({ plans, className }) {
               type: "button",
               onClick: () => plan.onSelect?.(plan.id),
               className: cn(
-                "w-full py-3 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
-                plan.current ? "border border-outline-variant/40 text-on-surface-variant hover:border-md3-primary" : plan.popular ? "bg-gradient-to-r from-md3-primary to-primary-container text-on-primary shadow-lg shadow-md3-primary/20 active:scale-95 transition-transform" : "border border-outline-variant/40 text-on-surface-variant hover:border-md3-primary"
+                "w-full py-3 rounded-lg text-xs font-bold uppercase tracking-widest transition-all border",
+                plan.current ? "border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-default)] hover:text-[var(--text-secondary)]" : plan.popular ? "bg-[var(--accent-surface-soft)] border-[var(--border-accent)] text-[var(--accent-text)] hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-transform" : "border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--border-accent)] hover:text-[var(--brand-cool)]"
               ),
               children: plan.ctaLabel ?? (plan.current ? "Current Plan" : "Upgrade Now")
             }
@@ -512,17 +507,8 @@ function PlanCards({ plans, className }) {
 
 // src/dashboard/dashboard-layout.tsx
 import * as React3 from "react";
+import { Plus, Bell } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-function MaterialIcon4({ name, className }) {
-  return /* @__PURE__ */ jsx7(
-    "span",
-    {
-      className: cn("material-symbols-outlined", className),
-      style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" },
-      children: name
-    }
-  );
-}
 function SettingsIconSmall({ className }) {
   return /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
     /* @__PURE__ */ jsx7("title", { children: "Settings" }),
@@ -585,7 +571,7 @@ function DashboardLayoutInner({
   const activePanel = panels.find((p) => p.mode === mode);
   const sidebarContent = /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsxs6(SidebarRail, { children: [
-      /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-sidebar-accent/80", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }) }),
+      /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-[var(--depth-3)]", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }) }),
       /* @__PURE__ */ jsx7(SidebarRailNav, { children: navItems.map((item, i) => {
         const isMode = modeSet.has(item.id);
         const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
@@ -633,11 +619,11 @@ function DashboardLayoutInner({
       /* @__PURE__ */ jsx7(SidebarPanelContent, { children: activePanel?.content })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-surface text-on-surface", className), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-[var(--depth-1)] text-[var(--text-primary)]", className), children: [
     /* @__PURE__ */ jsxs6(
       "nav",
       {
-        className: "fixed top-0 z-50 bg-slate-950/60 backdrop-blur-xl flex justify-between items-center px-8 h-14 font-sans text-sm tracking-tight transition-[left,width] duration-200 ease-in-out",
+        className: "fixed top-0 z-50 bg-[var(--depth-2)] border-b border-[var(--border-subtle)] flex justify-between items-center px-8 h-14 font-sans text-sm tracking-tight transition-[left,width] duration-200 ease-in-out",
         style: {
           left: hidden ? 0 : contentMargin,
           width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
@@ -650,7 +636,7 @@ function DashboardLayoutInner({
               to: link.href,
               className: cn(
                 "transition-all duration-300 px-2 py-1 rounded",
-                activeTopNavHref === link.href ? "text-white border-b-2 border-violet-500 pb-1" : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
+                activeTopNavHref === link.href ? "text-[var(--text-primary)] border-b-2 border-[var(--brand-cool)] pb-1" : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--depth-3)]"
               ),
               children: link.label
             },
@@ -662,21 +648,21 @@ function DashboardLayoutInner({
               {
                 type: "button",
                 onClick: onNewSandbox,
-                className: "hidden md:flex items-center gap-2 bg-md3-primary text-on-primary px-4 py-2 rounded-lg font-bold hover:shadow-[0_0_15px_rgba(209,188,255,0.4)] transition-all active:scale-95 text-xs",
+                className: "hidden md:flex items-center gap-2 bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--accent-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--accent-surface-strong)] transition-all active:scale-95 text-xs",
                 children: [
-                  /* @__PURE__ */ jsx7(MaterialIcon4, { name: "add", className: "text-sm" }),
+                  /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" }),
                   "New Sandbox"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx7(MaterialIcon4, { name: "notifications" }) })
+            /* @__PURE__ */ jsx7("button", { type: "button", className: "text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors p-2 rounded-lg hover:bg-[var(--depth-3)]", children: /* @__PURE__ */ jsx7(Bell, { className: "h-4 w-4" }) })
           ] }),
           /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
               onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-              className: "rounded-md p-2 hover:bg-white/5 lg:hidden",
+              className: "rounded-md p-2 hover:bg-[var(--depth-3)] lg:hidden",
               "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
               "aria-expanded": mobileMenuOpen,
               children: mobileMenuOpen ? /* @__PURE__ */ jsx7(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx7(MenuIcon, { className: "h-6 w-6" })
@@ -690,7 +676,7 @@ function DashboardLayoutInner({
       "aside",
       {
         className: cn(
-          "fixed top-14 bottom-0 left-0 z-30 flex bg-sidebar backdrop-blur-xl transition-transform duration-200 lg:hidden",
+          "fixed top-14 bottom-0 left-0 z-30 flex bg-[var(--depth-1)] transition-transform duration-200 lg:hidden",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
         style: { width: SIDEBAR_TOTAL_WIDTH },
@@ -709,30 +695,26 @@ function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }) {
 
 // src/dashboard/resource-meter.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function getColorByUsage(percent) {
-  if (percent >= 90) return "from-red-500 to-red-300";
-  if (percent >= 70) return "from-yellow-500 to-yellow-300";
-  if (percent >= 40) return "from-blue-500 to-blue-300";
-  return "from-green-500 to-green-300";
-}
-function MaterialIcon5({ name, className }) {
-  return /* @__PURE__ */ jsx8("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+function getBarColor(percent) {
+  if (percent >= 90) return "bg-[var(--code-error)]";
+  if (percent >= 70) return "bg-[var(--surface-warning-text)]";
+  return "bg-[var(--brand-cool)]";
 }
 function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
   const percent = max > 0 ? Math.min(value / max * 100, 100) : 0;
-  const gradient = getColorByUsage(percent);
-  return /* @__PURE__ */ jsxs7("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-[11px] font-bold font-mono text-on-surface uppercase tracking-tight", children: [
-      /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1", children: [
-        icon && /* @__PURE__ */ jsx8(MaterialIcon5, { name: icon, className: "text-xs" }),
+  const barColor = getBarColor(percent);
+  return /* @__PURE__ */ jsxs7("div", { className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between text-[10px] font-mono text-[var(--text-muted)] uppercase tracking-wide", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1 text-[var(--text-secondary)]", children: [
+        icon,
         label
       ] }),
-      /* @__PURE__ */ jsx8("span", { className: "text-primary-fixed-dim", children: unit ? `${value}${unit} / ${max}${unit}` : `${Math.round(percent)}%` })
+      /* @__PURE__ */ jsx8("span", { className: "tabular-nums", children: unit ? `${value}${unit} / ${max}${unit}` : `${Math.round(percent)}%` })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8("div", { className: "h-1.5 w-full bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx8(
       "div",
       {
-        className: cn("h-full bg-gradient-to-r rounded-full transition-all duration-500", gradient),
+        className: cn("h-full rounded-full transition-all duration-500", barColor),
         style: { width: `${percent}%` }
       }
     ) })
@@ -740,34 +722,18 @@ function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
 }
 
 // src/dashboard/sandbox-card.tsx
+import { Cpu, Database, Plus as Plus2, Terminal, Power, ExternalLink, RefreshCw } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function MaterialIcon6({ name, className }) {
-  return /* @__PURE__ */ jsx9("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
-}
 var statusConfig = {
-  running: { color: "text-green-400", bgColor: "bg-green-500/10", borderColor: "border-green-500/20", dotClass: "bg-green-400 animate-pulse", label: "Running" },
-  hibernating: { color: "text-blue-400", bgColor: "bg-blue-500/10", borderColor: "border-blue-500/20", dotClass: "bg-slate-500", label: "Hibernating" },
-  provisioning: { color: "text-orange-400", bgColor: "bg-orange-500/10", borderColor: "border-orange-500/20", dotClass: "bg-orange-500 animate-ping", label: "Provisioning" },
-  stopped: { color: "text-slate-400", bgColor: "bg-slate-500/10", borderColor: "border-slate-500/20", dotClass: "bg-slate-500", label: "Stopped" },
-  failed: { color: "text-red-400", bgColor: "bg-red-500/10", borderColor: "border-red-500/20", dotClass: "bg-red-500", label: "Failed" },
-  archived: { color: "text-slate-400", bgColor: "bg-slate-500/10", borderColor: "border-slate-500/20", dotClass: "bg-slate-600", label: "Archived" }
-};
-var glowMap = {
-  node: "shadow-[0_0_20px_-5px_rgba(34,197,94,0.15)] border border-green-500/20",
-  python: "shadow-[0_0_20px_-5px_rgba(59,130,246,0.15)] border border-blue-500/20",
-  ubuntu: "shadow-[0_0_20px_-5px_rgba(234,88,12,0.15)] border border-orange-500/20"
+  running: { color: "text-[var(--surface-success-text)]", bg: "bg-[var(--surface-success-bg)]", border: "border-[var(--surface-success-border)]", dotClass: "bg-[var(--surface-success-text)] animate-pulse", label: "Running" },
+  hibernating: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--text-muted)]", label: "Hibernating" },
+  provisioning: { color: "text-[var(--brand-cool)]", bg: "bg-[var(--accent-surface-soft)]", border: "border-[var(--border-accent)]", dotClass: "bg-[var(--brand-cool)] animate-pulse", label: "Provisioning" },
+  stopped: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--text-muted)]", label: "Stopped" },
+  failed: { color: "text-[var(--surface-danger-text)]", bg: "bg-[var(--surface-danger-bg)]", border: "border-[var(--surface-danger-border)]", dotClass: "bg-[var(--surface-danger-text)]", label: "Failed" },
+  archived: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--border-default)]", label: "Archived" }
 };
-function getGlow(image) {
-  if (!image) return "";
-  const lower = image.toLowerCase();
-  for (const [key, cls] of Object.entries(glowMap)) {
-    if (lower.includes(key)) return cls;
-  }
-  return "";
-}
 function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }) {
   const status = statusConfig[sandbox.status] ?? statusConfig.stopped;
-  const glow = getGlow(sandbox.image);
   const isActive = sandbox.status === "running";
   const isHibernating = sandbox.status === "hibernating";
   const isProvisioning = sandbox.status === "provisioning";
@@ -776,54 +742,62 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
     "div",
     {
       className: cn(
-        "bg-surface-container-low rounded-xl p-6 relative overflow-hidden group hover:bg-surface-container transition-all duration-300",
-        glow,
-        isArchived && "opacity-60 hover:opacity-100 bg-surface-container-lowest",
+        "bg-[var(--depth-2)] rounded-xl p-5 relative overflow-hidden group hover:bg-[var(--depth-3)] transition-all duration-300 border border-[var(--border-subtle)] hover:border-[var(--border-default)]",
+        isActive && "border-[var(--border-accent)]",
+        isArchived && "opacity-60 hover:opacity-100",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9("div", { className: "absolute top-0 right-0 p-4", children: /* @__PURE__ */ jsxs8("span", { className: cn("flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase border", status.bgColor, status.color, status.borderColor), children: [
-          /* @__PURE__ */ jsx9("span", { className: cn("w-2 h-2 rounded-full", status.dotClass) }),
+        /* @__PURE__ */ jsx9("div", { className: "absolute top-0 right-0 p-4", children: /* @__PURE__ */ jsxs8("span", { className: cn(
+          "flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold tracking-wider uppercase border",
+          status.bg,
+          status.color,
+          status.border
+        ), children: [
+          /* @__PURE__ */ jsx9("span", { className: cn("w-1.5 h-1.5 rounded-full", status.dotClass) }),
           status.label
         ] }) }),
-        /* @__PURE__ */ jsx9("div", { className: "mb-6", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mb-2", children: [
-          sandbox.imageIcon && /* @__PURE__ */ jsx9("div", { className: "w-10 h-10 rounded-lg flex items-center justify-center bg-surface-container-high", children: sandbox.imageIcon }),
+        /* @__PURE__ */ jsx9("div", { className: "mb-5 pr-24", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mb-1", children: [
+          sandbox.imageIcon && /* @__PURE__ */ jsx9("div", { className: "w-9 h-9 rounded-lg flex items-center justify-center bg-[var(--depth-3)] border border-[var(--border-subtle)] shrink-0", children: sandbox.imageIcon }),
           /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx9("h3", { className: "text-xl font-bold text-white group-hover:text-md3-primary transition-colors truncate", children: sandbox.name }),
-            sandbox.nodeId && /* @__PURE__ */ jsx9("p", { className: "text-on-surface-variant font-mono text-xs truncate", children: sandbox.nodeId })
+            /* @__PURE__ */ jsx9("h3", { className: "text-base font-bold text-[var(--text-primary)] group-hover:text-[var(--brand-cool)] transition-colors truncate leading-tight", children: sandbox.name }),
+            sandbox.nodeId && /* @__PURE__ */ jsx9("p", { className: "text-[var(--text-muted)] font-mono text-[10px] truncate mt-0.5", children: sandbox.nodeId })
           ] })
         ] }) }),
-        isProvisioning ? /* @__PURE__ */ jsxs8("div", { className: "mb-8 mt-10", children: [
-          /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-bold font-mono text-orange-400 mb-3 uppercase text-center animate-pulse tracking-widest", children: sandbox.provisioningMessage ?? "Initializing..." }),
-          /* @__PURE__ */ jsx9("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx9(
+        isProvisioning ? /* @__PURE__ */ jsxs8("div", { className: "mb-5 mt-2", children: [
+          /* @__PURE__ */ jsxs8("p", { className: "text-[10px] font-bold font-mono text-[var(--brand-cool)] mb-2 uppercase tracking-widest flex items-center gap-2 animate-pulse", children: [
+            /* @__PURE__ */ jsx9(RefreshCw, { className: "h-3 w-3 animate-spin" }),
+            sandbox.provisioningMessage ?? "Initializing..."
+          ] }),
+          /* @__PURE__ */ jsx9("div", { className: "h-1.5 w-full bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx9(
             "div",
             {
-              className: "h-full bg-gradient-to-r from-orange-600 via-orange-400 to-orange-300 transition-all duration-500",
+              className: "h-full bg-[var(--brand-cool)] transition-all duration-500",
               style: { width: `${sandbox.provisioningPercent ?? 50}%` }
             }
           ) })
-        ] }) : !isArchived ? /* @__PURE__ */ jsxs8("div", { className: cn("space-y-5 mb-8", !isActive && "opacity-40"), children: [
-          /* @__PURE__ */ jsx9(ResourceMeter, { label: "CPU Usage", icon: "memory", value: sandbox.cpuPercent ?? 0 }),
+        ] }) : !isArchived ? /* @__PURE__ */ jsxs8("div", { className: cn("space-y-4 mb-5", !isActive && "opacity-35"), children: [
+          /* @__PURE__ */ jsx9(ResourceMeter, { label: "CPU", icon: /* @__PURE__ */ jsx9(Cpu, { className: "h-3 w-3" }), value: sandbox.cpuPercent ?? 0 }),
           /* @__PURE__ */ jsx9(
             ResourceMeter,
             {
-              label: "RAM Usage",
-              icon: "database",
+              label: "RAM",
+              icon: /* @__PURE__ */ jsx9(Database, { className: "h-3 w-3" }),
               value: sandbox.ramUsed ?? 0,
               max: sandbox.ramTotal ?? 1,
               unit: "GB"
             }
           )
-        ] }) : /* @__PURE__ */ jsx9("div", { className: "mb-6", children: sandbox.archivedAt && /* @__PURE__ */ jsx9("p", { className: "text-slate-500 font-mono text-[10px]", children: sandbox.archivedAt }) }),
-        isActive && /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-2 gap-3", children: [
+        ] }) : /* @__PURE__ */ jsx9("div", { className: "mb-4", children: sandbox.archivedAt && /* @__PURE__ */ jsx9("p", { className: "text-[var(--text-muted)] font-mono text-[10px]", children: sandbox.archivedAt }) }),
+        isActive && /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
               onClick: () => onOpenIDE?.(sandbox.id),
-              className: "flex items-center justify-center gap-2 py-2.5 bg-surface-container-high hover:bg-md3-primary hover:text-on-primary rounded-lg transition-all duration-300 text-xs font-bold shadow-sm",
+              className: "flex items-center justify-center gap-2 py-2 bg-[var(--accent-surface-soft)] hover:bg-[var(--accent-surface-strong)] text-[var(--accent-text)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-accent)]",
               children: [
-                /* @__PURE__ */ jsx9(MaterialIcon6, { name: "open_in_new", className: "text-sm" }),
+                /* @__PURE__ */ jsx9(ExternalLink, { className: "h-3.5 w-3.5" }),
                 "Open IDE"
               ]
             }
@@ -833,9 +807,9 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
             {
               type: "button",
               onClick: () => onOpenTerminal?.(sandbox.id),
-              className: "flex items-center justify-center gap-2 py-2.5 bg-surface-container-high hover:bg-slate-700 rounded-lg transition-all text-xs font-bold border border-outline-variant/10",
+              className: "flex items-center justify-center gap-2 py-2 bg-[var(--depth-3)] hover:bg-[var(--depth-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-subtle)]",
               children: [
-                /* @__PURE__ */ jsx9(MaterialIcon6, { name: "terminal", className: "text-sm" }),
+                /* @__PURE__ */ jsx9(Terminal, { className: "h-3.5 w-3.5" }),
                 "Terminal"
               ]
             }
@@ -846,9 +820,9 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
           {
             type: "button",
             onClick: () => onWake?.(sandbox.id),
-            className: "w-full flex items-center justify-center gap-2 py-3 bg-md3-primary/10 text-md3-primary hover:bg-md3-primary hover:text-on-primary rounded-lg transition-all duration-300 text-xs font-black",
+            className: "w-full flex items-center justify-center gap-2 py-2.5 bg-[var(--accent-surface-soft)] text-[var(--brand-cool)] hover:bg-[var(--accent-surface-strong)] rounded-lg transition-all text-xs font-bold border border-[var(--border-accent)]",
             children: [
-              /* @__PURE__ */ jsx9(MaterialIcon6, { name: "power_settings_new", className: "text-sm" }),
+              /* @__PURE__ */ jsx9(Power, { className: "h-3.5 w-3.5" }),
               "Wake Sandbox"
             ]
           }
@@ -858,7 +832,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
           {
             type: "button",
             disabled: true,
-            className: "w-full flex items-center justify-center gap-2 py-3 bg-surface-container-high text-on-surface-variant cursor-not-allowed rounded-lg text-xs font-bold border border-outline-variant/10",
+            className: "w-full flex items-center justify-center gap-2 py-2.5 bg-[var(--depth-3)] text-[var(--text-muted)] cursor-not-allowed rounded-lg text-xs font-semibold border border-[var(--border-subtle)]",
             children: "Please Wait..."
           }
         ),
@@ -867,7 +841,7 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
           {
             type: "button",
             onClick: () => onRestore?.(sandbox.id),
-            className: "w-full py-2 bg-slate-800/50 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg transition-all text-xs font-bold border border-slate-700/50",
+            className: "w-full py-2 bg-[var(--depth-3)] hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-subtle)]",
             children: "Restore Sandbox"
           }
         )
@@ -882,41 +856,39 @@ function NewSandboxCard({ onClick, className }) {
       type: "button",
       onClick,
       className: cn(
-        "border-2 border-dashed border-outline-variant/20 rounded-xl p-6 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-md3-primary/40 hover:bg-md3-primary/5 transition-all duration-300 w-full",
+        "border-2 border-dashed border-[var(--border-subtle)] rounded-xl p-6 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] transition-all duration-300 w-full min-h-[200px]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9("div", { className: "w-14 h-14 rounded-full bg-surface-container flex items-center justify-center mb-4 group-hover:bg-md3-primary/20 group-hover:text-md3-primary transition-all group-active:scale-90", children: /* @__PURE__ */ jsx9(MaterialIcon6, { name: "add_box", className: "text-3xl" }) }),
-        /* @__PURE__ */ jsx9("h4", { className: "font-bold text-slate-400 group-hover:text-white mb-1", children: "New Environment" }),
-        /* @__PURE__ */ jsx9("p", { className: "text-xs text-slate-600", children: "Instantiate a fresh compute node" })
+        /* @__PURE__ */ jsx9("div", { className: "w-12 h-12 rounded-full bg-[var(--depth-3)] border border-[var(--border-subtle)] flex items-center justify-center mb-4 group-hover:bg-[var(--accent-surface-strong)] group-hover:border-[var(--border-accent)] group-hover:text-[var(--accent-text)] text-[var(--text-muted)] transition-all group-active:scale-90", children: /* @__PURE__ */ jsx9(Plus2, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ jsx9("h4", { className: "font-bold text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] mb-1 text-sm transition-colors", children: "New Environment" }),
+        /* @__PURE__ */ jsx9("p", { className: "text-xs text-[var(--text-muted)]", children: "Instantiate a fresh compute node" })
       ]
     }
   );
 }
 
 // src/dashboard/sandbox-table.tsx
+import { Terminal as Terminal2, Code2, Key, MoreVertical, RefreshCw as RefreshCw2, ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-function MaterialIcon7({ name, className }) {
-  return /* @__PURE__ */ jsx10("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
-}
 var statusColors = {
-  running: { dot: "bg-green-400 animate-pulse", text: "text-green-400", bar: "bg-green-400" },
-  hibernating: { dot: "bg-slate-500", text: "text-on-surface-variant", bar: "bg-slate-500" },
-  provisioning: { dot: "bg-secondary-fixed animate-pulse", text: "text-secondary-fixed", bar: "bg-secondary-fixed" },
-  stopped: { dot: "bg-slate-500", text: "text-slate-400", bar: "bg-slate-500" },
-  failed: { dot: "bg-red-500", text: "text-red-400", bar: "bg-red-500" },
-  archived: { dot: "bg-slate-600", text: "text-slate-500", bar: "bg-slate-600" }
+  running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
+  hibernating: { dot: "bg-[var(--text-muted)]", text: "text-[var(--text-muted)]", bar: "bg-[var(--text-muted)]" },
+  provisioning: { dot: "bg-[var(--brand-cool)] animate-pulse", text: "text-[var(--brand-cool)]", bar: "bg-[var(--brand-cool)]" },
+  stopped: { dot: "bg-[var(--text-muted)]", text: "text-[var(--text-secondary)]", bar: "bg-[var(--text-muted)]" },
+  failed: { dot: "bg-[var(--code-error)]", text: "text-[var(--code-error)]", bar: "bg-[var(--code-error)]" },
+  archived: { dot: "bg-[var(--border-default)]", text: "text-[var(--text-muted)]", bar: "bg-[var(--border-default)]" }
 };
 function MiniMeter({ label, percent, className }) {
   return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-1", className), children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-[10px] font-mono text-on-surface-variant", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-[10px] font-mono text-[var(--text-muted)]", children: [
       /* @__PURE__ */ jsx10("span", { className: "font-bold", children: label }),
-      /* @__PURE__ */ jsxs9("span", { className: "text-primary-fixed", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "text-[var(--brand-cool)]", children: [
         percent,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "h-full bg-md3-primary rounded-full", style: { width: `${percent}%` } }) })
+    /* @__PURE__ */ jsx10("div", { className: "h-1.5 w-full bg-[var(--depth-1)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "h-full bg-[var(--brand-cool)] rounded-full", style: { width: `${percent}%` } }) })
   ] });
 }
 function SandboxTable({
@@ -935,37 +907,37 @@ function SandboxTable({
   const totalCount = total ?? sandboxes.length;
   const totalPages = Math.ceil(totalCount / pageSize);
   return /* @__PURE__ */ jsxs9("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx10("div", { className: "w-full bg-surface-container-low rounded-2xl overflow-hidden shadow-2xl border border-outline-variant/10", children: /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-left border-collapse", children: [
-      /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "bg-surface-container-high/50 border-b border-outline-variant/10", children: [
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Status" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Sandbox Name" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Environment" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Resources" }),
-        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider text-right", children: "Actions" })
+    /* @__PURE__ */ jsx10("div", { className: "w-full bg-[var(--depth-2)] rounded-2xl overflow-hidden border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Sandbox Name" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Environment" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider", children: "Resources" }),
+        /* @__PURE__ */ jsx10("th", { className: "px-6 py-4 text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider text-right", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx10("tbody", { className: "divide-y divide-outline-variant/5", children: sandboxes.map((sb) => {
+      /* @__PURE__ */ jsx10("tbody", { className: "divide-y divide-[var(--border-subtle)]", children: sandboxes.map((sb) => {
         const sc = statusColors[sb.status] ?? statusColors.stopped;
         const isActive = sb.status === "running";
         const isHibernating = sb.status === "hibernating";
         const isProvisioning = sb.status === "provisioning";
-        return /* @__PURE__ */ jsxs9("tr", { className: "hover:bg-surface-container-highest/20 transition-colors group relative", children: [
+        return /* @__PURE__ */ jsxs9("tr", { className: "hover:bg-[var(--depth-3)] transition-colors group relative", children: [
           /* @__PURE__ */ jsx10("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx10("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
             /* @__PURE__ */ jsx10("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
           ] }) }),
           /* @__PURE__ */ jsx10("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx10("span", { className: "text-sm font-bold text-white group-hover:text-md3-primary transition-colors", children: sb.name }),
-            sb.nodeId && /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-mono text-on-surface-variant", children: sb.nodeId })
+            /* @__PURE__ */ jsx10("span", { className: "text-sm font-bold text-[var(--text-primary)] group-hover:text-[var(--brand-cool)] transition-colors", children: sb.name }),
+            sb.nodeId && /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-mono text-[var(--text-muted)]", children: sb.nodeId })
           ] }) }),
           /* @__PURE__ */ jsx10("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-            sb.imageIcon && /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center", children: sb.imageIcon }),
-            sb.image && /* @__PURE__ */ jsx10("span", { className: "text-xs font-bold text-white", children: sb.image })
+            sb.imageIcon && /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-lg bg-[var(--depth-3)] flex items-center justify-center", children: sb.imageIcon }),
+            sb.image && /* @__PURE__ */ jsx10("span", { className: "text-xs font-bold text-[var(--text-primary)]", children: sb.image })
           ] }) }),
           /* @__PURE__ */ jsx10("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs9("div", { className: "space-y-3 w-48", children: [
             /* @__PURE__ */ jsx10(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
             /* @__PURE__ */ jsx10(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
-          ] }) : isProvisioning ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-md3-primary/80 italic text-[10px] font-bold", children: [
-            /* @__PURE__ */ jsx10(MaterialIcon7, { name: "refresh", className: "text-[14px] animate-spin" }),
+          ] }) : isProvisioning ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-[var(--brand-cool)] italic text-[10px] font-bold", children: [
+            /* @__PURE__ */ jsx10(RefreshCw2, { className: "h-3.5 w-3.5 animate-spin" }),
             sb.provisioningMessage ?? "Allocating nodes..."
           ] }) : isHibernating ? /* @__PURE__ */ jsxs9("div", { className: "space-y-3 w-48 opacity-30", children: [
             /* @__PURE__ */ jsx10(MiniMeter, { label: "CPU", percent: 0 }),
@@ -973,17 +945,17 @@ function SandboxTable({
           ] }) : null }),
           /* @__PURE__ */ jsx10("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-end gap-1", children: [
             isActive && /* @__PURE__ */ jsxs9(Fragment4, { children: [
-              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "terminal", className: "text-[20px]" }) }),
-              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "tab", className: "text-[20px]" }) }),
-              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "vpn_key", className: "text-[20px]" }) })
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx10(Code2, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx10(Terminal2, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx10(Key, { className: "h-4 w-4" }) })
             ] }),
-            isHibernating && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-md3-primary/30 text-md3-primary text-[10px] font-bold uppercase tracking-wider hover:bg-md3-primary/10 active:scale-95 transition-all", children: "Wake Up" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onMore?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "more_vert", className: "text-[20px]" }) })
+            isHibernating && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-[var(--border-accent)] text-[var(--brand-cool)] text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", children: "Wake Up" }),
+            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onMore?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", children: /* @__PURE__ */ jsx10(MoreVertical, { className: "h-4 w-4" }) })
           ] }) })
         ] }, sb.id);
       }) })
     ] }) }) }),
-    totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-on-surface-variant text-xs font-medium gap-4", children: [
+    totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-[var(--text-muted)] text-xs font-medium gap-4", children: [
       /* @__PURE__ */ jsxs9("p", { children: [
         "Showing ",
         sandboxes.length,
@@ -992,7 +964,7 @@ function SandboxTable({
         " active sandboxes"
       ] }),
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "chevron_left", className: "text-[18px]" }) }),
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-[var(--border-subtle)] hover:bg-[var(--depth-3)] transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "h-4 w-4" }) }),
         Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx10(
           "button",
           {
@@ -1000,63 +972,95 @@ function SandboxTable({
             onClick: () => onPageChange?.(p),
             className: cn(
               "px-3 py-1 rounded-lg transition-colors",
-              p === page ? "bg-md3-primary/10 text-md3-primary border border-md3-primary/20" : "hover:bg-surface-container-high"
+              p === page ? "bg-[var(--accent-surface-soft)] text-[var(--brand-cool)] border border-[var(--border-accent)]" : "hover:bg-[var(--depth-3)]"
             ),
             children: p
           },
           p
         )),
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(MaterialIcon7, { name: "chevron_right", className: "text-[18px]" }) })
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-[var(--border-subtle)] hover:bg-[var(--depth-3)] transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx10(ChevronRight, { className: "h-4 w-4" }) })
       ] })
     ] })
   ] });
 }
 
 // src/dashboard/backend-selector.tsx
+import { ChevronDown } from "lucide-react";
+import * as Select from "@radix-ui/react-select";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function BackendSelector({
   backends,
   selected,
   onChange,
-  label = "Models",
-  hint,
-  multiSelect = true,
+  label = "Model",
+  placeholder = "Select a model",
   className
 }) {
-  const toggle = (type) => {
-    if (multiSelect) {
-      onChange(
-        selected.includes(type) ? selected.filter((b) => b !== type) : [...selected, type]
-      );
-    } else {
-      onChange([type]);
-    }
-  };
-  return /* @__PURE__ */ jsxs10("div", { className, children: [
-    /* @__PURE__ */ jsxs10("label", { className: "mb-2 block font-medium text-sm", children: [
-      label,
-      multiSelect && /* @__PURE__ */ jsx11("span", { className: "ml-2 font-normal text-muted-foreground", children: "(select multiple to compare)" })
-    ] }),
-    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-2", children: backends.map((backend) => {
-      const isSelected = selected.includes(backend.type);
-      return /* @__PURE__ */ jsx11(
-        "button",
+  const current = backends.find((b) => b.type === selected);
+  return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-1.5", className), children: [
+    label && /* @__PURE__ */ jsx11("label", { className: "block text-xs font-medium text-[var(--text-muted)] uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs10(Select.Root, { value: selected, onValueChange: onChange, children: [
+      /* @__PURE__ */ jsxs10(
+        Select.Trigger,
         {
-          type: "button",
-          onClick: () => toggle(backend.type),
-          className: `rounded-lg border px-3 py-2 text-sm transition-colors ${isSelected ? "border-blue-500 bg-blue-500/10 text-blue-400" : "border-border bg-background text-muted-foreground hover:border-muted-foreground/50"}`,
-          title: backend.description,
-          children: backend.label
-        },
-        backend.type
-      );
-    }) }),
-    multiSelect && selected.length > 1 && /* @__PURE__ */ jsx11("p", { className: "mt-2 text-muted-foreground text-xs", children: hint || `Will run on ${selected.length} variants in parallel for comparison` })
+          className: cn(
+            "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
+            "border border-[var(--border-default)] bg-[var(--bg-card)]",
+            "px-3 py-2.5 text-sm text-left",
+            "transition-colors duration-[var(--transition-fast)]",
+            "hover:border-[var(--border-hover)] hover:bg-[var(--bg-hover)]/30",
+            "focus:outline-none focus:border-[var(--border-accent)]",
+            "data-[state=open]:border-[var(--border-accent)] data-[state=open]:bg-[var(--bg-hover)]/30"
+          ),
+          children: [
+            /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: current ? /* @__PURE__ */ jsxs10("div", { children: [
+              /* @__PURE__ */ jsx11("span", { className: "font-medium text-[var(--text-primary)]", children: current.label }),
+              current.description && /* @__PURE__ */ jsx11("span", { className: "ml-2 text-xs text-[var(--text-muted)]", children: current.description })
+            ] }) : /* @__PURE__ */ jsx11("span", { className: "text-[var(--text-muted)]", children: placeholder }) }),
+            /* @__PURE__ */ jsx11(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(ChevronDown, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)] transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx11(Select.Portal, { children: /* @__PURE__ */ jsx11(
+        Select.Content,
+        {
+          position: "popper",
+          sideOffset: 4,
+          className: cn(
+            "z-50 w-[var(--radix-select-trigger-width)] overflow-hidden",
+            "rounded-[var(--radius-md)] border border-[var(--border-default)]",
+            "bg-[var(--bg-card)] shadow-[var(--shadow-dropdown)]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-1"
+          ),
+          children: /* @__PURE__ */ jsx11(Select.Viewport, { className: "p-1", children: backends.map((backend) => /* @__PURE__ */ jsxs10(
+            Select.Item,
+            {
+              value: backend.type,
+              className: cn(
+                "relative flex cursor-pointer select-none flex-col rounded-[var(--radius-sm)]",
+                "px-3 py-2.5 text-sm outline-none",
+                "transition-colors duration-[var(--transition-fast)]",
+                "hover:bg-[var(--bg-hover)]/50 focus:bg-[var(--bg-hover)]/50",
+                "data-[state=checked]:bg-[var(--accent-surface-soft)] data-[state=checked]:text-[var(--brand-primary)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx11(Select.ItemText, { children: /* @__PURE__ */ jsx11("span", { className: "font-medium", children: backend.label }) }),
+                backend.description && /* @__PURE__ */ jsx11("span", { className: "mt-0.5 text-xs text-[var(--text-muted)] data-[state=checked]:text-[var(--accent-text)]", children: backend.description })
+              ]
+            },
+            backend.type
+          )) })
+        }
+      ) })
+    ] })
   ] });
 }
 
 // src/dashboard/profile-selector.tsx
-import { Check, ChevronDown, Plus, Settings } from "lucide-react";
+import { Check as Check2, ChevronDown as ChevronDown2, Plus as Plus3, Settings } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
@@ -1077,7 +1081,7 @@ function ProfileSelector({
     /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
       /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
         /* @__PURE__ */ jsx12("span", { className: "truncate", children: selected ? selected.name : placeholder }),
-        /* @__PURE__ */ jsx12(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+        /* @__PURE__ */ jsx12(ChevronDown2, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
       ] }) }),
       /* @__PURE__ */ jsxs11(DropdownMenuContent, { className: "w-[300px]", align: "start", children: [
         /* @__PURE__ */ jsxs11(
@@ -1087,7 +1091,7 @@ function ProfileSelector({
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsx12("span", { children: placeholder }),
-              !selectedId && /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4 text-green-400" })
+              !selectedId && /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
             ]
           }
         ),
@@ -1108,7 +1112,7 @@ function ProfileSelector({
                       profile.extends
                     ] })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4 text-green-400" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
                 ] }),
                 profile.description && /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
               ]
@@ -1130,7 +1134,7 @@ function ProfileSelector({
                     /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
                     profile.model && /* @__PURE__ */ jsx12(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check, { className: "h-4 w-4 text-green-400" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
                 ] }),
                 profile.description && /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
                 showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
@@ -1159,9 +1163,9 @@ function ProfileSelector({
             DropdownMenuItem,
             {
               onClick: onCreateClick,
-              className: "text-blue-400",
+              className: "text-[var(--surface-info-text)]",
               children: [
-                /* @__PURE__ */ jsx12(Plus, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx12(Plus3, { className: "mr-2 h-4 w-4" }),
                 "Create New Profile"
               ]
             }
@@ -1210,8 +1214,8 @@ function ProfileComparison({
           children: [
             /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
-              isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border-0 bg-green-500/10 text-green-400 text-xs", children: "Best Success" }),
-              isFastest && !isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Fastest" })
+              isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] text-xs", children: "Best Success" }),
+              isFastest && !isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Fastest" })
             ] }),
             /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 text-sm", children: [
               /* @__PURE__ */ jsxs11("span", { children: [
@@ -1220,7 +1224,7 @@ function ProfileComparison({
                 /* @__PURE__ */ jsxs11(
                   "span",
                   {
-                    className: (profile.metrics?.success_rate ?? 0) >= 80 ? "text-green-400" : (profile.metrics?.success_rate ?? 0) >= 50 ? "text-yellow-400" : "text-red-400",
+                    className: (profile.metrics?.success_rate ?? 0) >= 80 ? "text-[var(--surface-success-text)]" : (profile.metrics?.success_rate ?? 0) >= 50 ? "text-[var(--surface-warning-text)]" : "text-[var(--surface-danger-text)]",
                     children: [
                       profile.metrics?.success_rate.toFixed(0),
                       "%"
@@ -1249,10 +1253,10 @@ function ProfileComparison({
 
 // src/dashboard/variant-list.tsx
 import {
-  Check as Check2,
+  Check as Check3,
   CheckCircle2,
   Clock,
-  ExternalLink,
+  ExternalLink as ExternalLink2,
   Loader2,
   Timer,
   X,
@@ -1262,64 +1266,74 @@ import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var statusConfig2 = {
   pending: {
     icon: Clock,
-    color: "text-yellow-400",
-    bg: "bg-yellow-500/10",
+    color: "text-[var(--surface-warning-text)]",
+    bg: "bg-[var(--surface-warning-bg)]",
+    border: "border-[var(--surface-warning-border)]",
     label: "Pending",
     animate: false
   },
   running: {
     icon: Loader2,
-    color: "text-blue-400",
-    bg: "bg-blue-500/10",
+    color: "text-[var(--brand-cool)]",
+    bg: "bg-[var(--accent-surface-soft)]",
+    border: "border-[var(--border-accent)]",
     label: "Running",
     animate: true
   },
   completed: {
     icon: CheckCircle2,
-    color: "text-green-400",
-    bg: "bg-green-500/10",
+    color: "text-[var(--surface-success-text)]",
+    bg: "bg-[var(--surface-success-bg)]",
+    border: "border-[var(--surface-success-border)]",
     label: "Completed",
     animate: false
   },
   failed: {
     icon: XCircle,
-    color: "text-red-400",
-    bg: "bg-red-500/10",
+    color: "text-[var(--surface-danger-text)]",
+    bg: "bg-[var(--surface-danger-bg)]",
+    border: "border-[var(--surface-danger-border)]",
     label: "Failed",
     animate: false
   },
   cancelled: {
     icon: XCircle,
-    color: "text-gray-400",
-    bg: "bg-gray-500/10",
+    color: "text-[var(--surface-neutral-text)]",
+    bg: "bg-[var(--surface-neutral-bg)]",
+    border: "border-[var(--surface-neutral-border)]",
     label: "Cancelled",
     animate: false
   }
 };
 var outcomeConfig = {
   pending_review: {
-    color: "text-amber-400",
-    bg: "bg-amber-500/10",
+    color: "text-[var(--surface-warning-text)]",
+    bg: "bg-[var(--surface-warning-bg)]",
+    border: "border-[var(--surface-warning-border)]",
     label: "Pending Review"
   },
   accepted: {
-    color: "text-green-400",
-    bg: "bg-green-500/10",
+    color: "text-[var(--surface-success-text)]",
+    bg: "bg-[var(--surface-success-bg)]",
+    border: "border-[var(--surface-success-border)]",
     label: "Accepted"
   },
   rejected: {
-    color: "text-red-400",
-    bg: "bg-red-500/10",
+    color: "text-[var(--surface-danger-text)]",
+    bg: "bg-[var(--surface-danger-bg)]",
+    border: "border-[var(--surface-danger-border)]",
     label: "Rejected"
   },
   merged_with_conflicts: {
-    color: "text-orange-400",
-    bg: "bg-orange-500/10",
+    color: "text-[var(--surface-orange-text)]",
+    bg: "bg-[var(--surface-orange-bg)]",
+    border: "border-[var(--surface-orange-border)]",
     label: "Merged (conflicts)"
   },
   expired: {
-    color: "text-gray-400",
-    bg: "bg-gray-500/10",
+    color: "text-[var(--surface-neutral-text)]",
+    bg: "bg-[var(--surface-neutral-bg)]",
+    border: "border-[var(--surface-neutral-border)]",
     label: "Expired"
   }
 };
@@ -1339,12 +1353,12 @@ function VariantList({
     return /* @__PURE__ */ jsxs12(
       "div",
       {
-        className: `cursor-pointer rounded-lg border p-4 transition-colors ${isSelected ? "border-blue-500 bg-blue-500/5" : "border-border hover:border-muted-foreground/50"}`,
+        className: `cursor-pointer rounded-lg border p-4 transition-colors ${isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)] hover:border-[var(--border-default)] hover:bg-[var(--depth-3)]"}`,
         onClick: () => onSelect?.(variant.id),
         children: [
           /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxs12(Badge, { className: `${status.bg} ${status.color} border-0`, children: [
+              /* @__PURE__ */ jsxs12(Badge, { className: `${status.bg} ${status.border} ${status.color}`, children: [
                 /* @__PURE__ */ jsx13(
                   StatusIcon,
                   {
@@ -1353,13 +1367,13 @@ function VariantList({
                 ),
                 status.label
               ] }),
-              /* @__PURE__ */ jsx13("span", { className: "font-medium", children: variant.label }),
-              variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground text-sm", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-medium text-[var(--text-primary)]", children: variant.label }),
+              variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "text-sm text-[var(--text-muted)]", children: [
                 "(",
                 variant.sublabel,
                 ")"
               ] }),
-              variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1 text-muted-foreground text-sm", children: [
+              variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1 text-sm text-[var(--text-muted)]", children: [
                 /* @__PURE__ */ jsx13(Timer, { className: "h-3 w-3" }),
                 (variant.durationMs / 1e3).toFixed(2),
                 "s"
@@ -1369,7 +1383,7 @@ function VariantList({
               variant.outcome && /* @__PURE__ */ jsx13(
                 Badge,
                 {
-                  className: `${outcomeConfig[variant.outcome].bg} ${outcomeConfig[variant.outcome].color} border-0`,
+                  className: `${outcomeConfig[variant.outcome].bg} ${outcomeConfig[variant.outcome].border} ${outcomeConfig[variant.outcome].color}`,
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
@@ -1379,14 +1393,14 @@ function VariantList({
                   {
                     variant: "outline",
                     size: "sm",
-                    className: "text-green-400 hover:bg-green-500/10",
+                    className: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] hover:bg-[var(--surface-success-border)]",
                     onClick: (e) => {
                       e.stopPropagation();
                       onAccept(variant.id);
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx13(Check2, { className: "mr-1 h-4 w-4" }),
+                      /* @__PURE__ */ jsx13(Check3, { className: "mr-1 h-4 w-4" }),
                       "Accept"
                     ]
                   }
@@ -1396,7 +1410,7 @@ function VariantList({
                   {
                     variant: "outline",
                     size: "sm",
-                    className: "text-red-400 hover:bg-red-500/10",
+                    className: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] hover:bg-[var(--surface-danger-border)]",
                     onClick: (e) => {
                       e.stopPropagation();
                       onReject(variant.id);
@@ -1414,18 +1428,18 @@ function VariantList({
                 {
                   variant: "ghost",
                   size: "sm",
-                  className: "text-muted-foreground",
+                  className: "text-[var(--text-muted)] hover:text-[var(--text-primary)]",
                   onClick: (e) => {
                     e.stopPropagation();
                     window.open(variant.detailsUrl, "_blank");
                   },
-                  children: /* @__PURE__ */ jsx13(ExternalLink, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx13(ExternalLink2, { className: "h-4 w-4" })
                 }
               )
             ] })
           ] }),
-          variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-red-400 text-sm", children: variant.error }),
-          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-2 line-clamp-2 text-muted-foreground text-sm", children: variant.summary })
+          variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm text-[var(--surface-danger-text)]", children: variant.error }),
+          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--text-muted)]", children: variant.summary })
         ]
       },
       variant.id