feat: 首页SaaS高端化视觉升级与图标系统统一

本次提交包含以下改进： ## 1. 首页架构精简 (HomePage.tsx) - 移除模型生成(ModelGenerationShowcase)专题区和相关导入 - 移除"一站进入 OmniAI"Experience体验区及HOME_EXPERIENCE_POINTS - 移除未使用的导入(DashboardOutlined, ThunderboltOutlined) - 首页专题区从3个(model/ecommerce/script)缩减为2个(ecommerce/script) - 轮播卡片x偏移量从固定px值改为clamp()流式响应式单位 ## 2. 首页入口按钮重设计 (HomePage.tsx) - 按钮文案升级：新手→快速生成(副标题:新手友好)，老手→专业创作(副标题:画布工作流)，电商→电商出图(副标题:商品视觉) - 每个按钮新增small元素展示副标题 - 主按钮(专业创作)渐变绿色背景+发光阴影 ## 3. 图标系统统一 — Emoji→Ant Design (ModelGenerationShowcase.tsx + ToolboxSection.tsx) - ModelGenerationShowcase: emoji(🤖🖼️🎬📷🎨🛍️🌈✨)全部替换为对应的@ant-design/icons组件 - ToolboxSection: emoji(🎨📷🧑✨)替换为PictureOutlined/CameraOutlined/VideoCameraOutlined/ScissorOutlined - SVG播放按钮替换为PlayCircleOutlined ## 4. 工具预览图补充 (MorePage.tsx) - 为workbench核心工具添加预览图URL - 为digitalHuman工具添加预览图URL ## 5. 合规页面按需样式加载 (App.tsx) - 新增COMPLIANCE_PAGE_STYLE_VIEWS集合(communityReview/communityCaseAdd/report/userAgreement/privacyPolicy) - 新增loadCompliancePageStyles()动态加载compliance.css - 只在进入合规页面时才加载对应样式，减少首屏CSS体积 ## 6. 全局滚动操作按钮禁用 (AppShell.tsx) - showPageScrollActions强制设为false，全局禁用页面滚动到顶部/底部的浮动按钮 ## 7. 首页Premium SaaS视觉升级 (home.css) - 全新CSS变量体系：--home-card-radius/panel-radius/section-line/panel-border/text-strong/muted/faint - 背景三层渐变叠加+双radial光晕(brand green+blue accent) - Hero区域：eyebrow胶囊标签(绿点+毛玻璃)、h1字重950+text-shadow、描述text-wrap:balance - 轮播卡片：流式clamp尺寸、非激活卡滤镜降饱和、激活卡高亮阴影、底部渐变分割线 - 入口按钮组：统一三列grid布局、图标圆形背景、hover微上移 - Feature专题页：grid网格背景+radial光晕+border分割线、Visual卡片统一玻璃态 - Ecommerce Matrix全面重写：三栏→自适应grid、feature/item/input/ai-node/output全组件玻璃态统一风格 - Experience区域：双radial光晕+网格纹理背景、路线卡片route-color动态渐变 - Script Review专题区：专属高度/内边距/溢出控制，容器查询适配 - Cookie Consent移动端优化 ## 8. 响应式断点矩阵 (home.css) - 1200px: 轮播卡片尺寸压缩 - 1100px: 专题页解除固定高度，Matrix双列布局 - 980px: h1字号clamp、轮播缩小、Matrix紧凑间距 - 899px: 专题页inline padding收紧 - 720px: 入口按钮堆叠、轮播全宽、专题页解除overflow - 699px: Matrix grid-template-areas重构(copy+input双栏，outputs全宽) - 640px: Matrix单列、feature-icon/text逐级隐藏 - 520px: output-group水平grid、output-cards三列 - 480px: 全页面紧缩、h1最大字号、carousel最小尺寸 ## 9. 入口按钮多轮视觉打磨 (home.css 多轮迭代) - Round 1: 绿色主题毛玻璃+三列grid - Round 2: 暗色产品路径选择器风格，actions外框+entry透明 - Round 3: 回归深色面板风格(#101214)，保持原始配色调性 ## 10. Ecommerce Matrix分层响应式策略 (home.css) - 1101px+: 三列流式宽度+dvh高度自适应 - 900-1100px: 三列紧凑+逐步隐藏描述文字 - 700-899px: 三列超紧凑+大量line-clamp截断 - <699px: grid-template-areas双栏+全宽输出 - <640px: 全单列堆叠 ## 11. 脚本评审Showcase容器查询 (script-review-showcase.css) - 外层@media保留padding控制 - 内层@container查询适配880px/720px/560px断点 - 图表列720px以下水平进度条布局 - 品牌区域/评分标签/流程卡片逐级压缩
feat: 首页响应式视觉升级与全局UI细节打磨
2026-06-09 18:45:57 +08:00 · 2026-06-09 14:22:37 +08:00 · 2026-06-08 18:57:07 +08:00
13 changed files with 5698 additions and 426 deletions
@@ -132,14 +132,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"
@@ -378,6 +391,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
@@ -93,7 +93,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(
    () => {
@@ -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 {
@@ -52,16 +48,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",
@@ -84,13 +70,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: "多场景、多尺寸批量生成" },
@@ -194,10 +173,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]!;
@@ -206,7 +193,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",
@@ -622,15 +609,24 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
          <div className="omni-home__actions" aria-label="首页入口">
            <button type="button" className="omni-home__entry" onClick={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>
@@ -656,8 +652,6 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
            <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 />
              ) : (
@@ -675,39 +669,6 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
        ))}

        <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>
    </>
@@ -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: "image" as const, icon: "🖼️", title: "图片模式", desc: "图像生成，风格迁移，场景合成" },
-  { key: "video" as const, icon: "🎬", title: "视频模式", desc: "视频生成，动态场景，数字人演绎" },
+  { key: "agent" as const, icon: <RobotOutlined />, title: "Agent 模式", desc: "文本生成，对话式交互，智能推理" },
+  { key: "image" as const, icon: <PictureOutlined />, 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: "🎨", styleClass: "illustration" },
-  { tag: "Image", title: "电商风格", icon: "🛍️", styleClass: "ecommerce" },
+  { tag: "Image", title: "写实风格", icon: <CameraOutlined />, styleClass: "realistic" },
+  { tag: "Image", title: "插画风格", icon: <BgColorsOutlined />, styleClass: "illustration" },
+  { 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">🖼️</div>
-                <div className="mgs-img-cell">✨</div>
-                <div className="mgs-img-cell">🌈</div>
+                <div className="mgs-img-cell"><BgColorsOutlined /></div>
+                <div className="mgs-img-cell"><PictureOutlined /></div>
+                <div className="mgs-img-cell"><CameraOutlined /></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>
@@ -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: () => (
@@ -37,117 +37,155 @@ interface MoreTool {
  imageTool?: WebImageWorkbenchTool;
  ready: boolean;
  badge?: string;
-  featured?: boolean;
 }

-type CompareScene =
-  | "workbench"
-  | "inpaint"
-  | "camera"
-  | "upscale"
-  | "watermark"
-  | "dialog"
-  | "subtitle"
-  | "digital-human"
-  | "character"
-  | "avatar";
-
-const toolCompareScenes: Record<string, CompareScene> = {
-  workbench: "workbench",
-  inpaint: "inpaint",
-  camera: "camera",
-  upscale: "upscale",
-  watermarkRemoval: "watermark",
-  dialogGenerator: "dialog",
-  subtitleRemoval: "subtitle",
-  digitalHuman: "digital-human",
-  characterMix: "character",
-  avatarConsole: "avatar",
+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",
 };

-function ToolComparePanel({ scene }: { scene: CompareScene }) {
+function ToolPreviewPanel({ toolId }: { toolId: string }) {
+  const imageUrl = toolPreviewImages[toolId];
+  if (!imageUrl) return null;
+
  return (
-    <span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
-      <span className="more-card__compare-labels">
-        <span>Before</span>
-        <span>After</span>
-      </span>
-      <span className="more-card__compare-stage">
-        <span className="more-card__compare-side more-card__compare-side--before">
-          <span className="more-card__scene-subject" />
-          <span className="more-card__scene-detail" />
-          <span className="more-card__scene-overlay" />
-        </span>
-        <span className="more-card__compare-divider">
-          <span />
-        </span>
-        <span className="more-card__compare-side more-card__compare-side--after">
-          <span className="more-card__scene-subject" />
-          <span className="more-card__scene-detail" />
-          <span className="more-card__scene-overlay" />
-        </span>
+    <span className="more-card__preview" aria-hidden="true">
+      <span className="more-card__preview-frame">
+        <img src={imageUrl} alt="" loading="lazy" decoding="async" />
      </span>
+      <img className="more-card__preview-popover" src={imageUrl} alt="" loading="lazy" decoding="async" />
    </span>
  );
 }

-const tools: MoreTool[] = [
-  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
-  { id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
-  { id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
-  { id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
-  { id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
-  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
-  { id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
-  { id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
-  { id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
-  { id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
-];
-
-interface FeaturedTool {
-  id: string;
-  title: string;
-  desc: string;
-  kicker: string;
-  steps: string[];
-  outcome: string;
-  icon: ReactNode;
-  imageTool?: WebImageWorkbenchTool;
-  target?: WebViewKey;
-  category: ToolCategory;
-  gradient: string;
+function getPreviewClassName(toolId: string) {
+  return toolPreviewImages[toolId] ? " more-card--has-preview" : " more-card--no-preview";
 }

-const featuredTools: FeaturedTool[] = [
+const tools: MoreTool[] = [
  {
    id: "workbench",
    title: "图片工作台",
-    desc: "从一张素材开始，完成精修、合成和二次创作。",
-    kicker: "图片精修工作流",
-    steps: ["上传素材", "局部修复", "高清导出"],
-    outcome: "适合商品图、海报图和创意视觉",
+    text: "融合、修复、局部增强",
+    useCase: "适合商品图精修、创意合成和局部画面重做",
+    tags: ["热门", "一站式", "商品图"],
    icon: <EditOutlined />,
-    imageTool: "workbench",
    category: "image",
-    gradient: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
+    imageTool: "workbench",
+    ready: true,
+  },
+  {
+    id: "inpaint",
+    title: "局部重绘",
+    text: "修掉瑕疵、替换物体、重做局部画面",
+    useCase: "适合快速处理商品瑕疵、人物细节和背景杂物",
+    tags: ["新手推荐", "精修"],
+    icon: <HighlightOutlined />,
+    category: "image",
+    imageTool: "inpaint",
+    ready: true,
+  },
+  {
+    id: "camera",
+    title: "镜头实验室",
+    text: "快速生成俯拍、特写、广角等商业镜头",
+    useCase: "适合做产品主图、种草图和不同机位方案",
+    tags: ["电商常用", "镜头"],
+    icon: <CameraOutlined />,
+    category: "image",
+    imageTool: "camera",
+    ready: true,
+  },
+  {
+    id: "upscale",
+    title: "分辨率提升",
+    text: "把低清图片或视频提升到可交付质感",
+    useCase: "适合修复旧素材、放大商品图和增强短视频清晰度",
+    tags: ["高清", "交付前"],
+    icon: <ColumnWidthOutlined />,
+    category: "image",
+    target: "resolutionUpscale",
+    ready: true,
+  },
+  {
+    id: "watermarkRemoval",
+    title: "去水印",
+    text: "智能去除图片水印、文字和遮挡元素",
+    useCase: "适合整理素材、清理参考图和恢复画面干净度",
+    tags: ["素材清理", "高频"],
+    icon: <DeleteOutlined />,
+    category: "image",
+    target: "watermarkRemoval",
+    ready: true,
+  },
+  {
+    id: "dialogGenerator",
+    title: "交互式对话框生成器",
+    text: "上传背景图，快速制作可拖拽编辑的对话框",
+    useCase: "适合剧情海报、社媒截图和角色对白设计",
+    tags: ["内容创作", "可编辑"],
+    icon: <MessageOutlined />,
+    category: "image",
+    target: "dialogGenerator",
+    ready: true,
+  },
+  {
+    id: "subtitleRemoval",
+    title: "字幕去除",
+    text: "擦除视频字幕，让画面重新变干净",
+    useCase: "适合二创前素材整理、短视频重剪和画面修复",
+    tags: ["视频增强", "素材清理"],
+    icon: <DeleteOutlined />,
+    category: "video",
+    target: "subtitleRemoval",
+    ready: true,
  },
  {
    id: "digitalHuman",
    title: "数字人",
-    desc: "用参考人像和音频，快速生成可交付口播视频。",
-    kicker: "口播视频工作流",
-    steps: ["选择人像", "上传音频", "生成视频"],
-    outcome: "适合品牌讲解、课程和带货短视频",
+    text: "用一张人像和音频生成口播视频",
+    useCase: "适合品牌讲解、课程口播和带货短视频",
+    tags: ["热门", "口播", "视频"],
    icon: <CustomerServiceOutlined />,
-    target: "digitalHuman",
    category: "video",
-    gradient: "linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(6, 182, 212, 0.06))",
+    target: "digitalHuman",
+    ready: true,
+  },
+  {
+    id: "characterMix",
+    title: "角色迁移",
+    text: "把人物图迁移到参考视频的动作里",
+    useCase: "适合角色短片、动作复刻和虚拟人内容生产",
+    tags: ["角色视频", "动作"],
+    icon: <SwapOutlined />,
+    category: "video",
+    target: "characterMix",
+    ready: true,
+  },
+  {
+    id: "avatarConsole",
+    title: "数字人控制台",
+    text: "管理形象、播报、互动与接入配置",
+    useCase: "适合持续运营数字人、配置品牌形象和复用口播模板",
+    tags: ["运营台", "企业"],
+    icon: <DashboardOutlined />,
+    category: "video",
+    target: "avatarConsole",
+    ready: true,
  },
 ];

 const categoryLabels: Record<ToolCategory, string> = {
  image: "图像创作",
-  video: "视频生成",
+  video: "视频创作",
 };

 const categoryIcons: Record<ToolCategory, ReactNode> = {
@@ -162,6 +200,20 @@ const filters: { key: FilterKey; label: string }[] = [
  { key: "upcoming", label: "即将上线" },
 ];

+const coreToolIds = new Set(["workbench", "inpaint", "watermarkRemoval"]);
+
+const coreToolGradients: Record<string, string> = {
+  workbench: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
+  inpaint: "linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.055))",
+  watermarkRemoval: "linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(var(--accent-rgb), 0.055))",
+};
+
+const coreToolSteps: Record<string, string[]> = {
+  workbench: ["上传素材", "局部修复", "高清导出"],
+  inpaint: ["选定区域", "描述修改", "生成结果"],
+  watermarkRemoval: ["上传素材", "智能识别", "干净导出"],
+};
+
 const RECENT_STORAGE_KEY = "omniai:more-recent-tools";
 const MAX_RECENT = 4;

@@ -169,7 +221,9 @@ function getRecentToolIds(): string[] {
  try {
    const raw = localStorage.getItem(RECENT_STORAGE_KEY);
    return raw ? JSON.parse(raw) : [];
-  } catch { return []; }
+  } catch {
+    return [];
+  }
 }

 function pushRecentToolId(id: string) {
@@ -199,39 +253,29 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
    }
  }, [onOpenImageTool, onSelectView]);

-  const openFeaturedTool = useCallback((tool: FeaturedTool) => {
-    pushRecentToolId(tool.id);
-    setRecentIds(getRecentToolIds());
-    if (tool.imageTool && onOpenImageTool) {
-      onOpenImageTool(tool.imageTool);
-      return;
-    }
-    if (tool.target && onSelectView) {
-      onSelectView(tool.target);
-    }
-  }, [onOpenImageTool, onSelectView]);
-
-  const filteredTools = tools.filter((t) => {
-    if (t.featured) return false;
+  const filteredTools = tools.filter((tool) => {
+    if (coreToolIds.has(tool.id)) return false;
    if (filter === "all") return true;
-    if (filter === "upcoming") return !t.ready;
-    return t.category === filter;
+    if (filter === "upcoming") return !tool.ready;
+    return tool.category === filter;
  });

  const filterCounts: Record<FilterKey, number> = {
-    all: tools.filter((t) => !t.featured).length,
-    image: tools.filter((t) => !t.featured && t.category === "image").length,
-    video: tools.filter((t) => !t.featured && t.category === "video").length,
-    upcoming: tools.filter((t) => !t.featured && !t.ready).length,
+    all: tools.filter((tool) => !coreToolIds.has(tool.id)).length,
+    image: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "image").length,
+    video: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "video").length,
+    upcoming: tools.filter((tool) => !coreToolIds.has(tool.id) && !tool.ready).length,
  };

  const recentTools = recentIds
-    .map((id) => tools.find((t) => t.id === id))
-    .filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
+    .map((id) => tools.find((tool) => tool.id === id))
+    .filter((tool): tool is MoreTool => Boolean(tool) && (tool?.ready ?? false));

-  const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, t) => {
-    if (!acc[t.category]) acc[t.category] = [];
-    acc[t.category].push(t);
+  const coreTools = tools.filter((tool) => coreToolIds.has(tool.id));
+
+  const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, tool) => {
+    if (!acc[tool.category]) acc[tool.category] = [];
+    acc[tool.category].push(tool);
    return acc;
  }, {} as Record<ToolCategory, MoreTool[]>);

@@ -247,19 +291,19 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
        </div>
        <div className="more-page-v2__header-meta" aria-label="工具盒概览">
          <span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
-          <span>{featuredTools.length} 个核心入口</span>
+          <span>{coreTools.length} 个核心入口</span>
        </div>
        <nav className="more-page-v2__filters" aria-label="工具分类筛选">
-          {filters.map((f) => (
+          {filters.map((item) => (
            <button
-              key={f.key}
+              key={item.key}
              type="button"
-              className={filter === f.key ? "is-active" : ""}
-              aria-pressed={filter === f.key}
-              onClick={() => setFilter(f.key)}
+              className={filter === item.key ? "is-active" : ""}
+              aria-pressed={filter === item.key}
+              onClick={() => setFilter(item.key)}
            >
-              <span>{f.label}</span>
-              <em>{filterCounts[f.key]}</em>
+              <span>{item.label}</span>
+              <em>{filterCounts[item.key]}</em>
            </button>
          ))}
        </nav>
@@ -298,27 +342,28 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
              <ThunderboltOutlined /> 核心工具
            </h2>
            <div className="more-page-v2__featured-grid">
-              {featuredTools.map((tool) => (
+              {coreTools.map((tool) => (
                <button
                  key={tool.id}
                  type="button"
-                  className="more-card more-card--featured"
-                  style={{ "--card-gradient": tool.gradient } as CSSProperties}
-                  aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
-                  onClick={() => openFeaturedTool(tool)}
+                  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}
+                  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">{tool.kicker}</span>
+                    <span className="more-card__featured-kicker">{categoryLabels[tool.category]}</span>
                    <strong>{tool.title}</strong>
-                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
-                    <span className="more-card__featured-desc">{tool.desc}</span>
+                    <ToolPreviewPanel toolId={tool.id} />
+                    <span className="more-card__featured-desc">{tool.text}</span>
                    <span className="more-card__steps" aria-hidden="true">
-                      {tool.steps.map((step) => (
+                      {(coreToolSteps[tool.id] ?? tool.tags.slice(0, 3)).map((step) => (
                        <span key={step}>{step}</span>
                      ))}
                    </span>
-                    <span className="more-card__outcome">{tool.outcome}</span>
+                    <span className="more-card__outcome">{tool.useCase}</span>
                    <span className="more-card__cta">开始使用 →</span>
                  </div>
                </button>
@@ -341,19 +386,18 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                  <button
                    key={tool.id}
                    type="button"
-                    className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
+                    className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}${getPreviewClassName(tool.id)}`}
                    aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
                    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>
                      ))}
                    </span>
                    <strong>{tool.title}</strong>
-                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
+                    <ToolPreviewPanel toolId={tool.id} />
                    <span className="more-card__desc">{tool.text}</span>
                    <span className="more-card__use-case">{tool.useCase}</span>
                    <span className="more-card__action">打开工具 →</span>
@@ -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));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  background: none;
+  color: #eef8f2;
  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 {
-  width: 34%;
-  height: 34%;
-  margin-left: 3px;
-  fill: var(--mgs-green);
+.mgs-play-btn .anticon {
+  color: var(--mgs-green);
+  font-size: 46%;
 }

 .mgs-video-timeline {
@@ -900,11 +907,9 @@
  background: rgba(168, 85, 247, 0.18);
 }

-.mgs-mini-play svg {
-  width: 34%;
-  height: 34%;
-  margin-left: 2px;
-  fill: var(--mgs-purple);
+.mgs-mini-play .anticon {
+  color: var(--mgs-purple);
+  font-size: 54%;
 }

 .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;
+  }
+}
@@ -1,6 +1,11 @@
 .more-page-v2 {
-  --more-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
-  --more-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 38px rgba(0, 0, 0, 0.16);
+  --more-card-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
+  --more-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.035), 0 16px 34px rgba(0, 0, 0, 0.18);
+  --more-card-surface: rgba(19, 23, 24, 0.86);
+  --more-card-surface-strong: rgba(22, 27, 28, 0.94);
+  --more-card-border: rgba(255, 255, 255, 0.105);
+  --more-card-border-strong: rgba(var(--accent-rgb), 0.3);
+  --more-page-pad-x: clamp(18px, 2.3vw, 32px);

  position: relative;
  display: grid;
@@ -158,24 +163,24 @@

 .more-page-v2__scroll {
  overflow-y: auto;
-  padding: 26px 28px 68px;
+  padding: 28px var(--more-page-pad-x) 72px;
  scrollbar-color: rgba(var(--accent-rgb), 0.26) transparent;
 }

 .more-page-v2__section {
-  margin-bottom: 30px;
+  margin-bottom: 34px;
 }

 .more-page-v2__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
-  margin: 0 0 15px;
-  color: var(--fg-muted);
+  margin: 0 0 14px;
+  color: color-mix(in srgb, var(--fg-muted) 86%, var(--fg-body));
  font-size: 12px;
-  font-weight: 800;
+  font-weight: 850;
  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.055em;
 }

 .more-page-v2__section-title .anticon {
@@ -199,27 +204,31 @@

 .more-page-v2__recent-row {
  display: flex;
-  gap: 12px;
+  gap: 10px;
  flex-wrap: wrap;
 }

 .more-page-v2__featured-grid {
  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 18px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
 }

 .more-card--featured {
-  display: flex;
-  align-items: flex-start;
-  gap: 18px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  justify-items: stretch;
+  gap: 12px;
+  min-height: 336px;
  padding: 20px;
-  border-color: rgba(var(--accent-rgb), 0.18);
+  border-color: rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-xs, 8px);
  background:
    var(--card-gradient),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
-    var(--bg-panel);
+    radial-gradient(circle at 14% 4%, rgba(var(--accent-rgb), 0.12), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
+    var(--more-card-surface-strong);
  box-shadow: var(--more-card-glow);
  position: relative;
  overflow: hidden;
@@ -230,42 +239,52 @@
  position: absolute;
  inset: 0;
  background:
-    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%);
-  opacity: 0.5;
+    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.038), transparent),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%);
+  opacity: 0.62;
  pointer-events: none;
 }

 .more-card--featured:hover {
-  border-color: rgba(var(--accent-rgb), 0.45);
-  transform: translateY(-3px);
-  box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
-}
-
-.more-card__featured-icon {
-  display: grid;
-  place-items: center;
-  width: 52px;
-  height: 52px;
-  border: 1px solid rgba(var(--accent-rgb), 0.22);
-  border-radius: var(--radius-xs, 8px);
-  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), 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);
+  border-color: rgba(var(--accent-rgb), 0.46);
+  transform: translateY(-2px);
+  box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
 }

 .more-card__featured-body {
  display: flex;
  flex-direction: column;
-  gap: 9px;
+  gap: 10px;
+  justify-self: stretch;
+  width: 100%;
+  height: 100%;
  min-width: 0;
  text-align: left;
 }

+.more-card--featured .more-card__preview {
+  width: 100%;
+  min-height: 0;
+  aspect-ratio: 4 / 3;
+}
+
+.more-card--featured .more-card__preview-frame img {
+  padding: 8px;
+  object-fit: contain;
+}
+
+.more-card--featured.more-card--no-preview {
+  min-height: 0;
+}
+
+.more-card--featured.more-card--no-preview .more-card__featured-body {
+  justify-content: flex-start;
+}
+
+.more-card--featured.more-card--no-preview .more-card__outcome {
+  margin-top: 4px;
+}
+
 .more-card__featured-kicker {
  width: fit-content;
  color: var(--accent);
@@ -277,14 +296,14 @@

 .more-card__featured-body strong {
  color: var(--fg-body);
-  font-size: 18px;
-  font-weight: 800;
+  font-size: 20px;
+  font-weight: 850;
  line-height: 1.25;
 }

 .more-card__featured-desc {
  font-size: 13px;
-  color: var(--fg-muted);
+  color: color-mix(in srgb, var(--fg-muted) 88%, var(--fg-body));
  line-height: 1.5;
 }

@@ -327,20 +346,23 @@
  display: inline-flex;
  align-items: center;
  width: fit-content;
-  min-height: 28px;
-  margin-top: 0;
-  padding: 0 10px;
-  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  min-height: 32px;
+  margin-top: auto;
+  padding: 0 12px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
  border-radius: var(--radius-xs, 8px);
-  background: rgba(var(--accent-rgb), 0.08);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
+    rgba(var(--accent-rgb), 0.06);
  font-size: 12px;
-  font-weight: 800;
+  font-weight: 850;
  color: var(--accent) !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }

 .more-page-v2__grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
 }

@@ -350,18 +372,22 @@
  align-content: start;
  justify-items: start;
  min-width: 0;
-  gap: 10px;
+  min-height: 392px;
+  gap: 12px;
  padding: 18px;
-  border: 1px solid var(--border-weak);
+  border: 1px solid var(--more-card-border);
  border-radius: var(--radius-xs, 8px);
  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 42%),
-    var(--bg-panel);
+    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.055), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
+    var(--more-card-surface);
  color: var(--fg-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 1px 0 rgba(255, 255, 255, 0.02);
  transition:
    border-color 160ms ease,
    background 160ms ease,
@@ -370,12 +396,19 @@
 }

 .more-card:hover {
-  border-color: rgba(var(--accent-rgb), 0.38);
+  border-color: var(--more-card-border-strong);
  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
-    var(--bg-hover, rgba(255, 255, 255, 0.03));
+    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.085), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 46%),
+    rgba(24, 29, 30, 0.94);
  transform: translateY(-2px);
-  box-shadow: var(--more-card-glow), 0 10px 26px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--more-card-glow), 0 14px 30px rgba(0, 0, 0, 0.18);
+}
+
+.more-card:active,
+.more-page-v2__filters button:active,
+.more-page-v2__empty-action:active {
+  transform: translateY(0);
 }

 .more-card--pending {
@@ -395,17 +428,20 @@
  display: flex;
  align-items: center;
  gap: 10px;
-  min-width: 150px;
-  min-height: 54px;
-  padding: 10px 14px;
-  border-color: rgba(var(--accent-rgb), 0.14);
+  min-width: 164px;
+  min-height: 58px;
+  padding: 11px 14px;
+  border-color: rgba(var(--accent-rgb), 0.16);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.016)),
+    rgba(18, 23, 24, 0.88);
 }

 .more-card__icon {
-  display: grid;
+  display: none;
  place-items: center;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: var(--radius-xs, 8px);
  background:
@@ -417,6 +453,7 @@
 }

 .more-card--recent .more-card__icon {
+  display: grid;
  width: 30px;
  height: 30px;
  font-size: 14px;
@@ -437,15 +474,15 @@
 .more-card strong {
  max-width: 100%;
  color: var(--fg-body);
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1.35;
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.28;
 }

 .more-card__topline {
  position: absolute;
-  top: 14px;
-  right: 14px;
+  top: 18px;
+  right: 18px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
@@ -472,9 +509,9 @@
  position: relative;
  display: block;
  width: 100%;
-  min-height: 92px;
+  min-height: 104px;
  overflow: hidden;
-  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 34%),
@@ -483,8 +520,7 @@
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
-    0 0 20px rgba(var(--accent-rgb), 0.08);
-  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
+    0 0 18px rgba(var(--accent-rgb), 0.07);
  isolation: isolate;
 }

@@ -506,7 +542,6 @@
  inset: 5px;
  z-index: 3;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
-  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  content: "";
  pointer-events: none;
 }
@@ -880,15 +915,102 @@
  border-radius: 8px;
 }

+.more-card__preview {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.42 / 1;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.more-card__preview-frame {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: var(--radius-xs, 8px);
+  background:
+    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.12), transparent 56%),
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 34%),
+    var(--bg-inset);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    0 0 18px rgba(var(--accent-rgb), 0.06);
+}
+
+.more-card__preview-frame::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(0, 0, 0, 0.18)),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 38%, rgba(255, 255, 255, 0.025));
+  content: "";
+  pointer-events: none;
+}
+
+.more-card__preview-frame img,
+.more-card__preview-popover {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 6px;
+  transform: none;
+  transition:
+    filter 220ms ease;
+}
+
+.more-card:hover .more-card__preview-frame img {
+  filter: saturate(1.05) contrast(1.02);
+}
+
+.more-card__preview-popover {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 12px);
+  z-index: 20;
+  width: min(420px, calc(100vw - 48px));
+  height: auto;
+  max-height: min(360px, 58vh);
+  padding: 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: var(--radius-xs, 8px);
+  background:
+    radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.12), transparent 52%),
+    rgba(10, 14, 14, 0.96);
+  box-shadow:
+    0 28px 68px rgba(0, 0, 0, 0.46),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 8px) scale(0.96);
+  transform-origin: 50% 100%;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.more-card__preview:hover .more-card__preview-popover {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+.more-card--featured .more-card__preview-popover {
+  display: none;
+}
+
 .more-card__desc {
-  color: var(--fg-muted);
+  color: color-mix(in srgb, var(--fg-muted) 88%, var(--fg-body));
  font-size: 12.5px;
-  line-height: 1.5;
+  line-height: 1.55;
 }

 .more-card__use-case {
  display: block;
-  min-height: 38px;
+  min-height: 50px;
  color: color-mix(in srgb, var(--fg-muted) 78%, var(--fg-body));
  font-size: 12px;
  line-height: 1.55;
@@ -898,15 +1020,15 @@
  display: inline-flex;
  align-items: center;
  width: fit-content;
-  min-height: 26px;
-  margin-top: 2px;
-  padding: 0 9px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  min-height: 30px;
+  margin-top: auto;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xs, 8px);
  background: rgba(255, 255, 255, 0.035);
  color: var(--fg-body);
  font-size: 11px;
-  font-weight: 800;
+  font-weight: 850;
  transition:
    border-color 160ms ease,
    background 160ms ease,
@@ -915,8 +1037,8 @@
 }

 .more-card:hover .more-card__action {
-  border-color: rgba(var(--accent-rgb), 0.28);
-  background: rgba(var(--accent-rgb), 0.08);
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  transform: translateX(2px);
 }
@@ -936,14 +1058,15 @@
 .more-page-v2__empty {
  display: grid;
  justify-items: center;
-  gap: 10px;
-  min-height: 220px;
-  padding: 34px 20px;
-  border: 1px solid var(--border-weak);
+  gap: 12px;
+  min-height: 238px;
+  padding: 38px 22px;
+  border: 1px solid var(--more-card-border);
  border-radius: var(--radius-xs, 8px);
  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.065), transparent 64%),
-    var(--bg-panel);
+    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.1), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 64%),
+    var(--more-card-surface);
  color: var(--fg-muted);
  text-align: center;
 }
@@ -951,11 +1074,13 @@
 .more-page-v2__empty-icon {
  display: grid;
  place-items: center;
-  width: 48px;
-  height: 48px;
+  width: 52px;
+  height: 52px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius-xs, 8px);
-  background: rgba(var(--accent-rgb), 0.1);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08)),
+    rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 20px;
 }
@@ -978,12 +1103,14 @@
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  min-height: 34px;
+  min-height: 36px;
  margin-top: 4px;
-  padding: 0 12px;
-  border: 1px solid rgba(var(--accent-rgb), 0.32);
+  padding: 0 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.36);
  border-radius: var(--radius-xs, 8px);
-  background: rgba(var(--accent-rgb), 0.08);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.08)),
+    rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
@@ -1013,6 +1140,7 @@

  .more-page-v2__header {
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
+    gap: 14px;
  }

  .more-page-v2__filters {
@@ -1023,15 +1151,21 @@

@media (max-width: 860px) {
  .more-page-v2 {
+    --more-page-pad-x: 16px;
+
    padding-left: 0;
  }

  .more-page-v2__header {
    grid-template-columns: minmax(0, 1fr);
-    padding: 14px 16px 12px;
+    padding: 16px 16px 14px;
    gap: 12px;
  }

+  .more-page-v2__header h1 {
+    font-size: 24px;
+  }
+
  .more-page-v2__header-meta {
    gap: 6px;
  }
@@ -1047,13 +1181,22 @@
    padding-right: 16px;
  }

+  .more-page-v2__filters button {
+    min-height: 31px;
+    padding: 0 10px;
+  }
+
  .more-page-v2__scroll {
-    padding: 16px 16px 48px;
+    padding: 18px 16px 52px;
+  }
+
+  .more-page-v2__section {
+    margin-bottom: 26px;
  }

  .more-page-v2__grid {
-    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 14px;
  }

  .more-page-v2__recent-row {
@@ -1063,23 +1206,24 @@
  }

  .more-page-v2__featured-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .more-card--featured {
+    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;
  }

-  .more-card__featured-body strong {
-    font-size: 15px;
+  .more-card--featured .more-card__preview {
+    width: 100%;
+    min-height: 176px;
  }

  .more-card__featured-kicker,
@@ -1097,8 +1241,13 @@
    font-size: 10px;
  }

-  .more-card__compare {
-    min-height: 82px;
+  .more-card__preview {
+    min-height: 190px;
+  }
+
+  .more-card {
+    min-height: 394px;
+    padding: 16px;
  }

  .more-card__topline {
@@ -1108,24 +1257,69 @@
  }

  .more-card__use-case {
-    min-height: 54px;
+    min-height: 46px;
  }
 }

@media (max-width: 520px) {
+  .more-page-v2__header {
+    gap: 10px;
+    padding-top: 14px;
+  }
+
+  .more-page-v2__header-meta {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    margin-right: -16px;
+    padding-right: 16px;
+    scrollbar-width: none;
+  }
+
+  .more-page-v2__header-meta::-webkit-scrollbar {
+    display: none;
+  }
+
  .more-page-v2__grid {
    grid-template-columns: 1fr;
  }

-  .more-card {
-    gap: 9px;
+  .more-page-v2__featured-grid {
+    grid-template-columns: 1fr;
  }

-  .more-card__compare {
-    min-height: 94px;
+  .more-page-v2__section-title {
+    margin-bottom: 12px;
+  }
+
+  .more-card--featured {
+    grid-template-columns: 1fr;
+    padding: 15px;
+  }
+
+  .more-card {
+    gap: 10px;
+    min-height: 0;
+    padding: 15px;
+  }
+
+  .more-card__preview {
+    min-height: 190px;
  }

  .more-card__use-case {
    min-height: 0;
  }
+
+  .more-card__action,
+  .more-card__cta {
+    min-height: 32px;
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (hover: none) {
+  .more-card__preview-popover {
+    display: none;
+  }
 }
@@ -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;
+  }
+}
@@ -443,23 +443,23 @@

@media (max-width: 720px) {
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal {
-    align-items: stretch;
-    padding: calc(56px + env(safe-area-inset-top, 0px)) 0 0;
+    align-items: center;
+    padding: calc(56px + env(safe-area-inset-top, 0px) + 10px) 12px 12px;
    background:
      radial-gradient(circle at 50% 34%, rgba(var(--accent-rgb), 0.12), transparent 42%),
      rgba(0, 0, 0, 0.78);
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
-    --prompt-case-modal-max-height: calc(100svh - 56px - env(safe-area-inset-top, 0px));
+    --prompt-case-modal-max-height: calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px);
    display: grid;
-    grid-template-rows: minmax(0, 1fr) minmax(210px, 34%);
-    width: 100%;
+    grid-template-rows: minmax(0, 60%) minmax(220px, 40%);
+    width: min(100%, 520px);
    height: var(--prompt-case-modal-max-height);
    max-height: var(--prompt-case-modal-max-height);
    overflow: hidden;
-    border: 0;
-    border-radius: 0;
+    border: 1px solid rgba(var(--accent-rgb), 0.34);
+    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
      rgba(5, 8, 10, 0.96);
@@ -467,6 +467,7 @@

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media {
    min-height: 0;
+    align-content: center;
    padding: 14px 14px 8px;
    overflow: hidden;
    background:
@@ -479,7 +480,7 @@
    width: 100%;
    height: 100%;
    max-height: none;
-    border-radius: 16px;
+    border-radius: 12px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.18);
    box-shadow:
@@ -490,12 +491,12 @@
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) minmax(220px, 32%);
+    grid-template-rows: minmax(0, 62%) minmax(220px, 38%);
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media,
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media {
-    padding: 12px 14px 8px;
+    padding: 14px 14px 8px;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img,
@@ -510,35 +511,36 @@
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
    max-height: none;
-    gap: 11px;
-    overflow-y: auto;
-    margin-top: -16px;
-    padding: 20px 16px 16px;
+    gap: 10px;
+    overflow: hidden;
+    margin-top: -14px;
+    padding: 18px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-left: 0;
    border-radius: 24px 24px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(12, 17, 19, 0.99);
-    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.24);
+    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28);
    scrollbar-width: thin;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar,
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar {
-    margin-top: -16px;
-    padding: 20px 16px 16px;
+    margin-top: -14px;
+    padding: 18px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
    border-radius: 24px 24px 0 0;
-    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.26);
+    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.28);
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__close {
-    top: 16px;
-    right: 16px;
+    top: 14px;
+    right: 14px;
    z-index: 3;
-    width: 34px;
-    height: 34px;
+    width: 32px;
+    height: 32px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(8, 10, 11, 0.72);
    color: rgba(243, 245, 242, 0.78);
@@ -546,29 +548,38 @@
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author {
-    gap: 10px;
+    grid-template-columns: 32px minmax(0, 1fr);
+    gap: 9px;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author > span {
-    width: 34px;
-    height: 34px;
-    font-size: 13px;
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta {
-    gap: 7px;
-    padding-bottom: 11px;
+    gap: 6px;
+    min-height: 0;
+    padding-bottom: 9px;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 {
-    font-size: 18px;
+    font-size: 17px;
    line-height: 1.28;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p,
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt p {
    font-size: 13px;
-    line-height: 1.58;
+    line-height: 1.52;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-meta p {
@@ -579,17 +590,17 @@
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt {
-    gap: 7px;
+    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    overflow: auto;
    min-height: 0;
-    max-height: 132px;
+    max-height: none;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-prompt {
-    max-height: 118px;
+    max-height: none;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-prompt,
@@ -608,13 +619,15 @@

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button {
    min-height: 40px;
+    padding: 0 10px;
    border-radius: 12px;
    font-size: 12px;
+    white-space: nowrap;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions,
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 }

@@ -625,14 +638,15 @@
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
-    grid-template-rows: minmax(0, 1fr) minmax(230px, 38%);
-    border-radius: 0;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 58%) minmax(230px, 42%);
+    border-radius: 20px;
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) minmax(230px, 38%);
+    grid-template-rows: minmax(0, 60%) minmax(230px, 40%);
  }

  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media {
@@ -1689,6 +1703,239 @@
  }
 }

+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal {
+    align-items: center;
+    padding: calc(56px + env(safe-area-inset-top, 0px) + 10px) 10px 12px;
+    background:
+      radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.12), transparent 42%),
+      rgba(0, 0, 0, 0.78);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
+    --prompt-case-modal-max-height: min(560px, calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px));
+    display: grid;
+    grid-template-columns: minmax(0, 1.08fr) minmax(188px, 0.92fr);
+    grid-template-rows: 1fr;
+    width: min(calc(100vw - 20px), 660px);
+    height: var(--prompt-case-modal-max-height);
+    max-height: var(--prompt-case-modal-max-height);
+    overflow: hidden;
+    border: 1px solid rgba(var(--accent-rgb), 0.32);
+    border-radius: 22px;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
+      rgba(5, 8, 10, 0.97);
+    box-shadow:
+      0 24px 64px rgba(0, 0, 0, 0.48),
+      inset 0 1px 0 rgba(255, 255, 255, 0.07);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
+    grid-template-columns: minmax(0, 0.96fr) minmax(190px, 1.04fr);
+    grid-template-rows: 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media {
+    display: grid;
+    place-items: center;
+    min-height: 0;
+    padding: 14px;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.11), transparent 42%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%),
+      rgba(4, 8, 13, 0.98);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media img,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media img,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media img {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 12px;
+    object-fit: contain;
+    background: rgba(0, 0, 0, 0.18);
+    box-shadow:
+      0 18px 42px rgba(0, 0, 0, 0.32),
+      0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar {
+    position: relative;
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    align-self: stretch;
+    min-height: 0;
+    max-height: none;
+    gap: 9px;
+    overflow: hidden;
+    margin-top: 0;
+    padding: 16px 14px 14px;
+    border: 0;
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
+      rgba(12, 17, 19, 0.99);
+    box-shadow:
+      -14px 0 34px rgba(0, 0, 0, 0.22),
+      inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(16px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__close {
+    top: 14px;
+    right: 14px;
+    z-index: 3;
+    width: 32px;
+    height: 32px;
+    border-color: rgba(255, 255, 255, 0.18);
+    border-radius: 11px;
+    background: rgba(8, 10, 11, 0.72);
+    color: rgba(243, 245, 242, 0.82);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
+    backdrop-filter: blur(14px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author {
+    grid-template-columns: 28px minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author > span {
+    width: 28px;
+    height: 28px;
+    font-size: 11px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author strong {
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-author em {
+    font-size: 11px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta {
+    min-height: 0;
+    gap: 5px;
+    padding-bottom: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta h2 {
+    font-size: 15px;
+    line-height: 1.28;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-meta p,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-meta p {
+    display: -webkit-box;
+    overflow: hidden;
+    color: rgba(226, 232, 240, 0.82);
+    font-size: 12px;
+    line-height: 1.45;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-long-copy .wb-prompt-case-prompt,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-prompt,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-prompt {
+    min-height: 0;
+    max-height: none;
+    gap: 6px;
+    overflow: auto;
+    padding: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.035);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt span {
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-prompt p {
+    font-size: 12px;
+    line-height: 1.48;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions {
+    position: static;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 7px;
+    align-self: end;
+    margin: 0;
+    padding: 5px 0 0;
+    background: transparent;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button {
+    min-height: 36px;
+    padding: 0 7px;
+    border-radius: 11px;
+    font-size: 11px;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 420px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__panel {
+    --prompt-case-modal-max-height: min(520px, calc(100svh - 56px - env(safe-area-inset-top, 0px) - 22px));
+    grid-template-columns: minmax(0, 0.9fr) minmax(172px, 1.1fr);
+    grid-template-rows: 1fr;
+    border-radius: 20px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__panel,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__panel {
+    grid-template-columns: minmax(0, 0.82fr) minmax(174px, 1.18fr);
+    grid-template-rows: 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__media,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__media,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__media {
+    padding: 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal__sidebar,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-modal__sidebar,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-modal__sidebar {
+    gap: 8px;
+    padding: 14px 10px 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-portrait-media .wb-prompt-case-actions,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-modal.is-tall-media .wb-prompt-case-actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 6px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-actions button {
+    min-height: 34px;
+    padding: 0 5px;
+    font-size: 10px;
+  }
+}
+
@media (max-width: 980px) {
  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home {
    padding: 34px 18px 44px;
@@ -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 {
@@ -10458,6 +10481,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;