feat: add hot video page and enhance smart cutout editor

- Add 爆款视频 (hot video) page with platform, ratio, quality, duration settings
- Add AI video planning workspace integration
- Update smart cutout size options with precise output dimensions (295*413, 800*800, etc.)
- Add compare (对比) feature for before/after cutout preview
- Enhance smart cutout tool UI with size labels and improved layout
- Add hot video page styles and smart cutout editor refinements

src/features/ecommerce/EcommercePage.tsx

@@ -81,12 +81,12 @@ const smartCutoutColorPresets = [
 const smartCutoutSizeOptions = [
   { key: "original", label: "原尺寸", icon: "image", frameWidth: "min(520px, 78%)", frameAspect: "auto", imageMaxWidth: "78%", imageMaxHeight: "310px" },
   { key: "trim", label: "裁剪到边缘", icon: "crop", frameWidth: "min(420px, 70%)", frameAspect: "auto", imageMaxWidth: "92%", imageMaxHeight: "360px" },
-  { key: "taobao-1-1", label: "淘宝1:1主图", icon: "shop", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
+  { key: "one-inch", label: "一寸头像", sizeLabel: "295*413", icon: "portrait", frameWidth: "min(290px, 50%)", frameAspect: "295 / 413", imageMaxWidth: "86%", imageMaxHeight: "86%", outputWidth: 295, outputHeight: 413 },
-  { key: "taobao-3-4", label: "淘宝3:4主图", icon: "shop", frameWidth: "min(330px, 56%)", frameAspect: "3 / 4", imageMaxWidth: "82%", imageMaxHeight: "82%" },
+  { key: "two-inch", label: "二寸头像", sizeLabel: "413*579", icon: "portrait", frameWidth: "min(320px, 54%)", frameAspect: "413 / 579", imageMaxWidth: "86%", imageMaxHeight: "86%", outputWidth: 413, outputHeight: 579 },
-  { key: "pdd-main", label: "拼多多主图", icon: "pdd", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
+  { key: "taobao-1-1", label: "淘宝1:1主图", sizeLabel: "800*800", icon: "shop", frameWidth: "min(430px, 72%)", frameAspect: "800 / 800", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 800, outputHeight: 800 },
-  { key: "xiaohongshu-cover", label: "小红书封面", icon: "text", frameWidth: "min(330px, 56%)", frameAspect: "3 / 4", imageMaxWidth: "82%", imageMaxHeight: "82%" },
+  { key: "taobao-3-4", label: "淘宝3:4主图", sizeLabel: "750*1000", icon: "shop", frameWidth: "min(330px, 56%)", frameAspect: "750 / 1000", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 750, outputHeight: 1000 },
-  { key: "one-inch", label: "一寸头像", icon: "portrait", frameWidth: "min(290px, 50%)", frameAspect: "25 / 35", imageMaxWidth: "86%", imageMaxHeight: "86%" },
+  { key: "pdd-main", label: "拼多多主图", sizeLabel: "800*800", icon: "pdd", frameWidth: "min(430px, 72%)", frameAspect: "800 / 800", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 800, outputHeight: 800 },
-  { key: "two-inch", label: "二寸头像", icon: "portrait", frameWidth: "min(320px, 54%)", frameAspect: "35 / 49", imageMaxWidth: "86%", imageMaxHeight: "86%" },
+  { key: "xiaohongshu-cover", label: "小红书封面", sizeLabel: "1242*1660", icon: "text", frameWidth: "min(330px, 56%)", frameAspect: "1242 / 1660", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 1242, outputHeight: 1660 },
   { key: "ratio-1-1", label: "1:1", icon: "square", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
   { key: "ratio-3-2", label: "3:2", icon: "landscape", frameWidth: "min(520px, 78%)", frameAspect: "3 / 2", imageMaxWidth: "82%", imageMaxHeight: "82%" },
   { key: "ratio-2-3", label: "2:3", icon: "portrait-ratio", frameWidth: "min(330px, 56%)", frameAspect: "2 / 3", imageMaxWidth: "82%", imageMaxHeight: "82%" },
@@ -97,6 +97,7 @@ const smartCutoutSizeOptions = [
 ] as const;
 
 type SmartCutoutSizeKey = (typeof smartCutoutSizeOptions)[number]["key"];
+type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string };
 
 const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
@@ -1214,15 +1215,16 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
   const [showHostingModal, setShowHostingModal] = useState(false);
   const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
-  const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "set" | "detail" | "watermark" | "image-edit" | null>(null);
+  const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "set" | "detail" | "watermark" | "image-edit" | "hot-video" | null>(null);
-  const [smartCutoutImage, setSmartCutoutImage] = useState<{ src: string; name: string } | null>(null);
+  const [smartCutoutImage, setSmartCutoutImage] = useState<SmartCutoutImageItem | null>(null);
-  const [smartCutoutBatchImages, setSmartCutoutBatchImages] = useState<{ src: string; name: string }[]>([]);
+  const [smartCutoutBatchImages, setSmartCutoutBatchImages] = useState<SmartCutoutImageItem[]>([]);
   const [smartCutoutBackgroundColor, setSmartCutoutBackgroundColor] = useState("#ffffff");
   const [smartCutoutBackgroundAlpha, setSmartCutoutBackgroundAlpha] = useState(100);
   const [smartCutoutHexDraft, setSmartCutoutHexDraft] = useState("#ffffff");
   const [isSmartCutoutPaletteOpen, setIsSmartCutoutPaletteOpen] = useState(false);
   const [smartCutoutSizeKey, setSmartCutoutSizeKey] = useState<SmartCutoutSizeKey>("original");
   const [isSmartCutoutDragging, setIsSmartCutoutDragging] = useState(false);
+  const [isSmartCutoutComparing, setIsSmartCutoutComparing] = useState(false);
   const [isSmartCutoutTransitioning, setIsSmartCutoutTransitioning] = useState(false);
   const [smartCutoutTransitionMessage, setSmartCutoutTransitionMessage] = useState({
     title: "正在切换页面",
@@ -1656,8 +1658,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     if (files.length) void addSetImages(files);
   };
 
-  const revokeSmartCutoutItems = (items: { src: string }[]) => {
+  const revokeSmartCutoutItem = (item: SmartCutoutImageItem | null) => {
-    items.forEach((item) => URL.revokeObjectURL(item.src));
+    if (!item) return;
+    URL.revokeObjectURL(item.src);
+    if (item.originalSrc && item.originalSrc !== item.src) URL.revokeObjectURL(item.originalSrc);
+  };
+
+  const revokeSmartCutoutItems = (items: SmartCutoutImageItem[]) => {
+    items.forEach(revokeSmartCutoutItem);
   };
 
   const clearSmartCutoutTransition = () => {
@@ -1695,9 +1703,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       return [];
     });
     setSmartCutoutImage((current) => {
-      if (current?.src) URL.revokeObjectURL(current.src);
+      revokeSmartCutoutItem(current);
       return null;
     });
+    setIsSmartCutoutComparing(false);
     setComposerMenu(null);
   };
 
@@ -2050,6 +2059,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     if (!selectedDetailModules.length) setSelectedDetailModules(defaultCloneDetailModuleIds);
   };
 
+  const openHotVideoPage = () => {
+    clearSmartCutoutTransition();
+    setActiveQuickTool("hot-video");
+    setComposerMenu(null);
+    setIsCloneSettingsCollapsed(true);
+    setIsCommandHistoryCollapsed(true);
+  };
+
+  const closeHotVideoPage = () => {
+    setActiveQuickTool(null);
+    setComposerMenu(null);
+    setIsCloneSettingsCollapsed(false);
+    setIsCommandHistoryCollapsed(false);
+  };
+
   const closeSmartCutoutTool = () => {
     runSmartCutoutPageTransition(
       {
@@ -2062,9 +2086,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           return [];
         });
         setSmartCutoutImage((current) => {
-          if (current?.src) URL.revokeObjectURL(current.src);
+          revokeSmartCutoutItem(current);
           return null;
         });
+        setIsSmartCutoutComparing(false);
         setActiveQuickTool(null);
         setComposerMenu(null);
       },
@@ -2087,9 +2112,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           return [];
         });
         setSmartCutoutImage((current) => {
-          if (current?.src) URL.revokeObjectURL(current.src);
+          revokeSmartCutoutItem(current);
           return null;
         });
+        setIsSmartCutoutComparing(false);
       },
     );
   };
@@ -2106,10 +2132,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       return [];
     });
     setSmartCutoutImage((current) => {
-      if (current?.src) URL.revokeObjectURL(current.src);
+      revokeSmartCutoutItem(current);
       return null;
     });
-    const nextImages = imageFiles.map((file) => ({ src: URL.createObjectURL(file), name: file.name }));
+    setIsSmartCutoutComparing(false);
+    const nextImages = imageFiles.map((file) => {
+      const originalSrc = URL.createObjectURL(file);
+      return { src: originalSrc, originalSrc, name: file.name };
+    });
     smartCutoutPendingUrlsRef.current = nextImages.map((item) => item.src);
     setActiveQuickTool("cutout");
     setSmartCutoutSizeKey("original");
@@ -2154,17 +2184,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     [smartCutoutSizeKey],
   );
 
+  const previewSmartCutoutSize = isSmartCutoutComparing ? smartCutoutSizeOptions[0] : selectedSmartCutoutSize;
+  const previewSmartCutoutSizeKey = isSmartCutoutComparing ? "original" : smartCutoutSizeKey;
+  const previewSmartCutoutImageSrc = isSmartCutoutComparing ? smartCutoutImage?.originalSrc ?? smartCutoutImage?.src : smartCutoutImage?.src;
+
   const smartCutoutFrameStyle = useMemo<CSSProperties>(
     () => ({
       "--smart-cutout-bg": smartCutoutBackgroundValue,
-      "--smart-cutout-frame-width": selectedSmartCutoutSize.frameWidth,
+      "--smart-cutout-frame-width": previewSmartCutoutSize.frameWidth,
-      "--smart-cutout-frame-aspect": selectedSmartCutoutSize.frameAspect,
+      "--smart-cutout-frame-aspect": previewSmartCutoutSize.frameAspect,
-      "--smart-cutout-image-max-width": selectedSmartCutoutSize.imageMaxWidth,
+      "--smart-cutout-image-max-width": previewSmartCutoutSize.imageMaxWidth,
-      "--smart-cutout-image-max-height": selectedSmartCutoutSize.imageMaxHeight,
+      "--smart-cutout-image-max-height": previewSmartCutoutSize.imageMaxHeight,
     } as CSSProperties),
-    [selectedSmartCutoutSize, smartCutoutBackgroundValue],
+    [previewSmartCutoutSize, smartCutoutBackgroundValue],
   );
 
+  const showSmartCutoutOriginalCompare = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setIsSmartCutoutComparing(true);
+  };
+
+  const hideSmartCutoutOriginalCompare = () => {
+    setIsSmartCutoutComparing(false);
+  };
+
   const applySmartCutoutHsv = (h: number, s: number, v: number) => {
     const rgb = hsvToRgb(h, s, v);
     setSmartCutoutBackgroundColor(rgbToHex(rgb.r, rgb.g, rgb.b));
@@ -2221,9 +2264,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       const aspect = parseSmartCutoutAspect(selectedSmartCutoutSize.frameAspect);
       const naturalWidth = Math.max(1, image.naturalWidth || image.width || 1200);
       const naturalHeight = Math.max(1, image.naturalHeight || image.height || 900);
+      const outputWidth = "outputWidth" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputWidth : undefined;
+      const outputHeight = "outputHeight" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputHeight : undefined;
       let canvasWidth = naturalWidth;
       let canvasHeight = naturalHeight;
-      if (aspect) {
+      if (outputWidth && outputHeight) {
+        canvasWidth = outputWidth;
+        canvasHeight = outputHeight;
+      } else if (aspect) {
         const longSide = 1600;
         if (aspect >= 1) {
           canvasWidth = longSide;
@@ -3413,6 +3461,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const isQuickDetailTool = isCloneTool && activeQuickTool === "detail";
   const isWatermarkTool = isCloneTool && activeQuickTool === "watermark";
   const isImageEditTool = isCloneTool && activeQuickTool === "image-edit";
+  const isHotVideoTool = isCloneTool && activeQuickTool === "hot-video";
   const pageLabel = isSetTool ? "鍟嗗搧濂楀浘" : isDetail ? "A+/璇︽儏椤?" : isTryOn ? "AI鏈嶉グ绌挎埓" : activeToolMeta?.label || "鍟嗗搧宸ュ叿";
   const setPrimaryLabel =
     setImages.length === 0
@@ -4464,7 +4513,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               { label: "变清晰", icon: <FileImageOutlined /> },
               { label: "AI消除", icon: <SettingOutlined /> },
               { label: "证件照", icon: <SkinOutlined /> },
-              { label: "爆款视频", icon: <CloudUploadOutlined /> },
+              { label: "爆款视频", icon: <CloudUploadOutlined />, onClick: openHotVideoPage },
               { label: "拼图", icon: <TableOutlined /> },
             ].map((item) => (
               <button
@@ -4560,31 +4609,48 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="ecom-smart-editor">
           <div className="ecom-smart-editor__workspace">
             <div className="ecom-smart-editor__canvas">
-              <div className={`ecom-smart-editor__checker is-size-${smartCutoutSizeKey}`} style={smartCutoutFrameStyle}>
+              <div className={`ecom-smart-editor__checker is-size-${previewSmartCutoutSizeKey}`} style={smartCutoutFrameStyle}>
                 <div className="ecom-smart-editor__background-layer" aria-hidden="true" />
-                <img src={smartCutoutImage.src} alt={smartCutoutImage.name} />
+                <img src={previewSmartCutoutImageSrc ?? smartCutoutImage.src} alt={smartCutoutImage.name} />
               </div>
               <div className="ecom-smart-editor__canvas-actions">
-                <button type="button">对比</button>
+                <button
-                <button type="button">编辑图片</button>
+                  type="button"
+                  onPointerDown={showSmartCutoutOriginalCompare}
+                  onPointerUp={hideSmartCutoutOriginalCompare}
+                  onPointerCancel={hideSmartCutoutOriginalCompare}
+                  onBlur={hideSmartCutoutOriginalCompare}
+                  onKeyDown={(event) => {
+                    if (event.key === " " || event.key === "Enter") setIsSmartCutoutComparing(true);
+                  }}
+                  onKeyUp={hideSmartCutoutOriginalCompare}
+                >
+                  对比
+                </button>
               </div>
             </div>
             <div className="ecom-smart-editor__tools-shell">
+              <strong className="ecom-smart-editor__tools-title">功能</strong>
               <button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(-1)} aria-label="查看上一组尺寸">
                 ‹
               </button>
               <div className="ecom-smart-editor__tools" ref={smartCutoutToolsRef}>
                 {smartCutoutSizeOptions.map((item) => (
+                  <div className="ecom-smart-editor__tool-item" key={item.key}>
                     <button
-                    key={item.key}
                       type="button"
                       className={smartCutoutSizeKey === item.key ? "is-active" : ""}
                       onClick={() => setSmartCutoutSizeKey(item.key)}
+                      aria-label={`${item.label}${"sizeLabel" in item ? ` ${item.sizeLabel}` : ""}`}
                       aria-pressed={smartCutoutSizeKey === item.key}
                     >
                       <span className={`ecom-smart-editor__tool-icon ecom-smart-editor__tool-icon--${item.icon}`} aria-hidden="true" />
-                    <span>{item.label}</span>
                     </button>
+                    <span className="ecom-smart-editor__tool-text">
+                      <span>{item.label}</span>
+                      {"sizeLabel" in item ? <span>{item.sizeLabel}</span> : null}
+                    </span>
+                  </div>
                 ))}
               </div>
               <button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(1)} aria-label="查看更多尺寸">
@@ -5151,6 +5217,170 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     </div>
   );
 
+  const hotVideoPreview = (
+    <main className="ecom-hot-video-page" aria-label="爆款视频">
+      <nav className="ecom-hot-video-nav">
+        <button type="button" className="ecom-hot-video-back" onClick={closeHotVideoPage}>
+          ‹ 返回首页
+        </button>
+        <div className="ecom-hot-video-nav-title">
+          <h1>爆款视频</h1>
+          <span>AI智能策划 · 一键生成电商短视频</span>
+        </div>
+        <div className="ecom-hot-video-nav-meta">
+          <span>{platform} / {formatRatioDisplayValue(ratio)} / {cloneVideoDuration}秒 / {cloneVideoQuality === "standard" ? "720P" : "1080P"}</span>
+        </div>
+      </nav>
+      <div className="ecom-hot-video-body">
+        <aside className="ecom-hot-video-settings" aria-label="视频设置">
+          <section className="ecom-hot-video-section">
+            <strong>上传商品图</strong>
+            <div
+              role="button"
+              tabIndex={0}
+              className={`ecom-hot-video-upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
+              onClick={() => quickProductInputRef.current?.click()}
+              onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") quickProductInputRef.current?.click(); }}
+              onDragOver={(event) => { event.preventDefault(); setIsProductUploadDragging(true); }}
+              onDragLeave={(event) => { event.preventDefault(); setIsProductUploadDragging(false); }}
+              onDrop={handleProductDrop}
+            >
+              <CloudUploadOutlined />
+              <span>拖拽或点击上传商品图片</span>
+              <em>支持 JPG / PNG / WebP，建议清晰白底图</em>
+              {productImages.length > 0 ? (
+                <div className="ecom-hot-video-upload-thumbs">
+                  {productImages.map((img) => (
+                    <figure key={img.id}>
+                      <img src={img.src} alt={img.name} />
+                      <button
+                        type="button"
+                        aria-label="删除"
+                        onClick={(event) => { event.stopPropagation(); removeProductImage(img.id); }}
+                      >×</button>
+                    </figure>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <input
+              ref={quickProductInputRef}
+              type="file"
+              accept="image/*"
+              multiple
+              className="ecom-command-hidden-file"
+              onChange={handleProductUpload}
+            />
+          </section>
+
+          <section className="ecom-hot-video-section">
+            <strong>商品描述</strong>
+            <textarea
+              className="ecom-hot-video-textarea"
+              placeholder="描述你的商品特点、卖点、使用场景等，帮助AI更好地策划视频内容..."
+              rows={4}
+              value={requirement}
+              onChange={(event) => setRequirement(event.target.value)}
+              maxLength={500}
+            />
+          </section>
+
+          <section className="ecom-hot-video-section">
+            <strong>电商平台</strong>
+            <div className="ecom-hot-video-options">
+              {platformOptions.map((option) => (
+                <button
+                  key={option}
+                  type="button"
+                  className={platform === option ? "is-active" : ""}
+                  onClick={() => setPlatform(option)}
+                >
+                  {renderPlatformLogo(option)}
+                  <span>{option}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <section className="ecom-hot-video-section">
+            <strong>视频比例</strong>
+            <div className="ecom-hot-video-options ecom-hot-video-options--ratio">
+              {cloneRatioOptions.map((option) => (
+                <button
+                  key={option}
+                  type="button"
+                  className={ratio === option ? "is-active" : ""}
+                  onClick={() => setRatio(option)}
+                >
+                  {formatRatioDisplayValue(option)}
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <section className="ecom-hot-video-section">
+            <strong>视频质量</strong>
+            <div className="ecom-hot-video-options">
+              {cloneVideoQualityOptions.map((option) => (
+                <button
+                  key={option.key}
+                  type="button"
+                  className={cloneVideoQuality === option.key ? "is-active" : ""}
+                  onClick={() => setCloneVideoQuality(option.key)}
+                >
+                  <strong>{option.label}</strong>
+                  <span>{option.desc}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <section className="ecom-hot-video-section">
+            <strong>视频时长 · {cloneVideoDuration}秒</strong>
+            <input
+              type="range"
+              className="ecom-hot-video-range"
+              min={cloneVideoDurationMin}
+              max={cloneVideoDurationMax}
+              step={5}
+              value={cloneVideoDuration}
+              onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))}
+              style={cloneVideoDurationStyle}
+            />
+            <div className="ecom-hot-video-range-labels">
+              <span>{cloneVideoDurationMin}秒</span>
+              <span>{cloneVideoDurationMax}秒</span>
+            </div>
+          </section>
+
+          <button
+            type="button"
+            className="ecom-hot-video-start"
+            disabled={!productImages.length && !requirement.trim()}
+            onClick={() => setVideoPlanTrigger((prev) => prev + 1)}
+          >
+            一键策划
+          </button>
+        </aside>
+        <section className="ecom-hot-video-workspace">
+          <EcommerceVideoWorkspace
+            isAuthenticated={isAuthenticated}
+            productImageDataUrls={ecommerceVideoImageDataUrls}
+            productImageFiles={ecommerceVideoImageFiles}
+            requirement={requirement}
+            platform={platform}
+            aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
+            durationSeconds={cloneVideoDuration}
+            resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
+            onRequestLogin={() => (isAuthenticated ? undefined : requestLogin())}
+            onOpenHistory={() => setVideoHistoryVisible(true)}
+            triggerPlan={videoPlanTrigger}
+          />
+        </section>
+      </div>
+    </main>
+  );
+
   const quickProductSetPreview = (
     <main className={`ecom-quick-set-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
       <div className="ecom-quick-set-body">
@@ -5587,6 +5817,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                   ? quickProductSetPreview
                   : isQuickDetailTool
                     ? quickDetailPreview
+                    : isHotVideoTool
+                      ? hotVideoPreview
                       : cloneOutput === "video-outfit" && results.length > 0 && results[0].type === "video"
                       ? (
                         <main className="product-clone-preview product-clone-preview--video-outfit" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
@@ -5600,7 +5832,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   return (
     <section
-      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
+      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
       data-tool={activeTool}
       aria-label={pageLabel}
     >
@@ -5624,7 +5856,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           {isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCloneTool ? clonePanel : placeholderPanel}
         </aside>
 
-        {isCloneTool && !isSmartCutoutTool && !isQuickSetTool && !isQuickDetailTool && !isWatermarkTool && !isImageEditTool ? (
+        {isCloneTool && !isSmartCutoutTool && !isQuickSetTool && !isQuickDetailTool && !isWatermarkTool && !isImageEditTool && !isHotVideoTool ? (
           <button
             type="button"
             className="clone-ai-settings-toggle"

src/styles/ecommerce-standalone.css

@@ -4123,6 +4123,863 @@
   pointer-events: none !important;
 }
 
+/* ── Hot Video Page (爆款视频) ──────────────────────── */
+.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page {
+  display: block !important;
+  overflow: hidden !important;
+  /* ── Match the homepage dark-green background ──── */
+  background:
+    radial-gradient(circle at 72% 12%, rgba(0, 255, 136, 0.045), transparent 31%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
+    #05080d !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-shell {
+  display: block !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding: 0 !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-rail,
+.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-panel,
+.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .clone-ai-settings-toggle,
+.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .ecom-command-history {
+  display: none !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page {
+  display: grid !important;
+  grid-template-rows: auto minmax(0, 1fr) !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  background: transparent !important;
+  color: var(--ecm-text, #eef4f0) !important;
+  font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
+}
+
+/* ── Hot Video Nav — matches the homepage topbar ── */
+.ecom-hot-video-nav {
+  display: flex !important;
+  align-items: center !important;
+  gap: 24px !important;
+  padding: 10px clamp(16px, 3vw, 32px) !important;
+  min-height: 64px !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+  background: rgba(5, 8, 13, 0.82) !important;
+  backdrop-filter: blur(18px) !important;
+}
+
+.ecom-hot-video-back {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  min-height: 36px !important;
+  padding: 0 13px !important;
+  border: 1px solid rgba(255, 255, 255, 0.14) !important;
+  border-radius: 8px !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: #f7faf8 !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  cursor: pointer !important;
+  transition: border-color 180ms ease, background 180ms ease !important;
+  white-space: nowrap !important;
+}
+
+.ecom-hot-video-back:hover {
+  border-color: rgba(59, 232, 139, 0.58) !important;
+  background: rgba(59, 232, 139, 0.14) !important;
+}
+
+.ecom-hot-video-nav-title {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 1px !important;
+  min-width: 0 !important;
+}
+
+.ecom-hot-video-nav-title h1 {
+  margin: 0 !important;
+  font-size: 16px !important;
+  font-weight: 800 !important;
+  color: #f7faf8 !important;
+  letter-spacing: 0.01em !important;
+}
+
+.ecom-hot-video-nav-title span {
+  font-size: 13px !important;
+  color: rgba(247, 250, 248, 0.66) !important;
+}
+
+.ecom-hot-video-nav-meta {
+  margin-left: auto !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  padding: 6px 14px !important;
+  border-radius: 8px !important;
+  background: rgba(255, 255, 255, 0.06) !important;
+  font-size: 13px !important;
+  color: rgba(247, 250, 248, 0.66) !important;
+  white-space: nowrap !important;
+}
+
+/* ── Hot Video Body ─────────────────────────────────── */
+.ecom-hot-video-body {
+  display: grid !important;
+  grid-template-columns: 360px minmax(0, 1fr) !important;
+  gap: 0 !important;
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* ── Hot Video Settings Panel — matches the homepage popover (white bg, cyan border) ── */
+.ecom-hot-video-settings {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 0 !important;
+  padding: 20px !important;
+  border-right: 1px solid rgba(30, 189, 219, 0.22) !important;
+  background:
+    radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.06), transparent 12rem),
+    #fbfdfe !important;
+  box-shadow: 0 18px 46px rgba(20, 80, 100, 0.08) !important;
+  overflow-y: auto !important;
+  scrollbar-width: thin !important;
+}
+
+.ecom-hot-video-section {
+  margin-bottom: 20px !important;
+}
+
+.ecom-hot-video-section > strong {
+  display: block !important;
+  margin-bottom: 10px !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  color: #6b7c88 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.06em !important;
+}
+
+/* Upload area — matches the popover card style */
+.ecom-hot-video-upload {
+  display: flex !important;
+  width: 100% !important;
+  min-height: 118px !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  padding: 20px !important;
+  border: 1.5px dashed rgba(30, 189, 219, 0.18) !important;
+  border-radius: 14px !important;
+  background: #f3f8fa !important;
+  color: #10202c !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  cursor: pointer !important;
+  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease !important;
+}
+
+.ecom-hot-video-upload::before {
+  display: grid !important;
+  width: 38px !important;
+  height: 38px !important;
+  place-items: center !important;
+  margin-bottom: 8px !important;
+  flex-shrink: 0 !important;
+  border: 1px solid rgba(30, 189, 219, 0.28) !important;
+  border-radius: 999px !important;
+  background: rgba(30, 189, 219, 0.08) !important;
+  color: #1073cc !important;
+  content: "+" !important;
+  font-size: 24px !important;
+  font-weight: 800 !important;
+  line-height: 1 !important;
+}
+
+.ecom-hot-video-upload:hover {
+  border-color: #1ebddb !important;
+  background: rgba(30, 189, 219, 0.06) !important;
+}
+
+.ecom-hot-video-upload.is-dragging {
+  border-color: #1ebddb !important;
+  background: rgba(30, 189, 219, 0.1) !important;
+}
+
+.ecom-hot-video-upload:active {
+  transform: scale(0.99) !important;
+}
+
+.ecom-hot-video-upload.has-images {
+  padding: 16px !important;
+  min-height: auto !important;
+}
+
+.ecom-hot-video-upload.has-images::before {
+  display: none !important;
+}
+
+.ecom-hot-video-upload > span:first-of-type {
+  display: none !important;
+}
+
+.ecom-hot-video-upload > span:nth-of-type(2),
+.ecom-hot-video-upload > span {
+  font-size: 13px !important;
+  font-weight: 800 !important;
+  color: #10202c !important;
+}
+
+.ecom-hot-video-upload > em {
+  font-size: 12px !important;
+  color: #6b7c88 !important;
+  font-style: normal !important;
+}
+
+.ecom-hot-video-upload-thumbs {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 8px !important;
+  margin-top: 8px !important;
+}
+
+.ecom-hot-video-upload-thumbs figure {
+  position: relative !important;
+  width: 64px !important;
+  height: 64px !important;
+  margin: 0 !important;
+  border-radius: 8px !important;
+  overflow: hidden !important;
+}
+
+.ecom-hot-video-upload-thumbs figure img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+}
+
+.ecom-hot-video-upload-thumbs figure button {
+  position: absolute !important;
+  top: 2px !important;
+  right: 2px !important;
+  width: 20px !important;
+  height: 20px !important;
+  border: 1px solid rgba(30, 189, 219, 0.18) !important;
+  border-radius: 999px !important;
+  background: rgba(16, 115, 204, 0.08) !important;
+  color: #1073cc !important;
+  font-size: 11px !important;
+  font-weight: 500 !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: border-color 150ms ease, background 150ms ease !important;
+}
+
+.ecom-hot-video-upload-thumbs figure button:hover {
+  border-color: #1ebddb !important;
+  background: rgba(30, 189, 219, 0.16) !important;
+}
+
+/* Textarea — matches the popover input style */
+.ecom-hot-video-textarea {
+  width: 100% !important;
+  padding: 10px 12px !important;
+  border: 1px solid rgba(30, 189, 219, 0.18) !important;
+  border-radius: 10px !important;
+  background: #f3f8fa !important;
+  color: #10202c !important;
+  font-size: 14px !important;
+  line-height: 1.55 !important;
+  font-family: inherit !important;
+  font-weight: 500 !important;
+  resize: vertical !important;
+  outline: none !important;
+  transition: border-color 150ms ease, box-shadow 150ms ease !important;
+  box-sizing: border-box !important;
+}
+
+.ecom-hot-video-textarea:focus {
+  border-color: #1ebddb !important;
+  box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.1), 0 0 0 2px rgba(30, 189, 219, 0.12) !important;
+}
+
+.ecom-hot-video-textarea::placeholder {
+  color: #6b7c88 !important;
+}
+
+/* Options buttons — match the popover button style (white bg, cyan border) */
+.ecom-hot-video-options {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 8px !important;
+}
+
+.ecom-hot-video-options > button {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  min-height: 38px !important;
+  padding: 9px 13px !important;
+  border: 1px solid rgba(30, 189, 219, 0.18) !important;
+  border-radius: 10px !important;
+  background: #f3f8fa !important;
+  color: #10202c !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  cursor: pointer !important;
+  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
+}
+
+.ecom-hot-video-options > button:hover {
+  border-color: #1ebddb !important;
+  background: rgba(30, 189, 219, 0.1) !important;
+  transform: translateY(-1px) !important;
+}
+
+.ecom-hot-video-options > button.is-active {
+  border-color: #1ebddb !important;
+  background: rgba(30, 189, 219, 0.1) !important;
+  color: #1073cc !important;
+  font-weight: 800 !important;
+  box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.1), 0 10px 22px rgba(30, 189, 219, 0.08) !important;
+}
+
+.ecom-hot-video-options > button img {
+  width: 20px !important;
+  height: 20px !important;
+  object-fit: contain !important;
+}
+
+.ecom-hot-video-options--ratio > button {
+  min-width: 56px !important;
+}
+
+/* Range slider */
+.ecom-hot-video-range {
+  width: 100% !important;
+  margin: 8px 0 4px !important;
+  accent-color: #1073cc !important;
+}
+
+.ecom-hot-video-range-labels {
+  display: flex !important;
+  justify-content: space-between !important;
+  font-size: 11px !important;
+  color: #6b7c88 !important;
+}
+
+/* Start button — matches the composer send button */
+.ecom-hot-video-start {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  width: 100% !important;
+  min-height: 44px !important;
+  padding: 10px 24px !important;
+  margin-top: auto !important;
+  border: 1px solid rgba(30, 189, 219, 0.22) !important;
+  border-radius: 14px !important;
+  background:
+    radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.16), transparent 100%),
+    linear-gradient(180deg, rgba(30, 189, 219, 0.1), rgba(16, 115, 204, 0.06)) !important;
+  color: #1073cc !important;
+  font-size: 15px !important;
+  font-weight: 800 !important;
+  cursor: pointer !important;
+  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
+}
+
+.ecom-hot-video-start:hover:not(:disabled) {
+  border-color: #1ebddb !important;
+  background:
+    radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.24), transparent 100%),
+    linear-gradient(180deg, rgba(30, 189, 219, 0.16), rgba(16, 115, 204, 0.1)) !important;
+  transform: translateY(-1px) !important;
+  box-shadow: 0 10px 28px rgba(30, 189, 219, 0.14) !important;
+}
+
+.ecom-hot-video-start:active:not(:disabled) {
+  transform: scale(0.98) !important;
+}
+
+.ecom-hot-video-start:disabled {
+  background: #f3f8fa !important;
+  border-color: rgba(30, 189, 219, 0.1) !important;
+  color: #a0b8c8 !important;
+  cursor: not-allowed !important;
+  box-shadow: none !important;
+}
+
+/* ── Hot Video Workspace ────────────────────────────── */
+.ecom-hot-video-workspace {
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* ── Video workspace — matches the homepage (transparent bg, topbar flowbar, panel nodes) ── */
+
+.ecom-hot-video-workspace .ecom-video-workspace {
+  background: transparent !important;
+  color: #f7faf8 !important;
+}
+
+/* ── Flowbar — matches homepage topbar ─────────── */
+.ecom-hot-video-workspace .ecom-video-flowbar {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+  background: rgba(5, 8, 13, 0.82) !important;
+  backdrop-filter: blur(18px) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__pulse {
+  background: rgba(247, 250, 248, 0.25) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__pulse.is-active {
+  background: #1ebddb !important;
+  box-shadow: 0 0 8px rgba(30, 189, 219, 0.45) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__wave i {
+  background: rgba(247, 250, 248, 0.3) !important;
+}
+
+/* ── Flowbar zoom ──────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flowbar__zoom button {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: rgba(247, 250, 248, 0.66) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__zoom button:hover:not(:disabled) {
+  border-color: rgba(59, 232, 139, 0.58) !important;
+  background: rgba(59, 232, 139, 0.14) !important;
+  color: #f7faf8 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__zoom span {
+  color: rgba(247, 250, 248, 0.66) !important;
+}
+
+/* ── Step dots ──────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-step-dot {
+  background: rgba(247, 250, 248, 0.22) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-step-dot.is-done {
+  background: #1ebddb !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-step-dot.is-active {
+  background: #1ebddb !important;
+  box-shadow: 0 0 8px rgba(30, 189, 219, 0.5) !important;
+  animation: ecom-video-node-breathe-local 1.2s ease-in-out infinite !important;
+}
+
+/* ── Flow actions (buttons) — match topbar buttons ── */
+.ecom-hot-video-workspace .ecom-video-flow-action {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: #f7faf8 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-action:hover:not(:disabled) {
+  border-color: rgba(59, 232, 139, 0.58) !important;
+  background: rgba(59, 232, 139, 0.14) !important;
+  transform: translateY(-1px) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-action--ghost {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: rgba(247, 250, 248, 0.66) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-action--ghost:hover:not(:disabled) {
+  border-color: rgba(59, 232, 139, 0.58) !important;
+  background: rgba(59, 232, 139, 0.14) !important;
+  color: #f7faf8 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-action--danger {
+  border-color: rgba(239, 68, 68, 0.2) !important;
+  background: rgba(239, 68, 68, 0.08) !important;
+  color: #ef4444 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-action--danger:hover:not(:disabled) {
+  border-color: rgba(239, 68, 68, 0.4) !important;
+  background: rgba(239, 68, 68, 0.16) !important;
+  color: #f87171 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-action:disabled {
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: rgba(247, 250, 248, 0.3) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__stage-label {
+  color: #1ebddb !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flowbar__error {
+  color: #ef4444 !important;
+}
+
+/* ── Flow canvas — transparent, blends with page ─── */
+.ecom-hot-video-workspace .ecom-video-flow-canvas {
+  background: transparent !important;
+}
+
+/* ── Flow nodes — page panel style ──────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node {
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node.is-ready,
+.ecom-hot-video-workspace .ecom-video-flow-node.is-completed {
+  border-color: rgba(30, 189, 219, 0.25) !important;
+  background: rgba(30, 189, 219, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node.is-running,
+.ecom-hot-video-workspace .ecom-video-flow-node.is-pending {
+  border-color: rgba(30, 189, 219, 0.3) !important;
+  animation: ecom-tree-breathe-local 1.6s ease-in-out infinite !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node.is-failed {
+  border-color: rgba(239, 68, 68, 0.25) !important;
+  background: rgba(239, 68, 68, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--final {
+  border-color: rgba(30, 189, 219, 0.15) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--final.is-completed {
+  border-color: rgba(30, 189, 219, 0.3) !important;
+  background: rgba(30, 189, 219, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--text {
+  border-color: rgba(30, 189, 219, 0.12) !important;
+  background: rgba(30, 189, 219, 0.03) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--text.is-completed {
+  border-color: rgba(30, 189, 219, 0.25) !important;
+  background: rgba(30, 189, 219, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--text.is-pulsing {
+  border-color: rgba(30, 189, 219, 0.4) !important;
+  animation: ecom-tree-breathe-local 1.2s ease-in-out infinite !important;
+}
+
+/* ── Node status orb ────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__status-orb {
+  background: rgba(247, 250, 248, 0.35) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
+.ecom-hot-video-workspace .ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
+  background: #1ebddb !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
+.ecom-hot-video-workspace .ecom-video-flow-node.is-pending .ecom-video-flow-node__status-orb {
+  background: #1ebddb !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node.is-failed .ecom-video-flow-node__status-orb {
+  background: #ef4444 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--final.is-completed .ecom-video-flow-node__status-orb {
+  background: #f59e0b !important;
+}
+
+/* ── Text icon ──────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__text-icon {
+  background: rgba(30, 189, 219, 0.15) !important;
+  color: #1ebddb !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--text.is-pulsing .ecom-video-flow-node__text-icon {
+  background: rgba(30, 189, 219, 0.22) !important;
+  color: #1ebddb !important;
+}
+
+/* ── Node labels ────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__label {
+  color: rgba(247, 250, 248, 0.66) !important;
+}
+
+/* ── Node progress ──────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__progress {
+  background: rgba(255, 255, 255, 0.06) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node__progress i {
+  background: #1ebddb !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--image .ecom-video-flow-node__progress,
+.ecom-hot-video-workspace .ecom-video-flow-node--video .ecom-video-flow-node__progress {
+  color: #1ebddb !important;
+}
+
+/* ── Node placeholder ───────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__placeholder {
+  background: rgba(30, 189, 219, 0.04) !important;
+  color: rgba(30, 189, 219, 0.35) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node--image .ecom-video-flow-node__placeholder,
+.ecom-hot-video-workspace .ecom-video-flow-node--video .ecom-video-flow-node__placeholder {
+  background: rgba(30, 189, 219, 0.04) !important;
+  color: rgba(30, 189, 219, 0.35) !important;
+}
+
+/* ── Error label ────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__error {
+  color: #ef4444 !important;
+}
+
+/* ── Retry button ───────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-node__retry {
+  border-color: rgba(239, 68, 68, 0.25) !important;
+  background: rgba(239, 68, 68, 0.08) !important;
+  color: #ef4444 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-node__retry:hover {
+  border-color: rgba(239, 68, 68, 0.4) !important;
+  background: rgba(239, 68, 68, 0.16) !important;
+}
+
+/* ── Connectors & links ─────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-connector,
+.ecom-hot-video-workspace .ecom-video-scene-link {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-connector i,
+.ecom-hot-video-workspace .ecom-video-scene-link i {
+  background: #1ebddb !important;
+}
+
+/* ── Flow lines ─────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-lines path {
+  stroke: rgba(255, 255, 255, 0.12) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-lines path.is-active {
+  stroke: #1ebddb !important;
+}
+
+/* ── Dock — matches topbar style ────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-dock {
+  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
+  background: rgba(8, 12, 10, 0.78) !important;
+  backdrop-filter: blur(18px) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-dock button {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: #f7faf8 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-flow-dock button:hover {
+  border-color: rgba(59, 232, 139, 0.58) !important;
+  background: rgba(59, 232, 139, 0.14) !important;
+  box-shadow: 0 2px 12px rgba(59, 232, 139, 0.15) !important;
+}
+
+/* ── Dock notice ────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-flow-notice {
+  border-color: rgba(30, 189, 219, 0.2) !important;
+  background: rgba(30, 189, 219, 0.08) !important;
+  color: #7dd8e8 !important;
+}
+
+/* ── Empty state ────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-empty {
+  color: rgba(247, 250, 248, 0.36) !important;
+}
+
+/* ═══════════ TREE LAYOUT ═══════════════════════════ */
+
+/* ── Tree node base — page panel style ──────────── */
+.ecom-hot-video-workspace .ecom-video-tree-node {
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--source {
+  border-color: rgba(30, 189, 219, 0.25) !important;
+  background: rgba(30, 189, 219, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--text {
+  border-color: rgba(30, 189, 219, 0.12) !important;
+  background: rgba(30, 189, 219, 0.03) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--text.is-completed {
+  border-color: rgba(30, 189, 219, 0.25) !important;
+  background: rgba(30, 189, 219, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--text.is-active {
+  border-color: rgba(30, 189, 219, 0.4) !important;
+  animation: ecom-tree-breathe-local 1.8s ease-in-out infinite !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--image.is-completed,
+.ecom-hot-video-workspace .ecom-video-tree-node--video.is-completed {
+  border-color: rgba(30, 189, 219, 0.25) !important;
+  background: rgba(30, 189, 219, 0.05) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--image.is-active,
+.ecom-hot-video-workspace .ecom-video-tree-node--video.is-active {
+  border-color: rgba(30, 189, 219, 0.4) !important;
+  animation: ecom-tree-breathe-local 1.8s ease-in-out infinite !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node.is-active {
+  border-color: rgba(30, 189, 219, 0.4) !important;
+  box-shadow: 0 0 16px rgba(30, 189, 219, 0.08) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node.is-completed {
+  border-color: rgba(30, 189, 219, 0.25) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node--video.is-failed {
+  border-color: rgba(239, 68, 68, 0.25) !important;
+  background: rgba(239, 68, 68, 0.05) !important;
+}
+
+/* ── Tree node inner text ───────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree-node__title {
+  color: #f7faf8 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node__desc {
+  color: rgba(247, 250, 248, 0.52) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node__label {
+  color: rgba(247, 250, 248, 0.66) !important;
+}
+
+/* ── Tree node placeholder ──────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree-node__placeholder {
+  background: rgba(255, 255, 255, 0.03) !important;
+  color: rgba(247, 250, 248, 0.3) !important;
+}
+
+/* ── Tree node tag ──────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree-node__tag {
+  border-color: rgba(255, 255, 255, 0.12) !important;
+  background: rgba(8, 12, 10, 0.85) !important;
+  color: rgba(247, 250, 248, 0.8) !important;
+}
+
+/* ── Tree node progress ─────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree-node__progress {
+  color: #1ebddb !important;
+}
+
+/* ── Tree retry ─────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree-node__retry {
+  border-color: rgba(239, 68, 68, 0.25) !important;
+  background: rgba(239, 68, 68, 0.08) !important;
+  color: #ef4444 !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree-node__retry:hover {
+  border-color: rgba(239, 68, 68, 0.4) !important;
+  background: rgba(239, 68, 68, 0.16) !important;
+}
+
+/* ── Tree trunk & branch lines ──────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree__trunk-line {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree__trunk-line::after {
+  background: linear-gradient(90deg, transparent, #1ebddb, transparent) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree__branches-line::before {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree__branch-tap::before {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree__branch-tap::after {
+  background: linear-gradient(90deg, transparent, #1ebddb, transparent) !important;
+}
+
+/* ── Tree arrow ─────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree__arrow {
+  color: rgba(247, 250, 248, 0.28) !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-tree__row:hover .ecom-video-tree__arrow {
+  color: #1ebddb !important;
+}
+
+/* ── Tree row empty ─────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-tree__row--empty.is-planning .ecom-video-tree-node {
+  border-color: rgba(30, 189, 219, 0.15) !important;
+}
+
+/* ── Scrollbar ──────────────────────────────────── */
+.ecom-hot-video-workspace .ecom-video-scene-strip {
+  scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
+}
+
+.ecom-hot-video-workspace .ecom-video-scene-strip--text::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12) !important;
+}
+
+/* ═══════════ LOCAL ANIMATIONS ══════════════════════ */
+
+@keyframes ecom-video-node-breathe-local {
+  0%, 100% { border-color: rgba(30, 189, 219, 0.25); }
+  50% { border-color: rgba(30, 189, 219, 0.6); }
+}
+
+@keyframes ecom-tree-breathe-local {
+  0%, 100% {
+    border-color: rgba(30, 189, 219, 0.2);
+    box-shadow: 0 0 0 0 rgba(30, 189, 219, 0);
+  }
+  50% {
+    border-color: rgba(30, 189, 219, 0.5);
+    box-shadow: 0 0 16px 2px rgba(30, 189, 219, 0.12);
+  }
+}
+
 .ecommerce-standalone .ecom-image-workbench-page {
   position: relative !important;
   display: grid !important;
@@ -6799,7 +7656,7 @@
 .ecommerce-standalone .ecom-smart-editor__workspace {
   display: grid !important;
   grid-template-rows: auto auto auto !important;
-  gap: 18px !important;
+  gap: 14px !important;
   min-width: 0 !important;
 }
 
@@ -6874,16 +7731,29 @@
 .ecommerce-standalone .ecom-smart-editor__tools-shell {
   display: grid !important;
   grid-template-columns: 24px minmax(0, 1fr) 24px !important;
-  align-items: stretch !important;
+  grid-template-rows: auto auto !important;
-  gap: 5px !important;
+  align-items: start !important;
+  gap: 6px 5px !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+.ecommerce-standalone .ecom-smart-editor__tools-title {
+  grid-column: 1 / -1 !important;
+  color: #1c2a35 !important;
+  font-size: 16px !important;
+  font-weight: 800 !important;
+  line-height: 1.15 !important;
 }
 
 .ecommerce-standalone .ecom-smart-editor__tools {
   display: flex !important;
+  align-items: start !important;
   gap: 5px !important;
   min-width: 0 !important;
+  height: auto !important;
   overflow-x: auto !important;
-  overflow-y: hidden !important;
+  overflow-y: visible !important;
   scroll-behavior: smooth !important;
   scrollbar-width: none !important;
 }
@@ -6896,8 +7766,10 @@
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
+  width: 24px !important;
+  height: 100px !important;
   min-width: 24px !important;
-  min-height: 46px !important;
+  min-height: 100px !important;
   border: 1px solid rgba(16, 115, 204, 0.12) !important;
   border-radius: 7px !important;
   color: #1073cc !important;
@@ -6915,13 +7787,14 @@
 }
 
 .ecommerce-standalone .ecom-smart-editor__tools button {
-  flex: 0 0 44px !important;
+  flex: 0 0 100px !important;
-  display: grid !important;
+  width: 100px !important;
+  height: 100px !important;
+  display: inline-grid !important;
   place-items: center !important;
-  gap: 3px !important;
+  min-height: 100px !important;
-  min-height: 46px !important;
+  padding: 10px 8px !important;
-  padding: 5px 3px !important;
+  border: 1px solid rgba(16, 115, 204, 0.12) !important;
-  border: 1px solid transparent !important;
   border-radius: 7px !important;
   color: #2d3d48 !important;
   background: #f2f5f7 !important;
@@ -6930,22 +7803,51 @@
   cursor: pointer !important;
 }
 
+.ecommerce-standalone .ecom-smart-editor__tool-item {
+  flex: 0 0 100px !important;
+  display: grid !important;
+  gap: 6px !important;
+  justify-items: center !important;
+  width: 100px !important;
+}
+
 .ecommerce-standalone .ecom-smart-editor__tools button.is-active {
   border-color: #1073cc !important;
   color: #1073cc !important;
   background: #f8fdff !important;
+  box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.16) !important;
 }
 
-.ecommerce-standalone .ecom-smart-editor__tools button > span:last-child {
+.ecommerce-standalone .ecom-smart-editor__tool-text {
-  display: -webkit-box !important;
+  display: grid !important;
+  gap: 2px !important;
+  justify-items: center !important;
+  max-width: 100% !important;
+  text-align: center !important;
+  line-height: 1.18 !important;
+  color: #2d3d48 !important;
+  font-size: 10px !important;
+  font-weight: 800 !important;
+}
+
+.ecommerce-standalone .ecom-smart-editor__tool-text > span {
   max-width: 100% !important;
   overflow: hidden !important;
-  text-align: center !important;
+  text-overflow: ellipsis !important;
-  line-height: 1.15 !important;
+}
+
+.ecommerce-standalone .ecom-smart-editor__tool-text > span:first-child {
+  display: -webkit-box !important;
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 2 !important;
 }
 
+.ecommerce-standalone .ecom-smart-editor__tool-text > span:last-child:not(:first-child) {
+  font-size: 9px !important;
+  font-weight: 800 !important;
+  color: #6a7c88 !important;
+}
+
 .ecommerce-standalone .ecom-smart-editor__tool-icon {
   position: relative !important;
   display: inline-flex !important;