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以下水平进度条布局
- 品牌区域/评分标签/流程卡片逐级压缩

src/App.tsx

@@ -8,7 +8,6 @@ import ToastContainer from "./components/toast/ToastContainer";
 import { toast } from "./components/toast/toastStore";
 import { aiGenerationClient } from "./api/aiGenerationClient";
 import { keyServerClient } from "./api/keyServerClient";
-import { setUserMaxConcurrency } from "./api/generationConcurrency";
 import { notificationClient } from "./api/notificationClient";
 import {
   SERVER_SESSION_REPLACED_EVENT,
@@ -33,7 +32,6 @@ const CharacterMixPage = lazy(() => import("./features/character-mix/CharacterMi
 const CommunityPage = lazy(() => import("./features/community/CommunityPage"));
 const CommunityCaseAddPage = lazy(() => import("./features/community-review/CommunityCaseAddPage"));
 const CommunityReviewPage = lazy(() => import("./features/community-review/CommunityReviewPage"));
-const BetaApplicationsPage = lazy(() => import("./features/beta-applications/BetaApplicationsPage"));
 const AvatarConsolePage = lazy(() => import("./features/digital-human/AvatarConsolePage"));
 const DigitalHumanPage = lazy(() => import("./features/digital-human/DigitalHumanPage"));
 const DialogGeneratorPage = lazy(() => import("./features/dialog-generator/DialogGeneratorPage"));
@@ -110,7 +108,6 @@ const VIEW_KEYS = new Set<WebViewKey>([
   "more",
   "communityReview",
   "communityCaseAdd",
-  "betaApplications",
   "report",
   "providerHealth",
   "userAgreement",
@@ -126,7 +123,6 @@ const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
   "community",
   "communityReview",
   "communityCaseAdd",
-  "betaApplications",
   "assets",
   "ecommerce",
   "ecommerceHub",
@@ -136,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"
@@ -160,8 +169,6 @@ function normalizeViewKey(rawView: string): WebViewKey {
           ? "communityReview"
           : rawView === "community-case-add"
             ? "communityCaseAdd"
-            : rawView === "beta-applications" || rawView === "beta-application-review"
-              ? "betaApplications"
         : rawView;
   return VIEW_KEYS.has(normalized as WebViewKey) ? (normalized as WebViewKey) : "not-found";
 }
@@ -204,7 +211,7 @@ function createWorkflowFromResult(payload: WorkbenchResultActionPayload): WebCan
     description: payload.prompt || "从生成结果进入画布继续创作。",
     source: "blank",
     settings: {
-      model: payload.resultType === "video" ? "Seedance 2.0" : "omni-水果 Pro",
+      model: payload.resultType === "video" ? "Seedance 2.0" : "Nano Banana Pro",
       ratio: payload.resultType === "video" ? "16:9" : "1:1",
       duration: payload.resultType === "video" ? "6s" : "0s",
       resolution: payload.resultType === "video" ? "720p" : "2K",
@@ -384,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
@@ -476,7 +486,6 @@ function App() {
   const clearAuthenticatedState = useCallback((options?: { resetView?: boolean }) => {
     clearAllUserStorage();
     clearSessionState();
-    setUserMaxConcurrency(null);
     setProjects([]);
     setProjectsLoaded(true);
     setUsage(emptyUsageSummary);
@@ -585,7 +594,6 @@ function App() {
       const nextSession = await keyServerClient.getCurrentSession();
       if (cancelled) return;
       setSession(nextSession);
-      setUserMaxConcurrency(nextSession?.user?.maxConcurrency);
       await hydrateAccountData(nextSession);
     };
 
@@ -618,7 +626,6 @@ function App() {
         if (cancelled) return;
         if (nextSession) {
           setSession(nextSession);
-          setUserMaxConcurrency(nextSession?.user?.maxConcurrency);
         } else {
           clearAuthenticatedState({ resetView: true });
         }
@@ -956,7 +963,6 @@ function App() {
     async (nextSession: WebUserSession) => {
       hideSessionReplaced();
       setSession(nextSession);
-      setUserMaxConcurrency(nextSession?.user?.maxConcurrency);
       await hydrateAccountData(nextSession);
 
       if (nextSession.user.email && !nextSession.user.emailVerified) {
@@ -1020,7 +1026,7 @@ function App() {
               previewUrl: payload.resultUrl,
               params: payload.resultType === "video"
                 ? { model: "Kling V3 Omni", aspectRatio: "16:9", resolution: "720p", duration: "6s", videoMode: "text-to-video" }
-                : { model: "omni-水果 Pro", aspectRatio: "1:1", imageSize: "2K" },
+                : { model: "Nano Banana Pro", aspectRatio: "1:1", imageSize: "2K" },
               assetRef: payload.resultOssKey ? { url: payload.resultUrl, ossKey: payload.resultOssKey, mediaType: payload.resultType === "video" ? "video/mp4" : "image/png", sourceTaskId: payload.taskId } : undefined,
             },
           ];
@@ -1312,8 +1318,6 @@ function App() {
             onOpenReview={() => handleSetView("communityReview")}
           />
         );
-      case "betaApplications":
-        return <BetaApplicationsPage session={session} onOpenLogin={handleOpenLogin} />;
       case "workbench":
         return (
           <WorkbenchPage

src/api/betaApplicationClient.ts

@@ -1,135 +0,0 @@
-import { serverRequest } from "./serverConnection";
-
-export interface BetaApplicationInput {
-  name: string;
-  phone: string;
-  wechat: string;
-  industry: string;
-  company: string;
-  city: string;
-  aiTools: string;
-  aiDuration: string;
-  aiTrack: string;
-  aiDirection: string[];
-  weeklyUsage: string;
-  feedbackWilling: string;
-  wantFeature: string[];
-  selfStatement: string;
-  signature: string;
-  agreeRules: boolean;
-}
-
-export type BetaApplicationStatus = "pending" | "approved" | "rejected";
-
-export interface BetaApplicationItem extends BetaApplicationInput {
-  id: number;
-  userId: number | null;
-  username: string | null;
-  status: BetaApplicationStatus;
-  inviteCode: string | null;
-  reviewNote: string | null;
-  reviewedBy: number | null;
-  reviewerUsername: string | null;
-  reviewedAt: string | null;
-  ipAddress: string | null;
-  userAgent: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface BetaApplicationSubmitResult {
-  id: number;
-  status: BetaApplicationStatus;
-  createdAt: string;
-}
-
-function readString(value: unknown): string {
-  return typeof value === "string" ? value : "";
-}
-
-function readNullableString(value: unknown): string | null {
-  return typeof value === "string" && value ? value : null;
-}
-
-function readNumberOrNull(value: unknown): number | null {
-  if (value === null || value === undefined || value === "") return null;
-  const next = Number(value);
-  return Number.isFinite(next) ? next : null;
-}
-
-function readStringArray(value: unknown): string[] {
-  return Array.isArray(value) ? value.filter((item): item is string => typeof item === "string") : [];
-}
-
-function normalizeStatus(value: unknown): BetaApplicationStatus {
-  return value === "approved" || value === "rejected" ? value : "pending";
-}
-
-function normalizeApplication(raw: unknown): BetaApplicationItem {
-  const item = raw && typeof raw === "object" && !Array.isArray(raw) ? (raw as Record<string, unknown>) : {};
-  return {
-    id: Number(item.id) || 0,
-    userId: readNumberOrNull(item.userId),
-    username: readNullableString(item.username),
-    name: readString(item.name),
-    phone: readString(item.phone),
-    wechat: readString(item.wechat),
-    industry: readString(item.industry),
-    company: readString(item.company),
-    city: readString(item.city),
-    aiTools: readString(item.aiTools),
-    aiDuration: readString(item.aiDuration),
-    aiTrack: readString(item.aiTrack),
-    aiDirection: readStringArray(item.aiDirection),
-    weeklyUsage: readString(item.weeklyUsage),
-    feedbackWilling: readString(item.feedbackWilling),
-    wantFeature: readStringArray(item.wantFeature),
-    selfStatement: readString(item.selfStatement),
-    signature: readString(item.signature),
-    agreeRules: item.agreeRules === true,
-    status: normalizeStatus(item.status),
-    inviteCode: readNullableString(item.inviteCode),
-    reviewNote: readNullableString(item.reviewNote),
-    reviewedBy: readNumberOrNull(item.reviewedBy),
-    reviewerUsername: readNullableString(item.reviewerUsername),
-    reviewedAt: readNullableString(item.reviewedAt),
-    ipAddress: readNullableString(item.ipAddress),
-    userAgent: readNullableString(item.userAgent),
-    createdAt: readString(item.createdAt),
-    updatedAt: readString(item.updatedAt),
-  };
-}
-
-export const betaApplicationClient = {
-  async submit(input: BetaApplicationInput): Promise<BetaApplicationSubmitResult> {
-    const payload = await serverRequest<{ application: BetaApplicationSubmitResult }>("beta-applications", {
-      method: "POST",
-      body: input,
-      maxRetries: 0,
-      fallbackMessage: "提交内测申请失败",
-    });
-    return payload.application;
-  },
-
-  async listAdminApplications(status?: BetaApplicationStatus | ""): Promise<BetaApplicationItem[]> {
-    const query = status ? `?status=${encodeURIComponent(status)}` : "";
-    const payload = await serverRequest<{ applications?: unknown[] }>(`admin/beta-applications${query}`, {
-      fallbackMessage: "读取内测申请失败",
-    });
-    return Array.isArray(payload.applications) ? payload.applications.map(normalizeApplication) : [];
-  },
-
-  async reviewApplication(
-    id: number,
-    action: "approve" | "reject",
-    reviewNote?: string,
-  ): Promise<BetaApplicationItem> {
-    const payload = await serverRequest<{ application: unknown }>(`admin/beta-applications/${id}`, {
-      method: "PATCH",
-      body: { action, reviewNote },
-      maxRetries: 0,
-      fallbackMessage: "审核内测申请失败",
-    });
-    return normalizeApplication(payload.application);
-  },
-};

src/api/generationConcurrency.ts

@@ -7,20 +7,10 @@ interface GenerationSlot {
   createdAt: number;
 }
 
-const DEFAULT_MAX_ACTIVE_GENERATION_TASKS = 3;
+const MAX_ACTIVE_GENERATION_TASKS = 3;
 const STALE_SLOT_MS = 6 * 60 * 60 * 1000;
 const activeSlots = new Map<string, GenerationSlot>();
 
-let userMaxConcurrency: number | null = null;
-
-export function setUserMaxConcurrency(limit: number | null | undefined): void {
-  userMaxConcurrency = typeof limit === "number" && limit > 0 ? limit : null;
-}
-
-function getEffectiveLimit(): number {
-  return userMaxConcurrency ?? DEFAULT_MAX_ACTIVE_GENERATION_TASKS;
-}
-
 export function getGenerationUserKey(userId?: string | number | null): string {
   return userId === undefined || userId === null || userId === "" ? "anonymous" : String(userId);
 }
@@ -49,9 +39,8 @@ export function claimGenerationSlot(input: {
 }): () => void {
   pruneStaleSlots();
   const activeCount = getActiveGenerationTaskCount(input.userKey);
-  const effectiveLimit = getEffectiveLimit();
-  if (activeCount >= effectiveLimit) {
-    throw new Error(`当前账号同时最多生成 ${effectiveLimit} 个图片/视频任务，请等待已有任务完成后再提交。`);
+  if (activeCount >= MAX_ACTIVE_GENERATION_TASKS) {
+    throw new Error("当前账号同时最多生成 3 个图片/视频任务，请等待已有任务完成后再提交。");
   }
 
   const id = input.id || `generation-slot-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;

src/api/keyServerClient.ts

@@ -434,7 +434,6 @@ function normalizeUser(raw: unknown): WebUserSession["user"] | null {
         candidate.enterpriseBalance ??
         candidate.enterprise_balance,
     ),
-    maxConcurrency: toNumber(candidate.maxConcurrency ?? candidate.max_concurrency),
     activePackages: toActivePackages(candidate.activePackages ?? candidate.active_packages),
   };
 }
@@ -481,7 +480,7 @@ function migrateLegacyWorkflowData(old: Record<string, unknown>, wrapper: Record
     description: String(wrapper.description || ""),
     source: (wrapper.source as WebCanvasWorkflow["source"]) || "blank",
     settings: {
-      model: String(isRecord(old.settings) ? old.settings.model || "omni-水果 Pro" : "omni-水果 Pro"),
+      model: String(isRecord(old.settings) ? old.settings.model || "Nano Banana Pro" : "Nano Banana Pro"),
       ratio: String(isRecord(old.settings) ? old.settings.ratio || "1:1" : "1:1"),
       duration: String(isRecord(old.settings) ? old.settings.duration || "0s" : "0s"),
       resolution: String(isRecord(old.settings) ? old.settings.resolution || "2K" : "2K"),

src/api/taskSubscription.ts

@@ -44,6 +44,7 @@ export function waitForTask(
     let settled = false;
     let cleanup: (() => void) | null = null;
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    let sseConnected = false;
     let fallbackTimerId: ReturnType<typeof setTimeout> | null = null;
     let lastProgress = 0;
     let lastProgressAt = startedAt;
@@ -82,9 +83,10 @@ export function waitForTask(
     };
 
     cleanup = aiGenerationClient.subscribeTaskStatus(taskId, handleUpdate);
+    sseConnected = true;
 
     fallbackTimerId = setTimeout(() => {
-      if (settled) return;
+      if (settled || !sseConnected) return;
       if (cleanup) cleanup();
       startPolling();
     }, 5000);

src/components/AppShell.tsx

@@ -7,7 +7,6 @@ import { ossAssets } from "../data/ossAssets";
 import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
-import BetaApplicationModal from "./BetaApplicationModal";
 import { AnimatedPanel } from "./AnimatedPanel";
 import AdminMonitor from "./AdminMonitor";
 import CookieConsentBanner from "./CookieConsentBanner";
@@ -64,12 +63,6 @@ function formatBalance(cents: number): string {
   return `${value.toFixed(2)} 积分`;
 }
 
-function canReviewBetaApplications(session: WebUserSession | null): boolean {
-  const role = String(session?.user.role || "").trim().toLowerCase();
-  const username = String(session?.user.username || "").trim().toLowerCase();
-  return role === "admin" || username === "xqy1912";
-}
-
 function AppShell({
   activeView,
   navItems,
@@ -92,7 +85,6 @@ function AppShell({
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [RechargeModal, setRechargeModal] = useState<RechargeModalComponent | null>(null);
   const [infoOpen, setInfoOpen] = useState(false);
-  const [betaOpen, setBetaOpen] = useState(false);
   const infoRef = useRef<HTMLDivElement>(null);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
   const [publicConfig, setPublicConfig] = useState<WebPublicConfig>({});
@@ -101,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(
     () => {
@@ -255,7 +247,6 @@ function AppShell({
   const displayedBalanceLabel = session ? formatBalance(displayedBalanceCents) : "0 积分";
   const showCommunityReview = canReviewCommunity(session);
   const showCommunityCaseAdd = canManageCommunityCases(session);
-  const showBetaApplicationReview = canReviewBetaApplications(session);
 
   return (
     <div
@@ -352,15 +343,6 @@ function AppShell({
               <span className="brand-lockup__name">OmniAI</span>
             </button>
             <div className="web-topbar__actions">
-              <button
-                type="button"
-                className="beta-apply-button"
-                title="内测申请"
-                aria-label="内测申请"
-                onClick={() => setBetaOpen(true)}
-              >
-                内测申请
-              </button>
               {session && (
                 <NotificationCenter
                   items={notifications}
@@ -493,19 +475,6 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
-                    {showBetaApplicationReview ? (
-                      <button
-                        type="button"
-                        className="profile-popover__review-btn"
-                        onClick={() => {
-                          setProfileOpen(false);
-                          onSelectView("betaApplications");
-                        }}
-                      >
-                        <ShellIcon name="check-circle" />
-                        内测申请审核
-                      </button>
-                    ) : null}
                     {showCommunityCaseAdd ? (
                       <>
                         <button
@@ -533,7 +502,7 @@ function AppShell({
       {rechargeOpen && RechargeModal ? (
         <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
       ) : null}
-      <BetaApplicationModal open={betaOpen} onClose={() => setBetaOpen(false)} />
+      <CookieConsentBanner />
     </div>
   );
 }

src/components/BetaApplicationModal.tsx

@@ -1,343 +0,0 @@
-import { CloseOutlined, ExperimentOutlined } from "@ant-design/icons";
-import { useState } from "react";
-import { betaApplicationClient } from "../api/betaApplicationClient";
-
-interface BetaApplicationModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-/* ── Form state ── */
-interface BetaFormData {
-  name: string;
-  phone: string;
-  wechat: string;
-  industry: string;
-  company: string;
-  city: string;
-  aiTools: string;
-  aiDuration: string;
-  aiTrack: string;
-  aiDirection: string[];
-  weeklyUsage: string;
-  feedbackWilling: string;
-  wantFeature: string[];
-  selfStatement: string;
-  signature: string;
-  agreeRules: boolean;
-}
-
-const INITIAL_FORM: BetaFormData = {
-  name: "",
-  phone: "",
-  wechat: "",
-  industry: "",
-  company: "",
-  city: "",
-  aiTools: "",
-  aiDuration: "",
-  aiTrack: "",
-  aiDirection: [],
-  weeklyUsage: "",
-  feedbackWilling: "",
-  wantFeature: [],
-  selfStatement: "",
-  signature: "",
-  agreeRules: false,
-};
-
-/* ── Option groups (from the docx) ── */
-const AI_DURATION_OPTIONS = ["1年以内", "1-3年", "3-5年", "5年以上"];
-const AI_TRACK_OPTIONS = ["是，长期承接相关业务", "业余创作", "新手学习"];
-const AI_DIRECTION_OPTIONS = [
-  "AI短剧批量制作", "漫剧剧情生成", "自媒体短视频", "电商图文及视频素材",
-  "MCN商业内容", "企业宣传视频", "个人兴趣创作", "其他",
-];
-const WEEKLY_USAGE_OPTIONS = ["7次及以上", "1-3次", "空闲时间使用"];
-const FEEDBACK_OPTIONS = ["全力配合深度反馈", "简单体验留言", "仅使用不反馈"];
-const WANT_FEATURE_OPTIONS = [
-  "一站式短剧漫剧完整AIGC工作流", "电商素材自动化创作流程",
-  "多模态智能中枢全能创作", "批量自动化创作流程", "全新未公开AI创作玩法",
-];
-
-/* ── Helper: single-select radio group ── */
-function RadioGroup({
-  name, options, value, onChange,
-}: {
-  name: string;
-  options: string[];
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  return (
-    <div className="beta-radio-group">
-      {options.map((opt) => (
-        <label key={opt} className="beta-radio">
-          <input
-            type="radio"
-            name={name}
-            checked={value === opt}
-            onChange={() => onChange(opt)}
-          />
-          <span>{opt}</span>
-        </label>
-      ))}
-    </div>
-  );
-}
-
-/* ── Helper: multi-select checkbox group ── */
-function CheckboxGroup({
-  options, value, onChange,
-}: {
-  options: string[];
-  value: string[];
-  onChange: (v: string[]) => void;
-}) {
-  return (
-    <div className="beta-checkbox-group">
-      {options.map((opt) => (
-        <label key={opt} className="beta-checkbox">
-          <input
-            type="checkbox"
-            checked={value.includes(opt)}
-            onChange={() => {
-              if (value.includes(opt)) {
-                onChange(value.filter((item) => item !== opt));
-              } else {
-                onChange([...value, opt]);
-              }
-            }}
-          />
-          <span>{opt}</span>
-        </label>
-      ))}
-    </div>
-  );
-}
-
-/* ── Helper: text field ── */
-function TextField({
-  label, value, onChange, placeholder,
-}: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-}) {
-  return (
-    <div className="beta-text-field">
-      <span className="beta-text-field__label">{label}</span>
-      <input
-        type="text"
-        className="beta-text-field__input"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder ?? "请填写"}
-      />
-    </div>
-  );
-}
-
-const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
-  const [form, setForm] = useState<BetaFormData>(INITIAL_FORM);
-  const [submitting, setSubmitting] = useState(false);
-  const [message, setMessage] = useState<{ tone: "success" | "error"; text: string } | null>(null);
-
-  const update = <K extends keyof BetaFormData>(key: K, value: BetaFormData[K]) => {
-    setForm((prev) => ({ ...prev, [key]: value }));
-    setMessage(null);
-  };
-
-  const close = () => {
-    if (submitting) return;
-    onClose();
-  };
-
-  const validate = () => {
-    if (!form.name.trim()) return "请填写姓名 / 常用昵称";
-    if (!form.phone.trim()) return "请填写联系手机号码";
-    if (!form.wechat.trim()) return "请填写微信账号";
-    if (!form.selfStatement.trim()) return "请填写申请自述";
-    if (!form.signature.trim()) return "请填写申请人确认签字";
-    if (!form.agreeRules) return "请先阅读并同意内测规则";
-    return null;
-  };
-
-  const submit = async () => {
-    if (submitting) return;
-    const validationError = validate();
-    if (validationError) {
-      setMessage({ tone: "error", text: validationError });
-      return;
-    }
-
-    setSubmitting(true);
-    setMessage(null);
-    try {
-      await betaApplicationClient.submit({
-        ...form,
-        name: form.name.trim(),
-        phone: form.phone.trim(),
-        wechat: form.wechat.trim(),
-        industry: form.industry.trim(),
-        company: form.company.trim(),
-        city: form.city.trim(),
-        aiTools: form.aiTools.trim(),
-        aiDuration: form.aiDuration.trim(),
-        aiTrack: form.aiTrack.trim(),
-        weeklyUsage: form.weeklyUsage.trim(),
-        feedbackWilling: form.feedbackWilling.trim(),
-        selfStatement: form.selfStatement.trim(),
-        signature: form.signature.trim(),
-      });
-      setForm(INITIAL_FORM);
-      setMessage({ tone: "success", text: "申请已提交，请留意站内通知。" });
-    } catch (error) {
-      setMessage({ tone: "error", text: error instanceof Error ? error.message : "提交内测申请失败" });
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (!open) return null;
-
-  return (
-    <div className="beta-application-modal" role="dialog" aria-modal="true" aria-labelledby="beta-modal-title">
-      <button type="button" className="beta-application-modal__backdrop" onClick={close} aria-label="关闭内测申请弹窗" />
-
-      <section className="beta-application-modal__panel">
-        {/* ── Header ── */}
-        <header className="beta-modal-header">
-          <div className="beta-modal-header__left">
-            <ExperimentOutlined className="beta-modal-header__icon" />
-            <div>
-              <h2 id="beta-modal-title">OmniAI 内测体验官申请表</h2>
-              <p className="beta-modal-header__subtitle">封闭限量内测 · 仅限 <strong>30 人</strong> · 赠送 <strong>500 元等值 50,000 积分</strong></p>
-            </div>
-          </div>
-          <button type="button" className="beta-modal-header__close" onClick={close} aria-label="关闭" disabled={submitting}>
-            <CloseOutlined />
-          </button>
-        </header>
-
-        {/* ── Body (scrollable document) ── */}
-        <div className="beta-modal-body">
-
-          {/* 一、个人基础信息 */}
-          <section className="beta-doc-section">
-            <h3 className="beta-doc-section__title">一、个人基础信息</h3>
-            <div className="beta-doc-grid">
-              <TextField label="姓名 / 常用昵称" value={form.name} onChange={(v) => update("name", v)} />
-              <TextField label="联系手机号码" value={form.phone} onChange={(v) => update("phone", v)} />
-              <TextField label="微信账号" value={form.wechat} onChange={(v) => update("wechat", v)} />
-              <TextField label="所在行业 / 职业" value={form.industry} onChange={(v) => update("industry", v)} />
-              <TextField label="所属公司 / 机构" value={form.company} onChange={(v) => update("company", v)} />
-              <TextField label="所在城市" value={form.city} onChange={(v) => update("city", v)} />
-            </div>
-          </section>
-
-          {/* 二、AI从业与使用经历 */}
-          <section className="beta-doc-section">
-            <h3 className="beta-doc-section__title">二、AI 从业与使用经历</h3>
-            <div className="beta-doc-grid">
-              <TextField label="日常常用 AI 创作工具有哪些" value={form.aiTools} onChange={(v) => update("aiTools", v)} placeholder="例如：Midjourney / Stable Diffusion / ChatGPT 等" />
-              <div className="beta-form-group">
-                <span className="beta-form-group__label">AI 内容创作从业时长</span>
-                <RadioGroup name="aiDuration" options={AI_DURATION_OPTIONS} value={form.aiDuration} onChange={(v) => update("aiDuration", v)} />
-              </div>
-              <div className="beta-form-group">
-                <span className="beta-form-group__label">是否深耕 AI 短剧、漫剧、数字视频、电商赛道</span>
-                <RadioGroup name="aiTrack" options={AI_TRACK_OPTIONS} value={form.aiTrack} onChange={(v) => update("aiTrack", v)} />
-              </div>
-              <div className="beta-form-group beta-form-group--full">
-                <span className="beta-form-group__label">日常主要创作方向（可多选）</span>
-                <CheckboxGroup options={AI_DIRECTION_OPTIONS} value={form.aiDirection} onChange={(v) => update("aiDirection", v)} />
-              </div>
-            </div>
-          </section>
-
-          {/* 三、内测使用意向调研 */}
-          <section className="beta-doc-section">
-            <h3 className="beta-doc-section__title">三、内测使用意向调研</h3>
-            <div className="beta-doc-grid">
-              <div className="beta-form-group">
-                <span className="beta-form-group__label">每周可稳定登录使用内测平台次数</span>
-                <RadioGroup name="weeklyUsage" options={WEEKLY_USAGE_OPTIONS} value={form.weeklyUsage} onChange={(v) => update("weeklyUsage", v)} />
-              </div>
-              <div className="beta-form-group">
-                <span className="beta-form-group__label">是否愿意积极反馈产品 BUG、优化建议、功能需求</span>
-                <RadioGroup name="feedback" options={FEEDBACK_OPTIONS} value={form.feedbackWilling} onChange={(v) => update("feedbackWilling", v)} />
-              </div>
-              <div className="beta-form-group beta-form-group--full">
-                <span className="beta-form-group__label">本次最想体验 OmniAI 核心功能（可多选）</span>
-                <CheckboxGroup options={WANT_FEATURE_OPTIONS} value={form.wantFeature} onChange={(v) => update("wantFeature", v)} />
-              </div>
-            </div>
-          </section>
-
-          {/* 四、申请自述 */}
-          <section className="beta-doc-section">
-            <h3 className="beta-doc-section__title">四、申请自述 <em className="beta-required">（必填）</em></h3>
-            <p className="beta-doc-section__desc">请简述自身 AI 创作优势、业务需求，以及加入本次封闭内测的理由：</p>
-            <textarea
-              className="beta-textarea"
-              value={form.selfStatement}
-              onChange={(e) => update("selfStatement", e.target.value)}
-              placeholder="请在此填写您的申请自述（必填）…"
-              rows={6}
-            />
-          </section>
-
-          {/* 五、内测规则知情同意书 */}
-          <section className="beta-doc-section">
-            <h3 className="beta-doc-section__title">五、内测规则知情同意书</h3>
-            <ol className="beta-rules-list">
-              <li>本次为封闭限量内测，仅限 <strong>30 人</strong>，按照资质匹配度 + 申请顺序筛选；</li>
-              <li>内测赠送 <strong>500 元等值 50,000 积分</strong>，仅限内测期间使用，不可提现、不可转让、不可兑换现金；</li>
-              <li>内测版本含未上线测试功能，存在功能不稳定、界面调整、参数优化等情况，申请人自愿理解包容；</li>
-              <li>严禁私自泄露内测专属工作流、内部功能、测试接口、未发布技术方案等内部资料；</li>
-              <li>审核通过后，官方将在 <strong>48 小时</strong> 内发放内测账号、登录权限及免费积分；</li>
-              <li>正式版上线后，优质内测体验官可享受专属永久优惠权限与平台荣誉称号。</li>
-            </ol>
-
-            <label className="beta-agree-row">
-              <input
-                type="checkbox"
-                checked={form.agreeRules}
-                onChange={(e) => update("agreeRules", e.target.checked)}
-              />
-              <span>本人已完整阅读并同意以上全部内测规则，自愿遵守内测所有管理要求。</span>
-            </label>
-
-            <div className="beta-doc-grid beta-doc-grid--two">
-              <TextField label="申请人确认签字" value={form.signature} onChange={(v) => update("signature", v)} placeholder="请签署姓名" />
-              <div className="beta-text-field">
-                <span className="beta-text-field__label">申请填写日期</span>
-                <input type="text" className="beta-text-field__input" value="2026年    月    日" readOnly />
-              </div>
-            </div>
-          </section>
-
-        </div>
-
-        {/* ── Footer ── */}
-        <footer className="beta-modal-footer">
-          {message ? (
-            <p className={`beta-modal-footer__message beta-modal-footer__message--${message.tone}`} role="status">
-              {message.text}
-            </p>
-          ) : null}
-          <button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--secondary" onClick={close} disabled={submitting}>
-            关闭
-          </button>
-          <button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--primary" onClick={() => void submit()} disabled={submitting}>
-            {submitting ? "提交中..." : "提交申请"}
-          </button>
-        </footer>
-      </section>
-    </div>
-  );
-};
-
-export default BetaApplicationModal;

src/components/RechargeModal/RechargeModal.tsx

@@ -29,7 +29,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Pro",
     period: "月付",
     price: "299 元 / 月",
-    grant: "每月赠送 29900 积分，30 天有效",
+    grant: "每月赠送 10000 积分，30 天有效",
     comparisonLabel: "专业版基础权益",
     icon: <CrownOutlined />,
     benefits: ["通用大模型全解锁", "积分与 API 消耗 9 折", "并发提升到 3 个", "去水印、插队加速、专属客服"],
@@ -41,7 +41,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Pro",
     period: "季付",
     price: "897 元 / 季",
-    grant: "季度合计 89700 积分，默认按月分摊",
+    grant: "连续 3 个月按月发放 Pro 积分",
     comparisonLabel: "相比月付新增",
     badge: "季度",
     icon: <CrownOutlined />,
@@ -54,7 +54,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Pro",
     period: "年付",
     price: "1990 元 / 年",
-    grant: "全年合计 199000 积分，默认按月分摊",
+    grant: "全年合计 140000 积分，默认按月分摊",
     comparisonLabel: "相比季付新增",
     badge: "年费优惠",
     icon: <CrownOutlined />,
@@ -67,7 +67,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Enterprise",
     period: "月付",
     price: "499 元 / 月",
-    grant: "每月赠送 49900 积分，30 天有效",
+    grant: "每月赠送 2000 积分，30 天有效",
     comparisonLabel: "企业版基础权益",
     icon: <RocketOutlined />,
     benefits: ["企业私有模型与高性能模型", "默认 10 并发，可申请提升", "积分与 API 消耗 8 折", "用量报表与正式 API 权限"],
@@ -79,7 +79,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Enterprise",
     period: "季付",
     price: "1497 元 / 季",
-    grant: "季度合计 149700 积分，默认按月分摊",
+    grant: "连续 3 个月按月发放企业版积分",
     comparisonLabel: "相比月付新增",
     badge: "季度",
     icon: <RocketOutlined />,
@@ -92,7 +92,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Enterprise",
     period: "年付",
     price: "4990 元 / 年",
-    grant: "全年合计 499000 积分，默认按月分摊",
+    grant: "全年合计 340000 积分，默认按月分摊",
     comparisonLabel: "相比季付新增",
     badge: "企业年费",
     icon: <RocketOutlined />,

src/features/beta-applications/BetaApplicationsPage.tsx

@@ -1,296 +0,0 @@
-import {
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  ExperimentOutlined,
-  FileSearchOutlined,
-  LoginOutlined,
-  ReloadOutlined,
-} from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { betaApplicationClient, type BetaApplicationItem, type BetaApplicationStatus } from "../../api/betaApplicationClient";
-import WorkspacePageShell from "../../components/WorkspacePageShell";
-import type { WebUserSession } from "../../types";
-import "../../styles/pages/beta-applications.css";
-
-interface BetaApplicationsPageProps {
-  session: WebUserSession | null;
-  onOpenLogin: () => void;
-}
-
-type StatusFilter = BetaApplicationStatus | "";
-
-const STATUS_OPTIONS: Array<{ value: StatusFilter; label: string }> = [
-  { value: "pending", label: "待审核" },
-  { value: "approved", label: "已通过" },
-  { value: "rejected", label: "已驳回" },
-  { value: "", label: "全部" },
-];
-
-const STATUS_LABEL: Record<BetaApplicationStatus, string> = {
-  pending: "待审核",
-  approved: "已通过",
-  rejected: "已驳回",
-};
-
-function canReviewBetaApplications(session: WebUserSession | null): boolean {
-  const role = String(session?.user.role || "").trim().toLowerCase();
-  const username = String(session?.user.username || "").trim().toLowerCase();
-  return role === "admin" || username === "xqy1912";
-}
-
-function formatDate(value?: string | null): string {
-  if (!value) return "暂无时间";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString("zh-CN", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-function valueOrEmpty(value?: string | null): string {
-  return value?.trim() || "未填写";
-}
-
-function joinValues(values: string[]): string {
-  return values.length ? values.join("、") : "未选择";
-}
-
-function DetailField({ label, value, wide }: { label: string; value: string; wide?: boolean }) {
-  return (
-    <div className={`beta-admin-field${wide ? " beta-admin-field--wide" : ""}`}>
-      <span>{label}</span>
-      <strong>{value}</strong>
-    </div>
-  );
-}
-
-export default function BetaApplicationsPage({ session, onOpenLogin }: BetaApplicationsPageProps) {
-  const allowed = canReviewBetaApplications(session);
-  const [status, setStatus] = useState<StatusFilter>("pending");
-  const [applications, setApplications] = useState<BetaApplicationItem[]>([]);
-  const [selectedId, setSelectedId] = useState<number | null>(null);
-  const [reviewNote, setReviewNote] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const selectedApplication = useMemo(
-    () => applications.find((item) => item.id === selectedId) ?? applications[0] ?? null,
-    [applications, selectedId],
-  );
-
-  const load = useCallback(async () => {
-    if (!allowed) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const items = await betaApplicationClient.listAdminApplications(status);
-      setApplications(items);
-      setSelectedId((current) =>
-        current && items.some((item) => item.id === current) ? current : (items[0]?.id ?? null),
-      );
-    } catch (loadError) {
-      setApplications([]);
-      setError(loadError instanceof Error ? loadError.message : "内测申请列表加载失败");
-    } finally {
-      setLoading(false);
-    }
-  }, [allowed, status]);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  const handleDecision = async (action: "approve" | "reject") => {
-    if (!selectedApplication || selectedApplication.status !== "pending" || submitting) return;
-    setSubmitting(true);
-    setError(null);
-    try {
-      await betaApplicationClient.reviewApplication(selectedApplication.id, action, reviewNote.trim());
-      setReviewNote("");
-      await load();
-    } catch (submitError) {
-      setError(submitError instanceof Error ? submitError.message : "审核操作失败");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (!session) {
-    return (
-      <WorkspacePageShell title="内测申请审核" fullWidth className="beta-admin-page page-motion">
-        <section className="beta-admin-access">
-          <LoginOutlined />
-          <h1>请登录审核账号</h1>
-          <p>内测申请审核仅开放给管理员和 xqy1912。</p>
-          <button type="button" onClick={onOpenLogin}>登录 / 注册</button>
-        </section>
-      </WorkspacePageShell>
-    );
-  }
-
-  if (!allowed) {
-    return (
-      <WorkspacePageShell title="内测申请审核" fullWidth className="beta-admin-page page-motion">
-        <section className="beta-admin-access">
-          <FileSearchOutlined />
-          <h1>当前账号没有审核权限</h1>
-          <p>请切换到 admin 或 xqy1912 后再进入内测审核台。</p>
-        </section>
-      </WorkspacePageShell>
-    );
-  }
-
-  return (
-    <WorkspacePageShell title="内测申请审核" fullWidth className="beta-admin-page page-motion">
-      <div className="beta-admin-page__inner">
-        <section className="beta-admin-toolbar">
-          <div>
-            <span>内部审核台</span>
-            <h1>内测申请表</h1>
-            <p>查看用户提交的完整申请资料，通过后发放内测码，驳回后向用户发送未通过通知。</p>
-          </div>
-          <button type="button" onClick={() => void load()} disabled={loading}>
-            <ReloadOutlined />
-            刷新
-          </button>
-        </section>
-
-        <div className="beta-admin-status-tabs" role="tablist" aria-label="内测申请状态">
-          {STATUS_OPTIONS.map((option) => (
-            <button
-              key={option.value || "all"}
-              type="button"
-              role="tab"
-              aria-selected={status === option.value}
-              className={status === option.value ? "is-active" : ""}
-              onClick={() => setStatus(option.value)}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-
-        {error ? <p className="beta-admin-error">{error}</p> : null}
-
-        <section className="beta-admin-layout">
-          <aside className="beta-admin-list" aria-label="内测申请列表">
-            {loading ? <div className="beta-admin-list__empty">正在加载申请...</div> : null}
-            {!loading && applications.length === 0 ? (
-              <div className="beta-admin-list__empty">暂无需要显示的申请</div>
-            ) : null}
-            {applications.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                className={`beta-admin-list__item${item.id === selectedApplication?.id ? " is-active" : ""}`}
-                onClick={() => setSelectedId(item.id)}
-              >
-                <span className={`beta-admin-status beta-admin-status--${item.status}`}>{STATUS_LABEL[item.status]}</span>
-                <strong>{item.name || item.username || `申请 #${item.id}`}</strong>
-                <small>{item.industry || "未填写行业"} · {formatDate(item.createdAt)}</small>
-              </button>
-            ))}
-          </aside>
-
-          {selectedApplication ? (
-            <article className="beta-admin-detail">
-              <header className="beta-admin-detail__header">
-                <div>
-                  <span><ExperimentOutlined /> {STATUS_LABEL[selectedApplication.status]}</span>
-                  <h2>{selectedApplication.name || "未填写姓名"}</h2>
-                  <p>{selectedApplication.selfStatement || "申请人未填写自述。"}</p>
-                </div>
-                {selectedApplication.inviteCode ? (
-                  <strong className="beta-admin-code">内测码：{selectedApplication.inviteCode}</strong>
-                ) : null}
-              </header>
-
-              <section className="beta-admin-form-card">
-                <h3>一、个人基础信息</h3>
-                <div className="beta-admin-field-grid">
-                  <DetailField label="姓名 / 常用昵称" value={valueOrEmpty(selectedApplication.name)} />
-                  <DetailField label="联系手机号码" value={valueOrEmpty(selectedApplication.phone)} />
-                  <DetailField label="微信账号" value={valueOrEmpty(selectedApplication.wechat)} />
-                  <DetailField label="所在行业 / 职业" value={valueOrEmpty(selectedApplication.industry)} />
-                  <DetailField label="所属公司 / 机构" value={valueOrEmpty(selectedApplication.company)} />
-                  <DetailField label="所在城市" value={valueOrEmpty(selectedApplication.city)} />
-                  <DetailField label="关联账号" value={selectedApplication.username || `UID ${selectedApplication.userId ?? "未登录提交"}`} />
-                  <DetailField label="提交时间" value={formatDate(selectedApplication.createdAt)} />
-                </div>
-              </section>
-
-              <section className="beta-admin-form-card">
-                <h3>二、AI 从业与使用经历</h3>
-                <div className="beta-admin-field-grid">
-                  <DetailField label="常用 AI 创作工具" value={valueOrEmpty(selectedApplication.aiTools)} wide />
-                  <DetailField label="AI 内容创作从业时长" value={valueOrEmpty(selectedApplication.aiDuration)} />
-                  <DetailField label="是否深耕相关赛道" value={valueOrEmpty(selectedApplication.aiTrack)} />
-                  <DetailField label="日常主要创作方向" value={joinValues(selectedApplication.aiDirection)} wide />
-                </div>
-              </section>
-
-              <section className="beta-admin-form-card">
-                <h3>三、内测使用意向调研</h3>
-                <div className="beta-admin-field-grid">
-                  <DetailField label="每周稳定使用次数" value={valueOrEmpty(selectedApplication.weeklyUsage)} />
-                  <DetailField label="反馈意愿" value={valueOrEmpty(selectedApplication.feedbackWilling)} />
-                  <DetailField label="最想体验功能" value={joinValues(selectedApplication.wantFeature)} wide />
-                </div>
-              </section>
-
-              <section className="beta-admin-form-card">
-                <h3>四、申请自述与确认</h3>
-                <p className="beta-admin-statement">{selectedApplication.selfStatement || "未填写"}</p>
-                <div className="beta-admin-field-grid">
-                  <DetailField label="申请人确认签字" value={valueOrEmpty(selectedApplication.signature)} />
-                  <DetailField label="同意规则" value={selectedApplication.agreeRules ? "已同意" : "未同意"} />
-                  <DetailField label="IP" value={valueOrEmpty(selectedApplication.ipAddress)} />
-                  <DetailField label="客户端" value={valueOrEmpty(selectedApplication.userAgent)} wide />
-                </div>
-              </section>
-
-              {selectedApplication.status !== "pending" ? (
-                <section className="beta-admin-form-card">
-                  <h3>审核结果</h3>
-                  <div className="beta-admin-field-grid">
-                    <DetailField label="审核人" value={selectedApplication.reviewerUsername || `UID ${selectedApplication.reviewedBy ?? "-"}`} />
-                    <DetailField label="审核时间" value={formatDate(selectedApplication.reviewedAt)} />
-                    <DetailField label="审核备注" value={valueOrEmpty(selectedApplication.reviewNote)} wide />
-                  </div>
-                </section>
-              ) : (
-                <section className="beta-admin-review-box">
-                  <label>
-                    <span>审核备注</span>
-                    <textarea
-                      value={reviewNote}
-                      onChange={(event) => setReviewNote(event.target.value)}
-                      placeholder="填写通过说明或驳回原因；驳回时该备注会作为用户通知内容。"
-                    />
-                  </label>
-                  <div className="beta-admin-actions">
-                    <button type="button" disabled={submitting} onClick={() => void handleDecision("reject")}>
-                      <CloseCircleOutlined />
-                      驳回并通知
-                    </button>
-                    <button type="button" disabled={submitting} onClick={() => void handleDecision("approve")}>
-                      <CheckCircleOutlined />
-                      通过并发放内测码
-                    </button>
-                  </div>
-                </section>
-              )}
-            </article>
-          ) : (
-            <div className="beta-admin-detail beta-admin-detail--empty">选择左侧申请查看表单详情</div>
-          )}
-        </section>
-      </div>
-    </WorkspacePageShell>
-  );
-}

src/features/canvas/canvasConstants.ts

@@ -58,13 +58,13 @@ export const defaultTextModelId = textModelOptions[0].id;
 
 // --- Image model options ---
 export const imageModelOptions: CanvasOption[] = [
-  { value: "wan2.7-image", label: "wan 2.7" },
-  { value: "wan2.7-image-pro", label: "wan 2.7 Pro" },
-  { value: "gpt-image-2", label: "omni-GPT" },
-  { value: "gpt-image-2-vip", label: "omni-GPT VIP" },
-  { value: "nano-banana-pro", label: "omni-水果 Pro" },
-  { value: "nano-banana-2", label: "omni-水果 2" },
-  { value: "nano-banana-fast", label: "omni-水果" },
+  { value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro · 0.20 积分" },
+  { value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
+  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
+  { value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
+  { value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
 ];
 
 export const imageRatioOptions: CanvasOption[] = [

src/features/ecommerce/EcommercePage.tsx

@@ -842,7 +842,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const skipInitialCloneAutoSaveRef = useRef(true);
   const skipNextCloneAutoSaveRef = useRef(false);
   const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
-  useEffect(() => { setPreviewZoom(1); }, [activeTool]);
   const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
   const [productSetPlatform, setProductSetPlatform] = useState(platformOptions[0]);
   const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
@@ -883,30 +882,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [videoOutfitRefFile, setVideoOutfitRefFile] = useState<File | null>(null);
   const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
   const [previewZoom, setPreviewZoom] = useState(1);
-
-  const handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
-    if (!event.currentTarget) return;
-    event.preventDefault();
-    const container = event.currentTarget as HTMLElement;
-    const rect = container.getBoundingClientRect();
-    const cursorX = event.clientX - rect.left;
-    const cursorY = event.clientY - rect.top;
-    const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
-
-    const nextZoom = Math.min(2, Math.max(0.25, previewZoom * zoomDelta));
-    if (nextZoom === previewZoom) return;
-
-    const contentX = (cursorX + container.scrollLeft) / previewZoom;
-    const contentY = (cursorY + container.scrollTop) / previewZoom;
-
-    setPreviewZoom(nextZoom);
-
-    requestAnimationFrame(() => {
-      container.scrollLeft = contentX * nextZoom - cursorX;
-      container.scrollTop = contentY * nextZoom - cursorY;
-    });
-  };
-
   const [requirement, setRequirement] = useState("");
   const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
   const [cloneSettingName, setCloneSettingName] = useState("新建创作");
@@ -2357,7 +2332,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const setPreview = (
-    <main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览" onWheel={handlePreviewWheel}>
+    <main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览">
       <div className="product-clone-preview__headline">
         <h1>预览</h1>
         <p>
@@ -2425,7 +2400,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const clonePreview = (
-    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览" onWheel={handlePreviewWheel}>
+    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览">
       <header className="clone-ai-preview-header">
         <strong>预览</strong>
         <span>
@@ -2635,7 +2610,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const detailPreview = (
-    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览" onWheel={handlePreviewWheel}>
+    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览">
       <div className="product-clone-preview__headline">
         <h1>A+/详情页</h1>
         <p>
@@ -2672,7 +2647,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const tryOnPreview = (
-    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览" onWheel={handlePreviewWheel}>
+    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览">
       <div className="product-clone-preview__headline">
         <h1>AI服饰穿戴</h1>
         <p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>

src/features/home/HomePage.tsx

@@ -1,11 +1,9 @@
 import {
   ArrowRightOutlined,
-  DashboardOutlined,
   FileSearchOutlined,
   PlayCircleOutlined,
   PlusOutlined,
   ShoppingOutlined,
-  ThunderboltOutlined,
 } from "@ant-design/icons";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
@@ -15,7 +13,6 @@ import "../../styles/pages/home.css";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
-import ModelGenerationShowcase from "./ModelGenerationShowcase";
 
 function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
   const { ref, isVisible } = useScrollEntrance<HTMLElement>();
@@ -30,7 +27,6 @@ const [heroImage1, heroImage2, heroImage3] = ossAssets.home.heroSlides;
 const {
   ecommerce: featureEcommerceImage,
   script: featureScriptImage,
-  token: featureTokenImage,
 } = ossAssets.home.features;
 
 interface HomePageProps {
@@ -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>
     </>

src/features/home/ModelGenerationShowcase.tsx

@@ -1,12 +1,21 @@
+import {
+  BgColorsOutlined,
+  CameraOutlined,
+  PictureOutlined,
+  PlayCircleOutlined,
+  RobotOutlined,
+  ShoppingOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
 import { useEffect, useRef, useState } from "react";
 import "../../styles/pages/model-generation-showcase.css";
 
 type ShowMode = "agent" | "image" | "video";
 
 const MODE_TABS = [
-  { key: "agent" as const, icon: "🤖", title: "Agent 模式", desc: "文本生成，对话式交互，智能推理" },
-  { key: "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>

src/features/home/ToolboxSection.tsx

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

src/features/more/MorePage.tsx

@@ -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>

src/features/workbench/workbenchConstants.ts

@@ -233,11 +233,11 @@ export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as Workbe
 export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
   { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K" },
   { value: "wan2.7-image", label: "wan 2.7" },
-  { value: "gpt-image-2", label: "omni-GPT" },
-  { value: "gpt-image-2-vip", label: "omni-GPT VIP" },
-  { value: "nano-banana-pro", label: "omni-水果 Pro" },
-  { value: "nano-banana-2", label: "omni-水果 2" },
-  { value: "nano-banana-fast", label: "omni-水果" },
+  { value: "gpt-image-2", label: "GPT-Image-2" },
+  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro" },
+  { value: "nano-banana-2", label: "Nano Banana 2" },
+  { value: "nano-banana-fast", label: "Nano Banana" },
 ];
 
 export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));

src/styles/components/beta-application-modal.css

@@ -1,471 +0,0 @@
-/* ── Beta Application Modal ── */
-/* Word-document style: paper-white panel, larger serif-ish typography, clear form fields */
-
-.beta-application-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: center;
-}
-
-.beta-application-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  border: 0;
-  background: rgba(0, 0, 0, 0.58);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  cursor: pointer;
-}
-
-/* ── Panel: paper-like document ── */
-.beta-application-modal__panel {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  width: min(800px, 94vw);
-  max-height: 90vh;
-  overflow: hidden;
-  border: 1px solid #d9d5cf;
-  border-radius: 4px;
-  background: #faf8f4;
-  color: #1e1e1e;
-  box-shadow:
-    0 2px 0 #e8e4dc,
-    0 4px 0 #d9d5cf,
-    0 8px 32px rgba(0, 0, 0, 0.2),
-    0 24px 80px rgba(0, 0, 0, 0.12);
-  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-/* ── Header ── */
-.beta-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 28px 36px 20px;
-  border-bottom: 2px solid #1e1e1e;
-  flex-shrink: 0;
-  background: #f5f1ea;
-}
-
-.beta-modal-header__left {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.beta-modal-header__icon {
-  font-size: 28px;
-  color: #166534;
-  flex-shrink: 0;
-}
-
-.beta-modal-header h2 {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 900;
-  color: #1e1e1e;
-  letter-spacing: 1px;
-  line-height: 1.3;
-}
-
-.beta-modal-header__subtitle {
-  margin: 2px 0 0;
-  font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.beta-modal-header__subtitle strong {
-  color: #166534;
-  font-weight: 800;
-}
-
-.beta-modal-header__close {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border: 1px solid #d5cfc4;
-  border-radius: 4px;
-  background: #f5f1ea;
-  color: #8c8276;
-  cursor: pointer;
-  font-size: 14px;
-  flex-shrink: 0;
-  transition: background 120ms ease, color 120ms ease;
-}
-
-.beta-modal-header__close:hover {
-  background: #ede6da;
-  color: #1e1e1e;
-}
-
-.beta-modal-header__close:disabled,
-.beta-modal-footer__btn:disabled {
-  opacity: 0.58;
-  cursor: wait;
-}
-
-/* ── Scrollable body ── */
-.beta-modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 32px 40px;
-  background: #faf8f4;
-}
-
-/* ── Document sections ── */
-.beta-doc-section {
-  margin-bottom: 28px;
-  padding-bottom: 28px;
-  border-bottom: 1px dashed #d9d2c5;
-}
-
-.beta-doc-section:last-of-type {
-  border-bottom: 0;
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-.beta-doc-section__title {
-  margin: 0 0 18px;
-  font-size: 16px;
-  font-weight: 900;
-  color: #1e1e1e;
-  letter-spacing: 0.5px;
-}
-
-.beta-required {
-  color: #dc2626;
-  font-style: normal;
-  font-weight: 800;
-}
-
-.beta-doc-section__desc {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: #4b5563;
-  line-height: 1.7;
-}
-
-/* ── Single-column grid for form fields ── */
-.beta-doc-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.beta-doc-grid--two {
-  margin-top: 14px;
-}
-
-/* ── Text field (Word underline style) ── */
-.beta-text-field {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-}
-
-.beta-text-field__label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1e1e1e;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.beta-text-field__label::after {
-  content: "：";
-}
-
-.beta-text-field__input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  border-bottom: 1px solid #c5beb2;
-  outline: none;
-  background: transparent;
-  padding: 2px 0;
-  font-size: 14px;
-  font-family: inherit;
-  color: #1e1e1e;
-  line-height: 1.8;
-  transition: border-color 140ms ease;
-}
-
-.beta-text-field__input::placeholder {
-  color: #c4c4c4;
-  font-size: 13px;
-}
-
-.beta-text-field__input:focus {
-  border-bottom-color: #166534;
-  border-bottom-width: 2px;
-  margin-bottom: -1px;
-}
-
-.beta-text-field__input[readonly] {
-  color: #6b7280;
-  cursor: default;
-}
-
-/* ── Form group (spans full row when needed) ── */
-.beta-form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.beta-form-group--full {
-  grid-column: 1 / -1;
-}
-
-.beta-form-group__label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1e1e1e;
-}
-
-.beta-form-group__label::after {
-  content: "：";
-}
-
-/* ── Radio group ── */
-.beta-radio-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 14px;
-}
-
-.beta-radio {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #374151;
-  padding: 3px 0;
-  user-select: none;
-}
-
-.beta-radio input[type="radio"] {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 2px solid #b8b0a4;
-  border-radius: 50%;
-  margin: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.beta-radio input[type="radio"]:checked {
-  border-color: #166534;
-  background: #166534;
-  box-shadow: inset 0 0 0 3px #ffffff;
-}
-
-.beta-radio:hover input[type="radio"] {
-  border-color: #166534;
-}
-
-.beta-radio span {
-  line-height: 1.5;
-}
-
-/* ── Checkbox group ── */
-.beta-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 14px;
-}
-
-.beta-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #374151;
-  padding: 3px 0;
-  user-select: none;
-}
-
-.beta-checkbox input[type="checkbox"] {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 2px solid #b8b0a4;
-  border-radius: 3px;
-  margin: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.beta-checkbox input[type="checkbox"]:checked {
-  border-color: #166534;
-  background: #166534;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  background-size: 10px;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.beta-checkbox:hover input[type="checkbox"] {
-  border-color: #166534;
-}
-
-.beta-checkbox span {
-  line-height: 1.5;
-}
-
-/* ── Textarea ── */
-.beta-textarea {
-  width: 100%;
-  min-height: 140px;
-  resize: vertical;
-  border: 1px solid #c5beb2;
-  border-radius: 4px;
-  outline: none;
-  background: #ffffff;
-  padding: 12px 14px;
-  font-size: 14px;
-  font-family: inherit;
-  color: #1e1e1e;
-  line-height: 1.8;
-  transition: border-color 140ms ease;
-  box-sizing: border-box;
-}
-
-.beta-textarea::placeholder {
-  color: #c4c4c4;
-}
-
-.beta-textarea:focus {
-  border-color: #166534;
-  box-shadow: 0 0 0 2px rgba(22, 101, 52, 0.1);
-}
-
-/* ── Rules list ── */
-.beta-rules-list {
-  margin: 0 0 18px;
-  padding-left: 22px;
-}
-
-.beta-rules-list li {
-  font-size: 14px;
-  color: #374151;
-  line-height: 1.9;
-  margin-bottom: 4px;
-}
-
-.beta-rules-list li strong {
-  color: #166534;
-}
-
-/* ── Agreement checkbox row ── */
-.beta-agree-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 18px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 700;
-  color: #166534;
-  user-select: none;
-}
-
-.beta-agree-row input[type="checkbox"] {
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border: 2px solid #b8b0a4;
-  border-radius: 3px;
-  margin-top: 2px;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.beta-agree-row input[type="checkbox"]:checked {
-  border-color: #166534;
-  background: #166534;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  background-size: 12px;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-/* ── Footer ── */
-.beta-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 16px 36px 20px;
-  border-top: 1px solid #e0dbd2;
-  flex-shrink: 0;
-  background: #f5f1ea;
-}
-
-.beta-modal-footer__message {
-  flex: 1;
-  margin: 0;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.5;
-}
-
-.beta-modal-footer__message--success {
-  color: #166534;
-}
-
-.beta-modal-footer__message--error {
-  color: #dc2626;
-}
-
-.beta-modal-footer__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  padding: 0 24px;
-  border: 0;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: opacity 120ms ease, transform 120ms ease;
-}
-
-.beta-modal-footer__btn:active {
-  transform: scale(0.97);
-}
-
-.beta-modal-footer__btn--secondary {
-  background: #e8e3d9;
-  color: #5c5348;
-}
-
-.beta-modal-footer__btn--secondary:hover {
-  background: #dbd4c7;
-}
-
-.beta-modal-footer__btn--primary {
-  background: #166534;
-  color: #ffffff;
-}
-
-.beta-modal-footer__btn--primary:hover {
-  background: #14532d;
-}

src/styles/index.css

@@ -3,10 +3,6 @@
 @import "./shell/app-shell.css";
 @import "./components/primitives.css";
 @import "./components/legacy-components.css";
-@import "./components/recharge-modal.css";
-@import "./components/beta-application-modal.css";
-@import "./components/dropzone.css";
-@import "./components/skeleton.css";
 @import "./components/toast.css";
 @import "./components/page-transition.css";
 @import "./components/motion.css";

src/styles/pages/beta-applications.css

@@ -1,403 +0,0 @@
-.beta-admin-page__inner {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  width: min(1180px, calc(100vw - 48px));
-  padding: 24px;
-}
-
-.beta-admin-toolbar {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.beta-admin-toolbar span {
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 850;
-}
-
-.beta-admin-toolbar h1 {
-  margin: 4px 0;
-  color: var(--text-primary);
-  font-size: 22px;
-}
-
-.beta-admin-toolbar p {
-  max-width: 620px;
-  margin: 0;
-  color: var(--text-muted);
-  font-size: 13px;
-  line-height: 1.7;
-}
-
-.beta-admin-toolbar button,
-.beta-admin-status-tabs button,
-.beta-admin-actions button,
-.beta-admin-access button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-elevated);
-  color: var(--text-primary);
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.beta-admin-toolbar button {
-  min-height: 36px;
-  padding: 0 14px;
-}
-
-.beta-admin-toolbar button:disabled,
-.beta-admin-actions button:disabled {
-  opacity: 0.55;
-  cursor: wait;
-}
-
-.beta-admin-status-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.beta-admin-status-tabs button {
-  min-height: 34px;
-  padding: 0 14px;
-  color: var(--text-muted);
-}
-
-.beta-admin-status-tabs button.is-active {
-  border-color: rgba(var(--accent-rgb), 0.45);
-  background: rgba(var(--accent-rgb), 0.14);
-  color: var(--accent);
-}
-
-.beta-admin-error {
-  margin: 0;
-  color: var(--error, #ef4444);
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.beta-admin-layout {
-  display: grid;
-  grid-template-columns: 300px minmax(0, 1fr);
-  gap: 16px;
-  align-items: start;
-}
-
-.beta-admin-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: calc(100vh - 220px);
-  overflow: auto;
-  padding-right: 4px;
-}
-
-.beta-admin-list__item {
-  display: grid;
-  gap: 6px;
-  width: 100%;
-  padding: 13px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-card);
-  color: var(--text-primary);
-  text-align: left;
-  cursor: pointer;
-}
-
-.beta-admin-list__item.is-active {
-  border-color: rgba(var(--accent-rgb), 0.52);
-  background: rgba(var(--accent-rgb), 0.1);
-}
-
-.beta-admin-list__item strong {
-  overflow: hidden;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.beta-admin-list__item small {
-  overflow: hidden;
-  color: var(--text-muted);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.beta-admin-list__empty,
-.beta-admin-detail--empty {
-  display: grid;
-  min-height: 180px;
-  place-items: center;
-  border: 1px dashed var(--border-subtle);
-  border-radius: 8px;
-  color: var(--text-muted);
-  font-size: 13px;
-}
-
-.beta-admin-status {
-  width: fit-content;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 850;
-}
-
-.beta-admin-status--pending {
-  background: rgba(245, 158, 11, 0.16);
-  color: #f59e0b;
-}
-
-.beta-admin-status--approved {
-  background: rgba(16, 185, 129, 0.16);
-  color: #10b981;
-}
-
-.beta-admin-status--rejected {
-  background: rgba(239, 68, 68, 0.16);
-  color: #ef4444;
-}
-
-.beta-admin-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  min-width: 0;
-}
-
-.beta-admin-detail__header,
-.beta-admin-form-card,
-.beta-admin-review-box {
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-card);
-}
-
-.beta-admin-detail__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 18px;
-}
-
-.beta-admin-detail__header span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 850;
-}
-
-.beta-admin-detail__header h2 {
-  margin: 5px 0 8px;
-  color: var(--text-primary);
-  font-size: 20px;
-}
-
-.beta-admin-detail__header p {
-  display: -webkit-box;
-  overflow: hidden;
-  margin: 0;
-  color: var(--text-muted);
-  font-size: 13px;
-  line-height: 1.7;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-
-.beta-admin-code {
-  flex-shrink: 0;
-  padding: 8px 10px;
-  border: 1px solid rgba(var(--accent-rgb), 0.35);
-  border-radius: 8px;
-  background: rgba(var(--accent-rgb), 0.12);
-  color: var(--accent);
-  font-size: 13px;
-}
-
-.beta-admin-form-card {
-  padding: 16px;
-}
-
-.beta-admin-form-card h3 {
-  margin: 0 0 12px;
-  color: var(--text-primary);
-  font-size: 15px;
-}
-
-.beta-admin-field-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.beta-admin-field {
-  min-width: 0;
-  padding: 10px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 6px;
-  background: var(--surface-elevated);
-}
-
-.beta-admin-field--wide {
-  grid-column: 1 / -1;
-}
-
-.beta-admin-field span {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.beta-admin-field strong {
-  display: block;
-  overflow-wrap: anywhere;
-  color: var(--text-primary);
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
-
-.beta-admin-statement {
-  margin: 0 0 12px;
-  padding: 12px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 6px;
-  background: var(--surface-elevated);
-  color: var(--text-primary);
-  font-size: 13px;
-  line-height: 1.8;
-  white-space: pre-wrap;
-}
-
-.beta-admin-review-box {
-  padding: 16px;
-}
-
-.beta-admin-review-box label {
-  display: grid;
-  gap: 8px;
-}
-
-.beta-admin-review-box label span {
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 850;
-}
-
-.beta-admin-review-box textarea {
-  width: 100%;
-  min-height: 92px;
-  resize: vertical;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-elevated);
-  color: var(--text-primary);
-  font: inherit;
-  font-size: 13px;
-  line-height: 1.7;
-  outline: none;
-  padding: 10px;
-}
-
-.beta-admin-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 12px;
-}
-
-.beta-admin-actions button {
-  min-height: 38px;
-  padding: 0 16px;
-}
-
-.beta-admin-actions button:first-child {
-  border-color: rgba(239, 68, 68, 0.35);
-  color: #ef4444;
-}
-
-.beta-admin-actions button:last-child {
-  border-color: rgba(16, 185, 129, 0.35);
-  background: rgba(16, 185, 129, 0.14);
-  color: #10b981;
-}
-
-.beta-admin-access {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  min-height: 420px;
-  color: var(--text-muted);
-  text-align: center;
-}
-
-.beta-admin-access svg {
-  color: var(--accent);
-  font-size: 28px;
-}
-
-.beta-admin-access h1 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 20px;
-}
-
-.beta-admin-access p {
-  margin: 0;
-  font-size: 13px;
-}
-
-.beta-admin-access button {
-  min-height: 38px;
-  padding: 0 18px;
-  border-color: rgba(var(--accent-rgb), 0.38);
-  background: rgba(var(--accent-rgb), 0.14);
-  color: var(--accent);
-}
-
-@media (max-width: 900px) {
-  .beta-admin-page__inner {
-    width: min(100%, calc(100vw - 24px));
-    padding: 16px 12px;
-  }
-
-  .beta-admin-toolbar,
-  .beta-admin-detail__header {
-    flex-direction: column;
-  }
-
-  .beta-admin-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .beta-admin-list {
-    max-height: none;
-  }
-}
-
-@media (max-width: 640px) {
-  .beta-admin-field-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .beta-admin-actions {
-    flex-direction: column;
-  }
-}

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

@@ -83,14 +83,15 @@
 .mgs-brand-section h1 {
   max-width: 9.6em;
   margin: 0;
-  background: linear-gradient(135deg, var(--mgs-green), var(--mgs-mint), var(--mgs-blue));
-  -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;
+  }
+}

src/styles/pages/more.css

@@ -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;
+  }
 }

src/styles/pages/toolbox.css

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

src/styles/pages/workbench.css

@@ -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;

src/styles/shell/app-shell.css

@@ -248,43 +248,6 @@
   color: var(--accent);
 }
 
-.beta-apply-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-width: 0;
-  height: 36px;
-  padding: 0 14px;
-  border: 1px solid rgba(var(--accent-rgb), 0.3);
-  border-radius: 12px;
-  background: rgba(var(--accent-rgb), 0.1);
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 850;
-  cursor: pointer;
-  transition:
-    transform 160ms ease,
-    border-color 160ms ease,
-    background 160ms ease;
-  animation: beta-pulse 2.5s ease-in-out infinite;
-}
-
-.beta-apply-button:hover {
-  border-color: var(--accent);
-  background: rgba(var(--accent-rgb), 0.18);
-}
-
-.beta-apply-button:active {
-  transform: scale(0.96);
-}
-
-@keyframes beta-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.25); }
-  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
-}
-
 .member-button {
   color: var(--accent);
   font-weight: 600;

src/styles/themes/dark-green.css

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

src/types.ts

@@ -25,7 +25,6 @@ export type WebViewKey =
   | "dialogGenerator"
   | "communityReview"
   | "communityCaseAdd"
-  | "betaApplications"
   | "report"
   | "providerHealth"
   | "userAgreement"
@@ -74,7 +73,6 @@ export interface WebUserSession extends WebApiResultMeta {
     enterpriseAdminUserId?: number | string | null;
     balanceCents?: number;
     enterpriseBalanceCents?: number;
-    maxConcurrency?: number;
     activePackages?: Array<{
       name: string;
       expiresAt: string;