diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index e3a6650d1..78fdd2e33 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -3092,7 +3092,10 @@ export function WorkspaceLauncher({
         : ['GameAgent V1.0 首页改版', '项目工作区和 Agent 会话建设中', '美术生成将接入平台 API'];
 
   return (
-    <main className="launcher-shell" aria-label="GameAgent 客户端">
+    <main
+      className="launcher-shell platform-theme platform-theme--light"
+      aria-label="GameAgent 客户端"
+    >
       <aside className="launcher-sidebar">
         <div className="launcher-brand" aria-label="陶泥儿">
           <span className="launcher-logo">tn</span>
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index f826e231b..02d4423bb 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -1,4 +1,7 @@
 @import 'tailwindcss';
+@import "theme.css";
+/*TODO use the shared one after merged with master*/
+/*@import '../../../packages/shared/src/theme.css';*/
 
 :root {
   color: #18202f;
@@ -149,6 +152,85 @@ textarea {
   color: #171717;
 }
 
+.launcher-shell.platform-theme {
+  background: var(--platform-body-fill);
+  color: var(--platform-text-strong);
+}
+
+.launcher-shell.platform-theme .launcher-sidebar {
+  border-color: var(--platform-surface-border);
+  background: var(--platform-nav-fill);
+}
+
+.launcher-shell.platform-theme .launcher-logo {
+  background: var(--platform-button-primary-fill);
+  color: var(--platform-button-primary-text);
+  box-shadow: var(--platform-profile-action-shadow);
+}
+
+.launcher-shell.platform-theme .launcher-sidebar nav button,
+.launcher-shell.platform-theme .launcher-config-button {
+  color: var(--platform-nav-item-text);
+}
+
+.launcher-shell.platform-theme .launcher-sidebar .launcher-nav-active {
+  border: 1px solid var(--platform-nav-active-border);
+  background: var(--platform-nav-active-fill);
+  color: var(--platform-nav-item-text-active);
+  box-shadow: var(--platform-nav-active-shadow);
+}
+
+.launcher-shell.platform-theme .launcher-sidebar nav button:hover,
+.launcher-shell.platform-theme .launcher-config-button:hover,
+.launcher-shell.platform-theme .launcher-sidebar .launcher-help-menu button:hover,
+.launcher-shell.platform-theme .launcher-sidebar .launcher-help-menu button:focus-visible,
+.launcher-shell.platform-theme .launcher-sidebar .launcher-account-popover button:hover,
+.launcher-shell.platform-theme .launcher-sidebar .launcher-account-popover button:focus-visible {
+  background: var(--platform-nav-item-hover-fill);
+}
+
+.launcher-shell.platform-theme .launcher-main {
+  background: var(--platform-body-fill);
+}
+
+.launcher-shell.platform-theme .launcher-promo {
+  background: var(--platform-warm-bg);
+  color: var(--platform-warm-text);
+}
+
+.launcher-shell.platform-theme .launcher-promo button {
+  color: var(--platform-warm-text);
+}
+
+.launcher-shell.platform-theme .launcher-countdown,
+.launcher-shell.platform-theme .launcher-account-bar button,
+.launcher-shell.platform-theme .launcher-wallet-group,
+.launcher-shell.platform-theme .launcher-account-popover,
+.launcher-shell.platform-theme .launcher-wallet-popover,
+.launcher-shell.platform-theme .launcher-help-menu {
+  border-color: var(--platform-subpanel-border);
+  background: var(--platform-subpanel-fill);
+  color: var(--platform-text-strong);
+}
+
+.launcher-shell.platform-theme .launcher-account-bar button,
+.launcher-shell.platform-theme .launcher-account-popover button,
+.launcher-shell.platform-theme .launcher-wallet-popover button,
+.launcher-shell.platform-theme .launcher-wallet-ledger div span {
+  color: var(--platform-text-strong);
+}
+
+.launcher-shell.platform-theme .launcher-wallet-group > button {
+  border-left-color: var(--platform-subpanel-border);
+}
+
+.launcher-shell.platform-theme .launcher-account-popover span,
+.launcher-shell.platform-theme .launcher-wallet-popover span,
+.launcher-shell.platform-theme .launcher-account-popover small,
+.launcher-shell.platform-theme .launcher-wallet-popover small {
+  color: var(--platform-text-soft);
+}
+
 .launcher-sidebar {
   position: sticky;
   top: 0;
diff --git a/apps/ai-game-creator-shell/src/theme.css b/apps/ai-game-creator-shell/src/theme.css
new file mode 100644
index 000000000..4ffe8d340
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/theme.css
@@ -0,0 +1,538 @@
+.platform-theme,
+.platform-theme * {
+  font-family: 'Inter', 'Noto Sans CJK SC', 'WenQuanYi Zen Hei', 'PingFang SC',
+    'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif !important;
+}
+
+.platform-theme {
+  color: var(--platform-text-strong);
+}
+
+.platform-theme--light {
+  color-scheme: light;
+  --platform-accent: #c7653d;
+  --platform-body-fill: radial-gradient(
+      circle at 8% 0%,
+      rgba(240, 203, 169, 0.24),
+      transparent 26%
+    ),
+    radial-gradient(circle at 92% 8%, rgba(226, 171, 134, 0.2), transparent 22%),
+    radial-gradient(
+      circle at 54% 100%,
+      rgba(204, 117, 76, 0.08),
+      transparent 30%
+    ),
+    linear-gradient(180deg, #fffdf9 0%, #fdf9f5 54%, #f8efe7 100%);
+  --platform-panel-shadow: 0 22px 60px rgba(112, 57, 30, 0.1),
+    0 8px 22px rgba(255, 255, 255, 0.82);
+  --platform-panel-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.985),
+    rgba(253, 248, 243, 0.96)
+  );
+  --platform-panel-fill-soft: linear-gradient(
+    180deg,
+    rgba(255, 254, 252, 0.96),
+    rgba(250, 243, 236, 0.9)
+  );
+  --platform-hero-fill: linear-gradient(
+    135deg,
+    rgba(244, 226, 211, 0.96),
+    rgba(238, 208, 183, 0.9)
+  );
+  --platform-hero-glow-a: rgba(255, 255, 255, 0.42);
+  --platform-hero-glow-b: rgba(228, 149, 91, 0.18);
+  --platform-hero-overlay-strong: linear-gradient(
+    135deg,
+    rgba(238, 208, 183, 0.66),
+    rgba(204, 117, 76, 0.18)
+  );
+  --platform-hero-overlay-soft: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.34),
+    rgba(248, 233, 219, 0.22)
+  );
+  --platform-surface-border: rgba(226, 203, 184, 0.88);
+  --platform-surface-hover-border: rgba(204, 117, 76, 0.42);
+  --platform-shell-glow-1: rgba(255, 255, 255, 0.34);
+  --platform-shell-glow-2: rgba(238, 208, 183, 0.22);
+  --platform-shell-glow-3: rgba(210, 132, 93, 0.12);
+  --platform-surface-glow-a: rgba(240, 203, 169, 0.18);
+  --platform-surface-glow-b: rgba(204, 117, 76, 0.1);
+  --platform-text-strong: #3d1f10;
+  --platform-text-base: #6f5848;
+  --platform-text-soft: #988476;
+  --platform-text-muted: #a38f80;
+  --platform-brand-logo-title: #4a220f;
+  --platform-brand-logo-subtitle: #c7653d;
+  --platform-brand-logo-shadow: #caa48b;
+  --platform-line-soft: rgba(226, 203, 184, 0.72);
+  --platform-subpanel-fill: linear-gradient(
+    180deg,
+    rgba(255, 254, 252, 0.94),
+    rgba(250, 243, 236, 0.9)
+  );
+  --platform-subpanel-border: rgba(225, 204, 187, 0.82);
+  --platform-warm-border: rgba(204, 117, 76, 0.28);
+  --platform-warm-bg: rgba(234, 204, 179, 0.32);
+  --platform-warm-text: #b6623f;
+  --platform-cool-border: rgba(199, 117, 76, 0.24);
+  --platform-cool-bg: rgba(238, 208, 183, 0.26);
+  --platform-cool-text: #b76038;
+  --platform-neutral-border: rgba(226, 203, 184, 0.44);
+  --platform-neutral-bg: rgba(255, 253, 250, 0.7);
+  --platform-neutral-text: #7b6150;
+  --platform-button-primary-border: rgba(182, 98, 63, 0.32);
+  --platform-button-primary-solid: #c7653d;
+  --platform-button-primary-fill: linear-gradient(135deg, #df7f40, #b95d3a);
+  --platform-button-primary-text: #fffaf5;
+  --platform-button-secondary-fill: rgba(255, 253, 250, 0.78);
+  --platform-button-secondary-text: #4b2412;
+  --platform-button-ghost-fill: rgba(255, 253, 250, 0.56);
+  --platform-button-ghost-text: #755a49;
+  --platform-button-danger-border: rgba(185, 75, 58, 0.22);
+  --platform-button-danger-fill: rgba(255, 237, 229, 0.94);
+  --platform-button-danger-text: #a6402f;
+  --platform-unread-dot-fill: #8b5a3d;
+  --platform-unread-dot-glow: rgba(139, 90, 61, 0.34);
+  --platform-success-border: rgba(73, 144, 96, 0.24);
+  --platform-success-bg: rgba(237, 248, 239, 0.92);
+  --platform-success-text: #2f7b46;
+  --platform-icon-fill: rgba(255, 253, 250, 0.68);
+  --platform-icon-border: rgba(226, 203, 184, 0.5);
+  --platform-icon-text: #7b5c49;
+  --platform-nav-fill: linear-gradient(
+    180deg,
+    rgba(255, 254, 252, 0.96),
+    rgba(250, 243, 236, 0.92)
+  );
+  --platform-nav-active-fill: linear-gradient(
+    180deg,
+    rgba(238, 208, 183, 0.48),
+    rgba(204, 117, 76, 0.16)
+  );
+  --platform-nav-active-border: rgba(204, 117, 76, 0.34);
+  --platform-nav-active-shadow: 0 10px 24px rgba(182, 98, 63, 0.12);
+  --platform-modal-fill: linear-gradient(
+    180deg,
+    rgba(255, 254, 252, 0.97),
+    rgba(250, 243, 236, 0.95)
+  );
+  --platform-modal-border: rgba(255, 255, 255, 0.58);
+  --platform-desktop-shell-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.99),
+    rgba(253, 249, 245, 0.985)
+  );
+  --platform-desktop-shell-border: rgba(230, 213, 199, 0.94);
+  --platform-desktop-shell-inner-border: rgba(233, 218, 205, 0.92);
+  --platform-desktop-topbar-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(253, 249, 245, 0.92)
+  );
+  --platform-desktop-panel-fill: linear-gradient(
+    180deg,
+    rgba(255, 254, 252, 0.95),
+    rgba(250, 243, 236, 0.91)
+  );
+  --platform-desktop-panel-border: rgba(226, 203, 184, 0.88);
+  --platform-desktop-hover-shadow: 0 16px 30px rgba(112, 57, 30, 0.12);
+  --platform-overlay-fill: linear-gradient(
+    180deg,
+    rgba(240, 203, 169, 0.14),
+    rgba(255, 255, 255, 0.58)
+  );
+  --platform-track-border: rgba(226, 203, 184, 0.48);
+  --platform-track-fill: rgba(255, 253, 250, 0.9);
+  --platform-page-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(250, 243, 236, 0.8)
+  );
+  --platform-page-border: rgba(233, 218, 205, 0.88);
+  --platform-input-fill: rgba(255, 253, 250, 0.94);
+  --platform-input-fill-focus: rgba(255, 254, 252, 0.96);
+  --platform-input-highlight: rgba(255, 255, 255, 0.9);
+  --platform-input-focus-ring: rgba(204, 117, 76, 0.15);
+  --platform-nav-item-text: #80695a;
+  --platform-nav-item-text-active: #3d1f10;
+  --platform-nav-item-hover-fill: rgba(253, 248, 243, 0.94);
+  --platform-nav-item-icon-fill: rgba(250, 243, 236, 1);
+  --platform-nav-item-icon-text: #7b5c49;
+  --platform-nav-item-icon-active-fill: rgba(255, 254, 252, 0.98);
+  --platform-nav-item-icon-active-text: #c7653d;
+  --platform-nav-icon-active-shadow: 0 12px 24px rgba(182, 98, 63, 0.16);
+  --platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
+  --platform-bottom-nav-border: rgba(224, 181, 139, 0.58);
+  --platform-bottom-nav-divider: rgba(225, 185, 145, 0.52);
+  --platform-bottom-nav-text: #5b2b19;
+  --platform-bottom-nav-muted-text: #7a4b37;
+  --platform-bottom-nav-active-text: #f15a17;
+  --platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
+  --platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.28);
+  --platform-bottom-nav-primary-text: #fffaf2;
+  --platform-profile-hero-fill: linear-gradient(
+    180deg,
+    rgba(255, 254, 252, 0.96),
+    rgba(250, 239, 229, 0.9)
+  );
+  --platform-profile-hero-border: rgba(255, 255, 255, 0.56);
+  --platform-profile-hero-shadow: 0 20px 56px rgba(112, 57, 30, 0.16);
+  --platform-profile-avatar-fill: linear-gradient(
+    135deg,
+    rgba(223, 127, 64, 0.96),
+    rgba(181, 91, 56, 0.92)
+  );
+  --platform-profile-avatar-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
+  --platform-profile-chip-fill: rgba(255, 253, 250, 0.88);
+  --platform-profile-chip-hover-fill: rgba(255, 254, 252, 0.96);
+  --platform-profile-chip-text: #755a49;
+  --platform-profile-action-fill: linear-gradient(135deg, #df7f40, #b95d3a);
+  --platform-profile-action-solid: #c7653d;
+  --platform-profile-action-text: #fffaf5;
+  --platform-profile-action-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
+  --platform-card-overlay-soft: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.08),
+    rgba(250, 243, 236, 0.82)
+  );
+  --platform-card-overlay-strong: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.16),
+    rgba(248, 239, 231, 0.92)
+  );
+  --platform-card-overlay-deep: radial-gradient(
+      circle at top left,
+      rgba(255, 255, 255, 0.2),
+      transparent 30%
+    ),
+    radial-gradient(circle at right, rgba(228, 149, 91, 0.14), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(248, 239, 231, 0.9));
+  --platform-recommend-runtime-fill: var(--platform-panel-fill);
+  --platform-recommend-runtime-border: rgba(226, 203, 184, 0.42);
+  --platform-recommend-runtime-shadow: 0 18px 44px rgba(112, 57, 30, 0.12),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
+  --platform-recommend-runtime-state-fill: radial-gradient(
+      circle at 50% 18%,
+      rgba(204, 117, 76, 0.12),
+      transparent 34%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.98),
+      rgba(250, 243, 236, 0.94)
+    );
+  --platform-recommend-runtime-state-text: var(--platform-text-strong);
+  --puzzle-runtime-shell-fill: var(--platform-body-fill);
+  --puzzle-runtime-stage-fill: radial-gradient(
+      circle at 50% 18%,
+      rgba(204, 117, 76, 0.13),
+      transparent 30%
+    ),
+    radial-gradient(
+      circle at 18% 82%,
+      rgba(240, 203, 169, 0.18),
+      transparent 28%
+    ),
+    linear-gradient(180deg, #fffdf9 0%, #fbf5ed 58%, #f4e5d7 100%);
+  --puzzle-runtime-grid-line: rgba(112, 57, 30, 0.06);
+  --puzzle-runtime-text-strong: var(--platform-text-strong);
+  --puzzle-runtime-text-base: var(--platform-text-base);
+  --puzzle-runtime-text-soft: var(--platform-text-soft);
+  --puzzle-runtime-surface-fill: rgba(255, 253, 250, 0.76);
+  --puzzle-runtime-surface-fill-strong: rgba(255, 253, 250, 0.9);
+  --puzzle-runtime-surface-border: rgba(226, 203, 184, 0.48);
+  --puzzle-runtime-board-fill: rgba(255, 253, 250, 0.68);
+  --puzzle-runtime-board-border: rgba(204, 117, 76, 0.28);
+  --puzzle-runtime-board-shadow: 0 30px 80px rgba(112, 57, 30, 0.14);
+  --puzzle-runtime-piece-fill: rgba(255, 253, 250, 0.74);
+  --puzzle-runtime-piece-border: transparent;
+  --puzzle-runtime-piece-empty-fill: rgba(238, 208, 183, 0.34);
+  --puzzle-runtime-piece-empty-text: rgba(111, 88, 72, 0.4);
+  --puzzle-runtime-piece-selected-fill: linear-gradient(
+    135deg,
+    #df7f40,
+    #b95d3a
+  );
+  --puzzle-runtime-piece-selected-text: #fffaf5;
+  --puzzle-runtime-piece-selected-border: transparent;
+  --puzzle-runtime-next-card-overlay: rgba(74, 34, 15, 0.06);
+  --puzzle-runtime-control-fill: rgba(255, 253, 250, 0.72);
+  --puzzle-runtime-control-hover-fill: rgba(204, 117, 76, 0.1);
+  --puzzle-runtime-primary-fill: var(--platform-button-primary-fill);
+  --puzzle-runtime-primary-text: var(--platform-button-primary-text);
+  --puzzle-runtime-primary-shadow: var(--platform-profile-action-shadow);
+  --puzzle-runtime-accent-text: var(--platform-cool-text);
+  --puzzle-runtime-cool-text: #6e8d42;
+  --puzzle-runtime-danger-fill: rgba(255, 237, 229, 0.9);
+  --puzzle-runtime-danger-text: #a6402f;
+  --puzzle-runtime-backdrop-fill: rgba(61, 31, 16, 0.34);
+  --puzzle-runtime-dialog-fill: radial-gradient(
+      circle at 12% 0%,
+      rgba(204, 117, 76, 0.18),
+      transparent 36%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 254, 252, 0.98),
+      rgba(250, 243, 236, 0.95)
+    );
+  --puzzle-runtime-dialog-border: rgba(204, 117, 76, 0.3);
+  --puzzle-runtime-table-fill: rgba(255, 253, 250, 0.62);
+  --puzzle-runtime-table-row-fill: rgba(204, 117, 76, 0.12);
+  --puzzle-runtime-next-card-fill: rgba(255, 253, 250, 0.66);
+  --puzzle-runtime-next-card-hover-fill: rgba(204, 117, 76, 0.1);
+}
+
+.platform-theme--dark {
+  color-scheme: dark;
+  --platform-accent: #5b6cff;
+  --platform-body-fill: radial-gradient(
+      circle at top,
+      rgba(129, 140, 248, 0.2),
+      transparent 30%
+    ),
+    radial-gradient(
+      circle at top right,
+      rgba(59, 130, 246, 0.12),
+      transparent 24%
+    ),
+    radial-gradient(
+      circle at bottom left,
+      rgba(34, 211, 238, 0.08),
+      transparent 26%
+    ),
+    linear-gradient(180deg, #13151c 0%, #090b11 100%);
+  --platform-panel-shadow: 0 28px 88px rgba(5, 8, 28, 0.5);
+  --platform-panel-fill: linear-gradient(
+    180deg,
+    rgba(22, 20, 52, 0.95),
+    rgba(7, 9, 21, 0.98)
+  );
+  --platform-panel-fill-soft: linear-gradient(
+    180deg,
+    rgba(122, 92, 255, 0.12),
+    rgba(255, 255, 255, 0.03)
+  );
+  --platform-hero-fill: radial-gradient(
+      circle at top left,
+      rgba(129, 140, 248, 0.24),
+      transparent 34%
+    ),
+    radial-gradient(circle at right, rgba(34, 211, 238, 0.12), transparent 32%),
+    linear-gradient(180deg, rgba(17, 22, 66, 0.95), rgba(8, 10, 24, 0.98));
+  --platform-hero-glow-a: rgba(129, 140, 248, 0.18);
+  --platform-hero-glow-b: rgba(34, 211, 238, 0.1);
+  --platform-surface-border: rgba(160, 169, 255, 0.12);
+  --platform-surface-hover-border: rgba(255, 255, 255, 0.16);
+  --platform-shell-glow-1: rgba(129, 140, 248, 0.2);
+  --platform-shell-glow-2: rgba(59, 130, 246, 0.12);
+  --platform-shell-glow-3: rgba(34, 211, 238, 0.08);
+  --platform-surface-glow-a: rgba(129, 140, 248, 0.18);
+  --platform-surface-glow-b: rgba(34, 211, 238, 0.1);
+  --platform-text-strong: #ffffff;
+  --platform-text-base: rgb(228 228 231);
+  --platform-text-soft: rgb(161 161 170);
+  --platform-text-muted: rgb(161 161 170);
+  --platform-brand-logo-title: #fff7dc;
+  --platform-brand-logo-subtitle: #9fe7ff;
+  --platform-brand-logo-shadow: #040814;
+  --platform-line-soft: rgba(255, 255, 255, 0.1);
+  --platform-subpanel-fill: rgba(255, 255, 255, 0.05);
+  --platform-subpanel-border: rgba(255, 255, 255, 0.1);
+  --platform-warm-border: rgba(167, 139, 250, 0.24);
+  --platform-warm-bg: rgba(109, 40, 217, 0.18);
+  --platform-warm-text: rgb(237 233 254);
+  --platform-cool-border: rgba(103, 232, 249, 0.22);
+  --platform-cool-bg: rgba(8, 145, 178, 0.14);
+  --platform-cool-text: rgb(236 254 255);
+  --platform-neutral-border: rgba(255, 255, 255, 0.08);
+  --platform-neutral-bg: rgba(255, 255, 255, 0.05);
+  --platform-neutral-text: rgb(228 228 231);
+  --platform-button-primary-border: rgba(129, 140, 248, 0.3);
+  --platform-button-primary-solid: #5b6cff;
+  --platform-button-primary-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
+  --platform-button-primary-text: rgb(238 248 255);
+  --platform-button-secondary-fill: rgba(255, 255, 255, 0.05);
+  --platform-button-secondary-text: rgb(244 244 245);
+  --platform-button-ghost-fill: rgba(255, 255, 255, 0.03);
+  --platform-button-ghost-text: rgb(212 212 216);
+  --platform-button-danger-border: rgba(251, 113, 133, 0.2);
+  --platform-button-danger-fill: rgba(244, 63, 94, 0.1);
+  --platform-button-danger-text: rgb(255 228 230);
+  --platform-unread-dot-fill: #d6a27c;
+  --platform-unread-dot-glow: rgba(214, 162, 124, 0.24);
+  --platform-success-border: rgba(52, 211, 153, 0.24);
+  --platform-success-bg: rgba(16, 185, 129, 0.1);
+  --platform-success-text: rgb(220 252 231);
+  --platform-icon-fill: rgba(255, 255, 255, 0.05);
+  --platform-icon-border: rgba(255, 255, 255, 0.1);
+  --platform-icon-text: rgb(212 212 216);
+  --platform-nav-fill: linear-gradient(
+    180deg,
+    rgba(109, 40, 217, 0.12),
+    rgba(255, 255, 255, 0.03)
+  );
+  --platform-nav-active-fill: linear-gradient(
+    180deg,
+    rgba(91, 108, 255, 0.2),
+    rgba(61, 217, 255, 0.08)
+  );
+  --platform-nav-active-border: rgba(160, 169, 255, 0.24);
+  --platform-nav-active-shadow: 0 12px 28px rgba(8, 14, 42, 0.4);
+  --platform-modal-fill: linear-gradient(
+    180deg,
+    rgba(16, 18, 46, 0.98),
+    rgba(7, 8, 19, 0.98)
+  );
+  --platform-modal-border: rgba(160, 169, 255, 0.12);
+  --platform-desktop-shell-fill: linear-gradient(
+    180deg,
+    rgba(8, 8, 30, 0.98),
+    rgba(5, 6, 18, 0.99)
+  );
+  --platform-desktop-shell-border: rgba(160, 169, 255, 0.14);
+  --platform-desktop-shell-inner-border: rgba(255, 255, 255, 0.03);
+  --platform-desktop-topbar-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.05),
+    rgba(255, 255, 255, 0.03)
+  );
+  --platform-desktop-panel-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.05),
+    rgba(255, 255, 255, 0.02)
+  );
+  --platform-desktop-panel-border: rgba(160, 169, 255, 0.12);
+  --platform-desktop-hover-shadow: 0 16px 28px rgba(8, 11, 38, 0.2);
+  --platform-overlay-fill: rgba(5, 8, 28, 0.72);
+  --platform-track-border: rgba(255, 255, 255, 0.12);
+  --platform-track-fill: rgba(255, 255, 255, 0.08);
+  --platform-page-fill: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.04),
+    rgba(255, 255, 255, 0.02)
+  );
+  --platform-page-border: rgba(255, 255, 255, 0.06);
+  --platform-input-fill: rgba(255, 255, 255, 0.05);
+  --platform-input-fill-focus: rgba(255, 255, 255, 0.08);
+  --platform-input-highlight: rgba(255, 255, 255, 0.06);
+  --platform-input-focus-ring: rgba(91, 108, 255, 0.22);
+  --platform-nav-item-text: rgb(161 161 170);
+  --platform-nav-item-text-active: rgb(238 248 255);
+  --platform-nav-item-hover-fill: rgba(91, 108, 255, 0.08);
+  --platform-nav-item-icon-fill: rgba(255, 255, 255, 0.06);
+  --platform-nav-item-icon-text: rgb(161 161 170);
+  --platform-nav-item-icon-active-fill: linear-gradient(
+    180deg,
+    rgba(91, 108, 255, 0.24),
+    rgba(61, 217, 255, 0.12)
+  );
+  --platform-nav-item-icon-active-text: rgb(238 248 255);
+  --platform-nav-icon-active-shadow: 0 12px 24px rgba(8, 14, 42, 0.42);
+  --platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
+  --platform-bottom-nav-border: rgba(224, 181, 139, 0.64);
+  --platform-bottom-nav-divider: rgba(225, 185, 145, 0.56);
+  --platform-bottom-nav-text: #5b2b19;
+  --platform-bottom-nav-muted-text: #7a4b37;
+  --platform-bottom-nav-active-text: #f15a17;
+  --platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
+  --platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.3);
+  --platform-bottom-nav-primary-text: #fffaf2;
+  --platform-profile-hero-fill: linear-gradient(
+    180deg,
+    rgba(20, 24, 58, 0.96),
+    rgba(8, 10, 24, 0.98)
+  );
+  --platform-profile-hero-border: rgba(160, 169, 255, 0.14);
+  --platform-profile-hero-shadow: 0 24px 70px rgba(5, 8, 28, 0.42);
+  --platform-profile-avatar-fill: linear-gradient(
+    135deg,
+    rgba(91, 108, 255, 0.94),
+    rgba(61, 217, 255, 0.78)
+  );
+  --platform-profile-avatar-shadow: 0 14px 32px rgba(61, 217, 255, 0.16);
+  --platform-profile-chip-fill: rgba(255, 255, 255, 0.08);
+  --platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.14);
+  --platform-profile-chip-text: rgb(228 228 231);
+  --platform-profile-action-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
+  --platform-profile-action-solid: #5b6cff;
+  --platform-profile-action-text: rgb(238 248 255);
+  --platform-profile-action-shadow: 0 14px 32px rgba(91, 108, 255, 0.22);
+  --platform-card-overlay-soft: linear-gradient(
+    180deg,
+    rgba(8, 10, 14, 0.06),
+    rgba(8, 10, 14, 0.74)
+  );
+  --platform-card-overlay-strong: linear-gradient(
+    180deg,
+    rgba(8, 10, 14, 0.14),
+    rgba(8, 10, 14, 0.9)
+  );
+  --platform-card-overlay-deep: radial-gradient(
+      circle at top left,
+      rgba(255, 255, 255, 0.14),
+      transparent 30%
+    ),
+    radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
+    linear-gradient(180deg, rgba(8, 10, 14, 0.22), rgba(8, 10, 14, 0.9));
+  --platform-recommend-runtime-fill: #030303;
+  --platform-recommend-runtime-border: rgba(255, 255, 255, 0.08);
+  --platform-recommend-runtime-shadow: inset 0 0 0 1px
+      rgba(255, 255, 255, 0.025),
+    0 18px 44px rgba(0, 0, 0, 0.18);
+  --platform-recommend-runtime-state-fill: #030303;
+  --platform-recommend-runtime-state-text: rgba(255, 255, 255, 0.92);
+  --puzzle-runtime-shell-fill: #020617;
+  --puzzle-runtime-stage-fill: radial-gradient(
+      circle at 50% 20%,
+      rgba(251, 191, 36, 0.18),
+      transparent 28%
+    ),
+    radial-gradient(
+      circle at 20% 80%,
+      rgba(249, 115, 22, 0.16),
+      transparent 26%
+    ),
+    linear-gradient(180deg, #2d160e, #020617);
+  --puzzle-runtime-grid-line: rgba(255, 255, 255, 0.04);
+  --puzzle-runtime-text-strong: #ffffff;
+  --puzzle-runtime-text-base: rgba(255, 255, 255, 0.82);
+  --puzzle-runtime-text-soft: rgba(255, 255, 255, 0.58);
+  --puzzle-runtime-surface-fill: rgba(0, 0, 0, 0.34);
+  --puzzle-runtime-surface-fill-strong: rgba(0, 0, 0, 0.5);
+  --puzzle-runtime-surface-border: rgba(255, 255, 255, 0.12);
+  --puzzle-runtime-board-fill: rgba(255, 255, 255, 0.08);
+  --puzzle-runtime-board-border: rgba(255, 255, 255, 0.16);
+  --puzzle-runtime-board-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
+  --puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.12);
+  --puzzle-runtime-piece-border: transparent;
+  --puzzle-runtime-piece-empty-fill: rgba(0, 0, 0, 0.18);
+  --puzzle-runtime-piece-empty-text: rgba(255, 255, 255, 0.2);
+  --puzzle-runtime-piece-selected-fill: rgba(251, 191, 36, 0.84);
+  --puzzle-runtime-piece-selected-text: #020617;
+  --puzzle-runtime-piece-selected-border: transparent;
+  --puzzle-runtime-next-card-overlay: rgba(0, 0, 0, 0.1);
+  --puzzle-runtime-control-fill: rgba(0, 0, 0, 0.36);
+  --puzzle-runtime-control-hover-fill: rgba(255, 255, 255, 0.1);
+  --puzzle-runtime-primary-fill: #fde68a;
+  --puzzle-runtime-primary-text: #020617;
+  --puzzle-runtime-primary-shadow: 0 14px 36px rgba(251, 191, 36, 0.26);
+  --puzzle-runtime-accent-text: #fde68a;
+  --puzzle-runtime-cool-text: #cffafe;
+  --puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
+  --puzzle-runtime-danger-text: #fee2e2;
+  --puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
+  --puzzle-runtime-dialog-fill: radial-gradient(
+      circle at 14% 0%,
+      rgba(251, 191, 36, 0.16),
+      transparent 36%
+    ),
+    linear-gradient(180deg, rgba(29, 17, 12, 0.96), rgba(2, 6, 23, 0.96));
+  --puzzle-runtime-dialog-border: rgba(251, 191, 36, 0.22);
+  --puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
+  --puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
+  --puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
+  --puzzle-runtime-next-card-hover-fill: rgba(251, 191, 36, 0.1);
+}
diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx
index 9cfe6b4e4..035e6d3eb 100644
--- a/apps/ai-game-creator-shell/src/view/home/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/home/index.tsx
@@ -12,10 +12,9 @@ import type {
 import { useRef, useState } from 'react';
 
 import {
-  useLauncherHomeDraftStore,
   type HomeAgentMode,
-  type HomeAttachmentDraft,
   type HomeDraft,
+  useLauncherHomeDraftStore,
 } from '../../stores/useHomeDraftStore';
 import { useHomeShowcase } from './useHomeShowcase';
 
@@ -141,28 +140,28 @@ export default function HomeView({
   }
 
   return (
-    <>
+    <div className="platform-theme platform-theme--light">
       <section
-        className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[760px]:min-h-0 max-[760px]:gap-4 max-[760px]:px-3.5 max-[760px]:pb-[34px] max-[760px]:pt-[84px] ${
+        className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[760px]:min-h-0 max-[760px]:gap-4 max-[760px]:px-3.5 max-[760px]:pb-8.5 max-[760px]:pt-21 ${
           hasPromo ? 'pt-33.75 max-[760px]:pt-21' : ''
         }`}
         aria-label="首页输入"
       >
         <div className="flex items-center gap-3 text-center max-[760px]:flex-col max-[760px]:gap-2.5">
-          <span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-[#060606] text-[11px] font-bold text-white">
+          <span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-(image:--platform-button-primary-fill) text-[11px] font-bold text-(--platform-button-primary-text) shadow-(--platform-profile-action-shadow)">
             <ActiveHomeModeIcon size={18} aria-hidden="true" />
           </span>
           <div>
             <h1 className="m-0 text-[27px] font-[750] tracking-normal max-[760px]:text-[22px]">
               陶泥儿 GameAgent
             </h1>
-            <p className="m-0 mt-3 text-[13px] text-[#a0a0a0]">
+            <p className="m-0 mt-3 text-[13px] text-(--platform-text-soft)">
               {activeHomeMode.placeholder}
             </p>
           </div>
         </div>
         <div
-          className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-[9px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
+          className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-2.25 max-[760px]:w-[min(100%,calc(100vw-76px))]"
           aria-label="Agent 分类"
         >
           {homeAgentModeItems.map((item) => {
@@ -174,8 +173,8 @@ export default function HomeView({
                 key={item.mode}
                 className={`inline-flex min-h-6.75 items-center gap-1.25 rounded-full border px-3 text-[12px] ${
                   isActive
-                    ? 'border-violet-500 bg-[#f8f2ff] text-violet-600'
-                    : 'border-[#d6d6d6] bg-white text-[#333]'
+                    ? 'border-(--platform-nav-active-border) bg-(image:--platform-nav-active-fill) text-(--platform-warm-text) shadow-(--platform-nav-active-shadow)'
+                    : 'border-(--platform-subpanel-border) bg-(image:--platform-subpanel-fill) text-(--platform-neutral-text)'
                 }`}
                 onClick={() => setHomeAgentMode(item.mode)}
               >
@@ -186,26 +185,29 @@ export default function HomeView({
           })}
         </div>
         <form
-          className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[760px]:w-[min(100%,calc(100vw-76px))]"
+          className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-(--platform-surface-border) bg-(--platform-input-fill) px-3 pb-2 pt-3.25 shadow-(--platform-panel-shadow) focus-within:bg-(--platform-input-fill-focus) focus-within:ring-4 focus-within:ring-(--platform-input-focus-ring) max-[760px]:w-[min(100%,calc(100vw-76px))]"
           onSubmit={handleHomeSubmit}
         >
           <textarea
-            className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-[#171717] outline-0 placeholder:text-[#bababa]"
+            className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-(--platform-text-strong) outline-0 placeholder:text-(--platform-text-muted)"
             aria-label="创作想法"
             placeholder={activeHomeMode.placeholder}
             value={homePrompt}
             onChange={(event) => setHomePrompt(event.currentTarget.value)}
           />
           {homeAttachments.length > 0 ? (
-            <div className="flex flex-wrap gap-1.5 py-2 pb-1" aria-label="附件队列">
+            <div
+              className="flex flex-wrap gap-1.5 py-2 pb-1"
+              aria-label="附件队列"
+            >
               {homeAttachments.map((attachment) => (
                 <span
-                  className="inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-gray-200 bg-slate-50 px-[7px] text-[11px] text-gray-700"
+                  className="inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) px-1.75 text-[11px] text-(--platform-neutral-text)"
                   key={attachment.id}
                 >
                   {attachment.file.name}
                   <button
-                    className="size-[18px] cursor-pointer border-0 bg-transparent p-0 text-gray-500"
+                    className="size-4.5 cursor-pointer border-0 bg-transparent p-0 text-(--platform-text-soft)"
                     type="button"
                     aria-label={`移除附件 ${attachment.file.name}`}
                     onClick={() => removeHomeAttachment(attachment.id)}
@@ -216,7 +218,7 @@ export default function HomeView({
               ))}
             </div>
           ) : null}
-          <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-[#777]">
+          <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-(--platform-text-soft)">
             <input
               ref={homeAttachmentInputRef}
               className="launcher-file-input pointer-events-none absolute size-px opacity-0"
@@ -225,7 +227,7 @@ export default function HomeView({
               onChange={handleHomeAttachmentSelection}
             />
             <button
-              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-[#666]"
+              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-(--platform-icon-text)"
               type="button"
               aria-label="上传素材"
               onClick={() => homeAttachmentInputRef.current?.click()}
@@ -234,7 +236,7 @@ export default function HomeView({
             </button>
             <span>{status}</span>
             <button
-              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-[#f1f1f1] p-0 text-[#9a9a9a] disabled:cursor-not-allowed disabled:opacity-55"
+              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-(image:--platform-button-primary-fill) p-0 text-(--platform-button-primary-text) shadow-(--platform-profile-action-shadow) disabled:cursor-not-allowed disabled:opacity-55"
               type="submit"
               aria-label="开启创作"
               disabled={homeCreationBusy}
@@ -246,19 +248,21 @@ export default function HomeView({
       </section>
 
       <section
-        className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
+        className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-3.5 max-[760px]:w-[min(100%,calc(100vw-76px))]"
         aria-label="最近项目"
       >
         <header className="flex items-center justify-between gap-3">
           <div>
-            <h2 className="m-0 text-[15px] text-gray-900">最近项目</h2>
-            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">
+            <h2 className="m-0 text-[15px] text-(--platform-text-strong)">
+              最近项目
+            </h2>
+            <p className="mb-0 mt-1 text-[12px] text-(--platform-text-soft)">
               {status}
             </p>
           </div>
           <div className="launcher-project-list-actions">
             <button
-              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
+              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-(--platform-warm-text)"
               type="button"
               onClick={onProjectsOpen}
             >
@@ -271,21 +275,21 @@ export default function HomeView({
             {recentProjectRows.map((project) => (
               <article className="grid min-w-0" key={project.path}>
                 <button
-                  className="grid h-auto w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-[132px]"
+                  className="grid h-auto w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-(--platform-surface-border) bg-(image:--platform-subpanel-fill) p-3 text-left shadow-(--platform-panel-shadow) transition hover:border-(--platform-surface-hover-border) disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-33"
                   type="button"
                   disabled={!project.canOpen}
                   onClick={() => onProjectOpen(project.path)}
                 >
-                  <span className="grid size-[42px] place-items-center rounded-xl bg-white text-[16px] font-bold text-[#f26d2d]">
+                  <span className="grid size-10.5 place-items-center rounded-xl bg-(--platform-warm-bg) text-[16px] font-bold text-(--platform-warm-text)">
                     {project.name.slice(0, 2)}
                   </span>
-                  <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-[#111]">
+                  <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-(--platform-text-strong)">
                     {project.name}
                   </strong>
-                  <small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
+                  <small className="-mt-1.25 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-(--platform-text-soft)">
                     {project.path}
                   </small>
-                  <small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
+                  <small className="-mt-1.25 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-(--platform-text-soft)">
                     {project.status}
                   </small>
                 </button>
@@ -293,11 +297,11 @@ export default function HomeView({
             ))}
           </div>
         ) : (
-          <div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-[18px]">
+          <div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-4.5">
             <FolderKanban size={22} aria-hidden="true" />
             <strong>暂无最近项目</strong>
             <button
-              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
+              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-(--platform-warm-text)"
               type="button"
               onClick={onProjectsOpen}
             >
@@ -308,34 +312,38 @@ export default function HomeView({
       </section>
 
       <section
-        className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
+        className="mx-auto mt-5.5 grid w-[min(1054px,calc(100vw-122px))] gap-3.5 max-[760px]:w-[min(100%,calc(100vw-76px))]"
         aria-label="灵感推荐"
       >
         <header className="flex items-center justify-start gap-3">
           <div className="grid gap-1">
             <span className="inline-flex items-center gap-1.5">
-              <h2 className="m-0 text-[15px] text-gray-900">灵感推荐</h2>
+              <h2 className="m-0 text-[15px] text-(--platform-text-strong)">
+                灵感推荐
+              </h2>
               <Sparkles size={15} aria-hidden="true" />
             </span>
-            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{showcaseStatus}</p>
+            <p className="mb-0 mt-1 text-[12px] text-(--platform-text-soft)">
+              {showcaseStatus}
+            </p>
           </div>
         </header>
         {showcaseResources.length > 0 ? (
           <div className="grid grid-cols-6 gap-3 max-[760px]:grid-cols-1">
             {showcaseResources.map((resource) => (
               <article
-                className="grid gap-[7px] overflow-hidden rounded-lg border border-gray-200 bg-white pb-2.5"
+                className="grid gap-1.75 overflow-hidden rounded-lg border border-(--platform-surface-border) bg-(image:--platform-subpanel-fill) pb-2.5 shadow-(--platform-panel-shadow)"
                 key={resource.showcaseId ?? resource.resourceId}
               >
                 <img
-                  className="aspect-square w-full object-cover bg-gray-100"
+                  className="aspect-square w-full object-cover bg-(--platform-warm-bg)"
                   src={resource.imageSrc}
                   alt={resource.label || resource.prompt || '灵感素材'}
                 />
-                <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[12px] text-gray-900">
+                <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-2.25 text-[12px] text-(--platform-text-strong)">
                   {resource.label || '未命名素材'}
                 </strong>
-                <small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[11px] text-gray-500">
+                <small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-2.25 text-[11px] text-(--platform-text-soft)">
                   {resource.authorDisplayName ||
                     resource.authorPublicUserCode ||
                     '陶泥儿精选'}
@@ -344,11 +352,11 @@ export default function HomeView({
             ))}
           </div>
         ) : (
-          <div className="grid min-h-24 place-items-center overflow-hidden rounded-lg border border-gray-200 bg-white text-[11px] text-gray-500">
+          <div className="grid min-h-24 place-items-center overflow-hidden rounded-lg border border-(--platform-surface-border) bg-(image:--platform-subpanel-fill) text-[11px] text-(--platform-text-soft)">
             {showcaseStatus}
           </div>
         )}
       </section>
-    </>
+    </div>
   );
 }