{% extends "base.html" %}

{% block title %}口播 - AI创作工作台{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/main.css">
{% endblock %}

{% block content %}
<div class="space-y-6">
        <!-- 页面标题 + Tab导航 -->
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-bold text-gray-800">📱 口播</h1>
        </div>

        <div class="flex gap-1 bg-white rounded-lg p-1 shadow-sm mb-6 border border-gray-200">
            <button class="sm-tab active" data-tab="assets" onclick="switchSMTab('assets', this)">
                <span class="sm-tab-icon">📦</span> 资产素材
            </button>
            <button class="sm-tab" data-tab="ai-workshop" onclick="switchSMTab('ai-workshop', this)">
                <span class="sm-tab-icon">🤖</span> AI车间
            </button>
            <button class="sm-tab" data-tab="remake" onclick="switchSMTab('remake', this)">
                <span class="sm-tab-icon">🔥</span> 爆款复刻
            </button>
            <button class="sm-tab" data-tab="works" onclick="switchSMTab('works', this)">
                <span class="sm-tab-icon">🎬</span> 作品管理
            </button>
            <button class="sm-tab" data-tab="retouch" onclick="switchSMTab('retouch', this)">
                <span class="sm-tab-icon">✨</span> 精修车间
            </button>
        </div>

        <!-- ============ 资产素材 ============ -->
        <div id="tab-assets" class="sm-tab-panel">
            <!-- 子Tab -->
            <div class="flex gap-2 mb-6 bg-white rounded-lg p-2 shadow-sm border border-gray-200">
                <button class="sm-subtab active" data-subtab="video" onclick="switchAssetSubTab('video', this)">
                    🎥 视频素材 <span id="video-count" class="ml-1 text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded-full">0</span>
                </button>
                <button class="sm-subtab" data-subtab="audio" onclick="switchAssetSubTab('audio', this)">
                    🎵 声音素材 <span id="audio-count" class="ml-1 text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded-full">0</span>
                </button>
                <button class="sm-subtab" data-subtab="image" onclick="switchAssetSubTab('image', this)">
                    🖼️ 图片素材 <span id="image-count" class="ml-1 text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded-full">0</span>
                </button>
            </div>

            <!-- 视频素材 -->
            <div id="subtab-video" class="sm-subtab-panel">
                <!-- 空状态 -->
                <div id="video-empty" class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
                    <div class="text-6xl mb-6">🎥</div>
                    <div class="inline-block bg-orange-50 text-orange-600 text-sm font-medium px-4 py-1.5 rounded-full mb-4">视频素材还没有内容</div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-3">先上传一段正脸出镜视频</h3>
                    <p class="text-gray-500 mb-6 max-w-md mx-auto">上传或录制一段 10-30 秒真人口播素材。光线清楚、脸无遮挡、人物占画面主体，后续训练数字形象会更稳。</p>
                    <div class="flex gap-3 justify-center mb-6">
                        <button onclick="document.getElementById('video-upload').click()" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition shadow-sm">
                            ⬆️ 上传视频参考
                        </button>
                        <button onclick="showRecordModal()" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition">
                            🎙️ 录制视频参考
                        </button>
                        <input type="file" id="video-upload" accept="video/*" multiple class="hidden" onchange="handleAssetUpload(event, 'video')">
                    </div>
                    <div class="flex gap-4 justify-center text-sm text-gray-500">
                        <span>✅ 真人正脸出镜</span>
                        <span>✅ 光线清楚，脸部无遮挡</span>
                        <span>✅ 人物占画面主体</span>
                    </div>
                </div>
                <!-- 素材列表 -->
                <div id="video-list" class="hidden grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"></div>
            </div>

            <!-- 声音素材 -->
            <div id="subtab-audio" class="sm-subtab-panel hidden">
                <div id="audio-empty" class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
                    <div class="text-6xl mb-6">🎵</div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-3">添加声音素材</h3>
                    <p class="text-gray-500 mb-6">上传音频文件（MP3/WAV），用于配音、音效或训练声音模型。</p>
                    <div class="flex gap-3 justify-center">
                        <button onclick="document.getElementById('audio-upload').click()" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
                            ⬆️ 上传音频
                        </button>
                        <input type="file" id="audio-upload" accept="audio/*" multiple class="hidden" onchange="handleAssetUpload(event, 'audio')">
                    </div>
                </div>
                <div id="audio-list" class="hidden grid grid-cols-1 md:grid-cols-2 gap-4"></div>
            </div>

            <!-- 图片素材 -->
            <div id="subtab-image" class="sm-subtab-panel hidden">
                <div id="image-empty" class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
                    <div class="text-6xl mb-6">🖼️</div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-3">添加图片素材</h3>
                    <p class="text-gray-500 mb-6">上传图片文件（JPG/PNG），用于封面、场景图或素材库。</p>
                    <div class="flex gap-3 justify-center">
                        <button onclick="document.getElementById('image-upload').click()" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
                            ⬆️ 上传图片
                        </button>
                        <input type="file" id="image-upload" accept="image/*" multiple class="hidden" onchange="handleAssetUpload(event, 'image')">
                    </div>
                </div>
                <div id="image-list" class="hidden grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"></div>
            </div>
        </div>

        <!-- ============ AI车间 ============ -->
        <div id="tab-ai-workshop" class="sm-tab-panel hidden">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
                <div class="flex justify-between items-center gap-3 flex-wrap">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-xl">🤖</div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-800">AI 自媒体爆款策划助手</h2>
                            <p class="text-xs text-gray-500">6 步引导你从一句话需求到一键生成可发布作品</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span id="ai-skill-source" class="text-xs text-gray-400"></span>
                        <button onclick="restartAIWorkshop()" class="px-3 py-1.5 text-sm rounded-lg border border-gray-300 hover:bg-gray-100">🔄 重新开始</button>
                    </div>
                </div>
            </div>

            <!-- 6 步骤进度条 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3 mb-4">
                <div id="ai-workshop-stepper" class="flex items-center justify-between gap-1 flex-wrap"></div>
            </div>

            <!-- 对话 + 内容区 -->
            <div id="ai-workshop-content" class="bg-white rounded-lg shadow-sm border border-gray-200 min-h-[480px] p-5"></div>

            <!-- 用户输入区（仅在指定步骤显示） -->
            <div id="ai-workshop-input" class="mt-4 bg-white rounded-lg shadow-sm border border-gray-200 p-4 hidden">
                <div class="flex justify-between items-center mb-2 gap-3 flex-wrap">
                    <span class="text-sm text-gray-600 font-medium" id="ai-input-label">补充需求</span>
                    <div class="flex items-center gap-3 text-xs text-gray-500">
                        <label class="flex items-center gap-1">
                            🤖 模型:
                            <select id="ai-input-llm" class="px-2 py-1 border border-gray-200 rounded text-xs bg-white" style="min-width:180px;">
                                <option value="">系统默认（自动选择）</option>
                            </select>
                        </label>
                        <label class="flex items-center gap-1"><input type="checkbox" id="ai-input-replace"> 重新生成</label>
                        <span class="text-gray-300">|</span>
                        <span>IP 专家 Skills</span>
                    </div>
                </div>
                <textarea id="ai-input-textarea" class="w-full border border-gray-300 rounded-lg p-3 text-sm focus:outline-none focus:border-blue-400" rows="3" placeholder="继续补充案例或修改要求..."></textarea>
                <div class="flex justify-end mt-2">
                    <button onclick="submitAIInput()" class="px-5 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-sm rounded-lg hover:opacity-90">发给小麦</button>
                </div>
            </div>
        </div>

        <!-- ============ 爆款复刻 ============ -->
        <div id="tab-remake" class="sm-tab-panel hidden">
            <!-- 项目状态栏 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
                <div class="flex justify-between items-center gap-4 flex-wrap">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-xl flex-shrink-0">🔥</div>
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-sm text-gray-500">当前项目：</span>
                                <span id="remake-project-name" class="font-semibold text-gray-800 truncate">未命名项目</span>
                                <span id="remake-project-saved" class="text-xs text-green-600 hidden">✓ 已保存</span>
                            </div>
                            <div id="remake-project-status" class="text-xs text-gray-500 mt-1 flex items-center gap-2 flex-wrap">
                                <span>📝 文案：<b class="text-gray-700" id="remake-status-script">未提取</b></span>
                                <span>🎙️ 配音：<b class="text-gray-700" id="remake-status-voice">未生成</b></span>
                                <span>🎬 视频：<b class="text-gray-700" id="remake-status-video">未生成</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <button onclick="saveRemakeDraft()" class="px-4 py-2 rounded-lg border border-blue-300 text-blue-600 bg-blue-50 hover:bg-blue-100 text-sm font-medium transition">💾 保存草稿</button>
                        <button onclick="newRemakeProject()" class="px-4 py-2 rounded-lg bg-gradient-to-r from-orange-500 to-red-500 text-white hover:from-orange-600 hover:to-red-600 text-sm font-medium transition">➕ 新建项目</button>
                    </div>
                </div>
            </div>
            <!-- 步骤指示器 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
                <div id="remake-stepper" class="flex items-center justify-center w-full"></div>
            </div>
            <!-- 步骤内容区 -->
            <div id="remake-step-content" class="bg-white rounded-lg shadow-sm border border-gray-200 min-h-[400px]"></div>
            <!-- 操作按钮 -->
            <div class="flex justify-between items-center mt-6">
                <button id="remake-prev-btn" onclick="remakePrevStep()" class="px-6 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" disabled>← 上一步</button>
                <div id="remake-step-indicator" class="text-sm text-gray-500"></div>
                <button id="remake-next-btn" onclick="remakeNextStep()" class="px-6 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed">下一步 →</button>
            </div>
        </div>

        <!-- ============ 作品管理 ============ -->
        <div id="tab-works" class="sm-tab-panel hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">我的作品</h3>
                <div class="flex items-center gap-2">
                    <select id="works-filter-status" class="px-3 py-2 border border-gray-300 rounded-lg text-sm" onchange="loadWorks()">
                        <option value="">全部状态</option>
                        <option value="draft">草稿</option>
                        <option value="pending">待发布</option>
                        <option value="publishing">发布中</option>
                        <option value="published">已发布</option>
                        <option value="offline">已下线</option>
                        <option value="failed">发布失败</option>
                    </select>
                    <select id="works-filter-source" class="px-3 py-2 border border-gray-300 rounded-lg text-sm" onchange="loadWorks()">
                        <option value="">全部来源</option>
                        <option value="remake">爆款复刻</option>
                        <option value="ai_workshop">AI车间</option>
                        <option value="digital_human">数字人</option>
                    </select>
                    <input id="works-search" type="text" placeholder="搜索标题..." class="px-3 py-2 border border-gray-300 rounded-lg text-sm w-40" oninput="if(this.value.length>=1||this.value==='')loadWorks()">
                    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition" onclick="switchSMTab('remake', document.querySelector('[data-tab=remake]'))">+ 新建作品</button>
                </div>
            </div>
            <div id="works-list" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                <!-- 作品卡片动态渲染 -->
            </div>
            <div id="works-empty" class="bg-white rounded-lg shadow p-12 text-center text-gray-500 hidden">
                <div class="text-4xl mb-3">🎬</div>
                <p>暂无作品，快去爆款复刻或AI车间生成吧</p>
            </div>
        </div>

        <!-- ============ 精修车间 ============ -->
        <div id="tab-retouch" class="sm-tab-panel hidden">
            <!-- 顶部操作栏 -->
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
                <div style="display:flex; gap:10px;">
                    <button onclick="retouchNew()" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 transition">➕ 新建精修</button>
                    <button onclick="retouchShowTemplates()" class="bg-indigo-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-600 transition">📂 模板</button>
                    <button onclick="retouchSaveTemplate()" class="bg-purple-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-purple-600 transition">📋 保存模板</button>
                    <button onclick="retouchSave()" class="bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition">💾 保存修改</button>
                    <button onclick="retouchGenerate()" class="bg-green-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-green-600 transition">🎬 生成作品</button>
                </div>
            </div>
            <div class="retouch-workshop" style="display:flex; gap:16px; min-height:620px;">
                <!-- 左侧：预览区 + 时间线 -->
                <div class="retouch-left-panel" style="flex:1; display:flex; flex-direction:column; gap:12px;">
                    <!-- 视频预览 -->
                    <div class="retouch-preview-area" style="flex:1; background:background:#f1f5f9; border:1px solid #e5e7eb;; border-radius:12px; display:flex; flex-direction:column; position:relative; overflow:hidden;">
                        <!-- 预览工具栏：场景比例 + 全屏 -->
                        <div style="display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid #e5e7eb;">
                            <div style="display:flex; align-items:center; gap:8px;">
                                <span style="color:#6b7280; font-size:12px;">场景比例</span>
                                <select id="retouch-aspect-ratio" onchange="retouchChangeAspectRatio(this.value)" style="background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:4px 10px; color:#1f2937; font-size:12px; cursor:pointer;">
                                    <option value="original">原始比例</option>
                                    <option value="16:9">16:9 横屏</option>
                                    <option value="9:16">9:16 竖屏</option>
                                    <option value="4:3">4:3</option>
                                    <option value="3:4">3:4</option>
                                    <option value="1:1">1:1 正方</option>
                                    <option value="21:9">21:9 宽屏</option>
                                </select>
                                <button onclick="retouchApplySafeArea()" title="显示/隐藏字幕安全区参考线" style="padding:4px 10px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer;">📐 安全区</button>
                            </div>
                            <div style="display:flex; align-items:center; gap:8px;">
                                <span id="retouch-current-ratio" style="color:#6b7280; font-size:11px;">—</span>
                            </div>
                        </div>
                        <!-- 视频显示区 -->
                        <div style="flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
                        <div id="retouch-video-container" style="position:relative; max-width:100%; max-height:100%;">
                            <video id="retouch-video" style="max-height:420px; border-radius:8px;" controls></video>
                            <!-- 字幕安全区参考线（默认隐藏） -->
                            <div id="retouch-safe-area-overlay" style="position:absolute; pointer-events:none; display:none; z-index:4;">
                                <div style="position:absolute; top:10%; left:10%; right:10%; bottom:10%; border:1px dashed rgba(251,191,36,0.6);"></div>
                                <div style="position:absolute; top:20%; left:20%; right:20%; bottom:20%; border:1px dashed rgba(251,191,36,0.4);"></div>
                                <!-- 字幕安全底线 -->
                                <div style="position:absolute; left:5%; right:5%; bottom:8%; border-top:1px dashed rgba(34,197,94,0.7); padding-top:2px;">
                                    <span style="position:absolute; right:0; top:-14px; color:#22c55e; font-size:10px; background:rgba(0,0,0,0.6); padding:1px 4px; border-radius:3px;">字幕安全区</span>
                                </div>
                            </div>
                            <!-- 文字叠加层（可拖动+缩放） -->
                            <div id="retouch-text-overlay" data-overlay-kind="text" style="position:absolute; top:10%; left:50%; transform:translate(-50%, -50%); color:#fff; padding:4px 14px; border-radius:6px; font-size:24px; font-weight:600; display:none; pointer-events:auto; cursor:move; max-width:80%; text-align:center; z-index:2; text-shadow:0 0 4px rgba(0,0,0,0.8); user-select:none; border:1px dashed rgba(255,255,255,0.4);">
                                <span id="retouch-text-overlay-content"></span>
                                <div class="retouch-overlay-resize" style="position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; background:#3b82f6; border:2px solid #fff; border-radius:3px; cursor:nwse-resize;"></div>
                            </div>
                            <!-- 贴图叠加层（可拖动+缩放） -->
                            <div id="retouch-image-overlay-wrap" data-overlay-kind="image" style="position:absolute; left:80%; top:85%; transform:translate(-50%,-50%); width:160px; display:none; pointer-events:auto; cursor:move; z-index:2; user-select:none; border:1px dashed rgba(255,255,255,0.4); border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.5);">
                                <img id="retouch-image-overlay" draggable="false" style="width:100%; display:block; border-radius:6px; -webkit-user-drag:none; pointer-events:none;">
                                <div class="retouch-overlay-resize" style="position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; background:#3b82f6; border:2px solid #fff; border-radius:3px; cursor:nwse-resize;"></div>
                            </div>
                            <!-- 画中画叠加层（可拖动+缩放，视频） -->
                            <div id="retouch-pip-overlay-wrap" data-overlay-kind="pip" style="position:absolute; left:80%; top:20%; transform:translate(-50%,-50%); width:200px; display:none; pointer-events:auto; cursor:move; z-index:2; user-select:none; border:1px dashed rgba(255,255,255,0.4); border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.5);">
                                <video id="retouch-pip-overlay" muted loop draggable="false" style="width:100%; display:block; border-radius:6px; pointer-events:none;"></video>
                                <div class="retouch-overlay-resize" style="position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; background:#3b82f6; border:2px solid #fff; border-radius:3px; cursor:nwse-resize;"></div>
                            </div>
                            <!-- 可拖拽字幕编辑框（拖动调整位置，右下角手柄调整大小；显示当前句字幕） -->
                            <div id="retouch-subtitle-editor" style="position:absolute; left:50%; top:85%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.55); color:#fff; padding:6px 14px; border-radius:6px; font-size:20px; display:none; cursor:move; user-select:none; white-space:nowrap; z-index:5; border:1px dashed rgba(255,255,255,0.6); pointer-events:auto;" title="拖动字幕框调整位置，拖动右下角手柄调整大小">
                                <span id="retouch-subtitle-editor-text"></span>
                                <div id="retouch-subtitle-resize" style="position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; background:#3b82f6; border:2px solid #fff; border-radius:3px; cursor:nwse-resize;" title="拖动调整字幕大小"></div>
                            </div>
                        </div>
                        <!-- 空状态提示 -->
                        <div id="retouch-empty-hint" style="position:absolute; color:#6b7280; text-align:center;">
                            <div style="font-size:48px; margin-bottom:12px;"></div>
                            <div style="font-size:16px;">请先从作品管理中选择视频进行精修</div>
                        </div>
                        </div>
                    </div>
                    <!-- 时间线 -->
                    <div class="retouch-timeline-area" style="background:background:#f1f5f9; border:1px solid #e5e7eb;; border-radius:12px; padding:12px;">
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                            <span style="color:#6b7280; font-size:12px;">时间线</span>
                            <div style="display:flex; gap:8px; align-items:center;">
                                <button class="retouch-icon-btn" onclick="retouchTogglePlay()" title="播放/暂停">⏯</button>
                                <span id="retouch-time-display" style="color:#6b7280; font-size:12px;">0:00 / 0:00</span>
                            </div>
                        </div>
                        <!-- 时间刻度 -->
                        <div id="retouch-time-ruler" style="height:20px; position:relative; margin-bottom:4px;">
                            <div style="position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;">
                                <span style="color:#6b7280; font-size:10px;">0s</span>
                                <span style="color:#6b7280; font-size:10px;">10s</span>
                                <span style="color:#6b7280; font-size:10px;">20s</span>
                                <span style="color:#6b7280; font-size:10px;">30s</span>
                                <span style="color:#6b7280; font-size:10px;">40s</span>
                                <span style="color:#6b7280; font-size:10px;">50s</span>
                            </div>
                        </div>
                        <!-- 轨道 -->
                        <div id="retouch-tracks" class="retouch-tracks" style="display:flex; flex-direction:column; gap:4px; position:relative;">
                            <!-- 主视频轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">🎬 主视频</div>
                                <div id="retouch-track-video" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 字幕轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">📝 字幕</div>
                                <div id="retouch-track-subtitle" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 旁白轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">🎙️ 旁白</div>
                                <div id="retouch-track-voice" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 画中画轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">🖼️ 画中画</div>
                                <div id="retouch-track-pip" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 贴图轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">🖌️ 贴图</div>
                                <div id="retouch-track-image" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 音乐轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">🎵 音乐</div>
                                <div id="retouch-track-music" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 文字轨 -->
                            <div class="retouch-track" style="height:26px; background:#ffffff; border-radius:4px; position:relative;">
                                <div class="retouch-track-label" style="position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:10px; z-index:1;">📝 文字</div>
                                <div id="retouch-track-text" class="retouch-clips" style="position:absolute; left:56px; right:0; top:2px; height:22px;"></div>
                            </div>
                            <!-- 播放头 -->
                            <div id="retouch-playhead" style="position:absolute; top:0; bottom:0; left:0; width:2px; background:#ef4444; pointer-events:none; z-index:3; display:none;"></div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：编辑面板 -->
                <div class="retouch-right-panel" style="width:420px; background:background:#f1f5f9; border:1px solid #e5e7eb;; border-radius:12px; display:flex; flex-direction:column; overflow:hidden;">
                    <!-- 顶部Tab栏 -->
                    <div class="retouch-tab-bar" style="display:flex; border-bottom:1px solid #e5e7eb; flex-shrink:0;">
                        <button class="retouch-tab-btn active" data-tab="subtitle" onclick="switchRetouchTab('subtitle', this)" style="flex:1; padding:12px 8px; background:none; border:none; border-bottom:2px solid #3b82f6; color:#3b82f6; font-size:14px; cursor:pointer;">字幕</button>
                        <button class="retouch-tab-btn" data-tab="material" onclick="switchRetouchTab('material', this)" style="flex:1; padding:12px 8px; background:none; border:none; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; cursor:pointer;">素材</button>
                        <button class="retouch-tab-btn" data-tab="text" onclick="switchRetouchTab('text', this)" style="flex:1; padding:12px 8px; background:none; border:none; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; cursor:pointer;">文字</button>
                        <button class="retouch-tab-btn" data-tab="music" onclick="switchRetouchTab('music', this)" style="flex:1; padding:12px 8px; background:none; border:none; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; cursor:pointer;">音乐</button>
                    </div>

                    <!-- Tab内容区 -->
                    <div class="retouch-tab-panels" style="flex:1; overflow-y:auto; padding:16px;">

                        <!-- ===== 字幕 Tab ===== -->
                        <div id="retouch-panel-subtitle" class="retouch-panel">
                            <!-- 视频字幕列表 -->
                            <div style="margin-bottom:20px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">视频字幕</span>
                                    <button class="retouch-btn-outline" onclick="retouchReidentifySubtitles()" style="font-size:13px; padding:6px 14px; color:#ffffff; background:#3b82f6; border:1px solid #3b82f6; border-radius:6px; font-weight:500;">重新识别并对齐</button>
                                </div>
                                <div style="color:#6b7280; font-size:12px; margin-bottom:10px;" id="retouch-subtitle-count">暂无字幕</div>
                                <div id="retouch-subtitle-list" style="display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto;">
                                    <!-- 动态渲染 -->
                                </div>
                            </div>

                            <!-- 字幕样式 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">字幕样式</span>
                                    <span style="color:#6b7280; font-size:12px;">拖动画面里的字幕框可直接调整位置和大小。</span>
                                </div>
                                <!-- 字体 & 字号 -->
                                <div style="display:flex; gap:12px; margin-bottom:12px;">
                                    <div style="flex:1;">
                                        <label style="color:#6b7280; font-size:12px; display:block; margin-bottom:4px;">字体</label>
                                        <select id="retouch-subtitle-font" class="retouch-select" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;" onchange="retouchState.subtitleStyle.font=this.value; retouchSyncPlayback(); retouchSave();">
                                            <option value="PingFang SC">PingFang SC</option>
                                            <option value="Microsoft YaHei">微软雅黑</option>
                                            <option value="SimHei">黑体</option>
                                            <option value="STKaiti">楷体</option>
                                            <option value="STSong">宋体</option>
                                        </select>
                                    </div>
                                    <div style="flex:1;">
                                        <label style="color:#6b7280; font-size:12px; display:block; margin-bottom:4px;">字号</label>
                                        <div style="display:flex; align-items:center; gap:8px;">
                                            <input type="range" id="retouch-subtitle-fontsize" min="12" max="72" value="20" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.fontSize=parseInt(this.value);document.getElementById('retouch-fontsize-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                            <span id="retouch-fontsize-val" style="color:#1f2937; font-size:13px; min-width:24px;">20</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 对齐方式 -->
                                <div style="display:flex; gap:6px; margin-bottom:12px;">
                                    <button class="retouch-align-btn" data-align="left" onclick="retouchSetAlign('left', this)" style="flex:1; padding:6px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer;">左对齐</button>
                                    <button class="retouch-align-btn active" data-align="center" onclick="retouchSetAlign('center', this)" style="flex:1; padding:6px; background:#3b82f6; border:1px solid #3b82f6; border-radius:6px; color:#fff; font-size:12px; cursor:pointer;">居中</button>
                                    <button class="retouch-align-btn" data-align="right" onclick="retouchSetAlign('right', this)" style="flex:1; padding:6px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer;">右对齐</button>
                                </div>
                                <!-- 粗体/斜体/下划线 -->
                                <div style="display:flex; gap:6px; margin-bottom:12px;">
                                    <button class="retouch-style-btn" data-style="bold" onclick="retouchToggleStyle('bold', this)" style="flex:1; padding:6px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:13px; font-weight:bold; cursor:pointer;">B</button>
                                    <button class="retouch-style-btn" data-style="italic" onclick="retouchToggleStyle('italic', this)" style="flex:1; padding:6px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:13px; font-style:italic; cursor:pointer;">I</button>
                                    <button class="retouch-style-btn" data-style="underline" onclick="retouchToggleStyle('underline', this)" style="flex:1; padding:6px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:13px; text-decoration:underline; cursor:pointer;">U</button>
                                </div>
                                <!-- 文字颜色 & 背景色 -->
                                <div style="display:flex; gap:12px; margin-bottom:16px;">
                                    <div style="flex:1;">
                                        <label style="color:#6b7280; font-size:12px; display:block; margin-bottom:4px;">文字</label>
                                        <div style="display:flex; align-items:center; gap:6px;">
                                            <input type="color" id="retouch-subtitle-color" value="#ffffff" style="width:32px; height:32px; border:none; border-radius:4px; cursor:pointer; background:none;" oninput="retouchState.subtitleStyle.color=this.value;retouchSyncPlayback();retouchSave();">
                                            <span style="color:#6b7280; font-size:11px;">■</span>
                                        </div>
                                    </div>
                                    <div style="flex:1;">
                                        <label style="color:#6b7280; font-size:12px; display:block; margin-bottom:4px;">背景</label>
                                        <div style="display:flex; align-items:center; gap:6px;">
                                            <input type="color" id="retouch-subtitle-bg" value="#000000" style="width:32px; height:32px; border:none; border-radius:4px; cursor:pointer; background:none;" oninput="retouchState.subtitleStyle.bg=this.value;retouchSyncPlayback();retouchSave();">
                                            <button id="retouch-subtitle-bg-transparent" onclick="retouchSetBgTransparent(this)" title="背景设为透明" style="width:32px; height:32px; border:1px solid #e5e7eb; border-radius:4px; cursor:pointer; font-size:11px; color:#6b7280; background:repeating-conic-gradient(#3a3f47 0% 25%, #ffffff 0% 50%) 50% / 10px 10px;">透</button>
                                            <span style="color:#6b7280; font-size:11px;">■</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 字幕样式预设 -->
                                <div style="margin-bottom:16px;">
                                    <div style="display:flex; gap:8px; flex-wrap:wrap;" id="retouch-subtitle-presets">
                                        <!-- 动态渲染预设样式 -->
                                    </div>
                                </div>

                                <!-- 高级样式：描边/阴影/不透明度/字间距/行间距/旋转 -->
                                <div style="border-top:1px solid #e5e7eb; padding-top:12px;">
                                    <div style="color:#6b7280; font-size:12px; margin-bottom:8px;">高级样式</div>
                                    <!-- 描边 -->
                                    <div style="display:flex; gap:12px; align-items:center; margin-bottom:8px;">
                                        <div style="flex:1; display:flex; align-items:center; gap:8px;">
                                            <label style="color:#6b7280; font-size:12px; min-width:48px;">描边</label>
                                            <input type="range" id="retouch-subtitle-stroke" min="0" max="6" step="0.5" value="2" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.stroke=parseFloat(this.value);document.getElementById('retouch-stroke-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                            <span id="retouch-stroke-val" style="color:#1f2937; font-size:12px; min-width:24px;">2</span>
                                        </div>
                                        <div style="display:flex; align-items:center; gap:6px;">
                                            <label style="color:#6b7280; font-size:11px;">色</label>
                                            <input type="color" id="retouch-subtitle-stroke-color" value="#000000" style="width:28px; height:28px; border:none; border-radius:4px; cursor:pointer; background:none;" oninput="retouchState.subtitleStyle.strokeColor=this.value;retouchSyncPlayback();retouchSave();">
                                        </div>
                                    </div>
                                    <!-- 阴影 -->
                                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                        <label style="color:#6b7280; font-size:12px; min-width:48px;">阴影</label>
                                        <input type="range" id="retouch-subtitle-shadow" min="0" max="10" step="0.5" value="0" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.shadow=parseFloat(this.value);document.getElementById('retouch-shadow-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                        <span id="retouch-shadow-val" style="color:#1f2937; font-size:12px; min-width:24px;">0</span>
                                    </div>
                                    <!-- 背景不透明度 -->
                                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                        <label style="color:#6b7280; font-size:12px; min-width:48px;">背景透</label>
                                        <input type="range" id="retouch-subtitle-bg-opacity" min="0" max="1" step="0.05" value="1" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.bgOpacity=parseFloat(this.value);document.getElementById('retouch-bg-opacity-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                        <span id="retouch-bg-opacity-val" style="color:#1f2937; font-size:12px; min-width:24px;">1</span>
                                    </div>
                                    <!-- 文字不透明度 -->
                                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                        <label style="color:#6b7280; font-size:12px; min-width:48px;">文字透</label>
                                        <input type="range" id="retouch-subtitle-opacity" min="0.1" max="1" step="0.05" value="1" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.opacity=parseFloat(this.value);document.getElementById('retouch-opacity-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                        <span id="retouch-opacity-val" style="color:#1f2937; font-size:12px; min-width:24px;">1</span>
                                    </div>
                                    <!-- 字间距 -->
                                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                        <label style="color:#6b7280; font-size:12px; min-width:48px;">字间距</label>
                                        <input type="range" id="retouch-subtitle-letter-spacing" min="-5" max="20" step="0.5" value="0" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.letterSpacing=parseFloat(this.value);document.getElementById('retouch-letter-spacing-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                        <span id="retouch-letter-spacing-val" style="color:#1f2937; font-size:12px; min-width:24px;">0</span>
                                    </div>
                                    <!-- 行间距 -->
                                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                        <label style="color:#6b7280; font-size:12px; min-width:48px;">行间距</label>
                                        <input type="range" id="retouch-subtitle-line-height" min="0.8" max="3" step="0.1" value="1.4" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.lineHeight=parseFloat(this.value);document.getElementById('retouch-line-height-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                        <span id="retouch-line-height-val" style="color:#1f2937; font-size:12px; min-width:24px;">1.4</span>
                                    </div>
                                    <!-- 旋转 -->
                                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                                        <label style="color:#6b7280; font-size:12px; min-width:48px;">旋转</label>
                                        <input type="range" id="retouch-subtitle-rotate" min="-45" max="45" step="1" value="0" style="flex:1; accent-color:#3b82f6;" oninput="retouchState.subtitleStyle.rotate=parseInt(this.value);document.getElementById('retouch-rotate-val').textContent=this.value;retouchSyncPlayback();retouchSave();">
                                        <span id="retouch-rotate-val" style="color:#1f2937; font-size:12px; min-width:24px;">0°</span>
                                    </div>
                                    <!-- 位置/尺寸精确输入 -->
                                    <div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; margin-top:4px; padding-top:8px; border-top:1px dashed #e5e7eb;">
                                        <div>
                                            <label style="color:#6b7280; font-size:10px; display:block; margin-bottom:2px;">X (%)</label>
                                            <input type="number" id="retouch-subtitle-pos-x" value="50" min="0" max="100" step="0.1" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:4px; padding:4px 6px; color:#1f2937; font-size:12px;" oninput="retouchState.subtitleStyle.pos_x=parseFloat(this.value);retouchSyncPlayback();retouchSave();">
                                        </div>
                                        <div>
                                            <label style="color:#6b7280; font-size:10px; display:block; margin-bottom:2px;">Y (%)</label>
                                            <input type="number" id="retouch-subtitle-pos-y" value="85" min="0" max="100" step="0.1" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:4px; padding:4px 6px; color:#1f2937; font-size:12px;" oninput="retouchState.subtitleStyle.pos_y=parseFloat(this.value);retouchSyncPlayback();retouchSave();">
                                        </div>
                                        <div>
                                            <label style="color:#6b7280; font-size:10px; display:block; margin-bottom:2px;">宽 (%)</label>
                                            <input type="number" id="retouch-subtitle-width" value="80" min="10" max="100" step="1" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:4px; padding:4px 6px; color:#1f2937; font-size:12px;" oninput="retouchState.subtitleStyle.width=parseFloat(this.value);retouchSyncPlayback();retouchSave();">
                                        </div>
                                        <div>
                                            <label style="color:#6b7280; font-size:10px; display:block; margin-bottom:2px;">高 (px)</label>
                                            <input type="number" id="retouch-subtitle-height" value="0" min="0" max="200" step="1" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:4px; padding:4px 6px; color:#1f2937; font-size:12px;" oninput="retouchState.subtitleStyle.height=parseFloat(this.value);retouchSyncPlayback();retouchSave();">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ===== 素材 Tab ===== -->
                        <div id="retouch-panel-material" class="retouch-panel" hidden>
                            <!-- 素材贴片 -->
                            <div style="margin-bottom:20px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">素材贴片</span>
                                    <span style="color:#6b7280; font-size:12px;">图片拖到贴图轨道，视频拖到画中画轨道。</span>
                                </div>
                            </div>
                            <!-- 图片素材 -->
                            <div style="margin-bottom:16px;">
                                <div style="color:#6b7280; font-size:12px; margin-bottom:8px;">图片素材</div>
                                <div style="background:#ffffff; border:2px dashed #e5e7eb; border-radius:8px; padding:20px; text-align:center;">
                                    <div style="color:#6b7280; font-size:13px; margin-bottom:4px;">还没有图片素材</div>
                                    <div style="color:#6b7280; font-size:11px; margin-bottom:12px;">上传 logo、贴纸或产品图后，可直接拖到画面里编辑。</div>
                                    <button class="retouch-btn-primary" onclick="document.getElementById('retouch-image-upload').click()" style="padding:8px 20px; background:#3b82f6; color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer;">去上传图片素材</button>
                                    <input type="file" id="retouch-image-upload" accept="image/*" multiple style="display:none;" onchange="retouchHandleImageUpload(event)">
                                </div>
                            </div>
                            <!-- 画中画素材 -->
                            <div style="margin-bottom:20px;">
                                <div style="color:#6b7280; font-size:12px; margin-bottom:8px;">画中画素材</div>
                                <button class="retouch-btn-outline" onclick="document.getElementById('retouch-pip-upload').click()" style="padding:6px 14px; background:none; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer; margin-bottom:8px;">+ 加载画中画素材</button>
                                <input type="file" id="retouch-pip-upload" accept="video/*" multiple style="display:none;" onchange="retouchHandlePipUpload(event)">
                                <div style="color:#6b7280; font-size:12px;">还没有精彩片段，先新增一个贴图或画中画片段，或把素材直接拖到对应轨道上。</div>
                            </div>

                            <!-- 当前主视频片段 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px; margin-bottom:16px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">当前主视频片段</span>
                                    <span style="color:#6b7280; font-size:12px;" id="retouch-source-range">源素材 0.00s - 53.00s</span>
                                </div>
                                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;">
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">源起点</label>
                                        <input type="number" id="retouch-src-start" value="0" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">源终点</label>
                                        <input type="number" id="retouch-src-end" value="53" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">时间轴起点</label>
                                        <input type="number" id="retouch-tl-start" value="0" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">时间轴终点</label>
                                        <input type="number" id="retouch-tl-end" value="53" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                </div>
                                <button class="retouch-btn-outline" onclick="retouchResetClip()" style="padding:6px 14px; background:none; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer;">恢复片头</button>
                            </div>

                            <!-- 主视频 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px;">
                                <span style="color:#1f2937; font-size:14px; font-weight:600; display:block; margin-bottom:12px;">主视频</span>
                                <div style="color:#6b7280; font-size:12px; margin-bottom:8px;">插入视频素材</div>
                                <select id="retouch-main-video-select" class="retouch-select" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:8px 10px; color:#6b7280; font-size:13px; margin-bottom:12px;" onchange="retouchSelectMainVideo(this.value)">
                                    <option value="">请选择一个视频素材插入到主视频轨</option>
                                </select>
                                <div id="retouch-main-clip-list" style="display:flex; flex-direction:column; gap:6px;">
                                    <div class="retouch-clip-item" style="background:#dbeafe; border:1px solid #bfdbfe; border-radius:6px; padding:10px 12px;">
                                        <div style="color:#1d4ed8; font-size:12px; font-weight:600;">主视频片段 1</div>
                                        <div style="color:#6b7280; font-size:11px;">0.0s - 53.0s</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ===== 文字 Tab ===== -->
                        <div id="retouch-panel-text" class="retouch-panel" hidden>
                            <!-- 文字片段 -->
                            <div style="margin-bottom:20px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">文字片段</span>
                                    <span style="color:#6b7280; font-size:12px;">新增一段文字后，可设置出现时间、样式和位置。</span>
                                </div>
                            </div>
                            <button class="retouch-btn-primary" onclick="retouchAddText()" style="padding:8px 20px; background:#3b82f6; color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer; margin-bottom:12px;">新增文字</button>
                            <div id="retouch-text-list" style="color:#6b7280; font-size:13px; margin-bottom:20px;">还没有选中文字片段。</div>

                            <!-- 当前主视频片段 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px; margin-bottom:16px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">当前主视频片段</span>
                                    <span style="color:#6b7280; font-size:12px;" id="retouch-source-range-text">源素材 0.00s - 53.00s</span>
                                </div>
                                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;">
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">源起点</label>
                                        <input type="number" value="0" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">源终点</label>
                                        <input type="number" value="53" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">时间轴起点</label>
                                        <input type="number" value="0" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">时间轴终点</label>
                                        <input type="number" value="53" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                </div>
                                <button class="retouch-btn-outline" onclick="retouchResetClip()" style="padding:6px 14px; background:none; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer;">恢复片头</button>
                            </div>

                            <!-- 主视频 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px;">
                                <span style="color:#1f2937; font-size:14px; font-weight:600; display:block; margin-bottom:12px;">主视频</span>
                                <div style="color:#6b7280; font-size:12px; margin-bottom:8px;">插入视频素材</div>
                                <select class="retouch-select" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:8px 10px; color:#6b7280; font-size:13px; margin-bottom:12px;">
                                    <option value="">请选择一个视频素材插入到主视频轨</option>
                                </select>
                                <div style="display:flex; flex-direction:column; gap:6px;">
                                    <div class="retouch-clip-item" style="background:#dbeafe; border:1px solid #bfdbfe; border-radius:6px; padding:10px 12px;">
                                        <div style="color:#1d4ed8; font-size:12px; font-weight:600;">主视频片段 1</div>
                                        <div style="color:#6b7280; font-size:11px;">0.0s - 53.0s</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ===== 音乐 Tab ===== -->
                        <div id="retouch-panel-music" class="retouch-panel" hidden>
                            <!-- 背景音乐 -->
                            <div style="margin-bottom:16px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">背景音乐</span>
                                    <span style="color:#6b7280; font-size:12px;">从资产音频素材中选择，合成时混音。</span>
                                </div>
                            </div>
                            <div style="display:flex; gap:8px; margin-bottom:12px;">
                                <input type="text" id="retouch-music-search" placeholder="搜索音乐标题" class="retouch-search-input" style="flex:1; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:8px 12px; color:#1f2937; font-size:13px;" oninput="retouchSearchMusic(this.value)">
                                <button onclick="document.getElementById('retouch-music-upload').click()" style="padding:8px 14px; background:none; border:1px solid #3b82f6; border-radius:6px; color:#60a5fa; font-size:12px; cursor:pointer; white-space:nowrap;">+ 上传音乐</button>
                                <input type="file" id="retouch-music-upload" accept="audio/*" style="display:none;" onchange="retouchUploadMusic(event)">
                            </div>

                            <div id="retouch-music-list" style="display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto;">
                                <!-- 动态渲染 -->
                            </div>
                            <audio id="retouch-music-preview" controls style="width:100%; margin-top:10px; display:none;"></audio>

                            <!-- 当前主视频片段 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px; margin-top:16px; margin-bottom:16px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                                    <span style="color:#1f2937; font-size:14px; font-weight:600;">当前主视频片段</span>
                                    <span style="color:#6b7280; font-size:12px;" id="retouch-source-range-music">源素材 0.00s - 53.00s</span>
                                </div>
                                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;">
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">源起点</label>
                                        <input type="number" value="0" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">源终点</label>
                                        <input type="number" value="53" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">时间轴起点</label>
                                        <input type="number" value="0" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                    <div>
                                        <label style="color:#6b7280; font-size:11px; display:block; margin-bottom:3px;">时间轴终点</label>
                                        <input type="number" value="53" step="0.1" min="0" class="retouch-input-num" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:6px 10px; color:#1f2937; font-size:13px;">
                                    </div>
                                </div>
                                <button class="retouch-btn-outline" onclick="retouchResetClip()" style="padding:6px 14px; background:none; border:1px solid #e5e7eb; border-radius:6px; color:#6b7280; font-size:12px; cursor:pointer;">恢复片头</button>
                            </div>

                            <!-- 主视频 -->
                            <div style="border-top:1px solid #e5e7eb; padding-top:16px;">
                                <span style="color:#1f2937; font-size:14px; font-weight:600; display:block; margin-bottom:12px;">主视频</span>
                                <div style="color:#6b7280; font-size:12px; margin-bottom:8px;">插入视频素材</div>
                                <select class="retouch-select" style="width:100%; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; padding:8px 10px; color:#6b7280; font-size:13px; margin-bottom:12px;">
                                    <option value="">请选择一个视频素材插入到主视频轨</option>
                                </select>
                                <div style="display:flex; flex-direction:column; gap:6px;">
                                    <div class="retouch-clip-item" style="background:#dbeafe; border:1px solid #bfdbfe; border-radius:6px; padding:10px 12px;">
                                        <div style="color:#1d4ed8; font-size:12px; font-weight:600;">主视频片段 1</div>
                                        <div style="color:#6b7280; font-size:11px;">0.0s - 53.0s</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- ========== 弹窗 ========== -->
    <!-- 链接解析弹窗（爆款复刻使用） -->
    <div id="parse-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-8 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <h2 class="text-2xl font-semibold mb-4">🔗 链接解析</h2>
            <form id="parse-form" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">链接地址 *</label>
                    <input type="url" name="url" required placeholder="https://..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div class="flex gap-4">
                    <button type="submit" class="flex-1 bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">解析链接</button>
                    <button type="button" onclick="closeParseModal()" class="flex-1 bg-gray-300 text-gray-700 py-2 rounded hover:bg-gray-400 transition">取消</button>
                </div>
            </form>
            <div id="parse-result" class="mt-6 hidden">
                <h3 class="text-lg font-semibold mb-2">解析结果</h3>
                <div id="parse-content" class="bg-gray-50 p-4 rounded-lg"></div>
                <button onclick="saveParsedContent()" class="mt-4 bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">保存素材</button>
            </div>
        </div>
    </div>

    <style>
        .sm-tab {
            flex: 1; padding: 10px 16px; font-size: 14px; font-weight: 500; border: none;
            background: transparent; color: #64748b; border-radius: 8px; cursor: pointer;
            transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .sm-tab:hover { color: #334155; background: #f1f5f9; }
        .sm-tab.active { background: #3b82f6; color: white; }
        .sm-tab-icon { font-size: 16px; }
        .sm-tab-panel { display: block; }
        .sm-tab-panel.hidden { display: none; }
        .sm-subtab {
            padding: 8px 16px; font-size: 13px; font-weight: 500; border: none;
            background: transparent; color: #64748b; border-radius: 6px; cursor: pointer;
            transition: all 0.2s; display: flex; align-items: center; gap: 6px;
        }
        .sm-subtab:hover { color: #334155; background: #f1f5f9; }
        .sm-subtab.active { background: #3b82f6; color: white; }
    /* ===== UI 精修：统一设计语言 ===== */
    .sm-tab, .sm-subtab { transition: all 0.2s ease; }
    .retouch-workshop .retouch-left-panel, .retouch-right-panel, .retouch-preview-area, .retouch-timeline-area { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
    </style>

{% endblock %}

{% block extra_js %}
<script src="/static/js/self_media.js?v=23"></script>
{% endblock %}