diff --git a/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx b/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
index 3bf13d898..c8f6974f7 100644
--- a/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
+++ b/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
@@ -110,11 +110,11 @@ function stateLabel(t: ReturnType<typeof useTranslations>, state: string): strin
 }
 
 function stateClass(state: string): string {
-  if (state === "working") return "border-[#4a90d9] bg-white/70 backdrop-blur-[20px] text-[#4a90d9] shadow-[0_0_15px_rgba(74,144,217,0.4)]";
-  if (state === "verified") return "border-[#8fc29a] bg-white/70 backdrop-blur-[20px] text-[#17602a]";
-  if (state === "blocked") return "border-[#e2a29b] bg-white/70 backdrop-blur-[20px] text-[#9f2f25]";
-  if (state === "waiting") return "border-[#d9b36f] bg-white/70 backdrop-blur-[20px] text-[#8a5a08]";
-  return "border-[#d8d3c7] bg-white/70 backdrop-blur-[20px] text-[#5f5b52]";
+  if (state === "working") return "border-[#4a90d9]/50 bg-[#4a90d9]/10 backdrop-blur-[20px] text-[#60a5fa] shadow-[0_0_15px_rgba(74,144,217,0.3)]";
+  if (state === "verified") return "border-[#4f9b62]/50 bg-[#4f9b62]/10 backdrop-blur-[20px] text-[#8fc29a]";
+  if (state === "blocked") return "border-[#d95f4f]/50 bg-[#d95f4f]/10 backdrop-blur-[20px] text-[#e2a29b]";
+  if (state === "waiting") return "border-[#f0bd69]/50 bg-[#f0bd69]/10 backdrop-blur-[20px] text-[#fcd34d]";
+  return "border-white/10 bg-white/5 backdrop-blur-[20px] text-[#a3a097]";
 }
 
 function stateFromWorkItemStatus(status: string): string {
@@ -198,26 +198,33 @@ export default function OpenClawLiveOpsSpacePage({
 
   return (
     <AppLayout locale={params.locale} fullBleed>
-      <main className="min-h-screen overflow-x-hidden bg-[#f7f8f7] text-[#141413]">
+      <main className="min-h-screen overflow-x-hidden bg-[#141413] text-[#f5f4ed]">
         <div className="mx-auto flex w-full max-w-[1520px] flex-col gap-4 px-3 py-4 lg:px-5">
           <section className="grid min-w-0 items-start gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
-            <div className="min-w-0 border border-[#d8d3c7] bg-white">
-              <div className="flex min-w-0 flex-wrap items-center justify-between gap-3 border-b border-[#e5e1d8] px-4 py-3">
+            {/* Main Stage */}
+            <div className="min-w-0 rounded-2xl border border-white/10 bg-[#1c1c1a]/50 shadow-2xl backdrop-blur-3xl">
+              <div className="flex min-w-0 flex-wrap items-center justify-between gap-3 border-b border-white/10 px-6 py-5">
                 <div className="min-w-0">
-                  <p className="text-xs font-semibold uppercase text-[#77736a]">
+                  <p className="text-xs font-semibold uppercase tracking-widest text-[#a3a097]">
                     OpenClaw
                   </p>
-                  <h1 className="mt-1 break-words text-2xl font-semibold leading-tight text-[#141413] sm:text-3xl">
+                  <h1 className="mt-1 flex items-center gap-3 break-words text-2xl font-bold leading-tight text-[#f5f4ed] sm:text-3xl">
                     {t("title")}
+                    {status === "ready" && (
+                      <span className="relative flex h-3 w-3">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#4a90d9] opacity-75"></span>
+                        <span className="relative inline-flex rounded-full h-3 w-3 bg-[#4a90d9]"></span>
+                      </span>
+                    )}
                   </h1>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-3">
                   <span
                     className={cn(
-                      "inline-flex items-center gap-2 border px-3 py-1.5 text-xs font-semibold",
+                      "inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wider backdrop-blur-md",
                       status === "ready"
-                        ? "border-[#8fc29a] bg-[#f0faf2] text-[#17602a]"
-                        : "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]",
+                        ? "border-[#4f9b62]/30 bg-[#4f9b62]/10 text-[#8fc29a]"
+                        : "border-[#d9b36f]/30 bg-[#d9b36f]/10 text-[#fcd34d]",
                     )}
                   >
                     {status === "ready" ? (
@@ -234,7 +241,7 @@ export default function OpenClawLiveOpsSpacePage({
                   <button
                     type="button"
                     onClick={() => void fetchSceneState()}
-                    className="inline-flex h-9 w-9 items-center justify-center border border-[#d8d3c7] bg-white text-[#4f4b44] transition hover:border-[#4a90d9] hover:text-[#1f5b9b]"
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-[#a3a097] transition-all hover:bg-white/10 hover:text-[#f5f4ed] hover:shadow-[0_0_15px_rgba(255,255,255,0.1)]"
                     title={t("actions.refresh")}
                     aria-label={t("actions.refresh")}
                   >
@@ -243,37 +250,45 @@ export default function OpenClawLiveOpsSpacePage({
                 </div>
               </div>
 
+              {/* Isometric Room */}
               <div
                 data-testid="openclaw-live-ops-room"
-                className="relative aspect-[16/10] min-h-[420px] overflow-hidden bg-[#e8eff3] sm:min-h-[560px]"
+                className="relative aspect-[16/10] min-h-[420px] overflow-hidden bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-[#1c1c1a] via-[#141413] to-[#0a0a0a] sm:min-h-[560px] rounded-b-2xl"
               >
-                <div className="absolute inset-x-[3%] bottom-[4%] top-[7%] rotate-[-2deg] skew-y-[-7deg] border border-[#b7c8d0] bg-[#fdfefe] shadow-[0_30px_80px_rgba(37,55,68,0.18)]" />
-                <div className="absolute inset-x-[5%] bottom-[9%] top-[11%] rotate-[-2deg] skew-y-[-7deg] bg-[linear-gradient(90deg,rgba(74,144,217,0.14)_1px,transparent_1px),linear-gradient(0deg,rgba(74,144,217,0.11)_1px,transparent_1px)] bg-[size:44px_44px]" />
-                <div className="absolute left-[8%] top-[10%] h-[13%] w-[84%] rotate-[-2deg] skew-y-[-7deg] border border-[#c6d1d5] bg-[#e9eee8]" />
-                <div className="absolute left-[14%] top-[14%] h-10 w-[17%] rotate-[-2deg] skew-y-[-7deg] border border-[#aebbc0] bg-[#26333a] shadow-[0_10px_22px_rgba(37,55,68,0.22)]">
+                {/* Dark mode ISO Planes */}
+                <div className="absolute inset-x-[3%] bottom-[4%] top-[7%] rotate-[-2deg] skew-y-[-7deg] border border-white/10 bg-[#141413] shadow-[0_30px_80px_rgba(0,0,0,0.8)]" />
+                <div className="absolute inset-x-[5%] bottom-[9%] top-[11%] rotate-[-2deg] skew-y-[-7deg] bg-[linear-gradient(90deg,rgba(74,144,217,0.05)_1px,transparent_1px),linear-gradient(0deg,rgba(74,144,217,0.05)_1px,transparent_1px)] bg-[size:44px_44px] shadow-inner" />
+                <div className="absolute left-[8%] top-[10%] h-[13%] w-[84%] rotate-[-2deg] skew-y-[-7deg] border border-white/5 bg-[#1c1c1a]" />
+                
+                {/* Server racks / Databanks */}
+                <div className="absolute left-[14%] top-[14%] h-10 w-[17%] rotate-[-2deg] skew-y-[-7deg] border border-[#4a90d9]/20 bg-[#1a1f24] shadow-[0_10px_22px_rgba(0,0,0,0.5)]">
                   <span className="openclaw-screen-sweep absolute inset-0" />
-                  <span className="absolute left-2 top-2 h-1.5 w-14 bg-[#70d6a4]" />
-                  <span className="absolute bottom-2 left-2 h-1.5 w-9 bg-[#f0bd69]" />
+                  <span className="absolute left-2 top-2 h-1.5 w-14 bg-[#4f9b62] shadow-[0_0_8px_rgba(79,155,98,0.6)]" />
+                  <span className="absolute bottom-2 left-2 h-1.5 w-9 bg-[#f0bd69] shadow-[0_0_8px_rgba(240,189,105,0.6)]" />
                 </div>
-                <div className="absolute right-[14%] top-[14%] h-10 w-[17%] rotate-[-2deg] skew-y-[-7deg] border border-[#aebbc0] bg-[#26333a] shadow-[0_10px_22px_rgba(37,55,68,0.22)]">
+                <div className="absolute right-[14%] top-[14%] h-10 w-[17%] rotate-[-2deg] skew-y-[-7deg] border border-[#4a90d9]/20 bg-[#1a1f24] shadow-[0_10px_22px_rgba(0,0,0,0.5)]">
                   <span className="openclaw-screen-sweep absolute inset-0" />
-                  <span className="absolute left-2 top-2 h-1.5 w-11 bg-[#8fc29a]" />
-                  <span className="absolute bottom-2 left-2 h-1.5 w-16 bg-[#4a90d9]" />
+                  <span className="absolute left-2 top-2 h-1.5 w-11 bg-[#8fc29a] shadow-[0_0_8px_rgba(143,194,154,0.6)]" />
+                  <span className="absolute bottom-2 left-2 h-1.5 w-16 bg-[#4a90d9] shadow-[0_0_10px_rgba(74,144,217,0.8)] animate-pulse" />
                 </div>
 
-                <div className="absolute left-1/2 top-[48%] h-[19%] w-[30%] -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] skew-y-[-7deg] border border-[#b7b0a5] bg-[#ead9bd] shadow-[0_22px_42px_rgba(63,49,34,0.16)]" />
-                <div className="absolute left-1/2 top-[46%] h-[10%] w-[20%] -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] skew-y-[-7deg] border border-[#87939a] bg-[#27333a] shadow-[0_14px_28px_rgba(37,55,68,0.2)]">
-                  <span className="absolute left-3 top-3 h-1.5 w-16 bg-[#4a90d9]" />
-                  <span className="absolute bottom-3 right-3 h-1.5 w-12 bg-[#8fc29a]" />
+                {/* Central AI Core Platform */}
+                <div className="absolute left-1/2 top-[48%] h-[19%] w-[30%] -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] skew-y-[-7deg] border border-[#d97757]/20 bg-[#1f1a18] shadow-[0_22px_42px_rgba(217,119,87,0.1)]" />
+                <div className="absolute left-1/2 top-[46%] h-[10%] w-[20%] -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] skew-y-[-7deg] border border-[#4a90d9]/30 bg-[#161b22] shadow-[0_14px_28px_rgba(0,0,0,0.6)]">
+                  <span className="absolute left-3 top-3 h-1.5 w-16 bg-[#4a90d9] shadow-[0_0_10px_rgba(74,144,217,0.8)]" />
+                  <span className="absolute bottom-3 right-3 h-1.5 w-12 bg-[#d97757] shadow-[0_0_10px_rgba(217,119,87,0.8)]" />
                 </div>
-                <div className="absolute left-[25%] top-[77%] h-[9%] w-[15%] rotate-[-2deg] skew-y-[-7deg] border border-[#b7b0a5] bg-[#d6c8aa]" />
-                <div className="absolute right-[20%] top-[76%] h-[10%] w-[12%] rotate-[-2deg] skew-y-[-7deg] border border-[#b7b0a5] bg-[#d8e5df]" />
+                
+                {/* Secondary Platforms */}
+                <div className="absolute left-[25%] top-[77%] h-[9%] w-[15%] rotate-[-2deg] skew-y-[-7deg] border border-white/5 bg-[#1c1c1a]" />
+                <div className="absolute right-[20%] top-[76%] h-[10%] w-[12%] rotate-[-2deg] skew-y-[-7deg] border border-white/5 bg-[#1c1c1a]" />
 
+                {/* Data Packets (Flow) */}
                 {packetSlots.map((slot) => (
                   <span
                     key={slot}
                     data-testid="openclaw-flow-packet"
-                    className="openclaw-flow-packet absolute h-2.5 w-2.5 border border-[#f0bd69] bg-[#fff6c7] shadow-[0_0_18px_rgba(240,189,105,0.5)]"
+                    className="openclaw-flow-packet absolute h-2 w-2 rounded-full border border-[#60a5fa] bg-[#bfdbfe] shadow-[0_0_12px_rgba(96,165,250,0.9)]"
                     style={{
                       left: `${14 + (slot % 7) * 11}%`,
                       top: `${28 + (slot % 4) * 12}%`,
@@ -283,31 +298,33 @@ export default function OpenClawLiveOpsSpacePage({
                   />
                 ))}
 
+                {/* Zones (Glass Capsules) */}
                 {zones.map((zone) => {
                   const Icon = zoneIconByKind[zone.kind] ?? Activity;
                   return (
                     <div
                       key={zone.zone_id}
                       data-testid="openclaw-zone"
-                      className="absolute flex h-14 w-32 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] items-center gap-2 rounded-xl border border-white/40 bg-white/70 px-2.5 shadow-[0_8px_32px_rgba(31,38,135,0.07)] backdrop-blur-[20px]"
+                      className="absolute flex h-14 w-36 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] items-center gap-3 rounded-2xl border border-white/10 bg-[#1c1c1a]/60 px-3 shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl transition-all hover:scale-105 hover:bg-[#242422]/80"
                       style={{ left: `${zone.position.x}%`, top: `${zone.position.y}%` }}
                     >
-                      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-white/50 bg-white/40 text-[#4a90d9] shadow-sm backdrop-blur-md">
+                      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-[#2a2a28]/50 text-[#a3a097] shadow-inner backdrop-blur-md">
                         <Icon className="h-4 w-4" aria-hidden="true" />
                       </span>
-                      <span className="min-w-0 truncate font-mono text-[11px] font-semibold tracking-tight text-[#34302a]">
+                      <span className="min-w-0 truncate font-mono text-[11px] font-bold tracking-tight text-[#f5f4ed]">
                         {zone.label}
                       </span>
                     </div>
                   );
                 })}
 
+                {/* Work Items */}
                 {workItems.map((item, index) => (
                   <div
                     key={item.work_item_id}
                     data-testid="openclaw-work-token"
                     className={cn(
-                      "openclaw-work-token absolute h-8 w-24 -translate-x-1/2 -translate-y-1/2 rounded-full border px-3 py-1 text-[10px] font-semibold shadow-[0_8px_20px_rgba(54,72,88,0.12)] flex items-center justify-center",
+                      "openclaw-work-token absolute h-8 w-28 -translate-x-1/2 -translate-y-1/2 rounded-full border px-3 py-1 text-[10px] font-semibold shadow-[0_8px_20px_rgba(0,0,0,0.5)] flex items-center justify-center transition-all",
                       stateClass(stateFromWorkItemStatus(item.status)),
                     )}
                     style={{
@@ -320,11 +337,12 @@ export default function OpenClawLiveOpsSpacePage({
                   </div>
                 ))}
 
+                {/* Agents */}
                 {agents.map((agent, index) => (
                   <div
                     key={agent.agent_id}
                     data-testid="openclaw-agent-avatar"
-                    className="openclaw-agent absolute -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
+                    className="openclaw-agent absolute -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-default"
                     style={{
                       left: `${agent.position.x}%`,
                       top: `${agent.position.y}%`,
@@ -333,87 +351,96 @@ export default function OpenClawLiveOpsSpacePage({
                   >
                     <div className="relative">
                       {agent.state === "working" && (
-                        <div className="openclaw-working-ripple absolute inset-0 rounded-full border-2 border-[#4a90d9]" />
+                        <div className="openclaw-working-ripple absolute inset-0 rounded-full border-2 border-[#4a90d9]/80 shadow-[0_0_20px_rgba(74,144,217,0.6)]" />
                       )}
                       <div
                         className={cn(
-                          "relative z-10 flex h-14 w-14 items-center justify-center rounded-full border-2 shadow-[0_16px_30px_rgba(54,72,88,0.15)] transition-all duration-300",
+                          "relative z-10 flex h-14 w-14 items-center justify-center rounded-full border-2 shadow-[0_16px_30px_rgba(0,0,0,0.4)] transition-all duration-300 group-hover:scale-110",
                           stateClass(agent.state),
                         )}
                       >
                         <span
                           className={cn(
-                            "absolute -right-0 -top-0 h-3.5 w-3.5 rounded-full border-2 border-white",
+                            "absolute -right-0 -top-0 h-3.5 w-3.5 rounded-full border-2 border-[#1c1c1a]",
                             agent.state === "blocked"
-                              ? "bg-[#d95f4f] animate-pulse"
+                              ? "bg-[#d95f4f] animate-pulse shadow-[0_0_8px_rgba(217,95,79,0.8)]"
                               : agent.state === "verified"
-                                ? "bg-[#4f9b62]"
+                                ? "bg-[#4f9b62] shadow-[0_0_8px_rgba(79,155,98,0.8)]"
                                 : agent.state === "working"
-                                  ? "bg-[#4a90d9] animate-pulse"
-                                  : "bg-[#f0bd69]",
+                                  ? "bg-[#4a90d9] animate-pulse shadow-[0_0_8px_rgba(74,144,217,0.8)]"
+                                  : "bg-[#f0bd69] shadow-[0_0_8px_rgba(240,189,105,0.8)]",
                           )}
                         />
-                        <Bot className={cn("h-6 w-6", agent.state === "working" ? "animate-bounce-slow text-[#4a90d9]" : "")} aria-hidden="true" />
+                        <Bot className={cn("h-6 w-6", agent.state === "working" ? "animate-bounce-slow text-[#60a5fa]" : "")} aria-hidden="true" />
                       </div>
                     </div>
-                    <div className="mt-2 max-w-32 truncate rounded-md border border-white/50 bg-white/70 px-2 py-1 text-center font-mono text-[10px] font-semibold text-[#34302a] shadow-sm backdrop-blur-[10px]">
+                    <div className="mt-3 max-w-[140px] truncate rounded-lg border border-white/10 bg-[#1c1c1a]/80 px-2.5 py-1 text-center font-mono text-[10px] font-semibold text-[#f5f4ed] shadow-lg backdrop-blur-xl transition-all group-hover:-translate-y-1 group-hover:border-white/30">
                       {agent.label}
                     </div>
                   </div>
                 ))}
 
-                <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(145deg,rgba(255,255,255,0.18),transparent_45%,rgba(20,20,19,0.04))]" />
-                <div className="absolute bottom-3 left-3 flex flex-wrap gap-2">
-                  <span className="border border-[#d8d3c7] bg-white/90 px-2 py-1 font-mono text-[11px] text-[#5f5b52]">
-                    {t("source.marker")} {shortValue(scene?.source.deploy_readback_marker)}
+                {/* Lighting overlay */}
+                <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(145deg,rgba(255,255,255,0.03),transparent_45%,rgba(0,0,0,0.4))]" />
+                
+                {/* Footer Badges */}
+                <div className="absolute bottom-4 left-4 flex flex-wrap gap-2">
+                  <span className="rounded-md border border-white/10 bg-[#1c1c1a]/80 px-2.5 py-1 font-mono text-[11px] text-[#a3a097] backdrop-blur-md">
+                    {t("source.marker")} <span className="text-[#f5f4ed]">{shortValue(scene?.source.deploy_readback_marker)}</span>
                   </span>
                   <span
                     data-testid="openclaw-animation-loop"
                     className={cn(
-                      "border px-2 py-1 font-mono text-[11px]",
+                      "rounded-md border px-2.5 py-1 font-mono text-[11px] backdrop-blur-md",
                       animationLoopEnabled
-                        ? "border-[#8fc29a] bg-[#f0faf2] text-[#17602a]"
-                        : "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]",
+                        ? "border-[#4f9b62]/30 bg-[#4f9b62]/10 text-[#8fc29a]"
+                        : "border-[#d9b36f]/30 bg-[#d9b36f]/10 text-[#fcd34d]",
                     )}
                   >
                     {t("animation.loop")}{" "}
-                    {animationLoopEnabled ? t("animation.on") : t("animation.off")} ·{" "}
-                    {scene?.room.animation_loop.tick_ms ?? 0}ms
+                    <span className={cn("font-bold", animationLoopEnabled ? "text-[#4f9b62]" : "text-[#d9b36f]")}>
+                      {animationLoopEnabled ? t("animation.on") : t("animation.off")}
+                    </span>{" "}
+                    · {scene?.room.animation_loop.tick_ms ?? 0}ms
                   </span>
-                  <span className="border border-[#d8d3c7] bg-white/90 px-2 py-1 font-mono text-[11px] text-[#5f5b52]">
+                  <span className="rounded-md border border-white/10 bg-[#1c1c1a]/80 px-2.5 py-1 font-mono text-[11px] text-[#a3a097] backdrop-blur-md">
                     {t("source.updated")}{" "}
-                    {updatedAt
-                      ? updatedAt.toLocaleTimeString(locale, {
-                          hour: "2-digit",
-                          minute: "2-digit",
-                          second: "2-digit",
-                        })
-                      : "--"}
+                    <span className="text-[#f5f4ed]">
+                      {updatedAt
+                        ? updatedAt.toLocaleTimeString(locale, {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            second: "2-digit",
+                          })
+                        : "--"}
+                    </span>
                   </span>
                 </div>
               </div>
             </div>
 
-            <aside className="grid min-w-0 gap-3">
-              <section className="border border-[#d8d3c7] bg-white p-4">
+            {/* Sidebar Panels */}
+            <aside className="grid min-w-0 gap-4">
+              {/* Rollups (Stat Cards) */}
+              <section className="rounded-2xl border border-white/10 bg-[#1c1c1a]/50 p-5 shadow-xl backdrop-blur-2xl">
                 <div className="flex items-center justify-between gap-3">
-                  <h2 className="text-base font-semibold text-[#141413]">
+                  <h2 className="text-sm font-semibold uppercase tracking-wider text-[#f5f4ed]">
                     {t("panels.rollups")}
                   </h2>
                   <Activity className="h-4 w-4 text-[#4a90d9]" aria-hidden="true" />
                 </div>
-                <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                   {[
                     ["agents", scene?.rollups.agent_count],
                     ["workItems", scene?.rollups.work_item_count],
                     ["animated", scene?.rollups.animated_entity_count],
                     ["blocked", scene?.rollups.blocked_work_item_count],
                   ].map(([key, value]) => (
-                    <div key={String(key)} className="border border-[#e5e1d8] bg-[#fafafa] p-3">
-                      <p className="text-[11px] font-semibold text-[#77736a]">
+                    <div key={String(key)} className="group rounded-xl border border-white/5 bg-white/5 p-4 transition-all hover:border-white/20 hover:bg-white/10">
+                      <p className="text-[10px] font-semibold uppercase tracking-widest text-[#a3a097] group-hover:text-[#d8d3c7]">
                         {t(`metrics.${key}`)}
                       </p>
-                      <p className="mt-1 font-mono text-2xl font-semibold text-[#141413]">
+                      <p className="mt-2 font-mono text-3xl font-bold tracking-tight text-[#f5f4ed]">
                         {formatNumber(Number(value ?? 0))}
                       </p>
                     </div>
@@ -421,17 +448,18 @@ export default function OpenClawLiveOpsSpacePage({
                 </div>
               </section>
 
-              <section className="border border-[#d8d3c7] bg-white p-4">
+              {/* Boundaries */}
+              <section className="rounded-2xl border border-white/10 bg-[#1c1c1a]/50 p-5 shadow-xl backdrop-blur-2xl">
                 <div className="flex items-center justify-between gap-3">
-                  <h2 className="text-base font-semibold text-[#141413]">
+                  <h2 className="text-sm font-semibold uppercase tracking-wider text-[#f5f4ed]">
                     {t("panels.boundaries")}
                   </h2>
                   <ShieldCheck
-                    className={cn("h-4 w-4", boundaryOk ? "text-[#17602a]" : "text-[#8a5a08]")}
+                    className={cn("h-4 w-4", boundaryOk ? "text-[#4f9b62]" : "text-[#d9b36f]")}
                     aria-hidden="true"
                   />
                 </div>
-                <div className="mt-3 grid gap-2">
+                <div className="mt-4 grid gap-2">
                   {[
                     "raw_session_read_allowed",
                     "sqlite_read_allowed",
@@ -441,17 +469,17 @@ export default function OpenClawLiveOpsSpacePage({
                   ].map((key) => (
                     <div
                       key={key}
-                      className="flex min-w-0 items-center justify-between gap-3 border border-[#e5e1d8] px-3 py-2"
+                      className="group flex min-w-0 items-center justify-between gap-3 rounded-lg border border-white/5 bg-white/5 px-3 py-2.5 transition-all hover:bg-white/10"
                     >
-                      <span className="truncate font-mono text-[11px] text-[#5f5b52]">
+                      <span className="truncate font-mono text-[10px] text-[#a3a097] group-hover:text-[#d8d3c7]">
                         {key}
                       </span>
                       <span
                         className={cn(
-                          "border px-2 py-0.5 text-[10px] font-semibold",
+                          "rounded-full border px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest",
                           scene?.boundaries[key] === false
-                            ? "border-[#8fc29a] bg-[#f0faf2] text-[#17602a]"
-                            : "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]",
+                            ? "border-[#4f9b62]/30 bg-[#4f9b62]/10 text-[#8fc29a]"
+                            : "border-[#d9b36f]/30 bg-[#d9b36f]/10 text-[#fcd34d]",
                         )}
                       >
                         {scene?.boundaries[key] === false ? t("boundary.closed") : t("boundary.open")}
@@ -461,35 +489,38 @@ export default function OpenClawLiveOpsSpacePage({
                 </div>
               </section>
 
-              <section className="min-h-[260px] border border-[#d8d3c7] bg-white p-4">
+              {/* Work Items Detail */}
+              <section className="min-h-[260px] rounded-2xl border border-white/10 bg-[#1c1c1a]/50 p-5 shadow-xl backdrop-blur-2xl">
                 <div className="flex items-center justify-between gap-3">
-                  <h2 className="text-base font-semibold text-[#141413]">
+                  <h2 className="text-sm font-semibold uppercase tracking-wider text-[#f5f4ed]">
                     {t("panels.workItems")}
                   </h2>
                   <SearchCheck className="h-4 w-4 text-[#4a90d9]" aria-hidden="true" />
                 </div>
-                <div className="mt-3 grid gap-2">
+                <div className="mt-4 grid gap-3">
                   {workItems.length === 0 ? (
-                    <div className="border border-[#e5e1d8] bg-[#fafafa] p-4 text-sm text-[#77736a]">
-                      {t("empty")}
+                    <div className="flex flex-col items-center justify-center rounded-xl border border-white/5 bg-white/5 py-8 text-[#a3a097]">
+                      <SearchCheck className="mb-2 h-6 w-6 opacity-50" />
+                      <span className="text-xs font-medium">{t("empty")}</span>
                     </div>
                   ) : (
                     workItems.slice(0, 6).map((item) => (
-                      <div key={item.work_item_id} className="border border-[#e5e1d8] p-3">
+                      <div key={item.work_item_id} className="group rounded-xl border border-white/5 bg-white/5 p-3.5 transition-all hover:-translate-y-0.5 hover:border-white/20 hover:bg-white/10 hover:shadow-lg">
                         <div className="flex min-w-0 items-center justify-between gap-2">
-                          <span className="min-w-0 truncate text-sm font-semibold text-[#141413]">
+                          <span className="min-w-0 truncate text-sm font-bold text-[#f5f4ed]">
                             {item.title || item.work_item_id}
                           </span>
                           <span
                             className={cn(
-                              "shrink-0 border px-2 py-0.5 text-[10px] font-semibold",
+                              "shrink-0 rounded-full border px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest",
                               stateClass(stateFromWorkItemStatus(item.status)),
                             )}
                           >
                             {stateLabel(t, stateFromWorkItemStatus(item.status))}
                           </span>
                         </div>
-                        <p className="mt-2 truncate font-mono text-[11px] text-[#77736a]">
+                        <p className="mt-2 truncate font-mono text-[10px] text-[#a3a097] group-hover:text-[#d8d3c7]">
+                          <span className="mr-1 text-[#d97757]">❯</span>
                           {item.next_controlled_action || item.exit_criteria || "--"}
                         </p>
                       </div>
@@ -551,7 +582,7 @@ export default function OpenClawLiveOpsSpacePage({
             opacity: 0;
           }
           30% {
-            opacity: 0.42;
+            opacity: 0.2;
           }
           100% {
             transform: translateX(160%);
@@ -564,7 +595,7 @@ export default function OpenClawLiveOpsSpacePage({
             opacity: 1;
           }
           100% {
-            transform: scale(2.4);
+            transform: scale(2.2);
             opacity: 0;
           }
         }
@@ -592,7 +623,7 @@ export default function OpenClawLiveOpsSpacePage({
           background: linear-gradient(
             90deg,
             transparent,
-            rgba(112, 214, 164, 0.3),
+            rgba(74, 144, 217, 0.15),
             transparent
           );
           animation: openclaw-screen-sweep 3.8s linear infinite;