Merge branch 'master' into feat/home-saas-premium-and-icon-system

Reviewed-on: #30

src/App.tsx

@@ -136,14 +136,27 @@ const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
   "characterMix",
   "more",
 ]);
+const COMPLIANCE_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
+  "communityReview",
+  "communityCaseAdd",
+  "report",
+  "userAgreement",
+  "privacyPolicy",
+]);
 
 let legacyPageStylesPromise: Promise<unknown> | null = null;
+let compliancePageStylesPromise: Promise<unknown> | null = null;
 
 function loadLegacyPageStyles(): Promise<unknown> {
   legacyPageStylesPromise ??= import("./styles/pages/legacy-pages.css");
   return legacyPageStylesPromise;
 }
 
+function loadCompliancePageStyles(): Promise<unknown> {
+  compliancePageStylesPromise ??= import("./styles/pages/compliance.css");
+  return compliancePageStylesPromise;
+}
+
 function normalizeViewKey(rawView: string): WebViewKey {
   const normalized =
     rawView === "profile" || rawView === "auth"
@@ -385,6 +398,9 @@ function App() {
     if (LEGACY_PAGE_STYLE_VIEWS.has(activeView) || ecommerceEverMounted) {
       void loadLegacyPageStyles();
     }
+    if (COMPLIANCE_PAGE_STYLE_VIEWS.has(activeView)) {
+      void loadCompliancePageStyles();
+    }
   }, [activeView, ecommerceEverMounted]);
 
   // Dismiss boot splash after first render

src/components/AppShell.tsx

@@ -101,7 +101,7 @@ function AppShell({
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
   const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
-  const showPageScrollActions = showFloatingNav && !TOOL_SURFACE_VIEW_SET.has(activeView);
+  const showPageScrollActions = false;
 
   const visibleNavItems = useMemo(
     () => {

src/features/home/HomePage.tsx

@@ -1,11 +1,9 @@
 import {
   ArrowRightOutlined,
-  DashboardOutlined,
   FileSearchOutlined,
   PlayCircleOutlined,
   PlusOutlined,
   ShoppingOutlined,
-  ThunderboltOutlined,
 } from "@ant-design/icons";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
@@ -15,7 +13,6 @@ import "../../styles/pages/home.css";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
-import ModelGenerationShowcase from "./ModelGenerationShowcase";
 
 function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
   const { ref, isVisible } = useScrollEntrance<HTMLElement>();
@@ -30,7 +27,6 @@ const [heroImage1, heroImage2, heroImage3] = ossAssets.home.heroSlides;
 const {
   ecommerce: featureEcommerceImage,
   script: featureScriptImage,
-  token: featureTokenImage,
 } = ossAssets.home.features;
 
 interface HomePageProps {
@@ -53,16 +49,6 @@ const HOME_CAROUSEL_IMAGES = [
 ];
 
 const HOME_FEATURES = [
-  {
-    key: "model",
-    eyebrow: "AI Generation",
-    title: "模型生成",
-    description: "通过AI模型生成文本、图片、视频，三种模式覆盖全内容类型，Agent对话式交互智能产出。",
-    imageUrl: featureTokenImage,
-    actionLabel: "开始生成",
-    icon: <ThunderboltOutlined />,
-    stats: ["文本生成", "图片生成", "视频生成"],
-  },
   {
     key: "ecommerce",
     eyebrow: "AI Commerce",
@@ -85,13 +71,6 @@ const HOME_FEATURES = [
   },
 ];
 
-const HOME_EXPERIENCE_POINTS = [
-  { label: "生成", meta: "图像 / 视频", tone: "green" },
-  { label: "测评", meta: "剧本质量", tone: "cyan" },
-  { label: "成本", meta: "Token 用量", tone: "violet" },
-  { label: "电商", meta: "商品视觉", tone: "amber" },
-];
-
 const ECOMMERCE_MATRIX_FEATURES = [
   { icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
   { icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
@@ -195,10 +174,18 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
   const depth = Math.abs(offset);
   const direction = Math.sign(offset);
   const isActive = depth === 0;
-  const xByDepth = [0, 190, 320, 430, 520, 590];
+  const xByDepth = [
+    "0px",
+    "clamp(52px, 13.5vw, 198px)",
+    "clamp(90px, 22.5vw, 334px)",
+    "clamp(122px, 30.5vw, 448px)",
+    "clamp(148px, 37vw, 542px)",
+    "clamp(170px, 42vw, 614px)",
+  ];
   const yByDepth = [8, -2, -8, -13, -18, -24];
   const scaleByDepth = [1, 1, 1, 1, 1, 1];
-  const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
+  const xDistance = xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!;
+  const x = direction < 0 ? `calc(0px - ${xDistance})` : xDistance;
   const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
   const z = isActive ? 90 : 28 - depth;
   const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;
@@ -207,7 +194,7 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
     "--apple-card-offset": offset,
     "--apple-card-depth": depth,
     "--apple-card-z": 80 - depth,
-    "--apple-card-x": `${x}px`,
+    "--apple-card-x": x,
     "--apple-card-y": `${y}px`,
     "--apple-card-z-offset": `${z}px`,
     "--apple-card-rotate-y": "0deg",
@@ -623,15 +610,24 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
           <div className="omni-home__actions" aria-label="首页入口">
             <button type="button" className="omni-home__entry" onClick={onStartOnboarding || onOpenGenerate}>
               <PlusOutlined />
-              <span>新手</span>
+              <span>
+                快速生成
+                <small>新手友好</small>
+              </span>
             </button>
             <button type="button" className="omni-home__entry omni-home__entry--primary" onClick={onOpenCanvas || onOpenGenerate}>
               <PlayCircleOutlined />
-              <span>老手</span>
+              <span>
+                专业创作
+                <small>画布工作流</small>
+              </span>
             </button>
             <button type="button" className="omni-home__entry" onClick={onOpenEcommerce}>
               <ShoppingOutlined />
-              <span>电商</span>
+              <span>
+                电商出图
+                <small>商品视觉</small>
+              </span>
             </button>
           </div>
         </section>
@@ -657,8 +653,6 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
             <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
               {feature.key === "script" ? (
                 <ScriptReviewShowcase />
-              ) : feature.key === "model" ? (
-                <ModelGenerationShowcase />
               ) : feature.key === "ecommerce" ? (
                 <EcommerceFeatureShowcase />
               ) : (
@@ -676,39 +670,6 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
         ))}
 
         <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
-
-        <section className="omni-home__experience" aria-label="点击体验">
-          <div className="omni-home__experience-copy">
-            <span>
-              <ThunderboltOutlined />
-              Click To Experience
-            </span>
-            <h2>一站进入 OmniAI</h2>
-            <p>选择入口，直接开始生成、评测、监控或电商作图。</p>
-          </div>
-          <div className="omni-home__experience-visual" aria-hidden="true">
-            <div className="omni-home__experience-line is-top" />
-            <div className="omni-home__experience-line is-bottom" />
-            <div className="omni-home__experience-routes">
-              {HOME_EXPERIENCE_POINTS.map((point) => (
-                <span key={point.label} className={`omni-home__experience-route is-${point.tone}`}>
-                  <b>{point.label}</b>
-                  <small>{point.meta}</small>
-                </span>
-              ))}
-            </div>
-          </div>
-          <div className="omni-home__experience-actions">
-            <button type="button" className="is-primary" onClick={onOpenGenerate}>
-              <PlayCircleOutlined />
-              立即体验生成
-            </button>
-            <button type="button" onClick={onOpenEcommerce}>
-              <ShoppingOutlined />
-              体验电商生成
-            </button>
-          </div>
-        </section>
       </main>
     </section>
     </>

src/features/home/ModelGenerationShowcase.tsx

@@ -1,12 +1,21 @@
+import {
+  BgColorsOutlined,
+  CameraOutlined,
+  PictureOutlined,
+  PlayCircleOutlined,
+  RobotOutlined,
+  ShoppingOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
 import { useEffect, useRef, useState } from "react";
 import "../../styles/pages/model-generation-showcase.css";
 
 type ShowMode = "agent" | "image" | "video";
 
 const MODE_TABS = [
-  { key: "agent" as const, icon: "🤖", title: "Agent 模式", desc: "文本生成，对话式交互，智能推理" },
+  { key: "agent" as const, icon: <RobotOutlined />, title: "Agent 模式", desc: "文本生成，对话式交互，智能推理" },
-  { key: "image" as const, icon: "🖼️", title: "图片模式", desc: "图像生成，风格迁移，场景合成" },
+  { key: "image" as const, icon: <PictureOutlined />, title: "图片模式", desc: "图像生成，风格迁移，场景合成" },
-  { key: "video" as const, icon: "🎬", title: "视频模式", desc: "视频生成，动态场景，数字人演绎" },
+  { key: "video" as const, icon: <VideoCameraOutlined />, title: "视频模式", desc: "视频生成，动态场景，数字人演绎" },
 ];
 
 const AGENT_OUTPUTS = [
@@ -16,9 +25,9 @@ const AGENT_OUTPUTS = [
 ];
 
 const IMAGE_OUTPUTS = [
-  { tag: "Image", title: "写实风格", icon: "📷", styleClass: "realistic" },
+  { tag: "Image", title: "写实风格", icon: <CameraOutlined />, styleClass: "realistic" },
-  { tag: "Image", title: "插画风格", icon: "🎨", styleClass: "illustration" },
+  { tag: "Image", title: "插画风格", icon: <BgColorsOutlined />, styleClass: "illustration" },
-  { tag: "Image", title: "电商风格", icon: "🛍️", styleClass: "ecommerce" },
+  { tag: "Image", title: "电商风格", icon: <ShoppingOutlined />, styleClass: "ecommerce" },
 ];
 
 const VIDEO_OUTPUTS = [
@@ -160,10 +169,10 @@ function ModelGenerationShowcase() {
                 ))}
               </div>
               <div className="mgs-img-grid">
-                <div className="mgs-img-cell">🎨</div>
+                <div className="mgs-img-cell"><BgColorsOutlined /></div>
-                <div className="mgs-img-cell">🖼️</div>
+                <div className="mgs-img-cell"><PictureOutlined /></div>
-                <div className="mgs-img-cell">✨</div>
+                <div className="mgs-img-cell"><CameraOutlined /></div>
-                <div className="mgs-img-cell">🌈</div>
+                <div className="mgs-img-cell"><ShoppingOutlined /></div>
               </div>
             </div>
           )}
@@ -195,7 +204,7 @@ function ModelGenerationShowcase() {
               </div>
               <div className="mgs-video-preview">
                 <div className="mgs-play-btn">
-                  <svg viewBox="0 0 24 24"><polygon points="6,3 20,12 6,21" /></svg>
+                  <PlayCircleOutlined />
                 </div>
               </div>
               <div className="mgs-video-timeline">
@@ -266,7 +275,7 @@ function ModelGenerationShowcase() {
                   </div>
                   <div className="mgs-out-video-placeholder">
                     <div className="mgs-mini-play">
-                      <svg viewBox="0 0 24 24"><polygon points="6,3 20,12 6,21" /></svg>
+                      <PlayCircleOutlined />
                     </div>
                     <span className="mgs-video-duration">{item.duration}</span>
                   </div>

src/features/home/ToolboxSection.tsx

@@ -1,4 +1,4 @@
-import { ToolOutlined } from "@ant-design/icons";
+import { CameraOutlined, PictureOutlined, ScissorOutlined, ToolOutlined, VideoCameraOutlined } from "@ant-design/icons";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { ossAssets } from "../../data/ossAssets";
 import "../../styles/pages/toolbox.css";
@@ -18,25 +18,25 @@ interface ToolboxSectionProps {
 const TOOLS = [
   {
     key: "image-studio",
-    icon: "🎨",
+    icon: <PictureOutlined />,
     name: "图片工作室",
     desc: "图片二次加工，调色裁剪特效风格迁移",
   },
   {
     key: "lens-lab",
-    icon: "📷",
+    icon: <CameraOutlined />,
     name: "镜头实验室",
     desc: "多视角镜头生成，不同角度与姿势",
   },
   {
     key: "digital-human",
-    icon: "🧑",
+    icon: <VideoCameraOutlined />,
     name: "一键数字人",
     desc: "上传图片和音频，生成数字人视频",
   },
   {
     key: "watermark-removal",
-    icon: "✨",
+    icon: <ScissorOutlined />,
     name: "去除水印",
     desc: "AI智能识别去除图片视频水印",
   },
@@ -47,7 +47,7 @@ const CARDS = [
     key: "image-studio",
     title: "图片工作室",
     tag: "图片加工",
-    icon: "🎨",
+    icon: <PictureOutlined />,
     features: ["二次加工", "调色", "裁剪", "风格迁移"],
     targetView: "imageWorkbench" as WebViewKey,
     render: () => (
@@ -72,7 +72,7 @@ const CARDS = [
     key: "lens-lab",
     title: "镜头实验室",
     tag: "多视角",
-    icon: "📷",
+    icon: <CameraOutlined />,
     features: ["正面", "45°侧", "俯拍", "仰拍", "背面"],
     targetView: "imageWorkbench" as WebViewKey,
     render: () => (
@@ -91,7 +91,7 @@ const CARDS = [
     key: "digital-human",
     title: "一键数字人",
     tag: "视频生成",
-    icon: "🧑",
+    icon: <VideoCameraOutlined />,
     features: ["上传人像", "匹配音频", "唇形同步", "生成视频"],
     targetView: "digitalHuman" as WebViewKey,
     render: () => (
@@ -122,7 +122,7 @@ const CARDS = [
     key: "watermark-removal",
     title: "去除水印",
     tag: "AI清除",
-    icon: "✨",
+    icon: <ScissorOutlined />,
     features: ["智能识别", "精准去除", "无损画质"],
     targetView: "watermarkRemoval" as WebViewKey,
     render: () => (

src/features/more/MorePage.tsx

@@ -40,12 +40,14 @@ interface MoreTool {
 }
 
 const toolPreviewImages: Record<string, string> = {
+  workbench: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/toolbox/image-workbench-20260609132455.png",
   inpaint: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%B1%80%E9%83%A8%E9%87%8D%E7%BB%98.PNG",
   camera: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E9%95%9C%E5%A4%B4%E5%AE%9E%E9%AA%8C%E5%AE%A4.PNG",
   upscale: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%88%86%E8%BE%A8%E7%8E%87%E6%8F%90%E5%8D%87.PNG",
   watermarkRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%8E%BB%E6%B0%B4%E5%8D%B0.PNG",
   dialogGenerator: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%AF%B9%E8%AF%9D%E6%A1%86%E7%94%9F%E6%88%90%E5%99%A8.PNG",
   subtitleRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%AD%97%E5%B9%95%E5%8E%BB%E9%99%A4.PNG",
+  digitalHuman: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/toolbox/digital-human-20260609132455.png",
   characterMix: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E8%A7%92%E8%89%B2%E8%BF%81%E7%A7%BB.PNG",
   avatarConsole: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E6%95%B0%E5%AD%97%E4%BA%BA%E6%8E%A7%E5%88%B6%E5%8F%B0.PNG",
 };
@@ -345,11 +347,12 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className={`more-card more-card--featured${getPreviewClassName(tool.id)}`}
-                  style={{ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))" } as CSSProperties}
+                  style={{
+                    "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))",
+                  } as CSSProperties}
                   aria-label={`打开核心工具：${tool.title}，${tool.text}`}
                   onClick={() => openTool(tool)}
                 >
-                  <span className="more-card__featured-icon">{tool.icon}</span>
                   <div className="more-card__featured-body">
                     <span className="more-card__featured-kicker">{categoryLabels[tool.category]}</span>
                     <strong>{tool.title}</strong>
@@ -388,7 +391,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                     onClick={() => openTool(tool)}
                     disabled={!tool.ready}
                   >
-                    <span className="more-card__icon">{tool.icon}</span>
                     <span className="more-card__topline">
                       {tool.tags.slice(0, 2).map((tag) => (
                         <span key={tag}>{tag}</span>

src/styles/pages/model-generation-showcase.css

@@ -83,14 +83,15 @@
 .mgs-brand-section h1 {
   max-width: 9.6em;
   margin: 0;
-  background: linear-gradient(135deg, var(--mgs-green), var(--mgs-mint), var(--mgs-blue));
+  background: none;
-  -webkit-background-clip: text;
+  color: #eef8f2;
-  background-clip: text;
-  color: transparent;
   font-size: clamp(30px, 2.35cqw, 50px);
   font-weight: 950;
   letter-spacing: 0;
   line-height: 1.16;
+  text-shadow:
+    0 18px 54px rgba(0, 0, 0, 0.38),
+    0 0 34px rgba(0, 255, 136, 0.08);
 }
 
 .mgs-subtitle {
@@ -180,6 +181,10 @@
   font-weight: 900;
 }
 
+.mgs-mode-icon .anticon {
+  font-size: 0.9em;
+}
+
 .mgs-mode-info {
   min-width: 0;
 }
@@ -591,6 +596,10 @@
     box-shadow 200ms ease;
 }
 
+.mgs-img-cell .anticon {
+  font-size: 0.9em;
+}
+
 .mgs-img-cell:hover {
   border-color: var(--mgs-border-hover);
   transform: scale(1.02);
@@ -664,11 +673,9 @@
   transform: scale(1.06);
 }
 
-.mgs-play-btn svg {
+.mgs-play-btn .anticon {
-  width: 34%;
+  color: var(--mgs-green);
-  height: 34%;
+  font-size: 46%;
-  margin-left: 3px;
-  fill: var(--mgs-green);
 }
 
 .mgs-video-timeline {
@@ -900,11 +907,9 @@
   background: rgba(168, 85, 247, 0.18);
 }
 
-.mgs-mini-play svg {
+.mgs-mini-play .anticon {
-  width: 34%;
+  color: var(--mgs-purple);
-  height: 34%;
+  font-size: 54%;
-  margin-left: 2px;
-  fill: var(--mgs-purple);
 }
 
 .mgs-video-duration {
@@ -1003,3 +1008,315 @@
     text-align: left;
   }
 }
+
+/* Home landing responsive containment */
+@media (max-width: 980px) {
+  .web-shell[data-view="home"] .omni-model-gen-showcase {
+    gap: 14px;
+    padding: 18px;
+    overflow-y: auto;
+  }
+
+  .web-shell[data-view="home"] .mgs-brand-section {
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .mgs-brand-section h1 {
+    font-size: clamp(28px, 6vw, 42px);
+  }
+
+  .web-shell[data-view="home"] .mgs-subtitle {
+    font-size: clamp(13px, 2.4vw, 16px);
+    line-height: 1.55;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tabs {
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tab {
+    min-height: 92px;
+    padding: 12px;
+  }
+
+  .web-shell[data-view="home"] .mgs-input-card {
+    min-height: 420px;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-view="home"] .omni-model-gen-showcase {
+    gap: 12px;
+    padding: 14px;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tabs {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tab {
+    grid-template-columns: 42px minmax(0, 1fr);
+    justify-items: stretch;
+    min-height: 70px;
+    text-align: left;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-icon {
+    width: 42px;
+    height: 42px;
+    font-size: 20px;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-info p {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .mgs-workflow {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .mgs-input-card {
+    min-height: 360px;
+  }
+
+  .web-shell[data-view="home"] .mgs-output-cards {
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .mgs-out-card {
+    min-height: auto;
+    padding: 14px;
+  }
+}
+
+/* Homepage landing tune: calmer, responsive product showcase. */
+.web-shell[data-view="home"] .omni-model-gen-showcase {
+  grid-template-columns: minmax(250px, 0.7fr) minmax(330px, 1fr) minmax(330px, 1fr);
+  gap: clamp(16px, 1.8vw, 28px);
+  padding: clamp(22px, 2.4vw, 38px);
+  background: transparent;
+}
+
+.web-shell[data-view="home"] .omni-model-gen-showcase::before {
+  background: radial-gradient(circle at 50% 0%, rgb(0 255 136 / 8%), transparent 34%);
+  opacity: 0.5;
+}
+
+.web-shell[data-view="home"] .omni-model-gen-showcase::after {
+  opacity: 0.1;
+}
+
+.web-shell[data-view="home"] .mgs-left-panel {
+  gap: clamp(14px, 1.6vw, 24px);
+  padding-block: 0;
+}
+
+.web-shell[data-view="home"] .mgs-brand-section {
+  gap: 14px;
+}
+
+.web-shell[data-view="home"] .mgs-brand-section h1 {
+  max-width: 8em;
+  font-size: clamp(32px, 3vw, 48px);
+  line-height: 1.12;
+}
+
+.web-shell[data-view="home"] .mgs-subtitle {
+  color: rgb(232 240 236 / 66%);
+  font-size: clamp(14px, 1.05vw, 16px);
+  line-height: 1.68;
+}
+
+.web-shell[data-view="home"] .mgs-mode-tabs {
+  gap: 10px;
+}
+
+.web-shell[data-view="home"] .mgs-mode-tab,
+.web-shell[data-view="home"] .mgs-workflow,
+.web-shell[data-view="home"] .mgs-input-card,
+.web-shell[data-view="home"] .mgs-out-card {
+  border-color: rgb(255 255 255 / 10%);
+  border-radius: 14px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2.5%)),
+    rgb(8 13 12 / 76%);
+  box-shadow:
+    0 18px 44px rgb(0 0 0 / 22%),
+    inset 0 1px 0 rgb(255 255 255 / 7%);
+}
+
+.web-shell[data-view="home"] .mgs-mode-tab {
+  grid-template-columns: 42px minmax(0, 1fr);
+  min-height: 78px;
+  padding: 12px 14px;
+}
+
+.web-shell[data-view="home"] .mgs-mode-tab:hover {
+  transform: translateX(2px);
+}
+
+.web-shell[data-view="home"] .mgs-mode-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: rgb(255 255 255 / 5%);
+  color: rgb(214 255 236 / 82%);
+  font-size: 20px;
+}
+
+.web-shell[data-view="home"] .mgs-mode-info h3 {
+  font-size: clamp(15px, 1.05vw, 18px);
+}
+
+.web-shell[data-view="home"] .mgs-mode-info p {
+  color: rgb(232 240 236 / 46%);
+  font-size: clamp(12px, 0.82vw, 13px);
+}
+
+.web-shell[data-view="home"] .mgs-workflow {
+  padding: 14px;
+}
+
+.web-shell[data-view="home"] .mgs-workflow-title {
+  margin-bottom: 10px;
+  color: rgb(232 240 236 / 42%);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+
+.web-shell[data-view="home"] .mgs-workflow-steps {
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.web-shell[data-view="home"] .mgs-workflow-steps > span {
+  gap: 8px;
+}
+
+.web-shell[data-view="home"] .mgs-wf-step {
+  min-height: 34px;
+  padding-inline: 10px;
+  font-size: 12px;
+}
+
+.web-shell[data-view="home"] .mgs-input-card {
+  align-self: center;
+  height: auto;
+  min-height: clamp(430px, 48dvh, 560px);
+  max-width: 100%;
+  padding: clamp(18px, 1.8vw, 26px);
+}
+
+.web-shell[data-view="home"] .mgs-card-mode-badge {
+  min-height: 36px;
+  padding-inline: 14px;
+  font-size: 13px;
+}
+
+.web-shell[data-view="home"] .mgs-card-status {
+  font-size: 12px;
+}
+
+.web-shell[data-view="home"] .mgs-prompt-input {
+  height: clamp(82px, 8vw, 112px);
+  font-size: 13px;
+}
+
+.web-shell[data-view="home"] .mgs-agent-result-text,
+.web-shell[data-view="home"] .mgs-out-preview {
+  font-size: 13px;
+  line-height: 1.62;
+}
+
+.web-shell[data-view="home"] .mgs-right-panel {
+  justify-content: center;
+}
+
+.web-shell[data-view="home"] .mgs-output-cards {
+  gap: 12px;
+}
+
+.web-shell[data-view="home"] .mgs-out-card {
+  min-height: clamp(128px, 12dvh, 172px);
+  padding: 16px;
+}
+
+.web-shell[data-view="home"] .mgs-out-title {
+  font-size: clamp(15px, 1.08vw, 18px);
+}
+
+.web-shell[data-view="home"] .mgs-out-img-placeholder,
+.web-shell[data-view="home"] .mgs-out-video-placeholder {
+  min-height: clamp(72px, 7dvh, 104px);
+  border-style: solid;
+}
+
+.web-shell[data-view="home"] .mgs-out-img-placeholder .anticon {
+  font-size: 0.9em;
+}
+
+@container (max-width: 1180px) {
+  .web-shell[data-view="home"] .omni-model-gen-showcase {
+    grid-template-columns: minmax(240px, 0.64fr) minmax(0, 1.36fr);
+  }
+
+  .web-shell[data-view="home"] .mgs-right-panel {
+    grid-column: 1 / -1;
+  }
+
+  .web-shell[data-view="home"] .mgs-output-cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .web-shell[data-view="home"] .omni-model-gen-showcase {
+    grid-template-columns: 1fr;
+    overflow: visible;
+  }
+
+  .web-shell[data-view="home"] .mgs-left-panel {
+    grid-template-rows: auto auto auto;
+  }
+
+  .web-shell[data-view="home"] .mgs-brand-section h1,
+  .web-shell[data-view="home"] .mgs-subtitle {
+    max-width: none;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tab {
+    grid-template-columns: 38px minmax(0, 1fr);
+    min-height: 70px;
+  }
+
+  .web-shell[data-view="home"] .mgs-input-card {
+    min-height: 420px;
+  }
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-view="home"] .omni-model-gen-showcase {
+    padding: 10px 0;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-tabs,
+  .web-shell[data-view="home"] .mgs-output-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="home"] .mgs-mode-info p {
+    display: block;
+  }
+
+  .web-shell[data-view="home"] .mgs-workflow {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .mgs-input-card {
+    min-height: 360px;
+  }
+}

src/styles/pages/more.css

@@ -216,10 +216,10 @@
 
 .more-card--featured {
   display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   align-items: start;
   justify-items: stretch;
-  gap: 16px;
+  gap: 12px;
   min-height: 336px;
   padding: 20px;
   border-color: rgba(var(--accent-rgb), 0.2);
@@ -251,22 +251,6 @@
   box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
 }
 
-.more-card__featured-icon {
-  display: grid;
-  place-items: center;
-  width: 54px;
-  height: 54px;
-  border: 1px solid rgba(var(--accent-rgb), 0.24);
-  border-radius: var(--radius-xs, 8px);
-  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
-    var(--bg-inset);
-  color: var(--accent);
-  font-size: 24px;
-  flex-shrink: 0;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-}
-
 .more-card__featured-body {
   display: flex;
   flex-direction: column;
@@ -281,7 +265,12 @@
 .more-card--featured .more-card__preview {
   width: 100%;
   min-height: 0;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 4 / 3;
+}
+
+.more-card--featured .more-card__preview-frame img {
+  padding: 8px;
+  object-fit: contain;
 }
 
 .more-card--featured.more-card--no-preview {
@@ -449,7 +438,7 @@
 }
 
 .more-card__icon {
-  display: grid;
+  display: none;
   place-items: center;
   width: 38px;
   height: 38px;
@@ -464,6 +453,7 @@
 }
 
 .more-card--recent .more-card__icon {
+  display: grid;
   width: 30px;
   height: 30px;
   font-size: 14px;
@@ -1221,18 +1211,12 @@
   }
 
   .more-card--featured {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
     min-height: 0;
     padding: 16px;
     gap: 12px;
   }
 
-  .more-card__featured-icon {
-    width: 42px;
-    height: 42px;
-    font-size: 20px;
-  }
-
   .more-card__featured-body strong {
     font-size: 16px;
   }
@@ -1312,11 +1296,6 @@
     padding: 15px;
   }
 
-  .more-card__featured-icon {
-    width: 40px;
-    height: 40px;
-  }
-
   .more-card {
     gap: 10px;
     min-height: 0;

src/styles/pages/toolbox.css

@@ -889,3 +889,872 @@
     animation: none;
   }
 }
+
+/* ===== Home toolbox polish and responsive hardening ===== */
+.web-shell[data-view="home"] .omni-home__toolbox-page {
+  --toolbox-radius-card: 16px;
+  --toolbox-radius-inner: 12px;
+  background:
+    linear-gradient(180deg, #070b10 0%, #05080d 100%),
+    radial-gradient(ellipse 70% 48% at 58% 42%, rgba(0, 255, 136, 0.045) 0%, transparent 70%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-shell {
+  width: min(100%, 1440px);
+  margin-inline: auto;
+  padding: clamp(34px, 5vw, 64px) clamp(18px, 5vw, 72px);
+  align-items: center;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-left {
+  width: clamp(300px, 28vw, 420px);
+  gap: 14px;
+  padding-top: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 13px;
+  box-shadow: 0 16px 32px rgba(0, 255, 136, 0.12);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon .anticon {
+  font-size: 24px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+  font-size: clamp(24px, 2.3vw, 32px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-title {
+  color: #f7fff9;
+  background: none;
+  -webkit-text-fill-color: currentColor;
+  font-size: clamp(32px, 3.4vw, 46px);
+  letter-spacing: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+  color: rgba(232, 238, 236, 0.68);
+  font-size: clamp(15px, 1.18vw, 17px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item,
+.web-shell[data-view="home"] .omni-home__toolbox-workflow,
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  border-color: rgba(255, 255, 255, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028)),
+    rgba(10, 15, 16, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.075),
+    0 18px 42px rgba(0, 0, 0, 0.2);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item {
+  border-radius: 14px;
+  padding: 14px 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item:hover {
+  border-color: rgba(0, 255, 136, 0.24);
+  transform: translateX(3px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  font-size: 22px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-name {
+  font-size: 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-desc {
+  font-size: 13px;
+  color: rgba(232, 238, 236, 0.48);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow {
+  margin-top: 4px;
+  border-radius: 14px;
+  padding: 15px 17px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow-label {
+  margin-bottom: 10px;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow-steps {
+  gap: 8px;
+  font-size: 13px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-grid {
+  gap: 14px;
+  min-height: clamp(500px, 48vw, 680px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  border-radius: var(--toolbox-radius-card);
+  transform: translateZ(0);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(0, 255, 136, 0.24);
+  box-shadow:
+    0 22px 54px rgba(0, 0, 0, 0.28),
+    0 0 0 1px rgba(0, 255, 136, 0.07);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-header {
+  padding: 15px 16px 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-content {
+  padding: 10px 16px;
+  min-height: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+  padding: 7px 16px 14px;
+}
+
+.web-shell[data-view="home"] :is(.toolbox-card1-side, .toolbox-card3-side, .toolbox-card4-side),
+.web-shell[data-view="home"] :is(.toolbox-card1-img, .toolbox-card3-portrait, .toolbox-card4-img),
+.web-shell[data-view="home"] .toolbox-card2-frame {
+  border-radius: var(--toolbox-radius-inner);
+}
+
+@media (max-width: 1160px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    gap: 22px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    width: clamp(280px, 32vw, 360px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    min-height: clamp(460px, 58vw, 620px);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    min-height: auto;
+    padding-block: clamp(42px, 7vw, 64px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    width: min(100%, 760px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow {
+    width: 100%;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: clamp(230px, 34vw, 300px);
+  }
+}
+
+@media (max-width: 680px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    padding-inline: 14px;
+    gap: 18px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+    width: 42px;
+    height: 42px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+    font-size: 22px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-title {
+    font-size: clamp(26px, 7vw, 34px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list,
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item {
+    align-items: center;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: 236px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-header {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-tag {
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 420px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow-steps {
+    align-items: flex-start;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow-arrow {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: 220px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+    gap: 5px;
+  }
+}
+
+/* Premium landing pass: keep toolbox content, align material with the home redesign. */
+.web-shell[data-view="home"] .omni-home__toolbox-page {
+  --toolbox-surface: rgb(255 255 255 / 4.5%);
+  --toolbox-elevated: rgb(255 255 255 / 6%);
+  --toolbox-border-subtle: rgb(255 255 255 / 8%);
+  --toolbox-border-default: rgb(255 255 255 / 10%);
+  --toolbox-border-hover: rgb(0 255 136 / 28%);
+  --toolbox-text-primary: #f4f8f5;
+  --toolbox-text-secondary: rgb(232 240 236 / 66%);
+  --toolbox-text-tertiary: rgb(232 240 236 / 42%);
+  border-top-color: rgb(255 255 255 / 7%);
+  background:
+    radial-gradient(circle at 18% 20%, rgb(0 255 136 / 9%), transparent 31%),
+    radial-gradient(circle at 82% 70%, rgb(84 139 255 / 7%), transparent 30%),
+    linear-gradient(180deg, #050807 0%, #030504 100%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-page::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background:
+    linear-gradient(90deg, rgb(255 255 255 / 2.3%) 1px, transparent 1px),
+    linear-gradient(180deg, rgb(255 255 255 / 2.3%) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(180deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 20%));
+  pointer-events: none;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+  border: 1px solid rgb(0 255 136 / 28%);
+  background:
+    linear-gradient(145deg, rgb(0 255 136 / 22%), rgb(255 255 255 / 4%)),
+    rgb(7 17 15 / 90%);
+  color: var(--toolbox-green);
+  box-shadow:
+    0 16px 40px rgb(0 0 0 / 24%),
+    inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-title {
+  background: none;
+  color: var(--toolbox-text-primary);
+  -webkit-text-fill-color: currentColor;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+  color: var(--toolbox-text-secondary);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item,
+.web-shell[data-view="home"] .omni-home__toolbox-workflow,
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  border-color: var(--toolbox-border-default);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2.5%)),
+    rgb(8 13 12 / 78%);
+  box-shadow:
+    0 20px 50px rgb(0 0 0 / 24%),
+    inset 0 1px 0 rgb(255 255 255 / 7%);
+  backdrop-filter: blur(18px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item:hover,
+.web-shell[data-view="home"] .omni-home__toolbox-card:hover {
+  border-color: var(--toolbox-border-hover);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%)),
+    rgb(10 18 16 / 86%);
+  box-shadow:
+    0 26px 62px rgb(0 0 0 / 30%),
+    inset 0 1px 0 rgb(255 255 255 / 8%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon,
+.web-shell[data-view="home"] .omni-home__toolbox-card-icon {
+  border-color: rgb(255 255 255 / 9%);
+  background: rgb(255 255 255 / 5%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-tag,
+.web-shell[data-view="home"] .omni-home__toolbox-card-feat {
+  border-color: rgb(255 255 255 / 8%);
+  background: rgb(255 255 255 / 5%);
+  color: rgb(214 255 236 / 72%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  overflow: hidden;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 34%),
+    radial-gradient(circle at 50% 0%, rgb(0 255 136 / 7%), transparent 42%);
+  pointer-events: none;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Final tune after homepage landing feedback */
+.web-shell[data-view="home"] .omni-home__toolbox-shell {
+  width: min(100%, 1360px);
+  gap: clamp(20px, 2.6vw, 36px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-left {
+  width: clamp(300px, 26vw, 390px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 14px;
+  font-size: 21px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon .anticon {
+  font-size: 21px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+  font-size: clamp(22px, 2vw, 28px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-title {
+  font-size: clamp(32px, 3vw, 44px);
+  line-height: 1.12;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+  max-width: 380px;
+  font-size: clamp(14px, 1.08vw, 16px);
+  line-height: 1.65;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item {
+  gap: 14px;
+  padding: 14px 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon {
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 12px;
+  color: rgb(214 255 236 / 82%);
+  font-size: 18px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon .anticon {
+  font-size: 18px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-name {
+  font-size: 15px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-desc {
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-grid {
+  gap: 14px;
+  min-height: clamp(500px, 45vw, 640px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-icon {
+  width: 30px;
+  height: 30px;
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: 10px;
+  color: rgb(214 255 236 / 82%);
+  font-size: 15px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-icon .anticon {
+  font-size: 15px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-title {
+  font-size: 14px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-tag {
+  font-size: 10px;
+}
+
+/* Homepage landing tune: make this section feel like one product story, not a separate template block. */
+.web-shell[data-view="home"] .omni-home__toolbox-page {
+  min-height: clamp(660px, 86dvh, 820px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-shell {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.78fr) minmax(620px, 1.22fr);
+  align-items: center;
+  width: min(100% - 56px, 1320px);
+  min-height: inherit;
+  margin-inline: auto;
+  padding: clamp(42px, 5.2vw, 72px) 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-left {
+  width: auto;
+  max-width: 390px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon,
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon,
+.web-shell[data-view="home"] .omni-home__toolbox-card-icon {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 3%)),
+    rgb(8 14 13 / 72%);
+  color: rgb(224 248 237 / 82%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 8%),
+    0 12px 30px rgb(0 0 0 / 18%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+  border-color: rgb(255 255 255 / 10%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-list {
+  gap: 10px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item {
+  min-height: 72px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow {
+  padding: 14px 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-height: clamp(520px, 42vw, 620px);
+  gap: 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  min-height: 0;
+  padding: clamp(16px, 1.4vw, 20px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-content {
+  min-height: clamp(170px, 13vw, 220px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+  min-height: 28px;
+  align-items: center;
+}
+
+@media (max-width: 1080px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    grid-template-columns: 1fr;
+    width: min(100% - 40px, 860px);
+    gap: 24px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    max-width: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    width: min(100% - 28px, 520px);
+    padding-block: 36px 44px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list,
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-content {
+    min-height: 176px;
+  }
+}
+
+/* Device-fit pass for the home landing toolbox section. */
+@media (min-width: 1101px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: clamp(620px, 82dvh, 840px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    min-height: inherit;
+    padding-block: clamp(34px, 4.2dvh, 64px);
+  }
+}
+
+@media (min-width: 900px) and (max-width: 1080px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: clamp(620px, 84dvh, 760px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1.32fr);
+    width: min(100% - 48px, 980px);
+    min-height: inherit;
+    gap: 20px;
+    padding-block: 28px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    max-width: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-brand {
+    gap: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-title {
+    font-size: clamp(30px, 3.6vw, 38px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+    font-size: 13px;
+    line-height: 1.55;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item {
+    min-height: 60px;
+    padding: 10px 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    min-height: clamp(430px, 58dvh, 560px);
+    gap: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    padding: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-content {
+    min-height: clamp(138px, 16dvh, 180px);
+  }
+}
+
+@media (max-width: 520px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    width: min(100% - 24px, 430px);
+    padding-block: 28px 34px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-title {
+    font-size: clamp(28px, 8.8vw, 34px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-subtitle,
+  .web-shell[data-view="home"] .omni-home__toolbox-item-desc {
+    font-size: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item {
+    min-height: 58px;
+    padding: 10px 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    gap: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    padding: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-content {
+    min-height: 132px;
+  }
+}
+
+/* Device-fit refinement: toolbox keeps a product-card rhythm across tablet and mobile. */
+@media (min-width: 700px) and (max-width: 899px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
+    width: min(100% - 40px, 820px);
+    gap: 16px;
+    min-height: 0;
+    padding-block: 24px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    gap: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-brand {
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-title {
+    font-size: clamp(28px, 4vw, 38px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 1.45;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item {
+    min-height: 54px;
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item-icon {
+    width: 34px;
+    height: 34px;
+    font-size: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item-name {
+    font-size: 13px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item-desc {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 10px;
+    line-height: 1.3;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    min-height: 0;
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: 178px;
+    padding: 0;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-header {
+    padding: 11px 12px 0;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 13px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-title {
+    font-size: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-tag {
+    padding: 3px 7px;
+    font-size: 9px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-content {
+    min-height: 98px;
+    padding: 6px 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+    padding: 6px 12px 10px;
+  }
+}
+
+@media (max-width: 699px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    width: min(100% - 24px, 430px);
+    gap: 12px;
+    min-height: 0;
+    padding-block: 24px 30px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-title {
+    font-size: clamp(24px, 7.4vw, 32px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 1.4;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 7px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item {
+    min-height: 50px;
+    gap: 7px;
+    padding: 8px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item-name {
+    font-size: 12px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item-desc,
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow,
+  .web-shell[data-view="home"] .omni-home__toolbox-card-feat,
+  .web-shell[data-view="home"] .omni-home__toolbox-card-feat-sep {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    min-height: 0;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: 144px;
+    border-radius: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-header {
+    align-items: flex-start;
+    gap: 6px;
+    padding: 9px 9px 0;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-header-left {
+    gap: 6px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 7px;
+    font-size: 11px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-title {
+    font-size: 11px;
+    line-height: 1.2;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-tag {
+    padding: 2px 5px;
+    font-size: 8px;
+    line-height: 1.2;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-content {
+    min-height: 84px;
+    padding: 4px 8px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+    min-height: 0;
+    padding: 0 9px 9px;
+  }
+}

src/styles/themes/dark-green.css

@@ -144,6 +144,10 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
   isolation: isolate;
 }
 
@@ -170,10 +174,15 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
   top: calc(100% + 12px);
   right: -88px;
+  z-index: 1200;
   width: min(420px, calc(100vw - 24px));
-  max-height: min(560px, calc(100vh - 92px));
+  height: auto;
+  max-height: min(460px, calc(100dvh - 84px));
   border: 1px solid var(--dg-line);
   border-radius: 16px;
   background: #151719;
@@ -182,6 +191,17 @@
   overflow: hidden;
 }
 
+.web-shell[data-ui-theme="dark-green"][data-view="home"] .notification-center__panel {
+  contain: layout paint;
+  width: min(380px, calc(100vw - 24px));
+  max-height: min(420px, calc(100dvh - 92px));
+  transform-origin: top right;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="home"] .notification-center__list {
+  max-height: min(336px, calc(100dvh - 164px));
+}
+
 .web-shell[data-ui-theme="dark-green"] .notification-center__panel::before {
   content: "";
   position: absolute;
@@ -231,9 +251,12 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center__list {
-  max-height: min(486px, calc(100vh - 158px));
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: min(386px, calc(100dvh - 158px));
   padding: 8px;
   overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center__item {
@@ -10466,6 +10489,21 @@
     gap: 6px;
   }
 
+  .web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+    right: clamp(-112px, -24vw, -92px);
+    width: min(360px, calc(100vw - 20px));
+    max-height: min(420px, calc(100dvh - 76px));
+    border-radius: 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .notification-center__panel::before {
+    right: clamp(104px, 25vw, 124px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .notification-center__list {
+    max-height: min(344px, calc(100dvh - 150px));
+  }
+
   .web-shell[data-ui-theme="dark-green"] :is(.creator-button, .member-button) {
     height: 32px;
     padding: 0 10px;