From 2c573ccfc8f4508f3a9934d86c084dcc0f517cc0 Mon Sep 17 00:00:00 2001
From: Coze Agent <agent@coze>
Date: Fri, 2 Oct 2026 11:08:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(viral-video):=20=E6=8E=A8=E7=BF=BB=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E6=94=B9=E5=9B=9E=E6=B5=85=E8=89=B2?=
 =?UTF-8?q?=E7=B4=AB=E8=89=B2=E4=B8=BB=E9=A2=98=20+=206=E9=A1=B9UI?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20(#2136)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 全站配色从深蓝黑cyan改回白底紫色系（参考AI数字人页：#f5f6fa页面/#fff卡片/#7c3aed主紫）
- 问题1：文案融合三选项改为1行3列横排，选中紫边+浅紫底#f5f0ff
- 问题2：AI润色和按我写的来都显示textarea，placeholder区分
- 问题3：成片超分改为5选项（默认/普清/高清/超清/全能），默认值default
- 问题4：人设改为10个IP类型+placeholder「请选择人设类型」
- 问题5：分镜脚本线性文档排版保留，颜色改浅色（白底+深灰标签+深灰文字+紫色时间标题）
- 问题6：STEP3 2x2网格保留，白底灰边Select+紫色focus+积分数字紫色+预览白底虚线
- 清除所有cyan(#22d3ee/#06b6d4)和深蓝黑(#0b1220/#111a2e)残留色值
- 保留：select单边框/分析不锁页/步骤解锁/19项结构/多行分析/阶段进度提示
---
 .../src/pages/viral-video/ViralVideoPage.css  | 608 +++++++++---------
 .../src/pages/viral-video/ViralVideoPage.tsx  |  47 +-
 2 files changed, 341 insertions(+), 314 deletions(-)

diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css
index 7169265b9..32a584922 100644
--- a/apps/web/src/pages/viral-video/ViralVideoPage.css
+++ b/apps/web/src/pages/viral-video/ViralVideoPage.css
@@ -1,5 +1,6 @@
 /* ============================================================
-   爆款视频创作页 - 深蓝黑 + Cyan 暗色主题
+   爆款视频创作页 - 白底紫色浅色主题
+   主色 #7c3aed，参考 AiAvatar.css
    布局：三列等宽 STEP 向导
    ============================================================ */
 
@@ -9,15 +10,15 @@
 
 .vv-page {
   padding: 16px;
-  background: #0b1220;
+  background: #f5f6fa;
   min-height: calc(100vh - 56px);
-  color: #e6edf7;
+  color: #1f2937;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
   font-size: 13px;
 }
 
-/* scrollbar dark */
+/* scrollbar light */
 .vv-page ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -26,11 +27,11 @@
   background: transparent;
 }
 .vv-page ::-webkit-scrollbar-thumb {
-  background: #1e2d45;
+  background: #e5e7eb;
   border-radius: 4px;
 }
 .vv-page ::-webkit-scrollbar-thumb:hover {
-  background: #334155;
+  background: #c0c0d0;
 }
 
 /* ── 顶部任务 Tab 栏 ─────────────────────────────────── */
@@ -40,9 +41,9 @@
   gap: 6px;
   margin-bottom: 14px;
   padding: 6px 8px;
-  background: #0f1a2e;
+  background: #fff;
   border-radius: 10px;
-  border: 1px solid #1e2d45;
+  border: 1px solid #e5e7eb;
   flex-wrap: wrap;
 }
 .vv-tab {
@@ -52,20 +53,20 @@
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 13px;
-  color: #94a3b8;
+  color: #6b7280;
   cursor: pointer;
   border: 1px solid transparent;
   background: transparent;
   transition: all 0.15s;
 }
 .vv-tab:hover {
-  background: rgba(34, 211, 238, 0.08);
-  color: #e6edf7;
+  background: rgba(124, 58, 237, 0.08);
+  color: #1f2937;
 }
 .vv-tab.active {
-  background: rgba(34, 211, 238, 0.12);
-  color: #22d3ee;
-  border-color: rgba(34, 211, 238, 0.4);
+  background: #f3f0ff;
+  color: #7c3aed;
+  border-color: #d8cafc;
   font-weight: 500;
 }
 .vv-tab .vv-tab-close {
@@ -76,14 +77,14 @@
   align-items: center;
   justify-content: center;
   font-size: 12px;
-  color: #64748b;
+  color: #9ca3af;
   background: transparent;
   border: none;
   cursor: pointer;
 }
 .vv-tab .vv-tab-close:hover {
-  background: rgba(248, 113, 113, 0.2);
-  color: #f87171;
+  background: #fef2f2;
+  color: #ef4444;
 }
 .vv-tab-new {
   display: inline-flex;
@@ -92,13 +93,13 @@
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 13px;
-  color: #22d3ee;
+  color: #7c3aed;
   cursor: pointer;
-  border: 1px dashed rgba(34, 211, 238, 0.4);
+  border: 1px dashed rgba(124, 58, 237, 0.4);
   background: transparent;
 }
 .vv-tab-new:hover {
-  background: rgba(34, 211, 238, 0.1);
+  background: #f5f0ff;
 }
 .vv-tabs-right {
   margin-left: auto;
@@ -132,8 +133,8 @@
 
 /* ── 模块卡片 ──────────────────────────────────────── */
 .vv-section {
-  background: #111a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 12px;
   overflow: hidden;
 }
@@ -144,7 +145,7 @@
   padding: 14px 16px;
   cursor: pointer;
   user-select: none;
-  border-bottom: 1px solid #1e2d45;
+  border-bottom: 1px solid #f0f0f5;
   gap: 8px;
 }
 .vv-section.collapsed .vv-section-head {
@@ -156,14 +157,14 @@
   gap: 8px;
   font-size: 15px;
   font-weight: 600;
-  color: #e6edf7;
+  color: #1f2937;
 }
 .vv-step-badge {
   width: 22px;
   height: 22px;
   border-radius: 50%;
-  background: #22d3ee;
-  color: #0b1220;
+  background: #7c3aed;
+  color: #fff;
   font-size: 12px;
   display: inline-flex;
   align-items: center;
@@ -172,8 +173,8 @@
   flex-shrink: 0;
 }
 .vv-step-badge-dim {
-  background: #1e2d45;
-  color: #64748b;
+  background: #e5e7eb;
+  color: #9ca3af;
 }
 .vv-section-body {
   padding: 14px 16px 16px;
@@ -188,12 +189,12 @@
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
-  border-bottom: 1px solid #1e2d45;
+  border-bottom: 1px solid #f0f0f5;
 }
 .vv-step1-title {
   font-size: 17px;
   font-weight: 700;
-  color: #e6edf7;
+  color: #1f2937;
   letter-spacing: 0.2px;
 }
 
@@ -203,7 +204,7 @@
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
-  border-bottom: 1px solid #1e2d45;
+  border-bottom: 1px solid #f0f0f5;
 }
 .vv-step3-head {
   justify-content: space-between;
@@ -217,16 +218,16 @@
 .vv-step-subtitle {
   font-size: 16px;
   font-weight: 700;
-  color: #e6edf7;
+  color: #1f2937;
 }
 .vv-step-lock {
   margin-left: auto;
-  color: #64748b;
+  color: #9ca3af;
   font-size: 12px;
 }
 .vv-step3-divider {
   height: 1px;
-  background: rgba(34, 211, 238, 0.3);
+  background: rgba(124, 58, 237, 0.3);
   margin: 0;
 }
 .vv-history-btn {
@@ -239,12 +240,12 @@
 .vv-input,
 .vv-textarea {
   width: 100%;
-  border: 1px solid #1e2d45;
+  border: 1px solid #e0e0e8;
   border-radius: 8px;
   padding: 9px 12px;
   font-size: 13px;
-  color: #e6edf7;
-  background: #0f1a2e;
+  color: #1f2937;
+  background: #fff;
   outline: none;
   transition:
     border-color 0.15s,
@@ -257,22 +258,22 @@
 }
 .vv-input:disabled,
 .vv-textarea:disabled {
-  background: #0a1220;
-  color: #475569;
+  background: #f9fafb;
+  color: #9ca3af;
   cursor: not-allowed;
 }
 .vv-input::placeholder,
 .vv-textarea::placeholder {
-  color: #64748b;
+  color: #9ca3af;
 }
 .vv-input:hover:not(:disabled),
 .vv-textarea:hover:not(:disabled) {
-  border-color: #334155;
+  border-color: #c0c0d0;
 }
 .vv-input:focus,
 .vv-textarea:focus {
-  border-color: #22d3ee;
-  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18);
+  border-color: #7c3aed;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
 }
 .vv-textarea {
   resize: vertical;
@@ -280,52 +281,52 @@
   min-height: 60px;
 }
 
-/* antd Input overrides inside dark page */
+/* antd Input overrides inside light page */
 .vv-page .ant-input,
 .vv-page .ant-input-affix-wrapper {
-  background: #0f1a2e !important;
-  border-color: #1e2d45 !important;
-  color: #e6edf7 !important;
+  background: #fff !important;
+  border-color: #e0e0e8 !important;
+  color: #1f2937 !important;
 }
 .vv-page .ant-input:hover,
 .vv-page .ant-input-affix-wrapper:hover {
-  border-color: #334155 !important;
+  border-color: #c0c0d0 !important;
 }
 .vv-page .ant-input:focus,
 .vv-page .ant-input-affix-wrapper-focused {
-  border-color: #22d3ee !important;
-  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18) !important;
+  border-color: #7c3aed !important;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important;
 }
 .vv-page .ant-input::placeholder {
-  color: #64748b !important;
+  color: #9ca3af !important;
 }
 .vv-page .ant-input-affix-wrapper .ant-input {
   background: transparent !important;
-  color: #e6edf7 !important;
+  color: #1f2937 !important;
 }
 .vv-page .ant-input-prefix {
-  color: #64748b;
+  color: #9ca3af;
 }
 
-/* antd Select dropdown dark */
+/* antd Select dropdown light */
 .vv-page .ant-select-dropdown,
 .vv-select-dropdown {
-  background: #1a2540 !important;
+  background: #fff !important;
   border-radius: 8px !important;
   padding: 4px !important;
 }
 .vv-page .ant-select-item {
-  color: #cbd5e1 !important;
+  color: #1f2937 !important;
   border-radius: 6px !important;
   font-size: 13px !important;
   padding: 8px 12px !important;
 }
 .vv-page .ant-select-item-option-active {
-  background: #223353 !important;
+  background: #f5f0ff !important;
 }
 .vv-page .ant-select-item-option-selected {
-  background: rgba(34, 211, 238, 0.2) !important;
-  color: #22d3ee !important;
+  background: #f3f0ff !important;
+  color: #7c3aed !important;
   font-weight: 500;
 }
 
@@ -333,9 +334,9 @@
   width: 100%;
 }
 .vv-select .ant-select-selector {
-  background: #0f1a2e !important;
-  border: 1px solid #1e2d45 !important;
-  color: #e6edf7 !important;
+  background: #fff !important;
+  border: 1px solid #e0e0e8 !important;
+  color: #1f2937 !important;
   border-radius: 8px !important;
   padding: 0 12px !important;
   min-height: 36px !important;
@@ -345,28 +346,28 @@
   box-shadow: none !important;
 }
 .vv-select:hover .ant-select-selector {
-  border-color: #334155 !important;
+  border-color: #c0c0d0 !important;
 }
 .vv-select.ant-select-focused .ant-select-selector,
 .vv-select.ant-select-open .ant-select-selector {
-  border-color: #22d3ee !important;
-  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18) !important;
+  border-color: #7c3aed !important;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important;
 }
 .vv-select .ant-select-selection-item,
 .vv-select .ant-select-selection-placeholder {
-  color: #e6edf7 !important;
+  color: #1f2937 !important;
   line-height: 34px !important;
   font-size: 13px !important;
 }
 .vv-select .ant-select-selection-placeholder {
-  color: #64748b !important;
+  color: #9ca3af !important;
 }
 .vv-select .ant-select-arrow {
-  color: #94a3b8 !important;
+  color: #6b7280 !important;
 }
 .vv-select.ant-select-disabled .ant-select-selector {
-  background: #0a1220 !important;
-  color: #475569 !important;
+  background: #f9fafb !important;
+  color: #9ca3af !important;
   cursor: not-allowed;
 }
 .vv-select-step3 .ant-select-selector {
@@ -388,16 +389,16 @@
 .vv-label {
   display: block;
   font-size: 12px;
-  color: #94a3b8;
+  color: #6b7280;
   margin-bottom: 6px;
   font-weight: 500;
 }
 .vv-label-optional {
-  color: #64748b;
+  color: #9ca3af;
   font-weight: 400;
 }
 .vv-muted {
-  color: #64748b;
+  color: #9ca3af;
   font-size: 12px;
 }
 
@@ -418,32 +419,32 @@
   line-height: 1.2;
 }
 .vv-btn-primary {
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
+  background: #7c3aed;
   color: #fff;
   width: 100%;
   padding: 11px 16px;
   border: none;
 }
 .vv-btn-primary:hover:not(:disabled) {
-  filter: brightness(1.1);
-  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
+  background: #6d28d9;
+  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
 }
 .vv-btn-primary:disabled,
 .vv-btn-disabled-gray {
-  background: #334155 !important;
-  color: #64748b !important;
+  background: #d1d5db !important;
+  color: #fff !important;
   cursor: not-allowed;
   box-shadow: none;
   filter: none;
 }
 .vv-btn-ghost {
-  background: transparent;
-  color: #22d3ee;
-  border: 1px solid #22d3ee;
+  background: #fff;
+  color: #7c3aed;
+  border: 1px solid #d8cafc;
 }
 .vv-btn-ghost:hover {
-  background: rgba(34, 211, 238, 0.12);
-  color: #22d3ee;
+  background: #f3f0ff;
+  color: #7c3aed;
 }
 .vv-btn-block {
   width: 100%;
@@ -458,19 +459,19 @@
   border-radius: 6px;
 }
 .vv-btn-warn {
-  background: rgba(248, 113, 113, 0.12);
-  color: #f87171;
-  border-color: rgba(248, 113, 113, 0.3);
+  background: #fef2f2;
+  color: #ef4444;
+  border-color: #fecaca;
 }
 .vv-btn-warn:hover {
-  background: rgba(248, 113, 113, 0.2);
-  color: #fca5a5;
+  background: #fee2e2;
+  color: #dc2626;
 }
 
 .vv-link-btn {
   background: transparent;
   border: none;
-  color: #22d3ee;
+  color: #7c3aed;
   font-size: 12px;
   cursor: pointer;
   padding: 2px 4px;
@@ -479,7 +480,7 @@
   text-decoration: underline;
 }
 .vv-link-btn:disabled {
-  color: #64748b;
+  color: #9ca3af;
   cursor: not-allowed;
   text-decoration: none;
 }
@@ -495,10 +496,10 @@
   flex: 1;
   min-width: 120px;
   padding: 10px 12px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e0e0e8;
   border-radius: 8px;
-  color: #cbd5e1;
+  color: #374151;
   font-size: 13px;
   cursor: pointer;
   display: inline-flex;
@@ -508,9 +509,9 @@
   transition: all 0.15s;
 }
 .vv-action-btn:hover:not(:disabled) {
-  border-color: #22d3ee;
-  color: #22d3ee;
-  background: rgba(34, 211, 238, 0.08);
+  border-color: #7c3aed;
+  color: #7c3aed;
+  background: #f5f0ff;
 }
 .vv-action-btn:disabled {
   opacity: 0.5;
@@ -525,7 +526,7 @@
   font-size: 12px;
 }
 .vv-count-row strong {
-  color: #e6edf7;
+  color: #1f2937;
 }
 
 /* ── File list ──────────────────────────── */
@@ -543,8 +544,8 @@
   align-items: center;
   gap: 10px;
   padding: 8px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
 }
 .vv-file-thumb {
@@ -554,7 +555,7 @@
   border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
-  background: #0a1220;
+  background: #f9fafb;
 }
 .vv-file-thumb img {
   width: 100%;
@@ -565,8 +566,8 @@
   position: absolute;
   top: 2px;
   left: 2px;
-  background: rgba(34, 211, 238, 0.9);
-  color: #0b1220;
+  background: #7c3aed;
+  color: #fff;
   font-size: 10px;
   font-weight: 700;
   padding: 1px 5px;
@@ -578,7 +579,7 @@
 }
 .vv-file-name {
   font-size: 13px;
-  color: #e6edf7;
+  color: #1f2937;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -586,7 +587,7 @@
 }
 .vv-file-sub {
   font-size: 11px;
-  color: #64748b;
+  color: #9ca3af;
   margin-top: 2px;
   display: flex;
   align-items: center;
@@ -603,7 +604,7 @@
   border-radius: 6px;
   border: none;
   background: transparent;
-  color: #94a3b8;
+  color: #6b7280;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -612,23 +613,23 @@
   transition: all 0.15s;
 }
 .vv-icon-btn:hover:not(:disabled) {
-  background: rgba(34, 211, 238, 0.12);
-  color: #22d3ee;
+  background: #f3f0ff;
+  color: #7c3aed;
 }
 .vv-icon-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 .vv-icon-btn-danger:hover:not(:disabled) {
-  background: rgba(248, 113, 113, 0.15);
-  color: #f87171;
+  background: #fef2f2;
+  color: #ef4444;
 }
 
 /* ── Subblock ───────────────────────── */
 .vv-subblock {
   margin-top: 14px;
   padding-top: 14px;
-  border-top: 1px dashed #1e2d45;
+  border-top: 1px dashed #e5e7eb;
 }
 .vv-subblock-head {
   display: flex;
@@ -639,18 +640,18 @@
 .vv-subblock-title {
   font-size: 13px;
   font-weight: 600;
-  color: #e6edf7;
+  color: #1f2937;
 }
 .vv-opt-tag {
   font-size: 10px;
-  background: rgba(34, 211, 238, 0.12);
-  color: #22d3ee;
+  background: #f3f0ff;
+  color: #7c3aed;
   padding: 1px 6px;
   border-radius: 4px;
 }
 .vv-subblock-hint {
   font-size: 11px;
-  color: #64748b;
+  color: #9ca3af;
   margin-left: auto;
 }
 
@@ -680,23 +681,23 @@
   justify-content: center;
   gap: 6px;
   padding: 14px 8px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e0e0e8;
   border-radius: 8px;
-  color: #94a3b8;
+  color: #6b7280;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.15s;
 }
 .vv-audio-cell:hover:not(:disabled) {
-  border-color: #22d3ee;
-  color: #22d3ee;
+  border-color: #7c3aed;
+  color: #7c3aed;
 }
 .vv-audio-cell.selected,
 .vv-audio-cell.active {
-  background: rgba(34, 211, 238, 0.12);
-  border-color: #22d3ee;
-  color: #22d3ee;
+  background: #f5f0ff;
+  border-color: #7c3aed;
+  color: #7c3aed;
 }
 .vv-audio-cell:disabled {
   opacity: 0.5;
@@ -711,19 +712,19 @@
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
-  background: rgba(34, 211, 238, 0.12);
-  border: 1px solid rgba(34, 211, 238, 0.3);
+  background: #f5f0ff;
+  border: 1px solid #d8cafc;
   border-radius: 8px;
   margin-top: 8px;
   font-size: 12px;
-  color: #e6edf7;
+  color: #7c3aed;
 }
 
 .vv-voice-panel {
   margin-top: 8px;
-  border: 1px solid #1e2d45;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
-  background: #0f1a2e;
+  background: #fafbfc;
   padding: 8px;
   max-height: 240px;
   overflow-y: auto;
@@ -743,22 +744,22 @@
   transition: background 0.15s;
 }
 .vv-voice-item:hover {
-  background: #152238;
+  background: #f5f0ff;
 }
 .vv-voice-item.selected {
-  background: rgba(34, 211, 238, 0.12);
+  background: #f5f0ff;
 }
 .vv-voice-radio {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  border: 2px solid #334155;
+  border: 2px solid #d1d5db;
   flex-shrink: 0;
 }
 .vv-voice-item.selected .vv-voice-radio {
-  border-color: #22d3ee;
-  background: #22d3ee;
-  box-shadow: inset 0 0 0 2px #0f1a2e;
+  border-color: #7c3aed;
+  background: #7c3aed;
+  box-shadow: inset 0 0 0 2px #fff;
 }
 .vv-voice-info {
   flex: 1;
@@ -766,31 +767,31 @@
 }
 .vv-voice-name {
   font-size: 13px;
-  color: #e6edf7;
+  color: #1f2937;
   font-weight: 500;
 }
 .vv-voice-desc {
   font-size: 11px;
-  color: #64748b;
+  color: #9ca3af;
 }
 .vv-voice-play {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: none;
-  background: rgba(34, 211, 238, 0.12);
-  color: #22d3ee;
+  background: #f3f0ff;
+  color: #7c3aed;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 .vv-voice-play:hover {
-  background: rgba(34, 211, 238, 0.2);
+  background: rgba(124, 58, 237, 0.2);
 }
 .vv-voice-play.playing {
-  background: #22d3ee;
-  color: #0b1220;
+  background: #7c3aed;
+  color: #fff;
 }
 
 .vv-tips {
@@ -802,22 +803,22 @@
   gap: 4px;
   background: transparent;
   border: none;
-  color: #94a3b8;
+  color: #6b7280;
   font-size: 12px;
   cursor: pointer;
   padding: 4px 0;
 }
 .vv-tips-head:hover {
-  color: #22d3ee;
+  color: #7c3aed;
 }
 .vv-tips-body {
   margin-top: 6px;
   padding: 8px 10px;
-  background: rgba(250, 204, 21, 0.08);
-  border: 1px solid rgba(250, 204, 21, 0.2);
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
   border-radius: 6px;
   font-size: 12px;
-  color: #facc15;
+  color: #b45309;
   line-height: 1.6;
 }
 
@@ -825,15 +826,15 @@
 .vv-recog {
   margin-top: 14px;
   padding: 12px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
   font-size: 12px;
   line-height: 1.7;
 }
 .vv-recog-title {
   font-weight: 600;
-  color: #22d3ee;
+  color: #7c3aed;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
@@ -853,14 +854,14 @@
   margin-bottom: 2px;
 }
 .vv-recog-k {
-  color: #94a3b8;
+  color: #6b7280;
   flex-shrink: 0;
 }
 .vv-recog-v {
-  color: #e6edf7;
+  color: #1f2937;
 }
 .vv-recog-meta {
-  color: #64748b;
+  color: #9ca3af;
 }
 
 /* progress mini */
@@ -868,8 +869,8 @@
   display: inline-block;
   width: 10px;
   height: 10px;
-  border: 2px solid rgba(34, 211, 238, 0.25);
-  border-top-color: #22d3ee;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: #7c3aed;
   border-radius: 50%;
   animation: vv-spin 0.8s linear infinite;
   vertical-align: middle;
@@ -878,13 +879,13 @@
 .vv-progress-bar {
   width: 100%;
   height: 4px;
-  background: #1e2d45;
+  background: #e5e7eb;
   border-radius: 2px;
   overflow: hidden;
 }
 .vv-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #06b6d4, #22d3ee);
+  background: linear-gradient(90deg, #7c3aed, #a855f7);
   transition: width 0.2s;
 }
 
@@ -893,8 +894,8 @@
   display: inline-block;
   width: 14px;
   height: 14px;
-  border: 2px solid rgba(34, 211, 238, 0.25);
-  border-top-color: #22d3ee;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: #7c3aed;
   border-radius: 50%;
   animation: vv-spin 0.8s linear infinite;
   vertical-align: middle;
@@ -913,22 +914,22 @@
 }
 .vv-pill {
   padding: 5px 12px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
-  color: #cbd5e1;
+  background: #fff;
+  border: 1px solid #e0e0e8;
+  color: #374151;
   border-radius: 16px;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.15s;
 }
 .vv-pill:hover:not(:disabled) {
-  border-color: rgba(34, 211, 238, 0.5);
-  color: #e6edf7;
+  border-color: rgba(124, 58, 237, 0.5);
+  color: #1f2937;
 }
 .vv-pill.active {
-  background: rgba(34, 211, 238, 0.12);
-  border-color: #22d3ee;
-  color: #22d3ee;
+  background: #f5f0ff;
+  border-color: #7c3aed;
+  color: #7c3aed;
   font-weight: 500;
 }
 .vv-pill:disabled {
@@ -943,14 +944,14 @@
 .vv-section-subtitle {
   font-size: 13px;
   font-weight: 600;
-  color: #e6edf7;
+  color: #1f2937;
   margin-bottom: 8px;
   margin-top: 4px;
 }
 .vv-fusion-grid {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
   margin-bottom: 12px;
 }
 .vv-fusion-btn {
@@ -959,10 +960,10 @@
   align-items: flex-start;
   gap: 2px;
   padding: 10px 12px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e0e0e8;
   border-radius: 8px;
-  color: #94a3b8;
+  color: #6b7280;
   cursor: pointer;
   text-align: left;
   font-size: 12px;
@@ -971,17 +972,20 @@
 }
 .vv-fusion-btn strong {
   font-size: 13px;
-  color: inherit;
+  color: #1f2937;
   font-weight: 600;
 }
+.vv-fusion-btn.active strong {
+  color: #7c3aed;
+}
 .vv-fusion-btn:hover:not(:disabled) {
-  border-color: rgba(34, 211, 238, 0.5);
-  color: #cbd5e1;
+  border-color: #c0c0d0;
+  color: #374151;
 }
 .vv-fusion-btn.active {
-  background: rgba(34, 211, 238, 0.12);
-  border-color: #22d3ee;
-  color: #22d3ee;
+  background: #f5f0ff;
+  border-color: #7c3aed;
+  color: #7c3aed;
 }
 .vv-fusion-btn:disabled {
   opacity: 0.5;
@@ -1006,8 +1010,8 @@
 
 /* ── Copy / storyboard box ─────────────── */
 .vv-copy-box {
-  background: #111a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 10px;
   padding: 14px;
   margin-top: 12px;
@@ -1021,7 +1025,7 @@
 .vv-copy-title {
   font-size: 14px;
   font-weight: 600;
-  color: #e6edf7;
+  color: #1f2937;
 }
 .vv-copy-tag {
   font-size: 11px;
@@ -1030,9 +1034,9 @@
   font-weight: 400;
 }
 .vv-copy-tag-preview {
-  background: rgba(250, 204, 21, 0.12);
-  color: #facc15;
-  border: 1px solid rgba(250, 204, 21, 0.3);
+  background: #fef3c7;
+  color: #b45309;
+  border: 1px solid #fcd34d;
   margin-left: auto;
 }
 
@@ -1043,8 +1047,8 @@
   justify-content: center;
   padding: 28px 16px;
   gap: 10px;
-  background: #111a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
 }
 .vv-copy-loading .vv-spinner {
   width: 28px;
@@ -1052,23 +1056,23 @@
   border-width: 3px;
 }
 .vv-copy-loading-text {
-  color: #e6edf7;
+  color: #1f2937;
   font-weight: 500;
   font-size: 14px;
   text-align: center;
 }
 .vv-copy-loading-hint {
   font-size: 12px;
-  color: #64748b;
+  color: #6b7280;
 }
 
 .vv-copy-locked {
-  background: rgba(34, 211, 238, 0.06);
-  border-color: rgba(34, 211, 238, 0.2);
+  background: #fafafe;
+  border-color: #d8cafc;
 }
 .vv-copy-sub {
   font-size: 12px;
-  color: #64748b;
+  color: #6b7280;
 }
 
 /* ── Storyboard (linear doc style) ── */
@@ -1082,7 +1086,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  color: #e6edf7;
+  color: #1f2937;
   font-size: 13px;
   line-height: 1.7;
 }
@@ -1091,7 +1095,7 @@
   padding: 0;
   font-size: 14px;
   font-weight: 700;
-  color: #e6edf7;
+  color: #1f2937;
   display: flex;
   align-items: center;
 }
@@ -1107,7 +1111,7 @@
 }
 .vv-sb-k {
   flex-shrink: 0;
-  color: #94a3b8;
+  color: #6b7280;
   font-weight: 500;
   min-width: 120px;
 }
@@ -1118,7 +1122,7 @@
   flex: 1;
   border: none;
   background: transparent;
-  color: #e6edf7;
+  color: #1f2937;
   font-size: 13px;
   font-family: inherit;
   padding: 2px 4px;
@@ -1131,11 +1135,11 @@
 }
 .vv-sb-inline-input:hover,
 .vv-sb-inline-input:focus {
-  border-bottom-color: rgba(34, 211, 238, 0.5);
-  background: rgba(34, 211, 238, 0.05);
+  border-bottom-color: #7c3aed;
+  background: #f5f0ff;
 }
 .vv-sb-inline:disabled {
-  color: #cbd5e1;
+  color: #9ca3af;
   cursor: default;
 }
 .vv-sb-inline-select {
@@ -1149,7 +1153,7 @@
 }
 .vv-sb-inline-select .ant-select-selection-item,
 .vv-sb-inline-select .ant-select-selection-placeholder {
-  color: #e6edf7 !important;
+  color: #1f2937 !important;
   font-size: 13px !important;
   line-height: 24px !important;
   padding-left: 0 !important;
@@ -1162,7 +1166,7 @@
   padding: 4px 6px !important;
   font-size: 13px !important;
   line-height: 1.7 !important;
-  color: #e6edf7 !important;
+  color: #1f2937 !important;
   border-radius: 4px;
   resize: vertical;
   transition:
@@ -1171,8 +1175,8 @@
 }
 .vv-sb-doc-ta:hover,
 .vv-sb-doc-ta:focus {
-  border-color: rgba(34, 211, 238, 0.4) !important;
-  background: rgba(34, 211, 238, 0.04) !important;
+  border-color: #7c3aed !important;
+  background: #f5f0ff !important;
 }
 .vv-sb-doc-ta-sm {
   min-height: 32px;
@@ -1185,7 +1189,7 @@
 }
 .vv-sb-doc-shot {
   padding-left: 8px;
-  border-left: 2px solid rgba(34, 211, 238, 0.25);
+  border-left: 2px solid rgba(124, 58, 237, 0.3);
 }
 .vv-sb-doc-shot-head {
   margin-bottom: 2px;
@@ -1193,7 +1197,7 @@
 .vv-sb-time-doc {
   font-size: 14px;
   font-weight: 700;
-  color: #22d3ee;
+  color: #7c3aed;
   background: transparent;
   border: none;
   outline: none;
@@ -1202,7 +1206,7 @@
   border-radius: 4px;
 }
 .vv-sb-time-doc:focus {
-  background: rgba(34, 211, 238, 0.08);
+  background: #f5f0ff;
 }
 
 .vv-sb-ref-badge {
@@ -1211,10 +1215,10 @@
   align-items: center;
   gap: 4px;
   padding: 2px 6px 2px 4px;
-  background: rgba(34, 211, 238, 0.1);
-  border: 1px solid rgba(34, 211, 238, 0.3);
+  background: #f3f0ff;
+  border: 1px solid #d8cafc;
   border-radius: 6px;
-  color: #22d3ee;
+  color: #7c3aed;
   font-size: 12px;
 }
 .vv-sb-ref-thumb {
@@ -1224,9 +1228,9 @@
   border-radius: 4px;
 }
 .vv-sb-ref-x {
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  border: none;
+  background: #fff;
+  color: #6b7280;
+  border: 1px solid #e5e7eb;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -1239,7 +1243,7 @@
   justify-content: center;
 }
 .vv-sb-ref-x:hover {
-  background: #f87171;
+  background: #ef4444;
 }
 .vv-sb-ref-pick {
   display: inline-flex;
@@ -1250,15 +1254,15 @@
   width: 36px;
   height: 36px;
   border-radius: 4px;
-  border: 1px dashed #1e2d45;
-  background: #0f1a2e;
+  border: 1px dashed #e0e0e8;
+  background: #fff;
   padding: 0;
   overflow: hidden;
   cursor: pointer;
   transition: border-color 0.15s;
 }
 .vv-sb-ref-opt:hover {
-  border-color: #22d3ee;
+  border-color: #7c3aed;
 }
 .vv-sb-ref-opt img {
   width: 100%;
@@ -1266,7 +1270,7 @@
   object-fit: cover;
 }
 .vv-sb-muted {
-  color: #64748b;
+  color: #6b7280;
   font-size: 12px;
 }
 
@@ -1286,14 +1290,14 @@
   border: 1px solid transparent;
 }
 .vv-sb-tag-hard {
-  background: rgba(34, 211, 238, 0.1);
-  color: #22d3ee;
-  border-color: rgba(34, 211, 238, 0.3);
+  background: #f3f0ff;
+  color: #7c3aed;
+  border-color: #d8cafc;
 }
 .vv-sb-tag-neg {
-  background: rgba(248, 113, 113, 0.1);
-  color: #f87171;
-  border-color: rgba(248, 113, 113, 0.3);
+  background: #fef2f2;
+  color: #ef4444;
+  border-color: #fecaca;
 }
 .vv-sb-tag-input {
   background: transparent;
@@ -1319,16 +1323,17 @@
 }
 .vv-sb-tag-add {
   background: transparent;
-  border: 1px dashed #334155;
-  color: #94a3b8;
+  border: 1px dashed #e0e0e8;
+  color: #6b7280;
   border-radius: 6px;
   padding: 3px 10px;
   font-size: 12px;
   cursor: pointer;
 }
 .vv-sb-tag-add:hover {
-  border-color: #22d3ee;
-  color: #22d3ee;
+  border-color: #7c3aed;
+  color: #7c3aed;
+  background: #f5f0ff;
 }
 
 .vv-sb-doc-collapse {
@@ -1346,21 +1351,21 @@
   display: inline-block;
   transition: transform 0.2s;
   font-size: 10px;
-  color: #94a3b8;
+  color: #9ca3af;
 }
 .vv-sb-caret.open {
   transform: rotate(180deg);
 }
 .vv-sb-vo {
   margin-top: 6px !important;
-  background: #0b1220 !important;
-  border-left: 3px solid #22d3ee !important;
+  background: #fafafe !important;
+  border-left: 3px solid #7c3aed !important;
   border-radius: 0 6px 6px 0 !important;
   padding: 10px 12px !important;
   min-height: 80px !important;
   font-size: 13px !important;
   line-height: 1.7 !important;
-  color: #e6edf7 !important;
+  color: #1f2937 !important;
   border: none !important;
 }
 
@@ -1370,7 +1375,7 @@
   gap: 8px;
   margin-top: 14px;
   padding-top: 12px;
-  border-top: 1px solid #1e2d45;
+  border-top: 1px solid #e5e7eb;
 }
 .vv-sb-actions .vv-btn-ghost {
   padding: 6px 14px;
@@ -1382,14 +1387,14 @@
   align-items: center;
   gap: 6px;
   padding: 10px 14px;
-  background: #111a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 10px;
   font-size: 12px;
-  color: #94a3b8;
+  color: #6b7280;
 }
 .vv-credits strong {
-  color: #22d3ee;
+  color: #7c3aed;
   font-weight: 700;
   font-size: 14px;
 }
@@ -1398,8 +1403,8 @@
 .vv-preview {
   aspect-ratio: 9 / 16;
   max-height: 360px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px dashed #e5e7eb;
   border-radius: 10px;
   display: flex;
   align-items: center;
@@ -1418,13 +1423,13 @@
   flex-direction: column;
   align-items: center;
   gap: 10px;
-  color: #64748b;
+  color: #9ca3af;
   text-align: center;
   padding: 20px;
 }
 .ph-icon {
   font-size: 40px;
-  color: #64748b;
+  color: #9ca3af;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1432,7 +1437,7 @@
 .ph-txt {
   font-size: 12px;
   line-height: 1.6;
-  color: #94a3b8;
+  color: #6b7280;
 }
 
 /* ── Error ──────────────── */
@@ -1442,10 +1447,10 @@
   flex-wrap: wrap;
   gap: 8px;
   padding: 12px;
-  background: rgba(248, 113, 113, 0.12);
-  border: 1px solid rgba(248, 113, 113, 0.3);
+  background: #fef2f2;
+  border: 1px solid #fecaca;
   border-radius: 8px;
-  color: #fca5a5;
+  color: #dc2626;
   font-size: 13px;
   margin-top: 10px;
 }
@@ -1454,7 +1459,7 @@
 .vv-modal {
   position: fixed;
   inset: 0;
-  background: rgba(11, 18, 32, 0.7);
+  background: rgba(0, 0, 0, 0.45);
   z-index: 1000;
   display: flex;
   align-items: center;
@@ -1462,8 +1467,8 @@
   padding: 20px;
 }
 .vv-modal-body {
-  background: #111a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 12px;
   max-width: 720px;
   width: 100%;
@@ -1478,7 +1483,7 @@
   right: 14px;
   background: transparent;
   border: none;
-  color: #94a3b8;
+  color: #6b7280;
   font-size: 18px;
   cursor: pointer;
   width: 28px;
@@ -1486,13 +1491,13 @@
   border-radius: 6px;
 }
 .vv-modal-close:hover {
-  color: #f87171;
-  background: rgba(248, 113, 113, 0.1);
+  color: #ef4444;
+  background: #fef2f2;
 }
 .vv-modal-empty {
   text-align: center;
   padding: 40px 20px;
-  color: #64748b;
+  color: #6b7280;
 }
 .vv-asset-search {
   margin-bottom: 12px;
@@ -1504,27 +1509,27 @@
 }
 .vv-thumb-card {
   position: relative;
-  border: 1px solid #1e2d45;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
-  background: #0f1a2e;
+  background: #fff;
   transition: all 0.15s;
 }
 .vv-thumb-card:hover {
-  border-color: #22d3ee;
+  border-color: #7c3aed;
 }
 .vv-thumb-card.picked {
-  border-color: #22d3ee;
-  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
+  border-color: #7c3aed;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
 }
 .vv-thumb-ph {
   aspect-ratio: 1;
-  background: #0a1220;
+  background: #f9fafb;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #64748b;
+  color: #9ca3af;
   font-size: 24px;
 }
 .vv-thumb-card img,
@@ -1536,13 +1541,13 @@
 }
 .vv-asset-image {
   position: relative;
-  border: 1px solid #1e2d45;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
 }
 .vv-asset-image:hover {
-  border-color: #22d3ee;
+  border-color: #7c3aed;
 }
 .vv-thumb-check {
   position: absolute;
@@ -1551,8 +1556,8 @@
   width: 22px;
   height: 22px;
   border-radius: 50%;
-  background: #22d3ee;
-  color: #0b1220;
+  background: #7c3aed;
+  color: #fff;
   display: none;
   align-items: center;
   justify-content: center;
@@ -1565,7 +1570,7 @@
 .vv-thumb-name {
   padding: 6px 8px;
   font-size: 11px;
-  color: #cbd5e1;
+  color: #374151;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1586,22 +1591,22 @@
   align-items: center;
   gap: 10px;
   padding: 10px;
-  border: 1px solid #1e2d45;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
   cursor: pointer;
-  background: #0f1a2e;
+  background: #fff;
   margin-bottom: 6px;
   transition: all 0.15s;
 }
 .vv-asset-video:hover,
 .vv-asset-voice:hover {
-  border-color: #22d3ee;
+  border-color: #7c3aed;
 }
 
 /* voice cards (preset) */
 .vv-voice-cat-label {
   font-size: 12px;
-  color: #64748b;
+  color: #6b7280;
   font-weight: 600;
   margin: 10px 0 6px;
 }
@@ -1612,8 +1617,8 @@
   margin-bottom: 8px;
 }
 .vv-voice-card {
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 10px;
   display: flex;
@@ -1623,18 +1628,18 @@
   transition: all 0.15s;
 }
 .vv-voice-card:hover {
-  border-color: #22d3ee;
+  border-color: #7c3aed;
 }
 .vv-voice-card.selected {
-  border-color: #22d3ee;
-  background: rgba(34, 211, 238, 0.12);
+  border-color: #7c3aed;
+  background: rgba(124, 58, 237, 0.12);
 }
 .vv-voice-card-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  color: #0b1220;
+  background: #7c3aed;
+  color: #f5f6fa;
   font-weight: 700;
   display: flex;
   align-items: center;
@@ -1643,16 +1648,16 @@
 }
 .vv-voice-card-name {
   font-size: 13px;
-  color: #e6edf7;
+  color: #1f2937;
   font-weight: 500;
 }
 .vv-voice-card-gender {
   font-size: 10px;
-  color: #64748b;
+  color: #9ca3af;
 }
 .vv-voice-card-desc {
   font-size: 11px;
-  color: #94a3b8;
+  color: #6b7280;
   line-height: 1.4;
 }
 .vv-voice-card-actions {
@@ -1664,19 +1669,19 @@
   flex: 1;
   padding: 4px;
   background: transparent;
-  border: 1px solid #1e2d45;
-  color: #94a3b8;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
   border-radius: 4px;
   font-size: 11px;
   cursor: pointer;
 }
 .vv-voice-card-btn:hover {
-  border-color: #22d3ee;
-  color: #22d3ee;
+  border-color: #7c3aed;
+  color: #7c3aed;
 }
 .vv-voice-card-btn-preview {
-  color: #22d3ee;
-  border-color: rgba(34, 211, 238, 0.4);
+  color: #7c3aed;
+  border-color: #d8cafc;
 }
 
 .vv-voice-search {
@@ -1689,7 +1694,7 @@
 }
 .vv-intent-title {
   font-size: 12px;
-  color: #94a3b8;
+  color: #6b7280;
   margin-bottom: 6px;
 }
 .vv-intent-row {
@@ -1699,30 +1704,30 @@
 }
 .vv-chip {
   padding: 4px 10px;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #fff;
+  border: 1px solid #e0e0e8;
   border-radius: 14px;
   font-size: 12px;
-  color: #cbd5e1;
+  color: #374151;
   cursor: pointer;
 }
 .vv-chip.picked {
-  background: rgba(34, 211, 238, 0.12);
-  color: #22d3ee;
-  border-color: #22d3ee;
+  background: #f5f0ff;
+  color: #7c3aed;
+  border-color: #7c3aed;
 }
 
 /* misc helpers */
 .vv-k {
-  color: #94a3b8;
+  color: #6b7280;
 }
 .vv-v {
-  color: #e6edf7;
+  color: #1f2937;
 }
 .vv-hint-yellow {
-  background: rgba(250, 204, 21, 0.1);
-  border: 1px solid rgba(250, 204, 21, 0.2);
-  color: #facc15;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  color: #b45309;
   font-size: 12px;
   padding: 8px;
   border-radius: 6px;
@@ -1730,15 +1735,15 @@
   margin-top: 8px;
 }
 .vv-hint-gray {
-  color: #64748b;
+  color: #9ca3af;
   font-size: 12px;
 }
 
 /* Segmented tabs (legacy) */
 .vv-seg-tabs {
   display: inline-flex;
-  background: #0f1a2e;
-  border: 1px solid #1e2d45;
+  background: #f5f6fa;
+  border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 3px;
   gap: 2px;
@@ -1746,18 +1751,19 @@
 .vv-seg-tab {
   padding: 6px 14px;
   border-radius: 6px;
-  background: transparent;
+  background: #fff;
   border: none;
-  color: #94a3b8;
+  color: #6b7280;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.15s;
 }
 .vv-seg-tab:hover {
-  color: #e6edf7;
+  color: #374151;
+  background: #fff;
 }
 .vv-seg-tab.active {
-  background: #1a2540;
-  color: #22d3ee;
+  background: #f3f0ff;
+  color: #7c3aed;
   font-weight: 500;
 }
diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.tsx b/apps/web/src/pages/viral-video/ViralVideoPage.tsx
index 7504bb5a1..629ee5250 100644
--- a/apps/web/src/pages/viral-video/ViralVideoPage.tsx
+++ b/apps/web/src/pages/viral-video/ViralVideoPage.tsx
@@ -151,7 +151,18 @@ const TARGET_CUSTOMERS = [
   "都市蓝领",
   "都市银发",
 ]
-const PERSONAS = ["亲切邻家姐姐", "专业顾问", "搞笑段子手", "真实测评博主", "闺蜜种草", "行业专家"]
+const PERSONAS = [
+  "通用个人IP",
+  "老板型IP",
+  "专家型IP",
+  "顾问型IP",
+  "创始人IP",
+  "创业者IP",
+  "从业者经验派",
+  "避坑顾问型",
+  "知识科普型",
+  "测评种草型",
+]
 const STRUCTURES = [
   "反差破局+亮明观点+还原现状",
   "痛点场景植入+给出通关秘籍",
@@ -190,8 +201,11 @@ const QUALITY_OPTIONS = [
   { v: "1080p", label: "1080p（高清）" },
 ]
 const UPSCALE_OPTIONS = [
-  { v: "关闭", label: "关闭" },
-  { v: "开启", label: "开启" },
+  { v: "default", label: "默认" },
+  { v: "sd", label: "普清" },
+  { v: "hd", label: "高清" },
+  { v: "uhd", label: "超清" },
+  { v: "omnipotent", label: "全能" },
 ]
 const VOICE_TIPS =
   "支持 MP3/WAV/M4A/AAC/OGG 格式，最大 10MB，时长 ≤30 秒。建议清晰人声、无背景音乐、环境安静；录音请保持距麦克风 15-20cm，音量适中。"
@@ -358,7 +372,7 @@ const emptyTask = (id: string, title: string): TabTask => ({
   videoRatio: "9:16",
   videoModel: "seedance-2.5",
   quality: "480p",
-  upscale: "关闭",
+  upscale: "default",
   uiStep: "step1_upload",
   imageAnalysis: null,
   storyboard: null,
@@ -975,7 +989,7 @@ const ViralVideoPage: React.FC = () => {
       return (
         <div className="vv-recog">
           <div className="vv-recog-title">
-            <LoadingOutlined style={{ color: "#22d3ee", marginRight: 6 }} />
+            <LoadingOutlined style={{ color: "#7c3aed", marginRight: 6 }} />
             识别描述汇览
           </div>
           <div className="vv-muted">AI 正在识别商品特征…</div>
@@ -1355,7 +1369,7 @@ const ViralVideoPage: React.FC = () => {
           {/* 完整口播稿（可折叠） */}
           <h4 className="vv-sb-h">
             <button className="vv-sb-doc-collapse" onClick={() => setVoOpen(!voOpen)} type="button">
-              <SoundOutlined style={{ color: "#22d3ee", marginRight: 6 }} />
+              <SoundOutlined style={{ color: "#7c3aed", marginRight: 6 }} />
               完整口播稿（TTS 合成使用）
               <span className={`vv-sb-caret ${voOpen ? "open" : ""}`}>▾</span>
             </button>
@@ -1676,7 +1690,7 @@ const ViralVideoPage: React.FC = () => {
                 />
                 {task.refAudio && (
                   <div className="vv-selected-audio">
-                    <SoundOutlined style={{ color: "#22d3ee", marginRight: 6 }} />
+                    <SoundOutlined style={{ color: "#7c3aed", marginRight: 6 }} />
                     <span style={{ flex: 1 }}>已选：{task.refAudio.name}</span>
                     <button
                       className="vv-link-btn"
@@ -1801,12 +1815,19 @@ const ViralVideoPage: React.FC = () => {
                   </button>
                 ))}
               </div>
-              {task.fusionLevel === "user_primary" && (
+              {(task.fusionLevel === "ai_polish" || task.fusionLevel === "user_primary") && (
                 <div className="vv-form-row">
-                  <label className="vv-label">写下你的文案/草稿</label>
+                  <label className="vv-label">
+                    {task.fusionLevel === "ai_polish" ? "写下你的文案草稿" : "写下你的文案/草稿"}
+                  </label>
                   <textarea
+                    key={task.fusionLevel}
                     className="vv-textarea"
-                    placeholder="请输入你想要的原始文案，AI 将严格保留你的表达"
+                    placeholder={
+                      task.fusionLevel === "ai_polish"
+                        ? "请输入你的文案草稿，AI将在此基础上润色优化..."
+                        : "请输入你想要的原始文案，AI将严格保留你的表达..."
+                    }
                     value={task.userCopy}
                     onChange={(e) => setTask({ userCopy: e.target.value })}
                     disabled={!canEditStep2}
@@ -1857,11 +1878,11 @@ const ViralVideoPage: React.FC = () => {
                   <Select
                     className="vv-select vv-select-purple"
                     style={{ width: "100%" }}
-                    placeholder="请选择人设"
+                    placeholder="请选择人设类型"
+                    optionFilterProp="children"
                     value={task.persona || undefined}
                     onChange={(v) => setTask({ persona: v })}
                     options={PERSONAS.map((i) => ({ value: i, label: i }))}
-                    allowClear
                     disabled={!canEditStep2}
                   />
                 </div>
@@ -2036,7 +2057,7 @@ const ViralVideoPage: React.FC = () => {
                 ) : task.uiStep === "step3_generating" ? (
                   <div className="vv-preview-placeholder">
                     <div className="ph-icon">
-                      <LoadingOutlined style={{ fontSize: 36, color: "#22d3ee" }} />
+                      <LoadingOutlined style={{ fontSize: 36, color: "#7c3aed" }} />
                     </div>
                     <div className="ph-txt">
                       AI 正在生成视频中…