feat: 首页功能页样式与组件更新

src/features/home/HomePage.tsx

@@ -7,16 +7,13 @@ import {
   ShoppingOutlined,
   ThunderboltOutlined,
 } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
 import { useScrollEntrance } from "../../hooks/useScrollEntrance";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
 import ModelGenerationShowcase from "./ModelGenerationShowcase";
-const ecommerceTemplate1 = "https://www.omniai.net.cn/static/home-ecommerce-template-1.png";
-const ecommerceTemplate2 = "https://www.omniai.net.cn/static/home-ecommerce-template-2.png";
-const ecommerceTemplate3 = "https://www.omniai.net.cn/static/home-ecommerce-template-3.png";
 
 function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
   const { ref, isVisible } = useScrollEntrance<HTMLElement>();
@@ -54,16 +51,6 @@ const HOME_CAROUSEL_IMAGES = [
 ];
 
 const HOME_FEATURES = [
-  {
-    key: "script",
-    eyebrow: "Script Review",
-    title: "剧本智能测评",
-    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
-    imageUrl: featureScriptImage,
-    actionLabel: "开始测评",
-    icon: <FileSearchOutlined />,
-    stats: ["六维评分", "质量量化", "逐项优化"],
-  },
   {
     key: "model",
     eyebrow: "AI Generation",
@@ -84,6 +71,16 @@ const HOME_FEATURES = [
     icon: <ShoppingOutlined />,
     stats: ["多场景", "多角度", "批量输出"],
   },
+  {
+    key: "script",
+    eyebrow: "Script Review",
+    title: "剧本智能测评",
+    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
+    imageUrl: featureScriptImage,
+    actionLabel: "开始测评",
+    icon: <FileSearchOutlined />,
+    stats: ["六维评分", "质量量化", "逐项优化"],
+  },
 ];
 
 const HOME_EXPERIENCE_POINTS = [
@@ -93,37 +90,96 @@ const HOME_EXPERIENCE_POINTS = [
   { label: "电商", meta: "商品视觉", tone: "amber" },
 ];
 
-const HOME_ECOMMERCE_TEMPLATES = [
-  {
-    title: "卖点详情图",
-    tag: "详情",
-    meta: "中文卖点标注",
-    imageUrl: ecommerceTemplate1,
-  },
-  {
-    title: "场景主图",
-    tag: "主图",
-    meta: "商品氛围构图",
-    imageUrl: ecommerceTemplate2,
-  },
-  {
-    title: "虚拟模特",
-    tag: "模特",
-    meta: "使用场景延展",
-    imageUrl: ecommerceTemplate3,
-  },
+const ECOMMERCE_MATRIX_FEATURES = [
+  { icon: "⚡", title: "高效工作流", description: "自动化处理，一键触发" },
+  { icon: "⊞", title: "矩阵式产出", description: "多场景、多尺寸批量生成" },
+  { icon: "◈", title: "一致性保证", description: "智能保持商品特征与风格统一" },
 ];
 
-const HOME_ECOMMERCE_TOOLS = [
-  { title: "主图", meta: "平台首图" },
-  { title: "详情", meta: "卖点拆解" },
-  { title: "模特", meta: "虚拟模特" },
-  { title: "短视频", meta: "首帧方案" },
+const ECOMMERCE_MATRIX_PROCESS = [
+  { icon: "📤", label: "上传原图", subLabel: "Upload" },
+  { icon: "🔍", label: "AI识别", subLabel: "Recognition" },
+  { icon: "⚙️", label: "生成处理", subLabel: "Processing" },
+  { icon: "📦", label: "矩阵产出", subLabel: "Output" },
+];
+
+const ECOMMERCE_MATRIX_AI_STEPS = ["智能识别主体", "3D虚拟模特", "场景生成", "详情图生成", "批量导出"];
+
+type EcommerceMatrixModelCard = {
+  kind: "model";
+  color: "brown" | "green" | "blue";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square?: false;
+};
+
+type EcommerceMatrixSceneCard = {
+  kind: "scene";
+  color: "p1" | "p2" | "p3";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square: true;
+  variant?: "greenery" | "blue";
+};
+
+type EcommerceMatrixLayoutCard = {
+  kind: "layout";
+  color: "c1" | "c2" | "c3";
+  tag: string;
+  tagTone: string;
+  resolution: string;
+  square: true;
+  badge: string;
+  badgeTone?: "purple";
+};
+
+type EcommerceMatrixCard = EcommerceMatrixModelCard | EcommerceMatrixSceneCard | EcommerceMatrixLayoutCard;
+
+const ECOMMERCE_MATRIX_OUTPUTS: Array<{
+  title: string;
+  subtitle: string;
+  cards: EcommerceMatrixCard[];
+}> = [
+  {
+    title: "3D 虚拟模特",
+    subtitle: "Virtual Model",
+    cards: [
+      { kind: "model", color: "brown", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+      { kind: "model", color: "green", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+      { kind: "model", color: "blue", tag: "3D", tagTone: "tag-3d", resolution: "1024×1536" },
+    ],
+  },
+  {
+    title: "场景图",
+    subtitle: "Scene Image",
+    cards: [
+      { kind: "scene", color: "p1", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true },
+      { kind: "scene", color: "p2", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "greenery" },
+      { kind: "scene", color: "p3", tag: "场景", tagTone: "tag-scene", resolution: "1024×1024", square: true, variant: "blue" },
+    ],
+  },
+  {
+    title: "详情图",
+    subtitle: "Detail Image",
+    cards: [
+      { kind: "layout", color: "c1", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "优雅随行" },
+      { kind: "layout", color: "c2", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "限时特惠", badgeTone: "purple" },
+      { kind: "layout", color: "c3", tag: "详情", tagTone: "tag-layout", resolution: "1080×1080", square: true, badge: "新品首发" },
+    ],
+  },
 ];
 
 const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
 const HOME_CAROUSEL_TRANSITION_MS = 860;
 
+type EcommerceFlowLine = {
+  d: string;
+  x: number;
+  y: number;
+};
+
 interface HomeCarouselMotion {
   direction: number;
   progress: 0 | 1;
@@ -159,38 +215,253 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
   } as CSSProperties;
 }
 
-function EcommerceFeatureShowcase() {
+function EcommerceMatrixCardVisual({ card }: { card: EcommerceMatrixCard }) {
+  if (card.kind === "model") {
+    return (
+      <div className="mock-model">
+        <div className="silhouette" />
+        <div className={`mock-product-hold ${card.color}`} />
+      </div>
+    );
+  }
+
+  if (card.kind === "scene") {
+    return (
+      <div className="mock-scene">
+        {card.variant === "greenery" ? <div className="obj greenery" /> : <div className="obj decor-item is-soft-blue" />}
+        <div className={`obj table-top${card.variant === "greenery" ? " is-warm" : ""}`} />
+        <div className={`obj prod ${card.color}`} />
+      </div>
+    );
+  }
+
   return (
-    <div className="omni-home-ecommerce-showcase">
-      <div className="omni-home-ecommerce-showcase__depth" />
-      <div className="omni-home-ecommerce-showcase__grain" />
-
-      <div className="omni-home-ecommerce-showcase__prompt">
-        <span>商品图 + 生成要求</span>
-        <strong>生成整套电商视觉</strong>
-        <p>主图、详情页、虚拟模特、短视频首帧一次整理。</p>
+    <div className="mock-layout">
+      <div className="lay-img">
+        <div className={`mini-cup ${card.color}`} />
       </div>
+      <div className="lay-text">
+        <div className={`lay-line title${card.color === "c2" ? " is-short" : card.color === "c3" ? " is-wide" : ""}`} />
+        <div className={`lay-line sub${card.color === "c2" ? " is-medium" : ""}`} />
+        <div className={`lay-line short${card.color === "c3" ? " is-medium" : ""}`} />
+        <div className={`lay-badge${card.badgeTone === "purple" ? " purple" : ""}`}>{card.badge}</div>
+      </div>
+    </div>
+  );
+}
 
-      <div className="omni-home-ecommerce-showcase__tools" aria-hidden="true">
-        {HOME_ECOMMERCE_TOOLS.map((item) => (
-          <div key={item.title} className="omni-home-ecommerce-showcase__tool">
-            <b>{item.title}</b>
-            <small>{item.meta}</small>
+function EcommerceFeatureShowcase() {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const inputCardRef = useRef<HTMLDivElement | null>(null);
+  const outputGroupRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const [flowLines, setFlowLines] = useState<EcommerceFlowLine[]>(() =>
+    ECOMMERCE_MATRIX_OUTPUTS.map(() => ({ d: "", x: 0, y: 0 })),
+  );
+
+  useEffect(() => {
+    let frameId: number | null = null;
+
+    const updateFlowLines = () => {
+      const root = rootRef.current;
+      const inputCard = inputCardRef.current;
+      if (!root || !inputCard) return;
+
+      const rootRect = root.getBoundingClientRect();
+      const inputRect = inputCard.getBoundingClientRect();
+      const sx = inputRect.right - rootRect.left;
+      const sy = inputRect.top - rootRect.top + inputRect.height / 2;
+      const cornerRadius = 24;
+
+      const nextLines = outputGroupRefs.current.slice(0, ECOMMERCE_MATRIX_OUTPUTS.length).map((group) => {
+        if (!group) return { d: "", x: 0, y: 0 };
+
+        const groupRect = group.getBoundingClientRect();
+        const tx = groupRect.left - rootRect.left;
+        const ty = groupRect.top - rootRect.top + groupRect.height / 2;
+        const totalDistance = tx - sx;
+        const splitX = sx + totalDistance * 0.3;
+        const direction = ty > sy ? 1 : ty < sy ? -1 : 0;
+        const verticalDistance = Math.abs(ty - sy);
+        const resolvedRadius = Math.min(cornerRadius, verticalDistance / 2);
+
+        const d =
+          direction === 0
+            ? `M ${sx} ${sy} L ${tx} ${ty}`
+            : `M ${sx} ${sy} L ${splitX} ${sy} Q ${splitX + resolvedRadius} ${sy}, ${splitX + resolvedRadius} ${
+                sy + direction * resolvedRadius
+              } L ${splitX + resolvedRadius} ${ty - direction * resolvedRadius} Q ${splitX + resolvedRadius} ${ty}, ${
+                splitX + resolvedRadius * 2
+              } ${ty} L ${tx} ${ty}`;
+
+        return { d, x: tx, y: ty };
+      });
+
+      setFlowLines(nextLines);
+    };
+
+    const scheduleUpdate = () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      frameId = window.requestAnimationFrame(updateFlowLines);
+    };
+
+    scheduleUpdate();
+    window.addEventListener("resize", scheduleUpdate);
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+
+    return () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      window.removeEventListener("resize", scheduleUpdate);
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className="omni-home-ecommerce-matrix">
+      <div className="bg-base" />
+      <div className="bg-grid" />
+      <div className="bg-stars" />
+      <div className="bg-vignette" />
+      <div className="bg-noise" />
+
+      <div className="page">
+        <div className="left-panel">
+          <h3 className="hero-title">
+            一张原图
+            <br />
+            矩阵生产全场景图文
+          </h3>
+
+          <p className="hero-desc">
+            从商品原图到3D虚拟模特、场景图、详情图
+            <br />
+            AI工作流自动化，批量生成，高效出图
+          </p>
+
+          <div className="features">
+            {ECOMMERCE_MATRIX_FEATURES.map((item) => (
+              <div key={item.title} className="feature-item">
+                <div className="feature-icon">{item.icon}</div>
+                <div className="feature-text">
+                  <h4>{item.title}</h4>
+                  <p>{item.description}</p>
+                </div>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
 
-      <div className="omni-home-ecommerce-showcase__gallery" aria-hidden="true">
-        {HOME_ECOMMERCE_TEMPLATES.map((item, index) => (
-          <article key={item.title} className={`omni-home-ecommerce-showcase__shot is-${index + 1}`}>
-            <img src={item.imageUrl} alt="" />
-            <div>
-              <span>{item.tag}</span>
-              <strong>{item.title}</strong>
-              <small>{item.meta}</small>
+          <div className="process-flow">
+            {ECOMMERCE_MATRIX_PROCESS.map((item, index) => (
+              <Fragment key={item.label}>
+                {index > 0 ? <span className="process-arrow">▸</span> : null}
+                <div className="process-step">
+                  <span className="step-icon">{item.icon}</span>
+                  <span className="step-label">{item.label}</span>
+                  <span className="step-sub">{item.subLabel}</span>
+                </div>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+
+        <div className="center-panel">
+          <div ref={inputCardRef} className="input-card">
+            <div className="input-card-header">
+              <span className="input-card-label">商品原图 Input</span>
+              <span className="input-card-res">3000×3000</span>
             </div>
-          </article>
-        ))}
+            <div className="input-card-img">
+              <div className="product-placeholder">
+                <div className="cup cup-1">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="cup cup-2">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="cup cup-3">
+                  <div className="cup-lid" />
+                  <div className="cup-straw" />
+                  <div className="cup-tag">DRINK MORE</div>
+                </div>
+                <div className="books">
+                  <div className="book" />
+                  <div className="book" />
+                  <div className="book" />
+                  <div className="book" />
+                </div>
+                <div className="table-surface" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="right-panel">
+          <div className="ai-node">
+            <div className="ai-node-title">AI 工作流</div>
+            <div className="ai-node-list">
+              {ECOMMERCE_MATRIX_AI_STEPS.map((item) => (
+                <div key={item} className="ai-node-item">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {ECOMMERCE_MATRIX_OUTPUTS.map((group, groupIndex) => (
+            <div
+              key={group.title}
+              ref={(node) => {
+                outputGroupRefs.current[groupIndex] = node;
+              }}
+              className="output-group"
+            >
+              <div className="output-label">
+                <h4>{group.title}</h4>
+                <p>{group.subtitle}</p>
+              </div>
+              <div className="output-cards">
+                {group.cards.map((card, cardIndex) => (
+                  <div key={`${group.title}-${cardIndex}`} className={`output-card${card.square ? " square" : ""}`}>
+                    <div className="output-card-img">
+                      <span className={`output-card-tag ${card.tagTone}`}>{card.tag}</span>
+                      <EcommerceMatrixCardVisual card={card} />
+                      <span className="output-card-res">{card.resolution}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <svg className="flow-svg" aria-hidden="true">
+          <defs>
+            <filter id="home-ecommerce-flow-glow">
+              <feGaussianBlur stdDeviation="2" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          {flowLines.map((line, index) => (
+            <Fragment key={index}>
+              <path className={`flow-path flow-path-${index + 1}`} d={line.d} filter="url(#home-ecommerce-flow-glow)" />
+              <circle className={`flow-dot flow-dot-${index + 1}`} cx={line.x} cy={line.y} r="4" filter="url(#home-ecommerce-flow-glow)" />
+            </Fragment>
+          ))}
+        </svg>
       </div>
     </div>
   );
@@ -367,19 +638,21 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
           <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
-            <div className="omni-home__feature-copy">
-              <span>
-                {feature.icon}
-                {feature.eyebrow}
-              </span>
-              <h2>{feature.title}</h2>
-              <p>{feature.description}</p>
-              <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
-                {feature.actionLabel}
-                <ArrowRightOutlined />
-              </button>
-            </div>
-            <div className="omni-home__feature-visual" aria-hidden="true">
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+              <div className="omni-home__feature-copy">
+                <span>
+                  {feature.icon}
+                  {feature.eyebrow}
+                </span>
+                <h2>{feature.title}</h2>
+                <p>{feature.description}</p>
+                <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
+                  {feature.actionLabel}
+                  <ArrowRightOutlined />
+                </button>
+              </div>
+            ) : null}
+            <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
               {feature.key === "script" ? (
                 <ScriptReviewShowcase />
               ) : feature.key === "model" ? (
@@ -390,14 +663,18 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
                 <img src={feature.imageUrl} alt="" />
               )}
             </div>
-            <div className="omni-home__feature-stats" aria-hidden="true">
-              {feature.stats.map((item) => (
-                <span key={item}>{item}</span>
-              ))}
-            </div>
+            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+              <div className="omni-home__feature-stats" aria-hidden="true">
+                {feature.stats.map((item) => (
+                  <span key={item}>{item}</span>
+                ))}
+              </div>
+            ) : null}
           </section>
         ))}
 
+        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
+
         <section className="omni-home__experience" aria-label="点击体验">
           <div className="omni-home__experience-copy">
             <span>
@@ -430,8 +707,6 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
             </button>
           </div>
         </section>
-
-        <ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
       </main>
     </section>
     </>

src/features/home/ScriptReviewShowcase.tsx

@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from "react";
 
 const DIMS = [
   { name: "钩子设计", score: 16, max: 20, hue: 145, desc: "吸引力·悬念·黄金三秒", isPerfect: false, isLow: false },
-  { name: "角色塑造", score: 15, max: 15, hue: 155, desc: "立体度·动机·弧光", isPerfect: true, isLow: false },
   { name: "剧情结构", score: 16, max: 20, hue: 165, desc: "起承转合·节奏·冲突", isPerfect: false, isLow: false },
+  { name: "角色塑造", score: 15, max: 15, hue: 155, desc: "立体度·动机·弧光", isPerfect: true, isLow: false },
   { name: "逻辑严密", score: 12, max: 15, hue: 175, desc: "自洽·伏笔·因果链", isPerfect: false, isLow: false },
   { name: "场景构建", score: 10, max: 15, hue: 185, desc: "空间·视听·画面感", isPerfect: false, isLow: true },
   { name: "内容深度", score: 8, max: 15, hue: 195, desc: "主题·情感·思想内核", isPerfect: false, isLow: true },
@@ -27,6 +27,12 @@ const OPTIMIZATIONS = [
   { dim: "逻辑严密 → 补强", priority: "中优先", priorityClass: "badge-orange", text: "补充世界观细节，强化因果链与伏笔回收" },
 ];
 
+const SHOWCASE_POINTS = [
+  { icon: "⚡", title: "六维评分", text: "结构、节奏、人物到商业潜力全面量化" },
+  { icon: "◈", title: "质量量化", text: "用雷达评分拆解剧本质量与短板" },
+  { icon: "↗", title: "逐项优化", text: "给出可执行的优化路径和打磨方向" },
+];
+
 function animateNumber(el: HTMLElement | null, target: number, duration: number) {
   if (!el) return;
   const start = performance.now();
@@ -79,125 +85,154 @@ function ScriptReviewShowcase() {
 
   return (
     <div className="omni-script-review-showcase" id="script-review-showcase">
-      {/* Score Hero */}
-      <div className="srs-score-hero">
-        <div className="srs-score-left">
-          <div className="srs-score-circle">
-            <div className="srs-score-circle-inner">
-              <span className="srs-score-num" ref={scoreRef}>0</span>
-              <span className="srs-score-den">/ 100</span>
-            </div>
-          </div>
-          <div className="srs-score-meta">
-            <div className="srs-score-grade">A 级</div>
-            <div className="srs-score-tags">
-              <span className="srs-score-tag">现实剧情</span>
-              <span className="srs-score-tag">58min</span>
-              <span className="srs-score-tag">6角色</span>
-            </div>
-          </div>
+      <div className="srs-left-panel">
+        <div className="srs-brand-section">
+          <h1>剧本智能测评</h1>
+          <p>用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。</p>
         </div>
-        <div className="srs-score-divider" />
-        <div className="srs-score-right">
-          <div className="srs-score-proj">电商广告片生成项目计划 · 评测结果</div>
-          <div className="srs-score-summary">
-            现实剧情特征清晰，角色塑造表现突出。当前最值得继续打磨的是内容深度，建议围绕人物选择、冲突升级和可拍摄细节继续压实。
-          </div>
+
+        <div className="srs-point-list">
+          {SHOWCASE_POINTS.map((item) => (
+            <div key={item.title} className="srs-point-card">
+              <div className="srs-point-icon">{item.icon}</div>
+              <div>
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="srs-flow-card">
+          <span>上传剧本</span>
+          <b>→</b>
+          <span>六维评分</span>
+          <b>→</b>
+          <span>优化建议</span>
         </div>
       </div>
 
-      {/* Vertical Bar Chart */}
-      <div className="srs-chart-card">
-        <div className="srs-chart-title">六维评分 Dimension Breakdown</div>
-        <div className="srs-chart-body">
-          {DIMS.map((dim, i) => {
-            const pct = dim.score / dim.max;
-            return (
-              <div key={dim.name} className="srs-chart-col">
-                <div className="srs-chart-bar-wrap">
-                  <div className="srs-chart-bar-bg" style={{ height: "100%" }} />
-                  <div
-                    ref={(el) => { barRefs.current[i] = el; }}
-                    className={`srs-chart-bar-fill${dim.isPerfect ? " is-perfect" : ""}${dim.isLow ? " is-low" : ""}`}
-                    data-pct={String(Math.round(pct * 100))}
-                    style={{ height: "0%" }}
-                  >
-                    <div className="srs-chart-bar-score">
-                      <span
-                        ref={(el) => { scoreValRefs.current[i] = el; }}
-                        data-target={String(dim.score)}
-                      >0</span>
-                      <span className="srs-chart-bar-sub">/{dim.max}</span>
-                      {dim.isPerfect && <span className="srs-chart-bar-star">★</span>}
+      <div className="srs-results-panel">
+        {/* Score Hero */}
+        <div className="srs-score-hero">
+          <div className="srs-score-left">
+            <div className="srs-score-circle">
+              <div className="srs-score-circle-inner">
+                <span className="srs-score-num" ref={scoreRef}>0</span>
+                <span className="srs-score-den">/ 100</span>
+              </div>
+            </div>
+            <div className="srs-score-meta">
+              <div className="srs-score-grade">A 级</div>
+              <div className="srs-score-tags">
+                <span className="srs-score-tag">现实剧情</span>
+                <span className="srs-score-tag">58min</span>
+                <span className="srs-score-tag">6角色</span>
+              </div>
+            </div>
+          </div>
+          <div className="srs-score-divider" />
+          <div className="srs-score-right">
+            <div className="srs-score-proj">电商广告片生成项目计划 · 评测结果</div>
+            <div className="srs-score-summary">
+              现实剧情特征清晰，角色塑造表现突出。当前最值得继续打磨的是内容深度，建议围绕人物选择、冲突升级和可拍摄细节继续压实。
+            </div>
+          </div>
+        </div>
+
+        {/* Vertical Bar Chart */}
+        <div className="srs-chart-card">
+          <div className="srs-chart-title">六维评分 Dimension Breakdown</div>
+          <div className="srs-chart-body">
+            {DIMS.map((dim, i) => {
+              const pct = dim.score / dim.max;
+              return (
+                <div key={dim.name} className="srs-chart-col">
+                  <div className="srs-chart-bar-wrap">
+                    <div className="srs-chart-bar-bg" style={{ height: "100%" }} />
+                    <div
+                      ref={(el) => { barRefs.current[i] = el; }}
+                      className={`srs-chart-bar-fill${dim.isPerfect ? " is-perfect" : ""}${dim.isLow ? " is-low" : ""}`}
+                      data-pct={String(Math.round(pct * 100))}
+                      style={{ height: "0%" }}
+                    >
+                      <div className="srs-chart-bar-score">
+                        <span
+                          ref={(el) => { scoreValRefs.current[i] = el; }}
+                          data-target={String(dim.score)}
+                        >0</span>
+                        <span className="srs-chart-bar-sub">/{dim.max}</span>
+                        {dim.isPerfect && <span className="srs-chart-bar-star">★</span>}
+                      </div>
                     </div>
                   </div>
+                  <div className="srs-chart-col-label">
+                    <div className="srs-chart-col-name">{dim.name}</div>
+                    <div className="srs-chart-col-desc">{dim.desc}</div>
+                  </div>
                 </div>
-                <div className="srs-chart-col-label">
-                  <div className="srs-chart-col-name">{dim.name}</div>
-                  <div className="srs-chart-col-desc">{dim.desc}</div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Triple Section */}
-      <div className="srs-triple-section">
-        {/* Highlights */}
-        <div className="srs-section-card is-highlight">
-          <div className="srs-section-header">
-            <div className="srs-section-icon">✦</div>
-            <span className="srs-section-label">亮点</span>
-          </div>
-          <div className="srs-section-list">
-            {HIGHLIGHTS.map((item) => (
-              <div key={item.dim} className="srs-section-item">
-                <div className="srs-section-item-head">
-                  <span className="srs-section-item-dim">{item.dim}</span>
-                  <span className="srs-section-item-score is-green">{item.score}</span>
-                </div>
-                <div className="srs-section-item-text">{item.text}</div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </div>
 
-        {/* Weaknesses */}
-        <div className="srs-section-card is-weakness">
-          <div className="srs-section-header">
-            <div className="srs-section-icon">✗</div>
-            <span className="srs-section-label">缺点</span>
-          </div>
-          <div className="srs-section-list">
-            {WEAKNESSES.map((item) => (
-              <div key={item.dim} className="srs-section-item">
-                <div className="srs-section-item-head">
-                  <span className="srs-section-item-dim">{item.dim}</span>
-                  <span className="srs-section-item-score is-red">{item.score}</span>
+        {/* Triple Section */}
+        <div className="srs-triple-section">
+          {/* Highlights */}
+          <div className="srs-section-card is-highlight">
+            <div className="srs-section-header">
+              <div className="srs-section-icon">✦</div>
+              <span className="srs-section-label">亮点</span>
+            </div>
+            <div className="srs-section-list">
+              {HIGHLIGHTS.map((item) => (
+                <div key={item.dim} className="srs-section-item">
+                  <div className="srs-section-item-head">
+                    <span className="srs-section-item-dim">{item.dim}</span>
+                    <span className="srs-section-item-score is-green">{item.score}</span>
+                  </div>
+                  <div className="srs-section-item-text">{item.text}</div>
                 </div>
-                <div className="srs-section-item-text">{item.text}</div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
-        </div>
 
-        {/* Optimization */}
-        <div className="srs-section-card is-optimize">
-          <div className="srs-section-header">
-            <div className="srs-section-icon">⚡</div>
-            <span className="srs-section-label">优化路径</span>
-          </div>
-          <div className="srs-section-list">
-            {OPTIMIZATIONS.map((item) => (
-              <div key={item.dim} className="srs-section-item">
-                <div className="srs-section-item-head">
-                  <span className="srs-section-item-dim">{item.dim}</span>
-                  <span className={`srs-section-item-badge ${item.priorityClass}`}>{item.priority}</span>
+          {/* Weaknesses */}
+          <div className="srs-section-card is-weakness">
+            <div className="srs-section-header">
+              <div className="srs-section-icon">✗</div>
+              <span className="srs-section-label">缺点</span>
+            </div>
+            <div className="srs-section-list">
+              {WEAKNESSES.map((item) => (
+                <div key={item.dim} className="srs-section-item">
+                  <div className="srs-section-item-head">
+                    <span className="srs-section-item-dim">{item.dim}</span>
+                    <span className="srs-section-item-score is-red">{item.score}</span>
+                  </div>
+                  <div className="srs-section-item-text">{item.text}</div>
                 </div>
-                <div className="srs-section-item-text">{item.text}</div>
-              </div>
-            ))}
+              ))}
+            </div>
+          </div>
+
+          {/* Optimization */}
+          <div className="srs-section-card is-optimize">
+            <div className="srs-section-header">
+              <div className="srs-section-icon">⚡</div>
+              <span className="srs-section-label">优化路径</span>
+            </div>
+            <div className="srs-section-list">
+              {OPTIMIZATIONS.map((item) => (
+                <div key={item.dim} className="srs-section-item">
+                  <div className="srs-section-item-head">
+                    <span className="srs-section-item-dim">{item.dim}</span>
+                    <span className={`srs-section-item-badge ${item.priorityClass}`}>{item.priority}</span>
+                  </div>
+                  <div className="srs-section-item-text">{item.text}</div>
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </div>

src/styles/pages/ecommerce-video.css

@@ -50,7 +50,7 @@
 }
 
 .ecom-video-flowbar__pulse.is-active {
-  background: #34d399;
+  background: #00ff88;
 }
 
 .ecom-video-flowbar__wave {
@@ -97,7 +97,7 @@
 }
 
 .ecom-video-step-dot.is-done {
-  background: #34d399;
+  background: #00ff88;
 }
 
 .ecom-video-step-dot.is-active {
@@ -139,7 +139,7 @@
   place-items: center;
   border: 1px solid #1c4d3a;
   border-radius: 8px;
-  background: #34d399;
+  background: #00ff88;
   color: #06110e;
   padding: 0;
   font-size: 17px;
@@ -213,7 +213,7 @@
 }
 
 .ecom-video-flow-lines path.is-active {
-  stroke: #34d399;
+  stroke: #00ff88;
   animation: ecom-video-path-dash 1.8s linear infinite;
 }
 
@@ -319,7 +319,7 @@
 
 .ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
 .ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
-  background: #34d399;
+  background: #00ff88;
 }
 
 .ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
@@ -390,7 +390,7 @@
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
-  background: #34d399;
+  background: #00ff88;
 }
 
 .ecom-video-flow-connector.is-active i,
@@ -541,7 +541,7 @@
   place-items: center;
   border-radius: 999px;
   background: #1c4d3a;
-  color: #34d399;
+  color: #00ff88;
   font-size: 12px;
   font-weight: 900;
 }

src/styles/pages/ecommerce.css

@@ -124,7 +124,7 @@
 
 .product-clone-page[data-tool="set"] .product-set-upload:hover,
 .product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #1a2421;
 }
 
@@ -135,7 +135,7 @@
   place-items: center;
   border-radius: 999px;
   background: #20282a;
-  color: #34d399;
+  color: #00ff88;
   font-size: 32px;
 }
 
@@ -153,7 +153,7 @@
   min-width: 168px;
   height: 52px;
   border-radius: 10px;
-  background: #34d399;
+  background: #00ff88;
   color: #03130d;
   padding: 0 22px;
   font-size: 20px;
@@ -226,8 +226,8 @@
 }
 
 .product-clone-page[data-tool="set"] .product-set-output-grid button.is-active {
-  border-color: #34d399;
-  background: #34d399;
+  border-color: #00ff88;
+  background: #00ff88;
   color: #04130e;
 }
 
@@ -395,7 +395,7 @@
 }
 
 .product-clone-page[data-tool="set"] .product-set-floating-detail textarea:focus {
-  border-color: #34d399;
+  border-color: #00ff88;
   box-shadow: 0 0 0 3px rgb(52 211 153 / 14%);
 }
 
@@ -404,7 +404,7 @@
   min-width: 148px;
   border: 0;
   border-radius: 12px;
-  background: #34d399;
+  background: #00ff88;
   color: #04130e;
   padding: 0 18px;
   font-size: 17px;
@@ -1044,9 +1044,9 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #202c28;
-  color: #34d399;
+  color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active {
@@ -1072,7 +1072,7 @@
   height: 30px;
   place-items: center;
   border-radius: 7px;
-  background: #34d399;
+  background: #00ff88;
   color: #06130d;
   font-size: 11px;
   font-weight: 900;
@@ -1087,7 +1087,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-logo strong span {
-  color: #34d399;
+  color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-logo em {
@@ -1102,9 +1102,9 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-logo em.is-ready {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #17352a;
-  color: #34d399;
+  color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-card {
@@ -1153,7 +1153,7 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-upload-zone:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-dragging {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #202c28;
 }
 
@@ -1162,7 +1162,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-upload-zone:focus-visible {
-  outline: 2px solid #34d399;
+  outline: 2px solid #00ff88;
   outline-offset: 3px;
 }
 
@@ -1180,7 +1180,7 @@
   place-items: center;
   border-radius: 999px;
   background: #262a33;
-  color: #34d399;
+  color: #00ff88;
   font-size: 20px;
 }
 
@@ -1198,7 +1198,7 @@
   min-width: 122px;
   height: 38px;
   border-radius: 9px;
-  background: #34d399;
+  background: #00ff88;
   color: #06130d;
   padding: 0 16px;
   font-size: 14px;
@@ -1320,8 +1320,8 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-tag-group button.is-active {
-  border-color: #34d399;
-  background: #34d399;
+  border-color: #00ff88;
+  background: #00ff88;
   color: #06130d;
 }
 
@@ -1360,7 +1360,7 @@
   flex: 0 0 auto;
   border-radius: 999px;
   background: #17352a;
-  color: #34d399;
+  color: #00ff88;
   padding: 3px 8px;
   font-size: 11px;
   font-weight: 900;
@@ -1390,14 +1390,14 @@
   width: 4px;
   height: 4px;
   border-radius: 999px;
-  background: #34d399;
+  background: #00ff88;
   content: "";
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-platform-spec p {
   margin: 0;
   border-top: 1px solid #303540;
-  color: #34d399;
+  color: #00ff88;
   padding-top: 9px;
   font-size: 12px;
   font-weight: 800;
@@ -1511,7 +1511,7 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:hover:not(:disabled) {
   background: #26342f;
-  color: #34d399;
+  color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:active:not(:disabled) {
@@ -1588,7 +1588,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs button.is-active {
-  background: #34d399;
+  background: #00ff88;
   color: #06130d;
 }
 
@@ -1617,7 +1617,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #202c28;
 }
 
@@ -1752,7 +1752,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-replicate-link input:focus {
-  border-color: #34d399;
+  border-color: #00ff88;
   box-shadow: 0 0 0 3px rgb(52 211 153 / 10%);
 }
 
@@ -1787,7 +1787,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-replicate-levels button.is-active {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #26342f;
 }
 
@@ -1899,7 +1899,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #26342f;
 }
 
@@ -1966,8 +1966,8 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-tabs button.is-active {
-  border-color: #34d399;
-  background: #34d399;
+  border-color: #00ff88;
+  background: #00ff88;
   color: #06130d;
 }
 
@@ -2046,13 +2046,13 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button.is-active {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #26342f;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button.is-active > span {
-  border-color: #34d399;
-  background: #34d399;
+  border-color: #00ff88;
+  background: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button:active {
@@ -2119,7 +2119,7 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-select > button:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-model-select > button.is-open {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #26342f;
   box-shadow: 0 0 0 3px rgb(52 211 153 / 10%);
 }
@@ -2129,7 +2129,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-select > button:focus-visible {
-  border-color: #34d399;
+  border-color: #00ff88;
   box-shadow: 0 0 0 3px rgb(52 211 153 / 16%);
 }
 
@@ -2227,7 +2227,7 @@
 .product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button.is-active {
   background: #17352a;
-  color: #34d399;
+  color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button:active {
@@ -2290,7 +2290,7 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-textarea textarea:focus,
 .product-clone-page[data-tool="clone"] .clone-ai-model-select-grid select:focus {
-  border-color: #34d399;
+  border-color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-panel {
@@ -2342,7 +2342,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-title-row strong {
-  color: #34d399;
+  color: #00ff88;
   font-size: 13px;
   font-weight: 900;
   white-space: nowrap;
@@ -2382,7 +2382,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-options button.is-active {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #26342f;
 }
 
@@ -2428,7 +2428,7 @@
   height: 5px;
   border-radius: 999px;
   background:
-    linear-gradient(90deg, #34d399 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
+    linear-gradient(90deg, #00ff88 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-webkit-slider-thumb {
@@ -2438,15 +2438,15 @@
   appearance: none;
   border: 3px solid #101115;
   border-radius: 999px;
-  background: #34d399;
-  box-shadow: 0 0 0 1px #34d399;
+  background: #00ff88;
+  box-shadow: 0 0 0 1px #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-moz-range-track {
   height: 5px;
   border-radius: 999px;
   background:
-    linear-gradient(90deg, #34d399 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
+    linear-gradient(90deg, #00ff88 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-moz-range-thumb {
@@ -2454,8 +2454,8 @@
   height: 14px;
   border: 3px solid #101115;
   border-radius: 999px;
-  background: #34d399;
-  box-shadow: 0 0 0 1px #34d399;
+  background: #00ff88;
+  box-shadow: 0 0 0 1px #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-duration-scale {
@@ -2494,7 +2494,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #26342f;
 }
 
@@ -2547,12 +2547,12 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #17352a;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i::after {
-  background: #34d399;
+  background: #00ff88;
   transform: translateX(16px);
 }
 
@@ -2590,7 +2590,7 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-open {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #202c28;
 }
 
@@ -2613,7 +2613,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:focus-visible {
-  outline: 2px solid #34d399;
+  outline: 2px solid #00ff88;
   outline-offset: 2px;
 }
 
@@ -2684,7 +2684,7 @@
 .product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button.is-active {
   background: #17352a;
-  color: #34d399;
+  color: #00ff88;
 }
 
 @keyframes clone-ai-select-fade {
@@ -2707,7 +2707,7 @@
   min-height: 52px;
   border: 0;
   border-radius: 11px;
-  background: #34d399;
+  background: #00ff88;
   color: #06130d;
   font-size: 16px;
   font-weight: 900;
@@ -2769,7 +2769,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-preview-header b {
-  color: #34d399;
+  color: #00ff88;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
@@ -2833,7 +2833,7 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-main-result:hover,
 .product-clone-page[data-tool="clone"] .clone-ai-result-grid button:hover {
-  border-color: #34d399;
+  border-color: #00ff88;
   transform: translateY(-1px);
 }
 
@@ -2890,7 +2890,7 @@
 .product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
   width: 54px;
   height: 26px;
-  background: #34d399;
+  background: #00ff88;
   clip-path: polygon(0 34%, 58% 34%, 58% 0, 100% 50%, 58% 100%, 58% 66%, 0 66%);
   animation: clone-ai-arrow-pulse 1.35s ease-in-out infinite;
 }
@@ -2935,7 +2935,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-send-button:hover:not(:disabled) {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #202c28;
 }
 
@@ -2963,7 +2963,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-send-button {
-  background: #34d399;
+  background: #00ff88;
   color: #06130d;
 }
 
@@ -7147,7 +7147,7 @@
 
 .product-clone-page[data-tool="set"] .product-set-upload:hover,
 .product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #eefbf5;
 }
 
@@ -7212,7 +7212,7 @@
 }
 
 .product-set-textarea-wrap textarea:focus {
-  border-color: #34d399;
+  border-color: #00ff88;
   box-shadow: 0 0 0 3px rgb(52 211 153 / 16%);
 }
 
@@ -7297,7 +7297,7 @@
   place-items: center;
   border-radius: 14px;
   background: #eefbf5;
-  color: #34d399;
+  color: #00ff88;
   font-size: 26px;
 }
 
@@ -7568,7 +7568,7 @@
 
 .product-clone-page[data-tool="set"] .product-set-upload:hover,
 .product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #1a2421;
 }
 
@@ -7579,7 +7579,7 @@
   place-items: center;
   border-radius: 999px;
   background: #20282a;
-  color: #34d399;
+  color: #00ff88;
   font-size: 32px;
 }
 
@@ -7597,7 +7597,7 @@
   min-width: 168px;
   height: 52px;
   border-radius: 10px;
-  background: #34d399;
+  background: #00ff88;
   color: #03130d;
   padding: 0 22px;
   font-size: 20px;
@@ -7670,8 +7670,8 @@
 }
 
 .product-clone-page[data-tool="set"] .product-set-output-grid button.is-active {
-  border-color: #34d399;
-  background: #34d399;
+  border-color: #00ff88;
+  background: #00ff88;
   color: #04130e;
 }
 
@@ -7835,7 +7835,7 @@
 }
 
 .product-clone-page[data-tool="set"] .product-set-floating-detail textarea:focus {
-  border-color: #34d399;
+  border-color: #00ff88;
   box-shadow: 0 0 0 3px rgb(52 211 153 / 14%);
 }
 
@@ -7844,7 +7844,7 @@
   min-width: 148px;
   border: 0;
   border-radius: 12px;
-  background: #34d399;
+  background: #00ff88;
   color: #04130e;
   padding: 0 18px;
   font-size: 17px;
@@ -7933,3 +7933,132 @@
 .clone-ai-adwizard__risk.is-medium { color: #faad14; }
 .clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
 .clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
+
+/* ===== Ecommerce Template Apple Carousel ===== */
+.ecommerce-template-apple-carousel {
+  position: relative;
+  width: min(100%, 1160px);
+  min-height: clamp(340px, 34vw, 480px);
+  margin: 0 auto;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.ecommerce-template-apple-carousel__stage {
+  position: relative;
+  width: min(100%, 1080px);
+  height: clamp(320px, 30vw, 440px);
+  margin: 0 auto;
+  overflow: visible;
+  transform-style: preserve-3d;
+}
+
+.ecommerce-template-apple-carousel__deck {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+}
+
+.ecommerce-template-apple-card {
+  --apple-card-offset: 0;
+  --apple-card-depth: 0;
+  --apple-card-z: 20;
+  --apple-card-x: 0;
+  --apple-card-y: 0;
+  --apple-card-z-offset: 0;
+  --apple-card-rotate-y: 0deg;
+  --apple-card-rotate-z: 0deg;
+  --apple-card-scale: 1;
+  --apple-card-opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  width: clamp(200px, 16vw, 270px);
+  height: clamp(114px, 9.2vw, 153px);
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: clamp(10px, 1.1vw, 16px);
+  background: #0d1110;
+  color: #101412;
+  padding: 0;
+  cursor: pointer;
+  opacity: var(--apple-card-opacity);
+  box-shadow:
+    0 10px 24px rgb(0 0 0 / 16%),
+    inset 0 -1px 0 rgb(0 0 0 / 8%);
+  transform:
+    translate(-50%, -50%)
+    translateX(var(--apple-card-x))
+    translateY(var(--apple-card-y))
+    translateZ(var(--apple-card-z-offset))
+    rotateY(var(--apple-card-rotate-y))
+    rotateZ(var(--apple-card-rotate-z))
+    scale(var(--apple-card-scale));
+  transform-origin: center;
+  transform-style: preserve-3d;
+  transition:
+    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 640ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 760ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 760ms cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: var(--apple-card-z);
+}
+
+.ecommerce-template-apple-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 12%), transparent 24%),
+    linear-gradient(0deg, rgb(0 0 0 / 18%), transparent 44%);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.ecommerce-template-apple-card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+  filter:
+    saturate(1.06)
+    contrast(1.02)
+    drop-shadow(0 16px 16px rgb(0 0 0 / 14%));
+  transform: translateZ(10px);
+  transition:
+    filter 640ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.ecommerce-template-apple-card.is-active {
+  width: clamp(360px, 34vw, 580px);
+  height: clamp(203px, 19.2vw, 328px);
+  border-radius: clamp(14px, 1.6vw, 24px);
+  box-shadow:
+    0 18px 40px rgb(0 0 0 / 26%),
+    inset 0 -1px 0 rgb(0 0 0 / 8%);
+}
+
+.ecommerce-template-apple-card.is-active img {
+  filter:
+    saturate(1.1)
+    contrast(1.04)
+    drop-shadow(0 20px 18px rgb(0 0 0 / 16%));
+  transform: translateZ(18px) scale(1.02);
+}
+
+.ecommerce-template-apple-card:hover {
+  box-shadow:
+    0 26px 54px rgb(0 0 0 / 32%),
+    inset 0 -1px 0 rgb(0 0 0 / 8%);
+}
+
+.ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card,
+.ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card img {
+  transition: none;
+}

src/styles/pages/script-tokens.css

@@ -1489,7 +1489,7 @@
   --eval-text-secondary: #94a3b8;
   --eval-text-tertiary: #64748b;
   --eval-text-placeholder: #475569;
-  --eval-accent-start: #34d399;
+  --eval-accent-start: #00ff88;
   --eval-accent-mid: #10b981;
   --eval-accent-end: #059669;
   --eval-accent-glow: rgba(16, 185, 129, 0.3);

src/styles/pages/size-template.css

@@ -1,6 +1,6 @@
 .product-clone-page[data-tool="clone"].size-template-workbench {
   --clone-settings-panel-width: 640px;
-  --size-green: #34d399;
+  --size-green: #00ff88;
   --size-cyan: #38bdf8;
   --size-violet: #a78bfa;
   --size-amber: #fbbf24;
@@ -106,7 +106,7 @@
 
 .size-template-workbench .size-template-static-field.is-clickable > button:hover,
 .size-template-workbench .size-template-static-field.is-clickable > button[aria-expanded="true"] {
-  border-color: #34d399;
+  border-color: #00ff88;
   background: #202c28;
 }
 
@@ -155,7 +155,7 @@
 .size-template-platform-dialog button:hover,
 .size-template-platform-dialog button.is-active {
   background: #17352a;
-  color: #34d399;
+  color: #00ff88;
 }
 
 @keyframes size-template-dialog-rise {
@@ -241,7 +241,7 @@
   width: 54px;
   height: 2px;
   border-radius: 999px;
-  background: linear-gradient(90deg, #34d399, rgb(52 211 153 / 0%));
+  background: linear-gradient(90deg, #00ff88, rgb(52 211 153 / 0%));
   box-shadow: 0 0 18px rgb(52 211 153 / 35%);
 }
 
@@ -355,7 +355,7 @@
 }
 
 .size-template-preview-note > div:first-child .anticon {
-  color: #34d399;
+  color: #00ff88;
 }
 
 .size-template-preview-note p {
@@ -414,7 +414,7 @@
 }
 
 .size-template-check-list .anticon {
-  color: #34d399;
+  color: #00ff88;
 }
 
 @media (max-width: 1320px) {

src/styles/pages/toolbox.css

@@ -3,15 +3,15 @@
   --toolbox-green: #00ff88;
   --toolbox-blue: #4fc3f7;
   --toolbox-purple: #a855f7;
-  --toolbox-surface: rgba(14, 16, 38, 0.75);
-  --toolbox-elevated: rgba(20, 22, 52, 0.85);
+  --toolbox-surface: rgba(255, 255, 255, 0.04);
+  --toolbox-elevated: rgba(255, 255, 255, 0.06);
   --toolbox-highlight: rgba(28, 31, 68, 0.9);
   --toolbox-border-subtle: rgba(0, 255, 136, 0.08);
   --toolbox-border-default: rgba(0, 255, 136, 0.14);
   --toolbox-border-hover: rgba(0, 255, 136, 0.28);
-  --toolbox-text-primary: #f0f0f5;
-  --toolbox-text-secondary: rgba(240, 240, 245, 0.6);
-  --toolbox-text-tertiary: rgba(240, 240, 245, 0.4);
+  --toolbox-text-primary: #e8eaef;
+  --toolbox-text-secondary: #9aa1b8;
+  --toolbox-text-tertiary: #62697f;
 
   position: relative;
   isolation: isolate;
@@ -20,7 +20,7 @@
   background:
     linear-gradient(180deg, #070b10 0%, #05080d 100%),
     radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 255, 136, 0.04) 0%, transparent 70%),
-    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(79, 195, 247, 0.03) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(42, 159, 212, 0.03) 0%, transparent 60%),
     radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 60%);
   scroll-snap-align: start;
   scroll-snap-stop: normal;
@@ -30,21 +30,21 @@
   position: relative;
   z-index: 2;
   display: flex;
-  gap: clamp(20px, 3vw, 40px);
-  padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
+  gap: clamp(18px, 2.8vw, 36px);
+  padding: clamp(36px, 5.5vw, 68px) clamp(20px, 6vw, 76px);
   min-height: var(--home-section-min-height);
   align-items: center;
 }
 
 /* ===== Left Panel ===== */
 .omni-home__toolbox-left {
-  width: clamp(340px, 30vw, 440px);
+  width: clamp(320px, 30vw, 450px);
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 17px;
   justify-content: flex-start;
-  padding-top: clamp(40px, 8vh, 100px);
+  padding-top: clamp(34px, 6vh, 84px);
 }
 
 .omni-home__toolbox-brand {
@@ -54,31 +54,31 @@
 }
 
 .omni-home__toolbox-brand-icon {
-  width: 52px;
-  height: 52px;
+  width: 56px;
+  height: 56px;
   background: var(--toolbox-green);
-  border-radius: 14px;
+  border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0a0b12;
-  font-size: 26px;
+  font-size: 28px;
 }
 
 .omni-home__toolbox-brand-icon .anticon {
-  font-size: 28px;
+  font-size: 30px;
 }
 
 .omni-home__toolbox-brand-text {
   font-weight: 900;
-  font-size: 30px;
+  font-size: 34px;
   color: #fff;
   letter-spacing: -0.5px;
 }
 
 .omni-home__toolbox-title {
   font-weight: 900;
-  font-size: clamp(34px, 3.6vw, 46px);
+  font-size: clamp(36px, 3.8vw, 50px);
   line-height: 1.15;
   background: linear-gradient(135deg, var(--toolbox-green), var(--toolbox-blue));
   -webkit-background-clip: text;
@@ -87,9 +87,10 @@
 }
 
 .omni-home__toolbox-subtitle {
-  font-size: 17px;
-  line-height: 1.6;
+  font-size: 18px;
+  line-height: 1.55;
   color: var(--toolbox-text-secondary);
+  max-width: 100%;
 }
 
 .omni-home__toolbox-list {
@@ -102,8 +103,8 @@
 .omni-home__toolbox-item {
   display: flex;
   align-items: flex-start;
-  gap: 16px;
-  padding: 18px 22px;
+  gap: 17px;
+  padding: 17px 22px;
   border-radius: 16px;
   background: var(--toolbox-surface);
   border: 1px solid var(--toolbox-border-subtle);
@@ -124,14 +125,14 @@
 }
 
 .omni-home__toolbox-item-icon {
-  font-size: 28px;
+  font-size: 29px;
   flex-shrink: 0;
-  width: 48px;
-  height: 48px;
+  width: 50px;
+  height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: 13px;
   background: rgba(0, 255, 136, 0.08);
 }
 
@@ -139,18 +140,19 @@
   display: flex;
   flex-direction: column;
   gap: 5px;
+  min-width: 0;
 }
 
 .omni-home__toolbox-item-name {
   font-weight: 700;
-  font-size: 17px;
+  font-size: 19px;
   color: var(--toolbox-text-primary);
 }
 
 .omni-home__toolbox-item-desc {
-  font-size: 14px;
+  font-size: 16px;
   color: var(--toolbox-text-tertiary);
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 @keyframes omni-toolbox-fadeSlideIn {
@@ -160,14 +162,14 @@
 
 .omni-home__toolbox-workflow {
   margin-top: auto;
-  padding: 20px 24px;
+  padding: 19px 24px;
   border-radius: 16px;
   background: var(--toolbox-surface);
   border: 1px solid var(--toolbox-border-subtle);
 }
 
 .omni-home__toolbox-workflow-label {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--toolbox-green);
   margin-bottom: 12px;
@@ -178,18 +180,21 @@
 .omni-home__toolbox-workflow-steps {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 10px;
-  font-size: 14px;
+  font-size: 16px;
   color: var(--toolbox-text-tertiary);
 }
 
 .omni-home__toolbox-workflow-step {
   color: var(--toolbox-text-secondary);
+  white-space: nowrap;
 }
 
 .omni-home__toolbox-workflow-arrow {
   color: var(--toolbox-green);
-  font-size: 14px;
+  font-size: 16px;
+  flex-shrink: 0;
 }
 
 /* ===== Grid Area ===== */
@@ -829,17 +834,19 @@
 @media (max-width: 980px) {
   .omni-home__toolbox-shell {
     flex-direction: column;
-    padding: 48px 22px 64px;
+    padding: 36px 20px 48px;
+    gap: 24px;
   }
 
   .omni-home__toolbox-left {
     width: 100%;
     flex-shrink: unset;
+    padding-top: 0;
   }
 
   .omni-home__toolbox-grid {
     width: 100%;
-    min-height: clamp(480px, 70vw, 700px);
+    min-height: clamp(400px, 60vw, 560px);
   }
 
   .omni-home__toolbox-workflow {
@@ -849,7 +856,7 @@
 
 @media (max-width: 560px) {
   .omni-home__toolbox-shell {
-    padding: 36px 18px 48px;
+    padding: 28px 16px 40px;
   }
 
   .omni-home__toolbox-title {